@fusion.dev/helix 0.142.0 → 0.143.0

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

@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary A person or entity, shown as an image or as their initials.
  *
  * @description
- * The font size of the initials is set in `em` against the avatar's own
- * dimension, so the initials scale with every size, including a size you set
- * through `--avatar-size`.
+ * The font size of the initials is a share of the avatar's own size, so the
+ * initials scale with every size, including a size you set through
+ * `--avatar-size`.
  *
  * @since 0.1.0
  * @status stable

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

@@ -20,7 +20,8 @@ block-size: var(--_badge-size);
 border-radius: var(--helix-radii-full);
 
 box-shadow: 0 0 0 var(--helix-border-thick) var(--badge-ring-color, var(--helix-color-background));
-color: var(--_badge-on);
+
+color: var(--badge-color, var(--_badge-on));
 display: inline-flex;
 font-size: var(--_badge-text);
 font-weight: var(--helix-weight-semibold);
@@ -101,7 +102,7 @@ background-color: var(--badge-background-color, var(--helix-color-danger-surface
 
 :host([tone="neutral"]) [part="indicator"] {
 background-color: var(--badge-background-color, var(--helix-color-surface-raised));
-color: var(--helix-color-foreground);
+color: var(--badge-color, var(--helix-color-foreground));
 }
 
 @media print {

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

@@ -15,6 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/badge
  *
  * @cssproperty --badge-background-color - The fill of the indicator.
+ * @cssproperty --badge-color - The color of the count, to pair with a fill set through `--badge-background-color`.
  * @cssproperty --badge-offset - Pulls the mark in from the corner, along both axes.
  * @cssproperty --badge-ring-color - The color of the ring between the indicator and what is behind it.
  */

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

@@ -289,4 +289,14 @@ stop-opacity: calc(0.35 * var(--helix-material-opacity));
 :host {
 print-color-adjust: exact;
 }
+}
+
+[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/blockquote/root/blockquote-root.css.js

@@ -3,6 +3,10 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
+[part="figure"] {
+margin: var(--helix-space-none);
+}
+
 [part="blockquote"] {
 display: block;
 margin: var(--helix-space-none);

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

@@ -39,6 +39,7 @@ border-color: transparent;
 }
 
 :host([separation="plain"]) {
+--card-shadow: none;
 background-color: transparent;
 border-color: transparent;
 }

package/dist/carousel/root/carousel-root.js

@@ -7,9 +7,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessCarousel } from '@fusion.dev/helix-headless/carousel';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './carousel-root.css.js';
 let HelixCarousel = class HelixCarousel extends HelixHeadlessCarousel {
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ attribute: 'controls-align', reflect: true })

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

@@ -54,7 +54,7 @@ border-color: var(--checkbox-border-color, var(--helix-color-foreground-muted));
 }
 
 :host(:state(checked)) [part="control"],
-:host([indeterminate]) [part="control"] {
+:host(:state(indeterminate)) [part="control"] {
 border-color: var(
 --checkbox-border-color,
 var(--checkbox-checked-color, var(--helix-color-foreground))
@@ -78,7 +78,7 @@ transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
 }
 
 :host(:state(checked)) [part~="mark"],
-:host([indeterminate]) [part~="mark"] {
+:host(:state(indeterminate)) [part~="mark"] {
 scale: 1;
 }
 
@@ -97,7 +97,7 @@ border-color: var(--helix-color-danger);
 }
 
 :host(:state(invalid):state(checked)) [part="control"],
-:host(:state(invalid)[indeterminate]) [part="control"] {
+:host(:state(invalid):state(indeterminate)) [part="control"] {
 border-color: var(--helix-color-danger);
 }
 

package/dist/color-picker/root/color-picker-root.d.ts

@@ -2,7 +2,6 @@ import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picke
 import type { CSSResultGroup } from 'lit';
 import '../../button/index.js';
 import '../../button-group/index.js';
-import '../../icon/index.js';
 import '../../slider/index.js';
 /**
  * @summary A color picker made of a square and two ramps.

package/dist/color-picker/root/color-picker-root.js

@@ -8,7 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessColorPicker } from '@fusion.dev/helix-headless/color-picker';
 import '../../button/index.js';
 import '../../button-group/index.js';
-import '../../icon/index.js';
 import '../../slider/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './color-picker-root.css.js';

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

@@ -97,7 +97,7 @@ padding: var(--helix-space-none);
 position: absolute;
 }
 
-[part="create"] {
+[part~="create"] {
 all: unset;
 
 border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
@@ -114,14 +114,15 @@ text-align: start;
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="create"]:hover {
+[part~="create"]:hover,
+[part~="create-active"] {
 background-color: light-dark(
 color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
 color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 );
 }
 
-[part="create"]:focus-visible {
+[part~="create"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
@@ -138,7 +139,7 @@ display: block;
 transition: none;
 }
 
-[part="create"] {
+[part~="create"] {
 transition: none;
 }
 }

package/dist/data-table/root/data-table-root.css.js

@@ -86,6 +86,13 @@ border-block-end-color: transparent;
 cursor: pointer;
 }
 
+[part~="cell"]:focus-visible,
+[part~="select"]:focus-visible,
+[part="select-all"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 [part~="select"],
 [part="select-all"] {
 align-items: center;

package/dist/date-picker/root/date-picker-root.css.js

@@ -56,12 +56,24 @@ inline-size: var(--_calendar-day);
 justify-content: center;
 }
 
-[part="previous"]:hover,
-[part="next"]:hover {
+[part="previous"]:hover:not(:disabled),
+[part="next"]:hover:not(:disabled) {
 background-color: var(--helix-color-surface-sunken);
 color: var(--helix-color-foreground);
 }
 
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="previous"]:disabled,
+[part="next"]:disabled {
+cursor: default;
+opacity: 0.4;
+}
+
 [part="previous"] svg,
 [part="next"] svg,
 ::slotted([slot="previous-icon"]),
@@ -167,7 +179,7 @@ color: var(--helix-color-foreground-inverse);
 cursor: default;
 }
 
-[part~="cell"][aria-disabled] [part~="day"] {
+[part~="day-disabled"] {
 color: var(--helix-color-foreground-subtle);
 opacity: 0.4;
 }

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

@@ -175,4 +175,14 @@ stroke-opacity: calc(0.62 * var(--helix-material-opacity));
 
 :host([material="frosted"]) [part~="segment"] {
 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/drawer/root/drawer-root.css.js

@@ -55,6 +55,8 @@ flex-direction: column;
 outline: none;
 position: fixed;
 
+transform: var(--_drawer-away);
+
 transition:
 transform var(--helix-duration-normal) var(--helix-easing-decelerate),
 display var(--helix-duration-normal) allow-discrete,
@@ -62,6 +64,10 @@ overlay var(--helix-duration-normal) allow-discrete;
 z-index: var(--helix-layer-overlay);
 }
 
+[part="panel"]:not([open]) {
+display: none;
+}
+
 :host([material="glass"]) [part="panel"] {
 backdrop-filter: var(--drawer-backdrop, var(--helix-material-backdrop));
 background-color: var(
@@ -84,7 +90,7 @@ block-size: 100%;
 inline-size: min(var(--_drawer-size), 100%);
 inset-block: 0;
 inset-inline-end: 0;
-transform: translateX(100%);
+--_drawer-away: translateX(100%);
 }
 
 :host([placement="start"]) [part="panel"] {
@@ -94,7 +100,7 @@ block-size: 100%;
 inline-size: min(var(--_drawer-size), 100%);
 inset-block: 0;
 inset-inline-start: 0;
-transform: translateX(-100%);
+--_drawer-away: translateX(-100%);
 }
 
 :host([placement="bottom"]) [part="panel"] {
@@ -103,7 +109,7 @@ border-end-end-radius: var(--helix-radii-none);
 block-size: min(var(--_drawer-size), 100%);
 inset-block-end: 0;
 inset-inline: 0;
-transform: translateY(100%);
+--_drawer-away: translateY(100%);
 }
 
 :host([placement="top"]) [part="panel"] {
@@ -112,7 +118,16 @@ border-start-end-radius: var(--helix-radii-none);
 block-size: min(var(--_drawer-size), 100%);
 inset-block-start: 0;
 inset-inline: 0;
-transform: translateY(-100%);
+--_drawer-away: translateY(-100%);
+}
+
+:host(:dir(rtl):not([placement])) [part="panel"],
+:host(:dir(rtl)[placement="end"]) [part="panel"] {
+--_drawer-away: translateX(-100%);
+}
+
+:host(:dir(rtl)[placement="start"]) [part="panel"] {
+--_drawer-away: translateX(100%);
 }
 
 :host(:state(open)) [part="panel"] {
@@ -122,6 +137,12 @@ box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));
 transform: translate(0, 0);
 }
 
+@starting-style {
+:host(:state(open)) [part="panel"][open] {
+transform: var(--_drawer-away);
+}
+}
+
 [part="header"] {
 flex: 0 0 auto;
 }

package/dist/element-events.generated.js

@@ -19,9 +19,9 @@ registerElementEvents({
         'helix-remove',
         'helix-select',
     ],
-    'helix-carousel': ['helix-select'],
-    'helix-chat': ['helix-before-pin', 'helix-history', 'helix-send'],
-    'helix-chat-composer': ['helix-send'],
+    '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-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -51,14 +51,25 @@ registerElementEvents({
         'input',
         'toggle',
     ],
-    'helix-command': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-command': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-filter',
+        'helix-select',
+        'toggle',
+    ],
     'helix-copy-button': ['helix-copy'],
     'helix-data-table': [
+        'helix-activate',
         'helix-filter',
+        'helix-filtered',
         'helix-navigate',
         'helix-reorder',
+        'helix-reordered',
         'helix-select',
+        'helix-selected',
         'helix-sort',
+        'helix-sorted',
     ],
     'helix-date-input': [
         'change',
@@ -99,6 +110,7 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-heatmap': ['helix-resize'],
+    'helix-icon': ['error'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'input'],
     'helix-kbd': ['helix-shortcut'],
@@ -112,7 +124,10 @@ registerElementEvents({
     ],
     'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
     'helix-map': [
+        'change',
         'helix-activate',
+        'helix-before-change',
+        'helix-before-toggle',
         'helix-map-cluster',
         'helix-map-pan',
         'helix-map-part-change',
@@ -133,18 +148,19 @@ registerElementEvents({
     'helix-map-terrain': ['helix-map-part-change'],
     'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-menu-item': ['helix-select'],
+    'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-notification': ['helix-dismiss', 'helix-read'],
-    'helix-notification-group': ['helix-before-close', 'helix-before-open'],
+    'helix-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-notifications': ['helix-dismiss', 'helix-read'],
     'helix-number-input': ['change', 'helix-before-change', 'input'],
     'helix-object-inspector': ['helix-copy'],
     'helix-option': ['helix-select'],
     'helix-outline': ['helix-activate'],
-    'helix-pagination': ['helix-navigate'],
-    'helix-pagination-size': ['helix-before-change'],
+    'helix-pagination': ['helix-activate', 'helix-navigate'],
+    'helix-pagination-size': ['change', 'helix-before-change', 'input'],
     'helix-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],
     'helix-popover': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-qr-code': ['error'],
     'helix-radio': ['helix-select'],
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-rating': ['change', 'helix-before-change', 'input'],
@@ -163,17 +179,24 @@ registerElementEvents({
         'helix-before-change',
         'helix-before-close',
         'helix-before-open',
+        'helix-filter',
         'input',
         'toggle',
     ],
     'helix-slider': ['change', 'helix-before-change', 'input'],
     'helix-speed-dial': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
     'helix-speed-dial-item': ['helix-select'],
-    'helix-splitter': ['helix-before-collapse', 'helix-before-resize'],
+    'helix-splitter': [
+        'helix-before-collapse',
+        'helix-before-resize',
+        'helix-collapse',
+        'helix-resized',
+    ],
     'helix-step': ['helix-select'],
     '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-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
@@ -192,7 +215,15 @@ registerElementEvents({
     'helix-toggle': ['helix-select'],
     'helix-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
     'helix-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-tour': ['helix-before-activate', 'helix-before-close', 'helix-complete', 'helix-tour-ask'],
+    'helix-tour': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-before-close',
+        'helix-before-open',
+        'helix-complete',
+        'helix-tour-ask',
+        'toggle',
+    ],
     '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'],

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../tag/index.js';
 /**
  * @summary A field for choosing files from a picker or by dropping them on it.

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

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

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../option/index.js';
 /**
  * @summary A text field for filters, with the active filters shown in it as tokens.

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

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

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

@@ -42,6 +42,9 @@ export declare class HelixGrid extends HelixElement {
     alignItems?: 'start' | 'center' | 'end' | 'stretch';
     /**
      * A fixed number of equal columns.
+     *
+     * Two to six are plain CSS. Any other count is written into the shadow
+     * root's rule, which the server renders too.
      */
     columns?: number;
     /**
@@ -51,12 +54,17 @@ export declare class HelixGrid extends HelixElement {
     /**
      * The minimum column width. The grid fits as many columns as the width allows.
      *
+     * A length, such as `12rem`, or `calc()`, `clamp()`, `min()`, `max()` and
+     * `var()` over lengths. Anything else is refused with a warning, and the grid
+     * lays out by `columns`.
+     *
      * Takes precedence over `columns`: a grid that both fixes a count and reflows
      * is two intentions in one element.
      */
     min: string;
     /**
-     * Writes the track list into the shadow root's own stylesheet.
+     * The rule the shadow root's own `<style>` holds: the reset, and the track
+     * list `min` or an unlisted `columns` asks for.
      *
      * Into a `<style>` rather than onto `this.style`, and the difference is
      * hydration. An inline style on the host is an attribute the element gives
@@ -64,10 +72,11 @@ export declare class HelixGrid extends HelixElement {
      * it and hydration reports a mismatch it will not patch up. The shadow root
      * is not part of the tree React hydrates, so a rule written there is free.
      *
-     * The element is filled imperatively because Lit refuses expressions inside
-     * `<style>`: it is an invalid binding location and throws while rendering
-     * rather than at build time. Hence a static, empty element in the template
-     * and its `textContent` set here.
+     * **Static text, so the server renders it.** Lit refuses an expression inside
+     * `<style>`, and a rule filled in after upgrade left a server-rendered `min`
+     * grid in one column until then. `unsafeStatic` joins the text into the
+     * template itself, so it is safe only because `min` passed `lengthOf` and a
+     * count is an integer.
      *
      * It sets a custom property rather than the track list itself. A shadow
      * root's adopted stylesheets cascade *after* its own `<style>` elements, and
@@ -75,13 +84,8 @@ export declare class HelixGrid extends HelixElement {
      * one in the stylesheet and every `min` grid came out a single column. The
      * stylesheet only ever reads `--_grid-template`, so there is nothing to
      * lose against.
-     *
-     * The consequence is that a server-rendered grid falls back to the
-     * stylesheet's single column until it upgrades. That is why `columns` is also
-     * expressed as plain CSS below: the fixed-count case, which can be enumerated,
-     * needs no JavaScript at all, and only `min` depends on this.
      */
-    private applyTemplate;
+    private templateRule;
     protected updated(changed: PropertyValues): void;
     protected render(): TemplateResult;
     static styles: CSSResultGroup;

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

@@ -4,36 +4,70 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
-import { html } from 'lit';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 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 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) => {
+    const min = value?.trim() ?? '';
+    if (min === '' || min.includes('/*')) {
+        return undefined;
+    }
+    if (!min.includes('(')) {
+        return NUMBER.test(min) && /[a-z%]$/i.test(min) ? min : undefined;
+    }
+    let depth = 0;
+    TOKEN.lastIndex = 0;
+    while (TOKEN.lastIndex < min.length) {
+        const at = TOKEN.lastIndex;
+        const token = TOKEN.exec(min)?.[0];
+        if (token === undefined || TOKEN.lastIndex === at) {
+            return undefined;
+        }
+        if (/\d/.test(token) && /^-?[\d.]/.test(token) && !NUMBER.test(token)) {
+            return undefined;
+        }
+        depth += token.endsWith('(') || token.startsWith('var(') ? 1 : token === ')' ? -1 : 0;
+        if (depth < 0) {
+            return undefined;
+        }
+    }
+    return depth === 0 ? min : undefined;
+};
 let HelixGrid = class HelixGrid extends HelixElement {
     constructor() {
         super(...arguments);
         this.min = '';
     }
-    applyTemplate() {
-        const sheet = this.renderRoot.querySelector('#template');
-        if (!sheet) {
-            return;
+    templateRule() {
+        const min = lengthOf(this.min);
+        if (min !== undefined) {
+            return `:host { ${UNINHERITED} --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`;
         }
-        const length = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|%|v[hw]|ch|ex|cm|mm|in|pt|pc|q)$/i;
-        const min = this.min?.trim() ?? '';
-        sheet.textContent =
-            min !== '' && length.test(min)
-                ? `:host { ${UNINHERITED} --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`
-                : `:host { ${UNINHERITED} }`;
+        const count = Number(this.columns);
+        if (Number.isInteger(count) && count > 6) {
+            return `:host { ${UNINHERITED} --_grid-template: repeat(${count}, minmax(0, 1fr)); }`;
+        }
+        return `:host { ${UNINHERITED} }`;
     }
     updated(changed) {
         super.updated(changed);
-        if (changed.has('min')) {
-            this.applyTemplate();
+        const min = this.min?.trim() ?? '';
+        if (changed.has('min') && min !== '' && lengthOf(min) === undefined) {
+            reportRuntime({
+                kind: 'refused-length',
+                message: `<helix-grid min="${min}"> is not a length the grid can write, so it lays out by ` +
+                    '`columns`. Write a length such as `12rem`, or `calc()`, `clamp()`, `min()`, `max()` ' +
+                    'or `var()` over lengths.',
+                tag: this.localName,
+            });
         }
     }
     render() {
-        return html `<style id="template">:host { --grid-columns: initial; --_grid-template: initial; }</style>
+        return html `<style id="template">${unsafeStatic(this.templateRule())}</style>
       <slot></slot>`;
     }
     static { this.styles = styles; }