@immich/ui 0.45.1 → 0.46.0

package/dist/components/Badge/Badge.svelte

@@ -28,27 +28,32 @@
     variants: {
       shape: styleVariants.shape,
       color: {
-        primary: 'bg-primary-200 text-primary-950 dark:text-primary-50 dark:bg-primary-800',
-        secondary: 'bg-neutral-200 text-neutral-950 dark:bg-neutral-800 dark:text-neutral-50',
-        success: 'bg-success-200 text-success-950 dark:text-success-50 dark:bg-success-800',
-        danger: 'bg-danger-200 text-danger-950 dark:text-danger-50 dark:bg-danger-800',
-        warning: 'bg-warning-200 text-warning-950 dark:text-warning-50 dark:bg-warning-800',
-        info: 'bg-info-200 text-info-950 dark:text-info-50 dark:bg-info-800',
+        primary:
+          'bg-primary-100 border-primary-100 text-primary-950 dark:text-primary-50 dark:bg-primary-800 dark:border-primary-800',
+        secondary:
+          'border-neutral-20 bg-neutral-100 text-neutral-950 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-50',
+        success:
+          'border-success-100 bg-success-100 text-success-950 dark:text-success-50 dark:bg-success-800 dark:border-success-800',
+        info: 'border-info-100 bg-info-200 text-info-950 dark:text-info-50 dark:bg-info-800 dark:border-info-800',
+        warning:
+          'border-warning-100 bg-warning-200 text-warning-950 dark:text-warning-50 dark:bg-warning-800 dark:border-warning-800',
+        danger:
+          'border-danger-100 bg-danger-200 text-danger-950 dark:text-danger-50 dark:bg-danger-900 dark:border-danger-800',
       },
       textSize: styleVariants.textSize,
       paddingSize: {
-        tiny: 'px-1 py-0.5',
-        small: 'px-2 py-0.5',
-        medium: 'px-2 py-0.5',
-        large: 'px-2 py-1.5',
-        giant: 'px-3 py-1',
+        tiny: 'px-1.5 py-px',
+        small: 'px-1.75 py-0.5',
+        medium: 'px-2.5 py-0.75',
+        large: 'px-2.75 py-1',
+        giant: 'px-3 py-1.25',
       },
       roundedSize: {
-        tiny: 'rounded-sm',
-        small: 'rounded-sm',
-        medium: 'rounded-sm',
-        large: 'rounded-md',
-        giant: 'rounded-md',
+        tiny: 'rounded-md',
+        small: 'rounded-md',
+        medium: 'rounded-md',
+        large: 'rounded-lg',
+        giant: 'rounded-lg',
       },
     },
   });

package/dist/components/Card/Card.svelte

@@ -6,6 +6,8 @@
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
+  import { slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
   import { type Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
   import { twMerge } from 'tailwind-merge';
@@ -49,12 +51,12 @@
     base: 'flex w-full grow flex-col',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-900',
-        secondary: 'text-dark bg-gray-100 dark:bg-neutral-900 dark:text-white',
-        success: 'bg-success-100 dark:bg-success-900',
-        danger: 'bg-danger-100 dark:bg-danger-900',
-        warning: 'bg-warning-100 dark:bg-warning-900',
-        info: 'bg-info-100 dark:bg-info-900',
+        primary: 'bg-primary-50 dark:bg-primary-900',
+        secondary: 'text-dark bg-neutral-50 dark:bg-neutral-900 dark:text-white',
+        success: 'bg-success-50 dark:bg-success-900',
+        danger: 'bg-danger-50 dark:bg-danger-900',
+        warning: 'bg-warning-50 dark:bg-warning-900',
+        info: 'bg-info-50 dark:bg-info-900',
       },
     },
   });
@@ -134,9 +136,11 @@
     {/if}
 
     {#if bodyChild && expanded}
-      <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
-        {@render bodyChild?.snippet()}
-      </Scrollable>
+      <div transition:slide={{ duration: expandable ? 200 : 0, easing: cubicOut }}>
+        <Scrollable class={twMerge(cleanClass('p-4', bodyChild?.class))}>
+          {@render bodyChild?.snippet()}
+        </Scrollable>
+      </div>
     {/if}
 
     {#if footerChild}

package/dist/components/CommandPalette/CommandPaletteContext.svelte

@@ -11,7 +11,7 @@
 
   $effect(() => {
     // prevent reactivity loop
-    const addCommands = (commands: CommandItem[], global?: boolean) =>
+    const addCommands = (commands: CommandItem[], global: boolean = false) =>
       untrack(() => commandPaletteManager.addCommands(commands, { global }));
 
     return addCommands(commands, global);

package/dist/components/CommandPalette/CommandPaletteItem.svelte

@@ -5,11 +5,12 @@
   import IconButton from '../IconButton/IconButton.svelte';
   import Kbd from '../Kbd/Kbd.svelte';
   import Text from '../Text/Text.svelte';
-  import type { CommandItem } from '../../services/command-palette-manager.svelte';
+  import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
   import { mdiClose } from '@mdi/js';
+  import Badge from '../Badge/Badge.svelte';
 
   type Props = {
-    item: CommandItem;
+    item: CommandItemResponse;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;
@@ -41,46 +42,48 @@
     fullWidth
     variant={selected ? 'outline' : 'ghost'}
     color="secondary"
-    class="overflow-hidden border"
+    class="flex justify-between gap-3 border text-start {selected ? 'border-neutral-500!' : ''}"
   >
-    <div class="flex w-full place-items-center justify-between gap-2">
-      <div class="flex min-w-0 place-items-center gap-2">
-        <Icon icon={item.icon} size="2rem" class={item.iconClass} />
-        <div class="flex min-w-0 flex-col">
-          <div class="flex place-items-center gap-1">
-            <Text fontWeight="bold">{item.title}</Text>
-          </div>
-          {#if item.description}
-            <Text
-              size="small"
-              class="overflow-hidden text-ellipsis whitespace-nowrap"
-              color={selected ? undefined : 'muted'}>{item.description}</Text
-            >
-          {/if}
-        </div>
+    <div class="flex flex-col">
+      <div class="flex items-center gap-1">
+        <Text fontWeight="bold">{item.title}</Text>
+        <Icon icon={item.icon} size="1.25rem" class={item.iconClass} />
       </div>
-      <div class="flex flex-col items-end gap-1">
-        {#if onRemove}
-          <IconButton
-            size="small"
-            onclick={handleRemove}
-            icon={mdiClose}
-            shape="round"
-            variant="ghost"
-            color="secondary"
-            aria-label="Remove"
-          />
-        {:else}
-          <span class="shrink-0">[{item.type}]</span>
-        {/if}
-        {#if renderedShortcuts.length > 0}
-          <div class="flex justify-end gap-1">
-            {#each renderedShortcuts[0] as key (key)}
-              <Kbd size="small">{key}</Kbd>
-            {/each}
-          </div>
+      {#if item.description}
+        <Text
+          size="small"
+          class="mt-0.5 line-clamp-4 w-full overflow-hidden text-ellipsis md:line-clamp-2"
+          color="muted">{item.description}</Text
+        >
+      {/if}
+      <div class="mt-2">
+        <Badge size="small" color="primary" shape="rectangle">{item.type}</Badge>
+        {#if item.isGlobal}
+          <Badge size="small" shape="rectangle" color="warning">Global</Badge>
         {/if}
       </div>
     </div>
+    {#if onRemove}
+      <IconButton
+        size="small"
+        onclick={handleRemove}
+        class="shrink-0"
+        icon={mdiClose}
+        shape="round"
+        variant="ghost"
+        color="secondary"
+        aria-label="Remove"
+      />
+    {:else if renderedShortcuts.length > 0}
+      <div class="flex shrink-0 flex-col justify-end gap-1">
+        {#each renderedShortcuts as shortcut (shortcut.join('-'))}
+          <div class="flex justify-end">
+            <Kbd size="tiny" class={selected ? '' : 'border-neutral-200 dark:border-neutral-700'}
+              >{shortcut.join(' ')}</Kbd
+            >
+          </div>
+        {/each}
+      </div>
+    {/if}
   </Button>
 </div>

package/dist/components/CommandPalette/CommandPaletteItem.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { CommandItem } from '../../services/command-palette-manager.svelte';
+import type { CommandItemResponse } from '../../services/command-palette-manager.svelte';
 type Props = {
-    item: CommandItem;
+    item: CommandItemResponse;
     selected: boolean;
     onSelect: () => void;
     onRemove?: () => void;

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -25,14 +25,14 @@
   };
 
   const itemStyles = tv({
-    base: 'hover:bg-subtle flex w-full items-center gap-1 rounded-md px-1 py-0.5 text-start',
+    base: 'dark:hover:bg-primary-800 hover:bg-primary-100 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
     variants: {
       color: styleVariants.textColor,
     },
   });
 
   const wrapperStyles = tv({
-    base: 'bg-light flex flex-col gap-1 overflow-hidden rounded-lg border py-1',
+    base: 'flex flex-col gap-1 overflow-hidden rounded-xl border bg-neutral-100 py-1 shadow-sm dark:border-neutral-700 dark:bg-neutral-900',
     variants: {
       size: {
         tiny: 'w-32',
@@ -102,7 +102,7 @@
             <div {...props} {...restProps} class={cleanClass(wrapperStyles({ size }), className)} transition:fly>
               {#each filteredItems as item, i (isDivider(item) ? i : item.title)}
                 {#if isDivider(item)}
-                  <DropdownMenu.Separator class="my-0.5 border-t" />
+                  <DropdownMenu.Separator class="my-0.5 border-t dark:border-neutral-700" />
                 {:else}
                   <DropdownMenu.Item
                     textValue={item.title}
@@ -112,14 +112,14 @@
                   >
                     <div class={itemStyles({ color: item.color })}>
                       <Icon icon={item.icon} class="m-2 shrink-0" />
-                      <Text class="grow text-start">{item.title}</Text>
+                      <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
                     </div>
                   </DropdownMenu.Item>
                 {/if}
               {/each}
 
               {#if filteredBottomItems}
-                <DropdownMenu.Separator class="my-0.5 border-t" />
+                <DropdownMenu.Separator class="my-0.5 border-t dark:border-neutral-700" />
                 <div class="flex gap-1 px-1">
                   {#each filteredBottomItems as item (item.title)}
                     <DropdownMenu.Item

package/dist/components/Input/Input.svelte

@@ -50,7 +50,7 @@
   });
 
   const inputStyles = tv({
-    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2'),
+    base: cleanClass(styleVariants.inputCommon, 'flex-1 py-2.5'),
     variants: {
       textSize: styleVariants.textSize,
       leadingPadding: {
@@ -88,18 +88,11 @@
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
   {#if label}
-    <Label
-      id={labelId}
-      for={inputId}
-      {label}
-      requiredIndicator={required === 'indicator'}
-      {...labelProps}
-      class="font-medium"
-    />
+    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
   {/if}
 
   {#if description}
-    <Text color="muted" size="small" id={descriptionId} class="mb-1">{description}</Text>
+    <Text color="muted" size="small" id={descriptionId} class="mb-2">{description}</Text>
   {/if}
 
   <div

package/dist/components/Label/Label.svelte

@@ -7,7 +7,7 @@
   const { label, size, color, class: className, children, requiredIndicator, ...restProps }: LabelProps = $props();
 
   const styles = tv({
-    base: '',
+    base: 'font-medium',
     variants: {
       size: styleVariants.textSize,
       color: styleVariants.textColor,

package/dist/components/Modal/Modal.svelte

@@ -99,7 +99,7 @@
       {interactOutsideBehavior}
       class={cleanClass(modalContentStyles({ size }))}
     >
-      <div class={cleanClass('flex grow flex-col justify-center')}>
+      <div class={cleanClass('flex w-full grow flex-col justify-center')}>
         <Card bind:ref={cardRef} class={cleanClass(modalStyles({ size }), className)}>
           <CardHeader class="border-b border-gray-200 px-5 py-3 dark:border-white/10">
             {#if headerChildren}

package/dist/components/SupporterBadge/SupporterBadge.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Logo from '../Logo/Logo.svelte';
   import Text from '../Text/Text.svelte';
+  import { t } from '../../services/translation.svelte.js';
   import type { Size } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import type { Snippet } from 'svelte';
@@ -13,7 +14,7 @@
     children?: Snippet;
   };
 
-  const { effect = 'hover', text = 'Supporter', size = 'medium', children }: Props = $props();
+  const { effect = 'hover', text = t('supporter'), size = 'medium', children }: Props = $props();
 
   const iconSize: Record<Size, Size> = {
     tiny: 'tiny',

package/dist/components/Switch/Switch.svelte

@@ -42,12 +42,12 @@
     variants: {
       fillColor: {
         default: 'border-gray-400 bg-gray-200 dark:border-gray-500 dark:bg-gray-800',
-        primary: 'bg-primary-200 dark:bg-primary-800 border-transparent',
-        secondary: 'border-transparent bg-neutral-300 dark:bg-neutral-700',
-        success: 'bg-success-200 dark:bg-success-800 border-transparent',
-        danger: 'bg-danger-200 dark:bg-danger-800 border-transparent',
-        warning: 'bg-warning-200 dark:bg-warning-800 border-transparent',
-        info: 'bg-info-200 dark:bg-info-800 border-transparent',
+        primary: 'bg-primary-100 dark:bg-primary-800 border-transparent',
+        secondary: 'border-transparent bg-neutral-200 dark:bg-neutral-700',
+        success: 'bg-success-100 dark:bg-success-800 border-transparent',
+        danger: 'bg-danger-100 dark:bg-danger-800 border-transparent',
+        warning: 'bg-warning-100 dark:bg-warning-800 border-transparent',
+        info: 'bg-info-100 dark:bg-info-800 border-transparent',
       },
     },
   });
@@ -95,7 +95,7 @@
           <div class="text-start">
             <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} />
             {#if description}
-              <Text color="secondary" size="small" id={descriptionId}>{description}</Text>
+              <Text color="muted" size="small" id={descriptionId}>{description}</Text>
             {/if}
           </div>
         {/if}

package/dist/components/Toast/ToastContainer.svelte

@@ -15,16 +15,15 @@
   }: ToastContainerProps = $props();
 
   const containerStyles = tv({
-    base: 'bg-light text-dark overflow-hidden py-1.5 shadow-xs transition-all',
+    base: 'bg-light text-dark overflow-hidden border py-1.5 shadow-xs transition-all',
     variants: {
       color: {
-        primary: 'bg-primary-100 dark:bg-primary-900',
-        secondary: 'bg-neutral-100 dark:bg-neutral-900',
-        muted: 'bg-subtle dark:bg-subtle',
-        info: 'bg-info-100 dark:bg-info-900',
-        warning: 'bg-warning-100 dark:bg-warning-900',
-        danger: 'bg-danger-100 dark:bg-danger-900',
-        success: 'bg-success-100 dark:bg-success-900',
+        primary: 'border-primary-100 bg-primary-50 dark:bg-primary-900 dark:border-primary-800',
+        secondary: 'border-neutral-200 bg-neutral-50 dark:border-neutral-700 dark:bg-neutral-800',
+        success: 'border-success-100 bg-success-50 dark:bg-success-900 dark:border-success-800',
+        info: 'border-info-100 bg-info-50 dark:bg-info-900 dark:border-info-800',
+        warning: 'border-warning-100 bg-warning-50 dark:bg-warning-900 dark:border-warning-800',
+        danger: 'border-danger-100 bg-danger-50 dark:bg-danger-900 dark:border-danger-800',
       },
       shape: styleVariants.shape,
       size: {

package/dist/components/Toast/ToastContent.svelte

@@ -27,7 +27,20 @@
   );
 
   const iconStyles = tv({
-    base: 'h-10 w-10 shrink-0 py-2',
+    base: 'h-8 w-8 shrink-0 rounded-xl py-1.75',
+    variants: {
+      color: {
+        primary: 'bg-primary-100 dark:bg-primary-800 text-primary',
+        secondary: 'bg-neutral-200 dark:bg-neutral-700',
+        success: 'bg-success-100 dark:bg-success-800 text-success',
+        info: 'bg-info-200 dark:bg-info-800 text-info',
+        warning: 'bg-warning-200 dark:bg-warning-700 text-warning',
+        danger: 'bg-danger-200 dark:bg-danger-800 text-danger',
+      },
+    },
+  });
+
+  const titleStyles = tv({
     variants: {
       color: styleVariants.textColor,
     },
@@ -38,16 +51,16 @@
   {#if typeof text === 'string'}{text}{:else}{@render text()}{/if}
 {/snippet}
 
-<div class="flex items-center px-2">
+<div class="flex items-center px-3">
   <div class="flex items-center">
     {#if icon}
-      <Icon {icon} class={iconStyles({ color })} />
+      <Icon {icon} class={iconStyles({ color })} size="18" />
     {/if}
   </div>
-  <div class="flex grow justify-between">
+  <div class="ms-1 flex grow justify-between">
     <div class="flex flex-col p-2">
       {#if title}
-        <Text fontWeight="bold">{@render resolve(title)}</Text>
+        <Text fontWeight="semi-bold" class={titleStyles({ color })}>{@render resolve(title)}</Text>
       {/if}
       {#if description}
         <Text size="small">{@render resolve(description)}</Text>

package/dist/internal/DatePicker.svelte

@@ -51,7 +51,7 @@
   });
 
   const buttonStyles = tv({
-    base: 'flex h-8 w-8 items-center justify-center rounded-lg transition-colors hover:bg-neutral-200 hover:dark:bg-neutral-700',
+    base: 'flex h-10 w-10 items-center justify-center rounded-lg hover:cursor-pointer hover:bg-neutral-200 hover:dark:bg-neutral-700',
   });
 
   const segmentStyles = tv({
@@ -85,7 +85,7 @@
       })}
     >
       {#snippet children({ segments })}
-        <div class={cleanClass(styleVariants.inputCommon, 'w-full px-4 py-2')}>
+        <div class={cleanClass(styleVariants.inputCommon, 'w-full px-3 py-2 font-medium')}>
           {#each segments as { part, value }, i (`segment-${i}`)}
             <DatePicker.Segment {part} class={segmentStyles({ textSize: size })}>
               {value}
@@ -140,7 +140,7 @@
                       {#each weekDates as date (`date-${date.toString()}`)}
                         <DatePicker.Cell {date} month={month.value} class="flex-1">
                           <DatePicker.Day
-                            class="{buttonStyles()} data-selected:bg-primary data-selected:text-light data-today:border-primary border border-transparent data-disabled:cursor-not-allowed data-disabled:opacity-40 data-outside-month:text-gray-400 data-unavailable:cursor-not-allowed data-unavailable:text-gray-300 data-unavailable:line-through"
+                            class="{buttonStyles()} data-selected:bg-primary data-selected:hover:bg-primary-300 data-selected:text-light data-today:border-primary-200 data-today:dark:border-primary-600 data-today:dark:bg-primary-800 data-today:bg-primary-50 border border-transparent text-sm data-disabled:cursor-not-allowed data-disabled:opacity-40 data-outside-month:text-gray-400 data-unavailable:cursor-not-allowed data-unavailable:text-gray-300 data-unavailable:line-through"
                           >
                             {date.day}
                           </DatePicker.Day>

package/dist/internal/Select.svelte

@@ -84,7 +84,7 @@
   <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
     <Select.Trigger
       {disabled}
-      class="w-full items-center gap-1 rounded-lg focus-visible:outline-none"
+      class="w-full items-center gap-1 rounded-lg py-0 focus-visible:outline-none"
       aria-label={placeholder}
     >
       <Field {readOnly} {required} {disabled} {invalid}>
@@ -104,6 +104,7 @@
               variant="ghost"
               shape="round"
               color="secondary"
+              size="tiny"
               class="m-1"
               icon={mdiUnfoldMoreHorizontal}
               {disabled}

package/dist/services/command-palette-manager.svelte.d.ts

@@ -12,28 +12,25 @@ export type CommandItem = {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
+    id?: string;
 } & IfLike & ({
     href: string;
 } | {
-    action: (command: CommandItem) => void;
+    action: (command: CommandItemResponse) => void;
 });
-export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
+export type CommandItemResponse = CommandItem & {
+    id: string;
+    isGlobal: boolean;
+};
+export type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'search_recently_used' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all' | 'global'>;
 export declare const asText: (...items: unknown[]) => string;
 declare class CommandPaletteManager {
     #private;
     selectedIndex: number;
-    items: (CommandItem & {
-        id: string;
-    })[];
-    filteredItems: (CommandItem & {
-        id: string;
-    })[];
-    recentItems: (CommandItem & {
-        id: string;
-    })[];
-    results: (CommandItem & {
-        id: string;
-    })[];
+    items: CommandItemResponse[];
+    filteredItems: CommandItemResponse[];
+    recentItems: CommandItemResponse[];
+    results: CommandItemResponse[];
     get isEnabled(): boolean;
     enable(): void;
     get query(): string;
@@ -50,10 +47,8 @@ declare class CommandPaletteManager {
     up(): void;
     down(): void;
     reset(): void;
-    addCommands(itemOrItems: MaybeArray<CommandItem & {
-        id?: string;
-    }>, options?: {
-        global?: boolean;
+    addCommands(itemOrItems: MaybeArray<CommandItem>, options?: {
+        global: boolean;
     }): () => void;
     removeCommands(itemOrItems: MaybeArray<{
         id: string;

package/dist/services/command-palette-manager.svelte.js

@@ -178,9 +178,13 @@ class CommandPaletteManager {
         this.#globalLayer = { items: [], recentItems: [] };
         this.#query = '';
     }
-    addCommands(itemOrItems, options = {}) {
+    addCommands(itemOrItems, options = { global: false }) {
         const items = Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems];
-        const itemsWithId = items.map((item) => ({ ...item, id: item.id ?? generateId() }));
+        const itemsWithId = items.map((item) => ({
+            ...item,
+            id: item.id ?? generateId(),
+            isGlobal: options.global,
+        }));
         if (options.global) {
             this.#globalLayer.items.push(...itemsWithId);
         }

package/dist/services/modal-manager.svelte.d.ts

@@ -9,8 +9,6 @@ type ExtendsEmptyObject<T> = keyof T extends never ? never : T;
 type StripParamIfOptional<T> = T extends void ? [] : [T];
 type OptionalParamIfEmpty<T> = ExtendsEmptyObject<T> extends never ? [] | [Record<string, never> | undefined] : [T];
 declare class ModalManager {
-    #private;
-    get openCount(): number;
     show<T extends object>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): Promise<OnCloseData<T>>;
     open<T extends object, K = OnCloseData<T>>(Component: Component<T>, ...props: OptionalParamIfEmpty<Omit<T, 'onClose'>>): {
         onClose: Promise<K>;

package/dist/services/modal-manager.svelte.js

@@ -1,10 +1,6 @@
 import { mount, unmount } from 'svelte';
 import ConfirmModal from '../components/ConfirmModal/ConfirmModal.svelte';
 class ModalManager {
-    #openCount = $state(0);
-    get openCount() {
-        return this.#openCount;
-    }
     show(Component, ...props) {
         return this.open(Component, ...props).onClose;
     }
@@ -14,7 +10,6 @@ class ModalManager {
         const deferred = new Promise((resolve) => {
             onClose = async (...args) => {
                 await unmount(modal);
-                this.#openCount--;
                 // make sure bits-ui clean up finishes before resolving
                 setTimeout(() => resolve(args[0]), 10);
             };
@@ -25,7 +20,6 @@ class ModalManager {
                     onClose,
                 },
             });
-            this.#openCount++;
         });
         return {
             onClose: deferred,

package/dist/services/translation.svelte.d.ts

@@ -22,6 +22,8 @@ declare const defaultTranslations: {
     toast_warning_title: string;
     toast_danger_title: string;
     save: string;
+    supporter: string;
+    global: string;
 };
 export type Translations = typeof defaultTranslations;
 export declare const translate: <T extends keyof Translations>(key: T, overrides?: TranslationProps<T>) => string;

package/dist/services/translation.svelte.js

@@ -28,6 +28,8 @@ const defaultTranslations = {
     toast_warning_title: 'Warning',
     toast_danger_title: 'Error',
     save: 'Save',
+    supporter: 'Supporter',
+    global: 'Global',
 };
 let translations = $state(defaultTranslations);
 export const translate = (key, overrides) => overrides?.[key] ?? translations[key];

package/dist/styles.js

@@ -13,7 +13,7 @@ export const styleVariants = {
         muted: 'text-gray-600 dark:text-gray-400',
     },
     inputCommon: 'disabled:bg-gray-300 disabled:text-dark dark:disabled:bg-gray-900 dark:disabled:text-gray-200 bg-transparent transition outline-none disabled:cursor-not-allowed ',
-    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-600 dark:ring-black',
+    inputContainerCommon: 'bg-gray-100 ring-1 ring-gray-200 focus-within:ring-primary dark:focus-within:ring-primary transition outline-none focus-within:ring-1 disabled:cursor-not-allowed dark:bg-gray-800 dark:ring-black',
     shape: {
         rectangle: 'rounded-none',
         'semi-round': '',

package/dist/theme/default.css

@@ -83,66 +83,66 @@
   :root,
   .light {
     /* light */
-    --immich-ui-primary-50: oklch(0.949 0.016 282.34);
+    --immich-ui-primary-50: oklch(0.9616 0.0166 271.24);
     --immich-ui-primary-100: oklch(0.897 0.033 281.96);
     --immich-ui-primary-200: oklch(0.787 0.07 281.03);
     --immich-ui-primary-300: oklch(0.686 0.106 278.96);
     --immich-ui-primary-400: oklch(0.577 0.142 275.93);
-    --immich-ui-primary-500: oklch(0.473 0.151 272.94);
+    --immich-ui-primary-500: #4250af;
     --immich-ui-primary-600: oklch(0.404 0.129 273.18);
     --immich-ui-primary-700: oklch(0.343 0.109 272.56);
     --immich-ui-primary-800: oklch(0.272 0.088 272.94);
     --immich-ui-primary-900: oklch(0.211 0.068 273.01);
     --immich-ui-primary-950: oklch(0.15 0.05 273.01);
 
-    --immich-ui-success-50: oklch(0.969 0.048 153.5);
-    --immich-ui-success-100: oklch(0.926 0.124 152.83);
-    --immich-ui-success-200: oklch(0.864 0.223 152.18);
-    --immich-ui-success-300: oklch(0.804 0.206 152.33);
-    --immich-ui-success-400: oklch(0.755 0.194 152.36);
-    --immich-ui-success-500: oklch(0.698 0.179 152.3);
-    --immich-ui-success-600: oklch(0.588 0.151 152.25);
-    --immich-ui-success-700: oklch(0.469 0.12 152.39);
-    --immich-ui-success-800: oklch(0.359 0.093 152.23);
-    --immich-ui-success-900: oklch(0.243 0.063 151.99);
-    --immich-ui-success-950: oklch(0.169 0.042 151.99);
-
-    --immich-ui-danger-50: oklch(0.976 0.008 17.52);
-    --immich-ui-danger-100: oklch(0.951 0.015 17.54);
-    --immich-ui-danger-200: oklch(0.867 0.046 18.1);
-    --immich-ui-danger-300: oklch(0.778 0.085 19.18);
-    --immich-ui-danger-400: oklch(0.696 0.129 20.93);
-    --immich-ui-danger-500: oklch(0.608 0.179 24.17);
-    --immich-ui-danger-600: oklch(0.518 0.153 24.17);
-    --immich-ui-danger-700: oklch(0.422 0.124 24.12);
-    --immich-ui-danger-800: oklch(0.331 0.098 24.2);
-    --immich-ui-danger-900: oklch(0.231 0.069 24.25);
-    --immich-ui-danger-950: oklch(0.184 0.055 24.33);
-
-    --immich-ui-warning: oklch(0.689 0.133 67.56);
-    --immich-ui-warning-50: oklch(0.974 0.013 67.56);
-    --immich-ui-warning-100: oklch(0.947 0.029 67.56);
-    --immich-ui-warning-200: oklch(0.892 0.061 67.56);
-    --immich-ui-warning-300: oklch(0.825 0.097 67.56);
-    --immich-ui-warning-400: oklch(0.757 0.115 67.56);
-    --immich-ui-warning-500: oklch(0.689 0.133 67.56);
-    --immich-ui-warning-600: oklch(0.604 0.117 67.56);
-    --immich-ui-warning-700: oklch(0.509 0.099 67.56);
-    --immich-ui-warning-800: oklch(0.418 0.081 67.56);
-    --immich-ui-warning-900: oklch(0.341 0.066 67.56);
-    --immich-ui-warning-950: oklch(0.273 0.053 67.56);
-
-    --immich-ui-info-50: oklch(0.967 0.018 254.53);
-    --immich-ui-info-100: oklch(0.933 0.037 254.53);
-    --immich-ui-info-200: oklch(0.862 0.078 254.53);
-    --immich-ui-info-300: oklch(0.768 0.126 254.53);
-    --immich-ui-info-400: oklch(0.667 0.152 254.53);
-    --immich-ui-info-500: oklch(0.567 0.177 254.53);
-    --immich-ui-info-600: oklch(0.492 0.155 254.53);
-    --immich-ui-info-700: oklch(0.419 0.132 254.53);
-    --immich-ui-info-800: oklch(0.347 0.109 254.53);
-    --immich-ui-info-900: oklch(0.285 0.089 254.53);
-    --immich-ui-info-950: oklch(0.232 0.073 254.53);
+    --immich-ui-success-50: oklch(0.969 0.051 148.59);
+    --immich-ui-success-100: oklch(0.937 0.109 148.66);
+    --immich-ui-success-200: oklch(0.863 0.249 147.5);
+    --immich-ui-success-300: oklch(0.813 0.234 147.54);
+    --immich-ui-success-400: oklch(0.762 0.219 147.59);
+    --immich-ui-success-500: oklch(0.708 0.204 147.56);
+    --immich-ui-success-600: oklch(0.594 0.171 147.56);
+    --immich-ui-success-700: oklch(0.476 0.136 147.69);
+    --immich-ui-success-800: oklch(0.36 0.104 147.58);
+    --immich-ui-success-900: oklch(0.252 0.073 147.47);
+    --immich-ui-success-950: oklch(0.194 0.056 147.87);
+
+    --immich-ui-danger-50: oklch(0.96 0.018 17.57);
+    --immich-ui-danger-100: oklch(0.926 0.034 17.84);
+    --immich-ui-danger-200: oklch(0.853 0.074 19.77);
+    --immich-ui-danger-300: oklch(0.774 0.125 21.53);
+    --immich-ui-danger-400: oklch(0.701 0.178 23.61);
+    --immich-ui-danger-500: oklch(0.633 0.24 28.79);
+    --immich-ui-danger-600: oklch(0.533 0.204 28.97);
+    --immich-ui-danger-700: oklch(0.433 0.166 28.91);
+    --immich-ui-danger-800: oklch(0.342 0.131 28.79);
+    --immich-ui-danger-900: oklch(0.245 0.094 29.51);
+    --immich-ui-danger-950: oklch(0.186 0.07 29.56);
+
+    --immich-ui-warning: oklch(0.812 0.17 76.3);
+    --immich-ui-warning-50: oklch(0.983 0.01 58.27);
+    --immich-ui-warning-100: oklch(0.959 0.027 63.96);
+    --immich-ui-warning-200: oklch(0.925 0.051 64.24);
+    --immich-ui-warning-300: oklch(0.882 0.086 67.45);
+    --immich-ui-warning-400: oklch(0.85 0.12 70.92);
+    --immich-ui-warning-500: oklch(0.812 0.17 76.3);
+    --immich-ui-warning-600: oklch(0.679 0.142 76.48);
+    --immich-ui-warning-700: oklch(0.539 0.113 76.63);
+    --immich-ui-warning-800: oklch(0.408 0.086 75.75);
+    --immich-ui-warning-900: oklch(0.27 0.057 76.33);
+    --immich-ui-warning-950: oklch(0.209 0.044 77.51);
+
+    --immich-ui-info-50: oklch(0.958 0.02 267.31);
+    --immich-ui-info-100: oklch(0.922 0.036 268.3);
+    --immich-ui-info-200: oklch(0.845 0.073 265.19);
+    --immich-ui-info-300: oklch(0.769 0.114 261.53);
+    --immich-ui-info-400: oklch(0.691 0.159 256.82);
+    --immich-ui-info-500: oklch(0.611 0.177 252.85);
+    --immich-ui-info-600: oklch(0.519 0.149 252.81);
+    --immich-ui-info-700: oklch(0.422 0.123 252.93);
+    --immich-ui-info-800: oklch(0.328 0.096 253.05);
+    --immich-ui-info-900: oklch(0.234 0.067 252.62);
+    --immich-ui-info-950: oklch(0.178 0.052 253.61);
 
     --immich-ui-light: 255 255 255;
     --immich-ui-dark: rgb(63, 60, 60);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.45.1",
+  "version": "0.46.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",