@sveltia/ui 0.26.6 → 0.26.8

package/dist/components/dialog/dialog.svelte

@@ -34,6 +34,7 @@
     okDisabled = false,
     cancelLabel = '',
     cancelDisabled = false,
+    focusInput = true,
     children,
     header,
     headerExtra,
@@ -52,7 +53,7 @@
   const id = $props.id();
   /**
    * A reference to the modal component.
-   * @type {any}
+   * @type {Modal | undefined}
    */
   let modal = $state();
   /**
@@ -64,10 +65,15 @@
     if (open && content) {
       (async () => {
         await sleep(50);
-        /** @type {HTMLInputElement | HTMLButtonElement} */ (
-          content?.querySelector('input, button.primary')
-        )?.focus();
-        /** @type {HTMLInputElement} */ (content?.querySelector('input'))?.select();
+
+        if (focusInput) {
+          /** @type {HTMLInputElement | HTMLButtonElement} */ (
+            content?.querySelector('input, button.primary')
+          )?.focus();
+          /** @type {HTMLInputElement} */ (content?.querySelector('input'))?.select();
+        } else {
+          modal?.focus();
+        }
       })();
     }
   });

package/dist/components/util/modal.svelte

@@ -36,6 +36,13 @@
     /* eslint-enable prefer-const */
   } = $props();
 
+  /**
+   * Focus the `<dialog>` element.
+   */
+  export const focus = () => {
+    dialog?.focus();
+  };
+
   /**
    * Close the modal.
    * @param {string} returnValue Return value to be used for `<dialog>`.

package/dist/components/util/modal.svelte.d.ts

@@ -3,10 +3,12 @@ type Modal = {
     $on?(type: string, callback: (e: any) => void): () => void;
     $set?(props: Partial<ModalProps & Record<string, any>>): void;
 } & {
+    focus: () => void;
     close: (returnValue: string) => void;
 };
 /** A generic modal top-layer helper based on the HTML `<dialog>` element. */
 declare const Modal: import("svelte").Component<ModalProps & Record<string, any>, {
+    focus: () => void;
     close: (returnValue: string) => void;
 }, "dialog" | "open">;
 import type { ModalProps } from '../../typedefs';

package/dist/typedefs.d.ts

@@ -233,6 +233,11 @@ export type DialogProps = {
      * Whether to disable the Cancel button.
      */
     cancelDisabled?: boolean | undefined;
+    /**
+     * Whether to automatically focus the first input field or primary
+     * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
+     */
+    focusInput?: boolean | undefined;
     /**
      * Whether to close the modal when the backdrop (outside of the
      * modal) is clicked.

package/dist/typedefs.js

@@ -79,6 +79,8 @@
  * @property {boolean} [okDisabled] Whether to disable the OK button.
  * @property {string} [cancelLabel] Text label displayed on the Cancel button.
  * @property {boolean} [cancelDisabled] Whether to disable the Cancel button.
+ * @property {boolean} [focusInput] Whether to automatically focus the first input field or primary
+ * action button. Default: `true`. If `false`, the `<dialog>` gets focused.
  * @property {boolean} [lightDismiss] Whether to close the modal when the backdrop (outside of the
  * modal) is clicked.
  * @property {string} [value] Value entered on the textbox.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.26.6",
+  "version": "0.26.8",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -28,18 +28,18 @@
     "test:unit": "vitest"
   },
   "dependencies": {
-    "@lexical/code": "^0.31.0",
-    "@lexical/dragon": "^0.31.0",
-    "@lexical/history": "^0.31.0",
-    "@lexical/link": "^0.31.0",
-    "@lexical/list": "^0.31.0",
-    "@lexical/markdown": "^0.31.0",
-    "@lexical/rich-text": "^0.31.0",
-    "@lexical/selection": "^0.31.0",
-    "@lexical/table": "^0.31.0",
-    "@lexical/utils": "^0.31.0",
-    "@sveltia/utils": "^0.7.3",
-    "lexical": "^0.31.0",
+    "@lexical/code": "^0.31.1",
+    "@lexical/dragon": "^0.31.1",
+    "@lexical/history": "^0.31.1",
+    "@lexical/link": "^0.31.1",
+    "@lexical/list": "^0.31.1",
+    "@lexical/markdown": "^0.31.1",
+    "@lexical/rich-text": "^0.31.1",
+    "@lexical/selection": "^0.31.1",
+    "@lexical/table": "^0.31.1",
+    "@lexical/utils": "^0.31.1",
+    "@sveltia/utils": "^0.7.5",
+    "lexical": "^0.31.1",
     "prismjs": "^1.30.0"
   },
   "peerDependencies": {
@@ -47,32 +47,32 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.52.0",
-    "@sveltejs/adapter-auto": "^6.0.0",
-    "@sveltejs/kit": "^2.20.8",
+    "@sveltejs/adapter-auto": "^6.0.1",
+    "@sveltejs/kit": "^2.21.1",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "5.0.3",
-    "cspell": "^8.19.3",
+    "cspell": "^9.0.1",
     "eslint": "^8.57.1",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^10.1.2",
+    "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsdoc": "^50.6.11",
+    "eslint-plugin-jsdoc": "^50.6.17",
     "eslint-plugin-svelte": "^2.46.1",
     "postcss": "^8.5.3",
     "postcss-html": "^1.8.0",
     "prettier": "^3.5.3",
-    "prettier-plugin-svelte": "^3.3.3",
-    "sass": "^1.87.0",
+    "prettier-plugin-svelte": "^3.4.0",
+    "sass": "^1.89.0",
     "stylelint": "^16.19.1",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-scss": "^6.11.1",
-    "svelte": "5.28.2",
-    "svelte-check": "^4.1.6",
+    "stylelint-config-recommended-scss": "^15.0.1",
+    "stylelint-scss": "^6.12.0",
+    "svelte": "5.31.1",
+    "svelte-check": "^4.2.1",
     "svelte-i18n": "^4.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
-    "vite": "^6.3.4",
-    "vitest": "^3.1.2"
+    "vite": "^6.3.5",
+    "vitest": "^3.1.4"
   },
   "exports": {
     ".": {