@carissa-io/theme-default 0.3.3 → 0.3.5

package/DESIGN.md

@@ -253,6 +253,59 @@ and a **4px accent on the left edge** in the variant color (`--c-info`, `--c-suc
 The text and the title are `--c-text`, 14.8:1 or more on every tint in both modes; the accent and the icon are at least 3.8:1 on the tint (the status colors are not used for text: see the contrast notes in [Dark mode](#dark-mode)). The title is bold, the text
 0.875rem, square corners. The dismiss button is a plain "x" in `--c-muted`, `--c-text` on hover, with the usual focus ring.
 
+## Spinner
+From [components-spinner](components/components-spinner): `Spinner` in three sizes (`sm` 1rem, `md` 1.5rem, `lg` 2.5rem). A 2px ring in `--c-surface-active` with a
+`--c-primary` arc (black in light, white in dark), one turn every 0.75s, drawn with CSS only. The label is visually hidden text. With
+`prefers-reduced-motion` the turn is replaced by a slow opacity pulse (2s) of the whole ring in `--c-primary`. The arc is 21:1 (light) and
+19.8:1 (dark) on the page background and 16.7:1 and 15.1:1 on its track, far above the 3:1 needed for a graphic; the track is a faint guide (1.3:1) on purpose.
+
+## Modal
+From [components-modal](components/components-modal): `Modal`, a native `<dialog>` in three widths (`sm` 24rem, `md` 32rem, `lg` 48rem, never wider than the viewport
+minus 1rem). The box is `--c-background` with `--c-text`, a **1px `--c-muted` border**, `$radius` (square) and a layered shadow (`0 4px 8px` at 8% and `0 16px 48px` at 20% of
+black). As with the elevated Card the border stays on purpose: a shadow is almost invisible on the dark ground, the border keeps the edge in dark mode. Padding is
+1.5rem at the sides and 1.25rem above and below, like Card. The title is the Typography `Heading` (level 4 size) and the description the small muted `Text`.
+The close button is a plain "x" in `--c-muted`, `--c-text` on hover, with the usual focus ring. The **backdrop** is `rgb(0 0 0 / 0.5)`, the one literal color of these
+components, and it is the same in both modes (it dims whatever mode the page is in). The box fades in and rises 0.5rem in `$transition-duration`; with reduced motion it
+just appears.
+
+## Toast
+From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
+placements. The look of each toast is the Alert's (see above), so its colors, roles and contrast are the Alert's in both modes. The action is a bold, underlined
+0.875rem button in `--c-text` (14.8:1 or more on every tint). A toast slides 0.75rem from its edge and fades in over `$transition-duration`; with reduced motion
+only the fade stays. The region is in the page, not in the browser's top layer, so a toast shown while a modal is open sits behind the modal's backdrop.
+
+## Divider
+From [components-divider](components/components-divider): `Divider`, a 1px line in `--c-muted` (the edge of the cards and fields: 4.74:1 on the background in light, 7.85:1 in dark),
+1rem of space around it. With a label the text is the small `--c-muted` text (0.875rem, same contrast) with 0.75rem between it and each line. Horizontal is an `hr`, vertical and labelled
+ones are `role="separator"`.
+
+## Badge
+From [components-badge](components/components-badge): `Badge` in six variants and two sizes (`md` 0.75rem, `sm` 0.6875rem, bold), square like the rest, plus a `dot`. The variants are **tinted
+like the Alert**: 12% of the role color (`--c-primary`, `--c-success`, `--c-warning`, `--c-error`, `--c-info`) over `--c-background` with `color-mix`, a 1px border at 35% of the same color.
+**The text is always `--c-text`**, never the status color: it is 13.6:1 or more on every tint in both modes (light 13.63 to 15.32, dark 13.63 to 15.87), where the raw light `error` on its own tint would
+fail. Neutral is `--c-surface` with a `--c-muted` border (text 16.44:1). The **dot** carries the role color (`--c-muted` for neutral) and is 3:1 or more as a graphic on its tint in both modes: in light 3.81 (error), 4.21 (warning), 4.27 (success), 5.56 (info), 15.97 (primary) and 4.35 (neutral); in dark 6.25 or more. A dot has no text, so the caller gives it `aria-label`.
+
+## Tag
+From [components-tag](components/components-tag): `Tag`, a chip with the same six tints, the same text rule (`--c-text`, same ratios) and square corners as the Badge, bold, 0.875rem (`md`) or 0.75rem (`sm`). A removable tag is
+one tab stop and takes the theme focus ring (1px `--c-focus`, offset 2px). The remove "x" is the tag text color at 70%, full on hover. Disabled tags are exempt from contrast (55% opacity).
+
+## Link
+From [components-link](components/components-link): `Link` in `default`, `subtle` and `inline`. The default is `--c-primary` (black in light, white in dark: 21:1 and 19.8:1 on the background), bold, **always underlined**: a black link
+beside near-black text is told apart by the underline alone, so there is no un-underlined default. Hover is `--c-primary-hover`. `subtle` is `--c-muted` (4.74:1 light, 7.85:1 dark), `--c-text` on hover. Focus is the theme ring
+(1px `--c-focus`, offset 2px). Disabled is `--c-disabled-text` at full opacity (exempt from contrast, as the other disabled states).
+
+## Avatar
+From [components-avatar](components/components-avatar): `Avatar` in five sizes (`xs` 1.5rem to `xl` 5rem), a circle or a square (theme radius, so square). The initials are bold `--c-text` on `--c-surface-active`
+(14.23:1 light, 13.88:1 dark); the placeholder without a name is the empty disc. `AvatarGroup` overlaps avatars by 0.5rem with a 2px ring in `--c-background`, so the separation works in both modes.
+
+## Skeleton
+From [components-skeleton](components/components-skeleton): `Skeleton` as a text line, a circle or a rectangle, in `--c-surface-active` (a faint block on purpose: 1.26:1 on the light background, 1.31:1 in dark; it carries no information and is `aria-hidden`).
+The sweep is a band of `--c-background` at 60%, 1.5s per pass; with `prefers-reduced-motion` it is removed and the block stays static.
+
+## Progress
+From [components-progress](components/components-progress): `Progress` as a bar (0.25, 0.5 or 0.75rem tall, square ends) or a ring (1.5, 2.5 or 4rem). The track is `--c-surface-active` and the fill `--c-primary` (black in light, white in dark): 16.67:1 and 15.13:1 on
+the track, well above the 3:1 of a graphic. The visible percentage is bold `--c-text`. Indeterminate slides (bar) or turns (ring) in 1.4s; with reduced motion both become a slow opacity pulse (2s).
+
 ## 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` and `-alert`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal`, `-toast`, `-divider`, `-badge`, `-tag`, `-link`, `-avatar`, `-skeleton` and `-progress`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -1498,3 +1498,809 @@
 .c-alert--error .c-alert__title {
   color: var(--c-text);
 }
+
+@keyframes c-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes c-spinner-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.c-spinner {
+  --c-spinner-size: 1.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  flex: none;
+  width: var(--c-spinner-size);
+  height: var(--c-spinner-size);
+  vertical-align: middle;
+  border: 2px solid var(--c-surface-active);
+  border-top-color: var(--c-primary);
+  border-radius: 50%;
+  animation: c-spinner-rotate 0.75s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-spinner {
+    border-color: var(--c-primary);
+    animation: c-spinner-pulse 2s ease-in-out infinite;
+  }
+}
+
+.c-spinner--sm {
+  --c-spinner-size: 1rem;
+}
+
+.c-spinner--md {
+  --c-spinner-size: 1.5rem;
+}
+
+.c-spinner--lg {
+  --c-spinner-size: 2.5rem;
+}
+
+.c-spinner__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-modal-lock {
+  overflow: hidden;
+}
+
+.c-modal {
+  box-sizing: border-box;
+  width: 32rem;
+  max-width: calc(100vw - 2 * 1rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  color: var(--c-text);
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+  transform: translateY(0.5rem);
+}
+.c-modal[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: none;
+}
+@starting-style {
+  .c-modal[open] {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+.c-modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s ease-out, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+}
+.c-modal[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  .c-modal[open]::backdrop {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-modal {
+    transform: none;
+    transition: none;
+  }
+  @starting-style {
+    .c-modal[open] {
+      transform: none;
+    }
+  }
+  .c-modal::backdrop {
+    transition: none;
+  }
+}
+
+.c-modal--sm {
+  width: 24rem;
+}
+
+.c-modal--md {
+  width: 32rem;
+}
+
+.c-modal--lg {
+  width: 48rem;
+}
+
+.c-modal__header {
+  display: flex;
+  flex: none;
+  gap: 1rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 0;
+}
+
+.c-modal__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.c-modal__title {
+  margin: 0;
+}
+
+.c-modal__description {
+  margin: 0.25rem 0 0;
+}
+
+.c-modal__close {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--c-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.c-modal__close:hover {
+  color: var(--c-text);
+}
+.c-modal__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.c-modal__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 1.25rem 1.5rem;
+  overflow-y: auto;
+}
+
+.c-modal__footer {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: flex-end;
+  padding: 0 1.5rem 1.25rem;
+}
+
+@keyframes c-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--c-toast-enter-shift));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes c-toast-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.c-toast-region {
+  position: fixed;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  max-width: calc(100vw - 2 * 1rem);
+  pointer-events: none;
+}
+
+.c-toast-region--top-left,
+.c-toast-region--top-center,
+.c-toast-region--top-right {
+  top: 1rem;
+}
+
+.c-toast-region--bottom-left,
+.c-toast-region--bottom-center,
+.c-toast-region--bottom-right {
+  bottom: 1rem;
+}
+
+.c-toast-region--top-left,
+.c-toast-region--bottom-left {
+  left: 1rem;
+}
+
+.c-toast-region--top-right,
+.c-toast-region--bottom-right {
+  right: 1rem;
+}
+
+.c-toast-region--top-center,
+.c-toast-region--bottom-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.c-toast-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-toast {
+  --c-toast-enter-shift: 0.75rem;
+  pointer-events: auto;
+  animation: c-toast-enter 0.2s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-toast {
+    animation-name: c-toast-fade;
+  }
+}
+
+.c-toast-region--top-left .c-toast,
+.c-toast-region--top-center .c-toast,
+.c-toast-region--top-right .c-toast {
+  --c-toast-enter-shift: -0.75rem;
+}
+
+.c-toast__action {
+  display: block;
+  padding: 0;
+  margin-top: 0.5rem;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-text);
+  text-decoration: underline;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.c-toast__action:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.c-divider {
+  box-sizing: border-box;
+}
+
+.c-divider--horizontal {
+  width: 100%;
+  margin: 1rem 0;
+}
+
+hr.c-divider {
+  height: 0;
+  border: 0;
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-divider--vertical {
+  display: inline-block;
+  align-self: stretch;
+  width: 0;
+  min-height: 1em;
+  margin: 0 1rem;
+  vertical-align: middle;
+  border-left: 1px solid var(--c-muted);
+}
+
+.c-divider--labeled {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  font-size: 0.875rem;
+  color: var(--c-muted);
+}
+.c-divider--labeled::before, .c-divider--labeled::after {
+  flex: 1 1 auto;
+  height: 0;
+  content: "";
+  border-top: 1px solid var(--c-muted);
+}
+
+.c-divider__label {
+  flex: none;
+}
+
+.c-badge {
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 0.25em;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  line-height: 1.5;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+
+.c-badge--md {
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+}
+
+.c-badge--sm {
+  padding: 0 0.4375rem;
+  font-size: 0.6875rem;
+}
+
+.c-badge--neutral {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+}
+.c-badge--neutral.c-badge--dot {
+  background: var(--c-muted);
+  border-color: var(--c-muted);
+}
+
+.c-badge--primary {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-background));
+}
+.c-badge--primary.c-badge--dot {
+  background: var(--c-primary);
+  border-color: var(--c-primary);
+}
+
+.c-badge--success {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-success) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-background));
+}
+.c-badge--success.c-badge--dot {
+  background: var(--c-success);
+  border-color: var(--c-success);
+}
+
+.c-badge--warning {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-background));
+}
+.c-badge--warning.c-badge--dot {
+  background: var(--c-warning);
+  border-color: var(--c-warning);
+}
+
+.c-badge--error {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-error) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-background));
+}
+.c-badge--error.c-badge--dot {
+  background: var(--c-error);
+  border-color: var(--c-error);
+}
+
+.c-badge--info {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-info) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-info) 35%, var(--c-background));
+}
+.c-badge--info.c-badge--dot {
+  background: var(--c-info);
+  border-color: var(--c-info);
+}
+
+.c-badge--dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  border-radius: 50%;
+}
+.c-badge--dot.c-badge--sm {
+  width: 0.375rem;
+  height: 0.375rem;
+}
+
+.c-tag {
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: 0.375rem;
+  align-items: center;
+  max-width: 100%;
+  font-weight: 700;
+  line-height: 1.5;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  border-radius: 0;
+}
+.c-tag:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-tag--md {
+  padding: 0.125rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+.c-tag--sm {
+  padding: 0 0.5rem;
+  font-size: 0.75rem;
+}
+
+.c-tag__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.c-tag__remove {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 1em;
+  line-height: 1;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: 50%;
+  opacity: 0.7;
+}
+.c-tag__remove:hover:not(:disabled) {
+  opacity: 1;
+}
+
+.c-tag--disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.c-tag--disabled .c-tag__remove {
+  cursor: not-allowed;
+}
+
+.c-tag--neutral {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+}
+
+.c-tag--primary {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-primary) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-background));
+}
+
+.c-tag--success {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-success) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-background));
+}
+
+.c-tag--warning {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-background));
+}
+
+.c-tag--error {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-error) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-background));
+}
+
+.c-tag--info {
+  color: var(--c-text);
+  background: color-mix(in srgb, var(--c-info) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-info) 35%, var(--c-background));
+}
+
+.c-link {
+  font-weight: 700;
+  color: var(--c-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.c-link:hover {
+  color: var(--c-primary-hover);
+  text-decoration: underline;
+}
+.c-link:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+  border-radius: 0;
+}
+
+.c-link--subtle {
+  color: var(--c-muted);
+}
+.c-link--subtle:hover {
+  color: var(--c-text);
+}
+
+.c-link--inline {
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.c-link--disabled,
+.c-link--disabled:hover {
+  color: var(--c-disabled-text);
+  text-decoration: underline;
+  cursor: not-allowed;
+  opacity: 1;
+}
+
+.c-avatar {
+  --c-avatar-size: 2.5rem;
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--c-avatar-size);
+  height: var(--c-avatar-size);
+  overflow: hidden;
+  font-size: calc(var(--c-avatar-size) * 0.4);
+  font-weight: 700;
+  line-height: 1;
+  color: var(--c-text);
+  vertical-align: middle;
+  user-select: none;
+  background: var(--c-surface-active);
+}
+
+.c-avatar--xs {
+  --c-avatar-size: 1.5rem;
+}
+
+.c-avatar--sm {
+  --c-avatar-size: 2rem;
+}
+
+.c-avatar--md {
+  --c-avatar-size: 2.5rem;
+}
+
+.c-avatar--lg {
+  --c-avatar-size: 3.5rem;
+}
+
+.c-avatar--xl {
+  --c-avatar-size: 5rem;
+}
+
+.c-avatar--circle {
+  border-radius: 50%;
+}
+
+.c-avatar--square {
+  border-radius: 0;
+}
+
+.c-avatar__initials {
+  text-transform: uppercase;
+}
+
+.c-avatar__image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.c-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.c-avatar-group > .c-avatar {
+  box-shadow: 0 0 0 2px var(--c-background);
+}
+.c-avatar-group > .c-avatar + .c-avatar {
+  margin-inline-start: -0.5rem;
+}
+
+@keyframes c-skeleton-shimmer {
+  from {
+    background-position: 200% 0;
+  }
+  to {
+    background-position: -200% 0;
+  }
+}
+.c-skeleton {
+  display: block;
+  width: 100%;
+  background-color: var(--c-surface-active);
+  border-radius: 0;
+}
+
+.c-skeleton--text {
+  height: 1em;
+}
+
+.c-skeleton--circle {
+  flex: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+}
+
+.c-skeleton--rect {
+  min-height: 1px;
+}
+
+.c-skeleton--animated {
+  background-image: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-background) 60%, transparent) 50%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size: 50% 100%;
+  animation: c-skeleton-shimmer 1.5s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-skeleton--animated {
+    background-image: none;
+    animation: none;
+  }
+}
+
+.c-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.c-skeleton--last {
+  width: 60%;
+}
+
+@keyframes c-progress-slide {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(250%);
+  }
+}
+@keyframes c-progress-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes c-progress-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.c-progress {
+  --c-progress-bar-height: 0.5rem;
+  --c-progress-circular-size: 2.5rem;
+  box-sizing: border-box;
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--c-text);
+}
+
+.c-progress--sm {
+  --c-progress-bar-height: 0.25rem;
+  --c-progress-circular-size: 1.5rem;
+}
+
+.c-progress--md {
+  --c-progress-bar-height: 0.5rem;
+  --c-progress-circular-size: 2.5rem;
+}
+
+.c-progress--lg {
+  --c-progress-bar-height: 0.75rem;
+  --c-progress-circular-size: 4rem;
+}
+
+.c-progress--bar {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  width: 100%;
+}
+.c-progress--bar .c-progress__track {
+  position: relative;
+  flex: 1;
+  height: var(--c-progress-bar-height);
+  overflow: hidden;
+  background: var(--c-surface-active);
+  border-radius: 0;
+}
+.c-progress--bar .c-progress__fill {
+  display: block;
+  height: 100%;
+  background: var(--c-primary);
+  border-radius: inherit;
+  transition: width 0.2s ease;
+}
+.c-progress--bar.c-progress--indeterminate .c-progress__fill {
+  width: 40%;
+  transition: none;
+  animation: c-progress-slide 1.4s ease-in-out infinite;
+}
+
+.c-progress--circular {
+  position: relative;
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--c-progress-circular-size);
+  height: var(--c-progress-circular-size);
+  vertical-align: middle;
+}
+.c-progress--circular .c-progress__svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotate(-90deg);
+}
+.c-progress--circular .c-progress__track {
+  stroke: var(--c-surface-active);
+  stroke-width: 8;
+}
+.c-progress--circular .c-progress__fill {
+  stroke: var(--c-primary);
+  stroke-width: 8;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.2s ease;
+}
+.c-progress--circular .c-progress__value {
+  position: relative;
+  font-size: calc(var(--c-progress-circular-size) * 0.28);
+}
+.c-progress--circular.c-progress--indeterminate .c-progress__svg {
+  animation: c-progress-spin 1.4s linear infinite;
+}
+.c-progress--circular.c-progress--indeterminate .c-progress__fill {
+  stroke-dashoffset: 210;
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-progress--bar.c-progress--indeterminate .c-progress__fill {
+    width: 100%;
+    animation: c-progress-pulse 2s ease-in-out infinite;
+  }
+  .c-progress--circular.c-progress--indeterminate .c-progress__svg {
+    animation: c-progress-pulse 2s ease-in-out infinite;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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",
@@ -54,7 +54,17 @@
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-card": "^0.1.0",
-    "@carissa-io/components-alert": "^0.1.0"
+    "@carissa-io/components-alert": "^0.1.0",
+    "@carissa-io/components-spinner": "^0.1.0",
+    "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-toast": "^0.1.0",
+    "@carissa-io/components-divider": "^0.1.0",
+    "@carissa-io/components-badge": "^0.1.0",
+    "@carissa-io/components-tag": "^0.1.0",
+    "@carissa-io/components-link": "^0.1.0",
+    "@carissa-io/components-avatar": "^0.1.0",
+    "@carissa-io/components-skeleton": "^0.1.0",
+    "@carissa-io/components-progress": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -119,24 +129,64 @@
     },
     "@carissa-io/components-alert": {
       "optional": true
+    },
+    "@carissa-io/components-spinner": {
+      "optional": true
+    },
+    "@carissa-io/components-modal": {
+      "optional": true
+    },
+    "@carissa-io/components-toast": {
+      "optional": true
+    },
+    "@carissa-io/components-divider": {
+      "optional": true
+    },
+    "@carissa-io/components-badge": {
+      "optional": true
+    },
+    "@carissa-io/components-tag": {
+      "optional": true
+    },
+    "@carissa-io/components-link": {
+      "optional": true
+    },
+    "@carissa-io/components-avatar": {
+      "optional": true
+    },
+    "@carissa-io/components-skeleton": {
+      "optional": true
+    },
+    "@carissa-io/components-progress": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@carissa-io/components-alert": "^0.1.0",
+    "@carissa-io/components-avatar": "^0.1.0",
+    "@carissa-io/components-badge": "^0.1.0",
     "@carissa-io/components-button": "^0.1.1",
     "@carissa-io/components-calendar": "^0.1.1",
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-checkbox": "^0.1.1",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
+    "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
+    "@carissa-io/components-link": "^0.1.0",
     "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-modal": "^0.1.0",
     "@carissa-io/components-popover": "^0.1.1",
+    "@carissa-io/components-progress": "^0.1.0",
     "@carissa-io/components-radio-group": "^0.1.1",
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-select": "^0.1.1",
+    "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",
+    "@carissa-io/components-spinner": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-tag": "^0.1.0",
+    "@carissa-io/components-toast": "^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

@@ -630,3 +630,226 @@
     $c-alert-error-icon-color: $var-error,
     $c-alert-error-title-color: $var-text
 );
+
+// Spinner: a thin ring in the surface-active gray with a primary arc (black in light, white in dark), turning at 0.75s per
+// turn; with reduced motion the package swaps the turn for a slow pulse. Colors only through the custom properties.
+@use '@carissa-io/components-spinner/scss' as spinner with (
+    $c-spinner-size-sm: 1rem,
+    $c-spinner-size-md: 1.5rem,
+    $c-spinner-size-lg: 2.5rem,
+    $c-spinner-thickness: 2px,
+    $c-spinner-color: $var-primary,
+    $c-spinner-track-color: $var-surface-active,
+    $c-spinner-duration: 0.75s,
+    $c-spinner-duration-reduced: 2s
+);
+
+// Modal: a box on the page background with a 1px muted border (the edge that still reads in dark, where a shadow is almost
+// invisible), the theme radius, and the same 1.5rem / 1.25rem padding as Card. The backdrop is the one literal color: black
+// at 50%, the same in both modes. Its index forwards the typography styles, already loaded and configured above, so this
+// block goes after the Typography one (and after Card, which forwards it too).
+@use '@carissa-io/components-modal/scss' as modal with (
+    $c-modal-background: $var-background,
+    $c-modal-color: $var-text,
+    $c-modal-border-width: 1px,
+    $c-modal-border-color: $var-muted,
+    $c-modal-radius: $radius,
+    $c-modal-shadow: (0 4px 8px rgb(0 0 0 / 0.08), 0 16px 48px rgb(0 0 0 / 0.2)),
+    $c-modal-padding-x: 1.5rem,
+    $c-modal-padding-y: 1.25rem,
+    $c-modal-gap: 1rem,
+    $c-modal-margin: 1rem,
+    $c-modal-width-sm: 24rem,
+    $c-modal-width-md: 32rem,
+    $c-modal-width-lg: 48rem,
+    $c-modal-close-size: 1.25rem,
+    $c-modal-close-color: $var-muted,
+    $c-modal-close-color-hover: $var-text,
+    $c-modal-backdrop-color: rgb(0 0 0 / 0.5),
+    $c-modal-transition-duration: $transition-duration,
+    $c-modal-enter-offset: 0.5rem
+);
+
+// Toast: the region and its placement only; the look of each toast is the Alert's (configured above). Its index forwards the
+// alert styles, already loaded and configured by the Alert block, so this block goes after it. The action is a bold
+// underlined 0.875rem button in the text color.
+@use '@carissa-io/components-toast/scss' as toast with (
+    $c-toast-region-offset: 1rem,
+    $c-toast-region-z-index: 1100,
+    $c-toast-gap: 0.75rem,
+    $c-toast-width: 24rem,
+    $c-toast-action-margin-top: 0.5rem,
+    $c-toast-action-font-size: $font-size-small,
+    $c-toast-action-font-weight: $font-weight-bold,
+    $c-toast-action-color: $var-text,
+    $c-toast-enter-duration: $transition-duration,
+    $c-toast-enter-distance: 0.75rem
+);
+
+// Divider: a 1px line in the muted color (the same edge as the card and field borders), so it reads in both modes. The
+// label is the small muted text, 0.75rem from each line. Spacing 1rem above and below (or at the sides when vertical).
+@use '@carissa-io/components-divider/scss' as divider with (
+    $c-divider-color: $var-muted,
+    $c-divider-thickness: 1px,
+    $c-divider-spacing: 1rem,
+    $c-divider-label-color: $var-muted,
+    $c-divider-label-gap: 0.75rem,
+    $c-divider-label-font-size: $font-size-small
+);
+
+// Badge: a small status marker, square like everything else. The variants are tinted like the alerts (12% of the role over
+// the page background, 35% for the border) and the text stays --c-text (14.8:1 or more on every tint): the raw status
+// colors are under 4.5:1 on some tints, so they only color the dot. Neutral is the surface with the muted border.
+// Primary is the tint of --c-primary (a light grey in light, a dark one in dark).
+@use '@carissa-io/components-badge/scss' as badge with (
+    $c-badge-radius: $radius,
+    $c-badge-border-width: 1px,
+    $c-badge-font-weight: $font-weight-bold,
+    $c-badge-md-font-size: $font-size-caption,
+    $c-badge-sm-font-size: $font-size-overline,
+
+    // Neutral
+    $c-badge-neutral-background: $var-surface,
+    $c-badge-neutral-border-color: $var-muted,
+    $c-badge-neutral-color: $var-text,
+    $c-badge-neutral-dot-color: $var-muted,
+
+    // Primary
+    $c-badge-primary-background: color-mix(in srgb, $var-primary 12%, $var-background),
+    $c-badge-primary-border-color: color-mix(in srgb, $var-primary 35%, $var-background),
+    $c-badge-primary-color: $var-text,
+    $c-badge-primary-dot-color: $var-primary,
+
+    // Success
+    $c-badge-success-background: color-mix(in srgb, $var-success 12%, $var-background),
+    $c-badge-success-border-color: color-mix(in srgb, $var-success 35%, $var-background),
+    $c-badge-success-color: $var-text,
+    $c-badge-success-dot-color: $var-success,
+
+    // Warning
+    $c-badge-warning-background: color-mix(in srgb, $var-warning 12%, $var-background),
+    $c-badge-warning-border-color: color-mix(in srgb, $var-warning 35%, $var-background),
+    $c-badge-warning-color: $var-text,
+    $c-badge-warning-dot-color: $var-warning,
+
+    // Error
+    $c-badge-error-background: color-mix(in srgb, $var-error 12%, $var-background),
+    $c-badge-error-border-color: color-mix(in srgb, $var-error 35%, $var-background),
+    $c-badge-error-color: $var-text,
+    $c-badge-error-dot-color: $var-error,
+
+    // Info
+    $c-badge-info-background: color-mix(in srgb, $var-info 12%, $var-background),
+    $c-badge-info-border-color: color-mix(in srgb, $var-info 35%, $var-background),
+    $c-badge-info-color: $var-text,
+    $c-badge-info-dot-color: $var-info
+);
+
+// Tag: the same tints as the badge, square, with the label-sized text and the theme focus ring (1px, offset 2px) because a
+// removable tag is a tab stop. The remove button is the tag's text color at 70%, full on hover.
+@use '@carissa-io/components-tag/scss' as tag with (
+    $c-tag-radius: $radius,
+    $c-tag-border-width: 1px,
+    $c-tag-font-weight: $font-weight-bold,
+    $c-tag-md-font-size: $font-size-small,
+    $c-tag-sm-font-size: $font-size-caption,
+    $c-tag-focus-outline: $focus-width solid $var-focus,
+    $c-tag-focus-outline-offset: 2px,
+
+    // Neutral
+    $c-tag-neutral-background: $var-surface,
+    $c-tag-neutral-border-color: $var-muted,
+    $c-tag-neutral-color: $var-text,
+
+    // Primary
+    $c-tag-primary-background: color-mix(in srgb, $var-primary 12%, $var-background),
+    $c-tag-primary-border-color: color-mix(in srgb, $var-primary 35%, $var-background),
+    $c-tag-primary-color: $var-text,
+
+    // Success
+    $c-tag-success-background: color-mix(in srgb, $var-success 12%, $var-background),
+    $c-tag-success-border-color: color-mix(in srgb, $var-success 35%, $var-background),
+    $c-tag-success-color: $var-text,
+
+    // Warning
+    $c-tag-warning-background: color-mix(in srgb, $var-warning 12%, $var-background),
+    $c-tag-warning-border-color: color-mix(in srgb, $var-warning 35%, $var-background),
+    $c-tag-warning-color: $var-text,
+
+    // Error
+    $c-tag-error-background: color-mix(in srgb, $var-error 12%, $var-background),
+    $c-tag-error-border-color: color-mix(in srgb, $var-error 35%, $var-background),
+    $c-tag-error-color: $var-text,
+
+    // Info
+    $c-tag-info-background: color-mix(in srgb, $var-info 12%, $var-background),
+    $c-tag-info-border-color: color-mix(in srgb, $var-info 35%, $var-background),
+    $c-tag-info-color: $var-text
+);
+
+// Link: --c-primary (black in light, white in dark) with an underline, because a black link on black text is told apart
+// by the underline alone; --c-primary-hover on hover. Subtle is --c-muted (4.7:1 on the background) and turns --c-text.
+// Disabled is --c-disabled-text at full opacity. The focus ring is the theme's 1px ring, offset 2px.
+@use '@carissa-io/components-link/scss' as link with (
+    $c-link-color: $var-primary,
+    $c-link-color-hover: $var-primary-hover,
+    $c-link-decoration: underline,
+    $c-link-hover-decoration: underline,
+    $c-link-font-weight: $font-weight-bold,
+    $c-link-subtle-color: $var-muted,
+    $c-link-subtle-color-hover: $var-text,
+    $c-link-inline-decoration: underline,
+    $c-link-inline-underline-offset: 0.15em,
+    $c-link-focus-outline: $focus-width solid $var-focus,
+    $c-link-focus-outline-offset: 2px,
+    $c-link-focus-radius: $radius,
+    $c-link-disabled-color: $var-disabled-text,
+    $c-link-disabled-opacity: 1
+);
+
+// Avatar: a --c-surface-active disc (or a square, with the theme radius) with --c-text initials, bold. The ring that
+// separates overlapping avatars in a group is the page background, so it blends in both modes.
+@use '@carissa-io/components-avatar/scss' as avatar with (
+    $c-avatar-background: $var-surface-active,
+    $c-avatar-color: $var-text,
+    $c-avatar-font-weight: $font-weight-bold,
+    $c-avatar-radius-square: $radius,
+    $c-avatar-group-overlap: -0.5rem,
+    $c-avatar-group-ring-width: 2px,
+    $c-avatar-group-ring-color: $var-background
+);
+
+// Skeleton: a --c-surface-active block, square, with a band of the page background at 60% sweeping across (a lighter band in
+// light, a darker one in dark). Reduced motion removes the sweep (the package handles it).
+@use '@carissa-io/components-skeleton/scss' as skeleton with (
+    $c-skeleton-background: $var-surface-active,
+    $c-skeleton-highlight: color-mix(in srgb, $var-background 60%, transparent),
+    $c-skeleton-radius: $radius,
+    $c-skeleton-text-height: 1em,
+    $c-skeleton-lines-gap: 0.5rem,
+    $c-skeleton-last-line-width: 60%,
+    $c-skeleton-circle-size: 2.5rem,
+    $c-skeleton-duration: 1.5s
+);
+
+// Progress: a --c-surface-active track with a --c-primary fill (black in light, white in dark), square ends, the
+// percentage in --c-text. Indeterminate loops at 1.4s; with reduced motion the package swaps the motion for a slow pulse.
+@use '@carissa-io/components-progress/scss' as progress with (
+    $c-progress-track-color: $var-surface-active,
+    $c-progress-fill-color: $var-primary,
+    $c-progress-color: $var-text,
+    $c-progress-font-size: $font-size-caption,
+    $c-progress-font-weight: $font-weight-bold,
+    $c-progress-gap: 0.75rem,
+    $c-progress-bar-height-sm: 0.25rem,
+    $c-progress-bar-height-md: 0.5rem,
+    $c-progress-bar-height-lg: 0.75rem,
+    $c-progress-bar-radius: $radius,
+    $c-progress-transition: width $transition-duration ease,
+    $c-progress-circular-size-sm: 1.5rem,
+    $c-progress-circular-size-md: 2.5rem,
+    $c-progress-circular-size-lg: 4rem,
+    $c-progress-circular-thickness: 8,
+    $c-progress-duration: 1.4s,
+    $c-progress-duration-reduced: 2s
+);