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.
svelte-kit-vice/src/uix/morfo/components/banner.ts

47 lines
1.8 KiB

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;

Powered by TurnKey Linux.