@crewlethq/ui 0.14.0 → 0.15.0

package/dist/{Layout-2ZCV3IGF.css → Layout-ZBEGLXAE.css}

@@ -25,6 +25,24 @@
   flex-direction: row;
 }
 
+/*
+ * DRAWN AS A LIST, IT IS STILL A RUN OF ITEMS. A Stack or an Inline spends no
+ * pixel of its own, and a `ul` or an `ol` arrives with the browser's: a margin
+ * above and below, a 40px indent and a marker on every item, so a list of five
+ * names laid out as a Stack was pushed in and bulleted. They are taken back,
+ * and the element stays a list to a screen reader. A list that wants its
+ * markers is `List variant="bulleted"`.
+ *
+ * Inside :where(), so the rule weighs one class like every other here and a
+ * caller's own class still decides what it sets.
+ */
+:where(ul, ol).crewlet-stack,
+:where(ul, ol).crewlet-inline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * A GRID OF CARDS KEEPS ITS TRACKS. `auto-fill` lays down every track the row
  * has room for and leaves the empty ones empty; `auto-fit`, which this was,

package/dist/ListInput/index.js

@@ -4,7 +4,7 @@ import '../chunk-FTEJPHBI.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/MarkdownEditor/index.js

@@ -6,7 +6,7 @@ import '../chunk-26PEPONN.js';
 import '../chunk-4LDTQWS7.js';
 import '../chunk-CBOICT64.js';
 import '../chunk-BHHIIK3M.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Menu/index.js

@@ -1,7 +1,7 @@
-export { Menu } from '../chunk-TFH6SYWB.js';
+export { Menu } from '../chunk-NS7BVLL3.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Modal/index.js

@@ -1,8 +1,8 @@
-export { ConfirmModal, Modal } from '../chunk-TFMJH2E6.js';
+export { ConfirmModal, Modal } from '../chunk-K4VORB64.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/OrgTable/index.js

@@ -1,12 +1,12 @@
-export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-75WOCYGC.js';
-import '../chunk-6LXMLQUM.js';
+export { OrgTable, OrgTableActions, OrgTableAdd, OrgTableName } from '../chunk-DYHSQHAZ.js';
+import '../chunk-B2Z2CDM5.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-6OF2DBKY.js';
-import '../chunk-53DVJCVW.js';
+import '../chunk-VYOKRN2I.js';
 import '../chunk-74WGARJE.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-6NIZCQUM.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-HI6Q2UXQ.js';

package/dist/Popover/index.js

@@ -1,4 +1,4 @@
-export { Popover } from '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+export { Popover } from '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Select/index.js

@@ -1,5 +1,5 @@
-export { Select } from '../chunk-IXUU5DLZ.js';
+export { Select } from '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Shortcut/index.js

@@ -1,4 +1,4 @@
 export { matchesShortcut, useShortcut } from '../chunk-2FPENTCF.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Switcher/index.js

@@ -1,6 +1,6 @@
-export { Switcher } from '../chunk-Y6NR7QJ3.js';
+export { Switcher } from '../chunk-LCF4WPYS.js';
 import '../chunk-W5J7R5EB.js';
-import '../chunk-TFMJH2E6.js';
+import '../chunk-K4VORB64.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-FYTIJM2T.js';
@@ -9,8 +9,8 @@ import '../chunk-PQADV6P6.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-IG75YMUN.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -4,7 +4,7 @@ import '../chunk-WIATRXEJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-IFM63LAG.js';
-import '../chunk-IXUU5DLZ.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-7BZPYA5P.js';
+import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
 import '../chunk-FTEJPHBI.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-O2ZDZZS7.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-BWRGFKJP.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Toaster/Toaster.d.ts

@@ -93,7 +93,12 @@ export interface ToastProviderProps {
     children?: ReactNode;
     position?: ToasterProps['position'];
     renderAction?: ToasterProps['renderAction'];
-    /** How many to keep on screen. The oldest goes when the next arrives. */
+    /**
+     * How many to keep on screen. When one more arrives, the oldest toast that
+     * would have gone by itself goes. A sticky one never does, so while every
+     * toast held is sticky the stack holds more than this, until the reader
+     * dismisses some.
+     */
     max?: number | undefined;
 }
 /**

package/dist/Toaster/index.js

@@ -1,5 +1,5 @@
-export { ToastProvider, Toaster, useToast } from '../chunk-CBZSSKH3.js';
-import '../chunk-7RPGY3JE.js';
+export { ToastProvider, Toaster, useToast } from '../chunk-QH3AKP2N.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Toaster-VZKISP2S.css → Toaster-EOOOTSJT.css}

@@ -102,10 +102,12 @@
 
 /*
  * A VARIANT IS ITS MARK AND ITS WASH. The words stay in the strip's own inks
- * and the edge stays the hairline, so a failure is a rose mark on a faint rose
- * wash rather than a red strip: the outcome is said by the glyph and the title,
- * and the sentence beside them is read in the ink every sentence is read in.
- * Information is the neutral mark on the neutral wash.
+ * and the edge stays the hairline, so a failure is a rose mark rather than a
+ * red strip: the outcome is said by the glyph and the title, and the sentence
+ * beside them is read in the ink every sentence is read in. The wash is the
+ * countdown, so only a toast that counts down draws one: a success is a moss
+ * mark on a faint moss wash, and a failure, sticky unless it is given a
+ * duration, draws none. Information is the neutral mark on the neutral wash.
  */
 .crewlet-toast--success {
   --crewlet-toast-mark: var(--color-feedback-success-ink);

package/dist/Toolbar/index.js

@@ -1,4 +1,4 @@
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,4 @@
-export { Tooltip } from '../chunk-CQY5NTRS.js';
-import '../chunk-7RPGY3JE.js';
+export { Tooltip } from '../chunk-QWOPX2MN.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-RZ7RGECB.js';
+export { TreeCanvas } from '../chunk-2OLCUNG7.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-2PZBIHRV.js';
-import '../chunk-53DVJCVW.js';
+import '../chunk-AMH67MLM.js';
+import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-6LXMLQUM.js';
+export { TreeGrid } from '../chunk-B2Z2CDM5.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-53DVJCVW.js';
+import '../chunk-VYOKRN2I.js';
 import '../chunk-4FQT6ZAY.js';
-import '../chunk-7RPGY3JE.js';
+import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-5IXMLWGW.js → chunk-2GXTIK37.js}

@@ -1,15 +1,15 @@
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Toolbar } from './chunk-PGRPNDWM.js';
-import { DataTable } from './chunk-3VVKJ7AZ.js';
-import { Menu } from './chunk-TFH6SYWB.js';
-import { DateTimePicker } from './chunk-AXNQCAFC.js';
+import { DataTable } from './chunk-QV266R6G.js';
+import { Menu } from './chunk-NS7BVLL3.js';
+import { DateTimePicker } from './chunk-2UU5IGZI.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-O2ZDZZS7.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { Count } from './chunk-BHHIIK3M.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-RZ7RGECB.js → chunk-2OLCUNG7.js}

@@ -1,5 +1,5 @@
 import { useTreeState, useMeasuredSizes, layoutForest, treeAncestors, useLayoutAnchor, treeExpandable, layoutConnectors, treeItemAction, treeStep, treePosInSet, treeSetSize, treeLevel, placeGroups } from './chunk-MY374UUD.js';
-import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-2PZBIHRV.js';
+import { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, Canvas } from './chunk-AMH67MLM.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TreeCanvas-L2XYONWL.css';

package/dist/{chunk-AXNQCAFC.js → chunk-2UU5IGZI.js}

@@ -1,7 +1,7 @@
 import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-O2ZDZZS7.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './DateTimePicker-NJ6XH2TE.css';
 import { useMemo, useState, useEffect } from 'react';

package/dist/{chunk-IFM63LAG.js → chunk-7BZPYA5P.js}

@@ -1,9 +1,9 @@
-import { Select } from './chunk-IXUU5DLZ.js';
+import { Select } from './chunk-FC4YTTFJ.js';
 import { Input } from './chunk-FTEJPHBI.js';
 import { today, shiftMonth, CalendarGrid, compareDays } from './chunk-GXQ3B46I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { Popover } from './chunk-O2ZDZZS7.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TimeWindowPicker-BZ5HHATU.css';

package/dist/{chunk-2PZBIHRV.js → chunk-AMH67MLM.js}

@@ -1,7 +1,7 @@
-import { LayerNodeBridge } from './chunk-53DVJCVW.js';
+import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Canvas-YVXHMWLN.css';

package/dist/{chunk-6LXMLQUM.js → chunk-B2Z2CDM5.js}

@@ -1,7 +1,7 @@
 import { useTreeState, treeExpandable, treeLevel, treePosInSet, treeSetSize, treeItemAction, treePrevious, treeNext, treeStep } from './chunk-MY374UUD.js';
-import { LayerNodeBridge } from './chunk-53DVJCVW.js';
+import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { LayerHost, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
 import { focusables } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-O2ZDZZS7.js → chunk-BWRGFKJP.js}

@@ -1,4 +1,4 @@
-import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { useLayerContainer, viewportBounds, LAYER_GAP, outsideBounds, placePopup, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
 import { usePopupLayer, focusables } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Popover-QCINR7WG.css';
@@ -44,7 +44,8 @@ function Popover({
   }, []);
   const close = useCallback(
     (reason) => {
-      if (reason === "escape" || reason === "tab") anchor.current?.focus();
+      const held = panel.current?.contains(document.activeElement) ?? false;
+      if (reason === "escape" || reason === "tab" || reason === "content" && held) anchor.current?.focus();
       setOpen(false, reason);
     },
     [setOpen]

package/dist/{chunk-75WOCYGC.js → chunk-DYHSQHAZ.js}

@@ -1,4 +1,4 @@
-import { TreeGrid } from './chunk-6LXMLQUM.js';
+import { TreeGrid } from './chunk-B2Z2CDM5.js';
 import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
 import { OrgLabel } from './chunk-6OF2DBKY.js';
 import { AddPill } from './chunk-74WGARJE.js';

package/dist/{chunk-4FFHJBEN.js → chunk-EFNHOVC2.js}

@@ -1,6 +1,6 @@
 import { HuePicker } from './chunk-NXDEPUVG.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { Popover } from './chunk-O2ZDZZS7.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { CharacterPicker } from './chunk-YXMCUKFI.js';
 import { Avatar } from './chunk-HI6Q2UXQ.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-XN4JBAN3.js → chunk-F2XSYBKH.js}

@@ -1,9 +1,10 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './DescriptionList-YYY3V3O6.css';
+import './DescriptionList-IXMRCSMK.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 function DescriptionList({
   dense = false,
+  fit = false,
   items,
   className,
   children,
@@ -13,7 +14,12 @@ function DescriptionList({
     "dl",
     {
       ...rest,
-      className: cx("crewlet-description-list", dense && "crewlet-description-list--dense", className),
+      className: cx(
+        "crewlet-description-list",
+        dense && "crewlet-description-list--dense",
+        fit && "crewlet-description-list--fit",
+        className
+      ),
       children: [
         items?.map(([term, detail], index) => /* @__PURE__ */ jsx(DescriptionListItem, { term, children: detail }, index)),
         children

package/dist/{chunk-IXUU5DLZ.js → chunk-FC4YTTFJ.js}

@@ -1,5 +1,5 @@
 import { useListbox, useOptionKeys, useHighlightRest } from './chunk-F73MC7EZ.js';
-import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-7RPGY3JE.js';
+import { useLayerContainer, viewportBounds, outsideBounds, placePopup, LAYER_GAP, LAYER_REPOSITION_EVENT } from './chunk-HMPFGIWM.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Select-2P7AWUE4.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';

package/dist/{chunk-L3CTFFLZ.js → chunk-H3XOMT7W.js}

@@ -1,12 +1,13 @@
 import { useMediaMatch } from './chunk-IG75YMUN.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-CEVLW4QG.css';
-import { createContext, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import './AppShell-6QUD7NWM.css';
+import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
-import { MenuGlyph } from '@crewlethq/icons/glyphs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronUpGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var NARROW = `(width < ${breakpoint.shell})`;
 var AppShellContext = createContext(null);
@@ -156,37 +157,80 @@ function AppShellRail({ header, footer, className, children }) {
     footer ? /* @__PURE__ */ jsx("div", { className: "crewlet-app-shell__rail-foot", children: footer }) : null
   ] });
 }
-function AppShellRailRow({ icon, trailing, detail, onClick, label, className, children }) {
+function opensSomething(haspopup) {
+  return haspopup !== void 0 && haspopup !== false && haspopup !== "false";
+}
+var AppShellRailRow = forwardRef(function AppShellRailRow2({
+  icon,
+  trailing,
+  count,
+  detail,
+  onClick,
+  label,
+  className,
+  children,
+  "aria-expanded": expanded,
+  "aria-haspopup": haspopup,
+  "aria-controls": controls
+}, ref) {
   const block = detail !== void 0 && detail !== null && detail !== false && detail !== "";
+  const opens = onClick !== void 0 && opensSomething(haspopup);
   const inside = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-icon", "aria-hidden": true, children: icon }) : null,
     /* @__PURE__ */ jsxs("span", { className: "crewlet-app-shell__rail-row-body", children: [
       /* @__PURE__ */ jsxs("span", { className: "crewlet-app-shell__rail-row-text", children: [
-        /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-label", children }),
+        /* @__PURE__ */ jsxs("span", { className: "crewlet-app-shell__rail-row-label", children: [
+          children,
+          count ? /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${String(count.value)} ${count.label}` }) : null
+        ] }),
         block ? /* @__PURE__ */ jsxs(Fragment, { children: [
           " ",
           /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-detail", children: detail })
         ] }) : null
       ] }),
+      count ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cx(
+              "crewlet-app-shell__rail-row-count",
+              count.tone === "warning" && "crewlet-app-shell__rail-row-count--warning"
+            ),
+            "aria-hidden": true,
+            children: [
+              count.mark ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-count-mark", children: count.mark }) : null,
+              count.value
+            ]
+          }
+        )
+      ] }) : null,
       trailing ? /* @__PURE__ */ jsxs(Fragment, { children: [
         " ",
         /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-trailing", children: trailing })
       ] }) : null
-    ] })
+    ] }),
+    opens ? /* @__PURE__ */ jsx("span", { className: "crewlet-app-shell__rail-row-opens", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronUpGlyph, { size: "xs" }) }) : null
   ] });
   const shape = cx("crewlet-app-shell__rail-row", block && "crewlet-app-shell__rail-row--block", className);
-  if (onClick === void 0) return /* @__PURE__ */ jsx("div", { className: shape, children: inside });
+  if (onClick === void 0) {
+    return /* @__PURE__ */ jsx("div", { ref, className: shape, children: inside });
+  }
   return /* @__PURE__ */ jsx(
     "button",
     {
+      ref,
       type: "button",
       className: cx(shape, "crewlet-app-shell__rail-row--action"),
       "aria-label": label,
+      "aria-expanded": expanded,
+      "aria-haspopup": haspopup,
+      "aria-controls": controls,
       onClick,
       children: inside
     }
   );
-}
+});
 function AppShellToggle({ className }) {
   const { drawerOpen, toggleDrawer, railId, toggleLabel, hasRail } = useAppShell();
   if (!hasRail) return null;

package/dist/{chunk-7RPGY3JE.js → chunk-HMPFGIWM.js}

@@ -1,5 +1,5 @@
 import { cx } from './chunk-ODEQTPFM.js';
-import './Layer-NAFSGCFA.css';
+import './Layer-J222IFNX.css';
 import { createContext, useState, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WYQOHFML.js → chunk-IYZZL3MZ.js}

@@ -1,4 +1,4 @@
-import { Modal } from './chunk-TFMJH2E6.js';
+import { Modal } from './chunk-K4VORB64.js';
 import { useListbox, useHighlightRest } from './chunk-F73MC7EZ.js';
 import { Kbd } from './chunk-SMBKXWML.js';
 import { Input } from './chunk-FTEJPHBI.js';

package/dist/{chunk-URYDN2KA.js → chunk-JI5AVQLA.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from './chunk-CQY5NTRS.js';
+import { Tooltip } from './chunk-QWOPX2MN.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './FactList-G2H73NFR.css';

package/dist/{chunk-TFMJH2E6.js → chunk-K4VORB64.js}

@@ -1,7 +1,7 @@
 import { Button } from './chunk-OG6CL3EB.js';
 import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
-import { useLayerContainer } from './chunk-7RPGY3JE.js';
+import { useLayerContainer } from './chunk-HMPFGIWM.js';
 import { focusables, useModalLayer, useBodyScrollLock } from './chunk-R25RGPUB.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Modal-RQAYGG4L.css';

package/dist/{chunk-Y6NR7QJ3.js → chunk-LCF4WPYS.js}

@@ -1,11 +1,11 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-TFMJH2E6.js';
+import { Modal } from './chunk-K4VORB64.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
 import { Input } from './chunk-FTEJPHBI.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
 import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Popover } from './chunk-O2ZDZZS7.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';