@fusion.dev/helix-headless 0.108.0 → 0.108.2

package/custom-elements.json

@@ -102702,7 +102702,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The track this column takes, as CSS.\n\nA single track value, so anything valid in `grid-template-columns` works:\n`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in\nits place in a `Table`'s `columns`, where that table sets one, and\notherwise shares what is left over equally, as `minmax(max-content, 1fr)`.\nSet here, it wins over that list, which is what lets a reader resize a\ncolumn in a table that set one.\n\n**The floor is `max-content`, never `0` and never `min-content`.** A zero\nfloor lets a track shrink under its own content: at 375 the columns squeeze\nto 75px and `eu-central-1` wraps across lines, which reads as corrupt data\nrather than as a table that ran out of room. A `min-content` floor still\nbreaks it, a hyphen being a wrap opportunity.\n\nThe overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's\nown box, so a long value pushes past the container and the table scrolls\ninstead of the value being destroyed. Measured at 375: tracks of 192, 89 and\n102 against a 343 box, so the table scrolls 384 and the page does not move.\n\nThe cost is that a column of prose asks for its longest paragraph on one\nline, so a column holding sentences rather than values wants\n`width=\"minmax(0, 1fr)\"` to opt back into wrapping. A headless consumer owns\nthe overflow either way, that being paint, and gets the honest track list.",
+              "description": "The track this column takes, as CSS.\n\nA single track value, so anything valid in `grid-template-columns` works:\n`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in\nits place in a `Table`'s `columns`, where that table sets one, and\notherwise shares what is left over equally, as `minmax(max-content, 1fr)`.\nSet here, it wins over that list, which is what lets a reader resize a\ncolumn in a table that set one.\n\n**A `Table` fits the columns that set neither to what they hold.** Once\nany of them holds a sentence, the columns of short values keep\n`max-content` and the columns of sentences wrap, above a floor of `14ch`,\neach taking a share of the room in proportion to its text. A table of\nvalues alone keeps the default.\n\n**The floor is `max-content`, never `0` and never `min-content`.** A zero\nfloor lets a track shrink under its own content: at 375 the columns squeeze\nto 75px and `eu-central-1` wraps across lines, which reads as corrupt data\nrather than as a table that ran out of room. A `min-content` floor still\nbreaks it, a hyphen being a wrap opportunity.\n\nThe overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's\nown box, so a long value pushes past the container and the table scrolls\ninstead of the value being destroyed. Measured at 375: tracks of 192, 89 and\n102 against a 343 box, so the table scrolls 384 and the page does not move.\n\nA column of sentences does not pay for this: the table sees the sentences\nand lets that column wrap. A headless consumer owns the overflow either\nway, that being paint, and gets the honest track list.",
               "attribute": "width"
             },
             {
@@ -103314,7 +103314,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The track this column takes, as CSS.\n\nA single track value, so anything valid in `grid-template-columns` works:\n`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in\nits place in a `Table`'s `columns`, where that table sets one, and\notherwise shares what is left over equally, as `minmax(max-content, 1fr)`.\nSet here, it wins over that list, which is what lets a reader resize a\ncolumn in a table that set one.\n\n**The floor is `max-content`, never `0` and never `min-content`.** A zero\nfloor lets a track shrink under its own content: at 375 the columns squeeze\nto 75px and `eu-central-1` wraps across lines, which reads as corrupt data\nrather than as a table that ran out of room. A `min-content` floor still\nbreaks it, a hyphen being a wrap opportunity.\n\nThe overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's\nown box, so a long value pushes past the container and the table scrolls\ninstead of the value being destroyed. Measured at 375: tracks of 192, 89 and\n102 against a 343 box, so the table scrolls 384 and the page does not move.\n\nThe cost is that a column of prose asks for its longest paragraph on one\nline, so a column holding sentences rather than values wants\n`width=\"minmax(0, 1fr)\"` to opt back into wrapping. A headless consumer owns\nthe overflow either way, that being paint, and gets the honest track list.",
+              "description": "The track this column takes, as CSS.\n\nA single track value, so anything valid in `grid-template-columns` works:\n`16rem`, `auto`, `minmax(0, 2fr)`. Left unset the column takes the track in\nits place in a `Table`'s `columns`, where that table sets one, and\notherwise shares what is left over equally, as `minmax(max-content, 1fr)`.\nSet here, it wins over that list, which is what lets a reader resize a\ncolumn in a table that set one.\n\n**A `Table` fits the columns that set neither to what they hold.** Once\nany of them holds a sentence, the columns of short values keep\n`max-content` and the columns of sentences wrap, above a floor of `14ch`,\neach taking a share of the room in proportion to its text. A table of\nvalues alone keeps the default.\n\n**The floor is `max-content`, never `0` and never `min-content`.** A zero\nfloor lets a track shrink under its own content: at 375 the columns squeeze\nto 75px and `eu-central-1` wraps across lines, which reads as corrupt data\nrather than as a table that ran out of room. A `min-content` floor still\nbreaks it, a hyphen being a wrap opportunity.\n\nThe overflow has somewhere to go: `@fusion.dev/helix` scrolls the table's\nown box, so a long value pushes past the container and the table scrolls\ninstead of the value being destroyed. Measured at 375: tracks of 192, 89 and\n102 against a 343 box, so the table scrolls 384 and the page does not move.\n\nA column of sentences does not pay for this: the table sees the sentences\nand lets that column wrap. A headless consumer owns the overflow either\nway, that being paint, and gets the honest track list.",
               "fieldName": "width"
             },
             {
@@ -103524,6 +103524,31 @@
               "description": "The track list, from the columns if there are any.\n\nRead from the DOM rather than kept, so adding or removing a column needs\nnothing else to be told. A hidden column takes no track: left in, the\nheader row had a heading fewer than the grid had tracks, the first cell\nfilled the gap, and every row after it began a column late. Falls back to\nthe `columns` string for a table that declares no columns, and to a single\ntrack for one that declares neither.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "fitted",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string[]"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "declared",
+                  "type": {
+                    "text": "HelixHeadlessTableColumn[]"
+                  }
+                },
+                {
+                  "name": "listed",
+                  "type": {
+                    "text": "string[]"
+                  }
+                }
+              ],
+              "description": "Tracks for the columns that set nothing, from how much text each holds.\n\n**A column of sentences wraps and a column of values does not.** Every\ncolumn left at `minmax(max-content, 1fr)` asks for its longest cell on one\nline, which is right for `eu-central-1` and wrong for a description: the\ntable grows as wide as its longest sentence and scrolls, on a phone and on\na desktop alike. So once any column holds more than `SHORT` characters,\nthe short columns keep `max-content`, and each long one wraps above a\n`FLOOR`, taking a share of the room in proportion to its text.\n\nA table with no long column keeps the default, so a table of values lays\nout as it always has. A column's `width` and a track in `columns` are both\nstatements an author made, and each wins over this.\n\nCharacters stand in for width. They only have to rank columns against each\nother, and a count needs no layout, so it reads the same before paint as\nafter. Sampled, so a table of thousands of rows reads `SAMPLE` of them."
+            },
             {
               "kind": "field",
               "name": "handleSlotChange",
@@ -103538,7 +103563,7 @@
               },
               "privacy": "private",
               "default": "undefined",
-              "description": "Watches the light DOM for rows and columns arriving, leaving and moving.\n\n**A manually assigned slot does not announce them**, the same gap `Chat`\nand `Carousel` watch for. Under `slotAssignment: 'manual'` only `assign`\nchanges an assignment, so a row appended after the first render reached no\nslot and drew nowhere, and a column moved to another place lost its\nassignment on the way out and never got it back: measured in Chromium, both\n`assignedSlot` null a render later. A table whose definition loaded before\nits markup was parsed drew no columns at all, having rendered before any\narrived."
+              "description": "Watches the light DOM for rows and columns arriving, leaving and moving.\n\n**A manually assigned slot does not announce them**, the same gap `Chat`\nand `Carousel` watch for. Under `slotAssignment: 'manual'` only `assign`\nchanges an assignment, so a row appended after the first render reached no\nslot and drew nowhere, and a column moved to another place lost its\nassignment on the way out and never got it back: measured in Chromium, both\n`assignedSlot` null a render later. A table whose definition loaded before\nits markup was parsed drew no columns at all, having rendered before any\narrived.\n\n**The cells' text too, all the way down.** The columns that set no width\nare sized from what their cells say, so a cell whose text changes can\nchange the track it sits in."
             },
             {
               "kind": "field",

package/dist/table/column/table-column.d.ts

@@ -208,6 +208,12 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * Set here, it wins over that list, which is what lets a reader resize a
      * column in a table that set one.
      *
+     * **A `Table` fits the columns that set neither to what they hold.** Once
+     * any of them holds a sentence, the columns of short values keep
+     * `max-content` and the columns of sentences wrap, above a floor of `14ch`,
+     * each taking a share of the room in proportion to its text. A table of
+     * values alone keeps the default.
+     *
      * **The floor is `max-content`, never `0` and never `min-content`.** A zero
      * floor lets a track shrink under its own content: at 375 the columns squeeze
      * to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -219,10 +225,9 @@ export declare class HelixHeadlessTableColumn extends HelixElement {
      * instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
      * 102 against a 343 box, so the table scrolls 384 and the page does not move.
      *
-     * The cost is that a column of prose asks for its longest paragraph on one
-     * line, so a column holding sentences rather than values wants
-     * `width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-     * the overflow either way, that being paint, and gets the honest track list.
+     * A column of sentences does not pay for this: the table sees the sentences
+     * and lets that column wrap. A headless consumer owns the overflow either
+     * way, that being paint, and gets the honest track list.
      */
     width: string;
     /**

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

@@ -85,6 +85,26 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * track for one that declares neither.
      */
     private get template();
+    /**
+     * Tracks for the columns that set nothing, from how much text each holds.
+     *
+     * **A column of sentences wraps and a column of values does not.** Every
+     * column left at `minmax(max-content, 1fr)` asks for its longest cell on one
+     * line, which is right for `eu-central-1` and wrong for a description: the
+     * table grows as wide as its longest sentence and scrolls, on a phone and on
+     * a desktop alike. So once any column holds more than `SHORT` characters,
+     * the short columns keep `max-content`, and each long one wraps above a
+     * `FLOOR`, taking a share of the room in proportion to its text.
+     *
+     * A table with no long column keeps the default, so a table of values lays
+     * out as it always has. A column's `width` and a track in `columns` are both
+     * statements an author made, and each wins over this.
+     *
+     * Characters stand in for width. They only have to rank columns against each
+     * other, and a count needs no layout, so it reads the same before paint as
+     * after. Sampled, so a table of thousands of rows reads `SAMPLE` of them.
+     */
+    private fitted;
     private readonly handleSlotChange;
     /**
      * Watches the light DOM for rows and columns arriving, leaving and moving.
@@ -97,6 +117,10 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * `assignedSlot` null a render later. A table whose definition loaded before
      * its markup was parsed drew no columns at all, having rendered before any
      * arrived.
+     *
+     * **The cells' text too, all the way down.** The columns that set no width
+     * are sized from what their cells say, so a cell whose text changes can
+     * change the track it sits in.
      */
     private watcher;
     connectedCallback(): void;

package/dist/table/root/table-root.js

@@ -35,6 +35,10 @@ const tracksOf = (list, wanted) => {
     }
     return tracks.slice(0, wanted);
 };
+const SHORT = 32;
+const FLOOR = '14ch';
+const SAMPLE = 200;
+const lengthOf = (element) => (element?.textContent ?? '').replace(/\s+/g, ' ').trim().length;
 let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixElement) {
     constructor() {
         super(...arguments);
@@ -56,14 +60,42 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
             return this.columns;
         }
         const listed = tracksOf(this.columns, declared.length);
+        const fitted = this.fitted(declared, listed);
         return declared
-            .flatMap((column, index) => column.shown ? [column.width ? column.track : listed[index] || column.track] : [])
+            .flatMap((column, index) => column.shown
+            ? [column.width ? column.track : listed[index] || fitted[index] || column.track]
+            : [])
             .join(' ');
     }
+    fitted(declared, listed) {
+        const open = declared.map((column, index) => column.shown && !column.width && !listed[index]);
+        if (!open.includes(true)) {
+            return [];
+        }
+        const widths = declared.map((column) => lengthOf(column));
+        for (const row of this.slotted.slice(0, SAMPLE)) {
+            for (const [at, width] of widths.entries()) {
+                widths[at] = Math.max(width, lengthOf(row.children[at]));
+            }
+        }
+        const long = widths.filter((width, at) => open[at] && width > SHORT);
+        if (long.length === 0) {
+            return [];
+        }
+        const narrowest = Math.min(...long);
+        return widths.map((width, at) => {
+            if (!open[at]) {
+                return '';
+            }
+            return width > SHORT
+                ? `minmax(${FLOOR}, ${Number((width / narrowest).toFixed(2))}fr)`
+                : 'max-content';
+        });
+    }
     connectedCallback() {
         super.connectedCallback();
         this.watcher = new MutationObserver(() => this.requestUpdate());
-        this.watcher.observe(this, { childList: true });
+        this.watcher.observe(this, { characterData: true, childList: true, subtree: true });
     }
     disconnectedCallback() {
         super.disconnectedCallback();

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.108.0",
+  "version": "0.108.2",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -46,13 +46,13 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.108.0",
-    "@fusion.dev/helix-icons": "0.108.0",
+    "@fusion.dev/helix-core": "0.108.2",
+    "@fusion.dev/helix-icons": "0.108.2",
     "uqr": "^0.1.3"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.108.0",
-    "@fusion.dev/helix-testing": "0.108.0",
+    "@fusion.dev/helix-cem": "0.108.2",
+    "@fusion.dev/helix-testing": "0.108.2",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",

package/types/jsx.d.ts

@@ -17932,6 +17932,12 @@ otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
 Set here, it wins over that list, which is what lets a reader resize a
 column in a table that set one.
 
+**A `Table` fits the columns that set neither to what they hold.** Once
+any of them holds a sentence, the columns of short values keep
+`max-content` and the columns of sentences wrap, above a floor of `14ch`,
+each taking a share of the room in proportion to its text. A table of
+values alone keeps the default.
+
 **The floor is `max-content`, never `0` and never `min-content`.** A zero
 floor lets a track shrink under its own content: at 375 the columns squeeze
 to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -17943,10 +17949,9 @@ own box, so a long value pushes past the container and the table scrolls
 instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
 102 against a 343 box, so the table scrolls 384 and the page does not move.
 
-The cost is that a column of prose asks for its longest paragraph on one
-line, so a column holding sentences rather than values wants
-`width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-the overflow either way, that being paint, and gets the honest track list. */
+A column of sentences does not pay for this: the table sees the sentences
+and lets that column wrap. A headless consumer owns the overflow either
+way, that being paint, and gets the honest track list. */
   width?: (HelixHeadlessTableColumn["width"]) | undefined;
   /** The text screen readers announce for the column's width. `{width}` is
 replaced with the width. */
@@ -18096,6 +18101,12 @@ otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
 Set here, it wins over that list, which is what lets a reader resize a
 column in a table that set one.
 
+**A `Table` fits the columns that set neither to what they hold.** Once
+any of them holds a sentence, the columns of short values keep
+`max-content` and the columns of sentences wrap, above a floor of `14ch`,
+each taking a share of the room in proportion to its text. A table of
+values alone keeps the default.
+
 **The floor is `max-content`, never `0` and never `min-content`.** A zero
 floor lets a track shrink under its own content: at 375 the columns squeeze
 to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -18107,10 +18118,9 @@ own box, so a long value pushes past the container and the table scrolls
 instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
 102 against a 343 box, so the table scrolls 384 and the page does not move.
 
-The cost is that a column of prose asks for its longest paragraph on one
-line, so a column holding sentences rather than values wants
-`width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-the overflow either way, that being paint, and gets the honest track list. */
+A column of sentences does not pay for this: the table sees the sentences
+and lets that column wrap. A headless consumer owns the overflow either
+way, that being paint, and gets the honest track list. */
   "prop:width"?: (HelixHeadlessTableColumn["width"]) | undefined;
   /** The text screen readers announce for the column's width. `{width}` is
 replaced with the width. */
@@ -38388,6 +38398,12 @@ export type CustomElements = {
    * Set here, it wins over that list, which is what lets a reader resize a
    * column in a table that set one.
    *
+   * **A `Table` fits the columns that set neither to what they hold.** Once
+   * any of them holds a sentence, the columns of short values keep
+   * `max-content` and the columns of sentences wrap, above a floor of `14ch`,
+   * each taking a share of the room in proportion to its text. A table of
+   * values alone keeps the default.
+   *
    * **The floor is `max-content`, never `0` and never `min-content`.** A zero
    * floor lets a track shrink under its own content: at 375 the columns squeeze
    * to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -38399,10 +38415,9 @@ export type CustomElements = {
    * instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
    * 102 against a 343 box, so the table scrolls 384 and the page does not move.
    *
-   * The cost is that a column of prose asks for its longest paragraph on one
-   * line, so a column holding sentences rather than values wants
-   * `width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-   * the overflow either way, that being paint, and gets the honest track list.
+   * A column of sentences does not pay for this: the table sees the sentences
+   * and lets that column wrap. A headless consumer owns the overflow either
+   * way, that being paint, and gets the honest track list.
    * - `width-label`/`widthLabel`: The text screen readers announce for the column's width. `{width}` is
    * replaced with the width.
    * - `cell`: A function that reads the cell's content from a row, for cells that `field`
@@ -58458,6 +58473,12 @@ export type CustomElementsSolidJs = {
    * Set here, it wins over that list, which is what lets a reader resize a
    * column in a table that set one.
    *
+   * **A `Table` fits the columns that set neither to what they hold.** Once
+   * any of them holds a sentence, the columns of short values keep
+   * `max-content` and the columns of sentences wrap, above a floor of `14ch`,
+   * each taking a share of the room in proportion to its text. A table of
+   * values alone keeps the default.
+   *
    * **The floor is `max-content`, never `0` and never `min-content`.** A zero
    * floor lets a track shrink under its own content: at 375 the columns squeeze
    * to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -58469,10 +58490,9 @@ export type CustomElementsSolidJs = {
    * instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
    * 102 against a 343 box, so the table scrolls 384 and the page does not move.
    *
-   * The cost is that a column of prose asks for its longest paragraph on one
-   * line, so a column holding sentences rather than values wants
-   * `width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-   * the overflow either way, that being paint, and gets the honest track list.
+   * A column of sentences does not pay for this: the table sees the sentences
+   * and lets that column wrap. A headless consumer owns the overflow either
+   * way, that being paint, and gets the honest track list.
    * - `width-label`/`widthLabel`: The text screen readers announce for the column's width. `{width}` is
    * replaced with the width.
    * - `cell`: A function that reads the cell's content from a row, for cells that `field`

package/types/vue.d.ts

@@ -9254,6 +9254,12 @@ otherwise shares what is left over equally, as `minmax(max-content, 1fr)`.
 Set here, it wins over that list, which is what lets a reader resize a
 column in a table that set one.
 
+**A `Table` fits the columns that set neither to what they hold.** Once
+any of them holds a sentence, the columns of short values keep
+`max-content` and the columns of sentences wrap, above a floor of `14ch`,
+each taking a share of the room in proportion to its text. A table of
+values alone keeps the default.
+
 **The floor is `max-content`, never `0` and never `min-content`.** A zero
 floor lets a track shrink under its own content: at 375 the columns squeeze
 to 75px and `eu-central-1` wraps across lines, which reads as corrupt data
@@ -9265,10 +9271,9 @@ own box, so a long value pushes past the container and the table scrolls
 instead of the value being destroyed. Measured at 375: tracks of 192, 89 and
 102 against a 343 box, so the table scrolls 384 and the page does not move.
 
-The cost is that a column of prose asks for its longest paragraph on one
-line, so a column holding sentences rather than values wants
-`width="minmax(0, 1fr)"` to opt back into wrapping. A headless consumer owns
-the overflow either way, that being paint, and gets the honest track list. */
+A column of sentences does not pay for this: the table sees the sentences
+and lets that column wrap. A headless consumer owns the overflow either
+way, that being paint, and gets the honest track list. */
   width?: (HelixHeadlessTableColumn["width"]) | undefined;
   /** The text screen readers announce for the column's width. `{width}` is
 replaced with the width. */