@neuravision/construct 2.2.0 → 2.3.1

package/CHANGELOG.md

@@ -5,6 +5,66 @@ 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.3.1] - 2026-09-17
+
+### Fixed
+
+- Grid content slots clamp their content track. `ct-card__body`, `ct-modal__body`,
+  `ct-drawer__body`, `ct-field`, `ct-alert` and `ct-confirmation` sized their column to the
+  widest item's max-content size, so a table, a long identifier or any wide embedded content
+  stretched the surface past the width it was given instead of wrapping or scrolling inside it.
+  A scroll container one level down — the usual shape when a framework component host sits
+  between the slot and `ct-table-wrap` — was stretched with it and stopped scrolling, which
+  pushed the overflow out to the page or the application shell. Regression coverage measures
+  every slot's track against its own content box at 320px.
+- Documented that `ct-table-wrap` needs `tabindex="0"`, `role="region"` and an accessible name:
+  now that wide tables scroll inside the wrapper again, keyboard users must be able to reach
+  the columns that are out of view.
+
+## [2.3.0] - 2026-09-16
+
+### Added
+
+- Aperture: an additional opt-in signature look with a split oval, proportional offset,
+  cobalt surfaces and oversized grotesk typography. Reusable marks, wordmarks, posters,
+  offset heading lines, split rules, actions, panels, native radio choices and disclosures ship through the full component
+  bundle and the standalone `components/aperture.css` entry. Datum Grammar remains available.
+- Cobalt and graphite primitives, Aperture semantic/component tokens, and contrast gates
+  for all four built-in theme scopes. The look includes reduced-motion, forced-colors,
+  keyboard-focus and touch-target support.
+- A standalone interactive preview, integration guide, visual polish review, and eleven
+  Storybook examples covering the complete look, compact layout, themes, primitives,
+  monochrome composition, long action labels, Docs link isolation and right-to-left layout.
+- Aperture's seam and offset carry through shared action hit areas, heading lines,
+  composition rules and staggered specimens, with a larger closing wordmark.
+
+### Fixed
+
+- Storybook Docs prose link styles no longer override links inside embedded story
+  previews. Aperture action labels retain their theme colors instead of becoming
+  dark text on dark buttons with orange underlines. Regression coverage checks
+  primary, quiet and wordmark links at rest, on hover and with keyboard focus in
+  all four theme scopes.
+- Aperture action labels retain their contrast on hover and active links. Logical
+  action padding preserves the seam in RTL; disclosure arrows and keyboard focus
+  follow the signature's direction and palette.
+- Package export validation accepts Windows CRLF shebangs and checks POSIX executable
+  permission bits only on platforms that expose them.
+- Updated the locked development dependencies `nanoid` and `postcss` to patched versions.
+
+## [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/README.md

@@ -25,11 +25,12 @@
 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** — 50 standalone component style entries and a full CSS bundle
+- 🧩 **Framework-agnostic** — 51 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
+- 🎨 **Four theme scopes** — `light`, `dark`, `high-contrast`, `high-contrast-dark`, with system-preference fallback
 - 📐 **The "datum" grammar** — a signature orange reference line for focus / active / current state
+- ◐ **Aperture** — an additional signature look with a split oval, cobalt surfaces and expressive typography; [usage and preview](docs/aperture.md)
 - 🛠️ **Typed tokens** — autocomplete-friendly TypeScript exports
 - 📖 **Interactive docs** — every component documented & a11y-tested in [Storybook](https://samyssmile.github.io/construct/)
 
@@ -133,7 +134,7 @@ npx construct-theme --theme node_modules/@neuravision/construct/themes/walnut.th
 
 ## 🧩 Components
 
-50 standalone component style entries, documented and accessibility-tested in [Storybook](https://samyssmile.github.io/construct/).
+51 standalone component style entries, documented and accessibility-tested in [Storybook](https://samyssmile.github.io/construct/).
 
 | Category | Components |
 |----------|-----------|
@@ -216,6 +217,7 @@ npm test                 # run behavior, Storybook, touch & forced-colors browse
 
 - [Design Guidelines](docs/guidelines.md) — do's, don'ts & accessibility patterns
 - [Component Usage](components/README.md) — HTML patterns and examples
+- [Aperture](docs/aperture.md) — split-oval signature, integration and theme examples
 - [Token Reference](tokens/README.md) — token structure & naming
 - [Architecture](docs/architecture.md) — package layers and ownership boundaries
 - [Headless Behaviors](docs/behaviors.md) — typed controllers and lifecycle

package/aperture.demo.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="de" data-theme="light">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="theme-color" content="#F5F5F0">
+  <meta name="description" content="Aperture – ein zusätzlicher Signature Look für Construct. Kobaltblau, große Typografie und ein versetztes, geteiltes Oval.">
+  <title>Aperture — Construct Signature Look</title>
+  <link rel="stylesheet" href="./foundations.css">
+  <link rel="stylesheet" href="./standalone/aperture.css">
+  <link rel="stylesheet" href="./examples/aperture/showcase.css">
+</head>
+<body>
+  <div id="aperture-preview"></div>
+  <noscript>Diese interaktive Vorschau benötigt JavaScript. Die Aperture-Komponenten selbst bestehen aus HTML und CSS.</noscript>
+  <script type="module">
+    import { createApertureShowcase } from './examples/aperture/showcase.js';
+    document.querySelector('#aperture-preview').replaceWith(createApertureShowcase({ themeControls: true }));
+  </script>
+</body>
+</html>

package/components/README.md

@@ -214,6 +214,11 @@ Content card with header, body, and footer:
 </section>
 ```
 
+`ct-card__body` clamps its content track, as every grid content slot does (`ct-modal__body`,
+`ct-drawer__body`, `ct-field`, `ct-alert`, `ct-confirmation`). Content wider than the card wraps,
+truncates, or scrolls inside its own scroll container — `ct-table-wrap` for tables — instead of
+stretching the card past the width it was given.
+
 ### Frame
 
 Owned surface for figures, code samples, media, and callouts. The outer frame owns its border,
@@ -235,6 +240,38 @@ content is a figure, use the `figure` itself as `ct-frame__content` so its `figc
 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`.
 
+### Aperture Signature Look
+
+An additional opt-in grammar: split ovals, a proportional offset, cobalt and paper,
+and oversized grotesk typography. Import `@neuravision/construct/components/aperture.css`
+or use the full component bundle. Wrap the composition in `.ct-aperture`.
+
+```html
+<section class="ct-aperture">
+  <h2 class="ct-aperture-heading">Room for character.</h2>
+  <figure class="ct-aperture-poster">
+    <div class="ct-aperture-poster__art">
+      <span class="ct-aperture-mark" aria-hidden="true"></span>
+    </div>
+    <figcaption class="ct-aperture-poster__title">Open by design.</figcaption>
+  </figure>
+</section>
+```
+
+Primitives: `ct-aperture-mark`, `ct-aperture-wordmark`, `ct-aperture-label`,
+`ct-aperture-display`, `ct-aperture-heading`, `ct-aperture-line`,
+decorative `ct-aperture-rule`, `ct-aperture-poster`,
+`ct-aperture-action` (and `--quiet`), `ct-aperture-panel`, native radio
+`ct-aperture-choices` / `ct-aperture-choice`, and native `ct-aperture-disclosure`.
+
+Action text and its displaced arrow disc remain inside one native link or button;
+the visual seam is part of the same hit area. Put `ct-aperture-line` on spans inside
+one heading to offset later lines, and hide decorative rules with `aria-hidden="true"`.
+
+All colors use `--component-aperture-*` tokens. Mark size can be overridden with
+`--ct-aperture-mark-size`. See [the design and integration guide](../docs/aperture.md)
+and **Patterns → Aperture Grammar** in Storybook.
+
 ### Datum Primitives
 
 The reference-line grammar from `components/datum.css` — Construct's orange signature as reusable
@@ -274,7 +311,7 @@ One datum per surface — see `docs/guidelines.md`.
 Basic data table with variants:
 
 ```html
-<div class="ct-table-wrap">
+<div class="ct-table-wrap" tabindex="0" role="region" aria-label="Projects">
   <table class="ct-table ct-table--striped">
     <thead>
       <tr>
@@ -299,6 +336,10 @@ Basic data table with variants:
 </div>
 ```
 
+`ct-table-wrap` scrolls a table that is wider than its container. A scrollable region needs a
+keyboard tab stop and its own accessible name, so give the wrapper `tabindex="0"`, `role="region"`
+and an `aria-label` — otherwise keyboard users cannot reach the columns that are out of view.
+
 Variants:
 - `ct-table--striped` - Alternating row backgrounds
 - `ct-table--compact` - Reduced padding

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/components/alert.css

@@ -4,7 +4,9 @@
   --ct-alert-accent: var(--color-brand-primary);
 
   display: grid;
-  grid-template-columns: auto 1fr;
+  /* The content column is clamped so long words or wide embedded content
+     stay inside the alert instead of stretching it. */
+  grid-template-columns: auto minmax(0, 1fr);
   gap: var(--space-4);
   padding: var(--space-5) var(--space-6);
   border-radius: var(--radius-md);
@@ -24,6 +26,7 @@
 
 .ct-alert__content {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-2);
 }
 

package/components/aperture.css

@@ -0,0 +1,441 @@
+/* Aperture: a split oval, a deliberate offset, generous negative space.
+   Opt in with .ct-aperture. No global theme or Datum overrides.
+   Marks are decorative: render them with aria-hidden="true". */
+.ct-aperture {
+  container-type: inline-size;
+  background: var(--component-aperture-paper);
+  color: var(--component-aperture-ink);
+  font-family: var(--component-aperture-font-family);
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  accent-color: var(--component-aperture-ink);
+}
+
+.ct-aperture,
+.ct-aperture *,
+.ct-aperture *::before,
+.ct-aperture *::after {
+  box-sizing: border-box;
+}
+
+.ct-aperture :is(h1, h2, h3, p, figure) {
+  margin: 0;
+  font-family: inherit;
+}
+
+.ct-aperture :is(a, button, summary, input, [tabindex]):focus-visible,
+.ct-aperture-action:focus-visible,
+.ct-aperture-choice:has(input:focus-visible) {
+  outline: 3px solid currentColor;
+  outline-offset: 5px;
+}
+
+.ct-aperture ::selection {
+  color: var(--component-aperture-paper);
+  background: var(--component-aperture-ink);
+}
+
+/* The same two half-ovals work at wordmark, control, and poster scale.
+   Percentages keep the seam and vertical offset proportional at every size. */
+.ct-aperture-mark {
+  position: relative;
+  display: inline-block;
+  flex: none;
+  inline-size: var(--ct-aperture-mark-size, var(--component-aperture-mark-size));
+  aspect-ratio: 1;
+  color: inherit;
+}
+
+.ct-aperture-mark::before,
+.ct-aperture-mark::after {
+  content: '';
+  position: absolute;
+  inline-size: 46%;
+  block-size: 84%;
+  background: currentColor;
+}
+
+.ct-aperture-mark::before {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  border-start-start-radius: 100% 50%;
+  border-end-start-radius: 100% 50%;
+}
+
+.ct-aperture-mark::after {
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  border-start-end-radius: 100% 50%;
+  border-end-end-radius: 100% 50%;
+}
+
+.ct-aperture-wordmark {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-4);
+  color: inherit;
+  font-family: var(--component-aperture-font-family);
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.065em;
+  line-height: 1;
+  text-decoration: none;
+  min-block-size: var(--component-aperture-action-height);
+}
+
+.ct-aperture-wordmark:is(:hover, :active) {
+  color: inherit;
+}
+
+.ct-aperture-label {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: 0.08em;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.ct-aperture .ct-aperture-display {
+  font-size: clamp(3.25rem, 1rem + 9.6cqi, 10.5rem);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.075em;
+  line-height: 0.91;
+  overflow-wrap: anywhere;
+}
+
+.ct-aperture .ct-aperture-heading {
+  font-size: clamp(2.25rem, 1.5rem + 3.5cqi, 5rem);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.065em;
+  line-height: 1.02;
+  overflow-wrap: anywhere;
+}
+
+/* A second line steps out of the first line's axis, like the two halves
+   of the mark. Keep the text in normal flow so zoom and wrapping still work. */
+.ct-aperture-line {
+  display: block;
+}
+
+.ct-aperture-line + .ct-aperture-line {
+  margin-inline-start: 0.24em;
+}
+
+/* One interrupted rule, with the same 46 / 8 / 46 proportions as the mark.
+   Decorative only: render with aria-hidden="true". */
+.ct-aperture-rule {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 8%;
+  padding-block: 1px 7px;
+  color: var(--component-aperture-border);
+}
+
+.ct-aperture-rule::before,
+.ct-aperture-rule::after {
+  content: '';
+  border-block-start: 1px solid currentColor;
+}
+
+.ct-aperture-rule::after {
+  transform: translateY(6px);
+}
+
+/* The poster is a figure, never a cropped interactive surface. */
+.ct-aperture-poster {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: var(--space-8);
+  min-inline-size: 0;
+  padding: clamp(1.5rem, 3cqi, 3rem);
+  color: var(--component-aperture-on-accent);
+  background: var(--component-aperture-accent);
+  border-radius: var(--component-aperture-panel-radius);
+}
+
+.ct-aperture-poster__art {
+  display: grid;
+  place-items: center;
+  flex: 1;
+  padding-block: var(--space-7);
+}
+
+.ct-aperture-poster__art .ct-aperture-mark {
+  --ct-aperture-mark-size: 82%;
+}
+
+.ct-aperture-poster__caption {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: space-between;
+  gap: var(--space-5);
+  font-size: var(--font-size-xs);
+}
+
+.ct-aperture-poster__title {
+  font-size: clamp(2rem, 4cqi, 4rem);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.075em;
+  line-height: 1;
+}
+
+/* The label and disc share one hit area. The open seam and lowered disc
+   carry the mark's offset into actions without splitting keyboard focus. */
+.ct-aperture-action {
+  position: relative;
+  isolation: isolate;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  min-block-size: calc(var(--component-aperture-action-height) + 8px);
+  max-inline-size: 100%;
+  padding-block: 0 8px;
+  padding-inline: var(--space-6) 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--component-aperture-paper);
+  font-family: var(--component-aperture-font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-bold);
+  line-height: 1.4;
+  text-align: start;
+  text-decoration: none;
+  overflow-wrap: anywhere;
+  cursor: pointer;
+}
+
+.ct-aperture-action:is(:hover, :active) {
+  color: var(--component-aperture-paper);
+}
+
+.ct-aperture-action::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset-block: 0 8px;
+  inset-inline: 0 calc(var(--component-aperture-action-height) + 6px);
+  border: 1px solid var(--component-aperture-ink);
+  border-radius: var(--radius-round);
+  background: var(--component-aperture-ink);
+}
+
+.ct-aperture-action__icon {
+  display: grid;
+  place-items: center;
+  flex: none;
+  inline-size: var(--component-aperture-action-height);
+  block-size: var(--component-aperture-action-height);
+  border: 1px solid var(--component-aperture-ink);
+  border-radius: 50%;
+  background: var(--component-aperture-ink);
+  color: var(--component-aperture-paper);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-regular);
+  transform: translateY(8px);
+  transition: transform var(--duration-normal) var(--easing-standard);
+}
+
+.ct-aperture-action__icon svg {
+  inline-size: 20px;
+  block-size: 20px;
+}
+
+.ct-aperture-action--quiet,
+.ct-aperture-action--quiet:is(:hover, :active) {
+  color: var(--component-aperture-ink);
+}
+
+.ct-aperture-action--quiet::before,
+.ct-aperture-action--quiet .ct-aperture-action__icon {
+  background: transparent;
+  color: var(--component-aperture-ink);
+}
+
+.ct-aperture-action:focus-visible {
+  outline-color: var(--component-aperture-ink);
+}
+
+.ct-aperture-action:disabled {
+  cursor: not-allowed;
+  opacity: var(--opacity-disabled);
+}
+
+@media (hover: hover) {
+  .ct-aperture-action:where(:not(:disabled)):hover .ct-aperture-action__icon {
+    transform: translateY(0);
+  }
+
+  .ct-aperture-action:where(:not(:disabled)):hover {
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+  }
+}
+
+/* Native radio inputs retain keyboard behavior. The text, inset border and
+   weight identify selection without depending on the accent color. */
+.ct-aperture-choices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.ct-aperture-choice {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 44px;
+  min-block-size: 44px;
+  padding: var(--space-3) var(--space-5);
+  border: 1px solid transparent;
+  border-radius: var(--radius-round);
+  font: inherit;
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+}
+
+.ct-aperture-choice input,
+.ct-aperture-choices legend {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.ct-aperture-choice:has(input:checked) {
+  border-color: currentColor;
+  font-weight: var(--font-weight-bold);
+}
+
+.ct-aperture-panel {
+  min-inline-size: 0;
+  padding: clamp(1.5rem, 3cqi, 3rem);
+  border: 1px solid var(--component-aperture-border);
+  border-radius: var(--component-aperture-panel-radius);
+  background: var(--component-aperture-surface);
+}
+
+.ct-aperture-disclosure {
+  border-block-start: 1px solid var(--component-aperture-border);
+}
+
+.ct-aperture-disclosure:last-child {
+  border-block-end: 1px solid var(--component-aperture-border);
+}
+
+.ct-aperture-disclosure summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-6);
+  min-block-size: var(--component-aperture-action-height);
+  padding-block: var(--space-6);
+  list-style: none;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+  cursor: pointer;
+}
+
+.ct-aperture-disclosure summary::-webkit-details-marker {
+  display: none;
+}
+
+.ct-aperture-disclosure summary::after {
+  content: '';
+  flex: none;
+  inline-size: 10px;
+  block-size: 10px;
+  margin-inline-end: var(--space-3);
+  border-inline-end: 2px solid currentColor;
+  border-block-end: 2px solid currentColor;
+  transform: rotate(45deg);
+}
+
+.ct-aperture-disclosure[open] summary::after {
+  transform: rotate(225deg);
+}
+
+.ct-aperture-disclosure summary:dir(rtl)::after {
+  transform: rotate(-45deg);
+}
+
+.ct-aperture-disclosure[open] summary:dir(rtl)::after {
+  transform: rotate(135deg);
+}
+
+.ct-aperture-disclosure > :not(summary) {
+  max-inline-size: 60ch;
+  padding-block-end: var(--space-7);
+  color: var(--component-aperture-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ct-aperture-action__icon {
+    transition: none;
+  }
+
+  .ct-aperture-action:hover .ct-aperture-action__icon {
+    transform: translateY(8px);
+  }
+}
+
+@media (forced-colors: active) {
+  .ct-aperture {
+    background: Canvas;
+    color: CanvasText;
+  }
+
+  .ct-aperture-mark::before,
+  .ct-aperture-mark::after {
+    background: CanvasText;
+    forced-color-adjust: none;
+  }
+
+  .ct-aperture-poster,
+  .ct-aperture-panel {
+    background: Canvas;
+    color: CanvasText;
+    border: 1px solid CanvasText;
+  }
+
+  .ct-aperture-action,
+  .ct-aperture-action:is(:hover, :active),
+  .ct-aperture-action::before,
+  .ct-aperture-action__icon {
+    border-color: ButtonText;
+    background: ButtonFace;
+    color: ButtonText;
+  }
+
+  .ct-aperture-rule {
+    color: CanvasText;
+  }
+
+  .ct-aperture-action:focus-visible {
+    outline-color: Highlight;
+  }
+
+  .ct-aperture-choice:has(input:checked) {
+    border: 2px solid Highlight;
+    text-decoration: underline;
+    text-underline-offset: 0.25em;
+  }
+
+  .ct-aperture-action:disabled,
+  .ct-aperture-action:disabled::before,
+  .ct-aperture-action:disabled .ct-aperture-action__icon {
+    color: GrayText;
+    border-color: GrayText;
+  }
+}

package/components/card.css

@@ -33,6 +33,12 @@
 
 .ct-card__body {
   display: grid;
+  /* Content slots hold whatever the product projects into them. An `auto`
+     track grows to the widest item's max-content size, so a table, a long
+     identifier or a media element pushes the surface past its own width
+     instead of scrolling or wrapping inside it. A clamped track keeps the
+     slot at the surface width and leaves overflow to the item. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-4);
 }