@fusion.dev/helix 0.142.1 → 0.144.0

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

@@ -29,6 +29,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot label - A visible label, above a bar and under a ring or an arc. Its words name it in place of `label`.
+ *
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
  * @csspart indicator-good - The fill while the reading is in the good band. Set alongside `indicator`.
@@ -40,6 +42,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart value - The reading as text, shown when `show-value` is set.
  *
  * @cssproperty --meter-color - The fill color. Overrides the band's tone.
+ * @cssproperty --meter-label-color - The color of a slotted label.
+ * @cssproperty --meter-label-gap - The space between a slotted label and the meter.
+ * @cssproperty --meter-label-size - The type size of a slotted label.
  * @cssproperty --meter-ring-size - The width and height of the drawing in `ring` and `arc`.
  * @cssproperty --meter-ring-width - The thickness of the stroke in `ring` and `arc`.
  * @cssproperty --meter-size - The thickness of the bar.

package/dist/notifications/notification/notification.css.js

@@ -241,6 +241,11 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 @media print {
 [part="dismiss"] {
 display: none;

package/dist/number-input/root/number-input-root.css.js

@@ -2,9 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {
 align-items: center;
 background-color: var(--number-input-background-color, var(--helix-color-well));
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+block-size: var(--number-input-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));
+border-radius: var(--number-input-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 display: flex;
 

package/dist/number-input/root/number-input-root.d.ts

@@ -22,6 +22,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/number-input
  *
  * @slot end - Content after the number, such as a unit.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the number, such as a unit or an icon.
  *
  * @csspart control - The input that holds the number.
@@ -30,6 +33,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart increment - The button that steps the value up.
  *
  * @cssproperty --number-input-background-color - The fill behind the number.
+ * @cssproperty --number-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --number-input-radius - Corner radius of the field.
+ * @cssproperty --number-input-size - Height of the field.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

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

@@ -31,8 +31,10 @@ import { type OrbState } from '../shapes.js';
  * `prefers-reduced-motion`, it draws one still frame.
  *
  * The orb is styled only and has behavior, which the tier split does not
- * otherwise allow. The behavior is drawing dots to a canvas, so there is no
- * structure to restyle and nothing for a headless element to hold.
+ * otherwise allow. Its role, name and busy state follow `state`, and the rest
+ * is drawing dots to a canvas, so there is no structure to restyle. For a
+ * drawing of your own, the headless `Loader` holds the same busy progress bar
+ * and its name.
  *
  * @since 0.8.0
  * @status stable
@@ -85,6 +87,13 @@ export declare class HelixOrb extends HelixElement {
      * markup.
      */
     state: OrbState;
+    /**
+     * The word for each state, for a page in another language.
+     *
+     * A state left out keeps its English word, and `label` wins over both. It is
+     * a property with no attribute, keyed by state, such as `{ thinking: '…' }`.
+     */
+    stateLabels: Partial<Record<OrbState, string>>;
     private canvas;
     private context;
     /**

package/dist/orb/root/orb-root.js

@@ -28,6 +28,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
         super(...arguments);
         this.label = '';
         this.state = 'thinking';
+        this.stateLabels = {};
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -73,7 +74,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             ? this.state
             : 'thinking';
         hostAria(this.internals, {
-            label: this.label || LABELS[state],
+            label: this.label || this.stateLabels[state] || LABELS[state],
             role: state === 'done' ? 'img' : 'progressbar',
         });
         this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
@@ -244,6 +245,9 @@ __decorate([
 __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')
 ], HelixOrb);

package/dist/pin-input/root/pin-input-root.css.js

@@ -13,10 +13,11 @@ gap: var(--pin-input-gap, var(--helix-space-xs));
 
 [part="cell"] {
 all: unset;
-background-color: var(--helix-color-well);
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--pin-input-cell-background-color, var(--helix-color-well));
+block-size: var(--pin-input-cell-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid
+var(--pin-input-cell-border-color, var(--helix-color-border));
+border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 color: var(--helix-color-foreground);
 font-family: var(--helix-font-sans);
@@ -24,7 +25,7 @@ font-size: var(--helix-text-lg);
 
 font-variant-numeric: tabular-nums;
 font-weight: var(--helix-weight-medium);
-inline-size: var(--helix-size-control);
+inline-size: var(--pin-input-cell-size, var(--helix-size-control));
 text-align: center;
 transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -56,6 +57,12 @@ background-color: transparent;
 font-size: var(--helix-text-xl);
 }
 
+[part="separator"] {
+align-self: center;
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-lg);
+}
+
 [part="cell"]::placeholder {
 color: var(--helix-color-foreground-subtle);
 }

package/dist/pin-input/root/pin-input-root.d.ts

@@ -21,7 +21,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart cell - One box.
  * @csspart field - The row of boxes.
+ * @csspart separator - The text `format` draws between two boxes.
  *
+ * @cssproperty --pin-input-cell-background-color - Fill behind each box.
+ * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --pin-input-cell-radius - Corner radius of each box.
+ * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {

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

@@ -11,6 +11,9 @@ background-color: var(--helix-color-surface-overlay);
 border: var(--popover-border-width, var(--helix-border-floating)) solid
 var(--popover-border-color, var(--helix-color-border));
 
+--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));
+
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
 box-sizing: border-box;
@@ -89,6 +92,39 @@ padding: var(--popover-padding, var(--helix-space-md));
 padding: var(--popover-padding, var(--helix-space-none));
 }
 
+[part="popover"]:focus,
+[part="popover"]:focus-visible {
+outline: none;
+}
+
+[part~="arrow"] {
+background-color: var(--helix-color-surface-overlay);
+block-size: var(--popover-arrow-size, 0.5rem);
+inline-size: var(--popover-arrow-size, 0.5rem);
+position: absolute;
+rotate: 45deg;
+}
+
+[part="popover"][data-placement^="bottom"] [part~="arrow"] {
+border-left: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="top"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-right: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="right"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-left: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="left"] [part~="arrow"] {
+border-right: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
 @media print {
 :host {
 display: none;

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Popper, Flyout, Overlay
  * @documentation https://fusion.dev/helix/components/popover
  *
+ * @cssproperty --popover-arrow-size - Size of the point drawn with `arrow`. Tooltip's point is the same size.
  * @cssproperty --popover-border-color - Color of the panel's edge.
  * @cssproperty --popover-border-width - Width of the panel's edge. Defaults to
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless

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

@@ -5,9 +5,29 @@ display: block;
 
 :host([show-value]) {
 align-items: center;
+column-gap: var(--helix-space-sm);
 display: grid;
-gap: var(--helix-space-sm);
 grid-template-columns: 1fr auto;
+
+row-gap: var(--progress-label-gap, var(--helix-space-2xs));
+}
+
+slot[name="label"]::slotted(*) {
+color: var(--progress-label-color, var(--helix-color-foreground));
+display: block;
+font-size: var(--progress-label-size, var(--helix-text-sm));
+grid-column: 1 / -1;
+margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));
+}
+
+:host([show-value]) slot[name="label"]::slotted(*) {
+margin-block-end: 0;
+}
+
+:host([shape="ring"]) slot[name="label"]::slotted(*) {
+
+grid-column: 1;
+margin-block: 0;
 }
 
 [part="value"] {
@@ -98,6 +118,7 @@ translate: 0;
 :host([shape="ring"]) {
 display: inline-grid;
 place-items: center;
+row-gap: var(--progress-label-gap, var(--helix-space-2xs));
 }
 
 :host([shape="ring"]) [part="track"] {

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

@@ -18,7 +18,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot label - A visible label, above a bar and under a ring. Its words name it in place of `label`.
+ *
  * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-label-color - Color of a slotted label.
+ * @cssproperty --progress-label-gap - Space between a slotted label and the bar.
+ * @cssproperty --progress-label-size - Type size of a slotted label.
  * @cssproperty --progress-ring-size - Diameter of the ring.
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.

package/dist/qr-code/root/qr-code-root.css.js

@@ -23,7 +23,8 @@ fill: var(--qr-code-finder-color, currentColor);
 
 [part="logo"] {
 align-items: center;
-background-color: var(--qr-code-background-color, var(--helix-color-surface-raised));
+
+background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));
 border-radius: var(--helix-radii-sm);
 
 box-sizing: border-box;

package/dist/qr-code/root/qr-code-root.d.ts

@@ -17,8 +17,8 @@ import type { CSSResultGroup } from 'lit';
  * @category media
  * @documentation https://fusion.dev/helix/components/qr-code
  *
- * @cssproperty --qr-code-background-color - The fill behind the modules, including the quiet zone.
- * @cssproperty --qr-code-color - Color of the dark modules. Defaults to the page's text color.
+ * @cssproperty --qr-code-background-color - The fill behind the modules, including the quiet zone and the logo's box.
+ * @cssproperty --qr-code-color - Color of the dark modules. Defaults to the dark media ink, which is the same in both color schemes so the code scans.
  * @cssproperty --qr-code-finder-color - Color of the three corner squares. Defaults
  * to the color of the modules.
  * @cssproperty --qr-code-logo-padding - The clear space around the center logo.

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

@@ -8,7 +8,7 @@ font: inherit;
 
 color: var(--quote-color, var(--helix-color-foreground-muted));
 font: inherit;
-font-style: italic;
+font-style: var(--quote-font-style, italic);
 }
 
 @media print {

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

@@ -14,6 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;

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

@@ -13,6 +13,9 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Stars, Score, Review score
  * @documentation https://fusion.dev/helix/components/rating
  *
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot mark - The shape of a mark, copied into every position. When the slot is
  * empty, the stylesheet draws a mark, and `--rating-mark` changes its shape.
  *

package/dist/sandbox/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * The sandbox: a preview that runs what it is given, and the panes around it.
  *
- * The editor is deliberately absent and lives on in `@fusion.dev/helix-editor`, because
- * it carries CodeMirror. That is roughly 4 MB installed against a design system
+ * The editor is deliberately absent and lives in `@fusion.dev/helix-sandbox`, which
+ * is private, because it carries CodeMirror. That is roughly 4 MB installed against a design system
  * of about the same size, and a `dependencies` entry is paid at install time by
  * every consumer whether or not they import it, which is the one cost a subpath
  * export cannot avoid. Its pane takes an editor by slot, so bringing one is a

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

@@ -127,10 +127,14 @@ export declare class HelixSandbox extends HelixElement {
     panelSize: number;
     /**
      * The name of the divider between the panes, read by screen readers.
+     *
+     * Empty names the lead pane, "Resize source pane" or "Resize preview pane",
+     * since the divider's value is that pane's share.
      */
     separatorLabel: string;
     /**
-     * Percentage of the sandbox given to the source pane.
+     * Percentage of the sandbox given to the lead pane: the source, unless `lead`
+     * is `preview`.
      */
     split: number;
     /**
@@ -212,6 +216,21 @@ export declare class HelixSandbox extends HelixElement {
      * sandbox hears a great deal that is not its source.
      */
     private readonly handleSourceChange;
+    /**
+     * Writes a pane's text into every preview here.
+     *
+     * `seeding` writes only into a preview that has nothing yet, so a preview
+     * given its own `source` keeps it until the first edit.
+     */
+    private write;
+    /**
+     * Hands what the source panes already hold to the previews.
+     *
+     * Only edits were forwarded, so a pane written with a `value` showed its
+     * text beside an empty preview until the first keystroke, and the text had
+     * to be written twice. Client only, like the other reads of the light DOM.
+     */
+    private readonly seed;
     /**
      * Writes the cursor position onto any status bar slotted here.
      *

package/dist/sandbox/root/sandbox-root.js

@@ -22,7 +22,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         this.panelCollapsedSize = 0;
         this.panelLabel = 'Resize panel';
         this.panelSize = DEFAULT_PANEL;
-        this.separatorLabel = 'Resize source pane';
+        this.separatorLabel = '';
         this.split = DEFAULT_SPLIT;
         this.hasPanel = false;
         this.bodyHeight = 0;
@@ -37,15 +37,23 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             }
             const { value } = event.detail;
             const pane = event.composedPath()[0];
-            if (pane?.name !== 'css' && pane?.name !== 'html') {
+            const name = pane?.name;
+            if (name !== 'css' && name !== 'html') {
                 return;
             }
-            for (const preview of this.previews) {
-                if (pane.name === 'css') {
-                    preview.styles = value;
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    this.write(name, value, false);
                 }
-                else {
-                    preview.source = value;
+            });
+        };
+        this.seed = () => {
+            const slot = this.renderRoot.querySelector('slot[name="source"]');
+            for (const pane of slot?.assignedElements({ flatten: true }) ?? []) {
+                const { name, value } = pane;
+                const text = typeof value === 'string' ? value : pane.getAttribute('value');
+                if ((name === 'css' || name === 'html') && text) {
+                    this.write(name, text, true);
                 }
             }
         };
@@ -132,6 +140,14 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
         const slot = this.renderRoot.querySelector('slot[name="source"]');
         return (slot?.assignedElements({ flatten: true }) ?? []).some((pane) => pane === target || pane.contains(target));
     }
+    write(name, value, seeding) {
+        for (const preview of this.previews) {
+            const key = name === 'css' ? 'styles' : 'source';
+            if (!seeding || !preview[key]) {
+                preview[key] = value;
+            }
+        }
+    }
     parts(selector) {
         return [...this.querySelectorAll(selector)];
     }
@@ -213,6 +229,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             this.finishHydration();
         }
         this.watchBody(this.watch === undefined);
+        this.seed();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -246,15 +263,15 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
           part="panes"
           exportparts="separator"
           default-position=${Number.isFinite(this.defaultSplit) ? this.defaultSplit : DEFAULT_SPLIT}
-          label=${this.separatorLabel}
+          label=${this.separatorLabel || (first === 'preview' ? 'Resize preview pane' : 'Resize source pane')}
           orientation=${vertical ? 'vertical' : 'horizontal'}
           .position=${split}
           @helix-before-collapse=${this.handleCollapse}
           @helix-before-resize=${this.handlePanesChange}
         >
           ${''}
-          <div part="pane" data-pane=${first} slot="start"><slot name=${first}></slot></div>
-          <div part="pane" data-pane=${second} slot="end"><slot name=${second}></slot></div>
+          <div part="pane" data-pane=${first} slot="start"><slot name=${first} @slotchange=${this.seed}></slot></div>
+          <div part="pane" data-pane=${second} slot="end"><slot name=${second} @slotchange=${this.seed}></slot></div>
         </helix-splitter>
         <div part="panel" slot="end"><slot name="panel" @slotchange=${this.readPanel}></slot></div>
       </helix-splitter>

package/dist/sandbox/source/sandbox-source.d.ts

@@ -8,7 +8,8 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * keyboards, and screen reader support come from the platform.
  *
  * Tab inserts two spaces, so you can indent code. To move focus out of the
- * field, press Escape and then Tab.
+ * field, press Escape and then Tab. Shift+Tab moves focus back as it does
+ * anywhere else. The field's description says so to a screen reader.
  *
  * @since 0.1.0
  * @status stable
@@ -28,6 +29,10 @@ export declare class HelixSandboxSource extends HelixElement {
      * The editable region's name, read by screen readers.
      */
     fieldLabel: string;
+    /**
+     * The field's description, read by screen readers while Tab indents.
+     */
+    keysDescription: string;
     /**
      * Which source this pane holds. Every `helix-before-edit` event includes it.
      *

package/dist/sandbox/source/sandbox-source.js

@@ -5,13 +5,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement, HelixBeforeEditEvent, HelixCaretEvent, HelixElement, onUnlessFalse, restoreValue, } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './sandbox-source.css.js';
+const MODIFIERS = new Set(['Alt', 'AltGraph', 'Control', 'Meta', 'Shift']);
 let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
     constructor() {
         super(...arguments);
         this.fieldLabel = 'Example source';
+        this.keysDescription = 'Tab inserts two spaces. To leave, press Escape and then Tab.';
         this.name = 'html';
         this.tabIndents = true;
         this.value = '';
@@ -35,7 +37,10 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
                 this.escaped = true;
                 return;
             }
-            if (event.key !== 'Tab' || !this.tabIndents || this.escaped) {
+            if (MODIFIERS.has(event.key)) {
+                return;
+            }
+            if (event.key !== 'Tab' || event.shiftKey || !this.tabIndents || this.escaped) {
                 this.escaped = false;
                 return;
             }
@@ -59,6 +64,7 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
         return html `<textarea
       part="source"
       aria-label=${this.fieldLabel}
+      aria-describedby=${this.tabIndents ? 'keys' : nothing}
       spellcheck="false"
       .value=${this.value}
       @focus=${this.reportCaret}
@@ -66,13 +72,17 @@ let HelixSandboxSource = class HelixSandboxSource extends HelixElement {
       @keydown=${this.handleKeydown}
       @keyup=${this.reportCaret}
       @pointerup=${this.reportCaret}
-    ></textarea>`;
+    ></textarea>
+      <span id="keys" hidden>${this.keysDescription}</span>`;
     }
     static { this.styles = styles; }
 };
 __decorate([
     property({ attribute: 'field-label' })
 ], HelixSandboxSource.prototype, "fieldLabel", void 0);
+__decorate([
+    property({ attribute: 'keys-description' })
+], HelixSandboxSource.prototype, "keysDescription", void 0);
 __decorate([
     property()
 ], HelixSandboxSource.prototype, "name", void 0);

package/dist/sandbox/terminal/sandbox-terminal.d.ts

@@ -13,7 +13,9 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * warning. Only consecutive repeats collapse, so the order of messages is kept.
  *
  * The panel has `role="log"`, the role for an append-only stream. Screen
- * readers announce new output without reading the whole panel again.
+ * readers announce new output without reading the whole panel again. A line's
+ * level is read before it, except a plain `log`, so an error does not sound
+ * like any other line.
  *
  * @since 0.1.0
  * @status stable

package/dist/sandbox/terminal/sandbox-terminal.js

@@ -49,7 +49,9 @@ let HelixSandboxTerminal = class HelixSandboxTerminal extends HelixElement {
       ${this.entries.length === 0
             ? html `<p part="empty">${this.emptyLabel}</p>`
             : this.entries.map((entry) => html `<div part="entry" data-level=${entry.level}>
-                <span part="level" aria-hidden="true">${entry.level}</span>
+                <span part="level" aria-hidden=${entry.level === 'log' ? 'true' : nothing}
+                  >${entry.level}</span
+                >
                 <span part="message">${entry.text}</span>
                 ${entry.count > 1
                 ? html `<span part="count" aria-label="${entry.count} times"

package/dist/shared/chart/tooltip.css.js

@@ -18,7 +18,7 @@ font-weight: var(--helix-weight-medium);
 margin-block-end: var(--helix-space-2xs);
 }
 
-[part="tooltip-cell"] {
+[part~="tooltip-cell"] {
 align-items: baseline;
 column-gap: var(--helix-space-sm);
 display: grid;
@@ -36,11 +36,34 @@ font-variant-numeric: tabular-nums;
 grid-column: 3;
 }
 
-[part="tooltip-cell"][data-series]::before {
+[part~="tooltip-cell"][data-series]::before {
 background-color: var(--chart-series);
 block-size: 0.5em;
 border-radius: var(--helix-radii-full);
 content: "";
 grid-column: 1;
 inline-size: 0.5em;
+}
+
+[part~="tooltip-cell-current"] {
+font-weight: var(--helix-weight-medium);
+}
+
+[part~="tooltip-cell-current"] [part="tooltip-name"] {
+opacity: 1;
+}
+
+[part="plot"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

package/dist/shared/field/field-segments.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;