@getmicdrop/svelte-components 5.14.0 → 5.16.0

package/dist/patterns/chat/ChatStatusBadge.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  /**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+  import type { Snippet, Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+
+  interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+  }
+
+  let {
+    status,
+    outbound = false,
+    className = '',
+    icon,
+  }: Props = $props();
+
+  interface StatusStyle {
+    textColor: string;
+    bgColor: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(s: string): StatusStyle {
+    switch (s?.toLowerCase()) {
+      case 'confirmed':
+        return {
+          textColor: 'text-green-600',
+          bgColor: 'bg-green-50 dark:bg-green-900/20',
+          icon: CheckmarkFilled,
+        };
+      case 'declined':
+      case 'canceled':
+        return {
+          textColor: 'text-red-600',
+          bgColor: 'bg-red-50 dark:bg-red-900/20',
+          icon: CloseFilled,
+        };
+      case 'invited':
+        return {
+          textColor: 'text-blue-600',
+          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
+          icon: SendAltFilled,
+        };
+      default:
+        return {
+          textColor: 'text-gray-600',
+          bgColor: 'bg-gray-100 dark:bg-gray-800',
+          icon: null,
+        };
+    }
+  }
+
+  let style = $derived(getStatusStyle(status));
+
+  let badgeClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm font-medium flex items-center gap-1.5',
+      style.bgColor,
+      style.textColor,
+      outbound ? 'rounded-br-sm' : 'rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={badgeClasses}>
+  {#if icon}
+    {@render icon()}
+  {:else if style.icon}
+    {@const IconComponent = style.icon}
+    <IconComponent class="w-4 h-4" />
+  {/if}
+  <span class="capitalize">{status}</span>
+</div>

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts

@@ -0,0 +1,22 @@
+/**
+   * ChatStatusBadge - Status indicator for chat activity feeds
+   *
+   * Displays status changes (Confirmed, Declined, Invited, etc.) with
+   * appropriate colors and icons in a pill/badge format.
+   */
+import type { Snippet, Component } from 'svelte';
+type StatusType = 'confirmed' | 'declined' | 'canceled' | 'invited' | 'pending' | string;
+interface Props {
+    /** Status value */
+    status: StatusType;
+    /** Show as outbound style (right-aligned context) */
+    outbound?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Optional custom icon */
+    icon?: Snippet;
+}
+declare const ChatStatusBadge: Component<Props, {}, "">;
+type ChatStatusBadge = ReturnType<typeof ChatStatusBadge>;
+export default ChatStatusBadge;
+//# sourceMappingURL=ChatStatusBadge.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusBadge.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAO/C,KAAK,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzF,UAAU,KAAK;IACb,mBAAmB;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAgFH,QAAA,MAAM,eAAe,0BAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/patterns/chat/ChatStatusTransition.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  /**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+  import type { Component } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import CloseFilled from 'carbon-icons-svelte/lib/CloseFilled.svelte';
+  import SendAltFilled from 'carbon-icons-svelte/lib/SendAltFilled.svelte';
+
+  interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+  }
+
+  let {
+    fromStatus,
+    toStatus,
+    className = '',
+  }: Props = $props();
+
+  interface StatusStyle {
+    color: string;
+    icon: Component<{ class?: string }> | null;
+  }
+
+  function getStatusStyle(status: string): StatusStyle {
+    switch (status?.toLowerCase()) {
+      case 'confirmed':
+        return { color: 'text-green-600', icon: CheckmarkFilled };
+      case 'declined':
+      case 'canceled':
+        return { color: 'text-red-600', icon: CloseFilled };
+      case 'invited':
+        return { color: 'text-blue-600', icon: SendAltFilled };
+      default:
+        return { color: 'text-gray-600', icon: null };
+    }
+  }
+
+  let fromStyle = $derived(getStatusStyle(fromStatus));
+  let toStyle = $derived(getStatusStyle(toStatus));
+</script>
+
+<span class={classNames('text-xs font-medium flex items-center gap-1', className)}>
+  {#if fromStyle.icon}
+    {@const FromIcon = fromStyle.icon}
+    <FromIcon class="w-3 h-3 {fromStyle.color}" />
+  {/if}
+  <span class={fromStyle.color}>{fromStatus}</span>
+  <span class="text-gray-400 mx-1">→</span>
+  {#if toStyle.icon}
+    {@const ToIcon = toStyle.icon}
+    <ToIcon class="w-3 h-3 {toStyle.color}" />
+  {/if}
+  <span class={toStyle.color}>{toStatus}</span>
+</span>

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatStatusTransition - Status change display with icons
+   *
+   * Shows "{fromStatus} → {toStatus}" with colored icons for each status.
+   * Used in activity notices to show silent status changes.
+   */
+import type { Component } from 'svelte';
+interface Props {
+    /** Original status */
+    fromStatus: string;
+    /** New status */
+    toStatus: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+declare const ChatStatusTransition: Component<Props, {}, "">;
+type ChatStatusTransition = ReturnType<typeof ChatStatusTransition>;
+export default ChatStatusTransition;
+//# sourceMappingURL=ChatStatusTransition.svelte.d.ts.map

package/dist/patterns/chat/ChatStatusTransition.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatStatusTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatStatusTransition.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAOtC,UAAU,KAAK;IACb,sBAAsB;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwDH,QAAA,MAAM,oBAAoB,0BAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/patterns/chat/ChatTextBubble.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  /**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+  import type { Snippet } from 'svelte';
+  import { classNames } from '../../utils/utils.js';
+
+  interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+  }
+
+  let {
+    direction = 'inbound',
+    className = '',
+    children,
+  }: Props = $props();
+
+  let isOutbound = $derived(direction === 'outbound');
+
+  let bubbleClasses = $derived(
+    classNames(
+      'px-4 py-2.5 rounded-2xl text-sm',
+      isOutbound
+        ? 'bg-blue-600 text-white rounded-br-sm'
+        : 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white rounded-bl-sm',
+      className
+    )
+  );
+</script>
+
+<div class={bubbleClasses}>
+  {@render children?.()}
+</div>

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts

@@ -0,0 +1,19 @@
+/**
+   * ChatTextBubble - Simple text bubble without the full ChatBubble wrapper
+   *
+   * Just the bubble itself, for use within ChatMessageGroup or other contexts
+   * where you don't need avatar/timestamp handling.
+   */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Direction - inbound (gray) or outbound (blue) */
+    direction?: 'inbound' | 'outbound';
+    /** Additional CSS classes */
+    className?: string;
+    /** Content */
+    children?: Snippet;
+}
+declare const ChatTextBubble: import("svelte").Component<Props, {}, "">;
+type ChatTextBubble = ReturnType<typeof ChatTextBubble>;
+export default ChatTextBubble;
+//# sourceMappingURL=ChatTextBubble.svelte.d.ts.map

package/dist/patterns/chat/ChatTextBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatTextBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/patterns/chat/ChatTextBubble.svelte.ts"],"names":[],"mappings":"AAGA;;;;;KAKK;AACL,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,oDAAoD;IACpD,SAAS,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACnC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/patterns/chat/index.d.ts

@@ -0,0 +1,12 @@
+export { default as ChatContainer } from "./ChatContainer.svelte";
+export { default as ChatMessageGroup } from "./ChatMessageGroup.svelte";
+export { default as ChatBubble } from "./ChatBubble.svelte";
+export { default as ChatTextBubble } from "./ChatTextBubble.svelte";
+export { default as ChatInvitationBubble } from "./ChatInvitationBubble.svelte";
+export { default as ChatStatusBadge } from "./ChatStatusBadge.svelte";
+export { default as ChatStatusTransition } from "./ChatStatusTransition.svelte";
+export { default as ChatSlotUpdate } from "./ChatSlotUpdate.svelte";
+export { default as ChatDateDivider } from "./ChatDateDivider.svelte";
+export { default as ChatActivityNotice } from "./ChatActivityNotice.svelte";
+export { default as ChatInvitationNotice } from "./ChatInvitationNotice.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/patterns/chat/index.d.ts.map

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

package/dist/patterns/chat/index.js

@@ -0,0 +1,22 @@
+// =============================================================================
+// CHAT PATTERNS - Chat interface components
+// =============================================================================
+
+// Core layout
+export { default as ChatContainer } from './ChatContainer.svelte';
+export { default as ChatMessageGroup } from './ChatMessageGroup.svelte';
+
+// Message bubbles
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as ChatTextBubble } from './ChatTextBubble.svelte';
+export { default as ChatInvitationBubble } from './ChatInvitationBubble.svelte';
+
+// Status displays
+export { default as ChatStatusBadge } from './ChatStatusBadge.svelte';
+export { default as ChatStatusTransition } from './ChatStatusTransition.svelte';
+export { default as ChatSlotUpdate } from './ChatSlotUpdate.svelte';
+
+// Dividers and notices
+export { default as ChatDateDivider } from './ChatDateDivider.svelte';
+export { default as ChatActivityNotice } from './ChatActivityNotice.svelte';
+export { default as ChatInvitationNotice } from './ChatInvitationNotice.svelte';

package/dist/patterns/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./chat/index.js";
 export * from "./forms/index.js";
 export * from "./navigation/index.js";
 export * from "./page/index.js";

package/dist/patterns/index.js

@@ -2,6 +2,9 @@
 // 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';
 

package/dist/patterns/navigation/BottomNav.svelte

@@ -42,7 +42,7 @@
         }
         const events = await res.json();
         invitationCount = events.filter((event: { acceptedState: number }) => event.acceptedState === 0).length;
-      } catch (err) {
+      } catch (_err) {
         // Silently fail - this is non-critical UI enhancement
       }
     }

package/dist/patterns/navigation/Header.svelte

@@ -5,7 +5,7 @@
   import Logo from "../../assets/images/Logo.png";
   import Avatar from "../../primitives/Avatar/Avatar.svelte";
   import DarkModeToggle from "../../primitives/DarkModeToggle.svelte";
-  import Icon from "../../primitives/Icons/Icon.svelte";
+  import IconComponent from "../../primitives/Icons/Icon.svelte";
   import ChevronLeft from "../../primitives/Icons/ChevronLeft.svelte";
   import Button from "../../primitives/Button/Button.svelte";
   import MenuItem from "../../primitives/MenuItem/MenuItem.svelte";

package/dist/primitives/BottomSheet/BottomSheet.svelte

@@ -10,6 +10,8 @@
     open?: boolean;
     /** Title displayed in the header */
     title?: string;
+    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
+    alwaysSheet?: boolean;
     /** Callback when the sheet should close */
     onclose?: () => void;
     /** Main content */
@@ -21,6 +23,7 @@
   let {
     open = $bindable(false),
     title = '',
+    alwaysSheet = false,
     onclose,
     children,
     actions
@@ -57,6 +60,18 @@
       document.body.style.overflow = "";
     }
   });
+
+  let backdropClass = $derived(
+    alwaysSheet
+      ? "fixed inset-0 z-50 flex items-end bg-gray-900/50 dark:bg-gray-900/80"
+      : "fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
+  );
+
+  let sheetClass = $derived(
+    alwaysSheet
+      ? "w-full max-h-[90dvh] bg-white dark:bg-gray-800 rounded-t-xl shadow-xl flex flex-col overflow-hidden"
+      : "w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
+  );
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -65,18 +80,18 @@
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="fixed inset-0 z-50 flex items-end md:items-center md:justify-center bg-gray-900/50 dark:bg-gray-900/80"
+    class={backdropClass}
     onclick={handleBackdropClick}
     transition:fade={{ duration: 200 }}
   >
     <!-- svelte-ignore a11y_click_events_have_key_events -->
     <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
-      class="w-full max-h-[90dvh] md:max-w-lg md:max-h-[80vh] md:m-4 bg-white dark:bg-gray-800 rounded-t-xl md:rounded-lg shadow-xl flex flex-col overflow-hidden"
+      class={sheetClass}
       onclick={(e) => e.stopPropagation()}
       transition:fly={{ y: 300, duration: 300, easing: cubicOut }}
     >
-      <div class="flex justify-center pt-3 pb-2 shrink-0 md:hidden">
+      <div class="flex justify-center pt-3 pb-2 shrink-0 {alwaysSheet ? '' : 'md:hidden'}"  >
         <div class="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
       </div>
 

package/dist/primitives/BottomSheet/BottomSheet.svelte.d.ts

@@ -4,6 +4,8 @@ interface Props {
     open?: boolean;
     /** Title displayed in the header */
     title?: string;
+    /** Keep as bottom sheet at all screen sizes (never convert to centered modal) */
+    alwaysSheet?: boolean;
     /** Callback when the sheet should close */
     onclose?: () => void;
     /** Main content */

package/dist/primitives/BottomSheet/BottomSheet.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAoFH,QAAA,MAAM,WAAW,+CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"BottomSheet.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/BottomSheet/BottomSheet.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,UAAU,KAAK;IACb,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAiGH,QAAA,MAAM,WAAW,+CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/primitives/Button/Button.svelte

@@ -118,7 +118,7 @@
     link: "text-blue-700 bg-transparent border-transparent hover:underline dark:text-blue-500",
     icon: "text-gray-500 bg-transparent border-transparent hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700",
     toggle: "text-gray-900 bg-gray-100 border border-gray-200 hover:bg-gray-200 dark:bg-gray-700 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600",
-    success: "text-white bg-green-600 border border-green-600",
+    success: "text-white bg-green-600 border border-green-600 hover:bg-green-700 dark:bg-green-600 dark:hover:bg-green-700",
   };
 
   // Active state classes for ghost and toggle

package/dist/primitives/Drawer/Drawer.svelte

@@ -130,17 +130,15 @@
     }
   }
 
-  // Lock body scroll when drawer is open
+  // Focus management when drawer is open (no body scroll lock — allow background scrolling)
   $effect(() => {
     if (typeof document !== "undefined") {
       if (isVisible) {
-        document.body.style.overflow = "hidden";
         // Store previously focused element and focus drawer
         previouslyFocusedElement = document.activeElement;
         // Use setTimeout to ensure drawer is rendered before focusing
         setTimeout(() => drawerElement?.focus(), 0);
       } else {
-        document.body.style.overflow = "";
         // Restore focus when closing
         if (previouslyFocusedElement && previouslyFocusedElement instanceof HTMLElement) {
           previouslyFocusedElement.focus();
@@ -148,12 +146,6 @@
       }
     }
   });
-
-  onDestroy(() => {
-    if (typeof document !== "undefined") {
-      document.body.style.overflow = "";
-    }
-  });
 </script>
 
 <svelte:window onkeydown={handleKeydown} />

package/dist/primitives/Drawer/Drawer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAmMH,QAAA,MAAM,MAAM,+CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/primitives/Drawer/Drawer.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2LH,QAAA,MAAM,MAAM,+CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/primitives/Modal/Modal.svelte

@@ -27,8 +27,8 @@
   }} */
   let {
     open = $bindable(false),
-    isProcessing = false,
-    isSuccess = false,
+    isProcessing: _isProcessing = false,
+    isSuccess: _isSuccess = false,
     size = "md",
     persistent = false,
     haptic = true,

package/dist/recipes/ImageUploader/ImageUploader.svelte

@@ -627,7 +627,7 @@
     {:else}
       <!-- Empty dropzone with direct drag-drop support -->
       <div
-        class="{shapeAspects[shape]} filepond-wrapper-single {shape === 'wide' ? 'filepond-wide' : ''}
+        class="{shapeAspects[shape]} filepond-wrapper-single rounded-xl {shape === 'wide' ? 'filepond-wide' : ''}
           {isDropzoneDragOver ? 'dropzone-drag-over' : ''}"
         role="button"
         tabindex="0"
@@ -883,7 +883,6 @@
   /* Single mode dropzone styling */
   .filepond-wrapper-single {
     border: 2px dashed rgb(209 213 219); /* gray-300 */
-    border-radius: 0.75rem; /* rounded-xl */
     background-color: rgb(249 250 251); /* gray-50 */
     transition-property: color, background-color, border-color;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

package/dist/recipes/SuperLogin/SuperLogin.svelte

@@ -112,7 +112,7 @@
     }
   });
 
-  let authError = $state("");
+  let _authError = $state("");
   let email = $state((() => userEmail)());
   let password = $state("");
   let errors = $state({});
@@ -181,7 +181,7 @@
           email = rememberedUser.email;
         }
       }
-    } catch (e) {
+    } catch (_e) {
       // Ignore parse errors
     }
 
@@ -205,7 +205,7 @@
 
     // Handle browser back/forward buttons
     const handlePopState = () => {
-      const path = window.location.pathname;
+      const _path = window.location.pathname;
     };
 
     window.addEventListener("popstate", handlePopState);
@@ -275,7 +275,7 @@
   async function handleSubmit(event) {
     event.preventDefault();
     isLoading = true;
-    authError = "";
+    _authError = "";
     // Try to get values from DOM first (for testing frameworks), fall back to Svelte state
     const emailInput = /** @type {HTMLInputElement|null} */ (document.querySelector('#email'));
     const passwordInput = /** @type {HTMLInputElement|null} */ (document.querySelector('#password'));
@@ -436,7 +436,7 @@
     });
 
     try {
-      const [_, response] = await Promise.all([minDelay, apiCall]);
+      const [_delay, _response] = await Promise.all([minDelay, apiCall]);
       isLoading = false;
 
       // Always show success to prevent email enumeration
@@ -483,7 +483,7 @@
     });
 
     try {
-      const [_, response] = await Promise.all([minDelay, apiCall]);
+      const [_delay2, _response2] = await Promise.all([minDelay, apiCall]);
 
       isLoading = false;
 
@@ -549,7 +549,7 @@
         'rememberedUser',
         JSON.stringify({ email: emailVal, firstName: firstNameVal })
       );
-    } catch (e) {
+    } catch (_e) {
       // Ignore storage errors
     }
   }

package/dist/services/ShowService.js

@@ -120,7 +120,7 @@ export async function sendVenueMessage(inviteId, message) {
       if (text) {
         try {
           result = JSON.parse(text);
-        } catch (e) {
+        } catch (_e) {
           // Empty response is fine
         }
       }

package/dist/utils/greetings.js

@@ -142,7 +142,7 @@ export function getGreeting(name) {
         return greeting;
       }
     }
-  } catch (e) {
+  } catch (_e) {
     // localStorage unavailable or parse error - continue to generate
   }
 
@@ -157,7 +157,7 @@ export function getGreeting(name) {
       day: currentDay,
       cachedName: name
     }));
-  } catch (e) {
+  } catch (_e2) {
     // localStorage unavailable - greeting still works, just won't persist
   }
 
@@ -181,7 +181,7 @@ export function clearGreetingCache() {
   if (typeof window === 'undefined') return;
   try {
     localStorage.removeItem(STORAGE_KEY);
-  } catch (e) {
+  } catch (_e) {
     // localStorage unavailable
   }
 }

package/dist/utils/imageValidation.js

@@ -61,7 +61,7 @@ export async function validateImage(file) {
       error: null,
       dimensions
     };
-  } catch (error) {
+  } catch (_error) {
     return {
       valid: false,
       error: 'Failed to read image dimensions. Please try another file.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.14.0",
+  "version": "5.16.0",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",