@carissa-io/theme-default 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "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,25 @@
     "@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",
+    "@carissa-io/components-field": "^0.1.0",
+    "@carissa-io/components-number-input": "^0.1.0",
+    "@carissa-io/components-otp-input": "^0.1.0",
+    "@carissa-io/components-phone": "^0.1.0",
+    "@carissa-io/components-tag-input": "^0.1.0",
+    "@carissa-io/components-time-picker": "^0.1.0",
+    "@carissa-io/components-date-range": "^0.1.0",
+    "@carissa-io/components-rating": "^0.1.0",
+    "@carissa-io/components-color-picker": "^0.1.0",
+    "@carissa-io/components-async-autocomplete": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -203,11 +221,66 @@
     },
     "@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
+    },
+    "@carissa-io/components-field": {
+      "optional": true
+    },
+    "@carissa-io/components-number-input": {
+      "optional": true
+    },
+    "@carissa-io/components-otp-input": {
+      "optional": true
+    },
+    "@carissa-io/components-phone": {
+      "optional": true
+    },
+    "@carissa-io/components-tag-input": {
+      "optional": true
+    },
+    "@carissa-io/components-time-picker": {
+      "optional": true
+    },
+    "@carissa-io/components-date-range": {
+      "optional": true
+    },
+    "@carissa-io/components-rating": {
+      "optional": true
+    },
+    "@carissa-io/components-color-picker": {
+      "optional": true
+    },
+    "@carissa-io/components-async-autocomplete": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@carissa-io/components-accordion": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
+    "@carissa-io/components-async-autocomplete": "^0.1.0",
     "@carissa-io/components-avatar": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
     "@carissa-io/components-breadcrumb": "^0.1.0",
@@ -215,33 +288,50 @@
     "@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-color-picker": "^0.1.0",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-date-range": "^0.1.0",
+    "@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-field": "^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",
     "@carissa-io/components-navbar": "^0.1.0",
+    "@carissa-io/components-number-input": "^0.1.0",
+    "@carissa-io/components-otp-input": "^0.1.0",
     "@carissa-io/components-pagination": "^0.1.0",
+    "@carissa-io/components-phone": "^0.1.0",
     "@carissa-io/components-popover": "^0.1.1",
     "@carissa-io/components-progress": "^0.1.0",
     "@carissa-io/components-prose": "^0.1.0",
     "@carissa-io/components-radio-group": "^0.1.1",
+    "@carissa-io/components-rating": "^0.1.0",
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-select": "^0.1.1",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@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-tag-input": "^0.1.0",
+    "@carissa-io/components-time-picker": "^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,423 @@
     $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
+);
+
+// Field: the label, hint and error around a control with no label of its own (radio group, slider, custom control). The label is
+// --c-text (17.93:1 / 18.16:1 on the background) in the label size and weight, not --c-muted, which is 4.35:1 on --c-surface in
+// light. The hint is --c-muted (4.74:1 / 7.85:1 on the background) and the error is --c-error (4.53:1 / 7.16:1), the same
+// color as the Input's error line, with the component's required asterisk. Keep a field on --c-background.
+@use '@carissa-io/components-field/scss' as field with (
+    $c-field-font-family: $font-family,
+    $c-field-font-size: $font-size-body,
+    $c-field-color: $var-text,
+    $c-field-label-font-size: $font-size-small,
+    $c-field-label-font-weight: $font-weight-bold,
+    $c-field-label-color: $var-text,
+    $c-field-help-font-size: $font-size-small,
+    $c-field-help-color: $var-muted,
+    $c-field-error-font-size: $font-size-small,
+    $c-field-error-color: $var-error,
+    $c-field-required-color: $var-error,
+    $c-field-gap: 0.5rem,
+    $c-field-horizontal-label-width: 10rem,
+    $c-field-horizontal-gap: 1.5rem
+);
+
+// Number input: the field is the Input's (configured at the top; this module forwards it). The steppers read like the
+// secondary button inside the box: --c-muted glyphs (4.74:1 / 7.85:1, above the 3:1 non-text minimum) turning --c-text on a
+// --c-surface-active hover (--c-text 14.23:1 / 13.88:1), square, half opacity at a bound.
+@use '@carissa-io/components-number-input/scss' as number-input with (
+    $c-number-input-stepper-size: 1.5rem,
+    $c-number-input-stepper-gap: 0.125rem,
+    $c-number-input-stepper-font-size: $font-size-body,
+    $c-number-input-stepper-radius: $radius,
+    $c-number-input-stepper-color: $var-muted,
+    $c-number-input-stepper-color-hover: $var-text,
+    $c-number-input-stepper-background: transparent,
+    $c-number-input-stepper-background-hover: $var-surface-active,
+    $c-number-input-stepper-disabled-opacity: 0.5,
+    $c-number-input-text-align: start
+);
+
+// OTP input: one box per character, built like the Input box: --c-background with a 1px --c-muted border (4.74:1 / 7.85:1),
+// --c-primary on hover, and the keyboard focus thickens the border to the theme's black ring (--c-focus, 21:1 / 19.8:1). An
+// invalid box is --c-error (4.53:1 / 7.16:1) and the message under the boxes is --c-error too; a disabled one is --c-surface
+// with --c-disabled-text (exempt from contrast). The digit is --c-text (17.93:1 / 18.16:1). Square, 3rem by 3.5rem.
+@use '@carissa-io/components-otp-input/scss' as otp-input with (
+    $c-otp-input-font-family: $font-family,
+    $c-otp-input-font-size: $font-size-h3,
+    $c-otp-input-label-font-size: $label-font-size,
+    $c-otp-input-label-font-weight: $label-font-weight,
+    $c-otp-input-error-font-size: $font-size-small,
+    $c-otp-input-color: $var-text,
+    $c-otp-input-label-color: $var-muted,
+    $c-otp-input-background: $var-background,
+    $c-otp-input-border-color: $var-muted,
+    $c-otp-input-border-color-hover: $var-primary,
+    $c-otp-input-focus-color: $var-focus,
+    $c-otp-input-focus-ring: $var-focus,
+    $c-otp-input-focus-ring-width: $focus-width,
+    $c-otp-input-error-color: $var-error,
+    $c-otp-input-error-ring: $var-error,
+    $c-otp-input-disabled-background: $var-surface,
+    $c-otp-input-disabled-color: $var-disabled-text,
+    $c-otp-input-cell-width: 3rem,
+    $c-otp-input-cell-height: 3.5rem,
+    $c-otp-input-border-width: 1px,
+    $c-otp-input-radius: $radius,
+    $c-otp-input-gap: 0.5rem,
+    $c-otp-input-label-gap: 0.5rem,
+    $c-otp-input-transition: border-color $transition-duration ease
+);
+
+// Phone: the field is the Input's (configured at the top; this module forwards it); the country select sits in its start slot
+// as --c-text on a transparent background (so the box color shows in both modes) with a 1px --c-muted divider before the
+// number, and the theme's 1px --c-focus outline when focused.
+@use '@carissa-io/components-phone/scss' as phone with (
+    $c-phone-country-max-width: 7rem,
+    $c-phone-country-padding-x: 0.25rem,
+    $c-phone-country-color: $var-text,
+    $c-phone-country-background: transparent,
+    $c-phone-country-border-color: $var-muted,
+    $c-phone-country-border-width: 1px,
+    $c-phone-country-gap: 0.5rem,
+    $c-phone-country-focus-outline: $focus-width solid $var-focus,
+    $c-phone-country-disabled-color: $var-disabled-text
+);
+
+// Tag input: the box is the Input's and the chips are the Tag's, both configured above (this module forwards them), so it only
+// sets the spacing between the chips and the text field. Placed after the Tag block on purpose.
+@use '@carissa-io/components-tag-input/scss' as tag-input with (
+    $c-tag-input-gap: 0.375rem,
+    $c-tag-input-control-min-width: 6rem
+);
+
+// Time picker: the date picker's field (a text input) with a Listbox of times in the Popover, so the box, the notched label,
+// the panel border and the options are the ones configured above (this module forwards them). Body text, tabular figures, a
+// 16px clock icon that is muted and turns black on hover and when open, like the Select arrow without the rotation.
+@use '@carissa-io/components-time-picker/scss' as time-picker with (
+    $c-time-picker-color: $var-text,
+    $c-time-picker-min-height: 1.5em,
+    $c-time-picker-placeholder-color: $var-muted,
+    $c-time-picker-icon-size: $arrow-size,
+    $c-time-picker-icon-offset: $arrow-offset,
+    $c-time-picker-icon-color: $var-arrow-color,
+    $c-time-picker-icon-color-hover: $var-arrow-color-active,
+    $c-time-picker-icon-color-open: $var-arrow-color-active,
+    $c-time-picker-icon-color-disabled: $var-arrow-color-disabled,
+    $c-time-picker-icon-transition: color $transition-duration ease,
+    $c-time-picker-open-border-color: $var-focus
+);
+
+// Date range: the date picker's trigger with one or two month grids in the Popover (the calendar block above styles the days;
+// the two ends use its selected look, black with white text). The days between them are a --c-surface-active band with --c-text
+// (14.23:1 / 13.88:1). The calendar keeps its default `border-spacing: 0` and the band is painted on the cell as well as on the
+// day, so the rows read as one unbroken range. Keep this block after the calendar and the date picker.
+@use '@carissa-io/components-date-range/scss' as date-range with (
+    $c-date-range-trigger-color: $var-text,
+    $c-date-range-trigger-min-height: 1.5em,
+    $c-date-range-placeholder-color: $var-muted,
+    $c-date-range-panel-padding: 0.5rem,
+    $c-date-range-months-gap: 1rem,
+    $c-date-range-in-range-background: $var-surface-active,
+    $c-date-range-in-range-color: $var-text,
+    $c-date-range-in-range-radius: 0,
+    $c-date-range-icon-size: $arrow-size,
+    $c-date-range-icon-offset: $arrow-offset,
+    $c-date-range-icon-color: $var-arrow-color,
+    $c-date-range-icon-color-hover: $var-arrow-color-active,
+    $c-date-range-icon-color-open: $var-arrow-color-active,
+    $c-date-range-icon-color-disabled: $var-arrow-color-disabled,
+    $c-date-range-icon-transition: color $transition-duration ease,
+    $c-date-range-open-border-color: $var-focus
+);
+
+// Rating: the stars are --c-primary (21:1 / 19.8:1 on the background) over --c-muted ones (4.74:1 / 7.85:1), so the filled
+// and the empty part differ by shape (a solid star against an outline one) and by lightness (4.43:1 / 2.52:1 between them),
+// never by hue alone; the preview while hovering is --c-primary-hover (15.13:1 in light). The keyboard ring is the theme's --c-focus. The label is the field label style in --c-muted.
+@use '@carissa-io/components-rating/scss' as rating with (
+    $c-rating-label-font-size: $label-font-size,
+    $c-rating-label-font-weight: $label-font-weight,
+    $c-rating-label-color: $var-muted,
+    $c-rating-label-gap: 0.5rem,
+    $c-rating-size: 1.75rem,
+    $c-rating-gap: 0.25rem,
+    $c-rating-color: $var-primary,
+    $c-rating-color-hover: $var-primary-hover,
+    $c-rating-empty-color: $var-muted,
+    $c-rating-transition: color $transition-duration ease,
+    $c-rating-focus-color: $var-focus,
+    $c-rating-focus-ring-width: $focus-width,
+    $c-rating-focus-radius: $radius,
+    $c-rating-disabled-opacity: 0.5
+);
+
+// Colour picker: the field is the Input's with a swatch chip and the hex text; the panel is the Popover's. The hue and
+// brightness areas are the colour data itself, so their gradients keep the component's literal colours. Everything else is
+// custom properties: the thumbs are a --c-background ring over a --c-text one (visible over any colour in both modes), the
+// keyboard ring is --c-focus, the hex input is built like the Input box and the chips are bordered with --c-muted.
+@use '@carissa-io/components-color-picker/scss' as color-picker with (
+    $c-color-picker-color: $var-text,
+    $c-color-picker-min-height: 1.5em,
+    $c-color-picker-gap: 0.75rem,
+    $c-color-picker-open-border-color: $var-focus,
+    $c-color-picker-chip-size: 1.25rem,
+    $c-color-picker-chip-radius: $radius,
+    $c-color-picker-chip-border-color: $var-muted,
+    $c-color-picker-chip-empty-background: repeating-conic-gradient($var-surface-active 0% 25%, $var-background 0% 50%) 50% / 0.5rem 0.5rem,
+    $c-color-picker-panel-width: 15rem,
+    $c-color-picker-panel-padding: 0.75rem,
+    $c-color-picker-panel-gap: 0.75rem,
+    $c-color-picker-area-radius: $radius,
+    $c-color-picker-track-radius: $radius,
+    $c-color-picker-alpha-checker: repeating-conic-gradient($var-surface-active 0% 25%, $var-background 0% 50%) 50% / 0.5rem 0.5rem,
+    $c-color-picker-thumb-size: 1.25rem,
+    $c-color-picker-thumb-border-width: 2px,
+    $c-color-picker-thumb-border-color: $var-background,
+    $c-color-picker-thumb-shadow: (0 0 0 1px $var-text),
+    $c-color-picker-focus-ring-width: $focus-width,
+    $c-color-picker-focus-ring-color: $var-focus,
+    $c-color-picker-focus-ring-offset: 2px,
+    $c-color-picker-hex-font-family: $font-family-mono,
+    $c-color-picker-hex-font-size: $font-size-small,
+    $c-color-picker-hex-color: $var-text,
+    $c-color-picker-hex-background: $var-background,
+    $c-color-picker-hex-padding: 0.625rem 0.75rem,
+    $c-color-picker-hex-border-color: $var-muted,
+    $c-color-picker-hex-border-color-invalid: $var-error,
+    $c-color-picker-hex-radius: $radius,
+    $c-color-picker-swatch-size: 1.75rem,
+    $c-color-picker-swatch-radius: $radius,
+    $c-color-picker-swatch-border-color: $var-muted,
+    $c-color-picker-swatch-selected-ring-color: $var-primary
+);
+
+// Async autocomplete: the Combobox's field (a text input over the Listbox in the Popover, configured above) with a spinner
+// while a request is pending (--c-primary arc over a --c-surface-active track) and one message in the panel per state:
+// loading and empty in --c-muted (4.74:1 / 7.85:1, the Listbox's empty message color) and an error in --c-error (4.53:1 / 7.16:1).
+@use '@carissa-io/components-async-autocomplete/scss' as async-autocomplete with (
+    $c-async-autocomplete-color: $var-text,
+    $c-async-autocomplete-min-height: 1.5em,
+    $c-async-autocomplete-placeholder-color: $var-muted,
+    $c-async-autocomplete-open-border-color: $var-focus,
+    $c-async-autocomplete-spinner-size: $arrow-size,
+    $c-async-autocomplete-spinner-offset: $arrow-offset,
+    $c-async-autocomplete-spinner-width: 2px,
+    $c-async-autocomplete-spinner-color: $var-primary,
+    $c-async-autocomplete-spinner-track-color: $var-surface-active,
+    $c-async-autocomplete-loading-color: $var-muted,
+    $c-async-autocomplete-empty-color: $var-muted,
+    $c-async-autocomplete-error-color: $var-error
+);