@clicoh/orion-library 1.2.0-beta.24 → 1.2.0-beta.25

package/expresivo/ExpMascot/ExpMascot.d.ts

@@ -6,6 +6,8 @@ export type ExpMascotProps = {
     /** Width and height on screen, in pixels. */
     size?: number;
     motion?: ExpMascotMotion;
+    /** The light disc behind Bugi in dark mode. Off where an edge would cut it. */
+    backdrop?: boolean;
 } & Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
 /**
  * One of the official clicOH mascots, drawn from its file as is: never
@@ -19,7 +21,8 @@ export type ExpMascotProps = {
  * states, 80px on small screens, 48–64px inside a message or a toast.
  *
  * In dark mode Bugi sits on a light disc so it reads on the dark background;
- * Oculus and Fixi need none.
+ * Oculus and Fixi need none. `backdrop={false}` drops the disc where an edge
+ * would cut it, such as a mascot peeking from behind something.
  *
  * Renders nothing outside an `ExpScope`, or when the scope hides mascots.
  *
@@ -35,8 +38,9 @@ export type ExpMascotProps = {
  * @param {ExpMascotName} props.name - Mascot and pose, as in `oculus-01-feliz`.
  * @param {number} [props.size=112] - Width and height on screen, in pixels.
  * @param {'still' | 'float' | 'hang'} [props.motion='still'] - `float` bobs up and down; `hang` hangs it from a thread and swings it. Both stop with reduced motion.
+ * @param {boolean} [props.backdrop=true] - Light disc behind Bugi in dark mode.
  *
  * @returns {ReactNode} The mascot, or `null` outside an `ExpScope`.
  */
-export declare function ExpMascot({ name, size, motion, ...restProps }: ExpMascotProps): ReactNode;
+export declare function ExpMascot({ name, size, motion, backdrop, ...restProps }: ExpMascotProps): ReactNode;
 //# sourceMappingURL=ExpMascot.d.ts.map

package/expresivo/ExpMascot/ExpMascot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpMascot.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAU,EACV,MAAgB,EAChB,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAkC5B"}
+{"version":3,"file":"ExpMascot.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,KAAK,aAAa,EAAiB,MAAM,WAAW,CAAC;AAE9D,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,aAAa,CAAC;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,IAAU,EACV,MAAgB,EAChB,QAAe,EACf,GAAG,SAAS,EACb,EAAE,cAAc,GAAG,SAAS,CAmC5B"}

package/expresivo/ExpMascot/ExpMascot.jsx

@@ -14,7 +14,8 @@ import { mascotCatalog } from './catalog';
  * states, 80px on small screens, 48–64px inside a message or a toast.
  *
  * In dark mode Bugi sits on a light disc so it reads on the dark background;
- * Oculus and Fixi need none.
+ * Oculus and Fixi need none. `backdrop={false}` drops the disc where an edge
+ * would cut it, such as a mascot peeking from behind something.
  *
  * Renders nothing outside an `ExpScope`, or when the scope hides mascots.
  *
@@ -30,17 +31,19 @@ import { mascotCatalog } from './catalog';
  * @param {ExpMascotName} props.name - Mascot and pose, as in `oculus-01-feliz`.
  * @param {number} [props.size=112] - Width and height on screen, in pixels.
  * @param {'still' | 'float' | 'hang'} [props.motion='still'] - `float` bobs up and down; `hang` hangs it from a thread and swings it. Both stop with reduced motion.
+ * @param {boolean} [props.backdrop=true] - Light disc behind Bugi in dark mode.
  *
  * @returns {ReactNode} The mascot, or `null` outside an `ExpScope`.
  */
-export function ExpMascot({ name, size = 112, motion = 'still', ...restProps }) {
+export function ExpMascot({ name, size = 112, motion = 'still', backdrop = true, ...restProps }) {
     const options = useExpScopeOptions();
     if (!options || options.mascots === 'hidden')
         return null;
     return (<span {...restProps} aria-hidden="true" className={clsx('inline-flex shrink-0 flex-col items-center', motion === 'float' && 'exp-float', motion === 'hang' && 'exp-hang', restProps.className)}>
       {motion === 'hang' && (<span className="bg-lavender-1 dark:bg-lavender-dark-1 h-3.5 w-[1.5px]"/>)}
       {/* eslint-disable-next-line @next/next/no-img-element -- fixed-size package asset: `next/image` would lazy-load it */}
-      <img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className={clsx('block object-contain', name.startsWith('bugi-') &&
+      <img src={mascotCatalog[name].src} alt="" width={size} height={size} draggable={false} className={clsx('block object-contain', backdrop &&
+            name.startsWith('bugi-') &&
             'dark:bg-gray-6 dark:rounded-full dark:p-[8%]')}/>
     </span>);
 }

package/expresivo/ExpMascot/ExpMascot.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAW9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,qHAAqH,CACtH;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,sBAAsB,EACtB,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACtB,8CAA8C,CACjD,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ExpMascot.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpMascot/ExpMascot.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAsB,aAAa,EAAE,MAAM,WAAW,CAAC;AAa9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,IAAI,EACJ,IAAI,GAAG,GAAG,EACV,MAAM,GAAG,OAAO,EAChB,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACG;IACf,MAAM,OAAO,GAAG,kBAAkB,EAAE,CAAC;IAErC,IAAI,CAAC,OAAO,IAAI,OAAO,CAAC,OAAO,KAAK,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE1D,OAAO,CACL,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,MAAM,CAClB,SAAS,CAAC,CAAC,IAAI,CACb,4CAA4C,EAC5C,MAAM,KAAK,OAAO,IAAI,WAAW,EACjC,MAAM,KAAK,MAAM,IAAI,UAAU,EAC/B,SAAS,CAAC,SAAS,CACpB,CAAC,CAEF;MAAA,CAAC,MAAM,KAAK,MAAM,IAAI,CACpB,CAAC,IAAI,CAAC,SAAS,CAAC,uDAAuD,EAAG,CAC3E,CACD;MAAA,CAAC,qHAAqH,CACtH;MAAA,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAC7B,GAAG,CAAC,EAAE,CACN,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,MAAM,CAAC,CAAC,IAAI,CAAC,CACb,SAAS,CAAC,CAAC,KAAK,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CACb,sBAAsB,EACtB,QAAQ;YACN,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC;YACxB,8CAA8C,CACjD,CAAC,EAEN;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC"}

package/expresivo/ExpPageHero/ExpPageHero.d.ts

@@ -1,10 +1,13 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import type { ExpMascotName } from '../ExpMascot/catalog';
 export type ExpPageHeroLevel = 'h3' | 'h4' | 'h5';
+export type ExpPageHeroNarrowLayout = 'row' | 'band' | 'framed';
 export type ExpPageHeroBubble = {
     title?: ReactNode;
     text?: ReactNode;
     badge?: ReactNode;
+    /** Sets the title larger, in the display font, as `ExpBubble` does. */
+    display?: boolean;
 };
 export type ExpPageHeroCollapse = {
     collapsed: boolean;
@@ -26,6 +29,13 @@ export type ExpPageHeroProps = {
     mascot?: ExpMascotName;
     bubble?: ExpPageHeroBubble;
     collapse?: ExpPageHeroCollapse;
+    /**
+     * How it renders below `lg`: a plain title row with `children` (`row`), the band with only the title and
+     * `actions` (`band`), or the band around the title, `children` and `actions` (`framed`).
+     */
+    narrowLayout?: ExpPageHeroNarrowLayout;
+    /** Mascot peeking over the top right edge of the band, below `lg` and only with `band` or `framed`. Decorative. */
+    peek?: ExpMascotName;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
 /**
  * Page header for the top of a screen, meant for the `heading` slot of
@@ -34,9 +44,13 @@ export type ExpPageHeroProps = {
  *
  * On wide screens it draws a band with a dotted lavender background. With
  * `collapse`, a corner button tucks it down to the title, and the mascot hangs
- * from a thread instead; the consumer keeps the state. On small screens it is
- * a plain title row without eyebrow, description, mascot or bubble, and
- * `collapse` has no effect. Children still show there.
+ * from a thread instead; the consumer keeps the state. On small screens it
+ * drops the eyebrow, description, mascot and bubble, and `collapse` has no
+ * effect. With `narrowLayout="row"` (default) it is a plain title row and the
+ * children still show; with `narrowLayout="band"` it keeps the band around the
+ * title and the actions, and hides the children too; with `"framed"` the band
+ * holds the title, the children and the actions. In both, `peek` shows the top
+ * of a mascot over the band's top right edge, as if hiding behind it.
  *
  * Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
  * title, adornment, description, children and actions.
@@ -73,10 +87,12 @@ export type ExpPageHeroProps = {
  * @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
  * @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
  * @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
- * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
+ * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text`, `badge` and `display` (larger title in the display font).
  * @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
+ * @param {'row' | 'band' | 'framed'} [props.narrowLayout='row'] - Below `lg`: a plain title row with the children, the band with only the title and the actions, or the band around all three.
+ * @param {ExpMascotName} [props.peek] - Mascot whose top peeks over the band's top right edge, below `lg` and only with `band` or `framed`.
  *
  * @returns {ReactNode} The page header.
  */
-export declare function ExpPageHero({ title, eyebrow, headingLevel, titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }: ExpPageHeroProps): ReactNode;
+export declare function ExpPageHero({ title, eyebrow, headingLevel, titleAdornment, description, children, actions, mascot, bubble, collapse, narrowLayout, peek, ...restProps }: ExpPageHeroProps): ReactNode;
 //# sourceMappingURL=ExpPageHero.d.ts.map

package/expresivo/ExpPageHero/ExpPageHero.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpPageHero.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAE/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAmH9B"}
+{"version":3,"file":"ExpPageHero.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,SAAS,EAAS,MAAM,OAAO,CAAC;AAKnE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhE,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,gEAAgE;IAChE,WAAW,EAAE,MAAM,CAAC;IACpB,iEAAiE;IACjE,aAAa,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wEAAwE;IACxE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IAC/B;;;OAGG;IACH,YAAY,CAAC,EAAE,uBAAuB,CAAC;IACvC,mHAAmH;IACnH,IAAI,CAAC,EAAE,aAAa,CAAC;CACtB,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAQ/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,YAAmB,EACnB,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,EACN,QAAQ,EACR,YAAoB,EACpB,IAAI,EACJ,GAAG,SAAS,EACb,EAAE,gBAAgB,GAAG,SAAS,CAmJ9B"}

package/expresivo/ExpPageHero/ExpPageHero.jsx

@@ -6,6 +6,11 @@ import { ExpBubble } from '../ExpBubble/ExpBubble';
 import { ExpCollapseToggle } from '../ExpCollapseToggle/ExpCollapseToggle';
 import { ExpMascot } from '../ExpMascot/ExpMascot';
 import { useExpScopeOptions } from '../ExpScope/ExpScope';
+/** Poses whose face sits lower in the drawing show more of it over the edge, so the eyes clear it. */
+const peekHeight = {
+    'oculus-02-investigando': 'h-12',
+    'bugi-02-investigando': 'h-12',
+};
 /**
  * Page header for the top of a screen, meant for the `heading` slot of
  * `DashboardTemplate`: an eyebrow, the title, a description, optional content
@@ -13,9 +18,13 @@ import { useExpScopeOptions } from '../ExpScope/ExpScope';
  *
  * On wide screens it draws a band with a dotted lavender background. With
  * `collapse`, a corner button tucks it down to the title, and the mascot hangs
- * from a thread instead; the consumer keeps the state. On small screens it is
- * a plain title row without eyebrow, description, mascot or bubble, and
- * `collapse` has no effect. Children still show there.
+ * from a thread instead; the consumer keeps the state. On small screens it
+ * drops the eyebrow, description, mascot and bubble, and `collapse` has no
+ * effect. With `narrowLayout="row"` (default) it is a plain title row and the
+ * children still show; with `narrowLayout="band"` it keeps the band around the
+ * title and the actions, and hides the children too; with `"framed"` the band
+ * holds the title, the children and the actions. In both, `peek` shows the top
+ * of a mascot over the band's top right edge, as if hiding behind it.
  *
  * Outside an `ExpScope` it renders the core title row of `DashboardTemplate`:
  * title, adornment, description, children and actions.
@@ -52,17 +61,21 @@ import { useExpScopeOptions } from '../ExpScope/ExpScope';
  * @param {ReactNode} [props.children] - Content under the description, such as stat chips; hidden while collapsed.
  * @param {ReactNode} [props.actions] - Content on the right, such as buttons; it moves under the title on small screens.
  * @param {ExpMascotName} [props.mascot] - Mascot on the right, 104px; 56px and hanging while collapsed.
- * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text` and `badge`.
+ * @param {ExpPageHeroBubble} [props.bubble] - Speech bubble next to the mascot: `title`, `text`, `badge` and `display` (larger title in the display font).
  * @param {ExpPageHeroCollapse} [props.collapse] - Makes the header collapsible: `collapsed`, `onToggle`, `expandLabel` and `collapseLabel`.
+ * @param {'row' | 'band' | 'framed'} [props.narrowLayout='row'] - Below `lg`: a plain title row with the children, the band with only the title and the actions, or the band around all three.
+ * @param {ExpMascotName} [props.peek] - Mascot whose top peeks over the band's top right edge, below `lg` and only with `band` or `framed`.
  *
  * @returns {ReactNode} The page header.
  */
-export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornment, description, children, actions, mascot, bubble, collapse, ...restProps }) {
+export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornment, description, children, actions, mascot, bubble, collapse, narrowLayout = 'row', peek, ...restProps }) {
     const options = useExpScopeOptions();
     const generatedId = useId();
     const id = restProps.id ?? generatedId;
     const collapsed = !!collapse?.collapsed;
     const hasAside = !!mascot || !!bubble;
+    const band = narrowLayout === 'band';
+    const framed = narrowLayout === 'framed';
     const titleRow = (<div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
       <Heading level={headingLevel}>{title}</Heading>
       {titleAdornment}
@@ -79,7 +92,9 @@ export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornmen
         {actions}
       </div>);
     }
-    return (<div {...restProps} id={id} data-state={collapsed ? 'collapsed' : 'expanded'} className={clsx('exp-hero relative flex flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between lg:gap-6', collapsed
+    return (<div {...restProps} id={id} data-state={collapsed ? 'collapsed' : 'expanded'} data-narrow={narrowLayout} className={clsx('exp-hero relative flex gap-3 sm:flex-row sm:items-center sm:justify-between lg:gap-6', band
+            ? 'flex-row flex-wrap items-center justify-between px-4 py-3 lg:flex-nowrap'
+            : 'flex-col items-start', framed && 'px-4 py-4', collapsed
             ? 'lg:min-h-[72px] lg:py-3.5 lg:pr-30 lg:pl-6'
             : 'lg:px-8 lg:py-6', !collapsed && !!collapse && !hasAside && 'lg:pr-20', restProps.className)}>
       <div className="flex min-w-0 flex-col items-start gap-1 lg:flex-[1_1_420px]">
@@ -91,17 +106,22 @@ export function ExpPageHero({ title, eyebrow, headingLevel = 'h3', titleAdornmen
         {!!description && (<div className={clsx('text-gray-1 dark:text-gray-2 hidden max-w-[680px] text-sm leading-[22px] text-pretty', !collapsed && 'lg:block')}>
             {description}
           </div>)}
-        {!!children && (<div className={clsx('mt-2 w-full', collapsed && 'lg:hidden')}>
+        {!!children && (<div className={clsx('mt-2 w-full', band && 'hidden', band && !collapsed && 'lg:block', !band && collapsed && 'lg:hidden')}>
             {children}
           </div>)}
       </div>
       {actions}
       {!!hasAside && (<div className={clsx('hidden shrink-0 items-center gap-4', !collapsed && 'lg:flex', !!collapse && 'lg:mr-7')}>
-          {!!bubble && (<ExpBubble tail="right" title={bubble.title} badge={bubble.badge}>
+          {!!bubble && (<ExpBubble tail="right" title={bubble.title} badge={bubble.badge} display={!!bubble.display}>
               {bubble.text}
             </ExpBubble>)}
           {!!mascot && <ExpMascot name={mascot} size={104}/>}
         </div>)}
+      {!!(band || framed) && !!peek && (<span aria-hidden="true" className={clsx('pointer-events-none absolute right-5 bottom-full mb-px flex w-16 justify-center overflow-hidden lg:hidden', peekHeight[peek] ?? 'h-10')}>
+          <span className="shrink-0">
+            <ExpMascot name={peek} size={64} motion="still" backdrop={false}/>
+          </span>
+        </span>)}
       {!!collapsed && !!mascot && (<span className="absolute top-0 right-18 hidden lg:block">
           <ExpMascot name={mascot} size={56} motion="hang"/>
         </span>)}

package/expresivo/ExpPageHero/ExpPageHero.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpPageHero.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/ExpPageHero.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpPageHero/index.d.ts

@@ -1,3 +1,3 @@
 export { ExpPageHero } from './ExpPageHero';
-export type { ExpPageHeroBubble, ExpPageHeroCollapse, ExpPageHeroLevel, ExpPageHeroProps, } from './ExpPageHero';
+export type { ExpPageHeroBubble, ExpPageHeroCollapse, ExpPageHeroLevel, ExpPageHeroNarrowLayout, ExpPageHeroProps, } from './ExpPageHero';
 //# sourceMappingURL=index.d.ts.map

package/expresivo/ExpPageHero/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPageHero/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,iBAAiB,EACjB,mBAAmB,EACnB,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,eAAe,CAAC"}

package/expresivo/ExpPillButton/ExpPillButton.d.ts

@@ -1,9 +1,12 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export type ExpPillButtonTone = 'brand' | 'soft';
-export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'none';
+export type ExpPillButtonIcon = 'lens' | 'sync' | 'enter' | 'add' | 'none';
+export type ExpPillButtonSize = 'md' | 'sm';
 export type ExpPillButtonProps = {
     tone?: ExpPillButtonTone;
     icon?: ExpPillButtonIcon;
+    /** `md` is 44px tall, like the core `Button`; `sm` is 32px, for a dense header or row. */
+    size?: ExpPillButtonSize;
     /** Blocks the button and animates its glyph while the action runs. */
     busy?: boolean;
     /** Label shown while `busy`. Defaults to `children`. */
@@ -15,7 +18,7 @@ export type ExpPillButtonProps = {
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 /**
  * Light pill-shaped call to action, the same 44px height as the core
- * `Button`. `brand` is a filled lavender pill that turns into the clicOH
+ * `Button` (32px with `size="sm"`). `brand` is a filled lavender pill that turns into the clicOH
  * gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
  * for secondary actions, such as a button inside a field.
  *
@@ -33,7 +36,8 @@ export type ExpPillButtonProps = {
  *
  * @param {Object} props - The properties of the ExpPillButton component.
  * @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
- * @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {'lens' | 'sync' | 'enter' | 'add' | 'none'} [props.icon='lens'] - Glyph before the label; `add` is a plus, for an action that creates something.
+ * @param {'md' | 'sm'} [props.size='md'] - 44px tall, or 32px with a smaller label and glyph; outside an `ExpScope` it maps to the core `Button` `md` or `sm`.
  * @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
  * @param {string} [props.busyLabel] - Label shown while `busy`.
  * @param {boolean} [props.block=false] - Takes the full width of its container.
@@ -43,5 +47,5 @@ export type ExpPillButtonProps = {
  *
  * @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
  */
-export declare function ExpPillButton({ tone, icon, busy, busyLabel, block, flush, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
+export declare function ExpPillButton({ tone, icon, size, busy, busyLabel, block, flush, disabled, children, ...restProps }: ExpPillButtonProps): ReactNode;
 //# sourceMappingURL=ExpPillButton.d.ts.map

package/expresivo/ExpPillButton/ExpPillButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAiC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAY,EACZ,SAAS,EACT,KAAa,EACb,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAiEhC"}
+{"version":3,"file":"ExpPillButton.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAW7D,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,MAAM,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;AAE3E,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,sEAAsE;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6CAA6C;IAC7C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AA0E5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAc,EACd,IAAa,EACb,IAAW,EACX,IAAY,EACZ,SAAS,EACT,KAAa,EACb,KAAa,EACb,QAAgB,EAChB,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,kBAAkB,GAAG,SAAS,CAwEhC"}

package/expresivo/ExpPillButton/ExpPillButton.jsx

@@ -1,6 +1,6 @@
 'use client';
 import clsx from 'clsx';
-import { FiLogIn, FiRefreshCw, FiSearch } from 'react-icons/fi';
+import { FiLogIn, FiPlus, FiRefreshCw, FiSearch } from 'react-icons/fi';
 import { Button } from '@clicoh/orion-library';
 import { useExpScope } from '../ExpScope/ExpScope';
 import { EnterGlyph, LensGlyph, SyncBadgeGlyph, SyncGlyph, } from '../shared/glyphs';
@@ -8,9 +8,36 @@ const fallbackIconMap = {
     lens: <FiSearch />,
     sync: <FiRefreshCw />,
     enter: <FiLogIn />,
+    add: <FiPlus />,
     none: undefined,
 };
 const liftClass = 'hover:-translate-y-px active:translate-y-0 active:scale-[.98]';
+const sizeMap = {
+    md: {
+        text: 'gap-2.5 text-sm leading-5',
+        height: 'h-11',
+        padBare: 'px-6',
+        padDisc: 'pr-[22px] pl-1.5',
+        padGlyph: 'pr-[18px] pl-3',
+        disc: 'size-8',
+        lens: 22,
+        badge: 32,
+        glyph: 20,
+        plus: 'size-5',
+    },
+    sm: {
+        text: 'gap-1.5 text-xs leading-4',
+        height: 'h-8',
+        padBare: 'px-4',
+        padDisc: 'pr-4 pl-1',
+        padGlyph: 'pr-3.5 pl-2.5',
+        disc: 'size-6',
+        lens: 16,
+        badge: 24,
+        glyph: 16,
+        plus: 'size-4',
+    },
+};
 const toneMap = {
     brand: {
         idle: clsx('bg-lavender dark:bg-lavender-dark text-white shadow-[0_3px_10px_rgba(106,93,249,0.22)]', 'hover:from-lavender hover:to-violet hover:bg-linear-135 hover:shadow-[0_8px_20px_rgba(200,84,228,0.28)]'),
@@ -25,7 +52,7 @@ const toneMap = {
 };
 /**
  * Light pill-shaped call to action, the same 44px height as the core
- * `Button`. `brand` is a filled lavender pill that turns into the clicOH
+ * `Button` (32px with `size="sm"`). `brand` is a filled lavender pill that turns into the clicOH
  * gradient on hover, with its glyph in a white disc; `soft` is a tinted pill
  * for secondary actions, such as a button inside a field.
  *
@@ -43,7 +70,8 @@ const toneMap = {
  *
  * @param {Object} props - The properties of the ExpPillButton component.
  * @param {'brand' | 'soft'} [props.tone='brand'] - Filled lavender or tinted.
- * @param {'lens' | 'sync' | 'enter' | 'none'} [props.icon='lens'] - Glyph before the label.
+ * @param {'lens' | 'sync' | 'enter' | 'add' | 'none'} [props.icon='lens'] - Glyph before the label; `add` is a plus, for an action that creates something.
+ * @param {'md' | 'sm'} [props.size='md'] - 44px tall, or 32px with a smaller label and glyph; outside an `ExpScope` it maps to the core `Button` `md` or `sm`.
  * @param {boolean} [props.busy=false] - Blocks the button and animates its glyph.
  * @param {string} [props.busyLabel] - Label shown while `busy`.
  * @param {boolean} [props.block=false] - Takes the full width of its container.
@@ -53,24 +81,26 @@ const toneMap = {
  *
  * @returns {ReactNode} The rendered pill, or a core `Button` outside an `ExpScope`.
  */
-export function ExpPillButton({ tone = 'brand', icon = 'lens', busy = false, busyLabel, block = false, flush = false, disabled = false, children, ...restProps }) {
+export function ExpPillButton({ tone = 'brand', icon = 'lens', size = 'md', busy = false, busyLabel, block = false, flush = false, disabled = false, children, ...restProps }) {
     const inScope = useExpScope();
     const label = busy && busyLabel ? busyLabel : children;
+    const sizing = sizeMap[size];
     if (!inScope) {
-        return (<Button {...restProps} modifier={tone === 'brand' ? 'principal' : 'second'} iconL={fallbackIconMap[icon]} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
+        return (<Button {...restProps} modifier={tone === 'brand' ? 'principal' : 'second'} size={size} iconL={fallbackIconMap[icon]} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx(block && 'w-full', restProps.className)}>
         {label}
       </Button>);
     }
     const state = disabled ? 'disabled' : busy ? 'busy' : 'idle';
     const hasDisc = tone === 'brand' && (icon === 'lens' || icon === 'sync');
-    return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('items-center gap-2.5 rounded-full text-sm leading-5 font-semibold whitespace-nowrap', 'transition-[background-color,box-shadow,translate,scale] duration-200 motion-reduce:translate-none motion-reduce:scale-none motion-reduce:transition-none', flush ? 'h-full' : 'h-11', !flush && state === 'idle' && liftClass, block ? 'flex w-full justify-center' : 'inline-flex', icon === 'none' && 'px-6', icon !== 'none' && (hasDisc ? 'pr-[22px] pl-1.5' : 'pr-[18px] pl-3'), toneMap[tone][state], restProps.className)}>
-      {tone === 'brand' && icon === 'lens' && (<span aria-hidden="true" className={clsx('flex size-8 shrink-0 items-center justify-center rounded-full', disabled ? 'bg-gray-6' : 'bg-white')}>
-          <LensGlyph size={22} busy={busy} disabled={disabled}/>
+    return (<button {...restProps} disabled={disabled || busy} aria-busy={busy || undefined} className={clsx('items-center rounded-full font-semibold whitespace-nowrap', 'transition-[background-color,box-shadow,translate,scale] duration-200 motion-reduce:translate-none motion-reduce:scale-none motion-reduce:transition-none', sizing.text, flush ? 'h-full' : sizing.height, !flush && state === 'idle' && liftClass, block ? 'flex w-full justify-center' : 'inline-flex', icon === 'none' && sizing.padBare, icon !== 'none' && (hasDisc ? sizing.padDisc : sizing.padGlyph), toneMap[tone][state], restProps.className)}>
+      {tone === 'brand' && icon === 'lens' && (<span aria-hidden="true" className={clsx('flex shrink-0 items-center justify-center rounded-full', sizing.disc, disabled ? 'bg-gray-6' : 'bg-white')}>
+          <LensGlyph size={sizing.lens} busy={busy} disabled={disabled}/>
         </span>)}
-      {tone === 'brand' && icon === 'sync' && (<SyncBadgeGlyph size={32} busy={busy} disabled={disabled}/>)}
-      {tone === 'soft' && icon === 'lens' && (<LensGlyph size={20} busy={busy} disabled={disabled}/>)}
-      {tone === 'soft' && icon === 'sync' && (<SyncGlyph size={20} busy={busy} disabled={disabled}/>)}
-      {icon === 'enter' && (<EnterGlyph size={20} busy={busy} disabled={disabled}/>)}
+      {tone === 'brand' && icon === 'sync' && (<SyncBadgeGlyph size={sizing.badge} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'lens' && (<LensGlyph size={sizing.glyph} busy={busy} disabled={disabled}/>)}
+      {tone === 'soft' && icon === 'sync' && (<SyncGlyph size={sizing.glyph} busy={busy} disabled={disabled}/>)}
+      {icon === 'enter' && (<EnterGlyph size={sizing.glyph} busy={busy} disabled={disabled}/>)}
+      {icon === 'add' && (<FiPlus aria-hidden="true" className={clsx('shrink-0', sizing.plus)}/>)}
       {label}
     </button>);
 }

package/expresivo/ExpPillButton/ExpPillButton.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"ExpPillButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ExpPillButton.jsx","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/ExpPillButton.tsx"],"names":[],"mappings":"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"}

package/expresivo/ExpPillButton/index.d.ts

@@ -1,3 +1,3 @@
 export { ExpPillButton } from './ExpPillButton';
-export type { ExpPillButtonIcon, ExpPillButtonProps, ExpPillButtonTone, } from './ExpPillButton';
+export type { ExpPillButtonIcon, ExpPillButtonProps, ExpPillButtonSize, ExpPillButtonTone, } from './ExpPillButton';
 //# sourceMappingURL=index.d.ts.map

package/expresivo/ExpPillButton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpPillButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/expresivo/ExpTabs/ExpTabs.d.ts

@@ -0,0 +1,52 @@
+import { TabList } from '@clicoh/orion-library';
+import { type ComponentProps, type ReactNode } from 'react';
+import type { ExpMascotName } from '../ExpMascot/catalog';
+export type ExpTabsProps = {
+    /** Same items as the core `TabList`: `title`, optional `icon` and `count`, and the panel as `children`. */
+    list: ComponentProps<typeof TabList>['list'];
+    /** Accessible name of the row of tabs. */
+    ariaLabel: string;
+    /** Called with the index of the tab the user opens. */
+    callback?: (index: number) => void;
+    /** Index of the tab open on mount. */
+    firstActiveTab?: number;
+    /** Mascot that peeks from behind the end of the row, from `lg` up. Decorative. */
+    peek?: ExpMascotName;
+    /** Shows the `peek` below `lg` too. Only when the tabs fit a phone's width: the rail scrolls otherwise. */
+    narrowPeek?: boolean;
+    className?: string;
+};
+/**
+ * Tabs as a pill rail: the open tab is a white pill that slides to the tab
+ * the user picks. Arrow keys, Home and End move between tabs. `peek` puts a
+ * mascot behind the end of the rail, from `lg` up, or at every width with
+ * `narrowPeek`.
+ *
+ * The panel of the open tab renders below the rail, as in the core
+ * `TabList`. Outside an `ExpScope` it falls back to `TabList` `second` with
+ * the same `list`.
+ *
+ * @component
+ * @example
+ * <ExpTabs
+ *   ariaLabel="Search type"
+ *   peek="bugi-05-sorprendido"
+ *   list={[
+ *     { title: 'Messages', children: <MessageSearch /> },
+ *     { title: 'Routes', children: <RouteSearch /> },
+ *   ]}
+ * />
+ *
+ * @param {ExpTabsProps} props - The properties of the ExpTabs component.
+ * @param {Array<Object>} props.list - Tabs with `title`, optional `icon` and `count`, and the panel as `children`.
+ * @param {string} props.ariaLabel - Accessible name of the row of tabs.
+ * @param {(index: number) => void} [props.callback] - Called with the index of the tab the user opens.
+ * @param {number} [props.firstActiveTab=0] - Index of the tab open on mount.
+ * @param {ExpMascotName} [props.peek] - Mascot behind the end of the rail, from `lg` up.
+ * @param {boolean} [props.narrowPeek=false] - Shows the `peek` below `lg` too.
+ * @param {string} [props.className] - Classes for the wrapper.
+ *
+ * @returns {ReactNode} The rail and the open panel, or a core `TabList` outside an `ExpScope`.
+ */
+export declare function ExpTabs({ list, ariaLabel, callback, firstActiveTab, peek, narrowPeek, className, }: ExpTabsProps): ReactNode;
+//# sourceMappingURL=ExpTabs.d.ts.map

package/expresivo/ExpTabs/ExpTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpTabs.d.ts","sourceRoot":"","sources":["../../src/expresivo/ExpTabs/ExpTabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAQ,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAK1D,MAAM,MAAM,YAAY,GAAG;IACzB,2GAA2G;IAC3G,IAAI,EAAE,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC;IAC7C,0CAA0C;IAC1C,SAAS,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kFAAkF;IAClF,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,2GAA2G;IAC3G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,cAAkB,EAClB,IAAI,EACJ,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,GAAG,SAAS,CAoI1B"}