use-wc 1.0.0-pre.57 → 1.0.0-pre.58

package/custom-elements.json

@@ -2748,6 +2748,185 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/elements/use-intl-number/use-intl-number.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Displays a localized, human-readable representation of a number using\n[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\nRenders a semantic `<data>` element in its shadow root with a machine-readable\n`value` attribute and formatted inner text.\n\nSet `numberstyle` to control what kind of number is formatted (see\n[`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style)):\n- `decimal` (default) → plain number, e.g. `1,234.5`\n- `percent` → percentage, e.g. `42%` (value is the fraction, so `0.42` renders `42%`)\n- `currency` → currency amount, requires `currency`\n- `unit` → measurement, requires `unit`\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": "UseIntlNumber",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "numberstyle",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "numberstyle"
+            },
+            {
+              "kind": "field",
+              "name": "currency",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "currency"
+            },
+            {
+              "kind": "field",
+              "name": "currencydisplay",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "currencydisplay"
+            },
+            {
+              "kind": "field",
+              "name": "currencysign",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "currencysign"
+            },
+            {
+              "kind": "field",
+              "name": "unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "unit"
+            },
+            {
+              "kind": "field",
+              "name": "unitdisplay",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "unitdisplay"
+            },
+            {
+              "kind": "field",
+              "name": "signdisplay",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "signdisplay"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Numeric amount to format",
+              "name": "value",
+              "fieldName": "value"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Format style: `decimal` | `percent` | `currency` | `unit`",
+              "name": "numberstyle",
+              "fieldName": "numberstyle"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[ISO 4217 currency code](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency), e.g. `USD`, `EUR`, `JPY`. Required when numberstyle is `currency`",
+              "name": "currency",
+              "fieldName": "currency"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[How the currency is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay): `symbol` | `narrowSymbol` | `code` | `name`",
+              "name": "currencydisplay",
+              "fieldName": "currencydisplay"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[Sign convention](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign): `standard` (minus sign) | `accounting` (parenthesized negatives)",
+              "name": "currencysign",
+              "fieldName": "currencysign"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[Unit identifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unit), e.g. `kilometer-per-hour`, `liter`. Required when numberstyle is `unit`",
+              "name": "unit",
+              "fieldName": "unit"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[How the unit is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay): `short` | `narrow` | `long`",
+              "name": "unitdisplay",
+              "fieldName": "unitdisplay"
+            },
+            {
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "[When to show the sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay): `auto` | `always` | `exceptZero` | `never`",
+              "name": "signdisplay",
+              "fieldName": "signdisplay"
+            },
+            {
+              "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-number",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "UseIntlNumber",
+          "declaration": {
+            "name": "UseIntlNumber",
+            "module": "src/elements/use-intl-number/use-intl-number.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "use-intl-number",
+          "declaration": {
+            "name": "UseIntlNumber",
+            "module": "src/elements/use-intl-number/use-intl-number.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/elements/use-listbox-input/use-listbox-input.ts",

package/dist/design-system.css

@@ -1241,3 +1241,19 @@
   }
 }
 
+/* Grid — a cell holding a use-intl-number reads as tabular data, so it defaults to end-aligned
+   text with tabular-nums, which locks every digit to the same width so values stack and compare
+   cleanly down a column. text-align and font-variant-numeric are both inherited, so setting them
+   on use-gridcell reaches the formatted text inside use-intl-number's shadow root without needing
+   a rule scoped to use-intl-number itself. */
+@layer use-theme.grid {
+  use-gridcell:has(use-intl-number) {
+    text-align: end;
+    font-variant-numeric: tabular-nums;
+
+    use-theme-escape & {
+      all: revert-layer;
+    }
+  }
+}
+

package/dist/docs/use-intl-number.md

@@ -0,0 +1,30 @@
+# `use-intl-number`
+
+Displays a localized, human-readable representation of a number using
+[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
+Renders a semantic `<data>` element in its shadow root with a machine-readable
+`value` attribute and formatted inner text.
+
+Set `numberstyle` to control what kind of number is formatted (see
+[`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style)):
+- `decimal` (default) → plain number, e.g. `1,234.5`
+- `percent` → percentage, e.g. `42%` (value is the fraction, so `0.42` renders `42%`)
+- `currency` → currency amount, requires `currency`
+- `unit` → measurement, requires `unit`
+
+Locale is resolved from the nearest ancestor `[lang]` attribute, or
+`navigator.language` if none is found. Set `lang` directly on the element to override.
+
+## Attributes
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | `string \| undefined` | - | Numeric amount to format |
+| numberstyle | `string \| undefined` | - | Format style: `decimal` \| `percent` \| `currency` \| `unit` |
+| currency | `string \| undefined` | - | [ISO 4217 currency code](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency), e.g. `USD`, `EUR`, `JPY`. Required when numberstyle is `currency` |
+| currencydisplay | `string \| undefined` | - | [How the currency is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay): `symbol` \| `narrowSymbol` \| `code` \| `name` |
+| currencysign | `string \| undefined` | - | [Sign convention](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign): `standard` (minus sign) \| `accounting` (parenthesized negatives) |
+| unit | `string \| undefined` | - | [Unit identifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unit), e.g. `kilometer-per-hour`, `liter`. Required when numberstyle is `unit` |
+| unitdisplay | `string \| undefined` | - | [How the unit is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay): `short` \| `narrow` \| `long` |
+| signdisplay | `string \| undefined` | - | [When to show the sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay): `auto` \| `always` \| `exceptZero` \| `never` |
+| lang | `string` | - | BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set. |

package/dist/use-wc.d.mts

@@ -1406,6 +1406,52 @@ declare global {
   }
 }
 //#endregion
+//#region src/elements/use-intl-number/use-intl-number.d.ts
+/**
+ * Displays a localized, human-readable representation of a number using
+ * [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
+ * Renders a semantic `<data>` element in its shadow root with a machine-readable
+ * `value` attribute and formatted inner text.
+ *
+ * Set `numberstyle` to control what kind of number is formatted (see
+ * [`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style)):
+ * - `decimal` (default) → plain number, e.g. `1,234.5`
+ * - `percent` → percentage, e.g. `42%` (value is the fraction, so `0.42` renders `42%`)
+ * - `currency` → currency amount, requires `currency`
+ * - `unit` → measurement, requires `unit`
+ *
+ * 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 - Numeric amount to format
+ * @attr {string} numberstyle - Format style: `decimal` | `percent` | `currency` | `unit`
+ * @attr {string} currency - [ISO 4217 currency code](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency), e.g. `USD`, `EUR`, `JPY`. Required when numberstyle is `currency`
+ * @attr {string} currencydisplay - [How the currency is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay): `symbol` | `narrowSymbol` | `code` | `name`
+ * @attr {string} currencysign - [Sign convention](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign): `standard` (minus sign) | `accounting` (parenthesized negatives)
+ * @attr {string} unit - [Unit identifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unit), e.g. `kilometer-per-hour`, `liter`. Required when numberstyle is `unit`
+ * @attr {string} unitdisplay - [How the unit is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay): `short` | `narrow` | `long`
+ * @attr {string} signdisplay - [When to show the sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay): `auto` | `always` | `exceptZero` | `never`
+ * @attr {string} lang - BCP 47 locale tag. Inherits from nearest ancestor `[lang]` if not set.
+ */
+declare class UseIntlNumber extends UseLocaleElement {
+  #private;
+  static styles: import("lit").CSSResult;
+  value?: string;
+  numberstyle?: string;
+  currency?: string;
+  currencydisplay?: string;
+  currencysign?: string;
+  unit?: string;
+  unitdisplay?: string;
+  signdisplay?: string;
+  render(): TemplateResult$1<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "use-intl-number": UseIntlNumber;
+  }
+}
+//#endregion
 //#region src/elements/use-badge/use-badge.d.ts
 /**
  * `use-badge` renders a small indicator anchored to another element's corner, using
@@ -1508,4 +1554,4 @@ declare global {
   }
 }
 //#endregion
-export { UseAnchored, UseBadge, UseCalendarBase, UseCalendarRenderDay, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+export { UseAnchored, UseBadge, UseCalendarBase, UseCalendarRenderDay, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseIntlNumber, UseListboxInput, UseMenu, UseMonthPicker, UseMonthPickerRenderMonth, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/dist/use-wc.mjs

@@ -4290,6 +4290,112 @@ __decorate([property({ type: String })], UseIntlDatetime.prototype, "datestyle",
 __decorate([property({ type: String })], UseIntlDatetime.prototype, "timestyle", void 0);
 UseIntlDatetime = __decorate([customElement("use-intl-datetime")], UseIntlDatetime);
 //#endregion
+//#region src/elements/use-intl-number/use-intl-number.ts
+const NUMBER_STYLES = [
+	"decimal",
+	"percent",
+	"currency",
+	"unit"
+];
+const CURRENCY_DISPLAYS = [
+	"symbol",
+	"narrowSymbol",
+	"code",
+	"name"
+];
+const CURRENCY_SIGNS = ["standard", "accounting"];
+const SIGN_DISPLAYS = [
+	"auto",
+	"always",
+	"exceptZero",
+	"never"
+];
+const UNIT_DISPLAYS = [
+	"short",
+	"narrow",
+	"long"
+];
+let UseIntlNumber = class UseIntlNumber extends UseLocaleElement {
+	static {
+		this.styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+	}
+	#resolveNumberStyle() {
+		return NUMBER_STYLES.includes(this.numberstyle) ? this.numberstyle : "decimal";
+	}
+	#resolveCurrencyDisplay() {
+		return CURRENCY_DISPLAYS.includes(this.currencydisplay) ? this.currencydisplay : "symbol";
+	}
+	#resolveCurrencySign() {
+		return CURRENCY_SIGNS.includes(this.currencysign) ? this.currencysign : "standard";
+	}
+	#resolveUnitDisplay() {
+		return UNIT_DISPLAYS.includes(this.unitdisplay) ? this.unitdisplay : "short";
+	}
+	#resolveSignDisplay() {
+		return SIGN_DISPLAYS.includes(this.signdisplay) ? this.signdisplay : "auto";
+	}
+	#resolveOptions(style) {
+		if (style === "currency") {
+			if (!this.currency) return null;
+			return {
+				style,
+				currency: this.currency,
+				currencyDisplay: this.#resolveCurrencyDisplay(),
+				currencySign: this.#resolveCurrencySign(),
+				signDisplay: this.#resolveSignDisplay()
+			};
+		}
+		if (style === "unit") {
+			if (!this.unit) return null;
+			return {
+				style,
+				unit: this.unit,
+				unitDisplay: this.#resolveUnitDisplay(),
+				signDisplay: this.#resolveSignDisplay()
+			};
+		}
+		return {
+			style,
+			signDisplay: this.#resolveSignDisplay()
+		};
+	}
+	#computeFormatted() {
+		const value = this.value ?? "";
+		const locale = this.lang;
+		if (!value || value.trim() === "") return null;
+		const amount = Number(value);
+		if (isNaN(amount)) return null;
+		const options = this.#resolveOptions(this.#resolveNumberStyle());
+		if (!options) return null;
+		try {
+			return {
+				valueAttr: String(amount),
+				text: new Intl.NumberFormat(locale, options).format(amount)
+			};
+		} catch {
+			return null;
+		}
+	}
+	render() {
+		const result = this.#computeFormatted();
+		if (!result) return html`<data></data>`;
+		return html`<data value=${result.valueAttr}>${result.text}</data>`;
+	}
+};
+__decorate([property({ type: String })], UseIntlNumber.prototype, "value", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "numberstyle", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "currency", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "currencydisplay", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "currencysign", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "unit", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "unitdisplay", void 0);
+__decorate([property({ type: String })], UseIntlNumber.prototype, "signdisplay", void 0);
+UseIntlNumber = __decorate([customElement("use-intl-number")], UseIntlNumber);
+//#endregion
 //#region src/elements/use-badge/use-badge.ts
 let UseBadge = class UseBadge extends LitElement {
 	#internals;
@@ -4446,4 +4552,4 @@ __decorate([property({
 })], UseBadge.prototype, "options", void 0);
 UseBadge = __decorate([customElement("use-badge")], UseBadge);
 //#endregion
-export { UseAnchored, UseBadge, UseCalendarBase, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseListboxInput, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };
+export { UseAnchored, UseBadge, UseCalendarBase, UseCaret, UseDateInput, UseDatePicker, UseDatetimeInput, UseDurationInput, UseFocusgroup, UseIntlDatetime, UseIntlNumber, UseListboxInput, UseMenu, UseMonthPicker, UseOption, UseScrollarea, UseTimeInput, UseTree, UseTreeitem, UseWeekPicker, UseWidget };

package/package.json

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

package/vscode.html-custom-data.json

@@ -252,6 +252,58 @@
       ],
       "references": []
     },
+    {
+      "name": "use-intl-number",
+      "description": "Displays a localized, human-readable representation of a number using\n[`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).\nRenders a semantic `<data>` element in its shadow root with a machine-readable\n`value` attribute and formatted inner text.\n\nSet `numberstyle` to control what kind of number is formatted (see\n[`style`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#style)):\n- `decimal` (default) → plain number, e.g. `1,234.5`\n- `percent` → percentage, e.g. `42%` (value is the fraction, so `0.42` renders `42%`)\n- `currency` → currency amount, requires `currency`\n- `unit` → measurement, requires `unit`\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": "Numeric amount to format",
+          "values": []
+        },
+        {
+          "name": "numberstyle",
+          "description": "Format style: `decimal` | `percent` | `currency` | `unit`",
+          "values": []
+        },
+        {
+          "name": "currency",
+          "description": "[ISO 4217 currency code](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currency), e.g. `USD`, `EUR`, `JPY`. Required when numberstyle is `currency`",
+          "values": []
+        },
+        {
+          "name": "currencydisplay",
+          "description": "[How the currency is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencydisplay): `symbol` | `narrowSymbol` | `code` | `name`",
+          "values": []
+        },
+        {
+          "name": "currencysign",
+          "description": "[Sign convention](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#currencysign): `standard` (minus sign) | `accounting` (parenthesized negatives)",
+          "values": []
+        },
+        {
+          "name": "unit",
+          "description": "[Unit identifier](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unit), e.g. `kilometer-per-hour`, `liter`. Required when numberstyle is `unit`",
+          "values": []
+        },
+        {
+          "name": "unitdisplay",
+          "description": "[How the unit is denoted](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#unitdisplay): `short` | `narrow` | `long`",
+          "values": []
+        },
+        {
+          "name": "signdisplay",
+          "description": "[When to show the sign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#signdisplay): `auto` | `always` | `exceptZero` | `never`",
+          "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",