@crewlethq/ui 0.37.0 → 0.38.0

package/dist/SlideStage/index.js

@@ -1,4 +1,5 @@
-export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-NQGPD6NX.js';
+export { SLIDE_HEIGHT, SLIDE_WIDTH, SlideStage, useSlideKeys } from '../chunk-RMEBFYL7.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SourceEditor/index.js

@@ -1,4 +1,4 @@
-export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-D7GNNID2.js';
-import '../chunk-YSGLEHND.js';
+export { SOURCE_EDITOR_KEYS, SourceEditor, lineStart } from '../chunk-D3EJSLCL.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{SourceEditor-QAYE2JS6.css → SourceEditor-OKPWPFXK.css}

@@ -37,7 +37,7 @@
   outline-offset: -1px;
 }
 
-:root[data-crewlet-focus='pointer'] .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-source-editor:has(.crewlet-source-editor__field:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }

package/dist/StatGroup/StatGroup.d.ts

@@ -4,13 +4,17 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
      * How many tiles a row holds. FIXED, and that is the whole point: the board
      * this replaces reflowed from one column to three as tiles appeared and
      * vanished, which moved every number on the page for a reason that had
-     * nothing to do with the numbers.
+     * nothing to do with the numbers. What changes it is the row's own width:
+     * four fold to two under 640px of row, and three stack one a row under
+     * 480px, so no row is left with a lone tile.
      */
     columns?: 2 | 3 | 4;
     /**
-     * Inside another card: the row gives up its own surface, hairline and
-     * corner and keeps only the hairlines between its tiles, so a card holding
-     * it does not draw a box inside a box.
+     * The row gives up its own surface, hairline and corner and keeps only the
+     * hairlines between its tiles, so the host holding it does not draw a box
+     * inside a box. A row that is a `Card`'s content, or its body's, is flush
+     * without being told; this is for any other host (a widget's frame, a panel
+     * of an application's own).
      */
     flush?: boolean | undefined;
     children?: ReactNode;
@@ -19,8 +23,8 @@ export interface StatGroupProps extends HTMLAttributes<HTMLDivElement> {
  * A row of stat tiles, as one card.
  *
  * The tiles inside it are `flush`, so the group draws the surface and the
- * hairlines between them rather than four separate cards with gaps. Under the
- * md breakpoint it drops to two columns, which is the last count at which a
- * six-character number still fits on one line of a phone.
+ * hairlines between them rather than four separate cards with gaps. It folds
+ * by its OWN width rather than the window's (see StatGroup.css), so a row in
+ * a narrow column beside a rail folds where a row across a page does not.
  */
 export declare function StatGroup({ columns, flush, className, children, ...rest }: StatGroupProps): import("react").JSX.Element;

package/dist/StatGroup/index.js

@@ -1,2 +1,2 @@
-export { StatGroup } from '../chunk-JXRI5YD2.js';
+export { StatGroup } from '../chunk-BT5H2THK.js';
 import '../chunk-ODEQTPFM.js';

package/dist/StatGroup-DOFHX5QJ.css

@@ -0,0 +1,168 @@
+/*
+ * A row of stat tiles.
+ *
+ * ITS COLUMN COUNT NEVER MOVES with its contents. A grid that reflowed as
+ * tiles appeared and vanished moved every number on the page for a reason that
+ * had nothing to do with the numbers, which is exactly what a reader watching
+ * a live board is trying not to have happen.
+ *
+ * IT FOLDS BY ITS OWN WIDTH, never the window's. The row used to drop to two
+ * columns under a 1024px viewport, but a row's width is whatever its column
+ * leaves it: beside the rail and a settings column at exactly 1024 a
+ * four-column row was 489px wide, its tiles about 120px each, and its figures
+ * were cut ("Not s…", "1.6 …"), while on a phone a three-column row folded to
+ * two and left its third tile alone on a row of its own. So the row is a size
+ * container, and the tiles take their place from the row's own width.
+ *
+ * TWELVE TRACKS, AND EACH TILE SPANS ITS SHARE. A container query styles what
+ * is inside the container, never the container itself, so the row cannot
+ * change its own column count by its own width. Its tiles can change how many
+ * of its twelve tracks they span, which is the same layout: twelve divides by
+ * every count a row takes (one, two, three and four a row).
+ *
+ * The row's width comes from where it stands, as a block's does: inline-size
+ * containment means its contents never widen it.
+ */
+
+.crewlet-stat-group {
+  container: crewlet-stat-group / inline-size;
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  /* The flush-panel recipe: the card's surface, its hairline and its 12px
+     corner, flat as every card is, and `overflow: hidden`, which is what lets
+     the tiles inside sit against the corners without their own hairlines
+     escaping past them. */
+  background: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+/*
+ * Inside another card: the card's surface and edge are the row's.
+ *
+ * A ROW STANDING IN A CARD IS FLUSH WHETHER OR NOT ITS CALLER SAID SO. Six
+ * settings pages wrapped a row in a card without `flush`, and each drew the
+ * row's own edge and 12px corner one pixel inside the card's: a box inside a
+ * box, and inside a padded body a third frame. A row that is a card's content,
+ * or its body's, is that card's row; `flush` is for a host that is not a
+ * Card (a widget's frame, a panel of an application's own).
+ */
+.crewlet-stat-group--flush,
+.crewlet-card > .crewlet-stat-group,
+.crewlet-card__body > .crewlet-stat-group {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * A tile inside the row brings no surface of its own, whether or not its
+ * caller remembered `flush`. The group draws one card and the hairlines
+ * inside it, so a tile that kept its own border and radius is a card inside
+ * a card: a box inside a box, which is what the reader sees.
+ *
+ * TWO CLASSES, NOT :where(). Written as `> :where(.crewlet-statcard)` this
+ * weighed exactly what the tile's own `.crewlet-statcard` rule weighs, so
+ * which one painted was settled by whichever stylesheet the bundler put
+ * last. It put the tile's last, and every tile in every group drew its own
+ * border, its own 12px corner and its own surface inside the group's.
+ * Naming both classes settles it by weight, which no import order can undo.
+ */
+.crewlet-stat-group > .crewlet-statcard {
+  background: transparent;
+  border: 0;
+  border-radius: var(--radius-none);
+}
+
+/*
+ * Each tile spans its share of the twelve tracks: the row's `columns`, set on
+ * it as `--crewlet-stat-group-cols`, a row.
+ */
+.crewlet-stat-group > * {
+  grid-column: span calc(12 / var(--crewlet-stat-group-cols, 4));
+}
+
+/*
+ * The hairlines between tiles: one before every tile that does not start a
+ * row, and one above every tile that is not on the first.
+ *
+ * NAMED TWICE, ON PURPOSE. The rule above clears the tile's own border and
+ * weighs two classes, so a one-class selector here loses to it and the row
+ * of numbers runs together with nothing between the columns. The first
+ * selector of each pair matches whatever a caller puts in the row; the second
+ * weighs at least as much as the rule it has to beat, and sits after it.
+ */
+.crewlet-stat-group > * + *,
+.crewlet-stat-group > .crewlet-statcard + .crewlet-statcard {
+  border-left: 1px solid var(--color-border-default);
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(2n + 1),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(2n + 1),
+.crewlet-stat-group[data-columns='3'] > :nth-child(3n + 1),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(3n + 1),
+.crewlet-stat-group[data-columns='4'] > :nth-child(4n + 1),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(4n + 1) {
+  border-left: 0;
+}
+
+.crewlet-stat-group[data-columns='2'] > :nth-child(n + 3),
+.crewlet-stat-group[data-columns='2'] > .crewlet-statcard:nth-child(n + 3),
+.crewlet-stat-group[data-columns='3'] > :nth-child(n + 4),
+.crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 4),
+.crewlet-stat-group[data-columns='4'] > :nth-child(n + 5),
+.crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 5) {
+  border-top: 1px solid var(--color-border-default);
+}
+
+/*
+ * FOUR A ROW FOLD TO TWO under 640px of row (the phone breakpoint's number):
+ * four tiles of 160px is the narrowest at which a six-character figure and a
+ * two-word label still stand on one line each. Two by two keeps every row
+ * full.
+ */
+@container crewlet-stat-group (width < 640px) {
+  .crewlet-stat-group[data-columns='4'] > *,
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard {
+    grid-column: span 6;
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(odd),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(odd) {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(even),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(even) {
+    border-left: 1px solid var(--color-border-default);
+  }
+
+  .crewlet-stat-group[data-columns='4'] > :nth-child(n + 3),
+  .crewlet-stat-group[data-columns='4'] > .crewlet-statcard:nth-child(n + 3) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}
+
+/*
+ * THREE A ROW STACK under 480px of row (the small breakpoint's number), at the
+ * same 160px a tile. Folded to two, three tiles stood two and one, the last
+ * alone at double width and a different height, which read as a tile that had
+ * failed to load; one a row leaves no row short.
+ */
+@container crewlet-stat-group (width < 480px) {
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard {
+    grid-column: span 12;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > *,
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard + .crewlet-statcard {
+    border-left: 0;
+  }
+
+  .crewlet-stat-group[data-columns='3'] > :nth-child(n + 2),
+  .crewlet-stat-group[data-columns='3'] > .crewlet-statcard:nth-child(n + 2) {
+    border-top: 1px solid var(--color-border-default);
+  }
+}

package/dist/Switcher/index.js

@@ -1,17 +1,17 @@
-export { Switcher } from '../chunk-66NGUD5S.js';
-import '../chunk-XEGZHHRH.js';
-import '../chunk-F73MC7EZ.js';
+export { Switcher } from '../chunk-6NNY5WBF.js';
+import '../chunk-SVGARBDY.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-FYTIJM2T.js';
-import '../chunk-K3IJQNB7.js';
 import '../chunk-TEUQWOWZ.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TableCells/index.js

@@ -1,6 +1,6 @@
-export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-K4VP6ZKE.js';
+export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
-import '../chunk-GFV4LJHH.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';

package/dist/Tabs/index.d.ts

@@ -1,3 +1,4 @@
+import '../HitArea/HitArea.css';
 import './Tabs.css';
 export { TabPanel, Tabs, tabId } from './Tabs.js';
 export type { TabPanelProps, TabsItem, TabsMarker, TabsProps, TabsRenderItemProps, TabsSize, TabsVariant, } from './Tabs.js';

package/dist/Tabs/index.js

@@ -1,5 +1,6 @@
-export { TabPanel, Tabs, tabId } from '../chunk-VL6CUNSX.js';
+export { TabPanel, Tabs, tabId } from '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tabs-MMZXV5EF.css → Tabs-WIF7457H.css}

@@ -28,8 +28,9 @@
  * row is reachable by the arrow keys either way.
  */
 .crewlet-tabs--underline {
+  --crewlet-tabs-gap: var(--spacing-2);
   display: flex;
-  gap: var(--spacing-2);
+  gap: var(--crewlet-tabs-gap);
   border-bottom: 1px solid var(--color-border-default);
   position: relative;
   width: 100%;
@@ -103,8 +104,9 @@
  */
 .crewlet-tabs--pill {
   --crewlet-tabs-pill-inset: 1px;
+  --crewlet-tabs-gap: var(--crewlet-tabs-pill-inset);
 
-  gap: var(--crewlet-tabs-pill-inset);
+  gap: var(--crewlet-tabs-gap);
   padding: var(--crewlet-tabs-pill-inset);
   background: var(--color-surface-elevated);
   border: 1px solid var(--color-border-default);
@@ -165,6 +167,20 @@
     background-color var(--motion-duration-fast) var(--motion-easing-default),
     color var(--motion-duration-fast) var(--motion-easing-default),
     box-shadow var(--motion-duration-fast) var(--motion-easing-default);
+  /* Half the gap to each neighbour, so the targets meet (HitArea.css). A row
+     that wraps reaches across its rows' gap too. */
+  --crewlet-hit-area-inline: calc(var(--crewlet-tabs-gap, 0px) / 2);
+  --crewlet-hit-area-block: calc(var(--crewlet-tabs-row-gap, 0px) / 2);
+}
+
+/* The row's two ends reach nothing past it: the underline row is a scroller,
+   and a target past its last tab would be width it scrolls by. */
+.crewlet-tabs__tab:first-child {
+  --crewlet-hit-area-inline-start: 0px;
+}
+
+.crewlet-tabs__tab:last-child {
+  --crewlet-hit-area-inline-end: 0px;
 }
 
 /*
@@ -311,9 +327,10 @@
  * (FilterChip draws the same pair).
  */
 .crewlet-tabs--chip {
+  --crewlet-tabs-gap: calc(var(--spacing-1) / 2);
   display: inline-flex;
   align-items: center;
-  gap: calc(var(--spacing-1) / 2);
+  gap: var(--crewlet-tabs-gap);
 }
 
 .crewlet-tabs--chip .crewlet-tabs__tab {

package/dist/Tag/index.js

@@ -1,3 +1,3 @@
-export { Tag } from '../chunk-GFV4LJHH.js';
+export { Tag } from '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Tag-SRGTK5KI.css → Tag-2DQOVE6W.css}

@@ -277,12 +277,22 @@
   --crewlet-tag-line: var(--color-border-strong-hover);
 }
 
-/* The neutral outline is the engine's `.badge.outline`: the hairline step as
-   the boundary, and the tertiary ink, which is a quieter register than the
-   tinted outlines keep. It is the appearance for a value that is not a state
-   at all, so it says less than its neighbours on purpose. */
+/*
+ * The neutral outline: the neutral pill's own boundary with no fill, and the
+ * tertiary ink, which is a quieter register than the tinted outlines keep. It
+ * is the appearance for a value that is not a state at all, so it says less
+ * than its neighbours on purpose, by its ink and its empty ground.
+ *
+ * NOT BY A FAINTER EDGE. It used to take the plain hairline, the line that
+ * finds a card, and on the card it so often stands on that line measured
+ * 1.07:1 in dark: Limits' "Off" beside a filled "Default", an audit row's
+ * machine and open, a tool's "builtin", all read as loose words rather than
+ * as pills. The strong step is the edge the neutral soft pill already draws
+ * (1.49:1 dark, 1.52:1 light on the card), so the two neutral pills differ by
+ * their fill alone and both read as pills.
+ */
 .crewlet-tag--neutral.crewlet-tag--outline {
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-strong);
   --crewlet-tag-ink: var(--color-text-tertiary);
 }
 

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-AOLCZDZ6.js';
-import '../chunk-GFV4LJHH.js';
+export { TagsInput } from '../chunk-BH52LIY6.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-WIATRXEJ.js';
-import '../chunk-F73MC7EZ.js';
-import '../chunk-YSGLEHND.js';
-import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-OMV5W53A.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{TagsInput-7EGBBXHS.css → TagsInput-CLFHP6I2.css}

@@ -77,7 +77,7 @@
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-tags-input__box:focus-visible {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-tags-input__box:focus-visible {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }

package/dist/ThemeGallery/index.js

@@ -1,6 +1,7 @@
-export { ThemeGallery } from '../chunk-IPAU6FLH.js';
+export { ThemeGallery } from '../chunk-PPHTIKZO.js';
 import '../chunk-MNFU2RNT.js';
-import '../chunk-F73MC7EZ.js';
+import '../chunk-7KHM2FZH.js';
 import '../chunk-RKKO7QHH.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ThemeSwitcher/index.js

@@ -1,10 +1,11 @@
-export { DensitySwitcher, ThemeSwitcher } from '../chunk-2QEDJSJC.js';
+export { DensitySwitcher, ThemeSwitcher } from '../chunk-ZMDYQ2HH.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
-import '../chunk-WKEPORNM.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+import '../chunk-4ISUIS6F.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,14 +1,15 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-TVRBQMIX.js';
-import '../chunk-VKKUGZ3G.js';
-import '../chunk-F73MC7EZ.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-YPMGP2X4.js';
+import '../chunk-XQZ6EWOE.js';
+import '../chunk-7KHM2FZH.js';
+import '../chunk-KHJIEPZV.js';
 import '../chunk-GXQ3B46I.js';
-import '../chunk-K3IJQNB7.js';
-import '../chunk-IUYUS2SO.js';
-import '../chunk-YSGLEHND.js';
+import '../chunk-TYONQSOK.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{TimeWindowPicker-DEFDV77Z.css → TimeWindowPicker-I3HXC74I.css}

@@ -52,8 +52,8 @@
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window:focus-visible,
-:root[data-crewlet-focus='pointer'] .crewlet-time-window.is-open {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window:focus-visible,
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window.is-open {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }
@@ -330,7 +330,7 @@ svg.crewlet-time-window__tick {
 }
 
 /* Narrowed and tinted for a pointer, as the text box's ring is. See Input.css. */
-:root[data-crewlet-focus='pointer'] .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
+:where(:root[data-crewlet-focus='pointer']) .crewlet-time-window__masked:has(.crewlet-time-window__masked-input:focus-visible) {
   outline-width: 1px;
   outline-color: var(--color-border-selected);
 }

package/dist/Toaster/index.js

@@ -1,5 +1,6 @@
 export { ToastProvider, Toaster, useToast } from '../chunk-AC22RZKC.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Toolbar/index.js

@@ -1,4 +1,5 @@
-export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
+export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-NR4CPM4T.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Tooltip/index.js

@@ -1,4 +1,5 @@
-export { Tooltip } from '../chunk-6ZJ3N7QI.js';
+export { Tooltip } from '../chunk-I33UIUZD.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,12 +1,13 @@
-export { TreeCanvas } from '../chunk-4ZJLOKSS.js';
+export { TreeCanvas } from '../chunk-5BUOMF6N.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-4BYHAOHH.js';
+import '../chunk-DAERKOOG.js';
 import '../chunk-LM3ISVJA.js';
-import '../chunk-6ZJ3N7QI.js';
+import '../chunk-I33UIUZD.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,9 @@
-export { TreeGrid } from '../chunk-QWNVSR6G.js';
+export { TreeGrid } from '../chunk-3KYVFG47.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-LM3ISVJA.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-R25RGPUB.js';
+import '../chunk-H5XTJ7GJ.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionCompare/index.js

@@ -1,11 +1,12 @@
-export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-PLTCDSTU.js';
+export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-4LRAJXHL.js';
 import '../chunk-BVWSLXTY.js';
-import '../chunk-WKEPORNM.js';
-import '../chunk-CCAXYHQS.js';
-import '../chunk-VL6CUNSX.js';
+import '../chunk-4ISUIS6F.js';
+import '../chunk-2QZ2VPHR.js';
+import '../chunk-7SDUKCNW.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-RA2ULG6H.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-CCAXYHQS.js → chunk-2QZ2VPHR.js}

@@ -1,6 +1,7 @@
-import { tabId } from './chunk-VL6CUNSX.js';
+import { tabId } from './chunk-7SDUKCNW.js';
 import { useRoving, tabStop } from './chunk-RKKO7QHH.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { HIT_AREA_CLASS } from './chunk-2YTOOH3A.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import { useState, useId } from 'react';
@@ -99,6 +100,7 @@ function SegmentedControl({
               className: cx(
                 "crewlet-tabs__tab",
                 "crewlet-segmented__option",
+                HIT_AREA_CLASS,
                 chosen && "is-active",
                 option.disabled && "is-disabled"
               ),

package/dist/chunk-2YTOOH3A.js

@@ -0,0 +1,4 @@
+// src/HitArea/hitArea.ts
+var HIT_AREA_CLASS = "crewlet-hit-area";
+
+export { HIT_AREA_CLASS };

package/dist/{chunk-QWNVSR6G.js → chunk-3KYVFG47.js}

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

package/dist/{chunk-H5NOLRGH.js → chunk-3V5T5K5H.js}

@@ -1,4 +1,4 @@
-import { SlideStage } from './chunk-NQGPD6NX.js';
+import { SlideStage } from './chunk-RMEBFYL7.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './SlideGrid-FJA33DV4.css';
 import { EyeOffGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-BIQDJOJZ.js → chunk-3ZUINC7C.js}

@@ -1,7 +1,7 @@
-import { FormField, Textarea, Input } from './chunk-IUYUS2SO.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { isComposing } from './chunk-R25RGPUB.js';
+import { FormField, Textarea, Input } from './chunk-TYONQSOK.js';
 import { announce } from './chunk-RSAQOKH3.js';
+import { isComposing } from './chunk-H5XTJ7GJ.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';

package/dist/{chunk-K4VP6ZKE.js → chunk-4BJK7FE5.js}

@@ -1,5 +1,5 @@
 import { Link } from './chunk-FBSEJO2C.js';
-import { Tag } from './chunk-GFV4LJHH.js';
+import { Tag } from './chunk-KYIAFNU7.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Avatar } from './chunk-PZKHBB7D.js';

package/dist/chunk-4ISUIS6F.js

@@ -0,0 +1,3 @@
+import './HitArea-QUOS6ZDJ.css';
+import './Tabs-WIF7457H.css';
+import './SegmentedControl-B7XCUOML.css';