@runwisp/ui 1.4.0 → 1.5.1

package/src/lib/components/Radio.svelte

@@ -2,12 +2,17 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
+    import { getContext } from "svelte";
+    import { RADIO_GROUP_KEY, type RadioGroupContext } from "./radio-group.js";
+
     type RadioSize = "sm" | "md" | "lg";
 
     interface Props {
         value: string;
+        /** Selected value when used without a RadioGroup; inside one, the group owns it. */
         groupValue?: string;
-        name: string;
+        /** Defaults to the enclosing RadioGroup's name. */
+        name?: string;
         label: string;
         description?: string;
         disabled?: boolean;
@@ -32,7 +37,14 @@
         lg: { radio: "h-6 w-6", dot: "h-2.5 w-2.5", text: "text-base" },
     };
 
-    const isChecked = $derived(groupValue === value);
+    const group = getContext<RadioGroupContext | undefined>(RADIO_GROUP_KEY);
+
+    const isChecked = $derived((group ? group.value : groupValue) === value);
+
+    function select() {
+        if (group) group.value = value;
+        else groupValue = value;
+    }
 </script>
 
 <label
@@ -43,11 +55,11 @@
     <div class="relative flex shrink-0 items-center justify-center">
         <input
             type="radio"
-            {name}
+            name={name ?? group?.name}
             {value}
             {disabled}
             checked={isChecked}
-            onchange={() => (groupValue = value)}
+            onchange={select}
             class="
                 peer {sizeClasses[size].radio}
                 cursor-pointer appearance-none rounded-full

package/src/lib/components/RadioGroup.svelte

@@ -2,7 +2,8 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import { setContext, type Snippet } from "svelte";
+    import { RADIO_GROUP_KEY, type RadioGroupContext } from "./radio-group.js";
 
     type Orientation = "horizontal" | "vertical";
 
@@ -19,7 +20,7 @@
 
     let {
         value = $bindable(""),
-        name: _name,
+        name,
         label,
         error,
         hint,
@@ -28,6 +29,18 @@
         class: className = "",
     }: Props = $props();
 
+    setContext<RadioGroupContext>(RADIO_GROUP_KEY, {
+        get name() {
+            return name;
+        },
+        get value() {
+            return value;
+        },
+        set value(next: string) {
+            value = next;
+        },
+    });
+
     const orientationClasses: Record<Orientation, string> = {
         horizontal: "flex flex-row flex-wrap gap-x-6 gap-y-3",
         vertical: "flex flex-col gap-3",

package/src/lib/components/SearchInput.svelte

@@ -41,7 +41,7 @@
     // External writes to `value` (Reset / clear-all) win immediately: adopt them
     // and drop any pending debounce. Depends only on `value` (raw is read
     // untracked), so typing never re-enters here. Tiny race: a reset that leaves
-    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce —
+    // `value` unchanged ("" -> "") can't cancel a first-keystroke debounce,
     // negligible at 250ms. ponytail: guarded two-way sync, fine for one field.
     $effect(() => {
         const v = value;

package/src/lib/components/Select.svelte

@@ -16,10 +16,11 @@
 </script>
 
 <script lang="ts">
-    import { tick, onDestroy } from "svelte";
+    import { tick } from "svelte";
     import { ChevronDown, Check, Search } from "@lucide/svelte";
-    import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
-    import { generateUlid } from "@runwisp/common";
+    import { floating, isOutsideClick } from "../actions/floating.js";
+    import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
 
     type SelectSize = "sm" | "md" | "lg";
 
@@ -32,13 +33,15 @@
         searchable?: boolean;
         size?: SelectSize;
         error?: string;
-        hint?: string;
+        hint?: string | undefined;
         class?: string;
         id?: string;
         name?: string;
         onchange?: (value: unknown) => void;
     }
 
+    const uid = $props.id();
+
     let {
         value = $bindable(),
         options = [],
@@ -50,7 +53,7 @@
         error,
         hint,
         class: className = "",
-        id = `select-${generateUlid()}`,
+        id = `select-${uid}`,
         name,
         onchange,
         onsearch,
@@ -62,7 +65,6 @@
     let menuEl = $state<HTMLElement | null>(null);
     let searchInputEl = $state<HTMLInputElement | null>(null);
     let focusedIndex = $state(-1);
-    let cleanupFloating = $state<(() => void) | null>(null);
 
     $effect(() => {
         if (searchable && onsearch) {
@@ -107,31 +109,6 @@
         return list;
     });
 
-    import { portal } from "../actions/portal.js";
-    import { trapFocus } from "../actions/focusTrap.js";
-
-    async function setupFloating() {
-        if (!triggerEl || !menuEl) return;
-
-        menuEl.style.width = `${triggerEl.offsetWidth}px`;
-
-        cleanupFloating = autoUpdate(triggerEl, menuEl, () => {
-            if (!triggerEl || !menuEl) return;
-            void computePosition(triggerEl, menuEl, {
-                placement: "bottom-start",
-                middleware: [offset(6), flip(), shift({ padding: 10 })],
-            }).then(({ x, y }) => {
-                if (menuEl) {
-                    Object.assign(menuEl.style, {
-                        left: `${x}px`,
-                        top: `${y}px`,
-                        position: "absolute",
-                    });
-                }
-            });
-        });
-    }
-
     function toggle() {
         if (disabled) return;
         isOpen = !isOpen;
@@ -141,14 +118,10 @@
             if (focusedIndex === -1) focusedIndex = 0;
 
             void tick().then(() => {
-                void setupFloating();
                 if (searchable && searchInputEl) {
                     searchInputEl.focus();
                 }
             });
-        } else {
-            cleanupFloating?.();
-            cleanupFloating = null;
         }
     }
 
@@ -157,7 +130,6 @@
         value = option.value;
         onchange?.(value);
         isOpen = false;
-        cleanupFloating?.();
     }
 
     function handleKeydown(e: KeyboardEvent) {
@@ -172,7 +144,6 @@
         switch (e.key) {
             case "Escape":
                 isOpen = false;
-                cleanupFloating?.();
                 triggerEl?.focus();
                 break;
             case "ArrowDown":
@@ -212,18 +183,9 @@
     }
 
     function handleOutsideClick(e: MouseEvent) {
-        if (!isOpen) return;
-        const path = e.composedPath();
-        if (triggerEl && path.includes(triggerEl)) return;
-        if (menuEl && path.includes(menuEl)) return;
-        isOpen = false;
-        cleanupFloating?.();
+        if (isOpen && isOutsideClick(e, triggerEl, menuEl)) isOpen = false;
     }
 
-    onDestroy(() => {
-        cleanupFloating?.();
-    });
-
     const sizeClasses = {
         sm: "px-2.5 py-1.5 text-xs",
         md: "px-3.5 py-2 text-sm",
@@ -303,6 +265,13 @@
         <div
             use:portal
             use:trapFocus={{ autoFocus: false }}
+            use:floating={{
+                reference: triggerEl,
+                placement: "bottom-start",
+                offset: 6,
+                padding: 10,
+                matchWidth: true,
+            }}
             bind:this={menuEl}
             class="z-[9999] min-w-[200px]"
         >

package/src/lib/components/Sparkline.svelte

@@ -12,7 +12,7 @@
     }
 
     // `currentColor` by default so the caller can theme us with a Tailwind
-    // text-* class — that's the only way to flip on .dark without burning a
+    // text-* class, that's the only way to flip on .dark without burning a
     // hardcoded hex in here.
     let {
         data,
@@ -47,7 +47,7 @@
         return `${pathD} L${lastX.toFixed(1)},${height} L0,${height} Z`;
     });
 
-    // Use `fill-opacity` rather than appending "18" to a hex — that trick
+    // Use `fill-opacity` rather than appending "18" to a hex, that trick
     // breaks for `currentColor` / `oklch()` / `var(...)` values.
     let resolvedFill = $derived(fillColor ?? color);
     let resolvedFillOpacity = $derived(fillColor === undefined ? fillOpacity : 1);

package/src/lib/components/StatusDot.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
     interface Props {
         tone?: StatusDotTone;
-        /** Radar ping around the dot — use for "live" states only. */
+        /** Radar ping around the dot, use for "live" states only. */
         pulse?: boolean;
         size?: "sm" | "md" | "lg";
         class?: string;

package/src/lib/components/Table.svelte

@@ -6,14 +6,23 @@
 
     interface Props {
         children: Snippet;
+        /** Render only the <table>, without the scrolling bordered frame, for a
+         *  parent that supplies its own (as DataGrid does). */
+        bare?: boolean;
         class?: string;
     }
 
-    let { children, class: className = "" }: Props = $props();
+    let { children, bare = false, class: className = "" }: Props = $props();
 </script>
 
-<div class="overflow-x-auto rounded-[4px] border border-outline {className}">
-    <table class="w-full text-sm">
+{#if bare}
+    <table class="w-full text-sm {className}">
         {@render children()}
     </table>
-</div>
+{:else}
+    <div class="overflow-x-auto rounded-[4px] border border-outline {className}">
+        <table class="w-full text-sm">
+            {@render children()}
+        </table>
+    </div>
+{/if}

package/src/lib/components/TableBody.svelte

@@ -12,6 +12,7 @@
     let { children, class: className = "" }: Props = $props();
 </script>
 
-<tbody class={className}>
+<!-- The last row drops its divider: the frame below already draws that line. -->
+<tbody class="[&>tr:last-child]:border-b-0 {className}">
     {@render children()}
 </tbody>

package/src/lib/components/TableCell.svelte

@@ -3,17 +3,30 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { HTMLTdAttributes, HTMLThAttributes } from "svelte/elements";
 
     type CellAlign = "left" | "center" | "right";
+    type CellDensity = "compact" | "default" | "comfortable" | "none";
 
-    interface Props {
+    interface Props extends Omit<
+        HTMLTdAttributes & HTMLThAttributes,
+        "align" | "children" | "class"
+    > {
         header?: boolean;
-        align?: CellAlign;
-        children: Snippet;
+        align?: CellAlign | undefined;
+        density?: CellDensity;
+        children?: Snippet;
         class?: string;
     }
 
-    let { header = false, align = "left", children, class: className = "" }: Props = $props();
+    let {
+        header = false,
+        align = "left",
+        density = "default",
+        children,
+        class: className = "",
+        ...restProps
+    }: Props = $props();
 
     const alignClasses: Record<CellAlign, string> = {
         left: "text-left",
@@ -21,14 +34,31 @@
         right: "text-right",
     };
 
+    const densityClasses: Record<CellDensity, string> = {
+        compact: "px-3 py-2",
+        default: "px-4 py-3",
+        comfortable: "px-5 py-3.5",
+        none: "",
+    };
+
+    // A header with aria-sort set lights up with a primary underline, so a
+    // sorted column is marked for sighted users and screen readers alike.
+    const headerClasses = `
+        font-mono text-xs tracking-[0.08em] text-on-surface-faint uppercase
+        aria-[sort=ascending]:text-on-surface aria-[sort=descending]:text-on-surface
+        aria-[sort=ascending]:shadow-[inset_0_-2px_0_var(--color-primary)]
+        aria-[sort=descending]:shadow-[inset_0_-2px_0_var(--color-primary)]
+    `;
+
     const tag = $derived(header ? "th" : "td");
 </script>
 
 <svelte:element
     this={tag}
-    class="px-4 py-3 {alignClasses[align]} {header
-        ? 'font-mono text-xs tracking-wide text-on-surface-faint uppercase'
-        : 'text-on-surface'} {className}"
+    class="{densityClasses[density]} {alignClasses[align]} {header
+        ? headerClasses
+        : ''} {className}"
+    {...restProps}
 >
-    {@render children()}
+    {@render children?.()}
 </svelte:element>

package/src/lib/components/TableHead.svelte

@@ -3,17 +3,25 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import TableRow from "./TableRow.svelte";
 
     interface Props {
         children: Snippet;
+        /** Wrap children in one header row. Turn off to pass your own
+         *  TableRow(s), e.g. for a two-row header. */
+        row?: boolean;
         class?: string;
     }
 
-    let { children, class: className = "" }: Props = $props();
+    let { children, row = true, class: className = "" }: Props = $props();
 </script>
 
-<thead class="bg-surface-sunken/50 {className}">
-    <tr>
+<thead class={className}>
+    {#if row}
+        <TableRow>
+            {@render children()}
+        </TableRow>
+    {:else}
         {@render children()}
-    </tr>
+    {/if}
 </thead>

package/src/lib/components/TableRow.svelte

@@ -3,16 +3,36 @@
 
 <script lang="ts">
     import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
 
-    interface Props {
+    type RowBorder = "default" | "faint" | "none";
+
+    interface Props extends Omit<HTMLAttributes<HTMLTableRowElement>, "children" | "class"> {
         children: Snippet;
         hoverable?: boolean;
+        /** Bottom divider: `default` under a header, `faint` between body rows. */
+        border?: RowBorder;
         class?: string;
     }
 
-    let { children, hoverable = false, class: className = "" }: Props = $props();
+    let {
+        children,
+        hoverable = false,
+        border = "default",
+        class: className = "",
+        ...restProps
+    }: Props = $props();
+
+    const borderClasses: Record<RowBorder, string> = {
+        default: "border-b border-outline",
+        faint: "border-b border-outline-faint",
+        none: "",
+    };
 </script>
 
-<tr class="border-b border-outline {hoverable ? 'hover:bg-surface-sunken' : ''} {className}">
+<tr
+    class="{borderClasses[border]} {hoverable ? 'hover:bg-surface-sunken' : ''} {className}"
+    {...restProps}
+>
     {@render children()}
 </tr>

package/src/lib/components/TaskCard.svelte

@@ -4,7 +4,7 @@
 <script lang="ts">
     import type { Snippet } from "svelte";
 
-    export type TaskCardAccent = "danger" | "wisp" | "aurora";
+    type TaskCardAccent = "danger" | "wisp" | "aurora";
 
     interface Props {
         accent?: TaskCardAccent;

package/src/lib/components/TimezoneSelect.svelte

@@ -11,12 +11,12 @@
         label = "Timezone",
         disabled = false,
         hint,
-    } = $props<{
+    }: {
         value: string;
         label?: string;
         disabled?: boolean;
         hint?: string;
-    }>();
+    } = $props();
 
     type ZoneOption = {
         value: string;

package/src/lib/components/Tooltip.svelte

@@ -45,7 +45,7 @@
     {@render children()}
 
     <!-- Hover intent: 100ms before it appears, so sweeping the pointer across a
-         dense row doesn't flash a trail of bubbles. Still no fade — `duration-0`
+         dense row doesn't flash a trail of bubbles. Still no fade, `duration-0`
          keeps the appearance instant once the delay is served, per DESIGN.md. -->
     <div
         class="

package/src/lib/components/accordion.svelte.ts

@@ -0,0 +1,19 @@
+// SPDX-FileCopyrightText: PoppyCake, s.r.o.
+// SPDX-License-Identifier: Apache-2.0
+
+export const ACCORDION_KEY = Symbol("accordion");
+
+// Shared by an Accordion and its items. In single mode an item records itself
+// as `active` when it opens, and every other item closes in response.
+export class AccordionGroup {
+    active = $state<string | null>(null);
+    readonly #isSingle: () => boolean;
+
+    constructor(isSingle: () => boolean) {
+        this.#isSingle = isSingle;
+    }
+
+    get single(): boolean {
+        return this.#isSingle();
+    }
+}