use-wc 1.0.0-pre.32 → 1.0.0-pre.33

package/custom-elements.json

@@ -169,14 +169,6 @@
               "attribute": "month",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "controls",
@@ -305,13 +297,6 @@
               "description": "1-12",
               "fieldName": "month"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "locale"
-            },
             {
               "name": "controls",
               "type": {
@@ -381,13 +366,23 @@
               },
               "description": "Last date in the visible range. Accepts ISO 8601 date strings or `'max'` to use the same value as `max`",
               "fieldName": "end"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "customElement": true
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
+          }
         }
       ],
       "exports": [
@@ -461,15 +456,6 @@
               },
               "default": "YYYY-MM-DD",
               "attribute": "value"
-            },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "attribute": "locale"
             }
           ],
           "attributes": [
@@ -498,17 +484,20 @@
               "fieldName": "value"
             },
             {
-              "name": "locale",
+              "name": "lang",
               "type": {
                 "text": "string"
               },
-              "default": "User's browser language or 'en-US'",
-              "fieldName": "locale"
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
           },
           "tagName": "use-date-input",
           "customElement": true
@@ -642,18 +631,6 @@
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "locale",
-              "inheritedFrom": {
-                "name": "UseCalendarBase",
-                "module": "src/elements/use-calendar-base/use-calendar-base.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "controls",
@@ -1117,17 +1094,6 @@
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "locale",
-              "inheritedFrom": {
-                "name": "UseCalendarBase",
-                "module": "src/elements/use-calendar-base/use-calendar-base.ts"
-              }
-            },
             {
               "name": "controls",
               "type": {
@@ -1233,6 +1199,17 @@
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ]
         }
@@ -1299,15 +1276,6 @@
               },
               "attribute": "readonly"
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "hours",
@@ -1386,14 +1354,6 @@
               },
               "fieldName": "readOnly"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "fieldName": "locale"
-            },
             {
               "name": "hours",
               "type": {
@@ -1448,11 +1408,22 @@
               },
               "default": "''",
               "fieldName": "value"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
           },
           "tagName": "use-datetime-input",
           "customElement": true
@@ -1734,15 +1705,6 @@
               "default": "PT0S",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "format",
@@ -1842,14 +1804,6 @@
               "default": "PT0S",
               "fieldName": "value"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "fieldName": "locale"
-            },
             {
               "name": "format",
               "type": {
@@ -1857,11 +1811,22 @@
               },
               "default": "\"short\"",
               "fieldName": "format"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
           },
           "tagName": "use-duration-input",
           "customElement": true
@@ -2604,6 +2569,42 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-locale-element/use-locale-element.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "UseLocaleElement",
+          "members": [],
+          "attributes": [
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseLocaleElement",
+          "declaration": {
+            "name": "UseLocaleElement",
+            "module": "src/elements/use-locale-element/use-locale-element.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-menu/use-menu.ts",
@@ -2756,15 +2757,6 @@
               "attribute": "year",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "description": "BCP 47 locale tag used for month name localisation. Defaults to `navigator.language`.",
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "min",
@@ -2859,14 +2851,6 @@
               "description": "Year currently shown in the grid. Defaults to the current year, or the year of the initial value attribute.",
               "fieldName": "year"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "description": "BCP 47 locale tag used for month name localisation. Defaults to `navigator.language`.",
-              "fieldName": "locale"
-            },
             {
               "name": "min",
               "type": {
@@ -2909,11 +2893,22 @@
               },
               "description": "Selected ISO 8601 year-month (`YYYY-MM`). Empty string means no selection.",
               "fieldName": "value"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
           },
           "tagName": "use-month-picker",
           "customElement": true
@@ -3348,15 +3343,6 @@
               "default": "00:00:00",
               "attribute": "value"
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "attribute": "locale"
-            },
             {
               "kind": "field",
               "name": "format",
@@ -3447,14 +3433,6 @@
               "default": "00:00:00",
               "fieldName": "value"
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "default": "User's browser language or 'en-US'",
-              "fieldName": "locale"
-            },
             {
               "name": "format",
               "type": {
@@ -3462,11 +3440,22 @@
               },
               "default": "\"long\"",
               "fieldName": "format"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
           },
           "tagName": "use-time-input",
           "customElement": true
@@ -3770,18 +3759,6 @@
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
             },
-            {
-              "kind": "field",
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "locale",
-              "inheritedFrom": {
-                "name": "UseCalendarBase",
-                "module": "src/elements/use-calendar-base/use-calendar-base.ts"
-              }
-            },
             {
               "kind": "field",
               "name": "controls",
@@ -4245,17 +4222,6 @@
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
             },
-            {
-              "name": "locale",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "locale",
-              "inheritedFrom": {
-                "name": "UseCalendarBase",
-                "module": "src/elements/use-calendar-base/use-calendar-base.ts"
-              }
-            },
             {
               "name": "controls",
               "type": {
@@ -4361,6 +4327,17 @@
                 "name": "UseCalendarBase",
                 "module": "src/elements/use-calendar-base/use-calendar-base.ts"
               }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
             }
           ]
         }

package/dist/use-wc.d.mts

@@ -80,13 +80,29 @@ declare global {
   }
 }
 //#endregion
+//#region src/elements/use-locale-element/use-locale-element.d.ts
+declare class UseLocaleElement extends LitElement {
+  static properties: {
+    lang: {
+      type: StringConstructor;
+      attribute: boolean;
+    };
+  };
+  private _explicitLocale;
+  private _unsubscribeLocale;
+  get lang(): string;
+  set lang(value: string);
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+//#endregion
 //#region src/elements/use-date-input/use-date-input.d.ts
 /**
  * Displays a date picker using segmented inputs for year, month, and day.
  *
  * Uses browser locale for formatting and ARIA labels.
  */
-declare class UseDateInput extends LitElement {
+declare class UseDateInput extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -113,8 +129,6 @@ declare class UseDateInput extends LitElement {
   /** @default YYYY-MM-DD */
   get value(): string;
   set value(value: string);
-  /** @default User's browser language or 'en-US' */
-  locale: string;
   render(): TemplateResult$1<1>;
   static styles: lit.CSSResult;
 }
@@ -196,7 +210,7 @@ declare global {
  *
  * <baseline-status featureId="intl-duration-format"></baseline-status>
  */
-declare class UseDurationInput extends LitElement {
+declare class UseDurationInput extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -236,8 +250,6 @@ declare class UseDurationInput extends LitElement {
   /** @default PT0S */
   get value(): string;
   set value(value: string);
-  /** @default User's browser language or 'en-US' */
-  locale: string;
   format: "long" | "short" | "narrow" | "digital";
   render(): TemplateResult$1<1>[];
   static styles: lit.CSSResult;
@@ -360,7 +372,7 @@ declare global {
  *
  * Allows users to pick time values with proper localization and formatting.
  */
-declare class UseTimeInput extends LitElement {
+declare class UseTimeInput extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -395,8 +407,6 @@ declare class UseTimeInput extends LitElement {
   /** @default 00:00:00 */
   get value(): string;
   set value(value: string);
-  /** @default User's browser language or 'en-US' */
-  locale: string;
   format: "long" | "short" | "narrow" | "digital";
   render(): TemplateResult$1<1>[];
   static styles: lit.CSSResult;
@@ -723,7 +733,7 @@ type UseCalendarRenderDay = (data: {
  * @csspart picker-month - An individual month button
  * @csspart picker-month-current - Applied to the currently selected month button
  */
-declare class UseCalendarBase extends LitElement {
+declare class UseCalendarBase extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   private gridBody;
@@ -731,7 +741,6 @@ declare class UseCalendarBase extends LitElement {
   year: number;
   /** 1-12 */
   month: number;
-  locale: string;
   controls: boolean;
   navigation: "nowrap" | "off" | "on";
   get navigationEnabled(): boolean;
@@ -858,7 +867,7 @@ type UseMonthPickerRenderMonth = (data: {
  * @csspart month-disabled - Applied when this month falls outside min/max
  * @slot month-{YYYY-MM} - Per-month content that replaces the default month name (e.g. `month-2026-03`)
  */
-declare class UseMonthPicker extends LitElement {
+declare class UseMonthPicker extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -873,8 +882,6 @@ declare class UseMonthPicker extends LitElement {
   /** Year currently shown in the grid. Defaults to the current year, or the year of the initial value attribute. */
   year: number;
   constructor();
-  /** BCP 47 locale tag used for month name localisation. Defaults to `navigator.language`. */
-  locale: string;
   /** Minimum selectable year-month in `YYYY-MM` format (inclusive). */
   min: string;
   /** Maximum selectable year-month in `YYYY-MM` format (inclusive). */
@@ -914,7 +921,7 @@ declare global {
  *
  * The value format is ISO 8601-like: `YYYY-MM-DDTHH:MM:SS.mmm`.
  */
-declare class UseDatetimeInput extends LitElement {
+declare class UseDatetimeInput extends UseLocaleElement {
   #private;
   static formAssociated: boolean;
   static shadowRootOptions: {
@@ -934,8 +941,6 @@ declare class UseDatetimeInput extends LitElement {
   get disabled(): boolean;
   set readOnly(flag: boolean);
   get readOnly(): boolean;
-  /** @default User's browser language or 'en-US' */
-  locale: string;
   hours: boolean;
   minutes: boolean;
   seconds: boolean;

package/dist/use-wc.mjs

@@ -96,6 +96,66 @@ __decorate([property({ type: Boolean })], UseOption.prototype, "disabled", null)
 __decorate([property()], UseOption.prototype, "value", null);
 UseOption = __decorate([customElement("use-option")], UseOption);
 //#endregion
+//#region src/utils/locale.ts
+const localeChangeSubscribers = /* @__PURE__ */ new Set();
+let observer;
+function getOrCreateObserver() {
+	if (!observer) {
+		observer = new MutationObserver(() => {
+			for (const subscriber of localeChangeSubscribers) subscriber();
+		});
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["lang"]
+		});
+	}
+	return observer;
+}
+function subscribeToLocaleChanges(callback) {
+	getOrCreateObserver();
+	localeChangeSubscribers.add(callback);
+	return () => {
+		localeChangeSubscribers.delete(callback);
+	};
+}
+function resolveLocale(element) {
+	const ancestor = element.closest("[lang]");
+	if (ancestor instanceof HTMLElement) return ancestor.getAttribute("lang") || navigator.language || "en-US";
+	return navigator.language || "en-US";
+}
+//#endregion
+//#region src/elements/use-locale-element/use-locale-element.ts
+var UseLocaleElement = class extends LitElement {
+	static {
+		this.properties = {
+			...LitElement.properties,
+			lang: {
+				type: String,
+				attribute: true
+			}
+		};
+	}
+	get lang() {
+		return this._explicitLocale ?? resolveLocale(this);
+	}
+	set lang(value) {
+		const previous = this.lang;
+		this._explicitLocale = value;
+		this.requestUpdate("locale", previous);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._unsubscribeLocale = subscribeToLocaleChanges(() => {
+			if (this._explicitLocale === void 0) this.requestUpdate("locale");
+		});
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._unsubscribeLocale?.();
+		this._unsubscribeLocale = void 0;
+	}
+};
+//#endregion
 //#region src/utils/date-time-aria-labels.ts
 const DEFAULT_ARIA_LABELS = {
 	am: "AM",
@@ -219,7 +279,7 @@ function parseISOWeek(week) {
 }
 //#endregion
 //#region src/elements/use-date-input/use-date-input.ts
-let UseDateInput = class UseDateInput extends LitElement {
+let UseDateInput = class UseDateInput extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -236,7 +296,6 @@ let UseDateInput = class UseDateInput extends LitElement {
 	#formatParts = [];
 	constructor() {
 		super();
-		this.locale = navigator.language || "en-US";
 		this.#internals = this.attachInternals();
 		this.#formId = this.closest("form")?.id;
 		this.#id = this.hasAttribute("id") ? this.getAttribute("id") : createId();
@@ -269,7 +328,7 @@ let UseDateInput = class UseDateInput extends LitElement {
 	}
 	#initialFormatParts() {
 		try {
-			const formatter = new Intl.DateTimeFormat(this.locale, {
+			const formatter = new Intl.DateTimeFormat(this.lang, {
 				year: "numeric",
 				month: "2-digit",
 				day: "2-digit",
@@ -287,7 +346,7 @@ let UseDateInput = class UseDateInput extends LitElement {
 		this.#formatParts = this.#initialFormatParts();
 	}
 	#initialAriaLabels() {
-		return getDateTimeAriaLabels(this.locale, { plural: false });
+		return getDateTimeAriaLabels(this.lang, { plural: false });
 	}
 	#valueData = {
 		year: "",
@@ -415,10 +474,6 @@ __decorate([property({
 	attribute: "readonly"
 })], UseDateInput.prototype, "readOnly", null);
 __decorate([property({ type: String })], UseDateInput.prototype, "value", null);
-__decorate([property({
-	type: String,
-	attribute: true
-})], UseDateInput.prototype, "locale", void 0);
 UseDateInput = __decorate([customElement("use-date-input")], UseDateInput);
 //#endregion
 //#region src/elements/use-dropdown/use-dropdown.ts
@@ -671,7 +726,7 @@ const ISO_DURATION_SEGMENTS = {
 	second: "seconds",
 	millisecond: "milliseconds"
 };
-let UseDurationInput = class UseDurationInput extends LitElement {
+let UseDurationInput = class UseDurationInput extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -693,7 +748,6 @@ let UseDurationInput = class UseDurationInput extends LitElement {
 		this.minutes = false;
 		this.seconds = false;
 		this.milliseconds = false;
-		this.locale = navigator.language || "en-US";
 		this.format = "short";
 		this.#internals = this.attachInternals();
 		this.#formId = this.closest("form")?.id;
@@ -752,7 +806,7 @@ let UseDurationInput = class UseDurationInput extends LitElement {
 	#ariaLabels = DEFAULT_ARIA_LABELS;
 	#initialFormatParts() {
 		try {
-			return new Intl.DurationFormat(this.locale, { style: this.format }).formatToParts({
+			return new Intl.DurationFormat(this.lang, { style: this.format }).formatToParts({
 				years: this.years ? 2 : 0,
 				months: this.months ? 2 : 0,
 				weeks: this.weeks ? 2 : 0,
@@ -797,7 +851,7 @@ let UseDurationInput = class UseDurationInput extends LitElement {
 		if (this.millisecondInput) this.millisecondInput.value = String(this.#valueData.milliseconds ?? 0);
 	}
 	#initialAriaLabels() {
-		return getDateTimeAriaLabels(this.locale, { plural: true });
+		return getDateTimeAriaLabels(this.lang, { plural: true });
 	}
 	render() {
 		return Array.from(this.#groupedParts.entries()).map(([unit, parts]) => {
@@ -898,10 +952,6 @@ __decorate([property({
 	attribute: "readonly"
 })], UseDurationInput.prototype, "readOnly", null);
 __decorate([property({ type: String })], UseDurationInput.prototype, "value", null);
-__decorate([property({
-	type: String,
-	attribute: true
-})], UseDurationInput.prototype, "locale", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
@@ -1335,7 +1385,7 @@ __decorate([query("[part=\"trigger-label\"]", true)], UseSelectInput.prototype,
 UseSelectInput = __decorate([customElement("use-select-input")], UseSelectInput);
 //#endregion
 //#region src/elements/use-time-input/use-time-input.ts
-let UseTimeInput = class UseTimeInput extends LitElement {
+let UseTimeInput = class UseTimeInput extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -1359,7 +1409,6 @@ let UseTimeInput = class UseTimeInput extends LitElement {
 		this.seconds = false;
 		this.fractionalSeconds = false;
 		this.dayPeriod = false;
-		this.locale = navigator.language || "en-US";
 		this.format = "long";
 		this.#internals = this.attachInternals();
 		this.#formId = this.closest("form")?.id;
@@ -1462,7 +1511,7 @@ let UseTimeInput = class UseTimeInput extends LitElement {
 	}
 	#formatParts = [];
 	#initializeHourFormat() {
-		if (!this.hourFormat) this.hourFormat = new Intl.DateTimeFormat(this.locale, { hour: "numeric" }).resolvedOptions().hour12 ? "12" : "24";
+		if (!this.hourFormat) this.hourFormat = new Intl.DateTimeFormat(this.lang, { hour: "numeric" }).resolvedOptions().hour12 ? "12" : "24";
 	}
 	#initialFormatParts() {
 		try {
@@ -1476,11 +1525,11 @@ let UseTimeInput = class UseTimeInput extends LitElement {
 				hour12: this.hourFormat ? this.hourFormat === "12" : void 0,
 				timeZone: "UTC"
 			};
-			const formatter = new Intl.DateTimeFormat(this.locale, options);
+			const formatter = new Intl.DateTimeFormat(this.lang, options);
 			const date = new Date(2024, 0, 1, 12, 30, 45);
 			const parts = formatter.formatToParts(date);
 			this.#maxHours = !!formatter.resolvedOptions().hour12 && this.dayPeriod ? 12 : 23;
-			this.#ariaLabels = getDateTimeAriaLabels(this.locale);
+			this.#ariaLabels = getDateTimeAriaLabels(this.lang);
 			const [amChar, pmChar] = this.#ariaLabels.dayPeriod.split("/").map((char) => char.toLowerCase().charAt(0));
 			this.#amChar = amChar;
 			this.#pmChar = pmChar;
@@ -1696,10 +1745,6 @@ __decorate([property({
 	type: String,
 	attribute: true
 })], UseTimeInput.prototype, "value", null);
-__decorate([property({
-	type: String,
-	attribute: true
-})], UseTimeInput.prototype, "locale", void 0);
 __decorate([property({
 	type: String,
 	attribute: true
@@ -2701,7 +2746,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 LitElement {
+var UseCalendarBase = class extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -2735,7 +2780,6 @@ var UseCalendarBase = class extends LitElement {
 		super();
 		this.year = (/* @__PURE__ */ new Date()).getFullYear();
 		this.month = (/* @__PURE__ */ new Date()).getMonth() + 1;
-		this.locale = navigator.language;
 		this.controls = false;
 		this.navigation = "on";
 		this.hiddenmonths = "";
@@ -2843,7 +2887,7 @@ var UseCalendarBase = class extends LitElement {
 	}
 	get #previousMonthLabel() {
 		const { year, month } = this.#previousMonthData;
-		return new Intl.DateTimeFormat(this.locale, {
+		return new Intl.DateTimeFormat(this.lang, {
 			month: "long",
 			year: "numeric",
 			timeZone: "UTC"
@@ -2851,7 +2895,7 @@ var UseCalendarBase = class extends LitElement {
 	}
 	get #nextMonthLabel() {
 		const { year, month } = this.#nextMonthData;
-		return new Intl.DateTimeFormat(this.locale, {
+		return new Intl.DateTimeFormat(this.lang, {
 			month: "long",
 			year: "numeric",
 			timeZone: "UTC"
@@ -2867,14 +2911,14 @@ var UseCalendarBase = class extends LitElement {
 		};
 	}
 	get #startDayOffset() {
-		return (new Date(this.year, this.month - 1, 1).getDay() - getLocaleFirstDay(this.locale) + 7) % 7;
+		return (new Date(this.year, this.month - 1, 1).getDay() - getLocaleFirstDay(this.lang) + 7) % 7;
 	}
 	#weekdayNames() {
-		return getDayNames(this.locale, "short");
+		return getDayNames(this.lang, "short");
 	}
 	get #title() {
 		try {
-			const formatter = new Intl.DateTimeFormat(this.locale, {
+			const formatter = new Intl.DateTimeFormat(this.lang, {
 				year: "numeric",
 				month: "long",
 				day: void 0,
@@ -3174,7 +3218,7 @@ var UseCalendarBase = class extends LitElement {
 		}
 	};
 	#renderPicker() {
-		const months = getMonthNames(this.locale, "short");
+		const months = getMonthNames(this.lang, "short");
 		const startYear = this.min ? this.#parseDate(this.min)?.getFullYear() ?? 1970 : 1970;
 		const endYear = this.max ? this.#parseDate(this.max)?.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear() + 100 : (/* @__PURE__ */ new Date()).getFullYear() + 100;
 		const years = Array.from({ length: endYear - startYear + 1 }, (_, i) => startYear + i);
@@ -3225,7 +3269,7 @@ var UseCalendarBase = class extends LitElement {
 		const endDate = this.#endDate;
 		const startDay = startDate && this.#isThisMonth(startDate) ? startDate.getDate() : 1;
 		const endDay = endDate && this.#isThisMonth(endDate) ? endDate.getDate() : daysInMonth;
-		const localeFirstDay = getLocaleFirstDay(this.locale);
+		const localeFirstDay = getLocaleFirstDay(this.lang);
 		const firstDay = startDate && this.#isThisMonth(startDate) ? (startDate.getDay() - localeFirstDay + 7) % 7 : this.#startDayOffset;
 		let rowIndex = 1;
 		let columnIndex = 1;
@@ -3416,7 +3460,6 @@ __decorate([property({
 	attribute: true,
 	reflect: true
 })], UseCalendarBase.prototype, "month", void 0);
-__decorate([property({ type: String })], UseCalendarBase.prototype, "locale", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true,
@@ -3599,7 +3642,7 @@ let UseWeekPicker = class UseWeekPicker extends UseCalendarBase {
 UseWeekPicker = __decorate([customElement("use-week-picker")], UseWeekPicker);
 //#endregion
 //#region src/elements/use-month-picker/use-month-picker.ts
-let UseMonthPicker = class UseMonthPicker extends LitElement {
+let UseMonthPicker = class UseMonthPicker extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -3660,7 +3703,6 @@ let UseMonthPicker = class UseMonthPicker extends LitElement {
 	constructor() {
 		super();
 		this.year = (/* @__PURE__ */ new Date()).getFullYear();
-		this.locale = navigator.language || "en-US";
 		this.min = "";
 		this.max = "";
 		this.navigation = "on";
@@ -3835,7 +3877,7 @@ let UseMonthPicker = class UseMonthPicker extends LitElement {
 		const today = /* @__PURE__ */ new Date();
 		const todayYear = today.getFullYear();
 		const todayMonth = today.getMonth() + 1;
-		const months = getMonthNames(this.locale, "short");
+		const months = getMonthNames(this.lang, "short");
 		const minYear = this.#minYear;
 		const maxYear = this.#maxYear;
 		const prevDisabled = this.disabled || minYear !== null && this.year <= minYear;
@@ -3914,7 +3956,6 @@ __decorate([property({
 	type: Number,
 	reflect: true
 })], UseMonthPicker.prototype, "year", void 0);
-__decorate([property({ type: String })], UseMonthPicker.prototype, "locale", void 0);
 __decorate([property({ type: String })], UseMonthPicker.prototype, "min", void 0);
 __decorate([property({ type: String })], UseMonthPicker.prototype, "max", void 0);
 __decorate([property({ type: String })], UseMonthPicker.prototype, "navigation", void 0);
@@ -3923,7 +3964,7 @@ __decorate([property({ type: String })], UseMonthPicker.prototype, "value", null
 UseMonthPicker = __decorate([customElement("use-month-picker")], UseMonthPicker);
 //#endregion
 //#region src/elements/use-datetime-input/use-datetime-input.ts
-let UseDatetimeInput = class UseDatetimeInput extends LitElement {
+let UseDatetimeInput = class UseDatetimeInput extends UseLocaleElement {
 	static {
 		this.formAssociated = true;
 	}
@@ -3937,7 +3978,6 @@ let UseDatetimeInput = class UseDatetimeInput extends LitElement {
 	#id;
 	constructor() {
 		super();
-		this.locale = navigator.language || "en-US";
 		this.hours = false;
 		this.minutes = false;
 		this.seconds = false;
@@ -4008,7 +4048,7 @@ let UseDatetimeInput = class UseDatetimeInput extends LitElement {
         value=${this.#dateValue}
         .disabled=${this.disabled}
         .readOnly=${this.readOnly}
-        .locale=${this.locale}
+        .lang=${this.lang}
         @input=${this.#handleInput}
         exportparts="segment-input, segment-literal"
       ></use-date-input>
@@ -4017,7 +4057,7 @@ let UseDatetimeInput = class UseDatetimeInput extends LitElement {
         value=${this.#timeValue}
         .disabled=${this.disabled}
         .readOnly=${this.readOnly}
-        .locale=${this.locale}
+        .lang=${this.lang}
         .hours=${this.hours}
         .minutes=${this.minutes}
         .seconds=${this.seconds}
@@ -4046,10 +4086,6 @@ __decorate([property({
 	type: Boolean,
 	attribute: "readonly"
 })], UseDatetimeInput.prototype, "readOnly", null);
-__decorate([property({
-	type: String,
-	attribute: true
-})], UseDatetimeInput.prototype, "locale", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: true

package/package.json

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

package/vscode.html-custom-data.json

@@ -9,7 +9,7 @@
         { "name": "disabled", "values": [] },
         { "name": "readonly", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "locale", "values": [] }
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -25,7 +25,6 @@
       "attributes": [
         { "name": "year", "description": "1970-9999", "values": [] },
         { "name": "month", "description": "1-12", "values": [] },
-        { "name": "locale", "values": [] },
         { "name": "controls", "values": [] },
         {
           "name": "navigation",
@@ -48,7 +47,8 @@
           "name": "end",
           "description": "Last date in the visible range. Accepts ISO 8601 date strings or `'max'` to use the same value as `max`",
           "values": []
-        }
+        },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -58,7 +58,6 @@
       "attributes": [
         { "name": "disabled", "values": [] },
         { "name": "readonly", "values": [] },
-        { "name": "locale", "values": [] },
         { "name": "hours", "values": [] },
         { "name": "minutes", "values": [] },
         { "name": "seconds", "values": [] },
@@ -68,7 +67,8 @@
           "name": "hourFormat",
           "values": [{ "name": "12" }, { "name": "24" }]
         },
-        { "name": "value", "values": [] }
+        { "name": "value", "values": [] },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -96,7 +96,6 @@
         { "name": "disabled", "values": [] },
         { "name": "readonly", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "locale", "values": [] },
         {
           "name": "format",
           "values": [
@@ -105,7 +104,8 @@
             { "name": "narrow" },
             { "name": "digital" }
           ]
-        }
+        },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -207,11 +207,6 @@
           "description": "Year currently shown in the grid. Defaults to the current year, or the year of the initial value attribute.",
           "values": []
         },
-        {
-          "name": "locale",
-          "description": "BCP 47 locale tag used for month name localisation. Defaults to `navigator.language`.",
-          "values": []
-        },
         {
           "name": "min",
           "description": "Minimum selectable year-month in `YYYY-MM` format (inclusive).",
@@ -236,7 +231,8 @@
           "name": "value",
           "description": "Selected ISO 8601 year-month (`YYYY-MM`). Empty string means no selection.",
           "values": []
-        }
+        },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -282,7 +278,6 @@
         { "name": "disabled", "values": [] },
         { "name": "readonly", "values": [] },
         { "name": "value", "values": [] },
-        { "name": "locale", "values": [] },
         {
           "name": "format",
           "values": [
@@ -291,7 +286,8 @@
             { "name": "narrow" },
             { "name": "digital" }
           ]
-        }
+        },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },
@@ -322,7 +318,6 @@
       "attributes": [
         { "name": "year", "description": "1970-9999", "values": [] },
         { "name": "month", "description": "1-12", "values": [] },
-        { "name": "locale", "values": [] },
         { "name": "controls", "values": [] },
         {
           "name": "navigation",
@@ -345,7 +340,8 @@
           "name": "end",
           "description": "Last date in the visible range. Accepts ISO 8601 date strings or `'max'` to use the same value as `max`",
           "values": []
-        }
+        },
+        { "name": "lang", "values": [] }
       ],
       "references": []
     },