@carissa-io/theme-default 0.3.8 → 0.3.9

package/DESIGN.md

@@ -387,6 +387,36 @@ From [components-tree](components/components-tree): `Tree` and `TreeItem`. Rows
 ## 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.
 
+## Field
+From [components-field](components/components-field): `Field`. The label is `--c-text`, bold, at the small size (17.93:1 light, 18.16:1 dark on the background) and not `--c-muted`, which is only 4.35:1 on `--c-surface` in light. The hint is `--c-muted` at the small size (4.74:1 / 7.85:1 on the background) and stays visible, linked with `aria-describedby`. The error is `--c-error` (4.53:1 / 7.16:1), the same color as the Input's error line, and the required asterisk is `--c-error` too; color is never the only signal because the error is text with `role="alert"`. 0.5rem between label, control, hint and error; the horizontal layout uses a 10rem label column and 1.5rem of gap. Keep a field on `--c-background`.
+
+## Number input
+From [components-number-input](components/components-number-input): `NumberInput`. The field is the Input's, so it keeps its notched label, `--c-muted` border (4.74:1 / 7.85:1) and thickened `--c-focus` border. The stepper buttons read like the secondary button inside the box: square, `--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 (14.23:1 / 13.88:1), half opacity at a bound (exempt from contrast). They are out of the tab order (the arrow keys do the same), so the focus ring stays on the field.
+
+## OTP input
+From [components-otp-input](components/components-otp-input): `OtpInput`. Each box is built like the Input: `--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 `--c-focus` plus a 1px `--c-focus` shadow (2px in total, 21:1 / 19.8:1), the same rule as every outlined control. An invalid box is `--c-error` (4.53:1 / 7.16:1) with the message under the boxes in `--c-error`; a disabled one is `--c-surface` with `--c-disabled-text` (exempt). The digit is `--c-text` at the h3 size (17.93:1 / 18.16:1). Square, 3rem by 3.5rem (above the 44px touch target), 0.5rem between boxes; the group label is the field label style in `--c-muted`.
+
+## Phone
+From [components-phone](components/components-phone): `Phone`. The field is the Input's. The country select is a native `<select>` in the input's start slot, `--c-text` on a transparent background so the box color shows in both modes (17.93:1 / 18.16:1 on the background), with a 1px `--c-muted` divider before the number (4.74:1 / 7.85:1) and the theme's 1px `--c-focus` outline when it is focused by keyboard; disabled is `--c-disabled-text` (exempt). The open list is drawn by the platform, so it follows `color-scheme` in dark.
+
+## Tag input
+From [components-tag-input](components/components-tag-input): `TagInput`. The box is the Input's (square, `--c-muted` border, thickened `--c-focus` border on focus) and the chips are the Tag's, so the tag tints, borders and `--c-text` labels (14.8:1 or more on every tint) are the ones documented in the Tag section; the block only sets 0.375rem between chips and the text field and a 6rem minimum for the text field before it wraps to its own row. The placeholder is `--c-muted` as in the Input. Errors (`duplicate`, `max`, `invalid`) use the Input's `--c-error` line.
+
+## Time picker
+From [components-time-picker](components/components-time-picker): `TimePicker`. The field is the Input's and the times are the Listbox's inside the Popover, so the `--c-muted` border (4.74:1 / 7.85:1), the thickened `--c-focus` border, the `--c-text` options (17.93:1 / 18.16:1), the `--c-surface` active option and the selected marker are the ones documented for the Select and the Combobox (reused, no new figure). The clock icon is the Select arrow's: 16px, `--c-muted` turning `--c-primary` on hover and when open, and `--c-disabled-text` when disabled (exempt). Open takes the `--c-focus` border; the placeholder is `--c-muted`. Errors (`invalid_time`, `out_of_range`) use the Input's `--c-error` line (4.53:1 / 7.16:1).
+
+## Date range
+From [components-date-range](components/components-date-range): `DateRange`. The trigger is the Date picker's and the days are the Calendar's (44px squares, `--c-text`, `--c-surface` hover), so those figures are reused. The two ends use the Calendar's selected look, `--c-on-primary` on `--c-primary` (21:1 / 19.8:1). The days between them are a `--c-surface-active` band with `--c-text` (14.23:1 / 13.88:1, the same pair as the Menu and Pagination hovers), square so the band is unbroken; it is painted on the cell and on the day, and it relies on the calendar grid keeping `border-spacing: 0` (a test asserts it). The band against the background is only 1.26:1 / 1.31:1, so it is not the only cue: the ends are solid black (or white in dark), and the days carry `aria-selected`. Two months sit side by side with 1rem between them, with 0.5rem of panel padding. Errors (`end_before_start`, `out_of_range`) use the Input's `--c-error` line.
+
+## Rating
+From [components-rating](components/components-rating): `Rating`. The filled part is `--c-primary` (21:1 / 19.8:1 on the background) and the empty part is `--c-muted` (4.74:1 / 7.85:1), both above the 3:1 minimum for graphics. A filled star is a solid shape and an empty one an outline, so the two never rely on colour alone; their lightness differs by 4.43:1 in light and 2.52:1 in dark (below 3:1 there, which the solid-versus-outline shape makes up for). The preview while hovering is `--c-primary-hover` (15.13:1 in light, 15.72:1 in dark on the background). Stars are 1.75rem apart by 0.25rem, and the keyboard ring is the theme's 1px `--c-focus` outline (21:1 / 19.8:1). The group label is the field label style in `--c-muted`; a disabled rating is at half opacity (exempt).
+
+## Color picker
+From [components-color-picker](components/components-color-picker): `ColorPicker`. The field is the Input's with a 1.25rem chip bordered in `--c-muted` (4.74:1 / 7.85:1) next to the hex text in `--c-text`; the panel is the Popover's. The thumbs of the area and of the hue and alpha tracks are a 2px `--c-background` ring over a 1px `--c-text` ring, so one of the two contrasts with any colour under it in both modes (the ring pair is 17.93:1 / 18.16:1 between itself); the keyboard focus draws the theme's 1px `--c-focus` outline offset by 2px around the area or the track (21:1 / 19.8:1). The hue and brightness gradients are the colour data and keep their literal colours; the transparent checkerboard is `--c-surface-active` over `--c-background`. The hex input is built like the Input box: `--c-background`, a 1px `--c-muted` border, `--c-error` when invalid (4.53:1 / 7.16:1), the monospace stack at the small size. Swatches are 1.75rem squares with a `--c-muted` border and a `--c-primary` ring when selected; areas, tracks and chips are square.
+
+## Async autocomplete
+From [components-async-autocomplete](components/components-async-autocomplete): `AsyncAutocomplete`. The field, the panel and the options are the Combobox's (reused figures, no new contrast). While a request is pending the field shows a 16px spinner at the arrow's place: a 2px `--c-primary` arc (21:1 / 19.8:1) over a `--c-surface-active` track, slowed down under `prefers-reduced-motion`. The states are written in the panel: `loading` and `empty` in `--c-muted` (4.74:1 / 7.85:1, the Listbox's empty message color) and `error` in `--c-error` (4.53:1 / 7.16:1 on the background, which is the panel's); the state is also exposed as `aria-busy` and `data-state`, so colour is never the only signal. Open takes the `--c-focus` border.
+
 ## 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`, `-menu`, `-table`, `-list`, `-description-list`, `-stat`, `-empty-state`, `-timeline`, `-tree` and `-code`. `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`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker` and `-async-autocomplete`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -4448,3 +4448,597 @@ ol.c-list {
   white-space: nowrap;
   border: 0;
 }
+
+.c-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  font-size: 1rem;
+  color: var(--c-text);
+}
+.c-field__label {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-text);
+}
+.c-field--required .c-field__label::after {
+  content: " *";
+  color: var(--c-error);
+}
+.c-field__help {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+.c-field__error {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--c-error);
+}
+.c-field--horizontal {
+  display: grid;
+  grid-template-columns: 10rem minmax(0, 1fr);
+  column-gap: 1.5rem;
+  align-items: start;
+}
+.c-field--horizontal > .c-field__label {
+  grid-column: 1;
+  grid-row: 1;
+}
+.c-field--horizontal > .c-field__control, .c-field--horizontal > .c-field__help, .c-field--horizontal > .c-field__error {
+  grid-column: 2;
+}
+
+.c-number-input .c-input__control {
+  text-align: start;
+  font-variant-numeric: tabular-nums;
+}
+.c-number-input__steppers {
+  display: inline-flex;
+  gap: 0.125rem;
+}
+.c-number-input__stepper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1;
+  color: var(--c-muted);
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  cursor: pointer;
+}
+.c-number-input__stepper:hover:not(:disabled) {
+  color: var(--c-text);
+  background: var(--c-surface-active);
+}
+.c-number-input__stepper:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.c-otp-input {
+  display: block;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  color: var(--c-text);
+}
+.c-otp-input__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--c-muted);
+}
+.c-otp-input__cells {
+  display: flex;
+  gap: 0.5rem;
+}
+.c-otp-input__cell {
+  box-sizing: border-box;
+  width: 3rem;
+  height: 3.5rem;
+  padding: 0;
+  font: inherit;
+  font-size: 1.25rem;
+  color: inherit;
+  text-align: center;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  outline: 0;
+  transition: border-color 0.2s ease;
+}
+.c-otp-input__cell:hover:not(:disabled) {
+  border-color: var(--c-primary);
+}
+.c-otp-input__cell:focus {
+  border-color: var(--c-focus);
+  box-shadow: 0 0 0 1px var(--c-focus);
+}
+.c-otp-input__cell:disabled {
+  color: var(--c-disabled-text);
+  cursor: not-allowed;
+  background: var(--c-surface);
+}
+.c-otp-input__error {
+  margin: 0.5rem 0 0;
+  font-size: 0.875rem;
+  color: var(--c-error);
+}
+.c-otp-input--invalid .c-otp-input__cell {
+  border-color: var(--c-error);
+}
+.c-otp-input--invalid .c-otp-input__cell:focus {
+  box-shadow: 0 0 0 1px var(--c-error);
+}
+
+.c-phone .c-input__start {
+  padding-inline-end: 0.5rem;
+  border-inline-end: 1px solid var(--c-muted);
+}
+.c-phone__country {
+  max-width: 7rem;
+  padding: 0 0.25rem;
+  font: inherit;
+  color: var(--c-text);
+  text-overflow: ellipsis;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: 0;
+}
+.c-phone__country:focus-visible {
+  outline: 1px solid var(--c-focus);
+}
+.c-phone__country:disabled {
+  color: var(--c-disabled-text);
+  cursor: not-allowed;
+}
+
+.c-tag-input__field {
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  cursor: text;
+}
+.c-tag-input__control {
+  flex: 1 1 6rem;
+  min-width: 6rem;
+}
+
+.c-time-picker .c-input__box {
+  position: relative;
+  cursor: text;
+}
+.c-time-picker .c-time-picker__popover {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+.c-time-picker__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 1.5em;
+  padding: 0 calc(1rem + 0.5rem) 0 0;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text);
+  text-overflow: ellipsis;
+}
+.c-time-picker__input::placeholder {
+  color: var(--c-muted);
+}
+.c-time-picker__input:disabled {
+  color: inherit;
+  cursor: not-allowed;
+}
+.c-time-picker__icon {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  color: var(--c-muted);
+  pointer-events: none;
+  translate: 0 -50%;
+  transition: color 0.2s ease;
+}
+.c-time-picker__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.c-input__box:hover .c-time-picker__icon {
+  color: var(--c-primary);
+}
+.c-time-picker--open .c-time-picker__icon {
+  color: var(--c-primary);
+}
+.c-time-picker--open:not(.c-input--invalid) .c-input__box {
+  border-color: var(--c-focus);
+}
+.c-time-picker.c-input--disabled .c-input__box {
+  cursor: not-allowed;
+}
+.c-time-picker.c-input--disabled .c-time-picker__icon {
+  color: var(--c-disabled-text);
+}
+
+.c-date-range .c-input__box {
+  position: relative;
+}
+.c-date-range .c-date-range__popover {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+.c-date-range__trigger {
+  display: block;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 1.5em;
+  margin: 0;
+  padding: 0 calc(1rem + 0.5rem) 0 0;
+  overflow: hidden;
+  font: inherit;
+  color: var(--c-text);
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+}
+.c-date-range__trigger::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+}
+.c-date-range__trigger:disabled {
+  color: inherit;
+  cursor: not-allowed;
+}
+.c-date-range__placeholder {
+  color: var(--c-muted);
+}
+.c-date-range__panel {
+  padding: 0.5rem;
+}
+.c-date-range__months {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+.c-date-range__cell--in-range {
+  background: var(--c-surface-active);
+}
+.c-date-range__day--in-range {
+  color: var(--c-text);
+  background: var(--c-surface-active);
+  border-radius: 0;
+}
+.c-date-range__day--in-range:hover:not(:disabled) {
+  color: var(--c-text);
+  background: var(--c-surface-active);
+}
+.c-date-range__icon {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  display: inline-flex;
+  width: 1rem;
+  height: 1rem;
+  color: var(--c-muted);
+  pointer-events: none;
+  translate: 0 -50%;
+  transition: color 0.2s ease;
+}
+.c-date-range__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.c-input__box:hover .c-date-range__icon {
+  color: var(--c-primary);
+}
+.c-date-range--open .c-date-range__icon {
+  color: var(--c-primary);
+}
+.c-date-range--open:not(.c-input--invalid) .c-input__box {
+  border-color: var(--c-focus);
+}
+.c-date-range.c-input--disabled .c-date-range__icon {
+  color: var(--c-disabled-text);
+}
+
+.c-rating {
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+  vertical-align: middle;
+}
+.c-rating__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  color: var(--c-muted);
+}
+.c-rating__star {
+  position: relative;
+  display: inline-flex;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+.c-rating__icon {
+  position: absolute;
+  inset: 0;
+  display: inline-flex;
+  transition: color 0.2s ease;
+}
+.c-rating__icon > svg {
+  width: 100%;
+  height: 100%;
+}
+.c-rating__icon--empty {
+  color: var(--c-muted);
+}
+.c-rating__icon--full {
+  color: var(--c-primary);
+}
+.c-rating--hovering .c-rating__icon--full {
+  color: var(--c-primary-hover);
+}
+.c-rating__radio {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  outline: 0;
+}
+.c-rating__radio--start {
+  right: 50%;
+}
+.c-rating__radio--end {
+  left: 50%;
+}
+.c-rating__radio:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 1px;
+  border-radius: 0;
+}
+.c-rating--disabled {
+  opacity: 0.5;
+}
+.c-rating--disabled .c-rating__radio {
+  cursor: not-allowed;
+}
+
+.c-color-picker .c-input__box {
+  position: relative;
+  cursor: pointer;
+}
+.c-color-picker .c-color-picker__popover {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+.c-color-picker__button {
+  display: flex;
+  box-sizing: border-box;
+  gap: 0.75rem;
+  align-items: center;
+  width: 100%;
+  min-height: 1.5em;
+  padding: 0;
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: var(--c-text);
+  text-align: start;
+  cursor: inherit;
+  background: transparent;
+  border: 0;
+}
+.c-color-picker__button:disabled {
+  color: inherit;
+  cursor: not-allowed;
+}
+.c-color-picker__swatch-preview, .c-color-picker__preview {
+  flex: none;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-color-picker__chip--empty {
+  background: repeating-conic-gradient(var(--c-surface-active) 0% 25%, var(--c-background) 0% 50%) 50%/0.5rem 0.5rem;
+}
+.c-color-picker--open:not(.c-input--invalid) .c-input__box {
+  border-color: var(--c-focus);
+}
+.c-color-picker.c-input--disabled .c-input__box {
+  cursor: not-allowed;
+}
+.c-color-picker__panel {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  box-sizing: border-box;
+  width: 15rem;
+  max-width: 100%;
+  padding: 0.75rem;
+  outline: 0;
+}
+.c-color-picker__area, .c-color-picker__track {
+  position: relative;
+  flex: none;
+  touch-action: none;
+  cursor: crosshair;
+  user-select: none;
+}
+.c-color-picker__area:focus-visible, .c-color-picker__track:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+.c-color-picker__area {
+  height: 9rem;
+  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)), linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
+  border-radius: 0;
+}
+.c-color-picker__track {
+  height: 0.75rem;
+  border-radius: 0;
+}
+.c-color-picker__hue {
+  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+}
+.c-color-picker__alpha {
+  background: repeating-conic-gradient(var(--c-surface-active) 0% 25%, var(--c-background) 0% 50%) 50%/0.5rem 0.5rem;
+}
+.c-color-picker__alpha-fill {
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.c-color-picker__thumb {
+  position: absolute;
+  box-sizing: border-box;
+  width: 1.25rem;
+  height: 1.25rem;
+  pointer-events: none;
+  border: 2px solid var(--c-background);
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px var(--c-text);
+  translate: -50% -50%;
+}
+.c-color-picker__track > .c-color-picker__thumb {
+  top: 50%;
+}
+.c-color-picker__hex {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.c-color-picker__hex-input {
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: 0.625rem 0.75rem;
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  color: var(--c-text);
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-color-picker__hex-input[aria-invalid=true] {
+  border-color: var(--c-error);
+}
+.c-color-picker__hex-input:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+.c-color-picker__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+.c-color-picker__swatch {
+  box-sizing: border-box;
+  width: 1.75rem;
+  height: 1.75rem;
+  padding: 0;
+  cursor: pointer;
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-color-picker__swatch[aria-pressed=true] {
+  box-shadow: 0 0 0 2px var(--c-primary);
+}
+.c-color-picker__swatch:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-async-autocomplete .c-input__box {
+  position: relative;
+  cursor: text;
+}
+.c-async-autocomplete .c-async-autocomplete__popover {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;
+  align-items: center;
+  min-width: 0;
+}
+.c-async-autocomplete__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 1.5em;
+  color: var(--c-text);
+  text-overflow: ellipsis;
+}
+.c-async-autocomplete__input::placeholder {
+  color: var(--c-muted);
+}
+.c-async-autocomplete__input:disabled {
+  color: inherit;
+  cursor: not-allowed;
+}
+.c-async-autocomplete--open:not(.c-input--invalid) .c-input__box {
+  border-color: var(--c-focus);
+}
+.c-async-autocomplete.c-input--disabled .c-input__box {
+  cursor: not-allowed;
+}
+.c-async-autocomplete--loading .c-async-autocomplete__input {
+  padding-inline-end: calc(1rem + 0.5rem);
+}
+.c-async-autocomplete--loading .c-input__box::after {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  box-sizing: border-box;
+  width: 1rem;
+  height: 1rem;
+  margin-top: calc(1rem / -2);
+  pointer-events: none;
+  content: "";
+  border: 2px solid var(--c-surface-active);
+  border-top-color: var(--c-primary);
+  border-radius: 50%;
+  animation: c-async-autocomplete-spin 0.7s linear infinite;
+}
+.c-async-autocomplete--loading .c-listbox__empty {
+  color: var(--c-muted);
+}
+.c-async-autocomplete--empty .c-listbox__empty {
+  color: var(--c-muted);
+}
+.c-async-autocomplete--error .c-listbox__empty {
+  color: var(--c-error);
+}
+
+@keyframes c-async-autocomplete-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-async-autocomplete--loading .c-input__box::after {
+    animation-duration: 2s;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.8",
+  "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",
@@ -83,7 +83,17 @@
     "@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-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": {
@@ -235,11 +245,42 @@
     },
     "@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",
@@ -248,12 +289,15 @@
     "@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",
@@ -261,11 +305,15 @@
     "@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",
@@ -278,6 +326,8 @@
     "@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",

package/scss/index.scss

@@ -1389,3 +1389,211 @@
     $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
+);