@crewlethq/ui 0.13.0 → 0.15.0

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

@@ -1,98 +1,98 @@
 /*
- * The toast stack.
+ * The toast stack, drawn as the first release drew it (24a60c3): a dark strip
+ * on the page's deepest ground with the large shadow and the rim light, a
+ * 12px corner, the variant said by its mark alone, never a flood of its hue,
+ * and the countdown as a wash behind the words that drains from the right.
  *
- * ITS SURFACE IS A THEME TOKEN. 0.2.0 mixed the subtle surface 60 percent with
- * black, which is a dark strip whatever palette is painting: on a light page
- * the toast's own text measured 1.56:1 against it.
+ * IN TOKENS RATHER THAN ITS LITERALS, so it follows every theme. The strip is
+ * --color-surface-background: the first release mixed the panel with black,
+ * which read as a dark bar on a light page, where its words measured 1.56:1.
+ * The marks are the feedback INK steps, the soft moss, amber and rose it drew,
+ * measured as text on every theme. The washes are the feedback SOFT steps.
  *
- * THE DRAIN IS A RULE ALONG THE FOOT, not a wash behind the words. A tinted
- * layer under the message is a composite nothing measured, and it moves while
- * the message is being read; a 2px bar at the edge says the same thing and
- * touches no text at all. It is decoration either way: the dismissal is a
- * timer now, so a reader who asks for reduced motion still gets the toast
- * taken away.
+ * The wash is decoration: the dismissal is a timer, so a reader who asks for
+ * reduced motion gets no wash and still gets the toast taken away.
  */
-
 .crewlet-toaster {
   position: fixed;
   z-index: var(--z-index-toast);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
-  /* The engine's 420px, held under the viewport at the width a phone has.
-     The strip is one or two lines of 13px text and an action; at 380 the
-     commonest failure message wrapped onto a third. */
-  width: min(420px, calc(100vw - var(--spacing-9)));
+  gap: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  width: min(380px, calc(100vw - 2 * var(--spacing-6)));
   /* The stack itself takes no presses, so the screen under it stays live
      while nothing is up; each toast takes them back for its own strip. */
   pointer-events: none;
 }
 
 .crewlet-toaster--bottom-right {
-  bottom: var(--spacing-4);
-  right: var(--spacing-4);
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--top-right {
-  top: var(--spacing-4);
-  right: var(--spacing-4);
+  top: var(--spacing-6);
+  right: var(--spacing-6);
 }
 
 .crewlet-toaster--bottom-left {
-  bottom: var(--spacing-4);
-  left: var(--spacing-4);
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toaster--top-left {
-  top: var(--spacing-4);
-  left: var(--spacing-4);
+  top: var(--spacing-6);
+  left: var(--spacing-6);
 }
 
 .crewlet-toast {
+  /* The mark and the wash are the two places a variant spends its hue. */
   --crewlet-toast-mark: var(--color-text-secondary);
-  /*
-   * The boundary and the two inks are variables so a tone can spend them. Only
-   * one does: a failure, which is the engine's one toned strip.
-   */
-  --crewlet-toast-line: var(--color-border-default);
-  --crewlet-toast-ink: var(--color-text-primary);
-  --crewlet-toast-ink-quiet: var(--color-text-secondary);
+  --crewlet-toast-wash: var(--color-surface-pressed);
+  /* 14px at the normal density, and the corner the dismiss sits in beside it. */
+  --crewlet-toast-inset: calc(var(--spacing-3) + var(--spacing-1) / 2);
 
   pointer-events: auto;
   position: relative;
   display: flex;
   align-items: flex-start;
-  /* The panel's own gap and padding, and the panel's own surface: the engine
-     draws a toast as a small panel that happens to float, so it sits on the
-     same ground, the same hairline and the same corner as everything the
-     screen behind it is made of. */
-  gap: var(--spacing-2);
-  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
-  background: var(--color-surface-subtle);
-  border: 1px solid var(--crewlet-toast-line);
-  border-radius: var(--radius-md);
-  box-shadow: var(--shadow-md);
-  color: var(--crewlet-toast-ink);
+  gap: var(--spacing-3);
+  padding: var(--crewlet-toast-inset) calc(var(--spacing-7) + var(--spacing-1) * 1.5) var(--crewlet-toast-inset)
+    var(--crewlet-toast-inset);
+  background: var(--color-surface-background);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  /* The large shadow and the rim light, both from tokens that are a shadow in
+     every palette: --shadow-hairline is `none` in light, and a `none` inside a
+     list drops the whole declaration. */
+  box-shadow: var(--shadow-xl), var(--shadow-rim-lit);
+  color: var(--color-text-primary);
   font-family: var(--font-family-sans);
   font-size: var(--font-size-compact);
-  line-height: var(--font-line-height-normal);
+  line-height: var(--font-line-height-body);
   letter-spacing: var(--font-letter-spacing-snug);
   overflow: hidden;
-  animation: crewlet-toast-in var(--motion-duration-base) var(--motion-easing-emphasized);
+  animation: crewlet-toast-in var(--motion-duration-slow) var(--motion-easing-emphasized);
 }
 
 @keyframes crewlet-toast-in {
   from {
     opacity: 0;
-    transform: translateY(6px);
+    transform: translateX(var(--spacing-4));
   }
-
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
+/* The words sit over the wash: every child is raised, and the dismiss and the
+   wash below take their own places back. */
+.crewlet-toast > * {
+  position: relative;
+  z-index: var(--z-index-raised);
+}
+
 .crewlet-toast__icon {
   display: inline-flex;
   flex: none;
@@ -100,34 +100,28 @@
   color: var(--crewlet-toast-mark);
 }
 
-/* The mark is the tone's FILL step, which is measured at 3:1 as a mark. The
-   words beside it stay in the primary ink: a coloured sentence on a coloured
-   strip is the pair that has to be measured, and this one does not exist. */
+/*
+ * 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 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);
+  --crewlet-toast-mark: var(--color-feedback-success-ink);
+  --crewlet-toast-wash: var(--color-feedback-success-soft);
 }
 
 .crewlet-toast--warning {
-  --crewlet-toast-mark: var(--color-feedback-warning);
+  --crewlet-toast-mark: var(--color-feedback-warning-ink);
+  --crewlet-toast-wash: var(--color-feedback-warning-soft);
 }
 
-/*
- * A FAILURE IS THE ONE TONED STRIP. It is the outcome that is news rather than
- * confirmation and the one that does not take itself away, so the engine gives
- * it the hue twice: the fill step on the edge, where 3:1 is the floor a
- * boundary has to clear, and the INK step on every word, which is the measured
- * text pair on this surface. Never the fill behind a word: that is the swap
- * the whole soft-and-ink split exists to stop.
- */
 .crewlet-toast--danger {
-  --crewlet-toast-mark: var(--color-feedback-danger);
-  --crewlet-toast-line: var(--color-feedback-danger);
-  --crewlet-toast-ink: var(--color-feedback-danger-ink);
-  --crewlet-toast-ink-quiet: var(--color-feedback-danger-ink);
-}
-
-.crewlet-toast--info {
-  --crewlet-toast-mark: var(--color-feedback-info);
+  --crewlet-toast-mark: var(--color-feedback-danger-ink);
+  --crewlet-toast-wash: var(--color-feedback-danger-soft);
 }
 
 /* A usage limit notice is the application's own variant: it paints the glyph
@@ -149,12 +143,12 @@
 }
 
 .crewlet-toast__message {
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-secondary);
   overflow-wrap: anywhere;
 }
 
 .crewlet-toast__actions {
-  margin-top: var(--spacing-2);
+  margin-top: calc(var(--spacing-2) + var(--spacing-1) / 2);
   display: flex;
   gap: var(--spacing-2);
 }
@@ -186,6 +180,7 @@
   border-color: var(--color-brand-accent-hover);
 }
 
+/* A failure's one filled thing is the way out of it. */
 .crewlet-toast--danger .crewlet-toast__action-btn,
 .crewlet-toast--danger .crewlet-toast__action-link {
   background: var(--color-feedback-danger);
@@ -207,8 +202,9 @@
 }
 
 /* The dismiss sits absolute in the corner so a multi-line message flows
-   under it rather than around it. 24px square: the smallest target
-   WCAG 2.2 accepts. */
+   under it rather than around it, and after the body in the document, so it
+   is drawn over the words at the same raised step. 24px square: the smallest
+   target WCAG 2.2 accepts. */
 .crewlet-toast__dismiss {
   position: absolute;
   top: var(--spacing-2);
@@ -222,10 +218,7 @@
   border: 0;
   border-radius: var(--radius-sm);
   background: transparent;
-  /* The strip's own quiet ink rather than the neutral tertiary step, so the
-     close on a failure is part of the failure rather than the one grey thing
-     inside it. */
-  color: var(--crewlet-toast-ink-quiet);
+  color: var(--color-text-tertiary);
   cursor: pointer;
   transition:
     background var(--motion-duration-fast) var(--motion-easing-default),
@@ -233,25 +226,28 @@
 }
 
 .crewlet-toast__dismiss:hover {
-  background: var(--color-surface-hover);
-  color: var(--crewlet-toast-ink);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
 }
 
+/*
+ * THE COUNTDOWN IS A WASH BEHIND THE WORDS, the variant's soft step over the
+ * whole strip, draining from the right as the time runs out. It sits under
+ * every raised child, and it is the timer's picture, not the timer.
+ */
 .crewlet-toast__progress {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 2px;
+  inset: 0;
+  z-index: var(--z-index-base);
   transform-origin: left center;
-  background: var(--crewlet-toast-mark);
+  background: var(--crewlet-toast-wash);
   pointer-events: none;
   animation-name: crewlet-toast-drain;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
 }
 
-/* Paused by the class rather than by :hover, so the bar and the timer that
+/* Paused by the class rather than by :hover, so the wash and the timer that
    actually dismisses are stopped by the same event. */
 .crewlet-toast__progress.is-paused {
   animation-play-state: paused;
@@ -261,7 +257,6 @@
   from {
     transform: scaleX(1);
   }
-
   to {
     transform: scaleX(0);
   }
@@ -287,8 +282,8 @@
 
 /*
  * The strip still arrives and still goes; it just does not slide, and the
- * countdown bar holds still. The timer is untouched: a reader who asked for
- * less motion did not ask to be left with a toast that never leaves.
+ * wash is not drawn. The timer is untouched: a reader who asked for less
+ * motion did not ask to be left with a toast that never leaves.
  */
 @media (prefers-reduced-motion: reduce) {
   .crewlet-toast {

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-UZPHPW3Z.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-WY2NLRZN.js';
-import { Menu } from './chunk-TFH6SYWB.js';
-import { DateTimePicker } from './chunk-JDPAA2JU.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-JDPAA2JU.js → chunk-2UU5IGZI.js}

@@ -1,9 +1,9 @@
 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-4AZBTODT.css';
+import './DateTimePicker-NJ6XH2TE.css';
 import { useMemo, useState, useEffect } from 'react';
 import { CalendarGlyph, ChevronDownGlyph, ChevronsLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, ChevronsRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

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

@@ -1,12 +1,12 @@
-import { Select } from './chunk-XFE5W2I4.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-GBF4JDFI.css';
+import './TimeWindowPicker-BZ5HHATU.css';
 import { useMemo, useState, useRef, useId, useEffect } from 'react';
 import { ClockGlyph, ChevronDownGlyph, CheckGlyph, ChevronLeftGlyph, ChevronRightGlyph } from '@crewlethq/icons/glyphs';
 import { jsx, jsxs } from 'react/jsx-runtime';

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-XFE5W2I4.js → chunk-FC4YTTFJ.js}

@@ -1,7 +1,7 @@
 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-XMZ44RWY.css';
+import './Select-2P7AWUE4.css';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { ChevronDownGlyph, CheckGlyph, SearchGlyph } from '@crewlethq/icons/glyphs';
@@ -208,6 +208,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
     return out;
   }, [offered]);
   const flat = useMemo(() => groups.flatMap((group) => group.items), [groups]);
+  const tickAtEnd = useMemo(() => flat.some((option) => option.leading !== void 0), [flat]);
   const close = useCallback((returnFocus) => {
     setOpen(false);
     setQuery("");
@@ -399,6 +400,14 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
       const at = index;
       const selected = isChosen(option.value);
       const highlighted = at === listbox.active;
+      const tick = /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx("crewlet-select__option-tick", tickAtEnd && "crewlet-select__option-tick--end"),
+          "aria-hidden": "true",
+          children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null
+        }
+      );
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -416,7 +425,7 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
           ),
           ...option.disabled ? {} : optionHandlers(at),
           children: renderOption ? renderOption(option, { active: highlighted, selected }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-tick", "aria-hidden": "true", children: selected ? /* @__PURE__ */ jsx(CheckGlyph, { size: "sm" }) : null }),
+            tickAtEnd ? null : tick,
             option.leading !== void 0 ? /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-leading", "aria-hidden": "true", children: option.leading }) : null,
             /* @__PURE__ */ jsxs("span", { className: "crewlet-select__option-body", children: [
               /* @__PURE__ */ jsx("span", { className: "crewlet-select__option-label", children: option.label }),
@@ -425,7 +434,8 @@ var ListboxSelect = forwardRef(function ListboxSelect2({
             option.hint !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
               " ",
               /* @__PURE__ */ jsx("span", { className: "crewlet-listbox__hint", children: option.hint })
-            ] }) : null
+            ] }) : null,
+            tickAtEnd ? tick : null
           ] })
         },
         String(option.value)

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';