basalt-ui 1.26.0 → 1.28.0

package/dist/shell/page-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-bar.d.ts","sourceRoot":"","sources":["../../src/shell/page-bar.tsx"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAKjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAG9D,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,wBAAwB,CAAA;AA0BxD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,QAAQ,GACT,EAAE;IACD,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,SAAS,CA2BZ;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAGlE;AAED,yFAAyF;AACzF,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED,MAAM,MAAM,YAAY,GAAG;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,qGAAqG;IACrG,IAAI,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;IACrC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;;;;;OAWG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA2DD,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,GACV,EAAE,YAAY,GAAG,SAAS,CAmG1B"}
+{"version":3,"file":"page-bar.d.ts","sourceRoot":"","sources":["../../src/shell/page-bar.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAMnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAA;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAK9D,mEAAmE;AACnE,eAAO,MAAM,mBAAmB,wBAAwB,CAAA;AAExD;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gFAAgF;IAChF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;CACzB,CAAA;AAuDD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,aAAa,EACb,QAAQ,GACT,EAAE;IACD,aAAa,EAAE,SAAS,YAAY,EAAE,CAAA;IACtC,QAAQ,EAAE,SAAS,CAAA;CACpB,GAAG,SAAS,CAsDZ;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAGlE;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,+BAGtE;AAED,yFAAyF;AACzF,wBAAgB,mBAAmB,IAAI,OAAO,CAE7C;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,IAAI;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,MAAM,IAAI,CAAA;IAC7C,MAAM,EAAE,WAAW,GAAG,IAAI,CAAA;CAC3B,CAGA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAElD,MAAM,MAAM,YAAY,GAAG,WAAW,GACpC,eAAe,CAAC,WAAW,CAAC,GAAG;IAC7B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,qGAAqG;IACrG,IAAI,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;IACrC,6CAA6C;IAC7C,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB,CAAA;AAmEH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,OAAO,EACP,UAAU,EACV,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,GACX,EAAE,YAAY,GAAG,SAAS,CA0L1B"}

package/dist/shell/page-bar.js

@@ -1,27 +1,36 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState
-} from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
+import { cx } from "../common/props.js";
 import { CtlSlot } from "../theme/index.js";
 import { BarActionRow, BarExtrasProvider, globalActionAsBarAction } from "../controls/actions.js";
+import { FilterPill } from "../controls/filter-pill.js";
+import { FilterSheet } from "../controls/filter-sheet.js";
 import { SyncButton } from "../controls/sync-button.js";
+import { useIsomorphicLayoutEffect } from "./isomorphic-layout-effect.js";
 import classes from "./page-bar.module.css";
+import asideClasses from "./page-aside.module.css";
 const PAGE_BAR_HEIGHT_VAR = "--basalt-page-bar-h";
 const NO_SLOTS = {
   target: null,
   setTarget: () => {
   },
+  bandTarget: null,
+  setBandTarget: () => {
+  },
   inShell: false,
   mobileMoreActions: [],
   kebabClaims: 0,
   claimKebab: () => () => {
+  },
+  panelHost: false,
+  claimPanelHost: () => () => {
+  },
+  panel: null,
+  claimPanel: () => () => {
+  },
+  panelTarget: null,
+  setPanelTarget: () => {
   }
 };
 const PageBarContext = createContext(NO_SLOTS);
@@ -30,19 +39,41 @@ function PageBarProvider({
   children
 }) {
   const [target, setTarget] = useState(null);
+  const [bandTarget, setBandTarget] = useState(null);
   const [kebabClaims, setKebabClaims] = useState(0);
+  const [panelHostClaims, setPanelHostClaims] = useState(0);
+  const [panel, setPanel] = useState(null);
+  const [panelTarget, setPanelTarget] = useState(null);
   const claimKebab = useCallback(() => {
     setKebabClaims((n) => n + 1);
     return () => setKebabClaims((n) => n - 1);
   }, []);
+  const claimPanelHost = useCallback(() => {
+    setPanelHostClaims((n) => n + 1);
+    return () => setPanelHostClaims((n) => n - 1);
+  }, []);
+  const claimPanel = useCallback((next) => {
+    setPanel(next);
+    return () => {
+      setPanel((current) => current === next ? null : current);
+    };
+  }, []);
   const mobileMoreActions = globalActions.filter((action, index) => (action.mobile ?? (index < 2 ? "bar" : "more")) === "more").map(globalActionAsBarAction);
   const value = {
     target,
     setTarget,
+    bandTarget,
+    setBandTarget,
     inShell: true,
     mobileMoreActions,
     kebabClaims,
-    claimKebab
+    claimKebab,
+    panelHost: panelHostClaims > 0,
+    claimPanelHost,
+    panel,
+    claimPanel,
+    panelTarget,
+    setPanelTarget
   };
   return /* @__PURE__ */ jsx(PageBarContext.Provider, { value, children: /* @__PURE__ */ jsx(BarExtrasProvider, { value: { mobileMoreActions, claimKebab }, children }) });
 }
@@ -50,21 +81,34 @@ function PageBarOutlet({ className }) {
   const { setTarget } = useContext(PageBarContext);
   return /* @__PURE__ */ jsx("div", { ref: setTarget, className });
 }
+function PageBarBandOutlet({ className }) {
+  const { setBandTarget } = useContext(PageBarContext);
+  return /* @__PURE__ */ jsx("div", { ref: setBandTarget, className });
+}
 function usePageKebabClaimed() {
   return useContext(PageBarContext).kebabClaims > 0;
 }
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function useAsidePanelSlot() {
+  const { panelHost, claimPanel, panelTarget } = useContext(PageBarContext);
+  return { host: panelHost, claim: claimPanel, target: panelTarget };
+}
+function publishBarHeight(node) {
+  const { height } = node.getBoundingClientRect();
+  if (height > 0) {
+    document.documentElement.style.setProperty(PAGE_BAR_HEIGHT_VAR, `${height}px`);
+  }
+}
 function useMeasuredHeightVar(active) {
-  const ref = useRef(null);
+  const [node, setNode] = useState(null);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  const attach = useCallback((el) => {
+    setNode(el);
+    if (el !== null && activeRef.current) publishBarHeight(el);
+  }, []);
   useIsomorphicLayoutEffect(() => {
-    const node = ref.current;
     if (!active || node === null) return;
-    const publish = () => {
-      const { height } = node.getBoundingClientRect();
-      if (height > 0) {
-        document.documentElement.style.setProperty(PAGE_BAR_HEIGHT_VAR, `${height}px`);
-      }
-    };
+    const publish = () => publishBarHeight(node);
     publish();
     if (typeof ResizeObserver === "undefined") {
       return () => document.documentElement.style.removeProperty(PAGE_BAR_HEIGHT_VAR);
@@ -75,11 +119,8 @@ function useMeasuredHeightVar(active) {
       observer.disconnect();
       document.documentElement.style.removeProperty(PAGE_BAR_HEIGHT_VAR);
     };
-  }, [active]);
-  return ref;
-}
-function rootClass(own, extra) {
-  return [own, extra].filter(Boolean).join(" ");
+  }, [active, node]);
+  return attach;
 }
 function PageBar({
   title,
@@ -89,15 +130,28 @@ function PageBar({
   filters,
   filtersEnd,
   tabs,
-  className
+  className,
+  style,
+  classNames
 }) {
-  const { target, inShell } = useContext(PageBarContext);
+  const { target, bandTarget, inShell, panel, claimPanelHost, setPanelTarget } = useContext(PageBarContext);
+  const [panelOpened, setPanelOpened] = useState(false);
+  const seenPanel = useRef(panel);
+  useEffect(() => {
+    if (seenPanel.current === panel) return;
+    seenPanel.current = panel;
+    setPanelOpened(false);
+  }, [panel]);
   const filtersEndActions = filtersEnd ?? [];
   const hasRow2 = tabs !== void 0 || filters !== void 0 || filtersEndActions.length > 0;
   const hasLead = !inShell && (title !== void 0 || icon !== void 0);
   const hasRow1 = actions !== void 0 || sync !== void 0 || hasLead || filtersEndActions.length > 0;
   const measureRef = useMeasuredHeightVar(hasRow2 || !inShell && hasRow1);
-  const row1 = hasRow1 ? /* @__PURE__ */ jsxs("div", { className: classes.row1, children: [
+  useIsomorphicLayoutEffect(() => {
+    if (!inShell || !hasRow2) return;
+    return claimPanelHost();
+  }, [inShell, hasRow2, claimPanelHost]);
+  const row1 = hasRow1 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row1, classNames?.row1), children: [
     hasLead && /* @__PURE__ */ jsxs("div", { className: classes.lead, children: [
       icon !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.icon, "aria-hidden": true, children: icon }),
       title !== void 0 && /* @__PURE__ */ jsx("h1", { className: classes.title, children: title })
@@ -112,19 +166,47 @@ function PageBar({
       }
     ) }) })
   ] }) : null;
-  const row2 = hasRow2 ? /* @__PURE__ */ jsxs("div", { className: classes.row2, children: [
-    tabs !== void 0 && /* @__PURE__ */ jsx(CtlSlot, { children: tabs }),
-    filters !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.filters, children: /* @__PURE__ */ jsx(CtlSlot, { children: filters }) }),
-    filtersEndActions.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.filtersEnd, children: /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(BarActionRow, { secondary: filtersEndActions, host: "slot", viewport: "desktop" }) }) })
+  const hasPills = filters !== void 0 || panel !== null || filtersEndActions.length > 0;
+  const row2 = hasRow2 ? /* @__PURE__ */ jsxs("div", { className: cx(classes.row2, classNames?.row2), children: [
+    tabs !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.tabs, "data-basalt-page-bar-line": "tabs", children: /* @__PURE__ */ jsx(CtlSlot, { children: tabs }) }),
+    hasPills && /* @__PURE__ */ jsxs("div", { className: classes.pills, "data-basalt-page-bar-line": "pills", children: [
+      filters !== void 0 && /* @__PURE__ */ jsx("div", { className: classes.filters, children: /* @__PURE__ */ jsx(CtlSlot, { children: filters }) }),
+      panel !== null && /* @__PURE__ */ jsx(
+        FilterPill,
+        {
+          label: "Panel",
+          ariaLabel: panel.title,
+          icon: panel.icon,
+          className: classes.panelPill,
+          hideGlyph: true,
+          onClick: () => {
+            setPanelOpened(true);
+          }
+        }
+      ),
+      filtersEndActions.length > 0 && /* @__PURE__ */ jsx("div", { className: classes.filtersEnd, children: /* @__PURE__ */ jsx(CtlSlot, { children: /* @__PURE__ */ jsx(BarActionRow, { secondary: filtersEndActions, host: "slot", viewport: "desktop" }) }) })
+    ] })
   ] }) : null;
+  const panelSheet = panel === null ? null : /* @__PURE__ */ jsx(
+    FilterSheet,
+    {
+      opened: panelOpened,
+      title: panel.title,
+      onClose: () => {
+        setPanelOpened(false);
+      },
+      children: /* @__PURE__ */ jsx("div", { ref: setPanelTarget, className: asideClasses.body })
+    }
+  );
   if (!inShell) {
     if (row1 === null && row2 === null) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref: measureRef,
-        className: rootClass(classes.bar, className),
+        className: cx(classes.bar, classNames?.root, className),
         "data-basalt-page-bar": "standalone",
+        ...style !== void 0 && { style },
         children: [
           row1,
           row2
@@ -134,21 +216,28 @@ function PageBar({
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     row1 !== null && target !== null && createPortal(row1, target),
-    row2 !== null && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: measureRef,
-        className: rootClass(classes.row2Sticky, className),
-        "data-basalt-page-bar": "shell",
-        children: row2
-      }
-    )
+    row2 !== null && bandTarget !== null && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: measureRef,
+          className: cx(classes.row2Band, classNames?.root, className),
+          "data-basalt-page-bar": "shell",
+          ...style !== void 0 && { style },
+          children: row2
+        }
+      ),
+      bandTarget
+    ),
+    panelSheet
   ] });
 }
 export {
   PAGE_BAR_HEIGHT_VAR,
   PageBar,
+  PageBarBandOutlet,
   PageBarOutlet,
   PageBarProvider,
+  useAsidePanelSlot,
   usePageKebabClaimed
 };

package/dist/shell/page-bar.module.css

@@ -5,6 +5,10 @@
  * scrolls sideways hides its own controls; the fold is computed instead — `More` for actions
  * (`ActionGroup`), a `Filters (n)` sheet for filters (`FilterSet`'s job, wave 4). The filter
  * container below only supplies `min-width: 0` so that fold has a box to measure against.
+ *
+ * Below `sm`, row 2 is a COLUMN of two declared lines — tabs, then pills (the tabs' phone form is
+ * full-width by contract). That is not a wrap: the line count is decided by what is mounted, never
+ * by width (law C14 for a phone form).
  */
 
 /* The shell-less bar: both rows, sticky at the top of the document. One layer under the AppShell
@@ -22,16 +26,23 @@
 }
 
 /*
- * Row 2 inside a shell: in the page flow, sticky under the 48px header. `--app-shell-header-height`
- * is Mantine's own AppShell variable, so the offset tracks the header at any density with no React
- * state and no measurement. `z-index` sits one layer below the header itself (see `.bar` above) —
- * high enough to stay above ordinary page content, never above the AppShell header.
+ * Row 2 inside a shell — the CONTENT of the shell's band, not a band of its own.
+ *
+ * Nothing positional here on purpose. `BasaltShell` renders the band
+ * (`app-main.module.css`'s `.band`) as a sibling of the scrollport, between the header and Main,
+ * and row 2 portals into it (`page-bar.tsx`). The band owns the width, the inset and the single
+ * `--vx-divider` seam under it; this rule only has to fill it.
+ *
+ * There is deliberately no `position: sticky` left. When row 2 lived in the page flow it stuck to
+ * whatever scrollport contained it, which made its resting position depend on the consumer's own
+ * DOM: nested one `Stack` deep — every real page — the sticky constraint rectangle was that
+ * wrapper, so the band sat one `--app-shell-padding` below the header seam, while a bar written as
+ * Main's direct child sat flush. Outside the scrollport there is nothing to stick to and nothing to
+ * be clamped by.
  */
-.row2Sticky {
-  position: sticky;
-  top: var(--app-shell-header-height, 0px);
-  z-index: calc(var(--app-shell-header-z-index, 100) - 1);
-  background-color: var(--vx-surface-bg);
+.row2Band {
+  width: 100%;
+  min-width: 0;
 }
 
 .row1 {
@@ -108,9 +119,16 @@
  * `min-height: var(--vx-space-page-bar-row-height)` (40px) left a 30px pill floating inside a 40px
  * box with the 5px above and below it belonging to nothing — and because the row sat in a `Stack`
  * that already spaced it, the visible gap between the header and the pills read as ~19px while the
- * gap from the pills to the first card read as ~19px too. Symmetric padding on the row itself is the
- * same total height (46px vs 40px) with both halves owned by one declaration, so the sticky bar's
- * published height covers exactly the band it paints.
+ * gap from the pills to the first card read as ~19px too. Symmetric padding on the row itself is
+ * one declaration owning both halves, so the sticky bar's published height covers exactly the band
+ * it paints — including below `sm`, where `.row2` becomes a COLUMN of `.tabs` then `.pills` and
+ * `padding-block` still owns both edges of the taller band.
+ *
+ * `stackXs` and not `stackSm`: the row sits inside the shell's own bordered band
+ * (`app-main.module.css`'s `.band`), so it no longer has to carry the visual separation in
+ * whitespace — 4px above and below a 30px `ctl` pill still clears it (38px total) and buys back 8px
+ * of content on every page.
+ * Row 1's 40px `--vx-space-page-bar-row-height` is untouched: it is a HEIGHT token, not padding.
  */
 .row2 {
   display: flex;
@@ -118,7 +136,29 @@
   align-items: center;
   gap: var(--vx-space-control-gap);
   min-width: 0;
-  padding-block: var(--vx-space-stack-sm);
+  padding-block: var(--vx-space-stack-xs);
+}
+
+/* The tabs' own line — a direct flex child so a `fullWidth` `ViewTabs` gets the whole row instead
+ * of sharing it with the pills (the row-2 defect: `CtlSlot` is `display: contents`, so an unwrapped
+ * `ViewTabs` used to shrink alongside `.filters` and clip). `flex: none` above `sm`, where the row
+ * is one line and the tabs sit at their intrinsic width beside the pills. */
+.tabs {
+  display: flex;
+  flex: none;
+  min-width: 0;
+}
+
+/* The rest of row 2 — filters, the aside's `Panel` pill, `filtersEnd` — as one line so `.filters`'s
+ * `flex: 1 1 auto` and the trailing auto-margins keep working unchanged; they now measure against
+ * this box instead of `.row2` directly. */
+.pills {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--vx-space-control-gap);
+  flex: 1 1 auto;
+  min-width: 0;
 }
 
 .filters {
@@ -175,4 +215,58 @@
     min-width: var(--vx-space-touch-control-height);
     min-height: var(--vx-space-touch-control-height);
   }
+
+  /*
+   * Row 2's phone form: two declared lines, tabs then pills — not a wrap (law C7). `.pills` folds
+   * every overflow into `Filters (n)` at any width, EXCEPT when it holds nothing visible: below `sm`
+   * `filtersEnd` renders only in the row-1 kebab (`BarActionRow viewport="desktop"` mounts a
+   * `visibleFrom="sm"` group and nothing else), so `tabs` + `filtersEnd` with no `filters`/`panel`
+   * would otherwise mount an empty `.pills` box and its column `gap` still reserves the line's height
+   * — the exact reserved-row case law C14 forbids. `:has()` is already load-bearing elsewhere in this
+   * package (`controls.module.css`'s `.sheetOption`/`.facetOption` focus rules).
+   */
+  .row2 {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--vx-space-stack-xs);
+  }
+
+  .pills:not(:has(> .filters, > .panelPill)) {
+    display: none;
+  }
+
+  .tabs {
+    width: 100%;
+  }
+
+  /*
+   * `CtlSlot` (`theme/ctl-theme.tsx`) wraps `tabs` in a `<Box data-basalt-tier style="display:
+   * contents">` — a box-less element, so a bare `.tabs > *` matches ONLY that inert wrapper and never
+   * reaches `ViewTabs`' actual `SegmentedControl`/`Select` root. `display: contents` still promotes
+   * its children to be `.tabs`' real flex items for LAYOUT while leaving them `.tabs`' grandchildren
+   * for the DOM the `>` combinator walks — so the selector has to name the slot's own attribute to
+   * reach past it.
+   */
+  .tabs > [data-basalt-tier] > * {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  /* The phone `Select` past three tab options keeps its own bounded `.phoneSelect` max-width
+   * (`controls.module.css`) and stays left-aligned rather than stretching to fill the line. More
+   * specific than the catch-all above by one class either way, so source order does not matter. */
+  .tabs > [data-basalt-tier] > :global(.mantine-Select-root) {
+    flex: none;
+  }
+}
+
+/*
+ * The aside's mobile trigger (`docs/ASIDE-SPEC.md` §0). Trailing, incompressible, and it exists
+ * only below `sm` — but the gate is JS, not a media query: `PageAside` claims the slot only when it
+ * is NOT portalled into the region, so on a desktop viewport there is no pill to hide. A second,
+ * CSS-side gate here would be a second answer to the same question.
+ */
+.panelPill {
+  margin-inline-start: auto;
+  flex-shrink: 0;
 }

package/dist/shell/page-bar.module.css.d.ts

@@ -4,14 +4,17 @@
  */
 declare const classes: {
   readonly bar: string
-  readonly row2Sticky: string
+  readonly row2Band: string
   readonly row1: string
   readonly lead: string
   readonly icon: string
   readonly title: string
   readonly row2: string
   readonly row1End: string
+  readonly tabs: string
+  readonly pills: string
   readonly filters: string
   readonly filtersEnd: string
+  readonly panelPill: string
 }
 export default classes

package/dist/shell/sidebar-search.d.ts

@@ -1,4 +1,5 @@
 import type { BarAction } from '../controls/actions.js';
+import type { BasaltProps } from '../common/props.js';
 /**
  * The ⌘K row's trailing icon buttons — ONE or TWO, by type (`docs/CONTROLS-SPEC.md` §2.3).
  *
@@ -17,8 +18,9 @@ export type SidebarSearchConfig = {
     /** Keyboard-shortcut hint shown on the right (e.g. '⌘K'). Auto-detected mac/other when omitted. */
     shortcut?: string;
 };
-export declare function SidebarSearch({ onOpen, placeholder, shortcut, actions, collapsed, }: SidebarSearchConfig & {
+export type SidebarSearchProps = SidebarSearchConfig & BasaltProps & {
     actions?: SidebarSearchActions;
     collapsed?: boolean;
-}): import("react").JSX.Element;
+};
+export declare function SidebarSearch({ onOpen, placeholder, shortcut, actions, collapsed, className, style, }: SidebarSearchProps): import("react").JSX.Element;
 //# sourceMappingURL=sidebar-search.d.ts.map

package/dist/shell/sidebar-search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-search.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar-search.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAGpD;;;;;;;;GAQG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEvE,MAAM,MAAM,mBAAmB,GAAG;IAChC,iFAAiF;IACjF,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAgED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,WAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,GAAG;IAAE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,+BA6C/E"}
+{"version":3,"file":"sidebar-search.d.ts","sourceRoot":"","sources":["../../src/shell/sidebar-search.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAEpD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD;;;;;;;;GAQG;AACH,MAAM,MAAM,oBAAoB,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,EAAE,SAAS,CAAC,CAAA;AAEvE,MAAM,MAAM,mBAAmB,GAAG;IAChC,iFAAiF;IACjF,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAgED,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAClD,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAEvE,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,WAAuB,EACvB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,+BA+CpB"}

package/dist/shell/sidebar-search.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ActionIcon, Kbd, Text, UnstyledButton } from "@mantine/core";
 import { OverflowMenu } from "../controls/actions.js";
+import { cx } from "../common/props.js";
 import classes from "./sidebar-search.module.css";
 function IconSearch() {
   return /* @__PURE__ */ jsxs(
@@ -53,7 +54,9 @@ function SidebarSearch({
   placeholder = "Search\u2026",
   shortcut,
   actions,
-  collapsed
+  collapsed,
+  className,
+  style
 }) {
   const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/i.test(navigator.platform);
   const hint = shortcut ?? (isMac ? "\u2318K" : "Ctrl K");
@@ -63,9 +66,10 @@ function SidebarSearch({
       {
         variant: "subtle",
         size: "md",
-        className: classes.railBtn,
+        className: cx(classes.railBtn, className),
         onClick: onOpen,
         "aria-label": "Open search",
+        ...style !== void 0 && { style },
         children: /* @__PURE__ */ jsx(IconSearch, {})
       }
     );
@@ -74,9 +78,10 @@ function SidebarSearch({
     UnstyledButton,
     {
       type: "button",
-      className: classes.trigger,
+      className: cx(classes.trigger, actions === void 0 && className),
       onClick: onOpen,
       "aria-label": "Open search",
+      ...actions === void 0 && style !== void 0 && { style },
       children: [
         /* @__PURE__ */ jsx(IconSearch, {}),
         /* @__PURE__ */ jsx(Text, { component: "span", className: classes.label, children: placeholder }),
@@ -85,7 +90,7 @@ function SidebarSearch({
     }
   );
   if (actions === void 0) return trigger;
-  return /* @__PURE__ */ jsxs("div", { className: classes.row, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.row, className), ...style !== void 0 && { style }, children: [
     trigger,
     actions.map((action) => /* @__PURE__ */ jsx(SearchAction, { action }, action.key))
   ] });

package/dist/shell/sidebar-search.module.css

@@ -61,7 +61,7 @@
 }
 
 /*
- * Collapsed rail button — mirrors app-sidebar.module.css's `.ghostIcon`: faint icon, radius 6,
+ * Collapsed rail button — mirrors app-brand.module.css's `.ghostIcon`: faint icon, radius 6,
  * hover ink-6% + ink. `!important` for the same reason as that rule: it competes with Mantine's
  * own compiled ActionIcon variant CSS.
  *