@12-apps/ui 6.24.3 → 6.24.4

package/dist/_internal/components/index.js

@@ -88,7 +88,7 @@ import {
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../../chunk-W2YNUUVJ.js";
+} from "../../chunk-TU6RNZUQ.js";
 import {
   AppHeaderBrand
 } from "../../chunk-H37GIAAM.js";

package/dist/_internal/components/navigation/AppHeader/AppHeader.identity.js

@@ -2,7 +2,7 @@
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../../../../chunk-W2YNUUVJ.js";
+} from "../../../../chunk-TU6RNZUQ.js";
 import "../../../../chunk-H37GIAAM.js";
 import "../../../../chunk-IQU4HKND.js";
 import "../../../../chunk-V5IOLAIS.js";

package/dist/_internal/components/navigation/index.js

@@ -12,7 +12,7 @@ import {
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../../../chunk-W2YNUUVJ.js";
+} from "../../../chunk-TU6RNZUQ.js";
 import {
   AppHeaderBrand
 } from "../../../chunk-H37GIAAM.js";

package/dist/{chunk-W2YNUUVJ.js → chunk-TU6RNZUQ.js}

@@ -68,35 +68,95 @@ var AppHeaderStatus = ({
   );
 };
 AppHeaderStatus.displayName = "AppHeaderStatus";
-var IdentityText = ({ title, subtitle, status, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
-  /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0 }, children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        component: "span",
-        "data-testid": `${dataTestId}-title`,
-        sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
-        children: title
+var IdentityTitle = ({ title, size = "md", interactive, disclosed, dataTestId }) => /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 0.25, minWidth: 0, width: "100%" }, children: [
+  /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      "data-testid": `${dataTestId}-title`,
+      sx: { fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE },
+      children: title
+    }
+  ),
+  interactive && /* @__PURE__ */ jsx(
+    KeyboardArrowDown,
+    {
+      "aria-hidden": true,
+      "data-testid": `${dataTestId}-chevron`,
+      sx: {
+        flex: "0 0 auto",
+        fontSize: 20,
+        opacity: 0.7,
+        transition: "transform 150ms ease",
+        transform: disclosed ? "rotate(180deg)" : "none"
       }
-    ),
-    interactive && /* @__PURE__ */ jsx(
-      KeyboardArrowDown,
+    }
+  )
+] });
+var discloseSx = {
+  display: "flex",
+  alignItems: "center",
+  gap: 0.25,
+  width: "100%",
+  minWidth: 0,
+  appearance: "none",
+  px: 0.5,
+  mx: -0.5,
+  py: 0.25,
+  my: -0.25,
+  border: "none",
+  borderRadius: 1.5,
+  background: "none",
+  color: "inherit",
+  font: "inherit",
+  textAlign: "left",
+  cursor: "pointer",
+  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
+  // opened the panel, so the row stays highlighted behind it.
+  "@media (hover: hover)": { "&:hover": { backgroundColor: "action.hover" } },
+  "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
+};
+var IdentityText = ({
+  title,
+  subtitle,
+  status,
+  size = "md",
+  onDisclose,
+  disclosed,
+  discloseLabel,
+  className,
+  dataTestId
+}) => {
+  const name = /* @__PURE__ */ jsx(
+    IdentityTitle,
+    {
+      title,
+      size,
+      interactive: Boolean(onDisclose),
+      disclosed,
+      dataTestId
+    }
+  );
+  return /* @__PURE__ */ jsxs(Box, { sx: { minWidth: 0, flex: 1, display: "flex", flexDirection: "column", gap: 0.25 }, children: [
+    onDisclose ? /* @__PURE__ */ jsx(
+      Box,
       {
-        "aria-hidden": true,
-        "data-testid": `${dataTestId}-chevron`,
-        sx: {
-          flex: "0 0 auto",
-          fontSize: 20,
-          opacity: 0.7,
-          transition: "transform 150ms ease",
-          transform: disclosed ? "rotate(180deg)" : "none"
-        }
+        component: "button",
+        type: "button",
+        className,
+        "data-testid": dataTestId,
+        onClick: onDisclose,
+        "aria-haspopup": "dialog",
+        "aria-expanded": disclosed,
+        "aria-label": discloseLabel ?? `Detalhes de ${title}`,
+        sx: discloseSx,
+        children: name
       }
-    )
-  ] }),
-  subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
-  status
-] });
+    ) : name,
+    subtitle && /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", component: "span", sx: ONE_LINE, children: subtitle }),
+    status
+  ] });
+};
 var IdentitySkeleton = ({
   size,
   dataTestId
@@ -138,59 +198,38 @@ var AppHeaderIdentity = ({
   dataTestId = "app-header-identity"
 }) => {
   if (loading) return /* @__PURE__ */ jsx(IdentitySkeleton, { size, dataTestId });
-  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
-    mark ?? /* @__PURE__ */ jsx(
-      AppHeaderBrand,
-      {
-        name: title,
-        logoUrl,
-        seedColor,
-        size,
-        dataTestId: `${dataTestId}-brand`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      IdentityText,
-      {
-        title,
-        subtitle,
-        status,
-        size,
-        interactive: Boolean(onDisclose),
-        disclosed,
-        dataTestId
-      }
-    )
-  ] });
-  if (!onDisclose) {
-    return /* @__PURE__ */ jsx(Box, { className, "data-testid": dataTestId, sx: rowSx, children: body });
-  }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
-      component: "button",
-      type: "button",
-      className,
-      "data-testid": dataTestId,
-      onClick: onDisclose,
-      "aria-haspopup": "dialog",
-      "aria-expanded": disclosed,
-      "aria-label": discloseLabel ?? `Detalhes de ${title}`,
-      sx: {
-        ...rowSx,
-        appearance: "none",
-        p: 0.5,
-        ml: -0.5,
-        border: "none",
-        borderRadius: 1.5,
-        background: "none",
-        color: "inherit",
-        font: "inherit",
-        cursor: "pointer",
-        "&:hover": { backgroundColor: "action.hover" },
-        "&:focus-visible": { outline: "2px solid", outlineColor: "primary.main", outlineOffset: 2 }
-      },
-      children: body
+      className: onDisclose ? void 0 : className,
+      "data-testid": onDisclose ? void 0 : dataTestId,
+      sx: rowSx,
+      children: [
+        mark ?? /* @__PURE__ */ jsx(
+          AppHeaderBrand,
+          {
+            name: title,
+            logoUrl,
+            seedColor,
+            size,
+            dataTestId: `${dataTestId}-brand`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          IdentityText,
+          {
+            title,
+            subtitle,
+            status,
+            size,
+            onDisclose,
+            disclosed,
+            discloseLabel,
+            className,
+            dataTestId
+          }
+        )
+      ]
     }
   );
 };
@@ -200,4 +239,4 @@ export {
   AppHeaderStatus,
   AppHeaderIdentity
 };
-//# sourceMappingURL=chunk-W2YNUUVJ.js.map
+//# sourceMappingURL=chunk-TU6RNZUQ.js.map

package/dist/chunk-TU6RNZUQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: 8,\n            height: 8,\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** The name and, when the block opens onto something, the chevron beside it. */\nconst IdentityTitle: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0, width: '100%' }}>\n    <Typography\n      component=\"span\"\n      data-testid={`${dataTestId}-title`}\n      sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n    >\n      {title}\n    </Typography>\n    {interactive && (\n      <KeyboardArrowDown\n        aria-hidden\n        data-testid={`${dataTestId}-chevron`}\n        sx={{\n          flex: '0 0 auto',\n          fontSize: 20,\n          opacity: 0.7,\n          transition: 'transform 150ms ease',\n          transform: disclosed ? 'rotate(180deg)' : 'none',\n        }}\n      />\n    )}\n  </Box>\n);\n\n/**\n * The disclosure, wrapping the NAME ROW and nothing else (12-63).\n *\n * The padding is cancelled by an equal negative margin, so the hover and the\n * focus ring bleed outward while the title still starts on the same pixel as\n * the lines under it. A padded button with no offset moves one of the two.\n */\nconst discloseSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 0.25,\n  width: '100%',\n  minWidth: 0,\n  appearance: 'none',\n  px: 0.5,\n  mx: -0.5,\n  py: 0.25,\n  my: -0.25,\n  border: 'none',\n  borderRadius: 1.5,\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit',\n  textAlign: 'left',\n  cursor: 'pointer',\n  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that\n  // opened the panel, so the row stays highlighted behind it.\n  '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },\n  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\n} as const;\n\n/**\n * The text column: the name row, then the quieter lines under it.\n *\n * ## `subtitle` and `status` are OUTSIDE the disclosure, on purpose (12-63)\n *\n * Both are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]` — so a\n * segment of the state line is free to be a control, and consumers put controls\n * there: a mesa chip, a service-mode picker. While the whole block was one\n * `<button>` those were `<button>`s inside a `<button>`, which is invalid HTML\n * (the content model of `button` excludes interactive content) and, more\n * visibly, means one tap fires two handlers. An adopting storefront opened two\n * popups on every tap of either control because of it, and had already\n * hand-rolled this component at one tier to dodge the nesting — a consumer\n * working around the component is the report.\n *\n * The target stays large. The button is the full-width NAME ROW, which is the\n * thing a reader aims at — what it gives up is the mark beside it, and a mark\n * that opens the panel is not worth a state line that cannot hold a control.\n */\nconst IdentityText: React.FC<\n  Pick<\n    AppHeaderIdentityProps,\n    'title' | 'subtitle' | 'status' | 'size' | 'discloseLabel' | 'className'\n  > & {\n    onDisclose: (() => void) | undefined;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({\n  title,\n  subtitle,\n  status,\n  size = 'md',\n  onDisclose,\n  disclosed,\n  discloseLabel,\n  className,\n  dataTestId,\n}) => {\n  const name = (\n    <IdentityTitle\n      title={title}\n      size={size}\n      interactive={Boolean(onDisclose)}\n      disclosed={disclosed}\n      dataTestId={dataTestId}\n    />\n  );\n  return (\n    <Box sx={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n      {onDisclose ? (\n        <Box\n          component=\"button\"\n          type=\"button\"\n          className={className}\n          data-testid={dataTestId}\n          onClick={onDisclose}\n          aria-haspopup=\"dialog\"\n          aria-expanded={disclosed}\n          aria-label={discloseLabel ?? `Detalhes de ${title}`}\n          sx={discloseSx}\n        >\n          {name}\n        </Box>\n      ) : (\n        name\n      )}\n      {subtitle && (\n        <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n          {subtitle}\n        </Typography>\n      )}\n      {status}\n    </Box>\n  );\n};\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => (\n  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\n);\n\n/**\n * The BLOCK's row: the mark, then the text column beside it.\n *\n * Always a `Box` div now — since 12-63 the disclosure is the name row inside\n * the text column ({@link discloseSx}), not this element. `width: '100%'` and\n * `minWidth: 0` stay because the column below still has to ellipsise against\n * something; the argument about a `<button>` sizing to max-content moved to\n * `discloseSx`, which is where the button now is.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — a name row that is\n * the button.\n *\n * The disclosure used to wrap EVERYTHING, on the argument that the chevron\n * alone is a 20px target next to a 40px mark that does nothing. The target is\n * still not the chevron: the button is the full-width NAME ROW, which is what a\n * reader aims at. What it no longer swallows is the mark beside it and the\n * quieter lines below — because those lines take `ReactNode`s, consumers put\n * CONTROLS in them, and a control inside a button is invalid HTML whose every\n * tap fires two handlers. See {@link IdentityText} (12-63).\n *\n * `className` and `dataTestId` stay on the same elements they always named: the\n * block when it is static, the disclosure when there is one.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  return (\n    <Box\n      className={onDisclose ? undefined : className}\n      data-testid={onDisclose ? undefined : dataTestId}\n      sx={rowSx}\n    >\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        onDisclose={onDisclose}\n        disclosed={disclosed}\n        discloseLabel={discloseLabel}\n        className={className}\n        dataTestId={dataTestId}\n      />\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":[]}

package/dist/navigation/AppHeader.js

@@ -6,7 +6,7 @@ import {
 import {
   AppHeaderIdentity,
   AppHeaderStatus
-} from "../chunk-W2YNUUVJ.js";
+} from "../chunk-TU6RNZUQ.js";
 import {
   AppHeaderBrand
 } from "../chunk-H37GIAAM.js";

package/dist/types/components/navigation/AppHeader/AppHeader.identity.d.ts

@@ -9,12 +9,19 @@ import type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.t
  */
 export declare const AppHeaderStatus: React.FC<AppHeaderStatusProps>;
 /**
- * Mark + title + state line, and — when it can be opened — the whole block as
- * one button.
+ * Mark + title + state line, and — when it can be opened — a name row that is
+ * the button.
  *
- * The button wraps EVERYTHING rather than sitting next to the title, because on
- * a phone the chevron alone is a 20px target next to a 40px one that does
- * nothing. A shopper aiming at the store's name expects the store's details.
+ * The disclosure used to wrap EVERYTHING, on the argument that the chevron
+ * alone is a 20px target next to a 40px mark that does nothing. The target is
+ * still not the chevron: the button is the full-width NAME ROW, which is what a
+ * reader aims at. What it no longer swallows is the mark beside it and the
+ * quieter lines below — because those lines take `ReactNode`s, consumers put
+ * CONTROLS in them, and a control inside a button is invalid HTML whose every
+ * tap fires two handlers. See {@link IdentityText} (12-63).
+ *
+ * `className` and `dataTestId` stay on the same elements they always named: the
+ * block when it is static, the disclosure when there is one.
  */
 export declare const AppHeaderIdentity: React.FC<AppHeaderIdentityProps>;
 //# sourceMappingURL=AppHeader.identity.d.ts.map

package/dist/types/components/navigation/AppHeader/AppHeader.identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.identity.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAatF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqD1D,CAAC;AAkFF;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4E9D,CAAC"}
+{"version":3,"file":"AppHeader.identity.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAatF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqD1D,CAAC;AAmLF;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6C9D,CAAC"}

package/dist/types/components/navigation/AppHeader/AppHeader.types.d.ts

@@ -56,19 +56,27 @@ export interface AppHeaderStatusProps {
  * the consumer's own router in the `leading` slot, whereas an `href` prop would
  * have to guess whose link component it is being handed — `to` for one router,
  * `href` for another — and would half-work for everybody. `onDisclose` is the
- * only interaction the block owns: with it the block is a button and a chevron
- * appears, without it the block is static text.
+ * only interaction the block owns: with it the NAME ROW is a button and a
+ * chevron appears, without it the row is static text.
+ *
+ * The button stops at that row (12-63). `status` and `subtitle` render as its
+ * SIBLINGS, so a consumer may put controls in the state line — which they do,
+ * and which used to nest a `<button>` inside a `<button>`.
  */
 export interface AppHeaderIdentityProps extends Pick<AppHeaderBrandProps, 'logoUrl' | 'seedColor'> {
     /** The name shown, and the one the mark derives its initials from. */
     title: string;
-    /** A quieter line under the title — use `status` for the dotted state line. */
+    /**
+     * A quieter line under the title — use `status` for the dotted state line.
+     *
+     * Rendered OUTSIDE the disclosure, like `status`, so it may hold a control.
+     */
     subtitle?: ReactNode;
     /** The state line, usually an {@link AppHeaderStatusProps} element. */
     status?: ReactNode;
     /** Replaces the derived mark entirely (an icon, an `<img>`, nothing). */
     mark?: ReactNode;
-    /** Opens the details panel. Renders the block as a button with a chevron. */
+    /** Opens the details panel. Renders the NAME ROW as a button with a chevron. */
     onDisclose?: () => void;
     /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
     disclosed?: boolean;

package/dist/types/components/navigation/AppHeader/AppHeader.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AppHeader.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/AppHeader/AppHeader.types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.24.3",
+  "version": "6.24.4",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/navigation/AppHeader/AppHeader.identity.tsx

@@ -87,46 +87,146 @@ export const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({
 
 AppHeaderStatus.displayName = 'AppHeaderStatus';
 
-/** Title + chevron + the quieter lines under them. */
-const IdentityText: React.FC<
-  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {
+/** The name and, when the block opens onto something, the chevron beside it. */
+const IdentityTitle: React.FC<
+  Pick<AppHeaderIdentityProps, 'title' | 'size'> & {
     interactive: boolean;
     disclosed: boolean;
     dataTestId: string;
   }
-> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (
-  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>
-      <Typography
-        component="span"
-        data-testid={`${dataTestId}-title`}
-        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
-      >
-        {title}
-      </Typography>
-      {interactive && (
-        <KeyboardArrowDown
-          aria-hidden
-          data-testid={`${dataTestId}-chevron`}
-          sx={{
-            flex: '0 0 auto',
-            fontSize: 20,
-            opacity: 0.7,
-            transition: 'transform 150ms ease',
-            transform: disclosed ? 'rotate(180deg)' : 'none',
-          }}
-        />
-      )}
-    </Box>
-    {subtitle && (
-      <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
-        {subtitle}
-      </Typography>
+> = ({ title, size = 'md', interactive, disclosed, dataTestId }) => (
+  <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0, width: '100%' }}>
+    <Typography
+      component="span"
+      data-testid={`${dataTestId}-title`}
+      sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}
+    >
+      {title}
+    </Typography>
+    {interactive && (
+      <KeyboardArrowDown
+        aria-hidden
+        data-testid={`${dataTestId}-chevron`}
+        sx={{
+          flex: '0 0 auto',
+          fontSize: 20,
+          opacity: 0.7,
+          transition: 'transform 150ms ease',
+          transform: disclosed ? 'rotate(180deg)' : 'none',
+        }}
+      />
     )}
-    {status}
   </Box>
 );
 
+/**
+ * The disclosure, wrapping the NAME ROW and nothing else (12-63).
+ *
+ * The padding is cancelled by an equal negative margin, so the hover and the
+ * focus ring bleed outward while the title still starts on the same pixel as
+ * the lines under it. A padded button with no offset moves one of the two.
+ */
+const discloseSx = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 0.25,
+  width: '100%',
+  minWidth: 0,
+  appearance: 'none',
+  px: 0.5,
+  mx: -0.5,
+  py: 0.25,
+  my: -0.25,
+  border: 'none',
+  borderRadius: 1.5,
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  textAlign: 'left',
+  cursor: 'pointer',
+  // Guarded: on a touch screen an unguarded `:hover` sticks after the tap that
+  // opened the panel, so the row stays highlighted behind it.
+  '@media (hover: hover)': { '&:hover': { backgroundColor: 'action.hover' } },
+  '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
+} as const;
+
+/**
+ * The text column: the name row, then the quieter lines under it.
+ *
+ * ## `subtitle` and `status` are OUTSIDE the disclosure, on purpose (12-63)
+ *
+ * Both are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]` — so a
+ * segment of the state line is free to be a control, and consumers put controls
+ * there: a mesa chip, a service-mode picker. While the whole block was one
+ * `<button>` those were `<button>`s inside a `<button>`, which is invalid HTML
+ * (the content model of `button` excludes interactive content) and, more
+ * visibly, means one tap fires two handlers. An adopting storefront opened two
+ * popups on every tap of either control because of it, and had already
+ * hand-rolled this component at one tier to dodge the nesting — a consumer
+ * working around the component is the report.
+ *
+ * The target stays large. The button is the full-width NAME ROW, which is the
+ * thing a reader aims at — what it gives up is the mark beside it, and a mark
+ * that opens the panel is not worth a state line that cannot hold a control.
+ */
+const IdentityText: React.FC<
+  Pick<
+    AppHeaderIdentityProps,
+    'title' | 'subtitle' | 'status' | 'size' | 'discloseLabel' | 'className'
+  > & {
+    onDisclose: (() => void) | undefined;
+    disclosed: boolean;
+    dataTestId: string;
+  }
+> = ({
+  title,
+  subtitle,
+  status,
+  size = 'md',
+  onDisclose,
+  disclosed,
+  discloseLabel,
+  className,
+  dataTestId,
+}) => {
+  const name = (
+    <IdentityTitle
+      title={title}
+      size={size}
+      interactive={Boolean(onDisclose)}
+      disclosed={disclosed}
+      dataTestId={dataTestId}
+    />
+  );
+  return (
+    <Box sx={{ minWidth: 0, flex: 1, display: 'flex', flexDirection: 'column', gap: 0.25 }}>
+      {onDisclose ? (
+        <Box
+          component="button"
+          type="button"
+          className={className}
+          data-testid={dataTestId}
+          onClick={onDisclose}
+          aria-haspopup="dialog"
+          aria-expanded={disclosed}
+          aria-label={discloseLabel ?? `Detalhes de ${title}`}
+          sx={discloseSx}
+        >
+          {name}
+        </Box>
+      ) : (
+        name
+      )}
+      {subtitle && (
+        <Typography variant="body2" color="text.secondary" component="span" sx={ONE_LINE}>
+          {subtitle}
+        </Typography>
+      )}
+      {status}
+    </Box>
+  );
+};
+
 /** The placeholder held while the identity is still resolving. */
 const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
   size,
@@ -145,16 +245,13 @@ const IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({
 );
 
 /**
- * Row styling shared by the static and the button rendering.
+ * The BLOCK's row: the mark, then the text column beside it.
  *
- * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to
- * max-content and — unlike the `div` the non-interactive path renders — does
- * not stretch to fill its block container, so without it the DISCLOSING
- * identity measured its widest possible line at every viewport: the row's
- * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never
- * had a constraint to ellipsise against, and the title and state line ran
- * straight under the actions — 327px of overlap at 320px wide. Filling the
- * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.
+ * Always a `Box` div now — since 12-63 the disclosure is the name row inside
+ * the text column ({@link discloseSx}), not this element. `width: '100%'` and
+ * `minWidth: 0` stay because the column below still has to ellipsise against
+ * something; the argument about a `<button>` sizing to max-content moved to
+ * `discloseSx`, which is where the button now is.
  */
 const rowSx = {
   display: 'flex',
@@ -166,12 +263,19 @@ const rowSx = {
 } as const;
 
 /**
- * Mark + title + state line, and — when it can be opened — the whole block as
- * one button.
+ * Mark + title + state line, and — when it can be opened — a name row that is
+ * the button.
  *
- * The button wraps EVERYTHING rather than sitting next to the title, because on
- * a phone the chevron alone is a 20px target next to a 40px one that does
- * nothing. A shopper aiming at the store's name expects the store's details.
+ * The disclosure used to wrap EVERYTHING, on the argument that the chevron
+ * alone is a 20px target next to a 40px mark that does nothing. The target is
+ * still not the chevron: the button is the full-width NAME ROW, which is what a
+ * reader aims at. What it no longer swallows is the mark beside it and the
+ * quieter lines below — because those lines take `ReactNode`s, consumers put
+ * CONTROLS in them, and a control inside a button is invalid HTML whose every
+ * tap fires two handlers. See {@link IdentityText} (12-63).
+ *
+ * `className` and `dataTestId` stay on the same elements they always named: the
+ * block when it is static, the disclosure when there is one.
  */
 export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
   title,
@@ -190,8 +294,12 @@ export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
 }) => {
   if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;
 
-  const body = (
-    <>
+  return (
+    <Box
+      className={onDisclose ? undefined : className}
+      data-testid={onDisclose ? undefined : dataTestId}
+      sx={rowSx}
+    >
       {mark ?? (
         <AppHeaderBrand
           name={title}
@@ -206,47 +314,12 @@ export const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({
         subtitle={subtitle}
         status={status}
         size={size}
-        interactive={Boolean(onDisclose)}
+        onDisclose={onDisclose}
         disclosed={disclosed}
+        discloseLabel={discloseLabel}
+        className={className}
         dataTestId={dataTestId}
       />
-    </>
-  );
-
-  if (!onDisclose) {
-    return (
-      <Box className={className} data-testid={dataTestId} sx={rowSx}>
-        {body}
-      </Box>
-    );
-  }
-
-  return (
-    <Box
-      component="button"
-      type="button"
-      className={className}
-      data-testid={dataTestId}
-      onClick={onDisclose}
-      aria-haspopup="dialog"
-      aria-expanded={disclosed}
-      aria-label={discloseLabel ?? `Detalhes de ${title}`}
-      sx={{
-        ...rowSx,
-        appearance: 'none',
-        p: 0.5,
-        ml: -0.5,
-        border: 'none',
-        borderRadius: 1.5,
-        background: 'none',
-        color: 'inherit',
-        font: 'inherit',
-        cursor: 'pointer',
-        '&:hover': { backgroundColor: 'action.hover' },
-        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },
-      }}
-    >
-      {body}
     </Box>
   );
 };

package/src/components/navigation/AppHeader/AppHeader.md

@@ -118,11 +118,18 @@ throwing.
 
 - The mark is `role="img"` labelled with the name, so a screen reader says
   "Future Drink" rather than spelling out "F D".
-- With `onDisclose`, the whole identity block is one `<button>` with
-  `aria-haspopup="dialog"` and a live `aria-expanded`. The button wraps
-  everything rather than sitting beside the title: on a phone the chevron alone
-  is a 20px target next to a 40px one that does nothing, and a shopper aiming at
-  the store's name expects the store's details.
+- With `onDisclose`, the identity's **name row** is a `<button>` with
+  `aria-haspopup="dialog"` and a live `aria-expanded`. It is the full-width row,
+  chevron included, rather than the chevron alone — on a phone that would be a
+  20px target next to a 40px mark that does nothing, and a reader aiming at the
+  store's name expects the store's details.
+- **`status` and `subtitle` render OUTSIDE that button, and must** (12-63). Both
+  are `ReactNode`, and `AppHeaderStatus.items` is a `ReactNode[]`, so a segment
+  of the state line is free to be a control — a mesa chip, a mode picker — and
+  consumers do exactly that. The disclosure used to wrap the whole block, which
+  made those `<button>`s inside a `<button>`: invalid HTML, and one tap firing
+  two handlers. Put controls in the state line freely; put nothing interactive
+  in `title`, which is a `string` and belongs to the button.
 - The state line separates its segments with real whitespace, not CSS margin —
   a screen reader reads `textContent`, and a margin-only gap runs "Aberto agora"
   straight into "Retirada no balcão" as one word. The separator glyph itself is

package/src/components/navigation/AppHeader/AppHeader.types.ts

@@ -62,20 +62,28 @@ export interface AppHeaderStatusProps {
  * the consumer's own router in the `leading` slot, whereas an `href` prop would
  * have to guess whose link component it is being handed — `to` for one router,
  * `href` for another — and would half-work for everybody. `onDisclose` is the
- * only interaction the block owns: with it the block is a button and a chevron
- * appears, without it the block is static text.
+ * only interaction the block owns: with it the NAME ROW is a button and a
+ * chevron appears, without it the row is static text.
+ *
+ * The button stops at that row (12-63). `status` and `subtitle` render as its
+ * SIBLINGS, so a consumer may put controls in the state line — which they do,
+ * and which used to nest a `<button>` inside a `<button>`.
  */
 export interface AppHeaderIdentityProps
   extends Pick<AppHeaderBrandProps, 'logoUrl' | 'seedColor'> {
   /** The name shown, and the one the mark derives its initials from. */
   title: string;
-  /** A quieter line under the title — use `status` for the dotted state line. */
+  /**
+   * A quieter line under the title — use `status` for the dotted state line.
+   *
+   * Rendered OUTSIDE the disclosure, like `status`, so it may hold a control.
+   */
   subtitle?: ReactNode;
   /** The state line, usually an {@link AppHeaderStatusProps} element. */
   status?: ReactNode;
   /** Replaces the derived mark entirely (an icon, an `<img>`, nothing). */
   mark?: ReactNode;
-  /** Opens the details panel. Renders the block as a button with a chevron. */
+  /** Opens the details panel. Renders the NAME ROW as a button with a chevron. */
   onDisclose?: () => void;
   /** Whether the panel `onDisclose` opens is currently open (`aria-expanded`). */
   disclosed?: boolean;

package/dist/chunk-W2YNUUVJ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navigation/AppHeader/AppHeader.identity.tsx"],"sourcesContent":["'use client';\n\nimport KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';\nimport Box from '@mui/material/Box/index.js';\nimport Skeleton from '@mui/material/Skeleton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { accentFor, type SizeValue } from '../../../tokens/scales';\n\nimport { AppHeaderBrand } from './AppHeader.brand';\nimport type { AppHeaderIdentityProps, AppHeaderStatusProps } from './AppHeader.types';\n\n/** Title type scale, per house size step. */\nconst TITLE_PX: Record<SizeValue, number> = { xs: 14, sm: 15, md: 17, lg: 20, xl: 24 };\n\n/** One line, ellipsised — a long store name must not push the actions off-screen. */\nconst ONE_LINE = {\n  minWidth: 0,\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n} as const;\n\n/**\n * The dotted state line: \"● Aberto agora · Retirada no balcão\".\n *\n * Segments are joined here rather than by the caller because the separator is a\n * presentational choice — a caller that pre-joins its own string can never be\n * restyled, and each segment loses the chance to carry its own markup.\n */\nexport const AppHeaderStatus: React.FC<AppHeaderStatusProps> = ({\n  tone,\n  items,\n  separator = '·',\n  className,\n  dataTestId = 'app-header-status',\n}) => {\n  const theme = useTheme();\n  const visible = items.filter((item) => item !== null && item !== undefined && item !== '');\n  if (visible.length === 0) return null;\n\n  return (\n    <Box\n      className={className}\n      data-testid={dataTestId}\n      sx={{ display: 'flex', alignItems: 'center', gap: 0.75, ...ONE_LINE }}\n    >\n      {tone && (\n        <Box\n          aria-hidden\n          data-testid={`${dataTestId}-dot`}\n          sx={{\n            width: 8,\n            height: 8,\n            flex: '0 0 auto',\n            borderRadius: '50%',\n            backgroundColor: accentFor(theme, tone).main,\n          }}\n        />\n      )}\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {visible.map((item, index) => (\n          // Index keys: the segments are positional presentation, and nothing\n          // here reorders or is keyed on identity elsewhere.\n          <React.Fragment key={index}>\n            {index > 0 && (\n              <>\n                {/* Real spaces, not margin. A screen reader reads `textContent`,\n                    and a CSS-only gap runs \"Aberto agora\" straight into\n                    \"Retirada no balcão\" as one word. The glyph itself is\n                    hidden — it is punctuation, not something to announce. */}\n                {' '}\n                <Box component=\"span\" aria-hidden>\n                  {separator}\n                </Box>{' '}\n              </>\n            )}\n            {item}\n          </React.Fragment>\n        ))}\n      </Typography>\n    </Box>\n  );\n};\n\nAppHeaderStatus.displayName = 'AppHeaderStatus';\n\n/** Title + chevron + the quieter lines under them. */\nconst IdentityText: React.FC<\n  Pick<AppHeaderIdentityProps, 'title' | 'subtitle' | 'status' | 'size'> & {\n    interactive: boolean;\n    disclosed: boolean;\n    dataTestId: string;\n  }\n> = ({ title, subtitle, status, size = 'md', interactive, disclosed, dataTestId }) => (\n  <Box sx={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 0.25 }}>\n    <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, minWidth: 0 }}>\n      <Typography\n        component=\"span\"\n        data-testid={`${dataTestId}-title`}\n        sx={{ fontSize: TITLE_PX[size], fontWeight: 700, lineHeight: 1.2, ...ONE_LINE }}\n      >\n        {title}\n      </Typography>\n      {interactive && (\n        <KeyboardArrowDown\n          aria-hidden\n          data-testid={`${dataTestId}-chevron`}\n          sx={{\n            flex: '0 0 auto',\n            fontSize: 20,\n            opacity: 0.7,\n            transition: 'transform 150ms ease',\n            transform: disclosed ? 'rotate(180deg)' : 'none',\n          }}\n        />\n      )}\n    </Box>\n    {subtitle && (\n      <Typography variant=\"body2\" color=\"text.secondary\" component=\"span\" sx={ONE_LINE}>\n        {subtitle}\n      </Typography>\n    )}\n    {status}\n  </Box>\n);\n\n/** The placeholder held while the identity is still resolving. */\nconst IdentitySkeleton: React.FC<{ size: SizeValue; dataTestId: string }> = ({\n  size,\n  dataTestId,\n}) => (\n  <Box\n    data-testid={`${dataTestId}-loading`}\n    sx={{ display: 'flex', alignItems: 'center', gap: 1.25, minWidth: 0 }}\n  >\n    <Skeleton variant=\"rounded\" width={40} height={40} sx={{ flex: '0 0 auto' }} />\n    <Box sx={{ minWidth: 0, flex: 1 }}>\n      <Skeleton variant=\"text\" width={140} height={TITLE_PX[size] * 1.4} />\n      <Skeleton variant=\"text\" width={180} height={16} />\n    </Box>\n  </Box>\n);\n\n/**\n * Row styling shared by the static and the button rendering.\n *\n * `width: '100%'` is load-bearing, not cosmetic. A `<button>` sizes to\n * max-content and — unlike the `div` the non-interactive path renders — does\n * not stretch to fill its block container, so without it the DISCLOSING\n * identity measured its widest possible line at every viewport: the row's\n * right edge stayed pinned at 564px while the bar narrowed, `ONE_LINE` never\n * had a constraint to ellipsise against, and the title and state line ran\n * straight under the actions — 327px of overlap at 320px wide. Filling the\n * wrapper is what lets `minWidth: 0` bite and the ellipsis engage.\n */\nconst rowSx = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1.25,\n  width: '100%',\n  minWidth: 0,\n  textAlign: 'left',\n} as const;\n\n/**\n * Mark + title + state line, and — when it can be opened — the whole block as\n * one button.\n *\n * The button wraps EVERYTHING rather than sitting next to the title, because on\n * a phone the chevron alone is a 20px target next to a 40px one that does\n * nothing. A shopper aiming at the store's name expects the store's details.\n */\nexport const AppHeaderIdentity: React.FC<AppHeaderIdentityProps> = ({\n  title,\n  subtitle,\n  status,\n  mark,\n  logoUrl,\n  seedColor,\n  onDisclose,\n  disclosed = false,\n  discloseLabel,\n  loading = false,\n  size = 'md',\n  className,\n  dataTestId = 'app-header-identity',\n}) => {\n  if (loading) return <IdentitySkeleton size={size} dataTestId={dataTestId} />;\n\n  const body = (\n    <>\n      {mark ?? (\n        <AppHeaderBrand\n          name={title}\n          logoUrl={logoUrl}\n          seedColor={seedColor}\n          size={size}\n          dataTestId={`${dataTestId}-brand`}\n        />\n      )}\n      <IdentityText\n        title={title}\n        subtitle={subtitle}\n        status={status}\n        size={size}\n        interactive={Boolean(onDisclose)}\n        disclosed={disclosed}\n        dataTestId={dataTestId}\n      />\n    </>\n  );\n\n  if (!onDisclose) {\n    return (\n      <Box className={className} data-testid={dataTestId} sx={rowSx}>\n        {body}\n      </Box>\n    );\n  }\n\n  return (\n    <Box\n      component=\"button\"\n      type=\"button\"\n      className={className}\n      data-testid={dataTestId}\n      onClick={onDisclose}\n      aria-haspopup=\"dialog\"\n      aria-expanded={disclosed}\n      aria-label={discloseLabel ?? `Detalhes de ${title}`}\n      sx={{\n        ...rowSx,\n        appearance: 'none',\n        p: 0.5,\n        ml: -0.5,\n        border: 'none',\n        borderRadius: 1.5,\n        background: 'none',\n        color: 'inherit',\n        font: 'inherit',\n        cursor: 'pointer',\n        '&:hover': { backgroundColor: 'action.hover' },\n        '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: 2 },\n      }}\n    >\n      {body}\n    </Box>\n  );\n};\n\nAppHeaderIdentity.displayName = 'AppHeaderIdentity';\n"],"mappings":"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","names":[]}