@neuravision/construct 2.1.5 → 2.2.0

package/CHANGELOG.md

@@ -5,6 +5,36 @@ 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.0] - 2026-07-25
+
+### Added
+
+- Frame: new `ct-frame` owned-surface component for figures, code samples, media, and callouts.
+  `ct-frame__content` owns rounded clipping while the outer frame owns its border, radius,
+  background, shadow, and optional `ct-frame--datum` registration mark. This separation keeps
+  the orange and neutral contours pixel-aligned without relying on browser-specific overflow
+  behavior. Frame surface decisions are exposed as `component.frame.*` tokens and local
+  `--ct-frame-*` override hooks, with a dedicated standalone `components/frame.css` entry.
+
+### Changed
+
+- Datum registration-mark painting is centralized in one internal component contract shared by
+  `ct-frame--datum`, `ct-card--datum`, and the low-level `ct-datum-frame` decorator. Card marks now
+  follow the card's effective radius instead of the global radius directly. Bordered or clipped
+  exhibits should use the owned Frame anatomy; `ct-datum-frame` remains available for custom,
+  unclipped compositions.
+
+## [2.1.6] - 2026-07-19
+
+### Fixed
+
+- Datum registration marks on `ct-datum-frame` and `ct-card--datum` now establish an
+  isolated component stacking context and render above component-local chrome. Opaque,
+  positioned headers (such as terminal captions at `z-index: 1`) previously painted over
+  the orange corner even though `ct-datum-frame` explicitly supports code samples. The
+  mark remains contained below global overlays, and the Storybook contract now covers a
+  clipped, rounded code frame with layered chrome.
+
 ## [2.1.5] - 2026-07-17
 
 ### Fixed

package/README.md

@@ -25,7 +25,7 @@
 Construct is a **single source of design truth** that ships portable CSS, validated design tokens, and opt-in headless behaviors — without framework lock-in. Style values live once as JSON tokens and compile to CSS custom properties, JSON, and typed TypeScript exports. Components use `ct-` classes and ARIA/data state, so they work anywhere that renders DOM.
 
 - 🎯 **Three token layers** — primitive, semantic, and component contracts with schema and contrast validation
-- 🧩 **Framework-agnostic** — 49 standalone component style entries and a full CSS bundle
+- 🧩 **Framework-agnostic** — 50 standalone component style entries and a full CSS bundle
 - ♿ **Accessibility first** — WCAG 2.2 AA targets, tested ARIA/keyboard controllers, focus and forced-colors contracts
 - ⚙️ **Optional behavior** — nine typed, dependency-free ESM controllers; importing CSS never starts JavaScript
 - 🎨 **Three themes** — `light`, `dark`, `high-contrast`, with system-preference fallback
@@ -133,7 +133,7 @@ npx construct-theme --theme node_modules/@neuravision/construct/themes/walnut.th
 
 ## 🧩 Components
 
-49 standalone component style entries, documented and accessibility-tested in [Storybook](https://samyssmile.github.io/construct/).
+50 standalone component style entries, documented and accessibility-tested in [Storybook](https://samyssmile.github.io/construct/).
 
 | Category | Components |
 |----------|-----------|
@@ -143,7 +143,7 @@ npx construct-theme --theme node_modules/@neuravision/construct/themes/walnut.th
 | **Feedback** | Alert · Banner · Toast · Spinner · Skeleton · Progress Bar · Status · Empty State |
 | **Navigation** | Navbar · Breadcrumbs · Tabs · Pagination · Sidebar · Skip Link |
 | **Overlays** | Modal · Drawer · Popover · Dropdown |
-| **Layout** | Card · Divider · Accordion · App Shell (V1 compatibility + V2 recommended) |
+| **Layout** | Card · Frame · Divider · Accordion · App Shell (V1 compatibility + V2 recommended) |
 
 → [**Explore every component in the live Storybook**](https://samyssmile.github.io/construct/)
 

package/components/README.md

@@ -214,6 +214,27 @@ Content card with header, body, and footer:
 </section>
 ```
 
+### Frame
+
+Owned surface for figures, code samples, media, and callouts. The outer frame owns its border,
+radius, background, shadow, and optional datum mark. Put content that must be clipped inside
+`ct-frame__content`; never clip the outer frame, because that would cut the mark back to the
+padding edge.
+
+```html
+<div class="ct-frame ct-frame--datum">
+  <figure class="ct-frame__content" aria-labelledby="sample-caption">
+    <figcaption id="sample-caption">Code sample</figcaption>
+    <pre><code>npm install @neuravision/construct</code></pre>
+  </figure>
+</div>
+```
+
+Use any semantically appropriate outer element (`aside`, `section`, or `div`). When the framed
+content is a figure, use the `figure` itself as `ct-frame__content` so its `figcaption` remains a
+valid direct child. Customize the owned surface with `--ct-frame-background`, `--ct-frame-border`,
+`--ct-frame-border-width`, `--ct-frame-radius`, and `--ct-frame-shadow`.
+
 ### Datum Primitives
 
 The reference-line grammar from `components/datum.css` — Construct's orange signature as reusable
@@ -230,7 +251,9 @@ structural vocabulary. All dimensions are component tokens (`--component-datum-*
   aria-label="Upload" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
   style="--ct-datum-scale-progress: 60%;"></div>
 
-<figure class="ct-datum-frame">…</figure>
+<div class="ct-frame ct-frame--datum">
+  <figure class="ct-frame__content">…</figure>
+</div>
 ```
 
 - `ct-eyebrow` - Mono kicker with a leading datum tick; `--numbered` adds drawing-set sheet numbers
@@ -238,7 +261,8 @@ structural vocabulary. All dimensions are component tokens (`--component-datum-*
 - `ct-datum-scale` - Measured ruler line; decorative, mark it `role="presentation"`
 - `ct-datum-scale--progress` - The origin segment reports progress via `--ct-datum-scale-progress`;
   pair with `role="progressbar"` and `aria-value*`
-- `ct-datum-frame` - Corner registration mark for figures, code samples, and media
+- `ct-frame--datum` - Preferred owned frame for bordered or clipped figures, code samples, and media
+- `ct-datum-frame` - Low-level corner decorator for custom surfaces that do not clip the decorated element
 - `ct-card--datum`, active leading edges, the tab indicator, sorted table columns, and
   `ct-chart__datum-line` speak the same grammar
 

package/components/_datum-shared.css

@@ -0,0 +1,23 @@
+/* Shared datum registration-mark paint contract.
+   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 {
+  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);
+  z-index: 2;
+  pointer-events: none;
+}
+
+@media (forced-colors: active) {
+  :is(.ct-datum-frame, .ct-card--datum, .ct-frame--datum)::before {
+    border-block-start-color: CanvasText;
+    border-inline-start-color: CanvasText;
+  }
+}

package/components/card.css

@@ -109,20 +109,13 @@
    state carries the same orange leading edge as list and sidebar items.
    Both are opt-in and additive — they don't change default cards. */
 .ct-card--datum {
-  position: relative;
-}
+  --ct-datum-mark-inset: calc(-1 * var(--border-thin));
+  --ct-datum-mark-radius: var(--ct-card-radius);
 
-.ct-card--datum::before {
-  content: '';
-  position: absolute;
-  inset-block-start: calc(-1 * var(--border-thin));
-  inset-inline-start: calc(-1 * var(--border-thin));
-  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(--radius-lg);
-  pointer-events: none;
+  position: relative;
+  /* Contain the datum's internal paint layer so it cannot overlap adjacent
+     cards or consumer overlays. */
+  isolation: isolate;
 }
 
 .ct-card--active,

package/components/datum.css

@@ -254,20 +254,13 @@
    "exhibit" treatment for figures, code samples, and media. Decorative;
    forced colors keeps the borders via CanvasText automatically. */
 .ct-datum-frame {
-  position: relative;
-}
+  --ct-datum-mark-inset: 0px;
+  --ct-datum-mark-radius: var(--radius-lg);
 
-.ct-datum-frame::before {
-  content: '';
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  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(--radius-lg);
-  pointer-events: none;
+  position: relative;
+  /* Keep the datum's internal paint layer above local figure chrome without
+     allowing it to participate in the consumer's global overlay stack. */
+  isolation: isolate;
 }
 
 @media (forced-colors: active) {

package/components/frame.css

@@ -0,0 +1,33 @@
+/* ── Frame ────────────────────────────────────────────────────
+   An owned surface for content whose inner chrome must clip to a
+   rounded boundary while an optional datum mark remains aligned
+   with the outer border. Keep clipping on .ct-frame__content;
+   clipping the outer frame would cut the registration mark back
+   to the padding edge. */
+.ct-frame {
+  --ct-frame-background: var(--component-frame-background);
+  --ct-frame-border: var(--component-frame-border);
+  --ct-frame-border-width: var(--border-thin);
+  --ct-frame-radius: var(--component-frame-radius);
+  --ct-frame-shadow: var(--component-frame-shadow);
+
+  position: relative;
+  isolation: isolate;
+  min-width: 0;
+  overflow: visible;
+  border: var(--ct-frame-border-width) solid var(--ct-frame-border);
+  border-radius: var(--ct-frame-radius);
+  background: var(--ct-frame-background);
+  box-shadow: var(--ct-frame-shadow);
+}
+
+.ct-frame__content {
+  min-width: 0;
+  overflow: clip;
+  border-radius: max(0px, calc(var(--ct-frame-radius) - var(--ct-frame-border-width)));
+}
+
+.ct-frame--datum {
+  --ct-datum-mark-inset: calc(-1 * var(--ct-frame-border-width));
+  --ct-datum-mark-radius: var(--ct-frame-radius);
+}

package/components/index.css

@@ -5,6 +5,7 @@
 @import './_keyframes.css';
 
 /* Structural grammar — the "datum" reference-line vocabulary */
+@import './_datum-shared.css';
 @import './datum.css';
 
 /* Components */
@@ -17,6 +18,7 @@
 @import './checkbox.css';
 @import './switch.css';
 @import './card.css';
+@import './frame.css';
 @import './table.css';
 @import './modal.css';
 @import './toast.css';

package/docs/guidelines.md

@@ -174,14 +174,18 @@ activation. Use the native `disabled` attribute whenever the HTML element suppor
 ## The Datum
 
 Construct's signature is one orange reference line — "the datum" — that marks what is focused, active,
-current, or the reference value. The grammar lives in `components/datum.css` (eyebrow, scale, frame,
-metrics), in active leading edges (list, sidebar, card, table rows), in the tab indicator and sorted
-column, and in the chart reference line. Its dimensions are component tokens (`--component-datum-*`).
+current, or the reference value. The grammar lives in `components/datum.css` (eyebrow, scale,
+metrics), in the owned `ct-frame--datum` surface, in active leading edges (list, sidebar, card, table
+rows), in the tab indicator and sorted column, and in the chart reference line. Its dimensions are
+component tokens (`--component-datum-*`).
 
 Rules that keep the signature strong and accessible:
 
 - **One datum per surface.** Orange marks exactly one thing per view region — the current, active, or
   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.
 - **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.1.5",
+  "version": "2.2.0",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {

package/schemas/components.schema.json

@@ -3,7 +3,7 @@
   "$id": "https://neuravision.dev/construct/schemas/components.schema.json",
   "title": "Construct component token contract",
   "type": "object",
-  "required": ["button", "control", "card", "status", "metric", "meter", "datum"],
+  "required": ["button", "control", "card", "frame", "status", "metric", "meter", "datum"],
   "additionalProperties": false,
   "properties": {
     "button": {
@@ -55,6 +55,17 @@
         "shadowHover": { "$ref": "#/$defs/token" }
       }
     },
+    "frame": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["background", "border", "radius", "shadow"],
+      "properties": {
+        "background": { "$ref": "#/$defs/token" },
+        "border": { "$ref": "#/$defs/token" },
+        "radius": { "$ref": "#/$defs/token" },
+        "shadow": { "$ref": "#/$defs/token" }
+      }
+    },
     "status": {
       "type": "object",
       "additionalProperties": false,

package/standalone/card.css

@@ -1,3 +1,4 @@
 /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
 @import './core.css';
+@import '../components/_datum-shared.css';
 @import '../components/card.css';

package/standalone/datum.css

@@ -1,3 +1,4 @@
 /* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
 @import './core.css';
+@import '../components/_datum-shared.css';
 @import '../components/datum.css';

package/standalone/frame.css

@@ -0,0 +1,4 @@
+/* Generated by scripts/build-standalone-components.mjs. Do not edit directly. */
+@import './core.css';
+@import '../components/_datum-shared.css';
+@import '../components/frame.css';

package/tokens/components.json

@@ -33,6 +33,12 @@
     "shadow": "{shadow.card}",
     "shadowHover": "{shadow.dropdown}"
   },
+  "frame": {
+    "background": "{color.background.elevated}",
+    "border": "{color.border.subtle}",
+    "radius": "{radius.card}",
+    "shadow": "{shadow.card}"
+  },
   "status": {
     "gap": "{space.2}",
     "fontSize": "{font.size.sm}",

package/tokens/tokens.css

@@ -360,6 +360,10 @@
   --component-card-padding: var(--space-6);
   --component-card-shadow: var(--shadow-card);
   --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-frame-background: var(--color-bg-elevated);
+  --component-frame-border: var(--color-border-subtle);
+  --component-frame-radius: var(--radius-card);
+  --component-frame-shadow: var(--shadow-card);
   --component-status-gap: var(--space-2);
   --component-status-font-size: var(--font-size-sm);
   --component-status-icon-size: var(--icon-sm);
@@ -535,6 +539,10 @@
   --component-card-padding: var(--space-6);
   --component-card-shadow: var(--shadow-card);
   --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-frame-background: var(--color-bg-elevated);
+  --component-frame-border: var(--color-border-subtle);
+  --component-frame-radius: var(--radius-card);
+  --component-frame-shadow: var(--shadow-card);
   --component-status-gap: var(--space-2);
   --component-status-font-size: var(--font-size-sm);
   --component-status-icon-size: var(--icon-sm);
@@ -710,6 +718,10 @@
   --component-card-padding: var(--space-6);
   --component-card-shadow: var(--shadow-card);
   --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-frame-background: var(--color-bg-elevated);
+  --component-frame-border: var(--color-border-subtle);
+  --component-frame-radius: var(--radius-card);
+  --component-frame-shadow: var(--shadow-card);
   --component-status-gap: var(--space-2);
   --component-status-font-size: var(--font-size-sm);
   --component-status-icon-size: var(--icon-sm);
@@ -885,6 +897,10 @@
   --component-card-padding: var(--space-6);
   --component-card-shadow: var(--shadow-card);
   --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-frame-background: var(--color-bg-elevated);
+  --component-frame-border: var(--color-border-subtle);
+  --component-frame-radius: var(--radius-card);
+  --component-frame-shadow: var(--shadow-card);
   --component-status-gap: var(--space-2);
   --component-status-font-size: var(--font-size-sm);
   --component-status-icon-size: var(--icon-sm);
@@ -1060,6 +1076,10 @@
   --component-card-padding: var(--space-6);
   --component-card-shadow: var(--shadow-card);
   --component-card-shadow-hover: var(--shadow-dropdown);
+  --component-frame-background: var(--color-bg-elevated);
+  --component-frame-border: var(--color-border-subtle);
+  --component-frame-radius: var(--radius-card);
+  --component-frame-shadow: var(--shadow-card);
   --component-status-gap: var(--space-2);
   --component-status-font-size: var(--font-size-sm);
   --component-status-icon-size: var(--icon-sm);
@@ -1303,6 +1323,10 @@
     --component-card-padding: var(--space-6);
     --component-card-shadow: var(--shadow-card);
     --component-card-shadow-hover: var(--shadow-dropdown);
+    --component-frame-background: var(--color-bg-elevated);
+    --component-frame-border: var(--color-border-subtle);
+    --component-frame-radius: var(--radius-card);
+    --component-frame-shadow: var(--shadow-card);
     --component-status-gap: var(--space-2);
     --component-status-font-size: var(--font-size-sm);
     --component-status-icon-size: var(--icon-sm);
@@ -1479,6 +1503,10 @@
     --component-card-padding: var(--space-6);
     --component-card-shadow: var(--shadow-card);
     --component-card-shadow-hover: var(--shadow-dropdown);
+    --component-frame-background: var(--color-bg-elevated);
+    --component-frame-border: var(--color-border-subtle);
+    --component-frame-radius: var(--radius-card);
+    --component-frame-shadow: var(--shadow-card);
     --component-status-gap: var(--space-2);
     --component-status-font-size: var(--font-size-sm);
     --component-status-icon-size: var(--icon-sm);

package/tokens/tokens.js

@@ -499,6 +499,12 @@ export const components = {
     "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
     "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
   },
+  "frame": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+  },
   "status": {
     "gap": "4px",
     "fontSize": "0.875rem",
@@ -1284,6 +1290,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1348,6 +1360,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#4B473E",
+      "border": "#66604E",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1412,6 +1430,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#FFFFFF",
+      "border": "#8E887A",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1476,6 +1500,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#211E18",
+      "border": "#8E887A",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1990,6 +2020,12 @@ export const cssVars = {
       "shadow": "var(--component-card-shadow)",
       "shadowHover": "var(--component-card-shadow-hover)"
     },
+    "frame": {
+      "background": "var(--component-frame-background)",
+      "border": "var(--component-frame-border)",
+      "radius": "var(--component-frame-radius)",
+      "shadow": "var(--component-frame-shadow)"
+    },
     "status": {
       "gap": "var(--component-status-gap)",
       "fontSize": "var(--component-status-font-size)",

package/tokens/tokens.json

@@ -495,6 +495,12 @@
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1278,6 +1284,12 @@
         "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
         "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
       },
+      "frame": {
+        "background": "#FFFFFF",
+        "border": "#E4E2DB",
+        "radius": "12px",
+        "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+      },
       "status": {
         "gap": "4px",
         "fontSize": "0.875rem",
@@ -1342,6 +1354,12 @@
         "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
         "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
       },
+      "frame": {
+        "background": "#4B473E",
+        "border": "#66604E",
+        "radius": "12px",
+        "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+      },
       "status": {
         "gap": "4px",
         "fontSize": "0.875rem",
@@ -1406,6 +1424,12 @@
         "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
         "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
       },
+      "frame": {
+        "background": "#FFFFFF",
+        "border": "#8E887A",
+        "radius": "12px",
+        "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+      },
       "status": {
         "gap": "4px",
         "fontSize": "0.875rem",
@@ -1470,6 +1494,12 @@
         "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
         "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
       },
+      "frame": {
+        "background": "#211E18",
+        "border": "#8E887A",
+        "radius": "12px",
+        "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+      },
       "status": {
         "gap": "4px",
         "fontSize": "0.875rem",
@@ -1983,6 +2013,12 @@
         "shadow": "var(--component-card-shadow)",
         "shadowHover": "var(--component-card-shadow-hover)"
       },
+      "frame": {
+        "background": "var(--component-frame-background)",
+        "border": "var(--component-frame-border)",
+        "radius": "var(--component-frame-radius)",
+        "shadow": "var(--component-frame-shadow)"
+      },
       "status": {
         "gap": "var(--component-status-gap)",
         "fontSize": "var(--component-status-font-size)",

package/tokens/tokens.ts

@@ -499,6 +499,12 @@ export const components = {
     "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
     "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
   },
+  "frame": {
+    "background": "#FFFFFF",
+    "border": "#E4E2DB",
+    "radius": "12px",
+    "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+  },
   "status": {
     "gap": "4px",
     "fontSize": "0.875rem",
@@ -1284,6 +1290,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#FFFFFF",
+      "border": "#E4E2DB",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1348,6 +1360,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#4B473E",
+      "border": "#66604E",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1412,6 +1430,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#FFFFFF",
+      "border": "#8E887A",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1476,6 +1500,12 @@ export const componentThemes = {
       "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)",
       "shadowHover": "0 8px 20px rgba(28, 20, 10, 0.11)"
     },
+    "frame": {
+      "background": "#211E18",
+      "border": "#8E887A",
+      "radius": "12px",
+      "shadow": "0 2px 6px rgba(28, 20, 10, 0.09)"
+    },
     "status": {
       "gap": "4px",
       "fontSize": "0.875rem",
@@ -1990,6 +2020,12 @@ export const cssVars = {
       "shadow": "var(--component-card-shadow)",
       "shadowHover": "var(--component-card-shadow-hover)"
     },
+    "frame": {
+      "background": "var(--component-frame-background)",
+      "border": "var(--component-frame-border)",
+      "radius": "var(--component-frame-radius)",
+      "shadow": "var(--component-frame-shadow)"
+    },
     "status": {
       "gap": "var(--component-status-gap)",
       "fontSize": "var(--component-status-font-size)",