feat: map split prop to cosmoz-resizable-view attributes

.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

src/queue/queue.ts

@@ -12,11 +12,9 @@
 };
 
 /**
- * @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];
@@ -30,7 +28,7 @@
 		Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>,
 		Pick<RenderQueue<I, D>, 'details' | 'afterHeading'> {
 	list: (
 		thru: Record<string, any>,
 		props: QueueProps<I> & { onRef: (el?: Element) => void },
 	) => TemplateResult;
 	view: (thru: Record<string, any>, props: ViewProps<I>) => TemplateResult;
@@ -40,7 +38,7 @@
 	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 @@
 		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 @@
 		nav,
 		pagination,
 		persistKey: settingsId ? `${settingsId}-split` : undefined,
-		splitStyle,
+		splitAttrs,
 		list: list(
 			{
 				id: 'list',

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

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;
 	}