@12-apps/ui 6.50.0 → 6.51.0

package/dist/{chunk-43Q6CVPB.js → chunk-VELGOFCL.js}

@@ -1,21 +1,26 @@
 import {
   SectionNavSheet
-} from "./chunk-32JMSHEA.js";
+} from "./chunk-S4ZUZ6DS.js";
 import {
   RaisedActionButton
-} from "./chunk-RZ4SBSLP.js";
+} from "./chunk-WNKRFMSI.js";
 import {
   Box,
   CONTROL_RESET,
   CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
   controlProps,
+  destinationControl,
   focusRing
-} from "./chunk-GLKQT2DS.js";
+} from "./chunk-A436VORP.js";
 import {
   barSlots,
+  destinationState,
+  isMenu,
   menuActive,
   menuCount
-} from "./chunk-VHVI3D4R.js";
+} from "./chunk-P3GBXE73.js";
 import {
   rem
 } from "./chunk-YKCAJ2TN.js";
@@ -38,7 +43,8 @@ function Slot({
   copy,
   testId,
   control,
-  expanded
+  expanded,
+  loading = false
 }) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
@@ -47,36 +53,20 @@ function Slot({
       ...control,
       "aria-current": current ? "page" : void 0,
       "aria-expanded": expanded,
+      "aria-busy": loading || void 0,
       "data-lit": lit ? "true" : void 0,
       "data-testid": testId,
-      sx: {
-        ...CONTROL_RESET,
-        ...focusRing(theme),
-        flex: 1,
-        minWidth: 0,
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 0.25,
-        position: "relative",
-        color: lit ? "primary.main" : "text.secondary",
-        // The current slot is marked by more than its colour: a short rule on
-        // its top edge, so the state survives a colour-blind reading.
-        '&[data-lit="true"]::before': {
-          content: '""',
-          position: "absolute",
-          top: 0,
-          insetInline: "22%",
-          height: rem(theme, 3),
-          borderBottomLeftRadius: rem(theme, 3),
-          borderBottomRightRadius: rem(theme, 3),
-          bgcolor: "primary.main"
-        },
-        "& svg": { fontSize: rem(theme, 22) }
-      },
+      sx: slotSx(theme, lit),
       children: [
-        /* @__PURE__ */ jsx(CountedIcon, { icon, count, label: copy.badge, testId: `${testId}-badge` }),
+        /* @__PURE__ */ jsx(
+          CountedIcon,
+          {
+            icon: /* @__PURE__ */ jsx(SlotIcon, { icon, loading }),
+            count,
+            label: copy.badge,
+            testId: `${testId}-badge`
+          }
+        ),
         /* @__PURE__ */ jsx(
           Typography,
           {
@@ -97,62 +87,125 @@ function Slot({
     }
   );
 }
-function BarSlotView({
-  slot,
+function slotSx(theme, lit) {
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 0.25,
+    position: "relative",
+    color: lit ? "primary.main" : "text.secondary",
+    // The current slot is marked by more than its colour: a short rule on
+    // its top edge, so the state survives a colour-blind reading.
+    '&[data-lit="true"]::before': {
+      content: '""',
+      position: "absolute",
+      top: 0,
+      insetInline: "22%",
+      height: rem(theme, 3),
+      borderBottomLeftRadius: rem(theme, 3),
+      borderBottomRightRadius: rem(theme, 3),
+      bgcolor: "primary.main"
+    },
+    "& svg": { fontSize: rem(theme, 22) },
+    [NOT_LIVE]: { color: "text.disabled" }
+  };
+}
+function PrimarySlot({
   primary,
-  more,
-  open,
-  toggle,
-  close,
-  linkComponent,
-  copy,
-  dataTestId
+  context
 }) {
-  if (slot.kind === "primary" && primary) {
+  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;
+  if (!isMenu(primary)) {
     return /* @__PURE__ */ jsx(
       RaisedActionButton,
       {
         label: primary.label,
         icon: primary.icon,
-        open: open === "primary",
-        closeLabel: copy.close,
-        dataTestId: `${dataTestId}-primary`,
-        onClick: () => toggle("primary")
-      }
-    );
-  }
-  if (slot.kind === "more" && more) {
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        label: more.label,
-        icon: more.icon,
-        count: menuCount(more),
-        current: false,
-        lit: open === "more" || open === null && menuActive(more),
-        expanded: open === "more",
-        copy,
-        testId: `${dataTestId}-more`,
-        control: controlProps({ href: void 0, linkComponent, onClick: () => toggle("more") })
+        captioned: true,
+        disabled: primary.disabled,
+        loading: primary.loading,
+        dataTestId: testId,
+        onClick: () => {
+          context.close();
+          primary.onSelect();
+        }
       }
     );
   }
-  if (slot.kind !== "destination") return null;
-  const { destination } = slot;
+  return /* @__PURE__ */ jsx(
+    RaisedActionButton,
+    {
+      label: primary.label,
+      icon: primary.icon,
+      open: context.open === "primary",
+      closeLabel: context.copy.close,
+      disabled: primary.disabled,
+      dataTestId: testId,
+      onClick: () => context.toggle("primary")
+    }
+  );
+}
+function MoreSlot({ more, context }) {
+  const { open } = context;
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      label: more.label,
+      icon: more.icon,
+      count: menuCount(more),
+      current: false,
+      lit: open === "more" || open === null && menuActive(more),
+      expanded: open === "more",
+      copy: context.copy,
+      testId: more.dataTestId ?? `${context.dataTestId}-more`,
+      control: controlProps({
+        href: void 0,
+        linkComponent: context.linkComponent,
+        inert: more.disabled === true,
+        onClick: () => context.toggle("more")
+      })
+    }
+  );
+}
+function DestinationSlot({
+  destination,
+  context
+}) {
+  const { current, lit } = destinationState(destination);
   return /* @__PURE__ */ jsx(
     Slot,
     {
       label: destination.label,
       icon: destination.icon,
       count: destination.badge,
-      current: destination.active === true,
-      lit: open === null && destination.active === true,
-      copy,
-      testId: `${dataTestId}-dest-${destination.id}`,
-      control: controlProps({ href: destination.href, linkComponent, onClick: close })
+      current,
+      lit: context.open === null && lit,
+      copy: context.copy,
+      testId: destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`,
+      loading: destination.loading === true,
+      control: destinationControl(destination, context.linkComponent, () => {
+        context.close();
+        destination.onSelect?.();
+      })
     }
   );
 }
+function BarSlotView({
+  slot,
+  primary,
+  more,
+  context
+}) {
+  if (slot.kind === "primary") return primary ? /* @__PURE__ */ jsx(PrimarySlot, { primary, context }) : null;
+  if (slot.kind === "more") return more ? /* @__PURE__ */ jsx(MoreSlot, { more, context }) : null;
+  return /* @__PURE__ */ jsx(DestinationSlot, { destination: slot.destination, context });
+}
 function SectionNavBar({
   label,
   destinations,
@@ -162,6 +215,7 @@ function SectionNavBar({
   copy,
   dataTestId
 }) {
+  const sheetMenu = isMenu(primary) ? primary : void 0;
   const theme = useTheme();
   const [open, setOpen] = useState(null);
   const toggle = (menu) => setOpen((current) => current === menu ? null : menu);
@@ -195,21 +249,16 @@ function SectionNavBar({
             slot,
             primary,
             more,
-            open,
-            toggle,
-            close,
-            linkComponent,
-            copy,
-            dataTestId
+            context: { open, toggle, close, linkComponent, copy, dataTestId }
           },
           slot.kind === "destination" ? `dest-${slot.destination.id}` : `menu-${slot.kind}`
         ))
       }
     ),
-    primary ? /* @__PURE__ */ jsx(
+    sheetMenu ? /* @__PURE__ */ jsx(
       SectionNavSheet,
       {
-        menu: primary,
+        menu: sheetMenu,
         open: open === "primary",
         onClose: close,
         linkComponent,
@@ -237,4 +286,4 @@ export {
   sectionNavBarInset,
   SectionNavBar
 };
-//# sourceMappingURL=chunk-43Q6CVPB.js.map
+//# sourceMappingURL=chunk-VELGOFCL.js.map

package/dist/chunk-VELGOFCL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.bar.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport { useState, type ElementType, type ReactNode } from 'react';\n\nimport type { SectionNavCopy } from '../../../copy';\nimport { rem } from '../../../tokens/scales';\n\nimport { barSlots, destinationState, isMenu, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';\nimport {\n  Box,\n  CONTROL_RESET,\n  CountedIcon,\n  NOT_LIVE,\n  SlotIcon,\n  controlProps,\n  destinationControl,\n  focusRing,\n} from './SectionNav.parts';\nimport { RaisedActionButton } from './SectionNav.primary';\nimport { SectionNavSheet } from './SectionNav.sheet';\nimport type { SectionNavAction, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';\n\n/** Which of the bar's two menus is open, if any. */\ntype OpenMenu = 'primary' | 'more' | null;\n\n/** The bar's height above the safe area — tall enough for an icon over a label. */\nconst barHeight = (theme: Parameters<typeof rem>[0]): string => rem(theme, 60);\n\n/**\n * The bar's full height on screen, the safe area included — where its sheets\n * stop, and what a host reserves at the foot of its content so nothing it\n * floats (a toast, a receipt) lands under the bar.\n */\nexport function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {\n  return `calc(${barHeight(theme)} + env(safe-area-inset-bottom))`;\n}\n\n/**\n * One slot: icon over label, a count on the icon.\n *\n * `current` is the page the viewer is on and is what `aria-current` reports —\n * a link's claim only; an action slot that is ON says so with `aria-pressed`,\n * which arrives in `control`. `lit` is only how the slot looks, and goes out\n * while a sheet is open so the bar shows where the thumb is. Opening a sheet\n * is `aria-expanded`'s to say.\n *\n * A destination is a link or an action; the \"more\" slot is a button that\n * opens its sheet. Either way the whole slot is the target, so a thumb landing\n * on the label lands on the control. A `disabled` slot is a disabled button,\n * dimmed — the act is still where the hand expects it. A `loading` or\n * `dimmed` slot is drawn the same and stays focusable (`aria-disabled`).\n */\nfunction Slot({\n  label,\n  icon,\n  count,\n  current,\n  lit,\n  copy,\n  testId,\n  control,\n  expanded,\n  loading = false,\n}: {\n  label: string;\n  icon: ReactNode;\n  count: number | undefined;\n  current: boolean;\n  lit: boolean;\n  copy: SectionNavCopy;\n  testId: string;\n  control: Record<string, unknown>;\n  expanded?: boolean;\n  loading?: boolean;\n}): React.JSX.Element {\n  const theme = useTheme();\n  return (\n    <Box\n      {...control}\n      aria-current={current ? 'page' : undefined}\n      aria-expanded={expanded}\n      aria-busy={loading || undefined}\n      data-lit={lit ? 'true' : undefined}\n      data-testid={testId}\n      sx={slotSx(theme, lit)}\n    >\n      <CountedIcon\n        icon={<SlotIcon icon={icon} loading={loading} />}\n        count={count}\n        label={copy.badge}\n        testId={`${testId}-badge`}\n      />\n      <Typography\n        component=\"span\"\n        variant=\"caption\"\n        sx={{\n          maxWidth: '100%',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: 'nowrap',\n          lineHeight: 1.3,\n          fontWeight: lit ? 700 : 400,\n        }}\n      >\n        {label}\n      </Typography>\n    </Box>\n  );\n}\n\n/** A slot's look: icon over label, the lit rule on its top edge, dimmed when disabled. */\nfunction slotSx(theme: Theme, lit: boolean): SxProps<Theme> {\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    flex: 1,\n    minWidth: 0,\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 0.25,\n    position: 'relative',\n    color: lit ? 'primary.main' : 'text.secondary',\n    // The current slot is marked by more than its colour: a short rule on\n    // its top edge, so the state survives a colour-blind reading.\n    '&[data-lit=\"true\"]::before': {\n      content: '\"\"',\n      position: 'absolute',\n      top: 0,\n      insetInline: '22%',\n      height: rem(theme, 3),\n      borderBottomLeftRadius: rem(theme, 3),\n      borderBottomRightRadius: rem(theme, 3),\n      bgcolor: 'primary.main',\n    },\n    '& svg': { fontSize: rem(theme, 22) },\n    [NOT_LIVE]: { color: 'text.disabled' },\n  } as SxProps<Theme>;\n}\n\n/** What every slot kind is handed: the bar's open state and how to change it. */\ninterface SlotContext {\n  open: OpenMenu;\n  toggle: (menu: Exclude<OpenMenu, null>) => void;\n  close: () => void;\n  linkComponent: ElementType | undefined;\n  copy: SectionNavCopy;\n  dataTestId: string;\n}\n\n/** The raised button: an action runs on tap; a menu opens its sheet. */\nfunction PrimarySlot({\n  primary,\n  context,\n}: {\n  primary: SectionNavMenu | SectionNavAction;\n  context: SlotContext;\n}): React.JSX.Element {\n  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;\n  if (!isMenu(primary)) {\n    return (\n      <RaisedActionButton\n        label={primary.label}\n        icon={primary.icon}\n        captioned\n        disabled={primary.disabled}\n        loading={primary.loading}\n        dataTestId={testId}\n        onClick={() => {\n          context.close();\n          primary.onSelect();\n        }}\n      />\n    );\n  }\n  return (\n    <RaisedActionButton\n      label={primary.label}\n      icon={primary.icon}\n      open={context.open === 'primary'}\n      closeLabel={context.copy.close}\n      disabled={primary.disabled}\n      dataTestId={testId}\n      onClick={() => context.toggle('primary')}\n    />\n  );\n}\n\n/** The \"more\" slot: a button that opens its sheet, carrying its entries' counts. */\nfunction MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContext }): React.JSX.Element {\n  const { open } = context;\n  return (\n    <Slot\n      label={more.label}\n      icon={more.icon}\n      count={menuCount(more)}\n      current={false}\n      lit={open === 'more' || (open === null && menuActive(more))}\n      expanded={open === 'more'}\n      copy={context.copy}\n      testId={more.dataTestId ?? `${context.dataTestId}-more`}\n      control={controlProps({\n        href: undefined,\n        linkComponent: context.linkComponent,\n        inert: more.disabled === true,\n        onClick: () => context.toggle('more'),\n      })}\n    />\n  );\n}\n\n/** A destination: a link, or an action slot (a toggle when it carries `active`). */\nfunction DestinationSlot({\n  destination,\n  context,\n}: {\n  destination: SectionNavDestination;\n  context: SlotContext;\n}): React.JSX.Element {\n  const { current, lit } = destinationState(destination);\n  return (\n    <Slot\n      label={destination.label}\n      icon={destination.icon}\n      count={destination.badge}\n      current={current}\n      lit={context.open === null && lit}\n      copy={context.copy}\n      testId={destination.dataTestId ?? `${context.dataTestId}-dest-${destination.id}`}\n      loading={destination.loading === true}\n      control={destinationControl(destination, context.linkComponent, () => {\n        context.close();\n        destination.onSelect?.();\n      })}\n    />\n  );\n}\n\n/** One slot of the bar, whichever kind it is. */\nfunction BarSlotView({\n  slot,\n  primary,\n  more,\n  context,\n}: {\n  slot: BarSlot;\n  primary: SectionNavMenu | SectionNavAction | undefined;\n  more: SectionNavMenu | undefined;\n  context: SlotContext;\n}): React.JSX.Element | null {\n  if (slot.kind === 'primary') return primary ? <PrimarySlot primary={primary} context={context} /> : null;\n  if (slot.kind === 'more') return more ? <MoreSlot more={more} context={context} /> : null;\n  return <DestinationSlot destination={slot.destination} context={context} />;\n}\n\n/** The phone layout: a bottom bar, with its menus as bottom sheets. */\nexport function SectionNavBar({\n  label,\n  destinations,\n  primary,\n  more,\n  linkComponent,\n  copy,\n  dataTestId,\n}: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &\n  Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {\n  const sheetMenu = isMenu(primary) ? primary : undefined;\n  const theme = useTheme();\n  const [open, setOpen] = useState<OpenMenu>(null);\n  const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));\n  const close = (): void => setOpen(null);\n\n  return (\n    <>\n      <Box\n        component=\"nav\"\n        aria-label={label}\n        data-testid={dataTestId}\n        sx={{\n          flex: 'none',\n          display: 'flex',\n          alignItems: 'stretch',\n          boxSizing: 'border-box',\n          height: sectionNavBarInset(theme),\n          paddingBottom: 'env(safe-area-inset-bottom)',\n          borderTop: `1px solid ${theme.palette.divider}`,\n          bgcolor: 'background.paper',\n          // Above the backdrop ONLY while one of its own sheets is open, so the\n          // primary button can close what it opened. Raised all the time it\n          // would sit over every dialog the page opens, and on a small phone a\n          // dialog's own footer is exactly where the bar is.\n          position: 'relative',\n          zIndex: open === null ? 'auto' : theme.zIndex.modal + 1,\n        }}\n      >\n        {barSlots(destinations, more !== undefined, primary !== undefined).map((slot) => (\n          <BarSlotView\n            key={slot.kind === 'destination' ? `dest-${slot.destination.id}` : `menu-${slot.kind}`}\n            slot={slot}\n            primary={primary}\n            more={more}\n            context={{ open, toggle, close, linkComponent, copy, dataTestId }}\n          />\n        ))}\n      </Box>\n      {sheetMenu ? (\n        <SectionNavSheet\n          menu={sheetMenu}\n          open={open === 'primary'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-primary-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n      {more ? (\n        <SectionNavSheet\n          menu={more}\n          open={open === 'more'}\n          onClose={close}\n          linkComponent={linkComponent}\n          copy={copy}\n          testId={`${dataTestId}-more-sheet`}\n          bottomOffset={sectionNavBarInset(theme)}\n        />\n      ) : null}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-RCJYLDXV.js → chunk-VJBTFWDK.js}

@@ -4,10 +4,10 @@ import {
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "./chunk-7VC6YBD3.js";
+} from "./chunk-3U45DRNS.js";
 import {
   partTestId
-} from "./chunk-HVZ4HF4M.js";
+} from "./chunk-5N2UJOCT.js";
 import {
   dependentsStyles,
   hintStyles,
@@ -19,7 +19,7 @@ import {
 } from "./chunk-XJQNSMGA.js";
 import {
   Icon
-} from "./chunk-V2SAZOT2.js";
+} from "./chunk-FYTC4LOD.js";
 
 // src/components/layout/SettingCard/SettingGroup.tsx
 import Box from "@mui/material/Box/index.js";
@@ -84,4 +84,4 @@ SettingGroup.displayName = "SettingGroup";
 export {
   SettingGroup
 };
-//# sourceMappingURL=chunk-RCJYLDXV.js.map
+//# sourceMappingURL=chunk-VJBTFWDK.js.map

package/dist/chunk-WNKRFMSI.js

@@ -0,0 +1,113 @@
+import {
+  Box,
+  CONTROL_RESET,
+  NOT_LIVE,
+  SlotIcon,
+  focusRing
+} from "./chunk-A436VORP.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/SectionNav/SectionNav.primary.tsx
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RaisedActionButton({
+  label,
+  icon,
+  onClick,
+  open,
+  closeLabel,
+  captioned = false,
+  disabled = false,
+  loading = false,
+  dataTestId = "raised-action"
+}) {
+  const theme = useTheme();
+  const expanded = open === true;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        px: 0.5
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            ...raisedState({ onClick, disabled, loading }),
+            "aria-label": expanded && closeLabel ? closeLabel : label,
+            "aria-expanded": open,
+            "data-testid": dataTestId,
+            sx: raisedSx(theme, expanded),
+            children: /* @__PURE__ */ jsx(SlotIcon, { icon, loading })
+          }
+        ),
+        captioned ? /* @__PURE__ */ jsx(RaisedCaption, { label, inert: disabled || loading }) : null
+      ]
+    }
+  );
+}
+function raisedState({
+  onClick,
+  disabled,
+  loading
+}) {
+  const busy = loading && !disabled;
+  return {
+    onClick: busy ? void 0 : onClick,
+    disabled,
+    "aria-disabled": busy ? "true" : void 0,
+    "aria-busy": loading || void 0
+  };
+}
+function RaisedCaption({ label, inert }) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      variant: "caption",
+      "aria-hidden": true,
+      sx: { lineHeight: 1.3, mt: 0.25, whiteSpace: "nowrap", color: inert ? "text.disabled" : "text.primary" },
+      children: label
+    }
+  );
+}
+function raisedSx(theme, expanded) {
+  const size = rem(theme, 52);
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    width: size,
+    height: size,
+    // Lifted half out of the bar: the one control that is not a place.
+    marginTop: rem(theme, -18),
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    bgcolor: "primary.main",
+    color: "primary.contrastText",
+    boxShadow: theme.shadows[6],
+    [NOT_LIVE]: { cursor: "default", bgcolor: "action.disabledBackground", color: "text.disabled", boxShadow: "none" },
+    "& svg": {
+      fontSize: rem(theme, 26),
+      transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shorter }),
+      transform: expanded ? "rotate(45deg)" : "none"
+    },
+    "@media (prefers-reduced-motion: reduce)": { "& svg": { transition: "none" } }
+  };
+}
+
+export {
+  RaisedActionButton
+};
+//# sourceMappingURL=chunk-WNKRFMSI.js.map

package/dist/chunk-WNKRFMSI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/SectionNav/SectionNav.primary.tsx"],"sourcesContent":["import Typography from '@mui/material/Typography/index.js';\nimport { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';\nimport type { ReactNode } from 'react';\n\nimport { rem } from '../../../tokens/scales';\n\nimport { Box, CONTROL_RESET, NOT_LIVE, SlotIcon, focusRing } from './SectionNav.parts';\n\nexport interface RaisedActionButtonProps {\n  /**\n   * The button's accessible name. Drawn under the button only when\n   * `captioned`; the caption is hidden from assistive tech, so the name is\n   * read once either way.\n   */\n  label: string;\n  icon: ReactNode;\n  onClick: () => void;\n  /**\n   * Whether what the button opens is open. Omit for a button that opens\n   * nothing (a plain action): it then carries no `aria-expanded` and its icon\n   * never turns.\n   */\n  open?: boolean;\n  /** The name it takes while `open` — the same control closes what it opened. REQUIRED with `open`. */\n  closeLabel?: string;\n  /**\n   * Draw `label` under the button. A bar of VERBS names the act it is for; a\n   * bar of places can leave its one action to the icon.\n   */\n  captioned?: boolean;\n  /** Dimmed and not operable: a native `disabled` button. */\n  disabled?: boolean;\n  /**\n   * A write it started is in flight: a spinner replaces the icon, it reports\n   * `aria-busy` and `aria-disabled`, and a tap is ignored. It stays focusable,\n   * so the keyboard does not lose its place while the write answers.\n   */\n  loading?: boolean;\n  dataTestId?: string;\n}\n\n/**\n * The raised round button in the middle of a bottom bar — the one control in\n * the row that is an ACTION rather than a place.\n *\n * Lifted half out of the bar so it reads as different in kind from the tabs\n * beside it. Uncaptioned it costs the row less width than a tab: that width is\n * what lets a bar keep four labelled tabs AND this button at 320px. A bar of\n * verbs captions it, naming the act under the button.\n *\n * `SectionNav` draws it for its `primary` menu. It is exported on its own for\n * a bar the host already draws — drop it between two tabs, in a flex row.\n */\nexport function RaisedActionButton({\n  label,\n  icon,\n  onClick,\n  open,\n  closeLabel,\n  captioned = false,\n  disabled = false,\n  loading = false,\n  dataTestId = 'raised-action',\n}: RaisedActionButtonProps): React.JSX.Element {\n  const theme = useTheme();\n  const expanded = open === true;\n  return (\n    <Box\n      sx={{\n        flex: 'none',\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'center',\n        justifyContent: 'flex-start',\n        px: 0.5,\n      }}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        {...raisedState({ onClick, disabled, loading })}\n        aria-label={expanded && closeLabel ? closeLabel : label}\n        aria-expanded={open}\n        data-testid={dataTestId}\n        sx={raisedSx(theme, expanded)}\n      >\n        <SlotIcon icon={icon} loading={loading} />\n      </Box>\n      {captioned ? <RaisedCaption label={label} inert={disabled || loading} /> : null}\n    </Box>\n  );\n}\n\n/**\n * The button's operability. Only `disabled` is native: an in-flight button\n * keeps its focus, reports `aria-busy` and `aria-disabled`, and drops the click.\n */\nfunction raisedState({\n  onClick,\n  disabled,\n  loading,\n}: {\n  onClick: () => void;\n  disabled: boolean;\n  loading: boolean;\n}): Record<string, unknown> {\n  const busy = loading && !disabled;\n  return {\n    onClick: busy ? undefined : onClick,\n    disabled,\n    'aria-disabled': busy ? 'true' : undefined,\n    'aria-busy': loading || undefined,\n  };\n}\n\n/**\n * The label under a captioned button. Hidden from assistive tech: the button\n * already carries the same words as its name, and reading them twice is noise.\n */\nfunction RaisedCaption({ label, inert }: { label: string; inert: boolean }): React.JSX.Element {\n  return (\n    <Typography\n      component=\"span\"\n      variant=\"caption\"\n      aria-hidden\n      sx={{ lineHeight: 1.3, mt: 0.25, whiteSpace: 'nowrap', color: inert ? 'text.disabled' : 'text.primary' }}\n    >\n      {label}\n    </Typography>\n  );\n}\n\n/** The round button: lifted half out of the bar, its icon turning while what it opened is open. */\nfunction raisedSx(theme: Theme, expanded: boolean): SxProps<Theme> {\n  const size = rem(theme, 52);\n  return {\n    ...CONTROL_RESET,\n    ...focusRing(theme),\n    width: size,\n    height: size,\n    // Lifted half out of the bar: the one control that is not a place.\n    marginTop: rem(theme, -18),\n    borderRadius: '50%',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    bgcolor: 'primary.main',\n    color: 'primary.contrastText',\n    boxShadow: theme.shadows[6],\n    [NOT_LIVE]: { cursor: 'default', bgcolor: 'action.disabledBackground', color: 'text.disabled', boxShadow: 'none' },\n    '& svg': {\n      fontSize: rem(theme, 26),\n      transition: theme.transitions.create('transform', { duration: theme.transitions.duration.shorter }),\n      transform: expanded ? 'rotate(45deg)' : 'none',\n    },\n    '@media (prefers-reduced-motion: reduce)': { '& svg': { transition: 'none' } },\n  } as SxProps<Theme>;\n}\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,gBAAgB;AACvB,SAAS,gBAA0C;AAkE/C,SAmBI,KAnBJ;AAdG,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,UAAU;AAAA,EACV,aAAa;AACf,GAA+C;AAC7C,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,SAAS;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI;AAAA,QACF,MAAM;AAAA,QACN,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,IAAI;AAAA,MACN;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACJ,GAAG,YAAY,EAAE,SAAS,UAAU,QAAQ,CAAC;AAAA,YAC9C,cAAY,YAAY,aAAa,aAAa;AAAA,YAClD,iBAAe;AAAA,YACf,eAAa;AAAA,YACb,IAAI,SAAS,OAAO,QAAQ;AAAA,YAE5B,8BAAC,YAAS,MAAY,SAAkB;AAAA;AAAA,QAC1C;AAAA,QACC,YAAY,oBAAC,iBAAc,OAAc,OAAO,YAAY,SAAS,IAAK;AAAA;AAAA;AAAA,EAC7E;AAEJ;AAMA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAI4B;AAC1B,QAAM,OAAO,WAAW,CAAC;AACzB,SAAO;AAAA,IACL,SAAS,OAAO,SAAY;AAAA,IAC5B;AAAA,IACA,iBAAiB,OAAO,SAAS;AAAA,IACjC,aAAa,WAAW;AAAA,EAC1B;AACF;AAMA,SAAS,cAAc,EAAE,OAAO,MAAM,GAAyD;AAC7F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,eAAW;AAAA,MACX,IAAI,EAAE,YAAY,KAAK,IAAI,MAAM,YAAY,UAAU,OAAO,QAAQ,kBAAkB,eAAe;AAAA,MAEtG;AAAA;AAAA,EACH;AAEJ;AAGA,SAAS,SAAS,OAAc,UAAmC;AACjE,QAAM,OAAO,IAAI,OAAO,EAAE;AAC1B,SAAO;AAAA,IACL,GAAG;AAAA,IACH,GAAG,UAAU,KAAK;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA,IAER,WAAW,IAAI,OAAO,GAAG;AAAA,IACzB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,SAAS;AAAA,IACT,OAAO;AAAA,IACP,WAAW,MAAM,QAAQ,CAAC;AAAA,IAC1B,CAAC,QAAQ,GAAG,EAAE,QAAQ,WAAW,SAAS,6BAA6B,OAAO,iBAAiB,WAAW,OAAO;AAAA,IACjH,SAAS;AAAA,MACP,UAAU,IAAI,OAAO,EAAE;AAAA,MACvB,YAAY,MAAM,YAAY,OAAO,aAAa,EAAE,UAAU,MAAM,YAAY,SAAS,QAAQ,CAAC;AAAA,MAClG,WAAW,WAAW,kBAAkB;AAAA,IAC1C;AAAA,IACA,2CAA2C,EAAE,SAAS,EAAE,YAAY,OAAO,EAAE;AAAA,EAC/E;AACF;","names":[]}

package/dist/{chunk-LM2YOONY.js → chunk-XYHNXO6Q.js}

@@ -1,6 +1,6 @@
 import {
   partTestId
-} from "./chunk-HVZ4HF4M.js";
+} from "./chunk-5N2UJOCT.js";
 import {
   SETTING_CARD_OPEN_ATTR,
   withCallerSx
@@ -79,4 +79,4 @@ export {
   settingGridStyles,
   SettingGrid
 };
-//# sourceMappingURL=chunk-LM2YOONY.js.map
+//# sourceMappingURL=chunk-XYHNXO6Q.js.map

package/dist/{chunk-FT7BNFGS.js → chunk-YK4ZG5Y4.js}

@@ -1,6 +1,6 @@
 import {
   GridToolbar
-} from "./chunk-TELVW2OI.js";
+} from "./chunk-MYCR7FMI.js";
 
 // src/components/data-display/DataViews/data-views-shell-toolbar.tsx
 import { jsx } from "react/jsx-runtime";
@@ -64,4 +64,4 @@ function ShellToolbar({
 export {
   ShellToolbar
 };
-//# sourceMappingURL=chunk-FT7BNFGS.js.map
+//# sourceMappingURL=chunk-YK4ZG5Y4.js.map

package/dist/data-display/Badge.js

@@ -11,10 +11,10 @@ import "../chunk-PYC4CWCQ.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-3IPPMWUA.js";
 import "../chunk-7ZPUN7TV.js";
-import "../chunk-SWDDXMV7.js";
-import "../chunk-XK77FY42.js";
-import "../chunk-4ELI2MM3.js";
-import "../chunk-56TGECKZ.js";
+import "../chunk-SJ4IAZ3V.js";
+import "../chunk-25MSGLNU.js";
+import "../chunk-GAXHYRX6.js";
+import "../chunk-NP6SHLQ3.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-2TZ6X265.js";
 import "../chunk-7FDU3FIN.js";

package/dist/data-display/Carousel.js

@@ -14,10 +14,10 @@ import {
 import "../chunk-HPK33ACY.js";
 import "../chunk-3IPPMWUA.js";
 import "../chunk-7ZPUN7TV.js";
-import "../chunk-SWDDXMV7.js";
-import "../chunk-XK77FY42.js";
-import "../chunk-4ELI2MM3.js";
-import "../chunk-56TGECKZ.js";
+import "../chunk-SJ4IAZ3V.js";
+import "../chunk-25MSGLNU.js";
+import "../chunk-GAXHYRX6.js";
+import "../chunk-NP6SHLQ3.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-2TZ6X265.js";
 import "../chunk-7FDU3FIN.js";

package/dist/data-display/Chart.js

@@ -33,10 +33,10 @@ import "../chunk-SOHQPPYJ.js";
 import "../chunk-XRGJVS4P.js";
 import "../chunk-3IPPMWUA.js";
 import "../chunk-7ZPUN7TV.js";
-import "../chunk-SWDDXMV7.js";
-import "../chunk-XK77FY42.js";
-import "../chunk-4ELI2MM3.js";
-import "../chunk-56TGECKZ.js";
+import "../chunk-SJ4IAZ3V.js";
+import "../chunk-25MSGLNU.js";
+import "../chunk-GAXHYRX6.js";
+import "../chunk-NP6SHLQ3.js";
 import "../chunk-PT6TCWIW.js";
 import "../chunk-2TZ6X265.js";
 import "../chunk-7FDU3FIN.js";

package/dist/data-display/DataGrid.js

@@ -1,16 +1,16 @@
 import "../chunk-L5CPOEDP.js";
 import {
   DataGrid
-} from "../chunk-ZQCZMSLO.js";
-import "../chunk-WB6BTUXQ.js";
+} from "../chunk-4B5WSVS7.js";
+import "../chunk-OWILUXWM.js";
 import "../chunk-ZFXTRPQO.js";
 import "../chunk-ICDAYOJ6.js";
 import "../chunk-G3E66C6J.js";
 import "../chunk-EARWC6PD.js";
-import "../chunk-SWDDXMV7.js";
-import "../chunk-XK77FY42.js";
-import "../chunk-4ELI2MM3.js";
-import "../chunk-56TGECKZ.js";
+import "../chunk-SJ4IAZ3V.js";
+import "../chunk-25MSGLNU.js";
+import "../chunk-GAXHYRX6.js";
+import "../chunk-NP6SHLQ3.js";
 import "../chunk-2TZ6X265.js";
 import "../chunk-7FDU3FIN.js";
 import "../chunk-EPEJMTCQ.js";