spoko-design-system 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",

package/src/components/Category/CategoryDetails.astro

@@ -23,26 +23,30 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   transition:name="category-details"
   transition:animate="fade"
 >
-  <CategorySidebarToggler onclick="toggleSidebar()">
-    <!-- Desktop expanded -->
+<CategorySidebarToggler class="category-sidebar-toggler w-12 md:w-8" data-state="desktop">
+  <div class="desktop-icons hidden md:block">
+    <!-- Desktop icons container -->
     <Icon 
       name="ant-design:menu-fold-outlined" 
-      class="toggler-btn md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 expanded-icon" 
       aria-hidden="true"
     />
-    <!-- Desktop collapsed -->
     <Icon 
       name="ant-design:menu-unfold-outlined" 
-      class="toggler-btn hidden md:[&:not(.hidden)]:block" 
+      class="toggler-btn w-6 collapsed-icon hidden" 
       aria-hidden="true"
     />
-    <!-- Mobile icon -->
+  </div>
+  <!-- Mobile icon in separate container -->
+  <div class="mobile-icon block md:hidden">
     <Icon 
       name="ant-design:menu-outlined" 
-      class="toggler-btn block md:hidden" 
+      class="toggler-btn w-6" 
       aria-hidden="true"
     />
-  </CategorySidebarToggler>
+  </div>
+</CategorySidebarToggler>
+
 
   <div class="overflow-x-auto overflow-y-hidden flex max-w-full items-center">
     {subtitle ? (
@@ -99,11 +103,15 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   }
 
   function updateTogglers(isCollapsed) {
-    const togglers = document.querySelectorAll('.toggler-btn');
-    if (togglers.length >= 2) {
-      togglers[0].classList.toggle('hidden', isCollapsed);
-      togglers[1].classList.toggle('hidden', !isCollapsed);
-    }
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      const expandedIcon = toggler.querySelector('.expanded-icon');
+      const collapsedIcon = toggler.querySelector('.collapsed-icon');
+      
+      if (expandedIcon && collapsedIcon) {
+        expandedIcon.classList.toggle('hidden', isCollapsed);
+        collapsedIcon.classList.toggle('hidden', !isCollapsed);
+      }
+    });
   }
   
   function toggleSidebar() {
@@ -123,8 +131,18 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
     }
   }
 
-  // Initialize on astro page load
-  document.addEventListener('astro:page-load', initializeSidebar);
+  function setupTogglers() {
+    document.querySelectorAll('.category-sidebar-toggler').forEach(toggler => {
+      toggler.removeEventListener('click', toggleSidebar);
+      toggler.addEventListener('click', toggleSidebar);
+    });
+  }
+
+  // Initialize on page load
+  document.addEventListener('astro:page-load', () => {
+    initializeSidebar();
+    setupTogglers();
+  });
   
   // Preserve state during view transitions
   document.addEventListener('astro:before-swap', () => {
@@ -144,6 +162,7 @@ const baseURL = locale === 'en' ? '' : `/${locale}`;
   });
 </script>
 
+
 <style>
   .toggler-btn {
     @apply md:-mt-0.5;

package/src/components/Category/CategoryViewToggler.astro

@@ -25,7 +25,7 @@ const {
   <div class="flex border rounded">
     <button 
       data-view="list"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={listAriaLabel}
     >
       <Icon name="ant-design:bars-outlined" class="w-4 h-4" />
@@ -33,7 +33,7 @@ const {
     </button>
     <button 
       data-view="grid"
-      class="view-toggle flex items-center gap-1 px-3 py-1.5 transition-colors"
+      class="view-toggle flex items-center gap-1 px-3 py-0.5 transition-colors"
       aria-label={gridAriaLabel}
     >
       <Icon name="ant-design:appstore-outlined" class="w-4 h-4" />