@12-apps/ui 6.50.0 → 6.51.0

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

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAoC,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAiIpD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,MAAM,EACN,YAAY,GACb,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4CpB"}
+{"version":3,"file":"SectionNav.sheet.d.ts","sourceRoot":"","sources":["../../../../../src/components/navigation/SectionNav/SectionNav.sheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAMzC,OAAO,KAAK,EAAoC,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAqIpD;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,IAAI,EACJ,MAAM,EACN,YAAY,GACb,EAAE;IACD,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,WAAW,GAAG,SAAS,CAAC;IACvC,IAAI,EAAE,cAAc,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,0GAA0G;IAC1G,YAAY,EAAE,MAAM,CAAC;CACtB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CA4CpB"}

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

@@ -1,21 +1,61 @@
 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.
+ * One slot of the section — a bar slot on a phone, a row in the rail.
+ *
+ * A slot either LEADS somewhere (`href`, rendered through `linkComponent`) or
+ * DOES something (`onSelect`), the way a menu entry does. A bar of places is a
+ * section's navigation; a bar of verbs is a screen's actions pinned at its
+ * foot, and it is the same bar, so the two cannot be drawn two ways. Give a
+ * slot one or the other.
  */
 export interface SectionNavDestination {
     /** Stable key. Also the suffix of the slot's `data-testid`. */
     id: string;
     label: string;
     icon: ReactNode;
-    href: string;
+    href?: string;
+    /**
+     * What the slot does, for an action slot. Ignored while `disabled` or
+     * `loading`; still called while `dimmed`.
+     */
+    onSelect?: () => void;
+    /**
+     * Drawn dimmed and not operable: the act exists here, and cannot be done
+     * now. A native `disabled` button — a tap does nothing, and `onSelect` is
+     * not called.
+     */
+    disabled?: boolean;
+    /**
+     * Drawn exactly like `disabled`, but still TAPPABLE: for an act the screen
+     * cannot do now and should EXPLAIN when tapped. It reports
+     * `aria-disabled="true"`, stays focusable, never lights up, and its
+     * `onSelect` still fires so the host can answer with a message (why not,
+     * and what would make it possible).
+     */
+    dimmed?: boolean;
+    /**
+     * A write this slot started is in flight — a spinner replaces the icon, the
+     * slot reports `aria-busy` and `aria-disabled`, and a tap is ignored. It
+     * stays focusable, so the keyboard does not lose its place mid-write.
+     */
+    loading?: boolean;
+    /**
+     * The control's own `data-testid`, in place of the one the nav derives. For
+     * a host whose suites already drive an id of their own shape.
+     */
+    dataTestId?: 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. */
+    /**
+     * For a link: the destination the viewer is on (`aria-current="page"`). For
+     * an action slot: a toggle that is ON (`aria-pressed`). The host decides;
+     * the nav never reads the URL.
+     */
     active?: boolean;
 }
 /**
@@ -34,6 +74,13 @@ export interface SectionNavEntry {
     onSelect?: () => void;
     badge?: number;
     active?: boolean;
+    /** Drawn dimmed and not operable — a print already on its way, an act this state refuses. */
+    disabled?: boolean;
+    /**
+     * The control's own `data-testid`, in place of the one the nav derives. For
+     * a host whose suites already drive an id of their own shape.
+     */
+    dataTestId?: string;
 }
 /** A titled run of entries inside a menu. */
 export interface SectionNavGroup {
@@ -62,6 +109,32 @@ export interface SectionNavMenu {
     /** The sheet's heading, and the rail section's. */
     title: string;
     groups: SectionNavGroup[];
+    /** The trigger is drawn dimmed and does not open; in the rail every row of it is inert. */
+    disabled?: boolean;
+    /**
+     * The control's own `data-testid`, in place of the one the nav derives. For
+     * a host whose suites already drive an id of their own shape.
+     */
+    dataTestId?: string;
+}
+/**
+ * The raised primary as a plain ACTION rather than a menu: one act, done on
+ * tap. Its label is drawn under the button, because a bar of verbs names the
+ * act it is for rather than leaving it to an icon.
+ */
+export interface SectionNavAction {
+    label: string;
+    icon: ReactNode;
+    onSelect: () => void;
+    /** A native `disabled` button: a tap does nothing. */
+    disabled?: boolean;
+    /** In flight: a spinner, `aria-busy`, `aria-disabled`; focusable, and a tap is ignored. */
+    loading?: boolean;
+    /**
+     * The control's own `data-testid`, in place of the one the nav derives. For
+     * a host whose suites already drive an id of their own shape.
+     */
+    dataTestId?: string;
 }
 /** The way out of the section, drawn at the top of the rail. */
 export interface SectionNavBack {
@@ -81,8 +154,11 @@ export interface SectionNavProps {
     /** The navigation landmark's accessible name. */
     label: string;
     destinations: SectionNavDestination[];
-    /** The raised action in the middle of the bar. */
-    primary?: SectionNavMenu;
+    /**
+     * The raised button in the middle of the bar: a menu it opens as a sheet,
+     * or an action it does on tap (drawn with its label under it).
+     */
+    primary?: SectionNavMenu | SectionNavAction;
     /** 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. */

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

@@ -1 +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"}
+{"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;;;;;;;;GAQG;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,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,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;IACjB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;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;IAC1B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;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;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAC;IAC5C,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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SectionNavDestination, SectionNavMenu } from '../SectionNav.types';
+import type { SectionNavAction, 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
@@ -17,4 +17,14 @@ export declare function PhoneFrame({ children }: {
 export declare function RailFrame({ children }: {
     children: React.ReactNode;
 }): React.ReactElement;
+/**
+ * A screen's ACTIONS pinned at its foot — the same bar, drawn with verbs: a
+ * bill being settled, one person at a time.
+ *
+ * `split` is DIMMED — it cannot be done yet, and a tap still reaches the host
+ * so it can say why. `equal` is a TOGGLE that is on: `aria-pressed`, never
+ * `aria-current`, because an action is not a page.
+ */
+export declare const ACTIONS: SectionNavDestination[];
+export declare const PAY_ALL: SectionNavAction;
 //# sourceMappingURL=fixtures.d.ts.map

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

@@ -1 +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"}
+{"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,gBAAgB,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEnG;;;;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;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,qBAAqB,EAI1C,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,gBAIrB,CAAC"}

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

@@ -2,6 +2,6 @@ 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 { SectionNavAction, 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

@@ -1 +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"}
+{"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,gBAAgB,EAChB,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/tokens/density-overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"density-overrides.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAQlF,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,6BAA6B,EAC7B,yBAAyB,EACzB,8BAA8B,EAC9B,sBAAsB,GACvB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,6BAA6B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA8GtG,4DAA4D;AAC5D,wBAAgB,0BAA0B,IAAI,UAAU,CAAC,KAAK,CAAC,CAU9D;AAwCD,2FAA2F;AAC3F,wBAAgB,oBAAoB,IAAI,UAAU,CAAC,KAAK,CAAC,CAWxD"}
+{"version":3,"file":"density-overrides.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAQlF,OAAO,EACL,4BAA4B,EAC5B,mBAAmB,EACnB,6BAA6B,EAC7B,yBAAyB,EACzB,8BAA8B,EAC9B,sBAAsB,GACvB,MAAM,gCAAgC,CAAC;AACxC,OAAO,EAAE,6BAA6B,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AA4HtG,4DAA4D;AAC5D,wBAAgB,0BAA0B,IAAI,UAAU,CAAC,KAAK,CAAC,CAU9D;AA0CD,2FAA2F;AAC3F,wBAAgB,oBAAoB,IAAI,UAAU,CAAC,KAAK,CAAC,CAWxD"}

package/dist/types/tokens/density-overrides.navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"density-overrides.navigation.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA+ElF,8DAA8D;AAC9D,wBAAgB,4BAA4B,IAAI,UAAU,CAAC,KAAK,CAAC,CAUhE;AAYD,iFAAiF;AACjF,wBAAgB,mBAAmB,IAAI,UAAU,CAAC,KAAK,CAAC,CASvD;AAoBD,oEAAoE;AACpE,wBAAgB,yBAAyB,IAAI,UAAU,CAAC,KAAK,CAAC,CAS7D;AA0BD;;;GAGG;AACH,wBAAgB,8BAA8B,IAAI,UAAU,CAAC,KAAK,CAAC,CAUlE;AAwBD,8FAA8F;AAC9F,wBAAgB,sBAAsB,IAAI,UAAU,CAAC,KAAK,CAAC,CAW1D;AAsBD,0DAA0D;AAC1D,wBAAgB,6BAA6B,IAAI,UAAU,CAAC,KAAK,CAAC,CAQjE"}
+{"version":3,"file":"density-overrides.navigation.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AA+ElF,8DAA8D;AAC9D,wBAAgB,4BAA4B,IAAI,UAAU,CAAC,KAAK,CAAC,CAUhE;AAYD,iFAAiF;AACjF,wBAAgB,mBAAmB,IAAI,UAAU,CAAC,KAAK,CAAC,CASvD;AAiCD,oEAAoE;AACpE,wBAAgB,yBAAyB,IAAI,UAAU,CAAC,KAAK,CAAC,CAS7D;AA0BD;;;GAGG;AACH,wBAAgB,8BAA8B,IAAI,UAAU,CAAC,KAAK,CAAC,CAUlE;AAwBD,8FAA8F;AAC9F,wBAAgB,sBAAsB,IAAI,UAAU,CAAC,KAAK,CAAC,CAW1D;AAsBD,0DAA0D;AAC1D,wBAAgB,6BAA6B,IAAI,UAAU,CAAC,KAAK,CAAC,CAQjE"}

package/dist/types/tokens/density-overrides.selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"density-overrides.selection.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAoIlF;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,IAAI,UAAU,CAAC,KAAK,CAAC,CAKjE;AAgDD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,UAAU,CAAC,KAAK,CAAC,CAW1D"}
+{"version":3,"file":"density-overrides.selection.d.ts","sourceRoot":"","sources":["../../../src/tokens/density-overrides.selection.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAa,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAuIlF;;;;;;;GAOG;AACH,wBAAgB,6BAA6B,IAAI,UAAU,CAAC,KAAK,CAAC,CAKjE;AA8DD;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,UAAU,CAAC,KAAK,CAAC,CAW1D"}

package/dist/utility/WorkflowStep.js

@@ -7,10 +7,10 @@ import "../chunk-KNWG77FB.js";
 import "../chunk-TM5QQJTF.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/package.json

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

package/src/components/navigation/SectionNav/SectionNav.bar.tsx

@@ -1,15 +1,24 @@
 import Typography from '@mui/material/Typography/index.js';
-import { useTheme } from '@mui/material/styles/index.js';
+import { useTheme, type SxProps, type Theme } from '@mui/material/styles/index.js';
 import { useState, type ElementType, type ReactNode } from 'react';
 
 import type { SectionNavCopy } from '../../../copy';
 import { rem } from '../../../tokens/scales';
 
-import { barSlots, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';
-import { Box, CONTROL_RESET, CountedIcon, controlProps, focusRing } from './SectionNav.parts';
+import { barSlots, destinationState, isMenu, menuActive, menuCount, type BarSlot } from './SectionNav.helpers';
+import {
+  Box,
+  CONTROL_RESET,
+  CountedIcon,
+  NOT_LIVE,
+  SlotIcon,
+  controlProps,
+  destinationControl,
+  focusRing,
+} from './SectionNav.parts';
 import { RaisedActionButton } from './SectionNav.primary';
 import { SectionNavSheet } from './SectionNav.sheet';
-import type { SectionNavMenu, SectionNavProps } from './SectionNav.types';
+import type { SectionNavAction, SectionNavDestination, SectionNavMenu, SectionNavProps } from './SectionNav.types';
 
 /** Which of the bar's two menus is open, if any. */
 type OpenMenu = 'primary' | 'more' | null;
@@ -29,13 +38,17 @@ export function sectionNavBarInset(theme: Parameters<typeof rem>[0]): string {
 /**
  * One slot: icon over label, a count on the icon.
  *
- * `current` is the page the viewer is on and is what `aria-current` reports;
- * `lit` is only how the slot looks, and goes out while a sheet is open so the
- * bar shows where the thumb is. Opening a sheet is `aria-expanded`'s to say.
+ * `current` is the page the viewer is on and is what `aria-current` reports —
+ * a link's claim only; an action slot that is ON says so with `aria-pressed`,
+ * which arrives in `control`. `lit` is only how the slot looks, and goes out
+ * while a sheet is open so the bar shows where the thumb is. Opening a sheet
+ * is `aria-expanded`'s to say.
  *
- * A destination is a link; the "more" slot is a button that opens its sheet.
- * Either way the whole slot is the target, so a thumb landing on the label
- * lands on the control.
+ * A destination is a link or an action; the "more" slot is a button that
+ * opens its sheet. Either way the whole slot is the target, so a thumb landing
+ * on the label lands on the control. A `disabled` slot is a disabled button,
+ * dimmed — the act is still where the hand expects it. A `loading` or
+ * `dimmed` slot is drawn the same and stays focusable (`aria-disabled`).
  */
 function Slot({
   label,
@@ -47,6 +60,7 @@ function Slot({
   testId,
   control,
   expanded,
+  loading = false,
 }: {
   label: string;
   icon: ReactNode;
@@ -57,6 +71,7 @@ function Slot({
   testId: string;
   control: Record<string, unknown>;
   expanded?: boolean;
+  loading?: boolean;
 }): React.JSX.Element {
   const theme = useTheme();
   return (
@@ -64,36 +79,17 @@ function Slot({
       {...control}
       aria-current={current ? 'page' : undefined}
       aria-expanded={expanded}
+      aria-busy={loading || undefined}
       data-lit={lit ? 'true' : undefined}
       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)}
     >
-      <CountedIcon icon={icon} count={count} label={copy.badge} testId={`${testId}-badge`} />
+      <CountedIcon
+        icon={<SlotIcon icon={icon} loading={loading} />}
+        count={count}
+        label={copy.badge}
+        testId={`${testId}-badge`}
+      />
       <Typography
         component="span"
         variant="caption"
@@ -112,71 +108,152 @@ function Slot({
   );
 }
 
-/** One slot of the bar, whichever kind it is. */
-function BarSlotView({
-  slot,
-  primary,
-  more,
-  open,
-  toggle,
-  close,
-  linkComponent,
-  copy,
-  dataTestId,
-}: {
-  slot: BarSlot;
-  primary: SectionNavMenu | undefined;
-  more: SectionNavMenu | undefined;
+/** A slot's look: icon over label, the lit rule on its top edge, dimmed when disabled. */
+function slotSx(theme: Theme, lit: boolean): SxProps<Theme> {
+  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' },
+  } as SxProps<Theme>;
+}
+
+/** What every slot kind is handed: the bar's open state and how to change it. */
+interface SlotContext {
   open: OpenMenu;
   toggle: (menu: Exclude<OpenMenu, null>) => void;
   close: () => void;
   linkComponent: ElementType | undefined;
   copy: SectionNavCopy;
   dataTestId: string;
-}): React.JSX.Element | null {
-  if (slot.kind === 'primary' && primary) {
+}
+
+/** The raised button: an action runs on tap; a menu opens its sheet. */
+function PrimarySlot({
+  primary,
+  context,
+}: {
+  primary: SectionNavMenu | SectionNavAction;
+  context: SlotContext;
+}): React.JSX.Element {
+  const testId = primary.dataTestId ?? `${context.dataTestId}-primary`;
+  if (!isMenu(primary)) {
     return (
       <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 (
-      <Slot
-        label={more.label}
-        icon={more.icon}
-        count={menuCount(more)}
-        current={false}
-        lit={open === 'more' || (open === null && menuActive(more))}
-        expanded={open === 'more'}
-        copy={copy}
-        testId={`${dataTestId}-more`}
-        control={controlProps({ href: undefined, linkComponent, onClick: () => toggle('more') })}
+        captioned
+        disabled={primary.disabled}
+        loading={primary.loading}
+        dataTestId={testId}
+        onClick={() => {
+          context.close();
+          primary.onSelect();
+        }}
       />
     );
   }
-  if (slot.kind !== 'destination') return null;
-  const { destination } = slot;
+  return (
+    <RaisedActionButton
+      label={primary.label}
+      icon={primary.icon}
+      open={context.open === 'primary'}
+      closeLabel={context.copy.close}
+      disabled={primary.disabled}
+      dataTestId={testId}
+      onClick={() => context.toggle('primary')}
+    />
+  );
+}
+
+/** The "more" slot: a button that opens its sheet, carrying its entries' counts. */
+function MoreSlot({ more, context }: { more: SectionNavMenu; context: SlotContext }): React.JSX.Element {
+  const { open } = context;
+  return (
+    <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: undefined,
+        linkComponent: context.linkComponent,
+        inert: more.disabled === true,
+        onClick: () => context.toggle('more'),
+      })}
+    />
+  );
+}
+
+/** A destination: a link, or an action slot (a toggle when it carries `active`). */
+function DestinationSlot({
+  destination,
+  context,
+}: {
+  destination: SectionNavDestination;
+  context: SlotContext;
+}): React.JSX.Element {
+  const { current, lit } = destinationState(destination);
   return (
     <Slot
       label={destination.label}
       icon={destination.icon}
       count={destination.badge}
-      current={destination.active === true}
-      lit={open === null && destination.active === true}
-      copy={copy}
-      testId={`${dataTestId}-dest-${destination.id}`}
-      control={controlProps({ href: destination.href, linkComponent, onClick: close })}
+      current={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?.();
+      })}
     />
   );
 }
 
+/** One slot of the bar, whichever kind it is. */
+function BarSlotView({
+  slot,
+  primary,
+  more,
+  context,
+}: {
+  slot: BarSlot;
+  primary: SectionNavMenu | SectionNavAction | undefined;
+  more: SectionNavMenu | undefined;
+  context: SlotContext;
+}): React.JSX.Element | null {
+  if (slot.kind === 'primary') return primary ? <PrimarySlot primary={primary} context={context} /> : null;
+  if (slot.kind === 'more') return more ? <MoreSlot more={more} context={context} /> : null;
+  return <DestinationSlot destination={slot.destination} context={context} />;
+}
+
 /** The phone layout: a bottom bar, with its menus as bottom sheets. */
 export function SectionNavBar({
   label,
@@ -188,6 +265,7 @@ export function SectionNavBar({
   dataTestId,
 }: Required<Pick<SectionNavProps, 'label' | 'destinations' | 'copy' | 'dataTestId'>> &
   Pick<SectionNavProps, 'primary' | 'more'> & { linkComponent: ElementType | undefined }): React.JSX.Element {
+  const sheetMenu = isMenu(primary) ? primary : undefined;
   const theme = useTheme();
   const [open, setOpen] = useState<OpenMenu>(null);
   const toggle = (menu: Exclude<OpenMenu, null>): void => setOpen((current) => (current === menu ? null : menu));
@@ -222,18 +300,13 @@ export function SectionNavBar({
             slot={slot}
             primary={primary}
             more={more}
-            open={open}
-            toggle={toggle}
-            close={close}
-            linkComponent={linkComponent}
-            copy={copy}
-            dataTestId={dataTestId}
+            context={{ open, toggle, close, linkComponent, copy, dataTestId }}
           />
         ))}
       </Box>
-      {primary ? (
+      {sheetMenu ? (
         <SectionNavSheet
-          menu={primary}
+          menu={sheetMenu}
           open={open === 'primary'}
           onClose={close}
           linkComponent={linkComponent}

package/src/components/navigation/SectionNav/SectionNav.helpers.ts

@@ -1,4 +1,4 @@
-import type { SectionNavDestination, SectionNavMenu } from './SectionNav.types';
+import type { SectionNavAction, SectionNavDestination, SectionNavMenu } from './SectionNav.types';
 
 /** A count worth drawing: positive and finite. Zero and "unknown" draw nothing. */
 export function shownCount(count: number | undefined): number | undefined {
@@ -49,3 +49,18 @@ export function barSlots(
   if (hasPrimary) slots.splice(Math.floor(slots.length / 2), 0, { kind: 'primary' });
   return slots;
 }
+
+/** A primary that opens a sheet, as opposed to one that acts on tap. */
+export function isMenu(primary: SectionNavMenu | SectionNavAction | undefined): primary is SectionNavMenu {
+  return primary !== undefined && 'groups' in primary;
+}
+
+/**
+ * How a destination reads. `current` is `aria-current="page"` and belongs to a
+ * LINK only — an action slot that is ON reports `aria-pressed` instead. `lit`
+ * is the look, and a `dimmed` slot is never lit: it says "not now".
+ */
+export function destinationState(destination: SectionNavDestination): { current: boolean; lit: boolean } {
+  const active = destination.active === true;
+  return { current: active && destination.href !== undefined, lit: active && destination.dimmed !== true };
+}