@fusion.dev/helix-headless 0.182.2 → 0.183.0

package/custom-elements.json

@@ -7132,6 +7132,10 @@
               "description": "A far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with `bar-end`.",
               "name": "bar-end-negative"
             },
+            {
+              "description": "A bar below zero, standing alone or any segment of a stack below it, whose base is its top, or its inline end when the bars run across. Set together with `bar`.",
+              "name": "bar-negative"
+            },
             {
               "description": "The far stop of a bar's gradient, where one is used.",
               "name": "bar-wash-end"
@@ -80378,7 +80382,7 @@
               },
               "privacy": "private",
               "default": "-1",
-              "description": "Where a range taken in with Shift starts: the cell last pressed, or none."
+              "description": "Where a range taken in with Shift starts: the row of the table whose cell\nwas last pressed, or none.\n\n**The row, and not the cell's place among those drawn.** A narrow strip\ndraws the newest whole columns, so a resize that drops or adds a column\nmoves every cell's place, and an anchor kept as a place started the next\nrange on another day."
             },
             {
               "kind": "field",
@@ -80586,6 +80590,16 @@
               "description": "The readings actually drawn, newest kept.\n\nThe tail rather than the head: a status strip that drops the newest days to\nkeep the oldest is answering a question nobody asked.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "dropped",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "How many of the oldest rows a narrow strip leaves undrawn.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "readings",
@@ -200068,7 +200082,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The items arrive as data, in one of two ways:\n\n- `items` takes an array. A framework sets it as a property, and React\n  hydration keeps it.\n- `for` names a `<script type=\"application/json\">` that holds an array, which\n  a server sends as markup.\n\nEach item is drawn into a row in one of two ways:\n\n- `renderItem` is a function from an item and its index to the row's\n  content: a Lit template, a string, or a DOM node.\n- A `<template>` child defines one row. `data-field=\"name\"` fills an element\n  with the item's `name` as text, and `data-field-href=\"url\"` writes the\n  item's `url` into `href`, the same for any attribute. A field may be a path\n  of keys, such as `author.name`.\n\nRows are your markup in the light DOM, so your stylesheet styles them.\n\n**A grid.** `columns` lays the items out that many to a line, as a grid of\nequal columns, and windows the set a line at a time, as React Aria's grid\nlayout does. Each item draws one element, a cell of the grid, and\n`estimate` is the height of a line. `min-column-width` lays out as many\ncolumns as fit the box instead, as React Aria's grid layout does with its\nsmallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns\nof a grid, by a number of pixels the list counts in each row's place.\n\n**Across.** `orientation=\"horizontal\"` lays the items out along a line and\nscrolls it sideways, as a strip of cards does, windowed the same way:\n`estimate` is then an item's width, and the box needs an inline size.\n\n**Sections.** `section-field` names the field of each item that says which\nsection it is in, and the list draws a header before each section's items,\nas React Aria's list box sections do. Each section is an element with the\n`group` role, named by its header, which is its first child and carries\n`data-header`, so your stylesheet styles it, such as with `position:\nsticky`. A section starts wherever the field changes, so give the items in\norder. The window counts the headers with the items, and a section the\nwindow starts inside is drawn with its header. `renderSection` draws a\nheader of your own.\n\n**Keyboard.** The list is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line. |\n| Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |\n| Home, End | Moves to the first or the last item. |\n| Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen. |\n| A letter or a word | Moves to the next item whose text starts with what you typed. |\n| Escape | Lets go of every chosen item, in a list with `selection-mode`. |\n| Alt with Up or Down | In a `reorderable` list, moves the item a place. Alt with Home or End moves it to either end. |\n| Tab | Moves into the focused row's own links and buttons, then out of the list. |\n\nAn item that is not drawn is scrolled into view and focused, so a keyboard\nreaches the whole set. The row a reader last focused keeps the tab stop and\nstays drawn when it scrolls away, so Tab and Shift+Tab come back to it, as\nReact Aria's collections do. In a list nobody has focused yet, the stop\nmoves to the first row on screen. Typing matches each item's\n`text-field`, which is the first `data-field` of the row template by default,\nor the item itself when it is a string or a number.\n\nEach row says its place in the whole set with `aria-posinset` and\n`aria-setsize`, so a screen reader says \"4,000 of 10,000\". The row holding\nfocus stays drawn when it scrolls out.\n\n**Selecting.** `selection-mode` makes the list a list box a reader chooses\nfrom: `single` selects one item and `multiple` any number. Space or a press\nselects an item, Shift with Space, an arrow, Home, End or a press takes in\nthe items from the last one chosen, and Control or Command with A selects\nthem all, in `multiple`. Escape lets go of every chosen item, and keeps the\nkey from the dialog or menu around the list while there was something to\nlet go of. `value` holds the chosen items' keys, separated by commas, in\nthe order of the set: `key-field` names each item's key, and a string or a\nnumber item is its own key. A change asks with `helix-before-change` and\ntells with `change`. Each row is an `option` marked `aria-selected`, so a\nrow's own links and buttons are not reached there: keep those to a list\nwithout `selection-mode`.\n\n`selection-behavior=\"replace\"` selects the item pressed alone, as a file\nlist does, and the arrow keys carry the selection with them. Control or\nCommand with a press or with Space adds or takes out one item, and with an\narrow moves without selecting.\n\n**Disabled items.** `disabled-keys` names items by their keys, separated by\ncommas. Their rows carry `aria-disabled`, the keys and typing pass over\nthem, and a press, Space, or Control with A does not select them.\n\n**Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,\na disabled one `data-disabled`, as React Aria's rows do, and the row the\nkeys are on, which holds the tab stop, `data-active`, whether or not the\nlist has focus.\n\n**Loading more.** `helix-range-change` fires as the items on screen change,\nand `range` holds them. `helix-load-more` fires once a reader is within one\nscreen of the end, once for each length of the set: add to `items` and it can\nfire again. While you fetch, set `loading`: the list is busy, and a row after\nthe last item says \"Loading more\" (`loading-label`, or your own content in\nthe `loading` slot). `scrollToIndex` takes a reader to an item.\n\n**Moving items** is a separate import, `@fusion.dev/helix/virtual-list/reorder`,\nas React Aria's drag and drop is. With it imported, `reorderable` lets a\nreader move items in a list of one column without sections:\n\n- Alt with Up or Down moves the item the keys are on a place, and Alt with\n  Home or End to either end, as the APG's rearrangeable listbox does.\n- A pointer drags a whole row. A press that does not travel is still a\n  press. The list scrolls near an edge, and an item far down a long set is\n  reached by dragging to the edge.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n  `helix-reorder`, whose `keys` hold every item's key in the new order.\n  **You move the items**: set `items` to them in that order. The keys stay\n  on the item that moved.\n- Each move is said in a region screen readers announce. The row being\n  dragged carries `data-dragging`, and the row a drop would land beside\n  `data-drop-before` or `data-drop-after`.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown when there are no items and none are loading, such as\n\"No messages yet\" and a link to write one. Without either, an empty list\nshows nothing, since a list whose items have not arrived yet has not said\nit has none.\n\nThe list takes the `empty` state while it has read its items and holds none,\nand the `loading` state while `loading` is set, so your stylesheet can\nchange the box around it for either. A list with no name is reported once\nin a development build. Name it with `label` or `aria-label`.\n\n**Row height.** Rows are placed by `estimate` until they are drawn. Then the\nlist reads the drawn rows' height once and places every row by it, so a\nwrong estimate still reaches the last item. Set `measured` for rows of\ndifferent heights. Once the list draws rows of different heights, such as\nrows that wrap on a narrow screen, it places each row by its own height\nwhether `measured` is set or not.\n\nThe list follows its source. A new `items` array, an edit to the script's\ntext, or a script replaced under the same id draws the new rows. A row that\nstays in view keeps its element as the list scrolls.\n\nThe viewport scrolls on this tier. It carries `data-scroller`, and `core`\nships `[data-scroller] { overflow: auto }` into every shadow root, so\n`scrollTop` works with no stylesheet. You still need to set a block size.",
+          "description": "The items arrive as data, in one of two ways:\n\n- `items` takes an array. A framework sets it as a property, and React\n  hydration keeps it.\n- `for` names a `<script type=\"application/json\">` that holds an array, which\n  a server sends as markup.\n\nEach item is drawn into a row in one of two ways:\n\n- `renderItem` is a function from an item and its index to the row's\n  content: a Lit template, a string, or a DOM node.\n- A `<template>` child defines one row. `data-field=\"name\"` fills an element\n  with the item's `name` as text, and `data-field-href=\"url\"` writes the\n  item's `url` into `href`, the same for any attribute. A field may be a path\n  of keys, such as `author.name`.\n\nRows are your markup in the light DOM, so your stylesheet styles them.\n\n**A grid.** `columns` lays the items out that many to a line, as a grid of\nequal columns, and windows the set a line at a time, as React Aria's grid\nlayout does. Each item draws one element, a cell of the grid, and\n`estimate` is the height of a line. `min-column-width` lays out as many\ncolumns as fit the box instead, as React Aria's grid layout does with its\nsmallest item size, and follows the box as it resizes. `gap` spaces the rows, and the columns\nof a grid, by a number of pixels the list counts in each row's place.\n\nA grid without `selection-mode` is a grid to a reader, as the APG's grid\nand React Aria's grid list are: the box is a `grid` with `aria-rowcount`\nand `aria-colcount`, each line drawn is a `row` with `aria-rowindex`, and\neach item a `gridcell` with `aria-colindex`. Each line is a slot of the\nlist's own, so your rows stay its children: give an item one element. With\n`selection-mode` it stays a list box of options, as React Aria's list box\nin a grid layout does.\n\n**A waterfall.** `layout=\"waterfall\"` puts each item, in the order of the\nset, under the column that ends highest so far, the leftmost of a tie, as a\nwall of photos of different heights is, and as React Aria's waterfall\nlayout and TanStack Virtual's lanes do. `columns`, or `min-column-width`,\nsays how many columns. Every item is measured, at the width of its column,\nand placed at its column and its height, so items of any height leave no\nholes. The list draws the items that reach into the box, and the item\nholding focus. A reader hears a list, or a list box, in the order of the\nset, which is also the order Tab and a screen reader's own keys take.\n\nIn a waterfall, Down and Up move along the column to the next or the\nprevious item in it, Right and Left move to the next or the previous\ncolumn, to the item there that sits beside this one the most, or the\nnearest above where none does, and Page Down and Page Up move a box down\nor up the column. Home and End go to the first and the last item of the\nset, and Shift with a key takes in the items between in the order of the\nset.\n\n**Across.** `orientation=\"horizontal\"` lays the items out along a line and\nscrolls it sideways, as a strip of cards does, windowed the same way:\n`estimate` is then an item's width, and the box needs an inline size.\n\n**Sections.** `section-field` names the field of each item that says which\nsection it is in, and the list draws a header before each section's items,\nas React Aria's list box sections do. Each section is an element with the\n`group` role, named by its header, which is its first child and carries\n`data-header`, so your stylesheet styles it, such as with `position:\nsticky`. A section starts wherever the field changes, so give the items in\norder. The window counts the headers with the items, and a section the\nwindow starts inside is drawn with its header. `renderSection` draws a\nheader of your own.\n\n**Keyboard.** The list is one tab stop.\n\n| Key | What it does |\n|---|---|\n| Down, Up | Moves to the next or the previous item, or in a grid to the item in the same column on the next or the previous line, or in a waterfall to the next or the previous item down the same column. |\n| Right, Left | In a grid, moves to the next or the previous item along the line, the other way round on a right-to-left page. In a waterfall, moves to the item beside in the next or the previous column. In a list that runs across, moves to the next or the previous item the same way, and Down and Up are left to the row. |\n| Home, End | Moves to the first or the last item. In a grid without `selection-mode`, to the first or the last item of the line. |\n| Control or Command with Home or End | In a grid without `selection-mode`, moves to the first or the last item. |\n| Page Down, Page Up | Moves by the number of items, or of lines in a grid, on screen, or in a waterfall a box down or up the column. |\n| A letter or a word | Moves to the next item whose text starts with what you typed. |\n| Escape | Lets go of every chosen item, in a list with `selection-mode`. |\n| Alt with Up or Down | In a `reorderable` list, moves the item a place. Alt with Home or End moves it to either end. |\n| Tab | Moves into the focused row's own links and buttons, then out of the list. |\n\nAn item that is not drawn is scrolled into view and focused, so a keyboard\nreaches the whole set. The row a reader last focused keeps the tab stop and\nstays drawn when it scrolls away, so Tab and Shift+Tab come back to it, as\nReact Aria's collections do. In a list nobody has focused yet, the stop\nmoves to the first row on screen. Typing matches each item's\n`text-field`, which is the first `data-field` of the row template by default,\nor the item itself when it is a string or a number.\n\nEach row says its place in the whole set with `aria-posinset` and\n`aria-setsize`, so a screen reader says \"4,000 of 10,000\", and each cell of\na grid its line and its column. The row holding focus stays drawn when it\nscrolls out.\n\n**Selecting.** `selection-mode` makes the list a list box a reader chooses\nfrom: `single` selects one item and `multiple` any number. Space or a press\nselects an item, Shift with Space, an arrow, Home, End or a press takes in\nthe items from the last one chosen, and Control or Command with A selects\nthem all, in `multiple`. Escape lets go of every chosen item, and keeps the\nkey from the dialog or menu around the list while there was something to\nlet go of. `value` holds the chosen items' keys, separated by commas, in\nthe order of the set: `key-field` names each item's key, and a string or a\nnumber item is its own key. A change asks with `helix-before-change` and\ntells with `change`. Each row is an `option` marked `aria-selected`, so a\nrow's own links and buttons are not reached there: keep those to a list\nwithout `selection-mode`.\n\n`selection-behavior=\"replace\"` selects the item pressed alone, as a file\nlist does, and the arrow keys carry the selection with them. Control or\nCommand with a press or with Space adds or takes out one item, and with an\narrow moves without selecting.\n\n**Disabled items.** `disabled-keys` names items by their keys, separated by\ncommas. Their rows carry `aria-disabled`, the keys and typing pass over\nthem, and a press, Space, or Control with A does not select them.\n\n**Rows a stylesheet can tell apart.** A chosen row carries `data-selected`,\na disabled one `data-disabled`, as React Aria's rows do, and the row the\nkeys are on, which holds the tab stop, `data-active`, whether or not the\nlist has focus.\n\n**Loading more.** `helix-range-change` fires as the items on screen change,\nand `range` holds them. `helix-load-more` fires once a reader is within one\nscreen of the end, once for each length of the set: add to `items` and it can\nfire again. While you fetch, set `loading`: the list is busy, and a row after\nthe last item says \"Loading more\" (`loading-label`, or your own content in\nthe `loading` slot). `scrollToIndex` takes a reader to an item.\n\n**Moving items** is a separate import, `@fusion.dev/helix/virtual-list/reorder`,\nas React Aria's drag and drop is. With it imported, `reorderable` lets a\nreader move items in a list of one column without sections:\n\n- Alt with Up or Down moves the item the keys are on a place, and Alt with\n  Home or End to either end, as the APG's rearrangeable listbox does.\n- A pointer drags a whole row. A press that does not travel is still a\n  press. The list scrolls near an edge, and an item far down a long set is\n  reached by dragging to the edge.\n- A drop sends `helix-before-reorder`, which you can refuse, and then\n  `helix-reorder`, whose `keys` hold every item's key in the new order.\n  **You move the items**: set `items` to them in that order. The keys stay\n  on the item that moved.\n- Each move is said in a region screen readers announce. The row being\n  dragged carries `data-dragging`, and the row a drop would land beside\n  `data-drop-before` or `data-drop-after`.\n\n**An empty list.** Set `empty-label`, or put your own content in the `empty`\nslot, for a row shown when there are no items and none are loading, such as\n\"No messages yet\" and a link to write one. Without either, an empty list\nshows nothing, since a list whose items have not arrived yet has not said\nit has none.\n\nThe list takes the `empty` state while it has read its items and holds none,\nand the `loading` state while `loading` is set, so your stylesheet can\nchange the box around it for either. A list with no name is reported once\nin a development build. Name it with `label` or `aria-label`.\n\n**Row height.** Rows are placed by `estimate` until they are drawn. Then the\nlist reads the drawn rows' height once and places every row by it, so a\nwrong estimate still reaches the last item. Set `measured` for rows of\ndifferent heights. Once the list draws rows of different heights, such as\nrows that wrap on a narrow screen, it places each row by its own height\nwhether `measured` is set or not.\n\nThe list follows its source. A new `items` array, an edit to the script's\ntext, or a script replaced under the same id draws the new rows. A row that\nstays in view keeps its element as the list scrolls.\n\nThe viewport scrolls on this tier. It carries `data-scroller`, and `core`\nships `[data-scroller] { overflow: auto }` into every shadow root, so\n`scrollTop` works with no stylesheet. You still need to set a block size.",
           "name": "HelixHeadlessVirtualList",
           "cssParts": [
             {
@@ -200220,6 +200234,16 @@
               "description": "The list's name, read by screen readers, because only some of its rows\nare rendered at a time.\n\nAn `aria-label` or `aria-labelledby` on the host names the list too, and\nwins over this.",
               "attribute": "label"
             },
+            {
+              "kind": "field",
+              "name": "layout",
+              "type": {
+                "text": "'grid' | 'waterfall'"
+              },
+              "default": "'grid'",
+              "description": "How items of more than one column are laid out. `grid`, the default, puts\nthem in lines of equal columns. `waterfall` puts each item, in the order\nof the set, under the column that ends highest, as a wall of photos of\ndifferent heights is: `columns`, or `min-column-width`, says how many\ncolumns. Rows of a waterfall are measured, and Up and Down move along a\ncolumn.",
+              "attribute": "layout"
+            },
             {
               "kind": "field",
               "name": "loading",
@@ -200270,7 +200294,7 @@
                 "text": "'horizontal' | 'vertical'"
               },
               "default": "'vertical'",
-              "description": "Which way the list runs. `horizontal` lays the items out along a line\nand scrolls it sideways: Left and Right move between items, the other\nway round on a right-to-left page, and `estimate` is an item's width. A\ngrid always runs down.",
+              "description": "Which way the list runs. `horizontal` lays the items out along a line\nand scrolls it sideways: Left and Right move between items, the other\nway round on a right-to-left page, and `estimate` is an item's width. A\ngrid and a waterfall always run down.",
               "attribute": "orientation"
             },
             {
@@ -200296,7 +200320,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections.",
+              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections or a\nwaterfall.",
               "attribute": "reorderable"
             },
             {
@@ -200481,7 +200505,7 @@
               "name": "virtualize",
               "privacy": "private",
               "readonly": true,
-              "default": "new VirtualizeController(this, { container: () => this.partNamed('viewport'), count: () => this.sections ? this.data.length + this.sections.starts.length : Math.ceil(this.data.length / this.across), estimate: () => this.estimate, gap: () => this.space, horizontal: () => this.horizontal, measured: () => this.measured, rows: () => this.lines(), })"
+              "default": "new VirtualizeController(this, { container: () => this.partNamed('viewport'), count: () => this.sections ? this.data.length + this.sections.starts.length : Math.ceil(this.data.length / this.across), estimate: () => this.estimate, gap: () => this.space, horizontal: () => this.horizontal, measured: () => this.measured, rows: () => this.lines(), waterfall: () => { this.lanes.lanes = this.columnCount return this.waterfall ? this.lanes : undefined }, })"
             },
             {
               "kind": "field",
@@ -200502,6 +200526,34 @@
               "description": "The gap in pixels, none where it is not a positive number.",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "lanes",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Waterfall()",
+              "description": "Where each item of a waterfall stands, which the controller places."
+            },
+            {
+              "kind": "field",
+              "name": "waterfall",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether the items are laid out as a waterfall, each down a column.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "lined",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "description": "Whether the list is a grid a reader reads, and not a list box: lines of\ncolumns with no `selection-mode`, which are `grid`, `row` and `gridcell`\nto a reader, as the APG's grid and React Aria's grid list are.",
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "across",
@@ -200509,7 +200561,17 @@
                 "text": "number"
               },
               "privacy": "private",
-              "description": "How many items a line holds: as many as fit at `min-column-width` where\nit is set and the box has a width, and `columns` otherwise, at least one.",
+              "description": "How many items a line holds, which a waterfall draws one at a time: its\ncolumns are not lines.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "columnCount",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "How many columns there are: as many as fit at `min-column-width` where\nit is set and the box has a width, and `columns` otherwise, at least one.",
               "readonly": true
             },
             {
@@ -200535,11 +200597,11 @@
               "kind": "field",
               "name": "measuredAcross",
               "type": {
-                "text": "number"
+                "text": "number | string"
               },
               "privacy": "private",
               "default": "1",
-              "description": "The items to a line the measurements were taken at."
+              "description": "The items to a line the measurements were taken at, or a waterfall's columns and width."
             },
             {
               "kind": "method",
@@ -200550,7 +200612,7 @@
                   "text": "void"
                 }
               },
-              "description": "Watches the box for its width while `min-column-width` asks for it."
+              "description": "Watches the box for its width while `min-column-width` asks for it, or a\nwaterfall, whose items are as tall as their width makes them."
             },
             {
               "kind": "method",
@@ -200597,7 +200659,7 @@
                 "text": "boolean"
               },
               "privacy": "private",
-              "description": "Whether the list runs across, which a grid never does.",
+              "description": "Whether the list runs across, which a grid and a waterfall never do.",
               "readonly": true
             },
             {
@@ -200861,6 +200923,43 @@
               "readonly": true,
               "description": "Moves between items with the keys `stepIndex` names.\n\nOnly from a row itself. A key pressed in a row's own link, button or field\nis that control's, so a field in a row keeps its arrows."
             },
+            {
+              "kind": "method",
+              "name": "inWaterfall",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "at",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "count",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "forward",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Where a key goes in a waterfall, through the columns `Waterfall.step`\nreads: along the column for Down, Up, Page Down and Page Up, and to the\nitem beside in the next column or the one before for the keys along the\nline, the other way round on a right-to-left page. Past a disabled item,\non the same way."
+            },
             {
               "kind": "method",
               "name": "keyAt",
@@ -201052,7 +201151,7 @@
                   }
                 }
               ],
-              "description": "Writes a row's role, and whether it is chosen in a list that selects:\n`option` with `aria-selected` there, and `listitem` otherwise, and\n`aria-disabled` on an item `disabled-keys` names. Every pass,\nsince a choice changes no row's content.\n\n`data-selected` and `data-disabled` say the same to a stylesheet, as\nReact Aria's rows do, so one rule reads the same in either kind of list."
+              "description": "Writes a row's role, and whether it is chosen in a list that selects:\n`option` with `aria-selected` there, `gridcell` in a grid, and `listitem`\notherwise, and `aria-disabled` on an item `disabled-keys` names. Every\npass, since a choice changes no row's content.\n\nIts place too: `aria-posinset` and `aria-setsize` in a list, and in a\ngrid its column, with the line's `row` given by the slot it is drawn in.\n\n`data-selected` and `data-disabled` say the same to a stylesheet, as\nReact Aria's rows do, so one rule reads the same in either kind of list."
             },
             {
               "kind": "method",
@@ -201077,7 +201176,7 @@
                   }
                 }
               ],
-              "description": "Writes a row's place in the set."
+              "description": "Writes which item a row drew, for the controller to measure it against:\nthe real index, the same one `aria-posinset` carries one higher.\n\n`mark` writes the place a reader hears from it, the real index and the\nreal total, not the position in the window. A reader arrowing through\nthis should hear where they are in the set."
             },
             {
               "kind": "method",
@@ -201149,6 +201248,26 @@
               "privacy": "private",
               "description": "The sections the rows were last placed in."
             },
+            {
+              "kind": "field",
+              "name": "placedWaterfall",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the rows were last placed in a waterfall."
+            },
+            {
+              "kind": "field",
+              "name": "drawnLines",
+              "type": {
+                "text": "number[]"
+              },
+              "privacy": "private",
+              "default": "[]",
+              "description": "The lines of a grid drawn on the last pass, each a `row` the render draws a slot in."
+            },
             {
               "kind": "field",
               "name": "headedBy",
@@ -201676,6 +201795,15 @@
               "description": "The list's name, read by screen readers, because only some of its rows\nare rendered at a time.\n\nAn `aria-label` or `aria-labelledby` on the host names the list too, and\nwins over this.",
               "fieldName": "label"
             },
+            {
+              "name": "layout",
+              "type": {
+                "text": "'grid' | 'waterfall'"
+              },
+              "default": "'grid'",
+              "description": "How items of more than one column are laid out. `grid`, the default, puts\nthem in lines of equal columns. `waterfall` puts each item, in the order\nof the set, under the column that ends highest, as a wall of photos of\ndifferent heights is: `columns`, or `min-column-width`, says how many\ncolumns. Rows of a waterfall are measured, and Up and Down move along a\ncolumn.",
+              "fieldName": "layout"
+            },
             {
               "name": "loading",
               "type": {
@@ -201718,7 +201846,7 @@
                 "text": "'horizontal' | 'vertical'"
               },
               "default": "'vertical'",
-              "description": "Which way the list runs. `horizontal` lays the items out along a line\nand scrolls it sideways: Left and Right move between items, the other\nway round on a right-to-left page, and `estimate` is an item's width. A\ngrid always runs down.",
+              "description": "Which way the list runs. `horizontal` lays the items out along a line\nand scrolls it sideways: Left and Right move between items, the other\nway round on a right-to-left page, and `estimate` is an item's width. A\ngrid and a waterfall always run down.",
               "fieldName": "orientation"
             },
             {
@@ -201727,7 +201855,7 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections.",
+              "description": "Lets a reader move items, once `@fusion.dev/helix/virtual-list/reorder`\n(or `@fusion.dev/helix-headless/virtual-list/reorder`) is imported: Alt\nwith an arrow moves the row the keys are on, and a pointer drags a row.\nThe list moves no item itself: you move your `items` on `helix-reorder`.\nWithout that import it does nothing, so a list that never moves items\ncarries none of the code. A list of one column, without sections or a\nwaterfall.",
               "fieldName": "reorderable"
             },
             {
@@ -202020,6 +202148,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix-headless",
-    "version": "0.182.2"
+    "version": "0.183.0"
   }
 }

package/dist/bar-chart/root/bar-chart-root.d.ts

@@ -80,6 +80,7 @@ declare const HelixHeadlessBarChart_base: typeof HelixElement & (new (...args: a
  * @csspart bar - One column. Under `stacked`, one segment of a category's column.
  * @csspart bar-end - The bar at a column's far end, the end away from zero, which is the end to round. A column standing alone is its own far end. Under `stacked`, the last positive segment above zero and the last negative one below it. Its `data-end` is `positive` or `negative`. A blank or a zero is never the end. Set together with `bar`.
  * @csspart bar-end-negative - A far end below zero, whose far end is its bottom, or its inline start when the bars run across. Set together with `bar-end`.
+ * @csspart bar-negative - A bar below zero, standing alone or any segment of a stack below it, whose base is its top, or its inline end when the bars run across. Set together with `bar`.
  * @csspart bar-wash-end - The far stop of a bar's gradient, where one is used.
  * @csspart bar-wash-start - The stop of a bar's gradient at its base.
  * @csspart baseline - The line the columns stand on.

package/dist/bar-chart/root/bar-chart-root.js

@@ -120,6 +120,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
                 ? `--chart-series: var(--bar-chart-tone-${ink}, var(--chart-series-${seriesIndex(tone)})); --chart-bar-wash: url(#helix-bar-wash-tone-${ink})`
                 : `--chart-series: var(--chart-series-${seriesIndex(tone)}); --chart-bar-wash: url(#helix-bar-wash-${seriesIndex(tone)})`;
             const below = end === 'negative';
+            const sinks = value < (from ?? 0);
             return sideways
                 ? svg `<rect
             data-end=${end ?? nothing}
@@ -127,7 +128,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             data-tone=${ink ?? nothing}
             height=${thickness}
             style=${paint}
-            part="bar${end ? ' bar-end' : ''}${below ? ' bar-end-negative' : ''}"
+            part="bar${sinks ? ' bar-negative' : ''}${end ? ' bar-end' : ''}${below ? ' bar-end-negative' : ''}"
             width=${size}
             x=${along}
             y=${across}
@@ -138,7 +139,7 @@ let HelixHeadlessBarChart = class HelixHeadlessBarChart extends MixinChartStatus
             data-tone=${ink ?? nothing}
             height=${size}
             style=${paint}
-            part="bar${end ? ' bar-end' : ''}${below ? ' bar-end-negative' : ''}"
+            part="bar${sinks ? ' bar-negative' : ''}${end ? ' bar-end' : ''}${below ? ' bar-end-negative' : ''}"
             width=${thickness}
             x=${across}
             y=${along}

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

@@ -333,7 +333,15 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
     protected readonly aria: AriaForwardController;
     private observer;
     private announced;
-    /** Where a range taken in with Shift starts: the cell last pressed, or none. */
+    /**
+     * Where a range taken in with Shift starts: the row of the table whose cell
+     * was last pressed, or none.
+     *
+     * **The row, and not the cell's place among those drawn.** A narrow strip
+     * draws the newest whole columns, so a resize that drops or adds a column
+     * moves every cell's place, and an anchor kept as a place started the next
+     * range on another day.
+     */
     private anchor;
     /** The cell the keys rested on before the key now being handled moved them. */
     private left;
@@ -436,6 +444,8 @@ export declare class HelixHeadlessHeatmap extends HelixHeadlessHeatmap_base {
      * keep the oldest is answering a question nobody asked.
      */
     private get drawn();
+    /** How many of the oldest rows a narrow strip leaves undrawn. */
+    private get dropped();
     /**
      * The number of cells drawn, which the keys walk.
      *

package/dist/heatmap/root/heatmap-root.js

@@ -54,8 +54,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
                 this.stretch(at);
                 return;
             }
-            const keys = this.keysOf(this.drawn);
-            const added = rangeAdd(commaList(this.value), keys, this.anchor < 0 ? at : this.anchor, at);
+            const keys = this.keysOf(this.points);
+            const from = keys[this.anchor] === undefined ? -1 : this.anchor;
+            const added = rangeAdd(commaList(this.value), keys, from, this.dropped + at);
             if (added) {
                 this.choose(added.join(', '));
             }
@@ -125,21 +126,25 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         if (!mode || key === undefined || key === '') {
             return;
         }
-        this.anchor = index;
+        this.anchor = this.dropped + index;
         this.base = undefined;
         this.choose(pressedValue(mode, this.value, key));
     }
     stretch(to) {
-        const keys = this.keysOf(this.drawn);
-        if (this.anchor < 0) {
-            this.anchor = this.left < 0 ? to : this.left;
+        const all = this.keysOf(this.points);
+        const dropped = this.dropped;
+        if (all[this.anchor] === undefined) {
+            this.anchor = dropped + (this.left < 0 ? to : this.left);
         }
         if (this.base === undefined || this.value !== this.shaped) {
-            const corner = keys[this.anchor];
+            const corner = all[this.anchor];
             this.base = commaList(this.value).filter((one) => one !== corner);
         }
-        const taken = rectangleOf(keys.length, this.rowCount, this.anchor, to).map((at) => keys[at] ?? '');
-        const all = this.keysOf(this.points);
+        const rows = this.rowCount;
+        const shift = (rows - (dropped % rows)) % rows;
+        const taken = rectangleOf(all.length + shift, rows, this.anchor + shift, dropped + to + shift)
+            .filter((at) => at >= shift)
+            .map((at) => all[at - shift] ?? '');
         this.choose(inSequence([...this.base, ...taken].filter(Boolean), all).join(', '));
         this.shaped = this.value;
     }
@@ -182,6 +187,9 @@ let HelixHeadlessHeatmap = class HelixHeadlessHeatmap extends MixinChartStatus(M
         const all = this.points;
         return all.slice(Math.max(0, all.length - this.room));
     }
+    get dropped() {
+        return Math.max(0, this.points.length - this.room);
+    }
     get readings() {
         return this.drawn.length;
     }

package/dist/virtual-list/reorder/virtual-list-reorder.js

@@ -57,7 +57,11 @@ export class VirtualListReorderController {
     }
     get enabled() {
         const host = this.host;
-        return (host.reorderable && host.columns <= 1 && host.minColumnWidth <= 0 && host.sectionField === '');
+        return (host.reorderable &&
+            host.columns <= 1 &&
+            host.minColumnWidth <= 0 &&
+            host.sectionField === '' &&
+            host.layout !== 'waterfall');
     }
     hostUpdated() {
         queueMicrotask(() => this.mark());