@fusion.dev/helix 0.142.1 → 0.143.0

package/dist/icon-button/root/icon-button-root.css.js

@@ -58,7 +58,7 @@ var(--helix-color-foreground)
 
 [part="button"] {
 align-items: center;
-background-color: transparent;
+background-color: var(--icon-button-background-color, transparent);
 block-size: var(--_icon-button-size);
 border: var(--helix-border-thin) solid transparent;
 
@@ -75,7 +75,7 @@ border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
 );
-color: var(--_icon-button-ink);
+color: var(--icon-button-foreground-color, var(--_icon-button-ink));
 cursor: pointer;
 display: inline-flex;
 
@@ -89,8 +89,14 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 :host(:not(:disabled)) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 8%, transparent);
-color: var(--_icon-button-ink-hover);
+background-color: var(
+--icon-button-background-color-hover,
+var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 8%, transparent)
+)
+);
+color: var(--icon-button-foreground-color, var(--_icon-button-ink-hover));
 }
 
 :host([shape="circle"]) [part="button"] {
@@ -115,34 +121,55 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host([emphasis="solid"]) [part="button"] {
-background-color: var(--_icon-button-fill);
+background-color: var(--icon-button-background-color, var(--_icon-button-fill));
 border-color: transparent;
-color: var(--_icon-button-on-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 :host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(--_icon-button-fill-hover);
-color: var(--_icon-button-on-tone);
+background-color: var(
+--icon-button-background-color-hover,
+var(--icon-button-background-color, var(--_icon-button-fill-hover))
+);
+color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 
 :host([emphasis="outlined"]) [part="button"] {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 6%, transparent);
+background-color: var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 6%, transparent)
+);
 border-color: var(--_icon-button-edge);
-color: var(--_icon-button-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 :host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 12%, transparent);
-color: var(--_icon-button-tone);
+background-color: var(
+--icon-button-background-color-hover,
+var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 12%, transparent)
+)
+);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host([emphasis="subtle"]) [part="button"] {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 14%, transparent);
+background-color: var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
+);
 border-color: transparent;
-color: var(--_icon-button-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 22%, transparent);
-color: var(--_icon-button-tone);
+background-color: var(
+--icon-button-background-color-hover,
+var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 22%, transparent)
+)
+);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:disabled) [part="button"] {

package/dist/icon-button/root/icon-button-root.d.ts

@@ -21,8 +21,11 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  *
  * @slot - The icon.
  *
- * @csspart button - The inner button or anchor.
+ * @csspart button - The inner button.
  *
+ * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
+ * @cssproperty --icon-button-background-color-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
+ * @cssproperty --icon-button-foreground-color - Icon color.
  * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
  * @cssproperty --icon-button-shadow - Shadow of a raised icon button.
  * @cssproperty --icon-button-size - Edge length of the control.

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

@@ -19,7 +19,7 @@ object-position: var(--image-position, center);
 }
 
 :host([data-status="error"]) [part="image"] {
-visibility: hidden;
+opacity: 0;
 }
 
 [part="placeholder"],

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 /**
  * @summary A field for a single line of text.
  *

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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
-import '../../icon/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';

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

@@ -144,4 +144,14 @@ stroke-opacity: calc(0.62 * var(--helix-material-opacity));
 
 :host([material="frosted"]) [part="line"] {
 stroke-opacity: calc(0.88 * var(--helix-material-opacity));
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

package/dist/list/item/list-item.css.js

@@ -63,7 +63,13 @@ grid-column: 4;
 grid-row: 1 / span 2;
 }
 
-a[part="row"] {
+[part="link"] {
+align-items: center;
 color: inherit;
+display: grid;
+grid-column: 1 / 4;
+grid-row: 1 / span 2;
+grid-template-columns: subgrid;
+grid-template-rows: subgrid;
 text-decoration: none;
 }`);

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

@@ -4,8 +4,11 @@ import type { CSSResultGroup } from 'lit';
  * @summary Shows that work of unknown length is in progress.
  *
  * @description
- * Sized in `em`, so it matches the text beside it. The color is `currentColor`,
- * so it matches the text color around it, including inside a primary button.
+ * Sized from the loader size tokens, so a loader is the same size wherever it
+ * is placed and follows the density region it sits in. Set `--loader-size:
+ * 1em` to match the text beside it, as inside a button. The color is
+ * `currentColor`, so it matches the text color around it, including inside a
+ * primary button.
  *
  * @since 0.1.0
  * @status stable
@@ -14,12 +17,12 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @cssproperty --loader-color - Color of the moving arc.
- * @cssproperty --loader-size - Diameter. Defaults to 1.5em.
+ * @cssproperty --loader-size - Diameter. Defaults to the size token that `size` picks, which is 1.5rem at the default density.
  * @cssproperty --loader-track-color - Color of the circle behind the arc.
  */
 export declare class HelixLoader extends HelixHeadlessLoader {
     /**
-     * Diameter relative to the surrounding text.
+     * Diameter, from the loader size tokens.
      */
     size?: 'sm' | 'md' | 'lg';
     /**

package/dist/menu/item/menu-item.css.js

@@ -90,7 +90,7 @@ svg[part="mark"] {
 color: var(--helix-color-foreground-subtle);
 }
 
-:host([checked]) svg[part="mark"] {
+:host(:state(checked)) svg[part="mark"] {
 color: var(--helix-color-foreground);
 }
 

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

@@ -19,12 +19,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --menu-background-color - Fill of the surface.
  * @cssproperty --menu-border-color - Color of the panel's edge.
  * @cssproperty --menu-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 a theme sets a border.
- *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
- *   theme says otherwise.
  * @cssproperty --menu-max-block-size - The tallest the menu grows before it scrolls.
  * @cssproperty --menu-min-inline-size - The narrowest the menu gets.
  * @cssproperty --menu-shadow - Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
- *   floating surface sits over content nobody can predict, so it keeps a lift by default.
  */
 export declare class HelixMenu extends HelixHeadlessMenu {
     static styles: CSSResultGroup;

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

@@ -131,7 +131,7 @@ stroke-dasharray: var(--meter-sweep) 100;
 :host([shape="arc"]) [part~="indicator"],
 :host([shape="ring"]) [part~="indicator"] {
 
---_meter-hue: var(--helix-color-foreground-muted);
+--_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));
 scale: none;
 stroke: var(--_meter-hue);
 stroke-dasharray: var(--meter-along) 100;
@@ -151,19 +151,19 @@ stroke-dashoffset: calc(var(--meter-along) * -1);
 
 :host([shape="arc"]) [part~="indicator"][data-band="good"],
 :host([shape="ring"]) [part~="indicator"][data-band="good"] {
---_meter-hue: var(--helix-color-success);
+--_meter-hue: var(--meter-color, var(--helix-color-success));
 stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part~="indicator"][data-band="fair"],
 :host([shape="ring"]) [part~="indicator"][data-band="fair"] {
---_meter-hue: var(--helix-color-warning);
+--_meter-hue: var(--meter-color, var(--helix-color-warning));
 stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part~="indicator"][data-band="poor"],
 :host([shape="ring"]) [part~="indicator"][data-band="poor"] {
---_meter-hue: var(--helix-color-danger);
+--_meter-hue: var(--meter-color, var(--helix-color-danger));
 stroke: var(--_meter-hue);
 }
 

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.

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/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/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/skeleton/root/skeleton-root.css.js

@@ -4,6 +4,10 @@ display: block;
 inline-size: 100%;
 }
 
+:host(:not([shape])) {
+block-size: var(--skeleton-block-size, var(--helix-size-control));
+}
+
 :host([shape="text"]) {
 block-size: 1em;
 }

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

@@ -15,13 +15,16 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart skeleton - The placeholder shape.
  *
+ * @cssproperty --skeleton-block-size - The height of the block shape, which is the shape when `shape` is unset. Defaults to the control height.
  * @cssproperty --skeleton-size - The diameter of the circle shape.
  */
 export declare class HelixSkeleton extends HelixHeadlessSkeleton {
     /**
      * The shape of the placeholder: `text`, `circle`, or a block when unset.
      *
-     * Unset is a block, which is what most missing things are.
+     * Unset is a block, which is what most missing things are. A block is the
+     * control height until you size it, with a height on the element or
+     * `--skeleton-block-size`.
      */
     shape?: 'text' | 'circle';
     static styles: CSSResultGroup;

package/dist/table/column/table-column.css.js

@@ -59,6 +59,11 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="column"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 [part="grip"] {
 all: unset;
 align-items: center;

package/dist/tabs/panel/tab-panel.css.js

@@ -8,7 +8,7 @@ display: contents;
 min-block-size: 0;
 min-inline-size: 0;
 outline: none;
-padding-block-start: var(--helix-space-md);
+padding-block-start: var(--tabs-panel-padding-block-start, var(--helix-space-md));
 }
 
 [part="panel"][hidden] {