@streamscloud/kit 0.9.15 → 0.9.17

package/dist/ui/dialog/cmp.dialog-button.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">import { default as Button } from '../button/cmp.button.svelte';
-let { type = 'button', disabled = false, variant = 'primary', icon, on, children } = $props();
+let { type = 'button', disabled = false, loading = false, variant = 'primary', icon, on, children } = $props();
 </script>
 
 <div class="dialog-button">
-  <Button type={type} disabled={disabled} variant={variant} icon={icon} on={on}>
+  <Button type={type} disabled={disabled} loading={loading} variant={variant} icon={icon} on={on}>
     {@render children()}
   </Button>
 </div>
 
 <!--
 @component
-DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / type / icon contract.
+DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / loading / type / icon contract.
 
 ### CSS Custom Properties
 | Property | Description | Default |

package/dist/ui/dialog/cmp.dialog-button.svelte.d.ts

@@ -5,6 +5,8 @@ type Props = {
     /** @default 'button' */
     type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
+    /** Renders a spinner in place of the icon and blocks clicks. Passed through to Button. @default false */
+    loading?: boolean;
     /** Button color variant @default 'primary' */
     variant?: ButtonVariant;
     /** Leading icon — passed through to Button. */
@@ -15,7 +17,7 @@ type Props = {
     children: Snippet;
 };
 /**
- * DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / type / icon contract.
+ * DialogButton — action button for a dialog footer with a minimum width preset. Defaults to the `primary` variant. Wraps `<Button>` and exposes the same callback / disabled / loading / type / icon contract.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/dialog/cmp.dialog-container.svelte

@@ -4,6 +4,7 @@ import { untrack } from 'svelte';
 let { dialog } = $props();
 let dialogElement = $state();
 const isActive = $derived(Dialogs.active(dialog.containerId)?.id === dialog.id);
+const isStacked = $derived(Dialogs.dialogs(dialog.containerId).findIndex((d) => d.id === dialog.id) > 0);
 const canDismiss = $derived(!dialog.controller.settings.nonCancelable && dialog.controller.settings.closeOnEsc);
 const DialogView = $derived(dialog.view);
 // TEMP: Workaround for Chromium bug where preventDefault() on cancel event
@@ -65,6 +66,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   bind:this={dialogElement}
   class="dialog-container"
   class:dialog-container--inactive={!isActive}
+  class:dialog-container--stacked={isStacked}
   class:dialog-container--size-small={size === 'small'}
   class:dialog-container--size-medium={size === 'medium'}
   class:dialog-container--size-default={size === 'default'}
@@ -150,6 +152,9 @@ DialogContainer — wraps the native `<dialog>` element with sizing, positioning
   background: var(--_dialog-container--backdrop);
   animation: dialog-container-backdrop-fade-in var(--sc-kit--duration--slow) var(--sc-kit--ease--out) both;
 }
+.dialog-container--stacked::backdrop {
+  animation: none;
+}
 .dialog-container--inactive::backdrop {
   background: transparent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.9.15",
+  "version": "0.9.17",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",