@immich/ui 0.62.0 → 0.62.2

package/dist/components/Card/Card.svelte

@@ -2,6 +2,7 @@
   import { setChildContext } from '../../common/context.svelte.js';
   import IconButton from '../IconButton/IconButton.svelte';
   import { ChildKey } from '../../constants.js';
+  import { t } from '../../services/translation.svelte.js';
   import type { Color } from '../../types.js';
   import { cleanClass } from '../../utilities/internal.js';
   import { mdiChevronDown } from '@mdi/js';
@@ -114,7 +115,7 @@
           variant="ghost"
           shape="round"
           size="large"
-          aria-label="Expand"
+          aria-label={t('expand')}
         />
       </div>
     </button>

package/dist/internal/DatePicker.svelte

@@ -4,10 +4,11 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Label from '../components/Label/Label.svelte';
   import { zIndex } from '../constants.js';
+  import { t } from '../services/translation.svelte.js';
   import { getLocale } from '../state/locale-state.svelte.js';
   import { styleVariants } from '../styles.js';
   import type { Shape, Size } from '../types.js';
-  import { cleanClass, generateId } from '../utilities/internal.js';
+  import { cleanClass } from '../utilities/internal.js';
   import type { DateValue } from '@internationalized/date';
   import { mdiCalendar, mdiChevronLeft, mdiChevronRight } from '@mdi/js';
   import { DatePicker } from 'bits-ui';
@@ -37,10 +38,6 @@
   const { readOnly, required, invalid, disabled, label, ...labelProps } = $derived(context());
   const size = $derived(initialSize ?? labelProps.size ?? 'small');
 
-  const id = generateId();
-  const inputId = `datepicker-${id}`;
-  const labelId = `label-${id}`;
-
   const containerStyles = tv({
     base: cleanClass(styleVariants.inputContainerCommon, 'flex w-full items-center'),
     variants: {
@@ -66,10 +63,6 @@
 </script>
 
 <div class={cleanClass('flex w-full flex-col gap-1', className)}>
-  {#if label}
-    <Label id={labelId} for={inputId} {label} requiredIndicator={required === 'indicator'} {...labelProps} {size} />
-  {/if}
-
   <DatePicker.Root
     onValueChange={onChange}
     minValue={minDate}
@@ -79,9 +72,22 @@
     locale={getLocale()}
     {disabled}
   >
+    {#if label}
+      <DatePicker.Label>
+        {#snippet child({ props })}
+          <Label
+            {...labelProps}
+            {...props}
+            class={cleanClass(labelProps.class, props.class)}
+            requiredIndicator={required === 'indicator'}
+            {label}
+            {size}
+          />
+        {/snippet}
+      </DatePicker.Label>
+    {/if}
+
     <DatePicker.Input
-      id={inputId}
-      aria-labelledby={labelId}
       class={containerStyles({
         shape,
         roundedSize: shape === 'semi-round' ? size : undefined,
@@ -104,7 +110,7 @@
             {size}
             icon={mdiCalendar}
             {disabled}
-            aria-label="Open calendar"
+            aria-label={t('open_calendar')}
           />
         </DatePicker.Trigger>
       {/snippet}

package/dist/internal/Select.svelte

@@ -4,6 +4,7 @@
   import IconButton from '../components/IconButton/IconButton.svelte';
   import Input from '../components/Input/Input.svelte';
   import { zIndex } from '../constants.js';
+  import { t } from '../services/translation.svelte.js';
   import type { SelectCommonProps, SelectOption } from '../types.js';
   import { cleanClass } from '../utilities/internal.js';
   import { mdiArrowDown, mdiArrowUp, mdiCheck, mdiChevronDown } from '@mdi/js';
@@ -107,7 +108,7 @@
             class="m-1"
             icon={mdiChevronDown}
             {disabled}
-            aria-label="Expand"
+            aria-label={t('expand')}
           />
         {/snippet}
       </Input>

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

@@ -1,5 +1,5 @@
 import type { ActionItem, MaybePromise, TranslationProps } from '../types.js';
-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 type CommandPaletteTranslations = TranslationProps<'search_placeholder' | 'search_no_results' | 'command_palette_prompt_default' | 'command_palette_to_select' | 'command_palette_to_close' | 'command_palette_to_navigate' | 'command_palette_to_show_all'>;
 export type ActionProvider = {
     name: string;
     onSearch: (query?: string) => MaybePromise<ActionItem[]>;

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

@@ -9,7 +9,6 @@ declare const defaultTranslations: {
     code_copied: string;
     search_placeholder: string;
     search_no_results: string;
-    search_recently_used: string;
     prompt_default: string;
     show_password: string;
     hide_password: string;
@@ -22,13 +21,13 @@ declare const defaultTranslations: {
     command_palette_to_show_all: string;
     navigate_next: string;
     navigate_previous: string;
+    open_calendar: string;
     toast_success_title: string;
     toast_info_title: string;
     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

@@ -11,7 +11,6 @@ const defaultTranslations = {
     // search
     search_placeholder: 'Search...',
     search_no_results: 'No results',
-    search_recently_used: 'Recently used',
     // modal
     prompt_default: 'Are you sure you want to do this?',
     // password input
@@ -30,13 +29,14 @@ const defaultTranslations = {
     // navigation
     navigate_next: 'Next',
     navigate_previous: 'Previous',
+    // date picker
+    open_calendar: 'Open calendar',
     toast_success_title: 'Success',
     toast_info_title: 'Info',
     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/package.json

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