@streamscloud/kit 0.61.0 → 0.62.0

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { Dialog, DialogButton, DialogCancelButton } from '../dialog';
+<script lang="ts">import { DialogButton, DialogCancelButton } from '../dialog';
+import { FramelessDialog } from '../dialog/layout';
 import { ConfirmationDialogLocalization } from './confirmation-dialog-localization';
 import {} from './types';
 import { untrack } from 'svelte';
@@ -26,36 +27,24 @@ untrack(() => {
 });
 </script>
 
-<div class="confirmation-dialog confirmation-dialog--{style}">
-  <Dialog controller={controller} hideCloseButton={true}>
-    {#snippet title()}
-      {titleText}
-    {/snippet}
-    {#snippet body()}
-      {#if bodyText}
-        {bodyText}
-      {/if}
-    {/snippet}
-    {#snippet footer()}
-      <DialogCancelButton on={{ click: close }}>{localization.no}</DialogCancelButton>
-      <DialogButton on={{ click: confirm }} variant={buttonVariant} icon={icon}>
-        {localization.yes}
-      </DialogButton>
-    {/snippet}
-  </Dialog>
-</div>
+<FramelessDialog controller={controller} title={titleText} hideCloseButton>
+  {#if bodyText}
+    {bodyText}
+  {/if}
+  {#snippet footer()}
+    <DialogCancelButton on={{ click: close }}>{localization.no}</DialogCancelButton>
+    <DialogButton on={{ click: confirm }} variant={buttonVariant} icon={icon}>
+      {localization.yes}
+    </DialogButton>
+  {/snippet}
+</FramelessDialog>
 
 <!--
 @component
-Internal view for `openConfirmationDialog`. Renders the Dialog body + Yes/No footer. The Yes button's
+Internal view for `openConfirmationDialog`. Renders the frameless dialog frame + Yes/No footer. The Yes button's
 Button variant is derived from `data.style` (`alert → danger`, `warning → warning`, `info → primary`)
 so the confirmation reads the same as the surrounding banner color.
 
 Use the imperative `openConfirmationDialog({ title, text, style, icon })` from the package barrel —
 never render this view directly.
 -->
-
-<style>.confirmation-dialog {
-  --sc-kit--dialog--body--padding-inline: var(--sc-kit--space--6);
-  --sc-kit--dialog--body--padding-block: var(--sc-kit--space--6) var(--sc-kit--space--12);
-}</style>

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

@@ -5,7 +5,7 @@ type Props = {
     data: ConfirmationDialogData;
 };
 /**
- * Internal view for `openConfirmationDialog`. Renders the Dialog body + Yes/No footer. The Yes button's
+ * Internal view for `openConfirmationDialog`. Renders the frameless dialog frame + Yes/No footer. The Yes button's
  * Button variant is derived from `data.style` (`alert → danger`, `warning → warning`, `info → primary`)
  * so the confirmation reads the same as the surrounding banner color.
  *

package/dist/ui/dialog/layout/cmp.frameless-dialog.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" generics="TResult = void, TCancelResult = void">import { Dialog, DialogCloseButton } from '..';
+let { controller, title, hideCloseButton = false, children, footer } = $props();
+</script>
+
+<div class="frameless-dialog">
+  <Dialog controller={controller} hideCloseButton>
+    {#snippet bodySection()}
+      <div class="frameless-dialog__body">
+        {#if !hideCloseButton}
+          <span class="frameless-dialog__close"><DialogCloseButton controller={controller} /></span>
+        {/if}
+        <div class="frameless-dialog__title" class:frameless-dialog__title--no-close={hideCloseButton}>{title}</div>
+        {@render children()}
+      </div>
+    {/snippet}
+    {#snippet footerSection()}
+      <div class="frameless-dialog__footer">
+        {@render footer()}
+      </div>
+    {/snippet}
+  </Dialog>
+</div>
+
+<!--
+@component
+A `Dialog` frame with no header bar: the title sits in the body under generous top padding, the close (×) button is
+placed in the body's corner, and the footer gets a tinted band instead of inheriting the panel background. For short
+confirm / rename / move-style dialogs. The caller owns `controller` settings (`closeOnClickOutside`, `closeOnEsc`,
+`nonCancelable`) and container settings (`size`, `position`) — this component only changes the frame's look.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--frameless-dialog--footer--background` | Footer band background | `--sc-kit--color--bg--field-alt` |
+
+The close button is fixed at 16px (`--sc-kit--dialog-close-button--icon--size`) regardless of ancestor overrides — part of the frameless style, not a per-instance knob.
+-->
+
+<style>.frameless-dialog {
+  --_radius: var(--sc-kit--dialog--border-radius, var(--sc-kit--radius--lg));
+  --sc-kit--dialog-close-button--icon--size: 1rem;
+  display: contents;
+}
+.frameless-dialog__body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sc-kit--space--4);
+  padding: var(--sc-kit--space--10) var(--sc-kit--space--6) var(--sc-kit--space--8);
+}
+.frameless-dialog__close {
+  position: absolute;
+  inset-block-start: var(--sc-kit--space--3);
+  inset-inline-end: var(--sc-kit--space--3);
+}
+.frameless-dialog__title {
+  margin: 0;
+  padding-inline-end: var(--sc-kit--space--8);
+  font-size: var(--sc-kit--dialog--title--font-size, 1.125rem);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--dialog--title--line-height, 1.4);
+  overflow-wrap: anywhere;
+}
+.frameless-dialog__title--no-close {
+  padding-inline-end: 0;
+}
+.frameless-dialog__footer {
+  --_footer--background: var(--sc-kit--frameless-dialog--footer--background, var(--sc-kit--color--bg--field-alt));
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sc-kit--space--3);
+  padding: var(--sc-kit--space--3) var(--sc-kit--space--6);
+  background: var(--_footer--background);
+  border-block-start: 1px solid var(--sc-kit--dialog--border-color, var(--sc-kit--color--border));
+  border-end-start-radius: var(--_radius);
+  border-end-end-radius: var(--_radius);
+}</style>

package/dist/ui/dialog/layout/cmp.frameless-dialog.svelte.d.ts

@@ -0,0 +1,48 @@
+import { type DialogController } from '..';
+import type { Snippet } from 'svelte';
+declare function $$render<TResult = void, TCancelResult = void>(): {
+    props: {
+        controller: DialogController<TResult, TCancelResult>;
+        title: string;
+        /** Hide the corner close (×) button @default false */
+        hideCloseButton?: boolean;
+        /** Body content under the title */
+        children: Snippet;
+        /** Buttons rendered right-aligned in the tinted footer band */
+        footer: Snippet;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TResult = void, TCancelResult = void> {
+    props(): ReturnType<typeof $$render<TResult, TCancelResult>>['props'];
+    events(): ReturnType<typeof $$render<TResult, TCancelResult>>['events'];
+    slots(): ReturnType<typeof $$render<TResult, TCancelResult>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TResult = void, TCancelResult = void>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TResult, TCancelResult>['props']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['events']>, ReturnType<__sveltets_Render<TResult, TCancelResult>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TResult, TCancelResult>['bindings']>;
+    } & ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    <TResult = void, TCancelResult = void>(internal: unknown, props: ReturnType<__sveltets_Render<TResult, TCancelResult>['props']> & {}): ReturnType<__sveltets_Render<TResult, TCancelResult>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+/**
+ * A `Dialog` frame with no header bar: the title sits in the body under generous top padding, the close (×) button is
+ * placed in the body's corner, and the footer gets a tinted band instead of inheriting the panel background. For short
+ * confirm / rename / move-style dialogs. The caller owns `controller` settings (`closeOnClickOutside`, `closeOnEsc`,
+ * `nonCancelable`) and container settings (`size`, `position`) — this component only changes the frame's look.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--frameless-dialog--footer--background` | Footer band background | `--sc-kit--color--bg--field-alt` |
+ *
+ * The close button is fixed at 16px (`--sc-kit--dialog-close-button--icon--size`) regardless of ancestor overrides — part of the frameless style, not a per-instance knob.
+ */
+declare const Cmp: $$IsomorphicComponent;
+type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;
+export default Cmp;

package/dist/ui/{stepper-dialog-layout/cmp.stepper-dialog-layout.svelte → dialog/layout/cmp.stepper-dialog.svelte}

@@ -1,10 +1,10 @@
-<script lang="ts" generics="TResult = void, TCancelResult = void">import { Button } from '../button';
-import { Dialog, DialogCloseButton } from '../dialog';
-import { IconSlot } from '../icon';
-import { Stepper } from '../stepper';
-import { StepperDialogLayoutLocalization } from './stepper-dialog-layout-localization';
+<script lang="ts" generics="TResult = void, TCancelResult = void">import { Button } from '../../button';
+import { Dialog, DialogCloseButton } from '..';
+import { IconSlot } from '../../icon';
+import { Stepper } from '../../stepper';
+import { StepperDialogLocalization } from './stepper-dialog-localization';
 let { controller, icon, title, subtitle, steps, canAdvance = () => true, labels, children, on } = $props();
-const localization = new StepperDialogLayoutLocalization();
+const localization = new StepperDialogLocalization();
 let step = $state(0);
 let submitting = $state(false);
 const isFirstStep = $derived(step === 0);
@@ -38,7 +38,7 @@ const handleFinish = async () => {
         await on.finish();
     }
     catch (error) {
-        console.error('StepperDialogLayout: on.finish threw — surface errors inside the handler', error);
+        console.error('StepperDialog: on.finish threw — surface errors inside the handler', error);
     }
     finally {
         submitting = false;
@@ -51,17 +51,17 @@ const handleStepClick = (clicked) => {
 };
 </script>
 
-<div class="stepper-dialog-layout">
+<div class="stepper-dialog">
   <Dialog controller={controller}>
     {#snippet headerSection()}
-      <div class="stepper-dialog-layout__header">
+      <div class="stepper-dialog__header">
         {#if icon}
-          <span class="stepper-dialog-layout__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+          <span class="stepper-dialog__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
         {/if}
-        <div class="stepper-dialog-layout__title-block">
-          <div class="stepper-dialog-layout__title">{title}</div>
+        <div class="stepper-dialog__title-block">
+          <div class="stepper-dialog__title">{title}</div>
           {#if subtitle}
-            <div class="stepper-dialog-layout__subtitle">{subtitle}</div>
+            <div class="stepper-dialog__subtitle">{subtitle}</div>
           {/if}
         </div>
         {#if showCloseButton}
@@ -71,12 +71,12 @@ const handleStepClick = (clicked) => {
     {/snippet}
 
     {#snippet bodySection()}
-      <div class="stepper-dialog-layout__layout">
-        <div class="stepper-dialog-layout__sidebar">
+      <div class="stepper-dialog__layout">
+        <div class="stepper-dialog__sidebar">
           <Stepper orientation="vertical" completed="checkmark" current={step} steps={steps} on={{ stepClick: handleStepClick }} />
         </div>
-        <div class="stepper-dialog-layout__main">
-          <div class="stepper-dialog-layout__body">{@render children(step)}</div>
+        <div class="stepper-dialog__main">
+          <div class="stepper-dialog__body">{@render children(step)}</div>
         </div>
       </div>
     {/snippet}
@@ -98,7 +98,7 @@ const handleStepClick = (clicked) => {
 
 <!--
 @component
-StepperDialogLayout — layout scaffold for multi-step wizard dialog views: header (icon / title /
+StepperDialog — layout scaffold for multi-step wizard dialog views: header (icon / title /
 subtitle / close), vertical Stepper sidebar, scrollable body, and a Cancel / Back / Next / Finish
 footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
 navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
@@ -107,26 +107,26 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--stepper-dialog-layout--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
-| `--sc-kit--stepper-dialog-layout--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
-| `--sc-kit--stepper-dialog-layout--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
+| `--sc-kit--stepper-dialog--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
+| `--sc-kit--stepper-dialog--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
+| `--sc-kit--stepper-dialog--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
 -->
 
-<style>.stepper-dialog-layout {
-  --_sdl--sidebar-width: var(--sc-kit--stepper-dialog-layout--sidebar--width, 20rem);
-  --_sdl--sidebar-background: var(--sc-kit--stepper-dialog-layout--sidebar--background, var(--sc-kit--color--bg--field-alt));
-  --sc-kit--dialog--height: var(--sc-kit--stepper-dialog-layout--height, auto);
+<style>.stepper-dialog {
+  --_sd--sidebar-width: var(--sc-kit--stepper-dialog--sidebar--width, 20rem);
+  --_sd--sidebar-background: var(--sc-kit--stepper-dialog--sidebar--background, var(--sc-kit--color--bg--field-alt));
+  --sc-kit--dialog--height: var(--sc-kit--stepper-dialog--height, auto);
   --sc-kit--dialog--body--overflow-y: auto;
   display: contents;
 }
-.stepper-dialog-layout__header {
+.stepper-dialog__header {
   display: flex;
   align-items: flex-start;
   gap: var(--sc-kit--space--3);
   padding: var(--sc-kit--space--5) var(--sc-kit--space--6);
   border-block-end: 1px solid var(--sc-kit--color--border);
 }
-.stepper-dialog-layout__icon {
+.stepper-dialog__icon {
   --sc-kit--icon--size: 1.5rem;
   display: inline-flex;
   align-items: center;
@@ -138,58 +138,58 @@ Completed sidebar steps are clickable to go back; `canAdvance(step)` gates Next
   color: var(--sc-kit--color--text--primary);
   border-radius: var(--sc-kit--radius--md);
 }
-.stepper-dialog-layout__title-block {
+.stepper-dialog__title-block {
   flex: 1;
   min-inline-size: 0;
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
 }
-.stepper-dialog-layout__title {
+.stepper-dialog__title {
   font-size: var(--sc-kit--font-size--lg);
   font-weight: var(--sc-kit--font-weight--semibold);
   line-height: var(--sc-kit--leading--tight);
   color: var(--sc-kit--color--text--primary);
 }
-.stepper-dialog-layout__subtitle {
+.stepper-dialog__subtitle {
   font-size: var(--sc-kit--font-size--sm);
   color: var(--sc-kit--color--text--muted);
   line-height: var(--sc-kit--leading--normal);
 }
-.stepper-dialog-layout__layout {
+.stepper-dialog__layout {
   display: flex;
   flex: 1;
   min-block-size: 0;
   block-size: 100%;
 }
 @media screen and (max-width: 768px) {
-  .stepper-dialog-layout__layout {
+  .stepper-dialog__layout {
     flex-direction: column;
   }
 }
-.stepper-dialog-layout__sidebar {
-  flex: 0 0 var(--_sdl--sidebar-width);
+.stepper-dialog__sidebar {
+  flex: 0 0 var(--_sd--sidebar-width);
   padding: var(--sc-kit--space--5) var(--sc-kit--space--4);
-  background: var(--_sdl--sidebar-background);
+  background: var(--_sd--sidebar-background);
   border-inline-end: 1px solid var(--sc-kit--color--border);
   overflow-y: auto;
   min-block-size: 0;
 }
 @media screen and (max-width: 768px) {
-  .stepper-dialog-layout__sidebar {
+  .stepper-dialog__sidebar {
     flex: 0 0 auto;
     border-inline-end: none;
     border-block-end: 1px solid var(--sc-kit--color--border);
   }
 }
-.stepper-dialog-layout__main {
+.stepper-dialog__main {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-inline-size: 0;
   min-block-size: 0;
 }
-.stepper-dialog-layout__body {
+.stepper-dialog__body {
   flex: 1;
   min-block-size: 0;
   overflow-y: auto;

package/dist/ui/{stepper-dialog-layout/cmp.stepper-dialog-layout.svelte.d.ts → dialog/layout/cmp.stepper-dialog.svelte.d.ts}

@@ -1,6 +1,6 @@
-import { type DialogController } from '../dialog';
-import { type IconProp } from '../icon';
-import { type Step } from '../stepper';
+import { type DialogController } from '..';
+import { type IconProp } from '../../icon';
+import { type Step } from '../../stepper';
 import type { Snippet } from 'svelte';
 declare function $$render<TResult = void, TCancelResult = void>(): {
     props: {
@@ -48,7 +48,7 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 /**
- * StepperDialogLayout — layout scaffold for multi-step wizard dialog views: header (icon / title /
+ * StepperDialog — layout scaffold for multi-step wizard dialog views: header (icon / title /
  * subtitle / close), vertical Stepper sidebar, scrollable body, and a Cancel / Back / Next / Finish
  * footer. Render it inside your own dialog view opened via `Dialogs.open()` — the layout owns step
  * navigation and the submitting state; your `on.finish` owns closing (`controller.ok(...)`).
@@ -57,9 +57,9 @@ interface $$IsomorphicComponent {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--stepper-dialog-layout--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
- * | `--sc-kit--stepper-dialog-layout--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
- * | `--sc-kit--stepper-dialog-layout--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
+ * | `--sc-kit--stepper-dialog--sidebar--width` | Stepper sidebar width | `20rem` (320px) |
+ * | `--sc-kit--stepper-dialog--sidebar--background` | Sidebar background | `--sc-kit--color--bg--field-alt` |
+ * | `--sc-kit--stepper-dialog--height` | Dialog height (forwarded to `--sc-kit--dialog--height`) | `auto` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<TResult = void, TCancelResult = void> = InstanceType<typeof Cmp<TResult, TCancelResult>>;

package/dist/ui/dialog/layout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FramelessDialog } from './cmp.frameless-dialog.svelte';
+export { default as StepperDialog } from './cmp.stepper-dialog.svelte';

package/dist/ui/dialog/layout/index.js

@@ -0,0 +1,2 @@
+export { default as FramelessDialog } from './cmp.frameless-dialog.svelte';
+export { default as StepperDialog } from './cmp.stepper-dialog.svelte';

package/dist/ui/{stepper-dialog-layout/stepper-dialog-layout-localization.d.ts → dialog/layout/stepper-dialog-localization.d.ts}

@@ -1,4 +1,4 @@
-export declare class StepperDialogLayoutLocalization {
+export declare class StepperDialogLocalization {
     get cancel(): string;
     get back(): string;
     get next(): string;

package/dist/ui/{stepper-dialog-layout/stepper-dialog-layout-localization.js → dialog/layout/stepper-dialog-localization.js}

@@ -1,4 +1,4 @@
-import { AppLocale } from '../../core/locale';
+import { AppLocale } from '../../../core/locale';
 const loc = {
     cancel: {
         en: 'Cancel',
@@ -17,7 +17,7 @@ const loc = {
         no: 'Fullfør'
     }
 };
-export class StepperDialogLayoutLocalization {
+export class StepperDialogLocalization {
     get cancel() {
         return loc.cancel[AppLocale.current];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.61.0",
+  "version": "0.62.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -159,6 +159,10 @@
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
+    "./ui/dialog/layout": {
+      "types": "./dist/ui/dialog/layout/index.d.ts",
+      "svelte": "./dist/ui/dialog/layout/index.js"
+    },
     "./ui/divider": {
       "types": "./dist/ui/divider/index.d.ts",
       "svelte": "./dist/ui/divider/index.js"
@@ -391,10 +395,6 @@
       "types": "./dist/ui/stepper/index.d.ts",
       "svelte": "./dist/ui/stepper/index.js"
     },
-    "./ui/stepper-dialog-layout": {
-      "types": "./dist/ui/stepper-dialog-layout/index.d.ts",
-      "svelte": "./dist/ui/stepper-dialog-layout/index.js"
-    },
     "./ui/swipe-indicator": {
       "types": "./dist/ui/swipe-indicator/index.d.ts",
       "svelte": "./dist/ui/swipe-indicator/index.js"

package/dist/ui/stepper-dialog-layout/index.d.ts

@@ -1 +0,0 @@
-export { default as StepperDialogLayout } from './cmp.stepper-dialog-layout.svelte';

package/dist/ui/stepper-dialog-layout/index.js

@@ -1 +0,0 @@
-export { default as StepperDialogLayout } from './cmp.stepper-dialog-layout.svelte';