@widgetic/design-system 0.5.14 → 0.5.15

package/dist/components/modals/ActionModal.svelte

@@ -28,6 +28,8 @@
   export let height: string = '168px';
   export let target: string = 'action-confirmation-modal'; // target for Portal
   export let isConfirmDisabled: boolean = false;
+  /** When false, a failed confirm can leave the dialog open. Callers close it themselves. */
+  export let closeOnConfirm: boolean = true;
   export let confirmVariant: 'primary' | 'attention' = 'primary';
   export let actionType: string = 'confirm';
 
@@ -75,8 +77,8 @@
     // Dispatch a confirmation event with all items
     dispatch('confirm', { items });
    
-    // Close the modal immediately to allow user to continue working
-    isOpen = false;
+    // Callers that show an error inside the dialog set closeOnConfirm to false.
+    if (closeOnConfirm) isOpen = false;
   }
 
   // Support for restoring modal state

package/dist/components/modals/ActionModal.svelte.d.ts

@@ -31,6 +31,7 @@ declare const ActionModal: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Pro
     height?: string;
     target?: string;
     isConfirmDisabled?: boolean;
+    /** When false, a failed confirm can leave the dialog open. Callers close it themselves. */ closeOnConfirm?: boolean;
     confirmVariant?: "primary" | "attention";
     actionType?: string;
     modalType?: string;

package/dist/components/navigation/Breadcrumbs.svelte

@@ -188,24 +188,20 @@
     <Tooltip.Provider delayDuration={300}>
       <div class="nav-buttons flex items-center shrink-0">
         <Tooltip.Root open={showBackTooltip}>
-          <Tooltip.Trigger class="inline-flex focus:outline-none">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6"
-              style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'};"
-              class:opacity-50={!canGoBack || isLoading}
-              on:mouseenter={() => { showBackTooltip = true; }}
-              on:mouseleave={() => { showBackTooltip = false; }}
-              on:click={canGoBack && !isLoading ? onBack : undefined}
-              role="button"
-              tabindex={canGoBack && !isLoading ? 0 : -1}
-            >
-              <IconArrowLeft
-                class="w-6 h-6 text-[hsl(var(--grey6))]"
-                style="min-width: 24px; min-height: 24px;"
-              />
-            </div>
-          </Tooltip.Trigger>
+          <button
+            type="button"
+            class="breadcrumbs-nav-button inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
+            style="cursor: {canGoBack && !isLoading ? 'pointer' : 'default'}; opacity: {canGoBack && !isLoading ? 1 : 0.35};"
+            aria-disabled={!canGoBack || isLoading}
+            on:mouseenter={() => { showBackTooltip = true; }}
+            on:mouseleave={() => { showBackTooltip = false; }}
+            on:click={() => { if (!isLoading) onBack(); }}
+          >
+            <IconArrowLeft
+              class="w-6 h-6 text-[hsl(var(--grey6))]"
+              style="min-width: 24px; min-height: 24px;"
+            />
+          </button>
           {#if showBackTooltip}
             <!-- Portaled to <body>: the header row around this nav is overflow-hidden, which
                  otherwise clips the tooltip at the header's bottom edge. -->
@@ -218,24 +214,20 @@
         </Tooltip.Root>
 
         <Tooltip.Root open={showForwardTooltip}>
-          <Tooltip.Trigger class="inline-flex focus:outline-none">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <div
-              class="breadcrumbs-nav-button flex items-center justify-center w-6 h-6 ml-4"
-              style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'};"
-              class:opacity-50={!canGoForward || isLoading}
-              on:mouseenter={() => { showForwardTooltip = true; }}
-              on:mouseleave={() => { showForwardTooltip = false; }}
-              on:click={canGoForward && !isLoading ? onForward : undefined}
-              role="button"
-              tabindex={canGoForward && !isLoading ? 0 : -1}
-            >
-              <IconArrowRight
-                class="w-6 h-6 text-[hsl(var(--grey6))]"
-                style="min-width: 24px; min-height: 24px;"
-              />
-            </div>
-          </Tooltip.Trigger>
+          <button
+            type="button"
+            class="breadcrumbs-nav-button ml-4 inline-flex items-center justify-center w-6 h-6 border-0 bg-transparent p-0 focus:outline-none"
+            style="cursor: {canGoForward && !isLoading ? 'pointer' : 'default'}; opacity: {canGoForward && !isLoading ? 1 : 0.35};"
+            aria-disabled={!canGoForward || isLoading}
+            on:mouseenter={() => { showForwardTooltip = true; }}
+            on:mouseleave={() => { showForwardTooltip = false; }}
+            on:click={() => { if (!isLoading) onForward(); }}
+          >
+            <IconArrowRight
+              class="w-6 h-6 text-[hsl(var(--grey6))]"
+              style="min-width: 24px; min-height: 24px;"
+            />
+          </button>
           {#if showForwardTooltip}
             <Tooltip.Portal>
               <Tooltip.Content side="bottom" sideOffset={6} class="bg-[hsl(var(--dark))] text-white caption px-2 py-1 rounded-md z-[200000]">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.14",
+	"version": "0.5.15",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -141,7 +141,7 @@
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
 		"@types/node": "^22.10.1",
-		"@widgetic/dev-tools": "^0.1.0",
+		"@widgetic/dev-tools": "^0.2.0",
 		"chokidar-cli": "^3.0.0",
 		"concurrently": "^9.1.0",
 		"eslint": "^9.7.0",