@svelterm/core 0.24.0 → 0.25.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.25.0 — 2026-07-05
+
+Grid and generated-content completeness.
+
+### Added
+
+- **`grid-auto-flow: column`** — auto-placed items fill down each
+  column, wrapping to a new (implicit) column after the explicit row
+  count; implicit columns take the last explicit column's width.
+- **`minmax()` redistribution** — a `fr` track clamped to its
+  `minmax()` minimum leaves the distribution pool and the freed space
+  re-splits among the remaining `fr` tracks (previously other tracks
+  kept their naive share, overflowing the container).
+- **`counter()` in `content:`** — `counter-reset` and
+  `counter-increment` (with optional amounts) resolve in document
+  order; flat namespace, no `counters()` nesting.
+- **Pseudo-elements in table-internal boxes** — `::before`/`::after`
+  now render on rows, row groups, and table boxes per CSS
+  anonymous-box rules (a row pseudo becomes a leading anonymous cell);
+  previously they were silently dropped.
+
 ## 0.24.0 — 2026-07-05
 
 Motion timing completeness: transitions and keyframes behave per spec.

package/dist/src/css/compute.d.ts

@@ -1,5 +1,6 @@
 import { TermNode } from '../renderer/node.js';
 import { NodeMap } from '../utils/node-map.js';
+import { CounterContext } from './counters.js';
 export type StyleMap = NodeMap<ResolvedStyle>;
 import { CSSStyleSheet } from './parser.js';
 import { type MediaContext } from './media.js';
@@ -45,6 +46,9 @@ export interface ResolvedStyle {
     gridRowEnd: number | null;
     gridRowSpan: number | null;
     gridTemplateAreas: string | null;
+    gridAutoFlow: 'row' | 'column';
+    counterReset: string | null;
+    counterIncrement: string | null;
     gridArea: string | null;
     animationName: string | null;
     animationDuration: number;
@@ -95,7 +99,7 @@ export interface ResolvedStyle {
 export declare function defaultStyle(tag?: string): ResolvedStyle;
 export declare function resolveStyles(root: TermNode, stylesheet: CSSStyleSheet, media?: MediaContext, availWidth?: number, availHeight?: number): Map<number, ResolvedStyle>;
 export declare function filterByMedia(stylesheet: CSSStyleSheet, context: MediaContext): CSSStyleSheet;
-export declare function resolveNode(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, variables: Map<number, Map<string, string>>, scheme?: 'dark' | 'light'): void;
+export declare function resolveNode(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, variables: Map<number, Map<string, string>>, scheme?: 'dark' | 'light', counters?: CounterContext): void;
 export declare function applyDeclaration(style: ResolvedStyle, property: string, value: string, scheme?: 'dark' | 'light'): void;
 /**
  * Pair the transition lists per spec: durations/timings repeat

package/dist/src/css/compute.js

@@ -1,5 +1,6 @@
 import { NodeMap } from '../utils/node-map.js';
 import { resolvePseudoElements } from './pseudo-elements.js';
+import { CounterContext } from './counters.js';
 import { matchesSelector } from './selector.js';
 import { resolveColor, expandLightDark } from './color.js';
 import { parseCellValue, parseSizeValue, parseJustify, parseAlign } from './values.js';
@@ -51,7 +52,9 @@ export function defaultStyle(tag) {
         gridTemplateColumns: null, gridTemplateRows: null,
         gridColumnStart: null, gridColumnEnd: null, gridColumnSpan: null,
         gridRowStart: null, gridRowEnd: null, gridRowSpan: null,
-        gridTemplateAreas: null, gridArea: null,
+        gridTemplateAreas: null,
+        gridAutoFlow: 'row',
+        counterReset: null, counterIncrement: null, gridArea: null,
         animationName: null, animationDuration: 0, animationIterationCount: 1,
         animationTimingFunction: 'ease',
         transitionProperty: null, transitionDuration: 0,
@@ -206,7 +209,7 @@ function evaluateSupports(condition) {
     const property = condition.substring(0, colonIdx).trim();
     return SUPPORTED_PROPERTIES.has(property);
 }
-export function resolveNode(node, stylesheet, styles, variables, scheme = 'dark') {
+export function resolveNode(node, stylesheet, styles, variables, scheme = 'dark', counters = new CounterContext()) {
     if (node.nodeType === 'element') {
         const vars = variables.get(node.id) ?? new Map();
         const parentStyle = node.parent ? styles.get(node.parent.id) : undefined;
@@ -214,10 +217,12 @@ export function resolveNode(node, stylesheet, styles, variables, scheme = 'dark'
         styles.set(node.id, resolved);
         node.cache.resolvedStyle = resolved;
         node.cache.classAttr = node.attributes.get('class') ?? '';
-        resolvePseudoElements(node, stylesheet, styles, vars, scheme);
+        // Counter effects apply in document order, before pseudo content
+        counters.enter(resolved);
+        resolvePseudoElements(node, stylesheet, styles, vars, scheme, counters);
     }
     for (const child of node.children) {
-        resolveNode(child, stylesheet, styles, variables, scheme);
+        resolveNode(child, stylesheet, styles, variables, scheme, counters);
     }
 }
 function computeStyle(node, stylesheet, vars, parentStyle, scheme = 'dark') {
@@ -557,6 +562,15 @@ export function applyDeclaration(style, property, value, scheme = 'dark') {
         case 'grid-area':
             parseGridArea(style, value);
             break;
+        case 'grid-auto-flow':
+            style.gridAutoFlow = value.startsWith('column') ? 'column' : 'row';
+            break;
+        case 'counter-reset':
+            style.counterReset = value === 'none' ? null : value;
+            break;
+        case 'counter-increment':
+            style.counterIncrement = value === 'none' ? null : value;
+            break;
         case 'animation':
             parseAnimationShorthand(style, value);
             break;

package/dist/src/css/counters.d.ts

@@ -0,0 +1,13 @@
+/**
+ * CSS counters for `content: counter(name)` — threaded through the
+ * style-resolution walk, which visits elements in document order.
+ * Flat namespace (no per-scope nesting or `counters()` joining yet);
+ * incremental restyles reuse the values from the last full resolve.
+ */
+import type { ResolvedStyle } from './compute.js';
+export declare class CounterContext {
+    private values;
+    /** Apply an element's counter-reset then counter-increment. */
+    enter(style: ResolvedStyle): void;
+    value(name: string): number;
+}

package/dist/src/css/counters.js

@@ -0,0 +1,42 @@
+/**
+ * CSS counters for `content: counter(name)` — threaded through the
+ * style-resolution walk, which visits elements in document order.
+ * Flat namespace (no per-scope nesting or `counters()` joining yet);
+ * incremental restyles reuse the values from the last full resolve.
+ */
+export class CounterContext {
+    values = new Map();
+    /** Apply an element's counter-reset then counter-increment. */
+    enter(style) {
+        if (style.counterReset) {
+            for (const { name, amount } of parseCounterList(style.counterReset, 0)) {
+                this.values.set(name, amount);
+            }
+        }
+        if (style.counterIncrement) {
+            for (const { name, amount } of parseCounterList(style.counterIncrement, 1)) {
+                this.values.set(name, (this.values.get(name) ?? 0) + amount);
+            }
+        }
+    }
+    value(name) {
+        return this.values.get(name) ?? 0;
+    }
+}
+/** Parse `name [amount] name [amount] …` with a per-property default. */
+function parseCounterList(value, defaultAmount) {
+    const out = [];
+    const tokens = value.trim().split(/\s+/);
+    for (let i = 0; i < tokens.length; i++) {
+        const name = tokens[i];
+        const next = tokens[i + 1];
+        if (next !== undefined && /^-?\d+$/.test(next)) {
+            out.push({ name, amount: parseInt(next, 10) });
+            i++;
+        }
+        else {
+            out.push({ name, amount: defaultAmount });
+        }
+    }
+    return out;
+}

package/dist/src/css/pseudo-elements.d.ts

@@ -1,9 +1,10 @@
 import { TermNode } from '../renderer/node.js';
 import { CSSStyleSheet } from './parser.js';
 import { type ResolvedStyle } from './compute.js';
+import type { CounterContext } from './counters.js';
 /**
  * Resolve ::before/::after for one element: build the pseudo's style from
  * matching rules, materialise (or drop) its synthetic box on the node, and
  * record the style under the synthetic node's id.
  */
-export declare function resolvePseudoElements(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, vars: Map<string, string>, scheme: 'dark' | 'light'): void;
+export declare function resolvePseudoElements(node: TermNode, stylesheet: CSSStyleSheet, styles: Map<number, ResolvedStyle>, vars: Map<string, string>, scheme: 'dark' | 'light', counters?: CounterContext): void;

package/dist/src/css/pseudo-elements.js

@@ -8,13 +8,13 @@ import { defaultStyle, applyDeclaration } from './compute.js';
  * matching rules, materialise (or drop) its synthetic box on the node, and
  * record the style under the synthetic node's id.
  */
-export function resolvePseudoElements(node, stylesheet, styles, vars, scheme) {
-    node.pseudoBefore = syncPseudo(node, node.pseudoBefore, 'before', stylesheet, styles, vars, scheme);
-    node.pseudoAfter = syncPseudo(node, node.pseudoAfter, 'after', stylesheet, styles, vars, scheme);
+export function resolvePseudoElements(node, stylesheet, styles, vars, scheme, counters) {
+    node.pseudoBefore = syncPseudo(node, node.pseudoBefore, 'before', stylesheet, styles, vars, scheme, counters);
+    node.pseudoAfter = syncPseudo(node, node.pseudoAfter, 'after', stylesheet, styles, vars, scheme, counters);
 }
-function syncPseudo(host, existing, which, stylesheet, styles, vars, scheme) {
+function syncPseudo(host, existing, which, stylesheet, styles, vars, scheme, counters) {
     const declarations = collectPseudoDeclarations(host, which, stylesheet, vars);
-    const content = resolveContent(declarations, host);
+    const content = resolveContent(declarations, host, counters);
     if (content === null) {
         if (existing)
             styles.delete(existing.id);
@@ -65,22 +65,24 @@ function collectPseudoDeclarations(host, which, stylesheet, vars) {
  * The winning `content` value rendered to text, or null when the pseudo
  * generates no box (no content declaration, `none`/`normal`, or empty).
  */
-function resolveContent(declarations, host) {
+function resolveContent(declarations, host, counters) {
     const winner = declarations.filter(d => d.property === 'content').pop();
     if (!winner)
         return null;
-    const text = parseContentValue(winner.value, host);
+    const text = parseContentValue(winner.value, host, counters);
     return text === '' ? null : text;
 }
-const CONTENT_TOKEN = /"([^"]*)"|'([^']*)'|attr\(\s*([^)\s]+)\s*\)/g;
-/** content: a space-separated sequence of quoted strings and attr() lookups. */
-function parseContentValue(value, host) {
+const CONTENT_TOKEN = /"([^"]*)"|'([^']*)'|attr\(\s*([^)\s]+)\s*\)|counter\(\s*([a-zA-Z0-9_-]+)\s*(?:,[^)]*)?\)/g;
+/** content: quoted strings, attr() lookups, and counter() values. */
+function parseContentValue(value, host, counters) {
     const trimmed = value.trim();
     if (trimmed === 'none' || trimmed === 'normal')
         return '';
     let text = '';
     for (const match of trimmed.matchAll(CONTENT_TOKEN)) {
-        if (match[3] !== undefined)
+        if (match[4] !== undefined)
+            text += String(counters?.value(match[4]) ?? 0);
+        else if (match[3] !== undefined)
             text += host.attributes.get(match[3]) ?? '';
         else
             text += match[1] ?? match[2] ?? '';

package/dist/src/layout/engine.js

@@ -526,7 +526,7 @@ function isRowLevelDisplay(display) {
         || display === 'table-column-group';
 }
 function cellsOfRow(trNode, styles) {
-    return trNode.children.filter(c => isCellContent(c, styles));
+    return childrenWithPseudos(trNode).filter(c => isCellContent(c, styles));
 }
 /**
  * Group the children of a table or row-group into rows. Explicit table-rows
@@ -574,15 +574,15 @@ function collectTableRows(children, styles) {
         const display = child.nodeType === 'element' ? styles.get(child.id)?.display : undefined;
         if (display === 'table-header-group') {
             flushStray();
-            headerRows.push(...groupIntoRows(child.children, styles));
+            headerRows.push(...groupIntoRows(childrenWithPseudos(child), styles));
         }
         else if (display === 'table-footer-group') {
             flushStray();
-            footerRows.push(...groupIntoRows(child.children, styles));
+            footerRows.push(...groupIntoRows(childrenWithPseudos(child), styles));
         }
         else if (display === 'table-row-group') {
             flushStray();
-            bodyRows.push(...groupIntoRows(child.children, styles));
+            bodyRows.push(...groupIntoRows(childrenWithPseudos(child), styles));
         }
         else {
             // table-rows and stray cell content accumulate; captions/columns
@@ -774,7 +774,7 @@ function placeRows(rows, grid, styles, boxes, x, startY, colWidths, tableWidth,
     return rowY - startY - (rows.length > 0 ? gaps.row : 0);
 }
 function layoutTable(node, styles, boxes, x, y, availW, availH) {
-    return layoutTableChildren(node.children, styles.get(node.id), styles, boxes, x, y, availW, availH);
+    return layoutTableChildren(childrenWithPseudos(node), styles.get(node.id), styles, boxes, x, y, availW, availH);
 }
 /**
  * Table layout over a list of children. Called with a table element's
@@ -829,6 +829,10 @@ function layoutGrid(node, styles, boxes, x, y, availW, availH, style) {
     }
     const rowHeights = parseGridTemplate(style.gridTemplateRows ?? '', availH);
     const numCols = colWidths.length || 1;
+    const columnFlow = style.gridAutoFlow === 'column';
+    // Column flow wraps at the explicit row count; implicit columns take
+    // the last explicit column's width.
+    const numRows = rowHeights.length || 1;
     const gap = style.gap ?? 0;
     // Pre-compute border-adjusted gaps for grid children
     let hGap = gap;
@@ -850,7 +854,12 @@ function layoutGrid(node, styles, boxes, x, y, availW, availH, style) {
     for (const child of children) {
         const childStyle = styles.get(child.id);
         const area = childStyle?.gridArea ? areas?.byName.get(childStyle.gridArea) : undefined;
-        const placed = resolveGridPlacement(childStyle, area, cursor, numCols);
+        const placed = columnFlow
+            ? resolveGridPlacementColumn(childStyle, area, cursor, numRows)
+            : resolveGridPlacement(childStyle, area, cursor, numCols);
+        while (columnFlow && placed.col >= colWidths.length && colWidths.length > 0) {
+            colWidths.push(colWidths[colWidths.length - 1]);
+        }
         const colW = trackSpanSize(colWidths, placed.col, placed.span, hGap);
         // Measure content height with unconstrained available height
         const size = layoutNode(child, styles, boxes, 0, 0, colW, availH);
@@ -884,6 +893,30 @@ function layoutGrid(node, styles, boxes, x, y, availW, availH, style) {
     const totalHeight = totalRows === 0 ? 0 : trackOffset(trackHeights, totalRows, vGap) - vGap;
     return { width: maxWidth, height: totalHeight };
 }
+/**
+ * grid-auto-flow: column — auto-placed items fill down each column,
+ * wrapping to a new (implicit) column after the explicit row count.
+ * Explicit line placements behave as in row flow.
+ */
+function resolveGridPlacementColumn(childStyle, area, cursor, numRows) {
+    if (area) {
+        return {
+            col: area.colStart, span: area.colEnd - area.colStart,
+            row: area.rowStart, rowSpan: area.rowEnd - area.rowStart,
+        };
+    }
+    if (cursor.row >= numRows) {
+        cursor.row = 0;
+        cursor.col++;
+    }
+    const col = childStyle?.gridColumnStart != null ? childStyle.gridColumnStart - 1 : cursor.col;
+    const row = childStyle?.gridRowStart != null ? childStyle.gridRowStart - 1 : cursor.row;
+    const span = childStyle?.gridColumnSpan ?? 1;
+    const rowSpan = childStyle?.gridRowSpan ?? 1;
+    cursor.col = col;
+    cursor.row = row + rowSpan;
+    return { col, span, row, rowSpan };
+}
 /**
  * Where one grid item lands: a named area wins outright; otherwise
  * explicit lines/spans combine with the auto-flow cursor, which only
@@ -1053,12 +1086,34 @@ function resolveTrackSizes(parts, availSize) {
             sizes.push(0);
         }
     }
-    // Distribute remaining space to fr units, honouring minmax() minimums
+    // Distribute remaining space to fr units. minmax() minimums are
+    // honoured with redistribution: a track clamped to its minimum leaves
+    // the pool, and the freed space re-splits among the rest (iterate
+    // until no new clamps).
     if (frParts.length > 0) {
-        const totalFr = frParts.reduce((sum, p) => sum + p.fr, 0);
-        const remaining = Math.max(0, availSize - fixedTotal);
-        for (const { index, fr, min } of frParts) {
-            sizes[index] = Math.max(min, Math.floor(remaining * fr / totalFr));
+        let pool = Math.max(0, availSize - fixedTotal);
+        let flexible = [...frParts];
+        const clamped = new Set();
+        while (true) {
+            const totalFr = flexible.reduce((sum, p) => sum + p.fr, 0);
+            let reclamped = false;
+            for (const part of flexible) {
+                const share = totalFr > 0 ? Math.floor(pool * part.fr / totalFr) : 0;
+                if (share < part.min) {
+                    sizes[part.index] = part.min;
+                    pool -= part.min;
+                    clamped.add(part.index);
+                    reclamped = true;
+                }
+            }
+            flexible = flexible.filter(p => !clamped.has(p.index));
+            if (!reclamped) {
+                const finalFr = flexible.reduce((sum, p) => sum + p.fr, 0);
+                for (const part of flexible) {
+                    sizes[part.index] = finalFr > 0 ? Math.max(part.min, Math.floor(Math.max(0, pool) * part.fr / finalFr)) : part.min;
+                }
+                break;
+            }
         }
     }
     return sizes;

package/docs/layout.md

@@ -74,9 +74,13 @@ support:
 .nav { grid-area: nav; }
 ```
 
-Deviations: auto-flow is row-based (`grid-auto-flow: column` is not
-implemented); `minmax()` minimums on `fr` tracks are enforced without
-redistribution; spanning content doesn't stretch individual tracks.
+`grid-auto-flow: column` fills down each column, wrapping to a new
+(implicit) column after the explicit row count; implicit columns take
+the last explicit column's width. `minmax()` minimums on `fr` tracks
+redistribute — a track clamped to its minimum leaves the pool and the
+freed space re-splits among the remaining `fr` tracks.
+
+Deviations: spanning content doesn't stretch individual tracks.
 
 ## Tables
 

package/docs/reference.md

@@ -153,10 +153,14 @@ All standard matching semantics. Reference: [MDN selectors](https://developer.mo
   `:nth-of-type()`, `:nth-last-of-type()` (full An+B), `:not()`, `:is()`,
   `:where()`, `:checked`, `:disabled`, `:enabled`
 - Pseudo-elements: `::before`, `::after` (single-colon legacy accepted)
-  with `content:` strings, `attr(x)`, space-separated concatenation, and
-  `none`/`""`. `counter()` is not supported. Pseudo boxes are inline and
-  invisible to `:empty`/`:nth-*`. Known gap: pseudo-elements don't render
-  inside table-internal boxes.
+  with `content:` strings, `attr(x)`, `counter(name)` (with
+  `counter-reset` / `counter-increment`, including explicit amounts),
+  space-separated concatenation, and `none`/`""`. Counters use a flat
+  namespace — no per-scope nesting or `counters()` joining — and update
+  on full style resolution, so an incremental restyle can serve stale
+  numbers until the next full pass. Pseudo boxes are inline and invisible
+  to `:empty`/`:nth-*`. In table-internal boxes they render per §17.2.1:
+  a pseudo on a row or table box becomes an anonymous cell/row.
 - Specificity, source order, and inline-`style` precedence follow the
   [cascade](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Cascade).
 
@@ -171,7 +175,7 @@ adaptations. Lengths are cells (`cell`/`ch`, `%`, or `calc()`).
 | [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model) | `width`, `height`, `min/max-width`, `min/max-height`, `padding(-*)`, `margin(-*)` (incl. `auto` centring and margin collapse), `box-sizing`, `overflow` (`hidden`/`scroll`/`auto` with real scrolling + fading scrollbars) |
 | [Display & flow](https://developer.mozilla.org/en-US/docs/Web/CSS/display) | `display: block, inline, inline-block, flex, grid, none, contents`, all table display types |
 | [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) | `flex-direction` (all four), `flex-wrap`, `flex`/`flex-grow`/`flex-shrink`/`flex-basis`, `gap`, `justify-content` (incl. `space-*`), `align-items`, `align-self`, `order` |
-| [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) | `grid-template-columns/rows` (`cell`/`ch`/`%`/`fr`, `repeat()`, `minmax()`), `grid-template-areas` + `grid-area` (named and numeric), `grid-column`, `grid-row` (start / start‑end / `span n`), `gap`. Auto-flow is row-based; `grid-auto-flow: column` is not implemented. Fractional `minmax()` minimums are enforced without redistribution |
+| [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) | `grid-template-columns/rows` (`cell`/`ch`/`%`/`fr`, `repeat()`, `minmax()`), `grid-template-areas` + `grid-area` (named and numeric), `grid-column`, `grid-row` (start / start‑end / `span n`), `gap`, `grid-auto-flow: row \| column` (column flow wraps at the explicit row count; implicit columns take the last explicit column's width). Fractional `minmax()` minimums redistribute: a track clamped to its minimum leaves the pool and the freed space re-splits among the rest |
 | [Positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) | `position: static/relative/absolute/fixed/sticky` with `top/right/bottom/left`, `z-index`. Relative offsets shift visually without moving flow; sticky is top-edge only inside scroll containers (no push-out at the containing block end) |
 | [Tables](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_table) | `border-collapse`, `border-spacing`, `caption-side`, `table-layout`, `empty-cells`, `vertical-align` (`baseline` ≈ `top`) |
 | Borders | `border`/`border-style`/`border-color`/`border-corner` + per-side toggles (terminal values above) |

package/docs/selectors.md

@@ -64,13 +64,28 @@ a[href$=".pdf"]::after { content: " [pdf]"; color: red; }
 ```
 
 `content:` supports quoted strings, `attr(x)` against the host element,
-space-separated concatenation, and `none`/`""` (no box). `counter()` is
-not supported. Pseudo boxes are invisible to `:empty` and `:nth-*`, and
-style like inline elements (they inherit the host's visual attributes
-unless the pseudo rule overrides them).
+`counter(name)`, space-separated concatenation, and `none`/`""` (no
+box). Pseudo boxes are invisible to `:empty` and `:nth-*`, and style
+like inline elements (they inherit the host's visual attributes unless
+the pseudo rule overrides them). In table-internal boxes they follow
+CSS anonymous-box rules: a `::before` on a row renders as a leading
+anonymous cell.
 
-Known gap: pseudo-elements don't render inside table-internal layout
-boxes.
+### Counters
+
+`counter-reset` and `counter-increment` work with optional amounts:
+
+```css
+.doc     { counter-reset: sec; }
+.section { counter-increment: sec; }
+.section::before { content: counter(sec) ". "; }
+```
+
+Counters resolve in document order with a flat namespace — nested
+elements share the same counter rather than creating a scoped one, and
+`counters()` (the nested-join form) is not supported. Values update on
+full style resolution, so an incremental restyle can briefly show stale
+numbers.
 
 ## What re-resolves when
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svelterm/core",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "description": "Svelte 5 components rendered to the terminal with real CSS",
   "type": "module",
   "exports": {