@fusion.dev/helix 0.204.0 → 0.205.0

package/custom-elements.json

@@ -31653,6 +31653,14 @@
                 "name": "HelixHeadlessChatMessage",
                 "module": "src/chat/message/chat-message.ts"
               }
+            },
+            {
+              "description": "The box around the `work` slot, above the content.",
+              "name": "work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
             }
           ],
           "slots": [
@@ -31695,6 +31703,14 @@
                 "name": "HelixHeadlessChatMessage",
                 "module": "src/chat/message/chat-message.ts"
               }
+            },
+            {
+              "description": "What an agent did to arrive at the turn, such as a `Log` of its steps, above the content. A screen reader hears the turn without it.",
+              "name": "work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChatMessage",
+                "module": "src/chat/message/chat-message.ts"
+              }
             }
           ],
           "members": [
@@ -32850,6 +32866,14 @@
                 "module": "src/chat/root/chat-root.ts"
               }
             },
+            {
+              "description": "The box around a turn's `work`, for a turn from `turns`, which has none.",
+              "name": "message-work",
+              "inheritedFrom": {
+                "name": "HelixHeadlessChat",
+                "module": "src/chat/root/chat-root.ts"
+              }
+            },
             {
               "description": "The control shown while the user is scrolled away from the bottom.",
               "name": "resume",
@@ -34917,6 +34941,10 @@
                 "min": 420,
                 "slug": "reply-with-steps"
               },
+              {
+                "description": "An agent's answer with the work it did to reach it, kept as a log above the reply.",
+                "slug": "reply-with-work"
+              },
               {
                 "description": "A drawer from the trailing edge, with the conversation filling the panel.",
                 "min": 420,
@@ -124400,6 +124428,14 @@
                 "module": "src/log/line/log-line.ts"
               }
             },
+            {
+              "description": "The row of a line that belongs to a step, which the styled tier insets under the step's heading where there is no number.",
+              "name": "line-grouped",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLogLine",
+                "module": "src/log/line/log-line.ts"
+              }
+            },
             {
               "description": "The row of a line `mark-lines` names on the log.",
               "name": "line-marked",
@@ -124827,6 +124863,16 @@
                 "module": "src/helix-element/helix-element.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "separation",
+              "type": {
+                "text": "'outlined' | 'plain' | undefined"
+              },
+              "description": "How the log is set apart from what is around it.\n\n- `outlined`, the resting look, is a box with an edge and a fill of its\n  own, which scrolls after `--log-max-block-size`.\n- `plain` has no edge, no fill, no inset and no height of its own: the\n  lines start where the text around them does and the log grows with\n  them. For a log inside something that already frames it, such as an\n  agent's work in a chat turn's `work` slot.\n\nBoth are writable, so a page can say which it means rather than relying\non the absence of an attribute.",
+              "attribute": "separation",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "words",
@@ -125372,6 +125418,20 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the log says nothing to a screen reader as lines arrive, steps\nfinish, or the run ends. For a log inside something that speaks for it,\nsuch as an agent's work in a chat turn, which the turn announces once it\nsettles.",
+              "attribute": "quiet",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "resumeLabel",
@@ -126922,50 +126982,15 @@
               }
             }
           ],
-          "superclass": {
-            "name": "HelixHeadlessLog",
-            "package": "@fusion.dev/helix-headless/log"
-          },
-          "summary": "Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.",
-          "helix": {
-            "category": "feedback",
-            "since": "0.200.0",
-            "status": "experimental",
-            "documentation": "https://fusion.dev/helix/components/log",
-            "tier": "styled",
-            "group": "Log",
-            "part": "Root",
-            "examples": [
-              {
-                "description": "A deployment's output with numbered lines, its steps folded, and the step that failed open.",
-                "slug": "preview"
-              },
-              {
-                "description": "A search field in the toolbar that shows only the lines holding what you type, and marks each match.",
-                "slug": "search"
-              },
-              {
-                "description": "Lines selected by pressing their numbers, a range with Shift, with the address following the selection.",
-                "slug": "selecting"
-              },
-              {
-                "description": "Each line's time into the run, numbers that link to their line, and two lines marked.",
-                "slug": "timestamps"
-              },
-              {
-                "description": "A Vercel build log read with its own format: each phase a step, timed from its lines, with its warnings drawn apart.",
-                "slug": "vercel"
-              },
-              {
-                "description": "A CI run written to the log as it arrives, with its colors, a progress bar that stays one line, and its steps read off GitHub's markers.",
-                "slug": "written"
-              }
-            ],
-            "source": "helix/styled/src/log"
-          },
-          "tagName": "helix-log",
-          "customElement": true,
           "attributes": [
+            {
+              "name": "separation",
+              "type": {
+                "text": "'outlined' | 'plain' | undefined"
+              },
+              "description": "How the log is set apart from what is around it.\n\n- `outlined`, the resting look, is a box with an edge and a fill of its\n  own, which scrolls after `--log-max-block-size`.\n- `plain` has no edge, no fill, no inset and no height of its own: the\n  lines start where the text around them does and the log grows with\n  them. For a log inside something that already frames it, such as an\n  agent's work in a chat turn's `work` slot.\n\nBoth are writable, so a page can say which it means rather than relying\non the absence of an attribute.",
+              "fieldName": "separation"
+            },
             {
               "name": "empty-text",
               "type": {
@@ -127223,6 +127248,19 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "name": "quiet",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the log says nothing to a screen reader as lines arrive, steps\nfinish, or the run ends. For a log inside something that speaks for it,\nsuch as an agent's work in a chat turn, which the turn announces once it\nsettles.",
+              "fieldName": "quiet",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "name": "resume-label",
               "type": {
@@ -127301,6 +127339,49 @@
               }
             }
           ],
+          "superclass": {
+            "name": "HelixHeadlessLog",
+            "package": "@fusion.dev/helix-headless/log"
+          },
+          "summary": "Output that arrives while you watch it, such as a CI run, a deployment, or a build, in a box that follows the newest line.",
+          "helix": {
+            "category": "feedback",
+            "since": "0.200.0",
+            "status": "experimental",
+            "documentation": "https://fusion.dev/helix/components/log",
+            "tier": "styled",
+            "group": "Log",
+            "part": "Root",
+            "examples": [
+              {
+                "description": "A deployment's output with numbered lines, its steps folded, and the step that failed open.",
+                "slug": "preview"
+              },
+              {
+                "description": "A search field in the toolbar that shows only the lines holding what you type, and marks each match.",
+                "slug": "search"
+              },
+              {
+                "description": "Lines selected by pressing their numbers, a range with Shift, with the address following the selection.",
+                "slug": "selecting"
+              },
+              {
+                "description": "Each line's time into the run, numbers that link to their line, and two lines marked.",
+                "slug": "timestamps"
+              },
+              {
+                "description": "A Vercel build log read with its own format: each phase a step, timed from its lines, with its warnings drawn apart.",
+                "slug": "vercel"
+              },
+              {
+                "description": "A CI run written to the log as it arrives, with its colors, a progress bar that stays one line, and its steps read off GitHub's markers.",
+                "slug": "written"
+              }
+            ],
+            "source": "helix/styled/src/log"
+          },
+          "tagName": "helix-log",
+          "customElement": true,
           "slots": [
             {
               "description": "The lines, as `Log.Line` and `Log.Group` elements.",
@@ -127472,6 +127553,14 @@
                 "module": "src/log/root/log-root.ts"
               }
             },
+            {
+              "description": "The row of a line drawn from data that belongs to a step.",
+              "name": "line-grouped",
+              "inheritedFrom": {
+                "name": "HelixHeadlessLog",
+                "module": "src/log/root/log-root.ts"
+              }
+            },
             {
               "description": "The row of a line drawn from data that `mark-lines` names.",
               "name": "line-marked",
@@ -196887,7 +196976,7 @@
           "name": "HelixSpatialBarChart",
           "cssProperties": [
             {
-              "description": "How tall the plot is.",
+              "description": "How tall the plot is. By default, three quarters of its width and 22em at most.",
               "name": "--spatial-bar-chart-block-size"
             },
             {
@@ -201861,7 +201950,7 @@
           "name": "HelixSpatialRibbonChart",
           "cssProperties": [
             {
-              "description": "How tall the plot is.",
+              "description": "How tall the plot is. By default, three quarters of its width and 22em at most.",
               "name": "--spatial-ribbon-chart-block-size"
             },
             {
@@ -203729,7 +203818,7 @@
           "name": "HelixSpatialScatterChart",
           "cssProperties": [
             {
-              "description": "How tall the plot is.",
+              "description": "How tall the plot is. By default, three quarters of its width and 22em at most.",
               "name": "--spatial-scatter-chart-block-size"
             }
           ],
@@ -205604,7 +205693,7 @@
           "name": "HelixSpatialSurfaceChart",
           "cssProperties": [
             {
-              "description": "How tall the plot is.",
+              "description": "How tall the plot is. By default, three quarters of its width and 22em at most.",
               "name": "--spatial-surface-chart-block-size"
             },
             {
@@ -207562,7 +207651,7 @@
           "name": "HelixSpatialTreemap",
           "cssProperties": [
             {
-              "description": "How tall the plot is.",
+              "description": "How tall the plot is. By default, three quarters of its width and 22em at most.",
               "name": "--spatial-treemap-block-size"
             },
             {
@@ -272804,6 +272893,6 @@
   ],
   "helix": {
     "package": "@fusion.dev/helix",
-    "version": "0.204.0"
+    "version": "0.205.0"
   }
 }

package/dist/chat/message/chat-message.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent))}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);
+export const styles = createSheet(`:host {display: block}:host(:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="message"] {align-items: start;display: grid;grid-template-columns: auto minmax(0, 1fr)}[part="avatar"] > slot::slotted(*) {margin-inline-end: var(--helix-space-sm)}[part="avatar"] {align-items: center;display: flex;font-size: var(--helix-text-sm);grid-column: 1;line-height: var(--helix-leading-normal);min-block-size: calc(1lh + var(--helix-space-xs) * 2)}[part="body"] {grid-column: 2}:host([author="me"]) [part="avatar"] {display: none}[part="body"] {display: grid;gap: var(--helix-space-2xs);justify-items: start;max-inline-size: min(var(--chat-message-measure, 42rem), 80%)}:host([author="me"]) [part="body"] {justify-items: end;justify-self: end}[part="actions"] {opacity: 0;pointer-events: none;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:hover) [part="actions"], :host(:focus-within) [part="actions"] {opacity: 1;pointer-events: auto}@media (hover: none) {[part="actions"] {opacity: 1;pointer-events: auto}}[part="actions"] {--helix-size-control: calc(var(--helix-size-control-sm) - var(--helix-space-2xs));--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;display: inline-flex;gap: var(--helix-space-2xs)}[part="actions"][hidden] {display: none}[part="sources"] {--helix-size-avatar: var(--helix-size-avatar-sm);--helix-size-tag: var(--helix-size-tag-sm);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);align-items: center;color: var(--helix-color-foreground-muted);display: flex;flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs);line-height: var(--helix-leading-normal)}[part="sources"][hidden] {display: none}[part="work"] {color: var(--helix-color-foreground-muted);justify-self: stretch;min-inline-size: 0}[part="work"][hidden] {display: none}[part="content"] {background-color: var(--chat-message-background-color, color-mix(in oklab, var(--helix-color-foreground) 14%, transparent));border-radius: var(--chat-message-radius, var(--helix-radii-md));color: var(--chat-message-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);padding-block: var(--chat-message-padding-block, var(--helix-space-xs));padding-inline: var(--chat-message-padding-inline, var(--helix-space-sm))}:host([separation="plain"]) [part="content"] {background-color: transparent;padding-inline: var(--helix-space-none)}:host([separation="plain"]) [part="body"] {justify-items: stretch;max-inline-size: 100%}:host([separation="plain"]) [part="content"] {inline-size: auto}:host([author="me"]) [part="content"] {background-color: var(--chat-message-background-color-me, color-mix(in oklab, var(--helix-color-primary) 28%, transparent));color: var(--chat-message-color-me, var(--chat-message-color, var(--helix-color-foreground)))}[part="meta"] {align-items: center;color: var(--chat-message-meta-color, var(--helix-color-foreground-muted));display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-2xs)}:host([author="me"]) [part="meta"] {justify-content: flex-end}[part="content"] {inline-size: fit-content;max-inline-size: 100%;min-inline-size: 0;overflow-x: auto}[part="content"] slot[name="indicator"] {display: none}:host([state="streaming"]) [part="content"][data-empty] slot[name="indicator"] {display: block}slot[name="indicator"]::slotted(*) {background-color: var(--chat-indicator-background-color, var(--helix-color-surface-sunken));border-radius: var(--helix-radii-full);font-size: var(--helix-text-xs);padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);--orb-size: var(--helix-size-icon-sm)}slot[name="indicator"]::slotted(helix-orb) {background-color: transparent;padding: var(--helix-space-none)}:host([state="failed"]) [part="meta"] {color: var(--helix-color-danger)}[part="state"] {align-items: center;display: inline-flex;font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs)}[part="mark"] {block-size: var(--helix-size-icon-tight);flex: 0 0 auto;inline-size: var(--helix-size-icon-tight)}:host([state="sending"]) [part="content"] {opacity: 0.6}[part="retry"] {background: none;border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);cursor: pointer;font: inherit;font-weight: var(--helix-weight-medium);margin-inline-end: calc(var(--helix-space-2xs) * -1);min-block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-2xs);text-decoration: underline;text-underline-offset: 0.2em}[part="retry"]:hover {background-color: light-dark(color-mix(in oklab, var(--helix-color-foreground) 8%, transparent), color-mix(in oklab, var(--helix-color-foreground) 12%, transparent))}[part="retry"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}@media print {[part="retry"] {display: none}[part="actions"] {display: none}[part="content"] slot[name="indicator"] {display: none}}`);

package/dist/log/group/log-group.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;color: var(--helix-color-foreground);column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md));white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--helix-size-icon-sm);margin-inline-end: calc(var(--helix-space-md) - var(--helix-space-xs));margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm));rotate: -90deg;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: auto}[part="content"][hidden] {display: none}@media print {:host {print-color-adjust: economy}}`);
+export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;color: var(--helix-color-foreground);column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md));white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--helix-size-icon-sm);margin-inline-end: calc(var(--helix-space-md) - var(--helix-space-xs));margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm));rotate: -90deg;transition: rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-subtle);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}[part="content"][hidden] {display: none}::slotted(helix-log-group) {margin-inline-start: calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}@media print {:host {print-color-adjust: economy}}`);

package/dist/log/line/log-line.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);
+export const styles = createSheet(`:host {display: block}[part~="line"] {column-gap: var(--helix-space-md);display: flex;inline-size: var(--_log-line-size, max-content);min-inline-size: 100%;padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part~="line-grouped"]:not(:has(> [part="number"])) {padding-inline-start: calc(var(--log-padding-inline, var(--helix-space-md)) + max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md))}[part~="line"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 4%, transparent)}:where(button[part="number"]) {all: unset;box-sizing: border-box}[part="number"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;min-inline-size: max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch));text-align: end;text-decoration: none;user-select: none}a[part="number"]:hover, button[part="number"]:hover {color: var(--helix-color-foreground);cursor: pointer}a[part="number"]:hover {text-decoration: underline}a[part="number"]:focus-visible, button[part="number"]:focus-visible {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="time"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;user-select: none}[part="text"] {flex: 1 1 auto;min-inline-size: 0;overflow-wrap: anywhere;white-space: var(--_log-white-space, pre)}[part~="line-debug"] {color: var(--helix-color-foreground-subtle)}[part~="line-warn"] {background-color: color-mix(in oklab, var(--log-warn-color, var(--helix-color-warning)) 10%, transparent);color: var(--log-warn-color, var(--helix-color-warning))}[part~="line-error"] {background-color: color-mix(in oklab, var(--log-error-color, var(--helix-color-danger)) 10%, transparent);color: var(--log-error-color, var(--helix-color-danger))}[part~="line-marked"] {background-color: var(--log-mark-background-color, color-mix(in oklab, var(--helix-color-primary) 12%, transparent))}[part~="line-selected"] {background-color: var(--log-selected-background-color, color-mix(in oklab, var(--helix-color-info) 14%, transparent))}[part~="line-selected"] > [part="number"] {color: var(--helix-color-foreground)}[part~="run"] {background-color: var(--log-run-background-color, transparent);color: var(--log-run-color, inherit)}[part~="run-bold"] {font-weight: var(--helix-weight-semibold)}[part~="run-dim"] {opacity: 0.7}[part~="run-italic"] {font-style: italic}[part~="run-underline"] {text-decoration-line: underline}[part~="run-strike"] {text-decoration-line: line-through}[part~="run-underline"][part~="run-strike"] {text-decoration-line: underline line-through}[part="match"] {background-color: var(--log-match-background-color, var(--helix-color-warning-surface));border-radius: var(--helix-radii-sm);color: inherit}@media print {[part~="line"] {print-color-adjust: exact}}`);

package/dist/log/root/log-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-subtle);--log-ansi-bright-blue: var(--helix-color-info);--log-ansi-bright-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-bright-green: var(--helix-color-success);--log-ansi-bright-magenta: var(--helix-color-syntax-callable);--log-ansi-bright-red: var(--helix-color-danger);--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: var(--helix-color-warning);--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);
+export const styles = createSheet(`:host {--log-ansi-background: var(--log-background-color, var(--helix-color-background));--log-ansi-black: var(--helix-color-foreground);--log-ansi-blue: var(--helix-color-info);--log-ansi-bright-black: var(--helix-color-foreground-subtle);--log-ansi-bright-blue: var(--helix-color-info);--log-ansi-bright-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-bright-green: var(--helix-color-success);--log-ansi-bright-magenta: var(--helix-color-syntax-callable);--log-ansi-bright-red: var(--helix-color-danger);--log-ansi-bright-white: var(--helix-color-foreground);--log-ansi-bright-yellow: var(--helix-color-warning);--log-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--log-ansi-foreground: var(--log-color, var(--helix-color-foreground));--log-ansi-green: var(--helix-color-success);--log-ansi-magenta: var(--helix-color-syntax-callable);--log-ansi-red: var(--helix-color-danger);--log-ansi-white: var(--helix-color-foreground-muted);--log-ansi-yellow: var(--helix-color-warning);background-color: var(--log-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--log-radius, var(--helix-radii-lg));color: var(--log-color, var(--helix-color-foreground));display: grid;font-family: var(--log-font-family, var(--helix-font-mono));font-size: var(--log-font-size, var(--helix-text-xs));grid-template-columns: minmax(0, 1fr);grid-template-rows: auto auto minmax(0, 1fr) auto;line-height: var(--log-line-height, var(--helix-leading-normal));max-block-size: var(--log-max-block-size, 30rem);min-block-size: 0;overflow: hidden;tab-size: 4}:host([separation="plain"]) {--log-padding-inline: var(--helix-space-none);--_log-duration-start: var(--helix-space-xs);background-color: transparent;border: none;border-radius: var(--helix-radii-none);max-block-size: var(--log-max-block-size, none)}:host([separation="plain"]) {color: var(--log-color, inherit)}:host([wrap]) {--_log-line-size: auto;--_log-white-space: pre-wrap}::slotted([slot="toolbar"]) {--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));font-family: var(--helix-font-sans);grid-row: 1;padding-block: var(--helix-space-xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"] {background-color: var(--helix-color-surface-sunken);border-block-end: var(--helix-border-thin) solid var(--log-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);grid-row: 2;margin: var(--helix-space-none);padding-block: var(--helix-space-2xs);padding-inline: var(--log-padding-inline, var(--helix-space-md))}[part="dropped"][hidden], [part="resume"][hidden] {display: none}[part="log"] {grid-row: 3;overflow: auto;overscroll-behavior: contain;padding-block: var(--helix-space-xs);scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}:host([separation="plain"]) [part="log"] {padding-block: var(--helix-space-none)}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="row"] {min-inline-size: 100%;inline-size: var(--_log-line-size, max-content)}[part="resume"] {display: grid;grid-row: 4;justify-items: center;margin-block-start: calc(var(--helix-space-xl) * -1 - var(--helix-space-xs));padding-block-end: var(--helix-space-xs);pointer-events: none;position: relative}[part="resume"] > * {pointer-events: auto}[part="resume"] slot::slotted(*) {border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));box-shadow: var(--helix-shadow-floating)}[part="resume-button"] {all: unset;box-sizing: border-box;align-items: center;background-color: var(--helix-color-surface-raised);block-size: var(--helix-size-control-sm);border: var(--helix-border-floating) solid var(--log-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);line-height: var(--helix-leading-tight);padding-inline: var(--helix-space-sm);white-space: nowrap}[part="resume-button"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, var(--helix-color-surface-raised))}[part="resume-button"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="resume-mark"] {block-size: var(--helix-size-icon-sm);display: inline-flex;inline-size: var(--helix-size-icon-sm)}[part="resume-mark"] svg {block-size: 100%;inline-size: 100%}[part="empty"], [part="loading"] {--_collection-inset-block: var(--helix-space-lg);--_collection-inset-inline: var(--helix-space-md)}@media print {:host {max-block-size: none}[part="log"] {overflow: visible}[part="resume"] {display: none}}`);

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

@@ -38,6 +38,20 @@ import '../line/log-line.js';
  */
 export declare class HelixLog extends HelixHeadlessLog {
     static tier: string;
+    /**
+     * How the log is set apart from what is around it.
+     *
+     * - `outlined`, the resting look, is a box with an edge and a fill of its
+     *   own, which scrolls after `--log-max-block-size`.
+     * - `plain` has no edge, no fill, no inset and no height of its own: the
+     *   lines start where the text around them does and the log grows with
+     *   them. For a log inside something that already frames it, such as an
+     *   agent's work in a chat turn's `work` slot.
+     *
+     * Both are writable, so a page can say which it means rather than relying
+     * on the absence of an attribute.
+     */
+    separation?: 'outlined' | 'plain';
     static styles: CSSResultGroup;
 }
 declare global {

package/dist/log/root/log-root.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessLog } from '@fusion.dev/helix-headless/log';
+import { property } from 'lit/decorators.js';
 import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './log-root.css.js';
@@ -10,6 +11,9 @@ let HelixLog = class HelixLog extends HelixHeadlessLog {
     static { this.tier = 'helix-'; }
     static { this.styles = [liveStyles, collectionStateStyles, styles]; }
 };
+__decorate([
+    property({ reflect: true })
+], HelixLog.prototype, "separation", void 0);
 HelixLog = __decorate([
     customElement('helix-log')
 ], HelixLog);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-bar-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-bar-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="bar"] {--_spatial-bar-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-bar-chart-face: oklch(from var(--_spatial-bar-chart-color) calc(l - var(--spatial-bar-chart-shade, 0) * 0.5) c h);--_spatial-bar-chart-edge: oklch(from var(--_spatial-bar-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-bar-chart-fill, var(--_spatial-bar-chart-face));fill-opacity: calc(var(--_spatial-bar-chart-area, 1) * var(--_spatial-bar-chart-through, 1));stroke: var(--_spatial-bar-chart-line, var(--_spatial-bar-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-bar-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-bar-chart-fill: color-mix(in oklab, var(--_spatial-bar-chart-face) 60%, var(--helix-color-background));--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-bar-chart-area: 0.2;--_spatial-bar-chart-line: var(--_spatial-bar-chart-color)}:host([material="glass"]) {--_spatial-bar-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-bar-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);

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

@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-bar-chart
  *
- * @cssproperty --spatial-bar-chart-block-size - How tall the plot is.
+ * @cssproperty --spatial-bar-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  */
 export declare class HelixSpatialBarChart extends HelixHeadlessSpatialBarChart {
     static tier: string;

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-ribbon-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="ribbon"] {--_spatial-ribbon-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-ribbon-chart-face: oklch(from var(--_spatial-ribbon-chart-color) calc(l - var(--spatial-ribbon-chart-shade, 0) * 0.5) c h);--_spatial-ribbon-chart-edge: oklch(from var(--_spatial-ribbon-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-ribbon-chart-fill, var(--_spatial-ribbon-chart-face));fill-opacity: calc(var(--_spatial-ribbon-chart-area, 1) * var(--_spatial-ribbon-chart-through, 1));stroke: var(--_spatial-ribbon-chart-line, var(--_spatial-ribbon-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-ribbon-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-ribbon-chart-fill: color-mix(in oklab, var(--_spatial-ribbon-chart-face) 60%, var(--helix-color-background));--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-ribbon-chart-area: 0.2;--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([material="glass"]) {--_spatial-ribbon-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-ribbon-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-ribbon-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-ribbon-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="ribbon"] {--_spatial-ribbon-chart-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-ribbon-chart-face: oklch(from var(--_spatial-ribbon-chart-color) calc(l - var(--spatial-ribbon-chart-shade, 0) * 0.5) c h);--_spatial-ribbon-chart-edge: oklch(from var(--_spatial-ribbon-chart-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-ribbon-chart-fill, var(--_spatial-ribbon-chart-face));fill-opacity: calc(var(--_spatial-ribbon-chart-area, 1) * var(--_spatial-ribbon-chart-through, 1));stroke: var(--_spatial-ribbon-chart-line, var(--_spatial-ribbon-chart-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-ribbon-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-ribbon-chart-fill: color-mix(in oklab, var(--_spatial-ribbon-chart-face) 60%, var(--helix-color-background));--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-ribbon-chart-area: 0.2;--_spatial-ribbon-chart-line: var(--_spatial-ribbon-chart-color)}:host([material="glass"]) {--_spatial-ribbon-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-ribbon-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-ribbon-chart/root/spatial-ribbon-chart-root.d.ts

@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-ribbon-chart
  *
- * @cssproperty --spatial-ribbon-chart-block-size - How tall the plot is.
+ * @cssproperty --spatial-ribbon-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  */
 export declare class HelixSpatialRibbonChart extends HelixHeadlessSpatialRibbonChart {
     static tier: string;

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="drop-line"] {opacity: 0.45;stroke: var(--chart-series, var(--helix-color-primary));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="point"] {fill: var(--_spatial-scatter-chart-fill, var(--chart-series, var(--helix-color-primary)));fill-opacity: calc(var(--_spatial-scatter-chart-area, 1) * var(--_spatial-scatter-chart-through, 1));stroke: var(--_spatial-scatter-chart-line, var(--helix-color-surface-sunken));stroke-opacity: var(--_spatial-scatter-chart-through, 1);stroke-width: var(--_spatial-scatter-chart-weight, var(--helix-border-thin));vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part~="point"] {--_spatial-scatter-chart-fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 60%, var(--helix-color-background));--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([emphasis="subtle"]) [part~="point"] {--_spatial-scatter-chart-area: 0.2;--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([material="glass"]) {--_spatial-scatter-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-scatter-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="drop-line"] {stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-scatter-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-scatter-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="drop-line"] {opacity: 0.45;stroke: var(--chart-series, var(--helix-color-primary));stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="point"] {fill: var(--_spatial-scatter-chart-fill, var(--chart-series, var(--helix-color-primary)));fill-opacity: calc(var(--_spatial-scatter-chart-area, 1) * var(--_spatial-scatter-chart-through, 1));stroke: var(--_spatial-scatter-chart-line, var(--helix-color-surface-sunken));stroke-opacity: var(--_spatial-scatter-chart-through, 1);stroke-width: var(--_spatial-scatter-chart-weight, var(--helix-border-thin));vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part~="point"] {--_spatial-scatter-chart-fill: color-mix(in oklab, var(--chart-series, var(--helix-color-primary)) 60%, var(--helix-color-background));--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([emphasis="subtle"]) [part~="point"] {--_spatial-scatter-chart-area: 0.2;--_spatial-scatter-chart-line: var(--chart-series, var(--helix-color-primary));--_spatial-scatter-chart-weight: var(--helix-border-thick)}:host([material="glass"]) {--_spatial-scatter-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-scatter-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="point"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part~="point"] {forced-color-adjust: none;stroke: CanvasText}[part="drop-line"] {stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-scatter-chart/root/spatial-scatter-chart-root.d.ts

@@ -15,7 +15,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-scatter-chart
  *
- * @cssproperty --spatial-scatter-chart-block-size - How tall the plot is.
+ * @cssproperty --spatial-scatter-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  */
 export declare class HelixSpatialScatterChart extends HelixHeadlessSpatialScatterChart {
     static tier: string;

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-fill, var(--_spatial-surface-chart-lit));fill-opacity: calc(var(--_spatial-surface-chart-area, 1) * var(--_spatial-surface-chart-through, 1));stroke: var(--_spatial-surface-chart-line, var(--_spatial-surface-chart-rule));stroke-linejoin: round;stroke-opacity: var(--_spatial-surface-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="contour"] {--_spatial-surface-chart-contour: oklch(from color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low)) calc(l + clamp(-0.18, (0.6 - l) * 1000, 0.22)) c h);fill: none;stroke: var(--_spatial-surface-chart-contour);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-surface-chart-fill: color-mix(in oklab, var(--_spatial-surface-chart-lit) 60%, var(--helix-color-background));--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-surface-chart-area: 0.2;--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([material="glass"]) {--_spatial-surface-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-surface-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="contour"] {stroke: CanvasText}[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {--_spatial-surface-chart-high: var(--spatial-surface-chart-high, var(--helix-color-primary-active));--_spatial-surface-chart-low: var(--spatial-surface-chart-low, color-mix(in oklab, var(--helix-color-primary-active) 15%, var(--helix-color-surface-sunken)));display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-surface-chart-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-surface-chart-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part="face"] {--_spatial-surface-chart-color: color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low));--_spatial-surface-chart-lit: oklch(from var(--_spatial-surface-chart-color) calc(l - var(--spatial-surface-chart-shade, 0)) c h);--_spatial-surface-chart-rule: oklch(from var(--_spatial-surface-chart-lit) calc(l + clamp(-0.1, (0.6 - l) * 1000, 0.14)) c h);fill: var(--_spatial-surface-chart-fill, var(--_spatial-surface-chart-lit));fill-opacity: calc(var(--_spatial-surface-chart-area, 1) * var(--_spatial-surface-chart-through, 1));stroke: var(--_spatial-surface-chart-line, var(--_spatial-surface-chart-rule));stroke-linejoin: round;stroke-opacity: var(--_spatial-surface-chart-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="contour"] {--_spatial-surface-chart-contour: oklch(from color-mix(in oklab, var(--_spatial-surface-chart-high) calc(var(--spatial-surface-chart-level, 0) * 100%), var(--_spatial-surface-chart-low)) calc(l + clamp(-0.18, (0.6 - l) * 1000, 0.22)) c h);fill: none;stroke: var(--_spatial-surface-chart-contour);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-surface-chart-fill: color-mix(in oklab, var(--_spatial-surface-chart-lit) 60%, var(--helix-color-background));--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-surface-chart-area: 0.2;--_spatial-surface-chart-line: var(--_spatial-surface-chart-color)}:host([material="glass"]) {--_spatial-surface-chart-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-surface-chart-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="contour"] {stroke: CanvasText}[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"] {stroke: Highlight}}`);

package/dist/spatial-surface-chart/root/spatial-surface-chart-root.d.ts

@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-surface-chart
  *
- * @cssproperty --spatial-surface-chart-block-size - How tall the plot is.
+ * @cssproperty --spatial-surface-chart-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  * @cssproperty --spatial-surface-chart-high - The color of the highest reading, which the renderer reads too.
  * @cssproperty --spatial-surface-chart-low - The color of the lowest reading, which the renderer reads too.
  */

package/dist/spatial-treemap/root/spatial-treemap-root.css.js

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);
+export const styles = createSheet(`:host {display: block}[part="plot"] {background-color: var(--helix-color-surface-sunken);aspect-ratio: 4 / 3;block-size: var(--spatial-treemap-block-size, auto);inline-size: 100%;max-block-size: var(--spatial-treemap-block-size, 22em);border-radius: var(--helix-radii-md);overflow: hidden;position: relative}::slotted(*) {inset: 0;position: absolute}:host([no-box]) [part="plot"] {background-color: transparent}[part="plot"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="fallback"] {inset: var(--helix-space-md);position: absolute}[part="fallback"][hidden] {display: none}[part="drawing"] {block-size: 100%;display: block;font-family: var(--helix-font-sans);inline-size: 100%;overflow: visible;touch-action: pan-y;user-select: none}[part="grid"] {fill: none;opacity: 0.35;stroke: var(--helix-color-foreground-muted);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="tick"] {fill: var(--helix-color-foreground-muted);font-weight: var(--helix-weight-medium)}[part="axis-name"] {fill: var(--helix-color-foreground);font-weight: var(--helix-weight-semibold)}[part~="block"] {--_spatial-treemap-color: var(--chart-series, var(--helix-color-primary))}[part="face"] {--_spatial-treemap-face: oklch(from var(--_spatial-treemap-color) calc(l - var(--spatial-treemap-shade, 0) * 0.5) c h);--_spatial-treemap-edge: oklch(from var(--_spatial-treemap-face) calc(l + clamp(-0.08, (0.6 - l) * 1000, 0.1)) c h);fill: var(--_spatial-treemap-fill, var(--_spatial-treemap-face));fill-opacity: calc(var(--_spatial-treemap-area, 1) * var(--_spatial-treemap-through, 1));stroke: var(--_spatial-treemap-line, var(--_spatial-treemap-edge));stroke-linejoin: round;stroke-opacity: var(--_spatial-treemap-through, 1);stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}:host([emphasis="outlined"]) [part="face"] {--_spatial-treemap-fill: color-mix(in oklab, var(--_spatial-treemap-face) 60%, var(--helix-color-background));--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([emphasis="subtle"]) [part="face"] {--_spatial-treemap-area: 0.2;--_spatial-treemap-line: var(--_spatial-treemap-color)}:host([material="glass"]) {--_spatial-treemap-through: calc(0.62 * var(--helix-material-opacity))}:host([material="frosted"]) {--_spatial-treemap-through: calc(0.88 * var(--helix-material-opacity))}foreignObject > [part="mark"] {translate: -50% -50%}[part="ring"] {fill: none;pointer-events: none;stroke: var(--helix-color-foreground);stroke-width: var(--helix-border-thick);vector-effect: non-scaling-stroke}[part="ring-behind"] {fill: none;opacity: 0.6;pointer-events: none;stroke: var(--helix-color-foreground);stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part="live"], [part="summary"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part="face"] {stroke: var(--helix-color-border)}}@media (forced-colors: active) {[part="face"] {forced-color-adjust: none;stroke: CanvasText}[part="grid"] {stroke: CanvasText}[part="tick"], [part="axis-name"] {fill: CanvasText}[part="ring"], [part="ring-behind"] {stroke: Highlight}}`);

package/dist/spatial-treemap/root/spatial-treemap-root.d.ts

@@ -16,7 +16,7 @@ import '../../tooltip/index.js';
  * @groups charts
  * @documentation https://fusion.dev/helix/components/spatial-treemap
  *
- * @cssproperty --spatial-treemap-block-size - How tall the plot is.
+ * @cssproperty --spatial-treemap-block-size - How tall the plot is. By default, three quarters of its width and 22em at most.
  */
 export declare class HelixSpatialTreemap extends HelixHeadlessSpatialTreemap {
     static tier: string;