@crewlethq/ui 0.54.1 → 0.56.0

package/dist/SidePanel-ERBUIELD.css

@@ -0,0 +1,235 @@
+/*
+ * A side panel and the frame that lays it beside the content or over it
+ * (`SidePanel`, `SidePanelFrame`, and their artifact presets).
+ *
+ * The frame is a row: the content, then at most one panel. The content
+ * scrolls itself, so a panel beside it stays in view however far it is read;
+ * the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * frame's own edges: whatever holds the frame already draws those.
+ */
+
+.crewlet-side-panel-frame {
+  container: crewlet-side-panel-frame / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-side-panel-frame__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the frame; the content stays mounted behind it, so
+   a page's state survives the look at its data. */
+.crewlet-side-panel-frame[data-panel='expanded'] > .crewlet-side-panel-frame__body {
+  display: none;
+}
+
+/*
+ * THE PANEL. Its width is one variable (`--crewlet-side-panel-width`), which
+ * the `width` prop sets on the element itself, and its head stands at the page
+ * bar's height (`--crewlet-side-panel-head-height`), so beside the shell's bar
+ * the two lines meet. Positioned, so the grip on its start edge has a box to
+ * stand against.
+ */
+.crewlet-side-panel {
+  --crewlet-side-panel-width: 26.25rem;
+  --crewlet-side-panel-head-height: var(--size-shell-topbar);
+  --crewlet-side-panel-inset: var(--spacing-4);
+  position: relative;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-side-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* IN THE SHELL'S ASIDE the panel fills the aside's sheet, which draws the
+   edge, the corner and the ground, and whose track is the width. */
+.crewlet-side-panel--fill {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+  background: transparent;
+}
+
+.crewlet-side-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+/* The grip straddles the panel's hairline, which is the edge it moves. */
+.crewlet-side-panel > .crewlet-resize-handle--left {
+  left: calc(var(--crewlet-resize-handle-width) / -2);
+}
+
+/*
+ * THE HEAD: the mark, the title, and the actions at the end. The title keeps
+ * what the actions leave it and truncates, so the actions never wrap. Its
+ * start inset is the body's, so the mark stands on the line the body's
+ * content starts on.
+ */
+.crewlet-side-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--crewlet-side-panel-head-height);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-side-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-side-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* THE HEADING TAKES FOCUS WITHOUT A RING. It is focused so a screen reader
+   announces what opened, and it is not a control: a ring round a title reads
+   as something to press. Transparent rather than none, so forced colours,
+   which draw every outline in the system colour, still show where focus is. */
+.crewlet-side-panel__title--quiet:focus-visible {
+  outline: 2px solid transparent;
+}
+
+/* Named for assistive technology only, where the mark beside it says it. */
+.crewlet-side-panel__title--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.crewlet-side-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+  margin-left: auto;
+}
+
+/* THE BODY'S INSET IS PUBLISHED (--crewlet-side-panel-inset) for content
+   that sticks to its scrollport: a sticky edge stops at the padding, so a
+   foot with `bottom: 0` would leave a band under it that the content
+   scrolled through; such a foot offsets itself by the inset to sit on the
+   edge. */
+.crewlet-side-panel__body {
+  /* THE PANEL'S OWN MEASURE, so what it holds folds to the panel's width
+     rather than the window's; and its sections head at the panel title's
+     step, a level under it and never louder than it. */
+  container: crewlet-side-panel / inline-size;
+  --crewlet-section-title-size: var(--font-size-sm);
+
+  /* A COLUMN, so content that should fit the panel rather than scroll it
+     can: a child that sets `min-height: 0` shrinks to the room the body has,
+     and every other child keeps its content's height and scrolls the body. */
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--crewlet-side-panel-inset);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* FLUSH, the body draws no inset of its own: what it holds owns its edges
+   (a chat thread that scrolls and insets itself). The published inset reads 0
+   inside it, so anything that offsets itself by the inset follows. */
+.crewlet-side-panel__body--flush {
+  --crewlet-side-panel-inset: 0px;
+}
+
+/* THE FOOT holds the panel's own commit, outside the scrolling body, so it
+   stays in reach at every scroll. Its inset is the body's. */
+.crewlet-side-panel__foot {
+  flex: none;
+  padding: var(--spacing-3) var(--spacing-4);
+  border-top: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+/* ── shapes the host decides ─────────────────────────────────────────── */
+
+/* A COLUMN keeps the content its floor: a width dragged in a wide frame is
+   capped at what leaves the content `--crewlet-side-panel-reserve` wide. */
+.crewlet-side-panel-frame[data-shape='column'] > .crewlet-side-panel:not([data-expanded]) {
+  width: min(var(--crewlet-side-panel-width), max(0px, 100% - var(--crewlet-side-panel-reserve, 0px)));
+}
+
+/* A DRAWER slides over the content's end edge, raised off it, rather than
+   squeezing the content under a useful width. */
+.crewlet-side-panel-frame[data-shape='drawer'] > .crewlet-side-panel:not([data-expanded]) {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: var(--z-index-overlay);
+  width: min(var(--crewlet-side-panel-width), 100%);
+  /* THE DRAWER'S LIFT, the shell's own rail drawer's: a smaller step left
+     the panel's start edge reading as a cut through the content rather than
+     a sheet over it. */
+  box-shadow: var(--shadow-xl);
+}
+
+/* A SHEET is the frame until it is closed. */
+.crewlet-side-panel-frame[data-shape='sheet'] > .crewlet-side-panel {
+  position: absolute;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  width: auto;
+  border-left: 0;
+}
+
+/* ── shapes the frame measures (no `shape`) ─────────────────────────── */
+
+/* NOT ROOM FOR TWO COLUMNS: the drawer, as above. */
+@container crewlet-side-panel-frame (width < 960px) {
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-side-panel-width), 100%);
+    box-shadow: var(--shadow-xl);
+  }
+
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the frame until it is closed. */
+@container crewlet-side-panel-frame (width < 640px) {
+  .crewlet-side-panel-frame[data-shape='auto'] > .crewlet-side-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}

package/dist/SlideCompare/index.js

@@ -1,7 +1,8 @@
-export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-7CGPPAYR.js';
+export { SLIDE_COMPARE_LABELS, SlideCompare } from '../chunk-UV4LOQ3E.js';
 import '../chunk-RMEBFYL7.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';

package/dist/SlideFilmstrip/index.js

@@ -1,13 +1,14 @@
-export { SlideFilmstrip } from '../chunk-SQ4JFHO7.js';
+export { SlideFilmstrip } from '../chunk-WOW5SCEK.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-RSAQOKH3.js';
-import '../chunk-TMM32U7D.js';
+import '../chunk-TKS7FTTO.js';
+import '../chunk-HD4QJ2SI.js';
+import '../chunk-EA23JG6R.js';
 import '../chunk-OMV5W53A.js';
-import '../chunk-OG6CL3EB.js';
 import '../chunk-H5XTJ7GJ.js';
-import '../chunk-LACA4JGC.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-NUZHC6MM.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideNav/index.js

@@ -1,4 +1,4 @@
-export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-RRO7UEYU.js';
-import '../chunk-LACA4JGC.js';
+export { SLIDE_NAV_LABELS, SlideNav } from '../chunk-OHBXOEP3.js';
+import '../chunk-2BQYODY3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes } from 'react';
+/**
+ * How big the ring draws. `em` (the default) follows the text around it, which
+ * is what a button's leading slot wants; the steps are the glyph scale of
+ * `@crewlethq/icons` (12, 14 and 16px), so a ring that stands in a glyph's
+ * place in a status column is exactly the glyph's size and nothing moves when
+ * the work finishes and the ring becomes a check.
+ */
+export type SpinnerSize = 'em' | 'xs' | 'sm' | 'md';
+export interface SpinnerProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    size?: SpinnerSize | undefined;
+}
+/**
+ * Work under way, drawn as the package's one ring: a 2px ring in the current
+ * ink with its right quarter open, turning once per slow motion step.
+ *
+ * ONE RING FOR THE WHOLE PACKAGE. A button's pending state, a request's state
+ * column and a status tag all draw this element, so a screen that shows three
+ * of them at once shows one kind of mark at three places rather than three
+ * kinds of mark. The ink is `currentColor`, so the ring takes whatever the
+ * words beside it are drawn in.
+ *
+ * `display: inline-block`, stated, because a ring is a box with a border: as
+ * an inline box inside a line of text its width and height are ignored and
+ * only a sliver of its left border is drawn.
+ *
+ * UNDER REDUCED MOTION IT STOPS AND STAYS OPEN. A closed ring reads as an
+ * empty status circle, which says "nothing here"; the open one still reads as
+ * pending without moving.
+ *
+ * DECORATION. It is hidden from assistive technology, because a ring has no
+ * words: whatever draws it says what is under way (a button sets `aria-busy`,
+ * a status says "Working").
+ */
+export declare function Spinner({ size, className, ...rest }: SpinnerProps): import("react").JSX.Element;

package/dist/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+import './Spinner.css';
+export { Spinner } from './Spinner.js';
+export type { SpinnerProps, SpinnerSize } from './Spinner.js';

package/dist/Spinner/index.js

@@ -0,0 +1,2 @@
+export { Spinner } from '../chunk-EA23JG6R.js';
+import '../chunk-ODEQTPFM.js';

package/dist/Spinner-XZ2TVYE5.css

@@ -0,0 +1,46 @@
+/*
+ * The package's one ring. See Spinner.tsx for why it is inline-block, why it
+ * stays open when it stops, and why its ink is the current colour.
+ */
+.crewlet-spinner {
+  display: inline-block;
+  box-sizing: border-box;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: var(--radius-circle);
+  opacity: 0.7;
+  animation: crewlet-spinner-turn var(--motion-duration-slow) linear infinite;
+}
+
+/* The glyph scale of @crewlethq/icons: xs 12px, sm 14px, md 16px. */
+.crewlet-spinner--xs {
+  width: var(--font-size-xs);
+  height: var(--font-size-xs);
+}
+
+.crewlet-spinner--sm {
+  width: var(--font-size-sm);
+  height: var(--font-size-sm);
+}
+
+.crewlet-spinner--md {
+  width: var(--font-size-md);
+  height: var(--font-size-md);
+}
+
+@keyframes crewlet-spinner-turn {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* It stops, and keeps its open quarter: a closed ring reads as an empty status
+   circle, the open one still reads as pending. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-spinner {
+    animation: none;
+  }
+}

package/dist/StatusCard/StatusCard.d.ts

@@ -0,0 +1,59 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type CardSectionPadding } from '../Card/index.js';
+import { type TagVariant } from '../Tag/index.js';
+/** A card's state, drawn as a `Tag` at the end of its head. */
+export interface StatusCardStatus {
+    /** The state in words: "Needs your approval", "Applied", "Not permitted". */
+    label: string;
+    tone: TagVariant;
+    /** The Tag's leading mark, at `xs`: a glyph, or a `Spinner` while the card's work runs. */
+    icon?: ReactNode;
+}
+/**
+ * How the foot's controls stand. A foot that holds a DECISION (a primary
+ * action) is end-aligned, where a reader finishes reading the card; a foot of
+ * utilities only (downloads, a copy, a link elsewhere) starts on the card's
+ * text edge, with a ghost button's padding pulled out so its glyph sits on
+ * that edge.
+ */
+export type StatusCardActionsAlign = 'end' | 'start';
+export interface StatusCardProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** What the card is, in sentence case: the action proposed, the result shown. */
+    title: string;
+    /** A second line beside the title, under it on a card narrower than 480px. */
+    subtitle?: ReactNode;
+    /** Puts the subtitle under the title at every width. */
+    subtitlePlacement?: 'beside' | 'below' | undefined;
+    /** The card's state, at the end of its head. Part of the card's name. */
+    status?: StatusCardStatus | undefined;
+    /**
+     * The card's work is over (applied, declined, expired): its body steps back
+     * to the secondary ink so the foot strip reads first, and what it recorded
+     * stays legible.
+     */
+    settled?: boolean | undefined;
+    /** The body's inset. `md` by default; `none` lets a table run to the card's edges. */
+    bodyPadding?: CardSectionPadding | undefined;
+    /** What happened, as a `ReceiptStrip` at the card's foot, above any actions. */
+    strip?: ReactNode;
+    /** The foot's controls. */
+    actions?: ReactNode;
+    /** `end` (the default) for a foot holding a decision; `start` for utilities only. */
+    actionsAlign?: StatusCardActionsAlign | undefined;
+    children?: ReactNode;
+}
+/**
+ * A record with a state, as the product's own card: the default `Card`, one
+ * hairline, a sentence-case title over the head's rule, the state as a `Tag`
+ * at the end of the head, and what happened as a strip at the foot. No tone
+ * rail and no tinted head: the Tag says the state in words, and a rail beside
+ * it only repeated it in colour.
+ *
+ * A SECTION NAMED BY ITS TITLE AND ITS STATE ("Create task, Needs your
+ * approval"), so a reader moving by region hears both before reading the
+ * body.
+ *
+ * THE FOOT FOLLOWS ONE RULE: a decision ends the row, utilities start it. On
+ * a card narrower than 360px a decision's buttons share the row as blocks.
+ */
+export declare function StatusCard({ title, subtitle, subtitlePlacement, status, settled, bodyPadding, strip, actions, actionsAlign, className, children, ...rest }: StatusCardProps): import("react").JSX.Element;

package/dist/StatusCard/index.d.ts

@@ -0,0 +1,3 @@
+import './StatusCard.css';
+export { StatusCard } from './StatusCard.js';
+export type { StatusCardActionsAlign, StatusCardProps, StatusCardStatus } from './StatusCard.js';

package/dist/StatusCard/index.js

@@ -0,0 +1,9 @@
+export { StatusCard } from '../chunk-WDIVALLP.js';
+import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
+import '../chunk-INHXF2CL.js';
+import '../chunk-AV2DXAEL.js';
+import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/StatusCard-6RPEE6UU.css

@@ -0,0 +1,62 @@
+/*
+ * A record with a state. The card, its head, its body and its foot are
+ * Card's; only what a status card adds is said here.
+ */
+
+/* The body holds a sentence, a list and a note, one gap apart. */
+.crewlet-status-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  min-width: 0;
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-normal);
+  color: var(--color-text-primary);
+}
+
+.crewlet-status-card__body > p {
+  margin: 0;
+}
+
+/* Settled: the body steps back so the strip at the foot reads first. */
+.crewlet-status-card--settled .crewlet-status-card__body {
+  color: var(--color-text-secondary);
+}
+
+/* The strip fills its flush footer edge to edge. */
+.crewlet-status-card__strip {
+  display: block;
+}
+
+/*
+ * THE FOOT'S ONE RULE. A decision ends the row; utilities start it, with a
+ * ghost button at either end pulled out by its padding and edge so its glyph
+ * sits on the card's text edge.
+ */
+.crewlet-status-card__actions {
+  flex-wrap: wrap;
+  container: crewlet-status-card-actions / inline-size;
+}
+
+.crewlet-status-card__actions--end {
+  justify-content: flex-end;
+}
+
+.crewlet-status-card__actions--start {
+  justify-content: flex-start;
+}
+
+.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:first-child {
+  margin-inline-start: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+.crewlet-status-card__actions--start > .crewlet-btn--ghost.crewlet-btn--small:last-child {
+  margin-inline-end: calc(-1 * (var(--spacing-2) + 1px));
+}
+
+/* A decision on a narrow card (a phone sheet): its buttons share the row as blocks. */
+@container crewlet-status-card-actions (width < 328px) {
+  .crewlet-status-card__actions--end > .crewlet-btn {
+    flex: 1 1 0;
+  }
+}

package/dist/StepList-A4YVU4JI.css

@@ -0,0 +1,119 @@
+/*
+ * A request's steps: a well on the inset ground, an ordered list of steps
+ * each on a three-track grid (the 16px state column, the words, the
+ * duration), every track aligned to the label's first line.
+ */
+
+/*
+ * A STATE'S MARK, shared with the run chip: a 16px box, the mark centred in
+ * it at the glyph's 14px, inked by state. The box's height is the line it
+ * stands on (`--crewlet-step-mark-line`), so it sits on that line's middle.
+ */
+.crewlet-step-mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--font-size-md);
+  height: var(--crewlet-step-mark-line, var(--font-size-md));
+}
+
+.crewlet-step-mark--running {
+  color: var(--color-text-secondary);
+}
+
+.crewlet-step-mark--done {
+  color: var(--color-feedback-success-ink);
+}
+
+.crewlet-step-mark--failed {
+  color: var(--color-feedback-danger-ink);
+}
+
+.crewlet-step-mark--waiting {
+  color: var(--color-feedback-warning-ink);
+}
+
+.crewlet-step-mark--refused,
+.crewlet-step-mark--stopped {
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list {
+  --crewlet-step-list-line: calc(var(--font-size-compact) * var(--font-line-height-normal));
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  min-width: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-inset);
+}
+
+.crewlet-step-list__summary {
+  font-size: var(--font-size-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list__steps {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.crewlet-step-list__step {
+  --crewlet-step-mark-line: var(--crewlet-step-list-line);
+
+  display: grid;
+  grid-template-columns: var(--font-size-md) minmax(0, 1fr) auto;
+  align-items: start;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-compact);
+  line-height: var(--crewlet-step-list-line);
+  color: var(--color-text-primary);
+}
+
+.crewlet-step-list__text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.crewlet-step-list__label {
+  overflow-wrap: anywhere;
+}
+
+/*
+ * WHAT THE STEP ASKED FOR, in the mono face. Each piece between separators is
+ * one inline block, so a line breaks only between pieces (at a space, or
+ * after `/`, `?` or `&`) and a piece wraps inside itself only when it alone
+ * is wider than the line.
+ */
+.crewlet-step-list__detail {
+  display: block;
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-snug);
+  font-variant-ligatures: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-step-list__piece {
+  display: inline-block;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+.crewlet-step-list__duration {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-2xs);
+  line-height: var(--crewlet-step-list-line);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-text-tertiary);
+  white-space: nowrap;
+}