svseeds 0.3.3 → 0.3.4

package/_svseeds/Accordion.svelte

@@ -3,7 +3,7 @@
     labels?: string[],
     current?: number, // bindable <-1>
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     deps?: AccordionDeps,
     [key: string]: unknown | Snippet,
   };
@@ -14,8 +14,7 @@
   export type AccordionBindProps = "current" | "status";
 
   type NamedId = { id: string, name: string };
-  const svs = "svs-accordion";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-accordion";
   const roleLabel = "label";
   const rolePanel = "panel";
 
@@ -29,7 +28,7 @@
   }
 
   import { type Snippet, untrack } from "svelte";
-  import { type ClassRuleSet, STATE, AREA, elemId, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, AREA, elemId, fnClass, omit } from "./core";
   import Disclosure, { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 </script>
 
@@ -38,8 +37,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
-  const propsDisclosure = omit(deps?.svsDisclosure, "attributes");
+  const cls = fnClass(preset, style);
   const isStrLabel = labels.length > 0;
   const lbls = toNamedId(isStrLabel ? labels : getSnippetNames(roleLabel, rest));
   const panels = getSnippetNames(rolePanel, rest);
@@ -49,6 +47,12 @@
   let opens = $state(Array(lbls.length).fill(false));
   let elems: HTMLDetailsElement[] = $state([]);
 
+  // *** Initialize Deps *** //
+  const svsDisclosure = {
+    ...omit(deps?.svsDisclosure, "attributes", "style"),
+    style: deps?.svsDisclosure?.style ?? `${preset} svs-disclosure`,
+  };
+
   // *** Bind Handlers *** //
   $effect.pre(() => {
     current;
@@ -83,7 +87,7 @@
   <div class={cls(AREA.WHOLE, status)} role="group">
     {#each lbls as { id, name }, i (id)}
       {@const ontoggle = exclusiveToggle(i)}
-      <Disclosure bind:open={opens[i]} bind:element={elems[i]} label={isStrLabel ? name : (rest[name] as Snippet)} attributes={{...deps?.svsDisclosure?.attributes, ontoggle}} {...propsDisclosure}>
+      <Disclosure bind:open={opens[i]} bind:element={elems[i]} label={isStrLabel ? name : (rest[name] as Snippet)} attributes={{...deps?.svsDisclosure?.attributes, ontoggle}} {...svsDisclosure}>
         {@render (rest[panels[i]] as Snippet)()}
       </Disclosure>
     {/each}

package/_svseeds/Accordion.svelte.d.ts

@@ -2,7 +2,7 @@ export type AccordionProps = {
     labels?: string[];
     current?: number;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     deps?: AccordionDeps;
     [key: string]: unknown | Snippet;
 };
@@ -12,7 +12,7 @@ export type AccordionDeps = {
 export type AccordionReqdProps = never;
 export type AccordionBindProps = "current" | "status";
 import { type Snippet } from "svelte";
-import { type ClassRuleSet } from "./core";
+import { type SVSStyle } from "./core";
 import { type DisclosureProps, type DisclosureReqdProps, type DisclosureBindProps } from "./_Disclosure.svelte";
 declare const Accordion: import("svelte").Component<AccordionProps, {}, "status" | "current">;
 type Accordion = ReturnType<typeof Accordion>;

package/_svseeds/DarkToggle.svelte

@@ -11,7 +11,8 @@
   export type DarkToggleReqdProps = never;
   export type DarkToggleBindProps = "dark" | "status" | "element";
 
-  const ariaLabel = "Toggle theme color";
+  const label = "Toggle theme color";
+  const preset = "svs-dark-toggle";
 
   class Theme {
     static #DARK = "dark";
@@ -112,7 +113,12 @@
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
   dark = theme.dark;
-  const propsToggle = omit(deps?.svsToggle, "main");
+
+  // *** Initialize Deps *** //
+  const svsToggle = {
+    ...omit(deps?.svsToggle, "main", "style"),
+    style: deps?.svsToggle?.style ?? `${preset} svs-toggle`,
+  };
 
   // *** Bind Handlers *** //
   $effect.pre(() => { theme.dark = dark });
@@ -120,7 +126,8 @@
 
 <!---------------------------------------->
 
-<Toggle bind:value={dark} bind:status bind:element label={ariaLabel} {main} {...propsToggle} />
+<Toggle bind:value={dark} bind:status bind:element {label} {main} {...svsToggle} />
+
 {#snippet svgDark()}
   <svg style="width: 100%; height: 100%;" viewBox="0 0 24 24" aria-hidden="true">
     <path fill-rule="evenodd" clip-rule="evenodd" d="M12.2256 2.00253C9.59172 1.94346 6.93894 2.9189 4.92893 4.92891C1.02369 8.83415 1.02369 15.1658 4.92893 19.071C8.83418 22.9763 15.1658 22.9763 19.0711 19.071C21.0811 17.061 22.0565 14.4082 21.9975 11.7743C21.9796 10.9772 21.8669 10.1818 21.6595 9.40643C21.0933 9.9488 20.5078 10.4276 19.9163 10.8425C18.5649 11.7906 17.1826 12.4053 15.9301 12.6837C14.0241 13.1072 12.7156 12.7156 12 12C11.2844 11.2844 10.8928 9.97588 11.3163 8.0699C11.5947 6.81738 12.2094 5.43511 13.1575 4.08368C13.5724 3.49221 14.0512 2.90664 14.5935 2.34046C13.8182 2.13305 13.0228 2.02041 12.2256 2.00253ZM17.6569 17.6568C18.9081 16.4056 19.6582 14.8431 19.9072 13.2186C16.3611 15.2643 12.638 15.4664 10.5858 13.4142C8.53361 11.362 8.73568 7.63895 10.7814 4.09281C9.1569 4.34184 7.59434 5.09193 6.34315 6.34313C3.21895 9.46732 3.21895 14.5326 6.34315 17.6568C9.46734 20.781 14.5327 20.781 17.6569 17.6568Z" />

package/_svseeds/TagsInput.svelte

@@ -9,7 +9,7 @@
     max?: TagCountValidation,
     validations?: ((values: string[]) => string)[],
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     element?: HTMLInputElement, // bindable
     deps?: TagsInputDeps,
   };
@@ -21,12 +21,11 @@
   export type TagsInputBindProps = "dark" | "status" | "element";
   export type TagCountValidation = { value: number, message: string };
 
-  const svs = "svs-tags-input";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-tags-input";
   const CONFIRM_KEY = "Enter";
 
   import { untrack } from "svelte";
-  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
   import TextField, { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
   import Badge, { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
 </script>
@@ -36,24 +35,24 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
-  initDeps();
+  const cls = fnClass(preset, style);
   const confirmKeys = new Set([CONFIRM_KEY, ...confirm]);
-  const onkeydown = deps!.svsTextField!.attributes!.onkeydown;
-  deps!.svsTextField!.attributes!.onkeydown = confirmTag;
-  const onclick = deps!.svsBadge!.onclick;
-  const svsBadge = omit(deps!.svsBadge, "onclick", "right");
   if (min) validations.push((values) => values.length < min.value ? min.message : "");
-  if (max) deps!.svsTextField!.validations!.push((_) => values.length >= max.value ? max.message : "");
   let value = $state("");
 
-  function initDeps() {
-    if (!deps) deps = {};
-    if (!deps.svsTextField) deps.svsTextField = {};
-    if (!deps.svsTextField.attributes) deps.svsTextField.attributes = {};
-    if (!deps.svsTextField.validations) deps.svsTextField.validations = [];
-    if (!deps.svsBadge) deps.svsBadge = {};
-  }
+  // *** Initialize Deps *** //
+  const svsBadge = {
+    ...omit(deps?.svsBadge, "onclick", "right", "style"),
+    style: deps?.svsBadge?.style ?? `${preset} svs-badge`,
+  };
+  const textValidations = deps?.svsTextField?.validations ?? [];
+  if (max) textValidations.push((values) => values.length >= max.value ? max.message : "");
+  const svsTextField = {
+    ...omit(deps?.svsTextField, "validations", "style", "attributes"),
+    validations: textValidations,
+    style: deps?.svsTextField?.style ?? `${preset} svs-text-field`,
+    attributes: { ...deps?.svsTextField?.attributes, onkeydown },
+  };
 
   // *** Bind Handlers *** //
   $effect.pre(() => {
@@ -69,8 +68,8 @@
 
   // *** Event Handlers *** //
   const change = new Event("change", { bubbles: true, cancelable: true });
-  function confirmTag(ev: KeyboardEvent) {
-    onkeydown?.(ev as any);
+  function onkeydown(ev: KeyboardEvent) {
+    deps?.svsTextField?.attributes?.onkeydown?.(ev as any);
     if (!confirmKeys.has(ev.key) || ev.isComposing) return;
     ev.preventDefault();
     element?.dispatchEvent(change);
@@ -86,7 +85,7 @@
   }
   function removeTag(index: number): (ev: Event) => void {
     return (ev) => {
-      onclick?.(ev as any);
+      deps?.svsBadge?.onclick?.(ev as any);
       values.splice(index, 1);
     };
   }
@@ -94,7 +93,7 @@
 
 <!---------------------------------------->
 
-<TextField bind:value bind:status bind:element type="text" {...deps?.svsTextField} {left} {right} />
+<TextField bind:value bind:status bind:element type="text" {left} {right} {...svsTextField} />
 {#if type === "bottom"}
   <div class={cls(AREA.BOTTOM, status)}>
     {@render tags()}

package/_svseeds/TagsInput.svelte.d.ts

@@ -8,7 +8,7 @@ export type TagsInputProps = {
     max?: TagCountValidation;
     validations?: ((values: string[]) => string)[];
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     element?: HTMLInputElement;
     deps?: TagsInputDeps;
 };
@@ -22,9 +22,9 @@ export type TagCountValidation = {
     value: number;
     message: string;
 };
-import { type ClassRuleSet } from "./core";
+import { type SVSStyle } from "./core";
 import { type TextFieldProps, type TextFieldReqdProps, type TextFieldBindProps } from "./_TextField.svelte";
 import { type BadgeProps, type BadgeReqdProps, type BadgeBindProps } from "./_Badge.svelte";
-declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "status" | "element" | "values">;
+declare const TagsInput: import("svelte").Component<TagsInputProps, {}, "status" | "values" | "element">;
 type TagsInput = ReturnType<typeof TagsInput>;
 export default TagsInput;

package/_svseeds/_Badge.svelte

@@ -7,17 +7,16 @@
     href?: string,
     onclick?: MouseEventHandler<HTMLButtonElement> | null,
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
   };
   export type BadgeReqdProps = "children";
   export type BadgeBindProps = "status";
 
-  const svs = "svs-badge";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-badge";
 
   import { type Snippet } from "svelte";
   import { type MouseEventHandler } from "svelte/elements";
-  import { type ClassRuleSet, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
 </script>
 
 <script lang="ts">
@@ -25,7 +24,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
 </script>
 
 <!---------------------------------------->

package/_svseeds/_Badge.svelte.d.ts

@@ -6,13 +6,13 @@ export type BadgeProps = {
     href?: string;
     onclick?: MouseEventHandler<HTMLButtonElement> | null;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
 };
 export type BadgeReqdProps = "children";
 export type BadgeBindProps = "status";
 import { type Snippet } from "svelte";
 import { type MouseEventHandler } from "svelte/elements";
-import { type ClassRuleSet } from "./core";
+import { type SVSStyle } from "./core";
 declare const Badge: import("svelte").Component<BadgeProps, {}, "status">;
 type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/_svseeds/_Button.svelte

@@ -7,7 +7,7 @@
     onclick?: MouseEventHandler<HTMLButtonElement> | null,
     form?: HTMLFormElement, // bindable
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     attributes?: HTMLButtonAttributes,
     action?: Action,
     element?: HTMLButtonElement, // bindable
@@ -15,20 +15,19 @@
   export type ButtonReqdProps = "children";
   export type ButtonBindProps = "form" | "status" | "element";
 
-  const svs = "svs-button";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-button";
 
   import { type Snippet } from "svelte";
   import { type Action } from "svelte/action";
   import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
-  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
   let { children, left, right, type = "button", onclick, form = $bindable(), status = $bindable(STATE.DEFAULT), style, attributes, action, element = $bindable()}: ButtonProps = $props();
 
   // *** Initialize *** //
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   const click = onclick ?? attributes?.["onclick"];
   const attrs = omit(attributes, "class", "type", "onclick");
 

package/_svseeds/_Button.svelte.d.ts

@@ -6,7 +6,7 @@ export type ButtonProps = {
     onclick?: MouseEventHandler<HTMLButtonElement> | null;
     form?: HTMLFormElement;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement;
@@ -16,7 +16,7 @@ export type ButtonBindProps = "form" | "status" | "element";
 import { type Snippet } from "svelte";
 import { type Action } from "svelte/action";
 import { type HTMLButtonAttributes, type MouseEventHandler } from "svelte/elements";
-import { type ClassRuleSet } from "./core";
+import { type SVSStyle } from "./core";
 declare const Button: import("svelte").Component<ButtonProps, {}, "form" | "status" | "element">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/_svseeds/_CheckField.svelte

@@ -10,7 +10,7 @@
     descFirst?: boolean, // <false>
     validations?: ((values: string[], validities?: ValidityState[]) => string)[],
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     attributes?: HTMLInputAttributes,
     action?: Action,
     elements?: HTMLInputElement[], // bindable
@@ -19,14 +19,13 @@
   export type CheckFieldBindProps = "values" | "status" | "elements";
 
   type CheckFieldTarget = { currentTarget: EventTarget & HTMLInputElement };
-  const svs = "svs-check-field";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-check-field";
 
   import { type Snippet, untrack } from "svelte";
   import { type Action } from "svelte/action";
   import { type SvelteMap } from "svelte/reactivity";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type ClassRuleSet, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
+  import { type SVSStyle, STATE, AREA, elemId, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
@@ -34,7 +33,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   const type = multiple ? "checkbox" : "radio";
   const name = attributes?.["name"] ? attributes?.["name"] : elemId.id;
   const idLabel = elemId.get(label?.trim());
@@ -58,8 +57,8 @@
     message = stat === STATE.INACTIVE ? msg ?? bottom : bottom;
     elements[0]?.setCustomValidity(msg ?? "");
   }
-  function validate() {
-    if (!values.length) return toNonInvalid();
+  function validate(oninvalid?: boolean) {
+    if (!values.length && !oninvalid) return toNonInvalid();
     const validities = elements.map((x) => x.validity);
     for (const v of validations) {
       const msg = v(values, validities);
@@ -85,6 +84,7 @@
     attributes?.oninvalid?.(ev);
     ev.preventDefault();
     phase.submit = true;
+    validate(true);
     if (status !== STATE.INACTIVE) toInvalid(elements[0]?.validationMessage);
   }
 </script>

package/_svseeds/_CheckField.svelte.d.ts

@@ -9,7 +9,7 @@ export type CheckFieldProps = {
     descFirst?: boolean;
     validations?: ((values: string[], validities?: ValidityState[]) => string)[];
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     elements?: HTMLInputElement[];
@@ -20,7 +20,7 @@ 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";
+import { type SVSStyle } from "./core";
 declare const CheckField: import("svelte").Component<CheckFieldProps, {}, "elements" | "status" | "values">;
 type CheckField = ReturnType<typeof CheckField>;
 export default CheckField;

package/_svseeds/_ColorPicker.svelte

@@ -3,7 +3,7 @@
     value?: string, // bindable <"#000">
     alpha?: number, // bindable <1>
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     attributes?: HTMLInputAttributes;
     action?: Action,
     element?: HTMLInputElement, // bindable
@@ -16,8 +16,7 @@
   }
 
   type RgbColor = [number, number, number];
-  const svs = "svs-color-picker";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-color-picker";
 
   function isValidHex(hex: string): boolean {
     return Boolean(formatHex(hex));
@@ -42,7 +41,7 @@
 
   import { type Action } from "svelte/action";
   import { type HTMLInputAttributes } from "svelte/elements";
-  import { type ClassRuleSet, STATE, AREA, fnClass, omit } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
@@ -50,7 +49,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   const attrs = omit(attributes, "type");
   if (!isValidHex(value)) value = "#000";
 

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -2,7 +2,7 @@ export type ColorPickerProps = {
     value?: string;
     alpha?: number;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
@@ -13,7 +13,7 @@ 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";
+import { type SVSStyle } 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

@@ -4,7 +4,7 @@
     value?: string, // bindable
     expanded?: boolean, // bindable
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     attributes?: HTMLInputAttributes,
     action?: Action,
     element?: HTMLInputElement, // bindable
@@ -12,8 +12,7 @@
   export type ComboBoxReqdProps = "options";
   export type ComboBoxBindProps = "value" | "expanded" | "status" | "element";
 
-  const svs = "svs-combo-box";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-combo-box";
   const NA = -1;
   const optionStyle = "cursor: default; user-select: none;";
 
@@ -21,7 +20,7 @@
   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";
+  import { type SVSStyle, STATE, AREA, elemId, fnClass, omit } from "./core";
 </script>
 
 <script lang="ts">
@@ -29,7 +28,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   const idList = elemId.id;
   const attrs = omit(attributes, "class", "type", "value", "list", "role", "aria-haspopup", "aria-autocomplete", "aria-controls", "aria-expanded");
   let selected = $state(NA);

package/_svseeds/_ComboBox.svelte.d.ts

@@ -3,7 +3,7 @@ export type ComboBoxProps = {
     value?: string;
     expanded?: boolean;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     attributes?: HTMLInputAttributes;
     action?: Action;
     element?: HTMLInputElement;
@@ -13,7 +13,7 @@ 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";
+import { type SVSStyle } 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

@@ -4,17 +4,16 @@
     open?: boolean, // bindable <false>; to observe state, not to control
     lock?: boolean, // bindable <false>
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     element?: HTMLElement, // bindable
   };
   export type ContextMenuReqdProps = "children";
   export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
 
-  const svs = "svs-context-menu";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-context-menu";
 
   import { type Snippet } from "svelte";
-  import { type ClassRuleSet, STATE, AREA, fnClass } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass } from "./core";
 </script>
 
 <!---------------------------------------->
@@ -24,7 +23,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   let position = $state({ x: 0, y: 0 });
 
   // *** Bind Handlers *** //

package/_svseeds/_ContextMenu.svelte.d.ts

@@ -3,13 +3,13 @@ export type ContextMenuProps = {
     open?: boolean;
     lock?: boolean;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     element?: HTMLElement;
 };
 export type ContextMenuReqdProps = "children";
 export type ContextMenuBindProps = "open" | "lock" | "status" | "element";
 import { type Snippet } from "svelte";
-import { type ClassRuleSet } from "./core";
+import { type SVSStyle } 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

@@ -5,7 +5,7 @@
     open?: boolean, // bindable <false>
     duration?: number, // <400>
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     attributes?: HTMLDetailsAttributes;
     action?: Action,
     element?: HTMLDetailsElement, // bindable
@@ -14,8 +14,7 @@
   export type DisclosureBindProps = "open" | "status" | "elementent";
 
   type DisclosureTarget = { currentTarget: EventTarget & HTMLDetailsElement };
-  const svs = "svs-disclosure";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-disclosure";
 
   const sleep = (msec: number) => new Promise(resolve => setTimeout(resolve, msec));
   class ToggleGurad {
@@ -33,7 +32,7 @@
   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";
+  import { type SVSStyle, STATE, AREA, fnClass, isNeutral, omit } from "./core";
 </script>
 
 <script lang="ts">
@@ -41,7 +40,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   const attrs = omit(attributes, "class", "open", "ontoggle");
   const guard = new ToggleGurad();
   let hidden = $state(!open);

package/_svseeds/_Disclosure.svelte.d.ts

@@ -4,7 +4,7 @@ export type DisclosureProps = {
     open?: boolean;
     duration?: number;
     status?: string;
-    style?: ClassRuleSet | string;
+    style?: SVSStyle;
     attributes?: HTMLDetailsAttributes;
     action?: Action;
     element?: HTMLDetailsElement;
@@ -14,7 +14,7 @@ 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";
+import { type SVSStyle } from "./core";
 declare const Disclosure: import("svelte").Component<DisclosureProps, {}, "open" | "status" | "element">;
 type Disclosure = ReturnType<typeof Disclosure>;
 export default Disclosure;

package/_svseeds/_HotkeyCapture.svelte

@@ -5,14 +5,13 @@
     active?: boolean, // bindable, <false>
     disabled?: boolean, // bindable, <false>
     status?: string, // bindable <STATE.DEFAULT>
-    style?: ClassRuleSet | string,
+    style?: SVSStyle,
     element?: HTMLInputElement, // bindable
   };
   export type HotkeyCaptureReqdProps = never;
   export type HotkeyCaptureBindProps = "value" | "active" | "disable" | "status" | "element";
 
-  const svs = "svs-hotkey-capture";
-  const preset: ClassRuleSet = {};
+  const preset = "svs-hotkey-capture";
   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;
@@ -22,7 +21,7 @@
   }
 
   import { untrack } from "svelte";
-  import { type ClassRuleSet, STATE, AREA, fnClass, isNeutral } from "./core";
+  import { type SVSStyle, STATE, AREA, fnClass, isNeutral } from "./core";
 </script>
 
 <script lang="ts">
@@ -30,7 +29,7 @@
 
   // *** Initialize *** //
   if (!status) status = STATE.DEFAULT;
-  const cls = fnClass(svs, preset, style);
+  const cls = fnClass(preset, style);
   let neutral = isNeutral(status) ? status : STATE.DEFAULT;
 
   // *** Bind Handlers *** //