@carissa-io/theme-default 0.3.21 → 0.3.22

package/DESIGN.md

@@ -495,6 +495,24 @@ From [components-animate](components/components-animate): `Animate`. The entranc
 ## Sequence
 From [components-sequence](components/components-sequence): `Sequence`. The items come in 0.15s apart (`$motion-stagger`), stacked with 1rem between them; the motion itself is the Animate one, so the block is configured after it. No colour of its own. Under `prefers-reduced-motion` every item is shown at once.
 
+## Typewriter
+From [components-typewriter](components/components-typewriter): `Typewriter`. The cursor is a 0.08em bar in `--c-text`, the colour of the text it follows (17.93:1 / 18.16:1 on the background), blinking once per four short tokens (1s; a blink of the short token alone would flicker). It stays solid while characters are typed. The typing speed is a prop. Under `prefers-reduced-motion` the final text shows at once and the cursor is not drawn.
+
+## Scramble
+From [components-scramble](components/components-scramble): `Scramble`. Characters still decoding sit at 0.7 opacity and the settled text returns to full opacity over the short token on the shared easing. The text keeps `--c-text`; the contrast figures are those of the palette once it has settled. Under `prefers-reduced-motion` the final text shows at once.
+
+## Counter
+From [components-counter](components/components-counter): `Counter`. A count lasts the long token (0.9s) on the decelerating `out` easing, read by the component through custom properties. Equal-width digits stay on so the figure does not jitter. No colour of its own: it inherits the text around it. The final value is the accessible text from the first render.
+
+## Highlight sweep
+From [components-highlight-sweep](components/components-highlight-sweep): `HighlightSweep`. The marker is `--c-surface-active` behind the text (`--c-text` on it: 14.23:1 in light, 13.88:1 in dark; both AA, tested), 0.2em wider on each side, sweeping over the medium token on the shared easing. The gray marks without a hue; if the highlight carries meaning, say it in text or use `as="mark"`. Under `prefers-reduced-motion` the marker shows at its end state.
+
+## Ticker
+From [components-ticker](components/components-ticker): `Ticker`. A constant-speed loop of 40s (a marquee is not an entrance, so it does not read the motion tokens) with 2rem between items. The pause control is a 2.75rem round button (the touch target of the theme): `--c-text` glyph on `--c-background`, a 1px `--c-muted` border (5.74:1 / 7.85:1 on the background) and a 2px `--c-focus` outline offset by 2px on keyboard focus. The text of the control comes from the app (`pause_label`, `play_label`). Under `prefers-reduced-motion` the ticker is a static list with no control.
+
+## Stagger list
+From [components-stagger-list](components/components-stagger-list): `StaggerList`. Rows come in 0.15s apart (`$motion-stagger`) with 0.5rem between them; the motion of each row is the Animate one, so the block is configured after it. No colour of its own. Under `prefers-reduced-motion` every row is shown at once.
+
 ## 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

@@ -123,11 +123,11 @@ change.
 | `$focus-color` | `$black` | focus color |
 | `$focus-width` | `1px` | focus ring width |
 | `$transition-duration` | `0.2s` | color and border transitions |
-| `$motion-duration-short` | `0.25s` | quick entrances and small moves |
-| `$motion-duration-medium` | `0.5s` | the default entrance (`animate`) |
-| `$motion-duration-long` | `0.9s` | counts, reveals and other slow moves |
+| `$motion-duration-short` | `0.25s` | quick entrances and small moves (`scramble` settle, four of them make the `typewriter` cursor blink) |
+| `$motion-duration-medium` | `0.5s` | the default entrance (`animate`) and the `highlight-sweep` |
+| `$motion-duration-long` | `0.9s` | counts (`counter`), reveals and other slow moves |
 | `$motion-easing` | `cubic-bezier(0.16, 1, 0.3, 1)` | the one decelerating easing of the motion components |
-| `$motion-stagger` | `0.15s` | gap between the items of a `sequence` |
+| `$motion-stagger` | `0.15s` | gap between the items of a `sequence` or a `stagger-list` |
 | `$label-font-size` | `0.6875rem` | field label size |
 | `$label-font-weight` | `700` | field label weight |
 | `$label-letter-spacing` | `0.1em` | field label tracking |
@@ -174,7 +174,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`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message`, `-message-list`, `-prompt-input`, `-suggested-prompts`, `-message-actions`, `-animate` and `-sequence`. `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`, `-async-autocomplete`, `-section`, `-faq`, `-carousel`, `-visually-hidden`, `-live-region`, `-theme-switch`, `-icon`, `-ai-label`, `-thinking-indicator`, `-streaming-text`, `-message`, `-message-list`, `-prompt-input`, `-suggested-prompts`, `-message-actions`, `-animate`, `-sequence`, `-typewriter`, `-scramble`, `-counter`, `-highlight-sweep`, `-ticker` and `-stagger-list`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 The checkbox's mixed state (`indeterminate`, from the next `components-checkbox` release, class `c-checkbox--indeterminate`) is the checked box with a 10px dash in `--c-on-primary`; on an older checkbox the rule is simply unused.

package/dist/index.css

@@ -5981,3 +5981,308 @@ button.c-theme-switch:focus-visible {
 .c-sequence__item {
   --c-animate-delay: calc(var(--c-sequence-index, 0) * var(--c-sequence-stagger, 0.15s));
 }
+
+@keyframes c-typewriter-blink {
+  0%, 49% {
+    opacity: 1;
+  }
+  50%, 100% {
+    opacity: 0;
+  }
+}
+.c-typewriter__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c-typewriter__text {
+  white-space: pre-wrap;
+}
+
+.c-typewriter__cursor {
+  display: inline-block;
+  width: 0.08em;
+  height: 1em;
+  margin-inline-start: 0.1em;
+  vertical-align: text-bottom;
+  background: var(--c-text);
+  animation: c-typewriter-blink 1s steps(1, end) infinite;
+}
+.c-typewriter__cursor--active {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-typewriter__cursor {
+    animation: none;
+  }
+}
+.c-scramble__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c-scramble__text {
+  white-space: pre-wrap;
+  font-variant-numeric: tabular-nums;
+  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.c-scramble--scrambling .c-scramble__text {
+  opacity: 0.7;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-scramble__text {
+    opacity: 1;
+    transition: none;
+  }
+}
+.c-counter {
+  --c-counter-duration: 0.9s;
+  --c-counter-easing: out;
+  position: relative;
+  font-variant-numeric: tabular-nums;
+}
+
+.c-counter__text {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes c-highlight-sweep {
+  from {
+    background-size: 0% 100%;
+  }
+  to {
+    background-size: 100% 100%;
+  }
+}
+.c-highlight-sweep {
+  padding-inline: 0.2em;
+  background-image: linear-gradient(var(--c-surface-active), var(--c-surface-active));
+  background-repeat: no-repeat;
+  background-position: left bottom;
+  background-size: 0% 100%;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+}
+
+.c-highlight-sweep--rtl {
+  background-position: right bottom;
+}
+
+.c-highlight-sweep[data-state=active] {
+  background-size: 100% 100%;
+  animation-name: c-highlight-sweep;
+  animation-duration: var(--c-highlight-sweep-duration, 0.5s);
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  animation-delay: var(--c-highlight-sweep-delay, 0s);
+  animation-fill-mode: backwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-highlight-sweep,
+  .c-highlight-sweep[data-state] {
+    background-size: 100% 100%;
+    animation: none;
+  }
+}
+@keyframes c-ticker-x {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes c-ticker-y {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-50%);
+  }
+}
+.c-ticker {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+}
+
+.c-ticker__viewport {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.c-ticker__track {
+  display: flex;
+  width: max-content;
+  animation-duration: var(--c-ticker-duration, 40s);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.c-ticker__list {
+  display: flex;
+  flex: none;
+  gap: var(--c-ticker-gap, 2rem);
+  min-width: 100vw;
+  padding: 0 var(--c-ticker-gap, 2rem) 0 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-ticker__item {
+  flex: none;
+}
+
+.c-ticker--horizontal .c-ticker__track {
+  animation-name: c-ticker-x;
+}
+
+.c-ticker--right .c-ticker__track,
+.c-ticker--down .c-ticker__track {
+  animation-direction: reverse;
+}
+
+.c-ticker--vertical .c-ticker__viewport {
+  height: 12rem;
+}
+.c-ticker--vertical .c-ticker__track {
+  flex-direction: column;
+  width: auto;
+  animation-name: c-ticker-y;
+}
+.c-ticker--vertical .c-ticker__list {
+  flex-direction: column;
+  min-width: 0;
+  min-height: 12rem;
+  padding: 0 0 var(--c-ticker-gap, 2rem) 0;
+}
+
+.c-ticker[data-state=paused] .c-ticker__track,
+.c-ticker[data-state=idle] .c-ticker__track,
+.c-ticker__viewport:focus-within .c-ticker__track,
+.c-ticker--pause-on-hover .c-ticker__viewport:hover .c-ticker__track {
+  animation-play-state: paused;
+}
+
+.c-ticker[data-state=static] .c-ticker__track {
+  width: auto;
+  animation: none;
+}
+.c-ticker[data-state=static] .c-ticker__list {
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  min-width: 0;
+  min-height: 0;
+  padding: 0;
+}
+.c-ticker[data-state=static] .c-ticker__viewport {
+  height: auto;
+  mask-image: none;
+}
+
+.c-ticker__toggle {
+  position: relative;
+  box-sizing: border-box;
+  flex: none;
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  color: var(--c-text);
+  cursor: pointer;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 50%;
+}
+.c-ticker__toggle::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: "";
+}
+.c-ticker__toggle:focus-visible {
+  outline: 2px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-ticker__toggle--playing::before {
+  width: 0.5rem;
+  height: 0.75rem;
+  border-right: 0.1875rem solid currentcolor;
+  border-left: 0.1875rem solid currentcolor;
+  transform: translate(-50%, -50%);
+}
+
+.c-ticker__toggle--paused::before {
+  border-top: 0.375rem solid transparent;
+  border-bottom: 0.375rem solid transparent;
+  border-left: 0.625rem solid currentcolor;
+  transform: translate(-35%, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-ticker__track {
+    width: auto;
+    animation: none;
+  }
+  .c-ticker__list--copy,
+  .c-ticker__toggle {
+    display: none;
+  }
+  .c-ticker__list {
+    flex: 0 1 auto;
+    flex-wrap: wrap;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+  }
+}
+.c-stagger-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-stagger-list__item {
+  --c-animate-delay: calc(
+      var(--c-stagger-list-delay, 0s) + var(--c-stagger-list-index, 0) *
+          var(--c-stagger-list-stagger, 0.15s)
+  );
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-stagger-list__item {
+    opacity: 1;
+    transform: none;
+    animation: none;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "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",
@@ -110,7 +110,13 @@
     "@carissa-io/components-suggested-prompts": "^0.1.0",
     "@carissa-io/components-message-actions": "^0.1.0",
     "@carissa-io/components-animate": "^0.1.0",
-    "@carissa-io/components-sequence": "^0.1.0"
+    "@carissa-io/components-sequence": "^0.1.0",
+    "@carissa-io/components-typewriter": "^0.1.0",
+    "@carissa-io/components-scramble": "^0.1.0",
+    "@carissa-io/components-counter": "^0.1.0",
+    "@carissa-io/components-highlight-sweep": "^0.1.0",
+    "@carissa-io/components-ticker": "^0.1.0",
+    "@carissa-io/components-stagger-list": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -343,6 +349,24 @@
     },
     "@carissa-io/components-sequence": {
       "optional": true
+    },
+    "@carissa-io/components-typewriter": {
+      "optional": true
+    },
+    "@carissa-io/components-scramble": {
+      "optional": true
+    },
+    "@carissa-io/components-counter": {
+      "optional": true
+    },
+    "@carissa-io/components-highlight-sweep": {
+      "optional": true
+    },
+    "@carissa-io/components-ticker": {
+      "optional": true
+    },
+    "@carissa-io/components-stagger-list": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -362,6 +386,7 @@
     "@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-counter": "^0.1.0",
     "@carissa-io/components-date-picker": "^0.1.1",
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-description-list": "^0.1.0",
@@ -370,6 +395,7 @@
     "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-faq": "^0.1.0",
     "@carissa-io/components-field": "^0.1.0",
+    "@carissa-io/components-highlight-sweep": "^0.1.0",
     "@carissa-io/components-icon": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-link": "^0.1.0",
@@ -392,6 +418,7 @@
     "@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-scramble": "^0.1.0",
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-section": "^0.1.0",
     "@carissa-io/components-select": "^0.1.1",
@@ -400,6 +427,7 @@
     "@carissa-io/components-skeleton": "^0.1.0",
     "@carissa-io/components-slider": "^0.1.1",
     "@carissa-io/components-spinner": "^0.1.0",
+    "@carissa-io/components-stagger-list": "^0.1.0",
     "@carissa-io/components-stat": "^0.1.0",
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-streaming-text": "^0.1.0",
@@ -412,11 +440,13 @@
     "@carissa-io/components-textarea": "^0.1.1",
     "@carissa-io/components-theme-switch": "^0.1.0",
     "@carissa-io/components-thinking-indicator": "^0.1.0",
+    "@carissa-io/components-ticker": "^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-typewriter": "^0.1.0",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
     "@carissa-io/components-visually-hidden": "^0.1.0",

package/scss/index.scss

@@ -1881,3 +1881,56 @@
     $c-sequence-direction: column,
     $c-sequence-gap: 1rem
 );
+
+// Typewriter: the cursor is a thin bar in the text colour (the text it follows), blinking once per four short tokens (a blink of the
+// short token alone would flicker). The typing speed is a prop. No other colour; under prefers-reduced-motion the cursor is not drawn.
+@use '@carissa-io/components-typewriter/scss' as typewriter with (
+    $c-typewriter-cursor-width: 0.08em,
+    $c-typewriter-cursor-color: $var-text,
+    $c-typewriter-cursor-blink: $motion-duration-short * 4
+);
+
+// Scramble: the characters that have not settled yet are dimmed to 0.7 and the settled text returns to full opacity over the short
+// token on the shared easing. The text keeps --c-text, so the contrast of the settled text is the palette's.
+@use '@carissa-io/components-scramble/scss' as scramble with (
+    $c-scramble-scrambled-opacity: 0.7,
+    $c-scramble-transition: $motion-duration-short,
+    $c-scramble-easing: $motion-easing
+);
+
+// Counter: a count lasts the long token on the shared decelerating easing (the component reads both through custom properties).
+// Equal-width digits stay on so the number does not jitter. No colour: the figure inherits the text around it.
+@use '@carissa-io/components-counter/scss' as counter with (
+    $c-counter-duration: $motion-duration-long,
+    $c-counter-easing: out
+);
+
+// Highlight sweep: the marker is the --c-surface-active gray behind the text (the text keeps --c-text on it, see the contrast
+// test), and it sweeps over the medium token on the shared easing. Under prefers-reduced-motion it shows at its end state.
+@use '@carissa-io/components-highlight-sweep/scss' as highlight-sweep with (
+    $c-highlight-sweep-color: $var-surface-active,
+    $c-highlight-sweep-duration: $motion-duration-medium,
+    $c-highlight-sweep-easing: $motion-easing,
+    $c-highlight-sweep-padding-inline: 0.2em
+);
+
+// Ticker: a long constant-speed loop (it keeps its own 40s, a marquee is not an entrance), 2rem between items. The pause control
+// is a 2.75rem round button like the theme's other controls: --c-text glyph, 1px --c-muted border, and the --c-focus outline.
+@use '@carissa-io/components-ticker/scss' as ticker with (
+    $c-ticker-duration: 40s,
+    $c-ticker-easing: linear,
+    $c-ticker-gap: 2rem,
+    $c-ticker-toggle-size: $min-height,
+    $c-ticker-toggle-color: $var-text,
+    $c-ticker-toggle-background: $var-background,
+    $c-ticker-toggle-border-color: $var-muted,
+    $c-ticker-toggle-icon-size: 0.5rem,
+    $c-ticker-toggle-focus-outline: 2px solid $var-focus
+);
+
+// Stagger list: the rows come in $motion-stagger apart, stacked with 0.5rem between them. The motion of each row (duration,
+// distance, easing) is the Animate one above, so this block comes after it. No colours.
+@use '@carissa-io/components-stagger-list/scss' as stagger-list with (
+    $c-stagger-list-stagger: $motion-stagger,
+    $c-stagger-list-gap: 0.5rem
+);