@ceebee/ui 1.8.0 → 1.10.0

package/dist/styles.css

@@ -930,6 +930,21 @@ svg.react-flow__connectionline {
 .cb-container--lg { max-width: 76rem; }
 .cb-container--full { max-width: none; }
 
+/* Text for a screen reader and no one else. It is in the layout file rather than beside any one
+   component because more than one already asked for it: `cb-visually-hidden` was being written in
+   markup with no rule behind it, so the text it hides was simply visible. */
+.cb-visually-hidden:not(:focus):not(:active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* foundation/page-container/page-container.css */
 .cb-page-container { display: flex; flex-direction: column; gap: var(--cb-space-4); padding-block: var(--cb-space-5); color: var(--cb-fg); font-family: var(--cb-font-sans); }
 .cb-page-container__breadcrumb { color: var(--cb-fg-muted); font-size: var(--cb-text-sm); }
@@ -1360,6 +1375,370 @@ svg.react-flow__connectionline {
   line-height: var(--cb-leading-normal);
 }
 
+/* data/balance-curve/balance-curve.css */
+.cb-balance-curve {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  margin: 0;
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-balance-curve__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-balance-curve__label {
+  font-size: var(--cb-text-md);
+  font-weight: 600;
+}
+
+.cb-balance-curve__threshold {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-balance-curve__reading {
+  margin: 0;
+  font-size: var(--cb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--cb-fg-muted);
+}
+
+/* The one place a balance chart spends colour weight: the sentence that says it goes under. The plot
+   already carries the same meaning in its shading, so this is reinforcement, not the only signal. */
+.cb-balance-curve__reading[data-state="below"] {
+  color: var(--cb-tone-danger);
+  font-weight: 600;
+}
+
+.cb-balance-curve__reading[data-state="clear"] { color: var(--cb-tone-success); }
+
+/* data/board/board.css */
+/* Board — columns of cards a person moves by pointer or by keyboard.
+   Every value is a Token. The drag lift, the gap animation and the drop marker all have a
+   reduced-motion rendering: transform drops, the marker stays, so a move is never invisible. */
+
+.cb-board {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-3);
+  font-family: var(--cb-font-sans);
+}
+
+.cb-board__surface {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--cb-space-3);
+  overflow-x: auto;
+  padding-bottom: var(--cb-space-2);
+}
+
+.cb-board__surface[data-lanes] {
+  overflow-x: visible;
+}
+
+/* ── column ── */
+
+.cb-board__column {
+  flex: 0 0 auto;
+  inline-size: 17rem;
+  max-inline-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-lg);
+  background: var(--cb-bg-subtle);
+}
+
+.cb-board__surface[data-lanes] .cb-board__column {
+  flex: 1 1 auto;
+  inline-size: 100%;
+}
+
+/* The column a pointer is over: named by a ring rather than a fill, so a tinted card keeps its tone. */
+.cb-board__column[data-over] {
+  border-color: var(--cb-tone-brand);
+  background: color-mix(in oklch, var(--cb-tone-brand) 8%, var(--cb-bg-subtle));
+}
+
+/* A column that takes no cards says so before a drop is attempted. */
+.cb-board__column[data-refuses] {
+  background: var(--cb-bg);
+  border-style: dashed;
+}
+
+.cb-board__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-board__name {
+  font-size: var(--cb-text-sm);
+  font-weight: 600;
+  color: var(--cb-fg);
+}
+
+.cb-board__count {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+  padding: 0 var(--cb-space-2);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  border: var(--cb-border-width) solid var(--cb-border);
+}
+
+/* Over a WIP limit is marked, never blocked — the board reports, the consumer decides. */
+.cb-board__count[data-over-limit] {
+  color: var(--cb-tone-warning);
+  border-color: var(--cb-tone-warning);
+}
+
+.cb-board__over,
+.cb-board__refusal {
+  margin: 0;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-board__over { color: var(--cb-tone-warning); }
+
+/* ── cards ── */
+
+.cb-board__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-space-8);
+}
+
+.cb-board__card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-1);
+  padding: var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  box-shadow: var(--cb-shadow-sm);
+  cursor: grab;
+  transition: box-shadow var(--cb-duration-fast) var(--cb-ease-standard),
+    transform var(--cb-duration-base) var(--cb-ease-standard);
+}
+
+.cb-board__card:hover {
+  box-shadow: var(--cb-shadow-md);
+}
+
+.cb-board__card:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* Held by the keyboard: the same lift a pointer drag gives, so both paths look alike. */
+.cb-board__card[data-held] {
+  box-shadow: var(--cb-shadow-lg);
+  border-color: var(--cb-tone-brand);
+}
+
+.cb-board__card[data-dragging] {
+  opacity: 0.4;
+}
+
+.cb-board__card[data-disabled] {
+  cursor: not-allowed;
+  color: var(--cb-fg-muted);
+  background: var(--cb-bg-subtle);
+  box-shadow: var(--cb-shadow-none);
+}
+
+/* What follows the pointer. It is out of flow, so it carries the lift on its own. */
+.cb-board__card--lift {
+  cursor: grabbing;
+  box-shadow: var(--cb-shadow-lg);
+  transform: rotate(1.5deg);
+}
+
+.cb-board__title {
+  font-size: var(--cb-text-sm);
+  color: var(--cb-fg);
+  line-height: var(--cb-leading-tight);
+  /* A long title clamps rather than stretching its own card and the cards beside it. The full name
+     belongs in a tooltip the consumer supplies around the title. */
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+
+.cb-board__meta {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+/* Where the held card would land. It is the one affordance that must survive reduced motion. */
+.cb-board__marker {
+  block-size: var(--cb-space-1);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-tone-brand);
+  list-style: none;
+}
+
+.cb-board__empty {
+  padding: var(--cb-space-4) var(--cb-space-3);
+  border: var(--cb-border-width) dashed var(--cb-border-strong);
+  border-radius: var(--cb-radius-md);
+  text-align: center;
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+/* ── lanes: the phone rendering, chosen rather than a squeezed board ── */
+
+.cb-board__lanes {
+  display: flex;
+  gap: var(--cb-space-1);
+  overflow-x: auto;
+}
+
+.cb-board__lane {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-2);
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-full);
+  background: var(--cb-bg);
+  color: var(--cb-fg-muted);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+
+.cb-board__lane[aria-selected='true'] {
+  background: color-mix(in oklch, var(--cb-tone-brand) 12%, var(--cb-bg));
+  border-color: var(--cb-tone-brand);
+  color: var(--cb-fg);
+}
+
+.cb-board__lane:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* ── undo ── */
+
+.cb-board__undo button {
+  min-block-size: var(--cb-control-floor);
+  padding: 0 var(--cb-space-3);
+  border: var(--cb-border-width) solid var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  background: var(--cb-bg);
+  color: var(--cb-fg-link);
+  font: inherit;
+  font-size: var(--cb-text-sm);
+  cursor: pointer;
+}
+
+.cb-board__undo button:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+/* The announcement is for a screen reader, not the page. */
+.cb-board__live {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* ── skeleton ── */
+
+.cb-board__ghost,
+.cb-board__ghost-card {
+  border-radius: var(--cb-radius-md);
+  background: color-mix(in oklch, var(--cb-fg-subtle) 18%, transparent);
+}
+
+.cb-board__ghost--name { inline-size: var(--cb-space-8); block-size: var(--cb-space-3); }
+.cb-board__ghost--count { inline-size: var(--cb-space-4); block-size: var(--cb-space-3); }
+.cb-board__ghost-card { block-size: var(--cb-space-8); border: 0; box-shadow: var(--cb-shadow-none); }
+
+/* ── renderings that are not decoration ── */
+
+@media (prefers-reduced-motion: reduce) {
+  .cb-board__card { transition: none; }
+  /* The lift's tilt is decoration; the shadow that says "this one is moving" stays. */
+  .cb-board__card--lift { transform: none; }
+}
+
+.cb-board[data-motion='off'] .cb-board__card { transition: none; }
+.cb-board[data-motion='off'] .cb-board__card--lift { transform: none; }
+
+@media (forced-colors: active) {
+  .cb-board__column,
+  .cb-board__card { border-color: CanvasText; }
+  .cb-board__marker { background: Highlight; }
+  .cb-board__card[data-held] { outline: var(--cb-focus-width) solid Highlight; }
+}
+
+/* A card that carries its own buttons puts the grab on a handle instead of the card. A card that is
+   itself a control has presentational children, so anything interactive inside it leaves the
+   accessibility tree — the handle is what keeps those buttons reachable. */
+.cb-board__card[data-handle] {
+  cursor: default;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'handle title' '. meta';
+  column-gap: var(--cb-space-2);
+  align-items: start;
+}
+
+.cb-board__card[data-handle] .cb-board__title { grid-area: title; }
+.cb-board__card[data-handle] .cb-board__meta { grid-area: meta; }
+
+.cb-board__handle {
+  grid-area: handle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--cb-space-5);
+  min-block-size: var(--cb-space-5);
+  padding: 0;
+  border: 0;
+  border-radius: var(--cb-radius-sm);
+  background: transparent;
+  color: var(--cb-fg-subtle);
+  font: inherit;
+  line-height: var(--cb-leading-tight);
+  cursor: grab;
+}
+
+.cb-board__handle:focus-visible {
+  outline: var(--cb-focus-width) solid var(--cb-tone-brand);
+  outline-offset: var(--cb-focus-offset);
+}
+
+.cb-board__handle:disabled { cursor: not-allowed; }
+
 /* data/diagram/diagram.css */
 /* Diagram and DiagramEditor run on React Flow. Its base stylesheet (bundled before this file) owns layout and
    reads its colours from `--xy-*` custom properties; here those are pointed at Tokens, and the node React
@@ -1821,6 +2200,50 @@ svg.react-flow__connectionline {
   .cb-pan-zoom-canvas__toolbar { border-color: CanvasText; }
 }
 
+/* data/progress-curve/progress-curve.css */
+.cb-progress-curve {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  margin: 0;
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-progress-curve__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--cb-space-2);
+}
+
+.cb-progress-curve__label {
+  font-size: var(--cb-text-md);
+  font-weight: 600;
+}
+
+/* The legend marks take the colour of the series they name — the same Tokens the canvas is drawn from,
+   so the two renderings cannot drift apart. */
+.cb-progress-curve .cb-chart-legend__key[data-series="planned"] { color: var(--cb-fg-subtle); }
+.cb-progress-curve .cb-chart-legend__key[data-series="actual"] { color: var(--cb-tone-brand); }
+
+.cb-progress-curve__reading {
+  margin: 0;
+  font-size: var(--cb-text-sm);
+  font-variant-numeric: tabular-nums;
+  color: var(--cb-fg-muted);
+}
+
+.cb-progress-curve__reading strong {
+  font-size: var(--cb-text-xl);
+  color: var(--cb-fg);
+}
+
+.cb-progress-curve__reading[data-state="behind"] { color: var(--cb-tone-danger); }
+.cb-progress-curve__reading[data-state="ahead"] { color: var(--cb-tone-success); }
+.cb-progress-curve__on-day { color: var(--cb-fg-subtle); }
+
 /* data/sticker-group/sticker-group.css */
 .cb-sticker-group {
   display: flex;
@@ -1910,6 +2333,138 @@ svg.react-flow__connectionline {
   }
 }
 
+/* data/time-series/time-series.css */
+.cb-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--cb-space-2);
+  font-family: var(--cb-font-sans);
+  color: var(--cb-fg);
+}
+
+.cb-chart__canvas {
+  inline-size: 100%;
+  border-radius: var(--cb-radius-md);
+  overflow: hidden;
+}
+
+.cb-chart__empty {
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: var(--cb-space-4);
+  border: var(--cb-border-width) dashed var(--cb-border);
+  border-radius: var(--cb-radius-md);
+  color: var(--cb-fg-muted);
+  font-size: var(--cb-text-sm);
+}
+
+/* The chart's other rendering. Hidden from sight, never from the accessibility tree: a canvas gives a
+   screen reader nothing at all, so this table is the chart as far as one is concerned.
+
+   The geometry is on the wrapper rather than on the table, because a table cannot be shrunk: it
+   refuses to go under its content's width and height whatever is asked of it, so these rules on the
+   table itself left an invisible box the size of the data lying across the plot. */
+.cb-chart__rows {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Forced colors: the canvas is replaced by the table rather than sitting there as a bitmap the system
+   cannot recolour. The component stops rendering the canvas at all in this mode, so this rule only has
+   to bring the table back into view. */
+@media (forced-colors: active) {
+  .cb-chart__rows {
+    position: static;
+    inline-size: 100%;
+    block-size: auto;
+    margin: 0;
+    overflow: visible;
+    clip-path: none;
+    white-space: normal;
+  }
+
+  .cb-chart__table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    font-size: var(--cb-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .cb-chart__table caption {
+    text-align: start;
+    padding-block-end: var(--cb-space-1);
+  }
+
+  .cb-chart__table th,
+  .cb-chart__table td {
+    border: var(--cb-border-width) solid;
+    padding: var(--cb-space-1) var(--cb-space-2);
+    text-align: end;
+  }
+
+  .cb-chart__table th[scope="row"],
+  .cb-chart__table th[scope="col"]:first-child {
+    text-align: start;
+  }
+
+  .cb-chart__table tr[data-marked] { font-weight: 700; }
+}
+
+.cb-chart--skeleton { gap: var(--cb-space-2); }
+
+.cb-chart__skeleton-head,
+.cb-chart__skeleton-plot {
+  display: block;
+  background: var(--cb-bg-subtle);
+  border-radius: var(--cb-radius-sm);
+}
+
+.cb-chart__skeleton-head {
+  block-size: var(--cb-text-md);
+  inline-size: calc(var(--cb-space-8) * 3);
+}
+
+.cb-chart__skeleton-plot { border-radius: var(--cb-radius-md); }
+
+/* A legend mark carries the same treatment as the line it names: a reference is thin and dashed, the
+   primary series solid and thick. Colour is never the only difference — dash versus solid survives a
+   monochrome print and every kind of colour blindness. */
+.cb-chart-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--cb-space-3);
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-muted);
+}
+
+.cb-chart-legend__key {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--cb-space-1);
+}
+
+.cb-chart-legend__key::before {
+  content: '';
+  inline-size: var(--cb-space-4);
+  block-size: 0;
+  border-block-start-width: var(--cb-border-width);
+  border-block-start-style: solid;
+  border-color: currentColor;
+}
+
+.cb-chart-legend__key[data-emphasis="reference"]::before { border-block-start-style: dashed; }
+.cb-chart-legend__key[data-emphasis="primary"]::before {
+  border-block-start-width: calc(var(--cb-border-width) * 2);
+}
+
 /* nav/nav.css */
 .cb-menu-positioner {
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {
@@ -55,9 +55,13 @@
   },
   "dependencies": {
     "@ant-design/cssinjs": "2.1.2",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@xyflow/react": "12.11.6",
     "antd": "6.6.1",
-    "dayjs": "1.11.18"
+    "dayjs": "1.11.18",
+    "lightweight-charts": "5.2.1"
   },
   "scripts": {
     "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",