svseeds 0.7.1 → 0.8.0

package/_svseeds/DateField.svelte

@@ -93,7 +93,7 @@
   export const _DATE_FIELD_PRESET = "svs-date-field";
 
   import { onMount, untrack } from "svelte";
-  import { PARTS, VARIANT, _fnClass, _isNeutral } from "./_core";
+  import { PARTS, VARIANT, _fieldAria, _fieldIds, _fieldMessage, _fnClass, _isNeutral, _verify } from "./_core";
   import DateInput, { _DATE_INPUT_PRESET, _setDateInputContext } from "./DateInput.svelte";
   import type { Snippet } from "svelte";
   import type { SVSClass, SVSFieldValidation, SVSVariant } from "./_core";
@@ -108,12 +108,14 @@
   const cls = $derived(_fnClass(_DATE_FIELD_PRESET, styling));
   const uid = $props.id();
   const id = $derived(label?.trim() ? `${uid}-ctrl` : undefined);
-  const idLabel = $derived(label?.trim() ? `${uid}-label` : undefined);
-  const idDesc = $derived(bottom?.trim() ? `${uid}-desc` : undefined);
-  const idErr = $derived(idDesc ?? `${uid}-err`);
+  const ids = $derived(_fieldIds(uid, label, bottom));
+  const idLabel = $derived(ids.idLabel);
+  const idDesc = $derived(ids.idDesc);
+  const idErr = $derived(ids.idErr);
   let errmsg = $state("");
-  const message = $derived(variant === VARIANT.INACTIVE ? errmsg || bottom : bottom);
-  const idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
+  const message = $derived(_fieldMessage(variant, errmsg, bottom));
+  const aria = $derived(_fieldAria(variant, message, idErr));
+  const idMsg = $derived(aria.idMsg);
   let proxyEl = $state<HTMLInputElement>();
 
   // *** Initialize Context *** //
@@ -152,7 +154,7 @@
   $effect(() => {
     neutral = _isNeutral(variant) ? variant : neutral;
   });
-  const live = $derived(variant === VARIANT.INACTIVE ? "alert" : undefined);
+  const live = $derived(aria.live);
   const validEl = $derived(native ? element : proxyEl);
   function shift(oninvalid?: boolean) {
     const vmsg = validEl?.validationMessage ?? "";
@@ -160,12 +162,7 @@
     errmsg = vmsg;
   }
   function verify() {
-    if (!validEl) return;
-    for (const v of validations) {
-      const msg = v({ value, validity: validEl.validity, element: validEl });
-      if (msg) return validEl.setCustomValidity(msg);
-    }
-    validEl.setCustomValidity("");
+    _verify(validEl, validations, value);
   }
 
   // *** Reactive Handlers *** //
@@ -229,7 +226,7 @@
     {@render participant()}
   </div>
   {#if reserve || message?.trim()}
-    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idErr} role={live}>{message}</div>
   {/if}
 </div>
 

package/_svseeds/DateInput.svelte

@@ -7,10 +7,6 @@
   ```
   ### Types
   ```ts
-  type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-  };
   interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "readonly" | "list" | "name"> {
     value?: Temporal.PlainDate; // bindable; undefined = empty
     open?: boolean; // bindable (false)
@@ -32,6 +28,16 @@
     styling?: SVSClass;
     variant?: SVSVariant; // (VARIANT.NEUTRAL)
   }
+  type DateInputCtl = {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    clear: () => void;
+  };
+  type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+  };
   ```
   ### Anatomy
   ```svelte
@@ -50,16 +56,6 @@
   - `format` and `parse` are caller-coordinated; the default locale display is not necessarily parseable by a supplied parser.
 -->
 <script module lang="ts">
-  type DateInputCtl = {
-    toggle: () => void;
-    show: () => void;
-    hide: () => void;
-    clear: () => void;
-  };
-  export type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-  };
   export interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "readonly" | "list" | "name"> {
     value?: Temporal.PlainDate;
     open?: boolean;
@@ -81,6 +77,16 @@
     styling?: SVSClass;
     variant?: SVSVariant;
   }
+  export type DateInputCtl = {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    clear: () => void;
+  };
+  export type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+  };
   export type DateInputReqdProps = never;
   export type DateInputBindProps = "value" | "open" | "element";
 
@@ -98,7 +104,7 @@
   export const _DATE_INPUT_PRESET = "svs-date-input";
 
   import { onDestroy, tick, untrack } from "svelte";
-  import { VARIANT, PARTS, _createContext, _fnClass, shouldReduceMotion } from "./_core";
+  import { VARIANT, PARTS, _createContext, _detectOverflow, _fnClass, shouldReduceMotion } from "./_core";
   import Calendar from "./Calendar.svelte";
   import type { Snippet } from "svelte";
   import type { Attachment } from "svelte/attachments";
@@ -122,7 +128,7 @@
   const effId = $derived(ctx ? ctx.id : idProp);
   const effDescribedby = $derived(ctx ? ctx.describedby : ariaDescribedbyProp);
   const fmt = $derived.by(() => formatProp ?? ((d: Temporal.PlainDate) => d.toLocaleString(locale, { dateStyle: "medium" })));
-  const reduced = $derived(typeof window !== "undefined" && shouldReduceMotion());
+  const reduced = $derived(shouldReduceMotion());
   const tfn = $derived(!reduced && transition?.fn ? transition.fn : noop);
   const tparams = $derived(transition?.params as any);
 
@@ -152,6 +158,7 @@
   let last = $state(format());
   let focused = $state(false);
   let overflow = $state({ x: false, y: false });
+  let root = $state<HTMLElement>();
   let overlayElem = $state<HTMLDivElement>();
   let returning = false;
 
@@ -237,16 +244,13 @@
     });
   }
   function focusCalendar() {
-    const el = document.querySelector(`[data-svs-dateinput="${uid}"] [data-svs-calendar] [tabindex="0"]`) as HTMLElement | null;
-    el?.focus();
+    overlayElem?.querySelector<HTMLElement>('[tabindex="0"]')?.focus();
   }
   async function observeOverflow() {
     overflow = { x: false, y: false };
     await tick();
     if (!overlayElem || typeof window === "undefined") return;
-    const rect = overlayElem.getBoundingClientRect();
-    overflow.x = window.innerWidth < rect.right;
-    overflow.y = window.innerHeight < rect.bottom;
+    overflow = _detectOverflow(overlayElem);
   }
   function stopListening() {
     if (typeof document === "undefined") return;
@@ -289,7 +293,6 @@
     returnFocus();
   };
   const houtside = (ev: PointerEvent) => {
-    const root = document.querySelector(`[data-svs-dateinput="${uid}"]`);
     if (root?.contains(ev.target as Node)) return;
     hide();
   };
@@ -298,7 +301,7 @@
 
 <!---------------------------------------->
 
-<span class={cls(PARTS.WHOLE, effVariant)} data-svs-dateinput={uid} style="position:relative;">
+<span bind:this={root} class={cls(PARTS.WHOLE, effVariant)} data-svs-dateinput={uid} style="position:relative;">
   {#if left}
     <span class={cls(PARTS.LEFT, effVariant)}>{@render left(ctl, open, effVariant)}</span>
   {/if}

package/_svseeds/DateInput.svelte.d.ts

@@ -1,15 +1,3 @@
-type DateInputCtl = {
-    toggle: () => void;
-    show: () => void;
-    hide: () => void;
-    clear: () => void;
-};
-export type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: {
-        direction: "in" | "out" | "both";
-    }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-};
 export interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "readonly" | "list" | "name"> {
     value?: Temporal.PlainDate;
     open?: boolean;
@@ -31,6 +19,18 @@ export interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "valu
     styling?: SVSClass;
     variant?: SVSVariant;
 }
+export type DateInputCtl = {
+    toggle: () => void;
+    show: () => void;
+    hide: () => void;
+    clear: () => void;
+};
+export type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: {
+        direction: "in" | "out" | "both";
+    }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+};
 export type DateInputReqdProps = never;
 export type DateInputBindProps = "value" | "open" | "element";
 export interface DateInputContext extends SVSContext {
@@ -58,10 +58,6 @@ import type { CalendarProps } from "./Calendar.svelte";
  * ```
  * ### Types
  * ```ts
- * type TransitionProp = {
- *   fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
- *   params?: unknown;
- * };
  * interface DateInputProps extends Omit<HTMLInputAttributes, "type" | "value" | "min" | "max" | "readonly" | "list" | "name"> {
  *   value?: Temporal.PlainDate; // bindable; undefined = empty
  *   open?: boolean; // bindable (false)
@@ -83,6 +79,16 @@ import type { CalendarProps } from "./Calendar.svelte";
  *   styling?: SVSClass;
  *   variant?: SVSVariant; // (VARIANT.NEUTRAL)
  * }
+ * type DateInputCtl = {
+ *   toggle: () => void;
+ *   show: () => void;
+ *   hide: () => void;
+ *   clear: () => void;
+ * };
+ * type TransitionProp = {
+ *   fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+ *   params?: unknown;
+ * };
  * ```
  * ### Anatomy
  * ```svelte

package/_svseeds/Disclosure.svelte

@@ -95,7 +95,7 @@
 
   // *** Initialize *** //
   const cls = $derived(_fnClass(_DISCLOSURE_PRESET, styling ?? ctx?.styling));
-  const reduced = $derived(typeof window !== "undefined" && shouldReduceMotion());
+  const reduced = $derived(shouldReduceMotion());
   const dur = $derived(_resolveDuration(duration));
   const tfn = $derived(reduced ? noop : (transition?.fn ?? slide));
   const tparams = $derived(transition?.params ?? { duration: dur });
@@ -122,16 +122,19 @@
   }
 
   // *** Reactive Handlers *** //
+  const neutralInput = $derived(ctx ? ctx.variant : variant);
+  const desiredBaseVariant = $derived(ctx && !effOpen && !isInactive && prevVariant === undefined ? base : undefined);
+  const shouldStoreInactive = $derived(isInactive && _isNeutral(variant));
+
   // External variant writes are styling-only; preserve the neutral fallback without changing open state.
   $effect(() => {
-    neutral = ctx ? (_isNeutral(ctx.variant) ? ctx.variant : VARIANT.NEUTRAL) : _isNeutral(variant) ? variant : neutral;
-  });
-  $effect(() => {
-    if (ctx && !effOpen && !isInactive && prevVariant === undefined) variant = base;
+    neutralInput;
+    untrack(() => syncNeutral());
   });
   $effect(() => {
-    variant;
-    untrack(() => (isInactive && _isNeutral(variant) ? storeVariant() : undefined));
+    desiredBaseVariant;
+    shouldStoreInactive;
+    untrack(() => syncVariant());
   });
   $effect.pre(() => {
     effOpen;
@@ -143,6 +146,13 @@
     restoreVariant();
     toggleOpen(effOpen);
   }
+  function syncNeutral() {
+    neutral = _isNeutral(neutralInput) ? neutralInput : neutral;
+  }
+  function syncVariant() {
+    if (shouldStoreInactive) storeVariant();
+    else if (desiredBaseVariant !== undefined) variant = desiredBaseVariant;
+  }
   function toggleOpen(isOpen: boolean) {
     guard.activate(dur);
     if (isOpen) {

package/_svseeds/Drawer.svelte

@@ -51,7 +51,6 @@
     styling?: SVSClass;
     variant?: SVSVariant; // (VARIANT.NEUTRAL)
   }
-  export type Position = "top" | "right" | "bottom" | "left";
   export type DrawerCssVar = "duration";
   export type DrawerReqdProps = "children";
   export type DrawerBindProps = "open" | "element";
@@ -80,7 +79,7 @@
   import { VARIANT, PARTS, _fnClass, _resolveDuration } from "./_core";
   import type { Snippet } from "svelte";
   import type { HTMLDialogAttributes, MouseEventHandler, KeyboardEventHandler, ToggleEventHandler } from "svelte/elements";
-  import type { SVSClass, SVSVariant } from "./_core";
+  import type { SVSClass, SVSVariant, Position } from "./_core";
 </script>
 
 <script lang="ts">

package/_svseeds/Drawer.svelte.d.ts

@@ -11,14 +11,13 @@ export interface DrawerProps extends Omit<HTMLDialogAttributes, "children" | "st
     styling?: SVSClass;
     variant?: SVSVariant;
 }
-export type Position = "top" | "right" | "bottom" | "left";
 export type DrawerCssVar = "duration";
 export type DrawerReqdProps = "children";
 export type DrawerBindProps = "open" | "element";
 export declare const _DRAWER_PRESET = "svs-drawer";
 import type { Snippet } from "svelte";
 import type { HTMLDialogAttributes } from "svelte/elements";
-import type { SVSClass, SVSVariant } from "./_core";
+import type { SVSClass, SVSVariant, Position } from "./_core";
 /**
  * ### Usage
  * Use standalone.

package/_svseeds/FileField.svelte

@@ -92,11 +92,18 @@
   export const _FILE_FIELD_PRESET = "svs-file-field";
 
   import { untrack } from "svelte";
-  import { VARIANT, PARTS, _fnClass, _isNeutral } from "./_core";
+  import { VARIANT, PARTS, _fieldAria, _fieldIds, _fieldMessage, _fnClass, _isNeutral, _verify } from "./_core";
   import FileInput, { _FILE_INPUT_PRESET, _setFileInputContext } from "./FileInput.svelte";
   import type { Snippet } from "svelte";
   import type { SVSClass, SVSVariant, SVSFieldValidation } from "./_core";
-  import type { FileInputContext, FileInputProps, FileInputReqdProps, FileInputBindProps, FileRejection, FileRejectReason } from "./FileInput.svelte";
+  import type {
+    FileInputContext,
+    FileInputProps,
+    FileInputReqdProps,
+    FileInputBindProps,
+    FileRejection,
+    FileRejectReason,
+  } from "./FileInput.svelte";
 </script>
 
 <script lang="ts">
@@ -107,12 +114,14 @@
   const cls = $derived(_fnClass(_FILE_FIELD_PRESET, styling));
   const uid = $props.id();
   const id = $derived(label?.trim() ? `${uid}-ctrl` : undefined);
-  const idLabel = $derived(label?.trim() ? `${uid}-label` : undefined);
-  const idDesc = $derived(bottom?.trim() ? `${uid}-desc` : undefined);
-  const idErr = $derived(idDesc ?? `${uid}-err`);
+  const ids = $derived(_fieldIds(uid, label, bottom));
+  const idLabel = $derived(ids.idLabel);
+  const idDesc = $derived(ids.idDesc);
+  const idErr = $derived(ids.idErr);
   let errmsg = $state("");
-  const message = $derived(variant === VARIANT.INACTIVE ? errmsg || bottom : bottom);
-  const idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
+  const message = $derived(_fieldMessage(variant, errmsg, bottom));
+  const aria = $derived(_fieldAria(variant, message, idErr));
+  const idMsg = $derived(aria.idMsg);
 
   // *** Initialize Context *** //
   const ctx: FileInputContext = {
@@ -154,7 +163,7 @@
   $effect(() => {
     neutral = _isNeutral(variant) ? variant : neutral;
   });
-  const live = $derived(variant === VARIANT.INACTIVE ? "alert" : undefined);
+  const live = $derived(aria.live);
   function shift(oninvalid: boolean = false, msg?: string) {
     const vmsg = element?.validationMessage ?? "";
     if (files.length) touched = true;
@@ -167,12 +176,7 @@
     return vmsg ? VARIANT.INACTIVE : VARIANT.ACTIVE;
   }
   function verify() {
-    if (!element) return;
-    for (const v of validations) {
-      const msg = v({ value: files, validity: element.validity, element });
-      if (msg) return element.setCustomValidity(msg);
-    }
-    element.setCustomValidity("");
+    _verify(element, validations, files);
   }
 
   // *** Reactive Handlers *** //
@@ -255,7 +259,7 @@
     {@render side(PARTS.RIGHT, right)}
   </div>
   {#if reserve || message?.trim()}
-    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idErr} role={live}>{message}</div>
   {/if}
 </div>
 

package/_svseeds/FileInput.svelte

@@ -101,7 +101,7 @@
   export const [_getFileInputContext, _setFileInputContext] = _createContext<FileInputContext>();
 
   import { untrack } from "svelte";
-  import { VARIANT, PARTS, SR_ONLY, _fnClass, _createContext } from "./_core";
+  import { VARIANT, PARTS, SR_ONLY, _commitSubset, _fnClass, _createContext } from "./_core";
   import type { Snippet } from "svelte";
   import type { Attachment } from "svelte/attachments";
   import type { HTMLInputAttributes, MouseEventHandler, ChangeEventHandler, DragEventHandler, EventHandler } from "svelte/elements";
@@ -183,11 +183,7 @@
       else accepted.push(file);
     }
     const detail = { values: effFiles, added: accepted, rejected };
-    let committed = accepted;
-    const a = events?.onadd?.(detail);
-    if (a) committed = committed.filter((f) => a.includes(f));
-    const b = ctx?.events?.onadd?.(detail);
-    if (b) committed = committed.filter((f) => b.includes(f));
+    const committed = _commitSubset(accepted, detail, events?.onadd, ctx?.events?.onadd);
     const next = multiple ? [...current, ...committed] : committed.length ? committed : effFiles;
     if (!sameFileArray(effFiles, next)) setFiles(next);
     else syncInputFiles();
@@ -195,11 +191,7 @@
   }
   const remove = (file: File) => {
     const detail = { values: effFiles, removed: [file] };
-    let keep = [file];
-    const a = events?.onremove?.(detail);
-    if (a) keep = keep.filter((f) => a.includes(f));
-    const b = ctx?.events?.onremove?.(detail);
-    if (b) keep = keep.filter((f) => b.includes(f));
+    const keep = _commitSubset([file], detail, events?.onremove, ctx?.events?.onremove);
     if (!keep.length) return;
     const next = effFiles.filter((f) => f !== file);
     if (!sameFileArray(effFiles, next)) setFiles(next);

package/_svseeds/HotkeyCapture.svelte

@@ -39,6 +39,9 @@
   // Parses a space-separated hotkey string (e.g. "Ctrl Shift A") into its modifier flags and trailing key.
   function parseHotkey(value: string): Omit<HotkeyCaptureDetail, "event" | "kind">;
   ```
+  ### Behavior
+  Focus and blur events update `active`, and setting `active` focuses or blurs the input. Guards
+  keep focus in place when it is already correct, and `disabled` prevents programmatic focus moves.
 -->
 <script module lang="ts">
   export interface HotkeyCaptureProps extends Omit<
@@ -109,8 +112,6 @@
   });
   $effect(() => {
     active;
-    disabled;
-    element;
     untrack(() => toggleFocus());
   });
   function toggleFocus() {

package/_svseeds/HotkeyCapture.svelte.d.ts

@@ -65,6 +65,9 @@ import type { SVSClass, SVSVariant } from "./_core";
  * // Parses a space-separated hotkey string (e.g. "Ctrl Shift A") into its modifier flags and trailing key.
  * function parseHotkey(value: string): Omit<HotkeyCaptureDetail, "event" | "kind">;
  * ```
+ * ### Behavior
+ * Focus and blur events update `active`, and setting `active` focuses or blurs the input. Guards
+ * keep focus in place when it is already correct, and `disabled` prevents programmatic focus moves.
  */
 declare const HotkeyCapture: import("svelte").Component<HotkeyCaptureProps, {}, "variant" | "active" | "value" | "element">;
 type HotkeyCapture = ReturnType<typeof HotkeyCapture>;

package/_svseeds/Modal.svelte

@@ -113,9 +113,11 @@
 
 <style>
   :root:has(dialog[open]) {
-    overflow: clip;
+    overflow: hidden;
   }
-  dialog {
-    margin: auto;
+  @layer components {
+    dialog {
+      margin: auto;
+    }
   }
 </style>

package/_svseeds/NumberField.svelte

@@ -76,7 +76,7 @@
   export const _NUMBER_FIELD_PRESET = "svs-number-field";
 
   import { onMount, untrack } from "svelte";
-  import { VARIANT, PARTS, _fnClass, _isNeutral } from "./_core";
+  import { VARIANT, PARTS, _fieldAria, _fieldIds, _fieldMessage, _fnClass, _isNeutral, _verify } from "./_core";
   import NumberInput, { _NUMBER_INPUT_PRESET, _setNumberInputContext } from "./NumberInput.svelte";
   import type { Snippet } from "svelte";
   import type { SVSClass, SVSVariant, SVSFieldValidation } from "./_core";
@@ -91,12 +91,14 @@
   const cls = $derived(_fnClass(_NUMBER_FIELD_PRESET, styling));
   const uid = $props.id();
   const id = $derived(label?.trim() ? `${uid}-ctrl` : undefined);
-  const idLabel = $derived(label?.trim() ? `${uid}-label` : undefined);
-  const idDesc = $derived(bottom?.trim() ? `${uid}-desc` : undefined);
-  const idErr = $derived(idDesc ?? `${uid}-err`);
+  const ids = $derived(_fieldIds(uid, label, bottom));
+  const idLabel = $derived(ids.idLabel);
+  const idDesc = $derived(ids.idDesc);
+  const idErr = $derived(ids.idErr);
   let errmsg = $state("");
-  const message = $derived(variant === VARIANT.INACTIVE ? errmsg || bottom : bottom);
-  const idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
+  const message = $derived(_fieldMessage(variant, errmsg, bottom));
+  const aria = $derived(_fieldAria(variant, message, idErr));
+  const idMsg = $derived(aria.idMsg);
 
   // *** Initialize Context *** //
   const ctx: NumberInputContext = {
@@ -134,19 +136,14 @@
   $effect(() => {
     neutral = _isNeutral(variant) ? variant : neutral;
   });
-  const live = $derived(variant === VARIANT.INACTIVE ? "alert" : undefined);
+  const live = $derived(aria.live);
   function shift(oninvalid?: boolean) {
     const vmsg = element?.validationMessage ?? "";
     variant = value === undefined && !oninvalid ? neutral : vmsg ? VARIANT.INACTIVE : VARIANT.ACTIVE;
     errmsg = vmsg;
   }
   function verify() {
-    if (!element) return;
-    for (const v of validations) {
-      const msg = v({ value, validity: element.validity, element });
-      if (msg) return element.setCustomValidity(msg);
-    }
-    element.setCustomValidity("");
+    _verify(element, validations, value);
   }
 
   // *** Reactive Handlers *** //
@@ -192,7 +189,7 @@
     {@render side(PARTS.RIGHT, right)}
   </div>
   {#if reserve || message?.trim()}
-    <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
+    <div class={cls(PARTS.BOTTOM, variant)} id={idErr} role={live}>{message}</div>
   {/if}
 </div>