@studiolxd/brand 49.15.1 → 49.17.0

package/CHANGELOG.md

@@ -7,6 +7,66 @@ 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.17.0] — 2026-10-03
+
+> **Minor.** Componente nuevo: `EmbedFrame`, el marco embebido del sistema, y las tres
+> props de alto que lo colocan sin CSS de consumidor.
+
+### `EmbedFrame` — nuevo
+
+- Pinta un `<iframe>` que **llena su contenedor**: todo el ancho y todo el alto, sin
+  borde ni fondo propios; el desplazamiento ocurre dentro del documento embebido. En
+  una columna flexible con alto toma el que dejan sus hermanos.
+- `title` **obligatorio** (nombre accesible del marco), `src`, `ref` al `<iframe>`
+  (para `contentWindow` y `postMessage`) y los atributos nativos (`allow`, `sandbox`,
+  `loading`, `referrerPolicy`, `name`, `onLoad`, `srcDoc`…). No acepta `width`,
+  `height` ni `frameBorder`.
+- `fill?: 'container' | 'viewport'` (por defecto `container`): con `viewport` mide el
+  alto de la ventana, para cuando no hay contenedor con alto.
+- Sin tokens propios. Import: `@studiolxd/brand/embed-frame` (también en el barril).
+
+### Props nuevas para ocupar el alto
+
+- **`Stack fill`**: la pila ocupa el alto de su contenedor (`block-size: 100%`), y lo que
+  crece dentro se queda con lo que dejan las demás piezas.
+- **`ScrollArea fill`**: el área ocupa el alto que dejan sus hermanos en una columna con
+  alto. Solo desde `md`; por debajo mide su contenido.
+- **`AppShell contentFlush`**: el contenido principal a sangre, sin relleno de sección
+  (respeta la zona segura del dispositivo). Story nueva «Contenido a sangre».
+
+## [49.16.0] — 2026-10-02
+
+> **Minor.** Los iconos, en una sola familia de tamaño y trazo: todo glifo cabe en el
+> área útil de 18 (3–21 del lienzo de 24), con caps y uniones redondeadas y marcos de
+> radio 2. Lo que más se nota: el chevron.
+
+### `Icon` — lo que cambia
+
+- **Chevron al máximo del área**: `chevron`/`chevron-right` 9×18, `chevron-down`/`up` la
+  misma punta girada (18×9), caps `round`. Antes iba de borde a borde (12×24). `chevron`
+  pasa a ser alias de `chevron-right` (mismo objeto; ningún nombre público cambia).
+  `chevrons-up-down`: dos chevrons de 14×7.
+- **Tamaños a la norma de 18** (regla óptica: cuadrados llenos a 17): bajan `folder` /
+  `folder-open` (siguen siendo la misma caja entre sí), `graduation-cap`, `eye` /
+  `eye-off`; suben `plus` / `minus`, `check`, `upload` / `download` / `send`, `retry`,
+  `play` / `pause` / `stop`; `dashboard`, `layout-kanban`, `layout-sidebar` a 17.
+- `connection` vuelve dentro del lienzo; `inbox` redibujado como bandeja.
+- Uniones y esquinas: `play` y `stop` redondeados como `pause`; radio 2 en `building`,
+  `calendar` y los ejes de `chart-bar`.
+- `arrow`, `arrow-left`, `close` y `menu` no cambian (glifos de marca / `MENU_GLYPH`).
+
+### Componentes con chevron
+
+Talla del chevron revisada por componente: Pagination, Calendar, CalendarPlanner,
+InputPhone, el orden de Table y la talla `sm` de Select/MultiSelect suben de `xs` a `sm`
+(token `select.sm-icon-size`, `input-phone.country-icon-size`). **Token nuevo**
+`input-phone.sm-country-icon-size` para la caja estrecha del prefijo en `sm`.
+
+### Foundations
+
+Iconografía gana la sección y la story «Área útil» (el catálogo sobre la retícula de 18),
+y un test de navegador que falla si un glifo se sale del área (excepciones comentadas).
+
 ## [49.15.1] — 2026-10-02
 
 > **Patch.** Dos arreglos vistos en el árbol de contenidos de creator.

package/dist/_shared/tokens.js

@@ -966,10 +966,11 @@ var e = {
 	"--input-phone-content-z-index": "400",
 	"--input-phone-country-gap": "0.25rem",
 	"--input-phone-content-max-height": "17.5rem",
-	"--input-phone-country-icon-size": "0.625rem",
+	"--input-phone-country-icon-size": "16px",
 	"--input-phone-country-icon-transition-easing": "ease",
 	"--input-phone-country-item-padding-block": "0.5rem",
 	"--input-phone-sm-country-width": "3.5rem",
+	"--input-phone-sm-country-icon-size": "0.625rem",
 	"--input-phone-lg-country-width": "5.5rem",
 	"--input-phone-country-item-highlighted-bg": "#111e30",
 	"--input-phone-country-item-highlighted-color": "#ffffff",
@@ -1210,7 +1211,7 @@ var e = {
 	"--multi-select-icon-transition-easing": "ease",
 	"--multi-select-selection-gap": "0.25rem",
 	"--multi-select-icon-size": "16px",
-	"--multi-select-sm-icon-size": "8px",
+	"--multi-select-sm-icon-size": "16px",
 	"--multi-select-lg-icon-size": "24px",
 	"--multi-select-sm-font-size": "0.875rem",
 	"--multi-select-sm-padding-inline": "0.5rem",
@@ -1486,7 +1487,7 @@ var e = {
 	"--select-item-highlighted-bg": "#111e30",
 	"--select-item-highlighted-color": "#ffffff",
 	"--select-icon-size": "16px",
-	"--select-sm-icon-size": "8px",
+	"--select-sm-icon-size": "16px",
 	"--select-lg-icon-size": "24px",
 	"--select-sm-font-size": "0.875rem",
 	"--select-sm-padding-inline": "0.5rem",

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

@@ -0,0 +1,33 @@
+import './EmbedFrame.css';
+export interface EmbedFrameProps extends Omit<React.ComponentPropsWithoutRef<'iframe'>, 'title' | 'width' | 'height' | 'frameBorder'> {
+    /**
+     * Nombre accesible del marco: lo que anuncia el lector de pantalla al entrar
+     * en él. Obligatorio — un `<iframe>` sin título es un hueco sin nombre.
+     */
+    title: string;
+    /** Dirección del documento que se pinta dentro. */
+    src?: string;
+    /**
+     * Qué alto llena. `container` (por defecto): el de la caja que le dan.
+     * `viewport`: el de la ventana, para cuando el marco no tiene un contenedor
+     * con alto —solo en la página, o como celda de `Columns`—.
+     */
+    fill?: 'container' | 'viewport';
+    /** Se añade DESPUÉS de las clases propias. */
+    className?: string;
+}
+/**
+ * Un documento dentro de la página: el `<iframe>` del sistema. Ocupa todo el
+ * ancho y todo el alto de su contenedor, sin borde ni fondo propios, y el
+ * desplazamiento ocurre dentro del documento embebido, no en la página.
+ *
+ * **El alto lo pone el contenedor**: el marco llena la caja que le dan. Dentro
+ * de `AppShell` esa caja es el contenido principal, que ya mide el resto de la
+ * ventana bajo la cabecera y junto a la barra lateral. Sin contenedor con alto,
+ * `fill="viewport"` le da el de la ventana.
+ *
+ * `ref` apunta al `<iframe>` —de ahí sale `contentWindow` para `postMessage`—
+ * y `{...rest}` (`allow`, `sandbox`, `loading`, `referrerPolicy`, `name`,
+ * `onLoad`, `aria-*`, `data-*`…) se reenvía tal cual.
+ */
+export declare const EmbedFrame: import("react").ForwardRefExoticComponent<EmbedFrameProps & import("react").RefAttributes<HTMLIFrameElement>>;

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

@@ -24,8 +24,8 @@ declare const ICONS: {
         readonly render: () => import("react/jsx-runtime").JSX.Element;
     };
     readonly chevron: {
-        readonly viewBox: "0 0 24 24";
-        readonly render: () => import("react/jsx-runtime").JSX.Element;
+        viewBox: string;
+        render: () => import("react/jsx-runtime").JSX.Element;
     };
     readonly close: {
         readonly viewBox: "0 0 24 24";
@@ -248,8 +248,8 @@ declare const ICONS: {
         readonly render: () => import("react/jsx-runtime").JSX.Element;
     };
     readonly 'chevron-right': {
-        readonly viewBox: "0 0 24 24";
-        readonly render: () => import("react/jsx-runtime").JSX.Element;
+        viewBox: string;
+        render: () => import("react/jsx-runtime").JSX.Element;
     };
     readonly 'chevron-down': {
         readonly viewBox: "0 0 24 24";

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

@@ -12,6 +12,13 @@ export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typ
      * que decir de qué es; sin él el lector solo anuncia «región desplazable».
      */
     label?: string;
+    /**
+     * Ocupa el alto que dejan sus hermanos en una columna con alto (`Stack fill`,
+     * la celda estirada de `Columns`), en vez de medirlo quien lo usa. Desde
+     * `md`; por debajo mide su contenido, porque ahí la columna ya no tiene alto
+     * propio (en móvil `Columns` apila).
+     */
+    fill?: boolean;
     children: ReactNode;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
@@ -21,8 +28,8 @@ export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typ
  * Area): la lista de un panel lateral, el resultado largo de una consulta, el
  * lienzo de un editor.
  *
- * **El alto lo pone quien lo usa** (`className` o el contenedor): el componente
- * no decide cuánto mide el hueco, solo cómo se desplaza dentro.
+ * **El alto lo pone quien lo usa** (`className`, el contenedor o `fill`): el
+ * componente no decide cuánto mide el hueco, solo cómo se desplaza dentro.
  *
  * Base UI hace la zona alcanzable con el teclado cuando de verdad hay
  * desplazamiento, y la barra aparece al usarla.

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

@@ -23,6 +23,12 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
      * (un enlace de vuelta sobre la cabecera).
      */
     mobileOrder?: 'normal' | 'reverse';
+    /**
+     * Ocupa el alto de su contenedor. Con él, la pila es una columna con alto y
+     * una pieza que crece (`EmbedFrame`, `ScrollArea fill`) se queda con lo que
+     * dejan las demás. Para la raíz del contenido de `AppShell`.
+     */
+    fill?: boolean;
     children: ReactNode;
     /** Se añade DESPUÉS de las clases propias. */
     className?: string;
@@ -36,4 +42,4 @@ export interface StackProps extends React.ComponentPropsWithoutRef<'div'> {
  * pila puede ser el grupo con nombre accesible que pide un formulario sin
  * tener que envolverla en un elemento nativo aparte.
  */
-export declare function Stack({ gap, align, mobileOrder, children, className, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Stack({ gap, align, mobileOrder, fill, children, className, ...rest }: StackProps): import("react/jsx-runtime").JSX.Element;

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

@@ -20,6 +20,14 @@ export interface AppShellProps {
     /** La barra lateral: un `Sidebar`. Columna en escritorio, cajón en móvil. */
     sidebar: ReactNode;
     children: ReactNode;
+    /**
+     * Contenido a sangre: sin el relleno de sección del contenido principal, que
+     * llega al borde de la cabecera y de la sidebar. Para lo que trae sus propios
+     * márgenes —un `EmbedFrame` con el reproductor de un curso, cuyos márgenes
+     * son del tema del curso y no del armazón—. Respeta la zona segura del
+     * dispositivo.
+     */
+    contentFlush?: boolean;
     /** Estado inicial de la sidebar en escritorio (en móvil siempre arranca cerrada). */
     defaultSidebar?: SidebarState;
     /** Estado controlado de la sidebar en escritorio. */
@@ -51,4 +59,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({ banner, header, sidebar, children, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppShell({ banner, header, sidebar, children, contentFlush, defaultSidebar, sidebarState, onSidebarChange, defaultSidebarWidth, onSidebarWidthChange, skipLabel, }: AppShellProps): 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__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{--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)}

package/dist/app-shell.js

@@ -17,63 +17,63 @@ function p() {
 		return n(), e.addEventListener("change", n), () => e.removeEventListener("change", n);
 	}, []), e;
 }
-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]);
+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 (C || !E) return;
+		if (w || !D) return;
 		let e = (e) => {
-			e.key === "Escape" && D(!1);
+			e.key === "Escape" && O(!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;
 		};
-	}, [C, E]);
-	let F = c(() => ({
-		sidebar: A,
-		setSidebar: j,
-		sidebarWidth: O ?? 0,
-		setSidebarWidth: P,
-		toggleSidebar: M,
-		closeSidebar: N,
-		isDesktop: C
+	}, [w, D]);
+	let I = c(() => ({
+		sidebar: j,
+		setSidebar: M,
+		sidebarWidth: k ?? 0,
+		setSidebarWidth: F,
+		toggleSidebar: N,
+		closeSidebar: P,
+		isDesktop: w
 	}), [
-		A,
 		j,
-		O,
-		P,
 		M,
+		k,
+		F,
 		N,
-		C
-	]), [I, L] = l(0), R = o((e) => {
+		P,
+		w
+	]), [L, R] = l(0), z = o((e) => {
 		if (!e) return;
-		let t = () => L(e.getBoundingClientRect().height);
+		let t = () => R(e.getBoundingClientRect().height);
 		if (t(), typeof ResizeObserver > "u") return;
 		let n = new ResizeObserver(t);
 		return n.observe(e), () => {
-			n.disconnect(), L(0);
+			n.disconnect(), R(0);
 		};
-	}, []), z = n({
-		"--app-shell-sidebar-width": O ? `${O}px` : void 0,
-		"--app-shell-banner-height": i ? `${I}px` : void 0
-	}), B = !C && E;
+	}, []), 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: F,
+		value: I,
 		children: /* @__PURE__ */ d(r, { children: [/* @__PURE__ */ u(t, {
 			href: "#main-content",
-			children: S("skipToContent", x)
+			children: C("skipToContent", S)
 		}), /* @__PURE__ */ d("div", {
-			ref: z,
+			ref: B,
 			className: "app-shell",
-			"data-sidebar": A,
+			"data-sidebar": j,
 			children: [
 				i && /* @__PURE__ */ u("div", {
-					ref: R,
+					ref: z,
 					className: "app-shell__banner",
 					children: i
 				}),
@@ -82,16 +82,16 @@ function m({ banner: i, header: f, sidebar: m, children: h, defaultSidebar: g =
 					className: "app-shell__body",
 					children: [
 						m,
-						B && /* @__PURE__ */ u("div", {
+						V && /* @__PURE__ */ u("div", {
 							className: "app-shell__backdrop",
-							onClick: N,
+							onClick: P,
 							"aria-hidden": "true"
 						}),
 						/* @__PURE__ */ u("main", {
 							id: "main-content",
 							tabIndex: -1,
-							className: "app-shell__content",
-							inert: B || void 0,
+							className: g ? "app-shell__content app-shell__content--flush" : "app-shell__content",
+							inert: V || void 0,
 							children: h
 						})
 					]