@unofficialbox/box-open-elements 0.13.0 → 0.14.0

package/dist/components/output/formatted-number.d.ts

@@ -28,9 +28,25 @@ export declare class FormattedNumber extends FormattedValue {
     /** ISO 4217 code, required by `Intl` when the style is `currency`. */
     get currency(): string;
     set currency(next: string);
-    /** A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`. */
+    /**
+     * A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`.
+     *
+     * `Intl` accepts a closed list and throws on anything else, so this is not a
+     * free-text label — "widgets" will not work, and the component falls back to
+     * a plain number rather than losing the value over it.
+     */
     get unit(): string;
     set unit(next: string);
+    /**
+     * How wide to write the unit: `short` (2.5 MB), `narrow` (2.5MB) or `long`
+     * (2.5 megabytes).
+     *
+     * `Intl` defaults to `short`, which is what a table wants. `long` is for
+     * prose, where an abbreviation a reader has to expand in their head is worse
+     * than the words.
+     */
+    get unitDisplay(): string;
+    set unitDisplay(next: string);
     protected formatted(): {
         text: string;
     } | null;

package/dist/components/output/formatted-number.js

@@ -2,6 +2,7 @@ import { FormattedValue } from "./formatted-value.js";
 import { parseNumber } from "../../foundations/format/index.js";
 const DEFAULT_TAG_NAME = "box-formatted-number";
 const NUMBER_STYLES = new Set(["decimal", "currency", "percent", "unit"]);
+const UNIT_DISPLAYS = new Set(["short", "narrow", "long"]);
 /**
  * A number, rendered in the reader's locale.
  *
@@ -29,6 +30,7 @@ export class FormattedNumber extends FormattedValue {
             "maximum-fraction-digits",
             "minimum-fraction-digits",
             "unit",
+            "unit-display",
             "value",
         ];
     }
@@ -54,13 +56,34 @@ export class FormattedNumber extends FormattedValue {
     set currency(next) {
         this.setAttribute("currency", next);
     }
-    /** A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`. */
+    /**
+     * A sanctioned unit identifier, e.g. `megabyte`, when the style is `unit`.
+     *
+     * `Intl` accepts a closed list and throws on anything else, so this is not a
+     * free-text label — "widgets" will not work, and the component falls back to
+     * a plain number rather than losing the value over it.
+     */
     get unit() {
         return this.getAttribute("unit") ?? "";
     }
     set unit(next) {
         this.setAttribute("unit", next);
     }
+    /**
+     * How wide to write the unit: `short` (2.5 MB), `narrow` (2.5MB) or `long`
+     * (2.5 megabytes).
+     *
+     * `Intl` defaults to `short`, which is what a table wants. `long` is for
+     * prose, where an abbreviation a reader has to expand in their head is worse
+     * than the words.
+     */
+    get unitDisplay() {
+        const raw = this.getAttribute("unit-display");
+        return raw && UNIT_DISPLAYS.has(raw) ? raw : "short";
+    }
+    set unitDisplay(next) {
+        this.setAttribute("unit-display", next);
+    }
     formatted() {
         const numeric = parseNumber(this.value);
         if (numeric === null) {
@@ -83,6 +106,7 @@ export class FormattedNumber extends FormattedValue {
             }
             else {
                 options.unit = this.unit;
+                options.unitDisplay = this.unitDisplay;
             }
         }
         const min = parseNumber(this.getAttribute("minimum-fraction-digits"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",