@websline/system-components 1.3.3 → 1.3.5

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

@@ -45,15 +45,17 @@
 			store.update(localeValue);
 		}}
 		type="button">
-		<span class={stylesByVariant.span()}>
+		<div class={stylesByVariant.content()}>
 			{#if icon}
 				<Icon
 					class={stylesByVariant.icon()}
 					name={icon}
 					size={variant === "tabs" || size === "small" ? 16 : 24} />
 			{/if}
-			{@render children?.()}
-		</span>
+			<span class={stylesByVariant.span()}>
+				{@render children?.()}
+			</span>
+		</div>
 		{#if isActive}
 			<div
 				class={stylesByVariant.trigger({ appearance })}

package/dist/components/molecules/toggleGroup/toggleGroup.variants.d.ts

@@ -3,6 +3,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -19,6 +24,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -35,6 +45,11 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         raised: string;
     };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
     size: {
         small: {
             tabs: string;
@@ -48,26 +63,30 @@ export const toggleGroupVariants: import("tailwind-variants").TVReturnType<{
     tabs: string;
 }, undefined, unknown, unknown, undefined>>;
 export const toggleGroupTabVariants: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            tabs?: import("tailwind-variants").ClassValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-variants").ClassValue | {
-            base?: import("tailwind-variants").ClassValue;
-            tabs?: import("tailwind-variants").ClassValue;
+    disabled: {
+        true: {
+            base: string;
         };
     };
 }, {
     base: string;
     tabs: string;
-}, undefined, any, {
+}, undefined, {
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     tabs: string;
-}, import("tailwind-variants").TVReturnType<any, {
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
     base: string;
     tabs: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/molecules/toggleGroup/toggleGroup.variants.js

@@ -10,6 +10,11 @@ const toggleGroupVariants = tv({
 			default: "text-neutral-100 dark:text-neutral-900",
 			raised: "text-neutral-300 dark:text-neutral-700",
 		},
+		disabled: {
+			true: {
+				base: "opacity-40",
+			},
+		},
 		size: {
 			small: {
 				tabs: "h-9 p-1",
@@ -26,6 +31,13 @@ const toggleGroupTabVariants = tv({
 		base: "",
 		tabs: "flex h-9 gap-4 border-b border-neutral-300 dark:border-neutral-700",
 	},
+	variants: {
+		disabled: {
+			true: {
+				base: "opacity-40",
+			},
+		},
+	},
 });
 
 export { toggleGroupVariants, toggleGroupTabVariants };

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.d.ts

@@ -13,11 +13,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -36,11 +38,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -59,11 +63,13 @@ export const toggleGroupItemVariants: import("tailwind-variants").TVReturnType<{
         };
         medium: {
             button: string;
+            span: string;
         };
     };
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -80,6 +86,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -95,6 +102,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;
@@ -110,6 +118,7 @@ export const toggleGroupItemTabVariants: import("tailwind-variants").TVReturnTyp
 }, {
     base: string;
     button: string;
+    content: string;
     icon: string;
     span: string;
     trigger: string;

package/dist/components/molecules/toggleGroup/toggleGroupItem.variants.js

@@ -4,15 +4,16 @@ const toggleGroupItemVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap",
 		button:
-			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-button-small transition-[background,color]",
+			"block h-full w-full cursor-pointer rounded-sm bg-transparent ui-select-label font-medium transition-[background,color]",
+		content: "relative z-2 flex items-center justify-center",
 		icon: "shrink-0",
-		span: "relative z-2 flex items-center justify-center gap-2",
+		span: "",
 		trigger: "absolute inset-0 z-1 rounded-sm bg-white shadow-sm",
 	},
 	variants: {
 		isActive: {
 			true: {
-				button: "text-neutral-900 dark:text-white",
+				button: "text-neutral-900 dark:text-neutral-200",
 			},
 			false: {
 				button: "text-neutral-500",
@@ -23,7 +24,8 @@ const toggleGroupItemVariants = tv({
 				button: "px-1",
 			},
 			medium: {
-				button: "px-3",
+				button: "px-2.5",
+				span: "px-2",
 			},
 		},
 	},
@@ -51,8 +53,9 @@ const toggleGroupItemTabVariants = tv({
 	slots: {
 		base: "relative h-full w-full whitespace-nowrap text-neutral-900 dark:text-neutral-200",
 		button: "h-full w-full cursor-pointer ui-button-default transition-[color]",
+		content: "flex items-center justify-center gap-1",
 		icon: "shrink-0",
-		span: "flex items-center justify-center gap-1",
+		span: "",
 		trigger: "absolute -bottom-px left-0 h-0.5 w-full rounded-t-xs bg-current",
 	},
 	variants: {

package/dist/components/organisms/dialog/DialogContent.svelte

@@ -37,16 +37,15 @@
 		{/snippet}
 	</Dialog.Overlay>
 	<Dialog.Content
-		class={styles.container({ class: className })}
 		escapeKeydownBehavior={closeOnEscape ? "close" : "ignore"}
 		forceMount
 		interactOutsideBehavior={closeOnOutsideClick ? "close" : "ignore"}
 		{...rest}>
 		{#snippet child({ props, open })}
 			{#if open}
-				<div class={styles.positioner()}>
+				<div class={styles.positioner()} {...props}>
 					<section
-						{...props}
+						class={styles.container({ class: className })}
 						in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
 						{@render children?.()}
 					</section>

package/dist/components/organisms/modal/ModalContent.svelte

@@ -49,7 +49,6 @@
 		{/snippet}
 	</Dialog.Overlay>
 	<Dialog.Content
-		class={styles.container({ class: className })}
 		escapeKeydownBehavior={closeOnEscape ? "close" : "ignore"}
 		forceMount
 		interactOutsideBehavior={closeOnOutsideClick ? "close" : "ignore"}
@@ -57,9 +56,9 @@
 		{...rest}>
 		{#snippet child({ props, open })}
 			{#if open}
-				<div class={styles.positioner()} bind:this={ref}>
+				<div bind:this={ref} class={styles.positioner()} {...props}>
 					<section
-						{...props}
+						class={styles.container({ class: className })}
 						in:scale={{ duration: 300, easing: quintOut, start: 0.75 }}>
 						{@render children?.()}
 					</section>

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Radio } from "./components/atoms/radio/Radio.svelte";
 export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Tag } from "./components/atoms/tag/Tag.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 export * as ColorSwatch from "./components/molecules/pickers/colorSwatch/index.js";

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as Radio } from "./components/atoms/radio/Radio.svelte";
 export { default as Select } from "./components/atoms/select/Select.svelte";
 export { default as Spinner } from "./components/atoms/feedback/spinner/Spinner.svelte";
 export { default as Switch } from "./components/atoms/switch/Switch.svelte";
+export { default as Tag } from "./components/atoms/tag/Tag.svelte";
 export { default as Textarea } from "./components/atoms/textarea/Textarea.svelte";
 export { default as XScroll } from "./components/atoms/utils/xScroll/XScroll.svelte";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/system-components",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "publishConfig": {
     "access": "public"
   },
@@ -26,15 +26,15 @@
     }
   },
   "dependencies": {
-    "@tiptap/core": "^3.17.1",
-    "@tiptap/extension-color": "^3.17.1",
-    "@tiptap/extension-highlight": "^3.17.1",
-    "@tiptap/extension-placeholder": "^3.17.1",
-    "@tiptap/extension-text-align": "^3.17.1",
-    "@tiptap/extension-text-style": "^3.17.1",
-    "@tiptap/pm": "^3.17.1",
-    "@tiptap/starter-kit": "^3.17.1",
-    "bits-ui": "^2.15.4",
+    "@tiptap/core": "^3.19.0",
+    "@tiptap/extension-color": "^3.19.0",
+    "@tiptap/extension-highlight": "^3.19.0",
+    "@tiptap/extension-placeholder": "^3.19.0",
+    "@tiptap/extension-text-align": "^3.19.0",
+    "@tiptap/extension-text-style": "^3.19.0",
+    "@tiptap/pm": "^3.19.0",
+    "@tiptap/starter-kit": "^3.19.0",
+    "bits-ui": "^2.15.5",
     "dompurify": "^3.3.1",
     "tailwind-variants": "^3.2.2",
     "uuid": "^13.0.0"
@@ -43,34 +43,34 @@
     "svelte": "^5.38.7"
   },
   "devDependencies": {
-    "@eslint/compat": "^2.0.1",
+    "@eslint/compat": "^2.0.2",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-a11y": "^10.2.0",
-    "@storybook/addon-docs": "^10.2.0",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
     "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/sveltekit": "^10.2.0",
+    "@storybook/sveltekit": "^10.2.8",
     "@sveltejs/adapter-auto": "^7.0.0",
-    "@sveltejs/kit": "^2.50.1",
+    "@sveltejs/kit": "^2.50.2",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.0.10",
+    "@types/node": "^25.2.2",
     "@vitest/browser": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.2.0",
+    "eslint-plugin-storybook": "^10.2.8",
     "eslint-plugin-svelte": "^3.14.0",
-    "globals": "^17.2.0",
-    "playwright": "^1.58.0",
+    "globals": "^17.3.0",
+    "playwright": "^1.58.2",
     "postcss-url": "^10.1.3",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "publint": "^0.3.17",
-    "storybook": "^10.2.0",
-    "svelte": "^5.48.5",
+    "storybook": "^10.2.8",
+    "svelte": "^5.50.1",
     "tailwindcss": "^4.1.18",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",