@classic-homes/theme-svelte 1.25.0 → 1.26.0

package/dist/lib/components/AlertDialog.svelte

@@ -2,6 +2,7 @@
   import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
+  import TriggerChild, { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
   import { tv, type VariantProps } from 'tailwind-variants';
 
   const buttonVariants = tv({
@@ -41,8 +42,13 @@
     onCancel?: () => void;
     /** Additional class for dialog content */
     class?: string;
-    /** Optional trigger element */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element. It receives `{ props }`: spread them on your
+     * own button (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional custom content */
     children?: Snippet;
   }
@@ -62,6 +68,10 @@
     children,
   }: Props = $props();
 
+  const uid = $props.id();
+  // Changes once if the trigger snippet ignores its props (see TriggerChild)
+  let triggerId = $state(`${uid}-trigger`);
+
   // Each time the dialog opens, exactly one of onConfirm / onCancel runs when it
   // closes. Escape and overlay clicks count as cancel, so callers that mount the
   // dialog as `{#if x}<AlertDialog open onCancel={() => (x = null)} />` reset
@@ -99,11 +109,9 @@
 
 <AlertDialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
   {#if trigger}
-    <AlertDialogPrimitive.Trigger>
+    <AlertDialogPrimitive.Trigger id={triggerId}>
       {#snippet child({ props })}
-        <span {...props}>
-          {@render trigger()}
-        </span>
+        <TriggerChild {props} {trigger} onfallback={() => (triggerId = `${uid}-trigger-wrap`)} />
       {/snippet}
     </AlertDialogPrimitive.Trigger>
   {/if}

package/dist/lib/components/AlertDialog.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
 import { type VariantProps } from 'tailwind-variants';
 declare const AlertDialog: import("svelte").Component<{
     /** Whether the dialog is open */
@@ -70,8 +71,13 @@ declare const AlertDialog: import("svelte").Component<{
     onCancel?: () => void;
     /** Additional class for dialog content */
     class?: string;
-    /** Optional trigger element */
-    trigger?: Snippet;
+    /**
+     * Optional trigger element. It receives `{ props }`: spread them on your
+     * own button (`{#snippet trigger({ props })}<Button {...props}>Open</Button>{/snippet}`)
+     * so that button is the trigger and gets focus back on close. A snippet
+     * that ignores them still works, wrapped in a span trigger as before.
+     */
+    trigger?: Snippet<[TriggerSnippetProps]>;
     /** Optional custom content */
     children?: Snippet;
 }, {}, "open">;

package/dist/lib/components/Badge.svelte

@@ -77,10 +77,14 @@
     ...restProps
   }: Props = $props();
 
-  const classes = $derived(cn(badgeVariants({ variant, size, clickable }), className));
-
   // Determine if badge is interactive (has click handler or clickable prop)
   const isInteractive = $derived(clickable || !!onclick);
+
+  // An onclick-only badge renders a <button>, so it gets the same hover and
+  // focus styles as clickable
+  const classes = $derived(
+    cn(badgeVariants({ variant, size, clickable: isInteractive }), className)
+  );
 </script>
 
 {#if isInteractive}

package/dist/lib/components/CodeField.svelte

@@ -28,6 +28,10 @@
     'aria-invalid'?: boolean | 'true' | 'false';
     class?: string;
     onValueChange?: (value: string) => void;
+    /** Chained after the field's own input handling (bind:value keeps working) */
+    oninput?: (event: Event & { currentTarget: HTMLTextAreaElement }) => void;
+    /** Chained before the field's Tab handling; `preventDefault()` skips it */
+    onkeydown?: (event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) => void;
     [key: string]: unknown;
   }
 
@@ -46,6 +50,8 @@
     'aria-invalid': ariaInvalid,
     class: className,
     onValueChange,
+    oninput,
+    onkeydown,
     ...restProps
   }: Props = $props();
 
@@ -63,15 +69,18 @@
    * Replace a range through the browser's editing pipeline when it can, so
    * the change lands on the native undo stack.
    */
-  function replace(target: HTMLTextAreaElement, start: number, end: number, text: string) {
+  function replace(target: HTMLTextAreaElement, start: number, end: number, text: string): boolean {
     target.setSelectionRange(start, end);
     const viaEditing =
       typeof document.execCommand === 'function' && document.execCommand('insertText', false, text);
     if (!viaEditing) target.setRangeText(text, start, end, 'end');
+    return viaEditing;
   }
 
-  function handleKeydown(event: KeyboardEvent) {
-    const target = event.currentTarget as HTMLTextAreaElement;
+  function handleKeydown(event: KeyboardEvent & { currentTarget: HTMLTextAreaElement }) {
+    onkeydown?.(event);
+    if (event.defaultPrevented) return;
+    const target = event.currentTarget;
     if (event.key === 'Escape') {
       releaseTab = true;
       return;
@@ -91,8 +100,10 @@
     const lineStart = text.lastIndexOf('\n', start - 1) + 1;
     const multiline = text.slice(start, end).includes('\n');
 
+    // execCommand fires an input event (which emits); setRangeText does not
+    let viaEditing: boolean;
     if (!event.shiftKey && !multiline) {
-      replace(target, start, end, pad);
+      viaEditing = replace(target, start, end, pad);
     } else {
       // Indent or outdent every line the selection touches.
       const lineEnd = end > start && text[end - 1] === '\n' ? end - 1 : end;
@@ -103,13 +114,18 @@
       const firstLineShift = event.shiftKey
         ? -(block.match(new RegExp(`^ {1,${indent}}`))?.[0].length ?? 0)
         : indent;
-      replace(target, lineStart, lineEnd, changed);
+      viaEditing = replace(target, lineStart, lineEnd, changed);
       target.setSelectionRange(
         Math.max(lineStart, start + firstLineShift),
         lineEnd + (changed.length - block.length)
       );
     }
-    emit(target);
+    if (!viaEditing) emit(target);
+  }
+
+  function handleInput(event: Event & { currentTarget: HTMLTextAreaElement }) {
+    emit(event.currentTarget);
+    oninput?.(event);
   }
 </script>
 
@@ -136,8 +152,8 @@
       : '',
     className
   )}
-  oninput={(event) => emit(event.currentTarget)}
-  onkeydown={handleKeydown}
   {...restProps}
+  oninput={handleInput}
+  onkeydown={handleKeydown}
 ></textarea>
 <span id={hintId} class="sr-only">Tab indents. Press Escape, then Tab, to leave the field.</span>

package/dist/lib/components/CodeField.svelte.d.ts

@@ -25,6 +25,14 @@ interface Props {
     'aria-invalid'?: boolean | 'true' | 'false';
     class?: string;
     onValueChange?: (value: string) => void;
+    /** Chained after the field's own input handling (bind:value keeps working) */
+    oninput?: (event: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    /** Chained before the field's Tab handling; `preventDefault()` skips it */
+    onkeydown?: (event: KeyboardEvent & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
     [key: string]: unknown;
 }
 declare const CodeField: import("svelte").Component<Props, {}, "value">;

package/dist/lib/components/Combobox.svelte

@@ -123,9 +123,6 @@
     };
   });
 
-  // Determine if we need a container wrapper
-  const hasWrapper = $derived(!!label || !!hint || !!error);
-
   // Generate announcement message for screen readers
   const resultsAnnouncement = $derived.by(() => {
     if (loading) return 'Loading options...';
@@ -136,114 +133,19 @@
   });
 </script>
 
-{#if hasWrapper}
-  <div class="space-y-2">
-    {#if label}
-      <Label for={componentId} {disabled}>
-        {label}
-        {#if required}
-          <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
-          <span class="sr-only">(required)</span>
-        {/if}
-      </Label>
-    {/if}
-
-    <ComboboxPrimitive.Root
-      type="single"
-      {disabled}
-      {required}
-      {name}
-      bind:open
-      onOpenChange={handleOpenChange}
-      onValueChange={handleValueChange}
-      {value}
-    >
-      <div class="relative">
-        <ComboboxPrimitive.Input
-          id={componentId}
-          placeholder={selectedLabel || placeholder}
-          oninput={handleSearchInput}
-          onfocus={() => (open = true)}
-          onclick={() => (open = true)}
-          class={cn(
-            'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-            error && 'border-destructive focus:ring-destructive',
-            className
-          )}
-          role="combobox"
-          aria-expanded={open}
-          aria-invalid={error ? 'true' : undefined}
-          aria-describedby={describedBy}
-        />
-      </div>
-
-      <!-- Portal to <body>: escapes transformed/overflow-hidden ancestors
-           (e.g. Dialog panels) that would clip the dropdown. -->
-      <ComboboxPrimitive.Portal>
-        <ComboboxPrimitive.Content
-          class="isolate relative z-50 min-w-[var(--bits-floating-anchor-width)] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
-          sideOffset={4}
-          collisionPadding={8}
-          avoidCollisions={true}
-        >
-          <div class="p-1 max-h-72 overflow-y-auto">
-            {#if loading}
-              <div class="flex items-center justify-center py-6">
-                <Spinner size="sm" />
-                <span class="ml-2 text-sm text-muted-foreground">Loading...</span>
-              </div>
-            {:else if filteredOptions.length === 0}
-              <div class="py-6 text-center text-sm text-muted-foreground">
-                {emptyMessage}
-              </div>
-            {:else}
-              {#each filteredOptions as option}
-                <ComboboxPrimitive.Item
-                  value={option.value}
-                  label={option.label}
-                  disabled={option.disabled}
-                  class="relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:cursor-default"
-                >
-                  {#if option.value === value}
-                    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        class="h-4 w-4"
-                      >
-                        <polyline points="20 6 9 17 4 12" />
-                      </svg>
-                    </span>
-                  {/if}
-                  {option.label}
-                </ComboboxPrimitive.Item>
-              {/each}
-            {/if}
-          </div>
-        </ComboboxPrimitive.Content>
-      </ComboboxPrimitive.Portal>
-    </ComboboxPrimitive.Root>
+<!-- One structure whether or not there is a label, hint or error, so the
+     focused control is never remounted when an error appears. -->
+<div class="space-y-2">
+  {#if label}
+    <Label for={componentId} {disabled}>
+      {label}
+      {#if required}
+        <span class="text-destructive ml-0.5" aria-hidden="true">*</span>
+        <span class="sr-only">(required)</span>
+      {/if}
+    </Label>
+  {/if}
 
-    {#if hint && !error}
-      <p id={hintId} class="text-sm text-muted-foreground">
-        {hint}
-      </p>
-    {/if}
-
-    {#if error}
-      <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
-        {error}
-      </p>
-    {/if}
-  </div>
-{:else}
   <ComboboxPrimitive.Root
     type="single"
     {disabled}
@@ -326,7 +228,19 @@
       </ComboboxPrimitive.Content>
     </ComboboxPrimitive.Portal>
   </ComboboxPrimitive.Root>
-{/if}
+
+  {#if hint && !error}
+    <p id={hintId} class="text-sm text-muted-foreground">
+      {hint}
+    </p>
+  {/if}
+
+  {#if error}
+    <p id={errorId} class="text-sm text-destructive" role="alert" aria-live="polite">
+      {error}
+    </p>
+  {/if}
+</div>
 
 <!-- Live region for screen reader announcements -->
 <LiveRegion message={resultsAnnouncement} politeness="polite" />

package/dist/lib/components/DataPanel.svelte

@@ -309,6 +309,23 @@
   // Save timeout for debounced persistence
   let saveTimeout: ReturnType<typeof setTimeout> | null = null;
 
+  function saveNow() {
+    if (!persistKey) return;
+    // Persist the resolved values so controlled mode saves what's shown,
+    // not the untouched internal defaults
+    savePanelState(persistKey, {
+      mode,
+      variant,
+      edge,
+      isExpanded,
+      detachedPosition,
+      detachedSize,
+      pinnedSize,
+      cardSnapIndex: 0, // Legacy field
+      tabOffset: internalTabOffset,
+    });
+  }
+
   function debouncedSave() {
     if (!persistKey) return;
 
@@ -317,25 +334,19 @@
     }
 
     saveTimeout = setTimeout(() => {
-      // Persist the resolved values so controlled mode saves what's shown,
-      // not the untouched internal defaults
-      savePanelState(persistKey, {
-        mode,
-        variant,
-        edge,
-        isExpanded,
-        detachedPosition,
-        detachedSize,
-        pinnedSize,
-        cardSnapIndex: 0, // Legacy field
-        tabOffset: internalTabOffset,
-      });
       saveTimeout = null;
+      saveNow();
     }, 300);
   }
 
   onDestroy(() => {
-    if (saveTimeout) clearTimeout(saveTimeout);
+    // Flush a pending save, or a change made just before unmount (e.g. closing
+    // the panel right after resizing it) is lost
+    if (saveTimeout) {
+      clearTimeout(saveTimeout);
+      saveTimeout = null;
+      saveNow();
+    }
     // If we unmount mid-drag/resize (e.g. Escape closes the panel), the *End
     // handlers never run — reset the body styles they own so the page isn't
     // left stuck at grabbing cursor / no user-select.
@@ -1560,7 +1571,9 @@
       <!-- Resize handles (full variant only) -->
       {#if variant === 'full' && !disableResize}
         {#if mode === 'detached'}
-          <!-- Edge + corner handles: keyboard-resizable sliders (arrow keys, shift for large steps) -->
+          <!-- Edge + corner handles: keyboard-resizable sliders (arrow keys, shift for large steps).
+               Top/bottom edges change height (Up/Down, so a vertical slider); left/right
+               edges and corners report width (Left/Right, horizontal). -->
           {#each detachedResizeHandles as { handle, orientation } (handle)}
             <div
               class={cn(
@@ -1572,7 +1585,7 @@
               )}
               role="slider"
               tabindex="0"
-              aria-orientation={orientation === 'vertical' ? 'vertical' : 'horizontal'}
+              aria-orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
               aria-label={`Resize panel from ${handle.replace('-', ' ')} ${
                 handle.includes('-') ? 'corner' : 'edge'
               }`}
@@ -1683,7 +1696,6 @@
     right: 0;
     height: 2px;
     background: transparent;
-    transition: background-color 0.15s ease;
   }
 
   .resize-handle--top {
@@ -1717,7 +1729,6 @@
     bottom: 0;
     width: 2px;
     background: transparent;
-    transition: background-color 0.15s ease;
   }
 
   .resize-handle--left {
@@ -1736,7 +1747,8 @@
     right: 0;
   }
 
-  /* Hover / keyboard-focus state for edge handles */
+  /* Hover / keyboard-focus state for edge handles. Hover colours snap (no
+     transition), as everywhere in the theme: a fade reads as flicker. */
   .resize-handle--horizontal:hover::after,
   .resize-handle--vertical:hover::after,
   .resize-handle--horizontal:focus-visible::after,
@@ -1769,11 +1781,6 @@
     height: 10px;
     /* !important needed to override Tailwind preflight reset (border-width: 0) */
     border: 2px solid transparent !important;
-    transition:
-      border-top-color 0.15s ease,
-      border-right-color 0.15s ease,
-      border-bottom-color 0.15s ease,
-      border-left-color 0.15s ease;
   }
 
   /* Corner positions */

package/dist/lib/components/DataPanelHeader.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { cn } from '../utils.js';
-  import DropdownMenu from './DropdownMenu.svelte';
-  import type { DropdownMenuItem } from './DropdownMenu.svelte';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import Icon from './Icon.svelte';
   import type { Snippet } from 'svelte';
   import type { PanelEdge, PanelMode } from '@classic-homes/data-panel-core';
 
@@ -64,33 +64,37 @@
     bottom: 'Pin to bottom',
   };
 
-  // Build dropdown menu items
-  const menuItems = $derived<DropdownMenuItem[]>([
-    { type: 'label', label: 'Panel Position' },
+  // Panel Position is one choice among five (four edges or detached), so it
+  // is a radio group: menuitemradio items with aria-checked, not a ✓ glyph.
+  const positionValue = $derived(mode === 'detached' ? 'detached' : edge);
+  const positionOptions: { value: PanelEdge | 'detached'; label: string }[] = [
     ...(['left', 'right', 'top', 'bottom'] as PanelEdge[]).map((e) => ({
-      label: `${edgeLabels[e]}${mode === 'pinned' && edge === e ? ' ✓' : ''}`,
-      onSelect: () => {
-        onModeChange?.('pinned');
-        onEdgeChange?.(e);
-      },
+      value: e,
+      label: edgeLabels[e],
     })),
-    { type: 'separator' as const },
-    {
-      label: `Detach${mode === 'detached' ? ' ✓' : ''}`,
-      onSelect: () => onModeChange?.('detached'),
-    },
-  ]);
+    { value: 'detached', label: 'Detach' },
+  ];
+
+  function handlePositionChange(next: string) {
+    if (next === positionValue) return;
+    if (next === 'detached') {
+      onModeChange?.('detached');
+    } else {
+      onModeChange?.('pinned');
+      onEdgeChange?.(next as PanelEdge);
+    }
+  }
+
+  const itemClass =
+    'relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none bg-popover data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50';
 </script>
 
 {#snippet modeMenu()}
-  <DropdownMenu
-    items={menuItems}
-    side="bottom"
-    align="end"
-    triggerLabel="Panel options"
-    triggerClass="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-  >
-    {#snippet trigger()}
+  <DropdownMenuPrimitive.Root>
+    <DropdownMenuPrimitive.Trigger
+      aria-label="Panel options"
+      class="relative flex h-8 w-8 items-center justify-center rounded-md before:absolute before:-inset-1.5 before:content-[''] bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
       <svg
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -107,8 +111,44 @@
         <circle cx="12" cy="5" r="1" />
         <circle cx="12" cy="19" r="1" />
       </svg>
-    {/snippet}
-  </DropdownMenu>
+    </DropdownMenuPrimitive.Trigger>
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        side="bottom"
+        align="end"
+        sideOffset={4}
+        collisionPadding={8}
+        class="isolate z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+      >
+        <DropdownMenuPrimitive.RadioGroup
+          value={positionValue}
+          onValueChange={handlePositionChange}
+        >
+          <DropdownMenuPrimitive.GroupHeading class="px-2 py-1.5 text-sm font-semibold">
+            Panel Position
+          </DropdownMenuPrimitive.GroupHeading>
+          {#each positionOptions as option (option.value)}
+            {#if option.value === 'detached'}
+              <DropdownMenuPrimitive.Separator class="-mx-1 my-1 h-px bg-muted" />
+            {/if}
+            <DropdownMenuPrimitive.RadioItem value={option.value} class={itemClass}>
+              {#snippet children({ checked })}
+                {#if checked}
+                  <Icon
+                    name="check"
+                    size={16}
+                    class="absolute left-2 shrink-0"
+                    aria-hidden="true"
+                  />
+                {/if}
+                {option.label}
+              {/snippet}
+            </DropdownMenuPrimitive.RadioItem>
+          {/each}
+        </DropdownMenuPrimitive.RadioGroup>
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  </DropdownMenuPrimitive.Root>
 {/snippet}
 
 <!-- When showModeMenuOnly is true, only render the dropdown menu -->