svseeds 0.4.3 → 0.4.5

package/_svseeds/DarkToggle.svelte

@@ -8,7 +8,7 @@
     element?: HTMLButtonElement; // bindable
     deps?: DarkToggleDeps;
   }
-  export interface DarkToggleDeps {
+  interface DarkToggleDeps {
     svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
   }
   ```

package/_svseeds/DarkToggle.svelte.d.ts

@@ -24,7 +24,7 @@ import { type ToggleProps, type ToggleReqdProps, type ToggleBindProps } from "./
  *   element?: HTMLButtonElement; // bindable
  *   deps?: DarkToggleDeps;
  * }
- * export interface DarkToggleDeps {
+ * interface DarkToggleDeps {
  *   svsToggle?: Omit<ToggleProps, ToggleReqdProps | ToggleBindProps>;
  * }
  * ```

package/_svseeds/ToggleGroupField.svelte

@@ -16,6 +16,7 @@
     validations?: ToggleGroupFieldValidation[];
     status?: string; // bindable <STATE.NEUTRAL>
     style?: SVSStyle;
+    name?: string;
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
   }
@@ -40,6 +41,7 @@
     validations?: ToggleGroupFieldValidation[];
     status?: string; // bindable <STATE.NEUTRAL>
     style?: SVSStyle;
+    name?: string;
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
   }
@@ -60,7 +62,7 @@
 </script>
 
 <script lang="ts">
-  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], status = $bindable(""), style, attributes, elements = $bindable([]), deps, ...rest }: ToggleGroupFieldProps = $props();
+  let { options, label, extra, aux, left, right, bottom, descFirst = false, values = $bindable([]), multiple = true, validations = [], status = $bindable(""), style, name, deps, ...rest }: ToggleGroupFieldProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.NEUTRAL;
@@ -131,7 +133,7 @@
     {@render desc(descFirst)}
     <div class={cls(PARTS.MIDDLE, status)}>
       {@render side(PARTS.LEFT, left)}
-      <input bind:this={element} style="display: none;" aria-hidden="true" {oninvalid} />
+      {@render fnForm()}
       <ToggleGroup bind:values bind:ariaErrMsgId={idMsg} bind:status={neutral} {options} {multiple} {...svsToggleGroup} />
       {@render side(PARTS.RIGHT, right)}
     </div>
@@ -159,3 +161,9 @@
     <div class={cls(PARTS.BOTTOM, status)} id={idDesc ?? idErr} role={live}>{message}</div>
   {/if}
 {/snippet}
+{#snippet fnForm()}
+  <input bind:this={element} style="display: none;" aria-hidden="true" {oninvalid} />
+  {#each values as value}
+    <input type="hidden" {name} {value} />
+  {/each}
+{/snippet}

package/_svseeds/ToggleGroupField.svelte.d.ts

@@ -12,6 +12,7 @@ export interface ToggleGroupFieldProps {
     validations?: ToggleGroupFieldValidation[];
     status?: string;
     style?: SVSStyle;
+    name?: string;
     deps?: ToggleGroupFieldDeps;
     [key: string]: unknown | Snippet;
 }
@@ -42,6 +43,7 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  *   validations?: ToggleGroupFieldValidation[];
  *   status?: string; // bindable <STATE.NEUTRAL>
  *   style?: SVSStyle;
+ *   name?: string;
  *   deps?: ToggleGroupFieldDeps;
  *   [key: string]: unknown | Snippet;
  * }
@@ -51,6 +53,6 @@ import { type ToggleGroupProps, type ToggleGroupReqdProps, type ToggleGroupBindP
  * type ToggleGroupFieldValidation = (values: string[]) => string;
  * ```
  */
-declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "elements" | "status" | "values">;
+declare const ToggleGroupField: import("svelte").Component<ToggleGroupFieldProps, {}, "status" | "values">;
 type ToggleGroupField = ReturnType<typeof ToggleGroupField>;
 export default ToggleGroupField;

package/_svseeds/_ColorPicker.svelte

@@ -14,7 +14,7 @@
   ```
   ```ts
   type RgbColor = [number, number, number];
-  export function getHex(rgb: RgbColor): string
+  function getHex(rgb: RgbColor): string
   // getHex([255, 123, 34]) => "#ff7b22"
   ```
 -->

package/_svseeds/_ColorPicker.svelte.d.ts

@@ -29,7 +29,7 @@ import { type SVSStyle } from "./core";
  * ```
  * ```ts
  * type RgbColor = [number, number, number];
- * export function getHex(rgb: RgbColor): string
+ * function getHex(rgb: RgbColor): string
  * // getHex([255, 123, 34]) => "#ff7b22"
  * ```
  */

package/_svseeds/_Toggle.svelte

@@ -14,6 +14,7 @@
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement; // bindable
+    children?: Snippet;
   }
   ```
 -->
@@ -30,6 +31,7 @@
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement; // bindable
+    children?: Snippet;
   }
   export type ToggleReqdProps = never;
   export type ToggleBindProps = "value" | "status" | "element";
@@ -44,7 +46,7 @@
 </script>
 
 <script lang="ts">
-  let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable() }: ToggleProps = $props();
+  let { main, left, right, value = $bindable(false), type = "button", ariaLabel, status = $bindable(""), style, attributes, action, element = $bindable(), children }: ToggleProps = $props();
 
   // *** Initialize *** //
   if (!status) status = STATE.NEUTRAL;
@@ -88,6 +90,8 @@
 {#snippet contents()}
   {#if main}
     {@render main(status, value, element)}
+  {:else if children}
+    {@render children()}
   {/if}
 {/snippet}
 {#snippet button(role: string)}

package/_svseeds/_Toggle.svelte.d.ts

@@ -10,6 +10,7 @@ export interface ToggleProps {
     attributes?: HTMLButtonAttributes;
     action?: Action;
     element?: HTMLButtonElement;
+    children?: Snippet;
 }
 export type ToggleReqdProps = never;
 export type ToggleBindProps = "value" | "status" | "element";
@@ -32,6 +33,7 @@ import { type SVSStyle } from "./core";
  *   attributes?: HTMLButtonAttributes;
  *   action?: Action;
  *   element?: HTMLButtonElement; // bindable
+ *   children?: Snippet;
  * }
  * ```
  */

package/index.d.ts

@@ -2,7 +2,7 @@ export { type SVSStyle, BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, de
 export { default as Badge, type BadgeReqdProps, type BadgeBindProps } from "./_svseeds/_Badge.svelte";
 export { default as Button, type ButtonReqdProps, type ButtonBindProps } from "./_svseeds/_Button.svelte";
 export { default as CheckField, type CheckFieldReqdProps, type CheckFieldBindProps, type CheckFieldValidation } from "./_svseeds/_CheckField.svelte";
-export { default as ColorPicker, type ColorPickerReqdProps, type ColorPickerBindProps, getHex, getHex } from "./_svseeds/_ColorPicker.svelte";
+export { default as ColorPicker, type ColorPickerReqdProps, type ColorPickerBindProps, getHex } from "./_svseeds/_ColorPicker.svelte";
 export { default as ComboBox, type ComboBoxReqdProps, type ComboBoxBindProps } from "./_svseeds/_ComboBox.svelte";
 export { default as ContextMenu, type ContextMenuReqdProps, type ContextMenuBindProps } from "./_svseeds/_ContextMenu.svelte";
 export { default as Disclosure, type DisclosureReqdProps, type DisclosureBindProps } from "./_svseeds/_Disclosure.svelte";

package/index.js

@@ -2,7 +2,7 @@ export { BASE, STATE, PARTS, elemId, fnClass, isNeutral, omit, debounce, throttl
 export { default as Badge } from "./_svseeds/_Badge.svelte";
 export { default as Button } from "./_svseeds/_Button.svelte";
 export { default as CheckField } from "./_svseeds/_CheckField.svelte";
-export { default as ColorPicker, getHex, getHex } from "./_svseeds/_ColorPicker.svelte";
+export { default as ColorPicker, getHex } from "./_svseeds/_ColorPicker.svelte";
 export { default as ComboBox } from "./_svseeds/_ComboBox.svelte";
 export { default as ContextMenu } from "./_svseeds/_ContextMenu.svelte";
 export { default as Disclosure } from "./_svseeds/_Disclosure.svelte";

package/package.json

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