@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -1,9 +1,17 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
-display: grid;
 
-gap: var(--helix-space-none);
+--_grid-column-gap: var(--_grid-gap);
+
+--_grid-gap: var(--helix-space-none);
+--_grid-row-gap: var(--_grid-gap);
+
+column-gap: var(--_grid-column-gap);
+display: grid;
+grid-template-areas: var(--grid-areas, none);
 grid-template-columns: var(--grid-columns, var(--_grid-template, minmax(0, 1fr)));
+grid-template-rows: var(--grid-rows, none);
+row-gap: var(--_grid-row-gap);
 }
 
 :host([columns="2"]) {
@@ -23,33 +31,89 @@ grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(6, minma
 }
 
 :host([gap="none"]) {
-gap: var(--helix-space-none);
+--_grid-gap: var(--helix-space-none);
 }
 :host([gap="2xs"]) {
-gap: var(--helix-space-2xs);
+--_grid-gap: var(--helix-space-2xs);
 }
 :host([gap="xs"]) {
-gap: var(--helix-space-xs);
+--_grid-gap: var(--helix-space-xs);
 }
 :host([gap="sm"]) {
-gap: var(--helix-space-sm);
+--_grid-gap: var(--helix-space-sm);
 }
 
 :host([gap="md"]) {
-gap: var(--helix-space-md);
+--_grid-gap: var(--helix-space-md);
 }
 :host([gap="lg"]) {
-gap: var(--helix-space-lg);
+--_grid-gap: var(--helix-space-lg);
 }
 :host([gap="xl"]) {
-gap: var(--helix-space-xl);
+--_grid-gap: var(--helix-space-xl);
 }
 :host([gap="2xl"]) {
-gap: var(--helix-space-2xl);
+--_grid-gap: var(--helix-space-2xl);
 }
 
 :host([gap="3xl"]) {
-gap: var(--helix-space-3xl);
+--_grid-gap: var(--helix-space-3xl);
+}
+
+:host([row-gap="none"]) {
+--_grid-row-gap: var(--helix-space-none);
+}
+:host([row-gap="2xs"]) {
+--_grid-row-gap: var(--helix-space-2xs);
+}
+:host([row-gap="xs"]) {
+--_grid-row-gap: var(--helix-space-xs);
+}
+:host([row-gap="sm"]) {
+--_grid-row-gap: var(--helix-space-sm);
+}
+:host([row-gap="md"]) {
+--_grid-row-gap: var(--helix-space-md);
+}
+:host([row-gap="lg"]) {
+--_grid-row-gap: var(--helix-space-lg);
+}
+:host([row-gap="xl"]) {
+--_grid-row-gap: var(--helix-space-xl);
+}
+:host([row-gap="2xl"]) {
+--_grid-row-gap: var(--helix-space-2xl);
+}
+:host([row-gap="3xl"]) {
+--_grid-row-gap: var(--helix-space-3xl);
+}
+
+:host([column-gap="none"]) {
+--_grid-column-gap: var(--helix-space-none);
+}
+:host([column-gap="2xs"]) {
+--_grid-column-gap: var(--helix-space-2xs);
+}
+:host([column-gap="xs"]) {
+--_grid-column-gap: var(--helix-space-xs);
+}
+:host([column-gap="sm"]) {
+--_grid-column-gap: var(--helix-space-sm);
+}
+:host([column-gap="md"]) {
+--_grid-column-gap: var(--helix-space-md);
+}
+:host([column-gap="lg"]) {
+--_grid-column-gap: var(--helix-space-lg);
+}
+:host([column-gap="xl"]) {
+--_grid-column-gap: var(--helix-space-xl);
+}
+:host([column-gap="2xl"]) {
+--_grid-column-gap: var(--helix-space-2xl);
+}
+:host([column-gap="3xl"]) {
+--_grid-column-gap: var(--helix-space-3xl);
 }
 
 :host([align-items="start"]) {
@@ -62,6 +126,45 @@ align-items: center;
 align-items: end;
 }
 
+:host([justify-items="start"]) {
+justify-items: start;
+}
+:host([justify-items="center"]) {
+justify-items: center;
+}
+:host([justify-items="end"]) {
+justify-items: end;
+}
+
+:host([auto-flow="column"]) {
+grid-auto-flow: column;
+}
+:host([auto-flow="dense"]) {
+grid-auto-flow: dense;
+}
+:host([auto-flow="column-dense"]) {
+grid-auto-flow: column dense;
+}
+
+::slotted([data-grid-span="full"]) {
+grid-column: 1 / -1;
+}
+::slotted([data-grid-span="2"]) {
+grid-column: span 2;
+}
+::slotted([data-grid-span="3"]) {
+grid-column: span 3;
+}
+::slotted([data-grid-span="4"]) {
+grid-column: span 4;
+}
+::slotted([data-grid-span="5"]) {
+grid-column: span 5;
+}
+::slotted([data-grid-span="6"]) {
+grid-column: span 6;
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -13,6 +13,17 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * If you set both, `min` wins. The grid is presentation only, so there is no
  * headless tier.
  *
+ * `row-gap` and `column-gap` set one axis each and win over `gap` on theirs.
+ * `--grid-rows` and `--grid-areas` set the rows and named areas, and a child
+ * takes its place with `grid-area` in your own stylesheet.
+ *
+ * **A child can span columns with `data-grid-span`.** `data-grid-span="full"`
+ * runs from the first column to the last, such as a heading across a set of
+ * cards, and a number from `2` to `6` spans that many columns. A number wider
+ * than the grid adds columns of no width beside the real ones, as CSS does,
+ * so in a `min` grid, whose count changes with its width, use `full` for a
+ * child that must span them all.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -21,7 +32,9 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  *
  * @slot - The items to lay out.
  *
+ * @cssproperty --grid-areas - The named areas, as `grid-template-areas` takes them, such as `"rail main"`. A child takes its area with `grid-area`.
  * @cssproperty --grid-columns - An explicit track list. It overrides `min` and `columns`. Use it for tracks of unequal widths, which neither attribute can set.
+ * @cssproperty --grid-rows - An explicit row track list, such as `auto minmax(0, 1fr) auto`. Rows are sized by their content when it is unset.
  */
 export declare class HelixGrid extends HelixElement {
     /**
@@ -40,6 +53,21 @@ export declare class HelixGrid extends HelixElement {
      * wide its tracks are.
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * How cells fill the grid when no child places itself, set as
+     * `grid-auto-flow`.
+     *
+     * `column` fills each column before the next. `dense` and `column-dense`
+     * also move a later small cell back into an earlier gap. Moving them changes
+     * only where they are drawn, so focus and a screen reader still follow the
+     * markup.
+     */
+    autoFlow?: 'row' | 'column' | 'dense' | 'column-dense';
+    /**
+     * The space between columns, as a step on the space scale. Wins over `gap`
+     * across the row.
+     */
+    columnGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
      * A fixed number of equal columns.
      *
@@ -51,6 +79,13 @@ export declare class HelixGrid extends HelixElement {
      * The space between cells, as a step on the space scale.
      */
     gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * How each cell aligns within its column. Sets `justify-items`.
+     *
+     * Named for the CSS property it sets, the way `alignItems` is. Absent, every
+     * cell stretches to the width of its column.
+     */
+    justifyItems?: 'start' | 'center' | 'end' | 'stretch';
     /**
      * The minimum column width. The grid fits as many columns as the width allows.
      *
@@ -62,6 +97,11 @@ export declare class HelixGrid extends HelixElement {
      * is two intentions in one element.
      */
     min: string;
+    /**
+     * The space between rows, as a step on the space scale. Wins over `gap` down
+     * the column.
+     */
+    rowGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
     /**
      * The rule the shadow root's own `<style>` holds: the reset, and the track
      * list `min` or an unlisted `columns` asks for.

package/dist/grid/root/grid-root.js

@@ -8,7 +8,7 @@ import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-co
 import { property } from 'lit/decorators.js';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { styles } from './grid-root.css.js';
-const UNINHERITED = '--grid-columns: initial; --_grid-template: initial;';
+const UNINHERITED = '--grid-areas: initial; --grid-columns: initial; --grid-rows: initial; --_grid-template: initial;';
 const NUMBER = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|r?ex|r?ch|r?lh|r?ic|r?cap|%|[sdl]?v(?:w|h|i|b|min|max)|cq(?:w|h|i|b|min|max)|cm|mm|in|pt|pc|q)?$/i;
 const TOKEN = /\s+|(?:calc|clamp|min|max)\(|var\(--[\w-]+|-?(?:\d+\.?\d*|\.\d+)[a-z%]*|[(),+*/-]/giy;
 const lengthOf = (value) => {
@@ -75,15 +75,27 @@ let HelixGrid = class HelixGrid extends HelixElement {
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixGrid.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'auto-flow', reflect: true })
+], HelixGrid.prototype, "autoFlow", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixGrid.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true, type: Number })
 ], HelixGrid.prototype, "columns", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixGrid.prototype, "gap", void 0);
+__decorate([
+    property({ attribute: 'justify-items', reflect: true })
+], HelixGrid.prototype, "justifyItems", void 0);
 __decorate([
     property()
 ], HelixGrid.prototype, "min", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixGrid.prototype, "rowGap", void 0);
 HelixGrid = __decorate([
     customElement('helix-grid')
 ], HelixGrid);

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

@@ -119,7 +119,8 @@ outline-offset: var(--helix-size-focus-offset);
 font-weight: var(--helix-weight-medium);
 }
 
-[part="live"] {
+[part="live"],
+[part="overview"] {
 block-size: 1px;
 clip-path: inset(50%);
 inline-size: 1px;

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

@@ -60,7 +60,10 @@ var(--helix-color-foreground)
 
 [part="button"] {
 align-items: center;
-background-color: var(--icon-button-background-color, transparent);
+background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, transparent)
+);
 block-size: var(--_icon-button-size);
 border: var(--helix-border-thin) solid transparent;
 
@@ -77,7 +80,10 @@ border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-ink));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink))
+);
 cursor: pointer;
 display: inline-flex;
 
@@ -92,13 +98,24 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 
 :host(:not(:disabled)) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+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-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink-hover))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-ink-hover));
+}
+
+:host(:not(:disabled)) [part="button"]:active {
+--_icon-button-pressed-fill: var(--icon-button-background-color-active);
+--_icon-button-pressed-ink: var(--icon-button-foreground-color-active);
 }
 
 :host([shape="circle"]) [part="button"] {
@@ -123,55 +140,91 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host([emphasis="solid"]) [part="button"] {
-background-color: var(--icon-button-background-color, var(--_icon-button-fill));
+background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, var(--_icon-button-fill))
+);
 border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
+);
 }
 :host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(--icon-button-background-color, var(--_icon-button-fill-hover))
+)
+);
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 
 :host([emphasis="outlined"]) [part="button"] {
 background-color: var(
+--_icon-button-pressed-fill,
+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-foreground-color, var(--_icon-button-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);
 }
 :host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+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-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host([emphasis="subtle"]) [part="button"] {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
+)
 );
 border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);
 }
 
 :host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+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-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:disabled) [part="button"] {
@@ -189,10 +242,12 @@ visibility: hidden;
 }
 
 :host(:state(pending)) [part="button"]::after {
-animation: helix-icon-button-turn var(--_icon-button-turn) linear infinite;
+animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
+linear infinite;
 block-size: var(--icon-button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
-border-block-start-color: currentColor;
+border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);
+border-block-start-color: var(--icon-button-spinner-color, currentColor);
 border-radius: var(--helix-radii-full);
 box-sizing: border-box;
 content: "";

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

@@ -25,11 +25,15 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
  *
  * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
+ * @cssproperty --icon-button-background-color-active - Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
  * @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-foreground-color-active - Icon color while the button is pressed. Without it, a press shows the color of the state under it.
  * @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.
+ * @cssproperty --icon-button-spinner-color - Color of the ring a pending button turns. It follows the icon's color.
+ * @cssproperty --icon-button-spinner-duration - How long the ring takes to turn once.
  * @cssproperty --icon-button-spinner-size - Size of the ring a pending button turns.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden icon.

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

@@ -39,6 +39,33 @@ padding-inline: var(--_kbd-inset);
 padding-block-start: var(--helix-border-thin);
 }
 
+:host([caps]) [part="kbd"] {
+background-color: transparent;
+border: 0;
+box-shadow: none;
+gap: var(--kbd-gap, var(--helix-space-2xs));
+min-inline-size: 0;
+padding: 0;
+}
+
+:host([caps]) [part="key"] {
+align-items: center;
+background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));
+block-size: var(--_kbd-height);
+border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));
+display: inline-flex;
+justify-content: center;
+min-inline-size: var(--_kbd-height);
+padding-block-start: var(--helix-border-thin);
+padding-inline: var(--_kbd-inset);
+}
+
+[part="separator"] {
+color: var(--kbd-separator-color, var(--helix-color-foreground-muted));
+}
+
 @media print {
 :host {
 box-shadow: none;

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

@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --kbd-background-color - The fill of the key.
  * @cssproperty --kbd-border-color - The color of the key's border and its bottom edge.
+ * @cssproperty --kbd-gap - The space between two keys of a chord under `caps`.
+ * @cssproperty --kbd-separator-color - The color of the `+` between two keys of a chord under `caps`.
  */
 export declare class HelixKbd extends HelixHeadlessKbd {
     static styles: CSSResultGroup;

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

@@ -20,6 +20,10 @@ min-inline-size: 0;
 display: none;
 }
 
+[part="item"] {
+transform: translate(var(--lightbox-pan-x), var(--lightbox-pan-y)) scale(var(--lightbox-zoom));
+}
+
 [part="item"] ::slotted(*) {
 max-block-size: 100%;
 max-inline-size: 100%;

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

@@ -114,6 +114,27 @@ block-size: var(--helix-size-icon);
 inline-size: var(--helix-size-icon);
 }
 
+[part="previous"] ::slotted(*),
+[part="next"] ::slotted(*),
+[part="dismiss"] ::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+:host(:state(zoomable)) [part="dialog"] {
+touch-action: none;
+}
+
+:host(:state(zoomable)) [part="viewport"] {
+cursor: zoom-in;
+}
+
+:host(:state(zoomed)) [part="viewport"] {
+cursor: grab;
+}
+
 [part="previous"]:hover,
 [part="next"]:hover,
 [part="dismiss"]:hover {
@@ -133,6 +154,25 @@ cursor: default;
 opacity: 0.4;
 }
 
+[part="counter"] {
+background-color: var(--helix-color-surface-overlay);
+border-radius: var(--helix-radii-full);
+box-shadow: var(--helix-shadow-md);
+color: var(--lightbox-foreground, var(--helix-color-foreground));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+inset-block-start: var(--lightbox-padding, var(--helix-space-md));
+inset-inline-start: var(--lightbox-padding, var(--helix-space-md));
+line-height: var(--helix-leading-tight);
+padding: var(--helix-space-2xs) var(--helix-space-sm);
+position: absolute;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(idle)) [part="counter"],
 :host(:state(idle)) [part="previous"],
 :host(:state(idle)) [part="next"],
 :host(:state(idle)) [part="dismiss"] {
@@ -141,6 +181,7 @@ visibility: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
+[part="counter"],
 [part="previous"],
 [part="next"],
 [part="dismiss"] {

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

@@ -61,6 +61,22 @@ stroke: var(--chart-series);
 color: var(--chart-series);
 }
 
+[part~="marker"] {
+background-color: var(--chart-series);
+block-size: var(--line-chart-marker-size, 6px);
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thin)
+var(--line-chart-marker-ring-color, var(--helix-color-background));
+inline-size: var(--line-chart-marker-size, 6px);
+pointer-events: none;
+position: absolute;
+translate: -50% -50%;
+}
+
+:host(:dir(rtl)) [part~="marker"] {
+translate: 50% -50%;
+}
+
 :host([terminus="ring"]) [part="svg"] {
 mask-composite: intersect;
 mask-image: var(--_line-chart-holes);

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

@@ -38,6 +38,8 @@ import '../../tooltip/index.js';
  * @cssproperty --line-chart-block-size - Height of the drawing.
  * @cssproperty --line-chart-gap - Space between the drawing and its labels.
  * @cssproperty --line-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
+ * @cssproperty --line-chart-marker-ring-color - Color of the ring round the mark on a reading, which matches the page. Change it when the chart sits on another surface.
+ * @cssproperty --line-chart-marker-size - Size of the mark on a reading, under `markers`.
  * @cssproperty --line-chart-width - Thickness of a line. Overrides `--chart-stroke`.
  */
 export declare class HelixLineChart extends HelixHeadlessLineChart {

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

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
-[part="row"] {
+[part~="row"] {
 align-items: center;
 display: grid;
 
@@ -72,4 +72,24 @@ grid-row: 1 / span 2;
 grid-template-columns: subgrid;
 grid-template-rows: subgrid;
 text-decoration: none;
+}
+
+[part~="row-current"] {
+background-color: var(--list-item-current-background-color, var(--helix-color-well));
+border-radius: var(--helix-radii-sm);
+}
+
+[part~="row"]: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);
+}
+
+:host(:state(selected)) [part~="row"] {
+background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));
+border-radius: var(--helix-radii-sm);
+}
+
+:host([disabled]) {
+opacity: var(--list-item-disabled-opacity, 0.5);
 }`);

package/dist/list/item/list-item.d.ts

@@ -14,9 +14,12 @@ import { type CSSResultGroup, type TemplateResult } from 'lit';
  *
  * @csspart rail - The cell that holds the number in a railed list.
  *
+ * @cssproperty --list-item-current-background-color - The fill behind a row that is `current`.
+ * @cssproperty --list-item-disabled-opacity - The opacity of a `disabled` row.
  * @cssproperty --list-item-padding - The padding inside the row.
  * @cssproperty --list-item-rail-content - What the rail cell shows. The list sets it.
  * @cssproperty --list-item-rail-display - Whether the row has a rail. The list sets it.
+ * @cssproperty --list-item-selected-background-color - The fill behind a selected row, in a list that selects.
  * @cssproperty --list-item-term-weight - The font weight of a term in a description list.
  */
 export declare class HelixListItem extends HelixHeadlessListItem {