sibujs 1.5.0 → 2.1.0

package/dist/widgets.d.cts

@@ -16,6 +16,14 @@ declare function combobox<T>(options: ComboboxOptions<T>): {
     isOpen: () => boolean;
     open: () => void;
     close: () => void;
+    /** WAI-ARIA Combobox 1.2 wiring: `role=combobox` on input,
+     *  `aria-expanded`/`aria-controls`/`aria-activedescendant`, listbox option
+     *  ids, Down/Up/Enter/Escape/Home/End. Returns dispose. */
+    bind: (els: {
+        input: HTMLInputElement;
+        listbox: HTMLElement;
+        option: (item: T, index: number) => HTMLElement | null;
+    }) => () => void;
 };
 
 interface TabsOptions {
@@ -26,6 +34,15 @@ interface TabsOptions {
     }>;
     defaultTab?: string;
 }
+interface TabsAriaBinding {
+    /** WAI-ARIA Tabs pattern — wires `role`/`aria-*` and arrow/Home/End keys
+     *  to the provided tablist + per-tab elements. Returns dispose. */
+    bind: (els: {
+        tablist: HTMLElement;
+        tabs: Record<string, HTMLElement>;
+        panels?: Record<string, HTMLElement>;
+    }) => () => void;
+}
 declare function tabs(options: TabsOptions): {
     activeTab: () => string;
     setActiveTab: (id: string) => void;
@@ -38,6 +55,7 @@ declare function tabs(options: TabsOptions): {
     nextTab: () => void;
     prevTab: () => void;
     isActive: (id: string) => boolean;
+    bind: TabsAriaBinding["bind"];
 };
 
 interface AccordionOptions {
@@ -48,6 +66,18 @@ interface AccordionOptions {
     multiple?: boolean;
     defaultExpanded?: string[];
 }
+interface AccordionAriaBinding {
+    /** WAI-ARIA Accordion pattern — wires `aria-expanded`/`aria-controls`,
+     *  Enter/Space toggle, and panel `role=region`. Returns dispose.
+     *  Pass `root` (any stable container element) to anchor the WeakMap
+     *  idempotency key — without it, double-bind detection falls back to
+     *  the first trigger and breaks if items re-render. */
+    bind: (els: {
+        root?: HTMLElement;
+        triggers: Record<string, HTMLElement>;
+        panels: Record<string, HTMLElement>;
+    }) => () => void;
+}
 declare function accordion(options: AccordionOptions): {
     items: () => Array<{
         id: string;
@@ -60,6 +90,7 @@ declare function accordion(options: AccordionOptions): {
     expandAll: () => void;
     collapseAll: () => void;
     isExpanded: (id: string) => boolean;
+    bind: AccordionAriaBinding["bind"];
 };
 
 /**
@@ -71,12 +102,22 @@ declare function popover(): {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    /** WAI-ARIA non-modal dialog wiring: `role=dialog`, `aria-expanded` on
+     *  trigger, Escape closes, click-outside closes. Returns dispose. */
+    bind: (els: {
+        trigger: HTMLElement;
+        popover: HTMLElement;
+        labelledBy?: HTMLElement;
+    }) => () => void;
 };
 
 interface SelectOptions<T> {
     items: T[];
     multiple?: boolean;
     itemToString?: (item: T) => string;
+    /** Optional predicate marking items as disabled — such items are skipped
+     *  by `highlightNext`/`highlightPrev`/typeahead and rejected by `select`. */
+    isDisabled?: (item: T) => boolean;
 }
 declare function select<T>(options: SelectOptions<T>): {
     selectedItems: () => T[];
@@ -93,6 +134,14 @@ declare function select<T>(options: SelectOptions<T>): {
     highlightPrev: () => void;
     selectHighlighted: () => void;
     clear: () => void;
+    /** WAI-ARIA Listbox wiring: `role=listbox`, `aria-multiselectable`,
+     *  `aria-selected`/`aria-activedescendant`, arrow + Home/End/Enter/Space
+     *  + typeahead. Returns dispose. */
+    bind: (els: {
+        listbox: HTMLElement;
+        option: (item: T, index: number) => HTMLElement | null;
+        itemToString?: (item: T) => string;
+    }) => () => void;
 };
 
 /**
@@ -101,12 +150,19 @@ declare function select<T>(options: SelectOptions<T>): {
  */
 declare function tooltip(options?: {
     delay?: number;
+    hideDelay?: number;
 }): {
     isVisible: () => boolean;
     show: () => void;
     hide: () => void;
     content: () => string;
     setContent: (text: string) => void;
+    /** WAI-ARIA Tooltip pattern — wires `role=tooltip`, `aria-describedby`,
+     *  Escape-to-dismiss, and pointer hover-grace per WCAG 1.4.13. */
+    bind: (els: {
+        trigger: HTMLElement;
+        tooltip: HTMLElement;
+    }) => () => void;
 };
 
 interface FileUploadOptions {
@@ -123,8 +179,37 @@ declare function fileUpload(options?: FileUploadOptions): {
     errors: () => string[];
     isDragOver: () => boolean;
     setDragOver: (v: boolean) => void;
+    /** Wires native file input + drop zone with proper labeling, hint
+     *  description, and keyboard activation. Returns dispose. */
+    bind: (els: {
+        input: HTMLInputElement;
+        dropZone?: HTMLElement;
+        hint?: HTMLElement;
+        errorRegion?: HTMLElement;
+    }) => () => void;
 };
 
+/**
+ * Options for `setContent`.
+ *
+ * WARNING: passing `sanitize: false` bypasses the built-in protection and
+ * requires the caller to guarantee the HTML has already been sanitized with
+ * a trusted library. Any untrusted input that reaches `setContent` with
+ * `sanitize: false` is an XSS vector.
+ */
+interface SetContentOptions {
+    /** Raw HTML to assign. Sanitized by default (tags are stripped). */
+    html?: string;
+    /** Plain text. Always safe — assigned via `textContent`. */
+    text?: string;
+    /**
+     * When true (default), `html` is run through the framework's HTML
+     * stripper before assignment — tags are removed, only text content is
+     * preserved. Set to `false` ONLY when `html` has already been sanitized
+     * with a dedicated library (e.g. DOMPurify).
+     */
+    sanitize?: boolean;
+}
 /**
  * contentEditable provides reactive binding for contenteditable elements.
  *
@@ -134,7 +219,18 @@ declare function fileUpload(options?: FileUploadOptions): {
  */
 declare function contentEditable(): {
     content: () => string;
-    setContent: (html: string) => void;
+    /**
+     * Update the reactive content value.
+     *
+     * - `setContent("<b>x</b>")` — LEGACY: treated as `{ html, sanitize: true }`.
+     *   The HTML is stripped to text by default to prevent XSS. Prefer the
+     *   options form below.
+     * - `setContent({ text: "hello" })` — plain text, always safe.
+     * - `setContent({ html, sanitize: true })` — sanitized HTML (default).
+     * - `setContent({ html, sanitize: false })` — raw HTML; the caller MUST
+     *   have pre-sanitized it with a trusted library (e.g. DOMPurify).
+     */
+    setContent: (input: string | SetContentOptions) => void;
     isFocused: () => boolean;
     setFocused: (v: boolean) => void;
     bold: () => void;
@@ -165,6 +261,12 @@ declare function datePicker(options?: DatePickerOptions): {
     }>;
     isDateDisabled: (date: Date) => boolean;
     isSelected: (date: Date) => boolean;
+    /** WAI-ARIA Date Picker dialog grid wiring: `role=grid`, arrow nav,
+     *  PageUp/Down (month), Shift+PageUp/Down (year), Home/End. */
+    bind: (els: {
+        grid: HTMLElement;
+        cell: (date: Date) => HTMLElement | null;
+    }) => () => void;
 };
 
-export { type AccordionOptions, type ComboboxOptions, type DatePickerOptions, type FileUploadOptions, type SelectOptions, type TabsOptions, accordion, combobox, contentEditable, datePicker, fileUpload, popover, select, tabs, tooltip };
+export { type AccordionAriaBinding, type AccordionOptions, type ComboboxOptions, type DatePickerOptions, type FileUploadOptions, type SelectOptions, type SetContentOptions, type TabsAriaBinding, type TabsOptions, accordion, combobox, contentEditable, datePicker, fileUpload, popover, select, tabs, tooltip };

package/dist/widgets.d.ts

@@ -16,6 +16,14 @@ declare function combobox<T>(options: ComboboxOptions<T>): {
     isOpen: () => boolean;
     open: () => void;
     close: () => void;
+    /** WAI-ARIA Combobox 1.2 wiring: `role=combobox` on input,
+     *  `aria-expanded`/`aria-controls`/`aria-activedescendant`, listbox option
+     *  ids, Down/Up/Enter/Escape/Home/End. Returns dispose. */
+    bind: (els: {
+        input: HTMLInputElement;
+        listbox: HTMLElement;
+        option: (item: T, index: number) => HTMLElement | null;
+    }) => () => void;
 };
 
 interface TabsOptions {
@@ -26,6 +34,15 @@ interface TabsOptions {
     }>;
     defaultTab?: string;
 }
+interface TabsAriaBinding {
+    /** WAI-ARIA Tabs pattern — wires `role`/`aria-*` and arrow/Home/End keys
+     *  to the provided tablist + per-tab elements. Returns dispose. */
+    bind: (els: {
+        tablist: HTMLElement;
+        tabs: Record<string, HTMLElement>;
+        panels?: Record<string, HTMLElement>;
+    }) => () => void;
+}
 declare function tabs(options: TabsOptions): {
     activeTab: () => string;
     setActiveTab: (id: string) => void;
@@ -38,6 +55,7 @@ declare function tabs(options: TabsOptions): {
     nextTab: () => void;
     prevTab: () => void;
     isActive: (id: string) => boolean;
+    bind: TabsAriaBinding["bind"];
 };
 
 interface AccordionOptions {
@@ -48,6 +66,18 @@ interface AccordionOptions {
     multiple?: boolean;
     defaultExpanded?: string[];
 }
+interface AccordionAriaBinding {
+    /** WAI-ARIA Accordion pattern — wires `aria-expanded`/`aria-controls`,
+     *  Enter/Space toggle, and panel `role=region`. Returns dispose.
+     *  Pass `root` (any stable container element) to anchor the WeakMap
+     *  idempotency key — without it, double-bind detection falls back to
+     *  the first trigger and breaks if items re-render. */
+    bind: (els: {
+        root?: HTMLElement;
+        triggers: Record<string, HTMLElement>;
+        panels: Record<string, HTMLElement>;
+    }) => () => void;
+}
 declare function accordion(options: AccordionOptions): {
     items: () => Array<{
         id: string;
@@ -60,6 +90,7 @@ declare function accordion(options: AccordionOptions): {
     expandAll: () => void;
     collapseAll: () => void;
     isExpanded: (id: string) => boolean;
+    bind: AccordionAriaBinding["bind"];
 };
 
 /**
@@ -71,12 +102,22 @@ declare function popover(): {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    /** WAI-ARIA non-modal dialog wiring: `role=dialog`, `aria-expanded` on
+     *  trigger, Escape closes, click-outside closes. Returns dispose. */
+    bind: (els: {
+        trigger: HTMLElement;
+        popover: HTMLElement;
+        labelledBy?: HTMLElement;
+    }) => () => void;
 };
 
 interface SelectOptions<T> {
     items: T[];
     multiple?: boolean;
     itemToString?: (item: T) => string;
+    /** Optional predicate marking items as disabled — such items are skipped
+     *  by `highlightNext`/`highlightPrev`/typeahead and rejected by `select`. */
+    isDisabled?: (item: T) => boolean;
 }
 declare function select<T>(options: SelectOptions<T>): {
     selectedItems: () => T[];
@@ -93,6 +134,14 @@ declare function select<T>(options: SelectOptions<T>): {
     highlightPrev: () => void;
     selectHighlighted: () => void;
     clear: () => void;
+    /** WAI-ARIA Listbox wiring: `role=listbox`, `aria-multiselectable`,
+     *  `aria-selected`/`aria-activedescendant`, arrow + Home/End/Enter/Space
+     *  + typeahead. Returns dispose. */
+    bind: (els: {
+        listbox: HTMLElement;
+        option: (item: T, index: number) => HTMLElement | null;
+        itemToString?: (item: T) => string;
+    }) => () => void;
 };
 
 /**
@@ -101,12 +150,19 @@ declare function select<T>(options: SelectOptions<T>): {
  */
 declare function tooltip(options?: {
     delay?: number;
+    hideDelay?: number;
 }): {
     isVisible: () => boolean;
     show: () => void;
     hide: () => void;
     content: () => string;
     setContent: (text: string) => void;
+    /** WAI-ARIA Tooltip pattern — wires `role=tooltip`, `aria-describedby`,
+     *  Escape-to-dismiss, and pointer hover-grace per WCAG 1.4.13. */
+    bind: (els: {
+        trigger: HTMLElement;
+        tooltip: HTMLElement;
+    }) => () => void;
 };
 
 interface FileUploadOptions {
@@ -123,8 +179,37 @@ declare function fileUpload(options?: FileUploadOptions): {
     errors: () => string[];
     isDragOver: () => boolean;
     setDragOver: (v: boolean) => void;
+    /** Wires native file input + drop zone with proper labeling, hint
+     *  description, and keyboard activation. Returns dispose. */
+    bind: (els: {
+        input: HTMLInputElement;
+        dropZone?: HTMLElement;
+        hint?: HTMLElement;
+        errorRegion?: HTMLElement;
+    }) => () => void;
 };
 
+/**
+ * Options for `setContent`.
+ *
+ * WARNING: passing `sanitize: false` bypasses the built-in protection and
+ * requires the caller to guarantee the HTML has already been sanitized with
+ * a trusted library. Any untrusted input that reaches `setContent` with
+ * `sanitize: false` is an XSS vector.
+ */
+interface SetContentOptions {
+    /** Raw HTML to assign. Sanitized by default (tags are stripped). */
+    html?: string;
+    /** Plain text. Always safe — assigned via `textContent`. */
+    text?: string;
+    /**
+     * When true (default), `html` is run through the framework's HTML
+     * stripper before assignment — tags are removed, only text content is
+     * preserved. Set to `false` ONLY when `html` has already been sanitized
+     * with a dedicated library (e.g. DOMPurify).
+     */
+    sanitize?: boolean;
+}
 /**
  * contentEditable provides reactive binding for contenteditable elements.
  *
@@ -134,7 +219,18 @@ declare function fileUpload(options?: FileUploadOptions): {
  */
 declare function contentEditable(): {
     content: () => string;
-    setContent: (html: string) => void;
+    /**
+     * Update the reactive content value.
+     *
+     * - `setContent("<b>x</b>")` — LEGACY: treated as `{ html, sanitize: true }`.
+     *   The HTML is stripped to text by default to prevent XSS. Prefer the
+     *   options form below.
+     * - `setContent({ text: "hello" })` — plain text, always safe.
+     * - `setContent({ html, sanitize: true })` — sanitized HTML (default).
+     * - `setContent({ html, sanitize: false })` — raw HTML; the caller MUST
+     *   have pre-sanitized it with a trusted library (e.g. DOMPurify).
+     */
+    setContent: (input: string | SetContentOptions) => void;
     isFocused: () => boolean;
     setFocused: (v: boolean) => void;
     bold: () => void;
@@ -165,6 +261,12 @@ declare function datePicker(options?: DatePickerOptions): {
     }>;
     isDateDisabled: (date: Date) => boolean;
     isSelected: (date: Date) => boolean;
+    /** WAI-ARIA Date Picker dialog grid wiring: `role=grid`, arrow nav,
+     *  PageUp/Down (month), Shift+PageUp/Down (year), Home/End. */
+    bind: (els: {
+        grid: HTMLElement;
+        cell: (date: Date) => HTMLElement | null;
+    }) => () => void;
 };
 
-export { type AccordionOptions, type ComboboxOptions, type DatePickerOptions, type FileUploadOptions, type SelectOptions, type TabsOptions, accordion, combobox, contentEditable, datePicker, fileUpload, popover, select, tabs, tooltip };
+export { type AccordionAriaBinding, type AccordionOptions, type ComboboxOptions, type DatePickerOptions, type FileUploadOptions, type SelectOptions, type SetContentOptions, type TabsAriaBinding, type TabsOptions, accordion, combobox, contentEditable, datePicker, fileUpload, popover, select, tabs, tooltip };

package/dist/widgets.js

@@ -8,13 +8,15 @@ import {
   select,
   tabs,
   tooltip
-} from "./chunk-PDZQY43A.js";
-import "./chunk-GJPXRJ45.js";
-import "./chunk-XHK6BDAJ.js";
-import "./chunk-EUZND3CB.js";
-import "./chunk-NZIIMDWI.js";
-import "./chunk-K4G4ZQNR.js";
-import "./chunk-5X6PP2UK.js";
+} from "./chunk-ON5MMR2J.js";
+import "./chunk-45YP72ZQ.js";
+import "./chunk-DRUZZAK4.js";
+import "./chunk-UCS6AMJ7.js";
+import "./chunk-WZA53FXU.js";
+import "./chunk-2RA7SHDA.js";
+import "./chunk-RDTDJCAB.js";
+import "./chunk-QO3WC6FS.js";
+import "./chunk-LMLD24FC.js";
 export {
   accordion,
   combobox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sibujs",
-  "version": "1.5.0",
+  "version": "2.1.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,7 +33,7 @@
     "format": "biome format --write src/ tests/",
     "test": "vitest",
     "test:ui": "vitest --ui",
-    "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 && tsup cdn.ts --format iife --globalName Sibu --out-dir dist --no-dts --minify",
+    "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",
     "bench:check": "node bench.mjs --compare",
@@ -116,8 +116,14 @@
       "types": "./dist/extras.d.ts",
       "import": "./dist/extras.js",
       "require": "./dist/extras.cjs"
+    },
+    "./cdn": {
+      "default": "./dist/cdn.global.js"
     }
   },
+  "publishConfig": {
+    "access": "public"
+  },
   "browserslist": [
     "Chrome >= 80",
     "Firefox >= 78",