@streamscloud/kit 0.1.12 → 0.2.0

package/dist/core/toastr/index.d.ts

@@ -1,3 +1,3 @@
 import './toastr.scss';
 export { Toastr } from './toastr.svelte';
-export type { ToastrAction, ToastrOptions, ToastrPromiseMessages } from './types';
+export type { ToastrAction, ToastrOptions, ToastrPromiseMessages, ToastrTheme } from './types';

package/dist/core/toastr/toastr.scss

@@ -26,3 +26,41 @@
     color: var(--info-bg);
   }
 }
+
+// Theme classes — override svelte-sonner color variables per-toast.
+// Applied via the `class` option when an explicit theme is passed to Toastr methods.
+.sc-toast--light {
+  --normal-bg: #fff;
+  --normal-border: hsl(0, 0%, 93%);
+  --normal-text: hsl(0, 0%, 9%);
+  --success-bg: hsl(143, 85%, 96%);
+  --success-border: hsl(145, 92%, 87%);
+  --success-text: hsl(140, 100%, 27%);
+  --info-bg: hsl(208, 100%, 97%);
+  --info-border: hsl(221, 91%, 93%);
+  --info-text: hsl(210, 92%, 45%);
+  --warning-bg: hsl(49, 100%, 97%);
+  --warning-border: hsl(49, 91%, 84%);
+  --warning-text: hsl(31, 92%, 45%);
+  --error-bg: hsl(359, 100%, 97%);
+  --error-border: hsl(359, 100%, 94%);
+  --error-text: hsl(360, 100%, 45%);
+}
+
+.sc-toast--dark {
+  --normal-bg: #000;
+  --normal-border: hsl(0, 0%, 20%);
+  --normal-text: hsl(0, 0%, 99%);
+  --success-bg: hsl(150, 100%, 6%);
+  --success-border: hsl(147, 100%, 12%);
+  --success-text: hsl(150, 86%, 65%);
+  --info-bg: hsl(215, 100%, 6%);
+  --info-border: hsl(223, 43%, 17%);
+  --info-text: hsl(216, 87%, 65%);
+  --warning-bg: hsl(64, 100%, 6%);
+  --warning-border: hsl(60, 100%, 9%);
+  --warning-text: hsl(46, 87%, 65%);
+  --error-bg: hsl(358, 76%, 10%);
+  --error-border: hsl(357, 89%, 16%);
+  --error-text: hsl(358, 100%, 81%);
+}

package/dist/core/toastr/toastr.svelte.d.ts

@@ -4,5 +4,5 @@ export declare class Toastr {
     static success(message: string, options?: ToastrOptions): Promise<void>;
     static warning(message: string, options?: ToastrOptions): Promise<void>;
     static info(message: string, options?: ToastrOptions): Promise<void>;
-    static promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastrPromiseMessages<T>): Promise<void>;
+    static promise<T>(promise: Promise<T> | (() => Promise<T>), messages: ToastrPromiseMessages<T>, options?: ToastrOptions): Promise<void>;
 }

package/dist/core/toastr/toastr.svelte.js

@@ -1,23 +1,30 @@
 import { ToasterHost } from './toaster-host.svelte';
+const toExternalToast = (options) => {
+    if (!options) {
+        return {};
+    }
+    const { theme, ...rest } = options;
+    return { ...rest, class: theme ? `sc-toast--${theme}` : undefined };
+};
 export class Toastr {
     static async error(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.error(message, options);
+        toast.error(message, toExternalToast(options));
     }
     static async success(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.success(message, options);
+        toast.success(message, toExternalToast(options));
     }
     static async warning(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.warning(message, options);
+        toast.warning(message, toExternalToast(options));
     }
     static async info(message, options) {
         const toast = await ToasterHost.ensure();
-        toast.info(message, options);
+        toast.info(message, toExternalToast(options));
     }
-    static async promise(promise, messages) {
+    static async promise(promise, messages, options) {
         const toast = await ToasterHost.ensure();
-        toast.promise(promise, messages);
+        toast.promise(promise, { ...messages, ...toExternalToast(options) });
     }
 }

package/dist/core/toastr/types.d.ts

@@ -2,10 +2,12 @@ export interface ToastrAction {
     label: string;
     onClick: () => void;
 }
+export type ToastrTheme = 'light' | 'dark';
 export interface ToastrOptions {
     action?: ToastrAction;
     description?: string;
     duration?: number;
+    theme?: ToastrTheme;
 }
 export interface ToastrPromiseMessages<T> {
     loading: string;

package/dist/core/transitions/slide-horizontally.js

@@ -1,5 +1,5 @@
 import { sineInOut } from 'svelte/easing';
-export const slideHorizontally = (node, { delay = 0, duration = 400, easing = sineInOut } = {}) => {
+export const slideHorizontally = (node, { delay = 0, duration = 250, easing = sineInOut } = {}) => {
     const style = getComputedStyle(node);
     const isHtmlElement = (n) => n.nodeType === Node.ELEMENT_NODE;
     const children = Array.from(node.children).filter(isHtmlElement);

package/dist/styles/_transitions.scss

@@ -0,0 +1,24 @@
+@use 'sass:list';
+
+$transition-duration-fast: 150ms;
+$transition-duration-base: 250ms;
+$transition-duration-slow: 350ms;
+
+$transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+$transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
+$transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
+
+// Transition mixin
+// Usage:
+//   @include transition(opacity);
+//   @include transition(background-color color, $transition-duration-fast);
+//   @include transition(width, $transition-duration-slow, linear);
+@mixin transition($properties: all, $duration: $transition-duration-base, $easing: $transition-easing-default) {
+  $result: ();
+
+  @each $property in $properties {
+    $result: list.append($result, $property $duration $easing, comma);
+  }
+
+  transition: $result;
+}

package/dist/ui/button/resources/button-base.svelte

@@ -53,7 +53,7 @@ export {};
   justify-content: var(--_button--justify-content);
   align-items: center;
   vertical-align: middle;
-  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s, filter linear 0.2s;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   cursor: pointer;
 }

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
 import { Toastr } from '../../../core/toastr';
-import { Dialog, DialogButton, DialogCancelButton, DialogSize } from '../../dialog';
+import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
 import { ImgCropper, ImgCropperControls, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
 import { ImageEditorDialogLocalization } from './image-editor-dialog-localization';
 import { untrack } from 'svelte';
@@ -37,7 +37,7 @@ const cancel = () => {
 };
 $effect(() => untrack(() => {
     controller.updateSettings({ closeOnClickOutside: false, closeOnEsc: true });
-    controller.updateContainerSettings({ size: DialogSize.FullHD });
+    controller.updateContainerSettings({ size: 'fullhd' });
 }));
 </script>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TResult = void, TCancelResult = void, TData = void">import { Dialogs } from './dialogs.svelte';
-import { DialogPosition, DialogSize } from './types.svelte';
+import { DIALOG_SIZES } from './types.svelte';
 import { untrack } from 'svelte';
 let { dialog } = $props();
 let dialogElement = $state();
@@ -57,7 +57,7 @@ $effect(() => {
 });
 const size = $derived(dialog.controller.containerSettings.size);
 const position = $derived(dialog.controller.containerSettings.position);
-const isCustomWidth = $derived(!Object.values(DialogSize).includes(size));
+const isCustomWidth = $derived(!DIALOG_SIZES.includes(size));
 const customWidth = $derived(isCustomWidth ? size : null);
 </script>
 
@@ -65,16 +65,16 @@ const customWidth = $derived(isCustomWidth ? size : null);
   bind:this={dialogElement}
   class="dialog-container"
   class:dialog-container--inactive={!isActive}
-  class:dialog-container--size-small={size === DialogSize.Small}
-  class:dialog-container--size-medium={size === DialogSize.Medium}
-  class:dialog-container--size-default={size === DialogSize.Default}
-  class:dialog-container--size-large={size === DialogSize.Large}
-  class:dialog-container--size-fullhd={size === DialogSize.FullHD}
-  class:dialog-container--size-auto={size === DialogSize.Auto}
-  class:dialog-container--position-center={position === DialogPosition.Center}
-  class:dialog-container--position-center-top={position === DialogPosition.CenterTop}
-  class:dialog-container--position-full-screen={position === DialogPosition.FullScreen}
-  class:dialog-container--position-full-height={position === DialogPosition.FullHeight}
+  class:dialog-container--size-small={size === 'small'}
+  class:dialog-container--size-medium={size === 'medium'}
+  class:dialog-container--size-default={size === 'default'}
+  class:dialog-container--size-large={size === 'large'}
+  class:dialog-container--size-fullhd={size === 'fullhd'}
+  class:dialog-container--size-auto={size === 'auto'}
+  class:dialog-container--position-center={position === 'center'}
+  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'}
   onkeydown={handleKeydown}
   oncancel={handleCancel}
   onclick={handleBackdropClick}

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

@@ -23,5 +23,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;
 };
 export {};

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

@@ -1,3 +1,3 @@
 import type { AnyDialogData } from './dialog-data';
-export declare const mountDialog: (dialog: AnyDialogData) => void;
+export declare const mountDialog: (dialog: AnyDialogData, host?: ParentNode) => void;
 export declare const unmountDialog: (dialog: AnyDialogData) => void;

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

@@ -1,9 +1,9 @@
 import { default as DialogContainer } from './cmp.dialog-container.svelte';
 import { mount, unmount } from 'svelte';
-export const mountDialog = (dialog) => {
+export const mountDialog = (dialog, host) => {
     const hostElement = document.createElement('div');
     hostElement.setAttribute('data-dialog-host', String(dialog.id));
-    document.body.appendChild(hostElement);
+    (host ?? document.body).appendChild(hostElement);
     const component = mount(DialogContainer, {
         target: hostElement,
         props: { dialog }

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

@@ -3,11 +3,14 @@ import { type DialogResult } from './types.svelte';
 export declare class DialogsContainer {
     private _dialogs;
     private _mountModule;
+    private _savedOverflow;
     get all(): ReadonlyArray<AnyDialogData>;
     get active(): AnyDialogData | null;
     get count(): number;
     open: <TData = void, TResult = void, TCancelResult = void>(init: DialogInit<TData, TResult, TCancelResult>, id?: number) => Promise<DialogResult<TResult, TCancelResult>>;
     close: (id: number) => void;
     closeAll: () => void;
+    private lockBodyScroll;
+    private unlockBodyScroll;
 }
 export declare const Dialogs: DialogsContainer;

package/dist/ui/dialog/dialogs.svelte.js

@@ -5,6 +5,7 @@ import {} from './types.svelte';
 export class DialogsContainer {
     _dialogs = $state.raw([]);
     _mountModule = null;
+    _savedOverflow = null;
     get all() {
         return this._dialogs;
     }
@@ -18,7 +19,7 @@ export class DialogsContainer {
         if (!this._mountModule) {
             this._mountModule = await import('./dialog-mount');
         }
-        const { view, data, explicitSettings, containerSettings } = init;
+        const { view, data, explicitSettings, containerSettings, host } = init;
         const controller = new DialogController({
             id,
             onClose: () => {
@@ -26,6 +27,9 @@ export class DialogsContainer {
                 if (dialog) {
                     this._mountModule?.unmountDialog(dialog);
                     this._dialogs = this._dialogs.filter((d) => d.id !== id);
+                    if (this._dialogs.length === 0) {
+                        this.unlockBodyScroll();
+                    }
                 }
             },
             settings: explicitSettings,
@@ -38,7 +42,8 @@ export class DialogsContainer {
             controller
         };
         this._dialogs = [...this._dialogs, newDialog];
-        this._mountModule.mountDialog(newDialog);
+        this.lockBodyScroll();
+        this._mountModule.mountDialog(newDialog, host);
         return controller.openedPromise;
     };
     close = (id) => {
@@ -53,6 +58,20 @@ export class DialogsContainer {
             dialog.controller.cancel();
         }
     };
+    lockBodyScroll = () => {
+        if (this._savedOverflow !== null) {
+            return;
+        }
+        this._savedOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'hidden';
+    };
+    unlockBodyScroll = () => {
+        if (this._savedOverflow === null) {
+            return;
+        }
+        document.documentElement.style.overflow = this._savedOverflow;
+        this._savedOverflow = null;
+    };
 }
 const createDialogsSingleton = () => {
     if (!isBrowser()) {

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

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition, type DialogResult } from './types.svelte';
+export { DIALOG_SIZES, type DialogPosition, type DialogResult, type DialogSize } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

package/dist/ui/dialog/index.js

@@ -1,6 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
-export { DialogSize, DialogPosition } from './types.svelte';
+export { DIALOG_SIZES } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';
 export { default as DialogCancelButton } from './cmp.dialog-cancel-button.svelte';

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

@@ -1,17 +1,6 @@
-export declare enum DialogSize {
-    Small = "small",
-    Medium = "medium",
-    Default = "default",
-    Large = "large",
-    FullHD = "fullhd",
-    Auto = "auto"
-}
-export declare enum DialogPosition {
-    Center = "center",
-    CenterTop = "center-top",
-    FullScreen = "full-screen",
-    FullHeight = "full-height"
-}
+export type DialogSize = 'small' | 'medium' | 'default' | 'large' | 'fullhd' | 'auto';
+export type DialogPosition = 'center' | 'center-top' | 'full-screen' | 'full-height';
+export declare const DIALOG_SIZES: readonly DialogSize[];
 export declare class DialogSettings {
     closeOnClickOutside: boolean;
     closeOnEsc: boolean;

package/dist/ui/dialog/types.svelte.js

@@ -1,25 +1,10 @@
-export var DialogSize;
-(function (DialogSize) {
-    DialogSize["Small"] = "small";
-    DialogSize["Medium"] = "medium";
-    DialogSize["Default"] = "default";
-    DialogSize["Large"] = "large";
-    DialogSize["FullHD"] = "fullhd";
-    DialogSize["Auto"] = "auto";
-})(DialogSize || (DialogSize = {}));
-export var DialogPosition;
-(function (DialogPosition) {
-    DialogPosition["Center"] = "center";
-    DialogPosition["CenterTop"] = "center-top";
-    DialogPosition["FullScreen"] = "full-screen";
-    DialogPosition["FullHeight"] = "full-height";
-})(DialogPosition || (DialogPosition = {}));
+export const DIALOG_SIZES = ['small', 'medium', 'default', 'large', 'fullhd', 'auto'];
 export class DialogSettings {
     closeOnClickOutside = $state(false);
     closeOnEsc = $state(false);
     nonCancelable = $state(false);
 }
 export class DialogContainerSettings {
-    size = $state(DialogSize.Default);
-    position = $state(DialogPosition.CenterTop);
+    size = $state('default');
+    position = $state('center-top');
 }

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -135,8 +135,10 @@ const initPopper = (node) => {
     {/if}
   </button>
   {#if opened}
-    <div use:initPopper class="dropdown__content" role="tooltip" tabindex="-1">
-      {@render children()}
+    <div use:initPopper class="dropdown__popper" role="tooltip" tabindex="-1">
+      <div class="dropdown__content">
+        {@render children()}
+      </div>
     </div>
   {/if}
 </div>
@@ -179,10 +181,25 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
   opacity: 0.5;
   pointer-events: none;
 }
+.dropdown__popper {
+  z-index: 999;
+}
 .dropdown__content {
   width: max-content;
-  z-index: 999;
+  transform-origin: top left;
+  animation: dropdown-appear 150ms cubic-bezier(0, 0, 0.2, 1) both;
 }
 .dropdown :global([data-popper-escaped]) {
   visibility: hidden !important;
+}
+
+@keyframes dropdown-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }</style>

package/dist/ui/form-group/cmp.form-group-label.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">let { withTooltip = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group-label" class:form-group-label--with-tooltip={withTooltip}>
+  {@render children()}
+</div>
+
+<style>.form-group-label {
+  --_form-group--label--font-size: var(--sc-kit--form-group--label--font-size, 0.875rem);
+  --_form-group--label--font-weight: var(--sc-kit--form-group--label--font-weight, 400);
+  --_form-group--label--color: var(--sc-kit--form-group--label--color);
+  --_form-group--label--margin-bottom: var(--sc-kit--form-group--label--margin-bottom, 0.5rem);
+  font-size: var(--_form-group--label--font-size);
+  padding: 0;
+  margin-bottom: var(--_form-group--label--margin-bottom);
+  font-weight: var(--_form-group--label--font-weight);
+  display: block;
+  color: var(--_form-group--label--color);
+}
+.form-group-label--with-tooltip {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}</style>

package/dist/ui/form-group/cmp.form-group-label.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    withTooltip?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group-note.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="form-group-note">
+  {@render children()}
+</div>
+
+<style>.form-group-note {
+  --_form-group--note--font-size: var(--sc-kit--form-group--note--font-size, 0.875rem);
+  --_form-group--note--font-weight: var(--sc-kit--form-group--note--font-weight, 300);
+  margin-top: 0.5rem;
+  color: #9ca3af;
+  font-size: var(--_form-group--note--font-size);
+  font-weight: var(--_form-group--note--font-weight);
+}</style>

package/dist/ui/form-group/cmp.form-group-note.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/cmp.form-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">let { noMargin = false, children } = $props();
+export {};
+</script>
+
+<div class="form-group" class:form-group--no-margin={noMargin}>
+  {@render children()}
+</div>
+
+<style>.form-group {
+  --_form-group--margin-bottom: var(--sc-kit--form-group--margin-bottom, 1.25rem);
+  display: block;
+  margin-bottom: var(--_form-group--margin-bottom);
+}
+.form-group--no-margin {
+  margin-bottom: 0;
+}</style>

package/dist/ui/form-group/cmp.form-group.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    noMargin?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/form-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/form-group/index.js

@@ -0,0 +1,3 @@
+export { default as FormGroup } from './cmp.form-group.svelte';
+export { default as FormGroupLabel } from './cmp.form-group-label.svelte';
+export { default as FormGroupNote } from './cmp.form-group-note.svelte';

package/dist/ui/html-block/cmp.html-block.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="html-block">
+  {@render children()}
+</div>
+
+<style>.html-block {
+  display: contents;
+  overflow-wrap: break-word;
+  font-size: 0.875em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h1) {
+  font-size: 1.5em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h2) {
+  font-size: 1.375em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h3) {
+  font-size: 1.25em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h4) {
+  font-size: 1.125em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h5) {
+  font-size: 1.0625em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h6) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(a) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+  color: light-dark(#144ab0, #5a8dec);
+}
+.html-block :global(pre) {
+  font-family: monospace;
+  white-space: pre-wrap;
+  margin: 1em 0;
+  font-size: 1em;
+  line-height: 1;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ul) :global(> li),
+.html-block :global(ol) :global(> li) {
+  list-style: inherit;
+  margin-left: 1em;
+  position: relative;
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ol) {
+  list-style-type: decimal;
+}
+.html-block :global(ol) :global(> li > ol) {
+  list-style-type: lower-alpha;
+}
+.html-block :global(table) {
+  max-width: 100%;
+}
+.html-block :global(table),
+.html-block :global(tbody),
+.html-block :global(thead),
+.html-block :global(tr),
+.html-block :global(th),
+.html-block :global(td) {
+  border-width: initial;
+  border-style: inherit;
+  border-color: inherit;
+}
+.html-block :global(ul:not([style*='list-style-type'])),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type'])) {
+  list-style-type: none;
+}
+.html-block :global(ul:not([style*='list-style-type']) > li:before),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type']) > li:before) {
+  content: "-";
+  text-indent: -1em;
+  position: absolute;
+  font-weight: bold;
+}
+.html-block :global(ul[style*='list-style-type'] > li:before),
+.html-block :global(ul > li > ul[style*='list-style-type'] > li:before) {
+  content: none;
+}</style>

package/dist/ui/html-block/cmp.html-block.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/html-block/index.d.ts

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/html-block/index.js

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';