@rhavenside/baseline-ui 1.0.20 → 1.0.22

package/dist/baseline.css

@@ -4871,8 +4871,32 @@ textarea {
   box-shadow: var(--glass-shadow-lg);
   transform: translateX(-100%);
   transition: transform var(--transition-duration-slow) var(--transition-ease-out);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden;
+}
+@media (max-width: 767.98px) {
+  .bl-sidebar {
+    width: min(85%, 320px);
+    max-width: 90vw;
+  }
+}
+.bl-sidebar::-webkit-scrollbar {
+  width: 6px;
+}
+.bl-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.bl-sidebar::-webkit-scrollbar-thumb {
+  background: var(--glass-bg-medium);
+  border-radius: 3px;
+  border: 1px solid var(--glass-border-light);
+}
+.bl-sidebar::-webkit-scrollbar-thumb:hover {
+  background: var(--glass-bg-heavy);
+  border-color: var(--glass-border-medium);
+}
+.bl-sidebar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--glass-bg-medium) transparent;
 }
 @media (min-width: 768px) {
   .bl-sidebar {
@@ -4882,6 +4906,7 @@ textarea {
     min-height: 100vh;
     box-shadow: none;
     border-right: 1px solid var(--glass-border-medium);
+    width: 280px;
   }
 }
 .bl-sidebar.bl-sidebar-open {
@@ -4892,11 +4917,19 @@ textarea {
     width: 64px;
   }
   .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-header h3,
-  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
+  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
+  .bl-sidebar.bl-sidebar-collapsed .bl-nav-group-header {
     opacity: 0;
     width: 0;
     overflow: hidden;
   }
+  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link {
+    justify-content: center;
+    padding: var(--spacing-sm);
+  }
+  .bl-sidebar.bl-sidebar-collapsed .bl-sidebar-nav .bl-nav-link .bl-icon {
+    margin: 0;
+  }
 }
 .bl-sidebar.bl-sidebar-right {
   left: auto;
@@ -4963,19 +4996,27 @@ textarea {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-light);
+  padding: var(--spacing-lg) var(--spacing-md);
+  border-bottom: 1px solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  flex-shrink: 0;
 }
 .bl-sidebar-header h3 {
   margin: 0;
-  font-size: var(--font-size-lg);
-  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-bold);
   color: var(--color-text);
+  line-height: var(--line-height-tight);
   transition: var(--transition-base);
 }
+.bl-sidebar-header .bl-sidebar-version {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  font-weight: var(--font-weight-normal);
+  margin-top: var(--spacing-xs);
+}
 
 .bl-sidebar-close {
   display: inline-flex;
@@ -5012,10 +5053,34 @@ textarea {
 
 .bl-sidebar-nav {
   flex: 1;
-  padding: var(--spacing-sm);
+  padding: var(--spacing-md);
   overflow-y: auto;
   overflow-x: hidden;
 }
+@media (max-width: 767.98px) {
+  .bl-sidebar-nav {
+    padding: var(--spacing-sm);
+  }
+}
+.bl-sidebar-nav::-webkit-scrollbar {
+  width: 6px;
+}
+.bl-sidebar-nav::-webkit-scrollbar-track {
+  background: transparent;
+}
+.bl-sidebar-nav::-webkit-scrollbar-thumb {
+  background: var(--glass-bg-medium);
+  border-radius: 3px;
+  border: 1px solid var(--glass-border-light);
+}
+.bl-sidebar-nav::-webkit-scrollbar-thumb:hover {
+  background: var(--glass-bg-heavy);
+  border-color: var(--glass-border-medium);
+}
+.bl-sidebar-nav {
+  scrollbar-width: thin;
+  scrollbar-color: var(--glass-bg-medium) transparent;
+}
 .bl-sidebar-nav .bl-nav {
   background: transparent;
   border: none;
@@ -5024,26 +5089,111 @@ textarea {
 .bl-sidebar-nav .bl-nav-link {
   display: flex;
   align-items: center;
-  gap: var(--spacing-sm);
+  gap: var(--spacing-md);
   padding: var(--spacing-sm) var(--spacing-md);
+  margin-bottom: var(--spacing-xs);
   border-radius: var(--tech-border-radius-sm);
   transition: var(--transition-base);
+  position: relative;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  color: var(--color-text);
+  text-decoration: none;
+  min-height: 40px;
+}
+@media (max-width: 767.98px) {
+  .bl-sidebar-nav .bl-nav-link {
+    padding: var(--spacing-md);
+    min-height: 44px;
+  }
 }
 .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
   transition: var(--transition-base);
+  flex: 1;
 }
 .bl-sidebar-nav .bl-nav-link .bl-icon {
   flex-shrink: 0;
-  width: 20px;
-  height: 20px;
+  width: 18px;
+  height: 18px;
+  color: var(--color-text-muted);
+  transition: var(--transition-base);
+}
+.bl-sidebar-nav .bl-nav-link:hover {
+  background: var(--glass-bg-light);
+  color: var(--color-text);
+  transform: translateX(2px);
+}
+.bl-sidebar-nav .bl-nav-link:hover .bl-icon {
+  color: var(--color-text);
+}
+.bl-sidebar-nav .bl-nav-link:active {
+  transform: translateX(1px);
+}
+.bl-sidebar-nav .bl-nav-link.bl-active {
+  background: var(--glass-bg-medium);
+  color: var(--color-text);
+  font-weight: var(--font-weight-medium);
+  padding-left: calc(var(--spacing-md) - 3px);
+  transform: translateX(0);
+}
+.bl-sidebar-nav .bl-nav-link.bl-active::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--color-accent);
+  border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
+}
+.bl-sidebar-nav .bl-nav-link.bl-active .bl-icon {
+  color: var(--color-accent);
+}
+.bl-sidebar-nav .bl-nav-link.bl-active:hover {
+  background: var(--glass-bg-heavy);
+  transform: translateX(0);
+}
+.bl-sidebar-nav .bl-nav-link:focus {
+  outline: 1px solid var(--color-border-focus);
+  outline-offset: -2px;
+}
+
+.bl-nav-group {
+  margin-bottom: var(--spacing-xl);
+}
+.bl-nav-group:last-child {
+  margin-bottom: 0;
+}
+.bl-nav-group:first-child {
+  margin-top: 0;
+}
+.bl-nav-group + .bl-nav-group {
+  padding-top: var(--spacing-md);
+  border-top: 1px solid var(--glass-border-light);
+  margin-top: var(--spacing-lg);
+}
+
+.bl-nav-group-header {
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  line-height: var(--line-height-tight);
+  opacity: 0.8;
 }
 
 .bl-sidebar-footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 1px solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  flex-shrink: 0;
+  margin-top: auto;
 }
 
 @media (max-width: 767.98px) {