@invopop/popui 0.1.50 → 0.1.52

package/dist/BaseButton.svelte

@@ -34,6 +34,7 @@
     disabled,
     stackedLeft,
     stackedRight,
+    shortcut,
     onclick,
     class: `${fullWidthClass} ${className || ''}`,
     ...rest

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/BaseFlag.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
   import 'flag-icons/css/flag-icons.min.css'
   import type { BaseFlagProps } from './types'
+  import { Icon } from '@steeze-ui/svelte-icon'
+  import { World } from '@invopop/ui-icons'
 
   let { country = '' }: BaseFlagProps = $props()
 
   let iso = $derived(country.toLowerCase())
+  let isGlobal = $derived(country.toUpperCase() === 'GLOBAL')
 </script>
 
-<div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
-  <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
-</div>
+{#if isGlobal}
+  <div class="w-3.5 h-2.5 flex items-center justify-center">
+    <Icon src={World} class="size-3.5 text-icon" />
+  </div>
+{:else}
+  <div class="w-3.5 h-2.5 rounded-[1.5px] overflow-hidden flex items-center justify-center">
+    <span class="fi fi-{country.toLocaleLowerCase()} text-[14px] leading-none"></span>
+  </div>
+{/if}

package/dist/CardCheckbox.svelte

@@ -19,12 +19,10 @@
   }: CardCheckboxProps = $props()
 
   let containerStyles = $derived(
-    clsx('border gap-3', {
+    clsx('border gap-3 rounded-xl', {
       'border-foreground-selected': checked,
       'border-border': !checked,
-      'bg-background-default-secondary': disabled,
-      'rounded-lg': hideRadio,
-      'rounded-xl': !hideRadio
+      'bg-background-default-secondary': disabled
     })
   )
 
@@ -39,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/DrawerContext.svelte

@@ -42,6 +42,7 @@
     draggable = false,
     widthClass = 'w-60',
     collapsibleGroups = true,
+    flagPosition = 'after',
     onclick,
     onselect,
     onreorder,
@@ -473,7 +474,7 @@
   {:else}
     <div class:px-1={!item.groupBy} class:cursor-grab={draggable && !item.locked}>
       <DrawerContextItem
-        item={{ ...item, focused: item.value === focusedItemValue }}
+        item={{ ...item, focused: item.value === focusedItemValue, flagPosition: item.flagPosition || flagPosition }}
         {multiple}
         {onclick}
         onchange={updateItem}

package/dist/DrawerContextItem.svelte

@@ -76,6 +76,8 @@
         <ProfileAvatar name={item?.label || ''} picture={item?.picture || ''} variant="sm" />
       {:else if item?.picture}
         <ProfileAvatar name={item?.label || ''} picture={item?.picture} variant="sm" />
+      {:else if typeof item?.icon === 'string'}
+        <img src={item.icon} alt="" class="w-4 h-4 text-icon {item?.locked ? 'opacity-30' : ''}" />
       {:else if item?.icon}
         <Icon
           src={item.icon}
@@ -91,9 +93,12 @@
         {#if item?.color}
           <TagStatus status={item.color} dot />
         {/if}
+        {#if item?.country && item?.flagPosition === 'before'}
+          <BaseFlag country={item.country} />
+        {/if}
         <span class="{labelStyles} text-base font-medium truncate">{item?.label || ''}</span>
 
-        {#if item?.country}
+        {#if item?.country && item?.flagPosition === 'after'}
           <BaseFlag country={item.country} />
           <span class="text-xs font-medium text-foreground-default-secondary uppercase">
             {item.country}

package/dist/DropdownSelect.svelte

@@ -6,6 +6,7 @@
   import DrawerContext from './DrawerContext.svelte'
   import clsx from 'clsx'
   import TagStatus from './TagStatus.svelte'
+  import BaseFlag from './BaseFlag.svelte'
   import { resolveIcon } from './helpers.js'
   import { buttonVariants } from './button/button.svelte'
 
@@ -18,11 +19,13 @@
     multiple = false,
     fullWidth = false,
     widthClass = 'min-w-[160px] max-w-[420px]',
+    flagPosition = 'before',
     onSelect,
     onOpenChange,
     stackLeft = false,
     stackRight = false,
-    multipleLabel = 'items'
+    multipleLabel = 'items',
+    strategy
   }: DropdownSelectProps = $props()
 
   let selectDropdown: BaseDropdown | undefined = $state()
@@ -126,6 +129,7 @@
   bind:isOpen
   placement="bottom-start"
   {fullWidth}
+  {strategy}
   bind:this={selectDropdown}
   class={fullWidth || isStacked ? '' : widthClass}
 >
@@ -151,9 +155,16 @@
           <TagStatus dot status={selectedColor} />
           {@render label()}
         </div>
+      {:else if !multiple && selectedItem?.country}
+        <div class="flex items-center gap-1 flex-1 min-w-0">
+          <BaseFlag country={selectedItem.country} />
+          {@render label()}
+        </div>
       {:else if selectedIcon || resolvedIcon}
         <div class="flex items-center gap-1 flex-1 min-w-0">
-          {#if selectedIcon}
+          {#if typeof selectedIcon === 'string'}
+            <img src={selectedIcon} alt="" class="size-4 flex-shrink-0 text-icon" />
+          {:else if selectedIcon}
             <Icon src={selectedIcon} {iconTheme} class="{selectedIconColor} size-4 flex-shrink-0" />
           {:else if resolvedIcon}
             <Icon src={resolvedIcon} {iconTheme} class="text-icon size-4 flex-shrink-0" />
@@ -169,6 +180,7 @@
     widthClass="min-w-[256px]"
     {multiple}
     {items}
+    {flagPosition}
     onclick={handleClick}
     onselect={handleSelected}
   />

package/dist/button/button.svelte

@@ -170,11 +170,13 @@
       iconClass?: string
       stackedLeft?: boolean
       stackedRight?: boolean
+      shortcut?: boolean
     }
 </script>
 
 <script lang="ts">
   import { Icon } from '@steeze-ui/svelte-icon'
+  import ShortcutWrapper from '../ShortcutWrapper.svelte'
 
   let {
     class: className,
@@ -185,6 +187,7 @@
     iconClass = '',
     stackedLeft = false,
     stackedRight = false,
+    shortcut = false,
     ref = $bindable(null),
     href = undefined,
     type = 'button',
@@ -211,7 +214,7 @@
   )
 </script>
 
-{#snippet iconContent()}
+{#snippet iconElement()}
   {#if icon}
     <div class={cn('relative z-10', iconClass && `[&_svg]:${iconClass}`)}>
       <Icon src={icon} class={iconSize} />
@@ -219,6 +222,18 @@
   {/if}
 {/snippet}
 
+{#snippet iconContent()}
+  {#if shortcut}
+    <ShortcutWrapper
+      theme={['dark', 'primary', 'danger'].includes(variant) ? 'navigation' : 'light'}
+    >
+      {@render iconElement()}
+    </ShortcutWrapper>
+  {:else}
+    {@render iconElement()}
+  {/if}
+{/snippet}
+
 {#snippet buttonContent()}
   <div
     class={cn(

package/dist/button/button.svelte.d.ts

@@ -112,6 +112,7 @@ export type ButtonProps = WithElementRef<HTMLButtonAttributes> & WithElementRef<
     iconClass?: string;
     stackedLeft?: boolean;
     stackedRight?: boolean;
+    shortcut?: boolean;
 };
 declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;

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

@@ -30,7 +30,7 @@ export type DrawerOption = SelectOption & {
     destructive?: boolean;
     selected?: boolean;
     focused?: boolean;
-    icon?: IconSource | undefined;
+    icon?: IconSource | string | undefined;
     rightIcon?: IconSource | undefined;
     country?: string;
     color?: StatusType;
@@ -42,6 +42,7 @@ export type DrawerOption = SelectOption & {
     groupBy?: string;
     useAvatar?: boolean;
     action?: Snippet<[DrawerOption]>;
+    flagPosition?: 'before' | 'after';
 };
 export type Company = {
     id: string;
@@ -215,6 +216,7 @@ export interface BaseDropdownProps {
     placement?: Placement;
     matchParentWidth?: boolean;
     usePortal?: boolean;
+    strategy?: 'absolute' | 'fixed';
     trigger?: Snippet;
     children?: Snippet;
     [key: string]: any;
@@ -332,6 +334,7 @@ export interface DrawerContextProps {
     draggable?: boolean;
     widthClass?: string;
     collapsibleGroups?: boolean;
+    flagPosition?: 'before' | 'after';
     onclick?: (value: AnyProp) => void;
     onselect?: (selected: DrawerOption[]) => void;
     onreorder?: (items: DrawerOption[]) => void;
@@ -356,11 +359,13 @@ export interface DropdownSelectProps {
     multiple?: boolean;
     fullWidth?: boolean;
     widthClass?: string;
+    flagPosition?: 'before' | 'after';
     onSelect?: (value: AnyProp) => void;
     onOpenChange?: (isOpen: boolean) => void;
     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.50",
+  "version": "0.1.52",
   "repository": {
     "url": "https://github.com/invopop/popui"
   },
@@ -85,7 +85,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.5",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "^0.0.82",
+    "@invopop/ui-icons": "^0.0.84",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",