@12-apps/ui 6.44.3 → 6.45.1

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

@@ -0,0 +1,102 @@
+import type { ElementType, ReactNode } from 'react';
+import type { SectionNavCopy } from '../../../copy';
+/**
+ * One place the section leads to — a bar slot on a phone, a row in the rail.
+ */
+export interface SectionNavDestination {
+    /** Stable key. Also the suffix of the slot's `data-testid`. */
+    id: string;
+    label: string;
+    icon: ReactNode;
+    href: string;
+    /**
+     * How many things behind this destination wait on the viewer. `0` and
+     * `undefined` render no badge — "nothing waiting" and "not known yet" are
+     * different claims and neither is a number.
+     */
+    badge?: number;
+    /** The destination the viewer is on. The host decides; the nav never reads the URL. */
+    active?: boolean;
+}
+/**
+ * One entry inside a menu — a sheet tile on a phone, a row in the rail.
+ *
+ * An entry either LEADS somewhere (`href`, rendered through `linkComponent`)
+ * or DOES something (`onSelect`). Give it one or the other.
+ */
+export interface SectionNavEntry {
+    id: string;
+    label: string;
+    /** A second line under the label. Shown by `list` groups and in the rail. */
+    description?: string;
+    icon: ReactNode;
+    href?: string;
+    onSelect?: () => void;
+    badge?: number;
+    active?: boolean;
+}
+/** A titled run of entries inside a menu. */
+export interface SectionNavGroup {
+    id: string;
+    /** Heading above the entries. Omit for a group that needs none. */
+    title?: string;
+    /**
+     * How the phone sheet draws the entries: `grid` is three tiles across,
+     * `list` one row each with its description. The rail always lists.
+     * Defaults to `list`.
+     */
+    layout?: 'grid' | 'list';
+    entries: SectionNavEntry[];
+}
+/**
+ * A menu the nav opens: the centred primary action, or the "more" slot.
+ *
+ * On a phone it opens as a bottom sheet over the page. In the rail there is
+ * room for everything, so its groups are listed under `title` instead of
+ * hiding behind a trigger.
+ */
+export interface SectionNavMenu {
+    /** The trigger's accessible name, and the visible label of the "more" slot. */
+    label: string;
+    icon: ReactNode;
+    /** The sheet's heading, and the rail section's. */
+    title: string;
+    groups: SectionNavGroup[];
+}
+/** The way out of the section, drawn at the top of the rail. */
+export interface SectionNavBack {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+}
+export interface SectionNavProps {
+    /**
+     * `bar` — a bottom tab bar for a phone: the destinations, `more` as the last
+     * slot, and `primary` as a raised button in the middle.
+     *
+     * `rail` — a vertical list for a wide screen, with `back` and `heading` on
+     * top and every menu's entries listed rather than folded away.
+     */
+    layout: 'bar' | 'rail';
+    /** The navigation landmark's accessible name. */
+    label: string;
+    destinations: SectionNavDestination[];
+    /** The raised action in the middle of the bar. */
+    primary?: SectionNavMenu;
+    /** The last slot of the bar. Its badge is the sum of its entries' badges. */
+    more?: SectionNavMenu;
+    /** Rail only: the way back out of the section. */
+    back?: SectionNavBack;
+    /** Rail only: a heading above the destinations. */
+    heading?: string;
+    /**
+     * The component every `href` renders through — a router's link adapter that
+     * takes `href`. Omitted, a plain `<a>` is used and navigation reloads.
+     */
+    linkComponent?: ElementType;
+    /** The nav's own words. REQUIRED — the component carries none. */
+    copy: SectionNavCopy;
+    /** Prefix for every `data-testid`. Defaults to `"section-nav"`. */
+    dataTestId?: string;
+}
+//# sourceMappingURL=SectionNav.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionNav.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,+DAA+D;IAC/D,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uFAAuF;IACvF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;GAKG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAC7B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,eAAe,EAAE,CAAC;CAC3B;AAED,gEAAgE;AAChE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;OAMG;IACH,MAAM,EAAE,KAAK,GAAG,MAAM,CAAC;IACvB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,qBAAqB,EAAE,CAAC;IACtC,kDAAkD;IAClD,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,kDAAkD;IAClD,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,kEAAkE;IAClE,IAAI,EAAE,cAAc,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
+/**
+ * The stories' example section, shared by the showcase and the interaction
+ * tests. Kept out of the `*.stories.tsx` files because Storybook reads every
+ * named export there as a story.
+ */
+/** A restaurant's shift, as the example section: the floor, the board, the waiter's round. */
+export declare const DESTINATIONS: SectionNavDestination[];
+export declare const PRIMARY: SectionNavMenu;
+export declare const MORE: SectionNavMenu;
+/** A phone-sized frame with the bar at its foot, the way a host docks it. */
+export declare function PhoneFrame({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+/** A desktop-column-sized frame for the rail. */
+export declare function RailFrame({ children }: {
+    children: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=fixtures.d.ts.map

package/dist/types/components/navigation/SectionNav/__stories__/fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fixtures.d.ts","sourceRoot":"","sources":["../../../../../../src/components/navigation/SectionNav/__stories__/fixtures.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEjF;;;;GAIG;AAEH,8FAA8F;AAC9F,eAAO,MAAM,YAAY,EAAE,qBAAqB,EAI/C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,cA6BrB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,cAiBlB,CAAC;AAEF,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAoB1F;AAGD,iDAAiD;AACjD,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,YAAY,CAEzF"}

package/dist/types/components/navigation/SectionNav/index.d.ts

@@ -0,0 +1,7 @@
+export { SectionNav } from './SectionNav';
+export { sectionNavBarInset } from './SectionNav.bar';
+export { RaisedActionButton } from './SectionNav.primary';
+export type { RaisedActionButtonProps } from './SectionNav.primary';
+export type { SectionNavBack, SectionNavDestination, SectionNavEntry, SectionNavGroup, SectionNavMenu, SectionNavProps, } from './SectionNav.types';
+export type { SectionNavCopy } from '../../../copy';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/components/navigation/SectionNav/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,YAAY,EACV,cAAc,EACd,qBAAqB,EACrB,eAAe,EACf,eAAe,EACf,cAAc,EACd,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC"}

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

@@ -5,5 +5,6 @@ export * from './ContextMenu';
 export * from './DropdownMenu';
 export * from './NavigationMenu';
 export * from './Pagination';
+export * from './SectionNav';
 export * from './Tabs';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC"}

package/dist/types/copy/navigation.d.ts

@@ -16,6 +16,16 @@ export interface CommandPaletteCopy {
     recent: string;
     tryAnotherTerm: string;
 }
+/**
+ * `SectionNav`'s own words — only the chrome it draws around the host's
+ * destinations. Every destination and menu label is the host's, per prop.
+ */
+export interface SectionNavCopy {
+    /** The open primary trigger's accessible name, and the sheet's close button. */
+    close: string;
+    /** A badge's accessible name — "3 pending", for a count of 3. */
+    badge: (count: number) => string;
+}
 /** The breadcrumb's overflow control, in its two spellings. */
 export interface BreadcrumbCopy {
     showMore: string;

package/dist/types/copy/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/copy/navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8DAA8D;AAC9D,MAAM,WAAW,kBAAkB;IACjC,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;CACxB;AAED,+DAA+D;AAC/D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../../../src/copy/navigation.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,8DAA8D;AAC9D,MAAM,WAAW,kBAAkB;IACjC,2DAA2D;IAC3D,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAClC;AAED,+DAA+D;AAC/D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB"}

package/dist/types/en-US.navigation.d.ts

@@ -2,7 +2,8 @@
  * The en-US pack for the navigation family. Split the same way
  * `pt-BR.navigation.ts` is — see `en-US.ts` for why.
  */
-import type { BreadcrumbCopy, CommandPaletteCopy } from './copy';
+import type { BreadcrumbCopy, CommandPaletteCopy, SectionNavCopy } from './copy';
 export declare const EN_US_COMMAND_PALETTE_COPY: CommandPaletteCopy;
 export declare const EN_US_BREADCRUMB_COPY: BreadcrumbCopy;
+export declare const EN_US_SECTION_NAV_COPY: SectionNavCopy;
 //# sourceMappingURL=en-US.navigation.d.ts.map

package/dist/types/en-US.navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en-US.navigation.d.ts","sourceRoot":"","sources":["../../src/en-US.navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EACnB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,0BAA0B,EAAE,kBAQxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAGnC,CAAC"}
+{"version":3,"file":"en-US.navigation.d.ts","sourceRoot":"","sources":["../../src/en-US.navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,cAAc,EACf,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,0BAA0B,EAAE,kBAQxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAGnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cAGpC,CAAC"}

package/dist/types/locales.d.ts

@@ -19,7 +19,7 @@
  */
 import type { DataViewsCopy } from './components/data-display/DataViews/data-views-copy';
 import type { SavedViewsLabels } from './components/layout/ContentToolbar/ContentToolbar.types';
-import type { AddressAutocompleteCopy, AutocompleteCopy, BreadcrumbCopy, CarouselCopy, CategorySelectCopy, CepFieldCopy, ChromeCopy, CodeEditorCopy, CommandPaletteCopy, ConfirmActionCopy, DataGridCopy, DataStateCopy, InstallPromptCopy, LightboxCopy, MapPreviewCopy, PasswordStrengthCopy, PhoneInputCopy, RichEditorToolbarCopy, SectionOnboardingCopy, SettingCardCopy, SettingSwitchCopy, SocialLoginCopy, TableFilterCopy, TimingDiagramCopy, TutorialCopy, UploadButtonCopy, UserAvatarCopy } from "./copy";
+import type { AddressAutocompleteCopy, AutocompleteCopy, BreadcrumbCopy, CarouselCopy, CategorySelectCopy, CepFieldCopy, ChromeCopy, CodeEditorCopy, CommandPaletteCopy, SectionNavCopy, ConfirmActionCopy, DataGridCopy, DataStateCopy, InstallPromptCopy, LightboxCopy, MapPreviewCopy, PasswordStrengthCopy, PhoneInputCopy, RichEditorToolbarCopy, SectionOnboardingCopy, SettingCardCopy, SettingSwitchCopy, SocialLoginCopy, TableFilterCopy, TimingDiagramCopy, TutorialCopy, UploadButtonCopy, UserAvatarCopy } from "./copy";
 type LocalePack<T> = {
     readonly 'pt-BR': T;
     readonly 'en-US': T;
@@ -45,6 +45,7 @@ export declare const TABLE_FILTER_COPY: LocalePack<TableFilterCopy>;
 export declare const SETTING_CARD_COPY: LocalePack<SettingCardCopy>;
 export declare const SETTING_SWITCH_COPY: LocalePack<SettingSwitchCopy>;
 export declare const COMMAND_PALETTE_COPY: LocalePack<CommandPaletteCopy>;
+export declare const SECTION_NAV_COPY: LocalePack<SectionNavCopy>;
 export declare const BREADCRUMB_COPY: LocalePack<BreadcrumbCopy>;
 export declare const SECTION_ONBOARDING_COPY: LocalePack<SectionOnboardingCopy>;
 export declare const CONFIRM_ACTION_COPY: LocalePack<ConfirmActionCopy>;

package/dist/types/locales.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../src/locales.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AACzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAChG,OAAO,KAAK,EACV,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACf,MAAM,QAAQ,CAAC;AAIhB,KAAK,UAAU,CAAC,CAAC,IAAI;IAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC;AAKlE,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,eAAe,2BAG3B,CAAC;AACF,eAAO,MAAM,cAAc,0BAAuE,CAAC;AACnG,eAAO,MAAM,eAAe,2BAG3B,CAAC;AAGF,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,WAAW,wBAA+D,CAAC;AAGxF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,yBAAyB,qCAGrC,CAAC;AACF,eAAO,MAAM,iBAAiB,8BAG7B,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,sBAAsB,kCAGlC,CAAC;AACF,eAAO,MAAM,wBAAwB,mCAGpC,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,kBAAkB,8BAG9B,CAAC;AAGF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AAGF,eAAO,MAAM,oBAAoB,gCAGhC,CAAC;AACF,eAAO,MAAM,eAAe,4BAG3B,CAAC;AAGF,eAAO,MAAM,uBAAuB,mCAGnC,CAAC;AACF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,oBAAoB,gCAGhC,CAAC;AACF,eAAO,MAAM,cAAc,0BAAuE,CAAC;AACnG,eAAO,MAAM,kBAAkB,8BAG9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC"}
+{"version":3,"file":"locales.d.ts","sourceRoot":"","sources":["../../src/locales.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qDAAqD,CAAC;AACzF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yDAAyD,CAAC;AAChG,OAAO,KAAK,EACV,uBAAuB,EACvB,gBAAgB,EAChB,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,YAAY,EACZ,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAAc,EACd,oBAAoB,EACpB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,YAAY,EACZ,gBAAgB,EAChB,cAAc,EACf,MAAM,QAAQ,CAAC;AAIhB,KAAK,UAAU,CAAC,CAAC,IAAI;IAAE,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;IAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAA;CAAE,CAAC;AAKlE,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,eAAe,2BAG3B,CAAC;AACF,eAAO,MAAM,cAAc,0BAAuE,CAAC;AACnG,eAAO,MAAM,eAAe,2BAG3B,CAAC;AAGF,eAAO,MAAM,aAAa,0BAAqE,CAAC;AAChG,eAAO,MAAM,WAAW,wBAA+D,CAAC;AAGxF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,yBAAyB,qCAGrC,CAAC;AACF,eAAO,MAAM,iBAAiB,8BAG7B,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,sBAAsB,kCAGlC,CAAC;AACF,eAAO,MAAM,wBAAwB,mCAGpC,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,kBAAkB,8BAG9B,CAAC;AAGF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,iBAAiB,6BAG7B,CAAC;AACF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AAGF,eAAO,MAAM,oBAAoB,gCAGhC,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC;AACF,eAAO,MAAM,eAAe,4BAG3B,CAAC;AAGF,eAAO,MAAM,uBAAuB,mCAGnC,CAAC;AACF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,oBAAoB,gCAGhC,CAAC;AACF,eAAO,MAAM,cAAc,0BAAuE,CAAC;AACnG,eAAO,MAAM,kBAAkB,8BAG9B,CAAC;AAGF,eAAO,MAAM,mBAAmB,+BAG/B,CAAC;AACF,eAAO,MAAM,gBAAgB,4BAG5B,CAAC"}

package/dist/types/pt-BR.navigation.d.ts

@@ -2,7 +2,8 @@
  * The pt-BR pack for the navigation family. Split out of `pt-BR.ts`, which is a
  * barrel over this folder — see that file for why.
  */
-import type { BreadcrumbCopy, CommandPaletteCopy } from './copy';
+import type { BreadcrumbCopy, CommandPaletteCopy, SectionNavCopy } from './copy';
 export declare const PT_BR_COMMAND_PALETTE_COPY: CommandPaletteCopy;
 export declare const PT_BR_BREADCRUMB_COPY: BreadcrumbCopy;
+export declare const PT_BR_SECTION_NAV_COPY: SectionNavCopy;
 //# sourceMappingURL=pt-BR.navigation.d.ts.map

package/dist/types/pt-BR.navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pt-BR.navigation.d.ts","sourceRoot":"","sources":["../../src/pt-BR.navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EACnB,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,0BAA0B,EAAE,kBAMxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAGnC,CAAC"}
+{"version":3,"file":"pt-BR.navigation.d.ts","sourceRoot":"","sources":["../../src/pt-BR.navigation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,EACV,cAAc,EACd,kBAAkB,EAClB,cAAc,EACf,MAAM,QAAQ,CAAC;AAEhB,eAAO,MAAM,0BAA0B,EAAE,kBAMxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,cAGnC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,cAGpC,CAAC"}

package/dist/user-avatar.js

@@ -1,18 +1,18 @@
 import {
   UserAvatar,
   UserMenu
-} from "./chunk-O6IF4BZT.js";
+} from "./chunk-UUJ7J7NE.js";
 import "./chunk-UDQSIRAP.js";
-import "./chunk-NYFGFELX.js";
-import "./chunk-3ZVUNSFF.js";
+import "./chunk-PGPPN63I.js";
 import "./chunk-TNQDSTIA.js";
 import "./chunk-6ZZGK5DT.js";
+import "./chunk-3ZVUNSFF.js";
 import "./chunk-MTEQEPNY.js";
 import "./chunk-VUHLNYAE.js";
 import "./chunk-2GSIEDGN.js";
-import "./chunk-WN5PNP6F.js";
-import "./chunk-FKUYRQSP.js";
+import "./chunk-OP5JR5Q5.js";
 import "./chunk-76X6JRVI.js";
+import "./chunk-FKUYRQSP.js";
 import "./chunk-JH7EEJEQ.js";
 import "./chunk-BA4RHQ3B.js";
 import "./chunk-K6LNHHSH.js";

package/dist/utility/InfiniteScroll.js

@@ -1,9 +1,9 @@
 import "../chunk-H7NA4TXY.js";
 import {
   InfiniteScroll
-} from "../chunk-HNFZLXZI.js";
-import "../chunk-Y2X7LYIN.js";
+} from "../chunk-HBP2OU4Q.js";
 import "../chunk-5KNDAC24.js";
+import "../chunk-Y2X7LYIN.js";
 import "../chunk-YKCAJ2TN.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/utility/InstallPrompt.js

@@ -1,11 +1,11 @@
 import "../chunk-3QQVEYOR.js";
 import {
   InstallPrompt
-} from "../chunk-5ZOJLYD2.js";
-import "../chunk-GY62N32G.js";
+} from "../chunk-JE6RZ5L6.js";
 import {
   usePwaInstall
 } from "../chunk-5GMHJ7Y5.js";
+import "../chunk-GY62N32G.js";
 import "../chunk-WXYLH3QZ.js";
 import {
   PWA_INSTALL_AVAILABLE_EVENT,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.44.3",
+  "version": "6.45.1",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",
@@ -608,6 +608,10 @@
       "types": "./dist/types/components/navigation/Pagination/index.d.ts",
       "default": "./dist/navigation/Pagination.js"
     },
+    "./navigation/SectionNav": {
+      "types": "./dist/types/components/navigation/SectionNav/index.d.ts",
+      "default": "./dist/navigation/SectionNav.js"
+    },
     "./navigation/Tabs": {
       "types": "./dist/types/components/navigation/Tabs/index.d.ts",
       "default": "./dist/navigation/Tabs.js"

package/src/components/data-display/HoverCard/HoverCard.hooks.ts

@@ -105,29 +105,148 @@ const useEscapeKey = (active: boolean, onEscape: () => void) => {
  * backdrop, which `pointer-events: none` on the popover root (so the page
  * under an open card stays usable) takes out of play. So this listens on the
  * document itself, in the CAPTURE phase, where a `stopPropagation` further in
- * cannot swallow it. It only observes: no `preventDefault`, so the tap or
- * click still reaches whatever it landed on. Attached while open, removed on
- * close and on unmount.
+ * — including one a nested control (or something entirely unrelated to the
+ * card) calls on its OWN bubble — cannot swallow it (FUT-2776 adversarial
+ * review: a bubble-phase listener here was tried and reverted; see below).
+ * It only observes: no `preventDefault`, so the tap or click still reaches
+ * whatever it landed on. Attached while open, removed on close and on
+ * unmount.
+ *
+ * That capture placement is exactly what makes the decision impossible to
+ * make SYNCHRONOUSLY: `document` is the outermost node on the capture path,
+ * so this handler fires before React's own capture dispatch even starts —
+ * before `useCardOwnership`'s marker on the card's content root (also
+ * capture, but on a node further down the same tree) has had a chance to run
+ * for this same event. So the decision is deferred — but NOT to a microtask:
+ * a microtask here reads the marker before it is set for TRUSTED input (a
+ * real press, or Playwright's `page.mouse`), which is the very bug this hook
+ * exists to fix (FUT-2776, third-review adversarial probe, measured with
+ * real Chromium and `page.mouse.down()`):
+ *
+ *   TRUSTED:  doc-capture-sync → doc-capture-microtask (marker unset) → inner-capture (sets marker)
+ *   SCRIPT:   doc-capture-sync → inner-capture (sets marker) → doc-capture-microtask (marker set)
+ *
+ * Chromium runs any microtasks queued by a capture-phase listener BEFORE
+ * dispatching to the next listener on the path when the event is trusted —
+ * so a microtask queued here runs before `useCardOwnership`'s capture
+ * listener further down the tree ever gets a turn, and the ownership check
+ * always reads empty. A script-dispatched event (`fireEvent`, `userEvent` in
+ * jsdom, or in a Storybook `play` function) instead completes its WHOLE
+ * capture-then-bubble dispatch before any microtask runs — which is why
+ * every test under the microtask version passed and the bug still shipped.
+ * A macrotask (`setTimeout(0)`) is not part of the event dispatch under
+ * EITHER kind of input, so it always runs after the whole dispatch — marker
+ * included — regardless of trusted vs. script. That ordering is what this
+ * hook now relies on.
+ *
+ * `sessionRef` replaces a plain boolean: it is a fresh object assigned each
+ * time the card opens (this effect's mount), so a `setTimeout` callback
+ * queued for a press during one open session can tell whether it is still
+ * that SAME session by comparing against the ref, not just whether the card
+ * happens to be open again — the card closing and reopening while a stale
+ * timeout is still pending must not let that timeout act on the new session.
+ * Every scheduled timeout is also tracked so a close or unmount can cancel
+ * whatever is still pending, rather than letting it fire against a card that
+ * is no longer there to close.
  */
 const useClickAway = (
   active: boolean,
   inside: () => ReadonlyArray<Element | null>,
+  ownsEvent: (event: Event) => boolean,
   onAway: () => void,
 ) => {
+  const sessionRef = React.useRef<object | null>(null);
+  const pendingRef = React.useRef<Set<number>>(new Set());
+
   React.useEffect(() => {
-    if (!active) return;
+    if (!active) return undefined;
+
+    const session = {};
+    sessionRef.current = session;
 
     const handlePointerDown = (event: globalThis.PointerEvent) => {
-      const target = event.target as Node | null;
-      if (target && inside().some((el) => el?.contains(target))) return;
-      onAway();
+      const timeoutId = window.setTimeout(() => {
+        pendingRef.current.delete(timeoutId);
+        // Stale: this session closed (or a newer one opened) before this
+        // press's decision could run.
+        if (sessionRef.current !== session) return;
+
+        const target = event.target as Node | null;
+        const ownedByReactTree = ownsEvent(event);
+        const ownedByDom = Boolean(target) && inside().some((el) => el?.contains(target));
+        if (ownedByReactTree || ownedByDom) return;
+        onAway();
+      }, 0);
+      pendingRef.current.add(timeoutId);
     };
 
     document.addEventListener('pointerdown', handlePointerDown, true);
-    return () => document.removeEventListener('pointerdown', handlePointerDown, true);
-  }, [active, inside, onAway]);
+    return () => {
+      sessionRef.current = null;
+      pendingRef.current.forEach((id) => window.clearTimeout(id));
+      pendingRef.current.clear();
+      document.removeEventListener('pointerdown', handlePointerDown, true);
+    };
+  }, [active, inside, ownsEvent, onAway]);
 };
 
+/**
+ * Whether the pointerdown `useClickAway` is about to look at started inside
+ * the card's OWN React tree — a MUI `Select`'s menu, a nested `Popover`, a
+ * `DropdownMenu` the card's `content` renders — even when that control's DOM
+ * node is not a descendant of the card's box at all, because it portalled
+ * itself out near `document.body` (FUT-2776).
+ *
+ * React re-parents a portal's events to bubble AND capture through its OWNING
+ * React tree, not the DOM tree it renders into (see the React docs on
+ * `createPortal`), so an `onPointerDownCapture` on the card's own content root
+ * still fires for a press inside a portal the card's content renders, and
+ * NEVER fires for a press inside an unrelated one mounted by something that
+ * is not a descendant of the card in the REACT tree — ownership, not timing.
+ * That is the whole fix: the ORIGINAL approach (a `MutationObserver` on
+ * `document.body`) treated ANY element appended to the body while the card
+ * was open as inside, so an unrelated Snackbar, dev overlay or Popover that
+ * happened to mount at the same time stopped closing the card too.
+ *
+ * Tracked per NATIVE EVENT OBJECT in a `WeakSet`, not a boolean flag: a
+ * boolean stayed `true` forever once a press set it whose NATIVE propagation
+ * then got stopped before reaching `useClickAway`'s own (bubble-phase, in
+ * that earlier revision) listener — common for anything that treats the
+ * press as its own gesture — so the marker never got consumed, and the
+ * NEXT, genuinely outside press read a STALE `true` and stayed open
+ * (FUT-2776, caught on adversarial review of the first fix here). Keying on
+ * the event itself instead needs no consuming step and cannot go stale: a
+ * `WeakSet` entry only ever answers for the ONE dispatch that created it,
+ * and nothing outside this closure keeps a reference to a past pointerdown
+ * once `useClickAway`'s deferred (`setTimeout(0)`, not a microtask — see that
+ * hook for why) check for it has run, so the entry is simply garbage from
+ * then on.
+ */
+const useCardOwnership = () => {
+  const ownedEventsRef = React.useRef<WeakSet<Event>>(new WeakSet());
+
+  const markInside = React.useCallback((event: React.PointerEvent<HTMLElement>) => {
+    ownedEventsRef.current.add(event.nativeEvent);
+  }, []);
+
+  const ownsEvent = React.useCallback(
+    (event: Event) => ownedEventsRef.current.has(event),
+    [],
+  );
+
+  return { markInside, ownsEvent };
+};
+
+/** The trigger and the card's own box — a plain DOM containment check. */
+const useInsideCard = (
+  anchorEl: HTMLElement | null,
+  contentRef: React.MutableRefObject<HTMLDivElement | null>,
+) =>
+  React.useCallback(
+    () => [anchorEl, contentRef.current],
+    [anchorEl, contentRef],
+  );
+
 /** Whatever is still pending when the card unmounts is cancelled with it. */
 const useClearOnUnmount = (...refs: TimerRef[]) => {
   React.useEffect(
@@ -146,34 +265,22 @@ interface HoverCardTimingInput {
   onClose?: () => void;
 }
 
+type VisibilityInput = Omit<HoverCardTimingInput, 'touchEnabled'>;
+
 /**
- * When the card is open, and the delays that decide it.
+ * The open/close state and its two timers, split out of `useHoverCard` so
+ * that composing it with click-away, escape and ownership reads as one flat
+ * list rather than one long function.
  *
- * Three timers are in play: the enter delay before opening, the exit delay
- * before closing (so the pointer can travel from the trigger onto the card
- * without dismissing it), and the long-press timer on touch. Each cancels the
- * others' pending work, which is why they live together.
+ * The enter delay before opening and the exit delay before closing (so the
+ * pointer can travel from the trigger onto the card without dismissing it)
+ * each cancel the other's pending work, which is why they live together.
  */
-export const useHoverCard = ({
-  disabled,
-  touchEnabled,
-  enterDelay,
-  exitDelay,
-  onOpen,
-  onClose,
-}: HoverCardTimingInput) => {
+const useCardVisibility = ({ disabled, enterDelay, exitDelay, onOpen, onClose }: VisibilityInput) => {
   const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
   const enterTimeoutRef = React.useRef<number | undefined>(undefined);
   const exitTimeoutRef = React.useRef<number | undefined>(undefined);
-  /** The card's own box, inside the popover paper: a press here is not "away". */
-  const contentRef = React.useRef<HTMLDivElement | null>(null);
-
-  // Probed in an effect, not during render, so SSR and hydration stay intact.
-  React.useEffect(() => {
-    setIsTouchDevice('ontouchstart' in window);
-  }, []);
 
   const openCard = React.useCallback(
     (trigger: HTMLElement) => {
@@ -216,6 +323,29 @@ export const useHoverCard = ({
     onClose?.();
   }, [onClose]);
 
+  return { anchorEl, isOpen, openCard, closeCard, handleClose, enterTimeoutRef, exitTimeoutRef };
+};
+
+export const useHoverCard = ({
+  disabled,
+  touchEnabled,
+  enterDelay,
+  exitDelay,
+  onOpen,
+  onClose,
+}: HoverCardTimingInput) => {
+  const [isTouchDevice, setIsTouchDevice] = React.useState(false);
+  /** The card's own box, inside the popover paper: a press here is not "away". */
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  const { anchorEl, isOpen, openCard, closeCard, handleClose, enterTimeoutRef, exitTimeoutRef } =
+    useCardVisibility({ disabled, enterDelay, exitDelay, onOpen, onClose });
+
+  // Probed in an effect, not during render, so SSR and hydration stay intact.
+  React.useEffect(() => {
+    setIsTouchDevice('ontouchstart' in window);
+  }, []);
+
   const { triggerHandlers, cardHandlers } = useHoverHandlers({
     isTouchDevice,
     touchEnabled,
@@ -225,11 +355,21 @@ export const useHoverCard = ({
     exitTimeoutRef,
   });
 
-  const insideCard = React.useCallback(() => [anchorEl, contentRef.current], [anchorEl]);
+  const insideCard = useInsideCard(anchorEl, contentRef);
+  const { markInside, ownsEvent } = useCardOwnership();
 
   useEscapeKey(isOpen, handleClose);
-  useClickAway(isOpen, insideCard, handleClose);
+  useClickAway(isOpen, insideCard, ownsEvent, handleClose);
   useClearOnUnmount(enterTimeoutRef, exitTimeoutRef);
 
-  return { anchorEl, isOpen, handleClose, triggerHandlers, cardHandlers, contentRef };
+  return {
+    anchorEl,
+    isOpen,
+    handleClose,
+    triggerHandlers,
+    cardHandlers,
+    contentRef,
+    /** Wire onto the card's content root as `onPointerDownCapture` (FUT-2776). */
+    onContentPointerDownCapture: markInside,
+  };
 };

package/src/components/data-display/HoverCard/HoverCard.md

@@ -108,6 +108,7 @@ The HoverCard component displays additional information in a card-style popup wh
 
 - The component supports keyboard navigation (Escape key to close)
 - The card is dismissed by moving the pointer off the trigger and the card (after `exitDelay`), by Escape, or by a tap or click anywhere outside them. The outside press still reaches what it landed on: the page under an open card stays usable
+- Nested portal content is supported: if `children` opens something of its own in a portal — a MUI `Select`'s menu, a nested `Popover`, a `DropdownMenu` — a press inside it counts as inside the card too, so picking an option there does not dismiss the card. No extra wiring is needed for this; it works for anything the card's OWN content renders, portalled or not — ownership is by React tree membership, not by when something happened to mount to `document.body`, so an unrelated portal (a Snackbar, a dev overlay, another component's Popover) that mounts while the card is open is not treated as inside it, and a press there still closes the card like any other outside press
 - Proper ARIA attributes are applied to the popover
 - Focus management is handled automatically
 - Touch support for mobile devices can be enabled/disabled