@neuravision/construct 2.2.0 → 2.3.1

package/components/drawer.css

@@ -131,6 +131,9 @@
 .ct-drawer__body {
   padding: var(--space-6) var(--space-7);
   display: grid;
+  /* Clamped content track: projected content wraps or scrolls inside the
+     slot instead of widening the surface. See `.ct-card__body`. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-4);
   overflow-y: auto;
   flex: 1;

package/components/field.css

@@ -1,5 +1,8 @@
 .ct-field {
   display: grid;
+  /* Clamped content track: projected content wraps or scrolls inside the
+     slot instead of widening the surface. See `.ct-card__body`. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-2);
 }
 

package/components/index.css

@@ -8,6 +8,9 @@
 @import './_datum-shared.css';
 @import './datum.css';
 
+/* Aperture — opt-in split-oval signature vocabulary */
+@import './aperture.css';
+
 /* Components */
 @import './button.css';
 @import './field.css';

package/components/modal.css

@@ -52,6 +52,9 @@
 .ct-modal__body {
   padding: var(--space-6) var(--space-7);
   display: grid;
+  /* Clamped content track: projected content wraps or scrolls inside the
+     slot instead of widening the surface. See `.ct-card__body`. */
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-4);
 }
 
@@ -116,7 +119,9 @@
   --ct-confirmation-icon-color: var(--color-text-secondary);
 
   display: grid;
-  grid-template-columns: auto 1fr;
+  /* The content column is clamped so long words or wide embedded content
+     stay inside the dialog instead of stretching it. */
+  grid-template-columns: auto minmax(0, 1fr);
   gap: var(--space-4);
   align-items: start;
 }
@@ -135,6 +140,7 @@
 
 .ct-confirmation__content {
   display: grid;
+  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-2);
 }
 

package/docs/aperture-review.md

@@ -0,0 +1,55 @@
+# Aperture – Review und Politur
+
+Stand: 16. September 2026. Grundlage ist die vorhandene Aperture-Fassung im
+Arbeitsverzeichnis, visuell geprüft in der lokalen Vorschau und in Storybook.
+
+## Einschätzung
+
+Das geteilte, versetzte Oval ist der stärkste Identitätsträger. Die Kombination
+aus Papier, Kobalt und großer Groteskschrift gibt ihm einen überzeugenden Rahmen.
+Der ursprüngliche Einstieg funktioniert bereits gut. Im weiteren Seitenverlauf
+wird die Formidee jedoch kaum fortgeführt: gleichförmige runde Karten, ein üblicher
+Pillen-Button und ein kleiner Footer schwächen die Eigenständigkeit.
+
+Die Politur macht **Fuge und Versatz** zu einer wiederkehrenden Gestaltungsregel.
+Die Einschätzung zur Wiedererkennung ist ein Designurteil; eine Messung mit
+Nutzern oder ein Vergleich mit anderen Marken war nicht Teil dieses Durchgangs.
+
+## Befunde und Änderungen
+
+| Befund | Umsetzung |
+| --- | --- |
+| Die Signatur steckt hauptsächlich im großen Signet. | Geteilte Trennlinien übernehmen die 46/8/46-Proportion; zweite Überschriftszeilen treten wiederkehrend aus der Achse. |
+| Der Pfeil wirkt wie ein Standarddetail innerhalb einer Pille. | Beschriftung und Pfeilscheibe erhalten eine echte Fuge und einen vertikalen Versatz. Beides bleibt eine gemeinsame Klickfläche und ein Tastaturziel. |
+| Drei gleich ausgerichtete, stark gerundete Karten wirken austauschbar. | Ruhigere 4-px-Radien, gestaffelte Musterflächen, größere monochrome Formstudie und präzisere Typografie innerhalb der jeweiligen Fläche. Auf kleinen Breiten entfällt die Staffelung. |
+| Der Abschluss besitzt wenig visuelles Gewicht. | Eine große Wort-Bild-Marke und ein kurzer Leitsatz schließen die Komposition ab. |
+| Globale Link-Hover-Farben können die helle Beschriftung auf dunklen Aktionen überschreiben. | Aperture erhält explizite Hover-/Aktivfarben; ein Storybook-Test prüft den Kontrasterhalt. |
+| Versetzte Aktionen benötigen eine saubere Spiegelung in RTL. | Logische Innenabstände halten die Fuge offen; ein Geometrietest sichert sie ab. Disclosure-Pfeile zeigen auch in RTL nach unten beziehungsweise oben. |
+| Der fokussierte Sprunglink-Zielbereich übernimmt die orange Foundation-Markierung. | Der Inhaltsfokus folgt jetzt der Aperture-Tintenfarbe. |
+
+Das Oval selbst, seine Fuge und seine Proportionen bleiben erhalten. Kobalt
+konzentriert sich auf die Hauptfläche. Die neue monochrome Story zeigt, wie die
+Komposition ohne den Farbakzent funktioniert. Neue öffentliche Bausteine sind
+`ct-aperture-line` und `ct-aperture-rule`; die Komposition bleibt im Beispiel-CSS.
+
+## Bildvergleich
+
+| Vorher, 1440 px | Nachher, 1440 px |
+| --- | --- |
+| ![Aperture vor der Politur](assets/aperture-review/before-desktop.png) | ![Aperture nach der Politur](assets/aperture-review/after-desktop.png) |
+
+Weitere Ansichten: [Mobil, 390 px](assets/aperture-review/after-mobile.png) ·
+[Monochrom](assets/aperture-review/after-monochrome.png).
+
+## Verifikation
+
+- `npm run build` und `npm run check`: erfolgreich, einschließlich Token-, Kontrast-, CSS- und Exportprüfungen.
+- `npm test`: 447 bestandene Tests – 56 Behavior-, 378 Storybook-, 6 Touch- und 7 Forced-Colors-Tests; darunter 10 Aperture-Stories.
+- `npm run storybook:build`: erfolgreich. Vite meldet Hinweise zu Chunk-Größen und Plugin-Laufzeiten.
+- Zusätzliche Chromium-Prüfung: 320, 360, 390, 600, 850, 851, 900, 1024, 1440 und 1920 px in allen vier Themes; kein horizontaler Überlauf in diesen 40 Kombinationen.
+- Zusätzlich geprüft: RTL-Layout, lange Aktionsbeschriftungen, Sprunglink und Tastaturfokus, unbewegter Pfeil bei reduzierter Bewegung sowie 200 % Textgröße bei 720 px Fensterbreite.
+- Visuell kontrolliert: Desktop, Mobil, Zwischenbreite, Dark, High Contrast Dark, Forced Colors, RTL, Monochrom und vergrößerter Text.
+
+Screenshots dokumentieren den lokalen Chromium-Stand. Die automatisierten
+Accessibility-Prüfungen ersetzen keine vollständige manuelle Prüfung mit
+Screenreader oder in weiteren Browsern.

package/docs/aperture.md

@@ -0,0 +1,114 @@
+# Aperture
+
+Aperture is Construct's additional signature look. Its identifying shape is an oval
+split into two halves, separated by an eight-percent seam and shifted vertically.
+That silhouette repeats at wordmark and poster scale. Oversized, tightly set grotesk
+type and a displaced second line give the composition its rhythm. Paper, dark ink
+and one cobalt field keep the hierarchy clear. The seam also separates action labels
+from their lowered arrow discs and interrupts the composition's horizontal rules.
+The identity should remain legible in monochrome.
+
+Datum uses measured lines, technical annotations and orange registration marks.
+Aperture uses a bold silhouette, editorial scale and open space. Choose a grammar
+for a composition; avoid stacking both signatures on the same surface.
+
+## Preview
+
+Run `npm run storybook` and open **Patterns → Aperture Grammar → Aperture / The Full Look**.
+Stories also cover dark, high contrast, a compact container, native theme switching,
+individual primitives, all four theme scopes, right-to-left layout, a monochrome
+composition and long action labels. See the [polish review](aperture-review.md)
+for the visual findings and before/after comparison.
+
+For the standalone specimen, run `npx vite --host 127.0.0.1 --port 4173` from the
+repository and open `http://127.0.0.1:4173/aperture.demo.html`.
+Run `npm run build` first after a fresh checkout. Serve the page over HTTP so its
+shared ES module can load. The page needs no hosted fonts or image services.
+
+## Integration
+
+```css
+@import '@neuravision/construct/foundations.css';
+@import '@neuravision/construct/components/aperture.css';
+```
+
+```html
+<section class="ct-aperture" data-theme="light">
+  <p class="ct-aperture-label">A new perspective</p>
+  <h2 class="ct-aperture-heading">Room for character.</h2>
+  <a class="ct-aperture-action" href="/work">
+    Explore the work
+    <span class="ct-aperture-action__icon" aria-hidden="true">↗</span>
+  </a>
+</section>
+```
+
+The full component bundle includes Aperture too. Classes opt in explicitly;
+existing Datum components keep their styles. Theme scopes inherit normally:
+omit `data-theme` to follow the parent or the system preference.
+
+The composition in `examples/aperture/showcase.css` is example page layout.
+The reusable component contract lives in `components/aperture.css`. The native
+radio handler in `examples/aperture/showcase.js` only changes the preview's theme;
+the signature primitives themselves require no JavaScript.
+
+## Vocabulary
+
+| Primitive | Use |
+| --- | --- |
+| `ct-aperture` | Scoped typography, palette, selection, focus and query container |
+| `ct-aperture-mark` | Decorative split oval; set `aria-hidden="true"` |
+| `ct-aperture-wordmark` | Mark and name on a shared baseline |
+| `ct-aperture-label` | Small section label with restrained spacing |
+| `ct-aperture-display` / `ct-aperture-heading` | Fluid display and section typography |
+| `ct-aperture-line` | Block line within a heading; subsequent lines step out by 0.24em |
+| `ct-aperture-rule` | Decorative split rule with a 46 / 8 / 46 rhythm; set `aria-hidden="true"` |
+| `ct-aperture-poster` | A strong field for one mark and a caption |
+| `ct-aperture-action` / `--quiet` | Native action with detached circular arrow |
+| `ct-aperture-panel` | A quiet supporting surface |
+| `ct-aperture-choices` / `ct-aperture-choice` | Fieldset and labels around native radios |
+| `ct-aperture-disclosure` | Native `details` and `summary` content |
+
+Put `ct-aperture-poster__art` around the mark and
+`ct-aperture-poster__caption` on the caption. Set
+`--ct-aperture-mark-size` to a CSS length or percentage to resize a mark.
+Use a link for navigation and a button for an action; disable buttons with the
+native `disabled` attribute. Supply actual destinations and product behavior.
+
+Action text and `ct-aperture-action__icon` belong inside the same native control.
+The six-pixel visual seam is part of its clickable area; the disc is lowered eight
+pixels and aligns with the label on hover. Keep the icon decorative, never a second
+button. Inline SVG provides a consistent arrow shape; a text arrow also works.
+
+Use `ct-aperture-line` on spans inside a single heading, with whitespace between
+the spans. The offset follows the reading direction and allows wrapping. Split
+rules are decorative composition breaks, not semantic `hr` replacements.
+
+## Design constraints
+
+- Use one dominant mark per composition. Smaller repetitions establish continuity.
+- Keep the seam and offset proportional. Do not stretch the individual halves.
+- Use typography and space for hierarchy. Reserve cobalt for the main focal area.
+- Keep content text out of decorative cutouts. Let long labels and translated copy wrap.
+- Keep the giant display for short headlines. Use the heading scale for longer text.
+- Repeat the seam and offset in a few purposeful places. Avoid turning every edge into a motif.
+- Keep supporting panels restrained; the default four-pixel radius leaves the oval as the dominant curve.
+
+Colors resolve from cobalt/graphite primitives through `color.aperture.*` semantic
+roles to `aperture.*` component tokens. The heading family uses the local Arial /
+Helvetica / sans-serif stack, independent of Construct's optional Lato font import.
+Customize token sources and regenerate outputs with `npm run build`.
+
+## Accessibility and verification
+
+The token pipeline gates ink and secondary text against paper and surface, and
+poster text against its accent, at 4.5:1 in each theme. Keyboard focus uses a visible
+outline; selected radios also change border and weight. Actions and theme labels
+have at least 44-pixel targets. Radio groups and disclosures use browser-native
+keyboard behavior. Hover motion is disabled for reduced-motion preferences.
+Forced colors preserves the silhouette with system colors, control borders and
+an underlined selected radio label.
+
+Storybook includes interaction and automated accessibility checks. Touch and
+forced-colors suites cover the new controls. These are bounded automated checks,
+not a claim that any consuming page is completely WCAG conformant.

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/examples/aperture/showcase.css

@@ -0,0 +1,363 @@
+/* Composition for the Aperture specimen. Public primitives live in
+   components/aperture.css; this file contains only page layout. */
+.aperture-demo {
+  inline-size: 100%;
+}
+
+.aperture-demo__page {
+  max-inline-size: 1600px;
+  margin-inline: auto;
+  padding-inline: clamp(1.25rem, 4.5cqi, 5rem);
+}
+
+.aperture-demo__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+  padding-block: var(--space-7);
+}
+
+.aperture-demo__header .ct-aperture-wordmark {
+  font-size: 28px;
+}
+
+.aperture-demo__nav {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: clamp(1rem, 3cqi, 3rem);
+}
+
+.aperture-demo__link {
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 44px;
+  color: inherit;
+  font-size: var(--font-size-sm);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.3em;
+}
+
+.aperture-demo__link:is(:hover, :active) {
+  color: inherit;
+}
+
+.aperture-demo__skip {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: var(--space-6);
+  z-index: 1;
+  padding: var(--space-5);
+  background: var(--component-aperture-paper);
+  color: inherit;
+  transform: translateY(-150%);
+}
+
+.aperture-demo__skip:focus {
+  transform: none;
+}
+
+.aperture-demo__hero {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 4cqi;
+  padding-block: clamp(2.5rem, 5cqi, 5rem) var(--space-10);
+}
+
+.aperture-demo__intro {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  min-inline-size: 0;
+  padding-block: var(--space-5) var(--space-4);
+}
+
+.aperture-demo__intro .ct-aperture-display {
+  margin-block: clamp(2.5rem, 4.6cqi, 5rem) clamp(2rem, 3.5cqi, 4rem);
+}
+
+.aperture-demo__eyebrow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4) var(--space-7);
+}
+
+.aperture-demo__eyebrow span:last-child {
+  color: var(--component-aperture-muted);
+}
+
+.aperture-demo__poster-heading {
+  display: flex;
+  align-items: start;
+  justify-content: space-between;
+  gap: var(--space-5);
+}
+
+.aperture-demo__poster-heading > :last-child {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.aperture-demo__description {
+  max-inline-size: 29ch;
+  font-size: clamp(1rem, 0.75rem + 0.7cqi, 1.4rem);
+  line-height: 1.55;
+  color: var(--component-aperture-muted);
+}
+
+.aperture-demo__intro .ct-aperture-action {
+  margin-block-start: var(--space-8);
+}
+
+.aperture-demo__hero .ct-aperture-poster {
+  min-block-size: 540px;
+}
+
+.aperture-demo__hero .ct-aperture-poster__art .ct-aperture-mark {
+  --ct-aperture-mark-size: 86%;
+}
+
+.aperture-demo__edition {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-5);
+  padding-block: var(--space-6);
+  font-size: var(--font-size-xs);
+}
+
+.aperture-demo__edition span:last-child {
+  color: var(--component-aperture-muted);
+}
+
+.aperture-demo__section {
+  padding-block: clamp(4rem, 8cqi, 8rem);
+  scroll-margin-block-start: var(--space-7);
+}
+
+.aperture-demo__section-head {
+  display: grid;
+  grid-template-columns: 1.35fr 0.65fr;
+  gap: var(--space-9);
+  align-items: end;
+  margin-block-end: var(--space-10);
+}
+
+.aperture-demo__section-head .ct-aperture-label {
+  margin-block-end: var(--space-7);
+}
+
+.aperture-demo__section-head > p {
+  max-inline-size: 36ch;
+  color: var(--component-aperture-muted);
+}
+
+.aperture-demo__specimens {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr 1fr;
+  align-items: start;
+  gap: var(--space-6);
+}
+
+.aperture-demo__specimen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  min-inline-size: 0;
+}
+
+.aperture-demo__specimen:nth-child(2) {
+  margin-block-start: var(--space-8);
+}
+
+.aperture-demo__specimen:nth-child(3) {
+  margin-block-start: var(--space-10);
+}
+
+.aperture-demo__specimen h3 {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-4);
+  font-size: var(--font-size-xl);
+  letter-spacing: -0.035em;
+}
+
+.aperture-demo__index {
+  color: var(--component-aperture-muted);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.aperture-demo__specimen p {
+  margin-block-start: var(--space-3);
+  font-size: var(--font-size-sm);
+  color: var(--component-aperture-muted);
+}
+
+.aperture-demo__sample {
+  position: relative;
+  container-type: inline-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 260px;
+  padding: var(--space-10) var(--space-6) var(--space-6);
+  border: 1px solid var(--component-aperture-border);
+  border-radius: var(--component-aperture-panel-radius);
+}
+
+.aperture-demo__sample-label {
+  position: absolute;
+  inset-block-start: var(--space-5);
+  inset-inline: var(--space-6);
+  font-size: 10px;
+  font-weight: var(--font-weight-regular);
+  letter-spacing: 0.06em;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.aperture-demo__sample--mark {
+  color: var(--component-aperture-ink);
+  background: var(--component-aperture-surface);
+}
+
+.aperture-demo__marks {
+  display: flex;
+  align-items: end;
+  justify-content: center;
+  gap: clamp(1.5rem, 12cqi, 3rem);
+  inline-size: 100%;
+}
+
+.aperture-demo__sample--mark .ct-aperture-mark:first-child {
+  --ct-aperture-mark-size: clamp(80px, 40cqi, 120px);
+}
+
+.aperture-demo__sample--mark .ct-aperture-mark:last-child {
+  --ct-aperture-mark-size: 32px;
+}
+
+.aperture-demo__sample--type {
+  justify-content: start;
+  color: var(--component-aperture-paper);
+  background: var(--component-aperture-ink);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.07em;
+  line-height: 1;
+}
+
+.aperture-demo__sample--type > div {
+  font-size: clamp(2rem, 20cqi, 5.5rem);
+}
+
+.aperture-demo__sample--action {
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.aperture-demo__note {
+  display: grid;
+  grid-template-columns: 0.75fr 1.25fr;
+  align-items: start;
+  gap: clamp(2rem, 6cqi, 6rem);
+  padding-block: var(--space-8) clamp(4rem, 8cqi, 8rem);
+  scroll-margin-block-start: var(--space-7);
+}
+
+.aperture-demo__note .ct-aperture-label {
+  margin-block-end: var(--space-6);
+}
+
+.aperture-demo__footer {
+  padding-block-end: var(--space-7);
+  font-size: var(--font-size-xs);
+}
+
+.aperture-demo__signoff {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-7);
+  padding-block: clamp(2.5rem, 5cqi, 5rem);
+}
+
+.aperture-demo__signature {
+  --ct-aperture-mark-size: 0.8em;
+  gap: 0.2em;
+  font-size: clamp(3.5rem, 10.5cqi, 10rem);
+  letter-spacing: -0.075em;
+}
+
+.aperture-demo__signoff > p {
+  padding-block-end: 0.25em;
+  font-size: clamp(1.25rem, 2.5cqi, 2rem);
+  font-weight: var(--font-weight-bold);
+  letter-spacing: -0.035em;
+  line-height: 1.2;
+}
+
+.aperture-demo__colophon {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-6);
+  color: var(--component-aperture-muted);
+}
+
+@container (max-width: 850px) {
+  .aperture-demo__hero,
+  .aperture-demo__section-head,
+  .aperture-demo__note {
+    grid-template-columns: 1fr;
+  }
+
+  .aperture-demo__hero {
+    gap: var(--space-9);
+  }
+
+  .aperture-demo__intro .ct-aperture-display {
+    font-size: clamp(3.25rem, 0.75rem + 15cqi, 8.5rem);
+  }
+
+  .aperture-demo__hero .ct-aperture-poster {
+    min-block-size: 0;
+  }
+
+  .aperture-demo__hero .ct-aperture-poster__art .ct-aperture-mark {
+    --ct-aperture-mark-size: min(65%, 320px);
+  }
+
+  .aperture-demo__specimens {
+    grid-template-columns: 1fr;
+    gap: var(--space-9);
+  }
+
+  .aperture-demo__specimen:nth-child(n) {
+    margin-block-start: 0;
+  }
+
+  .aperture-demo__sample {
+    min-block-size: 240px;
+  }
+
+  .aperture-demo__sample--type > div {
+    font-size: clamp(2rem, 20cqi, 6rem);
+  }
+}
+
+@media (forced-colors: active) {
+  .aperture-demo__sample {
+    color: CanvasText;
+    background: Canvas;
+    border-color: CanvasText;
+  }
+}