@miozu/jera 0.6.0 → 0.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.6.0",
+  "version": "0.6.2",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "scripts": {

package/src/components/feedback/ProgressBar.svelte

@@ -52,6 +52,7 @@
   <div
     class="progress progress-{size}"
     role="progressbar"
+    aria-label={label || 'Progress'}
     aria-valuenow={indeterminate ? undefined : value}
     aria-valuemin="0"
     aria-valuemax={max}

package/src/components/navigation/LeftBar.svelte

@@ -2,7 +2,7 @@
   @component LeftBar
 
   A collapsible left sidebar with navigation sections, expandable groups, and hover popovers.
-  Exact 1:1 match with admin.selify.ai AdminSidebar styles.
+  Exact 1:1 match with dash.selify.ai WorkspaceSidebar styles.
 
   @example Basic usage
   <LeftBar
@@ -149,6 +149,7 @@
     display: flex;
     flex-direction: column;
     background-color: var(--color-base00);
+    border-right: 1px solid color-mix(in srgb, var(--color-base03) 30%, transparent);
     height: 100vh;
     position: fixed;
     left: 0;

package/src/components/navigation/LeftBarItem.svelte

@@ -2,7 +2,7 @@
   @component LeftBarItem
 
   A navigation item within LeftBar.
-  Exact 1:1 match with admin.selify.ai AdminSidebar nav-item styles.
+  Exact 1:1 match with dash.selify.ai WorkspaceSidebar nav-item styles.
 
   @example Basic
   <LeftBarItem href="/dashboard" icon={Home} label="Dashboard" active={isActive('/dashboard')} />
@@ -216,7 +216,7 @@
   }
 
   .expand-icon {
-    color: var(--color-base04);
+    color: var(--color-base05);
     flex-shrink: 0;
     margin-left: auto;
     transition: all 200ms;
@@ -243,8 +243,8 @@
     display: block;
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
-    color: var(--color-base04);
-    transition: color 150ms;
+    color: var(--color-base05);
+    transition: all 150ms;
     width: 100%;
     text-align: left;
     cursor: pointer;

package/src/components/navigation/LeftBarPopover.svelte

@@ -2,7 +2,7 @@
   @component LeftBarPopover
 
   Hover popover for collapsed LeftBar showing subroutes.
-  Exact 1:1 match with admin.selify.ai AdminSidebar hover-popover styles.
+  Exact 1:1 match with dash.selify.ai WorkspaceSidebar hover-popover styles.
 
   @example
   <LeftBarPopover
@@ -91,6 +91,7 @@
     color: var(--color-base06);
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    border-bottom: 1px solid color-mix(in srgb, var(--color-base03) 20%, transparent);
     background-color: color-mix(in srgb, var(--color-base01) 50%, transparent);
   }
 

package/src/components/navigation/LeftBarSection.svelte

@@ -2,7 +2,7 @@
   @component LeftBarSection
 
   A section within LeftBar with optional title.
-  Exact 1:1 match with admin.selify.ai AdminSidebar section styles.
+  Exact 1:1 match with dash.selify.ai WorkspaceSidebar section styles.
 
   @example
   <LeftBarSection title="Administration">
@@ -27,6 +27,8 @@
 <div class="nav-section {className}">
   {#if title && !isCollapsed}
     <div class="section-header" transition:fade={{ duration: 150 }}>{title}</div>
+  {:else if title && isCollapsed}
+    <div class="section-divider"></div>
   {/if}
   <ul class="nav-list">
     {@render children?.()}
@@ -40,12 +42,11 @@
   }
 
   .section-header {
-    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
+    padding: 0.25rem 0.75rem;
     margin-bottom: 0.25rem;
-    margin-top: 0.75rem;
     font-size: 0.75rem;
     font-weight: 600;
-    color: var(--color-base04);
+    color: var(--color-base05);
     text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -53,6 +54,10 @@
     overflow: hidden;
   }
 
+  .section-divider {
+    margin: 0 0.75rem 0.5rem 0.75rem;
+  }
+
   .nav-list {
     display: flex;
     flex-direction: column;

package/src/components/overlays/Popover.svelte

@@ -157,15 +157,13 @@
   }
 </script>
 
-<!-- Only bind window for JS fallback -->
-{#if !supportsAnchor}
-  <svelte:window
-    bind:innerWidth={windowWidth}
-    bind:innerHeight={windowHeight}
-    onscroll={visible ? handleScroll : undefined}
-    onresize={visible ? handleScroll : undefined}
-  />
-{/if}
+<!-- Window bindings for JS fallback (always rendered, handlers conditional) -->
+<svelte:window
+  bind:innerWidth={windowWidth}
+  bind:innerHeight={windowHeight}
+  onscroll={!supportsAnchor && visible ? handleScroll : undefined}
+  onresize={!supportsAnchor && visible ? handleScroll : undefined}
+/>
 
 <div
   class="popover-wrapper {className}"