bits-ui 2.8.2 → 2.8.4

package/dist/bits/checkbox/checkbox.svelte.js

@@ -56,7 +56,11 @@ export class CheckboxGroupLabelState {
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
-        this.attachment = attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id));
+        this.group.labelId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref);
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.group.labelId = id;
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,

package/dist/bits/collapsible/collapsible.svelte.d.ts

@@ -12,6 +12,7 @@ export declare class CollapsibleRootState {
     readonly opts: CollapsibleRootStateOpts;
     readonly attachment: RefAttachment;
     contentNode: HTMLElement | null;
+    contentId: string | undefined;
     constructor(opts: CollapsibleRootStateOpts);
     toggleOpen(): void;
     readonly props: {

package/dist/bits/collapsible/collapsible.svelte.js

@@ -15,6 +15,7 @@ export class CollapsibleRootState {
     opts;
     attachment;
     contentNode = $state(null);
+    contentId = $state(undefined);
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
@@ -54,7 +55,11 @@ export class CollapsibleContentState {
         this.opts = opts;
         this.root = root;
         this.#isMountAnimationPrevented = root.opts.open.current;
+        this.root.contentId = this.opts.id.current;
         this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.contentId = id;
+        });
         $effect.pre(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
@@ -142,7 +147,7 @@ export class CollapsibleTriggerState {
         id: this.opts.id.current,
         type: "button",
         disabled: this.#isDisabled,
-        "aria-controls": this.root.contentNode?.id,
+        "aria-controls": this.root.contentId,
         "aria-expanded": getAriaExpanded(this.root.opts.open.current),
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.#isDisabled),

package/dist/bits/command/command.svelte.js

@@ -5,7 +5,7 @@ import { kbd } from "../../internal/kbd.js";
 import { createBitsAttrs, getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
 import { computeCommandScore } from "./index.js";
-import cssesc from "css.escape";
+import { cssEscape } from "../../internal/css-escape.js";
 const COMMAND_VALUE_ATTR = "data-value";
 const commandAttrs = createBitsAttrs({
     component: "command",
@@ -182,7 +182,7 @@ export class CommandRootState {
         }
         const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
         for (const group of sortedGroups) {
-            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(group[0])}"]`);
+            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
         this.#selectFirstItem();
@@ -1056,7 +1056,7 @@ export class CommandInputState {
     root;
     attachment;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(this.root.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(this.root.opts.value.current)}"]`);
         if (item === undefined || item === null)
             return;
         return item.getAttribute("id") ?? undefined;

package/dist/bits/dialog/dialog.svelte.js

@@ -1,5 +1,5 @@
 import { attachRef, box, } from "svelte-toolbelt";
-import { Context } from "runed";
+import { Context, watch } from "runed";
 import { createBitsAttrs, getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { OpenChangeComplete } from "../../internal/open-change-complete.js";
@@ -165,7 +165,11 @@ export class DialogTitleState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        this.attachment = attachRef(this.opts.ref, (v) => (this.root.titleId = v?.id));
+        this.root.titleId = this.opts.id.current;
+        this.attachment = attachRef(this.opts.ref);
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.titleId = id;
+        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -186,9 +190,12 @@ export class DialogDescriptionState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.root.descriptionId = this.opts.id.current;
         this.attachment = attachRef(this.opts.ref, (v) => {
             this.root.descriptionNode = v;
-            this.root.descriptionId = v?.id;
+        });
+        watch.pre(() => this.opts.id.current, (id) => {
+            this.root.descriptionId = id;
         });
     }
     props = $derived.by(() => ({

package/dist/internal/css-escape.d.ts

@@ -0,0 +1,7 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export declare function cssEscape(value: string): string;

package/dist/internal/css-escape.js

@@ -0,0 +1,59 @@
+/**
+ * https://github.com/mathiasbynens/CSS.escape
+ *
+ * @param value - The value to escape for use as a CSS identifier
+ * @returns The escaped CSS identifier string
+ */
+export function cssEscape(value) {
+    if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+        return CSS.escape(value);
+    }
+    const length = value.length;
+    let index = -1;
+    let codeUnit;
+    let result = "";
+    const firstCodeUnit = value.charCodeAt(0);
+    // If the character is the first character and is a `-` (U+002D), and
+    // there is no second character, escape it
+    if (length === 1 && firstCodeUnit === 0x002d)
+        return "\\" + value;
+    while (++index < length) {
+        codeUnit = value.charCodeAt(index);
+        // If the character is NULL (U+0000), then the REPLACEMENT CHARACTER (U+FFFD)
+        if (codeUnit === 0x0000) {
+            result += "\uFFFD";
+            continue;
+        }
+        if (
+        // If the character is in the range [\1-\1F] (U+0001 to U+001F) or is U+007F
+        (codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            // If the character is the first character and is in the range [0-9] (U+0030 to U+0039)
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            // If the character is the second character and is in the range [0-9] (U+0030 to U+0039)
+            // and the first character is a `-` (U+002D)
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            // https://drafts.csswg.org/cssom/#escape-a-character-as-code-point
+            result += "\\" + codeUnit.toString(16) + " ";
+            continue;
+        }
+        // If the character is not handled by one of the above rules and is
+        // greater than or equal to U+0080, is `-` (U+002D) or `_` (U+005F), or
+        // is in one of the ranges [0-9] (U+0030 to U+0039), [A-Z] (U+0041 to U+005A),
+        // or [a-z] (U+0061 to U+007A)
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            // Use the character itself
+            result += value.charAt(index);
+            continue;
+        }
+        // Otherwise, escape the character
+        // https://drafts.csswg.org/cssom/#escape-a-character
+        result += "\\" + value.charAt(index);
+    }
+    return result;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",
@@ -19,31 +19,27 @@
     "!dist/**/*.spec.*"
   ],
   "devDependencies": {
-    "@internationalized/date": "^3.8.1",
-    "@sveltejs/kit": "^2.21.1",
+    "@internationalized/date": "^3.8.2",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
-    "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "@types/css.escape": "^1.5.2",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/node": "^20.17.6",
     "@types/resize-observer-browser": "^0.1.11",
     "csstype": "^3.1.3",
-    "jest-axe": "^9.0.0",
     "jsdom": "^24.1.3",
     "publint": "^0.2.12",
-    "svelte": "^5.33.2",
-    "svelte-check": "^4.2.1",
-    "tslib": "^2.8.1",
+    "svelte": "5.33.2",
+    "svelte-check": "^4.2.2",
     "typescript": "^5.8.3",
     "vite": "^6.3.5",
-    "vitest": "^3.1.4"
+    "vitest": "3.2.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@floating-ui/core": "^1.7.0",
-    "@floating-ui/dom": "^1.7.0",
-    "css.escape": "^1.5.1",
+    "@floating-ui/core": "^1.7.1",
+    "@floating-ui/dom": "^1.7.1",
     "esm-env": "^1.1.2",
     "runed": "^0.28.0",
     "svelte-toolbelt": "^0.9.2",
@@ -54,7 +50,6 @@
     "svelte": "^5.33.0"
   },
   "engines": {
-    "pnpm": ">=8.7.0",
     "node": ">=20"
   },
   "sideEffects": false,