@svelterm/core 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 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.

package/dist/src/css/compute.js

@@ -227,6 +227,10 @@ export function resolveNode(node, stylesheet, styles, variables, scheme = 'dark'
 }
 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;
@@ -297,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',
 ]);
@@ -322,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;

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/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') {

package/docs/reference.md

@@ -178,7 +178,7 @@ adaptations. Lengths are cells (`cell`/`ch`, `%`, or `calc()`).
 | [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 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` |

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.25.0",
+  "version": "0.26.0",
   "description": "Svelte 5 components rendered to the terminal with real CSS",
   "type": "module",
   "exports": {