use-wc 1.0.0-pre.89 → 1.0.0-pre.90

package/custom-elements.json

@@ -89,6 +89,76 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-avatar/use-avatar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
+          "name": "UseAvatar",
+          "cssParts": [
+            {
+              "description": "The span that renders the `name` fallback.",
+              "name": "initials"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "name",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "name"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-avatar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseAvatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-avatar",
+          "declaration": {
+            "name": "UseAvatar",
+            "module": "src/elements/use-avatar/use-avatar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-badge/use-badge.ts",
@@ -232,76 +302,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-avatar/use-avatar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.",
-          "name": "UseAvatar",
-          "cssParts": [
-            {
-              "description": "The span that renders the `name` fallback.",
-              "name": "initials"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "attribute": "name",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "fieldName": "name"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-avatar",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseAvatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-avatar",
-          "declaration": {
-            "name": "UseAvatar",
-            "module": "src/elements/use-avatar/use-avatar.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-calendar-base/use-calendar-base.ts",
@@ -592,7 +592,7 @@
                 {
                   "name": "data",
                   "type": {
-                    "text": "{ day: number; date: string }"
+                    "text": "UseCalendarDayData"
                   }
                 },
                 {
@@ -602,7 +602,7 @@
                   }
                 }
               ],
-              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering."
+              "description": "See UseCalendarRenderDay. The default renders `localizedDay`, the\nday in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering."
             },
             {
               "kind": "method",
@@ -734,6 +734,10 @@
               "name": "InlineDirectionElement",
               "module": "/src/utils/inline-direction-element"
             },
+            {
+              "name": "LocaleDigitsElement",
+              "module": "/src/utils/locale-digits-element"
+            },
             {
               "name": "LocalizedElement",
               "module": "/src/elements/use-locale-element/use-locale-element"
@@ -1062,6 +1066,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "LocaleDigitsElement",
+              "module": "/src/utils/locale-digits-element"
+            },
             {
               "name": "LocalizedElement",
               "module": "/src/elements/use-locale-element/use-locale-element"
@@ -1100,7 +1108,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
+          "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ localizedDay, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${localizedDay}</strong>` : localizedDay;\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: UseCalendarDayData, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.localizedDay}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
           "name": "UseDatePicker",
           "members": [
             {
@@ -1319,7 +1327,7 @@
                 {
                   "name": "data",
                   "type": {
-                    "text": "{ day: number; date: string }"
+                    "text": "UseCalendarDayData"
                   }
                 },
                 {
@@ -1329,7 +1337,7 @@
                   }
                 }
               ],
-              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
+              "description": "See UseCalendarRenderDay. The default renders `localizedDay`, the\nday in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
               "inheritedFrom": {
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
@@ -2346,6 +2354,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "LocaleDigitsElement",
+              "module": "/src/utils/locale-digits-element"
+            },
             {
               "name": "LocalizedElement",
               "module": "/src/elements/use-locale-element/use-locale-element"
@@ -4887,6 +4899,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "LocaleDigitsElement",
+              "module": "/src/utils/locale-digits-element"
+            },
             {
               "name": "LocalizedElement",
               "module": "/src/elements/use-locale-element/use-locale-element"
@@ -5225,7 +5241,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).\n\nCustomize day rendering on an instance:\n```ts\nweekPicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyWeekPicker extends UseWeekPicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
+          "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).\n\nCustomize day rendering on an instance:\n```ts\nweekPicker.renderDay = ({ localizedDay, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${localizedDay}</strong>` : localizedDay;\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyWeekPicker extends UseWeekPicker {\n  renderDay(data: UseCalendarDayData, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.localizedDay}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```",
           "name": "UseWeekPicker",
           "members": [
             {
@@ -5444,7 +5460,7 @@
                 {
                   "name": "data",
                   "type": {
-                    "text": "{ day: number; date: string }"
+                    "text": "UseCalendarDayData"
                   }
                 },
                 {
@@ -5454,7 +5470,7 @@
                   }
                 }
               ],
-              "description": "See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
+              "description": "See UseCalendarRenderDay. The default renders `localizedDay`, the\nday in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.",
               "inheritedFrom": {
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"

package/dist/design-system.css

@@ -1188,8 +1188,6 @@
     &::part(segment-input) {
       all: unset;
       box-sizing: content-box;
-      appearance: none;
-      -moz-appearance: textfield;
       field-sizing: content;
       outline: none;
       border-radius: var(--usewc-effect-input-border-radius);

package/dist/docs/use-date-picker.md

@@ -4,17 +4,17 @@ A day-granularity date picker. Value format: YYYY-MM-DD.
 
 Customize day rendering on an instance:
 ```ts
-datePicker.renderDay = ({ day, date }, html) =>
-  date === "2026-03-17" ? html`<strong>${day}</strong>` : String(day);
+datePicker.renderDay = ({ localizedDay, date }, html) =>
+  date === "2026-03-17" ? html`<strong>${localizedDay}</strong>` : localizedDay;
 ```
 
 Or override on a subclass to apply it to every instance, falling back to
 `super.renderDay(...)` for dates you don't want to customize:
 ```ts
 class MyDatePicker extends UseDatePicker {
-  renderDay(data: { day: number; date: string }, html: LitHtml) {
+  renderDay(data: UseCalendarDayData, html: LitHtml) {
     if (data.date === "2026-03-17") {
-      return html`<strong>${data.day}</strong>`;
+      return html`<strong>${data.localizedDay}</strong>`;
     }
     return super.renderDay(data, html);
   }
@@ -56,7 +56,8 @@ the browser's language. |
 | Name | Signature | Description |
 | --- | --- | --- |
 | getDateForDay | `(day: number)` | - |
-| renderDay | `(data: { day: number; date: string }, _html: LitHtml): TemplateResult \| string` | See UseCalendarRenderDay. Assigning a new function on an
+| renderDay | `(data: UseCalendarDayData, _html: LitHtml): TemplateResult \| string` | See UseCalendarRenderDay. The default renders `localizedDay`, the
+day in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an
 instance (e.g. via `.renderDay=${fn}` in a Lit template) after first
 render does not schedule a re-render on its own — call `requestUpdate()`
 if needed.

package/dist/docs/use-week-picker.md

@@ -4,17 +4,17 @@ A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).
 
 Customize day rendering on an instance:
 ```ts
-weekPicker.renderDay = ({ day, date }, html) =>
-  date === "2026-03-17" ? html`<strong>${day}</strong>` : String(day);
+weekPicker.renderDay = ({ localizedDay, date }, html) =>
+  date === "2026-03-17" ? html`<strong>${localizedDay}</strong>` : localizedDay;
 ```
 
 Or override on a subclass to apply it to every instance, falling back to
 `super.renderDay(...)` for dates you don't want to customize:
 ```ts
 class MyWeekPicker extends UseWeekPicker {
-  renderDay(data: { day: number; date: string }, html: LitHtml) {
+  renderDay(data: UseCalendarDayData, html: LitHtml) {
     if (data.date === "2026-03-17") {
-      return html`<strong>${data.day}</strong>`;
+      return html`<strong>${data.localizedDay}</strong>`;
     }
     return super.renderDay(data, html);
   }
@@ -56,7 +56,8 @@ the browser's language. |
 | Name | Signature | Description |
 | --- | --- | --- |
 | getDateForDay | `(day: number)` | - |
-| renderDay | `(data: { day: number; date: string }, _html: LitHtml): TemplateResult \| string` | See UseCalendarRenderDay. Assigning a new function on an
+| renderDay | `(data: UseCalendarDayData, _html: LitHtml): TemplateResult \| string` | See UseCalendarRenderDay. The default renders `localizedDay`, the
+day in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an
 instance (e.g. via `.renderDay=${fn}` in a Lit template) after first
 render does not schedule a re-render on its own — call `requestUpdate()`
 if needed.

package/dist/use-wc.d.mts

@@ -140,6 +140,15 @@ declare class LocalizedElementInterface<Defaults extends StringDefaults> {
   protected intlStrings(): Partial<Record<keyof Defaults, string>>;
 }
 //#endregion
+//#region src/utils/locale-digits-element.d.ts
+declare class LocaleDigitsElementInterface {
+  protected toLocaleDigits(value: string | number | undefined): string;
+  protected toLatinDigits(text: string): string;
+  protected segmentNumber(text: string | undefined): number | undefined;
+  protected stepSegment(event: KeyboardEvent, minimum: number, maximum?: number): void;
+  protected filterSegmentInput(event: InputEvent, applyPastedValue: (text: string) => boolean): void;
+}
+//#endregion
 //#region src/utils/date-time-aria-labels.d.ts
 type DateTimeAriaLabelKeys = "am" | "pm" | "year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond" | "dayPeriod";
 type DateTimeAriaLabels = Record<DateTimeAriaLabelKeys, string>;
@@ -189,7 +198,7 @@ type UncompiledTemplateResult<T extends ResultType = ResultType> = {
 type TemplateResult$1<T extends ResultType = ResultType> = UncompiledTemplateResult<T>;
 //#endregion
 //#region src/elements/use-date-input/use-date-input.d.ts
-declare const UseDateInput_base: (new (...args: any[]) => LocalizedElementInterface<{
+declare const UseDateInput_base: (new (...args: any[]) => LocaleDigitsElementInterface) & (new (...args: any[]) => LocalizedElementInterface<{
   year: string;
   month: string;
   day: string;
@@ -242,7 +251,7 @@ declare global {
 }
 //#endregion
 //#region src/elements/use-duration-input/use-duration-input.d.ts
-declare const UseDurationInput_base: (new (...args: any[]) => LocalizedElementInterface<{
+declare const UseDurationInput_base: (new (...args: any[]) => LocaleDigitsElementInterface) & (new (...args: any[]) => LocalizedElementInterface<{
   year: string;
   month: string;
   day: string;
@@ -364,7 +373,7 @@ declare global {
 }
 //#endregion
 //#region src/elements/use-time-input/use-time-input.d.ts
-declare const UseTimeInput_base: (new (...args: any[]) => LocalizedElementInterface<{
+declare const UseTimeInput_base: (new (...args: any[]) => LocaleDigitsElementInterface) & (new (...args: any[]) => LocalizedElementInterface<{
   hour: string;
   minute: string;
   second: string;
@@ -1022,13 +1031,20 @@ declare global {
 //#endregion
 //#region src/elements/use-calendar-base/use-calendar-base.d.ts
 type LitHtml$1 = typeof html;
+/** The day cell passed to {@link UseCalendarRenderDay}. */
+export type UseCalendarDayData = {
+  day: number;
+  localizedDay: string;
+  date: string;
+};
 /**
  * Renders the content of a single day cell. Called for every cell in the
  * grid, including leading and trailing filler cells from the previous and
  * next month, so `date` may fall outside the displayed month.
  *
- * `day` is the numeric day of month (not zero-padded); `date` is the ISO
- * `YYYY-MM-DD` string for that cell. The `html` argument is Lit's tag
+ * `day` is the numeric day of month (not zero-padded); `localizedDay` is that
+ * day written in the locale's numbering system (e.g. `١٤` for `ar-EG`); `date`
+ * is the ISO `YYYY-MM-DD` string for that cell. The `html` argument is Lit's tag
  * function, passed in so consumers do not need to import `lit` themselves —
  * use it to return markup, since a plain returned string is escaped.
  *
@@ -1041,11 +1057,8 @@ type LitHtml$1 = typeof html;
  * analyzer (it only reads class and member JSDoc), so it never reaches the
  * generated docs or Storybook.
  */
-export type UseCalendarRenderDay = (data: {
-  day: number;
-  date: string;
-}, html: LitHtml$1) => TemplateResult | string;
-declare const UseCalendarBase_base: (new (...args: any[]) => InlineDirectionElementInterface) & (new (...args: any[]) => LocalizedElementInterface<{
+export type UseCalendarRenderDay = (data: UseCalendarDayData, html: LitHtml$1) => TemplateResult | string;
+declare const UseCalendarBase_base: (new (...args: any[]) => InlineDirectionElementInterface) & (new (...args: any[]) => LocaleDigitsElementInterface) & (new (...args: any[]) => LocalizedElementInterface<{
   previousMonth: string;
   currentMonth: string;
   nextMonth: string;
@@ -1139,7 +1152,8 @@ export declare class UseCalendarBase extends UseCalendarBase_base {
   protected onGridFocusOut(): void;
   getDateForDay(day: number): string;
   /**
-   * See {@link UseCalendarRenderDay}. Assigning a new function on an
+   * See {@link UseCalendarRenderDay}. The default renders `localizedDay`, the
+   * day in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an
    * instance (e.g. via `.renderDay=${fn}` in a Lit template) after first
    * render does not schedule a re-render on its own — call `requestUpdate()`
    * if needed.
@@ -1148,10 +1162,7 @@ export declare class UseCalendarBase extends UseCalendarBase_base {
    * overrides can call `super.renderDay(data, html)` to fall back to the
    * default (or a parent override's) rendering.
    */
-  renderDay(data: {
-    day: number;
-    date: string;
-  }, _html: LitHtml$1): TemplateResult | string;
+  renderDay(data: UseCalendarDayData, _html: LitHtml$1): TemplateResult | string;
   previousMonth(): void;
   today(): void;
   nextMonth(): void;
@@ -1172,17 +1183,17 @@ export declare class UseCalendarBase extends UseCalendarBase_base {
  *
  * Customize day rendering on an instance:
  * ```ts
- * datePicker.renderDay = ({ day, date }, html) =>
- *   date === "2026-03-17" ? html`<strong>${day}</strong>` : String(day);
+ * datePicker.renderDay = ({ localizedDay, date }, html) =>
+ *   date === "2026-03-17" ? html`<strong>${localizedDay}</strong>` : localizedDay;
  * ```
  *
  * Or override on a subclass to apply it to every instance, falling back to
  * `super.renderDay(...)` for dates you don't want to customize:
  * ```ts
  * class MyDatePicker extends UseDatePicker {
- *   renderDay(data: { day: number; date: string }, html: LitHtml) {
+ *   renderDay(data: UseCalendarDayData, html: LitHtml) {
  *     if (data.date === "2026-03-17") {
- *       return html`<strong>${data.day}</strong>`;
+ *       return html`<strong>${data.localizedDay}</strong>`;
  *     }
  *     return super.renderDay(data, html);
  *   }
@@ -1211,17 +1222,17 @@ declare global {
  *
  * Customize day rendering on an instance:
  * ```ts
- * weekPicker.renderDay = ({ day, date }, html) =>
- *   date === "2026-03-17" ? html`<strong>${day}</strong>` : String(day);
+ * weekPicker.renderDay = ({ localizedDay, date }, html) =>
+ *   date === "2026-03-17" ? html`<strong>${localizedDay}</strong>` : localizedDay;
  * ```
  *
  * Or override on a subclass to apply it to every instance, falling back to
  * `super.renderDay(...)` for dates you don't want to customize:
  * ```ts
  * class MyWeekPicker extends UseWeekPicker {
- *   renderDay(data: { day: number; date: string }, html: LitHtml) {
+ *   renderDay(data: UseCalendarDayData, html: LitHtml) {
  *     if (data.date === "2026-03-17") {
- *       return html`<strong>${data.day}</strong>`;
+ *       return html`<strong>${data.localizedDay}</strong>`;
  *     }
  *     return super.renderDay(data, html);
  *   }

package/dist/use-wc.mjs

@@ -1,5 +1,5 @@
 import { a as dateTimeFormat, c as localeInfo, l as numberFormat, o as displayNames, r as resolveString, s as durationFormat, t as STRINGS_CHANGE_EVENT } from "./strings-I8gB8a3e.mjs";
-import { LitElement, css, html, unsafeCSS } from "lit";
+import { LitElement, css, html, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, queryAssignedElements } from "lit/decorators.js";
 import * as duration from "duration-fns";
 import { focusable, getTabIndex, isFocusable, isTabbable, tabbable } from "tabbable";
@@ -347,8 +347,116 @@ var use_date_input_strings_default = {
 	day: "day"
 };
 //#endregion
+//#region src/utils/locale-digits.ts
+const LATIN_DIGITS = "0123456789";
+const digitsByLocale = /* @__PURE__ */ new Map();
+/** The locale's digits for 0 through 9, or `undefined` when it already writes Latin digits. */
+function resolveLocaleDigits(locale) {
+	if (!digitsByLocale.has(locale)) {
+		const formatter = numberFormat(locale, { useGrouping: false });
+		digitsByLocale.set(locale, formatter.resolvedOptions().numberingSystem === "latn" ? void 0 : Array.from(LATIN_DIGITS, (digit) => formatter.format(Number(digit))));
+	}
+	return digitsByLocale.get(locale);
+}
+/** Writes the Latin digits of a value with the given digits, or as is when there are none. */
+function toLocaleDigits(digits, value) {
+	if (value === void 0) return "";
+	if (!digits) return String(value);
+	return Array.from(String(value)).filter((character) => LATIN_DIGITS.includes(character)).map((character) => digits[Number(character)]).join("");
+}
+const FULLWIDTH_ZERO = 65296;
+function latinDigit(digits, character) {
+	if (LATIN_DIGITS.includes(character)) return character;
+	const fullwidthOffset = character.charCodeAt(0) - FULLWIDTH_ZERO;
+	if (character.length === 1 && fullwidthOffset >= 0 && fullwidthOffset <= 9) return String(fullwidthOffset);
+	const index = digits ? digits.indexOf(character) : -1;
+	return index === -1 ? void 0 : String(index);
+}
+/**
+* Reads the given digits, full-width digits, or Latin digits as Latin digits, dropping any other
+* characters.
+*/
+function toLatinDigits(digits, text) {
+	return Array.from(text).map((character) => latinDigit(digits, character) ?? "").join("");
+}
+/** Rewrites the given digits and full-width digits as Latin digits, keeping any other characters. */
+function normalizeDigits(digits, text) {
+	return Array.from(text).map((character) => latinDigit(digits, character) ?? character).join("");
+}
+/** Whether every character is one of the given digits, a full-width digit, or a Latin digit. */
+function hasOnlyDigits(digits, text) {
+	return Array.from(text).every((character) => latinDigit(digits, character) !== void 0);
+}
+//#endregion
+//#region src/utils/locale-digits-element.ts
+/**
+* Writes and reads numbers in the element's numbering system, such as `١٤` for `ar-EG`. The
+* locale's digits are resolved once per locale change, before the element renders, so formatting
+* and parsing never look the locale up again. Locales that use Latin digits skip the conversion.
+*/
+function LocaleDigitsElement(superClass) {
+	class LocaleDigits extends superClass {
+		#digits;
+		willUpdate(changedProperties) {
+			super.willUpdate(changedProperties);
+			if (!this.hasUpdated || changedProperties.has("locale")) this.#digits = resolveLocaleDigits(this.locale);
+		}
+		toLocaleDigits(value) {
+			return toLocaleDigits(this.#digits, value);
+		}
+		toLatinDigits(text) {
+			return toLatinDigits(this.#digits, text);
+		}
+		segmentNumber(text) {
+			const latin = toLatinDigits(this.#digits, text ?? "");
+			return latin === "" ? void 0 : parseInt(latin, 10);
+		}
+		/**
+		* Steps a numeric segment input by one on ArrowUp or ArrowDown, within its range, and
+		* dispatches an `input` event like a native number input does.
+		*/
+		stepSegment(event, minimum, maximum) {
+			if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+			if (event.altKey || event.ctrlKey || event.metaKey) return;
+			event.preventDefault();
+			const input = event.target;
+			if (input.readOnly || input.disabled) return;
+			const step = event.key === "ArrowUp" ? 1 : -1;
+			const current = this.segmentNumber(input.value);
+			const next = current === void 0 ? step < 0 && maximum !== void 0 ? maximum : minimum : current + step;
+			const clamped = Math.max(minimum, maximum === void 0 ? next : Math.min(maximum, next));
+			input.value = this.toLocaleDigits(clamped);
+			input.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				inputType: "insertReplacementText",
+				data: input.value
+			}));
+		}
+		/**
+		* Handles a numeric segment's `beforeinput` event. Typed, pasted, or dropped digits go through
+		* as usual. Other text is cancelled, unless `applyPastedValue` accepts it as a whole value, with
+		* its digits already rewritten as Latin digits, in which case an `input` event is dispatched
+		* from the element.
+		*/
+		filterSegmentInput(event, applyPastedValue) {
+			if (event.isComposing || event.inputType === "insertCompositionText") return;
+			const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
+			if (text === "" || hasOnlyDigits(this.#digits, text)) return;
+			event.preventDefault();
+			if (applyPastedValue(normalizeDigits(this.#digits, text.trim()))) this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				inputType: "insertFromPaste",
+				data: text
+			}));
+		}
+	}
+	return LocaleDigits;
+}
+//#endregion
 //#region src/elements/use-date-input/use-date-input.ts
-let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement, use_date_input_strings_default) {
+let UseDateInput = class UseDateInput extends LocaleDigitsElement(LocalizedElement(UseLocaleElement, use_date_input_strings_default)) {
 	intlStrings() {
 		return getDateTimeAriaLabels(this.locale, { plural: false });
 	}
@@ -382,6 +490,7 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
 			};
 			else {
 				const date = new Date(value.concat("T00:00:00"));
+				if (isNaN(date.getTime())) throw new RangeError(`Invalid date: ${value}`);
 				this.#valueData = {
 					year: date.getFullYear().toString(),
 					month: (date.getMonth() + 1).toString(),
@@ -421,9 +530,9 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
 		day: ""
 	};
 	#updateInputValues() {
-		if (this.yearInput) this.yearInput.value = this.#valueData.year;
-		if (this.monthInput) this.monthInput.value = this.#valueData.month;
-		if (this.dayInput) this.dayInput.value = this.#valueData.day;
+		if (this.yearInput) this.yearInput.value = this.toLocaleDigits(this.#valueData.year);
+		if (this.monthInput) this.monthInput.value = this.toLocaleDigits(this.#valueData.month);
+		if (this.dayInput) this.dayInput.value = this.toLocaleDigits(this.#valueData.day);
 	}
 	#updateInternalValue() {
 		const { year, month, day } = this.#valueData;
@@ -434,19 +543,42 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
 		].join("-");
 		this.#internals.setFormValue(this.#internalValue);
 	}
+	#segmentMinimum = {
+		year: 0,
+		month: 1,
+		day: 1
+	};
 	#segmentMaximum = {
-		year: null,
+		year: void 0,
 		month: 12,
 		day: 31
 	};
 	#handleSegmentInput(segment) {
 		return (event) => {
+			if (event instanceof InputEvent && event.isComposing) return;
 			const target = event.target;
 			const maximum = this.#segmentMaximum[segment];
-			const numericValue = parseInt(target.value, 10);
-			if (maximum !== null && !isNaN(numericValue) && numericValue > maximum) target.value = String(maximum);
-			this.#valueData[segment] = target.value;
+			let value = this.toLatinDigits(target.value);
+			const numericValue = parseInt(value, 10);
+			if (maximum !== void 0 && !isNaN(numericValue) && numericValue > maximum) value = String(maximum);
+			target.value = this.toLocaleDigits(value);
+			this.#valueData[segment] = value;
 			this.#updateInternalValue();
+			this.requestUpdate();
+		};
+	}
+	#handleSegmentBeforeInput(event) {
+		this.filterSegmentInput(event, (text) => this.#applyPastedValue(text));
+	}
+	#applyPastedValue(text) {
+		const match = /^(\d{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12]\d|3[01]))(?:T.*)?$/.exec(text);
+		if (!match) return false;
+		this.value = match[1];
+		return true;
+	}
+	#handleSegmentKeydown(segment) {
+		return (event) => {
+			this.stepSegment(event, this.#segmentMinimum[segment], this.#segmentMaximum[segment]);
 		};
 	}
 	#segmentId(unit) {
@@ -484,6 +616,7 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
 	set value(value) {
 		this.#initializeValue(value);
 		this.#updateInputValues();
+		this.requestUpdate();
 	}
 	render() {
 		return html`
@@ -492,23 +625,31 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
 				"year",
 				"month",
 				"day"
-			].includes(part.type)) return html`
+			].includes(part.type)) {
+				const segment = part.type;
+				return html`
             <input
-              type="number"
-              .value=${this.#valueData[part.type]}
+              type="text"
+              inputmode="numeric"
+              role="spinbutton"
+              .value=${this.toLocaleDigits(this.#valueData[segment])}
               ?disabled=${this.disabled}
               ?readonly=${this.readOnly}
-              aria-label=${this.string(part.type)}
-              min=${part.type === "year" ? "0" : "1"}
-              max=${part.type === "month" ? "12" : part.type === "day" ? "31" : void 0}
-              part="segment-input segment-input-${part.type}"
-              id="${this.#segmentId(part.type)}"
+              aria-label=${this.string(segment)}
+              aria-valuemin=${this.#segmentMinimum[segment]}
+              aria-valuemax=${this.#segmentMaximum[segment] ?? nothing}
+              aria-valuenow=${this.segmentNumber(this.#valueData[segment]) ?? nothing}
+              part="segment-input segment-input-${segment}"
+              id="${this.#segmentId(segment)}"
               form=${this.#formId}
-              size=${part.type === "year" ? 4 : 2}
-              @input=${this.#handleSegmentInput(part.type)}
+              size=${segment === "year" ? 4 : 2}
+              @beforeinput=${this.#handleSegmentBeforeInput}
+              @input=${this.#handleSegmentInput(segment)}
+              @compositionend=${this.#handleSegmentInput(segment)}
+              @keydown=${this.#handleSegmentKeydown(segment)}
             />
           `;
-			else if (part.type === "literal") return html`<span part="segment-literal segment-literal-date" aria-hidden="true"
+			} else if (part.type === "literal") return html`<span part="segment-literal segment-literal-date" aria-hidden="true"
             >${part.value}</span
           >`;
 			return null;
@@ -523,7 +664,6 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
       gap: 0.5ch;
 
       input {
-        -moz-appearance: textfield;
         font-variant-numeric: tabular-nums;
         field-sizing: content;
         text-align: end;
@@ -531,12 +671,6 @@ let UseDateInput = class UseDateInput extends LocalizedElement(UseLocaleElement,
         width: fit-content;
       }
     }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
   `;
 	}
 };
@@ -573,7 +707,7 @@ const ISO_DURATION_SEGMENTS = {
 	second: "seconds",
 	millisecond: "milliseconds"
 };
-let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocaleElement, use_duration_input_strings_default) {
+let UseDurationInput = class UseDurationInput extends LocaleDigitsElement(LocalizedElement(UseLocaleElement, use_duration_input_strings_default)) {
 	intlStrings() {
 		return getDateTimeAriaLabels(this.locale, { plural: true });
 	}
@@ -652,6 +786,7 @@ let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocale
 	set value(value) {
 		this.#initializeValue(value);
 		this.#updateInputValues();
+		this.requestUpdate();
 	}
 	#valueData;
 	#formatParts;
@@ -686,20 +821,37 @@ let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocale
 	}
 	#handleSegmentInput(segment) {
 		return (event) => {
+			if (event instanceof InputEvent && event.isComposing) return;
 			const target = event.target;
-			this.#valueData[ISO_DURATION_SEGMENTS[segment]] = isNaN(target.valueAsNumber) ? 0 : target.valueAsNumber;
+			this.#valueData[ISO_DURATION_SEGMENTS[segment]] = this.segmentNumber(target.value) ?? 0;
 			this.value = duration.toString(this.#valueData);
 		};
 	}
+	#handleSegmentBeforeInput(event) {
+		this.filterSegmentInput(event, (text) => this.#applyPastedValue(text));
+	}
+	#applyPastedValue(text) {
+		if (!text.startsWith("P")) return false;
+		try {
+			duration.parse(text);
+		} catch {
+			return false;
+		}
+		this.value = text;
+		return true;
+	}
+	#handleSegmentKeydown(event) {
+		this.stepSegment(event, 0);
+	}
 	#updateInputValues() {
-		if (this.yearInput) this.yearInput.value = String(this.#valueData.years ?? 0);
-		if (this.monthInput) this.monthInput.value = String(this.#valueData.months ?? 0);
-		if (this.weekInput) this.weekInput.value = String(this.#valueData.weeks ?? 0);
-		if (this.dayInput) this.dayInput.value = String(this.#valueData.days ?? 0);
-		if (this.hourInput) this.hourInput.value = String(this.#valueData.hours ?? 0);
-		if (this.minuteInput) this.minuteInput.value = String(this.#valueData.minutes ?? 0);
-		if (this.secondInput) this.secondInput.value = String(this.#valueData.seconds ?? 0);
-		if (this.millisecondInput) this.millisecondInput.value = String(this.#valueData.milliseconds ?? 0);
+		if (this.yearInput) this.yearInput.value = this.toLocaleDigits(this.#valueData.years ?? 0);
+		if (this.monthInput) this.monthInput.value = this.toLocaleDigits(this.#valueData.months ?? 0);
+		if (this.weekInput) this.weekInput.value = this.toLocaleDigits(this.#valueData.weeks ?? 0);
+		if (this.dayInput) this.dayInput.value = this.toLocaleDigits(this.#valueData.days ?? 0);
+		if (this.hourInput) this.hourInput.value = this.toLocaleDigits(this.#valueData.hours ?? 0);
+		if (this.minuteInput) this.minuteInput.value = this.toLocaleDigits(this.#valueData.minutes ?? 0);
+		if (this.secondInput) this.secondInput.value = this.toLocaleDigits(this.#valueData.seconds ?? 0);
+		if (this.millisecondInput) this.millisecondInput.value = this.toLocaleDigits(this.#valueData.milliseconds ?? 0);
 	}
 	#unitLabel(unit) {
 		return unit in use_duration_input_strings_default ? this.string(unit) : void 0;
@@ -711,16 +863,22 @@ let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocale
           ${parts.map((part) => {
 				if (["integer", "fraction"].includes(part.type)) return html`
                 <input
-                  type="number"
-                  .value=${this.#valueData[ISO_DURATION_SEGMENTS[unit]]}
+                  type="text"
+                  inputmode="numeric"
+                  role="spinbutton"
+                  .value=${this.toLocaleDigits(this.#valueData[ISO_DURATION_SEGMENTS[unit]])}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readOnly}
                   aria-label=${this.format === "digital" && part.type === "fraction" ? this.string("millisecond") : this.#unitLabel(unit)}
-                  min="0"
+                  aria-valuemin="0"
+                  aria-valuenow=${this.#valueData[ISO_DURATION_SEGMENTS[unit]] ?? nothing}
                   part="segment-input segment-input-${unit}"
                   id="${this.#segmentId(unit)}"
                   form=${this.#formId}
+                  @beforeinput=${this.#handleSegmentBeforeInput}
                   @input=${this.#handleSegmentInput(unit)}
+                  @compositionend=${this.#handleSegmentInput(unit)}
+                  @keydown=${this.#handleSegmentKeydown}
                 />
               `;
 				if (["unit", "decimal"].includes(part.type)) return html`
@@ -740,7 +898,6 @@ let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocale
 		this.styles = css`
     :host {
       input {
-        -moz-appearance: textfield;
         font-variant-numeric: tabular-nums;
         field-sizing: content;
         text-align: end;
@@ -753,12 +910,6 @@ let UseDurationInput = class UseDurationInput extends LocalizedElement(UseLocale
       align-items: center;
       gap: 0.5ch;
     }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
   `;
 	}
 };
@@ -1026,7 +1177,7 @@ var use_time_input_strings_default = {
 };
 //#endregion
 //#region src/elements/use-time-input/use-time-input.ts
-let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement, use_time_input_strings_default) {
+let UseTimeInput = class UseTimeInput extends LocaleDigitsElement(LocalizedElement(UseLocaleElement, use_time_input_strings_default)) {
 	intlStrings() {
 		return getDateTimeAriaLabels(this.locale, { plural: true });
 	}
@@ -1147,16 +1298,18 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
 	set value(value) {
 		this.#initializeValue(value);
 		this.#updateInputValues();
+		this.requestUpdate();
 	}
 	#valueData;
+	#segmentText(segment) {
+		const length = segment === "fractionalSecond" ? 3 : segment === "hour" && this.hourFormat === "12" ? 1 : 2;
+		return this.toLocaleDigits(this.#valueData[segment]?.padStart(length, "0"));
+	}
 	#updateInputValues() {
-		if (this.hourInput) {
-			if (this.hourFormat === "12") this.hourInput.value = this.#valueData.hour ? this.#valueData.hour : "";
-			else this.hourInput.value = this.#valueData.hour ? this.#valueData.hour.padStart(2, "0") : "";
-		}
-		if (this.minuteInput) this.minuteInput.value = this.#valueData.minute ? this.#valueData.minute.padStart(2, "0") : "";
-		if (this.secondInput) this.secondInput.value = this.#valueData.second ? this.#valueData.second.padStart(2, "0") : "";
-		if (this.fractionalSecondInput) this.fractionalSecondInput.value = this.#valueData.fractionalSecond ? this.#valueData.fractionalSecond.padStart(3, "0") : "";
+		if (this.hourInput) this.hourInput.value = this.#segmentText("hour");
+		if (this.minuteInput) this.minuteInput.value = this.#segmentText("minute");
+		if (this.secondInput) this.secondInput.value = this.#segmentText("second");
+		if (this.fractionalSecondInput) this.fractionalSecondInput.value = this.#segmentText("fractionalSecond");
 		if (this.dayPeriodInput) this.dayPeriodInput.value = this.#valueData.dayPeriod ? this.string(this.#valueData.dayPeriod) : "";
 	}
 	#formatParts;
@@ -1214,28 +1367,31 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
 	}
 	#handleSegmentInput(segment) {
 		return (event) => {
+			if (event instanceof InputEvent && event.isComposing) return;
 			const target = event.target;
-			if (target.value === "") {
+			if (segment === "dayPeriod" ? target.value === "" : this.toLatinDigits(target.value) === "") {
+				target.value = "";
 				this.#valueData[segment] = void 0;
 				this.#updateInternalValue();
+				this.requestUpdate();
 				return;
 			}
-			const value = isNaN(target.valueAsNumber) ? 0 : target.valueAsNumber;
+			const value = this.segmentNumber(target.value) ?? 0;
 			if (segment === "hour") {
 				const use12Hour = this.hourFormat === "12" && this.dayPeriod;
 				const min = use12Hour ? 1 : 0;
 				const max = use12Hour ? 12 : 23;
 				this.#valueData.hour = Math.max(min, Math.min(max, value)).toString();
-				target.value = this.hourFormat === "12" ? this.#valueData.hour : this.#valueData.hour.padStart(2, "0");
+				target.value = this.toLocaleDigits(this.hourFormat === "12" ? this.#valueData.hour : this.#valueData.hour.padStart(2, "0"));
 			} else if (segment === "minute") {
 				this.#valueData.minute = Math.max(0, Math.min(59, value)).toString();
-				target.value = this.#valueData.minute.padStart(2, "0");
+				target.value = this.toLocaleDigits(this.#valueData.minute.padStart(2, "0"));
 			} else if (segment === "second") {
 				this.#valueData.second = Math.max(0, Math.min(59, value)).toString();
-				target.value = this.#valueData.second.padStart(2, "0");
+				target.value = this.toLocaleDigits(this.#valueData.second.padStart(2, "0"));
 			} else if (segment === "fractionalSecond") {
 				this.#valueData.fractionalSecond = Math.max(0, Math.min(999, value)).toString();
-				target.value = this.#valueData.fractionalSecond.padStart(3, "0");
+				target.value = this.toLocaleDigits(this.#valueData.fractionalSecond.padStart(3, "0"));
 			} else if (segment === "dayPeriod") {
 				event.preventDefault();
 				const validValue = this.#computeValidAmPmValue(event);
@@ -1245,6 +1401,21 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
 				}
 			}
 			this.#updateInternalValue();
+			this.requestUpdate();
+		};
+	}
+	#handleNumericSegmentBeforeInput(event) {
+		this.filterSegmentInput(event, (text) => this.#applyPastedValue(text));
+	}
+	#applyPastedValue(text) {
+		const match = /^(?:\d{4}-\d{2}-\d{2}T)?((?:[01]\d|2[0-3]):[0-5]\d(?::[0-5]\d(?:\.\d{1,3})?)?)(?:Z|[+-]\d{2}:?\d{2})?$/.exec(text);
+		if (!match) return false;
+		this.value = match[1];
+		return true;
+	}
+	#handleNumericSegmentKeydown(segment) {
+		return (event) => {
+			this.stepSegment(event, this.#getMinValue(segment), this.#getMaxValue(segment));
 		};
 	}
 	#toggleDayPariod(target, value) {
@@ -1305,6 +1476,9 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
 		this.#internalValue = output.join(":").concat(fractionalSecond && this.fractionalSeconds ? "." + fractionalSecond.padStart(3, "0") : "");
 		this.#internals.setFormValue(this.#internalValue);
 	}
+	#getMinValue(type) {
+		return type === "hour" && this.hourFormat === "12" && this.dayPeriod ? 1 : 0;
+	}
 	#getMaxValue(type) {
 		if (type === "hour") return this.#maxHours;
 		if (type === "minute" || type === "second") return 59;
@@ -1314,20 +1488,36 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
 		return this.#formatParts.map((part) => {
 			return part.type === "literal" ? html`<span part="segment-literal segment-literal-${part.type}" aria-hidden="true"
             >${part.value}</span
-          >` : html`<input
-            type=${part.type === "dayPeriod" ? "text" : "number"}
-            value=${part.type === "dayPeriod" ? this.#valueData.dayPeriod ? this.string(this.#valueData.dayPeriod) : "" : this.#valueData[part.type]}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readOnly}
-            aria-label=${this.string(part.type === "fractionalSecond" ? "millisecond" : part.type)}
-            min="0"
-            max=${this.#getMaxValue(part.type)}
-            part="segment-input segment-input-${part.type}"
-            id="${this.#segmentId(part.type)}"
-            form=${this.#formId}
-            @input=${this.#handleSegmentInput(part.type)}
-            @keydown=${part.type === "dayPeriod" ? this.#handleSegmentKeydown : void 0}
-          />`;
+          >` : part.type === "dayPeriod" ? html`<input
+              type="text"
+              value=${this.#valueData.dayPeriod ? this.string(this.#valueData.dayPeriod) : ""}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readOnly}
+              aria-label=${this.string(part.type)}
+              part="segment-input segment-input-${part.type}"
+              id="${this.#segmentId(part.type)}"
+              form=${this.#formId}
+              @input=${this.#handleSegmentInput(part.type)}
+              @keydown=${this.#handleSegmentKeydown}
+            />` : html`<input
+              type="text"
+              inputmode="numeric"
+              role="spinbutton"
+              .value=${this.#segmentText(part.type)}
+              ?disabled=${this.disabled}
+              ?readonly=${this.readOnly}
+              aria-label=${this.string(part.type === "fractionalSecond" ? "millisecond" : part.type)}
+              aria-valuemin=${this.#getMinValue(part.type)}
+              aria-valuemax=${this.#getMaxValue(part.type) ?? nothing}
+              aria-valuenow=${this.segmentNumber(this.#valueData[part.type]) ?? nothing}
+              part="segment-input segment-input-${part.type}"
+              id="${this.#segmentId(part.type)}"
+              form=${this.#formId}
+              @beforeinput=${this.#handleNumericSegmentBeforeInput}
+              @input=${this.#handleSegmentInput(part.type)}
+              @compositionend=${this.#handleSegmentInput(part.type)}
+              @keydown=${this.#handleNumericSegmentKeydown(part.type)}
+            />`;
 		});
 	}
 	static {
@@ -1338,7 +1528,6 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
       gap: 0.5ch;
 
       input {
-        -moz-appearance: textfield;
         font-variant-numeric: tabular-nums;
         field-sizing: content;
         text-align: end;
@@ -1349,12 +1538,6 @@ let UseTimeInput = class UseTimeInput extends LocalizedElement(UseLocaleElement,
         min-width: 3ch;
       }
     }
-
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
   `;
 	}
 };
@@ -2823,7 +3006,7 @@ const INITIAL_TABINDEX_ATTR = "data-usewc-calendar-tabindex";
 * @csspart picker-month - An individual month button
 * @csspart picker-month-current - Applied to the currently selected month button
 */
-var UseCalendarBase = class extends InlineDirectionElement(LocalizedElement(UseLocaleElement, use_calendar_strings_default)) {
+var UseCalendarBase = class extends InlineDirectionElement(LocaleDigitsElement(LocalizedElement(UseLocaleElement, use_calendar_strings_default))) {
 	static {
 		this.localeRoot = "use-calendar";
 	}
@@ -3132,7 +3315,8 @@ var UseCalendarBase = class extends InlineDirectionElement(LocalizedElement(UseL
 		});
 	}
 	/**
-	* See {@link UseCalendarRenderDay}. Assigning a new function on an
+	* See {@link UseCalendarRenderDay}. The default renders `localizedDay`, the
+	* day in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an
 	* instance (e.g. via `.renderDay=${fn}` in a Lit template) after first
 	* render does not schedule a re-render on its own — call `requestUpdate()`
 	* if needed.
@@ -3142,7 +3326,7 @@ var UseCalendarBase = class extends InlineDirectionElement(LocalizedElement(UseL
 	* default (or a parent override's) rendering.
 	*/
 	renderDay(data, _html) {
-		return String(data.day);
+		return data.localizedDay;
 	}
 	get #todayDate() {
 		return this.getDateForDay((/* @__PURE__ */ new Date()).getDate());
@@ -3150,6 +3334,7 @@ var UseCalendarBase = class extends InlineDirectionElement(LocalizedElement(UseL
 	#renderDayCell(year, month, day, rowIndex, columnIndex, empty = false) {
 		const date = this.#formatDate(year, month, day);
 		const disabled = this.#dateDisabled(date);
+		const localizedDay = this.toLocaleDigits(day);
 		return html`
       <div
         @focusin=${this.#handleCellFocusIn}
@@ -3173,6 +3358,7 @@ var UseCalendarBase = class extends InlineDirectionElement(LocalizedElement(UseL
       >
         <slot name="date-${date}">${this.renderDay({
 			day,
+			localizedDay,
 			date
 		}, html)}</slot>
       </div>
@@ -4137,9 +4323,27 @@ let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
 		this.#internalValue = "";
 		this.#dateValue = "";
 		this.#timeValue = "";
+		this.#handleBeforeInput = (event) => {
+			if (event.isComposing) return;
+			const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
+			const match = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}(?::\d{2}(?:\.\d{1,3})?)?)/.exec(normalizeDigits(resolveLocaleDigits(this.locale), text.trim()));
+			if (!match || !this.dateElement || !this.timeElement) return;
+			event.preventDefault();
+			event.stopPropagation();
+			this.dateElement.value = match[1];
+			this.timeElement.value = match[2];
+			this.#updateInternalValue();
+			this.dispatchEvent(new InputEvent("input", {
+				bubbles: true,
+				composed: true,
+				inputType: "insertFromPaste",
+				data: text
+			}));
+		};
 		this.#internals = this.attachInternals();
 		this.#id = this.hasAttribute("id") ? this.getAttribute("id") : createId();
 		if (this.hasAttribute("disabled")) this.#internals.states.add("disabled");
+		this.addEventListener("beforeinput", this.#handleBeforeInput, { capture: true });
 	}
 	get id() {
 		return this.#id;
@@ -4174,7 +4378,7 @@ let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
 		this.#initializeValue(val);
 	}
 	#initializeValue(val) {
-		const [datePart, timePart] = this.value.replace("Z", "").split("T");
+		const [datePart, timePart] = val.replace("Z", "").split("T");
 		this.#dateValue = datePart ?? "";
 		this.#timeValue = timePart ?? "";
 		this.#internalValue = val;
@@ -4191,6 +4395,7 @@ let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
 		else this.#internalValue = `${date}T${time}`;
 		this.#internals.setFormValue(this.#internalValue);
 	}
+	#handleBeforeInput;
 	#handleInput(event) {
 		const target = event.target;
 		if (target === this.dateElement || target === this.timeElement) this.#updateInternalValue();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-wc",
-  "version": "1.0.0-pre.89",
+  "version": "1.0.0-pre.90",
   "private": false,
   "homepage": "https://usewc.com",
   "bugs": "https://github.com/dang-rabbits/use-wc/issues",

package/vscode.html-custom-data.json

@@ -19,6 +19,18 @@
       ],
       "references": []
     },
+    {
+      "name": "use-avatar",
+      "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.\n---\n\n\n### **Slots:**\n - _default_ - The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.\n\n### **CSS Parts:**\n - **initials** - The span that renders the `name` fallback.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "use-badge",
       "description": "`use-badge` renders a small indicator anchored to another element's corner, using\n[CSS anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning)\ninstead of the classic `position: absolute` + negative-offset trick. This lets the badge live\nanywhere in the DOM rather than being a child of the element it decorates. A badge's shape,\ncolor, and positioning ship built in — reading from the design system's tokens when\n`tokens.css` is loaded, and falling back to sensible defaults otherwise — so no theme is\nrequired to get a working, visible badge.\n\nPoint a badge at its target with the `anchortarget` attribute, set to the target's `id`\n(named to avoid colliding with the `anchor` content attribute HTML is gaining natively):\n\n```html\n<button type=\"button\" id=\"inbox\">Inbox</button>\n<use-badge anchortarget=\"inbox\">99+</use-badge>\n```\n\nThe badge and its anchor must live in the same DOM tree — a badge cannot reach an anchor\ninside another component's shadow root, and an anchor's `anchor-name` set inside a shadow\ntree's stylesheet is not visible here. No positioned ancestor or shared containing block is\nrequired: anchor positioning resolves the badge's location straight from the anchor's own\ngeometry, so the badge can sit anywhere else in the DOM tree.\n\nWithout a resolved anchor — `anchortarget` unset, pointing at a missing id, or `anchorElement`\nnever assigned — the badge has no `:state(anchored)` and renders as a plain inline chip in\nnormal document flow, still using the same color/shape styling.\n\nSome components render their host as `display: contents`, which has no box of its own for CSS\nanchor positioning to resolve against. If the anchor computes a non-empty `--usewc-anchor-name`\ncustom property, the badge uses that dashed-ident as its `position-anchor` directly instead of\ngenerating and writing its own onto the anchor — letting a component publish the name of a\nreal, box-generating part of itself (already established for its own purposes) for badges to\ntarget instead of its host, even though that part lives inside the component's own shadow root.\nThis mechanism is shared with `use-menu`/`use-anchored` via `AnchorController`; components\nwithout a `display: contents` host don't need to publish anything.\n\n**Known Firefox limitation:** anchoring across a shadow root boundary this way — the case\n`--usewc-anchor-name` exists for — is mispositioned in Firefox as of this writing. Verified\ndirectly: `anchor()`'s logical `start`/`end` keywords resolve backwards on both axes\nspecifically for a cross-shadow-root anchor reference, in Firefox only — the same anchor()\ncalls resolve correctly for a same-tree anchor in Firefox, and cross-shadow anchoring resolves\ncorrectly in Chromium and Safari. A badge anchored to a plain element (button, input, anything\nthat isn't itself relying on this escape hatch) is unaffected in every engine, including\nFirefox.\n\n## Side effects\n\nThe badge is a sibling of its anchor rather than a child, so **as a side effect, a badge\nmutates its anchor element**: it appends its own id to the anchor's `aria-describedby`\n(preserving any ids already there, the same way `anchor-name` is appended rather than\nreplaced) to keep its content connected to the anchor for assistive technology. This means a\nbadge's content, or its `aria-label` when set, is announced as part of interacting with the\nanchor, e.g. \"Inbox button, 3\". A `dot` badge has no content of its own, so set `aria-label`\ndirectly on `<use-badge>` for a meaningful description (e.g. `aria-label=\"3 unread messages\"`);\nwithout one, the description contributes nothing and the anchor announces as before.\n\nAvoid adding `aria-hidden` to `<use-badge>` if you rely on this: while the description\ncomputation is specified to still read a hidden node when it's the direct target of\n`aria-describedby`, support for that specific case is inconsistent across browsers and screen\nreaders.\n\nSet `options=\"noaria\"` to opt a badge out of this and leave the anchor's `aria-describedby`\nuntouched, e.g. when the anchor already documents the badge's meaning some other way.\n---\n\n\n### **Slots:**\n - _default_ - Badge content, e.g. a count or short label. Ignored when `dot` is set.",
@@ -51,18 +63,6 @@
       ],
       "references": []
     },
-    {
-      "name": "use-avatar",
-      "description": "`use-avatar` renders a small, fixed-size, clipped container for a person or entity's\nlikeness. Slot in an `<img>` (or `<picture>`) for a photo, an inline `<svg>` for a\ngenerated or stylized mark, or arbitrary markup (a `<div>` of initials, a calendar badge);\nwhatever is slotted is centered and clipped to the avatar's shape. With nothing slotted,\n`use-avatar` falls back to initials derived from the `name` attribute.\n\n```html\n<use-avatar><img src=\"ada.jpg\" alt=\"\" /></use-avatar>\n<use-avatar name=\"Riley Quinn\"></use-avatar>\n<use-avatar><svg viewBox=\"0 0 32 32\">…</svg></use-avatar>\n```\n\nSize it with plain CSS — `inline-size` for the size and `aspect-ratio` for the proportions —\nfrom a stylesheet, a style attribute, or the design system's theme layer. The element takes no\ncustom properties of its own: it is a query container, so the initials scale from whatever box\nit ends up with. A non-square `aspect-ratio` suits a wide thumbnail or poster.\n\nThe element clips its content but gives it no shape of its own — that is the theme's, through\nthe affordance classes it defines: `.circle` (the themed default), `.square`, `.squircle` in\n`theme/avatar.css`. A circle only reads right at a `1` ratio, so a wide avatar wants one of the\nothers.\n\nThe element takes no ARIA role of its own. A slotted `<img>` carries its own `alt`, and the\ninitials fallback is plain text in the accessibility tree — an avatar is decorative beside a\nname far more often than it is the name itself, so labelling it here would mean announcing\nthat name twice.\n---\n\n\n### **Slots:**\n - _default_ - The avatar's content: an `<img>`/`<picture>`, an `<svg>`, or arbitrary markup. Left empty, the `name` attribute's initials are shown instead, as the slot's own fallback. A photo fills the frame and crops; anything else keeps its own size, capped at the frame. Give an `<svg>` a `width`/`height` — without one it defaults to filling the box, and a rounded shape will clip its corners.\n\n### **CSS Parts:**\n - **initials** - The span that renders the `name` fallback.",
-      "attributes": [
-        {
-          "name": "name",
-          "description": "The full name, used for the initials fallback (first + last whitespace-separated token, uppercased) when the slot is empty.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "use-calendarday",
       "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.\n---\n\n\n### **Slots:**\n - **default** - slot for custom day content (replaces the day number)",
@@ -94,7 +94,7 @@
     },
     {
       "name": "use-date-picker",
-      "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Methods:**\n - **renderDay(data: _{ day: number; date: string }_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **control-icon** - Arrow glyph inside the previous and next buttons, mirrored in right-to-left layouts\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
+      "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n\nCustomize day rendering on an instance:\n```ts\ndatePicker.renderDay = ({ localizedDay, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${localizedDay}</strong>` : localizedDay;\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyDatePicker extends UseDatePicker {\n  renderDay(data: UseCalendarDayData, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.localizedDay}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\n\n### **Methods:**\n - **renderDay(data: _UseCalendarDayData_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. The default renders `localizedDay`, the\nday in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **control-icon** - Arrow glyph inside the previous and next buttons, mirrored in right-to-left layouts\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
       "attributes": [
         { "name": "year", "description": "1970-9999", "values": [] },
         { "name": "month", "description": "1-12", "values": [] },
@@ -541,7 +541,7 @@
     },
     {
       "name": "use-week-picker",
-      "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).\n\nCustomize day rendering on an instance:\n```ts\nweekPicker.renderDay = ({ day, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${day}</strong>` : String(day);\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyWeekPicker extends UseWeekPicker {\n  renderDay(data: { day: number; date: string }, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.day}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string; dates: string[] }`\n\n### **Methods:**\n - **renderDay(data: _{ day: number; date: string }_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **control-icon** - Arrow glyph inside the previous and next buttons, mirrored in right-to-left layouts\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
+      "description": "A week-granularity date picker. Value format: YYYY-Www (ISO 8601 week).\n\nCustomize day rendering on an instance:\n```ts\nweekPicker.renderDay = ({ localizedDay, date }, html) =>\n  date === \"2026-03-17\" ? html`<strong>${localizedDay}</strong>` : localizedDay;\n```\n\nOr override on a subclass to apply it to every instance, falling back to\n`super.renderDay(...)` for dates you don't want to customize:\n```ts\nclass MyWeekPicker extends UseWeekPicker {\n  renderDay(data: UseCalendarDayData, html: LitHtml) {\n    if (data.date === \"2026-03-17\") {\n      return html`<strong>${data.localizedDay}</strong>`;\n    }\n    return super.renderDay(data, html);\n  }\n}\n```\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string; dates: string[] }`\n\n### **Methods:**\n - **renderDay(data: _UseCalendarDayData_, _html: _LitHtml_): _TemplateResult | string_** - See UseCalendarRenderDay. The default renders `localizedDay`, the\nday in the locale's numbering system, e.g. `١٤` for `ar-EG`. Assigning a new function on an\ninstance (e.g. via `.renderDay=${fn}` in a Lit template) after first\nrender does not schedule a re-render on its own — call `requestUpdate()`\nif needed.\n\nDeclared as a regular method rather than a class field so subclass\noverrides can call `super.renderDay(data, html)` to fall back to the\ndefault (or a parent override's) rendering.\n\n### **Slots:**\n - **header-start** - Content before the title in the header\n- **title** - Title showing the month and year\n- **controls** - Navigation controls (previous, today, next buttons)\n- **header-end** - Content after the controls in the header\n- **date-{YYYY-MM-DD}** - Per-date content that replaces the default day number\n\n### **CSS Parts:**\n - **header** - The header container\n- **title** - The title text\n- **title-month** - The month part of the title\n- **title-literal** - Literal text in the title\n- **title-year** - The year part of the title\n- **controls** - The controls slot container\n- **control** - Individual control button\n- **control-previous** - Previous month button\n- **control-today** - Today button\n- **control-next** - Next month button\n- **control-icon** - Arrow glyph inside the previous and next buttons, mirrored in right-to-left layouts\n- **grid** - The main calendar grid\n- **grid-header** - The header row with day names\n- **grid-header-cell** - Individual day name header cell\n- **grid-body** - The container for calendar weeks\n- **row** - A row of days\n- **day** - A day cell\n- **day-empty** - An empty day cell (from previous/next month)\n- **day-selected** - A selected day cell\n- **day-today** - The current date cell\n- **day-disabled** - A disabled date cell\n- **title-button** - The clickable button wrapping the month/year title\n- **picker** - The scrollable month/year picker panel (replaces grid when open)\n- **picker-year-section** - Container for one year's label and month grid\n- **picker-year-label** - The year heading inside a year section\n- **picker-months** - The 4-column month grid inside a year section\n- **picker-month** - An individual month button\n- **picker-month-current** - Applied to the currently selected month button",
       "attributes": [
         { "name": "year", "description": "1970-9999", "values": [] },
         { "name": "month", "description": "1-12", "values": [] },