@crewlethq/ui 0.6.3 → 0.8.0

package/README.md

@@ -191,6 +191,115 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.7.0
+
+0.7.0 draws the org surfaces (`TreeCanvas`'s `node` appearance, `OrgTable`,
+`OrgLabel`, `OrgNode` and `AddPill`) at the console org chart's own
+proportions, and holds every box in the kit to ONE line: no card, field, chip
+or control draws a second border or a second ring beside its own. A paragraph
+whose change needs an edit ends in a **What to change** table, `Was` on the
+left and `Is` on the right.
+
+**A focused control shows ONE ring, and it lies on the control's own edge.**
+Every bordered control drew its focus ring 2px outside its border, which is
+two edges with a gap between them. That was the secondary, danger and outline
+buttons and a pressed toggle; the secondary, soft brand and ghost brand icon
+buttons; a filter chip, a search trigger, an interactive or pricing card, a
+focused popover, the new items pill and a page size chip; the skip link, an
+image's remove badge, a tag, a pill chip and a card option; and the date and
+time window triggers, which recoloured their border as well, with the time
+window's typed boxes drawing `--shadow-focus` on top of that. Each now rings
+OVER its boundary, the rule the field register already kept. A box takes
+`--size-focus-ring-inset-offset`, which covers a 1px border and one pixel
+inside it. A boxed FIELD (`Input`, `Textarea`, `Select` and its search box,
+`TagsInput`, and the date and time window boxes) goes further and rings at
+one pixel, laid exactly on its own hairline with `outline-offset: -1px`: the
+boundary drawn in the focus colour, which is how the console's fields say
+focus, where two pixels was a heavy band round every box a caret landed in. A tag and its remove control take `-1px`, so a pressed tag's ink
+line stays visible inside the ring. A checkbox, a switch, a pill chip and a
+split tag's press half ring flush at `0`, because each is too small to ring
+inside itself or stops where the edge it rings on begins. A control that draws
+no edge (a filled or ghost button, a ghost icon button, a link, a borderless
+tab, a filled toast action) keeps the outset ring, because there the ring is
+the only line and an inset one on the accent fill would be drawn in nearly the
+fill's own colour. No stylesheet in the package draws `--shadow-focus` any
+more, and `apps/ui-tests` lists every ring that still stands off its element,
+with the reason it may. What to change: nothing in a call site. A stylesheet of
+your own that set one of these rings' `outline-offset`, or recoloured the
+border under it, now competes with the new rule; set the offset on the same
+selector, or leave the ring to the component.
+
+**No card draws two lines.** A toned `TreeCanvas` card drew a halo ring 3px
+outside its boundary, the ghost of a node being composed breathed a second ring
+in the same place, and a selected node drew an accent ring inside its card's
+boundary: each was two parallel lines round one box. A toned card is now its
+fill and its boundary in the hue, and the ghost's own dashed boundary is what
+breathes. Where a card's own node (its direct child treeitem) is selected, the
+card's boundary takes the accent; where it has focus, the ring is drawn on the
+card, over that boundary, so it also holds whatever the card carries under the
+node (a unit's lead), which a ring on the treeitem stopped short of. A row
+deeper inside a card keeps its ring inside it.
+
+| Was | Is |
+|---|---|
+| `--crewlet-tree-canvas-card-halo` in a stylesheet of your own | removed: nothing draws a halo |
+| a rule on `.crewlet-tree-canvas__card [role='treeitem'][aria-selected='true']` for a card's own node | the same rule on `.crewlet-tree-canvas__card:has(> [role='treeitem'][aria-selected='true'])` |
+
+**A unit's lead is a ground, not a frame.** `OrgNodeLead` drew its pill with a
+hairline 4px inside the node's own frame and ruled a line across the top of
+its strip, so a unit's node was a box drawn twice. A set lead is raised on
+`--color-surface-elevated` with no boundary, and the strip draws no rule. An
+empty one stays an empty slot, with no ground, a dashed edge in the hover step
+and the word in the tertiary ink, because the dash is what says a place is
+waiting rather than a frame round a value. The control inside the pill now
+fills it through whatever wraps it (a `Menu`'s anchor), and the whole pill
+takes the hover step while it is pointed at or its menu is open, where the
+control's own hover was a patch the size of its word.
+
+**A chart can lay its field with dots.** `Canvas` and `TreeCanvas` take
+`ground="dotted"`: a grid of dots in the strong hairline's ink, one spacing
+step apart, drawn on the frame so they stay put while the content moves over
+them. It says the field pans before anybody drags it. `plain`, the default, is
+unchanged.
+
+| Was | Is |
+|---|---|
+| a stylesheet of your own laying a `radial-gradient` on `.crewlet-canvas` | `ground="dotted"` |
+
+**A row of choices can be separate chips.** `SegmentedControl` takes
+`layout="chips"`: a row of separate chips that wraps, each on the raised
+ground a chip with no edge of its own takes, the chosen one filled with the
+accent, for a setting with more choices than a well holds on one line (the
+console's row of unit types). `trailing` draws what completes the last choice
+in the row after the options and outside the arrow keys, such as the box a
+Custom chip asks for. `pill`, the default, is unchanged.
+
+**A person's seat can be drawn the way the console chart draws it.**
+`OrgLabel` (and `OrgNodeLabel`) take `iconRing` beside `icon`: a dashed ring
+the size of the large zone round the glyph, on a chart node. A table row draws
+the glyph alone. The `avatar` form is unchanged and never takes the ring, so a
+badge keeps its outline as its one cue.
+
+**The add control is the console's size.** `AddPill`'s mark is the console's
+add-circle, with no second ring round the disc under it. A row's pill is 18px
+tall (it was the row's whole control step, a second row of buttons inside the
+row), its mark 18px and its choices' glyphs 10px, and each choice is hit at
+the control step by an overhang whose tint is clipped to the pill, as the
+branch's choices already were.
+
+**An org table's trunk is one line.** `OrgTable` stretches each row's first
+cell to the row's full height, so the trunk's segments meet across rows (they
+stopped short of both edges of every row and read as one dash per row), covers
+the rule between rows, and ends at the last row's branch instead of running on
+to the table's edge. The trunk and the wire arriving at a neutral row are both
+the strong hairline step.
+
+**A key inside a chord takes no box of its own.** `Kbd` with `keys` draws a
+chord as one cap, and each key inside it now states its whole box (no padding,
+ground, border or radius). An application rule drawing every bare `kbd` as a
+cap used to reach each key inside the chord and frame it inside the chord's
+own frame.
+
 ## Breaking changes in 0.5.0
 
 0.5.0 draws the kit in the approved visual system: Geist, a violet accent that

package/dist/AddPill/index.js

@@ -1,3 +1,3 @@
-export { ADD_PILL_MS, AddPill } from '../chunk-OM5E3TTK.js';
+export { ADD_PILL_MS, AddPill } from '../chunk-74WGARJE.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AddPill-IJQYCY6C.css → AddPill-V4TQXJ53.css}

@@ -89,7 +89,6 @@
  * card's own translucent step, in one declaration, which is exactly what a
  * node is painted with: the two are the same grey wherever the chart is
  * scrolled to, and the pair is OPAQUE, which the card's step alone is not.
- * The resting hairline and the 150ms it fades over are that chart's as well.
  *
  * FULLY OPAQUE, ALWAYS. It used to fade with the rest of the control at rest,
  * and a mask at a little over half opacity is not a mask: the branch was drawn
@@ -101,11 +100,12 @@
   height: var(--spacing-4);
   background-color: var(--color-surface-background);
   background-image: linear-gradient(var(--color-surface-subtle), var(--color-surface-subtle));
-  border: 1px solid var(--color-border-default);
+  /* NO BOUNDARY OF ITS OWN: the mark drawn over it is the console's
+     add-circle, whose ring sits at the disc's edge, and a hairline under it
+     was a second ring a pixel outside the first. */
+  border: 0;
   border-radius: var(--radius-circle);
-  transition:
-    background-color var(--motion-duration-base) var(--motion-easing-default),
-    border-color var(--motion-duration-base) var(--motion-easing-default);
+  transition: background-color var(--motion-duration-base) var(--motion-easing-default);
 }
 
 /* A row has no branch to mask, so there is no disc and no boundary either:
@@ -118,11 +118,6 @@
   border-color: transparent;
 }
 
-.crewlet-add-pill__mark:hover .crewlet-add-pill__disc,
-.crewlet-add-pill__mark:focus-visible .crewlet-add-pill__disc {
-  border-color: var(--color-node-green-line);
-}
-
 /*
  * QUIET IS THE PLUS ITSELF. It is one mark per branch on a chart of a hundred,
  * and at rest it says a child can go here and nothing more. The step is the
@@ -142,9 +137,11 @@
   transition: opacity var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* The console table's own add-circle, 18px across: at the 20px step the plus
+   stood heavier than every other control on the row. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__mark svg {
-  width: var(--spacing-5);
-  height: var(--spacing-5);
+  width: calc(var(--spacing-4) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill__mark:hover svg,
@@ -192,8 +189,10 @@
   animation: crewlet-add-pill-open var(--motion-duration-moderate) var(--motion-easing-spring);
 }
 
+/* The console table's pill is 18px tall, under half the row: drawn at the
+   row's whole control step it was a second row of buttons inside the row. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__sections {
-  height: var(--size-control-sm);
+  height: calc(var(--spacing-4) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill[data-layout='split'] .crewlet-add-pill__sections {
@@ -302,12 +301,14 @@
     background-color var(--motion-duration-fast) var(--motion-easing-default);
 }
 
-/* A row's step is the target, so there is no overhang and nothing to clip. */
+/* A ROW'S CHOICE IS HIT AT THE ROW'S CONTROL STEP, by the same overhang the
+   branch's pill takes: padding past the drawn 18px pill, with the tint clipped
+   to its content box, so a hovered choice tints the pill and stops at its
+   edges. Its width is the pointer-target floor every choice keeps. */
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__section {
-  width: var(--size-control-sm);
   height: var(--size-control-sm);
-  margin: 0;
-  padding: 0;
+  margin: calc((var(--spacing-4) + var(--spacing-1) / 2 - var(--size-control-sm)) / 2) 0;
+  padding: calc((var(--size-control-sm) - var(--spacing-4) - var(--spacing-1) / 2) / 2) 0;
 }
 
 /*
@@ -335,7 +336,7 @@
 }
 
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__divider {
-  height: var(--spacing-5);
+  height: var(--spacing-3);
 }
 
 /*
@@ -390,8 +391,8 @@
  * of each caller, because the pill is what decides it is drawn in one colour.
  */
 .crewlet-add-pill__section svg {
-  width: var(--spacing-3);
-  height: var(--spacing-3);
+  width: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-2) + var(--spacing-1) / 2);
 }
 
 .crewlet-add-pill__section svg,
@@ -415,8 +416,8 @@
 }
 
 .crewlet-add-pill[data-size='md'] .crewlet-add-pill__section svg {
-  width: var(--spacing-4);
-  height: var(--spacing-4);
+  width: calc(var(--spacing-2) + var(--spacing-1) / 2);
+  height: calc(var(--spacing-2) + var(--spacing-1) / 2);
 }
 
 /*

package/dist/AppShell/index.js

@@ -1,6 +1,6 @@
-export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-WUVZDFHS.js';
+export { AppShell, AppShellRail, AppShellRailRow, AppShellToggle, AppShellTopbar, useAppShell } from '../chunk-OVLJEVQS.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{AppShell-XARELGIH.css → AppShell-CEVLW4QG.css}

@@ -78,10 +78,12 @@
   transition: transform var(--motion-duration-fast) var(--motion-easing-default);
 }
 
+/* One ring, over the link's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css). */
 .crewlet-app-shell__skip:focus-visible {
   transform: translateY(0);
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*

package/dist/Button/index.js

@@ -1,3 +1,3 @@
-export { Button, ButtonLink } from '../chunk-ZAO4HHXI.js';
+export { Button, ButtonLink } from '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Button-EXU36DEH.css → Button-UWKBTKYD.css}

@@ -73,6 +73,24 @@
   outline-offset: 2px;
 }
 
+/*
+ * ONE RING, OVER THE BOUNDARY, on every button that draws one. A secondary,
+ * an outline, a danger and a pressed toggle each carry a visible border, and a
+ * ring standing 2px off it was two edges with a gap between them, which reads
+ * as a second outline rather than as focus. On the inset offset the ring
+ * covers the border instead, the rule every field keeps (see Input.css).
+ *
+ * A FILLED OR BORDERLESS BUTTON KEEPS THE OUTSET RING. There is no edge for it
+ * to double, and an inset ring on the accent fill would be drawn in nearly the
+ * fill's own colour, which is a focus nobody can see.
+ */
+.crewlet-btn--secondary:focus-visible,
+.crewlet-btn--outline:focus-visible,
+.crewlet-btn--danger:focus-visible,
+.crewlet-btn[aria-pressed='true']:focus-visible {
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
 .crewlet-btn:disabled,
 .crewlet-btn[aria-disabled='true'] {
   opacity: 0.5;

package/dist/Canvas/Canvas.d.ts

@@ -143,6 +143,11 @@ export interface CanvasLabels {
     /** Read after the canvas's name, so a keyboard reader learns its keys. */
     keys: string;
 }
+/**
+ * What the field under the content is drawn as. `plain` is the page's own
+ * ground; `dotted` lays a grid of dots on it. See [CanvasProps.ground].
+ */
+export type CanvasGround = 'plain' | 'dotted';
 export interface CanvasProps {
     /** The accessible name of the viewport, such as "Organization chart". */
     label: string;
@@ -216,6 +221,16 @@ export interface CanvasProps {
      * an entrance, so a reader who asked for less motion simply gets it.
      */
     dimmed?: boolean | undefined;
+    /**
+     * What the field under the content is drawn as.
+     *
+     * `dotted` is for a surface whose content is moved by dragging the field
+     * itself, such as an organization chart: the dots say the field pans before
+     * anybody drags it. They are drawn on the frame rather than on the content,
+     * so they stay put while the content moves over them. `plain`, the default,
+     * is the page's own ground and nothing else.
+     */
+    ground?: CanvasGround | undefined;
     /**
      * Whether one finger can pan the canvas at all.
      *
@@ -231,4 +246,4 @@ export interface CanvasProps {
     ref?: Ref<CanvasHandle> | undefined;
     className?: string | undefined;
 }
-export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, touch, labels, onReady, ref, className, }: CanvasProps): import("react").JSX.Element;
+export declare function Canvas({ label, content, children, overlay, controls, controlsPlacement, controlsExtra, controlsBelow, hint, largestItemWidth, dimmed, ground, touch, labels, onReady, ref, className, }: CanvasProps): import("react").JSX.Element;

package/dist/Canvas/index.d.ts

@@ -1,5 +1,5 @@
 import './Canvas.css';
 export { Canvas } from './Canvas.js';
-export type { CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
+export type { CanvasGround, CanvasHandle, CanvasLabels, CanvasProps } from './Canvas.js';
 export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits, } from './geometry.js';
 export type { CanvasPoint, CanvasRect, CanvasSize, CanvasView, CanvasZoomLimits, PinchStart, WheelLike, } from './geometry.js';

package/dist/Canvas/index.js

@@ -1,8 +1,8 @@
-export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-2HY7I3NT.js';
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits } from '../chunk-VE6LD3KM.js';
 import '../chunk-53DVJCVW.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Canvas-Q6JETCWR.css → Canvas-YVXHMWLN.css}

@@ -20,6 +20,19 @@
   border-radius: var(--radius-lg);
 }
 
+/*
+ * A DOTTED FIELD, for content that is moved by dragging the field itself: the
+ * dots say it pans before anybody drags it. They are the strong hairline's ink
+ * in both themes, one spacing step apart so density scales the grid with the
+ * cards on it, and drawn on the frame rather than on the world, so they stay
+ * put while the content moves over them. Longhands, so the ground under them
+ * is the canvas's own.
+ */
+.crewlet-canvas[data-ground='dotted'] {
+  background-image: radial-gradient(var(--color-border-strong) 1px, transparent 1.2px);
+  background-size: var(--spacing-5) var(--spacing-5);
+}
+
 .crewlet-canvas__viewport {
   position: absolute;
   inset: 0;

package/dist/Card/index.js

@@ -1,4 +1,4 @@
-export { Card } from '../chunk-V34H2YCY.js';
+export { Card } from '../chunk-CEOXFO3E.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';

package/dist/{Card-GLP7SUV6.css → Card-KJOYHDTJ.css}

@@ -198,9 +198,13 @@
   border-color: var(--color-border-hover);
 }
 
+/* One ring, over the card's own boundary rather than 2px off it, which is two
+   edges with a gap between them: the rule every field keeps (see Input.css).
+   A chosen card keeps an accent line inside the ring, since the selection
+   ring below is two pixels deep and the focus ring covers one of them. */
 .crewlet-card.is-interactive:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: var(--size-focus-ring-inset-offset);
 }
 
 /*

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-6VL4LGWC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

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

@@ -271,6 +271,46 @@
   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, starting where the bar
+ * starts: under the plot in the BESIDE register, past the words' column and
+ * the gap after it, so each name stands under the bar it keys 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 {
+  margin-top: 0;
+  padding-inline-start: calc(var(--crewlet-bar-list-label-width) + var(--spacing-3));
+}
+
 /* ─── Stacked bar ─────────────────────────────────────────────── */
 
 /*

package/dist/Checkbox/index.js

@@ -1,2 +1,2 @@
-export { Checkbox } from '../chunk-UA7O3KKJ.js';
+export { Checkbox } from '../chunk-YCTMKKRA.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Checkbox-BOXQ747I.css → Checkbox-UE7TEPAM.css}

@@ -105,7 +105,15 @@
   opacity: 0.6;
 }
 
+/*
+ * OUTSIDE THE BOX, AND AGAINST IT. The box IS the target, and 2px eaten off a
+ * 16px square leaves no middle, so the ring stays outside it. But it stands on
+ * the box's own edge rather than 2px off it: a ring with a gap round a box
+ * that already draws its own boundary is two edges, which reads as a second
+ * outline rather than as focus. Flush, the ring and the box are one edge, and
+ * the ring is still drawn whole on the ground around it.
+ */
 .crewlet-checkbox__control:focus-visible {
   outline: 2px solid var(--color-focus);
-  outline-offset: 2px;
+  outline-offset: 0;
 }

package/dist/CodeBlock/index.js

@@ -1,7 +1,7 @@
-export { CodeBlock } from '../chunk-ERHSECG2.js';
-import '../chunk-SVNXOK25.js';
+export { CodeBlock } from '../chunk-MORLKUGM.js';
+import '../chunk-26SCUACK.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Combobox/index.js

@@ -1,8 +1,8 @@
-export { Combobox } from '../chunk-D6EVJUGU.js';
+export { Combobox } from '../chunk-UYK72NOS.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-DSUY5F4E.js';
+import '../chunk-ZGX2DP7F.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,13 +1,13 @@
-export { CommandPalette } from '../chunk-2QLOH454.js';
-import '../chunk-KJ34ZBBI.js';
-import '../chunk-MV2E3QZM.js';
+export { CommandPalette } from '../chunk-BXPLX7YU.js';
+import '../chunk-SMBKXWML.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-6MU7HNB4.js';
-import '../chunk-DSUY5F4E.js';
+import '../chunk-ZGX2DP7F.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Copyable/index.js

@@ -1,6 +1,6 @@
-export { CopyButton, Copyable } from '../chunk-SVNXOK25.js';
+export { CopyButton, Copyable } from '../chunk-26SCUACK.js';
 import '../chunk-5VNUYO76.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DataTable/index.js

@@ -1,14 +1,14 @@
-export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-AGQ3YLA5.js';
-import '../chunk-LSJZUA5V.js';
+export { ALL_ITEMS, CopyableCell, DATA_TABLE_LABELS, DataTable, RowActionsMenu } from '../chunk-QJZ3Y6WW.js';
+import '../chunk-LSB3EHBW.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-MV2E3QZM.js';
+import '../chunk-YCTMKKRA.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-UA7O3KKJ.js';
 import '../chunk-5VNUYO76.js';
+import '../chunk-BTHX2FS3.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-7RPGY3JE.js';
 import '../chunk-R25RGPUB.js';
-import '../chunk-4UQ7SMPK.js';
-import '../chunk-ZAO4HHXI.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-OG6CL3EB.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DataTable-OLHPF7D4.css → DataTable-WZK3V62B.css}

@@ -379,8 +379,19 @@ body.crewlet-data-table-resizing {
   color: var(--color-text-on-accent);
 }
 
+/*
+ * One ring, over the chip's own boundary rather than 2px off it, which is two
+ * edges with a gap between them: the rule every field keeps (see Input.css).
+ * The active size is filled with the accent and its border is the fill, so
+ * there is no edge to double there, and an inset ring on that fill would be
+ * drawn in nearly the fill's own colour: it keeps the outset ring.
+ */
 .crewlet-data-table__items-per-page-btn:focus-visible {
   outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-data-table__items-per-page-btn.is-active:focus-visible {
   outline-offset: 2px;
 }