@invopop/popui 0.1.51 → 0.1.52

package/dist/BaseDropdown.svelte

@@ -12,6 +12,7 @@
     placement = 'bottom-start',
     matchParentWidth = false,
     usePortal = true,
+    strategy: strategyProp,
     class: className = '',
     trigger,
     children,
@@ -19,7 +20,7 @@
   }: BaseDropdownProps = $props()
 
   // Conditional portal action - noop if disabled
-  const conditionalPortal = usePortal ? portal : () => {}
+  const conditionalPortal = $derived(usePortal ? portal : () => {})
 
   const middleware = [offset(6), flip(), shift()]
 
@@ -38,8 +39,8 @@
 
   let closedFromClickOutside = $state(false)
 
-  // Create floating actions with strategy based on usePortal
-  const strategy = usePortal ? 'absolute' : 'fixed'
+  // Create floating actions with strategy based on prop or usePortal
+  const strategy = $derived(strategyProp ?? (usePortal ? 'absolute' : 'fixed'))
   const [floatingRef, floatingContent] = createFloatingActions({
     strategy,
     placement,

package/dist/CardCheckbox.svelte

@@ -37,11 +37,11 @@
 <label for={id} class="cursor-pointer">
   <div class={containerStyles}>
     <div class={headerStyles}>
-      <div class="flex grow items-start gap-1 min-w-0">
+      <div class="flex grow items-start gap-1 min-w-0" data-card-content>
         {#if icon}
-          <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" />
+          <Icon src={icon} class="size-4 text-icon shrink-0 mt-0.5" data-card-icon />
         {/if}
-        <div class="flex flex-col gap-1 min-w-0">
+        <div class="flex flex-col gap-1 min-w-0" data-card-text>
           <span class="text-base font-medium text-foreground">
             {title}
           </span>

package/dist/DropdownSelect.svelte

@@ -24,7 +24,8 @@
     onOpenChange,
     stackLeft = false,
     stackRight = false,
-    multipleLabel = 'items'
+    multipleLabel = 'items',
+    strategy
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -128,6 +129,7 @@
   bind:isOpen
   placement="bottom-start"
   {fullWidth}
+  {strategy}
   bind:this={selectDropdown}
   class={fullWidth || isStacked ? '' : widthClass}
 >

package/dist/tailwind.theme.css

@@ -4,14 +4,15 @@
  * This file can be imported in any project using:
  * @import "@invopop/popui/tailwind.theme.css";
  *
+ * To use the Geist Mono font, add this to your HTML or main CSS file:
+ * @import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
+ *
  * Three-tier color system:
  * 1. Primitive colors: Raw color values from Figma (e.g., mint-100)
  * 2. Semantic colors: Named palettes using base colors (e.g., positive-100)
  * 3. Token colors: Application-specific using semantic colors (e.g., foreground-default)
  */
 
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
-
 @theme {
   /* ============================================
      PRIMITIVE COLORS

package/dist/types.d.ts

@@ -216,6 +216,7 @@ export interface BaseDropdownProps {
     placement?: Placement;
     matchParentWidth?: boolean;
     usePortal?: boolean;
+    strategy?: 'absolute' | 'fixed';
     trigger?: Snippet;
     children?: Snippet;
     [key: string]: any;
@@ -364,6 +365,7 @@ export interface DropdownSelectProps {
     stackLeft?: boolean;
     stackRight?: boolean;
     multipleLabel?: string;
+    strategy?: 'absolute' | 'fixed';
 }
 export interface EmptyStateProps {
     icon?: Snippet;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.51",
+  "version": "0.1.52",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },