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

package/custom-elements.json

@@ -396,6 +396,71 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-calendarday/use-calendarday.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
+          "name": "UseCalendarday",
+          "slots": [
+            {
+              "description": "slot for custom day content (replaces the day number)",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "date"
+            },
+            {
+              "kind": "field",
+              "name": "day",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "date",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "date"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "use-calendarday",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseCalendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-calendarday",
+          "declaration": {
+            "name": "UseCalendarday",
+            "module": "src/elements/use-calendarday/use-calendarday.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-input/use-date-input.ts",
@@ -522,71 +587,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/elements/use-calendarday/use-calendarday.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A helper component for customizing specific days within `use-calendar`.\nContent placed inside this element will replace the default day number display.",
-          "name": "UseCalendarday",
-          "slots": [
-            {
-              "description": "slot for custom day content (replaces the day number)",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "date"
-            },
-            {
-              "kind": "field",
-              "name": "day",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "date",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "date"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "use-calendarday",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "UseCalendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "use-calendarday",
-          "declaration": {
-            "name": "UseCalendarday",
-            "module": "src/elements/use-calendarday/use-calendarday.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-date-picker/use-date-picker.ts",
@@ -2413,6 +2413,105 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-intl-datetime/use-intl-datetime.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays a localized, human-readable representation of a date, time, or datetime.\nRenders a semantic `<time>` element in its shadow root with a machine-readable\n`datetime` attribute and formatted inner text.\n\nSet `datestyle`, `timestyle`, or both to control what is formatted and how.\nThe presence of each attribute determines the format mode:\n- `datestyle` only → date formatting\n- `timestyle` only → time formatting\n- both → date and time formatting\n\nLocale is resolved from the nearest ancestor `[lang]` attribute, or\n`navigator.language` if none is found. Set `lang` directly on the element to override.",
+          "name": "UseIntlDatetime",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "datestyle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "datestyle"
+            },
+            {
+              "kind": "field",
+              "name": "timestyle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "timestyle"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ISO date/time string or Unix timestamp (ms)",
+              "name": "value",
+              "fieldName": "value"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Date format style: `short` | `medium` | `long` | `full`",
+              "name": "datestyle",
+              "fieldName": "datestyle"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Time format style: `short` | `medium` | `long` | `full`",
+              "name": "timestyle",
+              "fieldName": "timestyle"
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "lang",
+              "description": "BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set.",
+              "inheritedFrom": {
+                "name": "UseLocaleElement",
+                "module": "src/elements/use-locale-element/use-locale-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "UseLocaleElement",
+            "module": "/src/elements/use-locale-element/use-locale-element"
+          },
+          "tagName": "use-intl-datetime",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseIntlDatetime",
+          "declaration": {
+            "name": "UseIntlDatetime",
+            "module": "src/elements/use-intl-datetime/use-intl-datetime.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-intl-datetime",
+          "declaration": {
+            "name": "UseIntlDatetime",
+            "module": "src/elements/use-intl-datetime/use-intl-datetime.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-listbox-input/use-listbox-input.ts",

package/dist/use-wc.d.mts

@@ -984,4 +984,38 @@ declare global {
   }
 }
 //#endregion
-export { UseCalendarBase, UseCalendarRenderDay, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+//#region src/elements/use-intl-datetime/use-intl-datetime.d.ts
+/**
+ * Displays a localized, human-readable representation of a date, time, or datetime.
+ * Renders a semantic `<time>` element in its shadow root with a machine-readable
+ * `datetime` attribute and formatted inner text.
+ *
+ * Set `datestyle`, `timestyle`, or both to control what is formatted and how.
+ * The presence of each attribute determines the format mode:
+ * - `datestyle` only → date formatting
+ * - `timestyle` only → time formatting
+ * - both → date and time formatting
+ *
+ * Locale is resolved from the nearest ancestor `[lang]` attribute, or
+ * `navigator.language` if none is found. Set `lang` directly on the element to override.
+ *
+ * @attr {string} value - ISO date/time string or Unix timestamp (ms)
+ * @attr {string} datestyle - Date format style: `short` | `medium` | `long` | `full`
+ * @attr {string} timestyle - Time format style: `short` | `medium` | `long` | `full`
+ * @attr {string} lang - BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set.
+ */
+declare class UseIntlDatetime extends UseLocaleElement {
+  #private;
+  static styles: lit.CSSResult;
+  value?: string;
+  datestyle?: string;
+  timestyle?: string;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-intl-datetime": UseIntlDatetime;
+  }
+}
+//#endregion
+export { UseCalendarBase, UseCalendarRenderDay, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/dist/use-wc.mjs

@@ -4171,4 +4171,94 @@ let UseScrollarea = class UseScrollarea extends LitElement {
 };
 UseScrollarea = __decorate([customElement("use-scrollarea")], UseScrollarea);
 //#endregion
-export { UseCalendarBase, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseListboxInput, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+//#region src/elements/use-intl-datetime/use-intl-datetime.ts
+const DATE_TIME_STYLES = [
+	"short",
+	"medium",
+	"long",
+	"full"
+];
+const TIME_PATTERN = /^(\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?$/;
+let UseIntlDatetime = class UseIntlDatetime extends UseLocaleElement {
+	static {
+		this.styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+	}
+	#parseDate(value) {
+		if (!value) return null;
+		const asNumber = Number(value);
+		if (!isNaN(asNumber) && value.trim() !== "") return new Date(asNumber);
+		const parsedDate = new Date(value);
+		return isNaN(parsedDate.getTime()) ? null : parsedDate;
+	}
+	#resolveDateStyle() {
+		return DATE_TIME_STYLES.includes(this.datestyle) ? this.datestyle : "medium";
+	}
+	#resolveTimeStyle() {
+		return DATE_TIME_STYLES.includes(this.timestyle) ? this.timestyle : "medium";
+	}
+	#computeFormatted() {
+		const value = this.value ?? "";
+		const locale = this.lang;
+		const hasDateStyle = this.datestyle !== void 0;
+		const hasTimeStyle = this.timestyle !== void 0;
+		if (!value || !hasDateStyle && !hasTimeStyle) return null;
+		try {
+			if (hasDateStyle && !hasTimeStyle) {
+				const parsedDate = this.#parseDate(value);
+				if (!parsedDate) return null;
+				return {
+					datetimeAttr: parsedDate.toISOString().split("T")[0],
+					text: new Intl.DateTimeFormat(locale, { dateStyle: this.#resolveDateStyle() }).format(parsedDate)
+				};
+			}
+			if (hasTimeStyle && !hasDateStyle) {
+				const timeMatch = TIME_PATTERN.exec(value);
+				let parsedDate;
+				let datetimeAttr;
+				if (timeMatch) {
+					const hours = timeMatch[1];
+					const minutes = timeMatch[2];
+					const seconds = timeMatch[3] ?? "00";
+					parsedDate = /* @__PURE__ */ new Date();
+					parsedDate.setHours(parseInt(hours, 10), parseInt(minutes, 10), parseInt(seconds, 10), 0);
+					datetimeAttr = `${hours}:${minutes}:${seconds}`;
+				} else {
+					const fromTimestamp = this.#parseDate(value);
+					if (!fromTimestamp) return null;
+					parsedDate = fromTimestamp;
+					datetimeAttr = `${String(parsedDate.getHours()).padStart(2, "0")}:${String(parsedDate.getMinutes()).padStart(2, "0")}:${String(parsedDate.getSeconds()).padStart(2, "0")}`;
+				}
+				return {
+					datetimeAttr,
+					text: new Intl.DateTimeFormat(locale, { timeStyle: this.#resolveTimeStyle() }).format(parsedDate)
+				};
+			}
+			const parsedDate = this.#parseDate(value);
+			if (!parsedDate) return null;
+			return {
+				datetimeAttr: parsedDate.toISOString(),
+				text: new Intl.DateTimeFormat(locale, {
+					dateStyle: this.#resolveDateStyle(),
+					timeStyle: this.#resolveTimeStyle()
+				}).format(parsedDate)
+			};
+		} catch {
+			return null;
+		}
+	}
+	render() {
+		const result = this.#computeFormatted();
+		if (!result) return html`<time></time>`;
+		return html`<time datetime=${result.datetimeAttr}>${result.text}</time>`;
+	}
+};
+__decorate([property({ type: String })], UseIntlDatetime.prototype, "value", void 0);
+__decorate([property({ type: String })], UseIntlDatetime.prototype, "datestyle", void 0);
+__decorate([property({ type: String })], UseIntlDatetime.prototype, "timestyle", void 0);
+UseIntlDatetime = __decorate([customElement("use-intl-datetime")], UseIntlDatetime);
+//#endregion
+export { UseCalendarBase, UseDateInput, UseDatePicker, UseDatetimeInput, UseDropdown, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseListboxInput, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseSelectInput, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/package.json

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

package/vscode.html-custom-data.json

@@ -2,6 +2,12 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
+    {
+      "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)",
+      "attributes": [{ "name": "date", "values": [] }],
+      "references": []
+    },
     {
       "name": "use-date-input",
       "description": "Displays a date picker using segmented inputs for year, month, and day.\n\nUses browser locale for formatting and ARIA labels.\n---\n",
@@ -13,12 +19,6 @@
       ],
       "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)",
-      "attributes": [{ "name": "date", "values": [] }],
-      "references": []
-    },
     {
       "name": "use-date-picker",
       "description": "A day-granularity date picker. Value format: YYYY-MM-DD.\n---\n\n\n### **Events:**\n - **use-change** - Fired on selection with detail `{ value: string }`\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- **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",
@@ -178,6 +178,33 @@
       ],
       "references": []
     },
+    {
+      "name": "use-intl-datetime",
+      "description": "Displays a localized, human-readable representation of a date, time, or datetime.\nRenders a semantic `<time>` element in its shadow root with a machine-readable\n`datetime` attribute and formatted inner text.\n\nSet `datestyle`, `timestyle`, or both to control what is formatted and how.\nThe presence of each attribute determines the format mode:\n- `datestyle` only → date formatting\n- `timestyle` only → time formatting\n- both → date and time formatting\n\nLocale is resolved from the nearest ancestor `[lang]` attribute, or\n`navigator.language` if none is found. Set `lang` directly on the element to override.\n---\n",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "ISO date/time string or Unix timestamp (ms)",
+          "values": []
+        },
+        {
+          "name": "datestyle",
+          "description": "Date format style: `short` | `medium` | `long` | `full`",
+          "values": []
+        },
+        {
+          "name": "timestyle",
+          "description": "Time format style: `short` | `medium` | `long` | `full`",
+          "values": []
+        },
+        {
+          "name": "lang",
+          "description": "BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "use-listbox-input",
       "description": "\n---\n\n\n### **Events:**\n - **use-change**\n\n### **Slots:**\n - **default** - NodeList of `use-option` elements\n- **arrow** - undefined",