@svelterm/core 0.23.0 → 0.27.0

package/CHANGELOG.md

@@ -1,5 +1,91 @@
 # Changelog
 
+## 0.27.0 — 2026-07-05
+
+Form control parity: password, maxlength, readonly.
+
+### Added
+
+- **`input type="password"`** — the value paints as `•` bullets; layout,
+  scrolling, and cursor behave as for text inputs and the real value
+  stays in `value`.
+- **`maxlength`** on `input`/`textarea` — caps typing and paste at the
+  limit (counted in code units, as in HTML). An over-long initial value
+  is kept and can be edited down, matching browsers.
+- **`readonly`** on `input`/`textarea` — blocks all edits (typing,
+  deletion, Ctrl+U/K, paste) while the caret still moves; the control
+  remains focusable.
+
+### Fixed
+
+- `input` events now fire only when the value changes — caret-movement
+  keys (arrows, Home/End) no longer dispatch spurious `input` events.
+
+## 0.26.0 — 2026-07-05
+
+Sibling border collapse becomes explicit.
+
+### Changed (breaking)
+
+- **Sibling border collapse is now opt-in.** Adjacent bordered siblings
+  (stacked blocks, flex items, grid items) previously always shared a
+  border line with junction glyphs (`├` `┬` `┼`). Now that happens only
+  under `border-collapse: collapse` — an extension of the CSS table
+  property to all boxes. It inherits per spec, so opt in once on the
+  container or app-wide:
+
+  ```css
+  :root { border-collapse: collapse; }
+  ```
+
+  Without it, sibling frames render separately, matching browsers.
+  `border-collapse: separate` on a child opts it back out.
+
+### Added
+
+- `border-collapse` now inherits (CSS 2.2 §17.6) — previously it was
+  only read from the table element itself.
+
+## 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.
+
+### Added
+
+- **Per-property transitions** — `transition: color 150ms linear, width
+  400ms ease` runs each property on its own duration and timing;
+  longhand lists pair cyclically per spec. (Previously the first
+  duration and one timing function applied to everything.)
+- **Interrupted transitions continue** — a retargeted transition starts
+  from its current blended value instead of jumping back to the previous
+  target (reversals no longer flash).
+- **Per-keyframe `animation-timing-function`** — a timing function
+  declared inside a keyframe applies from that stop to the next.
+- **Keyframe `var()`/`light-dark()` re-resolution** — scheme flips and
+  custom-property changes retarget a running animation in place, without
+  restarting it.
+
 ## 0.23.0 — 2026-07-05
 
 Positioning: `relative` offsets apply, and `sticky` arrives.

package/dist/src/components/text-buffer.d.ts

@@ -2,6 +2,10 @@ import type { KeyEvent } from '../input/keyboard.js';
 export declare class TextBuffer {
     private _text;
     private _cursor;
+    /** Insertion cap in code units, as HTML maxlength counts them. */
+    maxLength: number | null;
+    /** Blocks all mutation while leaving caret movement live. */
+    readOnly: boolean;
     constructor(initial?: string);
     get text(): string;
     set text(value: string);

package/dist/src/components/text-buffer.js

@@ -2,6 +2,10 @@ import { nextGraphemeBoundary, prevGraphemeBoundary } from '../layout/unicode.js
 export class TextBuffer {
     _text;
     _cursor;
+    /** Insertion cap in code units, as HTML maxlength counts them. */
+    maxLength = null;
+    /** Blocks all mutation while leaving caret movement live. */
+    readOnly = false;
     constructor(initial = '') {
         this._text = initial;
         this._cursor = initial.length;
@@ -13,16 +17,28 @@ export class TextBuffer {
         this._cursor = Math.max(0, Math.min(value, this._text.length));
     }
     insert(chars) {
+        if (this.readOnly)
+            return;
+        if (this.maxLength !== null) {
+            const room = Math.max(0, this.maxLength - this._text.length);
+            chars = chars.slice(0, room);
+        }
+        if (chars.length === 0)
+            return;
         this._text = this._text.substring(0, this._cursor) + chars + this._text.substring(this._cursor);
         this._cursor += chars.length;
     }
     delete() {
+        if (this.readOnly)
+            return;
         if (this._cursor >= this._text.length)
             return;
         const end = nextGraphemeBoundary(this._text, this._cursor);
         this._text = this._text.substring(0, this._cursor) + this._text.substring(end);
     }
     backspace() {
+        if (this.readOnly)
+            return;
         if (this._cursor <= 0)
             return;
         const start = prevGraphemeBoundary(this._text, this._cursor);
@@ -34,10 +50,14 @@ export class TextBuffer {
     home() { this._cursor = 0; }
     end() { this._cursor = this._text.length; }
     clearToStart() {
+        if (this.readOnly)
+            return;
         this._text = this._text.substring(this._cursor);
         this._cursor = 0;
     }
     clearToEnd() {
+        if (this.readOnly)
+            return;
         this._text = this._text.substring(0, this._cursor);
     }
     handleKey(key) {

package/dist/src/css/animation-runner.d.ts

@@ -1,6 +1,6 @@
 import type { KeyframeStop } from './parser.js';
 import { type ResolvedStyle } from './compute.js';
-import type { Easing } from './easing.js';
+import { type Easing } from './easing.js';
 /**
  * Runs a CSS animation by applying keyframe properties at the current
  * time. Colours interpolate in RGB space between stops; properties that

package/dist/src/css/animation-runner.js

@@ -1,5 +1,6 @@
 import { applyDeclaration } from './compute.js';
 import { resolveColor } from './color.js';
+import { parseEasing } from './easing.js';
 import { lerpColor, lerpNumber } from './interpolate.js';
 import { parseCellLength } from './values.js';
 /** Properties whose animation only needs repaint; anything else re-layouts. */
@@ -37,7 +38,11 @@ export class AnimationRunner {
         const progress = this.getProgress(elapsedMs);
         const segment = this.segmentAt(progress);
         const { from, to } = segment;
-        const localT = this.easing(segment.localT);
+        // A timing function declared inside a keyframe applies from that
+        // stop to the next, overriding the element-level easing (per CSS).
+        const override = from.declarations.find(d => d.property === 'animation-timing-function');
+        const easing = override ? (parseEasing(override.value) ?? this.easing) : this.easing;
+        const localT = easing(segment.localT);
         // Hold the earlier stop's values, then interpolate toward the next
         for (const decl of from.declarations) {
             applyAnimatedProperty(style, decl);
@@ -87,6 +92,9 @@ export class AnimationRunner {
     }
 }
 function applyAnimatedProperty(style, decl) {
+    // Keyframe-level timing functions steer the runner, not the style
+    if (decl.property === 'animation-timing-function')
+        return;
     applyDeclaration(style, decl.property, decl.value);
 }
 function applyInterpolatedProperty(style, from, to, t) {

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;
@@ -53,6 +57,15 @@ export interface ResolvedStyle {
     transitionProperty: string | null;
     transitionDuration: number;
     transitionTimingFunction: string;
+    /** Longhand lists, paired cyclically per spec into `transitions`. */
+    transitionDurations: number[];
+    transitionTimings: string[];
+    /** Per-property transition config, resolved after cascade. */
+    transitions: Array<{
+        property: string;
+        duration: number;
+        timing: string;
+    }>;
     borderStyle: 'none' | 'single' | 'double' | 'rounded' | 'heavy' | 'ascii' | 'eighth-cell-inner' | 'eighth-cell-outer' | 'half-cell-inner' | 'half-cell-outer' | 'full-cell';
     borderCorner: 'none' | 'h' | 'v';
     borderColor: string;
@@ -86,5 +99,14 @@ 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
+ * cyclically to cover every listed property.
+ */
+export declare function pairTransitions(style: ResolvedStyle): Array<{
+    property: string;
+    duration: number;
+    timing: string;
+}>;

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,11 +52,15 @@ 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,
         transitionTimingFunction: 'ease',
+        transitionDurations: [], transitionTimings: [],
+        transitions: [],
         borderStyle: 'none', borderColor: 'default', borderCorner: 'none',
         borderTop: true, borderRight: true, borderBottom: true, borderLeft: true,
         boxSizing: 'border-box',
@@ -204,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;
@@ -212,14 +217,20 @@ 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') {
     const style = defaultStyle(node.tag);
+    // border-collapse is an inherited property (CSS 2.2 §17.6), so opting a
+    // container in flows down to the siblings the collapse applies between.
+    if (parentStyle)
+        style.borderCollapse = parentStyle.borderCollapse;
     // Collect all matching declarations with specificity
     const scored = [];
     let order = 0;
@@ -272,6 +283,8 @@ function computeStyle(node, stylesheet, vars, parentStyle, scheme = 'dark') {
             applyDeclaration(style, decl.property, resolveVar(decl.value, vars), scheme);
         }
     }
+    // Pair transition longhand lists now the cascade is complete
+    style.transitions = pairTransitions(style);
     return style;
 }
 function parseInlineStyle(text) {
@@ -288,6 +301,7 @@ function parseInlineStyle(text) {
     return result;
 }
 const INHERITABLE_PROPERTIES = new Set([
+    'border-collapse',
     'color', 'font-weight', 'font-style', 'text-decoration',
     'white-space', 'word-break', 'text-align', 'visibility', 'opacity',
 ]);
@@ -313,6 +327,9 @@ function applyInherit(style, property, parentStyle) {
         case 'white-space':
             style.whiteSpace = parentStyle.whiteSpace;
             break;
+        case 'border-collapse':
+            style.borderCollapse = parentStyle.borderCollapse;
+            break;
         case 'word-break':
             style.wordBreak = parentStyle.wordBreak;
             break;
@@ -553,6 +570,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;
@@ -563,10 +589,12 @@ export function applyDeclaration(style, property, value, scheme = 'dark') {
             style.transitionProperty = value === 'none' ? null : value;
             break;
         case 'transition-duration':
-            style.transitionDuration = parseDuration(value);
+            style.transitionDurations = value.split(',').map(v => parseDuration(v.trim()));
+            style.transitionDuration = style.transitionDurations[0] ?? 0;
             break;
         case 'transition-timing-function':
-            style.transitionTimingFunction = value;
+            style.transitionTimings = splitTimingList(value);
+            style.transitionTimingFunction = style.transitionTimings[0] ?? 'ease';
             break;
         case 'animation-name':
             style.animationName = value === 'none' ? null : value;
@@ -806,35 +834,85 @@ function parseAnimationShorthand(style, value) {
         }
     }
 }
-/** Parse `transition: <property> <duration> [...]`, comma-separated groups. */
+/** Split a timing-function list on commas, keeping function args intact. */
+function splitTimingList(value) {
+    const out = [];
+    let depth = 0;
+    let current = '';
+    for (const ch of value) {
+        if (ch === '(')
+            depth++;
+        if (ch === ')')
+            depth--;
+        if (ch === ',' && depth === 0) {
+            out.push(current.trim());
+            current = '';
+        }
+        else
+            current += ch;
+    }
+    if (current.trim())
+        out.push(current.trim());
+    return out;
+}
+/**
+ * Parse `transition: <property> <duration> <timing> [...]` — each
+ * comma-separated group configures one property (or `all`).
+ */
 function parseTransitionShorthand(style, value) {
     const trimmed = value.trim();
     if (trimmed === 'none') {
         style.transitionProperty = null;
         style.transitionDuration = 0;
+        style.transitionDurations = [];
+        style.transitionTimings = [];
         return;
     }
-    const { easing, rest } = extractEasingFunction(trimmed);
-    if (easing)
-        style.transitionTimingFunction = easing;
     const properties = [];
-    let duration = 0;
-    for (const group of rest.split(',')) {
-        for (const token of group.trim().split(/\s+/)) {
+    const durations = [];
+    const timings = [];
+    for (const groupRaw of splitTimingList(trimmed)) {
+        const { easing, rest } = extractEasingFunction(groupRaw);
+        let property = 'all';
+        let duration = 0;
+        let timing = easing ?? 'ease';
+        for (const token of rest.trim().split(/\s+/)) {
             if (/^\d*\.?\d+(ms|s)$/.test(token)) {
                 if (duration === 0)
                     duration = parseDuration(token);
             }
             else if (TIMING_KEYWORDS.has(token)) {
-                style.transitionTimingFunction = token;
+                timing = token;
             }
             else if (token) {
-                properties.push(token);
+                property = token;
             }
         }
+        properties.push(property);
+        durations.push(duration);
+        timings.push(timing);
     }
     style.transitionProperty = properties.length > 0 ? properties.join(',') : 'all';
-    style.transitionDuration = duration;
+    style.transitionDurations = durations;
+    style.transitionTimings = timings;
+    style.transitionDuration = durations[0] ?? 0;
+    style.transitionTimingFunction = timings[0] ?? 'ease';
+}
+/**
+ * Pair the transition lists per spec: durations/timings repeat
+ * cyclically to cover every listed property.
+ */
+export function pairTransitions(style) {
+    if (!style.transitionProperty)
+        return [];
+    const properties = style.transitionProperty.split(',').map(p => p.trim()).filter(Boolean);
+    const durations = style.transitionDurations.length > 0 ? style.transitionDurations : [style.transitionDuration];
+    const timings = style.transitionTimings.length > 0 ? style.transitionTimings : [style.transitionTimingFunction];
+    return properties.map((property, i) => ({
+        property,
+        duration: durations[i % durations.length] ?? 0,
+        timing: timings[i % timings.length] ?? 'ease',
+    }));
 }
 function parseDuration(value) {
     if (value.endsWith('ms'))

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/incremental.js

@@ -8,7 +8,7 @@ const LAYOUT_PROPERTIES = [
     'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
     'borderStyle', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft',
     'position', 'top', 'right', 'bottom', 'left',
-    'overflow', 'whiteSpace',
+    'overflow', 'whiteSpace', 'borderCollapse',
 ];
 /**
  * Incremental style resolution — re-resolves dirty nodes and their

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/index.js

@@ -27,6 +27,7 @@ import { toggleDetails } from './input/details.js';
 import { cycleSelect } from './input/select.js';
 import { labelledControl } from './input/label.js';
 import { TextBuffer } from './components/text-buffer.js';
+import { syncEditConstraints } from './input/edit-constraints.js';
 import { StdinRouter, matchOSC11, parseOSC11Scheme } from './terminal/stdin-router.js';
 import { detectCapabilities, matchCPR, parseCPRRow } from './terminal/capabilities.js';
 import { copyToClipboard } from './terminal/clipboard.js';
@@ -490,6 +491,8 @@ export function run(AppComponent, options) {
         if (focused && (focused.tag === 'input' || focused.tag === 'textarea') && !isCheckableInput(focused)) {
             if (!focused.textBuffer)
                 focused.textBuffer = new TextBuffer(focused.attributes.get('value') ?? '');
+            syncEditConstraints(focused);
+            const oldValue = focused.textBuffer.text;
             if (focused.textBuffer.handleKey(key)) {
                 const newValue = focused.textBuffer.text;
                 focused.attributes.set('value', newValue);
@@ -498,7 +501,10 @@ export function run(AppComponent, options) {
                     ctx.onSetText(textChild, newValue);
                 // Enqueue the input element itself for repaint (cursor may have moved)
                 ctx.queue.enqueuePaintOnly(focused);
-                dispatchEvent(focused, 'input', { value: newValue, cursor: focused.textBuffer.cursor });
+                // input fires on value change, not caret movement (per spec)
+                if (newValue !== oldValue) {
+                    dispatchEvent(focused, 'input', { value: newValue, cursor: focused.textBuffer.cursor });
+                }
                 scheduleRender();
                 return;
             }
@@ -528,13 +534,17 @@ export function run(AppComponent, options) {
         if (focused && (focused.tag === 'input' || focused.tag === 'textarea')) {
             if (!focused.textBuffer)
                 focused.textBuffer = new TextBuffer(focused.attributes.get('value') ?? '');
+            syncEditConstraints(focused);
+            const oldValue = focused.textBuffer.text;
             focused.textBuffer.insert(text);
             const newValue = focused.textBuffer.text;
             focused.attributes.set('value', newValue);
             const textChild = focused.children.find(c => c.nodeType === 'text');
             if (textChild)
                 ctx.onSetText(textChild, newValue);
-            dispatchEvent(focused, 'input', { value: newValue, cursor: focused.textBuffer.cursor });
+            if (newValue !== oldValue) {
+                dispatchEvent(focused, 'input', { value: newValue, cursor: focused.textBuffer.cursor });
+            }
             scheduleRender();
         }
         else {

package/dist/src/input/edit-constraints.d.ts

@@ -0,0 +1,7 @@
+import { TermNode } from '../renderer/node.js';
+/**
+ * Mirror the element's maxlength/readonly attributes onto its TextBuffer
+ * before each edit, so attribute changes made after focus apply
+ * immediately (Svelte removes boolean attributes when false).
+ */
+export declare function syncEditConstraints(node: TermNode): void;

package/dist/src/input/edit-constraints.js

@@ -0,0 +1,14 @@
+/**
+ * Mirror the element's maxlength/readonly attributes onto its TextBuffer
+ * before each edit, so attribute changes made after focus apply
+ * immediately (Svelte removes boolean attributes when false).
+ */
+export function syncEditConstraints(node) {
+    if (!node.textBuffer)
+        return;
+    const max = node.attributes.get('maxlength');
+    const parsed = max !== undefined ? parseInt(max, 10) : NaN;
+    node.textBuffer.maxLength = Number.isFinite(parsed) && parsed >= 0 ? parsed : null;
+    const readonly = node.attributes.get('readonly');
+    node.textBuffer.readOnly = readonly !== undefined && readonly !== 'false';
+}

package/dist/src/layout/engine.js

@@ -7,13 +7,17 @@ import { imageIntrinsicSize } from '../render/image.js';
 import { resolveSize, constrain } from './size.js';
 import { parseCellLength } from '../css/values.js';
 /**
- * Check if two adjacent siblings both have borders on their shared edge.
- * Returns true if the gap between them should be reduced by 1 to account
- * for the visual spacing inherent in box-drawing border characters.
+ * Check if two adjacent siblings should share a single border line on
+ * their common edge (overlapping by 1 cell so the strokes merge into
+ * junction glyphs). Opt-in: both siblings must be under border-collapse:
+ * collapse — an inherited property, so setting it on the container (or
+ * :root) is enough — and both must have a border on the shared edge.
  */
 function shouldAdjustBorderGap(prevStyle, nextStyle, direction) {
     if (!prevStyle || !nextStyle)
         return false;
+    if (prevStyle.borderCollapse !== 'collapse' || nextStyle.borderCollapse !== 'collapse')
+        return false;
     if (prevStyle.borderStyle === 'none' || nextStyle.borderStyle === 'none')
         return false;
     if (direction === 'vertical') {
@@ -526,7 +530,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 +578,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 +778,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 +833,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 +858,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 +897,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 +1090,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/dist/src/render/animation-clock.d.ts

@@ -12,6 +12,7 @@ export type { KeyframeResolution } from '../css/animation.js';
  */
 export declare class AnimationClock {
     private active;
+    /** Per-property transition runners, keyed `nodeId:property`. */
     private transitions;
     /** Last-seen target values per transitioned node, as CSS property → value. */
     private transitionTargets;
@@ -51,7 +52,14 @@ export declare class AnimationClock {
     stop(): void;
     private discover;
     private discoverTransitions;
-    /** Snapshot the node's target values; start a transition on any change. */
+    /**
+     * Snapshot the node's target values; start a per-property transition
+     * runner on any change, each with its own duration and timing. An
+     * interrupted transition continues from its current blended value
+     * rather than restarting from the previous target.
+     */
     private trackTransitionTargets;
+    /** Evaluate an in-flight transition's value for one property, now. */
+    private currentValue;
     private updateTimer;
 }

package/dist/src/render/animation-clock.js

@@ -6,17 +6,6 @@ import { systemClock, clockFromNow } from './clock.js';
 function easingFor(value) {
     return parseEasing(value) ?? (t => t);
 }
-/** Parse a transition-property value into the tracked-property filter. */
-function transitionedProperties(value) {
-    const names = new Set();
-    for (const raw of value.split(',')) {
-        const name = raw.trim();
-        if (name === 'all')
-            return { all: true, names };
-        names.add(name === 'background' ? 'background-color' : name);
-    }
-    return { all: false, names };
-}
 function cellValue(value) {
     return typeof value === 'number' && value >= 0 ? `${value}cell` : null;
 }
@@ -50,6 +39,7 @@ const FRAME_INTERVAL_MS = 33;
  */
 export class AnimationClock {
     active = new Map();
+    /** Per-property transition runners, keyed `nodeId:property`. */
     transitions = new Map();
     /** Last-seen target values per transitioned node, as CSS property → value. */
     transitionTargets = new Map();
@@ -71,8 +61,13 @@ export class AnimationClock {
     }
     /** Whether this node's animation needs re-layout each frame (vs repaint only). */
     touchesLayout(node) {
-        return (this.active.get(node.id)?.runner.touchesLayout
-            || this.transitions.get(node.id)?.runner.touchesLayout) ?? false;
+        if (this.active.get(node.id)?.runner.touchesLayout)
+            return true;
+        for (const anim of this.transitions.values()) {
+            if (anim.node.id === node.id && anim.runner.touchesLayout)
+                return true;
+        }
+        return false;
     }
     /**
      * Track transitioned elements and start a one-shot transition when a
@@ -87,7 +82,10 @@ export class AnimationClock {
         for (const id of this.transitionTargets.keys()) {
             if (!seen.has(id)) {
                 this.transitionTargets.delete(id);
-                this.transitions.delete(id);
+                for (const key of this.transitions.keys()) {
+                    if (key.startsWith(`${id}:`))
+                        this.transitions.delete(key);
+                }
             }
         }
         this.updateTimer();
@@ -116,15 +114,15 @@ export class AnimationClock {
         return dirty;
     }
     applyEntries(entries, styles, dirty) {
-        for (const [id, anim] of entries) {
-            const style = styles.get(id);
+        for (const [key, anim] of entries) {
+            const style = styles.get(anim.node.id);
             if (!style)
                 continue;
             const elapsed = this.now() - anim.start;
             anim.runner.apply(style, elapsed);
             dirty.push({ node: anim.node, touchesLayout: anim.runner.touchesLayout });
             if (anim.runner.isFinished(elapsed))
-                entries.delete(id);
+                entries.delete(key);
         }
     }
     stop() {
@@ -140,18 +138,27 @@ export class AnimationClock {
             const stops = name ? keyframes.get(name) : undefined;
             if (style && name && stops && style.animationDuration > 0) {
                 const existing = this.active.get(node.id);
+                const resolved = resolution
+                    ? resolveKeyframeStops(stops, resolution, node.id)
+                    : stops;
+                const resolvedKey = JSON.stringify(resolved);
                 if (!existing || existing.name !== name || existing.duration !== style.animationDuration) {
-                    const resolved = resolution
-                        ? resolveKeyframeStops(stops, resolution, node.id)
-                        : stops;
                     this.active.set(node.id, {
                         node,
                         runner: new AnimationRunner(resolved, style.animationDuration, style.animationIterationCount, easingFor(style.animationTimingFunction)),
                         name,
                         duration: style.animationDuration,
                         start: this.now(),
+                        resolvedKey,
                     });
                 }
+                else if (existing.resolvedKey !== undefined && existing.resolvedKey !== resolvedKey) {
+                    // var()/light-dark() re-resolved to new values (scheme
+                    // flip, custom property change): retarget the runner
+                    // without restarting — the original start time holds.
+                    existing.runner = new AnimationRunner(resolved, style.animationDuration, style.animationIterationCount, easingFor(style.animationTimingFunction));
+                    existing.resolvedKey = resolvedKey;
+                }
                 seen.add(node.id);
             }
         }
@@ -162,7 +169,7 @@ export class AnimationClock {
         const subtreeResolved = parentResolved || (resolvedIds?.has(node.id) ?? false);
         if (node.nodeType === 'element') {
             const style = styles.get(node.id);
-            if (style?.transitionProperty && style.transitionDuration > 0) {
+            if (style && style.transitions.some(t => t.duration > 0)) {
                 seen.add(node.id);
                 if (subtreeResolved)
                     this.trackTransitionTargets(node, style);
@@ -172,12 +179,20 @@ export class AnimationClock {
             this.discoverTransitions(child, styles, subtreeResolved, resolvedIds, seen);
         }
     }
-    /** Snapshot the node's target values; start a transition on any change. */
+    /**
+     * Snapshot the node's target values; start a per-property transition
+     * runner on any change, each with its own duration and timing. An
+     * interrupted transition continues from its current blended value
+     * rather than restarting from the previous target.
+     */
     trackTransitionTargets(node, style) {
-        const included = transitionedProperties(style.transitionProperty);
+        const configFor = (css) => style.transitions.find(t => t.property === css
+            || (t.property === 'background' && css === 'background-color'))
+            ?? style.transitions.find(t => t.property === 'all');
         const targets = {};
         for (const prop of TRANSITIONABLE) {
-            if (!included.all && !included.names.has(prop.css))
+            const config = configFor(prop.css);
+            if (!config || config.duration <= 0)
                 continue;
             const value = prop.read(style);
             if (value !== null)
@@ -187,28 +202,38 @@ export class AnimationClock {
         this.transitionTargets.set(node.id, targets);
         if (!previous)
             return; // first sight — the initial style never transitions
-        const fromDecls = [];
-        const toDecls = [];
         for (const [property, target] of Object.entries(targets)) {
             const before = previous[property];
-            if (before !== undefined && before !== target) {
-                fromDecls.push({ property, value: before });
-                toDecls.push({ property, value: target });
+            if (before === undefined || before === target)
+                continue;
+            const config = configFor(property);
+            const key = `${node.id}:${property}`;
+            // Interrupted mid-flight? Continue from the current value.
+            let from = before;
+            const inFlight = this.transitions.get(key);
+            if (inFlight) {
+                const current = this.currentValue(inFlight, style, property);
+                if (current !== null)
+                    from = current;
             }
+            const stops = [
+                { offset: 0, declarations: [{ property, value: from }] },
+                { offset: 1, declarations: [{ property, value: target }] },
+            ];
+            this.transitions.set(key, {
+                node,
+                runner: new AnimationRunner(stops, config.duration, 1, easingFor(config.timing)),
+                name: property,
+                duration: config.duration,
+                start: this.now(),
+            });
         }
-        if (fromDecls.length === 0)
-            return;
-        const stops = [
-            { offset: 0, declarations: fromDecls },
-            { offset: 1, declarations: toDecls },
-        ];
-        this.transitions.set(node.id, {
-            node,
-            runner: new AnimationRunner(stops, style.transitionDuration, 1, easingFor(style.transitionTimingFunction)),
-            name: '',
-            duration: style.transitionDuration,
-            start: this.now(),
-        });
+    }
+    /** Evaluate an in-flight transition's value for one property, now. */
+    currentValue(anim, base, property) {
+        const scratch = { ...base };
+        anim.runner.apply(scratch, this.now() - anim.start);
+        return TRANSITIONABLE.find(p => p.css === property)?.read(scratch) ?? null;
     }
     updateTimer() {
         if (this.activeCount > 0 && this.timer === null) {

package/dist/src/render/paint.js

@@ -350,7 +350,11 @@ function paintCheckable(node, buffer, box, visuals, clip) {
     }
 }
 function paintInput(node, buffer, box, visuals, clip) {
-    const value = node.attributes.get('value') ?? '';
+    const rawValue = node.attributes.get('value') ?? '';
+    // Password values paint as bullets; layout and scrolling use the
+    // masked string, which has the same length as the real value.
+    const value = node.attributes.get('type') === 'password'
+        ? '•'.repeat(rawValue.length) : rawValue;
     const isFocused = node.attributes.has('data-focused');
     const cursor = node.textBuffer?.cursor ?? value.length;
     const style = node.cache.resolvedStyle;

package/docs/elements.md

@@ -37,8 +37,9 @@ unprevented, the `href` opens in the local browser.
 
 | Control | Rendering | Interaction |
 |---|---|---|
-| `input` (text) | one-row editor on the grid | readline-style editing with a real cursor; `input` events carry `{ value, cursor }` |
-| `textarea` | multi-line editor | as above |
+| `input` (text) | one-row editor on the grid | readline-style editing with a real cursor; `input` events carry `{ value, cursor }`; `maxlength` caps typing and paste; `readonly` blocks edits but keeps caret movement |
+| `input type="password"` | as text, value painted as `•` bullets | editing as text inputs; the real value stays in `value` |
+| `textarea` | multi-line editor | as text inputs, including `maxlength`/`readonly` |
 | `input type="checkbox"` | `[x]` / `[ ]` (3×1) | `Space` or click toggles; `change`/`input` carry `{ checked, value }` |
 | `input type="radio"` | `(•)` / `( )` | selecting unchecks same-`name` radios across the tree; never untoggles itself |
 | `select` + `option`/`optgroup` | selected label + `▾`, sized to the longest option | popup-less cycling: `ArrowUp`/`ArrowDown` move with wraparound, `Space`/`Enter`/click advance; `change` carries `{ value }` |

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/motion.md

@@ -66,19 +66,20 @@ inline style updates, a `:checked` rule starts applying:
 `ms`/`s`. The same interpolation rules as animations apply. The initial
 style never transitions.
 
+Transitions are configured per property, per spec: comma-separated
+shorthand groups (`transition: color 150ms linear, width 400ms ease`)
+or longhand lists paired cyclically. An interrupted transition
+continues from its current blended value. A timing function declared
+*inside a keyframe* applies from that stop to the next, overriding the
+element's. Keyframe `var()`/`light-dark()` values re-resolve when the
+scheme or custom properties change mid-animation, retargeting without
+restarting.
+
 ## Deviations from browsers
 
-- One duration and one timing function apply to all listed transition
-  properties (per-property lists aren't split).
-- An interrupted transition restarts from its previous target value, not
-  the current blended value.
 - `opacity` doesn't interpolate (it applies discretely mid-animation) —
   animate colour toward the background for a smooth fade.
-- Keyframe `var()`/`light-dark()` resolution happens once when the
-  animation starts; changing a custom property doesn't retarget a
-  running animation.
-- Per-keyframe `animation-timing-function` overrides are ignored — the
-  element's timing function applies to every segment.
+- `transition-delay` / `animation-delay` are not implemented.
 
 ## Reduced motion
 

package/docs/reference.md

@@ -130,7 +130,8 @@ block/inline box per its display default.
 | `strong`/`b`, `em`/`i`, `u`, `s`/`del`, `mark`, `kbd`, `abbr`, `samp`, `var` | text attributes (bold/italic/underline/strikethrough/colour) | — |
 | `a` | underlined, focusable; Enter/click opens `href` in the local browser | [`<a>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) |
 | `table` and friends | full table layout: colspan/rowspan, header/footer groups, caption, `colgroup`/`col` width hints, collapse/separate borders, `empty-cells` | [`<table>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) |
-| `input` (text) | single-line editor with cursor, `value`, `input` events | [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) |
+| `input` (text) | single-line editor with cursor, `value`, `input` events; `maxlength`, `readonly` | [`<input>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) |
+| `input type="password"` | value masked as `•` bullets; editing as text | [password](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password) |
 | `input type="checkbox" / "radio"` | glyph toggles; `checked` attribute/property; `change`+`input` events | [checkbox](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox), [radio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio) |
 | `textarea` | multi-line editing | [`<textarea>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) |
 | `button` | focusable, centred text, `click` on Enter/click | [`<button>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) |
@@ -153,10 +154,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,12 +176,12 @@ 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) |
+| Borders | `border`/`border-style`/`border-color`/`border-corner` + per-side toggles (terminal values above). `border-collapse: collapse` on a container (inherited — `:root` works) makes adjacent bordered siblings in block flow, flex, and grid share a single border line with junction glyphs (`├` `┬` `┼`) — a cell-grid extension of the table property |
 | [Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations) | `animation` shorthand, `animation-name/-duration/-iteration-count` (incl. `infinite`)/`-timing-function`, `@keyframes` (from/to/percentages, values resolve `var()`/`light-dark()`) |
-| [Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions) | `transition` shorthand, `transition-property` (list or `all`), `transition-duration`, `transition-timing-function` |
+| [Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions) | `transition` shorthand with per-property comma groups; `transition-property`/`-duration`/`-timing-function` longhand lists paired per spec; interruptions continue from the current value |
 | [Easing](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) | `linear`, `ease` (default), `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier()`, `steps()`, `step-start`, `step-end` |
 
 ### Animation & transition semantics on the grid
@@ -185,12 +190,14 @@ Colours interpolate in RGB at ~30fps; single cell/ch lengths interpolate
 to whole cells (movement steps cell by cell); every other supported
 property applies discretely, switching at the segment midpoint (the CSS
 rule for non-interpolable values). Layout-affecting animations re-flow
-each frame. Easing applies per keyframe segment; non-interpolable values
-switch when eased progress crosses the midpoint. Deviations: one duration
-and one timing function for all listed transition properties, interrupted
-transitions restart from the previous target value, keyframe
-`var()`/`light-dark()` resolves once at animation start, and per-keyframe
-`animation-timing-function` overrides are ignored.
+each frame. Easing applies per keyframe segment (a timing function
+declared inside a keyframe overrides the element's for that segment);
+non-interpolable values switch when eased progress crosses the midpoint.
+Transitions run per property with their own duration/timing;
+interruptions continue from the current blended value. Keyframe
+`var()`/`light-dark()` re-resolves on scheme/custom-property changes
+without restarting the animation. Deviation: no `transition-delay` /
+`animation-delay`.
 
 ## Values, functions and at-rules
 

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/docs/terminal-css.md

@@ -61,10 +61,17 @@ Browser values (`solid`, `dashed`…) are ignored.
 - `border-corner: h | v | none` biases which line wins at corners.
 - `border-color` is standard, including `currentColor`.
 - Tables support `border-collapse: collapse` with shared grid lines.
+- `border-collapse: collapse` extends beyond tables: on any container
+  (it inherits, so `:root` opts the whole app in), adjacent bordered
+  siblings — stacked blocks, flex items, grid items — share a single
+  border line, merging into junction glyphs (`├` `┬` `┼`) in the border's
+  family. Without it, sibling frames stay separate as in browsers.
+  `border-collapse: separate` on a child opts it back out.
 
 ```css
 .panel  { border: rounded; border-color: cyan; }
 .rule   { border-top: true; border-style: single; }  /* horizontal rule */
+.list   { border-collapse: collapse; }  /* children share dividers */
 ```
 
 ## Colour

package/package.json

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