@skra/ui 0.3.1 → 0.4.0

package/consumer-guide/README.md

@@ -58,7 +58,7 @@ Violating these is a review blocker in a consumer repo just as inside Skra.
 | **Accessible names**        | `accessible-names.md`          | Naming buttons, icon-only controls, overlays; using `skra-sr-only`                                         | ✅ draft |
 | **Theming & encapsulation** | `theming-and-encapsulation.md` | Skins, dark mode, density; mounting under Shadow DOM / a microfrontend / an iframe                          | ✅ 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 / Grid; the gap scale                                                | ✅ draft |
+| **Layout**                  | `layout.md`                    | Spacing & composition with Stack / Box / Surface / Grid; building a card; the gap scale                                                | ✅ draft |
 | **Wrapping Skra**          | `wrapping-patterns.md`         | Building your own higher-level components over Skra atoms (simplified API)                                 | ✅ draft |
 
 ---
@@ -75,6 +75,7 @@ Violating these is a review blocker in a consumer repo just as inside Skra.
 | Mount Skra inside a Web Component / microfrontend                         | `theming-and-encapsulation.md`            |
 | Open a dialog or tooltip                                                   | `overlays.md`                             |
 | Space components apart                                                     | `layout.md`                               |
+| Build a card / panel / tile (there is no `skra-card`)                      | `layout.md` (Surface)                     |
 | Wrap a Skra atom in a project-specific component                          | `wrapping-patterns.md`                    |
 
 ---

package/consumer-guide/layout.md

@@ -69,6 +69,85 @@ A semantically-neutral padding primitive. Does **not** arrange children (no list
 <section skraBox padding="lg">…</section>
 ```
 
+## Surface — the painted container (`[skraSurface]`)
+
+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 |
+| --- | --- | --- |
+| `padding` | `none` \| `sm` \| `md` \| `lg` | **`md`** |
+
+That is the whole API. Note the default differs from Box's `none` — Box is spacing-neutral by
+construction, a painted container is not.
+
+**Pick Box _or_ Surface per host, never both.** Box = spacing only; Surface = spacing + paint.
+
+### There is no `<skra-card>`, and you do not need one
+
+"Card", "panel", "tile", "row" and "list item" are **compositions you write**, not Skra
+components (ADR 0053). Strip padding, inner arrangement and sectioning semantics from a card
+and what is left is a painted container — that is Surface, and that is all Skra ships:
+
+```html
+<article skraSurface padding="lg" aria-labelledby="run-title">
+  <div skraStack direction="column" gap="md">
+    <h3 id="run-title" skraTypography="title-small">Morning run</h3>
+    <p skraTypography="body-medium">5.2 km · 24:31</p>
+  </div>
+</article>
+```
+
+You own the sectioning element and the accessible name — Surface sets **no** `role`, no
+`tabindex` and no `aria-*`. Pair it with `[skraGrid]` above for a responsive card grid with no
+breakpoints.
+
+### Selection: Surface READS your markup, it never owns state
+
+There is no `selected` input, and there never will be one — `aria-selected` is only valid on
+`option`/`row`/`gridcell`/`tab` roles, so a component that bakes no role cannot emit it without
+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 |
+
+```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
+resting.
+
+**Gotcha — a checked control inside the card is NOT a signal.** A card wrapping a checked
+`<input type="checkbox">`/`radio` does **not** light up, deliberately: `[skraSwitch]` and
+`<skra-star-rating>` are themselves native checkbox/radio hosts, so inferring selection from a
+descendant would paint every settings card and every rating card as "selected" while nothing in
+the accessibility tree said so.
+
+So for a **radio-group card picker** today, the selected state is carried by the radio's own
+indicator and the card stays neutral. Do **not** reach for `aria-current` to force the paint
+there: the radio already announces "selected", and adding `aria-current` makes assistive
+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
+
+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).
+
+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.
+
+**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.
+
 ## Grid — 2D (`[skraGrid]`)
 
 Bucket-only CSS Grid. The default `columns="auto-fit"` + `min` gives an intrinsically

package/consumer-guide/setup-and-gotchas.md

@@ -16,7 +16,7 @@ entry exports nothing — always import from a `@skra/ui/<entry>` subpath.
 | `@skra/ui/link`              | `a[skraLink]`                                                                                                                        |
 | `@skra/ui/icon`              | icon container atom                                                                                                                   |
 | `@skra/ui/typography`        | `[skraTypography]`                                                                                                                   |
-| `@skra/ui/layout`            | `[skraStack]`, `[skraBox]`, `[skraGrid]`                                                                                           |
+| `@skra/ui/layout`            | `[skraStack]`, `[skraBox]`, `[skraGrid]`, `[skraSurface]`                                                                          |
 | `@skra/ui/kbd`               | `kbd[skraKbd]`                                                                                                                       |
 | `@skra/ui/field`             | `<skra-field>`, `[skraLabel]`, `[skraHint]`, `[skraError]`, `fieldset[skraFieldset]`, `legend[skraLegend]`, `SkraFieldContext` |
 | `@skra/ui/input`             | `input[skraInput]`                                                                                                                   |
@@ -95,7 +95,7 @@ on an ancestor**, never inline:
 ## Gotcha 3 — components carry `margin: 0` (ADR 022)
 
 Spacing between components is **never** a margin on the component. Use a layout atom
-(`[skraStack]`/`[skraBox]`/`[skraGrid]`) — see `layout.md`.
+(`[skraStack]`/`[skraBox]`/`[skraGrid]`) — see `layout.md`. A painted container (card / panel) is `[skraSurface]`, which owns its own padding.
 
 ## Gotcha 4 — `skraTypography` takes its role **on the selector**, not a `role` input
 

package/fesm2022/skra-ui-layout.mjs

@@ -123,9 +123,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                     }, 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"] }]
         }], 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 }] }] } });
 
+/**
+ * SkraSurface — the painted container primitive (ADR 0053), Box's painting sibling.
+ *
+ * Component-on-native-host: layers onto a generic flow/sectioning container via the
+ * bounded host allowlist below — NEVER a `<skra-surface>` custom element, and never
+ * an interactive host (ADR 0055 R3.1: `a[skraSurface]` / `button[skraSurface]` are
+ * unsupported). "Card", "Panel" and "Tile" are consumer compositions of Surface +
+ * `[skraStack]`/`[skraBox]` + a heading — not Skra components (ADR 0053 rule 1).
+ *
+ * **State-reading doctrine (ADR 0055).** Surface is a READER of state, never an
+ * OWNER of state. It exposes no `interactive`/`hoverable`/`selected`/`elevation`
+ * input and emits no `role`/`tabindex`/`aria-*`. Focus and selection are READ from
+ * the markup the consumer authored (see surface.scss) — which is why an
+ * informational card gets no interactive paint with zero API, and why a selected
+ * card can never disagree with what assistive technology announces.
+ *
+ * Zero baked semantics: sectioning role and accessible name are 100% consumer-owned
+ * (ADR 0053 rule 6). No `container-type` in v1 (ADR 0055 R7.1).
+ */
+class SkraSurface {
+    /**
+     * Semantic padding preset, reusing Box's enum for cross-atom consistency
+     * (ADR 0053 rule 4). Defaults to `md` rather than Box's `none` — Box is
+     * spacing-neutral by construction, a painted container is not (ADR 0055 R1).
+     */
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SkraSurface, decorators: [{
+            type: Component,
+            args: [{ selector: 'div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]', standalone: true, template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.Emulated, host: {
+                        // 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"] }]
+        }], propDecorators: { padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }] } });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { SkraBox, SkraGrid, SkraStack };
+export { SkraBox, SkraGrid, SkraStack, SkraSurface };
 //# 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/skra-ui-layout.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type BoxPadding = 'none' | 'sm' | 'md' | 'lg';\r\nexport type BoxDisplay = 'block' | 'inline-block' | 'flex';\r\n\r\n/**\r\n * SkraBox — semantically-neutral spacing/padding primitive (ADR 041).\r\n *\r\n * Component-on-native-host: layers onto a generic flow/sectioning container via\r\n * the bounded host allowlist below — NEVER a `<skra-box>` custom element\r\n * (ADR 012 §3.1 / ADR 041). Box does NOT arrange children, so list hosts\r\n * (`ul`/`ol`/`menu`) are intentionally excluded from its allowlist.\r\n *\r\n * Box is a pure spacing primitive: it MUST NOT establish a container-query\r\n * context (`container-type`/`container-name`) — that is an app-level concern\r\n * (ADR 016 §3.3, amended by ADR 041).\r\n */\r\n@Component({\r\n  selector:\r\n    'div[skraBox], section[skraBox], article[skraBox], main[skraBox], nav[skraBox], aside[skraBox], header[skraBox], footer[skraBox], form[skraBox], figure[skraBox]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './box.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles! The layout reset\r\n    // (margin/box-sizing) + figure UA-margin normalization live in box.scss\r\n    // `:host` (ADR 022 / ADR 041 Host Normalization Contract); host-metadata\r\n    // bare keys would render as junk attributes, not styles.\r\n    '[attr.data-skra-padding]': 'padding()',\r\n    '[attr.data-skra-display]': 'display()',\r\n  },\r\n})\r\nexport class SkraBox {\r\n  readonly padding = input<BoxPadding>('none');\r\n  readonly display = input<BoxDisplay>('block');\r\n}\r\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';\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 {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type GridColumns =\r\n  | '1'\r\n  | '2'\r\n  | '3'\r\n  | '4'\r\n  | '5'\r\n  | '6'\r\n  | 'auto-fit'\r\n  | 'auto-fill';\r\nexport type GridMin = 'sm' | 'md' | 'lg';\r\nexport type GridGap = 'none' | 'sm' | 'md' | 'lg';\r\nexport type GridFlow = 'row' | 'column' | 'dense';\r\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch';\r\n\r\n/**\r\n * SkraGrid — 2D layout primitive that arranges its children in a CSS Grid\r\n * (ADR 041, scope O-3). The bucket-only companion to Stack (1D) and Box (spacing).\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 grid.scss per the Host Normalization Contract.\r\n *\r\n * Bucket-only by design: every axis is an enumerated input reflected as a\r\n * `data-skra-*` attribute → token. Arbitrary track lists, `grid-template-areas`,\r\n * named lines and per-item placement are OUT of scope (bespoke = native CSS) —\r\n * exposing them would force an `[style.*]` host binding (ADR 021 violation).\r\n *\r\n * Responsiveness: `columns=\"auto-fit\"` (default) + `min` produce an intrinsically\r\n * responsive card grid via `repeat(auto-fit, minmax(var(--min), 1fr))` — column\r\n * count tracks available width with NO media/container queries. Grid consumes\r\n * `@container`; it MUST NOT establish a container-query context (ADR 041 §3.3).\r\n */\r\n@Component({\r\n  selector:\r\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]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './grid.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 layout\r\n    // reset (margin/box-sizing/display:grid) + list/UA normalization live in\r\n    // grid.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-columns]': 'columns()',\r\n    '[attr.data-skra-min]': 'min()',\r\n    '[attr.data-skra-gap]': 'gap()',\r\n    '[attr.data-skra-flow]': 'flow()',\r\n    '[attr.data-skra-align]': 'align()',\r\n    '[attr.data-skra-justify-items]': 'justifyItems()',\r\n  },\r\n})\r\nexport class SkraGrid {\r\n  readonly columns = input<GridColumns>('auto-fit');\r\n  readonly min = input<GridMin>('md');\r\n  readonly gap = input<GridGap>('md');\r\n  readonly flow = input<GridFlow>('row');\r\n  readonly align = input<GridAlign>('stretch');\r\n  readonly justifyItems = input<GridAlign>('stretch');\r\n}\r\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/skra-ui-layout.ts"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type BoxPadding = 'none' | 'sm' | 'md' | 'lg';\r\nexport type BoxDisplay = 'block' | 'inline-block' | 'flex';\r\n\r\n/**\r\n * SkraBox — semantically-neutral spacing/padding primitive (ADR 041).\r\n *\r\n * Component-on-native-host: layers onto a generic flow/sectioning container via\r\n * the bounded host allowlist below — NEVER a `<skra-box>` custom element\r\n * (ADR 012 §3.1 / ADR 041). Box does NOT arrange children, so list hosts\r\n * (`ul`/`ol`/`menu`) are intentionally excluded from its allowlist.\r\n *\r\n * Box is a pure spacing primitive: it MUST NOT establish a container-query\r\n * context (`container-type`/`container-name`) — that is an app-level concern\r\n * (ADR 016 §3.3, amended by ADR 041).\r\n */\r\n@Component({\r\n  selector:\r\n    'div[skraBox], section[skraBox], article[skraBox], main[skraBox], nav[skraBox], aside[skraBox], header[skraBox], footer[skraBox], form[skraBox], figure[skraBox]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './box.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles! The layout reset\r\n    // (margin/box-sizing) + figure UA-margin normalization live in box.scss\r\n    // `:host` (ADR 022 / ADR 041 Host Normalization Contract); host-metadata\r\n    // bare keys would render as junk attributes, not styles.\r\n    '[attr.data-skra-padding]': 'padding()',\r\n    '[attr.data-skra-display]': 'display()',\r\n  },\r\n})\r\nexport class SkraBox {\r\n  readonly padding = input<BoxPadding>('none');\r\n  readonly display = input<BoxDisplay>('block');\r\n}\r\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';\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 {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type GridColumns =\r\n  | '1'\r\n  | '2'\r\n  | '3'\r\n  | '4'\r\n  | '5'\r\n  | '6'\r\n  | 'auto-fit'\r\n  | 'auto-fill';\r\nexport type GridMin = 'sm' | 'md' | 'lg';\r\nexport type GridGap = 'none' | 'sm' | 'md' | 'lg';\r\nexport type GridFlow = 'row' | 'column' | 'dense';\r\nexport type GridAlign = 'start' | 'center' | 'end' | 'stretch';\r\n\r\n/**\r\n * SkraGrid — 2D layout primitive that arranges its children in a CSS Grid\r\n * (ADR 041, scope O-3). The bucket-only companion to Stack (1D) and Box (spacing).\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 grid.scss per the Host Normalization Contract.\r\n *\r\n * Bucket-only by design: every axis is an enumerated input reflected as a\r\n * `data-skra-*` attribute → token. Arbitrary track lists, `grid-template-areas`,\r\n * named lines and per-item placement are OUT of scope (bespoke = native CSS) —\r\n * exposing them would force an `[style.*]` host binding (ADR 021 violation).\r\n *\r\n * Responsiveness: `columns=\"auto-fit\"` (default) + `min` produce an intrinsically\r\n * responsive card grid via `repeat(auto-fit, minmax(var(--min), 1fr))` — column\r\n * count tracks available width with NO media/container queries. Grid consumes\r\n * `@container`; it MUST NOT establish a container-query context (ADR 041 §3.3).\r\n */\r\n@Component({\r\n  selector:\r\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]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './grid.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 layout\r\n    // reset (margin/box-sizing/display:grid) + list/UA normalization live in\r\n    // grid.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-columns]': 'columns()',\r\n    '[attr.data-skra-min]': 'min()',\r\n    '[attr.data-skra-gap]': 'gap()',\r\n    '[attr.data-skra-flow]': 'flow()',\r\n    '[attr.data-skra-align]': 'align()',\r\n    '[attr.data-skra-justify-items]': 'justifyItems()',\r\n  },\r\n})\r\nexport class SkraGrid {\r\n  readonly columns = input<GridColumns>('auto-fit');\r\n  readonly min = input<GridMin>('md');\r\n  readonly gap = input<GridGap>('md');\r\n  readonly flow = input<GridFlow>('row');\r\n  readonly align = input<GridAlign>('stretch');\r\n  readonly justifyItems = input<GridAlign>('stretch');\r\n}\r\n","import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ViewEncapsulation,\r\n  input,\r\n} from '@angular/core';\r\n\r\nexport type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';\r\n\r\n/**\r\n * SkraSurface — the painted container primitive (ADR 0053), Box's painting sibling.\r\n *\r\n * Component-on-native-host: layers onto a generic flow/sectioning container via the\r\n * bounded host allowlist below — NEVER a `<skra-surface>` custom element, and never\r\n * an interactive host (ADR 0055 R3.1: `a[skraSurface]` / `button[skraSurface]` are\r\n * unsupported). \"Card\", \"Panel\" and \"Tile\" are consumer compositions of Surface +\r\n * `[skraStack]`/`[skraBox]` + a heading — not Skra components (ADR 0053 rule 1).\r\n *\r\n * **State-reading doctrine (ADR 0055).** Surface is a READER of state, never an\r\n * OWNER of state. It exposes no `interactive`/`hoverable`/`selected`/`elevation`\r\n * input and emits no `role`/`tabindex`/`aria-*`. Focus and selection are READ from\r\n * the markup the consumer authored (see surface.scss) — which is why an\r\n * informational card gets no interactive paint with zero API, and why a selected\r\n * card can never disagree with what assistive technology announces.\r\n *\r\n * Zero baked semantics: sectioning role and accessible name are 100% consumer-owned\r\n * (ADR 0053 rule 6). No `container-type` in v1 (ADR 0055 R7.1).\r\n */\r\n@Component({\r\n  selector:\r\n    'div[skraSurface], section[skraSurface], article[skraSurface], main[skraSurface], nav[skraSurface], aside[skraSurface], header[skraSurface], footer[skraSurface], figure[skraSurface]',\r\n  standalone: true,\r\n  template: '<ng-content></ng-content>',\r\n  styleUrl: './surface.scss',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  encapsulation: ViewEncapsulation.Emulated,\r\n  host: {\r\n    // CSP-Safe State Reflection (ADR 021) — NO inline styles. This is the ONLY\r\n    // host attribute Surface emits (ADR 0055 R2): no role, no tabindex, no aria-*.\r\n    '[attr.data-skra-padding]': 'padding()',\r\n  },\r\n})\r\nexport class SkraSurface {\r\n  /**\r\n   * Semantic padding preset, reusing Box's enum for cross-atom consistency\r\n   * (ADR 0053 rule 4). Defaults to `md` rather than Box's `none` — Box is\r\n   * spacing-neutral by construction, a painted container is not (ADR 0055 R1).\r\n   */\r\n  readonly padding = input<SurfacePadding>('md');\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skra/ui",
-  "version": "0.3.1",
+  "version": "0.4.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.3.1"
+    "@skra/tokens": "^0.4.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
@@ -172,4 +172,4 @@
     }
   },
   "type": "module"
-}
+}

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

@@ -81,6 +81,37 @@ declare class SkraGrid {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkraGrid, "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]", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "flow": { "alias": "flow"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justifyItems": { "alias": "justifyItems"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { SkraBox, SkraGrid, SkraStack };
-export type { BoxDisplay, BoxPadding, GridAlign, GridColumns, GridFlow, GridGap, GridMin, StackAlign, StackDirection, StackGap, StackJustify };
+type SurfacePadding = 'none' | 'sm' | 'md' | 'lg';
+/**
+ * SkraSurface — the painted container primitive (ADR 0053), Box's painting sibling.
+ *
+ * Component-on-native-host: layers onto a generic flow/sectioning container via the
+ * bounded host allowlist below — NEVER a `<skra-surface>` custom element, and never
+ * an interactive host (ADR 0055 R3.1: `a[skraSurface]` / `button[skraSurface]` are
+ * unsupported). "Card", "Panel" and "Tile" are consumer compositions of Surface +
+ * `[skraStack]`/`[skraBox]` + a heading — not Skra components (ADR 0053 rule 1).
+ *
+ * **State-reading doctrine (ADR 0055).** Surface is a READER of state, never an
+ * OWNER of state. It exposes no `interactive`/`hoverable`/`selected`/`elevation`
+ * input and emits no `role`/`tabindex`/`aria-*`. Focus and selection are READ from
+ * the markup the consumer authored (see surface.scss) — which is why an
+ * informational card gets no interactive paint with zero API, and why a selected
+ * card can never disagree with what assistive technology announces.
+ *
+ * Zero baked semantics: sectioning role and accessible name are 100% consumer-owned
+ * (ADR 0053 rule 6). No `container-type` in v1 (ADR 0055 R7.1).
+ */
+declare class SkraSurface {
+    /**
+     * Semantic padding preset, reusing Box's enum for cross-atom consistency
+     * (ADR 0053 rule 4). Defaults to `md` rather than Box's `none` — Box is
+     * spacing-neutral by construction, a painted container is not (ADR 0055 R1).
+     */
+    readonly padding: _angular_core.InputSignal<SurfacePadding>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkraSurface, never>;
+    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 };
+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"],"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;;;;","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"],"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":[]}