@miozu/jera 0.8.4 → 0.8.6

package/CLAUDE.md

@@ -34,7 +34,7 @@ Uses Base16 naming: `base00`-`base0F` (hex digits).
 
 ## Component API Quick Reference
 
-**Button:** `variant` (primary|secondary|ghost|outline|danger|success), `size` (xs-xl), `disabled`, `loading`, `href`
+**Button:** `variant` (primary|secondary|ghost|outline|danger|success|warning|info), `size` (xs|sm|md|lg), `disabled`, `loading`, `href`, `fullWidth`
 
 **Input:** `bind:value`, `type`, `placeholder`, `disabled`, `required`
 

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@miozu/jera",
-  "version": "0.8.4",
+  "version": "0.8.6",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
+  "sideEffects": false,
   "scripts": {
     "prepublishOnly": "echo 'Publishing @miozu/jera...' && test -f src/index.js"
   },
@@ -12,6 +13,42 @@
       "svelte": "./src/index.js",
       "default": "./src/index.js"
     },
+    "./components/primitives/*": {
+      "svelte": "./src/components/primitives/*.svelte",
+      "default": "./src/components/primitives/*.svelte"
+    },
+    "./components/forms/*": {
+      "svelte": "./src/components/forms/*.svelte",
+      "default": "./src/components/forms/*.svelte"
+    },
+    "./components/feedback/*": {
+      "svelte": "./src/components/feedback/*.svelte",
+      "default": "./src/components/feedback/*.svelte"
+    },
+    "./components/feedback/Toast": {
+      "svelte": "./src/components/feedback/Toast.svelte",
+      "default": "./src/components/feedback/Toast.svelte"
+    },
+    "./components/overlays/*": {
+      "svelte": "./src/components/overlays/*.svelte",
+      "default": "./src/components/overlays/*.svelte"
+    },
+    "./components/navigation/*": {
+      "svelte": "./src/components/navigation/*.svelte",
+      "default": "./src/components/navigation/*.svelte"
+    },
+    "./components/navigation/blocks/*": {
+      "svelte": "./src/components/navigation/blocks/*.svelte",
+      "default": "./src/components/navigation/blocks/*.svelte"
+    },
+    "./components/layout/*": {
+      "svelte": "./src/components/layout/*.svelte",
+      "default": "./src/components/layout/*.svelte"
+    },
+    "./components/docs/*": {
+      "svelte": "./src/components/docs/*.svelte",
+      "default": "./src/components/docs/*.svelte"
+    },
     "./tokens": "./src/tokens/index.css",
     "./tokens/colors": "./src/tokens/colors.css",
     "./tokens/spacing": "./src/tokens/spacing.css",

package/src/components/navigation/Accordion.svelte

@@ -41,7 +41,7 @@
   });
 </script>
 
-<div class="jera-accordion {className}" role="region">
+<div class="jera-accordion {className}">
   {@render children?.()}
 </div>
 

package/src/components/navigation/AccordionItem.svelte

@@ -17,6 +17,12 @@
     Content here
   </AccordionItem>
 
+  @example Custom indicator icon
+  <AccordionItem title="Details">
+    {#snippet indicator(open)}<Plus size={14} class={open ? 'rotate-45' : ''} />{/snippet}
+    Content here
+  </AccordionItem>
+
   @example With leading/trailing snippets
   <AccordionItem title="Infrastructure">
     {#snippet leading()}<Activity size={14} />{/snippet}
@@ -37,8 +43,10 @@
     badge = null,
     leading,
     trailing,
+    indicator,
     children,
-    class: className = ''
+    class: className = '',
+    ...rest
   } = $props();
 
   const accordion = getContext('accordion');
@@ -63,14 +71,15 @@
   class="accordion-item {className}"
   class:accordion-item-solo={!inGroup}
   class:accordion-item-disabled={disabled}
+  {...rest}
 >
   <button
     type="button"
+    id="trigger-{itemId}"
     class="accordion-trigger"
     class:accordion-trigger-open={isOpen}
     aria-expanded={isOpen}
     aria-controls="content-{itemId}"
-    aria-disabled={disabled || undefined}
     {disabled}
     onclick={handleClick}
   >
@@ -80,20 +89,24 @@
       <span class="accordion-badge">{badge}</span>
     {/if}
     {#if trailing}{@render trailing()}{/if}
-    <svg
-      class="accordion-chevron"
-      class:accordion-chevron-open={isOpen}
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
-      <polyline points="6 9 12 15 18 9"></polyline>
-    </svg>
+    <span class="accordion-indicator" class:accordion-indicator-open={isOpen}>
+      {#if indicator}
+        {@render indicator(isOpen)}
+      {:else}
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      {/if}
+    </span>
   </button>
 
   {#if isOpen}
@@ -184,23 +197,26 @@
     border-radius: 9999px;
   }
 
-  /* Chevron */
-  .accordion-chevron {
+  /* Indicator (chevron wrapper) */
+  .accordion-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     flex-shrink: 0;
     color: var(--color-base05);
     transition: transform 0.2s ease;
   }
 
-  .accordion-trigger:hover:not(:disabled) .accordion-chevron {
+  .accordion-trigger:hover:not(:disabled) .accordion-indicator {
     color: var(--color-base06);
     transform: scale(1.125);
   }
 
-  .accordion-chevron-open {
+  .accordion-indicator-open {
     transform: rotate(180deg);
   }
 
-  .accordion-trigger:hover:not(:disabled) .accordion-chevron-open {
+  .accordion-trigger:hover:not(:disabled) .accordion-indicator-open {
     transform: rotate(180deg) scale(1.125);
   }
 

package/src/components/navigation/LeftBar.svelte

@@ -29,10 +29,12 @@
   import { setContext, onMount } from 'svelte';
   import { slide, fade } from 'svelte/transition';
   import { cubicOut } from 'svelte/easing';
+  import LeftBarPopover from './LeftBarPopover.svelte';
 
   let {
     collapsed = $bindable(false),
     persistKey = null,
+    popoverMap = {},
     class: className = '',
     header,
     navigation,
@@ -144,6 +146,16 @@
   {/if}
 </div>
 
+<!-- Hover popover — rendered outside sidebar to avoid overflow:hidden + will-change clipping -->
+{#if isCollapsed && hoverPopover.item && popoverMap[hoverPopover.item]}
+  <LeftBarPopover
+    visible={true}
+    position={hoverPopover.position}
+    title={hoverPopover.item}
+    items={popoverMap[hoverPopover.item]}
+  />
+{/if}
+
 <style>
   .workspace-sidebar {
     display: flex;
@@ -166,6 +178,11 @@
   }
 
   .main-nav {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    flex: 1;
+    overflow-y: auto;
     padding-top: 0;
     padding-bottom: 0;
   }

package/src/components/primitives/Button.svelte

@@ -125,21 +125,21 @@
     transform: scale(0.98);
   }
 
-  /* Secondary - Gray background, secondary actions */
+  /* Secondary - Light tinted, mirrors primary pattern */
   .secondary {
-    background-color: color-mix(in srgb, var(--color-base02, #504945) 30%, transparent);
-    color: var(--color-base06, #ebdbb2);
-    border: 1px solid var(--color-base03, #665c54);
+    background-color: color-mix(in srgb, var(--color-base03, #665c54) 10%, transparent);
+    color: var(--color-base05, #d5c4a1);
+    border: 1px solid color-mix(in srgb, var(--color-base03, #665c54) 30%, transparent);
   }
 
   .secondary:hover:not(:disabled) {
-    background-color: color-mix(in srgb, var(--color-base03, #665c54) 40%, transparent);
-    border-color: var(--color-base03, #665c54);
+    background-color: color-mix(in srgb, var(--color-base03, #665c54) 20%, transparent);
+    border-color: color-mix(in srgb, var(--color-base03, #665c54) 50%, transparent);
   }
 
   .secondary:active:not(:disabled) {
-    background-color: color-mix(in srgb, var(--color-base03, #665c54) 50%, transparent);
-    border-color: var(--color-base04, #7c6f64);
+    background-color: color-mix(in srgb, var(--color-base03, #665c54) 30%, transparent);
+    border-color: color-mix(in srgb, var(--color-base04, #7c6f64) 60%, transparent);
     transform: scale(0.98);
   }
 
@@ -169,12 +169,12 @@
   }
 
   .ghost:hover:not(:disabled) {
-    background-color: color-mix(in srgb, var(--color-base02, #504945) 30%, transparent);
+    background-color: var(--color-base01, #3c3836);
     color: var(--color-base06, #ebdbb2);
   }
 
   .ghost:active:not(:disabled) {
-    background-color: color-mix(in srgb, var(--color-base02, #504945) 40%, transparent);
+    background-color: var(--color-base02, #504945);
     color: var(--color-base06, #ebdbb2);
     transform: scale(0.98);
   }
@@ -215,6 +215,42 @@
     transform: scale(0.98);
   }
 
+  /* Warning - Yellow/amber accent */
+  .warning {
+    background-color: color-mix(in srgb, var(--color-base0A, #fabd2f) 10%, transparent);
+    color: var(--color-base0A, #fabd2f);
+    border: 1px solid color-mix(in srgb, var(--color-base0A, #fabd2f) 40%, transparent);
+  }
+
+  .warning:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-base0A, #fabd2f) 20%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A, #fabd2f) 60%, transparent);
+  }
+
+  .warning:active:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-base0A, #fabd2f) 30%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0A, #fabd2f) 80%, transparent);
+    transform: scale(0.98);
+  }
+
+  /* Info - Cyan accent */
+  .info {
+    background-color: color-mix(in srgb, var(--color-base0C, #8ec07c) 10%, transparent);
+    color: var(--color-base0C, #8ec07c);
+    border: 1px solid color-mix(in srgb, var(--color-base0C, #8ec07c) 40%, transparent);
+  }
+
+  .info:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-base0C, #8ec07c) 20%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0C, #8ec07c) 60%, transparent);
+  }
+
+  .info:active:not(:disabled) {
+    background-color: color-mix(in srgb, var(--color-base0C, #8ec07c) 30%, transparent);
+    border-color: color-mix(in srgb, var(--color-base0C, #8ec07c) 80%, transparent);
+    transform: scale(0.98);
+  }
+
   /* ============================================
      SIZES - matches dash.selify.ai Button exactly
      ============================================ */