@limpiolux/ui-styles 1.1.3 → 1.1.5

package/components.css

@@ -709,9 +709,18 @@
     opacity: 0;
     transform: translateX(-2px);
     transition:
-      max-width 220ms ease,
-      opacity 180ms ease,
-      transform 220ms ease;
+      max-width 300ms ease,
+      opacity 240ms ease,
+      transform 300ms ease;
+  }
+
+  @media (min-width: 768px) {
+    .soft-tab-text {
+      transition:
+        max-width 220ms ease,
+        opacity 180ms ease,
+        transform 220ms ease;
+    }
   }
 
   .soft-tab-active .soft-tab-text {
@@ -865,6 +874,31 @@
     border-color: rgba(255, 255, 255, 0.14);
   }
 
+  .compact-choice-track {
+    @apply inline-flex items-center gap-1 rounded-2xl border p-1;
+    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.04);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(18px) saturate(1.4);
+    -webkit-backdrop-filter: blur(18px) saturate(1.4);
+  }
+
+  .compact-choice-button {
+    @apply inline-flex min-w-[42px] items-center justify-center rounded-xl px-2.5 py-1.5 text-[11px] font-semibold transition-colors;
+    color: #a1a1aa;
+  }
+
+  .compact-choice-button:hover {
+    color: #f4f4f5;
+    background: rgba(39, 39, 42, 0.72);
+  }
+
+  .compact-choice-button-active {
+    color: #d7f1fb;
+    background: rgba(var(--color-brand) / 0.16);
+    box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.24);
+  }
+
   .portal-card {
     @apply relative overflow-hidden p-5 transition-[opacity,transform] duration-300;
   }
@@ -1060,6 +1094,33 @@
     -webkit-backdrop-filter: blur(40px) saturate(1.8);
   }
 
+  .mobile-sheet-handle {
+    @apply mx-auto h-1.5 w-12 rounded-full;
+    background: rgba(113, 113, 122, 0.85);
+  }
+
+  .mobile-top-sheet {
+    border-bottom-left-radius: 28px;
+    border-bottom-right-radius: 28px;
+    box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.48);
+  }
+
+  .mobile-bottom-sheet {
+    border-top-left-radius: 28px;
+    border-top-right-radius: 28px;
+    box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.46);
+  }
+
+  @media (max-width: 767px) {
+    .mobile-top-sheet {
+      max-height: calc(100dvh - 0.75rem);
+    }
+
+    .mobile-bottom-sheet {
+      max-height: min(82dvh, 44rem);
+    }
+  }
+
   /* ── KPI cards ── */
 
   .kpi-card {

package/light.css

@@ -382,6 +382,27 @@
   border-color: rgba(161, 161, 170, 0.36);
 }
 
+.light .compact-choice-track {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.12);
+}
+
+.light .compact-choice-button {
+  color: #52525b;
+}
+
+.light .compact-choice-button:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+
+.light .compact-choice-button-active {
+  color: #083344;
+  background: rgba(var(--color-brand) / 0.1);
+  box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.18);
+}
+
 .light .portal-widget-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
@@ -705,6 +726,10 @@
   box-shadow: 0 28px 50px -30px rgba(15, 23, 42, 0.22);
 }
 
+.light .mobile-sheet-handle {
+  background: rgba(161, 161, 170, 0.92);
+}
+
 .light .kpi-card {
   border-color: rgba(0, 0, 0, 0.08);
   background: linear-gradient(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@limpiolux/ui-styles",
-  "version": "1.1.3",
-  "description": "Shared design system \u2014 Limpiolux liquid glass theme with auth, portal and dark/light mode support",
+  "version": "1.1.5",
+  "description": "Shared design system \u2026 Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {
     ".": "./index.css",