@fusion.dev/helix 0.184.0 → 0.185.0

package/custom-elements.json

@@ -57497,7 +57497,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Rows have hairline rules between them and no fill, and the headings are set\napart by weight and color. Helix shows depth with a single border and no\nelevation, and a header band would be elevation.\n\nThe grid scrolls in its own box, and the toolbar and footer sit outside it,\nso the search field stays in place when the columns scroll sideways.\n\n`windowed` draws only the rows in view, for a result too long to lay out at\nonce, and the headings stay in place while the rows scroll. It works with or\nwithout `paginated` and with either `mode`, so a page or a chunk from a\nserver can be windowed.\n\n**Write the first page as rows, so the served HTML carries the values.**\nWrite it under the columns as `helix-table-row` and `helix-table-cell`\nelements. `@fusion.dev/helix-styles/helix.css` lays them out as the table\ndraws them before it upgrades, and the table shows them until `rows` holds a\nrow.",
+          "description": "Rows have hairline rules between them and no fill, and the headings are set\napart by weight and color. Helix shows depth with a single border and no\nelevation, and a header band would be elevation.\n\nThe grid scrolls in its own box, and the toolbar and footer sit outside it,\nso the search field stays in place when the columns scroll sideways.\n\n`windowed` draws only the rows in view, for a result too long to lay out at\nonce, and the headings stay in place while the rows scroll. It works with or\nwithout `paginated` and with either `mode`, so a page or a chunk from a\nserver can be windowed.\n\n**Write the first page as rows, so the served HTML carries the values.**\nWrite it under the columns as `helix-table-row` and `helix-table-cell`\nelements. `@fusion.dev/helix-styles/helix.css` lays them out as the table\ndraws them before it upgrades, and the table shows them until `rows` holds a\nrow. It holds the checkbox column and the pagination's row from the first\npaint, and takes the widths from `columns`, so nothing moves when the table\nupgrades or draws its own rows.",
           "name": "HelixDataTable",
           "cssProperties": [
             {
@@ -58468,6 +58468,20 @@
                 "module": "src/data-table/root/data-table-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "attribute": "columns",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "defaultExpanded",
@@ -59934,7 +59948,7 @@
                 "text": "string"
               },
               "privacy": "private",
-              "description": "The track list, from the columns if there are any.",
+              "description": "The track list: each column's `width`, or its track in `columns`, or the\ntrack a column with neither takes.\n\nA render that knows no columns, on a server or hydrating what one sent,\nhas `columns` alone, and sends it as it is.",
               "readonly": true,
               "inheritedFrom": {
                 "name": "HelixHeadlessDataTable",
@@ -62144,6 +62158,19 @@
                 "module": "src/data-table/root/data-table-root.ts"
               }
             },
+            {
+              "name": "columns",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The column tracks, as a grid track list such as `2fr 1fr max-content`,\ndealt out one track to a column in the order the columns are written. A\ncolumn's own `width` wins in its place, and a column it does not reach\ntakes the track a column with no `width` takes.\n\n**The one track list a server can send.** A server rendering this element\nhas no columns to read a `width` from, and neither has a stylesheet laying\nout the rows a page served before the table upgrades, so a table sized here\nlays those rows out at the widths it draws.",
+              "fieldName": "columns",
+              "inheritedFrom": {
+                "name": "HelixHeadlessDataTable",
+                "module": "src/data-table/root/data-table-root.ts"
+              }
+            },
             {
               "name": "default-expanded",
               "type": {
@@ -200086,7 +200113,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-accent` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Four forms, set with `variant`.** `bend` turns bright strands through one\ntight point, with its arms opening to the right. `ribbon`, the default, is a\nbroad, soft ribbon in long curves. `sweep` enters at a top corner, the one\n`at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp\nstrands crossing the full width.\n\n**Quiet behind words.** `quiet` names elements, such as a hero's words, that\nthe light dims behind to a faint glow, so a bright ribbon can cross the page\nunder them and they stay crisp.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the bend's apex or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves less than a screen and a half\napart it turns off screen so each wave reads alone. Set `z-index` on the\nelement to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll, without easing.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
+          "description": "Hundreds of thin strands are drawn as one ribbon, and the light they add\ntogether is bloomed, so where they converge the ribbon burns hot. The ribbon\nmoves on its own all the time: it sways and breathes, its strands wave and\nroll over one another, and light runs along them.\n\nIts palette comes from the tokens. The strands are `--helix-color-primary`,\na few are `--helix-color-accent` for depth, and the page they light is\n`--helix-color-background`. On a light page the light becomes ink, because\nlight added to near-white cannot be seen.\n\n**Four forms, set with `variant`.** `bend` turns bright strands through one\ntight point, with its arms opening to the right. `ribbon`, the default, is a\nbroad, soft ribbon in long curves. `sweep` enters at a top corner, the one\n`at` is nearer, and crosses in one diagonal to the far side. `waves` is sharp\nstrands crossing the full width.\n\n**Quiet behind words.** `quiet` names elements, such as a hero's words, that\nthe light dims behind to a faint glow, so a bright ribbon can cross the page\nunder them and they stay crisp.\n\n**In its own box, by default.** The element fills the box it is given, the\nway an image does, and `at` places the bend's apex or the ribbon's axis across\nit. Content placed inside sits over the ribbon, in the `content` part.\n\n**Down the whole page, with `travel`.** The element fixes itself behind the\npage, on `--helix-layer-beneath`, and lays one ribbon from the top of the page to the\nbottom, so scrolling travels along it. Put `helix-strands-stop` elements\ninside to pin a form to a section: each names an element with `for` and says\nwhich form the ribbon takes there. Between stops the ribbon fills the gap in\nits own `variant`, and between two waves less than a screen and a half\napart it turns off screen so each wave reads alone. Set `z-index` on the\nelement to move it.\n\nThe ribbon stops moving in these cases:\n- `prefers-reduced-motion` is set. The element shows one still frame, and in\n  `travel` still follows the scroll.\n- The element is off screen or in a background tab.\n\nIt shows a gradient from the same tokens in these cases, and matches\n`:state(fallback)` and sends `helix-strands-fallback` with the reason:\n- The renderer draws on the CPU, such as a headless browser or a machine with\n  no usable GPU.\n- There is no WebGL, or the browser took the drawing context back.\n\nStrands is styled only and has behavior, as `Aura` does: its behavior is\ndrawing to a canvas, so there is no structure for a headless version to hold.",
           "name": "HelixStrands",
           "cssProperties": [
             {
@@ -200447,7 +200474,7 @@
               },
               "privacy": "private",
               "default": "0",
-              "description": "In `travel`, the scroll position the ribbon is drawn at, easing toward the page's."
+              "description": "In `travel`, the scroll position the ribbon was last drawn at."
             },
             {
               "kind": "field",
@@ -200679,7 +200706,7 @@
               "name": "handleScroll",
               "privacy": "private",
               "readonly": true,
-              "description": "The page scrolled. A running loop eases toward it on its own; a stopped\none, for a reader who asked for no motion, jumps there and paints once."
+              "description": "The page scrolled. A running loop draws the new position on its next\nframe; a stopped one, for a reader who asked for no motion, paints once."
             },
             {
               "kind": "method",
@@ -206211,7 +206238,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "attribute": "columns",
               "inheritedFrom": {
                 "name": "HelixHeadlessTable",
@@ -208300,6 +208327,10 @@
               {
                 "description": "A heading that names the table, and a checkbox on each row that selects it.",
                 "slug": "selecting"
+              },
+              {
+                "description": "A thousand rows written as markup, with only the rows in view drawn.",
+                "slug": "windowed"
               }
             ],
             "source": "helix/styled/src/table"
@@ -208378,7 +208409,7 @@
                 "text": "string"
               },
               "default": "''",
-              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns is one track wide until it upgrades.\n\n**Data Table has none of this, and should not.** Its columns are its schema\nrather than an option, so there is always a column to write a `width` on\nand a list here would be a second way to say what that says. This table's\ncells are markup, and a table written as rows of cells with no column\ndeclared in it has nowhere else to be sized from.",
+              "description": "The column widths as one track list, written once on the table.\n\nWith `TableColumn` children, each track sizes the column in its place, a\nhidden column counted, so hiding one takes its track with it and the rest\nkeep theirs. The columns decide how many tracks there are and this list\nonly how wide: a track past the last column is dropped, and a column past\nthe last track shares what is left. With no columns declared it is the\nwhole track list. Tracks count as the grid counts them, so `minmax(0, 1fr)`\nis one and `repeat(2, 8rem)` is two, and one the grid would refuse leaves\nits column at the default rather than taking the table down to one column.\n\n**A column's own `width` wins over its track here.** The width is written\non the column it sizes, which is the more particular statement, and it is\nwhere a resize lands: a reader dragging a column's edge writes `width`, so\nwere this list to win, the drag would move the separator and leave the\ntrack where the list put it. This is the table's default for its columns,\nand each column may say otherwise.\n\n**It is also the only track list a server can send.** The shim has no tree\nto walk, so a render there knows of no columns and this attribute is the\nwhole answer: a table given one lays its grid out in the first paint, and a\ntable sized only by its columns takes, until it upgrades, a track for each\ncolumn at the width a column with no `width` takes (`helix.css`).\n\nData Table takes the same list, for the same reason: a data table that\nserves its first page as rows is laid out by it before it upgrades.",
               "fieldName": "columns",
               "inheritedFrom": {
                 "name": "HelixHeadlessTable",
@@ -254052,6 +254083,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.184.0"
+    "version": "0.185.0"
   }
 }

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="toolbar"], [part="table"], [part="footer"] {grid-column: 1 / -1}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(var(--_data-table-fade), transparent, #000 var(--_data-table-fade-start, 0rem), #000 calc(100% - var(--_data-table-fade-end, 0rem)), transparent)}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem}5%, 95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl)}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl)}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none}}[part="head"], [part~="row"] {display: contents}[part~="cell"] {border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align)}[part~="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text)}::slotted(helix-table-column[sortable]) {cursor: pointer}[part~="cell"]:focus-visible, [part="more-cell"]:focus-visible, [part~="select"]:focus-visible, [part="select-all"]:focus-visible, [part="row-grip"]:focus-visible, [part="grip-head"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="select"], [part="select-all"], [part="row-grip"], [part="grip-head"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm))}[part~="row"]:last-of-type [part~="select"], [part~="row"]:last-of-type [part="row-grip"] {border-block-end-color: transparent}[part~="row"][aria-selected="true"] > * {background-color: var(--data-table-selected-background-color, color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background)))}[part="row-grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--data-table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none}[part="row-grip-button"]:active {cursor: grabbing}[part="row-grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--data-table-grip-disabled-opacity, 0.4)}[part="row-grip-mark"] {block-size: 1em;inline-size: 1em}[part~="row"][part~="row-dragging"] > * {opacity: var(--data-table-dragging-opacity, 0.5)}[part~="row"][part~="row-drop-before"] > * {box-shadow: inset 0 var(--data-table-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part="toolbar"][data-empty], [part="footer"][data-empty] {display: none}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm))}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm))}[part="pagination"] {margin-inline-start: auto}[part="empty"], [part="loading"] {grid-column: 1 / -1}[part="error"] {color: var(--data-table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(var(--data-table-toggle-size, var(--helix-size-icon-tight)) + var(--data-table-toggle-gap, var(--helix-space-2xs)));padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)))}:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)) + var(--_data-table-gutter))}[part~="toggle"] {align-items: center;background: none;block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));border: none;color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));justify-content: center;margin-inline-end: var(--data-table-toggle-gap, var(--helix-space-2xs));padding: 0;vertical-align: middle}[part="toggle-mark"] {block-size: 100%;inline-size: 100%}[part="more"] {display: contents}[part="more-cell"] {display: flex;grid-column: 1 / -1;padding-block: var(--data-table-padding-block, var(--helix-space-sm))}[part="more-button"] {background: none;border: var(--helix-border-thin) solid var(--data-table-more-border-color, var(--helix-color-border));border-radius: var(--data-table-more-radius, var(--helix-radii-sm));color: var(--data-table-color, var(--helix-color-foreground));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-more-padding-block, var(--helix-space-2xs));padding-inline: var(--data-table-more-padding-inline, var(--helix-space-sm))}[part="more-button"]:hover {background-color: var(--data-table-more-hover-background-color, var(--helix-color-surface-raised))}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(--data-table-heading-background-color, var(--helix-color-background));--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky}:host([windowed]) [part="select-all"], :host([windowed]) [part="grip-head"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky)}[part="before"], [part="after"] {grid-column: 1 / -1}:host([loading]) [part="table"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--data-table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--data-table-drag-preview-border-width, var(--helix-border-floating)) solid var(--data-table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--data-table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--data-table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--data-table-drag-preview-opacity, 0.9)}@media print {:host {background-color: transparent}[part="table"] {overflow-x: visible}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible}[part="footer"] {display: none}}`);
+export const styles = createSheet(`:host {display: block}[part="toolbar"], [part="table"], [part="footer"] {grid-column: 1 / -1}[part="table"] {display: grid;grid-template-columns: var(--data-table-columns, var(--data-table-template, minmax(0, 1fr)));inline-size: 100%;overflow-x: auto}[part="table"] {--_data-table-fade: to right;animation: data-table-edges linear both;animation-timeline: scroll(self inline);mask-image: linear-gradient(var(--_data-table-fade), transparent, #000 var(--_data-table-fade-start, 0rem), #000 calc(100% - var(--_data-table-fade-end, 0rem)), transparent)}:host(:dir(rtl)) [part="table"] {--_data-table-fade: to left}@keyframes data-table-edges {0% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: 0rem}5%, 95% {--_data-table-fade-end: var(--helix-space-xl);--_data-table-fade-start: var(--helix-space-xl)}100% {--_data-table-fade-end: 0rem;--_data-table-fade-start: var(--helix-space-xl)}}@media (prefers-reduced-motion: reduce) {[part="table"] {animation: none}}[part="head"], [part~="row"] {display: contents}[part~="cell"] {border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));color: var(--data-table-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-none) var(--helix-space-md));text-align: var(--data-table-cell-align)}[part~="row"]:last-of-type [part~="cell"] {border-block-end-color: transparent}::slotted(helix-table-column) {--_table-heading-color: var(--data-table-heading-color);--_table-heading-padding-block: var(--data-table-padding-block);--_table-heading-padding-inline: var(--data-table-padding-inline);--_table-heading-rule-color: var(--data-table-rule-color);--_table-heading-text: var(--data-table-text)}::slotted(helix-table-column[sortable]) {cursor: pointer}[part~="cell"]:focus-visible, [part="more-cell"]:focus-visible, [part~="select"]:focus-visible, [part="select-all"]:focus-visible, [part="row-grip"]:focus-visible, [part="grip-head"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part~="select"], [part="select-all"], [part="row-grip"], [part="grip-head"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--data-table-rule-color, var(--helix-color-border));display: flex;justify-content: center;padding-block: var(--data-table-padding-block, var(--helix-space-sm));padding-inline: var(--data-table-padding-inline, var(--helix-space-sm))}[part="grip-head"]::before {content: "";inline-size: 1em}[part~="row"]:last-of-type [part~="select"], [part~="row"]:last-of-type [part="row-grip"] {border-block-end-color: transparent}[part~="row"][aria-selected="true"] > * {background-color: var(--data-table-selected-background-color, color-mix(in srgb, var(--helix-color-primary) 10%, var(--helix-color-background)))}[part="row-grip-button"] {all: unset;align-items: center;border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--data-table-grip-color, var(--helix-color-foreground-muted));cursor: grab;display: inline-flex;touch-action: none}[part="row-grip-button"]:active {cursor: grabbing}[part="row-grip-button"][aria-disabled="true"] {cursor: default;opacity: var(--data-table-grip-disabled-opacity, 0.4)}[part="row-grip-mark"] {block-size: 1em;inline-size: 1em}[part~="row"][part~="row-dragging"] > * {opacity: var(--data-table-dragging-opacity, 0.5)}[part~="row"][part~="row-drop-before"] > * {box-shadow: inset 0 var(--data-table-drop-indicator-size, var(--helix-border-thick)) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part~="row"][part~="row-drop-after"] > * {box-shadow: inset 0 calc(var(--data-table-drop-indicator-size, var(--helix-border-thick)) * -1) 0 0 var(--data-table-drop-indicator-color, var(--helix-color-primary))}[part="toolbar"][data-empty], [part="footer"][data-empty] {display: none}[part="toolbar"] {padding-block-end: var(--data-table-toolbar-gap, var(--helix-space-sm))}[part="footer"] {align-items: center;display: flex;flex-wrap: wrap;gap: var(--data-table-footer-item-gap, var(--helix-space-md));padding-block-start: var(--data-table-footer-gap, var(--helix-space-sm))}[part="pagination"] {margin-inline-start: auto}[part="footer"][data-held] {min-block-size: calc(var(--pagination-size, var(--helix-size-control-tight)) + var(--data-table-footer-gap, var(--helix-space-sm)))}[part="footer"][data-held] [part="pagination"] {visibility: hidden}:host(:not(:defined))::before, :host(:not(:defined))::after {content: none !important}[part="empty"], [part="loading"] {grid-column: 1 / -1}[part="error"] {color: var(--data-table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);grid-column: 1 / -1;margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center}:host([child-field]) [part~="cell-header"] {--_data-table-gutter: calc(var(--data-table-toggle-size, var(--helix-size-icon-tight)) + var(--data-table-toggle-gap, var(--helix-space-2xs)));padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)))}:host([child-field]) [part~="cell-header"]:not(:has([part~="toggle"])) {padding-inline-start: calc((var(--data-table-level, 1) - 1) * var(--data-table-indent, var(--_data-table-gutter)) + var(--_data-table-gutter))}[part~="toggle"] {align-items: center;background: none;block-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));border: none;color: var(--data-table-toggle-color, var(--helix-color-foreground-muted));cursor: pointer;display: inline-flex;inline-size: var(--data-table-toggle-size, var(--helix-size-icon-tight));justify-content: center;margin-inline-end: var(--data-table-toggle-gap, var(--helix-space-2xs));padding: 0;vertical-align: middle}[part="toggle-mark"] {block-size: 100%;inline-size: 100%}[part="more"] {display: contents}[part="more-cell"] {display: flex;grid-column: 1 / -1;padding-block: var(--data-table-padding-block, var(--helix-space-sm))}[part="more-button"] {background: none;border: var(--helix-border-thin) solid var(--data-table-more-border-color, var(--helix-color-border));border-radius: var(--data-table-more-radius, var(--helix-radii-sm));color: var(--data-table-color, var(--helix-color-foreground));cursor: pointer;font-family: var(--helix-font-sans);font-size: var(--data-table-text, var(--helix-text-sm));padding-block: var(--data-table-more-padding-block, var(--helix-space-2xs));padding-inline: var(--data-table-more-padding-inline, var(--helix-space-sm))}[part="more-button"]:hover {background-color: var(--data-table-more-hover-background-color, var(--helix-color-surface-raised))}:host([windowed]) [part="table"] {block-size: var(--data-table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(--data-table-heading-background-color, var(--helix-color-background));--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky}:host([windowed]) [part="select-all"], :host([windowed]) [part="grip-head"] {background-color: var(--data-table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky)}[part="before"], [part="after"] {grid-column: 1 / -1}:host([loading]) [part="table"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--data-table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--data-table-drag-preview-border-width, var(--helix-border-floating)) solid var(--data-table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--data-table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--data-table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--data-table-drag-preview-opacity, 0.9)}@media print {:host {background-color: transparent}[part="table"] {overflow-x: visible}:host([windowed]) [part="table"] {block-size: auto;overflow-y: visible}[part="footer"] {display: none}}`);

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

@@ -22,7 +22,9 @@ import '../../pagination/index.js';
  * Write it under the columns as `helix-table-row` and `helix-table-cell`
  * elements. `@fusion.dev/helix-styles/helix.css` lays them out as the table
  * draws them before it upgrades, and the table shows them until `rows` holds a
- * row.
+ * row. It holds the checkbox column and the pagination's row from the first
+ * paint, and takes the widths from `columns`, so nothing moves when the table
+ * upgrades or draws its own rows.
  *
  * @since 0.1.0
  * @status stable

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

@@ -40,7 +40,7 @@ import { type StrandsVariant } from '../path.js';
  *
  * The ribbon stops moving in these cases:
  * - `prefers-reduced-motion` is set. The element shows one still frame, and in
- *   `travel` still follows the scroll, without easing.
+ *   `travel` still follows the scroll.
  * - The element is off screen or in a background tab.
  *
  * It shows a gradient from the same tokens in these cases, and matches
@@ -185,7 +185,7 @@ export declare class HelixStrands extends HelixElement {
     private readonly quietRects;
     /** In `travel`, the path's `y` at even steps of its parameter. */
     private table;
-    /** In `travel`, the scroll position the ribbon is drawn at, easing toward the page's. */
+    /** In `travel`, the scroll position the ribbon was last drawn at. */
     private offset;
     /** Whether the opening frame has been drawn. Aura's settle: see `open`. */
     private opened;
@@ -256,8 +256,8 @@ export declare class HelixStrands extends HelixElement {
     /** A layout on the next frame, once, however many changes asked for one. */
     private readonly relayout;
     /**
-     * The page scrolled. A running loop eases toward it on its own; a stopped
-     * one, for a reader who asked for no motion, jumps there and paints once.
+     * The page scrolled. A running loop draws the new position on its next
+     * frame; a stopped one, for a reader who asked for no motion, paints once.
      */
     private readonly handleScroll;
     private paint;

package/dist/strands/root/strands-root.js

@@ -10,7 +10,6 @@ import { styles } from './strands-root.css.js';
 const MAX_CANVAS_EDGE = 4096;
 const MAX_CANVAS_PIXELS = 4_194_304;
 const OPENING_PATIENCE = 500;
-const TRAVEL_EASE = 0.09;
 const PACE = 0.25;
 let HelixStrands = class HelixStrands extends HelixElement {
     constructor() {
@@ -465,11 +464,7 @@ let HelixStrands = class HelixStrands extends HelixElement {
         this.held = 0;
         this.elapsed += step * PACE * Math.max(0, this.speed);
         if (this.travel) {
-            const target = window.scrollY;
-            this.offset += (target - this.offset) * (1 - Math.exp(-step / TRAVEL_EASE));
-            if (Math.abs(target - this.offset) < 0.5) {
-                this.offset = target;
-            }
+            this.offset = window.scrollY;
         }
         this.paint();
     }