@studiolxd/brand 49.24.0 → 49.25.0

package/CHANGELOG.md

@@ -7,6 +7,84 @@ 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.25.0] — 2026-10-05
+
+> **Minor.** Las esperas pasan a ser piezas del sistema: las aplicaciones dejan de
+> componerlas a mano (`LoadingRegion`/`SkeletonLines`/`SkeletonTable` de lmsmcp, `LoadingState`/
+> `LoadingList`/`LoadingGrid` de creator, los botones con `Spinner` metido a mano). Criterio de la
+> suite: esqueleto cuando se conoce la forma de lo que llega, girador cuando no o cuando se espera
+> una acción, y la espera la anuncia el contenedor. Sin cambios incompatibles.
+
+### `LoadingState` — la espera de un bloque sin forma conocida (`@studiolxd/brand/loading-state`)
+
+- Un girador centrado en los dos ejes, en una caja que reserva alto: nunca un `Spinner` suelto.
+- **Solo se ve el girador.** El texto de la espera es el nombre accesible de la caja (`role="status"`,
+  `aria-busy`, `aria-labelledby` al texto oculto) y no se pinta. `label` lo cambia; sin él sale de
+  `spinner.label` del `BrandMessagesProvider` (sin espacio de textos nuevo). Fuera del proveedor hay
+  que pasar `label`: sin él ni catálogo, el error explícito de siempre.
+- Tallas `md` (página o zona) y `sm` (diálogo, hoja, popover); `action` opcional (p. ej. «Cancelar»),
+  con el mismo `EmptyStateAction` que `EmptyState`.
+- El alto: en una zona con alto definido la ocupa entera; en un flujo sin alto reserva el mínimo de
+  la talla; con **`fill`**, a página completa, toma el alto visible bajo la cabecera del `AppShell` y
+  centra sin provocar desplazamiento (para el `loading.tsx` de una ruta).
+
+### `LoadingRegion` y los esqueletos compuestos (`@studiolxd/brand/loading-region`)
+
+- `LoadingRegion` envuelve esqueletos y anuncia la espera (`role="status"`, `aria-busy`, texto oculto
+  de `label` o `spinner.label`). `announce={false}` la deja solo a la vista, con `aria-hidden`, cuando
+  ya anuncia otra región viva.
+- `SkeletonText` (`lines`, la última más corta), `SkeletonList` (`rows`), `SkeletonTable` (`rows`,
+  más la cabecera) y `SkeletonGrid` (`columns` 2|3|4, `rows`). Decorativos, sin atributo `style`: el
+  alto de cada barra sale de su token.
+
+### `Button loading`
+
+- El girador entra delante del texto, que se queda; mide `1em`, como el icono que acompaña al
+  texto. Con `iconOnly` sustituye al icono y el botón no cambia de ancho.
+- Inactivo y dicho: `aria-busy="true"` + `aria-disabled="true"`, **sin** `disabled` nativo (no
+  pierde el foco); el clic y el envío del formulario se cortan en el manejador. Con `href` quita el
+  `href`, como `disabled`. Con `render={<Link />}` corta el clic normal; el `href` del `Link` sigue
+  ahí (clic con modificador). No cambia dónde se puede usar `render` (solo desde cliente).
+- Nativo: `loading` entra en `excluded` de la ficha de paridad de `Button` hasta que una app nativa
+  lo pida.
+
+### Tokens nuevos
+
+- `loading-state.*`: `min-block-size`, `sm-min-block-size`, `gap`, `padding-block`, `padding-inline`,
+  `sm-padding-block`, `spinner-color` (en cascada desde `empty-state.*`).
+- `loading-region.*`: `gap`, `text-gap`, `text-last-line-width`, `list-gap`, `list-row-height`,
+  `table-gap`, `table-header-height`, `table-row-height`, `grid-gap`, `grid-item-height`.
+- `button.loading-gap`, `button.loading-spinner-size`.
+
+## [49.24.1] — 2026-10-04
+
+> **Patch.** `AppShell` y `ChatShell` ya no rompen la hidratación por debajo del punto de ruptura de
+> escritorio (encargo de Homenize: Next.js 16 con SSR, a 1000px de ancho, React 19 daba «Hydration
+> failed because the server rendered HTML didn't match the client» en cada carga). Sin cambios de API.
+
+### El ancho se lee sin desajustar el HTML del servidor
+
+- El servidor no conoce el ancho y pinta la versión de escritorio; el primer render del cliente leía
+  `matchMedia` en el estado inicial y, por debajo de `breakpoint.lg`, pintaba el cajón: otro
+  `aria-label`/`aria-expanded` en el botón de menú, otra clase, `data-state`, `inert` y `tabIndex` en
+  el `aside` de la `Sidebar`, y el asa de redimensión de menos.
+- Nuevo hook interno `useMediaQuery` (`src/stories/constants/media-query.ts`) sobre
+  `useSyncExternalStore`, con una instantánea de servidor fija (`null`, «todavía no se sabe»): servidor
+  y render de hidratación pintan lo mismo, y React vuelve a pintar con el valor real nada más hidratar.
+  Un render solo de cliente lee el valor real desde el principio.
+- `AppShell` y `ChatShell` publican la forma que han tomado en **`data-layout`** (`column`/`drawer`);
+  sin el atributo, aún no la saben. Por debajo de lg, su hoja esconde la columna mientras falte el
+  atributo —y el `AppShell` deja el glifo de menú en «menú»—, así que el HTML del servidor ya se ve
+  como el cajón cerrado: ni parpadeo ni salto de maquetación al hidratar.
+- Una vez montado, todo igual: en escritorio la barra abierta y redimensionable; en móvil el cajón
+  cerrado, con `inert`, foco, `aria-expanded` y `aria-controls`.
+- Revisados sin cambios: `SiteHeader` (el panel lo resuelve el CSS), `OrgSwitcher`, `Carousel` y
+  `ConversationThread` (solo leen `prefers-reduced-motion` dentro de efectos) y `Chart` (mide con
+  `ResizeObserver` tras montar). Las versiones nativas no hidratan y no tienen `AppShell`.
+- Test nuevo (`AppShell.hydration.test.tsx`): `renderToString` + `hydrateRoot` del `AppShell` con
+  `AppHeader` y `Sidebar`, y del `ChatShell`, a 1000px y a 1280px, sin ningún `console.error` ni
+  error recuperable.
+
 ## [49.24.0] — 2026-10-04
 
 > **Minor.** Disparador propio y ancla sin disparador en `ColorPicker`, a petición de creator (la barra

package/dist/_shared/media-query.js

@@ -0,0 +1,12 @@
+import { useCallback as e, useSyncExternalStore as t } from "react";
+//#region src/stories/constants/media-query.ts
+var n = () => null;
+function r(r) {
+	return t(e((e) => {
+		if (typeof window.matchMedia != "function") return () => {};
+		let t = window.matchMedia(r);
+		return t.addEventListener("change", e), () => t.removeEventListener("change", e);
+	}, [r]), () => typeof window.matchMedia == "function" ? window.matchMedia(r).matches : null, n);
+}
+//#endregion
+export { r as t };

package/dist/_shared/tokens.js

@@ -407,6 +407,8 @@ var e = {
 	"--button-height": "2.5rem",
 	"--button-sm-height": "2rem",
 	"--button-lg-height": "3rem",
+	"--button-loading-gap": "0.5rem",
+	"--button-loading-spinner-size": "1em",
 	"--button-padding-inline": "2rem",
 	"--button-focus-ring-width": "2px",
 	"--button-focus-ring-style": "solid",
@@ -1103,6 +1105,23 @@ var e = {
 	"--link-accent-1-hover-color": "#baabff",
 	"--link-accent-1-underline-width": "1px",
 	"--link-accent-1-hover-underline-width": "0px",
+	"--loading-region-gap": "1.5rem",
+	"--loading-region-text-gap": "0.5rem",
+	"--loading-region-text-last-line-width": "60%",
+	"--loading-region-list-gap": "0.5rem",
+	"--loading-region-list-row-height": "2.5rem",
+	"--loading-region-table-gap": "0.5rem",
+	"--loading-region-table-header-height": "2.5rem",
+	"--loading-region-table-row-height": "2rem",
+	"--loading-region-grid-gap": "1rem",
+	"--loading-region-grid-item-height": "6rem",
+	"--loading-state-min-block-size": "16rem",
+	"--loading-state-sm-min-block-size": "8rem",
+	"--loading-state-gap": "1rem",
+	"--loading-state-padding-block": "3rem",
+	"--loading-state-padding-inline": "1.5rem",
+	"--loading-state-sm-padding-block": "1.5rem",
+	"--loading-state-spinner-color": "#6b6b6b",
 	"--logo-height-sm": "2rem",
 	"--logo-height-md": "2.5rem",
 	"--logo-height-lg": "3rem",

package/dist/_types/atoms/Button/Button.d.ts

@@ -60,6 +60,20 @@ export interface ButtonBaseProps extends Omit<React.ComponentPropsWithoutRef<'bu
      */
     type?: 'button' | 'submit' | 'reset';
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
+    /**
+     * La acción está en marcha: el girador entra delante del texto (que se queda
+     * a la vista) y el botón queda inactivo y lo dice — `aria-busy="true"` y
+     * `aria-disabled="true"`. No usa `disabled` nativo a propósito: un botón que
+     * se deshabilita justo después del clic pierde el foco, y el lector de
+     * pantalla con él. El clic (y el envío del formulario, si es `submit`) se
+     * corta en el manejador.
+     *
+     * Con texto, el botón crece lo que ocupan el girador y su aire; con
+     * `iconOnly` el girador **sustituye** al icono y el botón no cambia de ancho.
+     * El resultado de la acción no lo anuncia el botón: lo anuncia quien lo
+     * enseña (el `Toast`, el error del campo).
+     */
+    loading?: boolean;
     /** Renders as <a> when provided */
     href?: string;
     /** Adds target="_blank" rel="noopener noreferrer" (solo con href) */

package/dist/_types/constants/media-query.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Lee una media query **sin romper la hidratación**.
+ *
+ * El servidor no conoce el ancho de la ventana. Si el primer render del
+ * cliente leyera `matchMedia` (en el `useState` inicial, por ejemplo), pintaría
+ * otro marcado que el servidor y React 19 tiraría la hidratación con «server
+ * rendered HTML didn't match the client». Con `useSyncExternalStore` el
+ * servidor y el render de hidratación leen la misma instantánea fija —`null`,
+ * «todavía no se sabe»— y React vuelve a pintar con el valor real nada más
+ * hidratar. Un render solo de cliente (sin SSR) lee el valor real desde el
+ * primer momento.
+ *
+ * Mientras valga `null`, el componente pinta su forma de partida y es su CSS,
+ * con la misma media query, quien la corrige a la vista: así no hay parpadeo
+ * entre el HTML del servidor y el render hidratado.
+ *
+ * Sin `matchMedia` en el entorno, `null` siempre.
+ */
+export declare function useMediaQuery(query: string): boolean | null;

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

@@ -0,0 +1,53 @@
+import './LoadingRegion.css';
+export interface LoadingRegionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /**
+     * Lo que se espera, con puntos suspensivos («Cargando bancos…»). Se anuncia,
+     * no se ve. **Sin default**: sin él, sale de `spinner.label` del
+     * `BrandMessagesProvider`. No se lee cuando `announce` es `false`.
+     */
+    label?: string;
+    /**
+     * `false` cuando la espera ya la anuncia una región viva que existe antes y
+     * después de cargar: la región queda solo a la vista (`aria-hidden`), para
+     * no anunciarla dos veces.
+     */
+    announce?: boolean;
+    /** Los esqueletos: `SkeletonText`, `SkeletonList`, `SkeletonTable`, `SkeletonGrid` o `Skeleton` sueltos. */
+    children: React.ReactNode;
+}
+/**
+ * La espera de un contenido cuya forma se conoce: reserva su sitio con
+ * esqueletos y la página no salta al llegar. El `Skeleton` es decorativo; quien
+ * anuncia es esta región, con `role="status"`, `aria-busy` y el texto de la
+ * espera oculto a la vista. Apila sus hijos con aire entre bloques.
+ */
+export declare function LoadingRegion({ label, announce, children, className, ...rest }: LoadingRegionProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTextProps {
+    /** Líneas del párrafo; la última sale más corta. */
+    lines?: number;
+}
+/** Un bloque de texto —un párrafo, una lista de definiciones— que aún no llegó. Decorativo. */
+export declare function SkeletonText({ lines }: SkeletonTextProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonListProps {
+    /** Filas de la lista. */
+    rows?: number;
+}
+/** Una lista que aún no llegó: una barra por fila, del alto de un control. Decorativo. */
+export declare function SkeletonList({ rows }: SkeletonListProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTableProps {
+    /** Filas de cuerpo, sin contar la cabecera. */
+    rows?: number;
+}
+/**
+ * Una tabla que aún no llegó: la cabecera y sus filas. No calca el diseño —no
+ * hace falta—, solo ocupa un sitio parecido. Decorativo.
+ */
+export declare function SkeletonTable({ rows }: SkeletonTableProps): import("react/jsx-runtime").JSX.Element;
+export interface SkeletonGridProps {
+    /** Columnas de la rejilla. */
+    columns?: 2 | 3 | 4;
+    /** Filas de la rejilla: se pintan `columns × rows` celdas. */
+    rows?: number;
+}
+/** Una rejilla de tarjetas o miniaturas que aún no llegó. Decorativo. */
+export declare function SkeletonGrid({ columns, rows }: SkeletonGridProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import type { EmptyStateAction } from '../EmptyState/EmptyState';
+import './LoadingState.css';
+export interface LoadingStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role' | 'children'> {
+    /**
+     * Lo que se espera, con puntos suspensivos («Cargando revisión…»: ver
+     * Foundations → Redacción). **No se ve**: es el nombre accesible de la
+     * espera y lo que anuncian los lectores de pantalla. **Sin default**: sin
+     * él, sale de `spinner.label` del `BrandMessagesProvider` — el mismo texto
+     * que el `Spinner`.
+     */
+    label?: string;
+    /**
+     * `md` para una página o una zona; `sm` para el cuerpo de un diálogo, una
+     * hoja, un popover o una barra lateral.
+     */
+    size?: 'sm' | 'md';
+    /**
+     * A página completa: la caja toma el alto visible bajo la cabecera del
+     * `AppShell` (la ventana menos el cromo del armazón y el relleno del
+     * contenido) y centra el girador en él, sin provocar desplazamiento. Para el
+     * `loading.tsx` de una ruta cuya forma no se conoce. Sin `fill`, la caja ya
+     * ocupa el alto de una zona que lo tenga definido y, si no, reserva el
+     * mínimo de su talla.
+     */
+    fill?: boolean;
+    /** Una salida mientras se espera (cancelar un proceso largo). */
+    action?: EmptyStateAction;
+}
+/**
+ * La espera de un bloque cuya forma no se conoce: un girador centrado en una
+ * caja que **reserva alto** y, si hace falta, una salida. A la vista solo está
+ * el girador; el texto de la espera es solo para los lectores de pantalla. Cuando la forma sí se conoce (tabla, lista, ficha), la respuesta es
+ * `LoadingRegion` con esqueletos.
+ *
+ * Anuncia: la caja es `role="status"` con `aria-busy`, y su nombre es el texto
+ * de la espera, oculto a la vista. El girador va decorativo, para no
+ * anunciarla dos veces.
+ */
+export declare function LoadingState({ label, size, fill, action, className, ...rest }: LoadingStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/app-shell.css

@@ -1 +1 @@
-.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__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.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)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}
+.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__content.app-shell__content--flush{padding-block:0;padding-inline:0;padding-block-end:env(safe-area-inset-bottom);padding-inline-end:env(safe-area-inset-right)}.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)}.app-shell:has(.app-header__logo) .sidebar__header{display:none}@media (width<=1023.98px){.app-shell:not([data-layout]) .sidebar{display:none}.app-shell:not([data-layout]) .app-header .menu-button .icon__line{opacity:1;transform:none}}

package/dist/app-shell.js

@@ -5,94 +5,88 @@ import { SkipLink as t } from "./skip-link.js";
 import { t as n } from "./_shared/css-properties.js";
 import { TooltipProvider as r } from "./tooltip.js";
 import { n as i, t as a } from "./_shared/appshellcontext.js";
-import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { t as o } from "./_shared/media-query.js";
+import { useCallback as s, useEffect as c, useMemo as l, useState as u } from "react";
+import { jsx as d, jsxs as f } 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" || 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({ banner: i, header: f, sidebar: m, children: h, contentFlush: g = !1, defaultSidebar: _ = "open", sidebarState: v, onSidebarChange: y, defaultSidebarWidth: b, onSidebarWidthChange: x, skipLabel: S }) {
-	let C = e("appShell"), w = p(), [T, E] = l(_), [D, O] = l(!1), [k, A] = l(b), j = w ? v ?? T : D ? "open" : "closed", M = o((e) => {
-		w ? (E(e), y?.(e)) : O(e === "open");
-	}, [w, y]), N = o(() => M(j === "open" ? "closed" : "open"), [M, j]), P = o(() => M("closed"), [M]), F = o((e) => {
-		A(e), x?.(e);
-	}, [x]);
-	s(() => {
-		if (w || !D) return;
+var p = "(min-width: 1024px)";
+function m({ banner: i, header: m, sidebar: h, children: g, contentFlush: _ = !1, defaultSidebar: v = "open", sidebarState: y, onSidebarChange: b, defaultSidebarWidth: x, onSidebarWidthChange: S, skipLabel: C }) {
+	let w = e("appShell"), T = o(p), E = T ?? !0, [D, O] = u(v), [k, A] = u(!1), [j, M] = u(x), N = E ? y ?? D : k ? "open" : "closed", P = s((e) => {
+		E ? (O(e), b?.(e)) : A(e === "open");
+	}, [E, b]), F = s(() => P(N === "open" ? "closed" : "open"), [P, N]), I = s(() => P("closed"), [P]), L = s((e) => {
+		M(e), S?.(e);
+	}, [S]);
+	c(() => {
+		if (E || !k) return;
 		let e = (e) => {
-			e.key === "Escape" && O(!1);
+			e.key === "Escape" && A(!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;
 		};
-	}, [w, D]);
-	let I = c(() => ({
-		sidebar: j,
-		setSidebar: M,
-		sidebarWidth: k ?? 0,
-		setSidebarWidth: F,
-		toggleSidebar: N,
-		closeSidebar: P,
-		isDesktop: w
+	}, [E, k]);
+	let R = l(() => ({
+		sidebar: N,
+		setSidebar: P,
+		sidebarWidth: j ?? 0,
+		setSidebarWidth: L,
+		toggleSidebar: F,
+		closeSidebar: I,
+		isDesktop: E
 	}), [
-		j,
-		M,
-		k,
-		F,
 		N,
 		P,
-		w
-	]), [L, R] = l(0), z = o((e) => {
+		j,
+		L,
+		F,
+		I,
+		E
+	]), [z, B] = u(0), V = s((e) => {
 		if (!e) return;
-		let t = () => R(e.getBoundingClientRect().height);
+		let t = () => B(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), R(0);
+			n.disconnect(), B(0);
 		};
-	}, []), B = n({
-		"--app-shell-sidebar-width": k ? `${k}px` : void 0,
-		"--app-shell-banner-height": i ? `${L}px` : void 0
-	}), V = !w && D;
-	return /* @__PURE__ */ u(a.Provider, {
-		value: I,
-		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
+	}, []), H = n({
+		"--app-shell-sidebar-width": j ? `${j}px` : void 0,
+		"--app-shell-banner-height": i ? `${z}px` : void 0
+	}), U = !E && k;
+	return /* @__PURE__ */ d(a.Provider, {
+		value: R,
+		children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(t, {
 			href: "#main-content",
-			children: C("skipToContent", S)
-		}), /* @__PURE__ */ d("div", {
-			ref: B,
+			children: w("skipToContent", C)
+		}), /* @__PURE__ */ f("div", {
+			ref: H,
 			className: "app-shell",
-			"data-sidebar": j,
+			"data-sidebar": N,
+			"data-layout": T === null ? void 0 : E ? "column" : "drawer",
 			children: [
-				i && /* @__PURE__ */ u("div", {
-					ref: z,
+				i && /* @__PURE__ */ d("div", {
+					ref: V,
 					className: "app-shell__banner",
 					children: i
 				}),
-				f,
-				/* @__PURE__ */ d("div", {
+				m,
+				/* @__PURE__ */ f("div", {
 					className: "app-shell__body",
 					children: [
-						m,
-						V && /* @__PURE__ */ u("div", {
+						h,
+						U && /* @__PURE__ */ d("div", {
 							className: "app-shell__backdrop",
-							onClick: P,
+							onClick: I,
 							"aria-hidden": "true"
 						}),
-						/* @__PURE__ */ u("main", {
+						/* @__PURE__ */ d("main", {
 							id: "main-content",
 							tabIndex: -1,
-							className: g ? "app-shell__content app-shell__content--flush" : "app-shell__content",
-							inert: V || void 0,
-							children: h
+							className: _ ? "app-shell__content app-shell__content--flush" : "app-shell__content",
+							inert: U || void 0,
+							children: g
 						})
 					]
 				})