@pathscale/ui 3.1.0 → 3.2.0

package/dist/components/popover/Popover.generated.js

@@ -1,4 +1,4 @@
-import { Portal, createComponent, insert, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Dynamic, Portal, createComponent, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Popover.css";
 import { Show, createContext, createMemo, createSignal, createTrackedEffect, omit, onSettled, useContext } from "solid-js";
@@ -7,6 +7,7 @@ import { registerOverlay } from "../../lib/overlay.js";
 import "../_shared/material.css";
 import { applyBooleanStateRequest } from "../_shared/controlledState.js";
 import { createOverlayPosition } from "../_shared/overlayPosition.js";
+import { asAriaName, resolvePopoverDialogName } from "./Popover.a11y.js";
 import { CLASSES, componentRecipe } from "./Popover.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template('<svg aria-hidden=true data-slot=popover-arrow-svg height=12 viewBox="0 0 12 12"width=12><path d="M0 0C5.48483 8 6.5 8 12 0Z"fill=currentColor>'), _tmpl$4 = /*#__PURE__*/ template("<span>"), _tmpl$5 = /*#__PURE__*/ template("<h3>");
 const PopoverContext = createContext(null);
@@ -23,6 +24,8 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
     const [triggerId] = createSignal(`popover-trigger-${Math.random().toString(36).slice(2, 8)}`);
     const [contentId] = createSignal(`popover-content-${Math.random().toString(36).slice(2, 8)}`);
     const [resolvedPlacement, setResolvedPlacement] = createSignal(p.placement ?? "bottom");
+    const [dialogLabel, setDialogLabel] = createSignal();
+    const [dialogLabelledBy, setDialogLabelledBy] = createSignal();
     const isControlled = createMemo(()=>void 0 !== p.open);
     const isOpen = createMemo(()=>isControlled() ? Boolean(p.open) : internalOpen());
     const setIsOpen = (next, options)=>{
@@ -86,7 +89,11 @@ const __solidLayoutPopoverRoot = (_stable, p)=>{
         triggerId,
         contentId,
         offset,
-        onInteractOutside: p.onInteractOutside
+        onInteractOutside: p.onInteractOutside,
+        dialogLabel,
+        setDialogLabel,
+        dialogLabelledBy,
+        setDialogLabelledBy
     };
     return createComponent(PopoverContext, {
         value: ctx,
@@ -127,7 +134,7 @@ const PopoverRoot = defineComponent({
     ]
 });
 const __solidLayoutPopoverTrigger = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "onKeyDown");
+    const others = omit(p, "children", "class", "dataTheme", "style", "type", "onClick", "onKeyDown", "as");
     const ctx = usePopoverContext();
     const handleClick = (event)=>{
         if ("function" == typeof p.onClick) p.onClick(event);
@@ -144,44 +151,88 @@ const __solidLayoutPopoverTrigger = (_stable, p)=>{
             });
         }
     };
-    var _el$2 = _tmpl$2();
-    ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
-    spread(_el$2, mergeProps(others, {
-        get type () {
-            return p.type ?? "button";
-        },
-        get id () {
-            return ctx.triggerId();
-        }
-    }, ()=>({
-            class: twMerge(CLASSES.slot.trigger, p.class)
-        }), {
-        "data-slot": "popover-trigger",
-        get ["data-theme"] () {
-            return p.dataTheme;
-        },
-        get style () {
-            return p.style;
-        },
-        "aria-haspopup": "dialog",
-        get ["aria-expanded"] () {
-            return ctx.isOpen() ? "true" : "false";
+    return createComponent(Show, {
+        get when () {
+            return p.as;
         },
-        get ["aria-controls"] () {
-            return ctx.isOpen() ? ctx.contentId() : void 0;
+        get fallback () {
+            var _el$2 = _tmpl$2();
+            ref(()=>(el)=>ctx.setTriggerRef(el), _el$2);
+            spread(_el$2, mergeProps(others, {
+                get type () {
+                    return p.type ?? "button";
+                },
+                get id () {
+                    return ctx.triggerId();
+                }
+            }, ()=>({
+                    class: twMerge(CLASSES.slot.trigger, p.class)
+                }), {
+                "data-slot": "popover-trigger",
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                "aria-haspopup": "dialog",
+                get ["aria-expanded"] () {
+                    return ctx.isOpen() ? "true" : "false";
+                },
+                get ["aria-controls"] () {
+                    return ctx.isOpen() ? ctx.contentId() : void 0;
+                },
+                onClick: handleClick,
+                onKeyDown: handleKeyDown
+            }), true);
+            insert(_el$2, ()=>p.children);
+            return _el$2;
         },
-        onClick: handleClick,
-        onKeyDown: handleKeyDown
-    }), true);
-    insert(_el$2, ()=>p.children);
-    return _el$2;
+        get children () {
+            return createComponent(Dynamic, mergeProps({
+                get component () {
+                    return p.as;
+                }
+            }, others, {
+                ref: (el)=>ctx.setTriggerRef(el),
+                get type () {
+                    return p.type ?? "button";
+                },
+                get id () {
+                    return ctx.triggerId();
+                },
+                get ["class"] () {
+                    return p.class;
+                },
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                "aria-haspopup": "dialog",
+                get ["aria-expanded"] () {
+                    return ctx.isOpen() ? "true" : "false";
+                },
+                get ["aria-controls"] () {
+                    return memo(()=>!!ctx.isOpen())() ? ctx.contentId() : void 0;
+                },
+                onClick: handleClick,
+                onKeyDown: handleKeyDown,
+                get children () {
+                    return p.children;
+                }
+            }));
+        }
+    });
 };
 const PopoverTrigger = defineComponent({
     recipe: componentRecipe,
     layout: __solidLayoutPopoverTrigger,
     embedded: true,
     behaviour: [
-        "children"
+        "children",
+        "as"
     ]
 });
 const __solidLayoutPopoverContent = (_stable, p)=>{
@@ -200,6 +251,13 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
     createTrackedEffect(()=>{
         ctx.setPlacement(overlayPosition.placement());
     });
+    const dialogName = ()=>resolvePopoverDialogName({
+            contentLabel: asAriaName(p["aria-label"]),
+            contentLabelledBy: asAriaName(p["aria-labelledby"]),
+            dialogLabel: ctx.dialogLabel(),
+            dialogLabelledBy: ctx.dialogLabelledBy(),
+            triggerId: ctx.triggerRef() ? ctx.triggerId() : void 0
+        });
     const style = ()=>{
         const overlayStyle = overlayPosition.style();
         if ("string" == typeof p.style) return [
@@ -247,8 +305,11 @@ const __solidLayoutPopoverContent = (_stable, p)=>{
                         get style () {
                             return style();
                         },
+                        get ["aria-label"] () {
+                            return dialogName()["aria-label"];
+                        },
                         get ["aria-labelledby"] () {
-                            return p["aria-labelledby"] ?? (ctx.triggerRef() ? ctx.triggerId() : void 0);
+                            return dialogName()["aria-labelledby"];
                         },
                         get ["aria-hidden"] () {
                             return ctx.isOpen() ? "false" : "true";
@@ -272,7 +333,16 @@ const PopoverContent = defineComponent({
     ]
 });
 const __solidLayoutPopoverDialog = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style");
+    const others = omit(p, "children", "class", "dataTheme", "style", "aria-label", "aria-labelledby");
+    const ctx = usePopoverContext();
+    createTrackedEffect(()=>{
+        ctx.setDialogLabel(asAriaName(p["aria-label"]));
+        return ()=>ctx.setDialogLabel(void 0);
+    });
+    createTrackedEffect(()=>{
+        ctx.setDialogLabelledBy(asAriaName(p["aria-labelledby"]));
+        return ()=>ctx.setDialogLabelledBy(void 0);
+    });
     var _el$4 = _tmpl$();
     spread(_el$4, mergeProps(others, ()=>({
             class: twMerge(CLASSES.slot.dialog, p.class)

package/dist/components/range-calendar/RangeCalendar.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./RangeCalendar.css";
 import type { JSX } from "@solidjs/web";
 import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 export type RangeCalendarValue = ControlledDateRangeValue;
 type RangeCalendarBaseProps = {
@@ -10,6 +10,8 @@ type RangeCalendarBaseProps = {
     defaultValue?: RangeCalendarValue;
     onChange?: (value: RangeCalendarValue) => void;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

package/dist/components/range-calendar/RangeCalendar.generated.js

@@ -8,7 +8,7 @@ import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./RangeCalendar.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>");
 const __solidLayoutRangeCalendar = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "showOutsideDays", "state", "disabled", "onDaySelect", "onDayHover");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "showOutsideDays", "state", "disabled", "onDaySelect", "onDayHover");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>p.value,
@@ -63,6 +63,9 @@ const __solidLayoutRangeCalendar = (_stable, p)=>{
         get locale () {
             return p.locale;
         },
+        get dateNames () {
+            return p.dateNames;
+        },
         get weekdayFormat () {
             return p.weekdayFormat;
         },

package/dist/components/table/MobileListView.generated.js

@@ -23,7 +23,7 @@ const __solidLayoutMobileListView = (_stable, p)=>{
                         get children () {
                             return createComponent(icon, {
                                 get src () {
-                                    return p.emptyIcon ?? "icon-[mdi--inbox-outline]";
+                                    return p.emptyIcon ?? "icon-[lucide--inbox]";
                                 },
                                 width: 24,
                                 height: 24

package/dist/components/text/Text.generated.d.ts

@@ -1,6 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Text.css";
-import type { JSX } from "@solidjs/web";
+import { type JSX } from "@solidjs/web";
 import type { UIBaseProps } from "../vocabulary";
 export type TextSize = "xs" | "sm" | "base" | "lg" | "xl";
 export type TextVariant = "default" | "muted" | "subtle" | "success" | "warning" | "danger";
@@ -9,6 +9,16 @@ export type TextTransform = "none" | "uppercase" | "lowercase" | "capitalize";
 export type TextTracking = "normal" | "wide";
 export type TextLeading = "normal" | "none";
 export type TextFamily = "body" | "heading" | "display" | "mono";
+/**
+ * The elements `Text` will render as.
+ *
+ * Deliberately a closed list rather than `keyof JSX.IntrinsicElements`. The
+ * point of the prop is to let a title *be* a heading, and an open list makes
+ * that one option among two hundred, most of which are wrong for a run of
+ * text. Six heading levels, the three neutral containers, and the two
+ * inline emphases that carry meaning of their own.
+ */
+export type TextAs = "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "strong" | "em";
 export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> & UIBaseProps & {
     size?: TextSize;
     variant?: TextVariant;
@@ -17,6 +27,21 @@ export type TextRootProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "color"> &
     tracking?: TextTracking;
     leading?: TextLeading;
     family?: TextFamily;
+    /**
+     * The element this text is.
+     *
+     * `span` by default, which is what it has always been and what a run of
+     * text inside a sentence should stay. Reach for this whenever the text is
+     * structural: `as="h1"` for a page title, `as="h2"` for a section, `as="p"`
+     * for a paragraph.
+     *
+     * `family="heading"` is a *typeface*: it says which face to set the text
+     * in, and it has never said anything about the document. Sites read the
+     * two as one thing and styled titles that were not headings, so entire
+     * pages, landing pages included, had no heading of any role on them and no
+     * way for a reader to move between sections. This is the axis that says so.
+     */
+    as?: TextAs;
     children?: JSX.Element;
 };
 declare const TextRoot: __LayoutComponent<TextRootProps>;

package/dist/components/text/Text.generated.js

@@ -1,15 +1,18 @@
-import { insert, mergeProps, spread, template } from "@solidjs/web";
+import { Dynamic, createComponent, mergeProps } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Text.css";
 import { omit } from "solid-js";
 import { componentRecipe } from "./Text.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<span>");
 const __solidLayoutTextRoot = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family");
+    const others = omit(p, "children", "class", "dataTheme", "style", "size", "variant", "weight", "transform", "tracking", "leading", "family", "as");
     const size = ()=>p.size ?? "base";
     const variant = ()=>p.variant ?? "default";
-    var _el$ = _tmpl$();
-    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
+    const tag = ()=>p.as ?? "span";
+    return createComponent(Dynamic, mergeProps({
+        get component () {
+            return tag();
+        }
+    }, others, ()=>_stable.slot.root, {
         get ["data-size"] () {
             return size();
         },
@@ -36,10 +39,11 @@ const __solidLayoutTextRoot = (_stable, p)=>{
         },
         get style () {
             return p.style;
+        },
+        get children () {
+            return p.children;
         }
-    }), true);
-    insert(_el$, ()=>p.children);
-    return _el$;
+    }));
 };
 const TextRoot = defineComponent({
     recipe: componentRecipe,
@@ -53,6 +57,7 @@ const TextRoot = defineComponent({
         "tracking",
         "leading",
         "family",
+        "as",
         "children"
     ]
 });

package/dist/components/text/index.d.ts

@@ -1 +1 @@
-export { default, Text, type TextFamily, type TextLeading, type TextProps, TextRoot, type TextRootProps, type TextSize, type TextTracking, type TextTransform, type TextVariant, type TextWeight, } from "./Text.generated";
+export { default, Text, type TextAs, type TextFamily, type TextLeading, type TextProps, TextRoot, type TextRootProps, type TextSize, type TextTracking, type TextTransform, type TextVariant, type TextWeight, } from "./Text.generated";

package/dist/components/theme-color-picker/ThemeColorPicker.generated.js

@@ -141,7 +141,7 @@ const __solidLayoutThemeColorPicker = (_stable, p)=>{
                 },
                 get children () {
                     return p.children ?? createComponent(icon, mergeProps({
-                        src: "icon-[mdi--palette]",
+                        src: "icon-[lucide--palette]",
                         width: 16,
                         height: 16
                     }, ()=>({

package/dist/hooks/date/date.names.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Month and weekday names, and the four date strings the calendar assembles
+ * from them, without `Intl`.
+ *
+ * `Intl` is not defined in the chuzz browser. That is deliberate policy and
+ * the decision has been made not to ship ICU data, so `new Intl.DateTimeFormat`
+ * is not a formatter that returns a bad date, it is a `ReferenceError`. The
+ * throw escapes every boundary the component has and reaches Solid 2, which
+ * responds by halting its reactive system permanently: the page keeps painting
+ * the frame it already had, so it looks alive, while every control on it is
+ * dead. js.software's `/calendar` route is dead this way today, and nothing on
+ * the page says so.
+ *
+ * What the calendar actually needed from `Intl` was twelve month names, seven
+ * weekday names in three widths, and four assembly patterns. That is a table,
+ * so this is the table.
+ *
+ * ## The locale question
+ *
+ * Only `en-US` is carried here. A library that shipped name tables for every
+ * locale would be shipping ICU data by another name, which is the thing that
+ * was ruled out.
+ *
+ * The sites are not all English, so the names are an input: pass `dateNames`
+ * and the calendar renders yours. A site that already ships five locales
+ * through its own i18n has these strings; it hands over the set for the
+ * language it is currently in.
+ *
+ * When a consumer passes `locale="de-DE"` and no `dateNames`, the calendar
+ * renders English. It cannot do anything else, and the two dishonest options
+ * were to throw or to keep claiming German while showing "June". So it renders
+ * English *and says so*: `resolveDateNames` returns the locale actually
+ * rendered, and `Calendar` puts that on the root as `lang`. A page asking for
+ * German gets `lang="en-US"`, which is true, which an assistive technology
+ * reads correctly, and which a check can catch.
+ */
+/** Weekday name width, matching the widths `Intl` calls `weekday`. */
+export type DateNameWidth = "narrow" | "short" | "long";
+/**
+ * The names a calendar needs to render.
+ *
+ * Every array is indexed positionally: months by `Date#getMonth` (0 is
+ * January), weekdays by `Date#getDay` (0 is Sunday). All five are required.
+ * A partial set was the friendlier API and the wrong one: German months beside
+ * English weekdays under `lang="de-DE"` is exactly the half-truth this module
+ * exists to avoid.
+ */
+export type DateNames = {
+    /** 12 entries, `getMonth`-indexed. "January". */
+    monthsLong: readonly string[];
+    /** 12 entries, `getMonth`-indexed. "Jan". */
+    monthsShort: readonly string[];
+    /** 7 entries, `getDay`-indexed from Sunday. "S". */
+    weekdaysNarrow: readonly string[];
+    /** 7 entries, `getDay`-indexed from Sunday. "Sun". */
+    weekdaysShort: readonly string[];
+    /** 7 entries, `getDay`-indexed from Sunday. "Sunday". */
+    weekdaysLong: readonly string[];
+};
+/** The locale the built-in table transcribes. */
+export declare const DEFAULT_DATE_LOCALE = "en-US";
+/**
+ * `en-US`, transcribed from `Intl` rather than typed from memory.
+ *
+ * `tests/hooks/date/date-names.test.ts` regenerates every entry from a real
+ * `Intl.DateTimeFormat` under bun's ICU and compares, so a typo here is a test
+ * failure and not a wrong month in production.
+ */
+export declare const EN_US_DATE_NAMES: DateNames;
+/**
+ * Pick the names to render with, and report the locale that will actually be
+ * on screen.
+ *
+ * The returned `locale` is the honest one, not the requested one: it is the
+ * consumer's locale only when the consumer supplied the names to back it.
+ */
+export declare const resolveDateNames: (locale: string | undefined, names: DateNames | undefined) => {
+    names: DateNames;
+    locale: string;
+};
+/**
+ * The grid heading. `{ month: "long", year: "numeric" }` in `en-US`.
+ *
+ * "June 2025".
+ */
+export declare const formatMonthYear: (date: Date, names?: DateNames) => string;
+/**
+ * A day button's `aria-label`. `{ dateStyle: "full" }` in `en-US`.
+ *
+ * "Sunday, June 15, 2025": long weekday, comma, long month, space, the day
+ * with no leading zero, comma, year.
+ */
+export declare const formatFullDate: (date: Date, names?: DateNames) => string;
+/**
+ * A picker's trigger text. `{ day: "numeric", month: "short", year: "numeric" }`
+ * in `en-US`.
+ *
+ * "Jun 15, 2025". Note that `Intl` orders this month-first for `en-US`
+ * regardless of the order the options are written in.
+ */
+export declare const formatCompactDate: (date: Date, names?: DateNames) => string;
+/**
+ * The seven column headers, Sunday first. `{ weekday: width }` in `en-US`.
+ *
+ * `["Sun", "Mon", ...]` at the default `short` width.
+ */
+export declare const weekdayNames: (width: DateNameWidth, names?: DateNames) => readonly string[];

package/dist/hooks/date/date.names.js

@@ -0,0 +1,74 @@
+const DEFAULT_DATE_LOCALE = "en-US";
+const EN_US_DATE_NAMES = {
+    monthsLong: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+    ],
+    monthsShort: [
+        "Jan",
+        "Feb",
+        "Mar",
+        "Apr",
+        "May",
+        "Jun",
+        "Jul",
+        "Aug",
+        "Sep",
+        "Oct",
+        "Nov",
+        "Dec"
+    ],
+    weekdaysNarrow: [
+        "S",
+        "M",
+        "T",
+        "W",
+        "T",
+        "F",
+        "S"
+    ],
+    weekdaysShort: [
+        "Sun",
+        "Mon",
+        "Tue",
+        "Wed",
+        "Thu",
+        "Fri",
+        "Sat"
+    ],
+    weekdaysLong: [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday"
+    ]
+};
+const resolveDateNames = (locale, names)=>names ? {
+        names,
+        locale: locale ?? DEFAULT_DATE_LOCALE
+    } : {
+        names: EN_US_DATE_NAMES,
+        locale: DEFAULT_DATE_LOCALE
+    };
+const formatMonthYear = (date, names = EN_US_DATE_NAMES)=>`${names.monthsLong[date.getMonth()] ?? ""} ${date.getFullYear()}`;
+const formatFullDate = (date, names = EN_US_DATE_NAMES)=>`${names.weekdaysLong[date.getDay()] ?? ""}, ${names.monthsLong[date.getMonth()] ?? ""} ${date.getDate()}, ${date.getFullYear()}`;
+const formatCompactDate = (date, names = EN_US_DATE_NAMES)=>`${names.monthsShort[date.getMonth()] ?? ""} ${date.getDate()}, ${date.getFullYear()}`;
+const weekdayNames = (width, names = EN_US_DATE_NAMES)=>{
+    if ("narrow" === width) return names.weekdaysNarrow;
+    if ("long" === width) return names.weekdaysLong;
+    return names.weekdaysShort;
+};
+export { DEFAULT_DATE_LOCALE, EN_US_DATE_NAMES, formatCompactDate, formatFullDate, formatMonthYear, resolveDateNames, weekdayNames };

package/dist/hooks/date/date.utils.d.ts

@@ -1,3 +1,4 @@
+import { type DateNames } from "./date.names";
 export declare const DAYS_PER_WEEK = 7;
 export declare const CALENDAR_GRID_DAYS = 42;
 export type DateRangeValue = {
@@ -8,7 +9,16 @@ export declare const createCalendarDate: (year: number, monthIndex: number, day:
 export declare const normalizeDate: (value: Date | null | undefined) => Date | null;
 export declare const getToday: () => Date;
 export declare const parseDate: (value: string | null | undefined) => Date | null;
-export declare const formatDate: (value: Date | null | undefined, locale?: string, options?: Intl.DateTimeFormatOptions) => string;
+/**
+ * The date a picker shows on its trigger. "Jun 15, 2025".
+ *
+ * The second parameter used to be a locale string and the third an
+ * `Intl.DateTimeFormatOptions`. Both are gone rather than kept as ignored
+ * arguments: a `locale` this function cannot honour is worse than no `locale`
+ * at all, and the component that owns the locale prop resolves it through
+ * `resolveDateNames` before calling here. See `date.names.ts`.
+ */
+export declare const formatDate: (value: Date | null | undefined, names?: DateNames) => string;
 export declare const toISODate: (value: Date | null | undefined) => string;
 export declare const compareDates: (left: Date, right: Date) => number;
 export declare const compareMonths: (left: Date, right: Date) => number;

package/dist/hooks/date/date.utils.js

@@ -1,3 +1,4 @@
+import { EN_US_DATE_NAMES, formatCompactDate } from "./date.names.js";
 const DAYS_PER_WEEK = 7;
 const CALENDAR_GRID_DAYS = 42;
 const ISO_DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
@@ -23,14 +24,10 @@ const parseDate = (value)=>{
     if (parsed.getFullYear() !== year || parsed.getMonth() !== month - 1 || parsed.getDate() !== day) return null;
     return parsed;
 };
-const formatDate = (value, locale = "en-US", options = {
-    day: "numeric",
-    month: "short",
-    year: "numeric"
-})=>{
+const formatDate = (value, names = EN_US_DATE_NAMES)=>{
     const date = normalizeDate(value);
     if (!date) return "";
-    return new Intl.DateTimeFormat(locale, options).format(date);
+    return formatCompactDate(date, names);
 };
 const pad = (value)=>String(value).padStart(2, "0");
 const toISODate = (value)=>{

package/dist/hooks/date/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./date.names";
 export * from "./date.utils";
 export * from "./useCalendarNavigation";
 export * from "./useCalendarState";

package/dist/hooks/date/index.js

@@ -1,3 +1,4 @@
+export * from "./date.names.js";
 export * from "./date.utils.js";
 export * from "./useCalendarNavigation.js";
 export * from "./useCalendarState.js";

package/dist/hooks/date/useCalendarState.d.ts

@@ -1,9 +1,16 @@
 import { type Accessor } from "solid-js";
+import { type DateNameWidth, type DateNames } from "./date.names";
 export type CalendarSelectionMode = "single" | "range";
 type CalendarStateOptions = {
     selectionMode: Accessor<CalendarSelectionMode>;
-    locale: Accessor<string>;
-    weekdayFormat: Accessor<"narrow" | "short" | "long">;
+    /**
+     * The names to render with. The owning component resolves these from its
+     * `locale` and `dateNames` props through `resolveDateNames`, so there is no
+     * `locale` here: this hook formats from a table and has nothing to do with
+     * one. See `date.names.ts`.
+     */
+    dateNames: Accessor<DateNames>;
+    weekdayFormat: Accessor<DateNameWidth>;
     visibleMonth: Accessor<Date>;
     focusedDate: Accessor<Date>;
     selectedDate: Accessor<Date | null>;
@@ -28,9 +35,9 @@ export type CalendarCellState = {
     isAriaSelected: boolean;
 };
 export declare const useCalendarState: (options: CalendarStateOptions) => {
-    monthFormatter: import("solid-js").SourceAccessor<Intl.DateTimeFormat>;
-    dayLabelFormatter: import("solid-js").SourceAccessor<Intl.DateTimeFormat>;
-    weekdayLabels: import("solid-js").SourceAccessor<string[]>;
+    monthLabel: import("solid-js").SourceAccessor<string>;
+    formatDayLabel: (date: Date) => string;
+    weekdayLabels: import("solid-js").SourceAccessor<readonly string[]>;
     calendarWeeks: import("solid-js").SourceAccessor<Date[][]>;
     normalizedRange: import("solid-js").SourceAccessor<{
         start: Date | null;