bits-ui 1.5.3 → 1.6.1

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

@@ -5,6 +5,7 @@ import { kbd } from "../../internal/kbd.js";
 import { 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";
 // attributes
 const COMMAND_ROOT_ATTR = "data-command-root";
 const COMMAND_LIST_ATTR = "data-command-list";
@@ -178,7 +179,7 @@ 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}="${encodeURIComponent(group[0])}"]`);
+            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
         this.#selectFirstItem();
@@ -683,7 +684,7 @@ class CommandInputState {
     opts;
     root;
     #selectedItemId = $derived.by(() => {
-        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${encodeURIComponent(this.root.opts.value.current)}"]`);
+        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssesc(this.root.opts.value.current)}"]`);
         if (!item)
             return;
         return item?.getAttribute("id") ?? undefined;

package/dist/bits/date-field/date-field.svelte.d.ts

@@ -8,6 +8,22 @@ import type { DateAndTimeSegmentObj, DateOnInvalid, DateSegmentObj, DateSegmentP
 import { type Formatter } from "../../internal/date-time/formatter.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 export declare const DATE_FIELD_INPUT_ATTR = "data-date-field-input";
+type SegmentConfig = {
+    min: number | ((root: DateFieldRootState) => number);
+    max: number | ((root: DateFieldRootState) => number);
+    cycle: number;
+    canBeZero?: boolean;
+    padZero?: boolean;
+    getAnnouncement?: (value: number, root: DateFieldRootState) => string | number;
+    updateLogic?: (props: {
+        root: DateFieldRootState;
+        prev: string | null;
+        num: number;
+        moveToNext: {
+            value: boolean;
+        };
+    }) => string | null;
+};
 export type DateFieldRootStateProps = WritableBoxedValues<{
     value: DateValue | undefined;
     placeholder: DateValue;
@@ -186,46 +202,24 @@ declare class DateFieldLabelState {
         readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
-type DateFieldDaySegmentStateProps = WithRefProps;
-declare class DateFieldDaySegmentState {
+declare abstract class BaseNumericSegmentState {
     #private;
-    readonly opts: DateFieldDaySegmentStateProps;
+    readonly opts: WithRefProps;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldDaySegmentStateProps, root: DateFieldRootState);
+    readonly announcer: Announcer;
+    readonly part: string;
+    readonly config: SegmentConfig;
+    constructor(opts: WithRefProps, root: DateFieldRootState, part: string, config: SegmentConfig);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
-    props: {
-        "aria-invalid": "true" | undefined;
-        "aria-disabled": "true" | "false";
-        "aria-readonly": "true" | "false";
-        "data-invalid": "" | undefined;
-        "data-disabled": "" | undefined;
-        "data-readonly": "" | undefined;
-        "data-segment": string;
-        id: string;
+    getSegmentProps(): {
         "aria-label": string;
         "aria-valuemin": number;
         "aria-valuemax": number;
         "aria-valuenow": number;
         "aria-valuetext": string;
-        onkeydown: (e: BitsKeyboardEvent) => void;
-        onfocusout: (_: BitsFocusEvent) => void;
-        onclick: (e: BitsMouseEvent) => void;
-        role: string;
-        contenteditable: string;
-        tabindex: number;
-        spellcheck: boolean;
-        inputmode: string;
-        autocorrect: string;
-        enterkeyhint: string;
-        style: {
-            caretColor: string;
-        };
-    } | {
-        "aria-labelledby": string;
-        contenteditable: string | undefined;
-        "aria-describedby": string | undefined;
-        tabindex: number | undefined;
+    };
+    props: {
         "aria-invalid": "true" | undefined;
         "aria-disabled": "true" | "false";
         "aria-readonly": "true" | "false";
@@ -233,116 +227,15 @@ declare class DateFieldDaySegmentState {
         "data-disabled": "" | undefined;
         "data-readonly": "" | undefined;
         "data-segment": string;
-        id: string;
-        "aria-label": string;
-        "aria-valuemin": number;
-        "aria-valuemax": number;
-        "aria-valuenow": number;
-        "aria-valuetext": string;
         onkeydown: (e: BitsKeyboardEvent) => void;
         onfocusout: (_: BitsFocusEvent) => void;
         onclick: (e: BitsMouseEvent) => void;
-        role: string;
-        spellcheck: boolean;
-        inputmode: string;
-        autocorrect: string;
-        enterkeyhint: string;
-        style: {
-            caretColor: string;
-        };
-    };
-}
-type DateFieldMonthSegmentStateProps = WithRefProps;
-declare class DateFieldMonthSegmentState {
-    #private;
-    readonly opts: DateFieldMonthSegmentStateProps;
-    readonly root: DateFieldRootState;
-    constructor(opts: DateFieldMonthSegmentStateProps, root: DateFieldRootState);
-    onkeydown(e: BitsKeyboardEvent): void;
-    onfocusout(_: BitsFocusEvent): void;
-    props: {
-        readonly "aria-invalid": "true" | undefined;
-        readonly "aria-disabled": "true" | "false";
-        readonly "aria-readonly": "true" | "false";
-        readonly "data-invalid": "" | undefined;
-        readonly "data-disabled": "" | undefined;
-        readonly "data-readonly": "" | undefined;
-        readonly "data-segment": string;
-        readonly id: string;
-        readonly "aria-label": "month, ";
-        readonly contenteditable: "true";
-        readonly "aria-valuemin": 1;
-        readonly "aria-valuemax": 12;
-        readonly "aria-valuenow": number;
-        readonly "aria-valuetext": string;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly onfocusout: (_: BitsFocusEvent) => void;
-        readonly onclick: (e: BitsMouseEvent) => void;
-        readonly role: string;
-        readonly tabindex: number;
-        readonly spellcheck: boolean;
-        readonly inputmode: string;
-        readonly autocorrect: string;
-        readonly enterkeyhint: string;
-        readonly style: {
-            caretColor: string;
-        };
-    } | {
-        readonly "aria-labelledby": string;
-        readonly contenteditable: string | undefined;
-        readonly "aria-describedby": string | undefined;
-        readonly tabindex: number | undefined;
-        readonly "aria-invalid": "true" | undefined;
-        readonly "aria-disabled": "true" | "false";
-        readonly "aria-readonly": "true" | "false";
-        readonly "data-invalid": "" | undefined;
-        readonly "data-disabled": "" | undefined;
-        readonly "data-readonly": "" | undefined;
-        readonly "data-segment": string;
-        readonly id: string;
-        readonly "aria-label": "month, ";
-        readonly "aria-valuemin": 1;
-        readonly "aria-valuemax": 12;
-        readonly "aria-valuenow": number;
-        readonly "aria-valuetext": string;
-        readonly onkeydown: (e: BitsKeyboardEvent) => void;
-        readonly onfocusout: (_: BitsFocusEvent) => void;
-        readonly onclick: (e: BitsMouseEvent) => void;
-        readonly role: string;
-        readonly spellcheck: boolean;
-        readonly inputmode: string;
-        readonly autocorrect: string;
-        readonly enterkeyhint: string;
-        readonly style: {
-            caretColor: string;
-        };
-    };
-}
-type DateFieldYearSegmentStateProps = WithRefProps;
-declare class DateFieldYearSegmentState {
-    #private;
-    readonly opts: DateFieldYearSegmentStateProps;
-    readonly root: DateFieldRootState;
-    constructor(opts: DateFieldYearSegmentStateProps, root: DateFieldRootState);
-    onkeydown(e: BitsKeyboardEvent): void;
-    onfocusout(_: BitsFocusEvent): void;
-    props: {
-        "aria-invalid": "true" | undefined;
-        "aria-disabled": "true" | "false";
-        "aria-readonly": "true" | "false";
-        "data-invalid": "" | undefined;
-        "data-disabled": "" | undefined;
-        "data-readonly": "" | undefined;
-        "data-segment": string;
-        id: string;
         "aria-label": string;
         "aria-valuemin": number;
         "aria-valuemax": number;
         "aria-valuenow": number;
         "aria-valuetext": string;
-        onkeydown: (e: BitsKeyboardEvent) => void;
-        onclick: (e: BitsMouseEvent) => void;
-        onfocusout: (_: BitsFocusEvent) => void;
+        id: string;
         role: string;
         contenteditable: string;
         tabindex: number;
@@ -365,15 +258,15 @@ declare class DateFieldYearSegmentState {
         "data-disabled": "" | undefined;
         "data-readonly": "" | undefined;
         "data-segment": string;
-        id: string;
+        onkeydown: (e: BitsKeyboardEvent) => void;
+        onfocusout: (_: BitsFocusEvent) => void;
+        onclick: (e: BitsMouseEvent) => void;
         "aria-label": string;
         "aria-valuemin": number;
         "aria-valuemax": number;
         "aria-valuenow": number;
         "aria-valuetext": string;
-        onkeydown: (e: BitsKeyboardEvent) => void;
-        onclick: (e: BitsMouseEvent) => void;
-        onfocusout: (_: BitsFocusEvent) => void;
+        id: string;
         role: string;
         spellcheck: boolean;
         inputmode: string;
@@ -384,35 +277,27 @@ declare class DateFieldYearSegmentState {
         };
     };
 }
-type DateFieldHourSegmentStateProps = WithRefProps;
-declare class DateFieldHourSegmentState {
+declare class DateFieldYearSegmentState extends BaseNumericSegmentState {
     #private;
-    readonly opts: DateFieldHourSegmentStateProps;
-    readonly root: DateFieldRootState;
-    constructor(opts: DateFieldHourSegmentStateProps, root: DateFieldRootState);
+    constructor(opts: WithRefProps, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     onfocusout(_: BitsFocusEvent): void;
-    props: {};
 }
-type DateFieldMinuteSegmentStateProps = WithRefProps;
-declare class DateFieldMinuteSegmentState {
-    #private;
-    readonly opts: DateFieldMinuteSegmentStateProps;
-    readonly root: DateFieldRootState;
-    constructor(opts: DateFieldMinuteSegmentStateProps, root: DateFieldRootState);
-    onkeydown(e: BitsKeyboardEvent): void;
-    onfocusout(_: BitsFocusEvent): void;
-    props: {};
+declare class DateFieldDaySegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefProps, root: DateFieldRootState);
 }
-type DateFieldSecondSegmentStateProps = WithRefProps;
-declare class DateFieldSecondSegmentState {
-    #private;
-    readonly opts: DateFieldSecondSegmentStateProps;
-    readonly root: DateFieldRootState;
-    constructor(opts: DateFieldSecondSegmentStateProps, root: DateFieldRootState);
+declare class DateFieldMonthSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefProps, root: DateFieldRootState);
+}
+declare class DateFieldHourSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefProps, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
-    onfocusout(_: BitsFocusEvent): void;
-    props: {};
+}
+declare class DateFieldMinuteSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefProps, root: DateFieldRootState);
+}
+declare class DateFieldSecondSegmentState extends BaseNumericSegmentState {
+    constructor(opts: WithRefProps, root: DateFieldRootState);
 }
 type DateFieldDayPeriodSegmentStateProps = WithRefProps;
 declare class DateFieldDayPeriodSegmentState {
@@ -509,9 +394,9 @@ declare class DateFieldDayLiteralSegmentState {
     };
 }
 declare class DateFieldTimeZoneSegmentState {
-    readonly opts: DateFieldMinuteSegmentStateProps;
+    readonly opts: DateFieldLiteralSegmentStateProps;
     readonly root: DateFieldRootState;
-    constructor(opts: DateFieldMinuteSegmentStateProps, root: DateFieldRootState);
+    constructor(opts: DateFieldLiteralSegmentStateProps, root: DateFieldRootState);
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly "data-readonly": "" | undefined;
@@ -553,6 +438,6 @@ declare class DateFieldTimeZoneSegmentState {
 export declare function useDateFieldRoot(props: DateFieldRootStateProps, rangeRoot?: DateRangeFieldRootState): DateFieldRootState;
 export declare function useDateFieldInput(props: DateFieldInputStateProps): DateFieldInputState;
 export declare function useDateFieldHiddenInput(): DateFieldHiddenInputState;
-export declare function useDateFieldSegment(part: SegmentPart, props: WithRefProps): DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldYearSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldDayLiteralSegmentState | DateFieldTimeZoneSegmentState;
+export declare function useDateFieldSegment(part: SegmentPart, props: WithRefProps): DateFieldYearSegmentState | DateFieldDaySegmentState | DateFieldMonthSegmentState | DateFieldHourSegmentState | DateFieldMinuteSegmentState | DateFieldSecondSegmentState | DateFieldDayPeriodSegmentState | DateFieldDayLiteralSegmentState | DateFieldTimeZoneSegmentState;
 export declare function useDateFieldLabel(props: DateFieldLabelStateProps): DateFieldLabelState;
 export {};