@studiolxd/brand 49.7.0 → 49.8.1

package/CHANGELOG.md

@@ -7,6 +7,82 @@ El paquete sigue [semver](https://semver.org/lang/es/): **patch** para bug fixes
 regeneración de `dist`, **minor** para componentes/props/variantes/tokens nuevos, **major**
 para breaking changes.
 
+## [49.8.1] — 2026-09-18
+
+> **Patch.** `AppShell` ya no revienta sin `ResizeObserver`.
+
+### El armazón mide la barra de sistema solo si hay `ResizeObserver`
+
+Desde 49.8.0, `AppShell` medía la ranura `banner` con `new ResizeObserver(...)` en el
+callback ref de montaje. En Vitest + jsdom sin polyfill (o en cualquier entorno que no lo
+implemente) eso caía con `ReferenceError: ResizeObserver is not defined` — lo sufrió
+`@slxd/app-shell` de la suite, que lo tapó con un polyfill en su propio setup. Un componente
+del sistema tiene que ser inofensivo sin DOM real.
+
+`AppShell` guarda ahora la creación del observer tras `typeof ResizeObserver === 'undefined'`:
+sin él, mide una vez con `getBoundingClientRect` y no observa (la barra queda con el
+comportamiento previo, sin reobservar redimensionados). `useIsDesktop` aplica la misma guarda
+sobre `window.matchMedia`, la otra API de navegador que el armazón usa al montar.
+
+## [49.8.0] — 2026-09-18
+
+> **Minor.** Lo que cae dentro de un `Banner` lee con la tinta del relleno en todas las
+> variantes, llega `Banner variant="error"`, y `AppShell` gana la ranura `banner` por encima
+> de la cabecera.
+
+### Los botones dentro del aviso ya no salen blancos sobre amarillo
+
+`Banner` declaraba superficie solo en `info`: en `warning` fijaba a tinta el aspa y se
+olvidaba de la ranura de acciones, así que sobre página oscura un `Button variant="outline"`
+heredaba la tinta ambiente y salía **blanco sobre amarillo** (1,50:1). `Alert warning` tenía
+el mismo hueco.
+
+La respuesta no es un `!important` por componente sino la pieza que faltaba en el sistema de
+superficies: **`.surface-light`**, el contrapunto de `.surface-dark`, para el interior de un
+relleno **claro y universal**. `.surface-invert` no valía —es la cara *contraria* a la
+ambiente, o sea oscura sobre página clara— y `.surface-dark` es justo al revés. La clase no
+está en `DARK_SELECTORS`: sobre página clara no hace nada, porque los tokens ya están en
+claro, y `src/tokens/surface-light.css` —generado por `pnpm build:tokens`, con los mismos
+nombres y valores que `surface-invert.css`— los devuelve a claro cuando cae dentro de una
+superficie oscura.
+
+`Banner warning` la abre sobre el contenido, las acciones y el aspa (y copia antes su tinta
+en `--banner-ink`, que es lo que consumen contenido y acciones); `Alert warning` hace lo
+mismo por el camino que ya tenía (`interiorSurface`). Un botón, un enlace o el aspa dentro
+del aviso leen en prusia en las dos superficies **sin que el consumidor configure nada**.
+
+### `Banner variant="error"`
+
+`error` es para el estado que hay que ver antes que nada: la suplantación es el caso de
+referencia. Relleno de error del sistema —`error-fill` / `error-fill-text`, los mismos roles
+que `Alert error`, universales en las dos superficies— con el aspa y las acciones en la
+tinta del relleno, que declara la raíz (`.surface-dark`) como en `info`. Tokens
+`banner.error.*` calcados de `banner.warning.*`.
+
+Con la variante llega el **rol por variante**, el mismo criterio que en `Alert`: `warning` y
+`error` interrumpen (`role="alert"`, `aria-live="assertive"`) e `info` informa sin
+interrumpir (`role="status"`, `aria-live="polite"`). Las props `role` y `aria-live` siguen
+mandando. Es un cambio de comportamiento en `warning`, que antes anunciaba como `status`.
+
+### `AppShell`: la ranura `banner`, por encima de la cabecera
+
+Prop `banner?: ReactNode`, pintada **antes de `header`** dentro de `.app-shell` y a ancho
+completo. Es para el estado de sesión que no se puede perder de vista —la suplantación—: va
+por encima de todo, incluida la cabecera. La maqueta no cambia: el armazón sigue siendo una
+columna de `100dvh`, el cuerpo se queda con lo que sobra (`flex: 1; min-block-size: 0`) y la
+sidebar sigue midiendo el cien por cien del cuerpo. La cabecera es `sticky` contra un
+contenedor que no hace scroll, así que la barra ni la tapa ni queda tapada.
+
+En **móvil**, el cajón de la sidebar y su velo arrancaban en
+`calc(var(--app-header-height) + env(safe-area-inset-top))`: con barra tienen que arrancar
+por debajo de cabecera **más** barra. Como el alto de la barra lo decide su contenido —el
+mensaje parte en dos líneas, las acciones apilan— no se puede fijar: el armazón la mide con
+un `ResizeObserver` y publica el alto en `--app-shell-banner-height` por el CSSOM
+(`useCssProperties`, como ya hacía con `--app-shell-sidebar-width`). De ahí sale
+`--app-shell-chrome-block-start`, el offset único que consumen el velo (`AppShell.css`) y el
+cajón (`Sidebar.css`, con fallback para un `Sidebar` fuera de un `AppShell`). Sin ranura
+`banner` el valor es cero y todo queda como estaba.
+
 ## [49.7.0] — 2026-09-18
 
 > **Minor.** El legend de `Fieldset` gana aire por debajo, igual que un `Heading` suelto.

package/dist/_shared/tokens.js

@@ -2149,6 +2149,9 @@ var e = {
 	"--banner-warning-color": "#111e30",
 	"--banner-warning-border-color": "#ffcd00",
 	"--banner-warning-close-color": "#111e30",
+	"--banner-error-bg": "#b30000",
+	"--banner-error-color": "#ffffff",
+	"--banner-error-border-color": "#b30000",
 	"--calendar-planner-gap": "0.5rem",
 	"--calendar-planner-font-family": "\"Google Sans Flex\", system-ui, sans-serif",
 	"--calendar-planner-nav-color": "#111e30",

package/dist/_types/molecules/Banner/Banner.d.ts

@@ -8,9 +8,13 @@ export interface BannerMessages {
     /** Nombre accesible del aspa que descarta la barra. */
     dismiss: string;
 }
-export type BannerVariant = 'info' | 'warning';
+export type BannerVariant = 'info' | 'warning' | 'error';
 export interface BannerProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Intención de la barra. Default `'info'` (relleno prusia); `'warning'` es el relleno de aviso. */
+    /**
+     * Intención de la barra. Default `'info'` (relleno prusia); `'warning'` es el
+     * relleno de aviso y `'error'` el de error, para el estado que hay que ver
+     * antes que nada.
+     */
     variant?: BannerVariant;
     /** El mensaje. Texto corriente: una frase, no un bloque. */
     children?: React.ReactNode;
@@ -42,8 +46,9 @@ export interface BannerProps extends React.ComponentPropsWithoutRef<'div'> {
  * No fija su posición: `sticky` lo decide la aplicación con el layout del
  * sistema. Tampoco se oculta sola — `onDismiss` avisa y la app decide.
  *
- * Anuncia como `role="status"` con `aria-live="polite"`, que es lo que
- * corresponde a un aviso que no interrumpe. Ambos se pueden sobrescribir.
+ * El rol sale de la variante, como en `Alert`: `error` y `warning` interrumpen
+ * (`alert`, live `assertive`) y `info` informa sin interrumpir (`status`, live
+ * `polite`). Ambos se pueden sobrescribir.
  *
  * Extiende los atributos nativos de `<div>` y reenvía `{...rest}` al raíz.
  */

package/dist/_types/sections/AppShell/AppShell.d.ts

@@ -4,6 +4,17 @@ import './AppShell.css';
 export { useAppShell } from './AppShellContext';
 export type { AppShellContextValue, SidebarState } from './AppShellContext';
 export interface AppShellProps {
+    /**
+     * Ranura para una barra de sistema (`Banner`), **por encima de todo, incluida
+     * la cabecera**. Es para el estado de sesión que no se puede perder de vista
+     * —la suplantación es el caso de referencia—, no para un aviso de pantalla:
+     * eso es un `Alert` dentro del contenido.
+     *
+     * El armazón la mide (`ResizeObserver`) y publica su alto en
+     * `--app-shell-banner-height`, de donde lo toman el cajón de la sidebar y su
+     * velo para arrancar por debajo de cabecera **más** barra en móvil.
+     */
+    banner?: ReactNode;
     /** La barra superior: un `AppHeader`. Siempre visible. */
     header: ReactNode;
     /** La barra lateral: un `Sidebar`. Columna en escritorio, cajón en móvil. */
@@ -40,4 +51,4 @@ export interface AppShellMessages {
  * modo y su asa) y `SidebarNav` (rail). Persistir el estado es del producto:
  * `onSidebarChange` / `onSidebarWidthChange` avisan de cada cambio.
  */
-export declare function AppShell({ header, sidebar, children, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ banner, header, sidebar, children, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/alert.js

@@ -10,40 +10,45 @@ var o = {
 	success: "status",
 	error: "alert",
 	warning: "alert"
-}, s = n(function({ className: e, children: t, ...n }, r) {
+}, s = {
+	default: " surface-invert",
+	warning: " surface-light",
+	success: "",
+	error: ""
+}, c = n(function({ className: e, children: t, ...n }, r) {
 	return /* @__PURE__ */ i("p", {
 		ref: r,
 		className: ["alert__title", e ?? ""].filter(Boolean).join(" "),
 		...n,
 		children: t
 	});
-}), c = n(function({ className: e, children: t, ...n }, r) {
+}), l = n(function({ className: e, children: t, ...n }, r) {
 	return /* @__PURE__ */ i("div", {
 		ref: r,
 		className: ["alert__description", e ?? ""].filter(Boolean).join(" "),
 		...n,
 		children: t
 	});
-}), l = n(function({ className: e, children: t, ...n }, r) {
+}), u = n(function({ className: e, children: t, ...n }, r) {
 	return /* @__PURE__ */ i("div", {
 		ref: r,
 		className: ["alert__actions", e ?? ""].filter(Boolean).join(" "),
 		...n,
 		children: t
 	});
-}), u = n(function({ variant: n = "default", title: s, description: c, actions: l, dismissible: u = !1, onDismiss: d, finalFocus: f, closeLabel: p, className: m, children: h, role: g, ..._ }, v) {
-	let y = e("alert"), [b, x] = r(!1);
-	if (b) return null;
-	let S = [
+}), d = n(function({ variant: n = "default", title: c, description: l, actions: u, dismissible: d = !1, onDismiss: f, finalFocus: p, closeLabel: m, className: h, children: g, role: _, ...v }, y) {
+	let b = e("alert"), [x, S] = r(!1);
+	if (x) return null;
+	let C = [
 		"alert",
 		n === "default" ? "" : `alert--${n}`,
 		n === "success" || n === "error" ? "surface-dark" : "",
-		u ? "alert--dismissible" : "",
-		m ?? ""
-	].filter(Boolean).join(" "), C = n === "default" ? " surface-invert" : "";
-	function w() {
+		d ? "alert--dismissible" : "",
+		h ?? ""
+	].filter(Boolean).join(" "), w = s[n];
+	function T() {
 		if (typeof document > "u") return;
-		let e = f?.current;
+		let e = p?.current;
 		if (e) {
 			e.focus();
 			return;
@@ -51,41 +56,41 @@ var o = {
 		let t = document.body, n = t.hasAttribute("tabindex");
 		n || t.setAttribute("tabindex", "-1"), t.focus(), n || t.removeAttribute("tabindex");
 	}
-	function T() {
-		w(), d ? d() : x(!0);
+	function E() {
+		T(), f ? f() : S(!0);
 	}
 	return /* @__PURE__ */ a("div", {
-		ref: v,
-		role: g ?? o[n],
-		className: S,
-		..._,
+		ref: y,
+		role: _ ?? o[n],
+		className: C,
+		...v,
 		children: [/* @__PURE__ */ a("div", {
-			className: `alert__content${C}`,
+			className: `alert__content${w}`,
 			children: [
-				s && /* @__PURE__ */ i("p", {
+				c && /* @__PURE__ */ i("p", {
 					className: "alert__title",
-					children: s
-				}),
-				c && /* @__PURE__ */ i("div", {
-					className: "alert__description",
 					children: c
 				}),
-				h,
 				l && /* @__PURE__ */ i("div", {
-					className: "alert__actions",
+					className: "alert__description",
 					children: l
+				}),
+				g,
+				u && /* @__PURE__ */ i("div", {
+					className: "alert__actions",
+					children: u
 				})
 			]
-		}), u && /* @__PURE__ */ i(t, {
-			className: `alert__close${C}`,
-			label: y("close", p),
-			onClick: T
+		}), d && /* @__PURE__ */ i(t, {
+			className: `alert__close${w}`,
+			label: b("close", m),
+			onClick: E
 		})]
 	});
-}), d = Object.assign(u, {
-	Title: s,
-	Description: c,
-	Actions: l
+}), f = Object.assign(d, {
+	Title: c,
+	Description: l,
+	Actions: u
 });
 //#endregion
-export { d as Alert, l as AlertActions, c as AlertDescription, s as AlertTitle };
+export { f as Alert, u as AlertActions, l as AlertDescription, c as AlertTitle };

package/dist/app-shell.css

@@ -1 +1 @@
-.app-shell{--app-shell-sidebar-width:var(--sidebar-width);flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:calc(var(--app-header-height) + env(safe-area-inset-top))}
+.app-shell{--app-shell-sidebar-width:var(--sidebar-width);--app-shell-banner-height:0px;--app-shell-chrome-block-start:calc(var(--app-shell-banner-height) + var(--app-header-height) + env(safe-area-inset-top));flex-direction:column;block-size:100dvh;display:flex;overflow:clip}.app-shell__banner{flex-shrink:0}.app-shell__body{flex:1;min-block-size:0;display:flex;position:relative}.app-shell__content{min-inline-size:0;padding-inline:var(--section-padding-inline);padding-block:var(--section-padding-block-lg);flex:1;padding-block-end:max(var(--section-padding-block-lg), env(safe-area-inset-bottom));padding-inline-end:max(var(--section-padding-inline), env(safe-area-inset-right));overflow:auto}.app-shell__backdrop{inset:0;background-color:var(--sidebar-backdrop-bg);opacity:var(--sidebar-backdrop-opacity);z-index:var(--sidebar-backdrop-z-index);position:fixed;inset-block-start:var(--app-shell-chrome-block-start)}

package/dist/app-shell.js

@@ -10,73 +10,93 @@ import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/stories/sections/AppShell/AppShell.tsx
 var f = "(min-width: 1024px)";
 function p() {
-	let [e, t] = l(() => typeof window > "u" ? !0 : window.matchMedia(f).matches);
+	let [e, t] = l(() => typeof window > "u" || typeof window.matchMedia != "function" ? !0 : window.matchMedia(f).matches);
 	return s(() => {
+		if (typeof window.matchMedia != "function") return;
 		let e = window.matchMedia(f), n = () => t(e.matches);
 		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, []), e;
 }
-function m({ header: i, sidebar: f, children: m, defaultSidebar: h = "open", sidebarState: g, onSidebarChange: _, defaultSidebarWidth: v, onSidebarWidthChange: y, skipLabel: b }) {
-	let x = e("appShell"), S = p(), [C, w] = l(h), [T, E] = l(!1), [D, O] = l(v), k = S ? g ?? C : T ? "open" : "closed", A = o((e) => {
-		S ? (w(e), _?.(e)) : E(e === "open");
-	}, [S, _]), j = o(() => A(k === "open" ? "closed" : "open"), [A, k]), M = o(() => A("closed"), [A]), N = o((e) => {
-		O(e), y?.(e);
-	}, [y]);
+function m({ banner: i, header: f, sidebar: m, children: h, defaultSidebar: g = "open", sidebarState: _, onSidebarChange: v, defaultSidebarWidth: y, onSidebarWidthChange: b, skipLabel: x }) {
+	let S = e("appShell"), C = p(), [w, T] = l(g), [E, D] = l(!1), [O, k] = l(y), A = C ? _ ?? w : E ? "open" : "closed", j = o((e) => {
+		C ? (T(e), v?.(e)) : D(e === "open");
+	}, [C, v]), M = o(() => j(A === "open" ? "closed" : "open"), [j, A]), N = o(() => j("closed"), [j]), P = o((e) => {
+		k(e), b?.(e);
+	}, [b]);
 	s(() => {
-		if (S || !T) return;
+		if (C || !E) return;
 		let e = (e) => {
-			e.key === "Escape" && E(!1);
+			e.key === "Escape" && D(!1);
 		};
 		document.addEventListener("keydown", e);
 		let t = document.body.style.overflow;
 		return document.body.style.overflow = "hidden", () => {
 			document.removeEventListener("keydown", e), document.body.style.overflow = t;
 		};
-	}, [S, T]);
-	let P = c(() => ({
-		sidebar: k,
-		setSidebar: A,
-		sidebarWidth: D ?? 0,
-		setSidebarWidth: N,
-		toggleSidebar: j,
-		closeSidebar: M,
-		isDesktop: S
+	}, [C, E]);
+	let F = c(() => ({
+		sidebar: A,
+		setSidebar: j,
+		sidebarWidth: O ?? 0,
+		setSidebarWidth: P,
+		toggleSidebar: M,
+		closeSidebar: N,
+		isDesktop: C
 	}), [
-		k,
 		A,
-		D,
-		N,
 		j,
+		O,
+		P,
 		M,
-		S
-	]), F = n({ "--app-shell-sidebar-width": D ? `${D}px` : void 0 }), I = !S && T;
+		N,
+		C
+	]), [I, L] = l(0), R = o((e) => {
+		if (!e) return;
+		let t = () => L(e.getBoundingClientRect().height);
+		if (t(), typeof ResizeObserver > "u") return;
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => {
+			n.disconnect(), L(0);
+		};
+	}, []), z = n({
+		"--app-shell-sidebar-width": O ? `${O}px` : void 0,
+		"--app-shell-banner-height": i ? `${I}px` : void 0
+	}), B = !C && E;
 	return /* @__PURE__ */ u(a.Provider, {
-		value: P,
+		value: F,
 		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
 			href: "#main-content",
-			children: x("skipToContent", b)
+			children: S("skipToContent", x)
 		}), /* @__PURE__ */ d("div", {
-			ref: F,
+			ref: z,
 			className: "app-shell",
-			"data-sidebar": k,
-			children: [i, /* @__PURE__ */ d("div", {
-				className: "app-shell__body",
-				children: [
-					f,
-					I && /* @__PURE__ */ u("div", {
-						className: "app-shell__backdrop",
-						onClick: M,
-						"aria-hidden": "true"
-					}),
-					/* @__PURE__ */ u("main", {
-						id: "main-content",
-						tabIndex: -1,
-						className: "app-shell__content",
-						inert: I || void 0,
-						children: m
-					})
-				]
-			})]
+			"data-sidebar": A,
+			children: [
+				i && /* @__PURE__ */ u("div", {
+					ref: R,
+					className: "app-shell__banner",
+					children: i
+				}),
+				f,
+				/* @__PURE__ */ d("div", {
+					className: "app-shell__body",
+					children: [
+						m,
+						B && /* @__PURE__ */ u("div", {
+							className: "app-shell__backdrop",
+							onClick: N,
+							"aria-hidden": "true"
+						}),
+						/* @__PURE__ */ u("main", {
+							id: "main-content",
+							tabIndex: -1,
+							className: "app-shell__content",
+							inert: B || void 0,
+							children: h
+						})
+					]
+				})
+			]
 		})] })
 	});
 }

package/dist/banner.css

@@ -1 +1 @@
-:root{--banner-padding-block:var(--spacing-3);--banner-padding-inline:var(--spacing-5);--banner-gap:var(--spacing-4);--banner-close-size:var(--size-component-sm);--banner-close-inset:var(--spacing-2);--banner-border-width:var(--border-width-default);--banner-font-size:var(--text-font-size);--banner-line-height:var(--text-line-height);--banner-info-bg:var(--color-primary);--banner-info-color:var(--color-text-on-dark);--banner-info-border-color:var(--color-text-on-dark);--banner-warning-bg:var(--color-warning-fill);--banner-warning-border-color:var(--color-warning-fill);--banner-warning-color:var(--color-warning-fill-text);--banner-warning-close-color:var(--color-warning-fill-text)}.banner{box-sizing:border-box;background-color:var(--banner-bg);inline-size:100%;color:var(--banner-color);border-block:var(--banner-border-width) solid var(--banner-border-color);padding-block:var(--banner-padding-block);padding-inline:var(--banner-padding-inline);font-size:var(--banner-font-size);line-height:var(--banner-line-height);align-items:flex-start;gap:var(--banner-gap);border-inline:0;flex-direction:column;display:flex;position:relative}.banner.banner--dismissible{padding-inline-end:calc(var(--banner-close-inset) * 2 + var(--banner-close-size))}.banner__content{min-inline-size:0}.banner__actions{align-self:stretch;align-items:stretch;gap:var(--banner-gap);flex-direction:column;display:flex}.banner__actions>*{inline-size:100%}.banner .banner__close{--close-button-size:var(--banner-close-size);position:absolute;inset-block-start:var(--banner-close-inset);inset-inline-end:var(--banner-close-inset)}@media (width>=768px){.banner{flex-direction:row;align-items:center}.banner__content{flex:1}.banner__actions{flex-flow:wrap;align-self:auto;align-items:center}.banner__actions>*{inline-size:auto}}.banner.banner--info{--banner-bg:var(--banner-info-bg);--banner-color:var(--banner-info-color);--banner-border-color:var(--banner-info-border-color)}.banner.banner--warning{--banner-bg:var(--banner-warning-bg);--banner-color:var(--banner-warning-color);--banner-border-color:var(--banner-warning-border-color);--close-button-color:var(--banner-warning-close-color);--close-button-focus-ring-color:var(--banner-warning-close-color)}
+:root{--banner-padding-block:var(--spacing-3);--banner-padding-inline:var(--spacing-5);--banner-gap:var(--spacing-4);--banner-close-size:var(--size-component-sm);--banner-close-inset:var(--spacing-2);--banner-border-width:var(--border-width-default);--banner-font-size:var(--text-font-size);--banner-line-height:var(--text-line-height);--banner-info-bg:var(--color-primary);--banner-info-color:var(--color-text-on-dark);--banner-info-border-color:var(--color-text-on-dark);--banner-warning-bg:var(--color-warning-fill);--banner-warning-border-color:var(--color-warning-fill);--banner-error-bg:var(--color-error-fill);--banner-error-color:var(--color-error-fill-text);--banner-error-border-color:var(--color-error-fill);--banner-warning-color:var(--color-warning-fill-text);--banner-warning-close-color:var(--color-warning-fill-text)}.banner{box-sizing:border-box;background-color:var(--banner-bg);inline-size:100%;color:var(--banner-color);border-block:var(--banner-border-width) solid var(--banner-border-color);padding-block:var(--banner-padding-block);padding-inline:var(--banner-padding-inline);font-size:var(--banner-font-size);line-height:var(--banner-line-height);--banner-ink:var(--banner-color);align-items:flex-start;gap:var(--banner-gap);border-inline:0;flex-direction:column;display:flex;position:relative}.banner.banner--dismissible{padding-inline-end:calc(var(--banner-close-inset) * 2 + var(--banner-close-size))}.banner__content{min-inline-size:0}.banner .banner__content,.banner .banner__actions{color:var(--banner-ink)}.banner__actions{align-self:stretch;align-items:stretch;gap:var(--banner-gap);flex-direction:column;display:flex}.banner__actions>*{inline-size:100%}.banner .banner__close{--close-button-size:var(--banner-close-size);position:absolute;inset-block-start:var(--banner-close-inset);inset-inline-end:var(--banner-close-inset)}@media (width>=768px){.banner{flex-direction:row;align-items:center}.banner__content{flex:1}.banner__actions{flex-flow:wrap;align-self:auto;align-items:center}.banner__actions>*{inline-size:auto}}.banner.banner--info{--banner-bg:var(--banner-info-bg);--banner-color:var(--banner-info-color);--banner-border-color:var(--banner-info-border-color)}.banner.banner--warning{--banner-bg:var(--banner-warning-bg);--banner-color:var(--banner-warning-color);--banner-border-color:var(--banner-warning-border-color);--close-button-color:var(--banner-warning-close-color);--close-button-focus-ring-color:var(--banner-warning-close-color)}.banner.banner--error{--banner-bg:var(--banner-error-bg);--banner-color:var(--banner-error-color);--banner-border-color:var(--banner-error-border-color)}

package/dist/banner.js

@@ -5,36 +5,40 @@ import { CloseButton as t } from "./close-button.js";
 import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/stories/molecules/Banner/Banner.tsx
-var a = n(function({ variant: n = "info", children: a, actions: o, onDismiss: s, dismissLabel: c, className: l, role: u, "aria-live": d, ...f }, p) {
-	let m = e("banner"), h = [
+var a = {
+	info: "status",
+	warning: "alert",
+	error: "alert"
+}, o = n(function({ variant: n = "info", children: o, actions: s, onDismiss: c, dismissLabel: l, className: u, role: d, "aria-live": f, ...p }, m) {
+	let h = e("banner"), g = d ?? a[n], _ = [
 		"banner",
 		`banner--${n}`,
-		n === "info" ? "surface-dark" : "",
-		s ? "banner--dismissible" : "",
-		l ?? ""
-	].filter(Boolean).join(" ");
+		n === "info" || n === "error" ? "surface-dark" : "",
+		c ? "banner--dismissible" : "",
+		u ?? ""
+	].filter(Boolean).join(" "), v = n === "warning" ? " surface-light" : "";
 	return /* @__PURE__ */ i("div", {
-		ref: p,
-		role: u ?? "status",
-		"aria-live": d ?? "polite",
-		className: h,
-		...f,
+		ref: m,
+		role: g,
+		"aria-live": f ?? (g === "alert" ? "assertive" : "polite"),
+		className: _,
+		...p,
 		children: [
 			/* @__PURE__ */ r("div", {
-				className: "banner__content",
-				children: a
-			}),
-			o && /* @__PURE__ */ r("div", {
-				className: "banner__actions",
+				className: `banner__content${v}`,
 				children: o
 			}),
-			s && /* @__PURE__ */ r(t, {
-				className: "banner__close",
-				label: m("dismiss", c),
-				onClick: s
+			s && /* @__PURE__ */ r("div", {
+				className: `banner__actions${v}`,
+				children: s
+			}),
+			c && /* @__PURE__ */ r(t, {
+				className: `banner__close${v}`,
+				label: h("dismiss", l),
+				onClick: c
 			})
 		]
 	});
 });
 //#endregion
-export { a as Banner };
+export { o as Banner };