@fusion.dev/helix-headless 0.16.4 → 0.16.5

package/custom-elements.json

@@ -2330,12 +2330,22 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | string"
               },
               "default": "''",
-              "description": "The count or short text to show.\n\nAbsent shows a dot, zero shows nothing.",
+              "description": "The count or short text to show.\n\nAbsent shows a dot, zero shows nothing.\n\n**A string, and a number is taken anyway.** What this shows is usually a\ncount, so `value={unread}` is the first thing a React consumer writes, and\na property assignment does not go through the attribute converter that\nwould have made it a string. Read raw it went straight into\n`this.value.trim()`, which threw inside `render` and left the mark showing\nwhatever it had last: measured, a badge set to the number 2 stayed an 8px\ndot with no digit in it, and the console carried\n`TypeError: this.value.trim is not a function`. A component whose whole job\nis showing a count must not lose the count for being handed one.",
               "attribute": "value"
             },
+            {
+              "kind": "field",
+              "name": "given",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "description": "The value as text, whatever it was set to.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "blank",
@@ -2551,10 +2561,10 @@
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "number | string"
               },
               "default": "''",
-              "description": "The count or short text to show.\n\nAbsent shows a dot, zero shows nothing.",
+              "description": "The count or short text to show.\n\nAbsent shows a dot, zero shows nothing.\n\n**A string, and a number is taken anyway.** What this shows is usually a\ncount, so `value={unread}` is the first thing a React consumer writes, and\na property assignment does not go through the attribute converter that\nwould have made it a string. Read raw it went straight into\n`this.value.trim()`, which threw inside `render` and left the mark showing\nwhatever it had last: measured, a badge set to the number 2 stayed an 8px\ndot with no digit in it, and the console carried\n`TypeError: this.value.trim is not a function`. A component whose whole job\nis showing a count must not lose the count for being handed one.",
               "fieldName": "value"
             }
           ],

package/dist/badge/root/badge-root.d.ts

@@ -46,8 +46,20 @@ export declare class HelixHeadlessBadge extends HelixElement {
      * The count or short text to show.
      *
      * Absent shows a dot, zero shows nothing.
+     *
+     * **A string, and a number is taken anyway.** What this shows is usually a
+     * count, so `value={unread}` is the first thing a React consumer writes, and
+     * a property assignment does not go through the attribute converter that
+     * would have made it a string. Read raw it went straight into
+     * `this.value.trim()`, which threw inside `render` and left the mark showing
+     * whatever it had last: measured, a badge set to the number 2 stayed an 8px
+     * dot with no digit in it, and the console carried
+     * `TypeError: this.value.trim is not a function`. A component whose whole job
+     * is showing a count must not lose the count for being handed one.
      */
-    value: string;
+    value: number | string;
+    /** The value as text, whatever it was set to. */
+    private get given();
     /** Whether the value counts nothing, in which case there is no mark. */
     private get blank();
     /** What the indicator reads, once the cap has been applied. */

package/dist/badge/root/badge-root.js

@@ -13,15 +13,18 @@ let HelixHeadlessBadge = class HelixHeadlessBadge extends HelixElement {
         this.label = '';
         this.value = '';
     }
+    get given() {
+        return String(this.value ?? '');
+    }
     get blank() {
-        return this.value.trim() !== '' && Number(this.value) === 0;
+        return this.given.trim() !== '' && Number(this.given) === 0;
     }
     get text() {
-        const count = Number(this.value);
+        const count = Number(this.given);
         if (this.max !== undefined && Number.isFinite(count) && count > this.max) {
             return `${this.max}+`;
         }
-        return this.value;
+        return this.given;
     }
     render() {
         const blank = this.blank;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix-headless",
   "description": "Headless component tier. Structure, accessibility, state, and form participation. No styling.",
-  "version": "0.16.4",
+  "version": "0.16.5",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -45,14 +45,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.16.4",
-    "@fusion.dev/helix-icons": "0.16.4",
+    "@fusion.dev/helix-core": "0.16.5",
+    "@fusion.dev/helix-icons": "0.16.5",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.16.4",
-    "@fusion.dev/helix-testing": "0.16.4",
+    "@fusion.dev/helix-cem": "0.16.5",
+    "@fusion.dev/helix-testing": "0.16.5",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^3.3.0",

package/types/jsx.d.ts

@@ -802,7 +802,17 @@ Past it the indicator reads `{max}+`. */
   max?: (HelixHeadlessBadge["max"]) | undefined;
   /** The count or short text to show.
 
-Absent shows a dot, zero shows nothing. */
+Absent shows a dot, zero shows nothing.
+
+**A string, and a number is taken anyway.** What this shows is usually a
+count, so `value={unread}` is the first thing a React consumer writes, and
+a property assignment does not go through the attribute converter that
+would have made it a string. Read raw it went straight into
+`this.value.trim()`, which threw inside `render` and left the mark showing
+whatever it had last: measured, a badge set to the number 2 stayed an 8px
+dot with no digit in it, and the console carried
+`TypeError: this.value.trim is not a function`. A component whose whole job
+is showing a count must not lose the count for being handed one. */
   value?: (HelixHeadlessBadge["value"]) | undefined;
 };
 
@@ -817,7 +827,17 @@ Past it the indicator reads `{max}+`. */
   "prop:max"?: (HelixHeadlessBadge["max"]) | undefined;
   /** The count or short text to show.
 
-Absent shows a dot, zero shows nothing. */
+Absent shows a dot, zero shows nothing.
+
+**A string, and a number is taken anyway.** What this shows is usually a
+count, so `value={unread}` is the first thing a React consumer writes, and
+a property assignment does not go through the attribute converter that
+would have made it a string. Read raw it went straight into
+`this.value.trim()`, which threw inside `render` and left the mark showing
+whatever it had last: measured, a badge set to the number 2 stayed an 8px
+dot with no digit in it, and the console carried
+`TypeError: this.value.trim is not a function`. A component whose whole job
+is showing a count must not lose the count for being handed one. */
   "prop:value"?: (HelixHeadlessBadge["value"]) | undefined;
 
   /** Set the innerHTML of the element */
@@ -16179,6 +16199,16 @@ export type CustomElements = {
    * - `value`: The count or short text to show.
    *
    * Absent shows a dot, zero shows nothing.
+   *
+   * **A string, and a number is taken anyway.** What this shows is usually a
+   * count, so `value={unread}` is the first thing a React consumer writes, and
+   * a property assignment does not go through the attribute converter that
+   * would have made it a string. Read raw it went straight into
+   * `this.value.trim()`, which threw inside `render` and left the mark showing
+   * whatever it had last: measured, a badge set to the number 2 stayed an 8px
+   * dot with no digit in it, and the console carried
+   * `TypeError: this.value.trim is not a function`. A component whose whole job
+   * is showing a count must not lose the count for being handed one.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by
@@ -30610,6 +30640,16 @@ export type CustomElementsSolidJs = {
    * - `value`: The count or short text to show.
    *
    * Absent shows a dot, zero shows nothing.
+   *
+   * **A string, and a number is taken anyway.** What this shows is usually a
+   * count, so `value={unread}` is the first thing a React consumer writes, and
+   * a property assignment does not go through the attribute converter that
+   * would have made it a string. Read raw it went straight into
+   * `this.value.trim()`, which threw inside `render` and left the mark showing
+   * whatever it had last: measured, a badge set to the number 2 stayed an 8px
+   * dot with no digit in it, and the console carried
+   * `TypeError: this.value.trim is not a function`. A component whose whole job
+   * is showing a count must not lose the count for being handed one.
    * - `whenSettled`: Resolves a frame after the first update, when transitions are switched on.
    *
    * **Named `whenSettled` because `settled` is taken four times over**, by

package/types/vue.d.ts

@@ -426,7 +426,17 @@ Past it the indicator reads `{max}+`. */
   max?: (HelixHeadlessBadge["max"]) | undefined;
   /** The count or short text to show.
 
-Absent shows a dot, zero shows nothing. */
+Absent shows a dot, zero shows nothing.
+
+**A string, and a number is taken anyway.** What this shows is usually a
+count, so `value={unread}` is the first thing a React consumer writes, and
+a property assignment does not go through the attribute converter that
+would have made it a string. Read raw it went straight into
+`this.value.trim()`, which threw inside `render` and left the mark showing
+whatever it had last: measured, a badge set to the number 2 stayed an 8px
+dot with no digit in it, and the console carried
+`TypeError: this.value.trim is not a function`. A component whose whole job
+is showing a count must not lose the count for being handed one. */
   value?: (HelixHeadlessBadge["value"]) | undefined;
 };