@streamscloud/kit 0.2.42 → 0.9.1

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

@@ -1,27 +1,57 @@
 <script lang="ts" generics="TResult = void, TCancelResult = void">import { default as Icon } from '../icon/cmp.icon.svelte';
-import IconDismiss24Filled from '@fluentui/svg-icons/icons/dismiss_24_filled.svg?raw';
+import { DialogLocalization } from './dialog-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
 let { controller } = $props();
+const localization = new DialogLocalization();
 const handleClick = () => {
     controller.cancel();
 };
 </script>
 
-<button type="button" class="dialog-close-button" onclick={handleClick} aria-label="Close">
-  <Icon src={IconDismiss24Filled} />
+<button type="button" class="dialog-close-button" onclick={handleClick} aria-label={localization.close}>
+  <Icon src={IconDismiss} />
 </button>
 
 <!--
 @component
-A dismiss (X) icon button that cancels the parent dialog via the provided `DialogController`.
+DialogCloseButton — dismiss (×) icon button that cancels the parent dialog via the provided `DialogController`.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--dialog-close-button--color` | Icon color | `neutral-500` / `neutral-300` |
+| `--sc-kit--dialog-close-button--size` | Button size (square) | `1.75rem` (28px) |
+| `--sc-kit--dialog-close-button--background` | Background (default) | `transparent` |
+| `--sc-kit--dialog-close-button--background--hover` | Background on hover | `--sc-kit--color--bg--hover` |
+| `--sc-kit--dialog-close-button--color` | Icon color | `--sc-kit--color--text--muted` |
+| `--sc-kit--dialog-close-button--color--hover` | Icon color on hover | `--sc-kit--color--text--primary` |
+| `--sc-kit--dialog-close-button--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
+| `--sc-kit--dialog-close-button--icon--size` | Icon glyph size | `1.25rem` (20px) |
 -->
 
 <style>.dialog-close-button {
-  --_dialog-close-button--color: var(--sc-kit--dialog-close-button--color, light-dark(#6b7280, #d1d5db));
-  --sc-kit--icon--size: 1.5rem;
-  color: var(--_dialog-close-button--color);
+  --_close--size: var(--sc-kit--dialog-close-button--size, 1.75rem);
+  --_close--background: var(--sc-kit--dialog-close-button--background, transparent);
+  --_close--background-hover: var(--sc-kit--dialog-close-button--background--hover, var(--sc-kit--color--bg--hover));
+  --_close--color: var(--sc-kit--dialog-close-button--color, var(--sc-kit--color--text--muted));
+  --_close--color-hover: var(--sc-kit--dialog-close-button--color--hover, var(--sc-kit--color--text--primary));
+  --_close--border-radius: var(--sc-kit--dialog-close-button--border-radius, var(--sc-kit--radius--sm));
+  --_close--icon-size: var(--sc-kit--dialog-close-button--icon--size, 1.25rem);
+  --sc-kit--icon--size: var(--_close--icon-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: var(--_close--size);
+  height: var(--_close--size);
+  padding: 0;
+  background: var(--_close--background);
+  border: none;
+  border-radius: var(--_close--border-radius);
+  color: var(--_close--color);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.dialog-close-button:where(:hover) {
+  --sc-kit--dialog-close-button--background: var(--_close--background-hover);
+  --sc-kit--dialog-close-button--color: var(--_close--color-hover);
 }</style>

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

@@ -24,12 +24,18 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
- * A dismiss (X) icon button that cancels the parent dialog via the provided `DialogController`.
+ * DialogCloseButton — dismiss (×) icon button that cancels the parent dialog via the provided `DialogController`.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--dialog-close-button--color` | Icon color | `neutral-500` / `neutral-300` |
+ * | `--sc-kit--dialog-close-button--size` | Button size (square) | `1.75rem` (28px) |
+ * | `--sc-kit--dialog-close-button--background` | Background (default) | `transparent` |
+ * | `--sc-kit--dialog-close-button--background--hover` | Background on hover | `--sc-kit--color--bg--hover` |
+ * | `--sc-kit--dialog-close-button--color` | Icon color | `--sc-kit--color--text--muted` |
+ * | `--sc-kit--dialog-close-button--color--hover` | Icon color on hover | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--dialog-close-button--border-radius` | Corner rounding | `--sc-kit--radius--sm` |
+ * | `--sc-kit--dialog-close-button--icon--size` | Icon glyph size | `1.25rem` (20px) |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;

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

@@ -1,9 +1,9 @@
-<script lang="ts" generics="TResult = void, TCancelResult = void, TData = void">import { Dialogs } from './dialogs.svelte';
+<script lang="ts" generics="TResult = void, TCancelResult = void, TData = void">import { Dialogs } from './dialog-store.svelte';
 import { DIALOG_SIZES } from './types.svelte';
 import { untrack } from 'svelte';
 let { dialog } = $props();
 let dialogElement = $state();
-const isActive = $derived(Dialogs.active?.id === dialog.id);
+const isActive = $derived(Dialogs.active(dialog.containerId)?.id === dialog.id);
 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
@@ -35,7 +35,6 @@ const handleBackdropClick = (event) => {
         dialog.controller.cancel();
     }
 };
-// Use $effect to ensure showModal() is called when dialog element changes (including HMR)
 $effect(() => {
     if (dialogElement && !dialogElement.open) {
         dialogElement.showModal();
@@ -45,7 +44,7 @@ $effect(() => {
     const handleNavigateBack = () => {
         Dialogs.closeAll();
     };
-    const shouldTrack = untrack(() => Dialogs.count === 1);
+    const shouldTrack = untrack(() => Dialogs.count() === 1);
     if (shouldTrack) {
         window.addEventListener('popstate', handleNavigateBack);
     }
@@ -59,7 +58,7 @@ const size = $derived(dialog.controller.containerSettings.size);
 const position = $derived(dialog.controller.containerSettings.position);
 const isCustomWidth = $derived(!DIALOG_SIZES.includes(size));
 const customWidth = $derived(isCustomWidth ? size : null);
-const isStretchContent = $derived(position === 'full-screen' || position === 'full-height');
+const isStretchContent = $derived(position === 'full-screen' || position === 'full-height' || position === 'side-left' || position === 'side-right');
 </script>
 
 <dialog
@@ -76,21 +75,39 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   class:dialog-container--position-center-top={position === 'center-top'}
   class:dialog-container--position-full-screen={position === 'full-screen'}
   class:dialog-container--position-full-height={position === 'full-height'}
+  class:dialog-container--position-side-left={position === 'side-left'}
+  class:dialog-container--position-side-right={position === 'side-right'}
   onkeydown={handleKeydown}
   oncancel={handleCancel}
   onclick={handleBackdropClick}
   style:--dialog-container--custom-width={customWidth}>
-  <div class="dialog-container__content" class:dialog-container__content--stretch={isStretchContent}>
+  <div
+    class="dialog-container__content"
+    class:dialog-container__content--stretch={isStretchContent}
+    class:dialog-container__content--side-left={position === 'side-left'}
+    class:dialog-container__content--side-right={position === 'side-right'}>
     <DialogView controller={dialog.controller} data={dialog.data as TData} />
   </div>
 </dialog>
 
+<!--
+@component
+DialogContainer — wraps the native `<dialog>` element with sizing, positioning, and backdrop styling. Mounted automatically by `<DialogHost>` for every entry in the routed bucket; consumers shouldn't render it directly.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--dialog-container--backdrop` | Backdrop fill | `--sc-kit--color--bg--scrim` |
+| `--sc-kit--dialog-container--border-radius` | Content corner rounding | `--sc-kit--radius--lg` |
+| `--sc-kit--dialog-container--max-width` | Max content width | per size |
+| `--sc-kit--dialog-container--padding` | Viewport padding around the dialog | `--sc-kit--space--4` |
+-->
+
 <style>.dialog-container {
-  --_dialog-container--backdrop: var(--sc-kit--dialog-container--backdrop, light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.15)));
-  --_dialog-container--border-radius: var(--sc-kit--dialog-container--border-radius, 0.5rem);
+  --_dialog-container--backdrop: var(--sc-kit--dialog-container--backdrop, var(--sc-kit--color--bg--scrim));
+  --_dialog-container--border-radius: var(--sc-kit--dialog-container--border-radius, var(--sc-kit--radius--lg));
   --_dialog-container--max-width: var(--sc-kit--dialog-container--max-width, 64rem);
-  --_dialog-container--padding: var(--sc-kit--dialog-container--padding, 1rem);
-  --_dialog-container--scrollbar-thumb: var(--sc-kit--dialog-container--scrollbar-thumb, light-dark(#c1c1c1, #383838));
+  --_dialog-container--padding: var(--sc-kit--dialog-container--padding, var(--sc-kit--space--4));
   --_dialog-container--custom-width: var(--dialog-container--custom-width);
   position: fixed;
   inset: 0;
@@ -108,7 +125,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   align-items: center;
   box-sizing: border-box;
   padding: var(--_dialog-container--padding);
-  --_cross-browser-scrollbar--thumb-color: var(--_dialog-container--scrollbar-thumb);
+  --_cross-browser-scrollbar--thumb-color: var(--sc-kit--color--border--strong);
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .dialog-container::-webkit-scrollbar {
@@ -131,6 +148,7 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
 }
 .dialog-container::backdrop {
   background: var(--_dialog-container--backdrop);
+  animation: dialog-container-backdrop-fade-in var(--sc-kit--duration--slow) var(--sc-kit--ease--out) both;
 }
 .dialog-container--inactive::backdrop {
   background: transparent;
@@ -171,6 +189,13 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   --_dialog-container--border-radius: 0;
   overflow: hidden;
 }
+.dialog-container--position-side-left, .dialog-container--position-side-right {
+  --_dialog-container--padding: 0;
+  --_dialog-container--border-radius: 0;
+  --sc-kit--dialog--border-radius: 0;
+  --sc-kit--dialog--height: 100%;
+  overflow: hidden;
+}
 .dialog-container__content {
   container-type: inline-size;
   width: 100%;
@@ -183,4 +208,18 @@ const isStretchContent = $derived(position === 'full-screen' || position === 'fu
   flex-direction: column;
   flex: 1;
   min-height: 0;
+}
+.dialog-container__content--side-left {
+  align-self: flex-start;
+  align-items: flex-start;
+}
+.dialog-container__content--side-right {
+  align-self: flex-end;
+  align-items: flex-end;
+}
+
+@keyframes dialog-container-backdrop-fade-in {
+  from {
+    opacity: 0;
+  }
 }</style>

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

@@ -22,6 +22,17 @@ interface $$IsomorphicComponent {
     <TResult = void, TCancelResult = void, TData = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult, TData>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
+/**
+ * DialogContainer — wraps the native `<dialog>` element with sizing, positioning, and backdrop styling. Mounted automatically by `<DialogHost>` for every entry in the routed bucket; consumers shouldn't render it directly.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--dialog-container--backdrop` | Backdrop fill | `--sc-kit--color--bg--scrim` |
+ * | `--sc-kit--dialog-container--border-radius` | Content corner rounding | `--sc-kit--radius--lg` |
+ * | `--sc-kit--dialog-container--max-width` | Max content width | per size |
+ * | `--sc-kit--dialog-container--padding` | Viewport padding around the dialog | `--sc-kit--space--4` |
+ */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void, TData = void> = InstanceType<typeof Cmp<TResult, TCancelResult, TData>>;
 export default Cmp;

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

@@ -0,0 +1,25 @@
+<script lang="ts">import { default as DialogContainer } from './cmp.dialog-container.svelte';
+import { Dialogs } from './dialog-store.svelte';
+const { id = '' } = $props();
+const dialogs = $derived(Dialogs.dialogs(id));
+$effect(() => {
+    Dialogs.registerMount(id);
+    return () => {
+        Dialogs.unregisterMount(id);
+    };
+});
+</script>
+
+{#each dialogs as d (d.id)}
+  <DialogContainer dialog={d} />
+{/each}
+
+<!--
+@component
+DialogHost — renders dialogs routed to its container id via the `Dialogs` static API. Mount once at the root of your app for the default container (`id=""`), or with an explicit `id` to receive dialogs from `Dialogs.open({ containerId: '...' })`. If no `<DialogHost>` is mounted for a target container id, one is lazily created on `document.body` at the first `Dialogs.open` call.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `id` | `string` | Container id; default `''` |
+-->

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

@@ -0,0 +1,15 @@
+type Props = {
+    /** Container id. Routes dialogs opened via `Dialogs.open({ containerId })`. Default container is the empty string. @default '' */
+    id?: string;
+};
+/**
+ * DialogHost — renders dialogs routed to its container id via the `Dialogs` static API. Mount once at the root of your app for the default container (`id=""`), or with an explicit `id` to receive dialogs from `Dialogs.open({ containerId: '...' })`. If no `<DialogHost>` is mounted for a target container id, one is lazily created on `document.body` at the first `Dialogs.open` call.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `id` | `string` | Container id; default `''` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -38,44 +38,48 @@ const showCloseButton = $derived(!hideCloseButton && !controller.settings.nonCan
 
 <!--
 @component
-A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `DialogContainer` via the `Dialogs` singleton.
+A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `<DialogHost>` via the `Dialogs.open(...)` API.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--dialog--background` | Dialog background | `white` / `black` |
-| `--sc-kit--dialog--border-color` | Header/footer separator border | `neutral-100` / `dark-800` |
-| `--sc-kit--dialog--border-radius` | Corner rounding | `0.5rem` |
-| `--sc-kit--dialog--color` | Text color | `black` / `white` |
-| `--sc-kit--dialog--shadow-color` | Box shadow color | `rgba(47,43,67,0.1)` / `rgba(255,255,255,0.1)` |
+| `--sc-kit--dialog--background` | Dialog background | `--sc-kit--color--bg--panel` |
+| `--sc-kit--dialog--border-color` | Header/footer separator border | `--sc-kit--color--border` |
+| `--sc-kit--dialog--border-radius` | Corner rounding | `--sc-kit--radius--lg` |
+| `--sc-kit--dialog--color` | Text color | `--sc-kit--color--text--primary` |
+| `--sc-kit--dialog--shadow` | Box shadow | `--sc-kit--shadow--lg` |
 | `--sc-kit--dialog--height` | Dialog height | `auto` |
 | `--sc-kit--dialog--max-height` | Maximum height | `none` |
 | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
-| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
-| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+| `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5` |
+| `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6` |
 | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
 | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
 | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
 | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
 | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+| `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
+| `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
 -->
 
 <style>.dialog {
-  --_dialog--background: var(--sc-kit--dialog--background, light-dark(#ffffff, #000000));
-  --_dialog--border-color: var(--sc-kit--dialog--border-color, light-dark(#f2f2f3, #1e1e1e));
-  --_dialog--border-radius: var(--sc-kit--dialog--border-radius, 0.5rem);
-  --_dialog--color: var(--sc-kit--dialog--color, light-dark(#000000, #ffffff));
-  --_dialog--shadow-color: var(--sc-kit--dialog--shadow-color, light-dark(#2f2b431a, #ffffff1a));
+  --_dialog--background: var(--sc-kit--dialog--background, var(--sc-kit--color--bg--panel));
+  --_dialog--border-color: var(--sc-kit--dialog--border-color, var(--sc-kit--color--border));
+  --_dialog--border-radius: var(--sc-kit--dialog--border-radius, var(--sc-kit--radius--lg));
+  --_dialog--color: var(--sc-kit--dialog--color, var(--sc-kit--color--text--primary));
+  --_dialog--shadow: var(--sc-kit--dialog--shadow, var(--sc-kit--shadow--lg));
   --_dialog--height: var(--sc-kit--dialog--height, auto);
   --_dialog--max-height: var(--sc-kit--dialog--max-height, none);
   --_dialog--min-height: var(--sc-kit--dialog--min-height, auto);
-  --_dialog--padding-block: var(--sc-kit--dialog--padding-block, 1.25rem);
-  --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1.5rem);
+  --_dialog--padding-block: var(--sc-kit--dialog--padding-block, var(--sc-kit--space--5));
+  --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, var(--sc-kit--space--6));
   --_dialog--body--overflow-y: var(--sc-kit--dialog--body--overflow-y, visible);
   --_dialog--body--padding-block: var(--sc-kit--dialog--body--padding-block, var(--_dialog--padding-block));
   --_dialog--body--padding-inline: var(--sc-kit--dialog--body--padding-inline, var(--_dialog--padding-inline));
   --_dialog--header--padding-block: var(--sc-kit--dialog--header--padding-block, var(--_dialog--padding-block));
   --_dialog--header--padding-inline: var(--sc-kit--dialog--header--padding-inline, var(--_dialog--padding-inline));
+  --_dialog--title-font-size: var(--sc-kit--dialog--title--font-size, 1.125rem);
+  --_dialog--title-line-height: var(--sc-kit--dialog--title--line-height, 1.4);
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -85,12 +89,12 @@ A structured dialog panel with header (title + close button), scrollable body, a
   background: var(--_dialog--background);
   color: var(--_dialog--color);
   border-radius: var(--_dialog--border-radius);
-  box-shadow: 0 4px 24px var(--_dialog--shadow-color);
+  box-shadow: var(--_dialog--shadow);
   /* Set 'container-type: inline-size;' to reference container*/
 }
 @container (width < 768px) {
   .dialog {
-    --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, 1rem);
+    --_dialog--padding-inline: var(--sc-kit--dialog--padding-inline, var(--sc-kit--space--4));
   }
 }
 .dialog__header {
@@ -98,7 +102,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   flex-shrink: 0;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
+  gap: var(--sc-kit--space--4);
   padding: var(--_dialog--header--padding-block) var(--_dialog--header--padding-inline);
   border-bottom: 1px solid var(--_dialog--border-color);
   -webkit-user-drag: none;
@@ -109,9 +113,14 @@ A structured dialog panel with header (title + close button), scrollable body, a
 }
 .dialog__title {
   flex: 1;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.4;
+  min-width: 0;
+  font-size: var(--_dialog--title-font-size);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--_dialog--title-line-height);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .dialog__body {
   flex: 1;
@@ -145,7 +154,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   margin-top: auto;
   align-items: center;
   justify-content: flex-end;
-  gap: 0.75rem;
+  gap: var(--sc-kit--space--3);
   padding: var(--_dialog--padding-block) var(--_dialog--padding-inline);
   border-top: 1px solid var(--_dialog--border-color);
   -webkit-user-drag: none;

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

@@ -39,26 +39,28 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
- * A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `DialogContainer` via the `Dialogs` singleton.
+ * A structured dialog panel with header (title + close button), scrollable body, and footer sections. Render inside a `<DialogHost>` via the `Dialogs.open(...)` API.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--dialog--background` | Dialog background | `white` / `black` |
- * | `--sc-kit--dialog--border-color` | Header/footer separator border | `neutral-100` / `dark-800` |
- * | `--sc-kit--dialog--border-radius` | Corner rounding | `0.5rem` |
- * | `--sc-kit--dialog--color` | Text color | `black` / `white` |
- * | `--sc-kit--dialog--shadow-color` | Box shadow color | `rgba(47,43,67,0.1)` / `rgba(255,255,255,0.1)` |
+ * | `--sc-kit--dialog--background` | Dialog background | `--sc-kit--color--bg--panel` |
+ * | `--sc-kit--dialog--border-color` | Header/footer separator border | `--sc-kit--color--border` |
+ * | `--sc-kit--dialog--border-radius` | Corner rounding | `--sc-kit--radius--lg` |
+ * | `--sc-kit--dialog--color` | Text color | `--sc-kit--color--text--primary` |
+ * | `--sc-kit--dialog--shadow` | Box shadow | `--sc-kit--shadow--lg` |
  * | `--sc-kit--dialog--height` | Dialog height | `auto` |
  * | `--sc-kit--dialog--max-height` | Maximum height | `none` |
  * | `--sc-kit--dialog--min-height` | Minimum height | `auto` |
- * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `1.25rem` |
- * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `1.5rem` |
+ * | `--sc-kit--dialog--padding-block` | Vertical padding for header/body/footer | `--sc-kit--space--5` |
+ * | `--sc-kit--dialog--padding-inline` | Horizontal padding for header/body/footer | `--sc-kit--space--6` |
  * | `--sc-kit--dialog--body--overflow-y` | Body vertical overflow | `visible` |
  * | `--sc-kit--dialog--body--padding-block` | Body-specific vertical padding | inherits `--padding-block` |
  * | `--sc-kit--dialog--body--padding-inline` | Body-specific horizontal padding | inherits `--padding-inline` |
  * | `--sc-kit--dialog--header--padding-block` | Header-specific vertical padding | inherits `--padding-block` |
  * | `--sc-kit--dialog--header--padding-inline` | Header-specific horizontal padding | inherits `--padding-inline` |
+ * | `--sc-kit--dialog--title--font-size` | Title font size | `1.125rem` (18px) |
+ * | `--sc-kit--dialog--title--line-height` | Title line height | `1.4` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;

package/dist/ui/dialog/dialog-controller.d.ts

@@ -1,6 +1,6 @@
 import { DialogContainerSettings, DialogSettings, type DialogResult } from './types.svelte';
 export declare class DialogController<TResult = void, TCancelResult = void> {
-    readonly dialogId: number;
+    readonly dialogId: number | string;
     settings: DialogSettings;
     containerSettings: DialogContainerSettings;
     private _onClose;
@@ -9,7 +9,7 @@ export declare class DialogController<TResult = void, TCancelResult = void> {
     private _closeDeferred;
     private _isClosed;
     constructor(init: {
-        id: number;
+        id: number | string;
         onClose: () => void;
         settings?: Partial<DialogSettings>;
         containerSettings?: Partial<DialogContainerSettings>;

package/dist/ui/dialog/dialog-data.d.ts

@@ -3,12 +3,11 @@ import type { DialogContainerSettings, DialogSettings } from './types.svelte';
 import type { Component } from 'svelte';
 export type AnyDialogData = DialogData<any, any, any>;
 export type DialogData<TResult = void, TCancelResult = void, TData = void> = {
-    id: number;
+    id: number | string;
+    containerId: string;
     view: DialogViewComponentType<TData, TResult, TCancelResult>;
     data?: TData;
     controller: DialogController<TResult, TCancelResult>;
-    hostElement?: HTMLElement;
-    component?: object;
 };
 type DialogViewWithData<TData, TResult, TCancelResult> = Component<{
     data: TData;
@@ -23,7 +22,7 @@ export type DialogInit<TData = void, TResult = void, TCancelResult = void> = {
     data?: TData;
     explicitSettings?: Partial<DialogSettings>;
     containerSettings?: Partial<DialogContainerSettings>;
-    /** Mount target for the dialog element. Useful for shadow DOM isolation. Defaults to `document.body`. */
-    host?: ParentNode;
+    /** Routes the dialog to a `<DialogHost id={containerId}>`. If no host is mounted for this id, a fresh one is lazily created on `document.body`. Default container is `''`. */
+    containerId?: string;
 };
 export {};

package/dist/ui/dialog/dialog-host-mount.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ensures a `<DialogHost>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<DialogHost id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export declare const ensureDialogHost: (containerId: string) => void;

package/dist/ui/dialog/dialog-host-mount.js

@@ -0,0 +1,18 @@
+import DialogHost from './cmp.dialog-host.svelte';
+import { Dialogs } from './dialog-store.svelte';
+import { mount } from 'svelte';
+const isBrowserEnv = typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Ensures a `<DialogHost>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<DialogHost id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export const ensureDialogHost = (containerId) => {
+    if (!isBrowserEnv || Dialogs.isMounted(containerId)) {
+        return;
+    }
+    const host = document.createElement('div');
+    host.dataset.scKitDialogHost = containerId || 'default';
+    document.body.appendChild(host);
+    mount(DialogHost, { target: host, props: { id: containerId } });
+};

package/dist/ui/dialog/dialog-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class DialogLocalization {
+    get close(): string;
+}

package/dist/ui/dialog/dialog-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+export class DialogLocalization {
+    get close() {
+        return loc.close[AppLocale.current];
+    }
+}
+const loc = {
+    close: {
+        en: 'Close',
+        no: 'Lukk'
+    }
+};

package/dist/ui/dialog/dialog-store.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type AnyDialogData, type DialogInit } from './dialog-data';
+import { type DialogResult } from './types.svelte';
+declare class DialogStore {
+    private _buckets;
+    private _mounted;
+    private _mountedSet;
+    private _savedOverflow;
+    /** Reactive snapshot of dialogs routed to a container id. */
+    dialogs: (containerId: string) => readonly AnyDialogData[];
+    /** Reactive — last (topmost) dialog inside the given container. */
+    active: (containerId: string) => AnyDialogData | null;
+    /** Total number of open dialogs across all containers. */
+    count: () => number;
+    /** Reactive list of container ids that have a `<DialogHost>` mounted. */
+    mounted: () => string[];
+    isMounted: (containerId: string) => boolean;
+    open: <TData = void, TResult = void, TCancelResult = void>(init: DialogInit<TData, TResult, TCancelResult>, id?: number | string) => Promise<DialogResult<TResult, TCancelResult>>;
+    close: (id: number | string) => void;
+    closeAll: () => void;
+    closeAllIn: (containerId: string) => void;
+    registerMount: (containerId: string) => void;
+    unregisterMount: (containerId: string) => void;
+    private lockBodyScroll;
+    private unlockBodyScroll;
+}
+export declare const Dialogs: DialogStore;
+export {};