@classic-homes/theme-svelte 1.29.0 → 1.30.0

package/dist/lib/components/Dialog.svelte

@@ -3,6 +3,8 @@
   import { cn } from '../utils.js';
   import type { Snippet } from 'svelte';
   import TriggerChild, { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
+  import { createDiscardGuard } from './internal/discard-guard.svelte.js';
+  import DiscardPrompt from './internal/DiscardPrompt.svelte';
 
   interface Props {
     /** Whether the dialog is open */
@@ -39,6 +41,15 @@
      * keeps focus where the caller put it (e.g. a field it just revealed).
      */
     onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Unsaved work inside. When true, an overlay click, Escape or the close
+     * button asks "Discard unsaved changes?" instead of closing. Left unset,
+     * the dialog counts as dirty once anything inside is edited (typing, or a
+     * checkbox/switch/radio click; search inputs and `[data-dirty-ignore]`
+     * don't count). Pass `false` to turn the prompt off. Closing in code is
+     * never blocked.
+     */
+    dirty?: boolean;
   }
 
   // Every size is clamped to the viewport minus a 1rem gutter on phones; the
@@ -66,6 +77,7 @@
     headerActions,
     showClose = true,
     onCloseAutoFocus,
+    dirty,
   }: Props = $props();
 
   const uid = $props.id();
@@ -77,9 +89,21 @@
     onOpenChange?.(newOpen);
   }
 
-  function handleClose() {
-    open = false;
-    onOpenChange?.(false);
+  const guard = createDiscardGuard(() => dirty);
+  let contentEl: HTMLElement | null = $state(null);
+
+  $effect(() => {
+    if (open) guard.reset();
+  });
+
+  function keepEditing() {
+    guard.keep();
+    contentEl?.focus();
+  }
+
+  function discard() {
+    guard.reset();
+    handleOpenChange(false);
   }
 </script>
 
@@ -97,7 +121,13 @@
       class="fixed inset-0 z-50 bg-foreground/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
     <DialogPrimitive.Content
+      bind:ref={contentEl}
       {onCloseAutoFocus}
+      onInteractOutside={guard.dismiss}
+      onEscapeKeydown={guard.escape}
+      oninput={guard.track}
+      onchange={guard.track}
+      onclick={guard.track}
       class={cn(
         'fixed left-[50%] top-[50%] z-50 flex max-h-[calc(100dvh-2rem)] w-full translate-x-[-50%] translate-y-[-50%] flex-col gap-4 border border-border bg-background shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg overflow-hidden',
         sizeClasses[size],
@@ -133,7 +163,9 @@
               {@render headerActions()}
             {/if}
             {#if showClose}
-              <DialogPrimitive.Close
+              <button
+                type="button"
+                onclick={() => guard.dismiss() && handleOpenChange(false)}
                 class="flex h-9 w-9 items-center justify-center rounded-md bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none relative after:absolute after:-inset-1 after:content-['']"
                 aria-label="Close dialog"
               >
@@ -153,7 +185,7 @@
                   <path d="M18 6 6 18" />
                   <path d="m6 6 12 12" />
                 </svg>
-              </DialogPrimitive.Close>
+              </button>
             {/if}
           </div>
         </div>
@@ -164,8 +196,10 @@
         {@render children()}
       </div>
 
-      <!-- Footer section -->
-      {#if footer}
+      <!-- Footer section; the discard prompt takes its place while it asks -->
+      {#if guard.confirming}
+        <DiscardPrompt class="px-6 py-4" onKeep={keepEditing} onDiscard={discard} />
+      {:else if footer}
         <div
           class="flex flex-col-reverse border-t border-border bg-muted/30 px-6 py-4 sm:flex-row sm:justify-end sm:space-x-2"
         >

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

@@ -35,6 +35,15 @@ interface Props {
      * keeps focus where the caller put it (e.g. a field it just revealed).
      */
     onCloseAutoFocus?: (event: Event) => void;
+    /**
+     * Unsaved work inside. When true, an overlay click, Escape or the close
+     * button asks "Discard unsaved changes?" instead of closing. Left unset,
+     * the dialog counts as dirty once anything inside is edited (typing, or a
+     * checkbox/switch/radio click; search inputs and `[data-dirty-ignore]`
+     * don't count). Pass `false` to turn the prompt off. Closing in code is
+     * never blocked.
+     */
+    dirty?: boolean;
 }
 declare const Dialog: import("svelte").Component<Props, {}, "open">;
 type Dialog = ReturnType<typeof Dialog>;

package/dist/lib/components/Sheet.svelte

@@ -4,6 +4,8 @@
   import type { Snippet } from 'svelte';
   import { cn } from '../utils.js';
   import Icon from './Icon.svelte';
+  import { createDiscardGuard } from './internal/discard-guard.svelte.js';
+  import DiscardPrompt from './internal/DiscardPrompt.svelte';
 
   /**
    * Sheet - a modal panel that slides in from an edge of the screen.
@@ -66,6 +68,15 @@
     footer?: Snippet;
     children: Snippet;
     class?: string;
+    /**
+     * Unsaved work inside. When true, a scrim click, Escape or the close
+     * button asks "Discard unsaved changes?" instead of closing. Left unset,
+     * the sheet counts as dirty once anything inside is edited (typing, or a
+     * checkbox/switch/radio click; search inputs and `[data-dirty-ignore]`
+     * don't count). Pass `false` to turn the prompt off. Closing in code is
+     * never blocked.
+     */
+    dirty?: boolean;
   }
 
   let {
@@ -80,6 +91,7 @@
     footer,
     children,
     class: className,
+    dirty,
   }: Props = $props();
 
   const styles = $derived(sheet({ side, size }));
@@ -88,16 +100,35 @@
     open = next;
     onOpenChange?.(next);
   }
+
+  const guard = createDiscardGuard(() => dirty);
+  let contentEl: HTMLElement | null = $state(null);
+
+  $effect(() => {
+    if (open) guard.reset();
+  });
+
+  function keepEditing() {
+    guard.keep();
+    contentEl?.focus();
+  }
+
+  function discard() {
+    guard.reset();
+    handleOpenChange(false);
+  }
 </script>
 
-<!-- Rendered inside Content, so Close finds its dialog -->
+<!-- A plain button, not Close, so the discard guard can intercept it -->
 {#snippet closeButton()}
-  <DialogPrimitive.Close
+  <button
+    type="button"
+    onclick={() => guard.dismiss() && handleOpenChange(false)}
     class="flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground hover:bg-muted-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
     aria-label="Close"
   >
     <Icon name="close" size={18} aria-hidden="true" />
-  </DialogPrimitive.Close>
+  </button>
 {/snippet}
 
 <DialogPrimitive.Root bind:open onOpenChange={handleOpenChange}>
@@ -105,7 +136,15 @@
     <DialogPrimitive.Overlay
       class="fixed inset-0 z-50 bg-foreground/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     />
-    <DialogPrimitive.Content class={cn(styles.content(), className)}>
+    <DialogPrimitive.Content
+      bind:ref={contentEl}
+      class={cn(styles.content(), className)}
+      onInteractOutside={guard.dismiss}
+      onEscapeKeydown={guard.escape}
+      oninput={guard.track}
+      onchange={guard.track}
+      onclick={guard.track}
+    >
       {#if side === 'bottom'}
         <!-- Grab bar row; carries the close button when the title is hidden -->
         <div class="relative flex h-6 shrink-0 items-center justify-center">
@@ -145,7 +184,9 @@
       <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
         {@render children()}
       </div>
-      {#if footer}
+      {#if guard.confirming}
+        <DiscardPrompt class="px-4 py-3" onKeep={keepEditing} onDiscard={discard} />
+      {:else if footer}
         <div class="flex shrink-0 items-center justify-end gap-2 border-t border-border px-4 py-3">
           {@render footer()}
         </div>

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

@@ -22,6 +22,15 @@ interface Props {
     footer?: Snippet;
     children: Snippet;
     class?: string;
+    /**
+     * Unsaved work inside. When true, a scrim click, Escape or the close
+     * button asks "Discard unsaved changes?" instead of closing. Left unset,
+     * the sheet counts as dirty once anything inside is edited (typing, or a
+     * checkbox/switch/radio click; search inputs and `[data-dirty-ignore]`
+     * don't count). Pass `false` to turn the prompt off. Closing in code is
+     * never blocked.
+     */
+    dirty?: boolean;
 }
 declare const Sheet: import("svelte").Component<Props, {}, "open">;
 type Sheet = ReturnType<typeof Sheet>;

package/dist/lib/components/internal/DiscardPrompt.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { cn } from '../../utils.js';
+  import { buttonVariants } from '../button-variants.js';
+
+  interface Props {
+    onKeep: () => void;
+    onDiscard: () => void;
+    class?: string;
+  }
+
+  let { onKeep, onDiscard, class: className }: Props = $props();
+
+  const id = $props.id();
+  let keepEl: HTMLButtonElement | undefined = $state();
+
+  // Safe default under the pointer/keyboard: a stray Enter keeps the work
+  onMount(() => keepEl?.focus());
+</script>
+
+<div
+  role="group"
+  aria-labelledby="{id}-text"
+  class={cn(
+    'flex shrink-0 flex-col gap-3 border-t border-border bg-muted/30 sm:flex-row sm:items-center sm:justify-between',
+    className
+  )}
+>
+  <p id="{id}-text" class="text-sm font-medium">Discard unsaved changes?</p>
+  <div class="flex flex-col-reverse gap-2 sm:flex-row">
+    <button
+      bind:this={keepEl}
+      type="button"
+      class={buttonVariants({ variant: 'outline', size: 'sm' })}
+      onclick={onKeep}
+    >
+      Keep editing
+    </button>
+    <button
+      type="button"
+      class={buttonVariants({ variant: 'destructive', size: 'sm' })}
+      onclick={onDiscard}
+    >
+      Discard
+    </button>
+  </div>
+</div>

package/dist/lib/components/internal/DiscardPrompt.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    onKeep: () => void;
+    onDiscard: () => void;
+    class?: string;
+}
+declare const DiscardPrompt: import("svelte").Component<Props, {}, "">;
+type DiscardPrompt = ReturnType<typeof DiscardPrompt>;
+export default DiscardPrompt;

package/dist/lib/components/internal/discard-guard.svelte.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Shared by Dialog and Sheet: once someone has typed into the content, an
+ * overlay click, Escape or the close button asks before throwing that work
+ * away. Closing in code (`open = false`, a Cancel or Save button) is never
+ * blocked.
+ *
+ * Dirtiness is the caller's `dirty` prop when given, otherwise "an input or
+ * change event, or a checkbox/switch/radio click, happened inside since it
+ * opened". Search boxes and anything under `[data-dirty-ignore]` don't
+ * count, so pickers and filters stay one-click.
+ *
+ * A factory rather than a class: the package build lowers class fields,
+ * which `$state` doesn't survive.
+ */
+export declare function createDiscardGuard(dirty: () => boolean | undefined): {
+    readonly confirming: boolean;
+    /** Forget earlier edits; call whenever the surface opens or is discarded */
+    reset(): void;
+    /** Hide the prompt and carry on editing */
+    keep(): void;
+    /** Delegated `oninput` / `onchange` / `onclick` for the content element */
+    track(event: Event): void;
+    dismiss: (event?: Event) => boolean;
+    /** Escape backs out of the prompt first, then behaves like `dismiss` */
+    escape(event: KeyboardEvent): void;
+};

package/dist/lib/components/internal/discard-guard.svelte.js

@@ -0,0 +1,69 @@
+// Bits UI checkboxes, switches and radios are buttons: they click, not input
+const TOGGLES = '[role="checkbox"], [role="switch"], [role="radio"]';
+/**
+ * Shared by Dialog and Sheet: once someone has typed into the content, an
+ * overlay click, Escape or the close button asks before throwing that work
+ * away. Closing in code (`open = false`, a Cancel or Save button) is never
+ * blocked.
+ *
+ * Dirtiness is the caller's `dirty` prop when given, otherwise "an input or
+ * change event, or a checkbox/switch/radio click, happened inside since it
+ * opened". Search boxes and anything under `[data-dirty-ignore]` don't
+ * count, so pickers and filters stay one-click.
+ *
+ * A factory rather than a class: the package build lowers class fields,
+ * which `$state` doesn't survive.
+ */
+export function createDiscardGuard(dirty) {
+    let confirming = $state(false);
+    let touched = $state(false);
+    const isDirty = () => dirty() ?? touched;
+    /**
+     * An overlay click or the close button. Returns true when it may close;
+     * otherwise cancels `event` (if any) and shows the discard prompt.
+     */
+    function dismiss(event) {
+        if (!isDirty())
+            return true;
+        event?.preventDefault();
+        confirming = true;
+        return false;
+    }
+    return {
+        get confirming() {
+            return confirming;
+        },
+        /** Forget earlier edits; call whenever the surface opens or is discarded */
+        reset() {
+            touched = false;
+            confirming = false;
+        },
+        /** Hide the prompt and carry on editing */
+        keep() {
+            confirming = false;
+        },
+        /** Delegated `oninput` / `onchange` / `onclick` for the content element */
+        track(event) {
+            const target = event.target;
+            if (!(target instanceof Element))
+                return;
+            if (event.type === 'click' && !target.closest(TOGGLES))
+                return;
+            if (target instanceof HTMLInputElement && target.type === 'search')
+                return;
+            if (target.closest('[data-dirty-ignore]'))
+                return;
+            touched = true;
+        },
+        dismiss,
+        /** Escape backs out of the prompt first, then behaves like `dismiss` */
+        escape(event) {
+            if (confirming) {
+                event.preventDefault();
+                confirming = false;
+                return;
+            }
+            dismiss(event);
+        },
+    };
+}

package/package.json

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