@joewinke/jatui 0.2.3 → 0.2.4

package/dist/components/Tabs.svelte

@@ -189,7 +189,7 @@
 			left: 0;
 			width: 1px;
 			height: 2px;
-			background-color: oklch(var(--p, 55% 0.2 270) / 1);
+			background-color: var(--color-primary, oklch(55% 0.2 270));
 			transform-origin: left center;
 			border-radius: 1px;
 			transition:
@@ -216,7 +216,7 @@
 			border: none;
 			background: transparent;
 			cursor: pointer;
-			color: oklch(var(--bc, 20% 0 0) / 0.6);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 60%, transparent);
 			transition:
 				color var(--motion-fast, 150ms) var(--motion-glide, cubic-bezier(0.16, 1, 0.3, 1));
 			white-space: nowrap;
@@ -224,11 +224,11 @@
 		}
 
 		.tab-btn:hover:not(:disabled) {
-			color: oklch(var(--bc, 20% 0 0) / 0.85);
+			color: color-mix(in oklch, var(--color-base-content, oklch(20% 0 0)) 85%, transparent);
 		}
 
 		.tab-btn.tab-active {
-			color: oklch(var(--bc, 20% 0 0) / 1);
+			color: var(--color-base-content, oklch(20% 0 0));
 		}
 
 		.tab-btn:disabled {
@@ -237,13 +237,13 @@
 		}
 
 		.tab-btn:focus-visible {
-			outline: 2px solid oklch(var(--p, 55% 0.2 270) / 1);
+			outline: 2px solid var(--color-primary, oklch(55% 0.2 270));
 			outline-offset: 2px;
 		}
 
 		/* Underline: active tab gets primary color */
 		.tabs-underline .tab-btn.tab-active {
-			color: oklch(var(--p, 55% 0.2 270) / 1);
+			color: var(--color-primary, oklch(55% 0.2 270));
 		}
 
 		/* Underline: button bottom padding so indicator aligns */

package/dist/dnd/types.d.ts

@@ -2,7 +2,16 @@ import type { Input } from '@atlaskit/pragmatic-drag-and-drop/types';
 export interface DragData extends Record<string | symbol, unknown> {
     readonly type: string;
 }
+/**
+ * Module-scoped Symbol brand for board-managed items.
+ * ⚠ Symbol identity = module identity. Two copies of this module on one page makes
+ * isItemData() return false across the boundary — dnd/ must exist EXACTLY ONCE.
+ * Declare all @atlaskit/pragmatic-drag-and-drop* packages as peerDependencies in
+ * the host app (host owns the single instance).
+ */
+declare const ITEM: unique symbol;
 export interface ItemDragData<TItem = unknown> extends DragData {
+    readonly [ITEM]: true;
     readonly key: string;
     readonly item: TItem;
     readonly container: string;

package/dist/showcase/AnimatedBeam.svelte

@@ -112,6 +112,19 @@
 		pathLength > 0 ? `${pathLength * dashLength} ${pathLength * (1 - dashLength)}` : '0 1'
 	);
 	const dashOffset = $derived(pathLength > 0 ? (reverse ? -pathLength : pathLength) : 0);
+
+	// Per-instance keyframes go through a DOM style element created in JS.
+	// Do NOT inject them as an html-embedded style-tag string in the markup
+	// (and avoid even writing that tag literally in comments): tag-scanning
+	// preprocessors extract it as CSS, the uid placeholder fails PostCSS
+	// ("Unknown word uid"), and the consumer's whole build dies.
+	$effect(() => {
+		if (pathLength <= 0 || reducedMotion) return;
+		const styleEl = document.createElement('style');
+		styleEl.textContent = `@keyframes beam-sweep-${uid} { 0% { stroke-dashoffset: ${dashOffset}; } 100% { stroke-dashoffset: ${-dashOffset}; } }`;
+		document.head.appendChild(styleEl);
+		return () => styleEl.remove();
+	});
 </script>
 
 <!-- svelte-ignore a11y_aria_hidden_on_focusable -->
@@ -171,13 +184,3 @@
 		pointer-events: none;
 	}
 </style>
-
-<!-- Keyframes injected per-instance via a style tag to use the dynamic dashOffset -->
-{#if pathLength > 0 && !reducedMotion}
-	{@html `<style>
-		@keyframes beam-sweep-${uid} {
-			0%   { stroke-dashoffset: ${dashOffset}; }
-			100% { stroke-dashoffset: ${-dashOffset}; }
-		}
-	</style>`}
-{/if}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",