@aurea-uds/react 0.59.0 → 0.62.0

package/dist/code-editor.js

@@ -38,7 +38,7 @@ import { cx, useAureaStrings } from "./internal.js";
 // CodeEditor (e o CodeMirror) somem quando não usados. Split por subpath = decisão do Victor.
 export const aureaEditorTheme = /*@__PURE__*/ EditorView.theme({
     "&": { backgroundColor: "var(--surface-inset)", color: "var(--foreground)", border: "var(--border-width) solid transparent", borderRadius: "var(--radius-lg)", fontSize: "var(--text-xs)" },
-    "&.cm-focused": { outline: "2px solid var(--focus-strong)", outlineOffset: "-2px" },
+    "&.cm-focused": { outline: "var(--focus-width) solid var(--focus-strong)", outlineOffset: "calc(-1 * var(--focus-width))" },
     ".cm-scroller": { fontFamily: "var(--font-code)", lineHeight: "var(--leading-relaxed)", borderRadius: "inherit" },
     ".cm-content": { caretColor: "var(--foreground)", padding: "var(--space-2) 0" },
     ".cm-line": { padding: "0 var(--space-3)" },

package/dist/disclosure.js

@@ -17,7 +17,12 @@ import { Icon } from "./system.js";
 export function Accordion({ items, variant = "default", multiple = false, defaultValue, indicator = "chevron", size = "md", orientation = "vertical", className }) {
     const grupo = React.useId();
     const deLado = orientation === "horizontal";
-    const lista = _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", deLado && "accordion-horizontal", !deLado && className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple && !deLado ? undefined : grupo, open: defaultValue?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault()
+    // DE LADO, SEMPRE HÁ UM À VISTA também na abertura (06/11/2026, a D4 da auditoria externa — decisão do Victor, "Abrir o
+    // primeiro"): sem `defaultValue`, o horizontal nascia com tudo fechado, só as tiras em pé e nenhuma área de conteúdo. Agora
+    // nasce com o primeiro item que não está desligado. A referência não tem o horizontal; o de pé continua como o dela,
+    // fechado.
+    const abertos = defaultValue ?? (deLado ? [items.find(i => !i.disabled)?.id].filter(Boolean) : undefined);
+    const lista = _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", deLado && "accordion-horizontal", !deLado && className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple && !deLado ? undefined : grupo, open: abertos?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault()
                         : deLado ? (e) => { if (e.currentTarget.parentElement.open)
                             e.preventDefault(); } : undefined, children: [_jsx("span", { className: "accordion-title", children: i.title }), _jsx("span", { className: "accordion-chevron", "aria-hidden": "true" })] }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) });
     return deLado ? _jsx("div", { className: cx("accordion-horizontal-frame", className), children: lista }) : lista;

package/dist/layout-client.js

@@ -112,9 +112,9 @@ function useGavetaFechaNoDesktop(docs = false) {
             }
             catch { /* motor sem popover */ }
         };
-        const pares = [[window.matchMedia(`(min-width: ${docs ? ESCALA.md : ESCALA.lg}px)`), fechar(SHELL_NAV_ID)]];
+        const pares = [[window.matchMedia(`(min-width: ${(docs ? ESCALA.md : ESCALA.lg) / 16}em)`), fechar(SHELL_NAV_ID)]];
         if (docs)
-            pares.push([window.matchMedia(`(min-width: ${ESCALA.xl}px)`), fechar(SHELL_TOC_ID)]);
+            pares.push([window.matchMedia(`(min-width: ${ESCALA.xl / 16}em)`), fechar(SHELL_TOC_ID)]);
         for (const [mq, f] of pares)
             mq.addEventListener?.("change", f);
         return () => { for (const [mq, f] of pares)
@@ -142,7 +142,9 @@ function useGavetaFechaNoDesktop(docs = false) {
 //
 // Tudo LIGADO por `sidebarCollapsible`: sem ele o shell é o de antes, e quem já usa
 // `sidebarCollapsed` com o próprio botão não ganha um segundo.
-const MEDIA_MEDIA = `(min-width: ${ESCALA.lg}px) and (max-width: ${ESCALA.xl - 1}px)`;
+// Em `em`, como o CSS (06/11/2026, o texto a 200%): `em` numa consulta de mídia é a fonte que a pessoa escolheu no
+// navegador — com a fonte em dobro, a tela "encolhe" para a metade, e o JS tem de concordar com o CSS.
+const MEDIA_MEDIA = `(min-width: ${ESCALA.lg / 16}em) and (max-width: ${(ESCALA.xl - 1) / 16}em)`;
 const MEDIA_ESTREITA = `(max-width: ${ESCALA.lg - 1}px)`;
 // A largura pela API do navegador, e não por `resize`: o `useSyncExternalStore` dá a resposta certa
 // já no primeiro desenho do lado do cliente, e no servidor (sem janela) diz "não" — a folha cuida da

package/dist/markup.js

@@ -219,7 +219,9 @@ export function MediaPlayerShell({ children, className, ...props }) { return _js
 // O item da barra e o do painel são o MESMO elemento com a mesma pele: o atual é o atual nos dois.
 function linksDoHeader(items, current) {
     return _jsx("ul", { className: "topbar-links", children: items.map(it => {
-            const p = { className: "topbar-link", "aria-current": it.id === current ? "page" : undefined, children: it.label };
+            // O `onClick` do item vale aqui também (06/11/2026): a `Sidebar` o liga e o `Header` o jogava fora — o mesmo `SidebarItem`
+            // fazia coisas diferentes nas duas peças. Não é hook: é a prop do `<a>`, que a marcação pura pode passar.
+            const p = { className: "topbar-link", "aria-current": it.id === current ? "page" : undefined, onClick: it.onClick, children: it.label };
             return _jsx("li", { children: it.render ? fundirRender(it.render, p, "a") : _jsx("a", { href: it.href, ...p }) }, it.id);
         }) });
 }

package/dist/media-client.js

@@ -103,6 +103,10 @@ export function MediaPlayer({ kind = "video", src, poster, title, subtitle, clas
                             setCurrent(el.currentTime); onTimeUpdate?.(e); }, onLoadedMetadata: (e) => { onMeta(); onLoadedMetadata?.(e); }, onDurationChange: (e) => { const el = m(); if (el)
                             setDuration(el.duration); onDurationChange?.(e); }, onProgress: (e) => { syncBuf(); onProgress?.(e); }, onVolumeChange: (e) => { syncVol(); onVolumeChange?.(e); }, children: children })] }), kind === "video" && title && _jsx("div", { className: "media-overlay-title", children: _jsxs("div", { children: [_jsx("strong", { children: title }), subtitle && _jsx("span", { children: subtitle })] }) }), _jsxs("div", { className: "media-controls", children: [_jsxs("div", { className: "media-seek", style: { "--media-played": `${playedPct}%` }, children: [_jsxs("div", { className: "media-seek-track", children: [_jsx("span", { className: "media-seek-buffered", style: { width: `${bufferedPct}%` } }), _jsx("span", { className: "media-seek-played" })] }), _jsx("input", { type: "range", min: 0, max: duration > 0 ? duration : 0, step: "any", value: Math.min(current, duration || 0), "aria-label": s.mediaSeek, "aria-valuetext": valueText, onChange: e => seek(Number(e.target.value)) })] }), _jsxs("div", { className: "media-control-row", children: [_jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": playing ? s.mediaPause : s.mediaPlay, onClick: togglePlay, children: _jsx(Icon, { name: playing ? "pause" : "play" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipBack, onClick: () => skip(-10), children: _jsx(Icon, { name: "clock-counter-clockwise" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipForward, onClick: () => skip(10), children: _jsx(Icon, { name: "clock-clockwise" }) }), _jsxs("span", { className: "media-time", children: [clockTime(current), " / ", clockTime(duration)] })] }), _jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": muted ? s.mediaUnmute : s.mediaMute, onClick: toggleMute, children: _jsx(Icon, { name: muted || volume === 0 ? "speaker-slash" : "speaker-high" }) }), _jsx("input", { className: "media-volume", type: "range", min: 0, max: 100, value: volPct, "aria-label": s.mediaVolume, "aria-valuetext": `${volPct}%`, onChange: e => setVol(Number(e.target.value) / 100) }), hasCaptions && _jsx("button", { className: cx("media-control", captionsOn && "active"), type: "button", "aria-label": captionsOn ? s.mediaCaptionsHide : s.mediaCaptionsShow, "aria-pressed": captionsOn, onClick: toggleCaptions, children: _jsx(Icon, { name: "closed-captioning" }) }), kind === "video" && _jsx("button", { className: "media-control", type: "button", "aria-label": fullscreen ? s.mediaFullscreenExit : s.mediaFullscreenEnter, onClick: toggleFullscreen, children: _jsx(Icon, { name: fullscreen ? "arrows-in" : "arrows-out" }) })] })] })] })] });
 }
+// SÓ `https:` (06/11/2026, a D5 da auditoria externa — decisão do Victor): a moldura aceitava qualquer endereço, sem
+// `sandbox` — não rouba nada da página (medido: o `data:` roda isolado), mas pode mostrar conteúdo falso. Sem `https:`, a
+// moldura fica vazia e o link de origem não aparece.
+const soHttps = (u) => !!u && /^https:\/\//i.test(u.trim());
 function comAutoplay(src) { try {
     const u = new URL(src);
     u.searchParams.set("autoplay", "1");
@@ -119,9 +123,9 @@ export function MediaEmbed({ src, title, poster, ratio = "16/9", href, autoplay
     React.useEffect(() => { if (clicou)
         frameRef.current?.focus(); }, [clicou]);
     const endereco = clicou && autoplay ? comAutoplay(src) : src;
-    return _jsxs("div", { className: cx("media-embed", className), style: style, children: [_jsx("div", { className: "media-embed-frame", style: { aspectRatio: ratio }, children: ativo
+    return _jsxs("div", { className: cx("media-embed", className), style: style, children: [_jsx("div", { className: "media-embed-frame", style: { aspectRatio: ratio }, children: !soHttps(src) ? null : ativo
                     ? _jsx("iframe", { ref: frameRef, src: endereco, title: title, loading: "lazy", referrerPolicy: "strict-origin-when-cross-origin", allow: "autoplay; encrypted-media; fullscreen; picture-in-picture", allowFullScreen: true, ...rest })
-                    : _jsxs("button", { type: "button", className: "media-embed-facade", "aria-label": `${s.mediaPlay}: ${title}`, onClick: () => { setAtivo(true); setClicou(true); }, children: [_jsx("img", { src: poster, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: "media-embed-play", "aria-hidden": "true", children: _jsx(Icon, { name: "play-circle", weight: "fill" }) })] }) }), href && _jsxs("a", { className: "media-embed-link", href: href, target: "_blank", rel: "noopener", children: [_jsx(Icon, { name: "arrow-square-out" }), s.mediaEmbedOpen] })] });
+                    : _jsxs("button", { type: "button", className: "media-embed-facade", "aria-label": `${s.mediaPlay}: ${title}`, onClick: () => { setAtivo(true); setClicou(true); }, children: [_jsx("img", { src: poster, alt: "", loading: "lazy", decoding: "async" }), _jsx("span", { className: "media-embed-play", "aria-hidden": "true", children: _jsx(Icon, { name: "play-circle", weight: "fill" }) })] }) }), soHttps(href) && _jsxs("a", { className: "media-embed-link", href: href, target: "_blank", rel: "noopener", children: [_jsx(Icon, { name: "arrow-square-out" }), s.mediaEmbedOpen] })] });
 }
 export function Image({ ratio, fit, alt, className, style, render, onError, frame, srcDark, ...props }) {
     const [quebrou, setQuebrou] = React.useState(false);

package/dist/responsivo-runtime.js

@@ -58,7 +58,8 @@ export function ContainerScope({ children, className, ...props }) {
 const temMatchMedia = () => typeof window !== "undefined" && typeof window.matchMedia === "function";
 const mqls = new Map();
 const mql = (px) => {
-    const q = `(min-width:${px}px)`;
+    // em `em`, como o CSS gerado (06/11/2026): a fonte que a pessoa escolheu no navegador entra na conta
+    const q = `(min-width:${px / 16}em)`;
     let m = mqls.get(q);
     if (!m) {
         m = window.matchMedia(q);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.59.0",
+  "version": "0.62.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",