@carissa-io/theme-default 0.3.7 → 0.3.8

package/DESIGN.md

@@ -362,6 +362,31 @@ The panel slides in over `$transition-duration`; with reduced motion it just app
 From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`
 background (14.23:1 light, 13.88:1 dark) plus the theme's 1px `--c-focus` ring. Labels are small `--c-muted` text (4.74:1 / 7.85:1 on the panel), the separator a 1px `--c-muted` line, a disabled item is half opacity. Square. The trigger is the app's own button, so its look is not part of the theme.
 
+## Table
+From [components-table](components/components-table): `Table` and its parts. The header is `--c-surface` with bold `--c-text` (16.4:1 light, 16.4:1 dark), the rows are divided by 1px `--c-muted` lines, cells have 1rem by 0.75rem of padding (0.75rem by 0.375rem when dense) at the small size. **Row hover** is `--c-surface-active` (14.2:1 / 13.9:1 for `--c-text`), not `--c-surface`, so it still shows on a striped row (stripes are `--c-surface`). The **selected row** is a 12% tint of `--c-primary` over `--c-background`
+(`color-mix`, light `#e0e0e0`, dark `#272727`), so `--c-text` is 13.6:1 / 13.7:1 on it and the tint follows the mode with no extra role. The **sticky header** background is `--c-surface`, a custom property and therefore opaque in both modes (rows never show through, and dark gets its own value; the component's neutral default is a literal white and must not be used in dark). The caption is `--c-muted` (4.74:1 / 7.85:1 on the background). The sort arrows are CSS glyphs, so the direction is a shape and not only an opacity. Square, the theme's 1px `--c-focus` ring inside the cell and the scroll region.
+
+## List
+From [components-list](components/components-list): `List` and `ListItem`. Rows sit on the page background, divided (or bordered) by 1px `--c-muted` lines, with 1rem by 0.75rem of padding. A link or button row highlights with `--c-surface-active` on hover (`--c-text` 14.2:1 / 13.9:1) and the current item (`aria-current`) takes the same 12% `--c-primary` tint as a selected table row (13.6:1 / 13.7:1). The secondary text is `--c-text` at the small size on purpose: `--c-muted` is 4.74:1 on the background but only 4.35:1 on `--c-surface` and 3.76:1 on `--c-surface-active`, both short of AA for text. Square, the theme's 1px `--c-focus` ring inside the row.
+
+## Description list
+From [components-description-list](components/components-description-list): `DescriptionList`, `DescriptionTerm`, `DescriptionDetail` and `DescriptionItem`. The term is a small bold `--c-muted` label (4.74:1 light, 7.85:1 dark on the background; do not put a description list on `--c-surface` in light, where it is 4.35:1) and the detail is `--c-text`. No fills or borders: the layout (vertical, horizontal, grid) is the only thing it sets, with 2rem between columns and 1rem between pairs.
+
+## Stat
+From [components-stat](components/components-stat): `Stat`. A card-like block on `--c-background` with a 1px `--c-muted` border (the Card's outlined look), square, 1.25rem by 1.5rem of padding. It is not on `--c-surface` because the delta colors are checked against the background: **delta up is `--c-success`** (5.02:1 light, 11.36:1 dark), **delta down is `--c-error`** (4.53:1 light, 7.16:1 dark) and **flat is `--c-muted`** (4.74:1 / 7.85:1). On `--c-surface` the light `--c-error` would be 4.15:1, short of AA. The value is `--c-text` at the h1 size; the label and description are `--c-muted`. Color is never the only signal: the arrow glyph (up, down, flat) and the `delta_label` text for screen readers say the same. Whether "down" is good news (churn, cost) is the app's call: the color only follows the direction.
+
+## Empty state
+From [components-empty-state](components/components-empty-state): `EmptyState`. A centred block on the page background, with 3rem by 1.5rem of padding at the default size and 1rem between its parts. The icon is `--c-muted` (4.74:1 light, 7.85:1 dark, above the 3:1 non-text minimum), the title is `--c-text`, bold, at the h3 size (h4 small, h2 large) and the description is `--c-muted` at the body size (4.74:1 / 7.85:1 on the background; on `--c-surface` it would be 4.35:1 in light, short of AA, so do not put an empty state on a surface panel without moving the description to `--c-text`). The actions are the app's own buttons. No fills, borders or radius.
+
+## Timeline
+From [components-timeline](components/components-timeline): `Timeline` and `TimelineItem`. The connector is a 1px `--c-muted` line. A **default** marker is a `--c-surface-active` dot with a 2px `--c-muted` ring; **success, warning, error and info** are solid dots in `--c-success`, `--c-warning`, `--c-error` and `--c-info` (light 5.02, 4.92, 4.53 and 6.70:1 on the background, dark 11.36, 11.86, 7.16 and 7.79:1: all above the 3:1 non-text minimum); the **current** step is a hollow `--c-primary` ring (21:1 / 19.8:1), a different shape from the dots, and the item carries `aria-current="step"`. An **icon marker** keeps a `--c-background` fill and takes the status as its 2px ring, so the `--c-text` icon is 17.93:1 / 18.16:1 in every status (a colored fill would not give one icon color AA in both modes). The status is also the visually hidden `status_label`, so colour is never the only signal. The title is bold `--c-text`, the time is `--c-muted` at the small size (4.74:1 / 7.85:1 on the background) and the description is `--c-text`. Keep a timeline on `--c-background`. Deviation from the first plan: the default dot is outlined with `--c-muted` instead of being a bare `--c-surface-active` dot, which is 1.2:1 on white.
+
+## Tree
+From [components-tree](components/components-tree): `Tree` and `TreeItem`. Rows are 0.5rem by 0.75rem on the page background, 1.5rem of indent per level. **Hover** is `--c-surface-active` (`--c-text` 14.23:1 light, 13.88:1 dark); the **selected row** is the same 12% tint of `--c-primary` over `--c-background` as a selected table row (`color-mix`, light `#e0e0e0`, dark `#272727`) with `--c-text` (13.58:1 / 13.70:1), so a selected row still reads when hovered. The **chevron** is the component's CSS border chevron on `.c-tree__toggle` (parents only; right when closed, down when open), colored `--c-muted`: 3.76:1 on the hover and 3.59:1 on the selected tint in light, 6.00:1 and 5.92:1 in dark, above the 3:1 non-text minimum. A disabled item is half opacity (exempt from contrast). Square, the theme's 1px `--c-focus` ring inside the row.
+
+## Code
+From [components-code](components/components-code): `Code`, `Kbd` and `CodeBlock`. The font is the tokens' monospace stack. **Inline code** is `--c-text` on `--c-surface` (16.44:1 in both modes), square, 0.875em. A **kbd** is a `--c-background` key with a 1px `--c-muted` border and a 1px `--c-muted` bottom edge, text `--c-text` (17.93:1 / 18.16:1). The **block** is `--c-surface` with a 1px `--c-muted` border (4.35:1 light, 7.11:1 dark against the surface, above 3:1) and `--c-text` at the small size; highlighted `children` are the app's to keep AA on `--c-surface`. The **copy button** reads like the secondary button: `--c-background` with a 1px `--c-muted` border, `--c-text` (17.93:1 / 18.16:1) and a `--c-surface-active` hover (`--c-text` 14.23:1 / 13.88:1), square, with the theme's 1px `--c-focus` ring inside it and on the focusable `pre`. The component has no uppercase label variables, so the button keeps the small body text instead of the secondary button's label style.
+
 ## Keyboard focus (all controls)
 One rule keeps the controls coherent: **an outlined control thickens its own border from 1px to 2px, black** (text fields,
 select, combobox, date picker, textarea, upload, empty checkbox, off switch, radio, secondary and ghost buttons); **a filled

package/README.md

@@ -142,7 +142,7 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 
 ## What it configures
 `components-input`, `-button`, `-checkbox`, `-switch`, `-radio-group`, `-slider`, `-popover`, `-listbox`, `-select`,
-`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer` and `-menu`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton`, `-progress`, `-tooltip`, `-prose`, `-tabs`, `-accordion`, `-breadcrumb`, `-pagination`, `-stepper`, `-sidebar`, `-navbar`, `-drawer`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree` and `-code`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 :root {
   --c-background: #fff;
   --c-text: #171717;
@@ -3652,3 +3653,798 @@ hr.c-divider {
   margin: 0.25rem 0;
   background: var(--c-muted);
 }
+
+.c-table-wrapper {
+  box-sizing: border-box;
+  max-width: 100%;
+  overflow: auto;
+}
+.c-table-wrapper:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-table {
+  box-sizing: border-box;
+  width: 100%;
+  font-size: 0.875rem;
+  text-align: start;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+
+.c-table__caption {
+  padding: 0.75rem 1rem;
+  color: var(--c-muted);
+  text-align: start;
+  caption-side: top;
+}
+
+.c-table__header-cell,
+.c-table__cell {
+  padding: 0.75rem 1rem;
+  text-align: start;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--c-muted);
+}
+
+.c-table--dense .c-table__header-cell,
+.c-table--dense .c-table__cell {
+  padding: 0.375rem 0.75rem;
+}
+
+.c-table__header-cell--center,
+.c-table__cell--center {
+  text-align: center;
+}
+
+.c-table__header-cell--end,
+.c-table__cell--end {
+  text-align: end;
+}
+
+.c-table__header-cell {
+  font-weight: 700;
+  color: var(--c-text);
+  white-space: nowrap;
+  background: var(--c-surface);
+}
+
+.c-table--sticky-header .c-table__head .c-table__header-cell {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: var(--c-surface);
+}
+
+.c-table__body .c-table__row:hover {
+  background: var(--c-surface-active);
+}
+
+.c-table--striped .c-table__body .c-table__row:nth-child(even) {
+  background: var(--c-surface);
+}
+
+.c-table__body .c-table__row--selected,
+.c-table--striped .c-table__body .c-table__row--selected,
+.c-table__body .c-table__row--selected:hover {
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+}
+
+.c-table__foot .c-table__cell,
+.c-table__foot .c-table__header-cell {
+  font-weight: 700;
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-table__sort {
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  padding: 0;
+  font: inherit;
+  font-weight: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+.c-table__sort:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-table__sort-icon {
+  display: inline-block;
+  flex: none;
+  font-size: 0.625rem;
+  line-height: 1;
+  opacity: 0.35;
+}
+.c-table__sort-icon::before {
+  content: "↕";
+}
+
+.c-table__sort-icon--ascending {
+  opacity: 1;
+}
+.c-table__sort-icon--ascending::before {
+  content: "▲";
+}
+
+.c-table__sort-icon--descending {
+  opacity: 1;
+}
+.c-table__sort-icon--descending::before {
+  content: "▼";
+}
+
+.c-list {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-size: 1rem;
+  list-style: none;
+}
+
+ol.c-list {
+  padding-inline-start: 1.5rem;
+  list-style: decimal;
+}
+
+.c-list--sm {
+  font-size: 0.875rem;
+}
+
+.c-list--lg {
+  font-size: 1.125rem;
+}
+
+.c-list--bordered {
+  overflow: hidden;
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+
+.c-list--bordered > .c-list__item + .c-list__item,
+.c-list--divided > .c-list__item + .c-list__item {
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-list__item {
+  display: list-item;
+  padding: 0;
+  margin: 0;
+}
+.c-list__item--selected {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+}
+.c-list__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.c-list__row {
+  box-sizing: border-box;
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+}
+
+.c-list--sm .c-list__row {
+  padding-block: 0.5rem;
+}
+
+.c-list--lg .c-list__row {
+  padding-block: 1rem;
+}
+
+.c-list__item--interactive > .c-list__row {
+  cursor: pointer;
+  transition: background-color 0.2s ease-out;
+}
+.c-list__item--interactive > .c-list__row:hover {
+  background: var(--c-surface-active);
+}
+.c-list__item--interactive > .c-list__row:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-list__item--disabled > .c-list__row {
+  pointer-events: none;
+}
+
+.c-list__leading,
+.c-list__trailing {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.c-list__body {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.c-list__description {
+  font-size: 0.875rem;
+  color: var(--c-text);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-list__item--interactive > .c-list__row {
+    transition: none;
+  }
+}
+.c-description-list {
+  box-sizing: border-box;
+  margin: 0;
+  font-size: 1rem;
+}
+
+.c-description-list__item {
+  min-width: 0;
+}
+
+.c-description-list__term {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-muted);
+}
+
+.c-description-list__detail {
+  margin: 0;
+  overflow-wrap: anywhere;
+  color: var(--c-text);
+}
+
+.c-description-list--vertical {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.c-description-list--vertical > .c-description-list__term + .c-description-list__detail,
+.c-description-list--vertical > .c-description-list__item > .c-description-list__term + .c-description-list__detail {
+  margin-top: 0.25rem;
+}
+
+.c-description-list--grid {
+  display: grid;
+  grid-template-columns: repeat(var(--c-description-list-columns, 2), minmax(0, 1fr));
+  gap: 1rem 2rem;
+}
+.c-description-list--grid > .c-description-list__item > .c-description-list__term + .c-description-list__detail {
+  margin-top: 0.25rem;
+}
+
+.c-description-list--horizontal {
+  display: grid;
+  grid-template-columns: 12rem minmax(0, 1fr);
+  gap: 1rem 2rem;
+}
+.c-description-list--horizontal > .c-description-list__item {
+  display: grid;
+  grid-column: 1/-1;
+  grid-template-columns: subgrid;
+}
+
+.c-stat {
+  box-sizing: border-box;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1.25rem 1.5rem;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+
+.c-stat__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  color: var(--c-text);
+}
+
+.c-stat__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+  margin: 0;
+}
+
+.c-stat__label {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-muted);
+}
+
+.c-stat__value {
+  margin: 0;
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1.2;
+  color: var(--c-text);
+}
+
+.c-stat__description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+
+.c-stat__delta {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: baseline;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.c-stat__delta::before {
+  font-size: 0.75em;
+  content: "▲";
+  content: "▲"/"";
+}
+.c-stat__delta--up {
+  color: var(--c-success);
+}
+.c-stat__delta--down {
+  color: var(--c-error);
+}
+.c-stat__delta--down::before {
+  content: "▼";
+  content: "▼"/"";
+}
+.c-stat__delta--flat {
+  color: var(--c-muted);
+}
+.c-stat__delta--flat::before {
+  content: "▬";
+  content: "▬"/"";
+}
+
+.c-stat__delta-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c-stat__trend {
+  flex: none;
+  align-self: center;
+}
+
+.c-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 3rem 1.5rem;
+  text-align: center;
+}
+
+.c-empty-state--sm {
+  padding: 1.5rem 1rem;
+}
+
+.c-empty-state--lg {
+  padding: 4.5rem 2rem;
+}
+
+.c-empty-state__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3rem;
+  line-height: 1;
+  color: var(--c-muted);
+}
+.c-empty-state__icon > svg {
+  width: 1em;
+  height: 1em;
+}
+
+.c-empty-state--sm .c-empty-state__icon {
+  font-size: 2rem;
+}
+
+.c-empty-state--lg .c-empty-state__icon {
+  font-size: 4rem;
+}
+
+.c-empty-state__title {
+  max-width: 28rem;
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--c-text);
+}
+
+.c-empty-state--sm .c-empty-state__title {
+  font-size: 1.125rem;
+}
+
+.c-empty-state--lg .c-empty-state__title {
+  font-size: 1.75rem;
+}
+
+.c-empty-state__description {
+  max-width: 28rem;
+  margin: 0;
+  font-size: 1rem;
+  color: var(--c-muted);
+}
+
+.c-empty-state--sm .c-empty-state__description {
+  font-size: 0.875rem;
+}
+
+.c-empty-state--lg .c-empty-state__description {
+  font-size: 1rem;
+}
+
+.c-empty-state__content {
+  max-width: 28rem;
+}
+
+.c-empty-state__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: center;
+}
+
+.c-timeline {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-timeline__item {
+  position: relative;
+  display: flex;
+  gap: 1rem;
+  min-width: 0;
+}
+
+.c-timeline__marker {
+  box-sizing: border-box;
+  z-index: 1;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 0.75rem;
+  height: 0.75rem;
+  margin-top: 0.375rem;
+  color: var(--c-text);
+  background: var(--c-surface-active);
+  border: 2px solid var(--c-muted);
+  border-radius: 50%;
+}
+.c-timeline__marker--icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-top: 0;
+}
+
+.c-timeline__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.c-timeline__title {
+  font-weight: 700;
+  color: var(--c-text);
+}
+
+.c-timeline__time {
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+
+.c-timeline__description {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--c-text);
+}
+
+.c-timeline__extra {
+  min-width: 0;
+}
+
+.c-timeline__status-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c-timeline__item--success > .c-timeline__marker {
+  background: var(--c-success);
+  border-color: var(--c-success);
+}
+
+.c-timeline__item--warning > .c-timeline__marker {
+  background: var(--c-warning);
+  border-color: var(--c-warning);
+}
+
+.c-timeline__item--error > .c-timeline__marker {
+  background: var(--c-error);
+  border-color: var(--c-error);
+}
+
+.c-timeline__item--info > .c-timeline__marker {
+  background: var(--c-info);
+  border-color: var(--c-info);
+}
+
+.c-timeline__item > .c-timeline__marker--icon {
+  background: var(--c-background);
+}
+
+.c-timeline__item--current > .c-timeline__marker {
+  background: transparent;
+  border-color: var(--c-primary);
+}
+
+.c-timeline--vertical > .c-timeline__item {
+  padding-bottom: 1.5rem;
+}
+.c-timeline--vertical > .c-timeline__item:last-child {
+  padding-bottom: 0;
+}
+.c-timeline--vertical > .c-timeline__item:not(:last-child)::before {
+  position: absolute;
+  top: 1.25rem;
+  bottom: 0;
+  left: calc((1.5rem - 1px) / 2);
+  width: 1px;
+  content: "";
+  background: var(--c-muted);
+}
+.c-timeline--vertical > .c-timeline__item > .c-timeline__marker:not(.c-timeline__marker--icon) {
+  margin-right: calc(1.5rem - 0.75rem);
+  margin-left: calc((1.5rem - 0.75rem) / 2);
+}
+
+.c-timeline--horizontal {
+  display: flex;
+  gap: 1.5rem;
+  overflow-x: auto;
+}
+.c-timeline--horizontal > .c-timeline__item {
+  flex: 0 0 14rem;
+  flex-direction: column;
+  gap: 1rem;
+}
+.c-timeline--horizontal > .c-timeline__item:not(:last-child)::before {
+  position: absolute;
+  top: calc(1.5rem / 2 - 1px / 2);
+  left: 1.5rem;
+  width: calc(100% + 1.5rem - 1.5rem);
+  height: 1px;
+  content: "";
+  background: var(--c-muted);
+}
+.c-timeline--horizontal > .c-timeline__item > .c-timeline__marker:not(.c-timeline__marker--icon) {
+  margin-top: calc((1.5rem - 0.75rem) / 2);
+}
+
+.c-tree,
+.c-tree__group {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-tree {
+  font-size: 1rem;
+}
+
+.c-tree__group {
+  padding-inline-start: 1.5rem;
+}
+
+.c-tree__item {
+  margin: 0;
+  outline: none;
+}
+
+.c-tree__row {
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  border-radius: 0;
+  transition: background-color 0.2s ease-out;
+}
+.c-tree__row:hover {
+  background: var(--c-surface-active);
+}
+
+.c-tree__item--selected > .c-tree__row {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+}
+
+.c-tree__item:focus-visible > .c-tree__row {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-tree__item--disabled > .c-tree__row {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.c-tree__toggle {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+}
+
+.c-tree__item--parent > .c-tree__row > .c-tree__toggle::before {
+  box-sizing: border-box;
+  width: 0.4375rem;
+  height: 0.4375rem;
+  content: "";
+  border-right: 2px solid var(--c-muted);
+  border-bottom: 2px solid var(--c-muted);
+  transition: transform 0.2s ease-out;
+  transform: translateX(-12%) rotate(-45deg);
+}
+
+.c-tree__item--open > .c-tree__row > .c-tree__toggle::before {
+  transform: translateY(-12%) rotate(45deg);
+}
+
+.c-tree__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+}
+
+.c-tree__label {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-tree__row,
+  .c-tree__item--parent > .c-tree__row > .c-tree__toggle::before {
+    transition: none;
+  }
+}
+.c-code,
+.c-kbd,
+.c-code-block__code {
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.c-code {
+  padding: 0.125em 0.375em;
+  font-size: 0.875em;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-radius: 0;
+}
+
+.c-kbd {
+  display: inline-block;
+  padding: 0.125em 0.5em;
+  font-size: 0.8125em;
+  line-height: 1.2;
+  color: var(--c-text);
+  white-space: nowrap;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  box-shadow: 0 1px 0 var(--c-muted);
+}
+
+.c-code-block {
+  position: relative;
+}
+
+.c-code-block__pre {
+  box-sizing: border-box;
+  margin: 0;
+  overflow: auto;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  tab-size: 4;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  padding: 1rem;
+}
+.c-code-block__pre:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-code-block__code {
+  font-size: inherit;
+}
+
+.c-code-block--wrap .c-code-block__pre {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.c-code-block__copy {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  font: inherit;
+  font-size: 0.875rem;
+  color: var(--c-text);
+  cursor: pointer;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-code-block__copy:hover {
+  background: var(--c-surface-active);
+}
+.c-code-block__copy:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: -2px;
+}
+
+.c-code-block__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -75,7 +75,15 @@
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
     "@carissa-io/components-drawer": "^0.1.0",
-    "@carissa-io/components-menu": "^0.1.0"
+    "@carissa-io/components-menu": "^0.1.0",
+    "@carissa-io/components-table": "^0.1.0",
+    "@carissa-io/components-list": "^0.1.0",
+    "@carissa-io/components-description-list": "^0.1.0",
+    "@carissa-io/components-stat": "^0.1.0",
+    "@carissa-io/components-empty-state": "^0.1.0",
+    "@carissa-io/components-timeline": "^0.1.0",
+    "@carissa-io/components-tree": "^0.1.0",
+    "@carissa-io/components-code": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -203,6 +211,30 @@
     },
     "@carissa-io/components-menu": {
       "optional": true
+    },
+    "@carissa-io/components-table": {
+      "optional": true
+    },
+    "@carissa-io/components-list": {
+      "optional": true
+    },
+    "@carissa-io/components-description-list": {
+      "optional": true
+    },
+    "@carissa-io/components-stat": {
+      "optional": true
+    },
+    "@carissa-io/components-empty-state": {
+      "optional": true
+    },
+    "@carissa-io/components-timeline": {
+      "optional": true
+    },
+    "@carissa-io/components-tree": {
+      "optional": true
+    },
+    "@carissa-io/components-code": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -215,12 +247,16 @@
     "@carissa-io/components-calendar": "^0.1.1",
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-checkbox": "^0.1.1",
+    "@carissa-io/components-code": "^0.1.0",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-link": "^0.1.0",
+    "@carissa-io/components-list": "^0.1.0",
     "@carissa-io/components-listbox": "^0.1.1",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.0",
@@ -236,12 +272,16 @@
     "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",
     "@carissa-io/components-spinner": "^0.1.0",
+    "@carissa-io/components-stat": "^0.1.0",
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-tabs": "^0.1.0",
     "@carissa-io/components-tag": "^0.1.0",
+    "@carissa-io/components-timeline": "^0.1.0",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-tooltip": "^0.1.0",
+    "@carissa-io/components-tree": "^0.1.0",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
     "sass-embedded": "^1.105.1",

package/scss/index.scss

@@ -1177,3 +1177,215 @@
     $c-menu-separator-color: $var-muted,
     $c-menu-separator-margin: 0.25rem
 );
+
+// Table: a --c-surface header (--c-text, bold) over rows divided by 1px --c-muted lines. Row hover is --c-surface-active, so it
+// still shows on a striped (--c-surface) row; the selected row is a 12% tint of --c-primary over the background, a mix of two
+// custom properties that follows the mode (text is 13:1 on it in both). The sticky header must be opaque so rows do not show
+// through: it is --c-surface, a custom property, so dark works. Square, the theme's 1px focus ring inside the cell.
+@use '@carissa-io/components-table/scss' as table with (
+    $c-table-font-size: $font-size-small,
+    $c-table-cell-padding-x: 1rem,
+    $c-table-cell-padding-y: 0.75rem,
+    $c-table-dense-cell-padding-x: 0.75rem,
+    $c-table-dense-cell-padding-y: 0.375rem,
+    $c-table-border-width: 1px,
+    $c-table-border-color: $var-muted,
+    $c-table-header-color: $var-text,
+    $c-table-header-background: $var-surface,
+    $c-table-header-font-weight: $font-weight-bold,
+    $c-table-sticky-header-background: $var-surface,
+    $c-table-row-background-hover: $var-surface-active,
+    $c-table-row-background-striped: $var-surface,
+    $c-table-row-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-table-foot-font-weight: $font-weight-bold,
+    $c-table-caption-color: $var-muted,
+    $c-table-focus-outline: $focus-width solid $var-focus,
+    $c-table-focus-outline-offset: -2px
+);
+
+// List: rows on the page background, divided by 1px --c-muted lines. The secondary text is --c-text at the small size, not
+// --c-muted, because the row sits on --c-surface-active when hovered and --c-muted is only 3.8:1 there (4.35:1 on --c-surface).
+// Hover is --c-surface-active; the current item is the same 12% --c-primary tint as a selected table row. Square, the theme's
+// 1px focus ring inside the row.
+@use '@carissa-io/components-list/scss' as list with (
+    $c-list-item-padding-x: 1rem,
+    $c-list-item-padding-y: 0.75rem,
+    $c-list-item-padding-y-sm: 0.5rem,
+    $c-list-item-padding-y-lg: 1rem,
+    $c-list-item-gap: 1rem,
+    $c-list-font-size: $font-size-body,
+    $c-list-font-size-sm: $font-size-small,
+    $c-list-font-size-lg: $font-size-h4,
+    $c-list-description-color: $var-text,
+    $c-list-description-font-size: $font-size-small,
+    $c-list-border-width: 1px,
+    $c-list-border-color: $var-muted,
+    $c-list-radius: $radius,
+    $c-list-item-background-hover: $var-surface-active,
+    $c-list-item-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-list-item-color-selected: $var-text,
+    $c-list-focus-outline: $focus-width solid $var-focus,
+    $c-list-focus-outline-offset: -2px,
+    $c-list-transition-duration: $transition-duration
+);
+
+// Description list: the term is a small bold --c-muted label (4.7:1 on the background, so use it on --c-background, where
+// --c-muted is not enough on --c-surface) and the detail is --c-text. No fills or borders.
+@use '@carissa-io/components-description-list/scss' as description-list with (
+    $c-description-list-gap-x: 2rem,
+    $c-description-list-gap-y: 1rem,
+    $c-description-list-term-gap: 0.25rem,
+    $c-description-list-term-width: 12rem,
+    $c-description-list-font-size: $font-size-body,
+    $c-description-list-term-color: $var-muted,
+    $c-description-list-term-font-size: $font-size-small,
+    $c-description-list-term-font-weight: $font-weight-bold,
+    $c-description-list-detail-color: $var-text
+);
+
+// Stat: a card-like block on the page background with a 1px --c-muted border (the Card's outlined look), not on --c-surface:
+// the delta colors are checked against --c-background, where --c-success is 5:1 and --c-error 4.5:1 in light (4.15:1 for
+// --c-error on --c-surface). The label and the description are --c-muted (4.7:1), the value is --c-text. The delta is
+// success when up, error when down and muted when flat; the arrow and the screen-reader text say the same, so color is never
+// the only signal. In dark the status colors are lighter (7.1:1 and above on the background).
+@use '@carissa-io/components-stat/scss' as stat with (
+    $c-stat-padding: 1.25rem 1.5rem,
+    $c-stat-gap: 1rem,
+    $c-stat-content-gap: 0.25rem,
+    $c-stat-radius: $radius,
+    $c-stat-background: $var-background,
+    $c-stat-border: 1px solid $var-muted,
+    $c-stat-label-color: $var-muted,
+    $c-stat-label-font-size: $font-size-small,
+    $c-stat-label-font-weight: $font-weight-bold,
+    $c-stat-value-color: $var-text,
+    $c-stat-value-font-size: $font-size-h1,
+    $c-stat-value-font-weight: $font-weight-bold,
+    $c-stat-description-color: $var-muted,
+    $c-stat-description-font-size: $font-size-small,
+    $c-stat-icon-color: $var-text,
+    $c-stat-delta-font-size: $font-size-small,
+    $c-stat-delta-font-weight: $font-weight-bold,
+    $c-stat-delta-up-color: $var-success,
+    $c-stat-delta-down-color: $var-error,
+    $c-stat-delta-flat-color: $var-muted
+);
+
+// Empty state: a centred block on the page background. The icon is --c-muted (4.7:1 light, 7.9:1 dark, above the 3:1 non-text
+// minimum), the title --c-text at the h3 size and bold, the description --c-muted (4.7:1 on the background, so keep it off
+// --c-surface, where light is 4.35:1). The actions are the app's buttons. Square, nothing else to set.
+@use '@carissa-io/components-empty-state/scss' as empty-state with (
+    $c-empty-state-padding: 3rem 1.5rem,
+    $c-empty-state-padding-sm: 1.5rem 1rem,
+    $c-empty-state-padding-lg: 4.5rem 2rem,
+    $c-empty-state-gap: 1rem,
+    $c-empty-state-icon-size: 3rem,
+    $c-empty-state-icon-size-sm: 2rem,
+    $c-empty-state-icon-size-lg: 4rem,
+    $c-empty-state-icon-color: $var-muted,
+    $c-empty-state-title-color: $var-text,
+    $c-empty-state-title-font-size: $font-size-h3,
+    $c-empty-state-title-font-size-sm: $font-size-h4,
+    $c-empty-state-title-font-size-lg: $font-size-h2,
+    $c-empty-state-title-font-weight: $font-weight-bold,
+    $c-empty-state-description-color: $var-muted,
+    $c-empty-state-description-font-size: $font-size-body,
+    $c-empty-state-description-font-size-sm: $font-size-small,
+    $c-empty-state-description-font-size-lg: $font-size-body,
+    $c-empty-state-actions-gap: 0.75rem
+);
+
+// Timeline: a --c-muted connector and a small dot per event. A default dot is a --c-surface-active fill with a --c-muted ring;
+// success, warning, error and info are solid dots in their status color (4.5:1 or more against the background in light, 7:1 in
+// dark, above the 3:1 non-text minimum); the current step is a hollow --c-primary ring. An icon marker keeps a --c-background
+// fill and takes the status as its ring, so the --c-text icon is 17.9:1 / 18.2:1 in every status. The status text is the
+// hidden status_label, the time is --c-muted (4.7:1 / 7.9:1 on the background) and the title --c-text, bold. Color is never the
+// only signal.
+@use '@carissa-io/components-timeline/scss' as timeline with (
+    $c-timeline-gap: 1.5rem,
+    $c-timeline-content-gap: 1rem,
+    $c-timeline-content-spacing: 0.25rem,
+    $c-timeline-horizontal-item-width: 14rem,
+    $c-timeline-marker-size: 0.75rem,
+    $c-timeline-marker-icon-size: 1.5rem,
+    $c-timeline-marker-border-width: 2px,
+    $c-timeline-marker-color: $var-text,
+    $c-timeline-marker-icon-background: $var-background,
+    $c-timeline-marker-default: $var-surface-active,
+    $c-timeline-marker-default-border: $var-muted,
+    $c-timeline-marker-success: $var-success,
+    $c-timeline-marker-warning: $var-warning,
+    $c-timeline-marker-error: $var-error,
+    $c-timeline-marker-info: $var-info,
+    $c-timeline-marker-current: $var-primary,
+    $c-timeline-connector-width: 1px,
+    $c-timeline-connector-color: $var-muted,
+    $c-timeline-title-font-weight: $font-weight-bold,
+    $c-timeline-title-color: $var-text,
+    $c-timeline-time-color: $var-muted,
+    $c-timeline-time-font-size: $font-size-small,
+    $c-timeline-description-color: $var-text,
+    $c-timeline-description-font-size: $font-size-small
+);
+
+// Tree: rows on the page background. Hover is --c-surface-active (--c-text 14.2:1 / 13.9:1); the selected row is the same 12%
+// --c-primary tint over the background as a selected table row, with --c-text (13.6:1 / 13.7:1). The chevron is the component's
+// CSS border chevron in --c-muted (3.8:1 on the hover and 3.6:1 on the selected tint in light, 5.9:1 and above in dark: above
+// the 3:1 non-text minimum). Square, the theme's 1px focus ring inside the row.
+@use '@carissa-io/components-tree/scss' as tree with (
+    $c-tree-font-size: $font-size-body,
+    $c-tree-row-padding-x: 0.75rem,
+    $c-tree-row-padding-y: 0.5rem,
+    $c-tree-row-gap: 0.5rem,
+    $c-tree-row-radius: $radius,
+    $c-tree-indent: 1.5rem,
+    $c-tree-toggle-size: 1rem,
+    $c-tree-toggle-chevron-size: 0.4375rem,
+    $c-tree-toggle-chevron-width: 2px,
+    $c-tree-toggle-color: $var-muted,
+    $c-tree-row-background-hover: $var-surface-active,
+    $c-tree-row-background-selected: color-mix(in srgb, var(--c-primary) 12%, var(--c-background)),
+    $c-tree-row-color-selected: $var-text,
+    $c-tree-item-disabled-opacity: 0.5,
+    $c-tree-focus-outline: $focus-width solid $var-focus,
+    $c-tree-focus-outline-offset: -2px,
+    $c-tree-transition-duration: $transition-duration
+);
+
+// Code: the monospace stack of the tokens. Inline code is --c-text on --c-surface (16.4:1 in both modes), square. A kbd is a
+// --c-background key with a 1px --c-muted border and a --c-muted bottom edge, text --c-text (17.9:1 / 18.2:1). The block is
+// --c-surface with a 1px --c-muted border and --c-text (16.4:1); highlighted children are the app's to keep AA on that
+// background. The copy button reads like the secondary button (--c-background with a --c-muted border, --c-surface-active on
+// hover) and the theme's 1px focus ring.
+@use '@carissa-io/components-code/scss' as code with (
+    $c-code-font-family: $font-family-mono,
+    $c-code-font-size: 0.875em,
+    $c-code-padding: 0.125em 0.375em,
+    $c-code-radius: $radius,
+    $c-code-background: $var-surface,
+    $c-code-color: $var-text,
+    $c-kbd-font-size: 0.8125em,
+    $c-kbd-padding: 0.125em 0.5em,
+    $c-kbd-radius: $radius,
+    $c-kbd-background: $var-background,
+    $c-kbd-color: $var-text,
+    $c-kbd-border: 1px solid $var-muted,
+    $c-kbd-shadow: 0 1px 0 $var-muted,
+    $c-code-block-font-size: $font-size-small,
+    $c-code-block-line-height: $line-height-normal,
+    $c-code-block-padding: 1rem,
+    $c-code-block-radius: $radius,
+    $c-code-block-background: $var-surface,
+    $c-code-block-color: $var-text,
+    $c-code-block-border: 1px solid $var-muted,
+    $c-code-copy-offset: 0.5rem,
+    $c-code-copy-padding: 0.375rem 0.75rem,
+    $c-code-copy-font-size: $font-size-small,
+    $c-code-copy-radius: $radius,
+    $c-code-copy-background: $var-background,
+    $c-code-copy-color: $var-text,
+    $c-code-copy-border: 1px solid $var-muted,
+    $c-code-copy-background-hover: $var-surface-active,
+    $c-code-focus-outline: $focus-width solid $var-focus,
+    $c-code-focus-outline-offset: -2px
+);