bits-ui 2.17.1 → 2.17.2

package/dist/bits/slider/slider.svelte.js

@@ -11,6 +11,7 @@ import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../interna
 import { kbd } from "../../internal/kbd.js";
 import { isElementOrSVGElement } from "../../internal/is.js";
 import { isValidIndex } from "../../internal/arrays.js";
+import { SvelteResizeObserver } from "../../internal/svelte-resize-observer.svelte.js";
 import { linearScale } from "../../internal/math.js";
 const sliderAttrs = createBitsAttrs({
     component: "slider",
@@ -21,6 +22,7 @@ class SliderBaseRootState {
     opts;
     attachment;
     isActive = $state(false);
+    #layoutVersion = $state(0);
     direction = $derived.by(() => {
         if (this.opts.orientation.current === "horizontal") {
             return this.opts.dir.current === "rtl" ? "rl" : "lr";
@@ -38,7 +40,11 @@ class SliderBaseRootState {
         this.opts = opts;
         this.attachment = attachRef(opts.ref);
         this.domContext = new DOMContext(this.opts.ref);
+        new SvelteResizeObserver(() => this.opts.ref.current, this.#handleLayoutChange);
     }
+    #handleLayoutChange = () => {
+        this.#layoutVersion += 1;
+    };
     isThumbActive(_index) {
         return this.isActive;
     }
@@ -54,6 +60,7 @@ class SliderBaseRootState {
         return Array.from(node.querySelectorAll(sliderAttrs.selector("thumb")));
     };
     getThumbScale = () => {
+        void this.#layoutVersion;
         // If trackPadding is explicitly set, use it directly instead of calculating from thumb size
         const trackPadding = this.opts.trackPadding?.current;
         if (trackPadding !== undefined && trackPadding > 0) {

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

@@ -64,6 +64,7 @@ export declare class TimeFieldRootState<T extends TimeValue = Time> {
     descriptionNode: HTMLElement | null;
     validationNode: HTMLElement | null;
     states: import("../../shared/date/types.js").TimeSegmentStateMap;
+    hourInputDayPeriodHint: TimeSegmentObj["dayPeriod"];
     dayPeriodNode: HTMLElement | null;
     name: string;
     readonly maxValueTime: Time | undefined;

package/dist/bits/time-field/time-field.svelte.js

@@ -47,6 +47,15 @@ const SEGMENT_CONFIGS = {
         padZero: true,
     },
 };
+function get24HourValueFromTypedHour(hour, dayPeriod) {
+    const parsedHour = Number.parseInt(hour);
+    if (Number.isNaN(parsedHour))
+        return hour;
+    if (dayPeriod === "AM") {
+        return parsedHour === 12 ? "0" : `${parsedHour}`;
+    }
+    return parsedHour < 12 ? `${parsedHour + 12}` : `${parsedHour}`;
+}
 export class TimeFieldRootState {
     static create(opts, rangeRoot) {
         return TimeFieldRootContext.set(new TimeFieldRootState(opts, rangeRoot));
@@ -79,6 +88,7 @@ export class TimeFieldRootState {
     descriptionNode = $state(null);
     validationNode = $state(null);
     states = initTimeSegmentStates();
+    hourInputDayPeriodHint = null;
     dayPeriodNode = $state(null);
     name = $state("");
     maxValueTime = $derived.by(() => {
@@ -389,9 +399,14 @@ export class TimeFieldRootState {
             const next = cb(prev[part]);
             this.states.hour.updating = next;
             if (next !== null && prev.dayPeriod !== null) {
-                const dayPeriod = this.formatter.dayPeriod(toDate(this.#toDateValue(this.timeRef.set({ hour: Number.parseInt(next) }))), this.hourCycle);
-                if (dayPeriod === "AM" || dayPeriod === "PM") {
-                    prev.dayPeriod = dayPeriod;
+                if (this.hourCycle !== 24 && this.hourInputDayPeriodHint !== null) {
+                    prev.dayPeriod = this.hourInputDayPeriodHint;
+                }
+                else {
+                    const dayPeriod = this.formatter.dayPeriod(toDate(this.#toDateValue(this.timeRef.set({ hour: Number.parseInt(next) }))), this.hourCycle);
+                    if (dayPeriod === "AM" || dayPeriod === "PM") {
+                        prev.dayPeriod = dayPeriod;
+                    }
                 }
             }
             newSegmentValues = { ...prev, [part]: next };
@@ -407,17 +422,22 @@ export class TimeFieldRootState {
             newSegmentValues = { ...prev, [part]: next };
         }
         this.segmentValues = newSegmentValues;
+        const segmentObjForValue = part === "hour" &&
+            this.hourCycle !== 24 &&
+            this.hourInputDayPeriodHint !== null &&
+            newSegmentValues.hour !== null
+            ? {
+                ...newSegmentValues,
+                hour: get24HourValueFromTypedHour(newSegmentValues.hour, this.hourInputDayPeriodHint),
+            }
+            : newSegmentValues;
         if (areAllTimeSegmentsFilled(newSegmentValues, this.#fieldNode)) {
             this.setValue(getTimeValueFromSegments({
-                segmentObj: newSegmentValues,
+                segmentObj: segmentObjForValue,
                 fieldNode: this.#fieldNode,
                 timeRef: this.timeRef,
             }));
         }
-        else {
-            // this.setValue(undefined);
-            // this.segmentValues = newSegmentValues;
-        }
     }
     handleSegmentClick(e) {
         if (this.disabled.current) {
@@ -794,11 +814,12 @@ class TimeFieldHourSegmentState extends BaseTimeSegmentState {
         super(opts, root, "hour", SEGMENT_CONFIGS.hour);
     }
     onkeydown(e) {
+        const oldUpdateSegment = this.root.updateSegment.bind(this.root);
         if (isNumberString(e.key)) {
-            const oldUpdateSegment = this.root.updateSegment.bind(this.root);
-            // oxlint-disable-next-line no-explicit-any
+            this.root.hourInputDayPeriodHint =
+                this.root.hourCycle === 24 ? null : this.root.segmentValues.dayPeriod;
             this.root.updateSegment = (part, cb) => {
-                const result = oldUpdateSegment(part, cb);
+                oldUpdateSegment(part, cb);
                 // after updating hour, check if we need to display "12" instead of "0"
                 if (part === "hour" && "hour" in this.root.segmentValues) {
                     const hourValue = this.root.segmentValues.hour;
@@ -808,11 +829,11 @@ class TimeFieldHourSegmentState extends BaseTimeSegmentState {
                         this.root.segmentValues.hour = "12";
                     }
                 }
-                return result;
             };
         }
         super.onkeydown(e);
-        this.root.updateSegment = this.root.updateSegment.bind(this.root);
+        this.root.updateSegment = oldUpdateSegment;
+        this.root.hourInputDayPeriodHint = null;
     }
 }
 class TimeFieldMinuteSegmentState extends BaseTimeSegmentState {

package/dist/bits/utilities/dismissible-layer/use-dismissable-layer.svelte.js

@@ -191,11 +191,11 @@ function isValidEvent(e, node) {
     if (!isElementOrSVGElement(target))
         return false;
     const targetIsContextMenuTrigger = Boolean(target.closest(`[${CONTEXT_MENU_TRIGGER_ATTR}]`));
+    const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
     if ("button" in e && e.button > 0 && !targetIsContextMenuTrigger)
         return false;
     if ("button" in e && e.button === 0 && targetIsContextMenuTrigger)
-        return true;
-    const nodeIsContextMenu = Boolean(node.closest(`[${CONTEXT_MENU_CONTENT_ATTR}]`));
+        return nodeIsContextMenu;
     if (targetIsContextMenuTrigger && nodeIsContextMenu)
         return false;
     const ownerDocument = getOwnerDocument(target);

package/dist/bits/utilities/hidden-input.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { mergeProps, srOnlyStylesString } from "svelte-toolbelt";
+	import { mergeProps, srOnlyStyles } from "svelte-toolbelt";
 	import type { HTMLInputAttributes } from "svelte/elements";
 
 	let { value = $bindable(), ...restProps }: HTMLInputAttributes = $props();
@@ -8,7 +8,12 @@
 		mergeProps(restProps, {
 			"aria-hidden": "true",
 			tabindex: -1,
-			style: srOnlyStylesString,
+			style: {
+				...srOnlyStyles,
+				position: "absolute",
+				top: "0",
+				left: "0",
+			},
 		})
 	);
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.17.1",
+  "version": "2.17.2",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",