@skra/ui 0.8.0 → 0.9.0

package/consumer-guide/README.md

@@ -60,7 +60,7 @@ Violating these is a review blocker in a consumer repo just as inside Skra.
 | **File upload**             | `file-upload.md`               | Choosing files (picker / drop zone), a file list with progress, the queue model, a tus upload; `accept` and language limits | ✅ draft |
 | **Feedback**                | `feedback.md`                  | Alert vs toast vs badge vs field error; `live` announcing; dismissal; an alert with a next-step action                      | ✅ draft |
 | **Overlays**                | `overlays.md`                  | Dialog / tooltip / popover / menu / select in the top layer; shadow & iframe limits                                         | ✅ draft |
-| **Layout**                  | `layout.md`                    | Spacing & composition with Stack / Box / Surface / Grid; building a card; the gap scale                                     | ✅ draft |
+| **Layout**                  | `layout.md`                    | Spacing & composition with Stack / Box / Surface / Grid; cards, nav links, the gap scale                                    | ✅ draft |
 | **Wrapping Skra**           | `wrapping-patterns.md`         | Building your own higher-level components over Skra atoms (simplified API)                                                  | ✅ draft |
 | **Custom components**       | `custom-components.md`         | Authoring a net-new widget Skra does not ship (nothing to wrap) on Skra tokens — own token tier, state, promotion path      | ✅ draft |
 

package/consumer-guide/layout.md

@@ -11,8 +11,12 @@ a native host** (a bounded allowlist of `div`/`section`/`nav`/`ul`/…), **never
 `<skra-stack>` custom element. Put them on the semantic element you'd use anyway:
 
 ```html
-<section skraStack gap="md">…</section>     <!-- not <div><skra-stack> -->
-<ul skraStack gap="sm">…</ul>                 <!-- list markers normalized, restorable -->
+<section skraStack gap="md">…</section>
+<!-- not <div><skra-stack> -->
+<ul skraStack gap="sm">
+  …
+</ul>
+<!-- list markers normalized, restorable -->
 ```
 
 ## Sizing container-filling components (e.g. `skra-select`)
@@ -38,16 +42,16 @@ width.
 
 Arranges children in a row or column.
 
-| Input | Values | Default |
-| --- | --- | --- |
-| `direction` | `row` \| `column` | `column` |
-| `gap` | `none` \| `sm` \| `md` \| `lg` | `md` |
-| `align` | `start` \| `center` \| `end` \| `stretch` | `stretch` |
-| `justify` | `start` \| `center` \| `end` \| `between` \| `around` | `start` |
-| `wrap` | boolean | `false` |
+| Input       | Values                                                  | Default   |
+| ----------- | ------------------------------------------------------- | --------- |
+| `direction` | `row` \| `column`                                       | `column`  |
+| `gap`       | `none` \| `sm` \| `md` \| `lg`                          | `md`      |
+| `align`     | `start` \| `center` \| `end` \| `stretch` \| `baseline` | `stretch` |
+| `justify`   | `start` \| `center` \| `end` \| `between` \| `around`   | `start`   |
+| `wrap`      | boolean                                                 | `false`   |
 
 ```html
-<div skraStack direction="row" gap="sm" wrap align="center">
+<div skraStack direction="row" gap="sm" wrap [align]="'center'">
   <skra-chip>One</skra-chip>
   <skra-chip>Two</skra-chip>
 </div>
@@ -56,13 +60,24 @@ Arranges children in a row or column.
 (`wrap` is a bare boolean attribute — every Skra boolean input carries `booleanAttribute`, so
 the bare form works; see `setup-and-gotchas.md`.)
 
+**Gotcha — bind `align`, don't write it as a static attribute.** `align` is also a legacy HTML
+attribute. Written statically (`<div skraStack align="center">`), Angular sets the input but the
+attribute stays in the DOM, and the browser turns it into `text-align` on the host — Chromium
+does so on every host Stack accepts (`div`, `section`, `header`, `ul`, …) and for both `center`
+and `end`. Any text inside the stack is then centred or end-aligned. The bound form
+`[align]="'center'"` sets the input without writing the attribute. The same applies to
+`skraGrid`'s `align`. Since O-89 the atoms neutralise the hint themselves (`text-align: inherit`
+while the attribute is present), so the static form no longer misaligns text — the bound form
+stays the recommended one. If you want aligned text inside a stack, set `text-align` on a child
+(or on the host with a selector more specific than a single class).
+
 ## Box — padding / spacing (`[skraBox]`)
 
 A semantically-neutral padding primitive. Does **not** arrange children (no list hosts).
 
-| Input | Values | Default |
-| --- | --- | --- |
-| `padding` | `none` \| `sm` \| `md` \| `lg` | `none` |
+| Input     | Values                              | Default |
+| --------- | ----------------------------------- | ------- |
+| `padding` | `none` \| `sm` \| `md` \| `lg`      | `none`  |
 | `display` | `block` \| `inline-block` \| `flex` | `block` |
 
 ```html
@@ -74,8 +89,8 @@ A semantically-neutral padding primitive. Does **not** arrange children (no list
 Box's **painting** sibling: background, border, radius, shadow — plus its own padding. Same
 host allowlist as Box (`div`/`section`/`article`/`main`/`nav`/`aside`/`header`/`footer`/`figure`).
 
-| Input | Values | Default |
-| --- | --- | --- |
+| Input     | Values                         | Default  |
+| --------- | ------------------------------ | -------- |
 | `padding` | `none` \| `sm` \| `md` \| `lg` | **`md`** |
 
 That is the whole API. Note the default differs from Box's `none` — Box is spacing-neutral by
@@ -109,16 +124,16 @@ There is no `selected` input, and there never will be one — `aria-selected` is
 producing invalid ARIA. Instead, Surface paints a selected state when **your own markup** says
 so, from exactly two signals:
 
-| Your markup | When it is the right one |
-| --- | --- |
-| `aria-current="true"` (or `page` / `step` / `date`) on the Surface host | the current item of a set — a global ARIA state, so it is valid on a role-less `<article>` |
-| `aria-selected="true"` on a host that **already** carries `option`/`row`/`gridcell`/`tab` | only inside a listbox / grid / tablist you actually built |
+| Your markup                                                                               | When it is the right one                                                                   |
+| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
+| `aria-current="true"` (or `page` / `step` / `date`) on the Surface host                   | the current item of a set — a global ARIA state, so it is valid on a role-less `<article>` |
+| `aria-selected="true"` on a host that **already** carries `option`/`row`/`gridcell`/`tab` | only inside a listbox / grid / tablist you actually built                                  |
 
 ```html
 <article skraSurface padding="md" aria-current="true" aria-labelledby="t">…</article>
 ```
 
-`aria-current="false"` and `aria-selected="false"` are explicit *not*-current and paint as
+`aria-current="false"` and `aria-selected="false"` are explicit _not_-current and paint as
 resting.
 
 **Gotcha — a checked control inside the card is NOT a signal.** A card wrapping a checked
@@ -133,34 +148,97 @@ there: the radio already announces "selected", and adding `aria-current` makes a
 technology announce one fact twice under two names. A dedicated marker for that shape is a known
 gap (Skra-side `[skraSurfaceSelect]`), not something to emulate with a class.
 
-### Interactive (clickable) cards are not shipped yet
+### Interactive (clickable) cards — `[skraSurfaceLink]`
 
 Surface is a container, not a widget, and the host allowlist deliberately excludes `a` and
-`button`: `<button>` cannot legally contain flow content (its content model is phrasing content
-with no interactive descendant), and an `<a>` wrapping the whole card takes the card's **entire**
-text as its accessible name — which `aria-label` may not fix (Iron Rule 3).
+`button`: `<button>` cannot legally contain flow content, and an `<a>` wrapping the whole card
+takes the card's **entire** text as its accessible name — which `aria-label` may not fix
+(Iron Rule 3). Instead, put `skraSurfaceLink` on **your own** primary link (or `<button>`, when
+the card performs an action) inside the Surface:
+
+```html
+<article skraSurface padding="lg">
+  <h3 skraTypography="title-small">
+    <a skraSurfaceLink routerLink="/runs/2026-08-24">Morning run</a>
+  </h3>
+  <p skraTypography="body-medium">5.2 km · 24:31</p>
+</article>
+```
+
+What you get, with no inputs:
+
+- The link's hit area covers the whole card; one tab stop; the accessible name is the link
+  text ("Morning run"), not the whole card body.
+- Hover fills the card (pointer devices only — it does not latch after a tap), and the focus
+  ring is drawn **around the card**, the real target.
+- The link text takes the card's text colour, without an underline (a skin may change that).
 
-Until the stretched-link marker ships, put a normal `a[skraLink]`/`button[skraButton]` **inside**
-the card and let it be the target. Do not make the card itself clickable with a `(click)` on a
-`<div>` — that fails keyboard access (WCAG 2.1.1) and has no role.
+Rules:
+
+- **One `skraSurfaceLink` per Surface.** A second one, or one with no Surface ancestor, is a
+  dev-mode console error. A list of targets is a list of Surfaces — `<li><article skraSurface>…` — and
+  a Surface nested in another paints only itself; the outer panel does not light up.
+- **`skraLink` + `skraSurfaceLink` on one `<a>` is not possible** (both are components). The
+  marker already carries the text look.
+- **A second control inside a linked card** (a "Share" button) sits under the overlay unless
+  you raise it: give it `position: relative` and keep it after the link in the DOM. Keep it at
+  least 24×24 CSS px (WCAG 2.5.8).
+- Text inside a linked card cannot be selected with the mouse — a known, accepted cost of the
+  pattern.
+- Do not make a card clickable with `(click)` on a `<div>` — that fails keyboard access
+  (WCAG 2.1.1) and has no role.
+
+**Hover without a link:** an informational card has no hover state, and there is no
+`hoverable` input. If you add your own hover paint in app CSS, gate it behind
+`@media (hover: hover) and (pointer: fine)`, or it will latch after every tap on touch.
+
+## Navigation — `a[skraNavLink]` (ADR 0060)
+
+A primary or section navigation whose **current** destination is visible, not only announced.
+`skraNavLink` is a link — middle-click, "open in new tab", "copy link" all stay — with a
+surface shape (pill or square, the skin decides) and a current state:
+
+```html
+<nav aria-label="Primary">
+  <ul skraStack direction="row" gap="sm">
+    <li>
+      <a skraNavLink routerLink="/groups" routerLinkActive ariaCurrentWhenActive="page">Groups</a>
+    </li>
+    <li>
+      <a skraNavLink routerLink="/runs" routerLinkActive ariaCurrentWhenActive="page">Runs</a>
+    </li>
+  </ul>
+</nav>
+```
 
-**Hover:** Surface has no hover state in v1, and there is no `hoverable` input — an
-informational card correctly stays inert. If you add your own hover paint in app CSS, gate it
-behind `@media (hover: hover) and (pointer: fine)`, or it will latch after every tap on touch.
+- **The current state comes from `aria-current`, which you (or the router) write.**
+  `skraNavLink` has no `active` input — it reads the attribute, so what the eye sees and what a
+  screen reader announces cannot disagree. Without `routerLinkActive` (or your own
+  `[attr.aria-current]`), no item ever shows as current. `aria-current="false"` is not current.
+- **It must sit inside `<nav>`** (or `role="navigation"`); outside one it is a dev-mode console
+  error. A pill-shaped link in a hero section is a marketing CTA, which Skra does not ship
+  (ADR 032) — use `skraButton` for an action, `skraLink` for a link in text.
+- **No `intent`, `emphasis`, `size` or `disabled`.** A destination the user cannot visit is not a
+  link: leave it out of the nav, or render it as plain text.
+- **Name = the visible text.** Do not add `aria-label`.
+- Spacing between items is the list's `skraStack` gap; for a side nav use
+  `direction="column"`.
+- `skraLink` vs `skraNavLink`: underlined text in a sentence → `skraLink`; a destination in a
+  navigation bar → `skraNavLink`. Do not put both on one `<a>` (both are components).
 
 ## Grid — 2D (`[skraGrid]`)
 
 Bucket-only CSS Grid. The default `columns="auto-fit"` + `min` gives an intrinsically
 responsive card grid (column count tracks width, **no media/container queries**):
 
-| Input | Values | Default |
-| --- | --- | --- |
-| `columns` | `1`…`6` \| `auto-fit` \| `auto-fill` | `auto-fit` |
-| `min` | `sm` \| `md` \| `lg` | — |
-| `gap` | `none` \| `sm` \| `md` \| `lg` | — |
-| `flow` | `row` \| `column` \| `dense` | — |
-| `align` | `start` \| `center` \| `end` \| `stretch` | — |
-| `justifyItems` | `start` \| `center` \| `end` \| `stretch` | — |
+| Input          | Values                                                                                           | Default    |
+| -------------- | ------------------------------------------------------------------------------------------------ | ---------- |
+| `columns`      | `1`…`6` \| `auto-fit` \| `auto-fill`                                                             | `auto-fit` |
+| `min`          | `sm` \| `md` \| `lg`                                                                             | —          |
+| `gap`          | `none` \| `sm` \| `md` \| `lg`                                                                   | —          |
+| `flow`         | `row` \| `column` \| `dense`                                                                     | —          |
+| `align`        | `start` \| `center` \| `end` \| `stretch` — bind it: `[align]="'center'"` (see the Stack gotcha) | —          |
+| `justifyItems` | `start` \| `center` \| `end` \| `stretch`                                                        | —          |
 
 ```html
 <div skraGrid columns="auto-fit" min="md" gap="md">

package/fesm2022/skra-ui-layout.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute } from '@angular/core';
+import { input, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, inject, ElementRef, afterNextRender } from '@angular/core';
 
 /**
  * SkraBox — semantically-neutral spacing/padding primitive (ADR 041).
@@ -56,7 +56,7 @@ class SkraStack {
     ...(ngDevMode ? [{ debugName: "justify" }] : /* istanbul ignore next */ []));
     wrap = input(false, { ...(ngDevMode ? { debugName: "wrap" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraStack, isStandalone: true, selector: "div[skraStack], section[skraStack], article[skraStack], main[skraStack], nav[skraStack], aside[skraStack], header[skraStack], footer[skraStack], form[skraStack], figure[skraStack], ul[skraStack], ol[skraStack], menu[skraStack]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-direction": "direction()", "attr.data-skra-gap": "gap()", "attr.data-skra-align": "align()", "attr.data-skra-justify": "justify()", "attr.data-skra-wrap": "wrap() ? \"\" : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;margin:0;box-sizing:border-box}:host[data-skra-direction=column]{flex-direction:column}:host[data-skra-direction=row]{flex-direction:row}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-stack-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-stack-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-stack-gap-lg)}:host[data-skra-align=start]{align-items:flex-start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:flex-end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify=start]{justify-content:flex-start}:host[data-skra-justify=center]{justify-content:center}:host[data-skra-justify=end]{justify-content:flex-end}:host[data-skra-justify=between]{justify-content:space-between}:host[data-skra-justify=around]{justify-content:space-around}:host[data-skra-wrap]{flex-wrap:wrap}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraStack, isStandalone: true, selector: "div[skraStack], section[skraStack], article[skraStack], main[skraStack], nav[skraStack], aside[skraStack], header[skraStack], footer[skraStack], form[skraStack], figure[skraStack], ul[skraStack], ol[skraStack], menu[skraStack]", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-direction": "direction()", "attr.data-skra-gap": "gap()", "attr.data-skra-align": "align()", "attr.data-skra-justify": "justify()", "attr.data-skra-wrap": "wrap() ? \"\" : null" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:flex;margin:0;box-sizing:border-box}:host[data-skra-direction=column]{flex-direction:column}:host[data-skra-direction=row]{flex-direction:row}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-stack-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-stack-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-stack-gap-lg)}:host[data-skra-align=start]{align-items:flex-start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:flex-end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-align=baseline]{align-items:baseline}:host[data-skra-justify=start]{justify-content:flex-start}:host[data-skra-justify=center]{justify-content:center}:host[data-skra-justify=end]{justify-content:flex-end}:host[data-skra-justify=between]{justify-content:space-between}:host[data-skra-justify=around]{justify-content:space-around}:host[data-skra-wrap]{flex-wrap:wrap}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}:host(:where([align])){text-align:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraStack, decorators: [{
             type: Component,
@@ -70,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-skra-align]': 'align()',
                         '[attr.data-skra-justify]': 'justify()',
                         '[attr.data-skra-wrap]': 'wrap() ? "" : null',
-                    }, styles: [":host{display:flex;margin:0;box-sizing:border-box}:host[data-skra-direction=column]{flex-direction:column}:host[data-skra-direction=row]{flex-direction:row}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-stack-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-stack-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-stack-gap-lg)}:host[data-skra-align=start]{align-items:flex-start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:flex-end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify=start]{justify-content:flex-start}:host[data-skra-justify=center]{justify-content:center}:host[data-skra-justify=end]{justify-content:flex-end}:host[data-skra-justify=between]{justify-content:space-between}:host[data-skra-justify=around]{justify-content:space-around}:host[data-skra-wrap]{flex-wrap:wrap}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}\n"] }]
+                    }, styles: [":host{display:flex;margin:0;box-sizing:border-box}:host[data-skra-direction=column]{flex-direction:column}:host[data-skra-direction=row]{flex-direction:row}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-stack-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-stack-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-stack-gap-lg)}:host[data-skra-align=start]{align-items:flex-start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:flex-end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-align=baseline]{align-items:baseline}:host[data-skra-justify=start]{justify-content:flex-start}:host[data-skra-justify=center]{justify-content:center}:host[data-skra-justify=end]{justify-content:flex-end}:host[data-skra-justify=between]{justify-content:space-between}:host[data-skra-justify=around]{justify-content:space-around}:host[data-skra-wrap]{flex-wrap:wrap}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}:host(:where([align])){text-align:inherit}\n"] }]
         }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
 
 /**
@@ -105,7 +105,7 @@ class SkraGrid {
     justifyItems = input('stretch', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "justifyItems" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraGrid, isStandalone: true, selector: "div[skraGrid], section[skraGrid], article[skraGrid], main[skraGrid], nav[skraGrid], aside[skraGrid], header[skraGrid], footer[skraGrid], form[skraGrid], figure[skraGrid], ul[skraGrid], ol[skraGrid], menu[skraGrid]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justifyItems: { classPropertyName: "justifyItems", publicName: "justifyItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-columns": "columns()", "attr.data-skra-min": "min()", "attr.data-skra-gap": "gap()", "attr.data-skra-flow": "flow()", "attr.data-skra-align": "align()", "attr.data-skra-justify-items": "justifyItems()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:grid;margin:0;box-sizing:border-box}:host[data-skra-min=sm]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-sm)}:host[data-skra-min=md]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-md)}:host[data-skra-min=lg]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-lg)}:host[data-skra-columns=\"1\"]{grid-template-columns:repeat(1,minmax(0,1fr))}:host[data-skra-columns=\"2\"]{grid-template-columns:repeat(2,minmax(0,1fr))}:host[data-skra-columns=\"3\"]{grid-template-columns:repeat(3,minmax(0,1fr))}:host[data-skra-columns=\"4\"]{grid-template-columns:repeat(4,minmax(0,1fr))}:host[data-skra-columns=\"5\"]{grid-template-columns:repeat(5,minmax(0,1fr))}:host[data-skra-columns=\"6\"]{grid-template-columns:repeat(6,minmax(0,1fr))}:host[data-skra-columns=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-columns=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-grid-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-grid-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-grid-gap-lg)}:host[data-skra-flow=row]{grid-auto-flow:row}:host[data-skra-flow=column]{grid-auto-flow:column}:host[data-skra-flow=dense]{grid-auto-flow:row dense}:host[data-skra-align=start]{align-items:start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify-items=start]{justify-items:start}:host[data-skra-justify-items=center]{justify-items:center}:host[data-skra-justify-items=end]{justify-items:end}:host[data-skra-justify-items=stretch]{justify-items:stretch}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraGrid, isStandalone: true, selector: "div[skraGrid], section[skraGrid], article[skraGrid], main[skraGrid], nav[skraGrid], aside[skraGrid], header[skraGrid], footer[skraGrid], form[skraGrid], figure[skraGrid], ul[skraGrid], ol[skraGrid], menu[skraGrid]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, flow: { classPropertyName: "flow", publicName: "flow", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justifyItems: { classPropertyName: "justifyItems", publicName: "justifyItems", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-columns": "columns()", "attr.data-skra-min": "min()", "attr.data-skra-gap": "gap()", "attr.data-skra-flow": "flow()", "attr.data-skra-align": "align()", "attr.data-skra-justify-items": "justifyItems()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:grid;margin:0;box-sizing:border-box}:host[data-skra-min=sm]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-sm)}:host[data-skra-min=md]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-md)}:host[data-skra-min=lg]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-lg)}:host[data-skra-columns=\"1\"]{grid-template-columns:repeat(1,minmax(0,1fr))}:host[data-skra-columns=\"2\"]{grid-template-columns:repeat(2,minmax(0,1fr))}:host[data-skra-columns=\"3\"]{grid-template-columns:repeat(3,minmax(0,1fr))}:host[data-skra-columns=\"4\"]{grid-template-columns:repeat(4,minmax(0,1fr))}:host[data-skra-columns=\"5\"]{grid-template-columns:repeat(5,minmax(0,1fr))}:host[data-skra-columns=\"6\"]{grid-template-columns:repeat(6,minmax(0,1fr))}:host[data-skra-columns=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-columns=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-grid-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-grid-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-grid-gap-lg)}:host[data-skra-flow=row]{grid-auto-flow:row}:host[data-skra-flow=column]{grid-auto-flow:column}:host[data-skra-flow=dense]{grid-auto-flow:row dense}:host[data-skra-align=start]{align-items:start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify-items=start]{justify-items:start}:host[data-skra-justify-items=center]{justify-items:center}:host[data-skra-justify-items=end]{justify-items:end}:host[data-skra-justify-items=stretch]{justify-items:stretch}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}:host(:where([align])){text-align:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraGrid, decorators: [{
             type: Component,
@@ -120,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-skra-flow]': 'flow()',
                         '[attr.data-skra-align]': 'align()',
                         '[attr.data-skra-justify-items]': 'justifyItems()',
-                    }, styles: [":host{display:grid;margin:0;box-sizing:border-box}:host[data-skra-min=sm]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-sm)}:host[data-skra-min=md]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-md)}:host[data-skra-min=lg]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-lg)}:host[data-skra-columns=\"1\"]{grid-template-columns:repeat(1,minmax(0,1fr))}:host[data-skra-columns=\"2\"]{grid-template-columns:repeat(2,minmax(0,1fr))}:host[data-skra-columns=\"3\"]{grid-template-columns:repeat(3,minmax(0,1fr))}:host[data-skra-columns=\"4\"]{grid-template-columns:repeat(4,minmax(0,1fr))}:host[data-skra-columns=\"5\"]{grid-template-columns:repeat(5,minmax(0,1fr))}:host[data-skra-columns=\"6\"]{grid-template-columns:repeat(6,minmax(0,1fr))}:host[data-skra-columns=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-columns=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-grid-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-grid-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-grid-gap-lg)}:host[data-skra-flow=row]{grid-auto-flow:row}:host[data-skra-flow=column]{grid-auto-flow:column}:host[data-skra-flow=dense]{grid-auto-flow:row dense}:host[data-skra-align=start]{align-items:start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify-items=start]{justify-items:start}:host[data-skra-justify-items=center]{justify-items:center}:host[data-skra-justify-items=end]{justify-items:end}:host[data-skra-justify-items=stretch]{justify-items:stretch}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}\n"] }]
+                    }, styles: [":host{display:grid;margin:0;box-sizing:border-box}:host[data-skra-min=sm]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-sm)}:host[data-skra-min=md]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-md)}:host[data-skra-min=lg]{--skra-comp-grid-track-min: var(--skra-comp-grid-min-lg)}:host[data-skra-columns=\"1\"]{grid-template-columns:repeat(1,minmax(0,1fr))}:host[data-skra-columns=\"2\"]{grid-template-columns:repeat(2,minmax(0,1fr))}:host[data-skra-columns=\"3\"]{grid-template-columns:repeat(3,minmax(0,1fr))}:host[data-skra-columns=\"4\"]{grid-template-columns:repeat(4,minmax(0,1fr))}:host[data-skra-columns=\"5\"]{grid-template-columns:repeat(5,minmax(0,1fr))}:host[data-skra-columns=\"6\"]{grid-template-columns:repeat(6,minmax(0,1fr))}:host[data-skra-columns=auto-fit]{grid-template-columns:repeat(auto-fit,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-columns=auto-fill]{grid-template-columns:repeat(auto-fill,minmax(var(--skra-comp-grid-track-min),1fr))}:host[data-skra-gap=none]{gap:0}:host[data-skra-gap=sm]{gap:var(--skra-comp-grid-gap-sm)}:host[data-skra-gap=md]{gap:var(--skra-comp-grid-gap-md)}:host[data-skra-gap=lg]{gap:var(--skra-comp-grid-gap-lg)}:host[data-skra-flow=row]{grid-auto-flow:row}:host[data-skra-flow=column]{grid-auto-flow:column}:host[data-skra-flow=dense]{grid-auto-flow:row dense}:host[data-skra-align=start]{align-items:start}:host[data-skra-align=center]{align-items:center}:host[data-skra-align=end]{align-items:end}:host[data-skra-align=stretch]{align-items:stretch}:host[data-skra-justify-items=start]{justify-items:start}:host[data-skra-justify-items=center]{justify-items:center}:host[data-skra-justify-items=end]{justify-items:end}:host[data-skra-justify-items=stretch]{justify-items:stretch}:host(ul),:host(ol),:host(menu){list-style:none;padding-inline-start:0}:host(:where([align])){text-align:inherit}\n"] }]
         }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], flow: [{ type: i0.Input, args: [{ isSignal: true, alias: "flow", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justifyItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "justifyItems", required: false }] }] } });
 
 /**
@@ -151,7 +151,7 @@ class SkraSurface {
     padding = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSurface, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraSurface, isStandalone: true, selector: "div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-padding": "padding()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;margin:0;box-sizing:border-box;background:var(--skra-comp-surface-background);color:var(--skra-comp-surface-foreground);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width);border-style:var(--skra-comp-surface-border-style);border-radius:var(--skra-comp-surface-radius);box-shadow:var(--skra-comp-surface-shadow);padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline);transition:background-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing),border-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing)}:host[data-skra-padding=none]{padding-block:0;padding-inline:0}:host[data-skra-padding=sm]{padding-block:var(--skra-comp-surface-padding-block-sm);padding-inline:var(--skra-comp-surface-padding-inline-sm)}:host[data-skra-padding=md]{padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline)}:host[data-skra-padding=lg]{padding-block:var(--skra-comp-surface-padding-block-lg);padding-inline:var(--skra-comp-surface-padding-inline-lg)}:host([aria-current]),:host([aria-selected=true]){background:var(--skra-comp-surface-background-selected);border-color:var(--skra-comp-surface-border-color-selected);border-width:var(--skra-comp-surface-border-width-selected)}:host([aria-current=false]),:host([aria-selected=false]){background:var(--skra-comp-surface-background);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width)}:host(:focus-visible){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: SkraSurface, isStandalone: true, selector: "div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]", inputs: { padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-skra-padding": "padding()" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:block;margin:0;box-sizing:border-box;background:var(--skra-comp-surface-background);color:var(--skra-comp-surface-foreground);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width);border-style:var(--skra-comp-surface-border-style);border-radius:var(--skra-comp-surface-radius);box-shadow:var(--skra-comp-surface-shadow);padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline);transition:background-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing),border-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing)}:host[data-skra-padding=none]{padding-block:0;padding-inline:0}:host[data-skra-padding=sm]{padding-block:var(--skra-comp-surface-padding-block-sm);padding-inline:var(--skra-comp-surface-padding-inline-sm)}:host[data-skra-padding=md]{padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline)}:host[data-skra-padding=lg]{padding-block:var(--skra-comp-surface-padding-block-lg);padding-inline:var(--skra-comp-surface-padding-inline-lg)}:host([aria-current]),:host([aria-selected=true]){background:var(--skra-comp-surface-background-selected);border-color:var(--skra-comp-surface-border-color-selected);border-width:var(--skra-comp-surface-border-width-selected)}:host([aria-current=false]),:host([aria-current=\"\"]),:host([aria-current=undefined]),:host([aria-selected=false]){background:var(--skra-comp-surface-background);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width)}:host(:focus-visible){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}:host(:has([skraSurfaceLink])){position:relative}@media(hover:hover)and (pointer:fine){:host(:has([skraSurfaceLink]:hover):not(:has([skraSurface] [skraSurfaceLink]:hover)):not([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined])):not([aria-selected=true])){background:var(--skra-comp-surface-background-hover)}}:host(:has([skraSurfaceLink]:focus-visible):not(:has([skraSurface] [skraSurfaceLink]:focus-visible))){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSurface, decorators: [{
             type: Component,
@@ -159,12 +159,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         // CSP-Safe State Reflection (ADR 021) — NO inline styles. This is the ONLY
                         // host attribute Surface emits (ADR 0055 R2): no role, no tabindex, no aria-*.
                         '[attr.data-skra-padding]': 'padding()',
-                    }, styles: [":host{display:block;margin:0;box-sizing:border-box;background:var(--skra-comp-surface-background);color:var(--skra-comp-surface-foreground);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width);border-style:var(--skra-comp-surface-border-style);border-radius:var(--skra-comp-surface-radius);box-shadow:var(--skra-comp-surface-shadow);padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline);transition:background-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing),border-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing)}:host[data-skra-padding=none]{padding-block:0;padding-inline:0}:host[data-skra-padding=sm]{padding-block:var(--skra-comp-surface-padding-block-sm);padding-inline:var(--skra-comp-surface-padding-inline-sm)}:host[data-skra-padding=md]{padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline)}:host[data-skra-padding=lg]{padding-block:var(--skra-comp-surface-padding-block-lg);padding-inline:var(--skra-comp-surface-padding-inline-lg)}:host([aria-current]),:host([aria-selected=true]){background:var(--skra-comp-surface-background-selected);border-color:var(--skra-comp-surface-border-color-selected);border-width:var(--skra-comp-surface-border-width-selected)}:host([aria-current=false]),:host([aria-selected=false]){background:var(--skra-comp-surface-background);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width)}:host(:focus-visible){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+                    }, styles: [":host{display:block;margin:0;box-sizing:border-box;background:var(--skra-comp-surface-background);color:var(--skra-comp-surface-foreground);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width);border-style:var(--skra-comp-surface-border-style);border-radius:var(--skra-comp-surface-radius);box-shadow:var(--skra-comp-surface-shadow);padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline);transition:background-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing),border-color var(--skra-comp-surface-motion-duration) var(--skra-comp-surface-motion-easing)}:host[data-skra-padding=none]{padding-block:0;padding-inline:0}:host[data-skra-padding=sm]{padding-block:var(--skra-comp-surface-padding-block-sm);padding-inline:var(--skra-comp-surface-padding-inline-sm)}:host[data-skra-padding=md]{padding-block:var(--skra-comp-surface-padding-block);padding-inline:var(--skra-comp-surface-padding-inline)}:host[data-skra-padding=lg]{padding-block:var(--skra-comp-surface-padding-block-lg);padding-inline:var(--skra-comp-surface-padding-inline-lg)}:host([aria-current]),:host([aria-selected=true]){background:var(--skra-comp-surface-background-selected);border-color:var(--skra-comp-surface-border-color-selected);border-width:var(--skra-comp-surface-border-width-selected)}:host([aria-current=false]),:host([aria-current=\"\"]),:host([aria-current=undefined]),:host([aria-selected=false]){background:var(--skra-comp-surface-background);border-color:var(--skra-comp-surface-border-color);border-width:var(--skra-comp-surface-border-width)}:host(:focus-visible){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}:host(:has([skraSurfaceLink])){position:relative}@media(hover:hover)and (pointer:fine){:host(:has([skraSurfaceLink]:hover):not(:has([skraSurface] [skraSurfaceLink]:hover)):not([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined])):not([aria-selected=true])){background:var(--skra-comp-surface-background-hover)}}:host(:has([skraSurfaceLink]:focus-visible):not(:has([skraSurface] [skraSurfaceLink]:focus-visible))){outline:var(--skra-comp-surface-focus-ring-width) solid var(--skra-comp-surface-focus-ring-color);outline-offset:var(--skra-comp-surface-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
         }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
 
+/**
+ * SkraSurfaceLink — the stretched-link marker that makes a whole `SkraSurface`
+ * one activation target (ADR 0055 R3/R4).
+ *
+ * Placed on the consumer's OWN primary control — `<a>` for navigation, `<button>`
+ * where the destination is an action — never on the Surface host (R3.1:
+ * `a[skraSurface]` / `button[skraSurface]` stay unsupported). Its own host
+ * stylesheet stretches the control's hit area over the nearest Surface with a
+ * `::after` overlay; the Surface reads `:has([skraSurfaceLink]…)` and paints hover
+ * and the focus ring on itself, because the surface is the target (R4.2).
+ *
+ * Accessible name: the control's own visible text (ADR 033 Path 1) — normally the
+ * card's heading. No inputs, no `aria-*`, no `role`, no `tabindex`: the native
+ * host already is the one tab stop.
+ *
+ * Dev-mode console errors (R3.3): no `[skraSurface]` ancestor (the overlay would
+ * stretch over whatever positioned ancestor happens to exist — possibly the whole
+ * page), and more than one marker whose NEAREST Surface is the same (two overlays
+ * = an invisible hit-area conflict). Checked on the rendered DOM, not through DI:
+ * a consumer's own card component projecting content into `<article skraSurface>`
+ * puts the marker inside the Surface in the DOM while its injector chain follows
+ * the declaring template and never meets the Surface.
+ */
+class SkraSurfaceLink {
+    constructor() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            const host = inject(ElementRef).nativeElement;
+            // Browser-only (afterNextRender never runs on the server) and read-only: the
+            // DOM is inspected, never mutated.
+            afterNextRender(() => checkPlacement(host));
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSurfaceLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraSurfaceLink, isStandalone: true, selector: "a[skraSurfaceLink], button[skraSurfaceLink]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{position:static;margin:0;color:inherit;text-decoration:var(--skra-comp-surface-link-text-decoration)}:host(button){padding:0;border:0;background:none;font:inherit;text-align:inherit;cursor:pointer}:host:after{content:\"\";position:absolute;inset:0}:host(:focus-visible){outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSurfaceLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[skraSurfaceLink], button[skraSurfaceLink]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, styles: [":host{position:static;margin:0;color:inherit;text-decoration:var(--skra-comp-surface-link-text-decoration)}:host(button){padding:0;border:0;background:none;font:inherit;text-align:inherit;cursor:pointer}:host:after{content:\"\";position:absolute;inset:0}:host(:focus-visible){outline:none}\n"] }]
+        }], ctorParameters: () => [] });
+/** Markers already reported as duplicates, per Surface — so one conflict logs once. */
+const reportedMarkers = new WeakMap();
+/** Dev-mode placement check (ADR 0055 R3 / R3.3). */
+function checkPlacement(host) {
+    const surface = host.parentElement?.closest('[skraSurface]');
+    if (!surface) {
+        console.error('[skraSurfaceLink] must sit inside a [skraSurface] host — its overlay stretches ' +
+            'over the nearest Surface, and without one it would cover whatever positioned ' +
+            'ancestor exists (ADR 0055 R3).', host);
+        return;
+    }
+    const own = Array.from(surface.querySelectorAll('[skraSurfaceLink]')).filter((link) => link.parentElement?.closest('[skraSurface]') === surface);
+    // Reported once per conflict, by whichever marker renders into it — including one
+    // inserted BEFORE an existing marker, which a "not the first in DOM order" rule
+    // missed (PR #9 review, S2). A marker that has already been reported stays quiet.
+    if (own.length > 1) {
+        const seen = reportedMarkers.get(surface) ?? new WeakSet();
+        reportedMarkers.set(surface, seen);
+        if (own.every((link) => seen.has(link)))
+            return;
+        own.forEach((link) => seen.add(link));
+        console.error('[skraSurfaceLink] appears more than once in the same [skraSurface] — at most one ' +
+            'stretched link per surface (ADR 0055 R3.3). Make each target its own Surface, ' +
+            'or keep the secondary control a plain link/button raised above the overlay.', host);
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkraBox, SkraGrid, SkraStack, SkraSurface };
+export { SkraBox, SkraGrid, SkraStack, SkraSurface, SkraSurfaceLink };
 //# sourceMappingURL=skra-ui-layout.mjs.map

package/fesm2022/skra-ui-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-layout.mjs","sources":["../../../../libs/ui/layout/src/lib/box/box.ts","../../../../libs/ui/layout/src/lib/stack/stack.ts","../../../../libs/ui/layout/src/lib/grid/grid.ts","../../../../libs/ui/layout/src/lib/surface/surface.ts","../../../../libs/ui/layout/src/skra-ui-layout.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type BoxPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type BoxDisplay = 'block' | 'inline-block' | 'flex';\n\n/**\n * SkraBox — semantically-neutral spacing/padding primitive (ADR 041).\n *\n * Component-on-native-host: layers onto a generic flow/sectioning container via\n * the bounded host allowlist below — NEVER a `<skra-box>` custom element\n * (ADR 012 §3.1 / ADR 041). Box does NOT arrange children, so list hosts\n * (`ul`/`ol`/`menu`) are intentionally excluded from its allowlist.\n *\n * Box is a pure spacing primitive: it MUST NOT establish a container-query\n * context (`container-type`/`container-name`) — that is an app-level concern\n * (ADR 016 §3.3, amended by ADR 041).\n */\n@Component({\n  selector:\n    'div[skraBox], section[skraBox], article[skraBox], main[skraBox], nav[skraBox], aside[skraBox], header[skraBox], footer[skraBox], form[skraBox], figure[skraBox]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './box.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles! The layout reset\n    // (margin/box-sizing) + figure UA-margin normalization live in box.scss\n    // `:host` (ADR 022 / ADR 041 Host Normalization Contract); host-metadata\n    // bare keys would render as junk attributes, not styles.\n    '[attr.data-skra-padding]': 'padding()',\n    '[attr.data-skra-display]': 'display()',\n  },\n})\nexport class SkraBox {\n  readonly padding = input<BoxPadding>('none');\n  readonly display = input<BoxDisplay>('block');\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  booleanAttribute,\n  input,\n} from '@angular/core';\n\nexport type StackDirection = 'row' | 'column';\nexport type StackGap = 'none' | 'sm' | 'md' | 'lg';\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch';\nexport type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';\n\n/**\n * SkraStack — flex layout primitive that arranges its children (ADR 041).\n *\n * Component-on-native-host via the bounded allowlist below. As a child-arranger\n * it additionally accepts list hosts (`ul`/`ol`/`menu`) — their UA list styling\n * is normalized in stack.scss per the Host Normalization Contract. List markers\n * are restorable without `!important` via a direct `li {}` rule (a direct\n * declaration beats the inherited `list-style: none`).\n *\n * Stack consumes `@container`; it MUST NOT establish a container-query context\n * (ADR 016 §3.3, amended by ADR 041).\n */\n@Component({\n  selector:\n    'div[skraStack], section[skraStack], article[skraStack], main[skraStack], nav[skraStack], aside[skraStack], header[skraStack], footer[skraStack], form[skraStack], figure[skraStack], ul[skraStack], ol[skraStack], menu[skraStack]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './stack.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection — only data-attributes, no [style.*]. The\n    // layout reset (margin/box-sizing) + list/UA normalization live in\n    // stack.scss `:host` (ADR 022 / ADR 041 Host Normalization Contract);\n    // host-metadata bare keys would render as junk attributes, not styles.\n    '[attr.data-skra-direction]': 'direction()',\n    '[attr.data-skra-gap]': 'gap()',\n    '[attr.data-skra-align]': 'align()',\n    '[attr.data-skra-justify]': 'justify()',\n    '[attr.data-skra-wrap]': 'wrap() ? \"\" : null',\n  },\n})\nexport class SkraStack {\n  readonly direction = input<StackDirection>('column');\n  readonly gap = input<StackGap>('md');\n  readonly align = input<StackAlign>('stretch');\n  readonly justify = input<StackJustify>('start');\n  readonly wrap = input(false, { transform: booleanAttribute });\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type GridColumns =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | 'auto-fit'\n  | 'auto-fill';\nexport type GridMin = 'sm' | 'md' | 'lg';\nexport type GridGap = 'none' | 'sm' | 'md' | 'lg';\nexport type GridFlow = 'row' | 'column' | 'dense';\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * SkraGrid — 2D layout primitive that arranges its children in a CSS Grid\n * (ADR 041, scope O-3). The bucket-only companion to Stack (1D) and Box (spacing).\n *\n * Component-on-native-host via the bounded allowlist below. As a child-arranger\n * it additionally accepts list hosts (`ul`/`ol`/`menu`) — their UA list styling\n * is normalized in grid.scss per the Host Normalization Contract.\n *\n * Bucket-only by design: every axis is an enumerated input reflected as a\n * `data-skra-*` attribute → token. Arbitrary track lists, `grid-template-areas`,\n * named lines and per-item placement are OUT of scope (bespoke = native CSS) —\n * exposing them would force an `[style.*]` host binding (ADR 021 violation).\n *\n * Responsiveness: `columns=\"auto-fit\"` (default) + `min` produce an intrinsically\n * responsive card grid via `repeat(auto-fit, minmax(var(--min), 1fr))` — column\n * count tracks available width with NO media/container queries. Grid consumes\n * `@container`; it MUST NOT establish a container-query context (ADR 041 §3.3).\n */\n@Component({\n  selector:\n    'div[skraGrid], section[skraGrid], article[skraGrid], main[skraGrid], nav[skraGrid], aside[skraGrid], header[skraGrid], footer[skraGrid], form[skraGrid], figure[skraGrid], ul[skraGrid], ol[skraGrid], menu[skraGrid]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './grid.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection — only data-attributes, no [style.*]. The layout\n    // reset (margin/box-sizing/display:grid) + list/UA normalization live in\n    // grid.scss `:host` (ADR 022 / ADR 041 Host Normalization Contract);\n    // host-metadata bare keys would render as junk attributes, not styles.\n    '[attr.data-skra-columns]': 'columns()',\n    '[attr.data-skra-min]': 'min()',\n    '[attr.data-skra-gap]': 'gap()',\n    '[attr.data-skra-flow]': 'flow()',\n    '[attr.data-skra-align]': 'align()',\n    '[attr.data-skra-justify-items]': 'justifyItems()',\n  },\n})\nexport class SkraGrid {\n  readonly columns = input<GridColumns>('auto-fit');\n  readonly min = input<GridMin>('md');\n  readonly gap = input<GridGap>('md');\n  readonly flow = input<GridFlow>('row');\n  readonly align = input<GridAlign>('stretch');\n  readonly justifyItems = input<GridAlign>('stretch');\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';\n\n/**\n * SkraSurface — the painted container primitive (ADR 0053), Box's painting sibling.\n *\n * Component-on-native-host: layers onto a generic flow/sectioning container via the\n * bounded host allowlist below — NEVER a `<skra-surface>` custom element, and never\n * an interactive host (ADR 0055 R3.1: `a[skraSurface]` / `button[skraSurface]` are\n * unsupported). \"Card\", \"Panel\" and \"Tile\" are consumer compositions of Surface +\n * `[skraStack]`/`[skraBox]` + a heading — not Skra components (ADR 0053 rule 1).\n *\n * **State-reading doctrine (ADR 0055).** Surface is a READER of state, never an\n * OWNER of state. It exposes no `interactive`/`hoverable`/`selected`/`elevation`\n * input and emits no `role`/`tabindex`/`aria-*`. Focus and selection are READ from\n * the markup the consumer authored (see surface.scss) — which is why an\n * informational card gets no interactive paint with zero API, and why a selected\n * card can never disagree with what assistive technology announces.\n *\n * Zero baked semantics: sectioning role and accessible name are 100% consumer-owned\n * (ADR 0053 rule 6). No `container-type` in v1 (ADR 0055 R7.1).\n */\n@Component({\n  selector:\n    'div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './surface.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles. This is the ONLY\n    // host attribute Surface emits (ADR 0055 R2): no role, no tabindex, no aria-*.\n    '[attr.data-skra-padding]': 'padding()',\n  },\n})\nexport class SkraSurface {\n  /**\n   * Semantic padding preset, reusing Box's enum for cross-atom consistency\n   * (ADR 0053 rule 4). Defaults to `md` rather than Box's `none` — Box is\n   * spacing-neutral by construction, a painted container is not (ADR 0055 R1).\n   */\n  readonly padding = input<SurfacePadding>('md');\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"skra-ui-layout.mjs","sources":["../../../../libs/ui/layout/src/lib/box/box.ts","../../../../libs/ui/layout/src/lib/stack/stack.ts","../../../../libs/ui/layout/src/lib/grid/grid.ts","../../../../libs/ui/layout/src/lib/surface/surface.ts","../../../../libs/ui/layout/src/lib/surface/surface-link.ts","../../../../libs/ui/layout/src/skra-ui-layout.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type BoxPadding = 'none' | 'sm' | 'md' | 'lg';\nexport type BoxDisplay = 'block' | 'inline-block' | 'flex';\n\n/**\n * SkraBox — semantically-neutral spacing/padding primitive (ADR 041).\n *\n * Component-on-native-host: layers onto a generic flow/sectioning container via\n * the bounded host allowlist below — NEVER a `<skra-box>` custom element\n * (ADR 012 §3.1 / ADR 041). Box does NOT arrange children, so list hosts\n * (`ul`/`ol`/`menu`) are intentionally excluded from its allowlist.\n *\n * Box is a pure spacing primitive: it MUST NOT establish a container-query\n * context (`container-type`/`container-name`) — that is an app-level concern\n * (ADR 016 §3.3, amended by ADR 041).\n */\n@Component({\n  selector:\n    'div[skraBox], section[skraBox], article[skraBox], main[skraBox], nav[skraBox], aside[skraBox], header[skraBox], footer[skraBox], form[skraBox], figure[skraBox]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './box.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles! The layout reset\n    // (margin/box-sizing) + figure UA-margin normalization live in box.scss\n    // `:host` (ADR 022 / ADR 041 Host Normalization Contract); host-metadata\n    // bare keys would render as junk attributes, not styles.\n    '[attr.data-skra-padding]': 'padding()',\n    '[attr.data-skra-display]': 'display()',\n  },\n})\nexport class SkraBox {\n  readonly padding = input<BoxPadding>('none');\n  readonly display = input<BoxDisplay>('block');\n}\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  booleanAttribute,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type StackDirection = 'row' | 'column';\r\nexport type StackGap = 'none' | 'sm' | 'md' | 'lg';\r\nexport type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\r\nexport type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';\r\n\r\n/**\r\n * SkraStack — flex layout primitive that arranges its children (ADR 041).\r\n *\r\n * Component-on-native-host via the bounded allowlist below. As a child-arranger\r\n * it additionally accepts list hosts (`ul`/`ol`/`menu`) — their UA list styling\r\n * is normalized in stack.scss per the Host Normalization Contract. List markers\r\n * are restorable without `!important` via a direct `li {}` rule (a direct\r\n * declaration beats the inherited `list-style: none`).\r\n *\r\n * Stack consumes `@container`; it MUST NOT establish a container-query context\r\n * (ADR 016 §3.3, amended by ADR 041).\r\n */\r\n@Component({\r\n  selector:\r\n    'div[skraStack], section[skraStack], article[skraStack], main[skraStack], nav[skraStack], aside[skraStack], header[skraStack], footer[skraStack], form[skraStack], figure[skraStack], ul[skraStack], ol[skraStack], menu[skraStack]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './stack.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // CSP-Safe State Reflection — only data-attributes, no [style.*]. The\r\n    // layout reset (margin/box-sizing) + list/UA normalization live in\r\n    // stack.scss `:host` (ADR 022 / ADR 041 Host Normalization Contract);\r\n    // host-metadata bare keys would render as junk attributes, not styles.\r\n    '[attr.data-skra-direction]': 'direction()',\r\n    '[attr.data-skra-gap]': 'gap()',\r\n    '[attr.data-skra-align]': 'align()',\r\n    '[attr.data-skra-justify]': 'justify()',\r\n    '[attr.data-skra-wrap]': 'wrap() ? \"\" : null',\r\n  },\r\n})\r\nexport class SkraStack {\r\n  readonly direction = input<StackDirection>('column');\r\n  readonly gap = input<StackGap>('md');\r\n  readonly align = input<StackAlign>('stretch');\r\n  readonly justify = input<StackJustify>('start');\r\n  readonly wrap = input(false, { transform: booleanAttribute });\r\n}\r\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type GridColumns =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | 'auto-fit'\n  | 'auto-fill';\nexport type GridMin = 'sm' | 'md' | 'lg';\nexport type GridGap = 'none' | 'sm' | 'md' | 'lg';\nexport type GridFlow = 'row' | 'column' | 'dense';\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch';\n\n/**\n * SkraGrid — 2D layout primitive that arranges its children in a CSS Grid\n * (ADR 041, scope O-3). The bucket-only companion to Stack (1D) and Box (spacing).\n *\n * Component-on-native-host via the bounded allowlist below. As a child-arranger\n * it additionally accepts list hosts (`ul`/`ol`/`menu`) — their UA list styling\n * is normalized in grid.scss per the Host Normalization Contract.\n *\n * Bucket-only by design: every axis is an enumerated input reflected as a\n * `data-skra-*` attribute → token. Arbitrary track lists, `grid-template-areas`,\n * named lines and per-item placement are OUT of scope (bespoke = native CSS) —\n * exposing them would force an `[style.*]` host binding (ADR 021 violation).\n *\n * Responsiveness: `columns=\"auto-fit\"` (default) + `min` produce an intrinsically\n * responsive card grid via `repeat(auto-fit, minmax(var(--min), 1fr))` — column\n * count tracks available width with NO media/container queries. Grid consumes\n * `@container`; it MUST NOT establish a container-query context (ADR 041 §3.3).\n */\n@Component({\n  selector:\n    'div[skraGrid], section[skraGrid], article[skraGrid], main[skraGrid], nav[skraGrid], aside[skraGrid], header[skraGrid], footer[skraGrid], form[skraGrid], figure[skraGrid], ul[skraGrid], ol[skraGrid], menu[skraGrid]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './grid.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection — only data-attributes, no [style.*]. The layout\n    // reset (margin/box-sizing/display:grid) + list/UA normalization live in\n    // grid.scss `:host` (ADR 022 / ADR 041 Host Normalization Contract);\n    // host-metadata bare keys would render as junk attributes, not styles.\n    '[attr.data-skra-columns]': 'columns()',\n    '[attr.data-skra-min]': 'min()',\n    '[attr.data-skra-gap]': 'gap()',\n    '[attr.data-skra-flow]': 'flow()',\n    '[attr.data-skra-align]': 'align()',\n    '[attr.data-skra-justify-items]': 'justifyItems()',\n  },\n})\nexport class SkraGrid {\n  readonly columns = input<GridColumns>('auto-fit');\n  readonly min = input<GridMin>('md');\n  readonly gap = input<GridGap>('md');\n  readonly flow = input<GridFlow>('row');\n  readonly align = input<GridAlign>('stretch');\n  readonly justifyItems = input<GridAlign>('stretch');\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  input,\n} from '@angular/core';\n\nexport type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';\n\n/**\n * SkraSurface — the painted container primitive (ADR 0053), Box's painting sibling.\n *\n * Component-on-native-host: layers onto a generic flow/sectioning container via the\n * bounded host allowlist below — NEVER a `<skra-surface>` custom element, and never\n * an interactive host (ADR 0055 R3.1: `a[skraSurface]` / `button[skraSurface]` are\n * unsupported). \"Card\", \"Panel\" and \"Tile\" are consumer compositions of Surface +\n * `[skraStack]`/`[skraBox]` + a heading — not Skra components (ADR 0053 rule 1).\n *\n * **State-reading doctrine (ADR 0055).** Surface is a READER of state, never an\n * OWNER of state. It exposes no `interactive`/`hoverable`/`selected`/`elevation`\n * input and emits no `role`/`tabindex`/`aria-*`. Focus and selection are READ from\n * the markup the consumer authored (see surface.scss) — which is why an\n * informational card gets no interactive paint with zero API, and why a selected\n * card can never disagree with what assistive technology announces.\n *\n * Zero baked semantics: sectioning role and accessible name are 100% consumer-owned\n * (ADR 0053 rule 6). No `container-type` in v1 (ADR 0055 R7.1).\n */\n@Component({\n  selector:\n    'div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]',\n  standalone: true,\n  template: '<ng-content></ng-content>',\n  styleUrl: './surface.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n  host: {\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles. This is the ONLY\n    // host attribute Surface emits (ADR 0055 R2): no role, no tabindex, no aria-*.\n    '[attr.data-skra-padding]': 'padding()',\n  },\n})\nexport class SkraSurface {\n  /**\n   * Semantic padding preset, reusing Box's enum for cross-atom consistency\n   * (ADR 0053 rule 4). Defaults to `md` rather than Box's `none` — Box is\n   * spacing-neutral by construction, a painted container is not (ADR 0055 R1).\n   */\n  readonly padding = input<SurfacePadding>('md');\n}\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  ViewEncapsulation,\r\n  afterNextRender,\r\n  inject,\r\n} from '@angular/core';\r\n\r\ndeclare const ngDevMode: boolean | undefined;\r\n\r\n/**\r\n * SkraSurfaceLink — the stretched-link marker that makes a whole `SkraSurface`\r\n * one activation target (ADR 0055 R3/R4).\r\n *\r\n * Placed on the consumer's OWN primary control — `<a>` for navigation, `<button>`\r\n * where the destination is an action — never on the Surface host (R3.1:\r\n * `a[skraSurface]` / `button[skraSurface]` stay unsupported). Its own host\r\n * stylesheet stretches the control's hit area over the nearest Surface with a\r\n * `::after` overlay; the Surface reads `:has([skraSurfaceLink]…)` and paints hover\r\n * and the focus ring on itself, because the surface is the target (R4.2).\r\n *\r\n * Accessible name: the control's own visible text (ADR 033 Path 1) — normally the\r\n * card's heading. No inputs, no `aria-*`, no `role`, no `tabindex`: the native\r\n * host already is the one tab stop.\r\n *\r\n * Dev-mode console errors (R3.3): no `[skraSurface]` ancestor (the overlay would\r\n * stretch over whatever positioned ancestor happens to exist — possibly the whole\r\n * page), and more than one marker whose NEAREST Surface is the same (two overlays\r\n * = an invisible hit-area conflict). Checked on the rendered DOM, not through DI:\r\n * a consumer's own card component projecting content into `<article skraSurface>`\r\n * puts the marker inside the Surface in the DOM while its injector chain follows\r\n * the declaring template and never meets the Surface.\r\n */\r\n@Component({\r\n  selector: 'a[skraSurfaceLink], button[skraSurfaceLink]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './surface-link.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n})\r\nexport class SkraSurfaceLink {\r\n  constructor() {\r\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\r\n      const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n      // Browser-only (afterNextRender never runs on the server) and read-only: the\r\n      // DOM is inspected, never mutated.\r\n      afterNextRender(() => checkPlacement(host));\r\n    }\r\n  }\r\n}\r\n\r\n/** Markers already reported as duplicates, per Surface — so one conflict logs once. */\r\nconst reportedMarkers = new WeakMap<Element, WeakSet<Element>>();\r\n\r\n/** Dev-mode placement check (ADR 0055 R3 / R3.3). */\r\nfunction checkPlacement(host: HTMLElement): void {\r\n  const surface = host.parentElement?.closest('[skraSurface]');\r\n  if (!surface) {\r\n    console.error(\r\n      '[skraSurfaceLink] must sit inside a [skraSurface] host — its overlay stretches ' +\r\n        'over the nearest Surface, and without one it would cover whatever positioned ' +\r\n        'ancestor exists (ADR 0055 R3).',\r\n      host,\r\n    );\r\n    return;\r\n  }\r\n  const own = Array.from(surface.querySelectorAll('[skraSurfaceLink]')).filter(\r\n    (link) => link.parentElement?.closest('[skraSurface]') === surface,\r\n  );\r\n  // Reported once per conflict, by whichever marker renders into it — including one\r\n  // inserted BEFORE an existing marker, which a \"not the first in DOM order\" rule\r\n  // missed (PR #9 review, S2). A marker that has already been reported stays quiet.\r\n  if (own.length > 1) {\r\n    const seen = reportedMarkers.get(surface) ?? new WeakSet<Element>();\r\n    reportedMarkers.set(surface, seen);\r\n    if (own.every((link) => seen.has(link))) return;\r\n    own.forEach((link) => seen.add(link));\r\n    console.error(\r\n      '[skraSurfaceLink] appears more than once in the same [skraSurface] — at most one ' +\r\n        'stretched link per surface (ADR 0055 R3.3). Make each target its own Surface, ' +\r\n        'or keep the secondary control a plain link/button raised above the overlay.',\r\n      host,\r\n    );\r\n  }\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/skra-ui-link.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ViewEncapsulation, ChangeDetectionStrategy, Component, inject, ElementRef, afterNextRender } from '@angular/core';
 
 /**
  * SkraLink — text-style anchor primitive (ADR 032 §3.6).
@@ -21,9 +21,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
             args: [{ selector: 'a[skraLink]', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, template: "<ng-content></ng-content>\n", styles: [":host{margin:0;color:var(--skra-comp-link-foreground);text-decoration-line:var(--skra-comp-link-text-decoration-line);text-decoration-thickness:var(--skra-comp-link-text-decoration-thickness);text-underline-offset:var(--skra-comp-link-text-underline-offset);transition:color var(--skra-comp-link-motion-duration) var(--skra-comp-link-motion-easing)}:host:visited{color:var(--skra-comp-link-foreground-visited)}@media(hover:hover)and (pointer:fine){:host:hover{color:var(--skra-comp-link-foreground-hover)}}:host:active{color:var(--skra-comp-link-foreground-active)}:host:focus-visible{outline-style:solid;outline-color:var(--skra-comp-link-focus-ring-color);outline-width:var(--skra-comp-link-focus-ring-width);outline-offset:2px}\n"] }]
         }] });
 
+/**
+ * SkraNavLink — a navigation destination with a visible current state (ADR 0060).
+ *
+ * Selector: `a[skraNavLink]` — `<a>` is the sole host (R1: a nav item that does not
+ * navigate is not a nav item). A separate atom from `skraLink`: the surface shape and
+ * the current state belong to navigation chrome, `:visited` and the underline to prose.
+ *
+ * **A navigation link is a link.** It keeps every native `<a>` behaviour and owns no
+ * state: zero inputs, zero outputs, no host attributes. The current state is READ from
+ * the native `aria-current` the consumer or the router already sets
+ * (`routerLinkActive` + `ariaCurrentWhenActive="page"`) — the component never writes it,
+ * so the paint and what assistive technology announces cannot disagree (R3).
+ *
+ * No `intent`/`emphasis`/`size` (R2 — the guardrail that keeps the marketing CTA out,
+ * ADR 032 §3.5), no `disabled` (ADR 032 §3.6.3), no `ariaLabel` (ADR 033 Path 1: the
+ * visible text is the name).
+ *
+ * Dev-mode console error (R5.1): a nav link outside a navigation landmark (`<nav>` or
+ * `role="navigation"`). Checked on the rendered DOM, not through DI — a consumer
+ * component that projects the link into its own `<nav>` must not trip it.
+ */
+class SkraNavLink {
+    constructor() {
+        if (typeof ngDevMode === 'undefined' || ngDevMode) {
+            const host = inject(ElementRef).nativeElement;
+            // Browser-only (afterNextRender never runs on the server) and read-only.
+            afterNextRender(() => {
+                if (!inNavigation(host)) {
+                    console.error('[skraNavLink] must sit inside a navigation landmark (<nav> or ' +
+                        'role="navigation") — outside one, a pill-shaped link is the marketing CTA ' +
+                        'that ADR 032 §3.5 keeps unsupported (ADR 0060 R5.1).', host);
+                }
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: SkraNavLink, isStandalone: true, selector: "a[skraNavLink]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{display:inline-flex;align-items:center;margin:0;box-sizing:border-box;background:var(--skra-comp-nav-link-background);color:var(--skra-comp-nav-link-foreground);border-color:var(--skra-comp-nav-link-border-color);border-width:var(--skra-comp-nav-link-border-width);border-style:var(--skra-comp-nav-link-border-style);border-radius:var(--skra-comp-nav-link-radius);box-shadow:var(--skra-comp-nav-link-shadow);padding-block:var(--skra-comp-nav-link-padding-block);padding-inline:var(--skra-comp-nav-link-padding-inline);font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing);text-decoration:none;transition:background-color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing),color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing),border-color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing)}:host([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined])){background:var(--skra-comp-nav-link-background-current);color:var(--skra-comp-nav-link-foreground-current);border-color:var(--skra-comp-nav-link-border-color-current);border-width:var(--skra-comp-nav-link-border-width-current);padding-block:calc(var(--skra-comp-nav-link-padding-block) - (var(--skra-comp-nav-link-border-width-current) - var(--skra-comp-nav-link-border-width)));padding-inline:calc(var(--skra-comp-nav-link-padding-inline) - (var(--skra-comp-nav-link-border-width-current) - var(--skra-comp-nav-link-border-width)))}@media(hover:hover)and (pointer:fine){:host(:hover:not([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined]))){background:var(--skra-comp-nav-link-background-hover);color:var(--skra-comp-nav-link-foreground-hover)}}:host(:focus-visible){outline:var(--skra-comp-nav-link-focus-ring-width) solid var(--skra-comp-nav-link-focus-ring-color);outline-offset:var(--skra-comp-nav-link-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraNavLink, decorators: [{
+            type: Component,
+            args: [{ selector: 'a[skraNavLink]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:inline-flex;align-items:center;margin:0;box-sizing:border-box;background:var(--skra-comp-nav-link-background);color:var(--skra-comp-nav-link-foreground);border-color:var(--skra-comp-nav-link-border-color);border-width:var(--skra-comp-nav-link-border-width);border-style:var(--skra-comp-nav-link-border-style);border-radius:var(--skra-comp-nav-link-radius);box-shadow:var(--skra-comp-nav-link-shadow);padding-block:var(--skra-comp-nav-link-padding-block);padding-inline:var(--skra-comp-nav-link-padding-inline);font-family:var(--skra-sys-typography-role-label-large-font-family);font-size:var(--skra-sys-typography-role-label-large-font-size);font-weight:var(--skra-sys-typography-role-label-large-font-weight);line-height:var(--skra-sys-typography-role-label-large-line-height);letter-spacing:var(--skra-sys-typography-role-label-large-letter-spacing);text-decoration:none;transition:background-color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing),color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing),border-color var(--skra-comp-nav-link-motion-duration) var(--skra-comp-nav-link-motion-easing)}:host([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined])){background:var(--skra-comp-nav-link-background-current);color:var(--skra-comp-nav-link-foreground-current);border-color:var(--skra-comp-nav-link-border-color-current);border-width:var(--skra-comp-nav-link-border-width-current);padding-block:calc(var(--skra-comp-nav-link-padding-block) - (var(--skra-comp-nav-link-border-width-current) - var(--skra-comp-nav-link-border-width)));padding-inline:calc(var(--skra-comp-nav-link-padding-inline) - (var(--skra-comp-nav-link-border-width-current) - var(--skra-comp-nav-link-border-width)))}@media(hover:hover)and (pointer:fine){:host(:hover:not([aria-current]:not([aria-current=false]):not([aria-current=\"\"]):not([aria-current=undefined]))){background:var(--skra-comp-nav-link-background-hover);color:var(--skra-comp-nav-link-foreground-hover)}}:host(:focus-visible){outline:var(--skra-comp-nav-link-focus-ring-width) solid var(--skra-comp-nav-link-focus-ring-color);outline-offset:var(--skra-comp-nav-link-focus-ring-width)}@media(prefers-reduced-motion:reduce){:host{transition:none}}\n"] }]
+        }], ctorParameters: () => [] });
+/**
+ * True when `el` sits inside a navigation landmark in the FLAT tree. `closest()` stops at a
+ * shadow root, but assistive technology does not: a link rendered in the shadow root of a
+ * consumer component that itself sits inside `<nav>` IS navigation. So the walk hops from
+ * a shadow root to its host and continues.
+ */
+function inNavigation(el) {
+    let node = el;
+    while (node) {
+        const hit = node.closest('nav, [role="navigation"]');
+        if (hit)
+            return true;
+        const root = node.getRootNode();
+        node = root instanceof ShadowRoot ? root.host : null;
+    }
+    return false;
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkraLink };
+export { SkraLink, SkraNavLink };
 //# sourceMappingURL=skra-ui-link.mjs.map

package/fesm2022/skra-ui-link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-link.mjs","sources":["../../../../libs/ui/link/src/lib/link/link.ts","../../../../libs/ui/link/src/lib/link/link.html","../../../../libs/ui/link/src/skra-ui-link.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * SkraLink — text-style anchor primitive (ADR 032 §3.6).\n *\n * Selector: `a[skraLink]` — `<a>` is the sole host.\n *\n * Per ADR 032 §3.6.3 there is no `disabled` input and no `data-skra-*`\n * Availability reflection: a link the user cannot or should not follow should\n * not be a link in the first place. Severity is deferred beyond MVP (§3.6.4).\n * Accessible Name follows ADR 033 Path 1 — visible text is the accessible name;\n * the component exposes no `ariaLabel` input.\n */\n@Component({\n  selector: 'a[skraLink]',\n  standalone: true,\n  templateUrl: './link.html',\n  styleUrl: './link.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n})\nexport class SkraLink {}\n","<ng-content></ng-content>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;AAUG;MASU,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,uECzBrB,6BACA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDwBa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA;;;AEvB3C;;AAEG;;;;"}
+{"version":3,"file":"skra-ui-link.mjs","sources":["../../../../libs/ui/link/src/lib/link/link.ts","../../../../libs/ui/link/src/lib/link/link.html","../../../../libs/ui/link/src/lib/nav-link/nav-link.ts","../../../../libs/ui/link/src/skra-ui-link.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n} from '@angular/core';\n\n/**\n * SkraLink — text-style anchor primitive (ADR 032 §3.6).\n *\n * Selector: `a[skraLink]` — `<a>` is the sole host.\n *\n * Per ADR 032 §3.6.3 there is no `disabled` input and no `data-skra-*`\n * Availability reflection: a link the user cannot or should not follow should\n * not be a link in the first place. Severity is deferred beyond MVP (§3.6.4).\n * Accessible Name follows ADR 033 Path 1 — visible text is the accessible name;\n * the component exposes no `ariaLabel` input.\n */\n@Component({\n  selector: 'a[skraLink]',\n  standalone: true,\n  templateUrl: './link.html',\n  styleUrl: './link.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.Emulated,\n})\nexport class SkraLink {}\n","<ng-content></ng-content>\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  ViewEncapsulation,\r\n  afterNextRender,\r\n  inject,\r\n} from '@angular/core';\r\n\r\ndeclare const ngDevMode: boolean | undefined;\r\n\r\n/**\r\n * SkraNavLink — a navigation destination with a visible current state (ADR 0060).\r\n *\r\n * Selector: `a[skraNavLink]` — `<a>` is the sole host (R1: a nav item that does not\r\n * navigate is not a nav item). A separate atom from `skraLink`: the surface shape and\r\n * the current state belong to navigation chrome, `:visited` and the underline to prose.\r\n *\r\n * **A navigation link is a link.** It keeps every native `<a>` behaviour and owns no\r\n * state: zero inputs, zero outputs, no host attributes. The current state is READ from\r\n * the native `aria-current` the consumer or the router already sets\r\n * (`routerLinkActive` + `ariaCurrentWhenActive=\"page\"`) — the component never writes it,\r\n * so the paint and what assistive technology announces cannot disagree (R3).\r\n *\r\n * No `intent`/`emphasis`/`size` (R2 — the guardrail that keeps the marketing CTA out,\r\n * ADR 032 §3.5), no `disabled` (ADR 032 §3.6.3), no `ariaLabel` (ADR 033 Path 1: the\r\n * visible text is the name).\r\n *\r\n * Dev-mode console error (R5.1): a nav link outside a navigation landmark (`<nav>` or\r\n * `role=\"navigation\"`). Checked on the rendered DOM, not through DI — a consumer\r\n * component that projects the link into its own `<nav>` must not trip it.\r\n */\r\n@Component({\r\n  selector: 'a[skraNavLink]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './nav-link.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n})\r\nexport class SkraNavLink {\r\n  constructor() {\r\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\r\n      const host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n      // Browser-only (afterNextRender never runs on the server) and read-only.\r\n      afterNextRender(() => {\r\n        if (!inNavigation(host)) {\r\n          console.error(\r\n            '[skraNavLink] must sit inside a navigation landmark (<nav> or ' +\r\n              'role=\"navigation\") — outside one, a pill-shaped link is the marketing CTA ' +\r\n              'that ADR 032 §3.5 keeps unsupported (ADR 0060 R5.1).',\r\n            host,\r\n          );\r\n        }\r\n      });\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * True when `el` sits inside a navigation landmark in the FLAT tree. `closest()` stops at a\r\n * shadow root, but assistive technology does not: a link rendered in the shadow root of a\r\n * consumer component that itself sits inside `<nav>` IS navigation. So the walk hops from\r\n * a shadow root to its host and continues.\r\n */\r\nfunction inNavigation(el: Element): boolean {\r\n  let node: Element | null = el;\r\n  while (node) {\r\n    const hit = node.closest('nav, [role=\"navigation\"]');\r\n    if (hit) return true;\r\n    const root = node.getRootNode();\r\n    node = root instanceof ShadowRoot ? root.host : null;\r\n  }\r\n  return false;\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAMA;;;;;;;;;;AAUG;MASU,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,uECzBrB,6BACA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FDwBa,QAAQ,EAAA,UAAA,EAAA,CAAA;kBARpB,SAAS;+BACE,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,eAAA,EAGC,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,QAAA,EAAA,6BAAA,EAAA,MAAA,EAAA,CAAA,8tBAAA,CAAA,EAAA;;;AEZ3C;;;;;;;;;;;;;;;;;;;;AAoBG;MASU,WAAW,CAAA;AACtB,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,EAAE;YACjD,MAAM,IAAI,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC,aAAa;;YAEtE,eAAe,CAAC,MAAK;AACnB,gBAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;oBACvB,OAAO,CAAC,KAAK,CACX,gEAAgE;wBAC9D,4EAA4E;wBAC5E,sDAAsD,EACxD,IAAI,CACL;gBACH;AACF,YAAA,CAAC,CAAC;QACJ;IACF;uGAhBW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAX,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,WAAW,0EALZ,2BAA2B,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,8wEAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAK1B,WAAW,EAAA,UAAA,EAAA,CAAA;kBARvB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,QAAA,EACN,2BAA2B,EAAA,eAAA,EAEpB,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,QAAQ,EAAA,MAAA,EAAA,CAAA,8wEAAA,CAAA,EAAA;;AAqB3C;;;;;AAKG;AACH,SAAS,YAAY,CAAC,EAAW,EAAA;IAC/B,IAAI,IAAI,GAAmB,EAAE;IAC7B,OAAO,IAAI,EAAE;QACX,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,CAAC,0BAA0B,CAAC;AACpD,QAAA,IAAI,GAAG;AAAE,YAAA,OAAO,IAAI;AACpB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,EAAE;AAC/B,QAAA,IAAI,GAAG,IAAI,YAAY,UAAU,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI;IACtD;AACA,IAAA,OAAO,KAAK;AACd;;AC1EA;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skra/ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public"
@@ -10,7 +10,7 @@
     "@angular/core": ">=22.0.0 <23.0.0",
     "@angular/common": ">=22.0.0 <23.0.0",
     "@angular/cdk": ">=22.0.0 <23.0.0",
-    "@skra/tokens": "^0.8.0"
+    "@skra/tokens": "^0.9.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",

package/types/skra-ui-layout.d.ts

@@ -23,7 +23,7 @@ declare class SkraBox {
 
 type StackDirection = 'row' | 'column';
 type StackGap = 'none' | 'sm' | 'md' | 'lg';
-type StackAlign = 'start' | 'center' | 'end' | 'stretch';
+type StackAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 type StackJustify = 'start' | 'center' | 'end' | 'between' | 'around';
 /**
  * SkraStack — flex layout primitive that arranges its children (ADR 041).
@@ -112,6 +112,35 @@ declare class SkraSurface {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkraSurface, "div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]", never, { "padding": { "alias": "padding"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { SkraBox, SkraGrid, SkraStack, SkraSurface };
+/**
+ * SkraSurfaceLink — the stretched-link marker that makes a whole `SkraSurface`
+ * one activation target (ADR 0055 R3/R4).
+ *
+ * Placed on the consumer's OWN primary control — `<a>` for navigation, `<button>`
+ * where the destination is an action — never on the Surface host (R3.1:
+ * `a[skraSurface]` / `button[skraSurface]` stay unsupported). Its own host
+ * stylesheet stretches the control's hit area over the nearest Surface with a
+ * `::after` overlay; the Surface reads `:has([skraSurfaceLink]…)` and paints hover
+ * and the focus ring on itself, because the surface is the target (R4.2).
+ *
+ * Accessible name: the control's own visible text (ADR 033 Path 1) — normally the
+ * card's heading. No inputs, no `aria-*`, no `role`, no `tabindex`: the native
+ * host already is the one tab stop.
+ *
+ * Dev-mode console errors (R3.3): no `[skraSurface]` ancestor (the overlay would
+ * stretch over whatever positioned ancestor happens to exist — possibly the whole
+ * page), and more than one marker whose NEAREST Surface is the same (two overlays
+ * = an invisible hit-area conflict). Checked on the rendered DOM, not through DI:
+ * a consumer's own card component projecting content into `<article skraSurface>`
+ * puts the marker inside the Surface in the DOM while its injector chain follows
+ * the declaring template and never meets the Surface.
+ */
+declare class SkraSurfaceLink {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkraSurfaceLink, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkraSurfaceLink, "a[skraSurfaceLink], button[skraSurfaceLink]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { SkraBox, SkraGrid, SkraStack, SkraSurface, SkraSurfaceLink };
 export type { BoxDisplay, BoxPadding, GridAlign, GridColumns, GridFlow, GridGap, GridMin, StackAlign, StackDirection, StackGap, StackJustify, SurfacePadding };
 //# sourceMappingURL=skra-ui-layout.d.ts.map

package/types/skra-ui-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-layout.d.ts","sources":["../../../../libs/ui/layout/src/lib/box/box.ts","../../../../libs/ui/layout/src/lib/stack/stack.ts","../../../../libs/ui/layout/src/lib/grid/grid.ts","../../../../libs/ui/layout/src/lib/surface/surface.ts"],"mappings":";;AAOM,KAAM,UAAU;AAChB,KAAM,UAAU;AAEtB;;;;;;;;;;;AAWG;AACH,cAiBa,OAAO;sBACF,aAAA,CAAA,WAAA,CAAA,UAAA;sBACA,aAAA,CAAA,WAAA,CAAA,UAAA;oDAFL,OAAO;sDAAP,OAAO;AAGnB;;KClCW,cAAc;AACpB,KAAM,QAAQ;AACd,KAAM,UAAU;AAChB,KAAM,YAAY;AAExB;;;;;;;;;;;AAWG;AACH,cAoBa,SAAS;wBACF,aAAA,CAAA,WAAA,CAAA,cAAA;kBACN,aAAA,CAAA,WAAA,CAAA,QAAA;oBACE,aAAA,CAAA,WAAA,CAAA,UAAA;sBACE,aAAA,CAAA,WAAA,CAAA,YAAA;mBACH,aAAA,CAAA,wBAAA;oDALF,SAAS;sDAAT,SAAS;AAMrB;;KC5CW,WAAW;AASjB,KAAM,OAAO;AACb,KAAM,OAAO;AACb,KAAM,QAAQ;AACd,KAAM,SAAS;AAErB;;;;;;;;;;;;;;;;;AAiBG;AACH,cAqBa,QAAQ;sBACH,aAAA,CAAA,WAAA,CAAA,WAAA;kBACJ,aAAA,CAAA,WAAA,CAAA,OAAA;kBACA,aAAA,CAAA,WAAA,CAAA,OAAA;mBACC,aAAA,CAAA,WAAA,CAAA,QAAA;oBACC,aAAA,CAAA,WAAA,CAAA,SAAA;2BACO,aAAA,CAAA,WAAA,CAAA,SAAA;oDANV,QAAQ;sDAAR,QAAQ;AAOpB;;AC5DK,KAAM,cAAc;AAE1B;;;;;;;;;;;;;;;;;;AAkBG;AACH,cAca,WAAW;AACtB;;;;AAIG;sBACa,aAAA,CAAA,WAAA,CAAA,cAAA;oDANL,WAAW;sDAAX,WAAW;AAOvB;;;;","names":[]}
+{"version":3,"file":"skra-ui-layout.d.ts","sources":["../../../../libs/ui/layout/src/lib/box/box.ts","../../../../libs/ui/layout/src/lib/stack/stack.ts","../../../../libs/ui/layout/src/lib/grid/grid.ts","../../../../libs/ui/layout/src/lib/surface/surface.ts","../../../../libs/ui/layout/src/lib/surface/surface-link.ts"],"mappings":";;AAOM,KAAM,UAAU;AAChB,KAAM,UAAU;AAEtB;;;;;;;;;;;AAWG;AACH,cAiBa,OAAO;sBACF,aAAA,CAAA,WAAA,CAAA,UAAA;sBACA,aAAA,CAAA,WAAA,CAAA,UAAA;oDAFL,OAAO;sDAAP,OAAO;AAGnB;;KClCW,cAAc;AACpB,KAAM,QAAQ;AACd,KAAM,UAAU;AAChB,KAAM,YAAY;AAExB;;;;;;;;;;;AAWG;AACH,cAoBa,SAAS;wBACF,aAAA,CAAA,WAAA,CAAA,cAAA;kBACN,aAAA,CAAA,WAAA,CAAA,QAAA;oBACE,aAAA,CAAA,WAAA,CAAA,UAAA;sBACE,aAAA,CAAA,WAAA,CAAA,YAAA;mBACH,aAAA,CAAA,wBAAA;oDALF,SAAS;sDAAT,SAAS;AAMrB;;KC5CW,WAAW;AASjB,KAAM,OAAO;AACb,KAAM,OAAO;AACb,KAAM,QAAQ;AACd,KAAM,SAAS;AAErB;;;;;;;;;;;;;;;;;AAiBG;AACH,cAqBa,QAAQ;sBACH,aAAA,CAAA,WAAA,CAAA,WAAA;kBACJ,aAAA,CAAA,WAAA,CAAA,OAAA;kBACA,aAAA,CAAA,WAAA,CAAA,OAAA;mBACC,aAAA,CAAA,WAAA,CAAA,QAAA;oBACC,aAAA,CAAA,WAAA,CAAA,SAAA;2BACO,aAAA,CAAA,WAAA,CAAA,SAAA;oDANV,QAAQ;sDAAR,QAAQ;AAOpB;;AC5DK,KAAM,cAAc;AAE1B;;;;;;;;;;;;;;;;;;AAkBG;AACH,cAca,WAAW;AACtB;;;;AAIG;sBACa,aAAA,CAAA,WAAA,CAAA,cAAA;oDANL,WAAW;sDAAX,WAAW;AAOvB;;ACtCD;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACH,cAQa,eAAe;;oDAAf,eAAe;sDAAf,eAAe;AAS3B;;;;","names":[]}

package/types/skra-ui-link.d.ts

@@ -16,5 +16,32 @@ declare class SkraLink {
     static ɵcmp: i0.ɵɵComponentDeclaration<SkraLink, "a[skraLink]", never, {}, {}, never, ["*"], true, never>;
 }
 
-export { SkraLink };
+/**
+ * SkraNavLink — a navigation destination with a visible current state (ADR 0060).
+ *
+ * Selector: `a[skraNavLink]` — `<a>` is the sole host (R1: a nav item that does not
+ * navigate is not a nav item). A separate atom from `skraLink`: the surface shape and
+ * the current state belong to navigation chrome, `:visited` and the underline to prose.
+ *
+ * **A navigation link is a link.** It keeps every native `<a>` behaviour and owns no
+ * state: zero inputs, zero outputs, no host attributes. The current state is READ from
+ * the native `aria-current` the consumer or the router already sets
+ * (`routerLinkActive` + `ariaCurrentWhenActive="page"`) — the component never writes it,
+ * so the paint and what assistive technology announces cannot disagree (R3).
+ *
+ * No `intent`/`emphasis`/`size` (R2 — the guardrail that keeps the marketing CTA out,
+ * ADR 032 §3.5), no `disabled` (ADR 032 §3.6.3), no `ariaLabel` (ADR 033 Path 1: the
+ * visible text is the name).
+ *
+ * Dev-mode console error (R5.1): a nav link outside a navigation landmark (`<nav>` or
+ * `role="navigation"`). Checked on the rendered DOM, not through DI — a consumer
+ * component that projects the link into its own `<nav>` must not trip it.
+ */
+declare class SkraNavLink {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkraNavLink, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkraNavLink, "a[skraNavLink]", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { SkraLink, SkraNavLink };
 //# sourceMappingURL=skra-ui-link.d.ts.map

package/types/skra-ui-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skra-ui-link.d.ts","sources":["../../../../libs/ui/link/src/lib/link/link.ts"],"mappings":";;AAMA;;;;;;;;;;AAUG;AACH,cAQa,QAAQ;yCAAR,QAAQ;2CAAR,QAAQ;AAAG;;;;","names":[]}
+{"version":3,"file":"skra-ui-link.d.ts","sources":["../../../../libs/ui/link/src/lib/link/link.ts","../../../../libs/ui/link/src/lib/nav-link/nav-link.ts"],"mappings":";;AAMA;;;;;;;;;;AAUG;AACH,cAQa,QAAQ;yCAAR,QAAQ;2CAAR,QAAQ;AAAG;;ACdxB;;;;;;;;;;;;;;;;;;;;AAoBG;AACH,cAQa,WAAW;;yCAAX,WAAW;2CAAX,WAAW;AAiBvB;;;;","names":[]}