@immich/ui 0.62.2 → 0.64.0

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -22,14 +22,17 @@
   }: ContextMenuProps = $props();
 
   const itemStyles = tv({
-    base: 'hover:bg-light-200 flex w-full items-center gap-1 rounded-lg p-1 text-start hover:cursor-pointer',
+    base: 'data-highlighted:bg-light-200 flex items-center gap-1 rounded-lg p-1 text-start outline-none hover:cursor-pointer',
     variants: {
       color: styleVariants.textColor,
+      inset: {
+        true: 'mx-1',
+      },
     },
   });
 
   const wrapperStyles = tv({
-    base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm',
+    base: 'bg-light-100 dark:border-light-300 flex flex-col gap-1 overflow-hidden rounded-xl border py-1 shadow-sm outline-none',
     variants: {
       size: {
         tiny: 'w-32',
@@ -130,14 +133,12 @@
                     textValue={item.title}
                     closeOnSelect
                     onSelect={() => item.onAction(item)}
-                    class="px-1"
+                    class={itemStyles({ color: item.color, inset: true })}
                   >
-                    <div class={itemStyles({ color: item.color })}>
-                      {#if item.icon}
-                        <Icon icon={item.icon} class="m-2 shrink-0" />
-                      {/if}
-                      <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
-                    </div>
+                    {#if item.icon}
+                      <Icon icon={item.icon} class="m-2 shrink-0" />
+                    {/if}
+                    <Text class="grow text-start font-medium select-none" size="medium">{item.title}</Text>
                   </DropdownMenu.Item>
                 {/if}
               {/each}
@@ -152,10 +153,9 @@
                         closeOnSelect
                         onSelect={() => item.onAction(item)}
                         title={item.title}
+                        class={itemStyles({ color: item.color })}
                       >
-                        <div class={cleanClass(itemStyles({ color: item.color }))}>
-                          <Icon icon={item.icon} class="m-2 shrink-0" />
-                        </div>
+                        <Icon icon={item.icon} class="m-2 shrink-0" />
                       </DropdownMenu.Item>
                     {/if}
                   {/each}

package/dist/components/FormModal/FormModal.svelte

@@ -20,6 +20,7 @@
     size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
+    onOpenAutoFocus?: (event: Event) => void;
     onReset?: (event: Event) => void;
     onSubmit: (event: SubmitEvent) => void;
     children: Snippet<[{ formId: string }]>;
@@ -36,6 +37,7 @@
     size = 'small',
     preventDefault = true,
     onClose = () => {},
+    onOpenAutoFocus,
     onReset,
     onSubmit,
     children,
@@ -60,7 +62,7 @@
   const formId = generateId();
 </script>
 
-<Modal {title} {onClose} {size} {icon}>
+<Modal {title} {onClose} {size} {icon} {onOpenAutoFocus}>
   <ModalBody>
     <form {onsubmit} {onreset} id={formId}>
       {@render children({ formId })}

package/dist/components/FormModal/FormModal.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     size?: ModalSize;
     preventDefault?: boolean;
     onClose: () => void;
+    onOpenAutoFocus?: (event: Event) => void;
     onReset?: (event: Event) => void;
     onSubmit: (event: SubmitEvent) => void;
     children: Snippet<[{

package/dist/components/Modal/Modal.svelte

@@ -28,6 +28,7 @@
     children: Snippet;
     onClose?: () => void;
     onEscapeKeydown?: (event: KeyboardEvent) => void;
+    onOpenAutoFocus?: (event: Event) => void;
   };
 
   let {
@@ -40,6 +41,7 @@
     closeOnEsc = true,
     closeOnBackdropClick = false,
     children,
+    onOpenAutoFocus,
   }: Props = $props();
 
   const modalStyles = tv({
@@ -105,6 +107,7 @@
   <Dialog.Portal>
     <Dialog.Overlay class="{zIndex.ModalBackdrop} fixed start-0 top-0  flex h-dvh max-h-dvh w-screen bg-black/30" />
     <Dialog.Content
+      {onOpenAutoFocus}
       onEscapeKeydown={handleEscapeKeydown}
       {escapeKeydownBehavior}
       {interactOutsideBehavior}

package/dist/components/Modal/Modal.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     children: Snippet;
     onClose?: () => void;
     onEscapeKeydown?: (event: KeyboardEvent) => void;
+    onOpenAutoFocus?: (event: Event) => void;
 };
 declare const Modal: import("svelte").Component<Props, {}, "">;
 type Modal = ReturnType<typeof Modal>;

package/dist/components/Textarea/Textarea.svelte

@@ -5,8 +5,6 @@
   import { styleVariants } from '../../styles.js';
   import type { TextareaProps } from '../../types.js';
   import { cleanClass, generateId } from '../../utilities/internal.js';
-  import { onMount } from 'svelte';
-  import type { FormEventHandler } from 'svelte/elements';
   import { tv } from 'tailwind-variants';
 
   let {
@@ -75,12 +73,10 @@
     }
   };
 
-  const onInput: FormEventHandler<HTMLTextAreaElement> = (event) => {
-    autogrow(event.target as HTMLTextAreaElement);
-    restProps?.oninput?.(event);
-  };
-
-  onMount(() => autogrow(ref));
+  $effect(() => {
+    void value;
+    autogrow(ref);
+  });
 </script>
 
 <div class="flex w-full flex-col gap-1" bind:this={containerRef}>
@@ -94,7 +90,6 @@
 
   <div class="relative w-full">
     <textarea
-      oninput={onInput}
       id={inputId}
       aria-labelledby={label && labelId}
       required={!!required}

package/dist/internal/Select.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" generics="T extends string">
   import { getFieldContext } from '../common/context.svelte.js';
   import Icon from '../components/Icon/Icon.svelte';
-  import IconButton from '../components/IconButton/IconButton.svelte';
-  import Input from '../components/Input/Input.svelte';
+  import Label from '../components/Label/Label.svelte';
+  import Text from '../components/Text/Text.svelte';
   import { zIndex } from '../constants.js';
-  import { t } from '../services/translation.svelte.js';
+  import { styleVariants } from '../styles.js';
   import type { SelectCommonProps, SelectOption } from '../types.js';
-  import { cleanClass } from '../utilities/internal.js';
+  import { cleanClass, generateId } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
   import { Select } from 'bits-ui';
   import { tv } from 'tailwind-variants';
@@ -21,7 +21,7 @@
 
   let {
     options: optionsOrItems,
-    shape,
+    shape = 'semi-round',
     size: initialSize,
     multiple = false,
     values = $bindable([]),
@@ -44,34 +44,105 @@
   };
 
   const context = getFieldContext();
-  const { invalid, disabled, ...labelProps } = $derived(context());
+  const { label, description, required, invalid, disabled, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
+  const roundedSize = $derived(shape === 'semi-round' ? size : undefined);
   const options = $derived(asOptions(optionsOrItems));
 
   const findOption = (value: string) => options.find((option) => option.value === value);
   const valuesToOptions = (values: T[]) =>
     values.map(findOption).filter((item): item is SelectOption<T> => Boolean(item));
 
+  let open = $state(false);
+  let triggerRef = $state<HTMLButtonElement | null>(null);
+  let internalValue = $derived(multiple ? values : (values[0] ?? ''));
   const selectedLabel = $derived(asLabel(valuesToOptions(values)));
 
+  const id = generateId();
+  const triggerId = `trigger-${id}`;
+  const descriptionId = $derived(description ? `description-${id}` : undefined);
+
   const triggerStyles = tv({
-    base: 'w-full gap-1 rounded-lg py-0 text-start focus-visible:outline-none',
+    base: 'w-full gap-1 p-0 text-start ring-1 ring-gray-200 outline-none focus-visible:outline-none dark:ring-neutral-900',
     variants: {
+      disabled: {
+        true: 'cursor-not-allowed',
+        false: 'cursor-pointer',
+      },
+      shape: styleVariants.shape,
+      roundedSize: styleVariants.inputRoundedSize,
       invalid: {
-        true: 'border-danger border',
+        true: 'ring-danger-300 dark:ring-danger-300 focus-visible:ring-danger dark:focus-visible:ring-danger',
+        false: 'focus-visible:ring-primary dark:focus-visible:ring-primary',
+      },
+    },
+  });
+
+  const containerStyles = tv({
+    base: 'flex w-full items-center bg-gray-100 dark:bg-gray-800',
+    variants: {
+      shape: styleVariants.shape,
+      roundedSize: styleVariants.inputRoundedSize,
+      disabled: {
+        true: 'bg-light-300 dark:bg-gray-900',
         false: '',
       },
     },
   });
 
-  let inputRef = $state<HTMLInputElement | null>(null);
-  let contentRef = $state<HTMLElement | null>(null);
-  let ref = $state<HTMLElement | null>(null);
+  const valueStyles = tv({
+    base: 'block w-full min-w-0 flex-1 truncate py-2.5 text-start',
+    variants: {
+      textSize: styleVariants.textSize,
+      height: {
+        tiny: 'h-9',
+        small: 'h-10',
+        medium: 'h-11',
+        large: 'h-12',
+        giant: 'h-12',
+      },
+      leadingPadding: {
+        base: 'pl-4',
+        icon: 'pl-0',
+      },
+      trailingPadding: {
+        base: 'pr-4',
+        icon: 'pr-0',
+      },
+      roundedSize: styleVariants.inputRoundedSize,
+    },
+  });
 
-  $effect(() => {
-    if (ref && contentRef) {
-      contentRef.style.width = `${ref.clientWidth}px`;
-    }
+  const contentStyles = tv({
+    base: cleanClass(
+      'text-dark dark:bg-primary-100 bg-light-100 max-h-96 w-(--bits-select-anchor-width) min-w-(--bits-select-anchor-width) border py-3 outline-none select-none',
+      zIndex.SelectDropdown,
+    ),
+    variants: {
+      shape: {
+        rectangle: 'rounded-none',
+        'semi-round': '',
+        round: 'rounded-2xl',
+      },
+      roundedSize: styleVariants.inputRoundedSize,
+    },
+  });
+
+  const itemStyles = tv({
+    base: 'hover:bg-light-200 hover:dark:bg-primary-200 data-highlighted:bg-light-200 dark:data-highlighted:bg-primary-200 flex w-full items-center duration-75 outline-none select-none data-disabled:opacity-50',
+    variants: {
+      size: {
+        tiny: 'h-9 px-4 text-xs',
+        small: 'h-10 px-5 text-sm',
+        medium: 'h-11 px-5 text-base',
+        large: 'h-12 px-5 text-lg',
+        giant: 'h-12 px-6 text-xl',
+      },
+      disabled: {
+        true: 'cursor-not-allowed',
+        false: 'cursor-pointer',
+      },
+    },
   });
 
   const onValueChange = (newValues: string[] | string) => {
@@ -83,61 +154,85 @@
     onChange?.(values);
     onItemChange?.(items);
   };
-
-  let internalValue = $derived(multiple ? values : (values[0] ?? ''));
 </script>
 
-<div class={cleanClass('flex flex-col gap-1', className)} bind:this={ref}>
-  <Select.Root type={multiple ? 'multiple' : 'single'} bind:value={internalValue as never} {onValueChange}>
-    <Select.Trigger {disabled} class={cleanClass(triggerStyles({ invalid: false }))} aria-label={placeholder}>
-      <Input
-        bind:containerRef={inputRef}
-        {size}
-        {shape}
-        {placeholder}
-        value={selectedLabel}
-        readonly
-        class={cleanClass('text-start', invalid && 'border-danger')}
+<div class={cleanClass('flex w-full flex-col gap-1', className)}>
+  {#if label}
+    <Label
+      {...labelProps}
+      {label}
+      {size}
+      requiredIndicator={required === 'indicator'}
+      for={triggerId}
+      onclick={() => {
+        if (disabled) {
+          return;
+        }
+        open = true;
+        triggerRef?.focus();
+      }}
+    />
+  {/if}
+
+  {#if description}
+    <Text color="muted" size="small" id={descriptionId} class="mb-2">{description}</Text>
+  {/if}
+
+  <Select.Root
+    type={multiple ? 'multiple' : 'single'}
+    bind:value={internalValue as never}
+    bind:open
+    items={options.map(({ value, label, disabled }) => ({ value, label: label ?? value, disabled }))}
+    {onValueChange}
+  >
+    <Select.Trigger
+      bind:ref={triggerRef}
+      {disabled}
+      id={triggerId}
+      class={triggerStyles({
+        disabled,
+        invalid,
+        shape,
+        roundedSize,
+      })}
+      aria-describedby={descriptionId}
+      aria-label={label ? undefined : placeholder}
+    >
+      <div
+        class={containerStyles({
+          disabled,
+          shape,
+          roundedSize,
+        })}
       >
-        {#snippet trailingIcon()}
-          <IconButton
-            variant="ghost"
-            shape="round"
-            color="secondary"
-            size="tiny"
-            class="m-1"
-            icon={mdiChevronDown}
-            {disabled}
-            aria-label={t('expand')}
-          />
-        {/snippet}
-      </Input>
+        <span
+          class={cleanClass(
+            valueStyles({
+              textSize: size,
+              height: size,
+              leadingPadding: 'base',
+              trailingPadding: 'icon',
+              roundedSize,
+            }),
+            !selectedLabel && placeholder && 'text-gray-600 dark:text-gray-400',
+          )}
+        >
+          {selectedLabel || placeholder}
+        </span>
+
+        <Icon icon={mdiChevronDown} class={cleanClass('mx-3 shrink-0')} aria-hidden />
+      </div>
     </Select.Trigger>
     <Select.Portal>
-      <Select.Content
-        bind:ref={contentRef}
-        class="text-dark dark:bg-primary-100 bg-light-100 max-h-96 rounded-xl border py-3 outline-none select-none {zIndex.SelectDropdown}"
-        customAnchor={inputRef}
-        sideOffset={4}
-      >
+      <Select.Content class={contentStyles({ shape, roundedSize })} sideOffset={4}>
         <Select.ScrollUpButton class="flex w-full items-center justify-center">
           <Icon icon={mdiArrowUp} />
         </Select.ScrollUpButton>
         <Select.Viewport>
           {#each options as { value, label, disabled }, i (i + value)}
-            <Select.Item
-              class={cleanClass(
-                'hover:bg-light-200 hover:dark:bg-primary-200 data-selected:bg-light-200 dark:data-selected:bg-primary-200 flex h-10 w-full items-center px-5 py-3 text-sm duration-75 outline-none select-none data-disabled:opacity-50',
-                disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-              )}
-              {value}
-              {label}
-              {disabled}
-            >
+            <Select.Item class={cleanClass(itemStyles({ size, disabled }))} {value} {label} {disabled}>
               {#snippet children({ selected })}
-                <div
-                  class="flex items-center justify-center gap-2 text-sm font-medium whitespace-nowrap transition-colors"
-                >
+                <div class="flex items-center justify-center gap-2 font-medium whitespace-nowrap transition-colors">
                   <span>{label}</span>
                 </div>
                 {#if selected}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.62.2",
+  "version": "0.64.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",
@@ -49,7 +49,7 @@
   "dependencies": {
     "@internationalized/date": "^3.10.0",
     "@mdi/js": "^7.4.47",
-    "bits-ui": "^2.9.8",
+    "bits-ui": "^2.15.7",
     "luxon": "^3.7.2",
     "simple-icons": "^16.0.0",
     "svelte-highlight": "^7.8.4",
@@ -58,7 +58,7 @@
     "@immich/svelte-markdown-preprocess": "^0.2.1"
   },
   "volta": {
-    "node": "24.13.0"
+    "node": "24.13.1"
   },
   "scripts": {
     "create": "node scripts/create.js",