@runwisp/ui 1.3.0 → 1.5.0

package/src/lib/components/Select.svelte

@@ -16,9 +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 { floating, isOutsideClick } from "../actions/floating.js";
+    import { portal } from "../actions/portal.js";
+    import { trapFocus } from "../actions/focusTrap.js";
     import { generateUlid } from "@runwisp/common";
 
     type SelectSize = "sm" | "md" | "lg";
@@ -32,7 +34,7 @@
         searchable?: boolean;
         size?: SelectSize;
         error?: string;
-        hint?: string;
+        hint?: string | undefined;
         class?: string;
         id?: string;
         name?: string;
@@ -62,7 +64,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 +108,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 +117,10 @@
             if (focusedIndex === -1) focusedIndex = 0;
 
             void tick().then(() => {
-                void setupFloating();
                 if (searchable && searchInputEl) {
                     searchInputEl.focus();
                 }
             });
-        } else {
-            cleanupFloating?.();
-            cleanupFloating = null;
         }
     }
 
@@ -157,7 +129,6 @@
         value = option.value;
         onchange?.(value);
         isOpen = false;
-        cleanupFloating?.();
     }
 
     function handleKeydown(e: KeyboardEvent) {
@@ -172,7 +143,6 @@
         switch (e.key) {
             case "Escape":
                 isOpen = false;
-                cleanupFloating?.();
                 triggerEl?.focus();
                 break;
             case "ArrowDown":
@@ -212,18 +182,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 +264,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/Skeleton.svelte

@@ -30,7 +30,7 @@
 
 {#if shape === "circle"}
     <div
-        class="animate-pulse rounded-full bg-surface-sunken {className}"
+        class="animate-pulse rounded-full bg-outline-hover {className}"
         style="width: {width ?? '2.5rem'}; height: {height ?? width ?? '2.5rem'}"
         role="status"
         aria-label="Loading"
@@ -39,7 +39,7 @@
     </div>
 {:else if shape === "rect"}
     <div
-        class="animate-pulse rounded-[4px] bg-surface-sunken {className}"
+        class="animate-pulse rounded-[4px] bg-outline-hover {className}"
         style="width: {width ?? '100%'}; height: {height ?? '2rem'}"
         role="status"
         aria-label="Loading"
@@ -50,8 +50,8 @@
     <div class="animate-pulse space-y-6 p-6 {className}" role="status" aria-label="Loading content">
         {#if header}
             <div class="space-y-3">
-                <div class="h-7 w-48 rounded-[4px] bg-surface-sunken"></div>
-                <div class="h-4 w-72 rounded-[3px] bg-surface-sunken"></div>
+                <div class="h-7 w-48 rounded-[4px] bg-outline-hover"></div>
+                <div class="h-4 w-72 rounded-[3px] bg-outline-hover"></div>
             </div>
         {/if}
 
@@ -59,11 +59,11 @@
             {#each Array.from({ length: rows }, (_, i) => i) as i (i)}
                 <div class="space-y-2">
                     <div
-                        class="h-4 rounded-[3px] bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-outline-hover"
                         style="width: {70 + ((i * 17) % 30)}%"
                     ></div>
                     <div
-                        class="h-4 rounded-[3px] bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-outline-hover"
                         style="width: {40 + ((i * 23) % 40)}%"
                     ></div>
                 </div>

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/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();
+    }
+}