@spaethtech/svelte-ui 0.1.10 → 0.3.0

package/dist/components/{Select/Select.svelte → Select.svelte}

@@ -1,9 +1,12 @@
 <script lang="ts">
-  import { slide } from 'svelte/transition';
-  import type { Snippet } from 'svelte';
-  import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-  import Input from '../Input/Input.svelte';
-  import List from '../List/List.svelte';
+  import type { Snippet } from "svelte";
+  import ChevronDown from "~icons/mdi/chevron-down";
+  import Input from "./Input.svelte";
+  import List from "./List.svelte";
+  import Popup from "./Popup.svelte";
+  import type { Size } from "../types/sizes.js";
+  import type { Responsive } from "../types/responsive.js";
+  import type { Variant } from "../types/variants.js";
 
   type Option = Record<string, any> & {
     value: string;
@@ -37,6 +40,8 @@
     onLoadEnd,
     onSelection,
     disabled = false,
+    size = "md",
+    name,
     ...restProps
   }: {
     options?: Option[];
@@ -65,9 +70,17 @@
     onLoadEnd?: () => void;
     onSelection?: (option: Option) => void;
     disabled?: boolean;
+    /** Shared size axis — forwarded to the underlying Input trigger. */
+    size?: Responsive<Size>;
+    /** Shared variant/borderless axes — forwarded to the underlying Input trigger. */
+    variant?: Variant;
+    borderless?: boolean;
+    /** When set, render a hidden <input name> carrying the value so the Select submits in a form. */
+    name?: string;
   } & Record<string, any> = $props();
 
   let isOpen = $state(false);
+  let containerElement = $state<HTMLElement>();
   let inputElement = $state<HTMLInputElement>();
   let listElement = $state<any>();
 
@@ -76,27 +89,23 @@
     if (multiSelect && Array.isArray(value)) {
       if (value.length === 0) return "";
       if (value.length === 1) {
-        const selectedOption = options.find(option => option.value === value[0]);
+        const selectedOption = options.find((option) => option.value === value[0]);
         return selectedOption?.label || "";
       }
       return `${value.length} items selected`;
     } else {
-      const selectedOption = options.find(option => option.value === value);
+      const selectedOption = options.find((option) => option.value === value);
       return selectedOption?.label || "";
     }
   });
 
-  // Global dropdown manager - only one dropdown open at a time
-  let dropdownId = Math.random().toString(36).substring(2, 9);
-  let zIndex = $state(50);
-
   function toggleDropdown(event?: MouseEvent | KeyboardEvent) {
     event?.stopPropagation();
     event?.preventDefault(); // Prevent text selection
     if (disabled) return;
-    
+
     isOpen = !isOpen;
-    
+
     if (isOpen) {
       // Set focus to the selected item in the list
       setTimeout(() => {
@@ -122,17 +131,17 @@
     if (!multiSelect) {
       isOpen = false;
     }
-    
+
     if (onSelection) {
       onSelection(option);
     }
-    
+
     if (!multiSelect && autoAdvance) {
       // Move to next focusable element (only in single-select mode)
       setTimeout(() => {
         if (inputElement) {
           const focusableElements = document.querySelectorAll(
-            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
           );
           const currentIndex = Array.from(focusableElements).indexOf(inputElement);
           const nextElement = focusableElements[currentIndex + 1] as HTMLElement;
@@ -146,10 +155,10 @@
   }
 
   function handleKeydown(event: KeyboardEvent) {
-    if (event.key === 'Escape') {
+    if (event.key === "Escape") {
       isOpen = false;
       inputElement?.focus();
-    } else if (event.key === 'Enter') {
+    } else if (event.key === "Enter") {
       if (isOpen) {
         // Close dropdown and allow Enter to propagate for form submission
         isOpen = false;
@@ -159,10 +168,10 @@
         event.preventDefault();
         toggleDropdown(event);
       }
-    } else if (event.key === ' ') {
+    } else if (event.key === " ") {
       event.preventDefault();
       toggleDropdown(event);
-    } else if (event.key === 'ArrowDown' && !isOpen) {
+    } else if (event.key === "ArrowDown" && !isOpen) {
       event.preventDefault();
       isOpen = true;
     }
@@ -178,50 +187,21 @@
             listElement.focus();
           }
         }, 50);
-      }
+      },
     };
   });
-
-  // Close dropdown when clicking outside or when another dropdown opens
-  $effect(() => {
-    if (isOpen) {
-      // Increment z-index for newly opened dropdown
-      zIndex = 50 + Date.now() % 1000;
-      
-      // Set this as the active dropdown
-      document.dispatchEvent(new CustomEvent('dropdown-opened', { detail: { id: dropdownId } }));
-      
-      const handleClickOutside = (event: MouseEvent) => {
-        const target = event.target as Element;
-        if (!target.closest('.select-container')) {
-          isOpen = false;
-        }
-      };
-
-      const handleOtherDropdownOpen = (event: CustomEvent) => {
-        if (event.detail.id !== dropdownId) {
-          isOpen = false;
-        }
-      };
-
-      document.addEventListener('click', handleClickOutside);
-      document.addEventListener('dropdown-opened', handleOtherDropdownOpen as EventListener);
-      
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-        document.removeEventListener('dropdown-opened', handleOtherDropdownOpen as EventListener);
-      };
-    }
-  });
 </script>
 
-<div class="relative select-container {className}">
+<div bind:this={containerElement} class="relative select-container {className}">
+  <!-- Hidden field so the Select participates in native/remote forms (submits the value, not the label). -->
+  {#if name}
+    <input type="hidden" {name} value={Array.isArray(value) ? value.join(",") : (value ?? "")} />
+  {/if}
   <Input
     bind:element={inputElement}
     value={selectedLabel()}
     {placeholder}
     readonly={true}
-    icon={faChevronDown}
     iconPosition="right"
     iconClickable={true}
     onIconClick={toggleDropdown}
@@ -229,16 +209,20 @@
     ondblclick={handleInputDoubleClick}
     onkeydown={handleKeydown}
     {disabled}
+    {size}
     class={inputClass}
     inputClass={disabled ? "!cursor-default select-none" : "!cursor-pointer select-none"}
     {...restProps}
-  />
-
-  <!-- Always render List to maintain cache, show/hide with CSS -->
-  <div 
-    class="absolute w-full {isOpen ? '' : 'opacity-0 pointer-events-none'}"
-    style="z-index: {isOpen ? zIndex : -1}; top: calc(100% + 0.25rem);"
   >
+    {#snippet icon()}<ChevronDown />{/snippet}
+  </Input>
+
+  <!--
+    Dropdown lives on the browser top layer (Popover API) via Popup, positioned by the shared
+    `anchored` engine — so it flips up/down against the viewport, is never clipped, and reserves
+    no layout space. Popup keeps the List mounted (hidden) while closed, preserving its cache.
+  -->
+  <Popup anchor={containerElement} bind:open={isOpen} matchWidth offset={4}>
     <List
       bind:this={listElement}
       {options}
@@ -246,6 +230,7 @@
       {multiSelect}
       {maxVisibleItems}
       {itemHeight}
+      {size}
       {itemSnippet}
       onSelection={handleSelection}
       class={dropdownClass}
@@ -261,18 +246,5 @@
       {onLoadStart}
       {onLoadEnd}
     />
-  </div>
-
-  <!-- Transition effect overlay -->
-  {#if isOpen}
-    <div 
-      class="absolute w-full pointer-events-none"
-      style="z-index: {zIndex + 1}; top: calc(100% + 0.25rem);"
-      transition:slide={{ duration: 200 }}
-    >
-      <div style="height: {maxVisibleItems * itemHeight}px; opacity: 0;">
-        <!-- Invisible placeholder for slide transition -->
-      </div>
-    </div>
-  {/if}
-</div>
+  </Popup>
+</div>

package/dist/components/{Select/Select.svelte.d.ts → Select.svelte.d.ts}

@@ -1,4 +1,7 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
+import type { Size } from "../types/sizes.js";
+import type { Responsive } from "../types/responsive.js";
+import type { Variant } from "../types/variants.js";
 type Option = Record<string, any> & {
     value: string;
     label: string;
@@ -29,6 +32,13 @@ type $$ComponentProps = {
     onLoadEnd?: () => void;
     onSelection?: (option: Option) => void;
     disabled?: boolean;
+    /** Shared size axis — forwarded to the underlying Input trigger. */
+    size?: Responsive<Size>;
+    /** Shared variant/borderless axes — forwarded to the underlying Input trigger. */
+    variant?: Variant;
+    borderless?: boolean;
+    /** When set, render a hidden <input name> carrying the value so the Select submits in a form. */
+    name?: string;
 } & Record<string, any>;
 declare const Select: import("svelte").Component<$$ComponentProps, {}, "value" | "searchTerm" | "methods">;
 type Select = ReturnType<typeof Select>;