@widgetic/design-system 0.5.14 → 0.5.16

package/dist/components/ui/alert/index.d.ts

@@ -7,7 +7,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
@@ -27,7 +27,7 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

package/dist/components/ui/alert/index.js

@@ -3,7 +3,7 @@ import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export const alertVariants = tv({
-    base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4",
+    base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4",
     variants: {
         variant: {
             default: "bg-background text-foreground",

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -27,6 +27,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRight />
+		<ChevronRight class="rtl:-scale-x-100" />
 	{/if}
 </li>

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -1,6 +1,13 @@
 <script lang="ts" module>
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	export type CalendarNextButtonProps = CalendarPrimitive.PrevButtonProps;
+	export type CalendarNextButtonProps = CalendarPrimitive.PrevButtonProps & {
+		/**
+		 * The name a screen reader gives the button, in the page's language. The library names the button "Next" and
+		 * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+		 * ("Next") when it is not given.
+		 */
+		label?: string;
+	};
 </script>
 
 <script lang="ts">
@@ -12,12 +19,13 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label,
 		...restProps
 	}: CalendarNextButtonProps = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4" />
+	<ChevronRight class="size-4 rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.NextButton
@@ -27,6 +35,15 @@
 		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#snippet child({ props })}
+		<button {...props} aria-label={label ?? (props["aria-label"] as string | undefined)}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{@render Fallback()}
+			{/if}
+		</button>
+	{/snippet}
+</CalendarPrimitive.NextButton>

package/dist/components/ui/calendar/calendar-next-button.svelte.d.ts

@@ -1,5 +1,12 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-export type CalendarNextButtonProps = CalendarPrimitive.PrevButtonProps;
-declare const CalendarNextButton: import("svelte").Component<CalendarPrimitive.PrevButtonProps, {}, "ref">;
+export type CalendarNextButtonProps = CalendarPrimitive.PrevButtonProps & {
+    /**
+     * The name a screen reader gives the button, in the page's language. The library names the button "Next" and
+     * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+     * ("Next") when it is not given.
+     */
+    label?: string;
+};
+declare const CalendarNextButton: import("svelte").Component<CalendarNextButtonProps, {}, "ref">;
 type CalendarNextButton = ReturnType<typeof CalendarNextButton>;
 export default CalendarNextButton;

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -1,6 +1,13 @@
 <script lang="ts" module>
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	export type CalendarPrevButtonProps = CalendarPrimitive.PrevButtonProps;
+	export type CalendarPrevButtonProps = CalendarPrimitive.PrevButtonProps & {
+		/**
+		 * The name a screen reader gives the button, in the page's language. The library names the button "Previous" and
+		 * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+		 * ("Previous") when it is not given.
+		 */
+		label?: string;
+	};
 </script>
 
 <script lang="ts">
@@ -12,12 +19,13 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label,
 		...restProps
 	}: CalendarPrevButtonProps = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeft class="size-4 rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton
@@ -27,6 +35,15 @@
 		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#snippet child({ props })}
+		<button {...props} aria-label={label ?? (props["aria-label"] as string | undefined)}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{@render Fallback()}
+			{/if}
+		</button>
+	{/snippet}
+</CalendarPrimitive.PrevButton>

package/dist/components/ui/calendar/calendar-prev-button.svelte.d.ts

@@ -1,5 +1,12 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-export type CalendarPrevButtonProps = CalendarPrimitive.PrevButtonProps;
-declare const CalendarPrevButton: import("svelte").Component<CalendarPrimitive.PrevButtonProps, {}, "ref">;
+export type CalendarPrevButtonProps = CalendarPrimitive.PrevButtonProps & {
+    /**
+     * The name a screen reader gives the button, in the page's language. The library names the button "Previous" and
+     * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+     * ("Previous") when it is not given.
+     */
+    label?: string;
+};
+declare const CalendarPrevButton: import("svelte").Component<CalendarPrevButtonProps, {}, "ref">;
 type CalendarPrevButton = ReturnType<typeof CalendarPrevButton>;
 export default CalendarPrevButton;

package/dist/components/ui/calendar/calendar.svelte

@@ -1,11 +1,17 @@
 <script lang="ts" module>
 	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps>;
+	export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+		/** The name a screen reader gives the button to the previous month, in the page's language. English when not given. */
+		previousLabel?: string;
+		/** The name a screen reader gives the button to the next month, in the page's language. English when not given. */
+		nextLabel?: string;
+	};
 </script>
 
 <script lang="ts">
 		import * as Calendar from "./index.js";
 	import { cn } from "../../../utils.js";
+	import { describeCalendarWeekdayHeading } from "../../../i18n/localeDate.js";
 
 	let {
 		ref = $bindable(null),
@@ -13,6 +19,9 @@
 		placeholder = $bindable(),
 		class: className,
 		weekdayFormat = "short",
+		previousLabel,
+		nextLabel,
+		locale: calendarLocale = 'en',
 		...restProps
 	}: CalendarProps = $props();
 </script>
@@ -26,23 +35,26 @@ get along, so we shut typescript up by casting `value` to `never`.
 	bind:ref
 	bind:placeholder
 	{weekdayFormat}
+	locale={calendarLocale}
 	class={cn("p-3", className)}
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
 		<Calendar.Header>
-			<Calendar.PrevButton />
+			<Calendar.PrevButton label={previousLabel} />
 			<Calendar.Heading />
-			<Calendar.NextButton />
+			<Calendar.NextButton label={nextLabel} />
 		</Calendar.Header>
 		<Calendar.Months>
 			{#each months as month}
 				<Calendar.Grid>
 					<Calendar.GridHead>
 						<Calendar.GridRow class="flex">
-							{#each weekdays as weekday}
-								<Calendar.HeadCell>
-									{weekday.slice(0, 2)}
+							{#each weekdays as weekday, weekdayIndex}
+								{@const weekdayHeading = describeCalendarWeekdayHeading(String(calendarLocale), weekdayIndex)}
+								<!-- A one-letter name (a language written right to left) carries the whole name for a screen reader. -->
+								<Calendar.HeadCell aria-label={weekdayHeading.fullName}>
+									{weekdayHeading.label || weekday}
 								</Calendar.HeadCell>
 							{/each}
 						</Calendar.GridRow>

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -1,5 +1,10 @@
 import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps>;
+export type CalendarProps = WithoutChildrenOrChild<CalendarPrimitive.RootProps> & {
+    /** The name a screen reader gives the button to the previous month, in the page's language. English when not given. */
+    previousLabel?: string;
+    /** The name a screen reader gives the button to the next month, in the page's language. English when not given. */
+    nextLabel?: string;
+};
 import * as Calendar from "./index.js";
 declare const Calendar: import("svelte").Component<CalendarProps, {}, "placeholder" | "ref" | "value">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/components/ui/command/command-input.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div class="flex items-center border-b px-2" data-command-input-wrapper="">
-	<Search class="mr-2 size-4 shrink-0 opacity-50" />
+	<Search class="me-2 size-4 shrink-0 opacity-50" />
 	<CommandPrimitive.Input
 		class={cn(
 			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",

package/dist/components/ui/command/command-shortcut.svelte

@@ -18,7 +18,7 @@
 
 <span
 	bind:this={ref}
-	class={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)}
+	class={cn("text-muted-foreground ms-auto text-xs tracking-widest", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dialog/dialog-content.svelte

@@ -9,10 +9,13 @@
 		ref = $bindable(null),
 		class: className,
 		portalProps,
+		// The name the close button has for a screen reader (it is drawn as an X): a page in another language gives its own.
+		closeLabel = "Close",
 		children,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: DialogPrimitive.PortalProps;
+		closeLabel?: string;
 		children: Snippet;
 	} = $props();
 </script>
@@ -29,10 +32,10 @@
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
 		>
 			<X class="size-4" />
-			<span class="sr-only">Close</span>
+			<span class="sr-only">{closeLabel}</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>
 </Dialog.Portal>

package/dist/components/ui/dialog/dialog-content.svelte.d.ts

@@ -2,6 +2,7 @@ import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui"
 import type { Snippet } from "svelte";
 type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: DialogPrimitive.PortalProps;
+    closeLabel?: string;
     children: Snippet;
 };
 declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;

package/dist/components/ui/dialog/dialog-header.svelte

@@ -18,7 +18,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
+	class={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/drawer/drawer-header.svelte

@@ -18,7 +18,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+	class={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -22,13 +22,13 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
 				<Minus class="size-4" />
 			{:else}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -17,6 +22,7 @@
 	<DropdownMenuPrimitive.Content
 		bind:ref
 		{sideOffset}
+		dir={$textDirection}
 		class={cn(
 			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
 			className

package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -14,6 +14,6 @@
 
 <DropdownMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -16,7 +16,7 @@
 	bind:ref
 	class={cn(
 		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		inset && "pl-8",
+		inset && "ps-8",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -16,7 +16,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -18,13 +18,13 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
 >
 	{#snippet children({ checked })}
-		<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
 				<Circle class="size-2 fill-current" />
 			{/if}

package/dist/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte

@@ -18,7 +18,7 @@
 
 <span
 	bind:this={ref}
-	class={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+	class={cn("ms-auto text-xs tracking-widest opacity-60", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -4,7 +4,12 @@
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -15,6 +20,7 @@
 
 <DropdownMenuPrimitive.SubContent
 	bind:ref
+	dir={$textDirection}
 	class={cn(
 		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
 		className

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -18,11 +18,11 @@
 	bind:ref
 	class={cn(
 		"data-highlighted:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-		inset && "pl-8",
+		inset && "ps-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ml-auto" />
+	<ChevronRight class="ms-auto rtl:-scale-x-100" />
 </DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
 	import { cn } from "../../../utils.js";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -19,6 +24,7 @@
 		bind:ref
 		{align}
 		{sideOffset}
+		dir={$textDirection}
 		class={cn(
 			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
 			className

package/dist/components/ui/input-otp/input-otp-slot.svelte

@@ -19,7 +19,7 @@
 	{cell}
 	bind:ref
 	class={cn(
-		"border-input relative flex h-10 w-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+		"border-input relative flex h-10 w-10 items-center justify-center border-y border-e text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
 		cell.isActive && "ring-ring ring-offset-background z-10 ring-2",
 		className
 	)}

package/dist/components/ui/popover/popover-content.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { cn } from "../../../utils.js";
 	import { Popover as PopoverPrimitive } from "bits-ui";
+	import { useTextDirection } from "../../textDirection.js";
+
+	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
+	// alignment inside a menu of a right to left screen.
+	const textDirection = useTextDirection();
 
 	let {
 		ref = $bindable(null),
@@ -19,6 +24,7 @@
 		bind:ref
 		{sideOffset}
 		{align}
+		dir={$textDirection}
 		class={cn(
 			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
 			className

package/dist/components/ui/progress/progress.svelte

@@ -23,7 +23,7 @@
 	{...restProps}
 >
 	<div
-		class="bg-primary h-full w-full flex-1 transition-all"
-		style={`transform: translateX(-${100 - (100 * (value ?? 0)) / (max ?? 1)}%)`}
+		class="bg-primary h-full w-full flex-1 -translate-x-(--progress-remaining) transition-all rtl:translate-x-(--progress-remaining)"
+		style={`--progress-remaining: ${100 - (100 * (value ?? 0)) / (max ?? 1)}%`}
 	></div>
 </ProgressPrimitive.Root>

package/dist/components/ui/range-calendar/range-calendar-cell.svelte

@@ -16,7 +16,7 @@
 <RangeCalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-l-md last:[&:has([data-selected])]:rounded-r-md [&:has([data-selected][data-selection-end])]:rounded-r-md [&:has([data-selected][data-selection-start])]:rounded-l-md",
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 first:[&:has([data-selected])]:rounded-s-md last:[&:has([data-selected])]:rounded-e-md [&:has([data-selected][data-selection-end])]:rounded-e-md [&:has([data-selected][data-selection-start])]:rounded-s-md",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte

@@ -1,6 +1,13 @@
 <script lang="ts" module>
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	export type RangeCalendarNextButtonProps = RangeCalendarPrimitive.NextButtonProps;
+	export type RangeCalendarNextButtonProps = RangeCalendarPrimitive.NextButtonProps & {
+		/**
+		 * The name a screen reader gives the button, in the page's language. The library names the button "Next" and
+		 * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+		 * ("Next") when it is not given.
+		 */
+		label?: string;
+	};
 </script>
 
 <script lang="ts">
@@ -12,12 +19,13 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label,
 		...restProps
 	}: RangeCalendarNextButtonProps = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4" />
+	<ChevronRight class="size-4 rtl:-scale-x-100" />
 {/snippet}
 
 <RangeCalendarPrimitive.NextButton
@@ -27,6 +35,15 @@
 		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#snippet child({ props })}
+		<button {...props} aria-label={label ?? (props["aria-label"] as string | undefined)}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{@render Fallback()}
+			{/if}
+		</button>
+	{/snippet}
+</RangeCalendarPrimitive.NextButton>

package/dist/components/ui/range-calendar/range-calendar-next-button.svelte.d.ts

@@ -1,5 +1,12 @@
 import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-export type RangeCalendarNextButtonProps = RangeCalendarPrimitive.NextButtonProps;
-declare const RangeCalendarNextButton: import("svelte").Component<RangeCalendarPrimitive.NextButtonProps, {}, "ref">;
+export type RangeCalendarNextButtonProps = RangeCalendarPrimitive.NextButtonProps & {
+    /**
+     * The name a screen reader gives the button, in the page's language. The library names the button "Next" and
+     * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+     * ("Next") when it is not given.
+     */
+    label?: string;
+};
+declare const RangeCalendarNextButton: import("svelte").Component<RangeCalendarNextButtonProps, {}, "ref">;
 type RangeCalendarNextButton = ReturnType<typeof RangeCalendarNextButton>;
 export default RangeCalendarNextButton;

package/dist/components/ui/range-calendar/range-calendar-prev-button.svelte

@@ -1,6 +1,13 @@
 <script lang="ts" module>
 	import { RangeCalendar as RangeCalendarPrimitive } from "bits-ui";
-	export type RangeCalendarPrevButtonProps = RangeCalendarPrimitive.PrevButtonProps;
+	export type RangeCalendarPrevButtonProps = RangeCalendarPrimitive.PrevButtonProps & {
+		/**
+		 * The name a screen reader gives the button, in the page's language. The library names the button "Previous" and
+		 * keeps that name whatever props it is given, so this one is put on the button after the library's own. English
+		 * ("Previous") when it is not given.
+		 */
+		label?: string;
+	};
 </script>
 
 <script lang="ts">
@@ -12,12 +19,13 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label,
 		...restProps
 	}: RangeCalendarPrevButtonProps = $props();
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeft class="size-4 rtl:-scale-x-100" />
 {/snippet}
 
 <RangeCalendarPrimitive.PrevButton
@@ -27,6 +35,15 @@
 		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
 		className
 	)}
-	children={children || Fallback}
 	{...restProps}
-/>
+>
+	{#snippet child({ props })}
+		<button {...props} aria-label={label ?? (props["aria-label"] as string | undefined)}>
+			{#if children}
+				{@render children()}
+			{:else}
+				{@render Fallback()}
+			{/if}
+		</button>
+	{/snippet}
+</RangeCalendarPrimitive.PrevButton>