@widgetic/design-system 0.5.12 → 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/modals/Portal.svelte

@@ -39,6 +39,19 @@
             if (!host) {
                 host = document.querySelector(`.${targetId}`) as HTMLElement | null;
             }
+            // Never adopt the portal's own subtree as its host.
+            //
+            // A caller may name a target after a class that the *portalled content*
+            // also carries (e.g. target `app-header-widget-picker` for a dropdown
+            // whose root div has that same class, so outside-click detection can
+            // find it). The slot is already rendered inside `portal` when onMount
+            // runs, so the class lookup above can return that inner div. Moving
+            // `portal` into it then throws
+            // "HierarchyRequestError: The new child element contains the parent".
+            // Anything equal to, inside, or containing `portal` is not a host.
+            if (host && (host === portal || portal?.contains(host) || host.contains(portal))) {
+                host = null;
+            }
             // if(showLogs) console.log('DS Portal host:', host, 'target:', target);
 
             // Create host container if it doesn't exist

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/dist/styles/fonts.css

@@ -1,3 +1,22 @@
+/* Self-hosted faces from src/lib/fonts (packaged with DS).
+ * Paths are relative so Vite resolves them when consumers import fonts.css.
+ * Site also mirrors these under static/fonts for /fonts/* URLs in app.html.
+ *
+ * ## OTS / Chromium validation (Sep 2026)
+ * Several Inter / Cousine / JetBrains Mono WOFF2 files under src/lib/fonts fail
+ * Chromium OpenType Sanitizer (console: "OTS parsing error", "Failed to convert
+ * WOFF 2.0 font to SFNT") when served via Vite `@fs` in local monorepo links.
+ * That does NOT mean CSS @font-face is wrong — the binary files themselves are
+ * incomplete/corrupt for OTS. Google Fonts CDN faces (site app.html) still work
+ * for the same family names, so UI typography stays correct even when local
+ * @font-face errors appear in the console.
+ *
+ * Keep these @font-face rules for packaging / offline / consumers that ship
+ * clean binaries. Prefer replacing the WOFF2 files with official releases
+ * (rsms/inter, google/fonts) when cleaning the console is required — do not
+ * delete @font-face solely to silence OTS.
+ */
+
 /* Tailwind config */
 /* @config "../../../tailwind.config.ts"; */
 
@@ -6,7 +25,7 @@
   /** INTER FAMILY (Figma Foundations: 01 — Foundations) **/
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Thin-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Thin-BETA.woff2') format('woff2');
     font-weight: 100;
     font-style: normal;
     font-display: swap;
@@ -14,7 +33,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-ExtraLight-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-ExtraLight-BETA.woff2') format('woff2');
     font-weight: 200;
     font-style: normal;
     font-display: swap;
@@ -22,7 +41,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Light-BETA.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Light-BETA.woff2') format('woff2');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
@@ -30,7 +49,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Regular.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -38,7 +57,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Italic.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Italic.woff2') format('woff2');
     font-weight: 400;
     font-style: italic;
     font-display: swap;
@@ -46,7 +65,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Medium.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Medium.woff2') format('woff2');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
@@ -54,7 +73,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-SemiBold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-SemiBold.woff2') format('woff2');
     font-weight: 600;
     font-style: normal;
     font-display: swap;
@@ -62,7 +81,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Bold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
@@ -70,7 +89,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-ExtraBold.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -78,7 +97,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter-Black.woff2') format('woff2');
+    src: url('../fonts/Inter/Inter-Black.woff2') format('woff2');
     font-weight: 900;
     font-style: normal;
     font-display: swap;
@@ -86,7 +105,7 @@
 
   @font-face {
     font-family: 'Inter';
-    src: url('/fonts/Inter/Inter.var.woff2') format('woff2-variations');
+    src: url('../fonts/Inter/Inter.var.woff2') format('woff2-variations');
     font-weight: 100 900;
     font-style: normal;
     font-display: swap;
@@ -95,7 +114,7 @@
   /* JETBRAINS MONO: Monospace Display (Developer API) */
   @font-face {
     font-family: 'JetBrains Mono';
-    src: url('/fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
+    src: url('../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2');
     font-weight: 800;
     font-style: normal;
     font-display: swap;
@@ -104,7 +123,7 @@
   /* COUSINE: Code & Embed Snippets */
   @font-face {
     font-family: 'Cousine';
-    src: url('/fonts/Cousine/Cousine-Regular.woff2') format('woff2');
+    src: url('../fonts/Cousine/Cousine-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
@@ -112,7 +131,7 @@
 
   @font-face {
     font-family: 'Cousine';
-    src: url('/fonts/Cousine/Cousine-Bold.woff2') format('woff2');
+    src: url('../fonts/Cousine/Cousine-Bold.woff2') format('woff2');
     font-weight: 700;
     font-style: normal;
     font-display: swap;

package/dist/styles/global.css

@@ -476,14 +476,14 @@ go 3 levels up in development mode, 2 levels up in production mode*/
   /* Tablet (744px and below) */
   @media (max-width: 744px) {
     .dashboard-grid {
-      grid-template-columns: 
-        var(--dashboard-margin)
+      /* Keep the four tracks aligned with the four named areas below. */
+      grid-template-columns:
         var(--dashboard-sidebar-width)
-        var(--dashboard-gap)
-        1fr
+        var(--dashboard-margin)
+        minmax(0, 1fr)
         var(--dashboard-margin);
       grid-template-rows: 56px 1fr;
-      gap: var(--dashboard-gap);
+      gap: 0;
       grid-template-areas:
         "sidebar margin-l header margin-r"
         "sidebar margin-l main margin-r";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@widgetic/design-system",
-	"version": "0.5.12",
+	"version": "0.5.15",
 	"type": "module",
 	"svelte": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -38,6 +38,8 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "NODE_OPTIONS='--max-old-space-size=8192' svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"check:strict": "tsc --noEmit && npm run check",
+		"check:deps": "check-runtime-deps",
+		"test:deps": "check-runtime-deps-fixtures",
 		"pnpm-link": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global'",
 		"link-packs": "zsh -c 'mkdir -p ~/.pnpm-global/bin && export PATH=\"$PATH:$HOME/.pnpm-global/bin\" && pnpm install -g pnpm && pnpm config set global-bin-dir ~/.pnpm-global/bin && echo \"export PATH=\\\"$PATH:$HOME/.pnpm-global/bin\\\"\" >> ~/.zshrc && source ~/.zshrc && pnpm link --global @widgetic/api-sdk @widgetic/design-system'",
 		"i-shadcn": "npm run clean-shadcn && npm run i-shadcn-init && npm run i-shadcn-comps",
@@ -93,16 +95,6 @@
 			"svelte": "./dist/stores/*.js",
 			"default": "./dist/stores/*.js"
 		},
-		"./previews": {
-			"types": "./dist/components/previews/index.d.ts",
-			"svelte": "./dist/components/previews/index.js",
-			"default": "./dist/components/previews/index.js"
-		},
-		"./previews/*": {
-			"types": "./dist/components/previews/*.d.ts",
-			"svelte": "./dist/components/previews/*.js",
-			"default": "./dist/components/previews/*.js"
-		},
 		"./styles": "./dist/styles/global.css",
 		"./styles/*": "./dist/styles/*.css",
 		"./fonts": "./dist/fonts",
@@ -149,6 +141,7 @@
 		"@tiptap/pm": "^2.9.1",
 		"@tiptap/starter-kit": "^2.9.1",
 		"@types/node": "^22.10.1",
+		"@widgetic/dev-tools": "^0.2.0",
 		"chokidar-cli": "^3.0.0",
 		"concurrently": "^9.1.0",
 		"eslint": "^9.7.0",