@sveltia/ui 0.72.0 → 0.72.2

package/dist/components/util/modal.svelte

@@ -21,6 +21,7 @@
     unmount,
     untrack,
   } from 'svelte';
+  import { getTransitionTimeout } from './modal.js';
   import Placeholder from './placeholder.svelte';
 
   /**
@@ -193,14 +194,6 @@
     });
   };
 
-  /**
-   * Get the longest time from a computed CSS time list, such as `transition-duration`.
-   * @param {string} value Comma-separated CSS time values in seconds, e.g. `0.4s, 0.15s`.
-   * @returns {number} Time in milliseconds.
-   */
-  const getLongestTime = (value) =>
-    Math.max(0, ...value.split(',').map((time) => Number.parseFloat(time) || 0)) * 1000;
-
   /**
    * Resolve once the transition is complete.
    * @returns {Promise<void>} Nothing.
@@ -213,11 +206,10 @@
       return;
     }
 
-    const { transitionDuration, transitionDelay } = getComputedStyle(dialog);
     // Fall back to a timer, so the modal is never stuck half-open (and, more importantly, never
     // left mounted) in case `transitionend` is never fired, e.g. when the transition is removed by
     // the consumer’s CSS or the element is not rendered at all
-    const timeout = getLongestTime(transitionDuration) + getLongestTime(transitionDelay) + 100;
+    const timeout = getTransitionTimeout(getComputedStyle(dialog));
     const controller = new AbortController();
     const { signal } = controller;
 
@@ -244,6 +236,8 @@
    * Show the modal.
    */
   const openDialog = async () => {
+    // Only called when the `open` prop changes, so it can’t be requested twice in a row
+    /* v8 ignore next */
     if (requestedOpen) {
       return;
     }
@@ -278,8 +272,11 @@
     // such as `<Dialog>`, may then move the focus to a specific control, like an input field.
     await tick();
 
+    // The focus is on `<body>` at this point, because the element was still `inert` when shown
+    /* v8 ignore next */
     if (gen !== generation || !dialog) return;
 
+    /* v8 ignore else */
     if (!dialog.contains(document.activeElement)) {
       focus();
     }
@@ -302,6 +299,8 @@
 
     const gen = generation;
     const wasOpen = setOpenClass;
+    // The element is mounted by the time a close can be requested; see `openDialog()` above
+    /* v8 ignore next */
     const returnValue = dialog?.returnValue ?? '';
 
     onClosing?.(new CustomEvent('Closing'));

package/dist/components/util/popup.svelte

@@ -81,12 +81,23 @@
   let popupInstance = $state();
   let hoveredTimeout = 0;
 
+  // Keep the `open` prop and the instance in sync both ways. The instance opens the popup when
+  // the anchor is activated, and closes it when the backdrop or an item is clicked, or Escape is
+  // pressed; the prop is what a consumer such as `<Combobox>` or `<MenuItem>` toggles from its own
+  // controls. The instance has to follow the prop as well, because it’s the instance that handles
+  // the dismissal, and it ignores a popup it doesn’t know to be open.
   $effect(() => {
     if (popupInstance) {
       open = popupInstance.open;
     }
   });
 
+  $effect(() => {
+    if (popupInstance && popupInstance.open !== open) {
+      popupInstance.open = open;
+    }
+  });
+
   $effect(() => {
     if (parentDialogElement && !dialogElement && content) {
       dialogElement = parentDialogElement;

package/dist/locales/ar.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'خيارات {$name}'
+  x_options: خيارات {$name}
   # Dropdown toggle aria-label
   more_options: خيارات إضافية
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: الخيارات المحددة
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'إزالة {$name}'
+  remove_x: إزالة {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/ca.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opcions de {$name}'
+  x_options: Opcions de {$name}
   # Dropdown toggle aria-label
   more_options: Més opcions
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Opcions seleccionades
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Suprimeix {$name}'
+  remove_x: Suprimeix {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/cs.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Možnosti pro {$name}'
+  x_options: Možnosti pro {$name}
   # Dropdown toggle aria-label
   more_options: Další možnosti
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Vybrané možnosti
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Odebrat {$name}'
+  remove_x: Odebrat {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/da.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Muligheder for {$name}'
+  x_options: Muligheder for {$name}
   # Dropdown toggle aria-label
   more_options: Flere muligheder
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Valgte muligheder
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Fjern {$name}'
+  remove_x: Fjern {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/de.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Optionen für {$name}'
+  x_options: Optionen für {$name}
   # Dropdown toggle aria-label
   more_options: Weitere Optionen
 

package/dist/locales/el.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Επιλογές για {$name}'
+  x_options: Επιλογές για {$name}
   # Dropdown toggle aria-label
   more_options: Περισσότερες επιλογές
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Επιλεγμένες επιλογές
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Κατάργηση {$name}'
+  remove_x: Κατάργηση {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/en-CA.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Remove {$name}'
+  remove_x: Remove {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/en-GB.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Remove {$name}'
+  remove_x: Remove {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/en-US.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Selected Options
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Remove {$name}'
+  remove_x: Remove {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/es-CO.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opciones de {$name}'
+  x_options: Opciones de {$name}
   # Dropdown toggle aria-label
   more_options: Más opciones
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Opciones seleccionadas
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Quitar {$name}'
+  remove_x: Quitar {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/fa.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'گزینه‌های {$name}'
+  x_options: گزینه‌های {$name}
   # Dropdown toggle aria-label
   more_options: گزینه‌های بیشتر
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: گزینه‌های انتخاب‌شده
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'حذف {$name}'
+  remove_x: حذف {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/fi.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Valitut vaihtoehdot
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Poista {$name}'
+  remove_x: Poista {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/fr.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Options de {$name}'
+  x_options: Options de {$name}
   # Dropdown toggle aria-label
   more_options: Plus d’options
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Options sélectionnées
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Retirer {$name}'
+  remove_x: Retirer {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/hr.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opcije za {$name}'
+  x_options: Opcije za {$name}
   # Dropdown toggle aria-label
   more_options: Više opcija
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Odabrane opcije
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Ukloni {$name}'
+  remove_x: Ukloni {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/it.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opzioni {$name}'
+  x_options: Opzioni {$name}
   # Dropdown toggle aria-label
   more_options: Altre Opzioni
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Opzioni Selezionate
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Rimuovi {$name}'
+  remove_x: Rimuovi {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/nl.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opties voor {$name}'
+  x_options: Opties voor {$name}
   # Dropdown toggle aria-label
   more_options: Meer opties
 

package/dist/locales/pl.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opcje {$name}'
+  x_options: Opcje {$name}
   # Dropdown toggle aria-label
   more_options: Więcej opcji
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Wybrane opcje
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Usuń {$name}'
+  remove_x: Usuń {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/pt-BR.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opções de {$name}'
+  x_options: Opções de {$name}
   # Dropdown toggle aria-label
   more_options: Mais opções
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Opções selecionadas
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Remover {$name}'
+  remove_x: Remover {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/pt-PT.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Opções de {$name}'
+  x_options: Opções de {$name}
   # Dropdown toggle aria-label
   more_options: Mais opções
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Opções selecionadas
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Remover {$name}'
+  remove_x: Remover {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/sv.yaml

@@ -36,7 +36,7 @@ calendar:
 # Split button component
 split_button:
   # Wrapper aria-label, e.g. “Save Options” when primary button is “Save”
-  x_options: 'Alternativ för {$name}'
+  x_options: Alternativ för {$name}
   # Dropdown toggle aria-label
   more_options: Fler alternativ
 
@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: Valda inställningar
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: 'Ta bort {$name}'
+  remove_x: Ta bort {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/zh-CN.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: 已选选项
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: '移除 {$name}'
+  remove_x: 移除 {$name}
 
 # Text editor component
 text_editor:

package/dist/locales/zh-TW.yaml

@@ -72,7 +72,7 @@ select_tags:
   # Listbox aria-label
   selected_options: 已選取的選項
   # Remove button aria-label, e.g. “Remove Option 1”
-  remove_x: '移除 {$name}'
+  remove_x: 移除 {$name}
 
 # Text editor component
 text_editor:

package/dist/styles/variables.scss

@@ -227,6 +227,7 @@
     --sui-tree-foreground-color: var(--sui-control-foreground-color);
     --sui-tree-background-color: hsl(var(--sui-background-color-1-hsl));
     --sui-tree-item-border-radius: var(--sui-control-medium-border-radius);
+    --sui-tree-item-padding: var(--sui-option-padding);
     --sui-tree-item-height: var(--sui-control-medium-height);
     --sui-tree-item-indent: 16px;
     // Textbox: singleline & multiline text fields

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.72.0",
+  "version": "0.72.2",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -32,7 +32,8 @@
   },
   "files": [
     "dist",
-    "!dist/**/*.test.*"
+    "!dist/**/*.test.*",
+    "!dist/test-utils"
   ],
   "dependencies": {
     "@lexical/code-core": "^0.50.0",
@@ -56,24 +57,26 @@
     "@sveltejs/kit": "^2.70.3",
     "@sveltejs/package": "^2.5.8",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
+    "@vitest/browser-playwright": "^5.0.0",
     "@vitest/coverage-v8": "^5.0.0",
-    "cspell": "^10.3.0",
+    "cspell": "^10.3.1",
     "eslint": "^9.39.5",
     "eslint-config-airbnb-extended": "^3.2.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^64.3.9",
-    "eslint-plugin-package-json": "^1.8.0",
+    "eslint-plugin-jsdoc": "^64.3.10",
+    "eslint-plugin-package-json": "^1.8.1",
     "eslint-plugin-svelte": "^3.23.0",
     "globals": "^17.12.0",
-    "happy-dom": "^20.14.3",
+    "happy-dom": "^20.14.5",
     "oxlint": "^1.82.0",
+    "playwright": "^1.63.0",
     "postcss": "^8.5.28",
     "postcss-html": "^2.0.0",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",
     "rolldown": "^1.2.8",
-    "sass": "^1.104.0",
+    "sass": "^1.104.1",
     "shiki": "^4.4.3",
     "stylelint": "^17.15.0",
     "stylelint-config-recommended-scss": "^17.0.1",
@@ -83,7 +86,8 @@
     "svelte-preprocess": "^6.0.5",
     "tslib": "^2.8.1",
     "vite": "^8.3.0",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.0",
+    "vitest-browser-svelte": "^3.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -95,7 +99,7 @@
   "scripts": {
     "build": "npm run generate:shiki && svelte-kit sync && svelte-package && node scripts/build-shiki-engine.js",
     "build:watch": "svelte-kit sync && svelte-package --watch",
-    "check": "pnpm run '/^check:.*/'",
+    "check": "pnpm run --no-bail '/^check:.*/'",
     "check:audit": "pnpm audit --ignore-registry-errors",
     "check:cspell": "cspell --no-progress",
     "check:eslint": "eslint .",