svseeds 0.0.7 → 0.1.0

package/_svseeds/_CheckField.svelte.d.ts

@@ -0,0 +1,26 @@
+export type CheckFieldProps = {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string, string[], HTMLInputElement[] | undefined]>;
+    bottom?: string;
+    values?: string[];
+    multiple?: boolean;
+    descFirst?: boolean;
+    validations?: ((values: string[], validities?: ValidityState[]) => string)[];
+    status?: string;
+    style?: ClassRuleSet | string;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    elements?: HTMLInputElement[];
+};
+export type CheckFieldReqdProps = "options";
+export type CheckFieldBindProps = "bottom" | "values" | "status" | "elements";
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type SvelteMap } from "svelte/reactivity";
+import { type HTMLInputAttributes } from "svelte/elements";
+import { type ClassRuleSet } from "./core";
+declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "bottom" | "elements" | "status" | "values">;
+type CheckField = ReturnType<typeof CheckField>;
+export default CheckField;

package/_svseeds/_ColorPicker.svelte

@@ -0,0 +1,74 @@
+<script module lang="ts">
+  export type ColorPickerProps = {
+    value?: string, // bindable <"#000">
+    alpha?: number, // bindable <1>
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    attributes?: HTMLInputAttributes;
+    action?: Action,
+    element?: HTMLInputElement, // bindable
+  };
+  export type ColorPickerReqdProps = never;
+  export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+  export function getHex(rgb: RgbColor): string {
+    if (!isValidRgb(rgb)) return "#000";
+    return "#" + (1 << 24 | rgb[0] << 16 | rgb[1] << 8 | rgb[2]).toString(16).slice(1);
+  }
+
+  type RgbColor = [number, number, number];
+  const svs = "svs-color-picker";
+  const preset: ClassRuleSet = {};
+
+  function isValidHex(hex: string): boolean {
+    return Boolean(formatHex(hex));
+  }
+  function castHexToRgb(hex: string): RgbColor {
+    const rgb = formatHex(hex)?.filter((x) => x.length === 2);
+    return rgb ? rgb.map((x) => Number.parseInt(x, 16)) as RgbColor : [0, 0, 0];
+  }
+  function formatHex(hex: string): RegExpExecArray | null {
+    if (hex.startsWith("#")) hex = hex.substring(1);
+    hex = hex.replace(/^([a-f\d])([a-f\d])([a-f\d])$/i, (_, r, g, b) => r+r + g+g + b+b);
+    return /^([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  }
+  function isValidRgb(rgb: RgbColor): boolean {
+    return rgb.every((x) => x >= 0 && x <= 255);
+  }
+  function correctAlpha(alpha: number): number {
+    if (alpha <= 0) return 0;
+    if (alpha >= 1) return 1;
+    return alpha;
+  }
+
+  import { type Action } from "svelte/action";
+  import { type HTMLInputAttributes } from "svelte/elements";
+  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { value = $bindable("#000"), alpha = $bindable(1), status = $bindable(""), style, attributes, action, element = $bindable() }: ColorPickerProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  const attrs = omit(attributes, "type");
+  if (!isValidHex(value)) value = "#000";
+
+  // *** Bind Handlers *** //
+  let rgb = $derived(castHexToRgb(value));
+  let alp = $derived(correctAlpha(alpha));
+</script>
+
+<!---------------------------------------->
+
+<label class={cls(AREA.WHOLE, status)}>
+  <div style="display: inline-block; background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%); background-size: 20px 20px; background-position: 0 0,0 10px,10px -10px,-10px 0px;">
+    <div class={cls(AREA.MAIN, status)} style={`background-color: rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alp})`}>
+      {#if action}
+        <input bind:value bind:this={element} type="color" style="visibility: hidden;" {...attrs} use:action />
+      {:else}
+        <input bind:value bind:this={element} type="color" style="visibility: hidden;" {...attrs} />
+      {/if}
+    </div>
+  </div>
+</label>

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -0,0 +1,19 @@
+export type ColorPickerProps = {
+    value?: string;
+    alpha?: number;
+    status?: string;
+    style?: ClassRuleSet | string;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement;
+};
+export type ColorPickerReqdProps = never;
+export type ColorPickerBindProps = "value" | "alpha" | "status" | "element";
+export declare function getHex(rgb: RgbColor): string;
+type RgbColor = [number, number, number];
+import { type Action } from "svelte/action";
+import { type HTMLInputAttributes } from "svelte/elements";
+import { type ClassRuleSet } from "./core";
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "alpha" | "value" | "status" | "element">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/_svseeds/_ComboBox.svelte

@@ -0,0 +1,115 @@
+<script module lang="ts">
+  export type ComboBoxProps = {
+    options: SvelteSet<string> | Set<string>,
+    value?: string, // bindable
+    expanded?: boolean, // bindable
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    attributes?: HTMLInputAttributes,
+    action?: Action,
+    element?: HTMLInputElement, // bindable
+  };
+  export type ComboBoxReqdProps = "options";
+  export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+
+  const svs = "svs-combo-box";
+  const preset: ClassRuleSet = {};
+  const NA = -1;
+  const optionStyle = "cursor: default; user-select: none;";
+
+  import { untrack } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type SvelteSet } from "svelte/reactivity";
+  import { type HTMLInputAttributes } from "svelte/elements";
+  import { type ClassRuleSet, STATE, AREA, elemId, fnClass, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { options, value = $bindable(""), expanded = $bindable(false), status = $bindable(""), style, attributes, action, element = $bindable() }: ComboBoxProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  const idList = elemId.get(true);
+  const attrs = omit(attributes, "class", "type", "value", "list", "role", "aria-haspopup", "aria-autocomplete", "aria-controls", "aria-expanded");
+  let selected = $state(NA);
+  let overflow = $state({x: false, y: false});
+  let listElem: HTMLUListElement | undefined = $state();
+
+  // *** Bind Handlers *** //
+  let listboxStyle = $derived(`position: absolute;visibility: ${expanded ? "visible" : "hidden"};${overflow.x ? "right: 0%;" : ""}${overflow.y ? "bottom: 100%;" : ""}`);
+  let opts = $derived([...options.keys()]);
+  $effect(() => { options;
+    untrack(() => observeOverflow());
+  });
+  function observeOverflow() {
+    if (!listElem || !window) return;
+    const rect = listElem.getBoundingClientRect();
+    overflow.x = window.innerWidth < rect.right;
+    overflow.y = window.innerHeight < rect.bottom;
+  }
+
+  // *** Event Handlers *** //
+  function open(activate: boolean = false, bottom: boolean = false) {
+    if (expanded) return;
+    selected = opts.indexOf(value);
+    if (activate && selected === NA) selected = bottom ? opts.length-- : 0;
+    expanded = true;
+  }
+  function apply() {
+    if (!expanded) return;
+    value = opts[selected];
+    if (element) element.selectionStart = value.length;
+    close();
+  }
+  function close() {
+    expanded = false;
+    selected = NA;
+  }
+  function onkeydown(ev: KeyboardEvent) {
+    if (ev.isComposing) return;
+    if (ev.ctrlKey || ev.shiftKey || ev.metaKey) return;
+    switch (ev.key) {
+      case "Escape": if (!ev.altKey && expanded) close(); break;
+      case "Enter": if (!ev.altKey && expanded && selected > NA) apply(); break;
+      case "ArrowDown": caseArrowDown(ev.altKey); break;
+      case "ArrowUp": caseArrowUp(ev.altKey); break;
+    }
+  }
+  function caseArrowDown(alt: boolean) {
+    if (alt && !expanded) return open();
+    if (alt && expanded) return;
+    if (!alt && !expanded) return open(true);
+    if (selected + 1 < opts.length) selected++;
+  }
+  function caseArrowUp(alt: boolean) {
+    if (alt && !expanded) return;
+    if (alt && expanded) return close();
+    if (!alt && !expanded) return open(true, true);
+    if (selected - 1 >= 0) selected--;
+  }
+</script>
+
+<!---------------------------------------->
+
+{#if options.size}
+  <div class={cls(AREA.WHOLE, status)}>
+    <div style="position: relative; width: fit-content; height: fit-content;">
+      {#if action}
+        <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} use:action />
+      {:else}
+        <input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" role="combobox" aria-haspopup="listbox" aria-autocomplete="none" aria-controls={idList} aria-expanded={expanded} onfocus={() => open()} onblur={close} {onkeydown} {...attrs} />
+      {/if}
+      <ul bind:this={listElem} class={cls(AREA.BOTTOM, status)} id={idList} role="listbox" style={listboxStyle}>
+        {#each opts as opt, i (opt)}
+          {@const isSelected = i === selected}
+          {@const labelStatus = isSelected ? STATE.ACTIVE : status}
+          {@const onpointerenter = () => selected = i}
+          <li class={cls(AREA.LABEL, labelStatus)} aria-selected={isSelected} role="option" style={optionStyle} onpointerdown={apply} {onpointerenter}>
+            {opt}
+          </li>
+        {/each}
+      </ul>
+    </div>
+  </div>
+{/if}

package/_svseeds/_ComboBox.svelte.d.ts

@@ -0,0 +1,19 @@
+export type ComboBoxProps = {
+    options: SvelteSet<string> | Set<string>;
+    value?: string;
+    expanded?: boolean;
+    status?: string;
+    style?: ClassRuleSet | string;
+    attributes?: HTMLInputAttributes;
+    action?: Action;
+    element?: HTMLInputElement;
+};
+export type ComboBoxReqdProps = "options";
+export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
+import { type Action } from "svelte/action";
+import { type SvelteSet } from "svelte/reactivity";
+import { type HTMLInputAttributes } from "svelte/elements";
+import { type ClassRuleSet } from "./core";
+declare const ComboBox: import("svelte").Component<ComboBoxProps, {}, "expanded" | "value" | "status" | "element">;
+type ComboBox = ReturnType<typeof ComboBox>;
+export default ComboBox;

package/_svseeds/_ContextMenu.svelte

@@ -0,0 +1,52 @@
+<script module lang="ts">
+  export type ContextMenuProps = {
+    children: Snippet,
+    open?: boolean, // bindable <false>; to observe state, not to control
+    lock?: boolean, // bindable <false>
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    element?: HTMLElement, // bindable
+  };
+  export type ContextMenuReqdProps = "children";
+  export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
+
+  const svs = "svs-context-menu";
+  const preset: ClassRuleSet = {};
+
+  import { type Snippet } from "svelte";
+  import { type ClassRuleSet, STATE, AREA, fnClass } from "./core";
+</script>
+
+<!---------------------------------------->
+
+<script lang="ts">
+  let { children, open = $bindable(false), lock = $bindable(false), status = $bindable(""), style, element = $bindable() }: ContextMenuProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  let position = $state({ x: 0, y: 0 });
+
+  // *** Bind Handlers *** //
+  let visibility = $derived(open ? "visibility: open;" : "visibility: hidden; z-index: -9999;");
+  let dynStyle = $derived(`position: fixed; left:${position.x}px; top:${position.y}px; ${visibility}`);
+
+  // *** Event Handlers *** //
+  function show(ev: MouseEvent) {
+    if (lock) return;
+    ev.preventDefault();
+
+    const menu = { width: element?.offsetWidth ?? 0, height: element?.offsetHeight ?? 0 };
+    position.x = window.innerWidth-ev.clientX < menu.width ? ev.clientX-menu.width : ev.clientX;
+    position.y = window.innerHeight-ev.clientY < menu.height ? (ev.clientY < menu.height ? ev.clientY : ev.clientY-menu.height) : ev.clientY;
+    open = true;
+  }
+  function hide() { if (!lock) open = false; }
+</script>
+
+<!---------------------------------------->
+<svelte:document oncontextmenu={show} onclick={hide} />
+
+<nav class={cls(AREA.WHOLE, status)} style={dynStyle} bind:this={element}>
+  {@render children()}
+</nav>

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -0,0 +1,15 @@
+export type ContextMenuProps = {
+    children: Snippet;
+    open?: boolean;
+    lock?: boolean;
+    status?: string;
+    style?: ClassRuleSet | string;
+    element?: HTMLElement;
+};
+export type ContextMenuReqdProps = "children";
+export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
+import { type Snippet } from "svelte";
+import { type ClassRuleSet } from "./core";
+declare const ContextMenu: import("svelte").Component<ContextMenuProps, {}, "open" | "status" | "element" | "lock">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;

package/_svseeds/_Disclosure.svelte

@@ -0,0 +1,119 @@
+<script module lang="ts">
+  export type DisclosureProps = {
+    label: string | Snippet<[string]>, // Snippet<[status]>
+    children: Snippet,
+    open?: boolean, // bindable <false>
+    duration?: number, // <400>
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    attributes?: HTMLDetailsAttributes;
+    action?: Action,
+    element?: HTMLDetailsElement, // bindable
+  };
+  export type DisclosureReqdProps = "label" | "children";
+  export type DisclosureBindProps = "open" | "status" | "elementent";
+
+  type DisclosureTarget = { currentTarget: EventTarget & HTMLDetailsElement };
+  const svs = "svs-disclosure";
+  const preset: ClassRuleSet = {};
+
+  const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
+  class ToggleGurad {
+    #active = false;
+    get active(): boolean {
+      return this.#active;
+    }
+    activate(duration: number) {
+      this.#active = true;
+      sleep(duration).then(() => this.#active = false);
+    }
+  }
+
+  import { type Snippet, untrack } from "svelte";
+  import { type Action } from "svelte/action";
+  import { type HTMLDetailsAttributes } from "svelte/elements";
+  import { slide } from "svelte/transition";
+  import { type ClassRuleSet, STATE, AREA, fnClass, isNeutral, omit } from "./core";
+</script>
+
+<script lang="ts">
+  let { label, children, open = $bindable(false), duration = 400, status = $bindable(""), style, attributes, action, element = $bindable() }: DisclosureProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  const attrs = omit(attributes, "class", "open", "ontoggle");
+  const guard = new ToggleGurad();
+  let hidden = $state(!open);
+  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+  const initOpen = () => { if (element) element.open = open };
+  $effect(() => untrack(() => initOpen()));
+
+  // *** Bind Handlers *** //
+  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  $effect.pre(() => {
+    open;
+    untrack(() => toggleOpen());
+  });
+  function toggleOpen() {
+    guard.activate(duration);
+    if (open) {
+      toggle(true);
+    } else {
+      sleep(duration).then(() => toggle(false));
+    }
+  }
+  function toggle(bool: boolean) {
+    if (!element) return;
+    element.open = bool;
+    hidden = !element.open;
+    status = bool ? STATE.ACTIVE : neutral;
+  }
+
+  // *** Event Handlers *** //
+  function onclick(ev: Event) {
+    ev.preventDefault();
+    if (guard.active) return;
+    if (!element?.open) hidden = false;
+    open = !open;
+  }
+  function ontoggle(ev: Event & DisclosureTarget) {
+    attributes?.ontoggle?.(ev);
+    if (element?.open && !open) {
+      hidden = false;
+      open = true;
+    }
+  }
+</script>
+
+<!---------------------------------------->
+
+{#if action}
+  <details bind:this={element} class={cls(AREA.WHOLE, status)} {ontoggle} {...attrs} use:action>
+    {@render inner()}
+  </details>
+{:else}
+  <details bind:this={element} class={cls(AREA.WHOLE, status)} {ontoggle} {...attrs}>
+    {@render inner()}
+  </details>
+{/if}
+
+{#snippet inner()}
+  <summary class={cls(AREA.LABEL, status)} {onclick}>
+    {#if typeof label === "string"}
+      {label}
+    {:else if typeof label === "function"}
+      {@render label(status)}
+    {/if}
+  </summary>
+  {#if open}
+    <div class={cls(AREA.MAIN, status)} transition:slide={{ duration }}>
+      {@render children()}
+    </div>
+  {/if}
+  {#if hidden}
+    <div class={cls(AREA.MAIN, status)}>
+      {@render children()}
+    </div>
+  {/if}
+{/snippet}

package/_svseeds/_Disclosure.svelte.d.ts

@@ -0,0 +1,20 @@
+export type DisclosureProps = {
+    label: string | Snippet<[string]>;
+    children: Snippet;
+    open?: boolean;
+    duration?: number;
+    status?: string;
+    style?: ClassRuleSet | string;
+    attributes?: HTMLDetailsAttributes;
+    action?: Action;
+    element?: HTMLDetailsElement;
+};
+export type DisclosureReqdProps = "label" | "children";
+export type DisclosureBindProps = "open" | "status" | "elementent";
+import { type Snippet } from "svelte";
+import { type Action } from "svelte/action";
+import { type HTMLDetailsAttributes } from "svelte/elements";
+import { type ClassRuleSet } from "./core";
+declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "open" | "status" | "element">;
+type Disclosure = ReturnType<typeof Disclosure>;
+export default Disclosure;

package/_svseeds/_HotkeyCapture.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+  export type HotkeyCaptureProps = {
+    value?: string, // bindable
+    placeholder?: string,
+    active?: boolean, // bindable, <false>
+    disabled?: boolean, // bindable, <false>
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    element?: HTMLInputElement, // bindable
+  };
+  export type HotkeyCaptureReqdProps = never;
+  export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
+
+  const svs = "svs-hotkey-capture";
+  const preset: ClassRuleSet = {};
+  const KEY_MODIFIER = new Set(["Control", "Alt", "Shift", "Meta"]);
+  const LABEL_SPACE = "SPACE";
+  const LABEL_POINTER = ["BTN_MAIN","BTN_WHEEL","BTN_SUB","BTN_BACK","BTN_FORWARD"] as const;
+  const LABEL_WHEEL = ["WHEELUP", "WHEELDOWN"] as const;
+  function getModifierLabel(ev: KeyboardEvent | PointerEvent | WheelEvent): string {
+    return `${ev.ctrlKey ? "Ctrl " : ""}${ev.altKey ? "Alt " : ""}${ev.shiftKey ? "Shift " : ""}${ev.metaKey ? "Meta " : ""}`;
+  }
+
+  import { untrack } from "svelte";
+  import { type ClassRuleSet, STATE, AREA, fnClass, isNeutral } from "./core";
+</script>
+
+<script lang="ts">
+  let { value = $bindable(""), placeholder, active = $bindable(false), disabled = $bindable(false), status = $bindable(""), style, element = $bindable() }: HotkeyCaptureProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+  let neutral = isNeutral(status) ? status : STATE.DEFAULT;
+
+  // *** Bind Handlers *** //
+  $effect(() => { neutral = isNeutral(status) ? status : neutral });
+  $effect.pre(() => {
+    disabled;
+    untrack(() => shiftStatus());
+  });
+  $effect.pre(() => {
+    active;
+    untrack(() => toggle());
+  });
+  function toggle() {
+    if (disabled) return;
+    shiftStatus();
+    if (active) {
+      element?.focus();
+    } else {
+      element?.blur();
+    }
+  }
+  function shiftStatus() {
+    if (disabled) return status = STATE.INACTIVE;
+    status = active ? STATE.ACTIVE : neutral;
+  }
+
+  // *** Event Handlers *** //
+  const ignore = () => disabled || window?.document.activeElement !== element;
+  function prep(ev: KeyboardEvent | PointerEvent | MouseEvent | WheelEvent) {
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+  function onkeydown(ev: KeyboardEvent) {
+    if (ev.repeat) return;
+    if (ignore()) return;
+    prep(ev);
+    if (KEY_MODIFIER.has(ev.key)) return;
+    value = getModifierLabel(ev) + (ev.key === " " ? LABEL_SPACE : ev.key.toUpperCase());
+  }
+  function onpointerdown(ev: PointerEvent) {
+    if (ignore()) return;
+    prep(ev);
+    value = getModifierLabel(ev) + LABEL_POINTER[ev.button];
+  }
+  function onwheel(ev: WheelEvent) {
+    if (ignore()) return;
+    prep(ev);
+    value = getModifierLabel(ev) + LABEL_WHEEL[ev.deltaY < 0 ? 0 : 1];
+  }
+  function oncontextmenu(ev: MouseEvent) { prep(ev); }
+  function onfocus() {
+    active = true;
+  }
+  function onblur() {
+    active = false;
+  }
+</script>
+
+<!---------------------------------------->
+
+<input bind:value bind:this={element} class={cls(AREA.MAIN, status)} type="text" readonly={true} {placeholder} {disabled} {onkeydown} {onpointerdown} {onwheel} {oncontextmenu} {onfocus} {onblur} />

package/_svseeds/_HotkeyCapture.svelte.d.ts

@@ -0,0 +1,15 @@
+export type HotkeyCaptureProps = {
+    value?: string;
+    placeholder?: string;
+    active?: boolean;
+    disabled?: boolean;
+    status?: string;
+    style?: ClassRuleSet | string;
+    element?: HTMLInputElement;
+};
+export type HotkeyCaptureReqdProps = never;
+export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
+import { type ClassRuleSet } from "./core";
+declare const HotkeyCapture: import("svelte").Component<HotkeyCaptureProps, {}, "active" | "value" | "disabled" | "status" | "element">;
+type HotkeyCapture = ReturnType<typeof HotkeyCapture>;
+export default HotkeyCapture;

package/_svseeds/_Modal.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  export type ModalProps = {
+    children: Snippet,
+    label?: string, // for aria-label
+    open?: boolean, // bindable <false>
+    closable?: boolean, // <true>
+    trigger?: HTMLElement, // bindable
+    status?: string, // bindable <STATE.DEFAULT>
+    style?: ClassRuleSet | string,
+    element?: HTMLDialogElement, // bindable
+  };
+  export type ModalReqdProps = "children";
+  export type ModalBindProps = "open" | "status" | "element";
+
+  const svs = "svs-modal";
+  const preset: ClassRuleSet = {};
+
+  import { type Snippet, untrack } from "svelte";
+  import { type ClassRuleSet, STATE, AREA, fnClass } from "./core";
+</script>
+
+<script lang="ts">
+  let { children, label, open = $bindable(false), closable = true, trigger = $bindable(), status = $bindable(""), style, element = $bindable() }: ModalProps = $props();
+
+  // *** Initialize *** //
+  if (!status) status = STATE.DEFAULT;
+  const cls = fnClass(svs, preset, style);
+
+  // *** Bind Handlers *** //
+  $effect(() => {
+    open;
+    untrack(() => trigger?.focus());
+  });
+  $effect.pre(() => {
+    open;
+    untrack(() => toggle());
+  });
+  function toggle() {
+    if (open) {
+      element?.showModal();
+    } else {
+      element?.close();
+    }
+  }
+
+  // *** 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;
+  }
+</script>
+
+<!---------------------------------------->
+
+<!-- svelte-ignore a11y_autofocus -->
+<dialog bind:this={element} class={cls(AREA.WHOLE, status)} aria-label={label} {onclick} {onkeydown} {onclose} autofocus={true}>
+  <div class={cls(AREA.MAIN, status)}>
+    {@render children()}
+  </div>
+</dialog>
+
+<style>
+  :global(html:has(dialog[open])) {
+    overflow: hidden;
+  }
+</style>

package/_svseeds/_Modal.svelte.d.ts

@@ -0,0 +1,17 @@
+export type ModalProps = {
+    children: Snippet;
+    label?: string;
+    open?: boolean;
+    closable?: boolean;
+    trigger?: HTMLElement;
+    status?: string;
+    style?: ClassRuleSet | string;
+    element?: HTMLDialogElement;
+};
+export type ModalReqdProps = "children";
+export type ModalBindProps = "open" | "status" | "element";
+import { type Snippet } from "svelte";
+import { type ClassRuleSet } from "./core";
+declare const Modal: import("svelte").Component<ModalProps, {}, "open" | "status" | "element" | "trigger">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;