@classic-homes/theme-svelte 1.31.0 → 1.32.0

package/dist/lib/components/DataPanel.svelte

@@ -1202,6 +1202,17 @@
     };
   });
 
+  /**
+   * Style object -> `style` attribute. Keys may be camelCase, as React's
+   * DataPanel writes them: a raw `maxHeight:` declaration is invalid CSS, so
+   * the desktop card silently lost its 95vh cap and its corner radius.
+   */
+  function toStyleAttribute(styles: Record<string, string>): string {
+    return Object.entries(styles)
+      .map(([key, value]) => `${key.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}:${value}`)
+      .join(';');
+  }
+
   // Calculate panel styles
   const panelStyles = $derived.by(() => {
     if (variant === 'card') {
@@ -1388,9 +1399,7 @@
         animationClass,
         className
       )}
-      style={Object.entries(panelStyles)
-        .map(([k, v]) => `${k}:${v}`)
-        .join(';')}
+      style={toStyleAttribute(panelStyles)}
       role={mode === 'detached' || variant === 'card' ? 'dialog' : 'complementary'}
       aria-modal={isDialog ? 'true' : undefined}
       aria-labelledby={title && !header ? titleId : undefined}

package/dist/lib/components/FilterPanel.svelte

@@ -9,7 +9,9 @@
    * Opens and closes with a grid-rows height transition (no measured heights).
    * While closed the content is `inert`, so the hidden controls are neither
    * tabbable nor exposed to screen readers. Controls are laid out on a
-   * responsive grid; "Clear all" follows them when any filter is active.
+   * responsive grid, top-aligned so a control with help text under its input
+   * doesn't push its label and input out of line with the rest of the row;
+   * "Clear all" follows them when any filter is active.
    *
    * Usually rendered by FilterToolbar; use it directly only for a custom strip.
    */
@@ -52,7 +54,7 @@
 >
   <div class="overflow-hidden" inert={!open}>
     <div class="mt-2 rounded-lg border border-border bg-muted/50 p-4">
-      <div class="grid items-end gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <div class="grid items-start gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {@render children()}
       </div>
       {#if onClear && activeCount > 0}

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

@@ -5,7 +5,9 @@ import type { Snippet } from 'svelte';
  * Opens and closes with a grid-rows height transition (no measured heights).
  * While closed the content is `inert`, so the hidden controls are neither
  * tabbable nor exposed to screen readers. Controls are laid out on a
- * responsive grid; "Clear all" follows them when any filter is active.
+ * responsive grid, top-aligned so a control with help text under its input
+ * doesn't push its label and input out of line with the rest of the row;
+ * "Clear all" follows them when any filter is active.
  *
  * Usually rendered by FilterToolbar; use it directly only for a custom strip.
  */

package/dist/lib/components/MultiSelect.svelte

@@ -2,6 +2,7 @@
   import { Combobox as ComboboxPrimitive } from 'bits-ui';
   import { cn } from '../utils.js';
   import { computeDescribedBy } from '../utils/form.js';
+  import { rangeSelect } from '../utils/range-select.js';
   import Spinner from './Spinner.svelte';
   import Label from './Label.svelte';
   import LiveRegion from './LiveRegion.svelte';
@@ -110,11 +111,26 @@
     }
   }
 
+  // Shift-click (or Shift+Enter) selects or clears the whole range from the
+  // option toggled before. Shift is read when the pick starts, since the
+  // combobox reports only the new values.
+  let anchor: string | null = null;
+  let shiftPick = false;
+
   function handleValueChange(newValues: string[] | undefined) {
-    if (newValues !== undefined) {
-      value = newValues;
-      onValueChange?.(newValues);
+    if (newValues === undefined) return;
+    const added = newValues.filter((v) => !value.includes(v));
+    const removed = value.filter((v) => !newValues.includes(v));
+    const toggled = added.length + removed.length === 1 ? (added[0] ?? removed[0]) : null;
+    let next = newValues;
+    if (shiftPick && toggled !== null && anchor !== null && anchor !== toggled) {
+      next =
+        rangeSelect(value, filteredOptions, anchor, toggled, added.length === 1, max) ?? newValues;
     }
+    shiftPick = false;
+    if (toggled !== null) anchor = toggled;
+    value = next;
+    onValueChange?.(next);
   }
 
   function removeValue(valueToRemove: string) {
@@ -224,6 +240,9 @@
           oninput={handleSearchInput}
           onfocus={() => (open = true)}
           onclick={() => (open = true)}
+          onkeydown={(e: KeyboardEvent) => {
+            if (e.key === 'Enter') shiftPick = e.shiftKey;
+          }}
           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-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'
@@ -260,6 +279,7 @@
                   value={option.value}
                   label={option.label}
                   disabled={option.disabled || isDisabledByMax}
+                  onpointerdown={(e: PointerEvent) => (shiftPick = e.shiftKey)}
                   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"
                 >
                   <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">

package/dist/lib/utils/range-select.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Shift-click range selection for multi-select lists.
+ */
+export interface RangeSelectOption {
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * Selects (or clears) every option from `anchor` to `target`, inclusive, in
+ * the order `options` lists them (what the user sees). Disabled options are
+ * skipped. When selecting, `max` caps the result, filling from the anchor
+ * towards the target. Returns null when either end isn't in `options`, so
+ * the caller falls back to a plain toggle.
+ *
+ * @param current - The selection before the click
+ * @param options - The options as listed (already filtered by any search)
+ * @param anchor - The option toggled before this one
+ * @param target - The option just clicked
+ * @param select - Whether the click selected the target (else it cleared it)
+ * @param max - Maximum number of selections, if any
+ */
+export declare function rangeSelect(current: readonly string[], options: readonly RangeSelectOption[], anchor: string, target: string, select: boolean, max?: number): string[] | null;

package/dist/lib/utils/range-select.js

@@ -0,0 +1,40 @@
+/**
+ * Shift-click range selection for multi-select lists.
+ */
+/**
+ * Selects (or clears) every option from `anchor` to `target`, inclusive, in
+ * the order `options` lists them (what the user sees). Disabled options are
+ * skipped. When selecting, `max` caps the result, filling from the anchor
+ * towards the target. Returns null when either end isn't in `options`, so
+ * the caller falls back to a plain toggle.
+ *
+ * @param current - The selection before the click
+ * @param options - The options as listed (already filtered by any search)
+ * @param anchor - The option toggled before this one
+ * @param target - The option just clicked
+ * @param select - Whether the click selected the target (else it cleared it)
+ * @param max - Maximum number of selections, if any
+ */
+export function rangeSelect(current, options, anchor, target, select, max) {
+    const from = options.findIndex((o) => o.value === anchor);
+    const to = options.findIndex((o) => o.value === target);
+    if (from < 0 || to < 0)
+        return null;
+    const step = from <= to ? 1 : -1;
+    const range = [];
+    for (let i = from; i !== to + step; i += step) {
+        if (!options[i].disabled)
+            range.push(options[i].value);
+    }
+    if (!select)
+        return current.filter((v) => !range.includes(v));
+    const next = [...current];
+    for (const v of range) {
+        if (next.includes(v))
+            continue;
+        if (max !== undefined && next.length >= max)
+            break;
+        next.push(v);
+    }
+    return next;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",