@miozu/jera 0.3.0 → 0.4.3

package/src/components/forms/Select.svelte

@@ -2,15 +2,6 @@
   @component Select
 
   An accessible dropdown select component with keyboard navigation.
-  Demonstrates advanced Svelte 5 patterns:
-
-  - $state for local UI state
-  - $derived for computed values
-  - $effect for side effects with cleanup
-  - $bindable for two-way value binding
-  - Actions for click-outside behavior
-  - Keyboard navigation (ArrowUp/Down, Enter, Escape)
-  - ARIA attributes for accessibility
 
   @example
   <Select
@@ -21,24 +12,12 @@
     bind:value={selected}
     placeholder="Select an option"
   />
-
-  // With custom keys
-  <Select
-    options={users}
-    bind:value={selectedUserId}
-    labelKey="name"
-    valueKey="id"
-  />
 -->
 <script>
-  import { cn, cv } from '../../utils/cn.svelte.js';
+  import { cn } from '../../utils/cn.svelte.js';
   import { clickOutside } from '../../actions/index.js';
   import { generateId } from '../../utils/reactive.svelte.js';
 
-  /**
-   * @typedef {{ [key: string]: any }} Option
-   */
-
   let {
     options = [],
     value = $bindable(null),
@@ -51,52 +30,38 @@
     onchange
   } = $props();
 
-  // Generate unique IDs for accessibility
   const triggerId = generateId();
   const listboxId = generateId();
 
-  // Local state
   let isOpen = $state(false);
   let highlightedIndex = $state(-1);
   let triggerRef = $state(null);
   let listRef = $state(null);
 
-  // Derived values
   const selectedOption = $derived(
     options.find(opt => opt[valueKey] === value) ?? null
   );
-
   const selectedLabel = $derived(
     selectedOption ? selectedOption[labelKey] : placeholder
   );
-
   const hasValue = $derived(value !== null && value !== undefined);
 
-  // Keyboard navigation effect
   $effect(() => {
     if (!isOpen) {
       highlightedIndex = -1;
       return;
     }
-
-    // Focus the listbox when opened
     listRef?.focus();
-
-    // Set initial highlight to selected option
     const selectedIdx = options.findIndex(opt => opt[valueKey] === value);
     highlightedIndex = selectedIdx >= 0 ? selectedIdx : 0;
   });
 
-  // Scroll highlighted option into view
   $effect(() => {
     if (!isOpen || highlightedIndex < 0) return;
-
-    const listbox = listRef;
-    const highlighted = listbox?.querySelector(`[data-index="${highlightedIndex}"]`);
+    const highlighted = listRef?.querySelector(`[data-index="${highlightedIndex}"]`);
     highlighted?.scrollIntoView({ block: 'nearest' });
   });
 
-  // Handlers
   function toggle() {
     if (disabled) return;
     isOpen = !isOpen;
@@ -119,98 +84,46 @@
     switch (event.key) {
       case 'ArrowDown':
         event.preventDefault();
-        if (!isOpen) {
-          isOpen = true;
-        } else {
-          highlightedIndex = Math.min(highlightedIndex + 1, options.length - 1);
-        }
+        if (!isOpen) isOpen = true;
+        else highlightedIndex = Math.min(highlightedIndex + 1, options.length - 1);
         break;
-
       case 'ArrowUp':
         event.preventDefault();
-        if (!isOpen) {
-          isOpen = true;
-        } else {
-          highlightedIndex = Math.max(highlightedIndex - 1, 0);
-        }
+        if (!isOpen) isOpen = true;
+        else highlightedIndex = Math.max(highlightedIndex - 1, 0);
         break;
-
       case 'Enter':
       case ' ':
         event.preventDefault();
-        if (isOpen && highlightedIndex >= 0) {
-          select(options[highlightedIndex]);
-        } else {
-          toggle();
-        }
+        if (isOpen && highlightedIndex >= 0) select(options[highlightedIndex]);
+        else toggle();
         break;
-
       case 'Escape':
         event.preventDefault();
         close();
         triggerRef?.focus();
         break;
-
       case 'Home':
         event.preventDefault();
         highlightedIndex = 0;
         break;
-
       case 'End':
         event.preventDefault();
         highlightedIndex = options.length - 1;
         break;
-
       case 'Tab':
         close();
         break;
     }
   }
-
-  // Styles
-  const triggerStyles = cv({
-    base: [
-      'relative w-full flex items-center justify-between gap-2',
-      'h-10 px-3 rounded-lg border',
-      'text-sm text-left',
-      'transition-colors duration-150',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
-      'disabled:opacity-50 disabled:cursor-not-allowed'
-    ].join(' '),
-
-    variants: {
-      error: {
-        true: 'border-error focus-visible:ring-error/50',
-        false: 'border-border hover:border-muted focus-visible:ring-primary/50'
-      },
-      open: {
-        true: 'border-primary ring-2 ring-primary/20',
-        false: ''
-      },
-      hasValue: {
-        true: 'text-text-strong',
-        false: 'text-muted'
-      }
-    },
-
-    defaults: {
-      error: false,
-      open: false,
-      hasValue: false
-    }
-  });
 </script>
 
-<div
-  class={cn('relative', className)}
-  use:clickOutside={close}
->
-  <!-- Trigger Button -->
+<div class={cn('select-wrapper', className)} use:clickOutside={close}>
   <button
     bind:this={triggerRef}
     id={triggerId}
     type="button"
-    class={triggerStyles({ error, open: isOpen, hasValue })}
+    class={cn('select-trigger', isOpen && 'select-open', error && 'select-error', hasValue && 'has-value')}
     {disabled}
     aria-haspopup="listbox"
     aria-expanded={isOpen}
@@ -219,28 +132,12 @@
     onclick={toggle}
     onkeydown={handleKeydown}
   >
-    <span class="truncate flex-1">
-      {selectedLabel}
-    </span>
-
-    <!-- Chevron Icon -->
-    <svg
-      class={cn(
-        'w-4 h-4 shrink-0 text-muted transition-transform duration-200',
-        isOpen && 'rotate-180'
-      )}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    >
+    <span class="select-value">{selectedLabel}</span>
+    <svg class={cn('select-chevron', isOpen && 'rotated')} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
       <path d="m6 9 6 6 6-6" />
     </svg>
   </button>
 
-  <!-- Dropdown Listbox -->
   {#if isOpen}
     <div
       bind:this={listRef}
@@ -248,60 +145,31 @@
       role="listbox"
       tabindex="-1"
       aria-labelledby={triggerId}
-      aria-activedescendant={highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : undefined}
-      class={cn(
-        'absolute z-50 w-full mt-1',
-        'max-h-60 overflow-auto',
-        'bg-surface border border-border rounded-lg shadow-lg',
-        'py-1',
-        'animate-in fade-in slide-in-from-top-2 duration-150'
-      )}
+      class="select-dropdown"
       onkeydown={handleKeydown}
     >
       {#if options.length === 0}
-        <div class="px-3 py-2 text-sm text-muted text-center">
-          No options available
-        </div>
+        <div class="select-empty">No options available</div>
       {:else}
         {#each options as option, index (option[valueKey])}
           {@const isSelected = option[valueKey] === value}
           {@const isHighlighted = index === highlightedIndex}
-
           <button
             id="{listboxId}-option-{index}"
             type="button"
             role="option"
             data-index={index}
             aria-selected={isSelected}
-            class={cn(
-              'w-full flex items-center gap-2 px-3 py-2',
-              'text-sm text-left',
-              'transition-colors duration-75',
-              'focus:outline-none',
-              isHighlighted && 'bg-hover',
-              isSelected && 'text-primary font-medium',
-              !isSelected && 'text-text'
-            )}
+            class={cn('select-option', isHighlighted && 'highlighted', isSelected && 'selected')}
             onclick={() => select(option)}
             onmouseenter={() => highlightedIndex = index}
           >
-            <!-- Check Icon for Selected -->
-            <span class={cn('w-4 h-4 shrink-0', !isSelected && 'invisible')}>
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
+            <span class={cn('select-check', !isSelected && 'invisible')}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                 <path d="M20 6 9 17l-5-5" />
               </svg>
             </span>
-
-            <span class="truncate flex-1">
-              {option[labelKey]}
-            </span>
+            <span class="select-option-label">{option[labelKey]}</span>
           </button>
         {/each}
       {/if}
@@ -310,17 +178,147 @@
 </div>
 
 <style>
-  @keyframes fade-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
+  .select-wrapper {
+    position: relative;
   }
 
-  @keyframes slide-in-from-top-2 {
-    from { transform: translateY(-0.5rem); }
-    to { transform: translateY(0); }
+  .select-trigger {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    height: 2.5rem;
+    padding: 0 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-base03);
+    background-color: var(--color-base00);
+    color: var(--color-base04);
+    font-size: 0.875rem;
+    text-align: left;
+    cursor: pointer;
+    transition: border-color 150ms, box-shadow 150ms;
   }
 
-  .animate-in {
-    animation: fade-in 150ms ease-out, slide-in-from-top-2 150ms ease-out;
+  .select-trigger:hover:not(:disabled) {
+    border-color: var(--color-base04);
+  }
+
+  .select-trigger:focus-visible {
+    outline: none;
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .select-trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .select-trigger.has-value {
+    color: var(--color-base07);
+  }
+
+  .select-trigger.select-open {
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
+  }
+
+  .select-trigger.select-error {
+    border-color: var(--color-base08);
+  }
+
+  .select-value {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .select-chevron {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: var(--color-base04);
+    transition: transform 200ms;
+  }
+
+  .select-chevron.rotated {
+    transform: rotate(180deg);
+  }
+
+  .select-dropdown {
+    position: absolute;
+    z-index: 50;
+    width: 100%;
+    margin-top: 0.25rem;
+    max-height: 15rem;
+    overflow: auto;
+    background-color: var(--color-base01);
+    border: 1px solid var(--color-base03);
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+    padding: 0.25rem 0;
+    animation: dropdown-in 150ms ease-out;
+  }
+
+  .select-empty {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--color-base04);
+    text-align: center;
+  }
+
+  .select-option {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    text-align: left;
+    color: var(--color-base05);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color 75ms;
+  }
+
+  .select-option.highlighted {
+    background-color: var(--color-base02);
+  }
+
+  .select-option.selected {
+    color: var(--color-base0D);
+    font-weight: 500;
+  }
+
+  .select-check {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .select-check.invisible {
+    visibility: hidden;
+  }
+
+  .select-option-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  @keyframes dropdown-in {
+    from {
+      opacity: 0;
+      transform: translateY(-0.5rem);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 </style>

package/src/components/forms/Switch.svelte

@@ -91,16 +91,16 @@
     align-items: center;
     flex-shrink: 0;
     border-radius: var(--radius-full);
-    background-color: var(--color-border);
+    background-color: var(--color-base03);
     transition: var(--transition-colors);
   }
 
   .switch-track-checked {
-    background-color: var(--color-primary);
+    background-color: var(--color-base0D);
   }
 
   .switch-input:focus-visible + .switch-track {
-    outline: 2px solid var(--color-primary);
+    outline: 2px solid var(--color-base0D);
     outline-offset: 2px;
   }
 
@@ -115,7 +115,7 @@
 
   .switch-label {
     font-size: var(--text-sm);
-    color: var(--color-text);
+    color: var(--color-base05);
   }
 
   /* Size variants - Small */

package/src/components/forms/Textarea.svelte

@@ -81,9 +81,9 @@
     padding: var(--space-2) var(--space-3);
     font-size: var(--text-sm);
     line-height: 1.5;
-    color: var(--color-text-strong);
-    background-color: var(--color-bg);
-    border: 1px solid var(--color-border-muted);
+    color: var(--color-base07);
+    background-color: var(--color-base00);
+    border: 1px solid var(--color-base02);
     border-radius: var(--radius-lg);
     transition: var(--transition-colors);
     resize: vertical;
@@ -91,13 +91,13 @@
   }
 
   .textarea-base::placeholder {
-    color: var(--color-text-muted);
+    color: var(--color-base04);
   }
 
   .textarea-base:focus {
     outline: none;
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
+    border-color: var(--color-base0D);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base0D) 20%, transparent);
   }
 
   .textarea-base:disabled {
@@ -112,11 +112,11 @@
   }
 
   .textarea-error {
-    border-color: var(--color-error);
+    border-color: var(--color-base08);
   }
 
   .textarea-error:focus {
-    border-color: var(--color-error);
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 20%, transparent);
+    border-color: var(--color-base08);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-base08) 20%, transparent);
   }
 </style>

package/src/components/navigation/Accordion.svelte

@@ -58,7 +58,7 @@
   .accordion {
     display: flex;
     flex-direction: column;
-    border: 1px solid var(--color-border);
+    border: 1px solid var(--color-base03);
     border-radius: 0.5rem;
     overflow: hidden;
   }

package/src/components/navigation/AccordionItem.svelte

@@ -84,7 +84,7 @@
 
 <style>
   .accordion-item {
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: 1px solid var(--color-base03);
   }
 
   .accordion-item:last-child {
@@ -105,18 +105,18 @@
     border: none;
     font-size: 0.9375rem;
     font-weight: 500;
-    color: var(--color-text-strong);
+    color: var(--color-base07);
     cursor: pointer;
     text-align: left;
     transition: background 0.15s ease;
   }
 
   .accordion-trigger:hover:not([aria-disabled="true"]) {
-    background: var(--color-surface);
+    background: var(--color-base01);
   }
 
   .accordion-trigger-open {
-    background: var(--color-surface);
+    background: var(--color-base01);
   }
 
   .accordion-title {
@@ -125,7 +125,7 @@
 
   .accordion-icon {
     flex-shrink: 0;
-    color: var(--color-text);
+    color: var(--color-base05);
     transition: transform 0.2s ease;
   }
 
@@ -140,7 +140,7 @@
   .accordion-body {
     padding: 0 1rem 1rem 1rem;
     font-size: 0.875rem;
-    color: var(--color-text);
+    color: var(--color-base05);
     line-height: 1.6;
   }
 </style>