softui-css 1.7.0 → 1.8.1

package/README.md

@@ -30,12 +30,13 @@
 
 ## Highlights
 
-| | |
+| Feature | Description |
 |---|---|
-| **44+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
+| **60+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
 | **Dark Mode** | Add `data-theme="dark"` and everything adapts |
 | **Zero Dependencies** | Pure CSS + vanilla JS. No build step required |
 | **CSS Variables** | Fully customizable via custom properties |
+| **Design Tokens** | `tokens.json` for syncing with Tailwind, Figma, or any tool |
 | **Responsive Grid** | 12-column flexbox grid with breakpoints and gap utilities |
 | **Interactive Playground** | Write HTML and preview components live in the browser |
 
@@ -93,23 +94,23 @@ That's it. Every component adapts automatically.
 
 ## Components
 
-**Layout** — Container, Grid, Flex utilities
+**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox, Color Picker, File Upload, Tags Input, Number Input, Password Input
 
-**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox
+**General** — Buttons, Button Group, Card, Badge, Avatar, Chip, Divider, Kbd, Copy Button, Swap
 
-**Data Display** — Table, Data Table, Card, Badge, Avatar, Kbd, Chart
+**Data Display** — Table, Data Table, Chart, Stat Card, Timeline, Chat Bubble, Calendar, Tree View, Radial Progress, Rating
 
-**Feedback** — Alert, Toast, Progress, Skeleton, Spinner
+**Feedback** — Alert, Toast, Progress, Skeleton, Spinner, Loading Overlay
 
-**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
+**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar, Sidebar, Dock, Speed Dial, Tour
 
-**Overlay** — Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette
+**Overlays** — Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette, Image Lightbox
 
-**Interactive** — Accordion, Collapsible, Carousel, Toggle Group, Calendar, Drag & Drop
+**Layout** — Container, Grid, Flex utilities, Resizable, Scroll Area, Collapsible, Accordion, Carousel, Toggle Group, Drag & Drop
 
-**Content** — Chip, Divider, Scroll Area, Resizable, Button Group
+**Media** — Diff, Stack, Browser Mockup, Phone Mockup, Marquee, Typewriter, Text Rotate
 
-**Utilities** — Shadows, Radius, Spacing, Text, Aspect Ratio, Typography
+**Utilities** — Shadows, Radius, Spacing, Text, Typography, Aspect Ratio, Display, Position, Sizing, Opacity, Cursor, Flex
 
 > Browse all components at [softui-css.netlify.app](https://softui-css.netlify.app) or try them in the [Playground](https://softui-css.netlify.app/playground/).
 
@@ -127,6 +128,18 @@ SoftUI is built on CSS custom properties. Override them to make it yours:
 }
 ```
 
+### Design Tokens
+
+All design values are also available as JSON for use with Tailwind, Figma, or any tool:
+
+```js
+import tokens from 'softui-css/dist/tokens.json';
+// tokens.colors.primary → "#5B54E0"
+// tokens.radius.default → "16px"
+```
+
+See the [Theming Guide](https://softui-css.netlify.app/theming/) for the full variable reference.
+
 ---
 
 ## Browser Support

package/dist/softui.css

@@ -1,4 +1,4 @@
-/*! SoftUI v1.1.0 — A Neumorphic CSS Library */
+/*! SoftUI v1.8.0 — A Neumorphic CSS Library */
 
 /* ===========================================
    CSS Variables / Tokens
@@ -23,8 +23,8 @@
   --sui-info-hover: #146BAE;
 
   --sui-text: #2D3748;
-  --sui-text-muted: #8492A6;
-  --sui-text-light: #A0AEC0;
+  --sui-text-muted: #5A6A7E;
+  --sui-text-light: #6A7D94;
 
   --sui-radius-xs: 6px;
   --sui-radius: 16px;
@@ -59,7 +59,7 @@
 
   --sui-text: #E2E8F0;
   --sui-text-muted: #9BA5B8;
-  --sui-text-light: #7A8494;
+  --sui-text-light: #8A94A6;
 }
 [data-theme="dark"] .sui-badge-warning,
 [data-theme="dark"] .sui-btn-warning,
@@ -85,6 +85,7 @@ body {
   color: var(--sui-text);
   font-size: 15px;
   line-height: 1.6;
+  opacity: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background var(--sui-transition-base) ease, color var(--sui-transition-base) ease;
@@ -131,6 +132,11 @@ a {
 a:hover {
   color: var(--sui-primary-hover);
 }
+a:focus-visible {
+  outline: 2px solid var(--sui-primary);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
 
 /* ===========================================
    Buttons
@@ -4827,7 +4833,7 @@ a.sui-btn-warning:visited {
   color: var(--sui-text-light);
 }
 
-.sui-combobox-input:focus {
+.sui-combobox-input:focus-visible {
   box-shadow: var(--sui-shadow-inset-sm), 0 0 0 2px rgba(124, 92, 252, 0.2);
 }
 
@@ -8298,6 +8304,12 @@ a.sui-btn-warning:visited {
   color: var(--sui-text);
 }
 
+.sui-sidebar-nav li a:focus-visible,
+.sui-sidebar-nav li button:focus-visible {
+  outline: 2px solid var(--sui-primary);
+  outline-offset: -2px;
+}
+
 .sui-sidebar-nav li a.active,
 .sui-sidebar-nav li button.active {
   background: rgba(91, 84, 224, 0.1);
@@ -9835,7 +9847,7 @@ a.sui-btn-warning:visited {
   width: 100%;
 }
 
-.sui-color-spectrum-hex input:focus {
+.sui-color-spectrum-hex input:focus-visible {
   box-shadow: var(--sui-shadow-inset-sm), 0 0 0 2px var(--sui-primary);
 }
 
@@ -9867,7 +9879,7 @@ a.sui-btn-warning:visited {
   outline: none;
 }
 
-.sui-color-spectrum-rgb-field input:focus {
+.sui-color-spectrum-rgb-field input:focus-visible {
   box-shadow: var(--sui-shadow-inset-sm), 0 0 0 2px var(--sui-primary);
 }
 
@@ -12599,3 +12611,16 @@ a.sui-btn-warning:visited {
   box-shadow: var(--sui-shadow-raised);
 }
 
+/* ===========================================
+   Reduced Motion
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+

package/dist/softui.js

@@ -576,6 +576,7 @@ const SoftUI = (() => {
     el.className = cls;
     el.setAttribute('role', 'alert');
     el.setAttribute('aria-live', 'polite');
+    el.setAttribute('aria-atomic', 'true');
 
     let html = '<div class="sui-toast-body">';
     if (opts.title) html += '<div class="sui-toast-title">' + opts.title + '</div>';
@@ -675,15 +676,30 @@ const SoftUI = (() => {
       });
     });
 
-    // Escape closes dropdowns
+    // Escape closes dropdowns, arrow keys navigate items
     document.addEventListener('keydown', (e) => {
       if (e.key === 'Escape') {
         document.querySelectorAll('.sui-dropdown.open, .sui-dropdown-split.open').forEach(d => {
           d.classList.remove('open');
           const t = d.querySelector('[data-sui-dropdown], .sui-dropdown-toggle');
-          if (t) t.setAttribute('aria-expanded', 'false');
+          if (t) { t.setAttribute('aria-expanded', 'false'); t.focus(); }
         });
       }
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        const openDD = document.querySelector('.sui-dropdown.open, .sui-dropdown-split.open');
+        if (!openDD) return;
+        const items = Array.from(openDD.querySelectorAll('.sui-dropdown-item:not(.disabled)'));
+        if (!items.length) return;
+        e.preventDefault();
+        const cur = items.indexOf(document.activeElement);
+        let next;
+        if (e.key === 'ArrowDown') {
+          next = cur < items.length - 1 ? cur + 1 : 0;
+        } else {
+          next = cur > 0 ? cur - 1 : items.length - 1;
+        }
+        items[next].focus();
+      }
     });
   }