@crewlethq/ui 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Crewlet
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# @crewlethq/ui
+
+Crewlet shared React components. Built on top of `@crewlethq/tokens` (CSS variables) and `@crewlethq/icons`.
+
+## Use it
+
+```tsx
+import '@crewlethq/tokens/css';                   // load CSS variables once at app entry
+import '@crewlethq/tokens/css/fonts';             // self-hosted Inter and JetBrains Mono
+import '@crewlethq/tokens/css/material-symbols';  // icon font the components render glyphs with
+import '@crewlethq/ui/styles.css';                // component styles (or rely on per-component CSS imports)
+import { Button, Card } from '@crewlethq/ui';
+import { Icon } from '@crewlethq/icons';
+
+<Card>
+  <Card.Body>
+    <Button variant="primary" leadingIcon={<Icon name="AgentReading" />}>
+      Open documentation
+    </Button>
+    <Button variant="outline">Cancel</Button>
+  </Card.Body>
+</Card>
+```
+
+The components render their glyphs as ligatures of the Material Symbols Outlined icon font inside `<span class="material-symbols-outlined">`. `@crewlethq/tokens/css/material-symbols` loads that font from Google Fonts (Apache License 2.0) and is the only import above that contacts a third-party host. Skip it when the app already loads the font under the same class name; see the `@crewlethq/tokens` README for details.
+
+## What is in here
+
+| Area | Components |
+| ---- | ---------- |
+| Actions | `Button` (variants `primary`, `secondary`, `outline`, `tertiary`, `accent`, `danger`; sizes `small`, `medium`, `large`; shapes `square`, `pill`), `IconButton`, `Copyable`, `Kbd` |
+| Forms | `Input`, `Textarea`, `Label`, `FormField`, `FormRow`, `Checkbox`, `Select`, `Tag`, `TagsInput`, `DateTimePicker`, `TimeWindowPicker`, `ImageUpload` |
+| Data display | `DataTable`, `CopyableCell`, `Table`, `StatCard`, `PricingCard`, `Avatar`, `CodeBlock`, `Skeleton`, `Eyebrow` |
+| Feedback and overlays | `Callout`, `Toaster`, `Modal`, `ConfirmModal`, `Popover` |
+| Layout | `AppShell`, `Container`, `Section`, `Card`, `Tabs`, `Accordion` |
+
+Storybook stories live under `apps/storybook/src/stories`.
+
+Add new components under `src/<Name>/` with a `Component.tsx`, optional `Component.css`, and an `index.ts`. Re-export from `src/index.ts`.
+
+## Theming hooks
+
+- **Light and dark palettes.** Import `@crewlethq/tokens/css/themes` and toggle `theme-light` or `theme-dark` on `<body>`. Every component reads the canonical `--color-*` variables, so no provider is needed.
+- **Accent colour.** The selected, active and focus states read `--color-brand-accent` and its companions from `@crewlethq/tokens`: `--color-brand-accent-rgb` (the same colour as a comma-separated `r, g, b` triple, for translucent tints), `--color-brand-accent-hover`, `--color-brand-accent-active`, `--color-brand-accent-soft` and `--color-brand-accent-soft-strong`. Rebind them together to retint the components. `Select` menus, `Popover` panels and the `DateTimePicker` and `TimeWindowPicker` popovers are portaled to `<body>`, so declare the override on `<body>` (or `<html>`) for those panels to follow it.
+
+```css
+/* Retint every accent state to the brand slate. */
+body {
+  --color-brand-accent: var(--color-brand-slate);
+  --color-brand-accent-hover: var(--color-brand-slate);
+  --color-brand-accent-active: var(--color-brand-slate);
+  --color-brand-accent-rgb: 60, 64, 82;
+  --color-brand-accent-soft: rgba(60, 64, 82, 0.10);
+  --color-brand-accent-soft-strong: rgba(60, 64, 82, 0.32);
+}
+```
+
+- **Component variables.** A few components expose their own `--crewlet-*` variables for values that are not tokens, for example `--crewlet-data-table-active-sort-color`, `--crewlet-data-table-row-hover-bg` and `--crewlet-data-table-archived-tint-rgb` on the compact `DataTable`, and `--crewlet-avatar-tint-fg` for the initials on a tinted `Avatar`. Override them from a rule that targets the component's root.
+
+The component stylesheets read only variables that `@crewlethq/tokens` emits or that the components declare themselves; `npm run lint` in this package enforces it.
+
+## Why CSS, not CSS-in-JS
+
+The tokens package emits plain CSS variables. Plain CSS keeps every consumer (any bundler, server-rendered or not) compatible with no runtime overhead and no theme provider, and AI tools can read and modify the styles without a build step.
+
+## License
+
+MIT. The license text is in [`LICENSE`](./LICENSE), which ships in the package. The Crewlet name, logo and character are trademarks and are not covered by that license.

package/dist/Accordion-NIMJQIOI.css

@@ -0,0 +1,88 @@
+/*
+ * Accordion, a stacked disclosure list for FAQs and dense settings. One
+ * hairline rule between items, a chevron that rotates on open, and a panel
+ * that is fully removed from the a11y tree when collapsed.
+ */
+
+.crewlet-accordion {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-accordion__item {
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-accordion__heading {
+  margin: 0;
+  font: inherit;
+}
+
+.crewlet-accordion__trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-4);
+  width: 100%;
+  padding: var(--spacing-5) 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-display);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--font-line-height-snug);
+  transition: color var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-accordion__trigger:hover {
+  color: var(--color-brand-accent);
+}
+
+.crewlet-accordion__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus);
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-accordion__item.is-disabled .crewlet-accordion__trigger {
+  cursor: not-allowed;
+  color: var(--color-text-muted);
+}
+
+.crewlet-accordion__title {
+  min-width: 0;
+}
+
+.crewlet-accordion__icon {
+  flex-shrink: 0;
+  font-size: 24px;
+  color: var(--color-text-tertiary);
+  transition: transform var(--motion-duration-base) var(--motion-easing-out);
+}
+
+.crewlet-accordion__item.is-open .crewlet-accordion__icon {
+  transform: rotate(180deg);
+  color: var(--color-brand-accent);
+}
+
+.crewlet-accordion__panel {
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-md);
+  line-height: var(--font-line-height-relaxed, 1.7);
+}
+
+.crewlet-accordion__panel-inner {
+  padding: 0 0 var(--spacing-5);
+  max-width: 68ch;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-accordion__icon,
+  .crewlet-accordion__trigger {
+    transition: none;
+  }
+}

package/dist/AppShell-ZW3NSFBP.css

@@ -0,0 +1,51 @@
+/*
+ * AppShell, layout shell for console apps.
+ *
+ * Passive composition: the sidebar and topbar slots position
+ * themselves (typically `position: fixed`); AppShell only reserves
+ * the gutters the fixed elements overlay via margin / padding on
+ * the content column, so an application can adopt the shell without
+ * restyling a sidebar or header it already positions itself.
+ *
+ * Layout dimensions are exposed as CSS custom properties on the
+ * root so styles inside slot children can read them.
+ */
+
+.crewlet-app-shell {
+  display: flex;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: visible;
+  --crewlet-app-shell-sidebar-width: 280px;
+  --crewlet-app-shell-topbar-height: 64px;
+}
+
+.crewlet-app-shell__column {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  margin-left: var(--crewlet-app-shell-sidebar-width);
+  padding-top: var(--crewlet-app-shell-topbar-height);
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: visible;
+}
+
+.crewlet-app-shell__main {
+  flex: 1;
+  padding: 40px 0;
+  overflow-y: auto;
+  overflow-x: visible;
+  min-height: 0;
+  /*
+   * Reserve space for the vertical scrollbar on every page so the
+   * tab strip, headers, and content stay anchored at the same x
+   * position when navigating between a tall page (long form, large
+   * table) and a short page (a card or two). Without this gutter,
+   * the scrollbar appears or disappears between routes and shifts
+   * every element horizontally by the scrollbar's width, which
+   * reads as the page "jumping" on every navigation.
+   */
+  scrollbar-gutter: stable;
+}

package/dist/Avatar-V6NG6Q45.css

@@ -0,0 +1,67 @@
+/*
+ * Avatar, round identity badge.
+ *
+ * The initials fallback
+ * uses the defined brand-accent surface and its paired on-brand text token so
+ * the dark, light, and system themes all keep an accessible contrast ratio.
+ */
+
+.crewlet-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  object-fit: cover;
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  line-height: 1;
+  user-select: none;
+}
+
+/* Shape modifiers. "circle" is the round identity badge; "square" keeps
+   rounded corners (matching the Card radius) so wide marks such as company
+   logos are not cropped into a circle. */
+.crewlet-avatar--circle {
+  border-radius: var(--radius-circle, 50%);
+}
+
+.crewlet-avatar--square {
+  border-radius: var(--radius-lg, 12px);
+}
+
+.crewlet-avatar--image {
+  display: block;
+  object-fit: cover;
+}
+
+.crewlet-avatar--fallback {
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-brand);
+  text-transform: uppercase;
+}
+
+/*
+ * Identity tints. When a colorSeed is supplied, the initials fallback picks
+ * one of these fixed backgrounds by a stable hash of the seed, so each
+ * identity keeps a distinct, consistent colour across the product (agent
+ * rosters, member lists). The palette is chosen for a legible contrast ratio
+ * against white initials (overridable through --crewlet-avatar-tint-fg),
+ * and each tint overrides the plain
+ * brand-accent fallback above. Ordering matters: these rules follow
+ * .crewlet-avatar--fallback so the tint wins at equal specificity.
+ */
+.crewlet-avatar--tint {
+  color: var(--crewlet-avatar-tint-fg, #ffffff);
+}
+
+.crewlet-avatar--tint-0 { background: #2563eb; }
+.crewlet-avatar--tint-1 { background: #7c3aed; }
+.crewlet-avatar--tint-2 { background: #c026d3; }
+.crewlet-avatar--tint-3 { background: #db2777; }
+.crewlet-avatar--tint-4 { background: #dc2626; }
+.crewlet-avatar--tint-5 { background: #ea580c; }
+.crewlet-avatar--tint-6 { background: #ca8a04; }
+.crewlet-avatar--tint-7 { background: #16a34a; }
+.crewlet-avatar--tint-8 { background: #0d9488; }
+.crewlet-avatar--tint-9 { background: #0284c7; }

package/dist/Button-XGCTXXYP.css

@@ -0,0 +1,174 @@
+/*
+ * Button styles. Colour properties go through the @crewlethq/tokens
+ * variables so the dark, light and system themes pick up the right
+ * palette without a per-theme rule here.
+ *
+ * Each size fixes a min-height (28, 32 and 44px) so a row of mixed
+ * buttons, with and without icons, keeps one height. IconButton's
+ * 28px size matches the small button, so check the IconButton and
+ * toolbar stories in Storybook when you change a size.
+ */
+
+.crewlet-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  font-family: var(--font-family-sans);
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.crewlet-btn:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
+}
+
+.crewlet-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ── Sizes (padding + font + min-height) ─────────────────────────── */
+.crewlet-btn--small  { padding: 5px 12px; font-size: 12px; min-height: 28px; }
+.crewlet-btn--medium { padding: 7px 14px; font-size: 13px; min-height: 32px; }
+.crewlet-btn--large  { padding: 9px 18px; font-size: 15px; min-height: 44px; }
+
+/* ── Shape modifiers ────────────────────────────────────────────── */
+.crewlet-btn--square { border-radius: 8px; }
+.crewlet-btn--pill   { border-radius: 100px; gap: 6px; }
+
+.crewlet-btn--pill.crewlet-btn--small  { padding: 6px 16px; }
+.crewlet-btn--pill.crewlet-btn--medium { padding: 9px 22px; }
+.crewlet-btn--pill.crewlet-btn--large  { padding: 11px 28px; }
+
+/*
+ * Pill buttons paired with Material Symbols icons read better when
+ * the icon drops from its default 20px to 16px so "← Back" / "Next →"
+ * pairs sit as a unit.
+ */
+.crewlet-btn--pill .material-symbols-outlined {
+  font-size: 16px;
+}
+
+/* ── Primary: solid white CTA, black text (dark theme); flips to
+   black-on-white in the light theme through the token overrides. ── */
+.crewlet-btn--primary {
+  background: var(--color-brand-primary, #ffffff);
+  color: var(--color-text-on-brand, #000000);
+  border-color: var(--color-brand-primary, #ffffff);
+}
+.crewlet-btn--primary:hover:not(:disabled) {
+  background: var(--color-brand-primary-hover, rgba(255, 255, 255, 0.9));
+  border-color: var(--color-brand-primary-hover, rgba(255, 255, 255, 0.9));
+}
+.crewlet-btn--primary:active:not(:disabled) {
+  background: var(--color-brand-primary-active, rgba(255, 255, 255, 0.82));
+  border-color: var(--color-brand-primary-active, rgba(255, 255, 255, 0.82));
+}
+
+/* ── Secondary: ghost with visible border. ──────────────────────── */
+.crewlet-btn--secondary {
+  background: var(--color-surface-subtle);
+  color: var(--color-text-primary);
+  border-color: var(--color-border-default);
+}
+.crewlet-btn--secondary:hover:not(:disabled) {
+  background: var(--color-surface-elevated, var(--color-surface-subtle));
+  border-color: var(--color-border-strong);
+}
+
+/* ── Outline: lavender accent. Branded secondary CTA. ───────────── */
+.crewlet-btn--outline {
+  background: transparent;
+  color: var(--color-brand-accent, #5469d4);
+  border-color: var(--color-brand-accent, #5469d4);
+}
+.crewlet-btn--outline:hover:not(:disabled) {
+  background: var(--color-brand-accent-soft, rgba(84, 105, 212, 0.10));
+  border-color: var(--color-brand-accent, #5469d4);
+}
+
+/* ── Tertiary: borderless ghost. ─────────────────────────────────── */
+.crewlet-btn--tertiary {
+  background: transparent;
+  color: var(--color-text-secondary);
+  border-color: transparent;
+}
+.crewlet-btn--tertiary:hover:not(:disabled) {
+  background: var(--color-surface-elevated, var(--color-surface-subtle));
+  color: var(--color-text-primary);
+}
+
+/* ── Accent: solid brand accent CTA. Used when the page already has
+   a white "primary" and a branded "yes do this" still belongs on
+   the surface, for example the action inside a toast. ────────── */
+.crewlet-btn--accent {
+  background: var(--color-brand-accent, #5469d4);
+  color: #ffffff;
+  border-color: var(--color-brand-accent, #5469d4);
+}
+.crewlet-btn--accent:hover:not(:disabled) {
+  background: var(--color-brand-accent-hover, #6478e0);
+  border-color: var(--color-brand-accent-hover, #6478e0);
+}
+.crewlet-btn--accent:active:not(:disabled) {
+  background: var(--color-brand-accent-active, #4a5cc2);
+  border-color: var(--color-brand-accent-active, #4a5cc2);
+}
+
+/* ── Danger: solid red for destructive confirmation. ────────────── */
+.crewlet-btn--danger {
+  background: var(--color-feedback-danger, #f43f5e);
+  color: #ffffff;
+  border-color: var(--color-feedback-danger, #f43f5e);
+}
+.crewlet-btn--danger:hover:not(:disabled) {
+  background: var(--color-feedback-danger-hover, #e11d48);
+  border-color: var(--color-feedback-danger-hover, #e11d48);
+}
+
+.crewlet-btn__icon  { display: inline-flex; align-items: center; }
+.crewlet-btn__label { display: inline-flex; align-items: center; }
+
+/*
+ * Pending state. The spinner takes the leading icon's place so the
+ * label neither moves nor changes width when an action starts, which is
+ * what makes a button feel like it is working rather than replaced.
+ */
+.crewlet-btn__spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.7;
+  animation: crewlet-btn-spin 0.6s linear infinite;
+  flex: none;
+}
+
+@keyframes crewlet-btn-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* A disabled button already reads as unavailable; a loading one should
+   still read as this button, mid-action. */
+.crewlet-btn--loading {
+  cursor: progress;
+}
+
+/* A spinner that cannot spin should not pretend to. The ring still
+   reads as pending without the motion. */
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-btn__spinner {
+    animation: none;
+  }
+}

package/dist/Callout-LEGDIMAM.css

@@ -0,0 +1,52 @@
+/*
+ * Callout, inline status banner. One tinted surface per feedback
+ * tone, readable on dark surfaces without stealing focus from the
+ * content it annotates.
+ */
+
+.crewlet-callout {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  border: 1px solid;
+  border-radius: 10px;
+  padding: 12px 16px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.crewlet-callout__icon {
+  display: inline-flex;
+  margin-top: 1px;
+}
+
+.crewlet-callout__content { min-width: 0; }
+
+.crewlet-callout__title {
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+.crewlet-callout--info {
+  border-color: color-mix(in srgb, var(--color-feedback-info) 30%, transparent);
+  background: color-mix(in srgb, var(--color-feedback-info) 9%, transparent);
+  color: color-mix(in srgb, var(--color-feedback-info) 55%, var(--color-text-primary));
+}
+
+.crewlet-callout--success {
+  border-color: color-mix(in srgb, var(--color-feedback-success) 32%, transparent);
+  background: color-mix(in srgb, var(--color-feedback-success) 9%, transparent);
+  color: color-mix(in srgb, var(--color-feedback-success) 55%, var(--color-text-primary));
+}
+
+.crewlet-callout--warning {
+  border-color: color-mix(in srgb, var(--color-feedback-warning) 32%, transparent);
+  background: color-mix(in srgb, var(--color-feedback-warning) 9%, transparent);
+  color: color-mix(in srgb, var(--color-feedback-warning) 60%, var(--color-text-primary));
+}
+
+.crewlet-callout--danger {
+  border-color: color-mix(in srgb, var(--color-feedback-danger) 30%, transparent);
+  background: color-mix(in srgb, var(--color-feedback-danger) 9%, transparent);
+  color: color-mix(in srgb, var(--color-feedback-danger) 45%, var(--color-text-primary));
+}

package/dist/Card-BOZGBML7.css

@@ -0,0 +1,86 @@
+/*
+ * Card, surface primitive with optional Header / Body / Footer slots.
+ * The 12px radius is shared with PricingCard so a card grid and a plain
+ * card read as one family on the same page.
+ *
+ * Variants: default sits one step above the page on the subtle surface,
+ * subtle sits flush with the page background behind its border,
+ * outlined is transparent with a strong border, and elevated lifts off
+ * the page with the elevated surface and a shadow.
+ */
+
+.crewlet-card {
+  background-color: var(--color-surface-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 12px;
+  color: var(--color-text-primary);
+  display: flex;
+  flex-direction: column;
+}
+
+.crewlet-card--default  { background-color: var(--color-surface-subtle); }
+.crewlet-card--subtle   { background-color: var(--color-surface-background); }
+.crewlet-card--outlined {
+  background-color: transparent;
+  border-color: var(--color-border-strong);
+}
+.crewlet-card--elevated {
+  background-color: var(--color-surface-elevated, var(--color-surface-subtle));
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
+}
+
+.crewlet-card--p-sm   { padding: 12px 16px; }
+.crewlet-card--p-md   { padding: 20px 24px; }
+.crewlet-card--p-lg   { padding: 24px 28px; }
+
+.crewlet-card.is-interactive {
+  cursor: pointer;
+  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+.crewlet-card.is-interactive:hover {
+  border-color: var(--color-border-strong);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
+}
+.crewlet-card.is-interactive:focus-visible {
+  outline: none;
+  box-shadow: var(--shadow-focus, 0 0 0 3px rgba(84, 105, 212, 0.32));
+}
+
+.crewlet-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.crewlet-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-height: 0;
+}
+
+.crewlet-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border-default);
+}
+
+.crewlet-card__title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.crewlet-card__description {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin: 0;
+  line-height: 1.5;
+}

package/dist/Checkbox-OCUICIIZ.css

@@ -0,0 +1,58 @@
+/*
+ * Checkbox, a box and its label as one target.
+ *
+ * The label is part of the control rather than text beside it, so the
+ * whole thing is clickable and the description is announced with it.
+ */
+
+.crewlet-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.crewlet-checkbox__control {
+  /* Aligns the box with the first line of the label rather than the
+     block, which drifts as soon as a description wraps. */
+  margin: 2px 0 0;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 auto;
+  accent-color: var(--color-brand-primary);
+  cursor: pointer;
+}
+
+.crewlet-checkbox--danger .crewlet-checkbox__control {
+  accent-color: var(--color-feedback-danger);
+}
+
+.crewlet-checkbox__text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.crewlet-checkbox__label {
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--color-text-primary);
+}
+
+.crewlet-checkbox__description {
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--color-text-secondary);
+}
+
+.crewlet-checkbox.is-disabled .crewlet-checkbox__control,
+.crewlet-checkbox.is-disabled .crewlet-checkbox__text {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.crewlet-checkbox__control:focus-visible {
+  outline: 2px solid var(--color-brand-primary);
+  outline-offset: 2px;
+}