@craftzbay/ui 0.10.0 → 0.11.0

package/dist-lib/theme.css

@@ -16,13 +16,18 @@
  *   Light mode
  *     foreground (neutral-900)                 on background (white)         → 17.9:1
  *     foreground-muted (neutral-600)           on background (white)         →  7.4:1
- *     foreground-subtle (neutral-500)          on background (white)         →  4.7:1
+ *     foreground-subtle (hsl 215 16% 45%)      on background (white)         →  5.1:1
+ *     foreground-subtle                        on background-muted           →  4.6:1 (was 4.3 at 47%)
+ *     amber preset accent (oklch .56 .14 65) + white text                    →  4.8:1 (was 3.8 at L .62)
+ *     chart-1 (hsl 217 70% 50%)                on background (white)         →  5.0:1 (no longer aliases --accent)
  *     accent-600 text                          on background (white)         →  7.7:1
  *     accent-600 bg + white text                                             →  7.7:1
  *     success-solid bg + white text                                          →  5.2:1
  *     warning-solid bg + white text                                          →  4.6:1
  *     danger-solid bg + white text                                           →  4.8:1
- *     border-input (hsl 215 16% 58%)           on background (white)         →  3.2:1 (UI)
+ *     border-input (hsl 215 16% 55%)           on background (white)         →  3.55:1 (UI)
+ *     border-input                             on background-muted           →  3.24:1 (UI)
+ *     switch-track-off (hsl 215 16% 55%)       on background / muted         →  3.55 / 3.24:1 (UI)
  *     border (neutral-200) / border-strong (neutral-300)                     →  decorative (1.3 / 1.7)
  *   Dark mode
  *     foreground (neutral-50)                  on background (neutral-950)   → 18.8:1
@@ -31,7 +36,10 @@
  *     accent-400 text                          on background (neutral-950)   →  5.4:1
  *     accent-400 bg + neutral-950 text                                       →  5.4:1
  *     success/warning/danger-solid + neutral-950 text                        →  9.0 / 9.3 / 5.2:1
- *     border-input (hsl 215 16% 42%)           on background (neutral-950)   →  3.5:1 (UI)
+ *     border-input (hsl 215 16% 45%)           on background (neutral-950)   →  3.88:1 (UI)
+ *     border-input                             on background-muted           →  3.28:1 (UI)
+ *     switch-track-off (hsl 215 16% 45%)       on background / muted         →  3.88 / 3.28:1 (UI)
+ *   background-muted on popover (menu highlight) is decorative: 1.10 (light) / 1.08 (dark) — not a 3:1 target.
  * ============================================================================= */
 
 /* Geist + Geist Mono are loaded via a <link> in index.html (Google Fonts). */
@@ -64,9 +72,6 @@
   --text-base--line-height: 1.5rem; /* 24 — 1.71 */
   --text-base--letter-spacing: 0;
 
-  --text-md: 0.9375rem; /* 15 */
-  --text-md--line-height: 1.5rem;
-
   --text-lg: 1rem; /* 16 */
   --text-lg--line-height: 1.5rem;
   --text-lg--letter-spacing: -0.005em;
@@ -134,14 +139,10 @@
 
   /* Shadow — neutral, whisper-soft. Reserved for floating surfaces. -------- */
   --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
-  --shadow-sm:
-    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
-  --shadow-md:
-    0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
-  --shadow-lg:
-    0 12px 24px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
-  --shadow-xl:
-    0 24px 48px -12px rgb(0 0 0 / 0.12), 0 8px 16px -8px rgb(0 0 0 / 0.06);
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
+  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
+  --shadow-lg: 0 12px 24px -6px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.04);
+  --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.12), 0 8px 16px -8px rgb(0 0 0 / 0.06);
 
   /* Z-index scale — semantic. ---------------------------------------------- */
   --z-dropdown: 1000;
@@ -176,30 +177,30 @@
    * ========================================================================== */
 
   /* Neutral — cool gray (hue ≈ 220°) -------------------------------------- */
-  --color-neutral-50: hsl(210 40% 98%);   /* #f8fafc */
-  --color-neutral-100: hsl(210 40% 96%);  /* #f1f5f9 */
-  --color-neutral-200: hsl(214 32% 91%);  /* #e2e8f0 */
-  --color-neutral-300: hsl(213 27% 84%);  /* #cbd5e1 */
-  --color-neutral-400: hsl(215 20% 65%);  /* #94a3b8 */
-  --color-neutral-500: hsl(215 16% 47%);  /* #64748b */
-  --color-neutral-600: hsl(215 19% 35%);  /* #475569 */
-  --color-neutral-700: hsl(215 25% 27%);  /* #334155 */
-  --color-neutral-800: hsl(217 33% 17%);  /* #1e293b */
-  --color-neutral-900: hsl(222 47% 11%);  /* #0f172a */
-  --color-neutral-950: hsl(229 50% 6%);   /* #0a0d14  (slightly warmer than slate-950) */
+  --color-neutral-50: hsl(210 40% 98%); /* #f8fafc */
+  --color-neutral-100: hsl(210 40% 96%); /* #f1f5f9 */
+  --color-neutral-200: hsl(214 32% 91%); /* #e2e8f0 */
+  --color-neutral-300: hsl(213 27% 84%); /* #cbd5e1 */
+  --color-neutral-400: hsl(215 20% 65%); /* #94a3b8 */
+  --color-neutral-500: hsl(215 16% 47%); /* #64748b */
+  --color-neutral-600: hsl(215 19% 35%); /* #475569 */
+  --color-neutral-700: hsl(215 25% 27%); /* #334155 */
+  --color-neutral-800: hsl(217 33% 17%); /* #1e293b */
+  --color-neutral-900: hsl(222 47% 11%); /* #0f172a */
+  --color-neutral-950: hsl(229 50% 6%); /* #0a0d14  (slightly warmer than slate-950) */
 
   /* Accent — graphite indigo (desaturated indigo, hue ≈ 238°) ------------- */
-  --color-accent-50: hsl(232 100% 97%);   /* #eef2ff */
-  --color-accent-100: hsl(232 87% 94%);   /* #e0e6ff */
-  --color-accent-200: hsl(233 79% 87%);   /* #c7d0fb */
-  --color-accent-300: hsl(234 71% 78%);   /* #a5b1f7 */
-  --color-accent-400: hsl(238 60% 67%);   /* #828df0 */
-  --color-accent-500: hsl(238 55% 58%);   /* #6371df */
-  --color-accent-600: hsl(238 50% 49%);   /* #4e5fc4 */
-  --color-accent-700: hsl(238 48% 40%);   /* #4350a7 */
-  --color-accent-800: hsl(238 43% 32%);   /* #3a4385 */
-  --color-accent-900: hsl(238 40% 26%);   /* #312f6c */
-  --color-accent-950: hsl(238 50% 16%);   /* #1c1d50 */
+  --color-accent-50: hsl(232 100% 97%); /* #eef2ff */
+  --color-accent-100: hsl(232 87% 94%); /* #e0e6ff */
+  --color-accent-200: hsl(233 79% 87%); /* #c7d0fb */
+  --color-accent-300: hsl(234 71% 78%); /* #a5b1f7 */
+  --color-accent-400: hsl(238 60% 67%); /* #828df0 */
+  --color-accent-500: hsl(238 55% 58%); /* #6371df */
+  --color-accent-600: hsl(238 50% 49%); /* #4e5fc4 */
+  --color-accent-700: hsl(238 48% 40%); /* #4350a7 */
+  --color-accent-800: hsl(238 43% 32%); /* #3a4385 */
+  --color-accent-900: hsl(238 40% 26%); /* #312f6c */
+  --color-accent-950: hsl(238 50% 16%); /* #1c1d50 */
 
   /* Success — emerald, muted -------------------------------------------- */
   --color-success-50: hsl(152 76% 96%);
@@ -268,12 +269,14 @@
   /* Text ----------------------------------------------------------------- */
   --foreground: hsl(222 47% 11%);
   --foreground-muted: hsl(215 19% 35%);
-  --foreground-subtle: hsl(215 16% 47%);
+  --foreground-subtle: hsl(215 16% 45%); /* ≥4.5:1 on background-muted too */
 
   /* Borders -------------------------------------------------------------- */
   --border: hsl(214 32% 91%);
   --border-strong: hsl(213 27% 84%);
-  --border-input: hsl(215 16% 58%); /* ≥3:1 on background — form control edges */
+  --border-input: hsl(
+    215 16% 55%
+  ); /* ≥3:1 on background AND background-muted (WCAG 1.4.11) — every interactive control edge: fields, selects, checkbox/radio, outline buttons */
 
   /* Card / popover ------------------------------------------------------- */
   --card: hsl(0 0% 100%);
@@ -296,13 +299,13 @@
   --overlay: hsl(229 50% 6% / 0.6);
   --tooltip: hsl(222 47% 11%);
   --tooltip-foreground: hsl(210 40% 98%);
-  --chart-1: var(--accent);
+  --chart-1: hsl(217 70% 50%); /* categorical blue — never the accent, so series ≠ interactive */
   --chart-2: hsl(162 66% 29%);
   --chart-3: hsl(38 92% 40%);
   --chart-4: hsl(0 72% 45%);
   --chart-5: hsl(215 16% 47%);
   --chart-6: hsl(262 52% 55%);
-  --switch-track-off: hsl(213 27% 84%);
+  --switch-track-off: hsl(215 16% 55%); /* ≥3:1 vs background (off state is a UI boundary) */
   --switch-thumb: hsl(0 0% 100%);
 
   /* Status — 4-step mini scales ----------------------------------------- */
@@ -352,7 +355,7 @@
 
   --border: hsl(217 33% 17%);
   --border-strong: hsl(215 25% 27%);
-  --border-input: hsl(215 16% 42%);
+  --border-input: hsl(215 16% 45%); /* 3.88:1 bg / 3.28:1 muted */
 
   /* Floating/card surfaces sit one step above background-subtle for lift. */
   --card: hsl(222 47% 11%);
@@ -372,13 +375,13 @@
   --overlay: hsl(229 50% 6% / 0.7);
   --tooltip: hsl(210 40% 98%);
   --tooltip-foreground: hsl(222 47% 11%);
-  --chart-1: var(--accent);
+  --chart-1: hsl(217 80% 68%);
   --chart-2: hsl(162 60% 55%);
   --chart-3: hsl(38 92% 60%);
   --chart-4: hsl(0 80% 68%);
   --chart-5: hsl(215 20% 65%);
   --chart-6: hsl(262 70% 75%);
-  --switch-track-off: hsl(215 25% 27%);
+  --switch-track-off: hsl(215 16% 45%); /* 3.88:1 vs background */
   --switch-thumb: hsl(0 0% 100%);
 
   --success-subtle: hsl(165 80% 8%);
@@ -497,10 +500,10 @@
   --color-accent-800: oklch(0.46 0.12 65);
 }
 :root[data-accent='amber'] {
-  --accent: oklch(0.62 0.14 65);
+  --accent: oklch(0.56 0.14 65); /* 4.8:1 with white text (0.62 was 3.8:1) */
   --accent-subtle: oklch(0.96 0.04 75);
   --accent-subtle-foreground: oklch(0.48 0.12 65);
-  --ring: oklch(0.66 0.14 65);
+  --ring: oklch(0.64 0.14 65); /* 3.17:1 on background-muted (0.66 was 2.93) */
 }
 .dark[data-accent='amber'] {
   --accent: oklch(0.66 0.14 65);
@@ -602,11 +605,13 @@
   }
 
   html {
+    /* Reserve the scrollbar track so layout doesn't shift when content height changes. */
+    scrollbar-gutter: stable;
     font-family: var(--font-sans);
     font-feature-settings:
-      'cv11' on, /* Geist: stylistic single-storey a in numbers context */
-      'ss03' on, /* Geist: alternate G */
-      'rlig' on;
+      'cv11' on,
+      /* Geist: stylistic single-storey a in numbers context */ 'ss03' on,
+      /* Geist: alternate G */ 'rlig' on;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility;
@@ -626,7 +631,9 @@
     line-height: var(--text-base--line-height);
     font-weight: var(--font-weight-normal);
     /* Long Cyrillic words / URLs must never overflow their container. */
-    overflow-wrap: anywhere;
+    /* break-word, not anywhere: `anywhere` shrinks min-content so flex/table
+       columns collapse to one character on narrow screens (Cyrillic or not). */
+    overflow-wrap: break-word;
     font-synthesis: none;
   }
 
@@ -642,6 +649,14 @@
     outline-offset: 2px;
   }
 
+  /* Chart series are focusable SVG <g> groups. Tailwind's ring utilities are
+     box-shadow based and do not paint on SVG groups; CSS `outline` does
+     (Chromium + Firefox), drawn around the group's bounding box. */
+  [data-chart-series]:focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
   /* tw-animate-css `animate-in` / `animate-out` defaults. Set as the
      overridable `--tw-*` fallbacks so `duration-*` / `ease-*` utilities on
      the same element still win. */
@@ -682,18 +697,78 @@
       transition-duration: 0.001ms !important;
       scroll-behavior: auto !important;
     }
+    /* Opt-out for essential progress indicators (Spinner, indeterminate
+       Progress): they keep a slow (≥1s), non-flashing opacity pulse so the
+       "busy" state remains perceivable. Never use on decorative motion. */
+    [data-motion-keep],
+    .motion-safe-keep {
+      animation-name: motion-keep-pulse !important;
+      animation-duration: 1.6s !important;
+      animation-timing-function: ease-in-out !important;
+      animation-iteration-count: infinite !important;
+      transform: none !important;
+    }
+  }
+
+  /* Forced colors (Windows High Contrast): system colours replace tokens;
+     keep boundaries and focus visible. */
+  @media (forced-colors: active) {
+    :root,
+    .dark {
+      --border: CanvasText;
+      --border-strong: CanvasText;
+      --border-input: CanvasText;
+      --ring: Highlight;
+      --ring-offset: Canvas;
+    }
+    :focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    .focus-ring,
+    .ring-focus {
+      outline: 2px solid Highlight;
+      box-shadow: none;
+    }
+  }
+
+  /* prefers-contrast: more — darker hairlines and secondary text. */
+  @media (prefers-contrast: more) {
+    :root {
+      --border: hsl(213 27% 78%);
+      --border-strong: hsl(215 16% 55%);
+      --foreground-muted: hsl(222 47% 20%);
+      --foreground-subtle: hsl(215 19% 35%);
+    }
+    .dark {
+      --border: hsl(215 25% 30%);
+      --border-strong: hsl(215 16% 45%);
+      --foreground-muted: hsl(210 40% 92%);
+      --foreground-subtle: hsl(213 27% 80%);
+    }
   }
 
-  /* Global subtle scrollbars — thin, transparent track, only visible on
-     hover of the scroll container. Applies to every scrollable surface
+  /* prefers-reduced-transparency — components must not rely on backdrop
+     blur; anything still using `backdrop-blur*` falls back to an opaque
+     surface here. */
+  @media (prefers-reduced-transparency: reduce) {
+    [class*='backdrop-blur'],
+    .glass-fallback {
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
+      background-color: var(--background) !important;
+    }
+  }
+
+  /* Global subtle scrollbars — thin, transparent track, low-contrast thumb
+     always visible, brightened on hover of the scroll container. Applies to every scrollable surface
      unless a component explicitly opts out. */
   * {
     scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
+    scrollbar-color: color-mix(in oklab, var(--color-border-strong) 45%, transparent) transparent;
   }
   *:hover {
-    scrollbar-color: color-mix(in oklab, var(--color-border-strong) 60%, transparent)
-      transparent;
+    scrollbar-color: var(--color-border-strong) transparent;
   }
   *::-webkit-scrollbar {
     width: 8px;
@@ -703,15 +778,13 @@
     background: transparent;
   }
   *::-webkit-scrollbar-thumb {
-    background-color: transparent;
+    background-color: color-mix(in oklab, var(--color-border-strong) 45%, transparent);
     border-radius: 9999px;
     border: 2px solid transparent;
     background-clip: padding-box;
     transition: background-color 0.15s ease;
   }
-  *:hover::-webkit-scrollbar-thumb {
-    background-color: color-mix(in oklab, var(--color-border-strong) 60%, transparent);
-  }
+  *:hover::-webkit-scrollbar-thumb,
   *::-webkit-scrollbar-thumb:hover {
     background-color: var(--color-border-strong);
   }
@@ -723,6 +796,16 @@
 /* -----------------------------------------------------------------------------
  *  Utilities — tiny refined-minimal helpers reused across components.
  * --------------------------------------------------------------------------- */
+@keyframes motion-keep-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+
 @keyframes progress-indeterminate {
   0% {
     transform: translateX(-100%) scaleX(0.6);
@@ -754,24 +837,4 @@
     border-width: 1px;
     border-style: solid;
   }
-
-  /* Truncate to 1, 2, 3 lines. */
-  .line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@craftzbay/ui",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Refined-minimal Tailwind v4 + React design system — 50+ accessible, themeable primitives.",
   "license": "MIT",
   "author": "craftzbay",
@@ -105,6 +105,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^4.1.6",
     "@vitest/ui": "^4.1.6",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.16.0",
@@ -129,11 +130,15 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1"
   },
   "peerDependenciesMeta": {
     "tailwindcss": {
       "optional": true
+    },
+    "tw-animate-css": {
+      "optional": true
     }
   },
   "scripts": {
@@ -143,9 +148,11 @@
     "format": "prettier --write .",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "changeset": "changeset",
     "changeset:version": "changeset version",
     "changeset:release": "pnpm build && changeset publish",
-    "lint": "eslint src"
+    "lint": "eslint src",
+    "test:treeshake": "vitest run src/__tests__/treeshake.test.ts"
   }
 }