eidos-ui 3.2.0 → 3.2.1

package/README.md

@@ -223,7 +223,7 @@ Individual components can also be targeted directly, following each component's
 
 ### Runtime theming
 
-`ThemeProvider` applies a theme at runtime — for a settings screen, a per-tenant palette, or a colour a user picks. Supply one base colour per family and the shades, tints, ramp steps and accessible foregrounds are derived from it:
+`ThemeProvider` applies a theme at runtime - for a settings screen, a per-tenant palette, or a colour a user picks. Supply one base colour per family and the shades, tints, ramp steps and accessible foregrounds are derived from it:
 
 ```tsx
 import { ThemeProvider, ThemeEditor } from 'eidos-ui';
@@ -242,13 +242,13 @@ import { ThemeProvider, ThemeEditor } from 'eidos-ui';
 </ThemeProvider>
 ```
 
-Ten things are editable — seven colour bases, two font stacks, and a font scale. Tokens are written through the CSSOM to `document.documentElement`, which needs **no Content Security Policy allowance** and covers portaled overlays too. A theme equal to the preset writes nothing at all.
+Ten things are editable - seven colour bases, two font stacks, and a font scale. Tokens are written through the CSSOM to `document.documentElement`, which needs **no Content Security Policy allowance** and covers portaled overlays too. A theme equal to the preset writes nothing at all.
 
-Use `useTheme()` to read or change it from your own UI, and `toCss()` to export the resolved tokens as a `:root` block you can paste into a stylesheet — useful for baking a theme in at build time.
+Use `useTheme()` to read or change it from your own UI, and `toCss()` to export the resolved tokens as a `:root` block you can paste into a stylesheet - useful for baking a theme in at build time.
 
 ### Fonts
 
-The theme names Plus Jakarta Sans and JetBrains Mono, but a font stack only _names_ families — it cannot install them. Import the bundled copies to actually use them:
+The theme names Plus Jakarta Sans and JetBrains Mono, but a font stack only _names_ families - it cannot install them. Import the bundled copies to actually use them:
 
 ```ts
 import 'eidos-ui/fonts';

package/dist/index.css

@@ -348,7 +348,7 @@ svg.lucide {
 }
 .eidos-accordion-trigger:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-accordion-trigger:disabled {
   cursor: not-allowed;
@@ -603,9 +603,9 @@ svg.lucide {
 .eidos-avatar--clickable:hover {
   opacity: 0.85;
 }
-.eidos-avatar--clickable:focus {
+.eidos-avatar--clickable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-avatar-image {
@@ -636,12 +636,14 @@ svg.lucide {
 .eidos-avatar-group-item:first-child {
   margin-left: 0;
 }
-.eidos-avatar-group-item .eidos-avatar {
+.eidos-avatar-group-item .eidos-avatar:not(:focus-visible) {
   box-shadow: 0 0 0 2px var(--white);
 }
 
 .eidos-avatar-group .eidos-avatar--overflow {
   margin-left: -8px;
+}
+.eidos-avatar-group .eidos-avatar--overflow:not(:focus-visible) {
   box-shadow: 0 0 0 2px var(--white);
 }
 
@@ -912,9 +914,9 @@ svg.lucide {
 .eidos-breadcrumb-link:focus-visible {
   outline: none;
 }
-.eidos-breadcrumb-link:focus-visible:focus {
+.eidos-breadcrumb-link:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-breadcrumb-link--button {
   background: none;
@@ -940,9 +942,9 @@ svg.lucide {
 .eidos-breadcrumb-link--button:focus-visible {
   outline: none;
 }
-.eidos-breadcrumb-link--button:focus-visible:focus {
+.eidos-breadcrumb-link--button:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-breadcrumb-current {
@@ -1387,7 +1389,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--primary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--primary .eidos-checkbox-control--indeterminate {
@@ -1397,7 +1399,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
 }
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--secondary .eidos-checkbox-control--indeterminate {
@@ -1407,7 +1409,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
 }
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--success .eidos-checkbox-control--indeterminate {
@@ -1417,7 +1419,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--danger .eidos-checkbox-control--indeterminate {
@@ -1427,7 +1429,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
 }
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--warning .eidos-checkbox-control--indeterminate {
@@ -1437,7 +1439,7 @@ svg.lucide {
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-input:focus-visible + .eidos-checkbox-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
 }
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--checked,
 .eidos-checkbox-wrapper--info .eidos-checkbox-control--indeterminate {
@@ -1548,7 +1550,7 @@ svg.lucide {
 .eidos-chip--clickable {
   cursor: pointer;
 }
-.eidos-chip--clickable:focus, .eidos-chip--clickable:focus-visible {
+.eidos-chip--clickable:focus:not(:focus-visible) {
   outline: none;
 }
 .eidos-chip--filled {
@@ -1744,11 +1746,18 @@ svg.lucide {
   flex-shrink: 0;
 }
 .eidos-chip--remove-button:hover:not(:disabled) {
-  background-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(var(--dark-rgb), 0.12);
+}
+.eidos-chip--filled .eidos-chip--remove-button:hover:not(:disabled) {
+  background-color: rgba(var(--white-rgb), 0.25);
 }
-.eidos-chip--remove-button:focus {
+.eidos-chip--remove-button:focus:not(:focus-visible) {
   outline: none;
 }
+.eidos-chip--remove-button:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--primary-color);
+}
 
 .eidos-chip--remove-icon {
   display: block;
@@ -1789,7 +1798,7 @@ svg.lucide {
 }
 .eidos-color-picker-trigger:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-color-picker--sm .eidos-color-picker-trigger {
   padding: 4px var(--spacing-xs);
@@ -2039,7 +2048,7 @@ svg.lucide {
 }
 .eidos-color-picker-input:focus {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-color-picker-input:disabled {
   cursor: not-allowed;
@@ -2142,7 +2151,7 @@ svg.lucide {
 }
 .eidos-combobox--error .eidos-input-wrapper:focus-within {
   border-color: var(--danger-color) !important;
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
 }
 .eidos-combobox--error .eidos-input-label {
   color: var(--danger-color);
@@ -2813,7 +2822,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-message-attachment-link:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
 }
 
 .eidos-message-attachment-name {
@@ -2976,7 +2985,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-chat-scroll:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
 }
 
 .eidos-message--chat .eidos-message-bubble {
@@ -4514,9 +4523,9 @@ kbd.eidos-cmd-kbd {
 .eidos-drawer-close:focus-visible {
   outline: none;
 }
-.eidos-drawer-close:focus-visible:focus {
+.eidos-drawer-close:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-drawer-close svg {
   width: 18px;
@@ -4832,9 +4841,9 @@ kbd.eidos-cmd-kbd {
   background: var(--gray-200);
   color: var(--danger-color);
 }
-.eidos-file-upload-item-remove:focus-visible:focus {
+.eidos-file-upload-item-remove:focus-visible:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-file-upload-item-remove svg {
   width: 14px;
@@ -4989,10 +4998,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper:focus-within {
   border-color: var(--primary-color);
-}
-.eidos-input-wrapper:focus-within:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-input-wrapper--focused.eidos-input-wrapper--filled {
   background-color: var(--white);
@@ -5021,42 +5027,42 @@ kbd.eidos-cmd-kbd {
 .eidos-input-wrapper--filled:focus-within {
   background-color: var(--white);
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--secondary:hover:not(:disabled) {
   border-color: var(--secondary-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--success:hover:not(:disabled) {
   border-color: var(--success-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--danger:hover:not(:disabled) {
   border-color: var(--danger-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--warning:hover:not(:disabled) {
   border-color: var(--warning-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--info:hover:not(:disabled) {
   border-color: var(--info-color);
 }
 .eidos-input-wrapper--filled.eidos-input-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined {
   background-color: transparent;
@@ -5067,7 +5073,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--secondary {
   border-color: var(--secondary-color);
@@ -5077,7 +5083,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--success {
   border-color: var(--success-color);
@@ -5087,7 +5093,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--danger {
   border-color: var(--danger-color);
@@ -5097,7 +5103,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--warning {
   border-color: var(--warning-color);
@@ -5107,7 +5113,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--info {
   border-color: var(--info-color);
@@ -5117,7 +5123,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--outlined.eidos-input-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-input-wrapper--text {
   background-color: transparent;
@@ -5204,10 +5210,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-input-wrapper--error:focus-within {
   border-color: var(--danger-color) !important;
-}
-.eidos-input-wrapper--error:focus-within:focus {
-  outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-input-wrapper--loading {
   border-style: dashed;
@@ -5755,13 +5758,13 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-number-input-control:focus-within:not(.eidos-number-input-control--disabled) {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 99, 102, 241), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-number-input--error .eidos-number-input-control {
   border-color: var(--danger-color);
 }
 .eidos-number-input--error .eidos-number-input-control:focus-within {
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb, 239, 68, 68), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-number-input-control--disabled {
   background: var(--gray-100);
@@ -5946,7 +5949,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-otp .eidos-otp-slot--focused {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
   background-color: var(--white);
 }
 .eidos-otp .eidos-otp-slot--error {
@@ -5954,7 +5957,7 @@ kbd.eidos-cmd-kbd {
   background-color: rgba(var(--danger-rgb), 0.04);
 }
 .eidos-otp .eidos-otp-slot--error.eidos-otp-slot--focused {
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-otp .eidos-otp-slot--disabled {
   opacity: 0.5;
@@ -6128,7 +6131,7 @@ kbd.eidos-cmd-kbd {
   color: var(--info-contrast);
 }
 .eidos-pagination-page--active:focus {
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-pagination-page--active:disabled {
   opacity: 0.6;
@@ -6242,7 +6245,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-popover-close:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-popover-close svg {
   width: 14px;
@@ -6389,7 +6392,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--primary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-radio-wrapper--primary .eidos-radio-control--checked {
   background: var(--primary-color);
@@ -6398,7 +6401,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--secondary .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
 }
 .eidos-radio-wrapper--secondary .eidos-radio-control--checked {
   background: var(--secondary-color);
@@ -6407,7 +6410,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--success .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
 }
 .eidos-radio-wrapper--success .eidos-radio-control--checked {
   background: var(--success-color);
@@ -6416,7 +6419,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--danger .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-radio-wrapper--danger .eidos-radio-control--checked {
   background: var(--danger-color);
@@ -6425,7 +6428,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--warning .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
 }
 .eidos-radio-wrapper--warning .eidos-radio-control--checked {
   background: var(--warning-color);
@@ -6434,7 +6437,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-radio-wrapper--info .eidos-radio-input:focus-visible + .eidos-radio-control {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
 }
 .eidos-radio-wrapper--info .eidos-radio-control--checked {
   background: var(--info-color);
@@ -6691,45 +6694,45 @@ kbd.eidos-cmd-kbd {
 }
 
 .eidos-segmented--primary .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
 }
 .eidos-segmented--primary .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--primary-color);
 }
 
 .eidos-segmented--secondary .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--secondary-color);
 }
 .eidos-segmented--secondary .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--secondary-color);
 }
 
 .eidos-segmented--success .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--success-color);
 }
 .eidos-segmented--success .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--success-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--success-color);
 }
 
 .eidos-segmented--danger .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--danger-color);
 }
 .eidos-segmented--danger .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--danger-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--danger-color);
 }
 
 .eidos-segmented--warning .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--warning-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--warning-color);
 }
 .eidos-segmented--warning .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--warning-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--warning-color);
 }
 
 .eidos-segmented--info .eidos-segmented-item:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--info-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--info-color);
 }
 .eidos-segmented--info .eidos-segmented-item--active:focus-visible {
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px rgba(var(--info-rgb), 0.5);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), inset 0 0 0 2px var(--info-color);
 }
 
 .eidos-select-container {
@@ -7293,35 +7296,15 @@ kbd.eidos-cmd-kbd {
   background-color: var(--gray-100);
   color: var(--gray-700);
 }
-.eidos-snackbar .eidos-snackbar-close-button:focus:focus {
+.eidos-snackbar .eidos-snackbar-close-button:focus:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(var(--gray-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--gray-color);
 }
 .eidos-snackbar .eidos-snackbar-close-icon {
   width: 16px;
   height: 16px;
 }
 
-@keyframes snackbarEnter {
-  from {
-    opacity: 0;
-    transform: translateX(100%) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-}
-@keyframes snackbarExit {
-  from {
-    opacity: 1;
-    transform: translateX(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(0) scale(0.85);
-  }
-}
 .eidos-snackbar-container {
   position: fixed;
   top: var(--spacing-lg);
@@ -7738,42 +7721,42 @@ kbd.eidos-cmd-kbd {
   color: var(--primary-contrast);
 }
 .eidos-switch-wrapper--primary .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-track--checked {
   background: var(--secondary-color);
   color: var(--secondary-contrast);
 }
 .eidos-switch-wrapper--secondary .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color);
 }
 .eidos-switch-wrapper--success .eidos-switch-track--checked {
   background: var(--success-color);
   color: var(--success-contrast);
 }
 .eidos-switch-wrapper--success .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color);
 }
 .eidos-switch-wrapper--danger .eidos-switch-track--checked {
   background: var(--danger-color);
   color: var(--danger-contrast);
 }
 .eidos-switch-wrapper--danger .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-switch-wrapper--warning .eidos-switch-track--checked {
   background: var(--warning-color);
   color: var(--warning-contrast);
 }
 .eidos-switch-wrapper--warning .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color);
 }
 .eidos-switch-wrapper--info .eidos-switch-track--checked {
   background: var(--info-color);
   color: var(--info-contrast);
 }
 .eidos-switch-wrapper--info .eidos-switch-input:focus-visible + .eidos-switch-track {
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color);
 }
 
 .eidos-switch-label {
@@ -8769,7 +8752,7 @@ kbd.eidos-cmd-kbd {
   color: var(--primary-contrast);
 }
 .eidos-tabs--primary .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--primary-color);
 }
 
 .eidos-tabs--secondary .eidos-tab--active {
@@ -8783,7 +8766,7 @@ kbd.eidos-cmd-kbd {
   color: var(--secondary-contrast);
 }
 .eidos-tabs--secondary .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--secondary-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--secondary-color);
 }
 
 .eidos-tabs--success .eidos-tab--active {
@@ -8797,7 +8780,7 @@ kbd.eidos-cmd-kbd {
   color: var(--success-contrast);
 }
 .eidos-tabs--success .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--success-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--success-color);
 }
 
 .eidos-tabs--danger .eidos-tab--active {
@@ -8811,7 +8794,7 @@ kbd.eidos-cmd-kbd {
   color: var(--danger-contrast);
 }
 .eidos-tabs--danger .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--danger-color);
 }
 
 .eidos-tabs--warning .eidos-tab--active {
@@ -8825,7 +8808,7 @@ kbd.eidos-cmd-kbd {
   color: var(--warning-contrast);
 }
 .eidos-tabs--warning .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--warning-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--warning-color);
 }
 
 .eidos-tabs--info .eidos-tab--active {
@@ -8839,7 +8822,7 @@ kbd.eidos-cmd-kbd {
   color: var(--info-contrast);
 }
 .eidos-tabs--info .eidos-tab:focus-visible {
-  box-shadow: inset 0 0 0 2px rgba(var(--info-rgb), 0.5);
+  box-shadow: inset 0 0 0 2px var(--info-color);
 }
 
 .eidos-tabs--pills .eidos-tab--active:focus-visible {
@@ -8934,7 +8917,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tag-input-field--focused {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
   outline: none;
 }
 .eidos-tag-input-field--error {
@@ -8942,7 +8925,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tag-input-field--error.eidos-tag-input-field--focused {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.15);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-tag-input-field--disabled {
   opacity: 0.5;
@@ -9122,42 +9105,42 @@ kbd.eidos-cmd-kbd {
 .eidos-textarea-wrapper--filled:focus-within {
   background-color: var(--white);
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--secondary:hover:not(:disabled) {
   border-color: var(--secondary-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--success:hover:not(:disabled) {
   border-color: var(--success-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--danger:hover:not(:disabled) {
   border-color: var(--danger-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--warning:hover:not(:disabled) {
   border-color: var(--warning-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--info:hover:not(:disabled) {
   border-color: var(--info-color);
 }
 .eidos-textarea-wrapper--filled.eidos-textarea-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined {
   background-color: transparent;
@@ -9168,7 +9151,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined:focus-within {
   border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--secondary {
   border-color: var(--secondary-color);
@@ -9178,7 +9161,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--secondary:focus-within {
   border-color: var(--secondary-color);
-  box-shadow: 0 0 0 3px rgba(var(--secondary-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--secondary-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--success {
   border-color: var(--success-color);
@@ -9188,7 +9171,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--success:focus-within {
   border-color: var(--success-color);
-  box-shadow: 0 0 0 3px rgba(var(--success-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--success-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--danger {
   border-color: var(--danger-color);
@@ -9198,7 +9181,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--danger:focus-within {
   border-color: var(--danger-color);
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--warning {
   border-color: var(--warning-color);
@@ -9208,7 +9191,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--warning:focus-within {
   border-color: var(--warning-color);
-  box-shadow: 0 0 0 3px rgba(var(--warning-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--warning-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--info {
   border-color: var(--info-color);
@@ -9218,7 +9201,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--outlined.eidos-textarea-wrapper--info:focus-within {
   border-color: var(--info-color);
-  box-shadow: 0 0 0 3px rgba(var(--info-rgb), 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--info-color), 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
 }
 .eidos-textarea-wrapper--text {
   background-color: transparent;
@@ -9292,7 +9275,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-textarea-wrapper--error:focus-within {
   border-color: var(--danger-color) !important;
-  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), 0.1);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--danger-color);
 }
 .eidos-textarea-wrapper--loading {
   border-style: dashed;
@@ -9735,7 +9718,7 @@ kbd.eidos-cmd-kbd {
 }
 .eidos-tree-node:focus-visible > .eidos-tree-node-row {
   border-radius: var(--border-radius-sm);
-  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 
 .eidos-tree-node-row {
@@ -10229,9 +10212,9 @@ kbd.eidos-cmd-kbd {
 .eidos-navigation__brand--clickable:hover {
   opacity: 0.85;
 }
-.eidos-navigation__brand--clickable:focus {
+.eidos-navigation__brand--clickable:focus-visible {
   outline: none;
-  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.3);
+  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-color);
 }
 .eidos-navigation__brand--logo-only {
   justify-content: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eidos-ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "description": "A modern React component library with TypeScript and SCSS",
   "type": "module",
   "main": "./dist/index.cjs",