@getmicdrop/svelte-components 5.3.6 → 5.3.12

package/dist/primitives/Input/Input.svelte

@@ -2,11 +2,17 @@
   /**
    * Input Component - Flowbite Native
    * Migrated to Svelte 5 runes
+   *
+   * NOTE: This component does NOT perform any validation.
+   * All validation should be handled externally (e.g., via Zod schemas).
+   * Use the `errorText` prop to display validation errors.
+   * Use the `color` prop ('red' | 'base') to style the border.
    */
   import { slide } from "svelte/transition";
   import { cubicOut } from "svelte/easing";
   import { onDestroy } from "svelte";
   import { EyeOutline, EyeSlashOutline, CloseCircleOutline, ExclamationCircleOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   /** @type {{
     required?: boolean,
@@ -26,6 +32,7 @@
     size?: 'sm' | 'md' | 'lg',
     textareaSize?: string,
     errorText?: string,
+    color?: 'base' | 'red',
     helperText?: string,
     helperIcon?: string,
     hintText?: string,
@@ -34,7 +41,7 @@
     readonly?: boolean,
     controlled?: boolean,
     onButtonClick?: ((value: string) => void) | null,
-    value?: string,
+    value?: string | number | null,
     autocomplete?: string | null,
     autofocus?: boolean,
     showPasswordToggle?: boolean,
@@ -43,8 +50,6 @@
     statusType?: string,
     buttonDisabled?: boolean,
     inputmode?: string | null,
-    showErrors?: boolean,
-    disableBuiltInValidation?: boolean,
     instantSearch?: boolean,
     debounceMs?: number,
     minSearchChars?: number,
@@ -74,6 +79,7 @@
     size = "md",
     textareaSize = "",
     errorText = "",
+    color = "base",
     helperText = "",
     helperIcon = "",
     hintText = "",
@@ -91,8 +97,6 @@
     statusType = "",
     buttonDisabled = false,
     inputmode = null,
-    showErrors = false,
-    disableBuiltInValidation = false,
     instantSearch = false,
     debounceMs = 250,
     minSearchChars = 2,
@@ -136,10 +140,11 @@
     }
   }
 
-  let touched = $state(false);
-  let displayErrorText = $state("");
   let isPasswordVisible = $state(false);
 
+  // Error state derived from color prop or errorText
+  let hasError = $derived(color === 'red' || Boolean(errorText));
+
   let inputType = $derived(showPasswordToggle && isPasswordVisible ? "text" : type);
   let shouldAnimate = $derived(animateFocus && !disabled && !readonly);
 
@@ -157,16 +162,16 @@
 
   const handleInput = (event) => {
     inputValue = event.target.value;
-    let rawInput = inputValue;
 
+    // Format special input types
     if (type === "creditCardNumber") {
-      rawInput = inputValue.replace(/\D/g, "");
+      const rawInput = inputValue.replace(/\D/g, "");
       inputValue = formatCreditCardNumber(rawInput);
       event.target.value = inputValue;
     }
 
     if (type === "phoneNumber") {
-      rawInput = inputValue.replace(/\D/g, "");
+      const rawInput = inputValue.replace(/\D/g, "");
       inputValue = formatPhoneNumber(rawInput);
       event.target.value = inputValue;
     }
@@ -182,35 +187,6 @@
       sanitized = sanitized.replace(/[^A-Za-z0-9._]/g, "");
       inputValue = sanitized;
       event.target.value = inputValue;
-      rawInput = sanitized;
-    }
-
-    if (type === "email") {
-      if (!isValidEmail(inputValue)) {
-        displayErrorText = errorText;
-      } else {
-        displayErrorText = "";
-      }
-    }
-
-    if (type === "password") {
-      if (!isStrongPassword(inputValue)) {
-        displayErrorText = "Password must be at least 8 characters long and include uppercase, lowercase, a number, and a special character.";
-      } else {
-        displayErrorText = "";
-      }
-    }
-
-    if (minlength !== null && rawInput.length < minlength) {
-      displayErrorText = errorText;
-    } else {
-      displayErrorText = "";
-    }
-
-    if (!disableBuiltInValidation && required && !inputValue.trim()) {
-      displayErrorText = "This field is required.";
-    } else if (!disableBuiltInValidation) {
-      displayErrorText = "";
     }
 
     value = inputValue;
@@ -218,13 +194,15 @@
     // Call oninputchange callback if provided
     oninputchange?.(inputValue);
 
+    // Handle instant search
     if (instantSearch) {
+      const inputValueStr = inputValue ?? '';
       clearTimeout(debounceTimer);
-      if (inputValue.length === 0) {
+      if (inputValueStr.length === 0) {
         onsearch?.({ query: '' });
         return;
       }
-      if (inputValue.length >= minSearchChars) {
+      if (inputValueStr.length >= minSearchChars) {
         debounceTimer = setTimeout(() => {
           onsearch?.({ query: inputValue });
         }, debounceMs);
@@ -260,15 +238,6 @@
     clearTimeout(debounceTimer);
   });
 
-  const isStrongPassword = (password) => {
-    const minLength = 8;
-    const hasUpperCase = /[A-Z]/.test(password);
-    const hasLowerCase = /[a-z]/.test(password);
-    const hasNumber = /[0-9]/.test(password);
-    const hasSpecialChar = /[!@#$%^&*]/.test(password);
-    return password.length >= minLength && hasUpperCase && hasLowerCase && hasNumber && hasSpecialChar;
-  };
-
   const formatCreditCardNumber = (value) => {
     return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
   };
@@ -283,29 +252,13 @@
   };
 
   const handleBlur = () => {
-    touched = true;
     onblur?.();
-    if (disableBuiltInValidation) return;
-    if (required && !inputValue.trim()) {
-      displayErrorText = "This field is required.";
-    } else if (type === "email" && !isValidEmail(inputValue)) {
-      displayErrorText = errorText;
-    } else if (minlength !== null && inputValue.length < minlength) {
-      displayErrorText = errorText;
-    } else {
-      displayErrorText = "";
-    }
   };
 
   const handleFocus = () => {
     onfocus?.();
   };
 
-  const isValidEmail = (email) => {
-    const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return re.test(String(email).toLowerCase());
-  };
-
   const getContentFloatClass = () => {
     switch (contentFloat) {
       case "center": return "text-center";
@@ -328,23 +281,19 @@
       onButtonClick(inputValue);
     }
   };
-
-  $effect(() => {
-    displayErrorText = errorText || (touched && !disableBuiltInValidation && (errorText || (required && !inputValue.trim() ? "This field is required." : "")));
-  });
 </script>
 
 <div class="flex flex-col gap-2 {className}" {...restProps}>
   {#if label}
     <div class="flex justify-start items-center gap-1">
-      <label for={id} class="text-sm font-medium text-gray-900 dark:text-white leading-tight sm:leading-none">
+      <label for={id} class={`${typography.label} leading-tight sm:leading-none`}>
         {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
       </label>
       {#if statusText}
         <span class="text-sm font-medium {statusType === 'success' ? 'text-green-600' : statusType === 'error' ? 'text-red-500' : ''}">({statusText})</span>
       {/if}
       {#if optional}
-        <span class="text-sm text-gray-500 dark:text-gray-400">(optional)</span>
+        <span class={typography.smMuted}>(optional)</span>
       {/if}
     </div>
   {/if}
@@ -360,7 +309,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        class="w-full px-3 py-2 bg-gray-50 dark:bg-gray-700 border rounded-lg text-sm font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
+        class="{typography.sm} w-full px-3 py-2 bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 resize-y {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {getContentFloatClass()} {getTextareaSizeClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''}"
         required={false}
         {disabled}
         {readonly}
@@ -368,7 +317,7 @@
         aria-required={required}
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
-      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-700 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
+      <div class="flex items-center w-full bg-gray-50 dark:bg-gray-800 border rounded-lg transition-all outline-none focus-within:ring-4 focus-within:ring-blue-300 dark:focus-within:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus-within:border-blue-500'} {shouldAnimate ? 'focus-within:scale-[1.01]' : ''}">
         <input
           bind:this={inputElement}
           {id}
@@ -382,7 +331,7 @@
           onfocus={handleFocus}
           {maxlength}
           {minlength}
-          class="flex-1 w-full {sizeClass} bg-transparent border-none text-gray-900 dark:text-white font-medium text-sm placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
+          class="{typography.sm} flex-1 w-full {sizeClass} bg-transparent border-none font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
           required={false}
           {disabled}
           {readonly}
@@ -426,7 +375,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          class="w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg font-medium text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {displayErrorText ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="{typography.body} w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg font-medium placeholder-gray-500 dark:placeholder-gray-400 transition-all focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {icon || (showClearButton && inputValue) ? 'pr-10' : ''} {leftIcon ? 'pl-10' : ''} {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
           required={false}
           {disabled}
           {readonly}
@@ -450,7 +399,7 @@
             type="button"
             onclick={handleButtonClick}
             disabled={buttonDisabled}
-            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || displayErrorText ? 'mb-7' : ''}"
+            class="absolute inset-y-0 right-0 gap-1 flex items-center justify-center px-4 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 disabled:opacity-50 disabled:cursor-not-allowed {helperText || hintText || errorText ? 'mb-7' : ''}"
           >
             {#if buttonIcon}
               <img src={buttonIcon} alt="Button Icon" class="w-5 h-5" />
@@ -466,13 +415,13 @@
       </div>
     {/if}
 
-    {#if displayErrorText && (touched || showErrors)}
+    {#if errorText}
       <div transition:slide={{ duration: 300, easing: cubicOut }} class="flex items-start gap-1.5 mt-2" role="alert" aria-live="assertive">
         <ExclamationCircleOutline class="w-4 h-4 shrink-0 text-red-500 mt-0.5" />
-        <p class="text-sm text-red-500">{displayErrorText}</p>
+        <p class={typography.error}>{errorText}</p>
       </div>
     {:else if helperText || hintText}
-      <div class="mt-2 flex items-center text-xs text-gray-500 dark:text-gray-400 opacity-65">
+      <div class={`mt-2 flex items-center ${typography.xsMuted} opacity-65`}>
         {#if helperIcon || hintIcon}
           <img src={helperIcon || hintIcon} alt="Helper icon" class="w-4 h-4 mr-2" />
         {/if}
@@ -481,3 +430,15 @@
     {/if}
   </div>
 </div>
+
+<style>
+  /* Hide number input spinners globally */
+  :global(input[type="number"]::-webkit-outer-spin-button),
+  :global(input[type="number"]::-webkit-inner-spin-button) {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  :global(input[type="number"]) {
+    -moz-appearance: textfield;
+  }
+</style>

package/dist/primitives/Input/Input.svelte.d.ts

@@ -20,6 +20,7 @@ type Input = {
         size?: "sm" | "md" | "lg" | undefined;
         textareaSize?: string | undefined;
         errorText?: string | undefined;
+        color?: "red" | "base" | undefined;
         helperText?: string | undefined;
         helperIcon?: string | undefined;
         hintText?: string | undefined;
@@ -28,7 +29,7 @@ type Input = {
         readonly?: boolean | undefined;
         controlled?: boolean | undefined;
         onButtonClick?: ((value: string) => void) | null | undefined;
-        value?: string | undefined;
+        value?: string | number | null | undefined;
         autocomplete?: string | null | undefined;
         autofocus?: boolean | undefined;
         showPasswordToggle?: boolean | undefined;
@@ -37,8 +38,6 @@ type Input = {
         statusType?: string | undefined;
         buttonDisabled?: boolean | undefined;
         inputmode?: string | null | undefined;
-        showErrors?: boolean | undefined;
-        disableBuiltInValidation?: boolean | undefined;
         instantSearch?: boolean | undefined;
         debounceMs?: number | undefined;
         minSearchChars?: number | undefined;
@@ -71,6 +70,7 @@ declare const Input: import("svelte").Component<{
     size?: "sm" | "md" | "lg";
     textareaSize?: string;
     errorText?: string;
+    color?: "base" | "red";
     helperText?: string;
     helperIcon?: string;
     hintText?: string;
@@ -79,7 +79,7 @@ declare const Input: import("svelte").Component<{
     readonly?: boolean;
     controlled?: boolean;
     onButtonClick?: ((value: string) => void) | null;
-    value?: string;
+    value?: string | number | null;
     autocomplete?: string | null;
     autofocus?: boolean;
     showPasswordToggle?: boolean;
@@ -88,8 +88,6 @@ declare const Input: import("svelte").Component<{
     statusType?: string;
     buttonDisabled?: boolean;
     inputmode?: string | null;
-    showErrors?: boolean;
-    disableBuiltInValidation?: boolean;
     instantSearch?: boolean;
     debounceMs?: number;
     minSearchChars?: number;

package/dist/primitives/Input/Input.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkdA;;eA/Ce,OAAO;eACP,OAAO;eACP,OAAO;WACX,MAAM,GAAG,IAAI;iBACP,MAAM,GAAG,IAAI;iBACb,MAAM,GAAG,IAAI;gBACd,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;WAClB,MAAM;kBACC,MAAM;YACZ,MAAM;SACT,MAAM;WACJ,MAAM;gBACD,MAAM;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,MAAM;gBACT,MAAM;iBACL,MAAM;iBACN,MAAM;eACR,MAAM;eACN,MAAM;mBACF,MAAM;eACV,OAAO;iBACL,OAAO;oBACJ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;YACxC,MAAM;mBACC,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;iBACZ,OAAO;+BACO,OAAO;oBAClB,OAAO;iBACV,MAAM;qBACF,MAAM;sBACL,OAAO;eACd,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;cACpC,MAAM,IAAI;aACX,MAAM,IAAI;oBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,GAAG;gBAGkC"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiaA;;eA9Ce,OAAO;eACP,OAAO;eACP,OAAO;WACX,MAAM,GAAG,IAAI;iBACP,MAAM,GAAG,IAAI;iBACb,MAAM,GAAG,IAAI;gBACd,MAAM,GAAG,IAAI;gBACb,MAAM,GAAG,IAAI;WAClB,MAAM;kBACC,MAAM;YACZ,MAAM;SACT,MAAM;WACJ,MAAM;gBACD,MAAM;WACX,IAAI,GAAG,IAAI,GAAG,IAAI;mBACV,MAAM;gBACT,MAAM;YACV,MAAM,GAAG,KAAK;iBACT,MAAM;iBACN,MAAM;eACR,MAAM;eACN,MAAM;mBACF,MAAM;eACV,OAAO;iBACL,OAAO;oBACJ,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI;YACxC,MAAM,GAAG,MAAM,GAAG,IAAI;mBACf,MAAM,GAAG,IAAI;gBAChB,OAAO;yBACE,OAAO;mBACb,OAAO;iBACT,MAAM;iBACN,MAAM;qBACF,OAAO;gBACZ,MAAM,GAAG,IAAI;oBACT,OAAO;iBACV,MAAM;qBACF,MAAM;sBACL,OAAO;eACd,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI;cACpC,MAAM,IAAI;aACX,MAAM,IAAI;oBACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,GAAG;gBAGkC"}

package/dist/primitives/Input/Select.svelte

@@ -1,6 +1,8 @@
 <script>
-  import { onMount } from "svelte";
-  import { ChevronDownOutline, CheckOutline } from "../Icons";
+  import { onMount, tick } from "svelte";
+  import { ChevronDownOutline } from "../Icons";
+  import { portal as portalAction } from "../../utils/portal.js";
+  import { typography } from "../../tokens/typography";
 
   let {
     value = $bindable(""),
@@ -13,6 +15,7 @@
     name = "",
     id = "",
     size = "md",
+    portal = false,
     onchange,
     ...restProps
   } = $props();
@@ -21,6 +24,7 @@
   let triggerElement = $state(null);
   let dropdownElement = $state(null);
   let focusedIndex = $state(-1);
+  let dropdownPosition = $state({ top: 0, left: 0, width: 0 });
 
   const instanceId = Math.random().toString(36).substring(2, 9);
 
@@ -35,12 +39,26 @@
 
   let sizeClass = $derived(sizeClasses[size] || sizeClasses.md);
 
-  function toggle() {
+  function updateDropdownPosition() {
+    if (!triggerElement || !portal) return;
+    const rect = triggerElement.getBoundingClientRect();
+    dropdownPosition = {
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    };
+  }
+
+  async function toggle() {
     if (disabled) return;
     isOpen = !isOpen;
     if (isOpen) {
       focusedIndex = items.findIndex((item) => item.value === value);
       window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId } }));
+      if (portal) {
+        await tick();
+        updateDropdownPosition();
+      }
     }
   }
 
@@ -112,9 +130,20 @@
   onMount(() => {
     document.addEventListener("click", handleClickOutside, true);
     window.addEventListener("select-opened", handleOtherSelectOpened);
+
+    // Update position on scroll/resize when portal is enabled
+    if (portal) {
+      window.addEventListener("scroll", updateDropdownPosition, true);
+      window.addEventListener("resize", updateDropdownPosition);
+    }
+
     return () => {
       document.removeEventListener("click", handleClickOutside, true);
       window.removeEventListener("select-opened", handleOtherSelectOpened);
+      if (portal) {
+        window.removeEventListener("scroll", updateDropdownPosition, true);
+        window.removeEventListener("resize", updateDropdownPosition);
+      }
     };
   });
 </script>
@@ -122,7 +151,7 @@
 <div class="w-full flex flex-col gap-2" {...restProps}>
   {#if label}
     <div class="flex justify-start items-center gap-1">
-      <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white">
+      <label for={id || name} class={typography.label}>
         {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
       </label>
     </div>
@@ -134,7 +163,7 @@
       bind:this={triggerElement}
       {id}
       {name}
-      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-700 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-white'}"
+      class="flex items-center justify-between w-full {sizeClass} bg-gray-50 dark:bg-gray-800 border rounded-lg cursor-pointer transition-colors text-left focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 {error ? 'border-red-500 dark:border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {!selectedItem ? `${typography.textMuted}` : `${typography.body}`}"
       {disabled}
       aria-haspopup="listbox"
       aria-expanded={isOpen}
@@ -142,10 +171,10 @@
       onkeydown={handleKeydown}
     >
       <span class="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{displayText}</span>
-      <ChevronDownOutline class="w-4 h-4 shrink-0 text-gray-500 dark:text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+      <ChevronDownOutline class="w-4 h-4 shrink-0 {typography.iconMuted} transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </button>
 
-    {#if isOpen}
+    {#if isOpen && !portal}
       <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
       <ul
         bind:this={dropdownElement}
@@ -157,16 +186,13 @@
           <!-- svelte-ignore a11y_click_events_have_key_events -->
           <li
             id="{id || name}-option-{index}"
-            class="flex items-center justify-between px-4 py-2 cursor-pointer text-sm transition-colors {item.value === value ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'} {index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}"
+            class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
             role="option"
             aria-selected={item.value === value}
             onclick={() => selectItem(item)}
             onmouseenter={() => (focusedIndex = index)}
           >
-            <span class="flex-1">{item.name}</span>
-            {#if item.value === value}
-              <CheckOutline class="w-4 h-4 shrink-0 text-blue-600" />
-            {/if}
+            {item.name}
           </li>
         {/each}
       </ul>
@@ -174,6 +200,33 @@
   </div>
 
   {#if error}
-    <p class="text-sm text-red-500">{error}</p>
+    <p class={typography.error}>{error}</p>
   {/if}
 </div>
+
+{#if isOpen && portal}
+  <!-- Portal dropdown - truly moved to document.body to escape overflow containers and transforms -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+  <ul
+    bind:this={dropdownElement}
+    use:portalAction
+    class="fixed z-[9999] bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-y-auto py-1"
+    style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
+    role="listbox"
+    tabindex="-1"
+  >
+    {#each items as item, index}
+      <!-- svelte-ignore a11y_click_events_have_key_events -->
+      <li
+        id="{id || name}-option-{index}"
+        class={`px-4 py-2 cursor-pointer ${typography.sm} transition-colors ${item.value === value ? '' : `${typography.textMuted}`} ${index === focusedIndex ? 'bg-gray-100 dark:bg-gray-600' : 'hover:bg-gray-100 dark:hover:bg-gray-600'}`}
+        role="option"
+        aria-selected={item.value === value}
+        onclick={() => selectItem(item)}
+        onmouseenter={() => (focusedIndex = index)}
+      >
+        {item.name}
+      </li>
+    {/each}
+  </ul>
+{/if}

package/dist/primitives/Input/Select.svelte.d.ts

@@ -14,6 +14,7 @@ declare const Select: import("svelte").Component<{
     name?: string;
     id?: string;
     size?: string;
+    portal?: boolean;
     onchange: any;
 } & Record<string, any>, {}, "value">;
 type $$ComponentProps = {
@@ -27,6 +28,7 @@ type $$ComponentProps = {
     name?: string;
     id?: string;
     size?: string;
+    portal?: boolean;
     onchange: any;
 } & Record<string, any>;
 //# sourceMappingURL=Select.svelte.d.ts.map

package/dist/primitives/Input/Select.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AAqKA;YA3J6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;cAAY,GAAG;sCA2JrJ;wBA3JlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Select.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Select.svelte.js"],"names":[],"mappings":";;;;;AA8MA;YAhM6B,MAAM;YAAU,GAAG,EAAE;kBAAgB,MAAM;YAAU,MAAM;eAAa,OAAO;eAAa,OAAO;YAAU,MAAM;WAAS,MAAM;SAAO,MAAM;WAAS,MAAM;aAAW,OAAO;cAAY,GAAG;sCAgMvK;wBAhMlC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Input/Textarea.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { typography } from "../../tokens/typography";
+
   let {
     value = $bindable(""),
     placeholder = "",
@@ -43,7 +45,7 @@
 
 <div class="flex flex-col gap-2 w-full">
   {#if label}
-    <label for={id || name} class="text-sm font-medium text-gray-900 dark:text-white leading-tight">
+    <label for={id || name} class={`${typography.label} leading-tight`}>
       {label}{#if required}<span class="text-red-500 font-medium text-sm ml-0.5">*</span>{/if}
     </label>
   {/if}
@@ -57,7 +59,7 @@
     {readonly}
     {maxlength}
     {minlength}
-    class="w-full p-2.5 bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white text-sm leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
+    class="{typography.sm} w-full p-2.5 bg-gray-50 dark:bg-gray-800 leading-normal border rounded-lg resize-y transition-colors focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 placeholder-gray-500 dark:placeholder-gray-400 {error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} {disabled ? 'opacity-50 cursor-not-allowed' : ''} {className}"
     bind:value
     oninput={handleInput}
     onchange={handleChange}
@@ -72,6 +74,6 @@
   ></textarea>
 
   {#if error}
-    <p class="text-sm text-red-500">{error}</p>
+    <p class={typography.error}>{error}</p>
   {/if}
 </div>

package/dist/primitives/Input/Textarea.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;AA8DA;YA1D6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;eAAa,OAAO;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;YAAU,MAAM;gBAAc,GAAG;gBAAc,GAAG;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;YAAU,GAAG;aAAW,GAAG;eAAa,GAAG;aAAW,GAAG;gBAAc,GAAG;sCA0DlS;wBA1DpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Textarea.svelte.js"],"names":[],"mappings":";;;;;AAkEA;YA1D6B,MAAM;kBAAgB,MAAM;WAAS,MAAM;eAAa,OAAO;eAAa,OAAO;eAAa,OAAO;SAAO,MAAM;WAAS,MAAM;YAAU,MAAM;YAAU,MAAM;gBAAc,GAAG;gBAAc,GAAG;YAAU,MAAM;aAAW,GAAG;cAAY,GAAG;YAAU,GAAG;aAAW,GAAG;eAAa,GAAG;aAAW,GAAG;gBAAc,GAAG;sCA0DlS;wBA1DpC;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,SAAS,CAAC,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAC;IAAC,MAAM,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,SAAS,EAAE,GAAG,CAAC;IAAC,OAAO,EAAE,GAAG,CAAC;IAAC,UAAU,EAAE,GAAG,CAAA;CAAE,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC"}

package/dist/primitives/Modal/Modal.svelte

@@ -99,7 +99,19 @@
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
     class="fixed inset-0 flex bg-black/50 z-50 items-end justify-center md:items-center md:p-4 touch-none overscroll-none"
-    onclick={persistent ? null : resetModal}
+    onmousedown={(e) => {
+      // Only track direct clicks on backdrop, not drags that end on backdrop
+      if (e.target === e.currentTarget && !persistent) {
+        e.currentTarget.dataset.clickStartedOnBackdrop = 'true';
+      }
+    }}
+    onmouseup={(e) => {
+      // Only close if both mousedown and mouseup were on the backdrop
+      if (e.target === e.currentTarget && e.currentTarget.dataset.clickStartedOnBackdrop === 'true' && !persistent) {
+        resetModal();
+      }
+      delete e.currentTarget.dataset.clickStartedOnBackdrop;
+    }}
     transition:fade={{ duration: 300 }}
     role="dialog"
     aria-modal="true"

package/dist/primitives/Modal/Modal.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AA0JA;;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;eACT,MAAM,IAAI;aACZ,GAAG;WACL,GAAG;aACD,GAAG;YACJ,MAAM;eAGkC"}
+{"version":3,"file":"Modal.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Modal/Modal.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAqKA;;WAZW,OAAO;mBACC,OAAO;gBACV,OAAO;WACZ,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ;iBAClC,OAAO;eACT,MAAM,IAAI;aACZ,GAAG;WACL,GAAG;aACD,GAAG;YACJ,MAAM;eAGkC"}

package/dist/primitives/Pagination/Pagination.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { ChevronLeftOutline, ChevronRightOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
 
   interface Props {
     currentPage?: number;
@@ -112,8 +113,8 @@
 
 {#if variant === 'table'}
   <div class="flex flex-col items-center gap-3 sm:flex-row sm:justify-between {className}" {...restProps}>
-    <span class="text-sm text-gray-700 dark:text-gray-400">
-      Showing <span class="font-semibold text-gray-900 dark:text-white">{startItem}</span> to <span class="font-semibold text-gray-900 dark:text-white">{endItem}</span> of <span class="font-semibold text-gray-900 dark:text-white">{totalItems}</span> entries
+    <span class={`${typography.sm} text-gray-700 dark:text-gray-400`}>
+      Showing <span class={`font-semibold ${typography.sm}`}>{startItem}</span> to <span class={`font-semibold ${typography.sm}`}>{endItem}</span> of <span class={`font-semibold ${typography.sm}`}>{totalItems}</span> entries
     </span>
     <nav class="inline-flex -space-x-px rtl:space-x-reverse" aria-label="Pagination">
       {#if effectiveShowPrevNext}

package/dist/primitives/Pagination/Pagination.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmMH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,UAAU,KAAK;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAoMH,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/primitives/Radio/Radio.svelte

@@ -35,12 +35,12 @@
   }
 
   const colorClasses = {
-    blue: 'text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600',
-    red: 'text-red-600 focus:ring-red-500 dark:focus:ring-red-600',
-    green: 'text-green-600 focus:ring-green-500 dark:focus:ring-green-600',
-    purple: 'text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600',
-    orange: 'text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600',
-    yellow: 'text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600'
+    blue: 'text-blue-600',
+    red: 'text-red-600',
+    green: 'text-green-600',
+    purple: 'text-purple-600',
+    orange: 'text-orange-500',
+    yellow: 'text-yellow-400'
   };
 
   let colorClass = $derived(colorClasses[color] || colorClasses.blue);
@@ -57,7 +57,7 @@
     {disabled}
     checked={isChecked}
     onchange={handleChange}
-    class="w-4 h-4 bg-gray-100 border-gray-300 focus:ring-2 dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600 {colorClass}"
+    class="w-4 h-4 bg-gray-100 border-gray-300 focus:outline-none dark:bg-gray-700 dark:border-gray-600 {colorClass}"
   />
   {#if children}
     <span class="text-sm font-medium text-gray-900 dark:text-gray-300">