@neuravision/construct 2.2.0 → 2.2.1

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to `@neuravision/construct` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.2.1] - 2026-07-28
+
+### Fixed
+
+- Datum registration marks (`ct-frame--datum`, `ct-card--datum`, `ct-datum-frame`) no longer leave
+  the owner's border showing outside the orange corner. The mark and the border shared one outer
+  arc, so both edges antialiased at the same radius and the neutral contour blended through — barely
+  visible on `--color-border-subtle` surfaces, a grey double line on stronger borders such as
+  `--color-border-default`. The mark now absorbs the owner's hairline: it starts one border width
+  further out and grows its stroke and radius to match, so the corner paints as a single orange arc
+  at every device pixel ratio. Its inner edge, length, and the datum's own stroke weight are
+  unchanged.
+
 ## [2.2.0] - 2026-07-25
 
 ### Added

package/components/_datum-shared.css

@@ -2,15 +2,24 @@
    Owning components provide the inset and radius through local properties so
    every standalone entry renders the same geometry without copying it. */
 :is(.ct-datum-frame, .ct-card--datum, .ct-frame--datum)::before {
+  /* The mark absorbs the owner's hairline instead of merely covering it. Both
+     arcs are antialiased at the same radius when they share one outer edge, so
+     the owner's border blends through outside the mark — invisible on a subtle
+     border, a grey double line on a strong one. Starting the mark one hairline
+     further out, and growing its stroke and radius by the same amount, makes
+     the corner read as a single orange mark. The inner edge, the mark's length,
+     and the datum's own stroke weight are unchanged. */
+  --ct-datum-mark-bleed: var(--border-thin);
+
   content: '';
   position: absolute;
-  inset-block-start: var(--ct-datum-mark-inset);
-  inset-inline-start: var(--ct-datum-mark-inset);
-  width: var(--component-datum-mark-size);
-  height: var(--component-datum-mark-size);
-  border-block-start: var(--border-medium) solid var(--color-brand-accent);
-  border-inline-start: var(--border-medium) solid var(--color-brand-accent);
-  border-start-start-radius: var(--ct-datum-mark-radius);
+  inset-block-start: calc(var(--ct-datum-mark-inset) - var(--ct-datum-mark-bleed));
+  inset-inline-start: calc(var(--ct-datum-mark-inset) - var(--ct-datum-mark-bleed));
+  width: calc(var(--component-datum-mark-size) + var(--ct-datum-mark-bleed));
+  height: calc(var(--component-datum-mark-size) + var(--ct-datum-mark-bleed));
+  border-block-start: calc(var(--border-medium) + var(--ct-datum-mark-bleed)) solid var(--color-brand-accent);
+  border-inline-start: calc(var(--border-medium) + var(--ct-datum-mark-bleed)) solid var(--color-brand-accent);
+  border-start-start-radius: calc(var(--ct-datum-mark-radius) + var(--ct-datum-mark-bleed));
   z-index: 2;
   pointer-events: none;
 }

package/docs/guidelines.md

@@ -185,7 +185,9 @@ Rules that keep the signature strong and accessible:
   reference element. Never let two orange edges compete; if everything is highlighted, nothing is.
 - **The component that owns the border owns the datum.** Use `ct-frame ct-frame--datum` for framed
   exhibits and put clipping on `ct-frame__content`. Do not attach overflow clipping to the outer frame
-  or rebuild the corner in product CSS.
+  or rebuild the corner in product CSS. The registration mark absorbs the owner's hairline — it is
+  painted one border width further out — so the corner reads as one orange arc on strong borders as
+  well as subtle ones.
 - **Orange is never text.** Labels and values stay on `--color-text-*` neutrals; orange is carried by
   non-text ticks, edges, rules, and lines.
 - **Edges are `--color-brand-accent`; meaning-bearing fills are `--color-brand-accent-strong`**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/construct",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {