softui-css 1.10.0 → 1.12.0

package/README.md

@@ -32,7 +32,7 @@
 
 | Feature | Description |
 |---|---|
-| **65+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, Pricing, and more |
+| **68+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, Pricing, 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 |

package/dist/softui.css

@@ -1,4 +1,4 @@
-/*! SoftUI v1.10.0 — A Neumorphic CSS Library */
+/*! SoftUI v1.12.0 — A Neumorphic CSS Library */
 
 /* ===========================================
    CSS Variables / Tokens
@@ -157,6 +157,7 @@ a:focus-visible {
   box-shadow: var(--sui-shadow-raised);
   cursor: pointer;
   transition: var(--sui-transition);
+  -webkit-user-select: none;
   user-select: none;
   white-space: nowrap;
   line-height: 1.4;
@@ -729,6 +730,7 @@ a.sui-btn-warning:visited {
   cursor: pointer;
   font-size: 14px;
   color: var(--sui-text);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -786,6 +788,7 @@ a.sui-btn-warning:visited {
   cursor: pointer;
   font-size: 14px;
   color: var(--sui-text);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -1122,20 +1125,20 @@ a.sui-btn-warning:visited {
 .sui-mb-2 { margin-bottom: 8px; }   .sui-mb-3 { margin-bottom: 16px; }
 .sui-mb-4 { margin-bottom: 24px; }  .sui-mb-5 { margin-bottom: 48px; }
 
-.sui-ml-0 { margin-left: 0; }     .sui-ml-1 { margin-left: 4px; }
-.sui-ml-2 { margin-left: 8px; }   .sui-ml-3 { margin-left: 16px; }
-.sui-ml-4 { margin-left: 24px; }  .sui-ml-5 { margin-left: 48px; }
+.sui-ml-0 { margin-inline-start: 0; }     .sui-ml-1 { margin-inline-start: 4px; }
+.sui-ml-2 { margin-inline-start: 8px; }   .sui-ml-3 { margin-inline-start: 16px; }
+.sui-ml-4 { margin-inline-start: 24px; }  .sui-ml-5 { margin-inline-start: 48px; }
 
-.sui-mr-0 { margin-right: 0; }     .sui-mr-1 { margin-right: 4px; }
-.sui-mr-2 { margin-right: 8px; }   .sui-mr-3 { margin-right: 16px; }
-.sui-mr-4 { margin-right: 24px; }  .sui-mr-5 { margin-right: 48px; }
+.sui-mr-0 { margin-inline-end: 0; }     .sui-mr-1 { margin-inline-end: 4px; }
+.sui-mr-2 { margin-inline-end: 8px; }   .sui-mr-3 { margin-inline-end: 16px; }
+.sui-mr-4 { margin-inline-end: 24px; }  .sui-mr-5 { margin-inline-end: 48px; }
 
 /* ===========================================
    Utility: Text
    =========================================== */
 .sui-text-center { text-align: center; }
-.sui-text-left   { text-align: left; }
-.sui-text-right  { text-align: right; }
+.sui-text-left   { text-align: start; }
+.sui-text-right  { text-align: end; }
 
 .sui-text-muted   { color: var(--sui-text-muted); }
 .sui-text-primary { color: var(--sui-primary); }
@@ -1566,6 +1569,7 @@ a.sui-btn-warning:visited {
   transition: var(--sui-transition);
   text-decoration: none;
   line-height: 1;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -1774,6 +1778,7 @@ a.sui-btn-warning:visited {
   border-radius: 8px;
   cursor: pointer;
   transition: var(--sui-transition);
+  -webkit-user-select: none;
   user-select: none;
   line-height: 1.4;
 }
@@ -2503,6 +2508,109 @@ a.sui-btn-warning:visited {
   background: var(--sui-danger);
 }
 
+/* ===========================================
+   Radio Card / Checkbox Card
+   =========================================== */
+.sui-radio-card,
+.sui-checkbox-card {
+  position: relative;
+  display: block;
+  cursor: pointer;
+}
+
+.sui-radio-card input,
+.sui-checkbox-card input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.sui-radio-card .sui-radio-card-content,
+.sui-checkbox-card .sui-checkbox-card-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px 20px;
+  background: var(--sui-bg);
+  border-radius: var(--sui-radius-sm);
+  box-shadow: var(--sui-shadow-raised-sm);
+  transition: box-shadow var(--sui-transition-fast), transform var(--sui-transition-fast);
+}
+
+.sui-radio-card:hover .sui-radio-card-content,
+.sui-checkbox-card:hover .sui-checkbox-card-content {
+  transform: translateY(-2px);
+  box-shadow: var(--sui-shadow-raised);
+}
+
+.sui-radio-card input:checked ~ .sui-radio-card-content,
+.sui-checkbox-card input:checked ~ .sui-checkbox-card-content {
+  box-shadow: 0 0 0 2px var(--sui-primary), var(--sui-shadow-raised-sm);
+}
+
+/* Check indicator */
+.sui-radio-card .sui-radio-card-content::before,
+.sui-checkbox-card .sui-checkbox-card-content::before {
+  content: '';
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  box-shadow: var(--sui-shadow-inset-sm);
+  background: var(--sui-bg);
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: background-color var(--sui-transition-fast), box-shadow var(--sui-transition-fast);
+  margin-top: 2px;
+}
+
+.sui-checkbox-card .sui-checkbox-card-content::before {
+  border-radius: var(--sui-radius-xs);
+}
+
+.sui-radio-card input:checked ~ .sui-radio-card-content::before {
+  background-color: var(--sui-primary);
+  box-shadow: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3' fill='%23fff'/%3E%3C/svg%3E");
+  background-size: 10px;
+}
+
+.sui-checkbox-card input:checked ~ .sui-checkbox-card-content::before {
+  background-color: var(--sui-primary);
+  box-shadow: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
+  background-size: 11px;
+}
+
+.sui-radio-card input:focus-visible ~ .sui-radio-card-content,
+.sui-checkbox-card input:focus-visible ~ .sui-checkbox-card-content {
+  outline: 2px solid var(--sui-primary);
+  outline-offset: 2px;
+}
+
+.sui-radio-card input:disabled ~ .sui-radio-card-content,
+.sui-checkbox-card input:disabled ~ .sui-checkbox-card-content {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+/* Card body text */
+.sui-radio-card-title,
+.sui-checkbox-card-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--sui-text);
+  margin-bottom: 2px;
+}
+
+.sui-radio-card-desc,
+.sui-checkbox-card-desc {
+  font-size: 13px;
+  color: var(--sui-text-muted);
+}
+
 /* ===========================================
    Badges — Positioned (notification dot)
    =========================================== */
@@ -2920,6 +3028,7 @@ select.sui-datatable-filter {
 /* Sortable headers */
 .sui-datatable .sui-table th[data-sort] {
   cursor: pointer;
+  -webkit-user-select: none;
   user-select: none;
   position: relative;
   padding-right: 28px;
@@ -3041,6 +3150,7 @@ select.sui-datatable-filter {
   border-radius: var(--sui-radius-xs);
   box-shadow: var(--sui-shadow-raised-sm);
   cursor: grab;
+  -webkit-user-select: none;
   user-select: none;
   font-size: 14px;
   color: var(--sui-text);
@@ -3144,6 +3254,7 @@ select.sui-datatable-filter {
   font-size: 13px;
   color: var(--sui-text);
   cursor: grab;
+  -webkit-user-select: none;
   user-select: none;
   transition: box-shadow var(--sui-transition-fast), opacity var(--sui-transition-fast);
 }
@@ -4180,6 +4291,7 @@ select.sui-datatable-filter {
   border-radius: var(--sui-radius);
   box-shadow: var(--sui-shadow-raised);
   width: 296px;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -4470,6 +4582,7 @@ select.sui-datatable-filter {
   background: var(--sui-bg);
   border-radius: var(--sui-radius);
   box-shadow: var(--sui-shadow-raised);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -5225,6 +5338,7 @@ select.sui-datatable-filter {
   justify-content: center;
   background: var(--sui-bg-dark);
   transition: background var(--sui-transition-fast);
+  -webkit-user-select: none;
   user-select: none;
   touch-action: none;
 }
@@ -5745,17 +5859,17 @@ select.sui-datatable-filter {
 /* ===========================================
    Layout — Offsets
    =========================================== */
-.sui-offset-1  { margin-left: 8.333333%; }
-.sui-offset-2  { margin-left: 16.666667%; }
-.sui-offset-3  { margin-left: 25%; }
-.sui-offset-4  { margin-left: 33.333333%; }
-.sui-offset-5  { margin-left: 41.666667%; }
-.sui-offset-6  { margin-left: 50%; }
-.sui-offset-7  { margin-left: 58.333333%; }
-.sui-offset-8  { margin-left: 66.666667%; }
-.sui-offset-9  { margin-left: 75%; }
-.sui-offset-10 { margin-left: 83.333333%; }
-.sui-offset-11 { margin-left: 91.666667%; }
+.sui-offset-1  { margin-inline-start: 8.333333%; }
+.sui-offset-2  { margin-inline-start: 16.666667%; }
+.sui-offset-3  { margin-inline-start: 25%; }
+.sui-offset-4  { margin-inline-start: 33.333333%; }
+.sui-offset-5  { margin-inline-start: 41.666667%; }
+.sui-offset-6  { margin-inline-start: 50%; }
+.sui-offset-7  { margin-inline-start: 58.333333%; }
+.sui-offset-8  { margin-inline-start: 66.666667%; }
+.sui-offset-9  { margin-inline-start: 75%; }
+.sui-offset-10 { margin-inline-start: 83.333333%; }
+.sui-offset-11 { margin-inline-start: 91.666667%; }
 
 /* ===========================================
    Flex Utilities
@@ -5901,8 +6015,8 @@ select.sui-datatable-filter {
 .sui-select-all  { user-select: all !important; }
 
 /* Auto margins */
-.sui-ms-auto { margin-left: auto !important; }
-.sui-me-auto { margin-right: auto !important; }
+.sui-ms-auto { margin-inline-start: auto !important; }
+.sui-me-auto { margin-inline-end: auto !important; }
 .sui-mx-auto { margin-left: auto !important; margin-right: auto !important; }
 
 /* ===========================================
@@ -6250,6 +6364,7 @@ select.sui-datatable-filter {
   box-shadow: var(--sui-shadow-raised-sm), inset 0 -2px 0 rgba(0,0,0,0.08);
   line-height: 1;
   white-space: nowrap;
+  -webkit-user-select: none;
   user-select: none;
   vertical-align: baseline;
 }
@@ -6304,6 +6419,7 @@ select.sui-datatable-filter {
   font-size: 11px;
   color: var(--sui-text-muted);
   font-weight: 500;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -6312,7 +6428,6 @@ select.sui-datatable-filter {
    =========================================== */
 .sui-scroll-area {
   overflow: auto;
-  overflow: overlay;
   scrollbar-width: thin;
   scrollbar-color: var(--sui-bg-dark) transparent;
 }
@@ -6988,6 +7103,39 @@ select.sui-datatable-filter {
 .sui-sheet-backdrop.sui-sheet-static.sui-sheet-shake .sui-sheet-top   { transform: translateY(8px); }
 .sui-sheet-backdrop.sui-sheet-static.sui-sheet-shake .sui-sheet-bottom { transform: translateY(-8px); }
 
+/* Drawer (bottom sheet with drag handle) */
+.sui-drawer .sui-sheet-bottom {
+  height: auto;
+  max-height: 85vh;
+  transition: transform var(--sui-transition-base) ease;
+}
+
+.sui-drawer-handle {
+  display: flex;
+  justify-content: center;
+  padding: 10px 0 6px;
+  cursor: grab;
+}
+
+.sui-drawer-handle::after {
+  content: '';
+  width: 36px;
+  height: 4px;
+  border-radius: var(--sui-radius-full);
+  background: var(--sui-bg-dark);
+}
+
+.sui-drawer-handle:active { cursor: grabbing; }
+
+/* Drawer snap points */
+.sui-drawer .sui-sheet-bottom.sui-drawer-snap-half {
+  height: 50vh;
+}
+
+.sui-drawer .sui-sheet-bottom.sui-drawer-snap-full {
+  height: 85vh;
+}
+
 /* ==============================
    Popover
    ============================== */
@@ -7600,6 +7748,7 @@ select.sui-datatable-filter {
   border-radius: var(--sui-radius-sm);
   box-shadow: var(--sui-shadow-inset);
   transition: var(--sui-transition);
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -7755,6 +7904,7 @@ select.sui-datatable-filter {
   cursor: pointer;
   transition: var(--sui-transition);
   white-space: nowrap;
+  -webkit-user-select: none;
   user-select: none;
   line-height: 1.4;
 }
@@ -8079,6 +8229,7 @@ select.sui-datatable-filter {
   text-align: right;
   min-width: 28px;
   padding-bottom: 28px;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -11001,6 +11152,7 @@ select.sui-datatable-filter {
   color: var(--sui-text);
   font-weight: 500;
   transition: background 0.15s ease;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -11733,6 +11885,7 @@ select.sui-datatable-filter {
   border-radius: var(--sui-radius);
   box-shadow: var(--sui-shadow-raised-sm);
   cursor: ew-resize;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -13015,6 +13168,80 @@ select.sui-datatable-filter {
 }
 
 
+/* ===========================================
+   RTL (Right-to-Left) Support
+   =========================================== */
+
+/* Navbar brand spacing */
+[dir="rtl"] .sui-navbar-brand { margin-right: auto; margin-left: 0; }
+
+/* Sheet slide direction */
+[dir="rtl"] .sui-sheet-right { right: auto; left: 0; transform: translateX(-100%); }
+[dir="rtl"] .sui-sheet-backdrop.sui-sheet-open .sui-sheet-right { transform: translateX(0); }
+[dir="rtl"] .sui-sheet-left { left: auto; right: 0; transform: translateX(100%); }
+[dir="rtl"] .sui-sheet-backdrop.sui-sheet-open .sui-sheet-left { transform: translateX(0); }
+
+/* Carousel controls */
+[dir="rtl"] .sui-carousel-prev { left: auto; right: 0; }
+[dir="rtl"] .sui-carousel-next { right: auto; left: 0; }
+
+/* Lightbox controls */
+[dir="rtl"] .sui-lightbox-prev { left: auto; right: 16px; }
+[dir="rtl"] .sui-lightbox-next { right: auto; left: 16px; }
+
+/* Breadcrumb separator */
+[dir="rtl"] .sui-breadcrumb-item + .sui-breadcrumb-item { padding-left: 0; padding-right: 24px; }
+[dir="rtl"] .sui-breadcrumb-item + .sui-breadcrumb-item::before { padding-right: 0; padding-left: 12px; }
+
+/* Dropdown toggle arrow */
+[dir="rtl"] .sui-dropdown-toggle::after { margin-left: 0; margin-right: 6px; }
+
+/* Sidebar */
+[dir="rtl"] .sui-sidebar-bordered { border-right: none; border-left: 1px solid var(--sui-bg-dark); }
+
+/* Speed dial corners */
+[dir="rtl"] .sui-speed-dial-br { right: auto; left: 24px; }
+[dir="rtl"] .sui-speed-dial-bl { left: auto; right: 24px; }
+[dir="rtl"] .sui-speed-dial-tr { right: auto; left: 24px; }
+[dir="rtl"] .sui-speed-dial-tl { left: auto; right: 24px; }
+
+/* Avatar status dot */
+[dir="rtl"] .sui-avatar-status::after { right: auto; left: 1px; }
+
+/* Select arrow */
+[dir="rtl"] .sui-select { background-position: left 16px center; padding-right: 16px; padding-left: 40px; }
+[dir="rtl"] .sui-styled-select-trigger { flex-direction: row-reverse; }
+
+/* Accordion chevron */
+[dir="rtl"] .sui-accordion-header::after { margin-left: 0; margin-right: auto; }
+
+/* Stepper connector */
+[dir="rtl"] .sui-step-connector { transform: scaleX(-1); }
+
+/* Timeline */
+[dir="rtl"] .sui-timeline-separator { margin-right: 0; margin-left: 16px; }
+
+/* ===========================================
+   Mask (clip-path shapes)
+   =========================================== */
+.sui-mask {
+  -webkit-clip-path: var(--sui-mask);
+  clip-path: var(--sui-mask);
+}
+
+.sui-mask-circle    { --sui-mask: circle(50%); }
+.sui-mask-squircle  { --sui-mask: polygon(50% 0%, 66% 0%, 78% 1%, 87% 4%, 93% 8%, 97% 14%, 99% 22%, 100% 34%, 100% 50%, 100% 66%, 99% 78%, 97% 86%, 93% 92%, 87% 96%, 78% 99%, 66% 100%, 50% 100%, 34% 100%, 22% 99%, 13% 96%, 7% 92%, 3% 86%, 1% 78%, 0% 66%, 0% 50%, 0% 34%, 1% 22%, 3% 14%, 7% 8%, 13% 4%, 22% 1%, 34% 0%); }
+.sui-mask-heart     { --sui-mask: polygon(50% 15%, 43% 6%, 35% 1%, 25% 0%, 15% 3%, 7% 10%, 2% 20%, 0% 32%, 2% 44%, 8% 55%, 16% 65%, 26% 76%, 37% 86%, 50% 100%, 63% 86%, 74% 76%, 84% 65%, 92% 55%, 98% 44%, 100% 32%, 98% 20%, 93% 10%, 85% 3%, 75% 0%, 65% 1%, 57% 6%); }
+.sui-mask-star      { --sui-mask: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
+.sui-mask-diamond   { --sui-mask: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
+.sui-mask-hexagon   { --sui-mask: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
+.sui-mask-triangle  { --sui-mask: polygon(50% 0%, 100% 100%, 0% 100%); }
+.sui-mask-pentagon  { --sui-mask: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); }
+.sui-mask-octagon   { --sui-mask: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%); }
+.sui-mask-cross     { --sui-mask: polygon(33% 0%, 67% 0%, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0% 67%, 0% 33%, 33% 33%); }
+.sui-mask-shield    { --sui-mask: polygon(50% 0%, 100% 12%, 100% 65%, 50% 100%, 0% 65%, 0% 12%); }
+.sui-mask-parallelogram { --sui-mask: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%); }
+
 /* ===========================================
    Reduced Motion
    =========================================== */
@@ -13027,4 +13254,46 @@ select.sui-datatable-filter {
   }
 }
 
+/* ===========================================
+   Print Styles
+   =========================================== */
+@media print {
+  body {
+    background: #fff !important;
+    color: #000 !important;
+  }
+
+  .sui-navbar, .sui-sidebar, .sui-dock, .sui-speed-dial,
+  .sui-modal-backdrop, .sui-sheet-backdrop, .sui-toast-container,
+  .sui-tour-overlay, .sui-tour-tooltip, .sui-command-dialog,
+  .sui-tooltip, .sui-popover-content, .sui-dropdown-menu,
+  .sui-context-menu {
+    display: none !important;
+  }
+
+  *, *::before, *::after {
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  .sui-card, .sui-stat, .sui-alert, .sui-table {
+    border: 1px solid #ddd !important;
+    break-inside: avoid;
+  }
+
+  .sui-btn {
+    border: 1px solid #999 !important;
+  }
+
+  a[href]::after {
+    content: " (" attr(href) ")";
+    font-size: 0.85em;
+    color: #666;
+  }
+
+  a.sui-btn::after, a.sui-navbar-link::after, a.sui-page-link::after {
+    content: none;
+  }
+}
+