@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/primitives/Accordion/Accordion.stories.svelte

@@ -1,75 +1,75 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import Accordion from './Accordion.svelte';
-  import AccordionItem from './AccordionItem.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Primitives/Accordion',
-    component: Accordion,
-    tags: ['autodocs'],
-    parameters: {
-      docs: {
-        description: {
-          component: 'Collapsible content sections. Use AccordionItem children to create expandable sections.',
-        },
-      },
-    },
-  });
-</script>
-
-<Story name="Default">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="What is Micdrop?">
-          <p class="text-gray-600">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
-        </AccordionItem>
-        <AccordionItem title="How do I get started?">
-          <p class="text-gray-600">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
-        </AccordionItem>
-        <AccordionItem title="What are the fees?">
-          <p class="text-gray-600">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="Single Item Open">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="Expanded by default" open={true}>
-          <p class="text-gray-600">This item starts expanded.</p>
-        </AccordionItem>
-        <AccordionItem title="Collapsed item">
-          <p class="text-gray-600">Click to expand this item.</p>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
-
-<Story name="With Rich Content">
-  {#snippet template()}
-    <div class="max-w-xl">
-      <Accordion>
-        <AccordionItem title="Features">
-          <ul class="list-disc list-inside text-gray-600 space-y-2">
-            <li>Online ticket sales</li>
-            <li>Performer management</li>
-            <li>Show scheduling</li>
-            <li>Analytics dashboard</li>
-          </ul>
-        </AccordionItem>
-        <AccordionItem title="Pricing">
-          <div class="space-y-2">
-            <p class="text-gray-600"><strong>Basic:</strong> Free</p>
-            <p class="text-gray-600"><strong>Pro:</strong> $29/month</p>
-            <p class="text-gray-600"><strong>Enterprise:</strong> Contact us</p>
-          </div>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  {/snippet}
-</Story>
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import Accordion from './Accordion.svelte';
+  import AccordionItem from './AccordionItem.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Primitives/Accordion',
+    component: Accordion,
+    tags: ['autodocs'],
+    parameters: {
+      docs: {
+        description: {
+          component: 'Collapsible content sections. Use AccordionItem children to create expandable sections.',
+        },
+      },
+    },
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="What is Micdrop?">
+          <p class="text-text-secondary">Micdrop is a platform for comedians and venues to manage shows, ticket sales, and performer booking.</p>
+        </AccordionItem>
+        <AccordionItem title="How do I get started?">
+          <p class="text-text-secondary">Sign up for an account, set up your venue or performer profile, and start creating shows.</p>
+        </AccordionItem>
+        <AccordionItem title="What are the fees?">
+          <p class="text-text-secondary">Micdrop charges a small percentage per ticket sold. There are no monthly fees.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Single Item Open">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Expanded by default" open={true}>
+          <p class="text-text-secondary">This item starts expanded.</p>
+        </AccordionItem>
+        <AccordionItem title="Collapsed item">
+          <p class="text-text-secondary">Click to expand this item.</p>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="With Rich Content">
+  {#snippet template()}
+    <div class="max-w-xl">
+      <Accordion>
+        <AccordionItem title="Features">
+          <ul class="list-disc list-inside text-text-secondary space-y-2">
+            <li>Online ticket sales</li>
+            <li>Performer management</li>
+            <li>Show scheduling</li>
+            <li>Analytics dashboard</li>
+          </ul>
+        </AccordionItem>
+        <AccordionItem title="Pricing">
+          <div class="space-y-2">
+            <p class="text-text-secondary"><strong>Basic:</strong> Free</p>
+            <p class="text-text-secondary"><strong>Pro:</strong> $29/month</p>
+            <p class="text-text-secondary"><strong>Enterprise:</strong> Contact us</p>
+          </div>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  {/snippet}
+</Story>

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-border"
+    : "border border-border rounded-lg divide-y divide-border");
+</script>
+
+<div class="{containerClasses} {className}" data-accordion={multiple ? "open" : "collapse"} {...restProps}>
+  {#if children}{@render children()}{/if}
+</div>

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

@@ -290,25 +290,19 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
   test('button has gray background', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('bg-gray-100');
+    expect(button).toHaveClass('bg-muted');
   });
 
-  test('button has dark mode background', () => {
+  test('button has token-based background', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:bg-gray-800');
+    expect(button).toHaveClass('bg-muted');
   });
 
   test('button has hover state', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    expect(button).toHaveClass('hover:bg-gray-200');
-  });
-
-  test('button has dark mode hover state', () => {
-    const { container } = render(AccordionItemWrapper);
-    const button = container.querySelector('button');
-    expect(button).toHaveClass('dark:hover:bg-gray-700');
+    expect(button).toHaveClass('hover:bg-bg-tertiary');
   });
 
   test('content has p-5 padding', async () => {
@@ -340,7 +334,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
       const contentWrapper = container.querySelector('p').parentElement;
       expect(contentWrapper).toHaveClass('border');
       expect(contentWrapper).toHaveClass('border-t-0');
-      expect(contentWrapper).toHaveClass('border-gray-200');
+      expect(contentWrapper).toHaveClass('border-border');
     });
   });
 
@@ -360,7 +354,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
     });
   });
 
-  test('content has dark mode border', async () => {
+  test('content has token-based border', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
       props: { flush: false }
@@ -372,7 +366,7 @@ describe('AccordionItem - Styling (Flowbite Native)', () => {
 
     await waitFor(() => {
       const contentWrapper = container.querySelector('p').parentElement;
-      expect(contentWrapper).toHaveClass('dark:border-gray-700');
+      expect(contentWrapper).toHaveClass('border-border');
     });
   });
 });
@@ -381,10 +375,9 @@ describe('AccordionItem - Typography Integration', () => {
   test('header uses typography.body class', () => {
     const { container } = render(AccordionItemWrapper);
     const headerSpan = container.querySelector('button span');
-    // typography.body = "text-base text-gray-900 dark:text-white leading-relaxed"
+    // typography.body = "text-base text-text-primary leading-relaxed"
     expect(headerSpan).toHaveClass('text-base');
-    expect(headerSpan).toHaveClass('text-gray-900');
-    expect(headerSpan).toHaveClass('dark:text-white');
+    expect(headerSpan).toHaveClass('text-text-primary');
     expect(headerSpan).toHaveClass('leading-relaxed');
   });
 
@@ -398,10 +391,9 @@ describe('AccordionItem - Typography Integration', () => {
 
     await waitFor(() => {
       const content = container.querySelector('p');
-      // typography.bodyMuted = "text-base text-gray-500 dark:text-gray-400 leading-relaxed"
+      // typography.bodyMuted = "text-base text-muted-foreground leading-relaxed"
       expect(content).toHaveClass('text-base');
-      expect(content).toHaveClass('text-gray-500');
-      expect(content).toHaveClass('dark:text-gray-400');
+      expect(content).toHaveClass('text-muted-foreground');
       expect(content).toHaveClass('leading-relaxed');
     });
   });
@@ -409,10 +401,9 @@ describe('AccordionItem - Typography Integration', () => {
   test('button header text uses typography.smMuted', () => {
     const { container } = render(AccordionItemWrapper);
     const button = container.querySelector('button');
-    // typography.smMuted = "text-sm text-gray-500 dark:text-gray-400"
+    // typography.smMuted = "text-sm text-muted-foreground"
     expect(button).toHaveClass('text-sm');
-    expect(button).toHaveClass('text-gray-500');
-    expect(button).toHaveClass('dark:text-gray-400');
+    expect(button).toHaveClass('text-muted-foreground');
   });
 });
 
@@ -420,13 +411,13 @@ describe('AccordionItem - Border Props', () => {
   test('applies borderOpenClass when open', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
-      props: { borderOpenClass: 'border-blue-500' }
+      props: { borderOpenClass: 'border-interactive-border' }
     });
     const button = container.querySelector('button');
 
     // Initially closed - no borderOpenClass
     const wrapper = container.querySelector('div');
-    expect(wrapper).not.toHaveClass('border-blue-500');
+    expect(wrapper).not.toHaveClass('border-interactive-border');
 
     // Click to open
     await user.click(button);
@@ -434,14 +425,14 @@ describe('AccordionItem - Border Props', () => {
 
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).toHaveClass('border-blue-500');
+      expect(wrapper).toHaveClass('border-interactive-border');
     });
   });
 
   test('removes borderOpenClass when closed', async () => {
     const user = userEvent.setup();
     const { container } = render(AccordionItemWrapper, {
-      props: { open: true, borderOpenClass: 'border-red-500' }
+      props: { open: true, borderOpenClass: 'border-status-error-border' }
     });
 
     await tick();
@@ -450,7 +441,7 @@ describe('AccordionItem - Border Props', () => {
     // Initially open - has borderOpenClass
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).toHaveClass('border-red-500');
+      expect(wrapper).toHaveClass('border-status-error-border');
     });
 
     // Click to close
@@ -459,7 +450,7 @@ describe('AccordionItem - Border Props', () => {
 
     await waitFor(() => {
       const wrapper = container.querySelector('div');
-      expect(wrapper).not.toHaveClass('border-red-500');
+      expect(wrapper).not.toHaveClass('border-status-error-border');
     });
   });
 

package/dist/primitives/Accordion/AccordionItem.svelte

@@ -1,103 +1,103 @@
-<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";
-
-  const defaultLabels = {
-    accordionItem: 'Accordion Item',
-  };
-
-  interface Props {
-    open?: boolean;
-    class?: string;
-    border?: boolean;
-    borderOpenClass?: string;
-    header?: Snippet;
-    children?: Snippet;
-    labels?: Partial<typeof defaultLabels>;
-    [key: string]: unknown;
-  }
-
-  let {
-    open = false,
-    class: className = "",
-    border = true,
-    borderOpenClass = "",
-    header,
-    children,
-    labels: userLabels = {},
-    ...restProps
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  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}{labels.accordionItem}{/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";
+
+  const defaultLabels = {
+    accordionItem: 'Accordion Item',
+  };
+
+  interface Props {
+    open?: boolean;
+    class?: string;
+    border?: boolean;
+    borderOpenClass?: string;
+    header?: Snippet;
+    children?: Snippet;
+    labels?: Partial<typeof defaultLabels>;
+    [key: string]: unknown;
+  }
+
+  let {
+    open = false,
+    class: className = "",
+    border = true,
+    borderOpenClass = "",
+    header,
+    children,
+    labels: userLabels = {},
+    ...restProps
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  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-muted",
+    "hover:bg-bg-tertiary",
+    "focus:outline-hidden",
+    "gap-3",
+    isOpen ? "bg-muted" : "",
+  ].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}{labels.accordionItem}{/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-border'}">
+        <p class={typography.bodyMuted}>
+          {#if children}{@render children()}{/if}
+        </p>
+      </div>
+    </div>
+  {/if}
+</div>