@getmicdrop/svelte-components 5.17.1 → 5.17.4

package/dist/primitives/Input/Input.svelte

@@ -138,8 +138,6 @@
     if (inputElement && inputElement.value !== inputValue) {
       inputValue = inputElement.value;
       value = inputValue;
-      // Also call oninputchange so parent components can react
-      oninputchange?.(inputValue);
     }
   }
 
@@ -293,7 +291,7 @@
         onfocus={handleFocus}
         {maxlength}
         {minlength}
-        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-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 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]' : ''}"
+        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}
@@ -301,7 +299,7 @@
         aria-required={required}
       ></textarea>
     {:else if type === "password" && showPasswordToggle}
-      <div class="relative flex items-center w-full">
+      <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]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}">
         <!-- svelte-ignore a11y_autofocus -->
         <input
           bind:this={inputElement}
@@ -316,7 +314,7 @@
           onfocus={handleFocus}
           {maxlength}
           {minlength}
-          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-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {hasError ? 'border-red-500' : 'border-gray-300 dark:border-gray-600 hover:border-blue-500 focus:border-blue-500'} pr-10 {getContentFloatClass()} {shouldAnimate ? 'focus:scale-[1.01]' : ''} {disabled ? 'opacity-50 cursor-not-allowed' : ''}"
+          class="password-input-inner {typography.sm} flex-1 w-full {sizeClass} bg-transparent border-0 font-medium placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-0 {getContentFloatClass()}"
           required={false}
           {disabled}
           {readonly}
@@ -328,7 +326,7 @@
         <button
           type="button"
           onclick={togglePasswordVisibility}
-          class="absolute right-3 inset-y-0 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-hidden"
+          class="flex items-center justify-center px-3 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none"
           tabindex="-1"
           aria-label={isPasswordVisible ? "Hide password" : "Show password"}
         >
@@ -342,7 +340,7 @@
     {:else}
       <div class="relative flex items-center w-full">
         {#if leftIcon}
-          <div class="absolute left-3 inset-y-0 flex items-center text-gray-400 z-10 pointer-events-none">
+          <div class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 z-10 pointer-events-none">
             {@render leftIcon()}
           </div>
         {/if}
@@ -361,7 +359,7 @@
           onkeydown={handleSearchKeyDown}
           {maxlength}
           {minlength}
-          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-hidden focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-300 {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' : ''}"
+          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}
@@ -374,7 +372,7 @@
           <button
             type="button"
             onclick={clearInput}
-            class="absolute right-3 inset-y-0 flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
+            class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center justify-center p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
             aria-label="Clear input"
             tabindex="-1"
           >
@@ -419,5 +417,15 @@
 </div>
 
 <style>
-  /* No custom styles needed - password input now uses same structure as email input */
+  /*
+   * Override Tailwind v4 preflight which sets input { border: 1px solid currentColor }
+   * in @layer base. The base layer's element selector has higher specificity than
+   * utility class selectors like border-0 or border-none, so we need scoped overrides.
+   *
+   * This affects the password input which is wrapped in a container div that provides
+   * the visible border - the inner input should have no border.
+   */
+  :global(.password-input-inner) {
+    border: none !important;
+  }
 </style>

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqZA;eA7Ce,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,OAAO,QAAQ,EAAE,OAAO;gBAEa"}
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Input/Input.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmZA;eA7Ce,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,OAAO,QAAQ,EAAE,OAAO;gBAEa"}

package/dist/primitives/Input/Select.spec.js

@@ -216,3 +216,417 @@ describe("Select Component Tests", () => {
     expect(trigger).toHaveAttribute("aria-expanded", "false");
   });
 });
+
+describe("Keyboard Navigation - ArrowUp", () => {
+  test("ArrowUp moves focus index up within bounds", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // Navigate down twice then up once
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowUp}");
+    await user.keyboard("{Enter}");
+
+    // Started at index from click (items.findIndex matching value, or -1 => ArrowDown goes to 0, then 1, ArrowUp to 0)
+    expect(changeSpy).toHaveBeenCalled();
+    // After open: focusedIndex = -1 (no value), ArrowDown -> 0, ArrowDown -> 1, ArrowUp -> 0, Enter selects opt1
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+
+  test("ArrowUp does not go below index 0", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // ArrowDown to index 0, then ArrowUp should stay at 0
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowUp}");
+    await user.keyboard("{Enter}");
+
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+
+  test("ArrowUp does nothing when dropdown is closed", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{ArrowUp}");
+    // Dropdown should still be closed
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Keyboard Navigation - Tab", () => {
+  test("Tab key closes the dropdown", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Tab}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Keyboard Navigation - ArrowDown when closed", () => {
+  test("ArrowDown opens dropdown and focuses first item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+    // Should open the dropdown
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Enter should select the first item (focusedIndex = 0)
+    await user.keyboard("{Enter}");
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt1",
+      item: { name: "Option 1", value: "opt1" },
+    });
+  });
+});
+
+describe("Keyboard Navigation - ArrowDown bounds at end", () => {
+  test("ArrowDown does not exceed items length", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    // Navigate down many times past end
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    // Should be clamped to last item (index 2)
+    expect(changeSpy.mock.calls[0][0]).toEqual({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+});
+
+describe("Keyboard - disabled state", () => {
+  test("Keyboard events are ignored when disabled", async () => {
+    const { user } = setupTest({ disabled: true });
+    const trigger = screen.getByRole("button");
+
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    await user.keyboard("{ArrowDown}");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+    await user.keyboard(" ");
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - no label rendering", () => {
+  test("Does not render label element when label is empty", () => {
+    const { user } = setupTest({
+      label: "",
+    });
+    expect(screen.queryByRole("label")).not.toBeInTheDocument();
+  });
+
+  test("Renders label without required asterisk when not required", () => {
+    setupTest({
+      label: "My Label",
+      required: false,
+    });
+    expect(screen.getByText("My Label")).toBeInTheDocument();
+    expect(screen.queryByText("*")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - error border styling", () => {
+  test("Trigger has error border when error is set", () => {
+    setupTest({ error: "Required" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-red-500");
+  });
+
+  test("Trigger has normal border when no error", () => {
+    setupTest({ error: "" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-gray-300");
+  });
+});
+
+describe("Select - disabled styling", () => {
+  test("Disabled trigger has opacity and cursor classes", () => {
+    setupTest({ disabled: true });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("opacity-50");
+    expect(trigger).toHaveClass("cursor-not-allowed");
+  });
+
+  test("Enabled trigger does not have disabled classes", () => {
+    setupTest({ disabled: false });
+    const trigger = screen.getByRole("button");
+    expect(trigger).not.toHaveClass("opacity-50");
+    expect(trigger).not.toHaveClass("cursor-not-allowed");
+  });
+});
+
+describe("Select - size variants", () => {
+  test("Applies small size class", () => {
+    setupTest({ size: "sm" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-9");
+  });
+
+  test("Applies medium size class (default)", () => {
+    setupTest({ size: "md" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-10");
+  });
+
+  test("Applies large size class", () => {
+    setupTest({ size: "lg" });
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("h-12");
+  });
+});
+
+describe("Select - dropdown chevron rotation", () => {
+  test("Chevron rotates when dropdown is open", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    // When closed, chevron should not have rotate-180
+    const chevron = trigger.querySelector('svg');
+    expect(chevron).not.toHaveClass("rotate-180");
+
+    await user.click(trigger);
+    // When open, chevron should have rotate-180
+    expect(chevron).toHaveClass("rotate-180");
+  });
+});
+
+describe("Select - option hover highlight", () => {
+  test("Mouseenter on option updates focused index styling", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const options = screen.getAllByRole("option");
+
+    // Hover over the third option
+    await fireEvent.mouseEnter(options[2]);
+
+    // The hovered option should have the focused styling
+    expect(options[2]).toHaveClass("bg-gray-100");
+  });
+});
+
+describe("Select - trigger refocuses after selection", () => {
+  test("Trigger element receives focus after item selection", async () => {
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    await user.click(screen.getByText("Option 2"));
+
+    expect(trigger).toHaveFocus();
+  });
+});
+
+describe("Select - click outside when already closed", () => {
+  test("Does not error when clicking outside while dropdown is closed", async () => {
+    const { user } = setupTest();
+    // Just clicking body when dropdown is closed should be fine
+    await user.click(document.body);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - opening focuses current selected value", () => {
+  test("Opens with currently selected item focused", async () => {
+    const { user } = setupTest({ value: "opt2" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    const options = screen.getAllByRole("option");
+
+    // opt2 is at index 1, so the focused option should have bg-gray-100
+    expect(options[1]).toHaveClass("bg-gray-100");
+  });
+});
+
+describe("Select - Enter/Space to select focused item", () => {
+  test("Enter key selects the currently focused item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    // Open with Enter
+    trigger.focus();
+    await user.keyboard("{Enter}");
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Move down and select
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard("{Enter}");
+
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: "opt2",
+      item: { name: "Option 2", value: "opt2" },
+    });
+  });
+
+  test("Space key selects the currently focused item", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    // Open
+    trigger.focus();
+    await user.keyboard(" ");
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Navigate to index 0, then select with Space
+    await user.keyboard("{ArrowDown}");
+    await user.keyboard(" ");
+
+    expect(changeSpy).toHaveBeenCalled();
+  });
+});
+
+describe("Select - other select instance closing", () => {
+  test("Closes when another select instance opens", async () => {
+    const { user } = setupTest({ id: "select-1" });
+    const trigger1 = screen.getByRole("button");
+
+    await user.click(trigger1);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Simulate another select opening by dispatching the custom event
+    window.dispatchEvent(new CustomEvent('select-opened', { detail: { instanceId: 'other-instance' } }));
+
+    // The Svelte reactive update may need a tick; use waitFor
+    const { waitFor } = await import("@testing-library/svelte");
+    await waitFor(() => {
+      expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+    });
+  });
+
+  test("Does not close when the same instance dispatches select-opened", async () => {
+    // We cannot easily test this from the outside since instanceId is internal,
+    // but we can verify the dropdown stays open after its own click
+    const { user } = setupTest();
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    // Clicking the same trigger toggles it closed and open
+    await user.click(trigger);
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - no error text", () => {
+  test("Does not render error paragraph when error is empty", () => {
+    setupTest({ error: "" });
+    // The trigger should be present with normal border
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveClass("border-gray-300");
+    // There should be no error paragraph element
+    const errorParagraph = document.querySelector('p');
+    expect(errorParagraph).not.toBeInTheDocument();
+  });
+});
+
+describe("Select - portal mode", () => {
+  test("Portal mode renders dropdown via portal when open", async () => {
+    const { user } = setupTest({ portal: true });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    // Portal dropdown should be rendered (it uses use:portalAction to move to body)
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toBeInTheDocument();
+    // Portal dropdown has 'fixed' class instead of 'absolute'
+    expect(listbox).toHaveClass("fixed");
+  });
+
+  test("Portal mode renders items correctly", async () => {
+    const changeSpy = vi.fn();
+    const { user } = setupTest({ portal: true, onchange: changeSpy });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(3);
+
+    // Select an item in portal mode
+    await user.click(screen.getByText("Option 3"));
+    expect(changeSpy).toHaveBeenCalledWith({
+      value: "opt3",
+      item: { name: "Option 3", value: "opt3" },
+    });
+  });
+
+  test("Portal dropdown is not rendered when closed", () => {
+    setupTest({ portal: true });
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  test("Non-portal dropdown has absolute positioning", async () => {
+    const { user } = setupTest({ portal: false });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const listbox = screen.getByRole("listbox");
+    expect(listbox).toHaveClass("absolute");
+    expect(listbox).not.toHaveClass("fixed");
+  });
+});
+
+describe("Select - option id attributes", () => {
+  test("Options have correct id attributes based on select id", async () => {
+    const { user } = setupTest({ id: "my-select" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveAttribute("id", "my-select-option-0");
+    expect(options[1]).toHaveAttribute("id", "my-select-option-1");
+    expect(options[2]).toHaveAttribute("id", "my-select-option-2");
+  });
+
+  test("Options use name for id when id is not provided", async () => {
+    const { user } = setupTest({ name: "my-field", id: "" });
+    const trigger = screen.getByRole("button");
+
+    await user.click(trigger);
+
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveAttribute("id", "my-field-option-0");
+  });
+});

package/dist/primitives/Label/Label.spec.js

@@ -144,6 +144,15 @@ describe('Label Custom Default Class', () => {
   });
 });
 
+describe('Label Color Fallback', () => {
+  test('falls back to gray when an invalid color is provided', () => {
+    const { container } = render(Label, { props: { color: 'invalid-color' } });
+    const label = container.querySelector('label');
+    expect(label).toHaveClass('text-gray-900');
+    expect(label).toHaveClass('dark:text-gray-300');
+  });
+});
+
 describe('Label Class Composition', () => {
   test('combines defaultClass, color class, and custom class', () => {
     const { container } = render(Label, {

package/dist/primitives/LandingButton/LandingButton.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=LandingButton.spec.d.ts.map

package/dist/primitives/LandingButton/LandingButton.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LandingButton.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/LandingButton/LandingButton.spec.js"],"names":[],"mappings":""}

package/dist/primitives/LandingButton/LandingButton.spec.js

@@ -0,0 +1,61 @@
+import { render } from '@testing-library/svelte';
+import { expect, describe, test, vi } from 'vitest';
+import LandingButton from './LandingButton.svelte';
+
+describe('LandingButton', () => {
+  test('renders a button by default', () => {
+    const { container } = render(LandingButton);
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('button has type="button"', () => {
+    const { container } = render(LandingButton);
+    expect(container.querySelector('button')).toHaveAttribute('type', 'button');
+  });
+
+  test('renders an anchor when href is provided', () => {
+    const { container } = render(LandingButton, { props: { href: '/page' } });
+    expect(container.querySelector('a')).toBeInTheDocument();
+    expect(container.querySelector('a')).toHaveAttribute('href', '/page');
+  });
+
+  test('no button when href is provided', () => {
+    const { container } = render(LandingButton, { props: { href: '/page' } });
+    expect(container.querySelector('button')).not.toBeInTheDocument();
+  });
+
+  test('disabled state', () => {
+    const { container } = render(LandingButton, { props: { disabled: true } });
+    const btn = container.querySelector('button');
+    expect(btn).toBeDisabled();
+  });
+
+  test('loading state disables button', () => {
+    const { container } = render(LandingButton, { props: { loading: true } });
+    const btn = container.querySelector('button');
+    expect(btn).toBeDisabled();
+  });
+
+  test('primary variant is default', () => {
+    const { container } = render(LandingButton);
+    // Should render without issues
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('secondary variant renders', () => {
+    const { container } = render(LandingButton, { props: { variant: 'secondary' } });
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+
+  test('applies custom className', () => {
+    const { container } = render(LandingButton, { props: { class: 'my-landing-btn' } });
+    const btn = container.querySelector('button');
+    expect(btn).toHaveClass('my-landing-btn');
+  });
+
+  test('anchor with disabled state', () => {
+    const { container } = render(LandingButton, { props: { href: '/page', disabled: true } });
+    const a = container.querySelector('a');
+    expect(a).toBeInTheDocument();
+  });
+});

package/dist/primitives/MenuItem/MenuItem.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MenuItem.spec.d.ts.map

package/dist/primitives/MenuItem/MenuItem.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/MenuItem/MenuItem.spec.js"],"names":[],"mappings":""}