Merge branch 'next' into next-tags-input-v2

.changeset/brave-tomatoes-dream.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+`DropdownMenu.Trigger` should default to `type="button"` while enabling users to override via the `type` prop

.changeset/early-mails-visit.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: DateField 24 hour cycling

.changeset/hot-dolphins-check.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: issue causing labels associated with radio group items not to select the item

.changeset/polite-dogs-change.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+DropdownMenu.Trigger `type="button"` by default

.changeset/pre.json

@@ -10,6 +10,7 @@
     "beige-meals-repair",
     "big-fishes-double",
     "blue-guests-jump",
+    "brave-tomatoes-dream",
     "brown-pillows-hear",
     "calm-snails-refuse",
     "chatty-mayflies-invite",
@@ -18,6 +19,7 @@
     "cool-cats-compete",
     "cool-readers-camp",
     "curvy-buttons-check",
+    "early-mails-visit",
     "early-points-study",
     "empty-clouds-crash",
     "famous-hotels-glow",
@@ -33,6 +35,7 @@
     "green-pumpkins-provide",
     "healthy-jeans-dream",
     "healthy-ligers-sell",
+    "hot-dolphins-check",
     "hot-donkeys-accept",
     "hot-owls-compete",
     "itchy-drinks-explode",
@@ -53,10 +56,12 @@
     "olive-ads-enjoy",
     "olive-worms-bow",
     "pink-eyes-begin",
+    "polite-dogs-change",
     "polite-moons-glow",
     "proud-snakes-occur",
     "rare-islands-divide",
     "rare-waves-lick",
+    "real-berries-jog",
     "red-mails-tease",
     "selfish-boxes-cheat",
     "serious-shrimps-pump",
@@ -72,6 +77,7 @@
     "soft-comics-sort",
     "stale-weeks-ring",
     "strong-walls-glow",
+    "stupid-candles-do",
     "tall-deers-cough",
     "tame-ads-heal",
     "ten-dogs-care",

.changeset/real-berries-jog.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: `TabTrigger` default tabindex handling

.changeset/stupid-candles-do.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: export `Portal` from `Menubar` namespace

packages/bits-ui/CHANGELOG.md

@@ -1,5 +1,33 @@
 # bits-ui
 
+## 1.0.0-next.63
+
+### Patch Changes
+
+-   fix: export `Portal` from `Menubar` namespace ([#955](https://github.com/huntabyte/bits-ui/pull/955))
+
+## 1.0.0-next.62
+
+### Patch Changes
+
+-   DropdownMenu.Trigger `type="button"` by default ([#953](https://github.com/huntabyte/bits-ui/pull/953))
+
+## 1.0.0-next.61
+
+### Patch Changes
+
+-   `DropdownMenu.Trigger` should default to `type="button"` while enabling users to override via the `type` prop ([#951](https://github.com/huntabyte/bits-ui/pull/951))
+
+-   fix: `TabTrigger` default tabindex handling ([#949](https://github.com/huntabyte/bits-ui/pull/949))
+
+## 1.0.0-next.60
+
+### Patch Changes
+
+-   fix: DateField 24 hour cycling ([#945](https://github.com/huntabyte/bits-ui/pull/945))
+
+-   fix: issue causing labels associated with radio group items not to select the item ([#943](https://github.com/huntabyte/bits-ui/pull/943))
+
 ## 1.0.0-next.59
 
 ### Patch Changes

packages/bits-ui/package.json

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

packages/bits-ui/src/lib/bits/date-field/date-field.svelte.ts

@@ -486,7 +486,8 @@ export class DateFieldRootState {
 				this.states.hour.updating = next;
 				if (next !== null && prev.dayPeriod !== null) {
 					const dayPeriod = this.formatter.dayPeriod(
-						toDate(dateRef.set({ hour: Number.parseInt(next) }))
+						toDate(dateRef.set({ hour: Number.parseInt(next) })),
+						this.hourCycle.current
 					);
 					if (dayPeriod === "AM" || dayPeriod === "PM") {
 						prev.dayPeriod = dayPeriod;
@@ -1506,6 +1507,12 @@ class DateFieldHourSegmentState {
 					this.#announcer.announce("12");
 					return "12";
 				}
+
+				if (next === 0 && this.#root.hourCycle.current === 24) {
+					this.#announcer.announce("00");
+					return "00";
+				}
+
 				this.#announcer.announce(next);
 				return `${next}`;
 			});
@@ -1532,6 +1539,12 @@ class DateFieldHourSegmentState {
 					this.#announcer.announce("12");
 					return "12";
 				}
+
+				if (next === 0 && this.#root.hourCycle.current === 24) {
+					this.#announcer.announce("00");
+					return "00";
+				}
+
 				this.#announcer.announce(next);
 				return `${next}`;
 			});
@@ -1541,10 +1554,12 @@ class DateFieldHourSegmentState {
 		if (isNumberString(e.key)) {
 			const num = Number.parseInt(e.key);
 			const max =
-				"dayPeriod" in this.#root.segmentValues &&
-				this.#root.segmentValues.dayPeriod !== null
-					? 12
-					: 23;
+				this.#root.hourCycle.current === 24
+					? 23
+					: "dayPeriod" in this.#root.segmentValues &&
+						  this.#root.segmentValues.dayPeriod !== null
+						? 12
+						: 23;
 			const maxStart = Math.floor(max / 10);
 			let moveToNext = false;
 			const numIsZero = num === 0;
@@ -1628,6 +1643,16 @@ class DateFieldHourSegmentState {
 						return `0${num}`;
 					}
 
+					/**
+					 * If the new number is 0 and the hour cycle is set to 24, then we move
+					 * to the next segment, returning the new number with a leading 0.
+					 */
+					if (num === 0 && this.#root.hourCycle.current === 24) {
+						moveToNext = true;
+						this.#root.states.hour.lastKeyZero = false;
+						return `0${num}`;
+					}
+
 					/**
 					 * If the new number is 0, then we simply return the previous value, since
 					 * they didn't actually type a new number.

packages/bits-ui/src/lib/bits/menu/components/menu-trigger.svelte

@@ -11,6 +11,7 @@
 		child,
 		children,
 		disabled = false,
+		type = "button",
 		...restProps
 	}: MenuTriggerProps = $props();
 
@@ -23,7 +24,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, triggerState.props));
+	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
 <FloatingLayerAnchor {id}>

packages/bits-ui/src/lib/bits/menubar/exports.ts

@@ -15,6 +15,7 @@ export { default as SubContentStatic } from "$lib/bits/menu/components/menu-sub-
 export { default as SubTrigger } from "$lib/bits/menu/components/menu-sub-trigger.svelte";
 export { default as RadioGroup } from "$lib/bits/menu/components/menu-radio-group.svelte";
 export { default as CheckboxItem } from "$lib/bits/menu/components/menu-checkbox-item.svelte";
+export { default as Portal } from "$lib/bits/utilities/portal/portal.svelte";
 
 export type {
 	MenubarRootProps as RootProps,

packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts

@@ -1,4 +1,5 @@
 import { srOnlyStyles, styleToString, useRefById } from "svelte-toolbelt";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "$lib/internal/attrs.js";
@@ -113,26 +114,17 @@ class RadioGroupItemState {
 		});
 	}
 
-	#onpointerdown = (e: PointerEvent) => {
+	#onclick: MouseEventHandler<HTMLButtonElement> = (e) => {
 		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") return e.preventDefault();
 		this.#root.setValue(this.#value.current);
 	};
 
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#root.setValue(this.#value.current);
-		}
-	};
-
-	#onfocus = () => {
+	#onfocus: FocusEventHandler<HTMLButtonElement> = () => {
 		if (!this.#root.hasValue) return;
 		this.#root.setValue(this.#value.current);
 	};
 
-	#onkeydown = (e: KeyboardEvent) => {
+	#onkeydown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
 		if (this.#isDisabled) return;
 		if (e.key === kbd.SPACE) {
 			e.preventDefault();
@@ -166,10 +158,9 @@ class RadioGroupItemState {
 				role: "radio",
 				tabindex: this.#tabIndex,
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
 				onkeydown: this.#onkeydown,
 				onfocus: this.#onfocus,
+				onclick: this.#onclick,
 			}) as const
 	);
 }

packages/bits-ui/src/lib/bits/tabs/tabs.svelte.ts

@@ -1,6 +1,7 @@
 import { untrack } from "svelte";
 import { SvelteMap } from "svelte/reactivity";
 import { useRefById } from "svelte-toolbelt";
+import type { FocusEventHandler, KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
 import type { TabsActivationMode } from "./types.js";
 import {
 	getAriaOrientation,
@@ -189,8 +190,11 @@ class TabsTriggerState {
 		});
 
 		$effect(() => {
-			if (this.#root.triggerIds.length) {
-				this.#tabIndex = this.#root.rovingFocusGroup.getTabIndex(this.#ref.current);
+			this.#root.triggerIds.length;
+			if (this.#isActive || !this.#root.value.current) {
+				this.#tabIndex = 0;
+			} else {
+				this.#tabIndex = -1;
 			}
 		});
 	}
@@ -200,29 +204,17 @@ class TabsTriggerState {
 		this.#root.setValue(this.#value.current);
 	};
 
-	#onfocus = () => {
-		if (this.#root.activationMode.current !== "automatic" || this.#disabled.current) return;
+	#onfocus: FocusEventHandler<HTMLButtonElement> = () => {
+		if (this.#root.activationMode.current !== "automatic" || this.#isDisabled) return;
 		this.activate();
 	};
 
-	#onpointerdown = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch" || e.button !== 0) return e.preventDefault();
-		e.preventDefault();
-		this.#ref.current?.focus();
+	#onclick: MouseEventHandler<HTMLButtonElement> = (e) => {
+		if (this.#isDisabled) return;
 		this.activate();
 	};
 
-	#onpointerup = (e: PointerEvent) => {
-		if (this.#disabled.current) return;
-		if (e.pointerType === "touch") {
-			e.preventDefault();
-			this.#ref.current?.focus();
-			this.activate();
-		}
-	};
-
-	#onkeydown = (e: KeyboardEvent) => {
+	#onkeydown: KeyboardEventHandler<HTMLButtonElement> = (e) => {
 		if (this.#isDisabled) return;
 		if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
 			e.preventDefault();
@@ -240,15 +232,14 @@ class TabsTriggerState {
 				"data-state": getTabDataState(this.#isActive),
 				"data-value": this.#value.current,
 				"data-orientation": getDataOrientation(this.#root.orientation.current),
-				"data-disabled": getDataDisabled(this.#disabled.current),
+				"data-disabled": getDataDisabled(this.#isDisabled),
 				"aria-selected": getAriaSelected(this.#isActive),
 				"aria-controls": this.#ariaControls,
 				[TRIGGER_ATTR]: "",
-				disabled: getDisabled(this.#disabled.current),
+				disabled: getDisabled(this.#isDisabled),
 				tabindex: this.#tabIndex,
 				//
-				onpointerdown: this.#onpointerdown,
-				onpointerup: this.#onpointerup,
+				onclick: this.#onclick,
 				onfocus: this.#onfocus,
 				onkeydown: this.#onkeydown,
 			}) as const

packages/bits-ui/src/lib/internal/date-time/field/helpers.ts

@@ -89,7 +89,7 @@ function createContentObj(props: CreateContentObjProps) {
 				return "0";
 			} else if (!isNull(value) && !isNull(intValue)) {
 				const formatted = formatter.part(dateRef.set({ [part]: value }), part, {
-					hourCycle: props.hourCycle === 24 ? "h24" : undefined,
+					hourCycle: props.hourCycle === 24 ? "h23" : undefined,
 				});
 
 				/**
@@ -220,7 +220,7 @@ function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle | u
 		minute: "2-digit",
 		second: "2-digit",
 		timeZoneName: "short",
-		hourCycle: hourCycle === 24 ? "h24" : undefined,
+		hourCycle: hourCycle === 24 ? "h23" : undefined,
 		hour12: hourCycle === 24 ? false : undefined,
 	};
 

packages/bits-ui/src/lib/internal/date-time/formatter.ts

@@ -1,5 +1,6 @@
 import { DateFormatter, type DateValue } from "@internationalized/date";
 import { hasTime, isZonedDateTime, toDate } from "./utils.js";
+import type { HourCycle } from "$lib/shared/date/types.js";
 
 export type Formatter = ReturnType<typeof createFormatter>;
 
@@ -75,10 +76,11 @@ export function createFormatter(initialLocale: string) {
 		return new DateFormatter(locale, { weekday: length }).format(date);
 	}
 
-	function dayPeriod(date: Date) {
+	function dayPeriod(date: Date, hourCycle: HourCycle | undefined = undefined) {
 		const parts = new DateFormatter(locale, {
 			hour: "numeric",
 			minute: "numeric",
+			hourCycle: hourCycle === 24 ? "h23" : undefined,
 		}).formatToParts(date);
 		const value = parts.find((p) => p.type === "dayPeriod")?.value;
 		if (value === "PM") {