@heyramzi/ui 3.7.1 → 3.9.0

package/src/components/file-drop-zone/file-drop-zone.test.ts

@@ -0,0 +1,148 @@
+import { afterEach, beforeEach, describe, expect, it } from "vite-plus/test";
+import { flushSync, mount, unmount } from "svelte";
+import FileDropZone from "./file-drop-zone.svelte";
+
+// jsdom has no DataTransfer and its input.files takes only a FileList, so the stub returns an
+// array and each input records what the zone wrote.
+class DataTransferStub {
+  readonly list: File[] = [];
+  readonly items = { add: (file: File) => this.list.push(file) };
+  get files() {
+    return this.list;
+  }
+}
+
+beforeEach(() => {
+  (globalThis as { DataTransfer?: unknown }).DataTransfer = DataTransferStub;
+});
+
+afterEach(() => {
+  delete (globalThis as { DataTransfer?: unknown }).DataTransfer;
+  document.body.innerHTML = "";
+});
+
+const pdf = (name: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type: "application/pdf", lastModified: 1 });
+
+function render(props: Record<string, unknown> = {}) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(FileDropZone, { target, props: { name: "justificatif", ...props } });
+  flushSync();
+  const input = target.querySelector<HTMLInputElement>("input[type=file]");
+  if (!input) throw new Error("no file input");
+  let written: File[] = [];
+  Object.defineProperty(input, "files", {
+    configurable: true,
+    get: () => written,
+    set: (value: File[]) => {
+      written = [...value];
+    },
+  });
+  const fire = (type: string, files: File[]) => {
+    const event = new Event(type, { bubbles: true, cancelable: true });
+    Object.defineProperty(event, "dataTransfer", {
+      value: { types: ["Files"], files, dropEffect: "none" },
+    });
+    target.querySelector("[data-slot=file-drop-zone-target]")?.dispatchEvent(event);
+    flushSync();
+  };
+  const drop = (files: File[]) => {
+    fire("dragenter", files);
+    fire("drop", files);
+  };
+  const names = () =>
+    [...target.querySelectorAll("[data-file-name]")].map((row) =>
+      row.getAttribute("data-file-name"),
+    );
+  return {
+    target,
+    input,
+    drop,
+    fire,
+    names,
+    written: () => written.map((file) => file.name),
+    done: () => void unmount(app),
+  };
+}
+
+describe("FileDropZone", () => {
+  it("speaks French with no setup", () => {
+    const { target, done } = render({ accept: ".pdf", maxFileSize: 10 * 1024 * 1024 });
+    const text = target.textContent ?? "";
+    expect(text).toContain("Glissez votre fichier ici");
+    expect(text).toContain("ou cliquez pour le choisir");
+    expect(text).toContain("PDF, 10 Mo maximum");
+    done();
+  });
+
+  it("writes dropped files into the real input, so a form post carries them", () => {
+    const { input, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("bail.pdf"), pdf("quittance.pdf")]);
+    expect(names()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(written()).toEqual(["bail.pdf", "quittance.pdf"]);
+    expect(input.name).toBe("justificatif");
+    done();
+  });
+
+  it("shows the drag state while a file hovers", () => {
+    const { target, fire, done } = render();
+    fire("dragenter", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Déposez votre fichier");
+    fire("dragleave", [pdf("bail.pdf")]);
+    expect(target.textContent).toContain("Glissez votre fichier ici");
+    done();
+  });
+
+  it("refuses the wrong format and a file too heavy, and says so", () => {
+    const rejected: string[] = [];
+    const { target, drop, names, done } = render({
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+      onFileRejected: (list: { reason: string }[]) => rejected.push(...list.map((r) => r.reason)),
+    });
+    const photo = new File(["x"], "photo.png", { type: "image/png" });
+    drop([photo, pdf("gros.pdf", 500), pdf("ok.pdf")]);
+    expect(names()).toEqual(["ok.pdf"]);
+    expect(rejected).toEqual(["type", "size"]);
+    expect(target.textContent).toContain("photo.png : format non accepté");
+    expect(target.textContent).toContain("gros.pdf : fichier trop lourd");
+    done();
+  });
+
+  it("stops at maxFiles", () => {
+    const { target, drop, names, done } = render({ multiple: true, maxFiles: 2 });
+    drop([pdf("a.pdf"), pdf("b.pdf"), pdf("c.pdf")]);
+    expect(names()).toEqual(["a.pdf", "b.pdf"]);
+    expect(target.textContent).toContain("2 fichiers au maximum");
+    done();
+  });
+
+  it("removes a file from the list and from the input", () => {
+    const { target, drop, names, written, done } = render({ multiple: true });
+    drop([pdf("a.pdf"), pdf("b.pdf")]);
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer a.pdf"]')?.click();
+    flushSync();
+    expect(names()).toEqual(["b.pdf"]);
+    expect(written()).toEqual(["b.pdf"]);
+    done();
+  });
+
+  it("puts the one file in the zone's place, and brings the zone back on removal", () => {
+    const { target, drop, done } = render();
+    drop([pdf("bail.pdf")]);
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).toBeNull();
+    target.querySelector<HTMLButtonElement>('[aria-label="Retirer bail.pdf"]')?.click();
+    flushSync();
+    expect(target.querySelector("[data-slot=file-drop-zone-target]")).not.toBeNull();
+    done();
+  });
+
+  it("ignores drops while disabled", () => {
+    const { drop, names, done } = render({ disabled: true });
+    drop([pdf("bail.pdf")]);
+    expect(names()).toEqual([]);
+    done();
+  });
+});

package/src/components/file-drop-zone/files.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vite-plus/test";
+import {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+} from "./files.js";
+
+const file = (name: string, type: string, size = 10) =>
+  new File([new Uint8Array(size)], name, { type, lastModified: 1 });
+
+describe("matchesAccept", () => {
+  it("takes extensions, exact types and groups, in any case", () => {
+    expect(matchesAccept(file("Bail.PDF", ""), ".pdf")).toBe(true);
+    expect(matchesAccept(file("a.bin", "application/pdf"), "application/pdf")).toBe(true);
+    expect(matchesAccept(file("photo.heic", "image/heic"), "image/*")).toBe(true);
+    expect(matchesAccept(file("releve.csv", "text/csv"), ".pdf,image/*")).toBe(false);
+  });
+
+  it("lets everything through without an accept string", () => {
+    expect(matchesAccept(file("x.zip", "application/zip"), undefined)).toBe(true);
+    expect(matchesAccept(file("x.zip", "application/zip"), " ")).toBe(true);
+  });
+});
+
+describe("checkFiles", () => {
+  it("turns away the wrong type before the size", () => {
+    const big = file("gros.csv", "text/csv", 5000);
+    const result = checkFiles([big], [], { accept: ".pdf", maxFileSize: 100 });
+    expect(result.rejected).toEqual([{ file: big, reason: "type" }]);
+  });
+
+  it("turns away a file over the size limit", () => {
+    const big = file("gros.pdf", "application/pdf", 5000);
+    const small = file("petit.pdf", "application/pdf", 50);
+    const result = checkFiles([big, small], [], {
+      accept: ".pdf",
+      maxFileSize: 100,
+      multiple: true,
+    });
+    expect(result.files).toEqual([small]);
+    expect(result.rejected).toEqual([{ file: big, reason: "size" }]);
+  });
+
+  it("stops at maxFiles, counting what's already there", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    const result = checkFiles([b, c], [a], { multiple: true, maxFiles: 2 });
+    expect(result.files).toEqual([a, b]);
+    expect(result.accepted).toEqual([b]);
+    expect(result.rejected).toEqual([{ file: c, reason: "count" }]);
+  });
+
+  it("replaces the one file without multiple, and keeps it when the new one is refused", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    expect(checkFiles([b], [a], { accept: ".pdf" }).files).toEqual([b]);
+    expect(checkFiles([file("x.png", "image/png")], [a], { accept: ".pdf" }).files).toEqual([a]);
+  });
+
+  it("ignores the same file picked twice", () => {
+    const a = file("a.pdf", "application/pdf");
+    const again = file("a.pdf", "application/pdf");
+    const result = checkFiles([again], [a], { multiple: true });
+    expect(result.files).toEqual([a]);
+    expect(result.rejected).toEqual([]);
+  });
+});
+
+describe("removeFile", () => {
+  it("drops that one file and keeps the order", () => {
+    const a = file("a.pdf", "application/pdf");
+    const b = file("b.pdf", "application/pdf");
+    const c = file("c.pdf", "application/pdf");
+    expect(removeFile([a, b, c], b)).toEqual([a, c]);
+  });
+});
+
+describe("words", () => {
+  it("writes sizes the French way", () => {
+    expect(formatSize(820)).toBe("820 o");
+    expect(formatSize(12 * 1024)).toBe("12 Ko");
+    expect(formatSize(1.4 * 1024 * 1024)).toBe("1,4 Mo");
+    expect(formatSize(10 * 1024 * 1024)).toBe("10 Mo");
+  });
+
+  it("names the accepted types once each", () => {
+    expect(describeAccept(".pdf,application/pdf")).toBe("PDF");
+    expect(describeAccept("image/*,.csv")).toBe("Images, CSV");
+    expect(describeLimits(".pdf", 10 * 1024 * 1024)).toBe("PDF, 10 Mo maximum");
+    expect(describeLimits(undefined, undefined)).toBe("");
+  });
+
+  it("picks an icon kind from the type or the name", () => {
+    expect(fileKind(file("a.pdf", ""))).toBe("pdf");
+    expect(fileKind(file("a.jpg", "image/jpeg"))).toBe("image");
+    expect(fileKind(file("a.csv", ""))).toBe("csv");
+    expect(fileKind(file("a.xlsx", ""))).toBe("sheet");
+    expect(fileKind(file("a.txt", "text/plain"))).toBe("other");
+  });
+});

package/src/components/file-drop-zone/files.ts

@@ -0,0 +1,144 @@
+/** Why a file didn't make it into the list. */
+export type RejectReason = "type" | "size" | "count";
+
+export interface Rejection {
+  file: File;
+  reason: RejectReason;
+}
+
+export interface CheckOptions {
+  /** The input's `accept` string: extensions (`.pdf`), MIME types (`application/pdf`) or groups (`image/*`). */
+  accept?: string;
+  /** Largest file, in bytes. */
+  maxFileSize?: number;
+  /** Most files the list holds. */
+  maxFiles?: number;
+  /** Without it, a new file replaces the one already there. */
+  multiple?: boolean;
+}
+
+export type FileKind = "pdf" | "image" | "csv" | "sheet" | "other";
+
+const tokens = (accept: string | undefined) =>
+  (accept ?? "")
+    .split(",")
+    .map((token) => token.trim().toLowerCase())
+    .filter(Boolean);
+
+/** Whether a file passes the `accept` string, the way the browser's picker reads it. */
+export function matchesAccept(file: File, accept: string | undefined): boolean {
+  const list = tokens(accept);
+  if (list.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return list.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+
+// The same file picked twice is one file: name, size and date match.
+const same = (a: File, b: File) =>
+  a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+
+/**
+ * Sorts a drop, paste or pick into the next list and the refusals.
+ * A file is refused for its first fault: type, then size, then room.
+ */
+export function checkFiles(
+  incoming: readonly File[],
+  current: readonly File[],
+  { accept, maxFileSize, maxFiles, multiple = false }: CheckOptions,
+): { files: File[]; accepted: File[]; rejected: Rejection[] } {
+  const room = multiple ? (maxFiles ?? Infinity) : 1;
+  const kept = multiple ? [...current] : [];
+  const accepted: File[] = [];
+  const rejected: Rejection[] = [];
+  for (const file of incoming) {
+    if (!matchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxFileSize !== undefined && file.size > maxFileSize)
+      rejected.push({ file, reason: "size" });
+    else if (kept.some((other) => same(other, file))) continue;
+    else if (kept.length >= room) rejected.push({ file, reason: "count" });
+    else {
+      kept.push(file);
+      accepted.push(file);
+    }
+  }
+  return { files: accepted.length > 0 || multiple ? kept : [...current], accepted, rejected };
+}
+
+/** Drops one file from the list. */
+export const removeFile = (files: readonly File[], file: File): File[] =>
+  files.filter((other) => other !== file);
+
+const UNITS = ["o", "Ko", "Mo", "Go"] as const;
+
+/** A byte count the way a French reader says it: "820 o", "12 Ko", "1,4 Mo". */
+export function formatSize(bytes: number, locale = "fr-FR"): string {
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const digits = unit === 0 || value >= 10 ? 0 : 1;
+  const number = new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+  return `${number} ${UNITS[unit]}`;
+}
+
+const GROUPS: Record<string, string> = {
+  "image/": "Images",
+  "audio/": "Audio",
+  "video/": "Vidéos",
+  "text/": "Texte",
+};
+
+const MIME_NAMES: Record<string, string> = {
+  "application/pdf": "PDF",
+  "text/csv": "CSV",
+  "application/vnd.ms-excel": "XLS",
+  "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": "XLSX",
+  "application/msword": "DOC",
+  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": "DOCX",
+  "application/zip": "ZIP",
+  "application/json": "JSON",
+};
+
+/** The `accept` string as a reader names it: ".pdf,application/pdf" is "PDF", "image/*" is "Images". */
+export function describeAccept(accept: string | undefined): string {
+  const names: string[] = [];
+  for (const token of tokens(accept)) {
+    const name = token.startsWith(".")
+      ? token.slice(1).toUpperCase()
+      : token.endsWith("/*")
+        ? (GROUPS[token.slice(0, -1)] ?? token)
+        : (MIME_NAMES[token] ?? token.split("/").pop()?.toUpperCase() ?? token);
+    if (name === "JPEG" && names.includes("JPG")) continue;
+    if (!names.includes(name)) names.push(name);
+  }
+  return names.join(", ");
+}
+
+/** The muted line under the title: "PDF, 10 Mo maximum". Empty when nothing limits the pick. */
+export function describeLimits(
+  accept: string | undefined,
+  maxFileSize: number | undefined,
+): string {
+  const types = describeAccept(accept);
+  const size = maxFileSize === undefined ? "" : `${formatSize(maxFileSize)} maximum`;
+  return [types, size].filter(Boolean).join(", ");
+}
+
+/** Which icon a file gets. */
+export function fileKind(file: File): FileKind {
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  if (type === "application/pdf" || name.endsWith(".pdf")) return "pdf";
+  if (type.startsWith("image/")) return "image";
+  if (type === "text/csv" || name.endsWith(".csv")) return "csv";
+  if (/\.(xlsx?|ods)$/.test(name) || type.includes("spreadsheet") || type.includes("excel"))
+    return "sheet";
+  return "other";
+}

package/src/components/file-drop-zone/index.ts

@@ -0,0 +1,14 @@
+export { default as FileDropZone } from "./file-drop-zone.svelte";
+export {
+  checkFiles,
+  describeAccept,
+  describeLimits,
+  fileKind,
+  formatSize,
+  matchesAccept,
+  removeFile,
+  type CheckOptions,
+  type FileKind,
+  type RejectReason,
+  type Rejection,
+} from "./files.js";

package/src/components/table-view/table-view.svelte

@@ -57,6 +57,8 @@
 		selected?: Set<string>;
 		selectAllLabel?: string;
 		selectRowLabel?: (row: Row) => string;
+		/** The hidden head of the last column, the one holding each row's link or button. */
+		openColumnLabel?: string;
 		/** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
 		rowMenu?: Snippet<[Row]>;
 		/** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */
@@ -105,6 +107,7 @@
 		selected = $bindable(new Set<string>()),
 		selectAllLabel = "Select all rows",
 		selectRowLabel,
+		openColumnLabel = "Open",
 		rowMenu,
 		group,
 		groupHeader,
@@ -408,7 +411,7 @@
 					{/if}
 				{/each}
 				{#if opens}
-					<th class="w-0 p-0"><span class="sr-only">Open</span></th>
+					<th class="w-0 p-0"><span class="sr-only">{openColumnLabel}</span></th>
 				{/if}
 			</Table.Row>
 		</Table.Header>

package/src/components/table-view/table-view.svelte.d.ts

@@ -46,6 +46,8 @@ declare function $$render<Row extends object>(): {
         selected?: Set<string>;
         selectAllLabel?: string;
         selectRowLabel?: (row: Row) => string;
+        /** The hidden head of the last column, the one holding each row's link or button. */
+        openColumnLabel?: string;
         /** The items of a row menu: `ContextMenu.Item`s. Right-click, a long press, Shift+F10 or the ContextMenu key opens it. */
         rowMenu?: Snippet<[Row]>;
         /** Rows that return the same key sit under one header row, and `null` rows sit with no header. Order `rows` so a group is contiguous. */

package/src/shadcn/alert-dialog/alert-dialog-cancel.svelte

@@ -6,6 +6,8 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		// Inside a form, a bare button submits it: Locameublé's Annuler archived the bien (TSK-2744).
+		type = "button",
 		...restProps
 	}: AlertDialogPrimitive.CancelProps = $props();
 </script>
@@ -13,6 +15,7 @@
 <AlertDialogPrimitive.Cancel
 	bind:ref
 	data-slot="alert-dialog-cancel"
+	{type}
 	class={cn(buttonVariants({ variant: "outline" }), className)}
 	{...restProps}
 />

package/src/shadcn/calendar/calendar-month-select.svelte

@@ -26,7 +26,7 @@
 						value={monthItem.value}
 						selected={value !== undefined
 							? monthItem.value === value
-							: monthItem.value === selectedMonthItem.value}
+							: monthItem.value === selectedMonthItem?.value}
 					>
 						{monthItem.label}
 					</option>
@@ -36,7 +36,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem.label}
+				{monthItems.find((item) => item.value === value)?.label || selectedMonthItem?.label}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}

package/src/shadcn/calendar/calendar-year-select.svelte

@@ -25,7 +25,7 @@
 						value={yearItem.value}
 						selected={value !== undefined
 							? yearItem.value === value
-							: yearItem.value === selectedYearItem.value}
+							: yearItem.value === selectedYearItem?.value}
 					>
 						{yearItem.label}
 					</option>
@@ -35,7 +35,7 @@
 				class="[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm font-medium select-none [&>svg]:size-3.5"
 				aria-hidden="true"
 			>
-				{yearItems.find((item) => item.value === value)?.label || selectedYearItem.label}
+				{yearItems.find((item) => item.value === value)?.label || selectedYearItem?.label || value}
 				<CaretDown aria-hidden="true" class="size-4" />
 			</span>
 		{/snippet}

package/src/shadcn/calendar/calendar.svelte

@@ -1,9 +1,19 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	// The root component composes its own sibling sub-components through the barrel it
-	// is re-exported from; standard shadcn-svelte shape, not an initialization hazard.
-	// fallow-ignore-next-line circular-dependency
-	import * as Calendar from "./index.js";
+	import CalendarCaption from "./calendar-caption.svelte";
+	import CalendarCell from "./calendar-cell.svelte";
+	import CalendarDay from "./calendar-day.svelte";
+	import CalendarGridBody from "./calendar-grid-body.svelte";
+	import CalendarGridHead from "./calendar-grid-head.svelte";
+	import CalendarGridRow from "./calendar-grid-row.svelte";
+	import CalendarGrid from "./calendar-grid.svelte";
+	import CalendarHeadCell from "./calendar-head-cell.svelte";
+	import CalendarHeader from "./calendar-header.svelte";
+	import CalendarMonth from "./calendar-month.svelte";
+	import CalendarMonths from "./calendar-months.svelte";
+	import CalendarNav from "./calendar-nav.svelte";
+	import CalendarNextButton from "./calendar-next-button.svelte";
+	import CalendarPrevButton from "./calendar-prev-button.svelte";
 	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import type { ButtonVariant } from "../button/button.svelte";
 	import { isEqualMonth, type DateValue } from "@internationalized/date";
@@ -68,15 +78,15 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ months, weekdays })}
-		<Calendar.Months>
-			<Calendar.Nav>
-				<Calendar.PrevButton variant={buttonVariant} />
-				<Calendar.NextButton variant={buttonVariant} />
-			</Calendar.Nav>
+		<CalendarMonths>
+			<CalendarNav>
+				<CalendarPrevButton variant={buttonVariant} />
+				<CalendarNextButton variant={buttonVariant} />
+			</CalendarNav>
 			{#each months as month, monthIndex (month)}
-				<Calendar.Month>
-					<Calendar.Header>
-						<Calendar.Caption
+				<CalendarMonth>
+					<CalendarHeader>
+						<CalendarCaption
 							{captionLayout}
 							months={monthsProp}
 							{monthFormat}
@@ -87,38 +97,38 @@ get along, so we shut typescript up by casting `value` to `never`.
 							{locale}
 							{monthIndex}
 						/>
-					</Calendar.Header>
-					<Calendar.Grid>
-						<Calendar.GridHead>
-							<Calendar.GridRow class="select-none">
+					</CalendarHeader>
+					<CalendarGrid>
+						<CalendarGridHead>
+							<CalendarGridRow class="select-none">
 								{#each weekdays as weekday (weekday)}
-									<Calendar.HeadCell>
+									<CalendarHeadCell>
 										{weekday.slice(0, 2)}
-									</Calendar.HeadCell>
+									</CalendarHeadCell>
 								{/each}
-							</Calendar.GridRow>
-						</Calendar.GridHead>
-						<Calendar.GridBody>
+							</CalendarGridRow>
+						</CalendarGridHead>
+						<CalendarGridBody>
 							{#each month.weeks as weekDates (weekDates)}
-								<Calendar.GridRow class="mt-2 w-full">
+								<CalendarGridRow class="mt-2 w-full">
 									{#each weekDates as date (date)}
-										<Calendar.Cell {date} month={month.value}>
+										<CalendarCell {date} month={month.value}>
 											{#if day}
 												{@render day({
 													day: date,
 													outsideMonth: !isEqualMonth(date, month.value),
 												})}
 											{:else}
-												<Calendar.Day />
+												<CalendarDay />
 											{/if}
-										</Calendar.Cell>
+										</CalendarCell>
 									{/each}
-								</Calendar.GridRow>
+								</CalendarGridRow>
 							{/each}
-						</Calendar.GridBody>
-					</Calendar.Grid>
-				</Calendar.Month>
+						</CalendarGridBody>
+					</CalendarGrid>
+				</CalendarMonth>
 			{/each}
-		</Calendar.Months>
+		</CalendarMonths>
 	{/snippet}
 </CalendarPrimitive.Root>

package/src/shadcn/calendar/calendar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { Calendar as CalendarPrimitive } from "bits-ui";
-import * as Calendar from "./index.js";
 import { type WithoutChildrenOrChild } from "../../lib/utils.js";
 import type { ButtonVariant } from "../button/button.svelte";
 import { type DateValue } from "@internationalized/date";

package/src/shadcn/command/command-dialog.svelte

@@ -12,6 +12,7 @@
 		title = "Command Palette",
 		description = "Search for a command to run...",
 		showCloseButton = false,
+		closeLabel = "Close",
 		portalProps,
 		children,
 		class: className,
@@ -23,6 +24,8 @@
 			title?: string;
 			description?: string;
 			showCloseButton?: boolean;
+			/** What a screen reader calls the close button, in the app's language. */
+			closeLabel?: string;
 			class?: string;
 		} = $props();
 </script>
@@ -51,6 +54,7 @@
 		data-command-dialog="true"
 		overlayClass="t-instant"
 		{showCloseButton}
+		{closeLabel}
 		{portalProps}
 	>
 		<!-- WHY the root's opaque `bg-popover`, no glass: `.t-modal` on the content sets `will-change:

package/src/shadcn/command/command-dialog.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.RootProps> & With
     title?: string;
     description?: string;
     showCloseButton?: boolean;
+    /** What a screen reader calls the close button, in the app's language. */
+    closeLabel?: string;
     class?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "value" | "ref" | "open">;