svseeds 0.6.0 → 0.7.1

package/_svseeds/Calendar.svelte

@@ -0,0 +1,349 @@
+<!--
+  @component
+  ### Usage
+  Use standalone.
+  ```svelte
+  <Calendar {...props} />
+  ```
+  ### 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
+    picking?: boolean; // bindable (false)
+    min?: Temporal.PlainDate;
+    max?: Temporal.PlainDate;
+    isDisabled?: (d: Temporal.PlainDate) => boolean;
+    outsideDays?: boolean; // (false)
+    fixedWeeks?: boolean; // (false)
+    firstDayOfWeek?: number; // (0=Sun)
+    locale?: string;
+    label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
+    prev?: Snippet<[string]>;
+    next?: Snippet<[string]>;
+    weekday?: Snippet<[number, string]>;
+    day?: Snippet<[DayCtx]>;
+    bottom?: Snippet<[string, () => void]>;
+    monthPicker?: Omit<MonthPickerProps, "value" | "min" | "max" | "variant">;
+    transition?: TransitionProp;
+    styling?: SVSClass;
+    variant?: SVSVariant; // (VARIANT.NEUTRAL)
+  }
+  ```
+  ### Anatomy
+  ```svelte
+  <div class="whole" role="application">
+    <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>
+      MonthPicker while picking
+    </div>
+    <div class="bottom" conditional>{bottom}</div>
+  </div>
+  ```
+  ### Behavior
+  - Prev/next page `display`; the label toggles an embedded `_MonthPicker`.
+  - Enabled day clicks and Enter/Space select a single `Temporal.PlainDate`.
+  - Day cells expose `data-today`, `data-selected`, `data-outside`, `data-disabled`, and `data-weekday`.
+  - 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;
+    picking?: boolean;
+    min?: Temporal.PlainDate;
+    max?: Temporal.PlainDate;
+    isDisabled?: (d: Temporal.PlainDate) => boolean;
+    outsideDays?: boolean;
+    fixedWeeks?: boolean;
+    firstDayOfWeek?: number;
+    locale?: string;
+    label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
+    prev?: Snippet<[string]>;
+    next?: Snippet<[string]>;
+    weekday?: Snippet<[number, string]>;
+    day?: Snippet<[DayCtx]>;
+    bottom?: Snippet<[string, () => void]>;
+    monthPicker?: Omit<MonthPickerProps, "value" | "min" | "max" | "variant">;
+    transition?: TransitionProp;
+    styling?: SVSClass;
+    variant?: SVSVariant;
+  }
+  export type CalendarReqdProps = never;
+  export type CalendarBindProps = "value" | "display" | "picking";
+
+  export const _CALENDAR_PRESET = "svs-calendar";
+
+  import { tick, untrack } from "svelte";
+  import { VARIANT, PARTS, _fnClass, shouldReduceMotion } from "./_core";
+  import MonthPicker from "./MonthPicker.svelte";
+  import type { Snippet } from "svelte";
+  import type { KeyboardEventHandler, MouseEventHandler } from "svelte/elements";
+  import type { SVSClass, SVSVariant } from "./_core";
+  import type { MonthPickerProps } from "./MonthPicker.svelte";
+</script>
+
+<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();
+
+  // *** Initialize *** //
+  const cls = $derived(_fnClass(_CALENDAR_PRESET, styling));
+  const uid = $props.id();
+  const idCaption = `${uid}-caption`;
+  // svelte-ignore state_referenced_locally
+  if (display === undefined) display = (value ?? Temporal.Now.plainDateISO()).toPlainYearMonth();
+  const today = $derived(Temporal.Now.plainDateISO());
+
+  // *** States *** //
+  const initialDisplay = display as Temporal.PlainYearMonth;
+  let focused = $state(value && sameMonth(value, initialDisplay) ? value : firstOf(initialDisplay));
+  const firstWeekday = $derived(normWeekday(firstDayOfWeek));
+  const monthStart = $derived(firstOf(currentDisplay()));
+  const captionText = $derived(monthStart.toLocaleString(locale, { year: "numeric", month: "long" }));
+  const appLabel = $derived(`Calendar, ${captionText}`);
+  const weekdayLabels = $derived.by(() => {
+    const short = new Intl.DateTimeFormat(locale, { weekday: "narrow" });
+    const long = new Intl.DateTimeFormat(locale, { weekday: "long" });
+    return Array.from({ length: 7 }, (_, i) => {
+      const weekday = (firstWeekday + i) % 7;
+      const d = dateForWeekday(weekday);
+      return { weekday, text: short.format(d), full: long.format(d) };
+    });
+  });
+  const weeks = $derived.by(() => {
+    const first = monthStart;
+    const lead = (weekdayOf(first) - firstWeekday + 7) % 7;
+    const rows = fixedWeeks ? 6 : Math.ceil((lead + first.daysInMonth) / 7);
+    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 tfn = $derived(!reduced && transition?.fn ? transition.fn : noop);
+  const tparams = $derived(transition?.params as any);
+
+  // *** Reactive Handlers *** //
+  $effect.pre(() => {
+    display;
+    value;
+    untrack(() => syncFocus());
+  });
+
+  function syncFocus() {
+    const shown = currentDisplay();
+    if (sameMonth(focused, shown)) return;
+    focused = value && sameMonth(value, shown) ? value : firstOf(shown);
+  }
+  function currentDisplay(): Temporal.PlainYearMonth {
+    return display ?? initialDisplay;
+  }
+  function noop() {
+    return {};
+  }
+  function firstOf(ym: Temporal.PlainYearMonth): Temporal.PlainDate {
+    return Temporal.PlainDate.from({ year: ym.year, month: ym.month, day: 1 });
+  }
+  function normWeekday(n: number): number {
+    return ((Math.trunc(n) % 7) + 7) % 7;
+  }
+  function weekdayOf(d: Temporal.PlainDate): number {
+    return d.dayOfWeek % 7;
+  }
+  function sameMonth(d: Temporal.PlainDate, ym: Temporal.PlainYearMonth): boolean {
+    return d.year === ym.year && d.month === ym.month;
+  }
+  function dateForWeekday(weekday: number): Date {
+    return new Date(Date.UTC(2023, 0, 1 + weekday));
+  }
+  function inRange(d: Temporal.PlainDate): boolean {
+    if (min && Temporal.PlainDate.compare(d, min) < 0) return false;
+    if (max && Temporal.PlainDate.compare(d, max) > 0) return false;
+    return true;
+  }
+  function disabled(d: Temporal.PlainDate): boolean {
+    return !inRange(d) || !!isDisabled?.(d);
+  }
+  function selected(d: Temporal.PlainDate): boolean {
+    return !!value?.equals(d);
+  }
+  function variantOf(d: Temporal.PlainDate): string {
+    if (disabled(d)) return VARIANT.INACTIVE;
+    if (selected(d)) return VARIANT.ACTIVE;
+    return VARIANT.NEUTRAL;
+  }
+  function ctx(d: Temporal.PlainDate): DayCtx {
+    return {
+      date: d,
+      variant: variantOf(d),
+      weekday: weekdayOf(d),
+      today: today.equals(d),
+      selected: selected(d),
+      outside: !sameMonth(d, currentDisplay()),
+      disabled: disabled(d),
+    };
+  }
+  function labelOf(d: Temporal.PlainDate): string {
+    return d.toLocaleString(locale, { dateStyle: "long" });
+  }
+  function displayOf(d: Temporal.PlainDate) {
+    display = d.toPlainYearMonth();
+  }
+  function prevMonth() {
+    display = currentDisplay().subtract({ months: 1 });
+  }
+  function nextMonth() {
+    display = currentDisplay().add({ months: 1 });
+  }
+  function select(d: Temporal.PlainDate) {
+    if (disabled(d)) return;
+    value = d;
+    focused = d;
+    if (!sameMonth(d, currentDisplay())) displayOf(d);
+  }
+  function setToday() {
+    displayOf(today);
+    select(today);
+  }
+  function move(d: Temporal.PlainDate) {
+    focused = d;
+    if (!sameMonth(d, currentDisplay())) displayOf(d);
+    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();
+  }
+  function weekEdge(toEnd: boolean): Temporal.PlainDate {
+    const offset = (weekdayOf(focused) - firstWeekday + 7) % 7;
+    return focused.add({ days: toEnd ? 6 - offset : -offset });
+  }
+
+  // *** Event Handlers *** //
+  const hprev: MouseEventHandler<HTMLButtonElement> = () => prevMonth();
+  const hnext: MouseEventHandler<HTMLButtonElement> = () => nextMonth();
+  const hlabel: MouseEventHandler<HTMLButtonElement> = () => (picking = !picking);
+  const hkeydown: KeyboardEventHandler<HTMLDivElement> = (ev) => {
+    let next: Temporal.PlainDate | undefined;
+    if (ev.key === "ArrowLeft") next = focused.subtract({ days: 1 });
+    else if (ev.key === "ArrowRight") next = focused.add({ days: 1 });
+    else if (ev.key === "ArrowUp") next = focused.subtract({ days: 7 });
+    else if (ev.key === "ArrowDown") next = focused.add({ days: 7 });
+    else if (ev.key === "Home") next = weekEdge(false);
+    else if (ev.key === "End") next = weekEdge(true);
+    else if (ev.key === "PageUp") next = focused.subtract(ev.shiftKey ? { years: 1 } : { months: 1 });
+    else if (ev.key === "PageDown") next = focused.add(ev.shiftKey ? { years: 1 } : { months: 1 });
+    else if (ev.key === "Enter" || ev.key === " ") select(focused);
+    else return;
+    ev.preventDefault();
+    if (next) move(next);
+  };
+</script>
+
+<!---------------------------------------->
+
+<div class={cls(PARTS.WHOLE, variant)} role="application" 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
+    >
+    <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
+    >
+  </div>
+
+  {#if picking}
+    <div class={cls(PARTS.MIDDLE, variant)} transition:tfn|local={tparams}>
+      <MonthPicker
+        {...monthPicker}
+        bind:value={() => currentDisplay(), (v) => (display = v)}
+        min={min?.toPlainYearMonth()}
+        max={max?.toPlainYearMonth()}
+        {variant}
+      />
+    </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}>
+        {#each weeks as week}
+          <div role="row">
+            {#each week as cell}
+              {@const outside = !sameMonth(cell, currentDisplay())}
+              {#if outside && !outsideDays}
+                <span class={cls(PARTS.EXTRA, VARIANT.NEUTRAL)} role="gridcell" aria-hidden="true"></span>
+              {:else}
+                {@const c = ctx(cell)}
+                <button
+                  class={cls(PARTS.EXTRA, c.variant)}
+                  type="button"
+                  role="gridcell"
+                  tabindex={cell.equals(focused) ? 0 : -1}
+                  aria-selected={c.selected}
+                  aria-disabled={c.disabled || undefined}
+                  aria-current={c.today ? "date" : undefined}
+                  aria-label={labelOf(cell)}
+                  data-date={cell.toString()}
+                  data-today={c.today || undefined}
+                  data-selected={c.selected || undefined}
+                  data-outside={c.outside || undefined}
+                  data-disabled={c.disabled || undefined}
+                  data-weekday={c.weekday}
+                  onfocus={() => (focused = cell)}
+                  onclick={() => select(cell)}
+                >
+                  {#if day}{@render day(c)}{:else}{cell.day}{/if}
+                </button>
+              {/if}
+            {/each}
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  {#if bottom}
+    <div class={cls(PARTS.BOTTOM, variant)}>{@render bottom(variant, setToday)}</div>
+  {/if}
+</div>

package/_svseeds/Calendar.svelte.d.ts

@@ -0,0 +1,113 @@
+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;
+    picking?: boolean;
+    min?: Temporal.PlainDate;
+    max?: Temporal.PlainDate;
+    isDisabled?: (d: Temporal.PlainDate) => boolean;
+    outsideDays?: boolean;
+    fixedWeeks?: boolean;
+    firstDayOfWeek?: number;
+    locale?: string;
+    label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
+    prev?: Snippet<[string]>;
+    next?: Snippet<[string]>;
+    weekday?: Snippet<[number, string]>;
+    day?: Snippet<[DayCtx]>;
+    bottom?: Snippet<[string, () => void]>;
+    monthPicker?: Omit<MonthPickerProps, "value" | "min" | "max" | "variant">;
+    transition?: TransitionProp;
+    styling?: SVSClass;
+    variant?: SVSVariant;
+}
+export type CalendarReqdProps = never;
+export type CalendarBindProps = "value" | "display" | "picking";
+export declare const _CALENDAR_PRESET = "svs-calendar";
+import type { Snippet } from "svelte";
+import type { SVSClass, SVSVariant } from "./_core";
+import type { MonthPickerProps } from "./MonthPicker.svelte";
+/**
+ * ### Usage
+ * Use standalone.
+ * ```svelte
+ * <Calendar {...props} />
+ * ```
+ * ### 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
+ *   picking?: boolean; // bindable (false)
+ *   min?: Temporal.PlainDate;
+ *   max?: Temporal.PlainDate;
+ *   isDisabled?: (d: Temporal.PlainDate) => boolean;
+ *   outsideDays?: boolean; // (false)
+ *   fixedWeeks?: boolean; // (false)
+ *   firstDayOfWeek?: number; // (0=Sun)
+ *   locale?: string;
+ *   label?: Snippet<[Temporal.PlainYearMonth, string, boolean]>;
+ *   prev?: Snippet<[string]>;
+ *   next?: Snippet<[string]>;
+ *   weekday?: Snippet<[number, string]>;
+ *   day?: Snippet<[DayCtx]>;
+ *   bottom?: Snippet<[string, () => void]>;
+ *   monthPicker?: Omit<MonthPickerProps, "value" | "min" | "max" | "variant">;
+ *   transition?: TransitionProp;
+ *   styling?: SVSClass;
+ *   variant?: SVSVariant; // (VARIANT.NEUTRAL)
+ * }
+ * ```
+ * ### Anatomy
+ * ```svelte
+ * <div class="whole" role="application">
+ *   <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>
+ *     MonthPicker while picking
+ *   </div>
+ *   <div class="bottom" conditional>{bottom}</div>
+ * </div>
+ * ```
+ * ### Behavior
+ * - Prev/next page `display`; the label toggles an embedded `_MonthPicker`.
+ * - Enabled day clicks and Enter/Space select a single `Temporal.PlainDate`.
+ * - Day cells expose `data-today`, `data-selected`, `data-outside`, `data-disabled`, and `data-weekday`.
+ * - Arrow, Home/End, PageUp/PageDown, and Shift+PageUp/PageDown update roving focus.
+ */
+declare const Calendar: import("svelte").Component<CalendarProps, {}, "display" | "value" | "picking">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/_svseeds/CheckField.svelte

@@ -0,0 +1,228 @@
+<!--
+  @component
+  ### Usage
+  Use standalone.
+  ```svelte
+  <CheckField {...props} />
+  ```
+  ### Types
+  default value: *`(value)`*
+  ```ts
+  interface CheckFieldProps extends Omit<HTMLInputAttributes, "type" | "value" | "id"> {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
+    bottom?: string;
+    reserve?: boolean; // (false)
+    values?: string[]; // bindable
+    multiple?: boolean; // (true)
+    validations?: CheckFieldValidation[];
+    constraints?: CheckFieldConstraint[];
+    attach?: Attachment<HTMLInputElement>;
+    elements?: HTMLInputElement[]; // bindable
+    styling?: SVSClass;
+    variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
+    // class & other HTMLInputAttributes are passed to each <input> via ...rest (class is merged onto each input; required is applied dynamically)
+  }
+  type CheckFieldValidation = SVSFieldValidation<string[]>;
+  type CheckFieldConstraint = SVSFieldConstraint;
+  ```
+  ### Anatomy
+  ```svelte
+  <div class="whole">
+    <div class="top" conditional: label or aux>
+      <span class="label" conditional>
+        {label}
+        <span class="extra" conditional>{extra}</span>
+      </span>
+      <span class="aux" conditional>{aux}</span>
+    </div>
+    <div class="middle">
+      {#each options as { value, text }, i}
+        <label class="main">
+          <input class="left" {...rest} />
+          <span class="right">{text}</span>
+        </label>
+      {/each}
+    </div>
+    <div class="bottom" conditional: has text, or always when reserve>{bottom}</div>
+  </div>
+  ```
+-->
+<script module lang="ts">
+  export interface CheckFieldProps extends Omit<HTMLInputAttributes, "type" | "value" | "id"> {
+    options: SvelteMap<string, string> | Map<string, string>;
+    label?: string;
+    extra?: string;
+    aux?: Snippet<[string[], string, HTMLInputElement[]]>; // Snippet<[values,variant,elements]>
+    bottom?: string;
+    reserve?: boolean; // (false)
+    values?: string[]; // bindable
+    multiple?: boolean; // (true)
+    validations?: CheckFieldValidation[];
+    constraints?: CheckFieldConstraint[];
+    attach?: Attachment<HTMLInputElement>;
+    elements?: HTMLInputElement[]; // bindable
+    styling?: SVSClass;
+    variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
+  }
+  export type CheckFieldReqdProps = "options";
+  export type CheckFieldBindProps = "values" | "variant" | "elements";
+  export type CheckFieldValidation = SVSFieldValidation<string[]>;
+  export type CheckFieldConstraint = SVSFieldConstraint;
+
+  export const _CHECK_FIELD_PRESET = "svs-check-field";
+
+  import { untrack, onMount } from "svelte";
+  import { VARIANT, PARTS, _fnClass, _isNeutral } from "./_core";
+  import type { Snippet } from "svelte";
+  import type { Attachment } from "svelte/attachments";
+  import type { SvelteMap } from "svelte/reactivity";
+  import type { HTMLInputAttributes, ChangeEventHandler, EventHandler } from "svelte/elements";
+  import type { SVSClass, SVSVariant, SVSFieldValidation, SVSFieldConstraint } from "./_core";
+</script>
+
+<script lang="ts">
+  // prettier-ignore
+  let { options, label, extra, aux, bottom, reserve = false, values = $bindable([]), multiple = true, validations = [], constraints = [], name, onchange, oninvalid, attach, elements = $bindable([]), styling, variant = $bindable(VARIANT.NEUTRAL), class: c, required = false, ...rest }: CheckFieldProps = $props();
+
+  // *** Initialize *** //
+  const cls = $derived(_fnClass(_CHECK_FIELD_PRESET, styling));
+  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 roleGroup = $derived(multiple ? "group" : "radiogroup");
+  let errmsg = $state("");
+  const message = $derived(variant === VARIANT.INACTIVE ? errmsg || bottom : 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 invalid = $derived(variant === VARIANT.INACTIVE ? true : undefined);
+  const idMsg = $derived(variant === VARIANT.INACTIVE && message?.trim() ? idErr : undefined);
+  const reqd = $derived(required && (!multiple || !values.length) ? true : undefined);
+  function shift(oninvalid: boolean = false, msg?: string) {
+    const vmsg = elements[0]?.validationMessage ?? "";
+    variant = msg ? VARIANT.INACTIVE : !values.length && !oninvalid ? neutral : vmsg ? VARIANT.INACTIVE : VARIANT.ACTIVE;
+    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("");
+  }
+  function check(value: string): string {
+    if (!elements[0]) return "";
+    for (const c of constraints) {
+      const msg = c({ value, values, validity: elements[0].validity, element: elements[0] });
+      if (msg) return msg;
+    }
+    return "";
+  }
+
+  // *** Reactive Handlers *** //
+  const opts = $derived(Array.from(options, ([value, text]) => ({ value, text, checked: values.includes(value) })));
+  $effect.pre(() => {
+    values;
+    untrack(() => validate(true));
+  });
+  function validate(effect?: boolean) {
+    if (effect && _isNeutral(variant)) return;
+    verify();
+    shift();
+  }
+
+  // *** Event Handlers *** //
+  const hchange: ChangeEventHandler<HTMLInputElement> = (ev) => {
+    onchange?.(ev);
+    const input = ev.currentTarget;
+    if (input.checked) {
+      const msg = check(input.value);
+      if (msg) {
+        input.checked = false;
+        shift(false, msg);
+        return;
+      }
+    }
+    values = elements.filter((el) => el.checked).map((el) => el.value);
+    validate();
+  };
+  const hinvalid: EventHandler<Event, HTMLInputElement> = (ev) => {
+    oninvalid?.(ev);
+    ev.preventDefault();
+    shift(true);
+  };
+  onMount(() => verify());
+</script>
+
+<!---------------------------------------->
+
+{#if opts.length}
+  <div class={cls(PARTS.WHOLE, variant)} role="group" aria-labelledby={idLabel}>
+    {#if label?.trim() || aux}
+      <div class={cls(PARTS.TOP, variant)}>
+        {@render lbl()}
+        {#if aux}
+          <span class={cls(PARTS.AUX, variant)}>{@render aux(values, variant, elements)}</span>
+        {/if}
+      </div>
+    {/if}
+    {@render main()}
+    {#if reserve || message?.trim()}
+      <div class={cls(PARTS.BOTTOM, variant)} id={idDesc ?? idErr} role={live}>{message}</div>
+    {/if}
+  </div>
+{/if}
+
+{#snippet lbl()}
+  {#if label?.trim()}
+    <span class={cls(PARTS.LABEL, variant)} id={idLabel}>
+      {label}
+      {#if extra?.trim()}
+        <span class={cls(PARTS.EXTRA, variant)}>{extra}</span>
+      {/if}
+    </span>
+  {/if}
+{/snippet}
+{#snippet main()}
+  <div
+    class={cls(PARTS.MIDDLE, variant)}
+    role={roleGroup}
+    aria-labelledby={idLabel}
+    aria-describedby={idDesc}
+    aria-invalid={!multiple ? invalid : undefined}
+    aria-errormessage={!multiple ? idMsg : undefined}
+  >
+    {#each opts as { value, text, checked }, i (value)}
+      {@const stat = checked ? VARIANT.ACTIVE : neutral}
+      <label class={cls(PARTS.MAIN, stat)}>
+        <input
+          bind:this={elements[i]}
+          class={[cls(PARTS.LEFT, stat), c]}
+          {...rest}
+          required={reqd}
+          aria-invalid={multiple ? invalid : undefined}
+          aria-errormessage={multiple ? idMsg : undefined}
+          {value}
+          name={nm}
+          {type}
+          {checked}
+          onchange={hchange}
+          oninvalid={hinvalid}
+          {@attach attach}
+        />
+        <span class={cls(PARTS.RIGHT, stat)}>{text}</span>
+      </label>
+    {/each}
+  </div>
+{/snippet}