@getmicdrop/svelte-components 5.9.6 → 5.10.1

package/dist/primitives/Accordion/Accordion.svelte

@@ -1,62 +1,62 @@
-<script lang="ts">
-  /**
-   * Accordion Component - Flowbite Native (Pure Tailwind)
-   *
-   * Props:
-   *   multiple: boolean - Allow multiple items open at once
-   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
-   */
-  import type { Snippet } from 'svelte';
-  import { setContext } from "svelte";
-  import { writable } from "svelte/store";
-
-  interface Props {
-    multiple?: boolean;
-    flush?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    multiple = false,
-    flush = false,
-    class: className = "",
-    children,
-    ...restProps
-  }: Props = $props();
-
-  // Store to track which items are open
-  const openItems = writable(new Set<string>());
-
-  // Context for child AccordionItem components
-  // Use getters to capture current prop values (not initial values)
-  setContext("accordion", {
-    openItems,
-    get multiple() { return multiple; },
-    get flush() { return flush; },
-    toggle: (id: string) => {
-      openItems.update((items) => {
-        if (items.has(id)) {
-          items.delete(id);
-        } else {
-          if (!multiple) {
-            items.clear();
-          }
-          items.add(id);
-        }
-        return new Set(items);
-      });
-    },
-  });
-
-  // Flowbite-native classes
-  // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
-  let containerClasses = $derived(flush
-    ? "divide-y divide-gray-200 dark:divide-gray-700"
-    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
-</script>
-
-<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
-  {#if children}{@render children()}{/if}
-</div>
+<script lang="ts">
+  /**
+   * Accordion Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   multiple: boolean - Allow multiple items open at once
+   *   flush: boolean - Remove outer border/radius (Flowbite flush variant)
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from "svelte";
+  import { writable } from "svelte/store";
+
+  interface Props {
+    multiple?: boolean;
+    flush?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    class: className = "",
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Store to track which items are open
+  const openItems = writable(new Set<string>());
+
+  // Context for child AccordionItem components
+  // Use getters to capture current prop values (not initial values)
+  setContext("accordion", {
+    openItems,
+    get multiple() { return multiple; },
+    get flush() { return flush; },
+    toggle: (id: string) => {
+      openItems.update((items) => {
+        if (items.has(id)) {
+          items.delete(id);
+        } else {
+          if (!multiple) {
+            items.clear();
+          }
+          items.add(id);
+        }
+        return new Set(items);
+      });
+    },
+  });
+
+  // Flowbite-native classes
+  // Note: overflow-hidden was removed to allow dropdowns/menus inside accordion items to render outside the container
+  let containerClasses = $derived(flush
+    ? "divide-y divide-gray-200 dark:divide-gray-700"
+    : "border border-gray-200 dark:border-gray-700 rounded-lg divide-y divide-gray-200 dark:divide-gray-700");
+</script>
+
+<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
+  {#if children}{@render children()}{/if}
+</div>

package/dist/primitives/Accordion/AccordionItem.spec.js

@@ -233,10 +233,10 @@ describe('AccordionItem - Accessibility', () => {
     });
   });
 
-  test('button has focus:outline-none for custom focus styling', () => {
+  test('button has focus:outline-hidden for custom focus styling', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('focus:outline-none');
+    expect(button).toHaveClass('focus:outline-hidden');
   });
 
   test('button is keyboard accessible', async () => {

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,95 +1,95 @@
-<script lang="ts">
-  /**
-   * AccordionItem Component - Flowbite Native (Pure Tailwind)
-   *
-   * Props:
-   *   open: boolean - Start expanded
-   *   border: boolean - Show bottom border (Flowbite API)
-   *   borderOpenClass: string - Additional classes when open
-   */
-  import type { Snippet } from 'svelte';
-  import { getContext, onMount } from "svelte";
-  import { safeSlide } from "../../utils/transitions.js";
-  import type { Writable } from "svelte/store";
-  import { ChevronUpOutline } from "../Icons";
-  import { typography } from "../../tokens/typography";
-
-  interface Props {
-    open?: boolean;
-    class?: string;
-    border?: boolean;
-    borderOpenClass?: string;
-    header?: Snippet;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = false,
-    class: className = "",
-    border = true,
-    borderOpenClass = "",
-    header,
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const { openItems, toggle, flush } = getContext<{
-    openItems: Writable<Set<string>>;
-    toggle: (id: string) => void;
-    flush: boolean;
-  }>("accordion");
-
-  // Generate unique ID for this item
-  let id = Math.random().toString(36).substring(2, 9);
-
-  onMount(() => {
-    if (open) {
-      toggle(id);
-    }
-  });
-
-  let isOpen = $derived($openItems.has(id));
-
-  function handleClick() {
-    toggle(id);
-  }
-
-  // Flowbite-native header classes
-  let headerClasses = $derived([
-    "flex items-center justify-between w-full p-5 font-medium text-left",
-    typography.smMuted,
-    "bg-gray-100 dark:bg-gray-800",
-    "hover:bg-gray-200 dark:hover:bg-gray-700",
-    "focus:outline-none",
-    "gap-3",
-    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
-  ].join(" "));
-</script>
-
-<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}" {...restProps}>
-  <h2>
-    <button
-      type="button"
-      class={headerClasses}
-      aria-expanded={isOpen}
-      onclick={handleClick}
-    >
-      <span class={typography.body}>
-        {#if header}{@render header()}{:else}Accordion Item{/if}
-      </span>
-      <!-- Flowbite arrow icon -->
-      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
-    </button>
-  </h2>
-
-  {#if isOpen}
-    <div transition:safeSlide={{ duration: 200 }}>
-      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
-        <p class={typography.bodyMuted}>
-          {#if children}{@render children()}{/if}
-        </p>
-      </div>
-    </div>
-  {/if}
-</div>
+<script lang="ts">
+  /**
+   * AccordionItem Component - Flowbite Native (Pure Tailwind)
+   *
+   * Props:
+   *   open: boolean - Start expanded
+   *   border: boolean - Show bottom border (Flowbite API)
+   *   borderOpenClass: string - Additional classes when open
+   */
+  import type { Snippet } from 'svelte';
+  import { getContext, onMount } from "svelte";
+  import { safeSlide } from "../../utils/transitions.js";
+  import type { Writable } from "svelte/store";
+  import { ChevronUpOutline } from "../Icons";
+  import { typography } from "../../tokens/typography";
+
+  interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = false,
+    class: className = "",
+    border = true,
+    borderOpenClass = "",
+    header,
+    children,
+    ...restProps
+  }: Props = $props();
+
+  const { openItems, toggle, flush } = getContext<{
+    openItems: Writable<Set<string>>;
+    toggle: (id: string) => void;
+    flush: boolean;
+  }>("accordion");
+
+  // Generate unique ID for this item
+  let id = Math.random().toString(36).substring(2, 9);
+
+  onMount(() => {
+    if (open) {
+      toggle(id);
+    }
+  });
+
+  let isOpen = $derived($openItems.has(id));
+
+  function handleClick() {
+    toggle(id);
+  }
+
+  // Flowbite-native header classes
+  let headerClasses = $derived([
+    "flex items-center justify-between w-full p-5 font-medium text-left",
+    typography.smMuted,
+    "bg-gray-100 dark:bg-gray-800",
+    "hover:bg-gray-200 dark:hover:bg-gray-700",
+    "focus:outline-hidden",
+    "gap-3",
+    isOpen ? "bg-gray-100 dark:bg-gray-800" : "",
+  ].join(" "));
+</script>
+
+<div class="{className} {isOpen && borderOpenClass ? borderOpenClass : ''}" {...restProps}>
+  <h2>
+    <button
+      type="button"
+      class={headerClasses}
+      aria-expanded={isOpen}
+      onclick={handleClick}
+    >
+      <span class={typography.body}>
+        {#if header}{@render header()}{:else}Accordion Item{/if}
+      </span>
+      <!-- Flowbite arrow icon -->
+      <ChevronUpOutline class="w-3 h-3 shrink-0 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
+    </button>
+  </h2>
+
+  {#if isOpen}
+    <div transition:safeSlide={{ duration: 200 }}>
+      <div class="p-5 {flush ? '' : 'border border-t-0 border-gray-200 dark:border-gray-700'}">
+        <p class={typography.bodyMuted}>
+          {#if children}{@render children()}{/if}
+        </p>
+      </div>
+    </div>
+  {/if}
+</div>

package/dist/primitives/Accordion/AccordionItemWrapper.test.svelte

@@ -1,107 +1,107 @@
-<script lang="ts">
-  /**
-   * Test wrapper for AccordionItem
-   * Provides the necessary accordion context that AccordionItem expects
-   */
-  import type { Snippet } from 'svelte';
-  import { setContext } from 'svelte';
-  import { writable } from 'svelte/store';
-  import AccordionItem from './AccordionItem.svelte';
-
-  interface Props {
-    /** Allow multiple items open at once */
-    multiple?: boolean;
-    /** Remove outer border/radius (Flowbite flush variant) */
-    flush?: boolean;
-    /** Initial open state of the item */
-    open?: boolean;
-    /** Show bottom border */
-    border?: boolean;
-    /** Additional classes when open */
-    borderOpenClass?: string;
-    /** Custom class for the item */
-    class?: string;
-    /** Header snippet */
-    header?: Snippet;
-    /** Children snippet */
-    children?: Snippet;
-    /** Expose the openItems store for testing */
-    openItems?: import('svelte/store').Writable<Set<string>> | null;
-    /** Expose the toggle function for testing */
-    toggleFn?: ((id: string) => void) | null;
-    /** Data attributes for testing */
-    'data-testid'?: string;
-    'data-custom'?: string;
-    [key: string]: unknown;
-  }
-
-  let {
-    multiple = false,
-    flush = false,
-    open = false,
-    border = true,
-    borderOpenClass = '',
-    class: className = '',
-    header,
-    children,
-    openItems: exposedOpenItems = $bindable(null),
-    toggleFn: exposedToggleFn = $bindable(null),
-    'data-testid': dataTestId,
-    'data-custom': dataCustom,
-    ...restProps
-  }: Props = $props();
-
-  // Create the accordion context
-  const openItems = writable(new Set<string>());
-
-  // Expose openItems to parent for testing
-  exposedOpenItems = openItems;
-
-  const toggle = (id: string) => {
-    openItems.update((items) => {
-      if (items.has(id)) {
-        items.delete(id);
-      } else {
-        if (!multiple) {
-          items.clear();
-        }
-        items.add(id);
-      }
-      return new Set(items);
-    });
-  };
-
-  // Expose toggle function to parent for testing
-  exposedToggleFn = toggle;
-
-  setContext("accordion", {
-    openItems,
-    toggle,
-    get flush() { return flush; }
-  });
-</script>
-
-<AccordionItem
-  {open}
-  {border}
-  {borderOpenClass}
-  class={className}
-  data-testid={dataTestId}
-  data-custom={dataCustom}
-  {...restProps}
->
-  {#snippet header()}
-    {#if header}
-      {@render header()}
-    {:else}
-      Test Header
-    {/if}
-  {/snippet}
-  {#snippet children()}
-    {#if children}
-      {@render children()}
-    {:else}
-      Test Content
-    {/if}
-  {/snippet}
-</AccordionItem>
+<script lang="ts">
+  /**
+   * Test wrapper for AccordionItem
+   * Provides the necessary accordion context that AccordionItem expects
+   */
+  import type { Snippet } from 'svelte';
+  import { setContext } from 'svelte';
+  import { writable } from 'svelte/store';
+  import AccordionItem from './AccordionItem.svelte';
+
+  interface Props {
+    /** Allow multiple items open at once */
+    multiple?: boolean;
+    /** Remove outer border/radius (Flowbite flush variant) */
+    flush?: boolean;
+    /** Initial open state of the item */
+    open?: boolean;
+    /** Show bottom border */
+    border?: boolean;
+    /** Additional classes when open */
+    borderOpenClass?: string;
+    /** Custom class for the item */
+    class?: string;
+    /** Header snippet */
+    header?: Snippet;
+    /** Children snippet */
+    children?: Snippet;
+    /** Expose the openItems store for testing */
+    openItems?: import('svelte/store').Writable<Set<string>> | null;
+    /** Expose the toggle function for testing */
+    toggleFn?: ((id: string) => void) | null;
+    /** Data attributes for testing */
+    'data-testid'?: string;
+    'data-custom'?: string;
+    [key: string]: unknown;
+  }
+
+  let {
+    multiple = false,
+    flush = false,
+    open = false,
+    border = true,
+    borderOpenClass = '',
+    class: className = '',
+    header,
+    children,
+    openItems: exposedOpenItems = $bindable(null),
+    toggleFn: exposedToggleFn = $bindable(null),
+    'data-testid': dataTestId,
+    'data-custom': dataCustom,
+    ...restProps
+  }: Props = $props();
+
+  // Create the accordion context
+  const openItems = writable(new Set<string>());
+
+  // Expose openItems to parent for testing
+  exposedOpenItems = openItems;
+
+  const toggle = (id: string) => {
+    openItems.update((items) => {
+      if (items.has(id)) {
+        items.delete(id);
+      } else {
+        if (!multiple) {
+          items.clear();
+        }
+        items.add(id);
+      }
+      return new Set(items);
+    });
+  };
+
+  // Expose toggle function to parent for testing
+  exposedToggleFn = toggle;
+
+  setContext("accordion", {
+    openItems,
+    toggle,
+    get flush() { return flush; }
+  });
+</script>
+
+<AccordionItem
+  {open}
+  {border}
+  {borderOpenClass}
+  class={className}
+  data-testid={dataTestId}
+  data-custom={dataCustom}
+  {...restProps}
+>
+  {#snippet header()}
+    {#if header}
+      {@render header()}
+    {:else}
+      Test Header
+    {/if}
+  {/snippet}
+  {#snippet children()}
+    {#if children}
+      {@render children()}
+    {:else}
+      Test Content
+    {/if}
+  {/snippet}
+</AccordionItem>