You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.8 KiB
47 lines
1.8 KiB
5 months ago
|
import type { Morfo } from '../types';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Banner — full-bleed announcement strip with intent variants
|
||
|
|
* (layout primitive).
|
||
|
|
*
|
||
|
|
* Eidos-native: the provider is a `<header data-banner role="banner">`
|
||
|
|
* shell. The intent prop maps to a `data-intent="…"` selector (the
|
||
|
|
* standard UIX color-role channel for visual treatment) and the recipe
|
||
|
|
* pulls the matching `--color-{intent}-*` tokens. The explicit role
|
||
|
|
* stabilises the landmark across layouts — the HTML spec only grants
|
||
|
|
* `role="banner"` to `<header>` when it is a top-level child of `<body>`;
|
||
|
|
* nesting it inside `<main>`, `<article>`, or `<section>` loses the role.
|
||
|
|
*
|
||
|
|
* Justification for 0-event surface: Banner is a passive surface that
|
||
|
|
* shapes an announcement. The optional Close child is a composition
|
||
|
|
* concern (a `<button>` the consumer wires to their own visibility
|
||
|
|
* state) — Banner itself does not own a commit, an emerge, a keyboard
|
||
|
|
* contract, or any ARIA beyond the landmark role. Same passive
|
||
|
|
* justification as `box.ts` / `flex.ts`.
|
||
|
|
*
|
||
|
|
* Close is intentionally NOT a morfo part: it is rendered as an
|
||
|
|
* eidos-only wrapper that only adds visual treatment to a plain
|
||
|
|
* `<button>` the consumer provides. The four rules in
|
||
|
|
* `eidos/components/README.md → Partes Eidos-only` are met: no behavior,
|
||
|
|
* no aria contract (the consumer supplies `aria-label`), no event target
|
||
|
|
* role, no keyboard. The consumer handles the dismissal via their own
|
||
|
|
* onclick — Banner does not commit or emerge anything.
|
||
|
|
*/
|
||
|
|
export const bannerMorfo = {
|
||
|
|
name: 'Banner',
|
||
|
|
kebab: 'banner',
|
||
|
|
scope: ['eidos'],
|
||
|
|
parts: [
|
||
|
|
{
|
||
|
|
name: 'Provider',
|
||
|
|
kebab: 'provider',
|
||
|
|
archetype: 'provider',
|
||
|
|
kind: 'public',
|
||
|
|
defaultElement: 'header',
|
||
|
|
optional: false,
|
||
|
|
data: [],
|
||
|
|
aria: []
|
||
|
|
}
|
||
|
|
]
|
||
|
|
} as const satisfies Morfo;
|