@fusion.dev/helix 0.144.0 → 0.145.0

package/dist/element-events.generated.js

@@ -3,6 +3,7 @@ registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
+    'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
     'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
@@ -22,7 +23,7 @@ registerElementEvents({
     ],
     'helix-carousel': ['helix-activate', 'helix-select'],
     'helix-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
-    'helix-chat-composer': ['helix-send', 'input'],
+    'helix-chat-composer': ['helix-send', 'helix-typing', 'input'],
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -62,8 +63,10 @@ registerElementEvents({
     'helix-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-data-table': [
         'helix-activate',
+        'helix-expand',
         'helix-filter',
         'helix-filtered',
+        'helix-load-more',
         'helix-navigate',
         'helix-reorder',
         'helix-reordered',
@@ -124,6 +127,8 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    'helix-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-list-item': ['helix-action'],
     'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
     'helix-map': [
         'change',
@@ -137,6 +142,7 @@ registerElementEvents({
         'helix-map-rotate',
         'helix-map-tilt',
         'helix-map-zoom',
+        'helix-toggle',
     ],
     'helix-map-area': ['helix-map-part-change'],
     'helix-map-buildings': ['helix-map-part-change'],
@@ -153,9 +159,15 @@ registerElementEvents({
     'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-notification': ['helix-dismiss', 'helix-read'],
     'helix-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-notifications': ['helix-dismiss', 'helix-read'],
+    'helix-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
     'helix-number-input': ['change', 'helix-before-change', 'input'],
-    'helix-object-inspector': ['helix-copy'],
+    'helix-object-inspector': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-copy',
+        'helix-filter',
+        'helix-filtered',
+    ],
     'helix-option': ['helix-select'],
     'helix-outline': ['helix-activate'],
     'helix-pagination': ['helix-activate', 'helix-navigate'],
@@ -172,10 +184,14 @@ registerElementEvents({
         'helix-before-split',
         'helix-caret',
         'helix-console',
+        'helix-edit',
+        'helix-panel-resize',
         'helix-resize',
+        'helix-split',
     ],
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
-    'helix-sandbox-source': ['helix-before-edit', 'helix-caret'],
+    'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
+    'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [
         'change',
         'helix-before-change',
@@ -198,8 +214,8 @@ registerElementEvents({
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-select'],
-    'helix-table': ['helix-sort'],
-    'helix-table-column': ['helix-before-resize'],
+    'helix-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
     'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
@@ -229,9 +245,42 @@ registerElementEvents({
     ],
     'helix-tour-stop': ['helix-tour-ask'],
     'helix-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
-    'helix-tree-item': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-video': ['ended', 'helix-next', 'helix-previous', 'pause', 'play'],
-    'helix-video-playlist': ['helix-activate', 'helix-before-activate'],
+    'helix-tree-item': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-load',
+        'helix-select',
+        'toggle',
+    ],
+    'helix-video': [
+        'abort',
+        'canplay',
+        'canplaythrough',
+        'durationchange',
+        'emptied',
+        'ended',
+        'error',
+        'helix-next',
+        'helix-previous',
+        'loadeddata',
+        'loadedmetadata',
+        'loadstart',
+        'pause',
+        'play',
+        'playing',
+        'progress',
+        'ratechange',
+        'resize',
+        'seeked',
+        'seeking',
+        'stalled',
+        'suspend',
+        'timeupdate',
+        'volumechange',
+        'waiting',
+    ],
+    'helix-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
     'helix-video-playlist-item': ['helix-select'],
     'helix-video-playlist-menu': ['helix-select'],
+    'helix-virtual-list': ['helix-load-more', 'helix-range-change'],
 });

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

@@ -1,8 +1,14 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+
+--_flex-column-gap: var(--_flex-gap);
+--_flex-gap: var(--helix-space-none);
+--_flex-row-gap: var(--_flex-gap);
+
+column-gap: var(--_flex-column-gap);
 display: flex;
 flex-direction: row;
-gap: var(--helix-space-none);
+row-gap: var(--_flex-row-gap);
 }
 
 :host([inline]) {
@@ -13,34 +19,127 @@ display: inline-flex;
 flex-direction: column;
 }
 
+:host([direction="row-reverse"]) {
+flex-direction: row-reverse;
+}
+
+:host([direction="column-reverse"]) {
+flex-direction: column-reverse;
+}
+
+:host([layout="cluster"]),
+:host([layout="flank"]),
+:host([layout="flank-end"]),
+:host([layout="split"]) {
+align-items: center;
+flex-wrap: wrap;
+}
+
+:host([layout="split"]) {
+justify-content: space-between;
+}
+
+:host([layout="flank"]) ::slotted(:first-child),
+:host([layout="flank-end"]) ::slotted(:last-child) {
+flex-basis: var(--flex-flank-size, auto);
+flex-grow: 1;
+}
+
+:host([layout="flank"]) ::slotted(:last-child),
+:host([layout="flank-end"]) ::slotted(:first-child) {
+flex-basis: 0;
+flex-grow: 999;
+min-inline-size: var(--flex-flank-min, 50%);
+}
+
 :host([wrap]) {
 flex-wrap: wrap;
 }
 
+:host([wrap="reverse"]) {
+flex-wrap: wrap-reverse;
+}
+
 :host([gap="2xs"]) {
-gap: var(--helix-space-2xs);
+--_flex-gap: var(--helix-space-2xs);
 }
 :host([gap="xs"]) {
-gap: var(--helix-space-xs);
+--_flex-gap: var(--helix-space-xs);
 }
 :host([gap="sm"]) {
-gap: var(--helix-space-sm);
+--_flex-gap: var(--helix-space-sm);
 }
 :host([gap="md"]) {
-gap: var(--helix-space-md);
+--_flex-gap: var(--helix-space-md);
 }
 :host([gap="lg"]) {
-gap: var(--helix-space-lg);
+--_flex-gap: var(--helix-space-lg);
 }
 :host([gap="xl"]) {
-gap: var(--helix-space-xl);
+--_flex-gap: var(--helix-space-xl);
 }
 :host([gap="2xl"]) {
-gap: var(--helix-space-2xl);
+--_flex-gap: var(--helix-space-2xl);
 }
 
 :host([gap="3xl"]) {
-gap: var(--helix-space-3xl);
+--_flex-gap: var(--helix-space-3xl);
+}
+
+:host([row-gap="none"]) {
+--_flex-row-gap: var(--helix-space-none);
+}
+:host([row-gap="2xs"]) {
+--_flex-row-gap: var(--helix-space-2xs);
+}
+:host([row-gap="xs"]) {
+--_flex-row-gap: var(--helix-space-xs);
+}
+:host([row-gap="sm"]) {
+--_flex-row-gap: var(--helix-space-sm);
+}
+:host([row-gap="md"]) {
+--_flex-row-gap: var(--helix-space-md);
+}
+:host([row-gap="lg"]) {
+--_flex-row-gap: var(--helix-space-lg);
+}
+:host([row-gap="xl"]) {
+--_flex-row-gap: var(--helix-space-xl);
+}
+:host([row-gap="2xl"]) {
+--_flex-row-gap: var(--helix-space-2xl);
+}
+:host([row-gap="3xl"]) {
+--_flex-row-gap: var(--helix-space-3xl);
+}
+
+:host([column-gap="none"]) {
+--_flex-column-gap: var(--helix-space-none);
+}
+:host([column-gap="2xs"]) {
+--_flex-column-gap: var(--helix-space-2xs);
+}
+:host([column-gap="xs"]) {
+--_flex-column-gap: var(--helix-space-xs);
+}
+:host([column-gap="sm"]) {
+--_flex-column-gap: var(--helix-space-sm);
+}
+:host([column-gap="md"]) {
+--_flex-column-gap: var(--helix-space-md);
+}
+:host([column-gap="lg"]) {
+--_flex-column-gap: var(--helix-space-lg);
+}
+:host([column-gap="xl"]) {
+--_flex-column-gap: var(--helix-space-xl);
+}
+:host([column-gap="2xl"]) {
+--_flex-column-gap: var(--helix-space-2xl);
+}
+:host([column-gap="3xl"]) {
+--_flex-column-gap: var(--helix-space-3xl);
 }
 
 :host([align-items="start"]) {
@@ -56,6 +155,32 @@ align-items: flex-end;
 align-items: baseline;
 }
 
+:host([align-content="start"]) {
+align-content: flex-start;
+}
+:host([align-content="center"]) {
+align-content: center;
+}
+:host([align-content="end"]) {
+align-content: flex-end;
+}
+:host([align-content="between"]) {
+align-content: space-between;
+}
+:host([align-content="around"]) {
+align-content: space-around;
+}
+:host([align-content="stretch"]) {
+align-content: stretch;
+}
+
+:host([align-items="stretch"]) {
+align-items: stretch;
+}
+
+:host([justify-content="start"]) {
+justify-content: flex-start;
+}
 :host([justify-content="center"]) {
 justify-content: center;
 }

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

@@ -9,7 +9,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * There is no separate Stack component. For a stack, set `direction="column"`.
  *
- * `gap` takes a space token name, so spacing stays on the scale.
+ * `gap` takes a space token name, so spacing stays on the scale. `row-gap`
+ * and `column-gap` set one axis each and win over `gap` on theirs.
+ *
+ * `layout` sets up one of three common patterns, and any attribute you also
+ * write wins over the pattern's own value:
+ *
+ * - `cluster`: items in a wrapping row, centered on one line, such as tags.
+ * - `split`: the first item at the start and the rest pushed to the end, such
+ *   as a title and its actions. Wraps when there is no room.
+ * - `flank` and `flank-end`: a fixed item beside one that takes the rest, such
+ *   as an icon and its text, or a field and its button. The item that takes
+ *   the rest stays at least `--flex-flank-min` wide, and the pair stacks once
+ *   it cannot.
  *
  * Flex is presentation only, so it has no headless tier.
  *
@@ -20,8 +32,19 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @documentation https://fusion.dev/helix/components/flex
  *
  * @slot - The items to lay out.
+ *
+ * @cssproperty --flex-flank-min - The narrowest the growing item of a `flank` layout gets before the two stack, as a share of the row. Defaults to `50%`.
+ * @cssproperty --flex-flank-size - The width of the fixed item of a `flank` layout. Defaults to its own width.
  */
 export declare class HelixFlex extends HelixElement {
+    /**
+     * How the lines of a wrapping row share the space across it, set as
+     * `align-content`.
+     *
+     * Named for the CSS property it sets, the way `alignItems` is. It moves
+     * nothing in a row that does not wrap, which has one line.
+     */
+    alignContent?: 'start' | 'center' | 'end' | 'between' | 'around' | 'stretch';
     /**
      * How items align across the direction, set as `align-items`.
      *
@@ -42,9 +65,18 @@ export declare class HelixFlex extends HelixElement {
      */
     alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     /**
-     * Whether items run across or down.
+     * Space between the items of a row, named on the space scale. Wins over
+     * `gap` across the row.
+     */
+    columnGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items run across or down, and from which end.
+     *
+     * `row-reverse` and `column-reverse` change only where the items are drawn.
+     * Focus and a screen reader still follow the order of the markup, so use
+     * them for a visual order that reads the same either way.
      */
-    direction?: 'row' | 'column';
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
     /**
      * Space between items, named on the space scale.
      */
@@ -62,9 +94,23 @@ export declare class HelixFlex extends HelixElement {
      */
     justifyContent?: 'start' | 'center' | 'end' | 'between' | 'around';
     /**
-     * Whether items wrap onto more lines.
+     * A common layout pattern: `cluster`, `split`, `flank` or `flank-end`.
+     *
+     * Each sets the wrapping, alignment and spread it needs, and an attribute
+     * you write as well wins over it. `flank` holds the first item at its own
+     * width and gives the last one the rest, and `flank-end` does the reverse.
+     */
+    layout?: 'cluster' | 'flank' | 'flank-end' | 'split';
+    /**
+     * Space between the lines of a wrapping row, or between the items of a
+     * column, named on the space scale. Wins over `gap` down the column.
+     */
+    rowGap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Whether items wrap onto more lines. `wrap="reverse"` wraps them upward,
+     * each new line above the one before.
      */
-    wrap: boolean;
+    wrap: boolean | 'reverse';
     protected render(): TemplateResult;
     static styles: CSSResultGroup;
 }

package/dist/flex/root/flex-root.js

@@ -8,6 +8,10 @@ import { customElement, HelixElement } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styles } from './flex-root.css.js';
+const wrapConverter = {
+    fromAttribute: (value) => value === null ? false : value === 'reverse' ? 'reverse' : true,
+    toAttribute: (value) => value === 'reverse' ? 'reverse' : value ? '' : null,
+};
 let HelixFlex = class HelixFlex extends HelixElement {
     constructor() {
         super(...arguments);
@@ -19,9 +23,15 @@ let HelixFlex = class HelixFlex extends HelixElement {
     }
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'align-content', reflect: true })
+], HelixFlex.prototype, "alignContent", void 0);
 __decorate([
     property({ attribute: 'align-items', reflect: true })
 ], HelixFlex.prototype, "alignItems", void 0);
+__decorate([
+    property({ attribute: 'column-gap', reflect: true })
+], HelixFlex.prototype, "columnGap", void 0);
 __decorate([
     property({ reflect: true })
 ], HelixFlex.prototype, "direction", void 0);
@@ -35,7 +45,13 @@ __decorate([
     property({ attribute: 'justify-content', reflect: true })
 ], HelixFlex.prototype, "justifyContent", void 0);
 __decorate([
-    property({ reflect: true, type: Boolean })
+    property({ reflect: true })
+], HelixFlex.prototype, "layout", void 0);
+__decorate([
+    property({ attribute: 'row-gap', reflect: true })
+], HelixFlex.prototype, "rowGap", void 0);
+__decorate([
+    property({ converter: wrapConverter, reflect: true })
 ], HelixFlex.prototype, "wrap", void 0);
 HelixFlex = __decorate([
     customElement('helix-flex')

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,14 @@ 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.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
@@ -21,7 +29,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 +50,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 +76,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 +94,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.