@miozu/jera 0.6.1 → 0.6.3

package/llms.txt

@@ -64,7 +64,47 @@
 - [Tabs](/src/components/navigation/Tabs.svelte): Tab navigation
 - [Accordion](/src/components/navigation/Accordion.svelte): Collapsible sections
 - [Sidebar](/src/components/navigation/Sidebar.svelte): App sidebar
-- [LeftBar](/src/components/navigation/LeftBar.svelte): Admin-style collapsible sidebar
+
+#### LeftBar System (1:1 match with dash.selify.ai WorkspaceSidebar)
+- [LeftBar](/src/components/navigation/LeftBar.svelte): Collapsible sidebar container with context
+- [LeftBarSection](/src/components/navigation/LeftBarSection.svelte): Grouped navigation with optional title
+- [LeftBarItem](/src/components/navigation/LeftBarItem.svelte): Nav item with subroutes support
+- [LeftBarPopover](/src/components/navigation/LeftBarPopover.svelte): Hover popover for collapsed state
+
+## LeftBar API (v0.6.2+)
+
+```svelte
+<LeftBar bind:collapsed persistKey="my-sidebar">
+  {#snippet header()}
+    <DropdownContainer {themeState} />
+  {/snippet}
+  {#snippet navigation()}
+    <LeftBarSection title="Main">
+      <LeftBarItem href="/" icon={Home} label="Dashboard" active={true} />
+      <LeftBarItem
+        label="Services"
+        icon={Server}
+        expandable
+        bind:expanded={servicesOpen}
+        subroutes={[
+          { label: 'Overview', href: '/services' },
+          { label: 'Errors', href: '/errors' }
+        ]}
+      />
+    </LeftBarSection>
+  {/snippet}
+  {#snippet footer()}
+    <LeftBarToggle />
+  {/snippet}
+</LeftBar>
+```
+
+Context API (provided by LeftBar):
+- `collapsed`: boolean - Current collapsed state
+- `toggle()`: Toggle collapsed state
+- `showPopover(id, event)`: Show hover popover (collapsed mode)
+- `hidePopover()`: Hide popover with delay
+- `keepPopoverOpen()`: Cancel hide delay (on popover enter)
 
 ## Actions
 - [clickOutside](/src/actions/index.js): Detect clicks outside element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "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')} />
@@ -156,6 +156,7 @@
     align-items: center;
     gap: 0.5rem;
     font-size: 0.875rem;
+    line-height: 1.25rem;
     color: var(--color-base06);
     cursor: pointer;
     border-radius: 0.375rem;
@@ -216,7 +217,7 @@
   }
 
   .expand-icon {
-    color: var(--color-base04);
+    color: var(--color-base05);
     flex-shrink: 0;
     margin-left: auto;
     transition: all 200ms;
@@ -243,8 +244,9 @@
     display: block;
     padding: 0.25rem 0.5rem;
     font-size: 0.875rem;
-    color: var(--color-base04);
-    transition: color 150ms;
+    line-height: 1.25rem;
+    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
@@ -87,10 +87,12 @@
   .popover-header {
     padding: 0.5rem 1rem;
     font-size: 0.75rem;
+    line-height: 1rem;
     font-weight: 600;
     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);
   }
 
@@ -104,6 +106,7 @@
     display: block;
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
+    line-height: 1.25rem;
     color: var(--color-base06);
     transition: all 150ms;
     cursor: pointer;

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,12 @@
   }
 
   .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;
+    line-height: 1rem;
     font-weight: 600;
-    color: var(--color-base04);
+    color: var(--color-base05);
     text-align: left;
     text-transform: uppercase;
     letter-spacing: 0.05em;
@@ -53,6 +55,10 @@
     overflow: hidden;
   }
 
+  .section-divider {
+    margin: 0 0.75rem 0.5rem 0.75rem;
+  }
+
   .nav-list {
     display: flex;
     flex-direction: column;