@crewlethq/ui 0.7.0 → 0.8.1

package/dist/Charts/BarList.d.ts

@@ -1,4 +1,15 @@
 import type { ReactNode } from 'react';
+/** One part of a row's value: see [BarDatum.parts]. */
+export interface BarPart {
+    /** Keyed by id, so a push that re-ranks the parts moves no other part. */
+    id: string;
+    label: ReactNode;
+    value: number;
+    /** What the part's number reads as in the row's key. Defaults to the value. */
+    display?: ReactNode;
+    /** Defaults to the part's place in the row's `parts`, in the data ramp. */
+    color?: string;
+}
 export interface BarDatum {
     /**
      * What this row is, as a stable identity. REQUIRED: a ranked list is
@@ -20,6 +31,18 @@ export interface BarDatum {
     href?: string;
     /** What pressing the row does, where it is not a destination. */
     onSelect?: () => void;
+    /**
+     * What the row's value is made of, such as a team's tokens by seat. The
+     * row's bar is split into these, in proportion to each part's value and
+     * 2px apart, and the row is keyed under its bar with each part's name and
+     * number: a split bar with no key is a picture of some numbers. A part's
+     * hue is its place in this list unless it names one, so every row is keyed
+     * under itself and two rows may use one hue for different parts. A part
+     * with nothing in it is neither drawn nor keyed, and keeps its hue's place.
+     * The parts are the caller's to sum to `value`: the bar's length is the
+     * row's value, and the parts only divide it.
+     */
+    parts?: BarPart[];
 }
 /**
  * Where a row's bar stands against its words.

package/dist/Charts/index.d.ts

@@ -3,7 +3,7 @@ export { DATA_COLORS, DATA_COLOR_OTHER, dataColor } from './dataColor.js';
 export { Legend } from './Legend.js';
 export type { LegendItem, LegendProps } from './Legend.js';
 export { BarList } from './BarList.js';
-export type { BarDatum, BarListProps } from './BarList.js';
+export type { BarDatum, BarListLayout, BarListProps, BarPart } from './BarList.js';
 export { StackedBar } from './StackedBar.js';
 export type { StackedBarProps, StackedSegment } from './StackedBar.js';
 export { ActivityStrip } from './ActivityStrip.js';

package/dist/Charts/index.js

@@ -1,3 +1,3 @@
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-RJM4QCGG.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-4WNNEDKO.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Charts-B3YEF7R4.css → Charts-JUERFLAR.css}

@@ -213,24 +213,67 @@
   gap: calc(var(--spacing-1) * 1.5);
 }
 
+/*
+ * THE BAR STANDS ON THE NAME'S LINE, AND A SPLIT BAR'S KEY ON THE SUB'S. An
+ * item is a grid of two columns, the words' and the plot, and two lines. The
+ * row spans it and lends its parts to it (`subgrid`), and the words' wrapper
+ * lends its own two lines in turn (`display: contents`), so the name and the
+ * plot share the first line and are centred on each other, and the sub and a
+ * split bar's key share the second, the key starting where the bar starts.
+ * Centred on the words' whole column instead, a row with a sub drew its bar,
+ * and the value at its end, between the name and the sub, a few pixels below
+ * the name it belongs to; and the key stood on a third line of its own, under
+ * the sub, where it read as one more bar. A row with neither is one line,
+ * centred in the item's height.
+ *
+ * THE KEY LETS THE POINTER THROUGH. It is outside the row in the markup,
+ * because a row that leads somewhere is a link or a button and holds no list,
+ * so it is drawn over the row's second line rather than inside it, and a
+ * press on it is a press on the row.
+ */
+.crewlet-bar-list--beside .crewlet-bar-list__item {
+  display: grid;
+  grid-template-columns: var(--crewlet-bar-list-label-width) minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-content: center;
+  column-gap: var(--spacing-3);
+  min-height: var(--size-control-md);
+}
+
+/* `gap: normal` is what hands a subgrid its parent's gaps: the stacked
+   register's own gap on every row would otherwise move the plot off the
+   column the key stands in. */
 .crewlet-bar-list--beside .crewlet-bar-list__row {
-  flex-direction: row;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
   align-items: center;
-  gap: var(--spacing-3);
-  min-height: var(--size-control-md);
+  gap: normal;
 }
 
 .crewlet-bar-list__names {
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  width: var(--crewlet-bar-list-label-width);
-  min-width: 0;
+  display: contents;
   line-height: var(--font-line-height-tight);
 }
 
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__label {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__plot {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__sub {
+  grid-row: 2;
+  grid-column: 1;
+}
+
 .crewlet-bar-list--beside .crewlet-bar-list__label {
-  flex: none;
   color: var(--color-text-secondary);
 }
 
@@ -240,7 +283,6 @@
 
 .crewlet-bar-list__plot {
   display: block;
-  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -271,6 +313,49 @@
   white-space: nowrap;
 }
 
+/*
+ * A SPLIT BAR: one bar divided into its parts, as a stacked bar is. The parts
+ * stand 2px apart for the stacked bar's reason, the ground showing through is
+ * what makes each part a part, and each part GROWS by its value (a style
+ * property on the part) so the gaps come out of the parts and the bar keeps
+ * its length. The bar clips its parts, so the last part takes the bar's
+ * rounded value end and the first its square start.
+ */
+.crewlet-bar-list__bar--parts {
+  display: flex;
+  gap: 2px;
+  overflow: hidden;
+  background: none;
+}
+
+.crewlet-bar-list__part {
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-width: 0;
+  height: 100%;
+  background: var(--crewlet-bar-list-part-color, var(--color-data-other));
+}
+
+/*
+ * THE KEY UNDER A SPLIT BAR, at the caption step. In the BESIDE register it
+ * stands on the row's second line, under the bar it keys (see the item's
+ * grid above), so each name stands under its part rather than under the
+ * row's own name.
+ */
+.crewlet-bar-list__key {
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__key {
+  grid-row: 2;
+  grid-column: 2;
+  align-self: center;
+  margin-top: 0;
+  pointer-events: none;
+}
+
 /* ─── Stacked bar ─────────────────────────────────────────────── */
 
 /*

package/dist/DataTable/index.js

@@ -1,10 +1,10 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-KTIEJ5Q5.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BTHX2FS3.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';

package/dist/DataView/index.js

@@ -1,9 +1,9 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CLPDVL46.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-A3K56LY6.js';
 import '../chunk-PGRPNDWM.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-SMBKXWML.js';
-import '../chunk-CVB7O3SZ.js';
+import '../chunk-KTIEJ5Q5.js';
 import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-BTHX2FS3.js';
@@ -11,8 +11,8 @@ import '../chunk-5I56UXBJ.js';
 import '../chunk-PDUZO35I.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-YCTMKKRA.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-6MU7HNB4.js';
 import '../chunk-ZGX2DP7F.js';
 import '../chunk-BHHIIK3M.js';

package/dist/ListInput/index.js

@@ -1,10 +1,10 @@
-export { ListInput } from '../chunk-6HXH57BL.js';
+export { ListInput } from '../chunk-4JHWMJZI.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,10 +1,10 @@
-export { TagsInput } from '../chunk-MPXI6FM6.js';
+export { TagsInput } from '../chunk-DBUGBINU.js';
 import '../chunk-LOECRMHA.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-4FQT6ZAY.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-RJM4QCGG.js → chunk-4WNNEDKO.js}

@@ -1,6 +1,6 @@
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Charts-B3YEF7R4.css';
+import './Charts-JUERFLAR.css';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useState, useRef, useCallback, useId } from 'react';
 
@@ -61,15 +61,24 @@ function BarList({
     /* @__PURE__ */ jsxs("ul", { role: "list", className: cx("crewlet-bar-list", `crewlet-bar-list--${layout}`, className), children: [
       shown.map((datum, index) => {
         const width = top > 0 && datum.value > 0 ? Math.max(1, datum.value / top * 100) : 0;
+        const parts = (datum.parts ?? []).map((part, at) => ({ ...part, color: part.color ?? dataColor(at) })).filter((part) => part.value > 0);
         const bar = width > 0 ? /* @__PURE__ */ jsx(
           "span",
           {
-            className: "crewlet-bar-list__bar",
+            className: cx("crewlet-bar-list__bar", parts.length > 0 && "crewlet-bar-list__bar--parts"),
             "aria-hidden": true,
-            style: {
+            style: parts.length > 0 ? { width: `${width}%` } : {
               width: `${width}%`,
               "--crewlet-bar-list-bar-color": datum.color ?? dataColor(index)
-            }
+            },
+            children: parts.map((part) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "crewlet-bar-list__part",
+                style: { flexGrow: part.value, "--crewlet-bar-list-part-color": part.color }
+              },
+              part.id
+            ))
           }
         ) : null;
         const value = /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__value", children: datum.display ?? datum.value.toLocaleString() });
@@ -98,15 +107,29 @@ function BarList({
             /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__sub", children: datum.sub })
           ] })
         ] });
-        return /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__item", children: datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
-            onClick: datum.onSelect,
-            children: body
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }) }, datum.id);
+        return /* @__PURE__ */ jsxs("li", { className: "crewlet-bar-list__item", children: [
+          datum.href ? /* @__PURE__ */ jsx("a", { className: "crewlet-bar-list__row crewlet-bar-list__row--pressable", href: datum.href, children: body }) : datum.onSelect ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "crewlet-bar-list__row crewlet-bar-list__row--pressable",
+              onClick: datum.onSelect,
+              children: body
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "crewlet-bar-list__row", children: body }),
+          parts.length > 0 && /* @__PURE__ */ jsx(
+            Legend,
+            {
+              className: "crewlet-bar-list__key",
+              items: parts.map((part) => ({
+                id: part.id,
+                label: part.label,
+                color: part.color,
+                value: part.display ?? part.value.toLocaleString()
+              }))
+            }
+          )
+        ] }, datum.id);
       }),
       remaining > 0 && /* @__PURE__ */ jsx("li", { className: "crewlet-bar-list__more", children: moreLabel(remaining) })
     ] })

package/dist/{chunk-CLPDVL46.js → chunk-A3K56LY6.js}

@@ -2,7 +2,7 @@ import { Toolbar } from './chunk-PGRPNDWM.js';
 import { PageHeader } from './chunk-HOXGBLEY.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { Kbd } from './chunk-SMBKXWML.js';
-import { DataTable } from './chunk-CVB7O3SZ.js';
+import { DataTable } from './chunk-KTIEJ5Q5.js';
 import { Menu } from './chunk-LSB3EHBW.js';
 import { DateTimePicker } from './chunk-5I56UXBJ.js';
 import { Popover } from './chunk-PDUZO35I.js';

package/dist/generated/index.js

@@ -3,7 +3,7 @@ export { Tooltip } from '../chunk-CQY5NTRS.js';
 export { TreeCanvas } from '../chunk-L7THQMFB.js';
 import '../chunk-IJ7QXNIJ.js';
 export { TagGroup } from '../chunk-E6UWRXNM.js';
-export { TagsInput } from '../chunk-MPXI6FM6.js';
+export { TagsInput } from '../chunk-DBUGBINU.js';
 export { Text } from '../chunk-23DHIMJA.js';
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-RHHGLTXJ.js';
 export { ThemeToggle } from '../chunk-ORNOOMVY.js';
@@ -36,7 +36,7 @@ export { StatusDot } from '../chunk-WIATRXEJ.js';
 export { Prose } from '../chunk-JCSA3XVH.js';
 export { Link } from '../chunk-ZPSOF6VL.js';
 export { List, ListItem } from '../chunk-DS2C73RJ.js';
-export { ListInput } from '../chunk-6HXH57BL.js';
+export { ListInput } from '../chunk-4JHWMJZI.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from '../chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from '../chunk-PXU6HOZB.js';
 export { useFullscreen } from '../chunk-XDTYBF2F.js';
@@ -52,12 +52,12 @@ export { Eyebrow } from '../chunk-RK4XPHVG.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from '../chunk-5YLON2PW.js';
 export { CommandPalette } from '../chunk-BXPLX7YU.js';
 export { Container } from '../chunk-QVE4GJAT.js';
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-CLPDVL46.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-A3K56LY6.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from '../chunk-PGRPNDWM.js';
 export { PageHeader } from '../chunk-HOXGBLEY.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from '../chunk-3CZ7XAVY.js';
 export { Kbd, isApplePlatform, keyGlyph } from '../chunk-SMBKXWML.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-CVB7O3SZ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-KTIEJ5Q5.js';
 export { Menu } from '../chunk-LSB3EHBW.js';
 export { EMPTY_VALUE, EmptyValue } from '../chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from '../chunk-BTHX2FS3.js';
@@ -70,11 +70,11 @@ export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS
 import '../chunk-53DVJCVW.js';
 export { Card } from '../chunk-CEOXFO3E.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-RJM4QCGG.js';
-export { Checkbox } from '../chunk-YCTMKKRA.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from '../chunk-4WNNEDKO.js';
 export { CodeBlock } from '../chunk-MORLKUGM.js';
 export { CopyButton, Copyable } from '../chunk-26SCUACK.js';
 export { useClipboard, writeClipboard } from '../chunk-5VNUYO76.js';
+export { Checkbox } from '../chunk-YCTMKKRA.js';
 export { Combobox } from '../chunk-UYK72NOS.js';
 export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from '../chunk-6MU7HNB4.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from '../chunk-ZGX2DP7F.js';
@@ -83,13 +83,13 @@ export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 export { Count } from '../chunk-BHHIIK3M.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from '../chunk-PQADV6P6.js';
 export { ADD_PILL_MS, AddPill } from '../chunk-74WGARJE.js';
-export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-OVLJEVQS.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from '../chunk-7RPGY3JE.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from '../chunk-R25RGPUB.js';
 export { IconButton } from '../chunk-4FQT6ZAY.js';
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from '../chunk-IA232OTU.js';
+export { Announcer, announce, useAnnouncer } from '../chunk-RSAQOKH3.js';
 export { BrandLockup } from '../chunk-7KBNFFM3.js';
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from '../chunk-IA232OTU.js';
 export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
 export { VisuallyHidden } from '../chunk-BZFWDIV6.js';
 export { cx } from '../chunk-ODEQTPFM.js';

package/dist/index.js

@@ -3,7 +3,7 @@ export { Tooltip } from './chunk-CQY5NTRS.js';
 export { TreeCanvas } from './chunk-L7THQMFB.js';
 import './chunk-IJ7QXNIJ.js';
 export { TagGroup } from './chunk-E6UWRXNM.js';
-export { TagsInput } from './chunk-MPXI6FM6.js';
+export { TagsInput } from './chunk-DBUGBINU.js';
 export { Text } from './chunk-23DHIMJA.js';
 export { DensitySwitcher, ThemeSwitcher } from './chunk-RHHGLTXJ.js';
 export { ThemeToggle } from './chunk-ORNOOMVY.js';
@@ -36,7 +36,7 @@ export { StatusDot } from './chunk-WIATRXEJ.js';
 export { Prose } from './chunk-JCSA3XVH.js';
 export { Link } from './chunk-ZPSOF6VL.js';
 export { List, ListItem } from './chunk-DS2C73RJ.js';
-export { ListInput } from './chunk-6HXH57BL.js';
+export { ListInput } from './chunk-4JHWMJZI.js';
 export { DEFAULT_METER_THRESHOLDS, METER_STATES, Meter, meterState, meterStateTone, meterTone, progressTone } from './chunk-4PZ6FJKW.js';
 export { NewItemsNotice } from './chunk-PXU6HOZB.js';
 export { useFullscreen } from './chunk-XDTYBF2F.js';
@@ -52,12 +52,12 @@ export { Eyebrow } from './chunk-RK4XPHVG.js';
 export { FILTER_CHIP_ATTRIBUTE, FilterChip, FilterChipGroup } from './chunk-5YLON2PW.js';
 export { CommandPalette } from './chunk-BXPLX7YU.js';
 export { Container } from './chunk-QVE4GJAT.js';
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from './chunk-CLPDVL46.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from './chunk-A3K56LY6.js';
 export { Toolbar, ToolbarOverflow, ToolbarWide } from './chunk-PGRPNDWM.js';
 export { PageHeader } from './chunk-HOXGBLEY.js';
 export { RelativeTime, currentNow, formatElapsed, formatExact, formatRelative, formatUntil, toISO, toInstant, useNow } from './chunk-3CZ7XAVY.js';
 export { Kbd, isApplePlatform, keyGlyph } from './chunk-SMBKXWML.js';
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-CVB7O3SZ.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from './chunk-KTIEJ5Q5.js';
 export { Menu } from './chunk-LSB3EHBW.js';
 export { EMPTY_VALUE, EmptyValue } from './chunk-EUCC37WY.js';
 export { ConfirmModal, Modal } from './chunk-BTHX2FS3.js';
@@ -70,11 +70,11 @@ export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS
 import './chunk-53DVJCVW.js';
 export { Card } from './chunk-CEOXFO3E.js';
 export { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-RJM4QCGG.js';
-export { Checkbox } from './chunk-YCTMKKRA.js';
+export { ActivityStrip, BarList, ChartTooltip, DATA_COLORS, DATA_COLOR_OTHER, Legend, Sparkline, StackedBar, StackedColumns, TimeSeries, dataColor, niceScale, useChartHover } from './chunk-4WNNEDKO.js';
 export { CodeBlock } from './chunk-MORLKUGM.js';
 export { CopyButton, Copyable } from './chunk-26SCUACK.js';
 export { useClipboard, writeClipboard } from './chunk-5VNUYO76.js';
+export { Checkbox } from './chunk-YCTMKKRA.js';
 export { Combobox } from './chunk-UYK72NOS.js';
 export { TYPE_AHEAD_WINDOW, useListbox, useOptionKeys } from './chunk-6MU7HNB4.js';
 export { FormField, FormRow, FormSection, Input, InputAffix, Label, ReadOnlyField, Textarea } from './chunk-ZGX2DP7F.js';
@@ -83,13 +83,13 @@ export { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 export { Count } from './chunk-BHHIIK3M.js';
 export { HeadingLevelProvider, headingTag, nextHeadingLevel, useHeadingLevel } from './chunk-PQADV6P6.js';
 export { ADD_PILL_MS, AddPill } from './chunk-74WGARJE.js';
-export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
 export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from './chunk-OVLJEVQS.js';
 export { LAYER_GAP, LAYER_REPOSITION_EVENT, LayerHost, outsideBounds, placePopup, useLayerContainer, viewportBounds } from './chunk-7RPGY3JE.js';
 export { focusables, isComposing, isModalLayerOpen, layerCount, useBodyScrollLock, useModalLayer, usePopupLayer } from './chunk-R25RGPUB.js';
 export { IconButton } from './chunk-4FQT6ZAY.js';
-export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from './chunk-IA232OTU.js';
+export { Announcer, announce, useAnnouncer } from './chunk-RSAQOKH3.js';
 export { BrandLockup } from './chunk-7KBNFFM3.js';
+export { AVATAR_CORNER_RATIO, AVATAR_SIZES, Avatar, AvatarStack, avatarCorner, avatarPixels, avatarStackLabel, avatarTint, getInitials } from './chunk-IA232OTU.js';
 export { Button, ButtonLink } from './chunk-OG6CL3EB.js';
 export { VisuallyHidden } from './chunk-BZFWDIV6.js';
 export { cx } from './chunk-ODEQTPFM.js';

package/dist/styles.css

@@ -2877,7 +2877,7 @@
 }
 
 
-/* Charts-B3YEF7R4.css */
+/* Charts-JUERFLAR.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -3093,24 +3093,67 @@
   gap: calc(var(--spacing-1) * 1.5);
 }
 
+/*
+ * THE BAR STANDS ON THE NAME'S LINE, AND A SPLIT BAR'S KEY ON THE SUB'S. An
+ * item is a grid of two columns, the words' and the plot, and two lines. The
+ * row spans it and lends its parts to it (`subgrid`), and the words' wrapper
+ * lends its own two lines in turn (`display: contents`), so the name and the
+ * plot share the first line and are centred on each other, and the sub and a
+ * split bar's key share the second, the key starting where the bar starts.
+ * Centred on the words' whole column instead, a row with a sub drew its bar,
+ * and the value at its end, between the name and the sub, a few pixels below
+ * the name it belongs to; and the key stood on a third line of its own, under
+ * the sub, where it read as one more bar. A row with neither is one line,
+ * centred in the item's height.
+ *
+ * THE KEY LETS THE POINTER THROUGH. It is outside the row in the markup,
+ * because a row that leads somewhere is a link or a button and holds no list,
+ * so it is drawn over the row's second line rather than inside it, and a
+ * press on it is a press on the row.
+ */
+.crewlet-bar-list--beside .crewlet-bar-list__item {
+  display: grid;
+  grid-template-columns: var(--crewlet-bar-list-label-width) minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  align-content: center;
+  column-gap: var(--spacing-3);
+  min-height: var(--size-control-md);
+}
+
+/* `gap: normal` is what hands a subgrid its parent's gaps: the stacked
+   register's own gap on every row would otherwise move the plot off the
+   column the key stands in. */
 .crewlet-bar-list--beside .crewlet-bar-list__row {
-  flex-direction: row;
+  display: grid;
+  grid-column: 1 / -1;
+  grid-row: 1 / -1;
+  grid-template-columns: subgrid;
+  grid-template-rows: subgrid;
   align-items: center;
-  gap: var(--spacing-3);
-  min-height: var(--size-control-md);
+  gap: normal;
 }
 
 .crewlet-bar-list__names {
-  display: flex;
-  flex: none;
-  flex-direction: column;
-  width: var(--crewlet-bar-list-label-width);
-  min-width: 0;
+  display: contents;
   line-height: var(--font-line-height-tight);
 }
 
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__label {
+  grid-row: 1;
+  grid-column: 1;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__plot {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__names > .crewlet-bar-list__sub {
+  grid-row: 2;
+  grid-column: 1;
+}
+
 .crewlet-bar-list--beside .crewlet-bar-list__label {
-  flex: none;
   color: var(--color-text-secondary);
 }
 
@@ -3120,7 +3163,6 @@
 
 .crewlet-bar-list__plot {
   display: block;
-  flex: 1 1 auto;
   min-width: 0;
 }
 
@@ -3151,6 +3193,49 @@
   white-space: nowrap;
 }
 
+/*
+ * A SPLIT BAR: one bar divided into its parts, as a stacked bar is. The parts
+ * stand 2px apart for the stacked bar's reason, the ground showing through is
+ * what makes each part a part, and each part GROWS by its value (a style
+ * property on the part) so the gaps come out of the parts and the bar keeps
+ * its length. The bar clips its parts, so the last part takes the bar's
+ * rounded value end and the first its square start.
+ */
+.crewlet-bar-list__bar--parts {
+  display: flex;
+  gap: 2px;
+  overflow: hidden;
+  background: none;
+}
+
+.crewlet-bar-list__part {
+  flex-grow: 0;
+  flex-shrink: 1;
+  flex-basis: 0;
+  min-width: 0;
+  height: 100%;
+  background: var(--crewlet-bar-list-part-color, var(--color-data-other));
+}
+
+/*
+ * THE KEY UNDER A SPLIT BAR, at the caption step. In the BESIDE register it
+ * stands on the row's second line, under the bar it keys (see the item's
+ * grid above), so each name stands under its part rather than under the
+ * row's own name.
+ */
+.crewlet-bar-list__key {
+  margin-top: var(--spacing-1);
+  font-size: var(--font-size-2xs);
+}
+
+.crewlet-bar-list--beside .crewlet-bar-list__key {
+  grid-row: 2;
+  grid-column: 2;
+  align-self: center;
+  margin-top: 0;
+  pointer-events: none;
+}
+
 /* ─── Stacked bar ─────────────────────────────────────────────── */
 
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/ui",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Crewlet shared React components built on @crewlethq/tokens and @crewlethq/icons.",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,8 @@
     "clean": "rm -rf dist src/generated"
   },
   "dependencies": {
-    "@crewlethq/icons": "0.7.0",
-    "@crewlethq/tokens": "0.7.0"
+    "@crewlethq/icons": "0.8.1",
+    "@crewlethq/tokens": "0.8.1"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/{chunk-6HXH57BL.js → chunk-4JHWMJZI.js}

@@ -1,8 +1,8 @@
 import { Kbd } from './chunk-SMBKXWML.js';
 import { FormField, Textarea, Input } from './chunk-ZGX2DP7F.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import './ListInput-O7LJKOIG.css';
 import { useState, useRef, useLayoutEffect } from 'react';
 import { ArrowUpGlyph, ArrowDownGlyph, XGlyph, PlusGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-MPXI6FM6.js → chunk-DBUGBINU.js}

@@ -1,8 +1,8 @@
 import { Tag } from './chunk-LOECRMHA.js';
 import { useListbox } from './chunk-6MU7HNB4.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { isComposing } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './TagsInput-P2HS5QL4.css';
 import { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useMemo, useLayoutEffect } from 'react';

package/dist/{chunk-CVB7O3SZ.js → chunk-KTIEJ5Q5.js}

@@ -2,8 +2,8 @@ import { Menu } from './chunk-LSB3EHBW.js';
 import { EmptyValue } from './chunk-EUCC37WY.js';
 import { Modal } from './chunk-BTHX2FS3.js';
 import { useCardHeaderSlot } from './chunk-AV2DXAEL.js';
-import { Checkbox } from './chunk-YCTMKKRA.js';
 import { useClipboard } from './chunk-5VNUYO76.js';
+import { Checkbox } from './chunk-YCTMKKRA.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';