@carissa-io/theme-default 0.3.12 → 0.3.13

package/DESIGN.md

@@ -428,6 +428,18 @@ From [components-faq](components/components-faq): `Faq`. It is the Accordion (th
 ## Carousel
 From [components-carousel](components/components-carousel): `Carousel`. The arrows and the pause / play button are the secondary button's: square, 2.75rem, a 1px `--c-muted` border (5.74:1 / 7.85:1 on the background), a `--c-surface-active` hover and a `--c-text` glyph (17.93:1 / 18.16:1; 14.23:1 / 13.88:1 on the hover). The glyphs (corner, bars, triangle) are drawn with borders in `currentColor`, so they follow the mode and need no new colour. Disabled arrows are at half opacity (exempt). The dots are 0.625rem circles in `--c-muted` (5.74:1 / 7.85:1 on the background, 5.27:1 / 7.11:1 on `--c-surface`, above the 3:1 minimum for graphics) and the current one is `--c-primary` (21:1 / 19.8:1) and 1.5rem long. Colour is not the only cue: the current dot is a bar against circles, and it also carries `aria-current`; the lightness gap between the two colours is 3.66:1 in light and 2.52:1 in dark (below 3:1 there, which the shape makes up for). The keyboard ring is the theme's 1px `--c-focus` outline offset by 2px (21:1 / 19.8:1). Transitions run at 0.2s and stop under `prefers-reduced-motion`.
 
+## Visually hidden
+From [components-visually-hidden](components/components-visually-hidden): `VisuallyHidden`. The hidden state is the clip pattern and has no look. The revealed state (`focusable`, a skip link) is `--c-text` on `--c-background` (17.93:1 / 18.16:1) with a 0.75rem 1rem padding at the top-left corner; it is only shown while it has keyboard focus, so the browser's focus indicator still marks it and the pair stays well above 4.5:1 in both modes. No new colour.
+
+## Live region
+From [components-live-region](components/components-live-region): `LiveRegion`. Hidden regions have no look (they are announced, not seen). The visible variant is a square box: `--c-text` on `--c-surface` (16.44:1 / 16.44:1) with a 1px `--c-muted` border (5.27:1 / 7.11:1 on the surface, above the 3:1 non-text minimum), 0.75rem 1rem padding; an empty region takes no space.
+
+## Theme switch
+From [components-theme-switch](components/components-theme-switch): `ThemeSwitch`. A segmented control built like the stepper and tabs: square, a 1px `--c-muted` border (5.74:1 / 7.85:1 on the background) and 2.75rem options with 1.25rem icons (`currentColor`, so `--c-text` at 17.93:1 / 18.16:1 on the background). The current option is filled `--c-primary` with an `--c-on-primary` icon (21:1 / 21:1) and a 2px `--c-on-primary` underline, so it is told apart by shape as well as by colour; it also carries `aria-checked`. Hover is a `--c-surface-active` fill (`--c-text` 14.23:1 / 13.88:1). The keyboard ring is the theme's 1px `--c-focus` outline offset by 2px (21:1 / 19.8:1 on the background). The text labels stay visually hidden (the icons are the visible cue). The `cycle` variant is one bordered button of the same height showing the current mode icon (`--c-text` on `--c-background`, same hover and ring).
+
+## Icon
+From [components-icon](components/components-icon): `Icon`. No colour of its own: the stroke is `currentColor`, so an icon has the contrast of the text it sits in (17.93:1 / 18.16:1 for `--c-text`, 5.74:1 / 7.85:1 for `--c-muted`, both above the 3:1 non-text minimum). Sizes are pinned in rem (1, 1.25, 1.5 and 2rem) so they do not drift with the font size around them. A decorative icon is `aria-hidden`; a lone one needs a `label`.
+
 ## 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`, `-code`, `-field`, `-number-input`, `-otp-input`, `-phone`, `-tag-input`, `-time-picker`, `-date-range`, `-rating`, `-color-picker`, `-async-autocomplete`, `-section`, `-faq` and `-carousel`. `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` and `-icon`. `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

@@ -5282,3 +5282,157 @@ ol.c-list {
     transition: none;
   }
 }
+.c-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-visually-hidden--focusable:focus,
+.c-visually-hidden--focusable:focus-within {
+  position: fixed;
+  top: 0.5rem;
+  left: 0.5rem;
+  z-index: 1000;
+  width: auto;
+  height: auto;
+  padding: 0.75rem 1rem;
+  margin: 0;
+  overflow: visible;
+  color: var(--c-text);
+  white-space: normal;
+  background: var(--c-background);
+  clip-path: none;
+}
+
+.c-live-region--hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-live-region:not(.c-live-region--hidden) {
+  padding: 0.75rem 1rem;
+  color: var(--c-text);
+  background: var(--c-surface);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+.c-live-region:not(.c-live-region--hidden):empty {
+  display: none;
+}
+
+.c-theme-switch {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: 0;
+  color: var(--c-text);
+  vertical-align: middle;
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+
+.c-theme-switch__option,
+button.c-theme-switch {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  transition: background-color 0.2s;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-theme-switch__option,
+  button.c-theme-switch {
+    transition: none;
+  }
+}
+.c-theme-switch__option:hover,
+button.c-theme-switch:hover {
+  background: var(--c-surface-active);
+}
+.c-theme-switch__option:focus-visible,
+button.c-theme-switch:focus-visible {
+  outline: 1px solid var(--c-focus);
+  outline-offset: 2px;
+}
+
+.c-theme-switch__option {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 0.875rem;
+  border-radius: 0;
+}
+
+.c-theme-switch__option--current,
+.c-theme-switch__option--current:hover {
+  color: var(--c-on-primary);
+  background: var(--c-primary);
+  box-shadow: inset 0 -2px 0 var(--c-on-primary);
+}
+
+.c-theme-switch--cycle {
+  padding: 0.75rem 0.875rem;
+}
+
+.c-theme-switch__icon {
+  display: inline-flex;
+  flex: none;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.c-theme-switch__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  vertical-align: -0.2em;
+}
+
+.c-icon--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.c-icon--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.c-icon--lg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.c-icon--xl {
+  width: 2rem;
+  height: 2rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "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",
@@ -96,7 +96,11 @@
     "@carissa-io/components-async-autocomplete": "^0.1.0",
     "@carissa-io/components-section": "^0.1.0",
     "@carissa-io/components-faq": "^0.1.0",
-    "@carissa-io/components-carousel": "^0.1.0"
+    "@carissa-io/components-carousel": "^0.1.0",
+    "@carissa-io/components-visually-hidden": "^0.1.0",
+    "@carissa-io/components-live-region": "^0.1.0",
+    "@carissa-io/components-theme-switch": "^0.1.0",
+    "@carissa-io/components-icon": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -287,6 +291,18 @@
     },
     "@carissa-io/components-carousel": {
       "optional": true
+    },
+    "@carissa-io/components-visually-hidden": {
+      "optional": true
+    },
+    "@carissa-io/components-live-region": {
+      "optional": true
+    },
+    "@carissa-io/components-theme-switch": {
+      "optional": true
+    },
+    "@carissa-io/components-icon": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -312,10 +328,12 @@
     "@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-icon": "^0.1.0",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-link": "^0.1.0",
     "@carissa-io/components-list": "^0.1.0",
     "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-live-region": "^0.1.0",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-modal": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
@@ -342,6 +360,7 @@
     "@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-theme-switch": "^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",
@@ -349,6 +368,7 @@
     "@carissa-io/components-tree": "^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",
     "sass-embedded": "^1.105.1",
     "vitest": "^4.1.11"
   },

package/scss/index.scss

@@ -1660,3 +1660,59 @@
     $c-carousel-focus-outline: $focus-width solid $var-focus,
     $c-carousel-focus-outline-offset: 2px
 );
+
+// Visually hidden: the hidden state is the clip pattern and has no look. The revealed (focusable) state, a skip link, is
+// --c-text on --c-background (17.93:1 / 18.16:1) with comfortable padding; the browser's focus ring still marks it. No
+// component stylesheet is forwarded here, so the order does not matter.
+@use '@carissa-io/components-visually-hidden/scss' as visually-hidden with (
+    $c-visually-hidden-focus-top: 0.5rem,
+    $c-visually-hidden-focus-left: 0.5rem,
+    $c-visually-hidden-focus-padding: 0.75rem 1rem,
+    $c-visually-hidden-focus-background: $var-background,
+    $c-visually-hidden-focus-color: $var-text
+);
+
+// Live region: only the visible variant has a look, a square box like the theme's alerts and cards: --c-text on
+// --c-surface (16.44:1 / 16.44:1) with a 1px --c-muted border (5.27:1 / 7.11:1 on the surface, above the 3:1 minimum). An empty
+// region takes no space (the component hides it).
+@use '@carissa-io/components-live-region/scss' as live-region with (
+    $c-live-region-visible-padding: 0.75rem 1rem,
+    $c-live-region-visible-radius: $radius,
+    $c-live-region-visible-color: $var-text,
+    $c-live-region-visible-background: $var-surface,
+    $c-live-region-visible-border: 1px solid $var-muted
+);
+
+// Theme switch: a segmented control like the stepper and tabs: a square box with a 1px --c-muted border (5.74:1 / 7.85:1 on the
+// background) and 2.75rem options. The current option is filled --c-primary with --c-on-primary (21:1 / 21:1) and a 2px
+// --c-on-primary underline, so it is told apart by shape as well as by colour. Hover is --c-surface-active (--c-text 14.23:1 /
+// 13.88:1) and the keyboard ring is the theme's 1px --c-focus outline offset by 2px (21:1 / 19.8:1). The labels stay visually hidden.
+@use '@carissa-io/components-theme-switch/scss' as theme-switch with (
+    $c-theme-switch-gap: 0,
+    $c-theme-switch-padding: 0,
+    $c-theme-switch-radius: $radius,
+    $c-theme-switch-option-radius: $radius,
+    $c-theme-switch-icon-size: 1.25rem,
+    $c-theme-switch-option-padding: 0.75rem 0.875rem,
+    $c-theme-switch-option-gap: 0.5rem,
+    $c-theme-switch-show-label: false,
+    $c-theme-switch-color: $var-text,
+    $c-theme-switch-background: $var-background,
+    $c-theme-switch-border: 1px solid $var-muted,
+    $c-theme-switch-hover-background: $var-surface-active,
+    $c-theme-switch-current-color: $var-on-primary,
+    $c-theme-switch-current-background: $var-primary,
+    $c-theme-switch-current-marker: inset 0 -2px 0 $var-on-primary,
+    $c-theme-switch-focus-outline: $focus-width solid $var-focus,
+    $c-theme-switch-focus-offset: 2px,
+    $c-theme-switch-transition: $transition-duration
+);
+
+// Icon: pinned sizes (1, 1.25, 1.5 and 2rem) so a glyph does not change with the font size around it; the colour is the
+// text colour of the parent (currentColor), so it follows both modes with no colour of its own.
+@use '@carissa-io/components-icon/scss' as icon with (
+    $c-icon-size-sm: 1rem,
+    $c-icon-size-md: 1.25rem,
+    $c-icon-size-lg: 1.5rem,
+    $c-icon-size-xl: 2rem
+);