@fusion.dev/helix 0.182.2 → 0.183.0

package/custom-elements.json

@@ -11893,7 +11893,7 @@
             "part": "Root",
             "examples": [
               {
-                "description": "Revenue by quarter, drawn from a table whose cells show text and hold the plotted number in `data-value`, then signups by channel stacked into one column a quarter, and a net figure that goes below zero.",
+                "description": "Revenue by quarter, drawn from a table whose cells show text and hold the plotted number in `data-value`, then signups by channel stacked into one column a quarter, and a net figure that goes below zero, outlined.",
                 "slug": "preview"
               },
               {
@@ -12004,6 +12004,14 @@
                 "module": "src/bar-chart/root/bar-chart-root.ts"
               }
             },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessBarChart",
+                "module": "src/bar-chart/root/bar-chart-root.ts"
+              }
+            },
             {
               "description": "The far stop of a bar's gradient, where one is used.",
               "name": "bar-wash-end",
@@ -99214,7 +99222,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.",
               "inheritedFrom": {
                 "name": "HelixHeadlessHeatmap",
                 "module": "src/heatmap/root/heatmap-root.ts"
@@ -99498,6 +99506,20 @@
                 "module": "src/heatmap/root/heatmap-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "dropped",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "description": "How many of the oldest rows a narrow strip leaves undrawn.",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "HelixHeadlessHeatmap",
+                "module": "src/heatmap/root/heatmap-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "pageFrom",
@@ -251603,6 +251625,20 @@
                 "module": "src/virtual-list/root/virtual-list-root.ts"
               }
             },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "loading",
@@ -251669,7 +251705,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -251707,7 +251743,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -251972,7 +252008,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 }, })",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
                 "module": "src/virtual-list/root/virtual-list-root.ts"
@@ -252005,6 +252041,46 @@
                 "module": "src/virtual-list/root/virtual-list-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "lanes",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Waterfall()",
+              "description": "Where each item of a waterfall stands, which the controller places.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
+            {
+              "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,
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
+            {
+              "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,
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "across",
@@ -252012,7 +252088,21 @@
                 "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,
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
+            {
+              "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,
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -252050,11 +252140,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.",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
                 "module": "src/virtual-list/root/virtual-list-root.ts"
@@ -252069,7 +252159,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.",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
                 "module": "src/virtual-list/root/virtual-list-root.ts"
@@ -252128,7 +252218,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,
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -252468,6 +252558,47 @@
                 "module": "src/virtual-list/root/virtual-list-root.ts"
               }
             },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
             {
               "kind": "method",
               "name": "keyAt",
@@ -252707,7 +252838,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.",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
                 "module": "src/virtual-list/root/virtual-list-root.ts"
@@ -252736,7 +252867,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.",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
                 "module": "src/virtual-list/root/virtual-list-root.ts"
@@ -252828,6 +252959,34 @@
                 "module": "src/virtual-list/root/virtual-list-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "placedWaterfall",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false",
+              "description": "Whether the rows were last placed in a waterfall.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
+            {
+              "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.",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "headedBy",
@@ -253277,6 +253436,10 @@
               {
                 "description": "Files given as an array and drawn from a row template with links, with more added as you near the end.",
                 "slug": "loading-more"
+              },
+              {
+                "description": "Two thousand cards of different heights in three columns, each placed under the column that ends highest, with Down and Up moving along a column and Left and Right across.",
+                "slug": "waterfall"
               }
             ],
             "source": "helix/styled/src/virtual-list"
@@ -253414,6 +253577,19 @@
                 "module": "src/virtual-list/root/virtual-list-root.ts"
               }
             },
+            {
+              "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",
+              "inheritedFrom": {
+                "name": "HelixHeadlessVirtualList",
+                "module": "src/virtual-list/root/virtual-list-root.ts"
+              }
+            },
             {
               "name": "loading",
               "type": {
@@ -253472,7 +253648,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -253485,7 +253661,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",
               "inheritedFrom": {
                 "name": "HelixHeadlessVirtualList",
@@ -253691,6 +253867,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.182.2"
+    "version": "0.183.0"
   }
 }

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs))}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em)}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series)}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2)}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0}[part~="bar-end-negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px)}:host([orientation="horizontal"]) [part~="bar-end-negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px)}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;align-self: start;block-size: var(--bar-chart-block-size, 12em)}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end}[part~="bar"], [part="line"] {--_bar-chart-series: var(--chart-series)}:host {--bar-chart-tone-accent: var(--helix-color-accent);--bar-chart-tone-danger: var(--helix-color-danger);--bar-chart-tone-info: var(--helix-color-info);--bar-chart-tone-muted: var(--helix-color-foreground-subtle);--bar-chart-tone-primary: var(--helix-color-primary);--bar-chart-tone-success: var(--helix-color-success);--bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate)}[part~="bar"] {transition: height var(--helix-duration-normal) var(--helix-easing-decelerate), width var(--helix-duration-normal) var(--helix-easing-decelerate), x var(--helix-duration-normal) var(--helix-easing-decelerate), y var(--helix-duration-normal) var(--helix-easing-decelerate)}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100}:host([orientation="horizontal"]) [part~="bar"] {width: 0}}[part="plot"] {cursor: crosshair}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken))}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke}:host([secondary]) {grid-template-columns: auto 1fr auto}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(in oklab, var(--bar-chart-secondary) 45%, var(--helix-color-foreground));color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle))}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"], :host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch)}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh}[part="tick"] {position: absolute}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1)}[part~="bar"][data-emphasis="outlined"], :host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"][data-emphasis="subtle"], :host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-shade: color-mix(in oklab, var(--_bar-chart-series) 60%, var(--helix-color-background))}[part~="bar"][data-material="glass"], :host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity))}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash)}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity))}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity))}@media print {:host {print-color-adjust: exact}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}`);
+export const styles = createSheet(`:host {display: grid;position: relative;gap: var(--bar-chart-gap, var(--helix-space-2xs))}[part="plot"] {position: relative;block-size: var(--bar-chart-block-size, 12em)}[part="plot"] svg {block-size: 100%;inline-size: 100%;overflow: visible}[part="baseline"] {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0 0;--_bar-chart-base: 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0;clip-path: inset(var(--_bar-chart-foot, 0) round var(--_bar-chart-corners));fill: var(--_bar-chart-series)}:host([orientation="horizontal"]) [part~="bar"] {--_bar-chart-corners: 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px) 0;--_bar-chart-base: 0 0 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2)}:host([stacked]) [part~="bar"]:not([part~="bar-end"]) {--_bar-chart-corners: 0}[part~="bar-end-negative"] {--_bar-chart-corners: 0 0 var(--bar-chart-bar-radius, 2px) var(--bar-chart-bar-radius, 2px)}:host([orientation="horizontal"]) [part~="bar-end-negative"] {--_bar-chart-corners: var(--bar-chart-bar-radius, 2px) 0 0 var(--bar-chart-bar-radius, 2px)}[part~="bar-negative"] {--_bar-chart-base: calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0 0 0}:host([orientation="horizontal"]) [part~="bar-negative"] {--_bar-chart-base: 0 calc(var(--bar-chart-bar-stroke, var(--helix-border-thick)) / 2) 0 0}[part="labels"] {display: grid;grid-auto-columns: 1fr;grid-auto-flow: column}[part="label"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-xs);overflow: hidden;text-align: center;text-overflow: ellipsis;white-space: nowrap}:host([orientation="horizontal"]) {grid-template-columns: auto 1fr}:host([orientation="horizontal"]) [part="labels"] {grid-column: 1;grid-row: 1}:host([orientation="horizontal"]) [part="plot"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"]) [part="labels"] {grid-auto-columns: auto;grid-auto-flow: row;grid-auto-rows: 1fr;align-self: start;block-size: var(--bar-chart-block-size, 12em)}:host([orientation="horizontal"]) [part="label"] {align-self: center;text-align: end}[part~="bar"], [part="line"] {--_bar-chart-series: var(--chart-series)}:host {--bar-chart-tone-accent: var(--helix-color-accent);--bar-chart-tone-danger: var(--helix-color-danger);--bar-chart-tone-info: var(--helix-color-info);--bar-chart-tone-muted: var(--helix-color-foreground-subtle);--bar-chart-tone-primary: var(--helix-color-primary);--bar-chart-tone-success: var(--helix-color-success);--bar-chart-tone-warning: var(--helix-color-warning)}[part="plot"]:has([data-active]) [part~="group"]:not([data-active]) {opacity: 0.45}[part~="group"] {transition: opacity var(--helix-duration-fast) var(--helix-easing-decelerate)}[part~="bar"] {transition: height var(--helix-duration-normal) var(--helix-easing-decelerate), width var(--helix-duration-normal) var(--helix-easing-decelerate), x var(--helix-duration-normal) var(--helix-easing-decelerate), y var(--helix-duration-normal) var(--helix-easing-decelerate)}@starting-style {:host(:not([orientation="horizontal"])) [part~="bar"] {height: 0;y: 100}:host([orientation="horizontal"]) [part~="bar"] {width: 0}}[part="plot"] {cursor: crosshair}[part="gridline"] {stroke: var(--bar-chart-gridline-color, var(--helix-color-border));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="band"] {fill: var(--bar-chart-band-color, var(--helix-color-surface-sunken))}[part="line"] {fill: none;stroke: var(--bar-chart-line-color, var(--_bar-chart-series, var(--helix-color-series-1)));stroke-linecap: round;stroke-linejoin: round;stroke-width: var(--bar-chart-line-width, var(--_chart-stroke));vector-effect: non-scaling-stroke}:host([secondary]) {grid-template-columns: auto 1fr auto}:host([secondary]) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([secondary]) [part="plot"] {grid-column: 2;grid-row: 1}[part="axis"][data-axis="secondary"] {--_bar-chart-axis-ink: color-mix(in oklab, var(--bar-chart-secondary) 45%, var(--helix-color-foreground));color: var(--_bar-chart-axis-ink, var(--helix-color-foreground-subtle))}:host([secondary]) [part="axis"][data-axis="secondary"] {grid-column: 3;grid-row: 1}:host([secondary]) [part="labels"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) {grid-template-columns: auto 1fr;grid-template-rows: auto 1fr auto}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="secondary"] {grid-column: 2;grid-row: 1}:host([orientation="horizontal"][secondary]) [part="labels"] {grid-column: 1;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="plot"] {grid-column: 2;grid-row: 2}:host([orientation="horizontal"][secondary]) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 3}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) {grid-template-columns: auto 1fr}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="axis"][data-axis="primary"] {grid-column: 1;grid-row: 1}:host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="plot"], :host([value-axis]:not([secondary]):not([orientation="horizontal"])) [part="labels"] {grid-column: 2}:host([value-axis][orientation="horizontal"]:not([secondary])) {grid-template-rows: 1fr auto}:host([value-axis][orientation="horizontal"]:not([secondary])) [part="axis"][data-axis="primary"] {grid-column: 2;grid-row: 2}[part="axis"] {color: var(--helix-color-foreground-subtle);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;pointer-events: none;position: relative}:host(:not([orientation="horizontal"])) [part="axis"] {inline-size: var(--bar-chart-axis, 3ch)}:host([orientation="horizontal"]) [part="axis"] {block-size: 1lh}[part="tick"] {position: absolute}:host(:not([orientation="horizontal"])) [part="tick"] {inset-inline-end: 0;translate: 0 -50%}:host([orientation="horizontal"]) [part="tick"] {translate: -50% 0}:host([orientation="horizontal"]:dir(rtl)) [part="tick"] {translate: 50% 0}:host(:not([orientation="horizontal"])) [part="axis"][data-axis="secondary"] [part="tick"] {inset-inline-end: auto;inset-inline-start: 0}[part~="bar"] {fill-opacity: calc(var(--_bar-chart-area, 1) * var(--_bar-chart-through, 1));stroke-opacity: var(--_bar-chart-through, 1)}[part~="bar"][data-emphasis="outlined"], :host([emphasis="outlined"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-foot: var(--_bar-chart-base);fill: var(--_bar-chart-shade);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"][data-emphasis="subtle"], :host([emphasis="subtle"]) [part~="bar"]:not([data-emphasis]) {--_bar-chart-area: 0.2;--_bar-chart-foot: var(--_bar-chart-base);stroke: var(--_bar-chart-series);stroke-width: var(--bar-chart-bar-stroke, var(--helix-border-thick));vector-effect: non-scaling-stroke}[part~="bar"] {--_bar-chart-shade: color-mix(in oklab, var(--_bar-chart-series) 60%, var(--helix-color-background))}[part~="bar"][data-material="glass"], :host([material="glass"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) [part~="bar"]:not([data-material]) {--_bar-chart-through: calc(0.88 * var(--helix-material-opacity))}:host([wash="gradient"]) [part~="bar"] {fill: var(--chart-bar-wash)}[part="bar-wash-start"] {stop-color: var(--chart-series);stop-opacity: calc(1 * var(--helix-material-opacity))}[part="bar-wash-end"] {stop-color: var(--chart-series);stop-opacity: calc(0.35 * var(--helix-material-opacity))}@media print {:host {print-color-adjust: exact}}[part="summary"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}`);