@invopop/popui 0.1.22 → 0.1.24

package/dist/BaseTableCellContent.svelte

@@ -29,7 +29,7 @@
       </span>
     {:else if field.copy && data}
       <ButtonUuidCopy uuid={String(data)} full oncopied={onCopied} />
-    {:else}
+    {:else if data}
       <span class="hidden md:inline">{data}</span>
       <span class="md:hidden">{data ? data : badge || status ? '' : '-'}</span>
     {/if}

package/dist/DrawerContextSeparator.svelte

@@ -1 +1 @@
-<li class="bg-border h-px w-full my-1"></li>
+<li class="bg-border h-px min-h-px w-full my-1"></li>

package/dist/GlobalSearch.svelte

@@ -11,10 +11,13 @@
   let { collapsed = false, onOpen }: GlobalSearchProps = $props()
 
   const styles = $derived(
-    clsx('cursor-pointer flex items-center border border-border-inverse-default rounded-lg h-8', {
-      'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse': !collapsed,
-      'p-1.5': collapsed
-    })
+    clsx(
+      'cursor-pointer flex items-center border border-border-inverse-default rounded-lg box-border',
+      {
+        'gap-1 px-2 py-1.5 w-full hover:bg-background-selected-inverse h-8': !collapsed,
+        'p-2 size-8': collapsed
+      }
+    )
   )
 
   function onKeyDown(event: KeyboardEvent) {

package/dist/MenuItem.svelte

@@ -39,9 +39,10 @@
       { 'text-foreground-inverse font-medium': !isFolderItem },
       { 'text-foreground-inverse-secondary': isFolderItem && !active },
       {
-        'border border-transparent hover:bg-background-selected-inverse group p-2': collapsedSidebar
+        'border border-transparent hover:bg-background-selected-inverse group p-2 size-8':
+          collapsedSidebar
       },
-      { 'w-full px-2 py-1.5': !collapsedSidebar },
+      { 'w-full px-2 py-1.5 h-8': !collapsedSidebar },
       {
         'bg-background-selected-inverse text-white': active
       },
@@ -109,11 +110,11 @@
     onmouseleave={handleBlur}
     onclick={handleClick}
     title={label}
-    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg h-8"
+    class="cursor-pointer {itemStyles} text-base border border-transparent flex items-center justify-between hover:text-white focus:text-white rounded-lg"
   >
     <span class="flex items-center space-x-1.5">
       {#if resolvedIcon}
-        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-white-70" />
+        <Icon src={resolvedIcon} theme={iconTheme} class="{iconStyles} h-4 w-4 text-icon-inverse" />
       {/if}
       {#if !collapsedSidebar}
         <span class="whitespace-nowrap tracking-normal">{label}</span>

package/dist/MenuItemCollapsible.svelte

@@ -26,7 +26,7 @@
 
 <span
   {title}
-  class="{styles} text-foreground-inverse text-base flex items-center justify-between rounded-lg h-8"
+  class="{styles} text-foreground-inverse text-base flex items-center justify-between rounded-lg h-8 font-medium"
 >
   <span class:space-x-2={!collapsed} class="flex items-center">
     {@render children?.()}
@@ -34,12 +34,12 @@
       <div>
         <div class="whitespace-nowrap max-w-[118px] truncate tracking-tight">{title}</div>
         {#if subtitle}
-          <div class="text-sm font-medium text-yellow-600">{subtitle}</div>
+          <div class="text-sm text-foreground-inverse-secondary">{subtitle}</div>
         {/if}
       </div>
     {/if}
   </span>
   {#if icon}
-    <Icon src={icon} class="h-4 w-4 text-white-40 mt-px" />
+    <Icon src={icon} class="h-4 w-4 text-icon-inverse" />
   {/if}
 </span>

package/dist/button/button.svelte

@@ -99,7 +99,7 @@
         class: '[&_svg]:!text-icon-default-bold'
       },
       {
-        variant: ['primary', 'warning'],
+        variant: ['primary', 'warning', 'dark-ghost'],
         iconOnly: true,
         class: '[&_svg]:!text-icon-inverse-bold'
       },

package/dist/table/table-cell.svelte

@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot="table-cell"
   class={cn(
-    'py-3 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1',
+    'py-3 pl-3 pr-3 align-middle text-foreground font-normal text-base [&:has([role=menu])]:pl-1 relative z-1 border-b border-border',
     className
   )}
   onclick={bubble('click')}

package/dist/table/table-row.svelte

@@ -18,7 +18,7 @@
   bind:this={ref}
   data-slot="table-row"
   class={cn(
-    'data-[state=selected]:bg-background-default-secondary data-[state=checked]:bg-background-selected transition-colors border-b border-border h-10',
+    'data-[state=selected]:bg-background-default-secondary data-[state=checked]:bg-background-selected transition-colors h-10',
     className
   )}
   {oncontextmenu}

package/dist/tailwind.theme.css

@@ -375,16 +375,16 @@
      ============================================ */
 
   /* Accent */
-  --color-accent-40: var(--color-green-40);
-  --color-accent-50: var(--color-green-50);
-  --color-accent-60: var(--color-green-60);
-  --color-accent-70: var(--color-green-70);
-  --color-accent-80: var(--color-sherwood-50);
-  --color-accent-alpha-5: var(--color-green-alpha-5);
-  --color-accent-alpha-10: var(--color-green-alpha-10);
-  --color-accent-alpha-20: var(--color-green-alpha-20);
-  --color-accent-alpha-30: var(--color-green-alpha-30);
-  --color-accent-alpha-40: var(--color-green-alpha-40);
+  --color-accent-40: color-mix(in srgb, var(--color-accent-50) 72%, white);
+  --color-accent-50: var(--color-base-accent, var(--color-green-50));
+  --color-accent-60: color-mix(in srgb, var(--color-accent-50) 84%, black);
+  --color-accent-70: color-mix(in srgb, var(--color-accent-50) 68%, black);
+  --color-accent-80: var(--color-base-accent-bg, color-mix(in srgb, var(--color-accent-50) 52%, black));
+  --color-accent-alpha-5: color-mix(in srgb, var(--color-accent-50) 5%, transparent);
+  --color-accent-alpha-10: color-mix(in srgb, var(--color-accent-50) 10%, transparent);
+  --color-accent-alpha-20: color-mix(in srgb, var(--color-accent-50) 20%, transparent);
+  --color-accent-alpha-30: color-mix(in srgb, var(--color-accent-50) 30%, transparent);
+  --color-accent-alpha-40: color-mix(in srgb, var(--color-accent-50) 40%, transparent);
 
   /* Neutral */
   --color-neutral-5: var(--color-grey-5);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "scripts": {
     "dev": "vite dev",
     "dev:clean": "npm run clean && vite dev",
@@ -82,7 +82,7 @@
   "type": "module",
   "dependencies": {
     "@floating-ui/core": "^1.5.1",
-    "@invopop/ui-icons": "0.0.71",
+    "@invopop/ui-icons": "0.0.72",
     "@steeze-ui/heroicons": "^2.2.3",
     "@steeze-ui/svelte-icon": "^1.6.2",
     "@tailwindcss/vite": "^4.1.12",