@vitus-labs/elements 1.4.2 → 1.4.3-alpha.1

package/lib/index.d.ts

@@ -270,195 +270,18 @@ type Props = Partial<{
    */
   css: ExtendCss;
   /**
-   * An additional prop for extending styling of the **content** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **content** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   contentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **beforeContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **beforeContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   beforeContentCss: ExtendCss;
   /**
-   * An additional prop for extending styling of the **afterContent** wrapper element
-   *
-   * #### [A] Template literals
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [B] String
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css="text-color: red;"
-   *  />
-   * )
-   * ```
-   *
-   * #### [C] Css Function
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * import { css } from 'styled-components'
-   *
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
-   *
-   * #### [D] Css Callback
-   *
-   * (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals)
-   *
-   * ```jsx
-   * export default () => (
-   *  <Element
-   *    label="This is an element"
-   *    css={css => css`
-   *      text-color: red;
-   *    `}
-   *  />
-   * )
-   * ```
+   * An additional prop for extending styling of the **afterContent** wrapper element.
+   * Accepts the same formats as `css` — template literal, string, css function, or callback.
    */
   afterContentCss: ExtendCss;
 }>;

package/lib/index.js

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -12,104 +12,6 @@ const PKG_NAME = "@vitus-labs/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
-//#endregion
-//#region src/helpers/Content/styled.ts
-/**
-* Styled component for content areas (before/content/after). Applies
-* responsive flex alignment, gap spacing between slots based on parent
-* direction (margin-right for inline, margin-bottom for rows), and
-* equalCols flex distribution. The "content" slot gets `flex: 1` to
-* fill remaining space between before and after.
-*/
-const { styled: styled$2, css: css$2, component: component$2 } = config;
-const equalColsCSS = `
-  flex: 1;
-`;
-const typeContentCSS = `
-  flex: 1;
-`;
-const gapDimensions = {
-	inline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	reverseInline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	rows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	},
-	reverseRows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	}
-};
-const calculateGap = ({ direction, type, value }) => {
-	if (!direction || !type || type === "content") return void 0;
-	return `${gapDimensions[direction][type]}: ${value};`;
-};
-const styles$2 = ({ css, theme: t, rootSize }) => css`
-  ${alignContent({
-	direction: t.direction,
-	alignX: t.alignX,
-	alignY: t.alignY
-})};
-
-  ${t.equalCols && equalColsCSS};
-
-  ${t.gap && t.contentType && calculateGap({
-	direction: t.parentDirection,
-	type: t.contentType,
-	value: value(t.gap, rootSize)
-})};
-
-  ${t.extraStyles && extendCss(t.extraStyles)};
-`;
-const StyledComponent = styled$2(component$2)`
-  ${`box-sizing: border-box;`};
-
-  display: flex;
-  align-self: stretch;
-  flex-wrap: wrap;
-
-  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
-
-  ${makeItResponsive({
-	key: "$element",
-	styles: styles$2,
-	css: css$2,
-	normalize: true
-})};
-`;
-
-//#endregion
-//#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
-	return /* @__PURE__ */ jsx(StyledComponent, {
-		as: tag,
-		$contentType: contentType,
-		$element: {
-			contentType,
-			parentDirection,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			gap,
-			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
-	});
-};
-var component_default = memo(Component$9);
-
-//#endregion
-//#region src/helpers/Content/index.ts
-var Content_default = component_default;
-
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
 /**
@@ -208,36 +110,52 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 		ref,
 		as: tag
 	};
-	if (!(!props.dangerouslySetInnerHTML && isWebFixNeeded(tag)) || false) return /* @__PURE__ */ jsx(styled_default$1, {
+	const needsFix = !props.dangerouslySetInnerHTML && isWebFixNeeded(tag);
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extendCss
+	]);
+	const parentFixElement = useMemo(() => ({
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	}), [block, extendCss]);
+	const childFixElement = useMemo(() => ({
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	}), [
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	]);
+	if (!needsFix || false) return /* @__PURE__ */ jsx(styled_default$1, {
 		...COMMON_PROPS,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		$element: normalElement,
 		children
 	});
 	const asTag = isInline ? "span" : "div";
 	return /* @__PURE__ */ jsx(styled_default$1, {
 		...COMMON_PROPS,
-		$element: {
-			parentFix: true,
-			block,
-			extraStyles: extendCss
-		},
+		$element: parentFixElement,
 		children: /* @__PURE__ */ jsx(styled_default$1, {
 			as: asTag,
 			$childFix: true,
-			$element: {
-				childFix: true,
-				direction,
-				alignX,
-				alignY,
-				equalCols
-			},
+			$element: childFixElement,
 			children
 		})
 	});
@@ -247,6 +165,73 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 //#region src/helpers/Wrapper/index.ts
 var Wrapper_default = Component$8;
 
+//#endregion
+//#region src/Element/slotStyles.ts
+/**
+* Slot styling logic extracted from Content/styled.ts for use with the
+* useCSS hook. Handles responsive flex alignment, gap spacing, equalCols,
+* and extendCss injection for before/content/after slots.
+*/
+const gapDimensions = {
+	inline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	reverseInline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	rows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	},
+	reverseRows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	}
+};
+const calculateGap = ({ direction, type, value: v }) => {
+	if (!direction || !type || type === "content") return void 0;
+	return `${gapDimensions[direction][type]}: ${v};`;
+};
+const slotStyles = ({ css, theme: t, rootSize }) => css`
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.equalCols && "flex: 1;"};
+
+  ${t.gap && t.contentType && calculateGap({
+	direction: t.parentDirection,
+	type: t.contentType,
+	value: value(t.gap, rootSize)
+})};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+let _template = null;
+const getSlotTemplate = () => {
+	if (!_template) {
+		const { css } = config;
+		_template = css`
+      ${"box-sizing: border-box;"};
+      display: flex;
+      align-self: stretch;
+      flex-wrap: wrap;
+      ${({ $contentType }) => $contentType === "content" && "flex: 1;"};
+      ${makeItResponsive({
+			key: "$element",
+			styles: slotStyles,
+			css,
+			normalize: true
+		})};
+    `;
+	}
+	return _template;
+};
+
 //#endregion
 //#region src/Element/constants.ts
 /**
@@ -331,7 +316,11 @@ const getShouldBeEmpty = (tag) => {
 * to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
+*
+* Slot elements (before/content/after) use `useCSS` for direct className
+* injection — no styled component wrapper overhead per slot.
 */
+const { useCSS } = config;
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
@@ -341,7 +330,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = isInlineElement(tag);
-	const SUB_TAG = isInline ? "span" : void 0;
+	const SUB_TAG = isInline ? "span" : "div";
 	const { wrapperDirection, wrapperAlignX, wrapperAlignY } = useMemo(() => {
 		let wrapperDirection = direction;
 		let wrapperAlignX = alignX;
@@ -366,6 +355,45 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
+	const slotTemplate = getSlotTemplate();
+	const beforeClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "before",
+			parentDirection: wrapperDirection,
+			direction: beforeContentDirection,
+			alignX: beforeContentAlignX,
+			alignY: beforeContentAlignY,
+			equalCols,
+			gap,
+			extraStyles: beforeContentCss
+		},
+		$contentType: "before"
+	});
+	const contentClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "content",
+			parentDirection: wrapperDirection,
+			direction: contentDirection,
+			alignX: contentAlignX,
+			alignY: contentAlignY,
+			equalCols,
+			extraStyles: contentCss
+		},
+		$contentType: "content"
+	});
+	const afterClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "after",
+			parentDirection: wrapperDirection,
+			direction: afterContentDirection,
+			alignX: afterContentAlignX,
+			alignY: afterContentAlignY,
+			equalCols,
+			gap,
+			extraStyles: afterContentCss
+		},
+		$contentType: "after"
+	});
 	const WRAPPER_PROPS = {
 		ref: ref ?? innerRef,
 		extendCss: css,
@@ -386,41 +414,18 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		...WRAPPER_PROPS,
 		isInline,
 		children: [
-			beforeContent && /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "before",
-				parentDirection: wrapperDirection,
-				extendCss: beforeContentCss,
-				direction: beforeContentDirection,
-				alignX: beforeContentAlignX,
-				alignY: beforeContentAlignY,
-				equalCols,
-				gap,
-				children: render(beforeContent)
-			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "content",
-				parentDirection: wrapperDirection,
-				extendCss: contentCss,
-				direction: contentDirection,
-				alignX: contentAlignX,
-				alignY: contentAlignY,
-				equalCols,
-				children: contentRenderOutput
-			}),
-			afterContent && /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "after",
-				parentDirection: wrapperDirection,
-				extendCss: afterContentCss,
-				direction: afterContentDirection,
-				alignX: afterContentAlignX,
-				alignY: afterContentAlignY,
-				equalCols,
-				gap,
-				children: render(afterContent)
-			})
+			beforeContent && createElement(SUB_TAG, {
+				className: beforeClass,
+				"data-vl-slot": "before"
+			}, render(beforeContent)),
+			isSimpleElement ? contentRenderOutput : createElement(SUB_TAG, {
+				className: contentClass,
+				"data-vl-slot": "content"
+			}, contentRenderOutput),
+			afterContent && createElement(SUB_TAG, {
+				className: afterClass,
+				"data-vl-slot": "after"
+			}, render(afterContent))
 		]
 	});
 });
@@ -464,7 +469,12 @@ const withEqualBeforeAfter = (WrappedComponent) => {
 			const beforeEl = el.firstElementChild;
 			const afterEl = el.lastElementChild;
 			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
+		}, [
+			equalBeforeAfter,
+			beforeContent,
+			afterContent,
+			direction
+		]);
 		return /* @__PURE__ */ jsx(WrappedComponent, {
 			...rest,
 			afterContent,
@@ -633,12 +643,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx

package/lib/vitus-labs-elements.native.js

@@ -1,6 +1,6 @@
 import { Provider, alignContent, extendCss, makeItResponsive, value } from "@vitus-labs/unistyle";
 import { config, context, isEmpty, omit, pick, render, throttle } from "@vitus-labs/core";
-import { Children, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, createContext, createElement, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { isFragment } from "react-is";
 import { createPortal } from "react-dom";
@@ -12,104 +12,6 @@ const PKG_NAME = "@vitus-labs/elements";
 //#region src/utils.ts
 const IS_DEVELOPMENT = process.env.NODE_ENV !== "production";
 
-//#endregion
-//#region src/helpers/Content/styled.ts
-/**
-* Styled component for content areas (before/content/after). Applies
-* responsive flex alignment, gap spacing between slots based on parent
-* direction (margin-right for inline, margin-bottom for rows), and
-* equalCols flex distribution. The "content" slot gets `flex: 1` to
-* fill remaining space between before and after.
-*/
-const { styled: styled$2, css: css$2, component: component$2 } = config;
-const equalColsCSS = `
-  flex: 1;
-`;
-const typeContentCSS = `
-  flex: 1;
-`;
-const gapDimensions = {
-	inline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	reverseInline: {
-		before: "margin-right",
-		after: "margin-left"
-	},
-	rows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	},
-	reverseRows: {
-		before: "margin-bottom",
-		after: "margin-top"
-	}
-};
-const calculateGap = ({ direction, type, value }) => {
-	if (!direction || !type || type === "content") return void 0;
-	return `${gapDimensions[direction][type]}: ${value};`;
-};
-const styles$2 = ({ css, theme: t, rootSize }) => css`
-  ${alignContent({
-	direction: t.direction,
-	alignX: t.alignX,
-	alignY: t.alignY
-})};
-
-  ${t.equalCols && equalColsCSS};
-
-  ${t.gap && t.contentType && calculateGap({
-	direction: t.parentDirection,
-	type: t.contentType,
-	value: value(t.gap, rootSize)
-})};
-
-  ${t.extraStyles && extendCss(t.extraStyles)};
-`;
-const StyledComponent = styled$2(component$2)`
-  ${""};
-
-  display: flex;
-  align-self: stretch;
-  flex-wrap: wrap;
-
-  ${({ $contentType }) => $contentType === "content" && typeContentCSS};
-
-  ${makeItResponsive({
-	key: "$element",
-	styles: styles$2,
-	css: css$2,
-	normalize: true
-})};
-`;
-
-//#endregion
-//#region src/helpers/Content/component.tsx
-const Component$9 = ({ contentType, tag, parentDirection, direction, alignX, alignY, equalCols, gap, extendCss, ...props }) => {
-	return /* @__PURE__ */ jsx(StyledComponent, {
-		as: tag,
-		$contentType: contentType,
-		$element: {
-			contentType,
-			parentDirection,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			gap,
-			extraStyles: extendCss
-		},
-		...IS_DEVELOPMENT ? { "data-vl-element": contentType } : {},
-		...props
-	});
-};
-var component_default = memo(Component$9);
-
-//#endregion
-//#region src/helpers/Content/index.ts
-var Content_default = component_default;
-
 //#endregion
 //#region src/helpers/Wrapper/styled.ts
 /**
@@ -172,19 +74,47 @@ var styled_default$1 = styled$1(component$1)`
 */
 const DEV_PROPS = IS_DEVELOPMENT ? { "data-vl-element": "Element" } : {};
 const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, alignX, alignY, equalCols, isInline, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(styled_default$1, {
+	const COMMON_PROPS = {
 		...props,
 		...DEV_PROPS,
 		ref,
-		as: tag,
-		$element: {
-			block,
-			direction,
-			alignX,
-			alignY,
-			equalCols,
-			extraStyles: extendCss
-		},
+		as: tag
+	};
+	const normalElement = useMemo(() => ({
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extraStyles: extendCss
+	}), [
+		block,
+		direction,
+		alignX,
+		alignY,
+		equalCols,
+		extendCss
+	]);
+	useMemo(() => ({
+		parentFix: true,
+		block,
+		extraStyles: extendCss
+	}), [block, extendCss]);
+	useMemo(() => ({
+		childFix: true,
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	}), [
+		direction,
+		alignX,
+		alignY,
+		equalCols
+	]);
+	return /* @__PURE__ */ jsx(styled_default$1, {
+		...COMMON_PROPS,
+		$element: normalElement,
 		children
 	});
 });
@@ -193,6 +123,73 @@ const Component$8 = forwardRef(({ children, tag, block, extendCss, direction, al
 //#region src/helpers/Wrapper/index.ts
 var Wrapper_default = Component$8;
 
+//#endregion
+//#region src/Element/slotStyles.ts
+/**
+* Slot styling logic extracted from Content/styled.ts for use with the
+* useCSS hook. Handles responsive flex alignment, gap spacing, equalCols,
+* and extendCss injection for before/content/after slots.
+*/
+const gapDimensions = {
+	inline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	reverseInline: {
+		before: "margin-right",
+		after: "margin-left"
+	},
+	rows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	},
+	reverseRows: {
+		before: "margin-bottom",
+		after: "margin-top"
+	}
+};
+const calculateGap = ({ direction, type, value: v }) => {
+	if (!direction || !type || type === "content") return void 0;
+	return `${gapDimensions[direction][type]}: ${v};`;
+};
+const slotStyles = ({ css, theme: t, rootSize }) => css`
+  ${alignContent({
+	direction: t.direction,
+	alignX: t.alignX,
+	alignY: t.alignY
+})};
+
+  ${t.equalCols && "flex: 1;"};
+
+  ${t.gap && t.contentType && calculateGap({
+	direction: t.parentDirection,
+	type: t.contentType,
+	value: value(t.gap, rootSize)
+})};
+
+  ${t.extraStyles && extendCss(t.extraStyles)};
+`;
+let _template = null;
+const getSlotTemplate = () => {
+	if (!_template) {
+		const { css } = config;
+		_template = css`
+      ${""};
+      display: flex;
+      align-self: stretch;
+      flex-wrap: wrap;
+      ${({ $contentType }) => $contentType === "content" && "flex: 1;"};
+      ${makeItResponsive({
+			key: "$element",
+			styles: slotStyles,
+			css,
+			normalize: true
+		})};
+    `;
+	}
+	return _template;
+};
+
 //#endregion
 //#region src/Element/component.tsx
 /**
@@ -202,7 +199,11 @@ var Wrapper_default = Component$8;
 * to avoid an unnecessary nesting layer. Handles HTML-specific edge cases
 * like void elements (input, img) and inline elements (span, a) by
 * skipping children or switching sub-tags accordingly.
+*
+* Slot elements (before/content/after) use `useCSS` for direct className
+* injection — no styled component wrapper overhead per slot.
 */
+const { useCSS } = config;
 const defaultDirection = "inline";
 const defaultContentDirection = "rows";
 const defaultAlignX = "left";
@@ -211,7 +212,7 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 	const isSimpleElement = !beforeContent && !afterContent;
 	const CHILDREN = children ?? content ?? label;
 	const isInline = false;
-	const SUB_TAG = void 0;
+	const SUB_TAG = "div";
 	const { wrapperDirection, wrapperAlignX, wrapperAlignY } = useMemo(() => {
 		let wrapperDirection = direction;
 		let wrapperAlignX = alignX;
@@ -236,6 +237,45 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		alignY,
 		direction
 	]);
+	const slotTemplate = getSlotTemplate();
+	const beforeClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "before",
+			parentDirection: wrapperDirection,
+			direction: beforeContentDirection,
+			alignX: beforeContentAlignX,
+			alignY: beforeContentAlignY,
+			equalCols,
+			gap,
+			extraStyles: beforeContentCss
+		},
+		$contentType: "before"
+	});
+	const contentClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "content",
+			parentDirection: wrapperDirection,
+			direction: contentDirection,
+			alignX: contentAlignX,
+			alignY: contentAlignY,
+			equalCols,
+			extraStyles: contentCss
+		},
+		$contentType: "content"
+	});
+	const afterClass = useCSS(slotTemplate, {
+		$element: {
+			contentType: "after",
+			parentDirection: wrapperDirection,
+			direction: afterContentDirection,
+			alignX: afterContentAlignX,
+			alignY: afterContentAlignY,
+			equalCols,
+			gap,
+			extraStyles: afterContentCss
+		},
+		$contentType: "after"
+	});
 	const WRAPPER_PROPS = {
 		ref: ref ?? innerRef,
 		extendCss: css,
@@ -252,41 +292,18 @@ const Component$7 = forwardRef(({ innerRef, tag, label, content, children, befor
 		...WRAPPER_PROPS,
 		isInline,
 		children: [
-			beforeContent && /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "before",
-				parentDirection: wrapperDirection,
-				extendCss: beforeContentCss,
-				direction: beforeContentDirection,
-				alignX: beforeContentAlignX,
-				alignY: beforeContentAlignY,
-				equalCols,
-				gap,
-				children: render(beforeContent)
-			}),
-			isSimpleElement ? contentRenderOutput : /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "content",
-				parentDirection: wrapperDirection,
-				extendCss: contentCss,
-				direction: contentDirection,
-				alignX: contentAlignX,
-				alignY: contentAlignY,
-				equalCols,
-				children: contentRenderOutput
-			}),
-			afterContent && /* @__PURE__ */ jsx(Content_default, {
-				tag: SUB_TAG,
-				contentType: "after",
-				parentDirection: wrapperDirection,
-				extendCss: afterContentCss,
-				direction: afterContentDirection,
-				alignX: afterContentAlignX,
-				alignY: afterContentAlignY,
-				equalCols,
-				gap,
-				children: render(afterContent)
-			})
+			beforeContent && createElement(SUB_TAG, {
+				className: beforeClass,
+				"data-vl-slot": "before"
+			}, render(beforeContent)),
+			isSimpleElement ? contentRenderOutput : createElement(SUB_TAG, {
+				className: contentClass,
+				"data-vl-slot": "content"
+			}, contentRenderOutput),
+			afterContent && createElement(SUB_TAG, {
+				className: afterClass,
+				"data-vl-slot": "after"
+			}, render(afterContent))
 		]
 	});
 });
@@ -330,7 +347,12 @@ const withEqualBeforeAfter = (WrappedComponent) => {
 			const beforeEl = el.firstElementChild;
 			const afterEl = el.lastElementChild;
 			if (beforeEl && afterEl && beforeEl !== afterEl) equalize(beforeEl, afterEl, direction === "rows" ? "height" : "width");
-		});
+		}, [
+			equalBeforeAfter,
+			beforeContent,
+			afterContent,
+			direction
+		]);
 		return /* @__PURE__ */ jsx(WrappedComponent, {
 			...rest,
 			afterContent,
@@ -499,12 +521,14 @@ const Component$6 = (props) => {
 	};
 	return renderItems();
 };
-Component$6.isIterator = true;
-Component$6.RESERVED_PROPS = RESERVED_PROPS;
+var component_default = Object.assign(memo(Component$6), {
+	isIterator: true,
+	RESERVED_PROPS
+});
 
 //#endregion
 //#region src/helpers/Iterator/index.ts
-var Iterator_default = Component$6;
+var Iterator_default = component_default;
 
 //#endregion
 //#region src/List/component.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitus-labs/elements",
-  "version": "1.4.2",
+  "version": "1.4.3-alpha.1+cf4e0a6",
   "license": "MIT",
   "author": "Vit Bokisch <vit@bokisch.cz>",
   "maintainers": [
@@ -9,6 +9,7 @@
   "type": "module",
   "sideEffects": false,
   "exports": {
+    "source": "./src/index.ts",
     "import": "./lib/index.js",
     "types": "./lib/index.d.ts"
   },
@@ -57,19 +58,18 @@
     "@vitus-labs/core": "^1.4.0",
     "@vitus-labs/unistyle": "^1.4.0",
     "react": ">= 19",
-    "react-dom": ">= 19",
-    "styled-components": ">= 6"
+    "react-dom": ">= 19"
   },
   "devDependencies": {
-    "@vitus-labs/core": "1.4.2",
-    "@vitus-labs/rocketstyle": "1.4.2",
+    "@vitus-labs/core": "1.4.3-alpha.1+cf4e0a6",
+    "@vitus-labs/rocketstyle": "1.4.3-alpha.1+cf4e0a6",
     "@vitus-labs/tools-rolldown": "^1.6.0",
     "@vitus-labs/tools-storybook": "^1.6.0",
     "@vitus-labs/tools-typescript": "^1.6.0",
-    "@vitus-labs/unistyle": "1.4.2"
+    "@vitus-labs/unistyle": "1.4.3-alpha.1+cf4e0a6"
   },
   "dependencies": {
     "react-is": "^19.2.3"
   },
-  "gitHead": "f12f43c61149964ff4f3f4b80cb6f92da2825915"
+  "gitHead": "cf4e0a6230687c5c7acc2e07a3248bae4ae55f07"
 }