svseeds 0.4.11 → 0.4.12

package/_svseeds/_Modal.svelte

@@ -6,7 +6,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     closable?: boolean; // (true)
-    trigger?: HTMLElement; // bindable
+    id?: string; // bindable
     ariaLabel?: string;
     element?: HTMLDialogElement; // bindable
     styling?: SVSClass;
@@ -19,7 +19,7 @@
     children: Snippet<[string]>; // Snippet<[variant]>
     open?: boolean; // bindable (false)
     closable?: boolean; // (true)
-    trigger?: HTMLElement; // bindable
+    id?: string; // bindable
     ariaLabel?: string;
     element?: HTMLDialogElement; // bindable
     styling?: SVSClass;
@@ -31,23 +31,18 @@
   const preset = "svs-modal";
 
   import { type Snippet, untrack } from "svelte";
-  import { type SVSClass, VARIANT, PARTS, fnClass } from "./core";
+  import { type SVSClass, VARIANT, PARTS, elemId, fnClass } from "./core";
 </script>
 
 <script lang="ts">
-  let { children, open = $bindable(false), closable = true, trigger = $bindable(), ariaLabel, element = $bindable(), styling, variant = $bindable("") }: ModalProps = $props();
+  let { children, open = $bindable(false), closable = true, id = $bindable(), ariaLabel, element = $bindable(), styling, variant = $bindable("") }: ModalProps = $props();
 
   // *** Initialize *** //
   if (!variant) variant = VARIANT.NEUTRAL;
   const cls = fnClass(preset, styling);
+  if (!id) id = elemId.id;
 
   // *** Bind Handlers *** //
-  $effect(() => {
-    open;
-    untrack(() => {
-      if (!open) trigger?.focus();
-    });
-  });
   $effect.pre(() => {
     open;
     untrack(() => toggle());
@@ -62,24 +57,25 @@
 
   // *** Event Handlers *** //
   const onclick = closable ? (ev: MouseEvent) => { if (ev.target === element) open = false; } : undefined;
-  const onkeydown = closable ? (ev: KeyboardEvent) => { if (ev.key === "Escape") ev.preventDefault(); } : undefined;
-  function onclose() {
-    open = false;
+  const onkeydown = closable ? undefined : (ev: KeyboardEvent) => { if (ev.key === "Escape") ev.preventDefault(); };
+  function ontoggle() {
+    open = element?.open ?? false;
   }
   $effect(() => untrack(() => { if (open) element?.showModal(); }));
 </script>
 
 <!---------------------------------------->
 
-<!-- svelte-ignore a11y_autofocus -->
-<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {onclick} {onkeydown} {onclose} autofocus={true}>
+<dialog bind:this={element} class={cls(PARTS.WHOLE, variant)} aria-label={ariaLabel} {id} {onclick} {onkeydown} {ontoggle} autofocus={true}>
   <div class={cls(PARTS.MAIN, variant)}>
     {@render children(variant)}
   </div>
 </dialog>
 
 <style>
-  :global(html:has(dialog[open])) {
-    overflow: hidden;
+  :global {
+    html:has(dialog[open]) {
+      overflow: hidden;
+    }
   }
 </style>

package/_svseeds/_Modal.svelte.d.ts

@@ -2,7 +2,7 @@ export interface ModalProps {
     children: Snippet<[string]>;
     open?: boolean;
     closable?: boolean;
-    trigger?: HTMLElement;
+    id?: string;
     ariaLabel?: string;
     element?: HTMLDialogElement;
     styling?: SVSClass;
@@ -19,7 +19,7 @@ import { type SVSClass } from "./core";
  *   children: Snippet<[string]>; // Snippet<[variant]>
  *   open?: boolean; // bindable (false)
  *   closable?: boolean; // (true)
- *   trigger?: HTMLElement; // bindable
+ *   id?: string; // bindable
  *   ariaLabel?: string;
  *   element?: HTMLDialogElement; // bindable
  *   styling?: SVSClass;
@@ -27,6 +27,6 @@ import { type SVSClass } from "./core";
  * }
  * ```
  */
-declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "open" | "element" | "trigger">;
+declare const Modal: import("svelte").Component<ModalProps, {}, "variant" | "id" | "open" | "element">;
 type Modal = ReturnType<typeof Modal>;
 export default Modal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svseeds",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "Simple components for Svelte.",
   "type": "module",
   "main": "./index.js",