@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/patterns/forms/FormValidationSummary.svelte

@@ -1,82 +1,82 @@
-<script lang="ts">
-  import { safeSlide } from "../../utils/transitions.js";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
-  import Button from "../../primitives/Button/Button.svelte";
-
-  const defaultLabels = {
-    pleaseFixTheFollowing: 'Please fix the following:',
-  };
-
-  interface Props {
-    errors?: Record<string, string | null | undefined>;
-    show?: boolean;
-    fieldLabels?: Record<string, string>;
-    fieldIds?: Record<string, string>;
-    labels?: Partial<typeof defaultLabels>;
-  }
-
-  let {
-    errors = {},
-    show = false,
-    fieldLabels = {},
-    fieldIds = {},
-    labels: userLabels = {},
-  }: Props = $props();
-
-  let labels = $derived({ ...defaultLabels, ...userLabels });
-
-  // Get list of fields with errors
-  let errorFields = $derived(Object.entries(errors)
-    .filter(([_, message]) => message && message.trim() !== "")
-    .map(([key, message]) => ({
-      key,
-      label: fieldLabels[key] || key,
-      message,
-      elementId: fieldIds[key] || key
-    })));
-
-  let hasErrors = $derived(errorFields.length > 0);
-
-  function scrollToField(elementId: string) {
-    const element = document.getElementById(elementId);
-    if (element) {
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      if (element.focus) {
-        setTimeout(() => element.focus(), 300);
-      }
-    }
-  }
-</script>
-
-{#if show && hasErrors}
-  <div
-    transition:safeSlide={{ duration: 300, easing: cubicOut }}
-    class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4"
-    role="alert"
-    aria-live="polite"
-  >
-    <div class="flex items-start gap-2">
-      <WarningIcon class="shrink-0 text-red-600 dark:text-red-500 mt-0.5" />
-      <div class="flex-1">
-        <p class="text-sm font-medium text-red-800 dark:text-red-400">
-          {labels.pleaseFixTheFollowing}
-        </p>
-        <ul class="mt-2 space-y-1">
-          {#each errorFields as field}
-            <li>
-              <Button
-                variant="link"
-                size="sm"
-                class="text-red-600! dark:text-red-500! hover:text-red-900! dark:hover:text-red-400!"
-                onclick={() => scrollToField(field.elementId)}
-              >
-                {field.label}
-              </Button>
-            </li>
-          {/each}
-        </ul>
-      </div>
-    </div>
-  </div>
-{/if}
+<script lang="ts">
+  import { safeSlide } from "../../utils/transitions.js";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "../../primitives/Icons/WarningIcon.svelte";
+  import Button from "../../primitives/Button/Button.svelte";
+
+  const defaultLabels = {
+    pleaseFixTheFollowing: 'Please fix the following:',
+  };
+
+  interface Props {
+    errors?: Record<string, string | null | undefined>;
+    show?: boolean;
+    fieldLabels?: Record<string, string>;
+    fieldIds?: Record<string, string>;
+    labels?: Partial<typeof defaultLabels>;
+  }
+
+  let {
+    errors = {},
+    show = false,
+    fieldLabels = {},
+    fieldIds = {},
+    labels: userLabels = {},
+  }: Props = $props();
+
+  let labels = $derived({ ...defaultLabels, ...userLabels });
+
+  // Get list of fields with errors
+  let errorFields = $derived(Object.entries(errors)
+    .filter(([_, message]) => message && message.trim() !== "")
+    .map(([key, message]) => ({
+      key,
+      label: fieldLabels[key] || key,
+      message,
+      elementId: fieldIds[key] || key
+    })));
+
+  let hasErrors = $derived(errorFields.length > 0);
+
+  function scrollToField(elementId: string) {
+    const element = document.getElementById(elementId);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "center" });
+      if (element.focus) {
+        setTimeout(() => element.focus(), 300);
+      }
+    }
+  }
+</script>
+
+{#if show && hasErrors}
+  <div
+    transition:safeSlide={{ duration: 300, easing: cubicOut }}
+    class="bg-status-error-bg border border-status-error-border rounded-lg p-4 mb-4"
+    role="alert"
+    aria-live="polite"
+  >
+    <div class="flex items-start gap-2">
+      <WarningIcon class="shrink-0 text-accent-danger mt-0.5" />
+      <div class="flex-1">
+        <p class="text-sm font-medium text-status-error-text">
+          {labels.pleaseFixTheFollowing}
+        </p>
+        <ul class="mt-2 space-y-1">
+          {#each errorFields as field}
+            <li>
+              <Button
+                variant="link"
+                size="sm"
+                class="!text-accent-danger hover:!text-accent-danger"
+                onclick={() => scrollToField(field.elementId)}
+              >
+                {field.label}
+              </Button>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    </div>
+  </div>
+{/if}

package/dist/patterns/forms/index.js

@@ -1,5 +1,5 @@
-// Form pattern components - layout and structure for forms
-export { default as FormActions } from './FormActions.svelte';
-export { default as FormGrid } from './FormGrid.svelte';
-export { default as FormSection } from './FormSection.svelte';
-export { default as FormValidationSummary } from './FormValidationSummary.svelte';
+// Form pattern components - layout and structure for forms
+export { default as FormActions } from './FormActions.svelte';
+export { default as FormGrid } from './FormGrid.svelte';
+export { default as FormSection } from './FormSection.svelte';
+export { default as FormValidationSummary } from './FormValidationSummary.svelte';

package/dist/patterns/index.js

@@ -1,21 +1,21 @@
-// =============================================================================
-// PATTERNS - Layout & flow components (Layer 3)
-// =============================================================================
-
-// Chat - re-export from chat/index.js
-export * from './chat/index.js';
-
-// Forms - re-export from forms/index.js
-export * from './forms/index.js';
-
-// Navigation - re-export from navigation/index.js
-export * from './navigation/index.js';
-
-// Page - re-export from page/index.js
-export * from './page/index.js';
-
-// Data - re-export from data/index.js
-export * from './data/index.js';
-
-// Layout - re-export from layout/index.js
-export * from './layout/index.js';
+// =============================================================================
+// PATTERNS - Layout & flow components (Layer 3)
+// =============================================================================
+
+// Chat - re-export from chat/index.js
+export * from './chat/index.js';
+
+// Forms - re-export from forms/index.js
+export * from './forms/index.js';
+
+// Navigation - re-export from navigation/index.js
+export * from './navigation/index.js';
+
+// Page - re-export from page/index.js
+export * from './page/index.js';
+
+// Data - re-export from data/index.js
+export * from './data/index.js';
+
+// Layout - re-export from layout/index.js
+export * from './layout/index.js';

package/dist/patterns/layout/Sidebar.svelte

@@ -1,39 +1,39 @@
-<script>
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    class: className = '',
-    sidebar,
-    children,
-  } = $props();
-
-  const widthClasses = {
-    narrow: 'lg:w-72',
-    medium: 'lg:w-80',
-    wide: 'lg:w-96',
-  };
-
-  const mainWidthClasses = {
-    narrow: 'lg:w-[calc(100%-18rem)]',
-    medium: 'lg:w-[calc(100%-20rem)]',
-    wide: 'lg:w-[calc(100%-24rem)]',
-  };
-</script>
-
-<div class="flex flex-col lg:flex-row gap-6 {className}">
-  {#if sidebarPosition === 'left'}
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-  {:else}
-    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
-      {@render children?.()}
-    </main>
-    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
-      {@render sidebar?.()}
-    </aside>
-  {/if}
-</div>
+<script>
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    sidebar,
+    children,
+  } = $props();
+
+  const widthClasses = {
+    narrow: 'lg:w-72',
+    medium: 'lg:w-80',
+    wide: 'lg:w-96',
+  };
+
+  const mainWidthClasses = {
+    narrow: 'lg:w-[calc(100%-18rem)]',
+    medium: 'lg:w-[calc(100%-20rem)]',
+    wide: 'lg:w-[calc(100%-24rem)]',
+  };
+</script>
+
+<div class="flex flex-col lg:flex-row gap-6 {className}">
+  {#if sidebarPosition === 'left'}
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+  {:else}
+    <main class="w-full {mainWidthClasses[sidebarWidth]} grow min-w-0">
+      {@render children?.()}
+    </main>
+    <aside class="w-full {widthClasses[sidebarWidth]} shrink-0">
+      {@render sidebar?.()}
+    </aside>
+  {/if}
+</div>

package/dist/patterns/layout/SidebarTestWrapper.svelte

@@ -1,34 +1,34 @@
-<script>
-  import Sidebar from "./Sidebar.svelte";
-
-  /** @type {{
-    sidebarWidth?: 'narrow' | 'medium' | 'wide',
-    sidebarPosition?: 'left' | 'right',
-    class?: string,
-    showSidebar?: boolean,
-    sidebarText?: string,
-    showChildren?: boolean,
-    childrenText?: string,
-  }} */
-  let {
-    sidebarWidth = 'medium',
-    sidebarPosition = 'right',
-    class: className = '',
-    showSidebar = false,
-    sidebarText = 'Sidebar Content',
-    showChildren = false,
-    childrenText = 'Main Content',
-  } = $props();
-</script>
-
-<Sidebar {sidebarWidth} {sidebarPosition} class={className}>
-  {#snippet sidebar()}
-    {#if showSidebar}
-      <div data-testid="sidebar-content">{sidebarText}</div>
-    {/if}
-  {/snippet}
-
-  {#if showChildren}
-    <div data-testid="main-content">{childrenText}</div>
-  {/if}
-</Sidebar>
+<script>
+  import Sidebar from "./Sidebar.svelte";
+
+  /** @type {{
+    sidebarWidth?: 'narrow' | 'medium' | 'wide',
+    sidebarPosition?: 'left' | 'right',
+    class?: string,
+    showSidebar?: boolean,
+    sidebarText?: string,
+    showChildren?: boolean,
+    childrenText?: string,
+  }} */
+  let {
+    sidebarWidth = 'medium',
+    sidebarPosition = 'right',
+    class: className = '',
+    showSidebar = false,
+    sidebarText = 'Sidebar Content',
+    showChildren = false,
+    childrenText = 'Main Content',
+  } = $props();
+</script>
+
+<Sidebar {sidebarWidth} {sidebarPosition} class={className}>
+  {#snippet sidebar()}
+    {#if showSidebar}
+      <div data-testid="sidebar-content">{sidebarText}</div>
+    {/if}
+  {/snippet}
+
+  {#if showChildren}
+    <div data-testid="main-content">{childrenText}</div>
+  {/if}
+</Sidebar>

package/dist/patterns/layout/Stack.svelte

@@ -1,61 +1,61 @@
-<!--
-  @component Stack (Deprecated)
-
-  @deprecated Use `import { Stack } from '@getmicdrop/svelte-components'` instead.
-  This file is kept for backwards compatibility with direct imports from
-  `@getmicdrop/svelte-components/patterns/layout/Stack.svelte`.
-
-  The canonical version is now at `components/Layout/Stack.svelte` which includes:
-  - TypeScript support
-  - More gap options (semantic: tight, compact, item, group, content, section, layout, page)
-  - `as` prop for semantic HTML elements
-  - `baseline` alignment
-  - `evenly` justify option
-
-  Migration:
-  - gap="none" → gap="0"
-  - gap="xs" → gap="tight"
-  - gap="sm" → gap="item"
-  - gap="md" → gap="content" (or just use default)
-  - gap="lg" → gap="section"
-  - gap="xl" → gap="layout"
--->
-<script lang="ts">
-  import Stack from '../../components/Layout/Stack.svelte';
-  import type { Snippet } from 'svelte';
-
-  // Re-export all props with same interface for backwards compatibility
-  interface Props {
-    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'section' | 'layout' | 'content' | 'group';
-    direction?: 'vertical' | 'horizontal';
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-    wrap?: boolean;
-    class?: string;
-    children?: Snippet;
-    [key: string]: unknown;
-  }
-
-  let {
-    gap = 'md',
-    direction = 'vertical',
-    align = 'stretch',
-    justify = 'start',
-    wrap = false,
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-</script>
-
-<Stack
-  {gap}
-  {direction}
-  {align}
-  {justify}
-  {wrap}
-  class={className}
-  {...restProps}
->
-  {#if children}{@render children()}{/if}
-</Stack>
+<!--
+  @component Stack (Deprecated)
+
+  @deprecated Use `import { Stack } from '@getmicdrop/svelte-components'` instead.
+  This file is kept for backwards compatibility with direct imports from
+  `@getmicdrop/svelte-components/patterns/layout/Stack.svelte`.
+
+  The canonical version is now at `components/Layout/Stack.svelte` which includes:
+  - TypeScript support
+  - More gap options (semantic: tight, compact, item, group, content, section, layout, page)
+  - `as` prop for semantic HTML elements
+  - `baseline` alignment
+  - `evenly` justify option
+
+  Migration:
+  - gap="none" → gap="0"
+  - gap="xs" → gap="tight"
+  - gap="sm" → gap="item"
+  - gap="md" → gap="content" (or just use default)
+  - gap="lg" → gap="section"
+  - gap="xl" → gap="layout"
+-->
+<script lang="ts">
+  import Stack from '../../components/Layout/Stack.svelte';
+  import type { Snippet } from 'svelte';
+
+  // Re-export all props with same interface for backwards compatibility
+  interface Props {
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'section' | 'layout' | 'content' | 'group';
+    direction?: 'vertical' | 'horizontal';
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    wrap?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  }
+
+  let {
+    gap = 'md',
+    direction = 'vertical',
+    align = 'stretch',
+    justify = 'start',
+    wrap = false,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+</script>
+
+<Stack
+  {gap}
+  {direction}
+  {align}
+  {justify}
+  {wrap}
+  class={className}
+  {...restProps}
+>
+  {#if children}{@render children()}{/if}
+</Stack>

package/dist/patterns/layout/index.js

@@ -1,29 +1,29 @@
-// Layout pattern components
-// Note: These are canonical exports from components/Layout/
-
-// Core layout primitives
-export { default as Grid } from '../../components/Layout/Grid.svelte';
-export { default as Section } from '../../components/Layout/Section.svelte';
-export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
-export { default as Stack } from '../../components/Layout/Stack.svelte';
-
-// Typography components
-// Note: Text is exported from components/Text.svelte (simpler API)
-// Note: Heading is exported from components/Heading.svelte (canonical export)
-// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
-
-// Container components
-export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
-export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
-export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
-
-// App shell
-export { default as AppShell } from '../../components/Layout/AppShell.svelte';
-
-// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
-// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
-
-// Responsive utilities
-export { default as Responsive } from '../../components/Layout/Responsive.svelte';
-export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
-export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';
+// Layout pattern components
+// Note: These are canonical exports from components/Layout/
+
+// Core layout primitives
+export { default as Grid } from '../../components/Layout/Grid.svelte';
+export { default as Section } from '../../components/Layout/Section.svelte';
+export { default as Sidebar } from '../../components/Layout/Sidebar.svelte';
+export { default as Stack } from '../../components/Layout/Stack.svelte';
+
+// Typography components
+// Note: Text is exported from components/Text.svelte (simpler API)
+// Note: Heading is exported from components/Heading.svelte (canonical export)
+// Layout/Text.svelte and Layout/Heading.svelte are internal - use the main exports
+
+// Container components
+export { default as PageContainer } from '../../components/Layout/PageContainer.svelte';
+export { default as ContentSection } from '../../components/Layout/ContentSection.svelte';
+export { default as TwoColumn } from '../../components/Layout/TwoColumn.svelte';
+
+// App shell
+export { default as AppShell } from '../../components/Layout/AppShell.svelte';
+
+// Note: EmptyState is exported from recipes/feedback to avoid naming conflict
+// Use: import { EmptyState } from '@getmicdrop/svelte-components' (from recipes)
+
+// Responsive utilities
+export { default as Responsive } from '../../components/Layout/Responsive.svelte';
+export { default as ShowOnMobile } from '../../components/Layout/ShowOnMobile.svelte';
+export { default as ShowOnDesktop } from '../../components/Layout/ShowOnDesktop.svelte';