@websline/system-components 1.3.3 → 1.3.5

package/dist/components/molecules/richTextEditor/RichTextEditor.svelte.d.ts

@@ -1,143 +1,23 @@
 export default RichTextEditor;
-type RichTextEditor = SvelteComponent<{
-    content?: string;
-    size?: string;
-    placeholder?: string;
-    toolbarConfig?: {
-        bold: {
-            enabled: boolean;
-        };
-        history: {
-            enabled: boolean;
-        };
-        italic: {
-            enabled: boolean;
-        };
-        link: {
-            enabled: boolean;
-        };
-        list: {
-            enabled: boolean;
-        };
-        listOrdered: {
-            enabled: boolean;
-        };
-        underline: {
-            enabled: boolean;
-        };
-        color: {
-            enabled: boolean;
-            colors: string[];
-            defaultColor: string;
-        };
-    };
-    hideToolbar?: boolean;
-    classes?: Props;
-    fieldName?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
+type RichTextEditor = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-declare const RichTextEditor: $$__sveltets_2_IsomorphicComponent<{
+declare const RichTextEditor: import("svelte").Component<{
+    classes?: Record<string, any>;
     content?: string;
-    size?: string;
-    placeholder?: string;
-    toolbarConfig?: {
-        bold: {
-            enabled: boolean;
-        };
-        history: {
-            enabled: boolean;
-        };
-        italic: {
-            enabled: boolean;
-        };
-        link: {
-            enabled: boolean;
-        };
-        list: {
-            enabled: boolean;
-        };
-        listOrdered: {
-            enabled: boolean;
-        };
-        underline: {
-            enabled: boolean;
-        };
-        color: {
-            enabled: boolean;
-            colors: string[];
-            defaultColor: string;
-        };
-    };
-    hideToolbar?: boolean;
-    classes?: {
-        /**
-         * CSS class overrides for editor parts
-         */
-        classes?: any;
-        /**
-         * The initial content of the editor
-         */
-        content?: string;
-        /**
-         * The name of the field for form submissions
-         */
-        fieldName?: string;
-        /**
-         * Whether to hide the toolbar
-         */
-        hideToolbar?: boolean;
-        /**
-         * RichTextEditor size
-         */
-        size?: "small" | "medium" | "large";
-        /**
-         * Placeholder text for the editor
-         */
-        placeholder?: string;
-    };
     fieldName?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Props = {
-    /**
-     * CSS class overrides for editor parts
-     */
-    classes?: any;
-    /**
-     * The initial content of the editor
-     */
+    hideToolbar?: boolean;
+    placeholder?: string;
+    size?: string;
+    toolbarConfig?: Record<string, any>;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    classes?: Record<string, any>;
     content?: string;
-    /**
-     * The name of the field for form submissions
-     */
     fieldName?: string;
-    /**
-     * Whether to hide the toolbar
-     */
     hideToolbar?: boolean;
-    /**
-     * RichTextEditor size
-     */
-    size?: "small" | "medium" | "large";
-    /**
-     * Placeholder text for the editor
-     */
     placeholder?: string;
-};
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+    size?: string;
+    toolbarConfig?: Record<string, any>;
+} & Record<string, any>;

package/dist/components/molecules/richTextEditor/toolbar/RichTextEditorToolbar.svelte

@@ -9,41 +9,40 @@
 	import ToolbarRedo from "./ToolbarRedo.svelte";
 	import ToolbarColor from "./ToolbarColor.svelte";
 
-	let { editor, toolbarConfig } = $props();
+	let { toolbarConfig } = $props();
 </script>
 
 {#if toolbarConfig && toolbarConfig.bold && toolbarConfig.bold.enabled}
-	<ToolbarBold {editor} />
+	<ToolbarBold />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.italic && toolbarConfig.italic.enabled}
-	<ToolbarItalic {editor} />
+	<ToolbarItalic />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.underline && toolbarConfig.underline.enabled}
-	<ToolbarUnderline {editor} />
+	<ToolbarUnderline />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.link && toolbarConfig.link.enabled}
-	<ToolbarLink {editor} onOpenLink={toolbarConfig.link.onOpenLink} />
+	<ToolbarLink onOpenLink={toolbarConfig.link.onOpenLink} />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.color && toolbarConfig.color.enabled && toolbarConfig.color.colors.length > 0}
 	<ToolbarColor
 		colors={toolbarConfig.color.colors}
-		defaultColor={toolbarConfig.color.defaultColor}
-		{editor} />
+		defaultColor={toolbarConfig.color.defaultColor} />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.list && toolbarConfig.list.enabled}
-	<ToolbarList {editor} />
+	<ToolbarList />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.listOrdered && toolbarConfig.listOrdered.enabled}
-	<ToolbarListOrdered {editor} />
+	<ToolbarListOrdered />
 {/if}
 
 {#if toolbarConfig && toolbarConfig.history && toolbarConfig.history.enabled}
-	<ToolbarUndo {editor} />
-	<ToolbarRedo {editor} />
+	<ToolbarUndo />
+	<ToolbarRedo />
 {/if}

package/dist/components/molecules/richTextEditor/toolbar/RichTextEditorToolbar.svelte.d.ts

@@ -4,10 +4,8 @@ type RichTextEditorToolbar = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const RichTextEditorToolbar: import("svelte").Component<{
-    editor: any;
     toolbarConfig: any;
 }, {}, "">;
 type $$ComponentProps = {
-    editor: any;
     toolbarConfig: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("bold")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("bold") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="bold"
 		onclick={() => editor.chain().focus().toggleBold().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarBold.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarBold;
 type ToolbarBold = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarBold: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarBold: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte

@@ -1,9 +1,11 @@
 <script>
+	import { getContext } from "svelte";
 	import { ColorSwatch } from "../../../../index.js";
 
-	let { colors = [], defaultColor = "#121110", editor } = $props();
+	let { colors = [], defaultColor = "#121110" } = $props();
 
 	let isOpen = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
 	let selectedColor = $derived(defaultColor);
 
 	const handleColorSelect = (color) => {
@@ -15,9 +17,10 @@
 
 	$effect(() => {
 		if (!editor) return;
-
-		const attrs = editor.getAttributes("textStyle");
-		selectedColor = attrs.color || defaultColor;
+		return editor.on("transaction", () => {
+			const attrs = editor.getAttributes("textStyle");
+			selectedColor = attrs.color || defaultColor;
+		});
 	});
 </script>
 

package/dist/components/molecules/richTextEditor/toolbar/ToolbarColor.svelte.d.ts

@@ -6,10 +6,8 @@ type ToolbarColor = {
 declare const ToolbarColor: import("svelte").Component<{
     colors?: any[];
     defaultColor?: string;
-    editor: any;
 }, {}, "">;
 type $$ComponentProps = {
     colors?: any[];
     defaultColor?: string;
-    editor: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("italic")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("italic") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="italic"
 		onclick={() => editor.chain().focus().toggleItalic().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarItalic.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarItalic;
 type ToolbarItalic = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarItalic: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarItalic: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte

@@ -1,7 +1,16 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor, onOpenLink } = $props();
+	let { onOpenLink } = $props();
+
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("link")));
+	});
 
 	const setLink = () => {
 		const focus = () => editor.chain().focus();
@@ -27,7 +36,7 @@
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("link") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="link"
 		onclick={handleOpenLinkModal}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarLink.svelte.d.ts

@@ -4,10 +4,8 @@ type ToolbarLink = {
     $set?(props: Partial<$$ComponentProps>): void;
 };
 declare const ToolbarLink: import("svelte").Component<{
-    editor: any;
     onOpenLink: any;
 }, {}, "">;
 type $$ComponentProps = {
-    editor: any;
     onOpenLink: any;
 };

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("bulletList")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("bulletList") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="listUnordered"
 		onclick={() => editor.chain().focus().toggleBulletList().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarList.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarList;
 type ToolbarList = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarList: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarList: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("orderedList")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("orderedList") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="listOrdered"
 		onclick={() => editor.chain().focus().toggleOrderedList().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarListOrdered.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarListOrdered;
 type ToolbarListOrdered = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarListOrdered: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarListOrdered: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte

@@ -1,7 +1,8 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let editor = $derived(getContext("richt-text-editor")());
 </script>
 
 {#if editor}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarRedo.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarRedo;
 type ToolbarRedo = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarRedo: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarRedo: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte

@@ -1,12 +1,19 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let active = $state(false);
+	let editor = $derived(getContext("richt-text-editor")());
+
+	$effect(() => {
+		if (!editor) return;
+		return editor.on("transaction", () => (active = editor.isActive("underline")));
+	});
 </script>
 
 {#if editor}
 	<IconButton
-		color={editor.isActive("underline") ? "default" : "transparent"}
+		color={active ? "default" : "transparent"}
 		icon="underline"
 		onclick={() => editor.chain().focus().toggleUnderline().run()}
 		shape="square" />

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUnderline.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarUnderline;
 type ToolbarUnderline = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarUnderline: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarUnderline: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte

@@ -1,7 +1,8 @@
 <script>
+	import { getContext } from "svelte";
 	import { IconButton } from "../../../../index.js";
 
-	let { editor } = $props();
+	let editor = $derived(getContext("richt-text-editor")());
 </script>
 
 {#if editor}

package/dist/components/molecules/richTextEditor/toolbar/ToolbarUndo.svelte.d.ts

@@ -1,11 +1,6 @@
 export default ToolbarUndo;
 type ToolbarUndo = {
     $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const ToolbarUndo: import("svelte").Component<{
-    editor: any;
-}, {}, "">;
-type $$ComponentProps = {
-    editor: any;
+    $set?(props: Partial<Record<string, never>>): void;
 };
+declare const ToolbarUndo: import("svelte").Component<Record<string, never>, {}, "">;

package/dist/components/molecules/selectorCard/SelectorCard.svelte

@@ -31,7 +31,7 @@
 		name,
 		required = false,
 		type = "radio",
-		value = "",
+		value = "on",
 		...rest
 	} = $props();
 

package/dist/components/molecules/tagSelector/ValueList.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { Chip } from "../../../index.js";
+	import { Tag } from "../../../index.js";
 	import { tagSelectorVariants } from "./tagSelector.variants.js";
 
 	let {
@@ -21,17 +21,13 @@
 <div class={styles.valueList()}>
 	{#each value as s (s)}
 		{@const opt = options.find((i) => i.id === s)}
-		<Chip
-			class={styles.item()}
-			clickable
-			icon="closeSmall"
-			onclick={() => onRemoveItem(s)}>
+		<Tag class={styles.item()} icon="closeSmall" onclick={() => onRemoveItem(s)}>
 			{opt?.label ?? s}
-		</Chip>
+		</Tag>
 	{/each}
 
 	{#if !localValues.disabled}
-		<Chip class={styles.searchField()} icon="add" variant="outline">
+		<Tag class={styles.searchField()} icon="add" variant="outline">
 			<input
 				bind:this={inputRef}
 				bind:value={query}
@@ -47,6 +43,6 @@
 					: {}}
 				{placeholder}
 				role="searchbox" />
-		</Chip>
+		</Tag>
 	{/if}
 </div>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte

@@ -13,6 +13,8 @@
 	 * @property {"default" | "raised"} [appearance="default"] The appearance variant of the component
 	 * @property {import('svelte').Snippet} [children] Children content – can be text, HTML, or other Svelte components
 	 * @property {string} [class=""] Additional CSS classes to apply to the component
+	 * @property {boolean} [disabled=false] Whether the toggle group is disabled
+	 * @property {string} [name] The name of the toggle group, used for form submission
 	 * @property {"small" | "medium"} [size="medium"] The size variant of the component
 	 * @property {string} [value=""] The value of the toggle group
 	 * @property {"default" | "tabs"} [variant="default"] The variant of the toggle group
@@ -28,6 +30,8 @@
 		appearance = "default",
 		children,
 		class: className = "",
+		disabled = false,
+		name,
 		size = "medium",
 		value = $bindable(),
 		variant = "default",
@@ -50,17 +54,31 @@
 		};
 	});
 
+	let inputProps = $derived({
+		disabled,
+		name,
+		value,
+	});
+
 	let styles = $derived.by(() => {
 		if (variant === "tabs") {
-			return toggleGroupTabVariants();
+			return toggleGroupTabVariants({ disabled });
 		}
 
-		return toggleGroupVariants({ appearance, size, variant });
+		return toggleGroupVariants({ appearance, disabled, size, variant });
 	});
 </script>
 
 <XScroll class={styles.base({ class: className })}>
-	<div bind:this={toggleGroupEl} class={styles.tabs()} role="tablist" {...rest}>
+	<div
+		bind:this={toggleGroupEl}
+		class={styles.tabs()}
+		inert={disabled}
+		role="tablist"
+		{...rest}>
+		{#if name}
+			<input type="hidden" {...inputProps} />
+		{/if}
 		{@render children?.()}
 	</div>
 </XScroll>

package/dist/components/molecules/toggleGroup/ToggleGroup.svelte.d.ts

@@ -16,6 +16,14 @@ declare const ToggleGroup: import("svelte").Component<{
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * Whether the toggle group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The name of the toggle group, used for form submission
+     */
+    name?: string;
     /**
      * The size variant of the component
      */
@@ -42,6 +50,14 @@ type Props = {
      * Additional CSS classes to apply to the component
      */
     class?: string;
+    /**
+     * Whether the toggle group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * The name of the toggle group, used for form submission
+     */
+    name?: string;
     /**
      * The size variant of the component
      */