From b7dfaeb8e2753d25dfa3aef5144b36a7a655ed93 Mon Sep 17 00:00:00 2001
From: Iulian Meghea <iulian@plumelo.com>
Date: Thu, 9 Jul 2026 12:11:23 +0000
Subject: [PATCH] feat: map split prop to cosmoz-resizable-view attributes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Convert split prop to initial-size/min-size attributes on cosmoz-resizable-view
- split.sizes[0] → initial-size (percentage), split.minSize → min-size (px)
- expandToMin and snapOffset silently ignored (no equivalent)
- Default sizing: 50% / 100px
- Remove CSS custom property approach (--cz-queue-list-basis, --cz-queue-list-min-width)
- Add slot='previous' to list element via thru spread
- Mark split prop @deprecated
---
 .changeset/split-prop-compat.md | 11 +++++++++++
 src/queue/queue.ts              | 33 +++++++++++++++------------------
 src/queue/render.ts             |  7 ++++---
 src/queue/style.ts              |  5 -----
 4 files changed, 30 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/split-prop-compat.md

diff --git a/.changeset/split-prop-compat.md b/.changeset/split-prop-compat.md
new file mode 100644
index 0000000..a2c937a
--- /dev/null
+++ b/.changeset/split-prop-compat.md
@@ -0,0 +1,11 @@
+---
+'@neovici/cosmoz-queue': patch
+---
+
+Restore `split` prop compatibility via `cosmoz-resizable-view` attributes.
+
+- `split` prop is converted to `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>`
+- `split.sizes[0]` → `initial-size` (percentage), `split.minSize` → `min-size` (px)
+- `expandToMin` and `snapOffset` are silently ignored (no equivalent)
+- Default sizing: `50%` / `100px` (matching split.js defaults)
+- `split` prop marked `@deprecated` — use attributes on `<cosmoz-resizable-view>` directly
diff --git a/src/queue/queue.ts b/src/queue/queue.ts
index 58d51f6..7316ae0 100644
--- a/src/queue/queue.ts
+++ b/src/queue/queue.ts
@@ -12,11 +12,9 @@ type ViewProps<I> = Omit<QueueProps<I>, 'nav'> & {
 };
 
 /**
- * @deprecated Use CSS custom properties `--cz-queue-list-basis` and
- * `--cz-queue-list-min-width` on the host element instead.
- *
- * `expandToMin` and `snapOffset` have no equivalent in the CSS flex model
- * and are silently ignored.
+ * @deprecated Use `initial-size` and `min-size` attributes on
+ * `<cosmoz-resizable-view>` instead (mapped automatically from this prop).
+ * `expandToMin` and `snapOffset` have no equivalent and are silently ignored.
  */
 export interface SplitConfig {
 	sizes?: [number, number];
@@ -40,7 +38,7 @@ interface Props<I, D>
 	idHashParam?: string;
 	tabHashParam?: string;
 	pagination?: Pagination;
-	/** @deprecated Use CSS custom properties `--cz-queue-list-basis` / `--cz-queue-list-min-width` instead. */
+	/** @deprecated Use `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>` instead. */
 	split?: SplitConfig;
 }
 
@@ -93,17 +91,16 @@ export const queue = <I, D = I>(props: Props<I, D>) => {
 		onAsyncSimpleAction,
 	};
 
-	const splitStyle = split
-		? [
-				split.sizes?.[0] != null && `--cz-queue-list-basis: ${split.sizes[0]}%`,
-				split.minSize != null &&
-					`--cz-queue-list-min-width: ${
-						Array.isArray(split.minSize) ? split.minSize[0] : split.minSize
-					}px`,
-			]
-				.filter(Boolean)
-				.join('; ')
-		: undefined;
+	const splitAttrs = split
+		? {
+				initialSize:
+					split.sizes?.[0] != null ? `${split.sizes[0]}%` : undefined,
+				minSize:
+					split.minSize != null
+						? `${Array.isArray(split.minSize) ? split.minSize[0] : split.minSize}`
+						: undefined,
+			}
+		: { initialSize: '50%', minSize: '100' };
 
 	return renderQueue({
 		details,
@@ -116,7 +113,7 @@ export const queue = <I, D = I>(props: Props<I, D>) => {
 		nav,
 		pagination,
 		persistKey: settingsId ? `${settingsId}-split` : undefined,
-		splitStyle,
+		splitAttrs,
 		list: list(
 			{
 				id: 'list',
diff --git a/src/queue/render.ts b/src/queue/render.ts
index 7609cfd..42bf37d 100644
--- a/src/queue/render.ts
+++ b/src/queue/render.ts
@@ -189,7 +189,7 @@ export interface RenderQueue<I, D> extends Pick<
 	list: TemplateResult;
 	pagination?: Pagination;
 	persistKey?: string;
-	splitStyle?: string;
+	splitAttrs?: { initialSize?: string; minSize?: string };
 	tabnav: RenderTabs<Tab>;
 	nav: Omit<RenderSlide<I, D>, 'renderItem' | 'renderLoader' | 'details'> &
 		Pick<RenderView<I, D>, 'details'> & { index: number };
@@ -209,7 +209,7 @@ export const renderQueue = <I, D>({
 	details = nav?.details,
 	pagination: _pagination,
 	persistKey,
-	splitStyle,
+	splitAttrs,
 }: RenderQueue<I, D>) => {
 	const activeTab = tabnav.active?.name;
 	const pagination = _pagination
@@ -238,7 +238,8 @@ export const renderQueue = <I, D>({
 			data-active=${activeTab}
 			direction="horizontal"
 			persist=${persistKey}
-			style=${splitStyle}
+			initial-size=${splitAttrs?.initialSize ?? nothing}
+			min-size=${splitAttrs?.minSize ?? nothing}
 		>
 			${list}
 			<cosmoz-slider
diff --git a/src/queue/style.ts b/src/queue/style.ts
index 7532e2a..5da8fca 100644
--- a/src/queue/style.ts
+++ b/src/queue/style.ts
@@ -42,11 +42,6 @@ export const base = css`
 		white-space: nowrap;
 	}
 
-	#list {
-		flex-basis: var(--cz-queue-list-basis, 50%);
-		min-width: var(--cz-queue-list-min-width, 100px);
-	}
-
 	[data-active='split'] .view-core::part(header-bg) {
 		border-top-left-radius: 0;
 	}