svseeds 0.7.1 → 0.8.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/svseeds)](https://www.npmjs.com/package/svseeds)
 [![JSR Version](https://img.shields.io/jsr/v/%40svseeds/ui)](https://jsr.io/@svseeds/ui)
-[![license](https://img.shields.io/npm/l/svseeds)](LICENSE.md)
+[![license](https://img.shields.io/npm/l/svseeds)](LICENSE)
 
 SvSeeds is a collection of essential functional components for Svelte development. These components are intentionally designed with minimal styling, giving you complete freedom to apply your own styles based on your project requirements. For specialized needs, you can download the components as .svelte files through our CLI tool and customize their functionality directly.
 

package/_svseeds/Accordion.svelte

@@ -24,7 +24,7 @@
     value: string; // REQUIRED, unique within `items`. Addresses `current`.
     label: string | Snippet<[boolean, string]> | AccordionComponent;
     panel: Snippet<[string]> | AccordionComponent;
-    disabled?: boolean; // (false)
+    inactive?: string | boolean; // (false) reason string OR true; forwarded to Disclosure
   };
   ```
   `value`s must be unique within `items`. Accordion is exclusive: at most one item is open at a time.
@@ -36,7 +36,7 @@
       {children}
     {:else}
       {#each items as item}
-        <Disclosure id={item.value} label={item.label} inactive={item.disabled || undefined}>
+        <Disclosure id={item.value} label={item.label} inactive={item.inactive}>
           {item.panel}
         </Disclosure>
       {/each}
@@ -63,7 +63,7 @@
     value: string; // REQUIRED, unique within `items`. Addresses `current`.
     label: string | Snippet<[boolean, string]> | AccordionComponent;
     panel: Snippet<[string]> | AccordionComponent;
-    disabled?: boolean; // (false)
+    inactive?: string | boolean; // (false) reason string OR true; forwarded to Disclosure
   };
 
   export const _ACCORDION_PRESET = "svs-accordion";
@@ -71,6 +71,9 @@
   function isComponent(x: unknown): x is AccordionComponent {
     return typeof x === "object" && x !== null && "component" in x;
   }
+  function isInactive(x?: string | boolean) {
+    return x === true || (typeof x === "string" && x.trim().length > 0);
+  }
 
   import { untrack } from "svelte";
   import { VARIANT, PARTS, _fnClass, _omit } from "./_core";
@@ -104,7 +107,9 @@
     },
   };
   _setDisclosureContext(ctx);
-  const selected = $derived(children || !items ? current : items.some((it) => it.value === current && !it.disabled) ? current : undefined);
+  const selected = $derived(
+    children || !items ? current : items.some((it) => it.value === current && !isInactive(it.inactive)) ? current : undefined,
+  );
 
   // *** Initialize Child Props *** //
   const childProps = $derived({
@@ -133,7 +138,7 @@
       {#snippet panel(variant: string)}
         {@render panelContent(item.panel, variant)}
       {/snippet}
-      <Disclosure id={item.value} {label} children={panel} inactive={item.disabled || undefined} {variant} {...childProps} />
+      <Disclosure id={item.value} {label} children={panel} inactive={item.inactive} {variant} {...childProps} />
     {/each}
   </div>
 {/if}

package/_svseeds/Accordion.svelte.d.ts

@@ -16,7 +16,7 @@ export type AccordionItem = {
     value: string;
     label: string | Snippet<[boolean, string]> | AccordionComponent;
     panel: Snippet<[string]> | AccordionComponent;
-    disabled?: boolean;
+    inactive?: string | boolean;
 };
 export declare const _ACCORDION_PRESET = "svs-accordion";
 import type { Component, Snippet } from "svelte";
@@ -47,7 +47,7 @@ import type { DisclosureProps, DisclosureReqdProps, DisclosureBindProps } from "
  *   value: string; // REQUIRED, unique within `items`. Addresses `current`.
  *   label: string | Snippet<[boolean, string]> | AccordionComponent;
  *   panel: Snippet<[string]> | AccordionComponent;
- *   disabled?: boolean; // (false)
+ *   inactive?: string | boolean; // (false) reason string OR true; forwarded to Disclosure
  * };
  * ```
  * `value`s must be unique within `items`. Accordion is exclusive: at most one item is open at a time.
@@ -59,7 +59,7 @@ import type { DisclosureProps, DisclosureReqdProps, DisclosureBindProps } from "
  *     {children}
  *   {:else}
  *     {#each items as item}
- *       <Disclosure id={item.value} label={item.label} inactive={item.disabled || undefined}>
+ *       <Disclosure id={item.value} label={item.label} inactive={item.inactive}>
  *         {item.panel}
  *       </Disclosure>
  *     {/each}

package/_svseeds/Calendar.svelte

@@ -8,19 +8,6 @@
   ### Types
   default value: *`(value)`*
   ```ts
-  type DayCtx = {
-    date: Temporal.PlainDate;
-    variant: string;
-    weekday: number;
-    today: boolean;
-    selected: boolean;
-    outside: boolean;
-    disabled: boolean;
-  };
-  type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-  };
   interface CalendarProps {
     value?: Temporal.PlainDate; // bindable; selected date
     display?: Temporal.PlainYearMonth; // bindable; shown month
@@ -33,8 +20,8 @@
     firstDayOfWeek?: number; // (0=Sun)
     locale?: string;
     label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
-    prev?: Snippet<[string]>;
-    next?: Snippet<[string]>;
+    left?: Snippet<[string]>;
+    right?: Snippet<[string]>;
     weekday?: Snippet<[number, string]>;
     day?: Snippet<[DayCtx]>;
     bottom?: Snippet<[string, () => void]>;
@@ -43,18 +30,33 @@
     styling?: SVSClass;
     variant?: SVSVariant; // (VARIANT.NEUTRAL)
   }
+  type DayCtx = {
+    date: Temporal.PlainDate;
+    variant: string;
+    weekday: number;
+    today: boolean;
+    selected: boolean;
+    outside: boolean;
+    disabled: boolean;
+  };
+  type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+  };
   ```
   ### Anatomy
   ```svelte
-  <div class="whole" role="application">
+  <div class="whole" role="group">
     <div class="top">
       <button class="left" />
       <button class="label" />
       <button class="right" />
     </div>
     <div class="middle">
-      <div class="aux" role="row">weekday headers</div>
-      <div class="main" role="grid">day cells</div>
+      <div class="main" role="grid">
+        <div class="aux" role="row">weekday headers</div>
+        day cells
+      </div>
       MonthPicker while picking
     </div>
     <div class="bottom" conditional>{bottom}</div>
@@ -67,19 +69,6 @@
   - Arrow, Home/End, PageUp/PageDown, and Shift+PageUp/PageDown update roving focus.
 -->
 <script module lang="ts">
-  export type DayCtx = {
-    date: Temporal.PlainDate;
-    variant: string;
-    weekday: number;
-    today: boolean;
-    selected: boolean;
-    outside: boolean;
-    disabled: boolean;
-  };
-  export type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-  };
   export interface CalendarProps {
     value?: Temporal.PlainDate;
     display?: Temporal.PlainYearMonth;
@@ -92,8 +81,8 @@
     firstDayOfWeek?: number;
     locale?: string;
     label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
-    prev?: Snippet<[string]>;
-    next?: Snippet<[string]>;
+    left?: Snippet<[string]>;
+    right?: Snippet<[string]>;
     weekday?: Snippet<[number, string]>;
     day?: Snippet<[DayCtx]>;
     bottom?: Snippet<[string, () => void]>;
@@ -102,6 +91,19 @@
     styling?: SVSClass;
     variant?: SVSVariant;
   }
+  export type DayCtx = {
+    date: Temporal.PlainDate;
+    variant: string;
+    weekday: number;
+    today: boolean;
+    selected: boolean;
+    outside: boolean;
+    disabled: boolean;
+  };
+  export type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+  };
   export type CalendarReqdProps = never;
   export type CalendarBindProps = "value" | "display" | "picking";
 
@@ -118,7 +120,7 @@
 
 <script lang="ts">
   // prettier-ignore
-  let { value = $bindable(), display = $bindable(), picking = $bindable(false), min, max, isDisabled, outsideDays = false, fixedWeeks = false, firstDayOfWeek = 0, locale, label, prev, next, weekday, day, bottom, monthPicker, transition, styling, variant = VARIANT.NEUTRAL }: CalendarProps = $props();
+  let { value = $bindable(), display = $bindable(), picking = $bindable(false), min, max, isDisabled, outsideDays = false, fixedWeeks = false, firstDayOfWeek = 0, locale, label, left, right, weekday, day, bottom, monthPicker, transition, styling, variant = VARIANT.NEUTRAL }: CalendarProps = $props();
 
   // *** Initialize *** //
   const cls = $derived(_fnClass(_CALENDAR_PRESET, styling));
@@ -131,6 +133,7 @@
   // *** States *** //
   const initialDisplay = display as Temporal.PlainYearMonth;
   let focused = $state(value && sameMonth(value, initialDisplay) ? value : firstOf(initialDisplay));
+  let cells = $state<Record<string, HTMLElement>>({});
   const firstWeekday = $derived(normWeekday(firstDayOfWeek));
   const monthStart = $derived(firstOf(currentDisplay()));
   const captionText = $derived(monthStart.toLocaleString(locale, { year: "numeric", month: "long" }));
@@ -151,7 +154,17 @@
     const start = first.subtract({ days: lead });
     return Array.from({ length: rows }, (_, r) => Array.from({ length: 7 }, (_, c) => start.add({ days: r * 7 + c })));
   });
-  const reduced = $derived(typeof window !== "undefined" && shouldReduceMotion());
+  const cellKeys = $derived.by(() => {
+    const shown = currentDisplay();
+    const keys = new Set<string>();
+    for (const week of weeks) {
+      for (const cell of week) {
+        if (outsideDays || sameMonth(cell, shown)) keys.add(cell.toString());
+      }
+    }
+    return keys;
+  });
+  const reduced = $derived(shouldReduceMotion());
   const tfn = $derived(!reduced && transition?.fn ? transition.fn : noop);
   const tparams = $derived(transition?.params as any);
 
@@ -161,6 +174,10 @@
     value;
     untrack(() => syncFocus());
   });
+  $effect.pre(() => {
+    cellKeys;
+    untrack(() => trimCells(cellKeys));
+  });
 
   function syncFocus() {
     const shown = currentDisplay();
@@ -243,8 +260,12 @@
     tick().then(() => focusDate(d));
   }
   function focusDate(d: Temporal.PlainDate) {
-    const el = document.querySelector(`[data-svs-calendar="${uid}"] [data-date="${d.toString()}"]`) as HTMLElement | null;
-    el?.focus();
+    cells[d.toString()]?.focus();
+  }
+  function trimCells(keys: Set<string>) {
+    for (const key of Object.keys(cells)) {
+      if (!keys.has(key)) delete cells[key];
+    }
   }
   function weekEdge(toEnd: boolean): Temporal.PlainDate {
     const offset = (weekdayOf(focused) - firstWeekday + 7) % 7;
@@ -274,16 +295,16 @@
 
 <!---------------------------------------->
 
-<div class={cls(PARTS.WHOLE, variant)} role="application" aria-label={appLabel} data-svs-calendar={uid}>
+<div class={cls(PARTS.WHOLE, variant)} role="group" aria-label={appLabel} data-svs-calendar={uid}>
   <div class={cls(PARTS.TOP, variant)}>
     <button class={cls(PARTS.LEFT, variant)} type="button" onclick={hprev}
-      >{#if prev}{@render prev(variant)}{:else}Previous{/if}</button
+      >{#if left}{@render left(variant)}{:else}Previous{/if}</button
     >
     <button id={idCaption} class={cls(PARTS.LABEL, variant)} type="button" aria-expanded={picking} onclick={hlabel}>
       {#if label}{@render label(currentDisplay(), variant, picking)}{:else}{captionText}{/if}
     </button>
     <button class={cls(PARTS.RIGHT, variant)} type="button" onclick={hnext}
-      >{#if next}{@render next(variant)}{:else}Next{/if}</button
+      >{#if right}{@render right(variant)}{:else}Next{/if}</button
     >
   </div>
 
@@ -299,14 +320,14 @@
     </div>
   {:else}
     <div class={cls(PARTS.MIDDLE, variant)} transition:tfn|local={tparams}>
-      <div class={cls(PARTS.AUX, variant)} role="row">
-        {#each weekdayLabels as wl}
-          <span class={cls(PARTS.EXTRA, VARIANT.NEUTRAL)} role="columnheader" data-weekday={wl.weekday} aria-label={wl.full}>
-            {#if weekday}{@render weekday(wl.weekday, variant)}{:else}{wl.text}{/if}
-          </span>
-        {/each}
-      </div>
       <div class={cls(PARTS.MAIN, variant)} role="grid" tabindex="-1" aria-labelledby={idCaption} onkeydown={hkeydown}>
+        <div class={cls(PARTS.AUX, variant)} role="row">
+          {#each weekdayLabels as wl}
+            <span class={cls(PARTS.EXTRA, VARIANT.NEUTRAL)} role="columnheader" data-weekday={wl.weekday} aria-label={wl.full}>
+              {#if weekday}{@render weekday(wl.weekday, variant)}{:else}{wl.text}{/if}
+            </span>
+          {/each}
+        </div>
         {#each weeks as week}
           <div role="row">
             {#each week as cell}
@@ -320,6 +341,7 @@
                   type="button"
                   role="gridcell"
                   tabindex={cell.equals(focused) ? 0 : -1}
+                  bind:this={cells[cell.toString()]}
                   aria-selected={c.selected}
                   aria-disabled={c.disabled || undefined}
                   aria-current={c.today ? "date" : undefined}

package/_svseeds/Calendar.svelte.d.ts

@@ -1,18 +1,3 @@
-export type DayCtx = {
-    date: Temporal.PlainDate;
-    variant: string;
-    weekday: number;
-    today: boolean;
-    selected: boolean;
-    outside: boolean;
-    disabled: boolean;
-};
-export type TransitionProp = {
-    fn?: (node: HTMLElement, params: any, options: {
-        direction: "in" | "out" | "both";
-    }) => import("svelte/transition").TransitionConfig;
-    params?: unknown;
-};
 export interface CalendarProps {
     value?: Temporal.PlainDate;
     display?: Temporal.PlainYearMonth;
@@ -25,8 +10,8 @@ export interface CalendarProps {
     firstDayOfWeek?: number;
     locale?: string;
     label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
-    prev?: Snippet<[string]>;
-    next?: Snippet<[string]>;
+    left?: Snippet<[string]>;
+    right?: Snippet<[string]>;
     weekday?: Snippet<[number, string]>;
     day?: Snippet<[DayCtx]>;
     bottom?: Snippet<[string, () => void]>;
@@ -35,6 +20,21 @@ export interface CalendarProps {
     styling?: SVSClass;
     variant?: SVSVariant;
 }
+export type DayCtx = {
+    date: Temporal.PlainDate;
+    variant: string;
+    weekday: number;
+    today: boolean;
+    selected: boolean;
+    outside: boolean;
+    disabled: boolean;
+};
+export type TransitionProp = {
+    fn?: (node: HTMLElement, params: any, options: {
+        direction: "in" | "out" | "both";
+    }) => import("svelte/transition").TransitionConfig;
+    params?: unknown;
+};
 export type CalendarReqdProps = never;
 export type CalendarBindProps = "value" | "display" | "picking";
 export declare const _CALENDAR_PRESET = "svs-calendar";
@@ -50,19 +50,6 @@ import type { MonthPickerProps } from "./MonthPicker.svelte";
  * ### Types
  * default value: *`(value)`*
  * ```ts
- * type DayCtx = {
- *   date: Temporal.PlainDate;
- *   variant: string;
- *   weekday: number;
- *   today: boolean;
- *   selected: boolean;
- *   outside: boolean;
- *   disabled: boolean;
- * };
- * type TransitionProp = {
- *   fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
- *   params?: unknown;
- * };
  * interface CalendarProps {
  *   value?: Temporal.PlainDate; // bindable; selected date
  *   display?: Temporal.PlainYearMonth; // bindable; shown month
@@ -75,8 +62,8 @@ import type { MonthPickerProps } from "./MonthPicker.svelte";
  *   firstDayOfWeek?: number; // (0=Sun)
  *   locale?: string;
  *   label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
- *   prev?: Snippet<[string]>;
- *   next?: Snippet<[string]>;
+ *   left?: Snippet<[string]>;
+ *   right?: Snippet<[string]>;
  *   weekday?: Snippet<[number, string]>;
  *   day?: Snippet<[DayCtx]>;
  *   bottom?: Snippet<[string, () => void]>;
@@ -85,18 +72,33 @@ import type { MonthPickerProps } from "./MonthPicker.svelte";
  *   styling?: SVSClass;
  *   variant?: SVSVariant; // (VARIANT.NEUTRAL)
  * }
+ * type DayCtx = {
+ *   date: Temporal.PlainDate;
+ *   variant: string;
+ *   weekday: number;
+ *   today: boolean;
+ *   selected: boolean;
+ *   outside: boolean;
+ *   disabled: boolean;
+ * };
+ * type TransitionProp = {
+ *   fn?: (node: HTMLElement, params: any, options: { direction: "in" | "out" | "both" }) => import("svelte/transition").TransitionConfig;
+ *   params?: unknown;
+ * };
  * ```
  * ### Anatomy
  * ```svelte
- * <div class="whole" role="application">
+ * <div class="whole" role="group">
  *   <div class="top">
  *     <button class="left" />
  *     <button class="label" />
  *     <button class="right" />
  *   </div>
  *   <div class="middle">
- *     <div class="aux" role="row">weekday headers</div>
- *     <div class="main" role="grid">day cells</div>
+ *     <div class="main" role="grid">
+ *       <div class="aux" role="row">weekday headers</div>
+ *       day cells
+ *     </div>
  *     MonthPicker while picking
  *   </div>
  *   <div class="bottom" conditional>{bottom}</div>

package/_svseeds/CheckField.svelte

@@ -75,7 +75,7 @@
   export const _CHECK_FIELD_PRESET = "svs-check-field";
 
   import { untrack, onMount } from "svelte";
-  import { VARIANT, PARTS, _fnClass, _isNeutral } from "./_core";
+  import { VARIANT, PARTS, _fieldAria, _fieldIds, _fieldMessage, _fnClass, _isNeutral, _verify } from "./_core";
   import type { Snippet } from "svelte";
   import type { Attachment } from "svelte/attachments";
   import type { SvelteMap } from "svelte/reactivity";
@@ -92,21 +92,23 @@
   const type = $derived(multiple ? "checkbox" : "radio");
   const uid = $props.id();
   const nm = $derived(name?.trim() ? name : `${uid}-name`);
-  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);
   const roleGroup = $derived(multiple ? "group" : "radiogroup");
   let errmsg = $state("");
-  const message = $derived(variant === VARIANT.INACTIVE ? errmsg || bottom : bottom);
+  const message = $derived(_fieldMessage(variant, errmsg, bottom));
 
   // *** States *** //
   let neutral = $state(_isNeutral(variant) ? variant : VARIANT.NEUTRAL);
   $effect(() => {
     neutral = _isNeutral(variant) ? variant : neutral;
   });
-  const live = $derived(variant === VARIANT.INACTIVE ? "alert" : undefined);
+  const aria = $derived(_fieldAria(variant, message, idErr));
+  const live = $derived(aria.live);
   const invalid = $derived(variant === VARIANT.INACTIVE ? true : undefined);
-  const idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
+  const idMsg = $derived(aria.idMsg);
   const reqd = $derived(required && (!multiple || !values.length) ? true : undefined);
   function shift(oninvalid: boolean = false, msg?: string) {
     const vmsg = elements[0]?.validationMessage ?? "";
@@ -114,12 +116,7 @@
     errmsg = msg ? msg : vmsg;
   }
   function verify() {
-    if (!elements[0]) return;
-    for (const v of validations) {
-      const msg = v({ value: values, validity: elements[0].validity, element: elements[0] });
-      if (msg) return elements[0].setCustomValidity(msg);
-    }
-    elements[0].setCustomValidity("");
+    _verify(elements[0], validations, values);
   }
   function check(value: string): string {
     if (!elements[0]) return "";
@@ -132,10 +129,17 @@
 
   // *** Reactive Handlers *** //
   const opts = $derived(Array.from(options, ([value, text]) => ({ value, text, checked: values.includes(value) })));
+  $effect.pre(() => {
+    opts.length;
+    untrack(() => trimElements(opts.length));
+  });
   $effect.pre(() => {
     values;
     untrack(() => validate(true));
   });
+  function trimElements(length: number) {
+    if (elements.length > length) elements.length = length;
+  }
   function validate(effect?: boolean) {
     if (effect && _isNeutral(variant)) return;
     verify();
@@ -154,7 +158,7 @@
         return;
       }
     }
-    values = elements.filter((el) => el.checked).map((el) => el.value);
+    values = elements.filter((el) => el?.checked).map((el) => el.value);
     validate();
   };
   const hinvalid: EventHandler<Event, HTMLInputElement> = (ev) => {
@@ -179,7 +183,7 @@
     {/if}
     {@render main()}
     {#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>
 {/if}

package/_svseeds/ColorPicker.svelte

@@ -8,14 +8,16 @@
   ### Types
   default value: *`(value)`*
   ```ts
-  interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value"> {
+  interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
     value?: string; // bindable ("#000000")
     alpha?: number; // (1)
     checkered?: boolean; // (true)
+    ariaLabel?: string;
     attach?: Attachment<HTMLInputElement>;
     element?: HTMLInputElement; // bindable
     styling?: SVSClass;
     variant?: SVSVariant; // (VARIANT.NEUTRAL)
+    // ariaLabel is the recommended accessible-name prop; aria-labelledby may be passed via ...rest
     // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
   }
   ```
@@ -24,7 +26,7 @@
   <label class="whole">
     <div class="middle"> // this middle element can provide the default transparency background when checkered is true
       <div class="main"> // this main element is color sample and positions the transparent, focusable native input overlay
-        <input {...rest} type="color" />
+        <input aria-label {...rest} type="color" />
       </div>
     </div>
   </label>
@@ -36,10 +38,11 @@
   ```
 -->
 <script module lang="ts">
-  export interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha"> {
+  export interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
     value?: string; // bindable ("#000000")
     alpha?: number; // (1)
     checkered?: boolean; // (true)
+    ariaLabel?: string;
     attach?: Attachment<HTMLInputElement>;
     element?: HTMLInputElement; // bindable
     styling?: SVSClass;
@@ -89,7 +92,7 @@
 
 <script lang="ts">
   // prettier-ignore
-  let { value = $bindable(DEFAULT_COLOR), alpha = 1, checkered = true, attach, element = $bindable(), styling, variant = VARIANT.NEUTRAL, class: c, ...rest }: ColorPickerProps = $props();
+  let { value = $bindable(DEFAULT_COLOR), alpha = 1, checkered = true, ariaLabel, attach, element = $bindable(), styling, variant = VARIANT.NEUTRAL, class: c, ...rest }: ColorPickerProps = $props();
 
   // *** Initialize *** //
   const cls = $derived(_fnClass(_COLOR_PICKER_PRESET, styling));
@@ -113,6 +116,7 @@
         bind:value
         bind:this={element}
         class={c}
+        aria-label={ariaLabel}
         {...rest}
         type="color"
         style="position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;"

package/_svseeds/ColorPicker.svelte.d.ts

@@ -1,7 +1,8 @@
-export interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha"> {
+export interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
     value?: string;
     alpha?: number;
     checkered?: boolean;
+    ariaLabel?: string;
     attach?: Attachment<HTMLInputElement>;
     element?: HTMLInputElement;
     styling?: SVSClass;
@@ -24,14 +25,16 @@ import type { SVSClass, SVSVariant } from "./_core";
  * ### Types
  * default value: *`(value)`*
  * ```ts
- * interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value"> {
+ * interface ColorPickerProps extends Omit<HTMLInputAttributes, "type" | "value" | "alpha" | "aria-label"> {
  *   value?: string; // bindable ("#000000")
  *   alpha?: number; // (1)
  *   checkered?: boolean; // (true)
+ *   ariaLabel?: string;
  *   attach?: Attachment<HTMLInputElement>;
  *   element?: HTMLInputElement; // bindable
  *   styling?: SVSClass;
  *   variant?: SVSVariant; // (VARIANT.NEUTRAL)
+ *   // ariaLabel is the recommended accessible-name prop; aria-labelledby may be passed via ...rest
  *   // class & other HTMLInputAttributes are passed to <input> via ...rest (class is merged onto the control)
  * }
  * ```
@@ -40,7 +43,7 @@ import type { SVSClass, SVSVariant } from "./_core";
  * <label class="whole">
  *   <div class="middle"> // this middle element can provide the default transparency background when checkered is true
  *     <div class="main"> // this main element is color sample and positions the transparent, focusable native input overlay
- *       <input {...rest} type="color" />
+ *       <input aria-label {...rest} type="color" />
  *     </div>
  *   </div>
  * </label>

package/_svseeds/ComboBox.svelte

@@ -72,7 +72,7 @@
   export const [_getComboBoxContext, _setComboBoxContext] = _createContext<ComboBoxContext>();
 
   import { tick } from "svelte";
-  import { VARIANT, PARTS, _fnClass, _createContext } from "./_core";
+  import { VARIANT, PARTS, _detectOverflow, _fnClass, _createContext } from "./_core";
   import type { Snippet } from "svelte";
   import type { Attachment } from "svelte/attachments";
   import type { SvelteSet } from "svelte/reactivity";
@@ -141,9 +141,7 @@
     overflow = { x: false, y: false };
     await tick();
     if (!listElem || typeof window === "undefined") return;
-    const rect = listElem.getBoundingClientRect();
-    overflow.x = window.innerWidth < rect.right;
-    overflow.y = window.innerHeight < rect.bottom;
+    overflow = _detectOverflow(listElem);
   }
   function apply() {
     if (!expanded) return;
@@ -171,9 +169,9 @@
     onclick?.(ev);
     if (!expanded) open();
   };
-  const hinput: FormEventHandler<HTMLInputElement> = (ev) => {
+  const hinput: EventHandler<InputEvent, HTMLInputElement> = (ev) => {
     oninput?.(ev);
-    if ((ev as Parameters<EventHandler<InputEvent, HTMLInputElement>>[0]).isComposing) return;
+    if (ev.isComposing) return;
     typed = true;
     selected = effOptions?.has(effValue) ? view.indexOf(effValue) : NA;
   };
@@ -243,7 +241,7 @@
       onblur={hblur}
       onclick={hclick}
       onkeydown={hkeydown}
-      oninput={hinput}
+      oninput={hinput as FormEventHandler<HTMLInputElement>}
       {@attach attach}
     />
     {#if extra}

package/_svseeds/DarkToggle.svelte

@@ -294,9 +294,9 @@
     {@render children(value, variant, element)}
   {:else}
     {#if value}
-      {@render svgDark()}
-    {:else}
       {@render svgLight()}
+    {:else}
+      {@render svgDark()}
     {/if}
   {/if}
 {/snippet}