@getmicdrop/svelte-components 5.3.14 → 5.4.0

package/dist/primitives/ValidationError.stories.svelte

@@ -1,111 +1,111 @@
-<script module>
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-
-  import ValidationError from './ValidationError.svelte';
-
-  const { Story } = defineMeta({
-    title: 'Components/ValidationError',
-    component: ValidationError,
-    tags: ['autodocs'],
-    argTypes: {
-      error: { control: 'text' },
-      show: { control: 'boolean' },
-      id: { control: 'text' },
-    },
-  });
-
-</script>
-
-<script>
-  </script>
-
-
-<Story
-  name="Default"
-  args={{
-    error: 'This field is required',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Email Validation"
-  args={{
-    error: 'Please enter a valid email address',
-    show: true,
-  }}
-/>
-
-<Story
-  name="Password Validation"
-  args={{
-    error: 'Password must be at least 8 characters',
-    show: true,
-  }}
-/>
-
-<Story name="With Input Field">
-  <div class="max-w-md">
-    <label class="block text-sm font-medium mb-1">Email Address</label>
-    <input
-      type="email"
-      class="w-full px-3 py-2 border border-red-300 rounded"
-      value="invalid-email"
-    />
-    <ValidationError error="Please enter a valid email address" show={true} />
-  </div>
-</Story>
-
-<Story name="Multiple Validation Errors">
-  <div class="max-w-md space-y-4">
-    <div>
-      <label class="block text-sm font-medium mb-1">Username</label>
-      <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
-      <ValidationError error="Username is required" show={true} />
-    </div>
-
-    <div>
-      <label class="block text-sm font-medium mb-1">Email</label>
-      <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
-      <ValidationError error="Invalid email format" show={true} />
-    </div>
-
-    <div>
-      <label class="block text-sm font-medium mb-1">Password</label>
-      <input type="password" class="w-full px-3 py-2 border border-red-300 rounded" />
-      <ValidationError error="Password must contain at least one number" show={true} />
-    </div>
-  </div>
-</Story>
-
-<Story name="Hidden State">
-  <div class="max-w-md">
-    <label class="block text-sm font-medium mb-1">Email</label>
-    <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded" />
-    <ValidationError error="This error is hidden" show={false} />
-    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
-  </div>
-</Story>
-
-<Story name="Accessible with aria-describedby">
-  <div class="max-w-md">
-    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
-    <input
-      id="accessible-email"
-      type="email"
-      aria-describedby="email-error"
-      aria-invalid="true"
-      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
-      value="invalid-email"
-    />
-    <ValidationError
-      id="email-error"
-      error="Please enter a valid email address"
-      show={true}
-    />
-    <p class="text-sm text-gray-500 mt-4">
-      This example shows proper accessibility: the input references the error via aria-describedby,
-      and the error has aria-live="assertive" for screen reader announcements.
-    </p>
-  </div>
-</Story>
+<script module>
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+
+  import ValidationError from './ValidationError.svelte';
+
+  const { Story } = defineMeta({
+    title: 'Components/ValidationError',
+    component: ValidationError,
+    tags: ['autodocs'],
+    argTypes: {
+      error: { control: 'text' },
+      show: { control: 'boolean' },
+      id: { control: 'text' },
+    },
+  });
+
+</script>
+
+<script>
+  </script>
+
+
+<Story
+  name="Default"
+  args={{
+    error: 'This field is required',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Email Validation"
+  args={{
+    error: 'Please enter a valid email address',
+    show: true,
+  }}
+/>
+
+<Story
+  name="Password Validation"
+  args={{
+    error: 'Password must be at least 8 characters',
+    show: true,
+  }}
+/>
+
+<Story name="With Input Field">
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      type="email"
+      class="w-full px-3 py-2 border border-red-300 rounded"
+      value="invalid-email"
+    />
+    <ValidationError error="Please enter a valid email address" show={true} />
+  </div>
+</Story>
+
+<Story name="Multiple Validation Errors">
+  <div class="max-w-md space-y-4">
+    <div>
+      <label class="block text-sm font-medium mb-1">Username</label>
+      <input type="text" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Username is required" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Email</label>
+      <input type="email" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Invalid email format" show={true} />
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium mb-1">Password</label>
+      <input type="password" class="w-full px-3 py-2 border border-red-300 rounded" />
+      <ValidationError error="Password must contain at least one number" show={true} />
+    </div>
+  </div>
+</Story>
+
+<Story name="Hidden State">
+  <div class="max-w-md">
+    <label class="block text-sm font-medium mb-1">Email</label>
+    <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded" />
+    <ValidationError error="This error is hidden" show={false} />
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Validation error is hidden until field is touched</p>
+  </div>
+</Story>
+
+<Story name="Accessible with aria-describedby">
+  <div class="max-w-md">
+    <label for="accessible-email" class="block text-sm font-medium mb-1">Email Address</label>
+    <input
+      id="accessible-email"
+      type="email"
+      aria-describedby="email-error"
+      aria-invalid="true"
+      class="w-full px-3 py-2 border border-red-300 rounded focus:ring-red-500 focus:border-red-500"
+      value="invalid-email"
+    />
+    <ValidationError
+      id="email-error"
+      error="Please enter a valid email address"
+      show={true}
+    />
+    <p class="text-sm text-gray-500 mt-4">
+      This example shows proper accessibility: the input references the error via aria-describedby,
+      and the error has aria-live="assertive" for screen reader announcements.
+    </p>
+  </div>
+</Story>

package/dist/primitives/ValidationError.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-  import { slide } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import WarningIcon from "./Icons/WarningIcon.svelte";
-
-  interface Props {
-    /** Error message to display */
-    error?: string;
-    /** Whether to show the error */
-    show?: boolean;
-    /** Optional ID for aria-describedby linking from input fields */
-    id?: string;
-  }
-
-  let { error = '', show = true, id }: Props = $props();
-</script>
-
-{#if error && show}
-  <div
-    transition:slide={{ duration: 300, easing: cubicOut }}
-    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
-    role="alert"
-    aria-live="assertive"
-    {id}
-  >
-    <WarningIcon className="shrink-0 mt-[1px]" />
-    <p class="text-sm leading-tight m-0">{error}</p>
-  </div>
-{/if}
+<script lang="ts">
+  import { slide } from "svelte/transition";
+  import { cubicOut } from "svelte/easing";
+  import WarningIcon from "./Icons/WarningIcon.svelte";
+
+  interface Props {
+    /** Error message to display */
+    error?: string;
+    /** Whether to show the error */
+    show?: boolean;
+    /** Optional ID for aria-describedby linking from input fields */
+    id?: string;
+  }
+
+  let { error = '', show = true, id }: Props = $props();
+</script>
+
+{#if error && show}
+  <div
+    transition:slide={{ duration: 300, easing: cubicOut }}
+    class="flex items-start gap-1.5 text-red-600 dark:text-red-500 mt-2"
+    role="alert"
+    aria-live="assertive"
+    {id}
+  >
+    <WarningIcon className="shrink-0 mt-[1px]" />
+    <p class="text-sm leading-tight m-0">{error}</p>
+  </div>
+{/if}