@signal9/era-ui 10.0.0 → 11.0.0

package/dist/ui/video-player/video-player.svelte

@@ -828,16 +828,16 @@
 	// against the mute button below. Visibility is in the scoped style block.
 	const volumeSleeveClass = $derived(
 		resolvedVolumeOrientation === 'vertical'
-			? 'absolute bottom-full left-1/2 z-20 h-[calc(var(--era-h-bar)*3)] w-(--era-h-control) -translate-x-1/2 rounded-t-(--era-rd-control) bg-hover shadow-(--era-shadow) glass-blur'
-			: 'relative h-(--era-h-chip) w-[calc(var(--era-h-control)*3)]'
+			? 'absolute bottom-full left-1/2 z-20 h-[calc(var(--era-h-bar)*3)] w-control -translate-x-1/2 rounded-t-control bg-hover shadow-sm glass-blur'
+			: 'relative h-chip w-[calc(var(--era-h-control)*3)]'
 	);
 	// Slider IS the visible track. Range and Thumb (both bg-fg) live inside
 	// and blend into one filled column.
 	const volumeSliderClass = $derived(
-		`absolute touch-none select-none overflow-hidden rounded-(--era-rd-icon) bg-3 shadow-(--era-shadow) focus:outline-none ${
+		`absolute touch-none select-none overflow-hidden rounded-icon bg-3 shadow-sm focus:outline-none ${
 			resolvedVolumeOrientation === 'vertical'
-				? 'top-(--era-gap) bottom-(--era-gap) left-1/2 w-(--era-h-icon) -translate-x-1/2'
-				: 'inset-x-(--era-icon-inset-chip) top-1/2 h-(--era-h-icon) -translate-y-1/2'
+				? 'top-gutter bottom-gutter left-1/2 w-icon -translate-x-1/2'
+				: 'inset-x-icon-inset-chip top-1/2 h-icon -translate-y-1/2'
 		}`
 	);
 	// Bits-ui's slider needs a thumb element to handle pointer events, but
@@ -858,7 +858,7 @@
 	// has held still over the bar for a while.
 	let barHovered = $state(false);
 	const barClass = $derived(
-		`absolute inset-x-(--era-gap) bottom-(--era-gap) z-10 bg-2 shadow-(--era-shadow) transition-opacity duration-(--era-duration) ${
+		`absolute inset-x-gutter bottom-gutter z-10 bg-2 shadow-sm transition-opacity duration-base ${
 			(userIdle || pausedIdle) && !barHovered ? 'pointer-events-none opacity-0' : ''
 		}`
 	);
@@ -959,7 +959,7 @@
 					aria-hidden="true"
 					class="pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
 				>
-					<LoaderCircle class="size-(--era-h-bar) animate-spin text-fg" />
+					<LoaderCircle class="size-bar animate-spin text-fg" />
 				</span>
 			{/if}
 
@@ -974,18 +974,18 @@
 						aria-label={`Back ${skipBy} seconds`}
 						onclick={(e: MouseEvent) => seekBy(-skipBy, e)}
 					>
-						<Rewind class="size-(--era-h-icon)" aria-hidden="true" />
+						<Rewind class="size-icon" aria-hidden="true" />
 					</Button>
 				{/if}
 
 				{#if showPlay && !mobileMode}
 					<Button icon aria-label={playLabel} onclick={togglePlay}>
 						{#if ended}
-							<RotateCcw class="size-(--era-h-icon)" aria-hidden="true" />
+							<RotateCcw class="size-icon" aria-hidden="true" />
 						{:else if paused}
-							<Play class="size-(--era-h-icon)" aria-hidden="true" />
+							<Play class="size-icon" aria-hidden="true" />
 						{:else}
-							<Pause class="size-(--era-h-icon)" aria-hidden="true" />
+							<Pause class="size-icon" aria-hidden="true" />
 						{/if}
 					</Button>
 				{/if}
@@ -996,7 +996,7 @@
 						aria-label={`Forward ${skipBy} seconds`}
 						onclick={(e: MouseEvent) => seekBy(skipBy, e)}
 					>
-						<FastForward class="size-(--era-h-icon)" aria-hidden="true" />
+						<FastForward class="size-icon" aria-hidden="true" />
 					</Button>
 				{/if}
 
@@ -1016,7 +1016,7 @@
 					aria-valuenow={seekAriaValue}
 					aria-valuetext={seekValueText}
 					aria-disabled={seekDisabled}
-					class="relative h-(--era-h-chip) min-w-0 flex-1 touch-none select-none focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-fg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+					class="relative h-chip min-w-0 flex-1 touch-none select-none focus:outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-fg data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
 					style="--era-video-played-scale: 0; --era-video-buffered-scale: 0; --era-video-hover-pct: 0%;"
 					data-seek-root
 					data-disabled={seekDisabled}
@@ -1028,12 +1028,9 @@
 					onpointerleave={handleSeekPointerLeave}
 					onkeydown={handleSeekKeydown}
 				>
-					<span
-						aria-hidden="true"
-						class="pointer-events-none absolute inset-0 rounded-(--era-rd-chip)"
-					>
+					<span aria-hidden="true" class="pointer-events-none absolute inset-0 rounded-chip">
 						<span
-							class="absolute inset-(--era-icon-inset-chip) overflow-hidden rounded-(--era-rd-icon) bg-3 shadow-(--era-shadow)"
+							class="absolute inset-icon-inset-chip overflow-hidden rounded-icon bg-3 shadow-sm"
 						>
 							<span
 								class="absolute inset-y-0 left-0 w-full origin-left scale-x-(--era-video-buffered-scale) bg-4"
@@ -1061,7 +1058,7 @@
 						-->
 						<span
 							aria-hidden="true"
-							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-(--era-h-pill) -translate-x-1/2 items-center gap-(--era-gap) rounded-(--era-rd-pill) bg-(--era-surface-bg-elevated) px-(--era-inset-pill) font-mono text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow-lg) glass-blur"
+							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-bar)-var(--era-h-chip))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-pill -translate-x-1/2 items-center gap-gutter rounded-pill bg-elevated px-inset-pill font-mono text-body leading-none whitespace-nowrap text-fg shadow-lg glass-blur"
 						>
 							<span class="tabular-nums">{hoverTimeLabel}</span>
 							{#if hoverChapter}
@@ -1089,11 +1086,11 @@
 							onclick={(e: MouseEvent) => remote.toggleMuted(e)}
 						>
 							{#if mutedState || volumeState === 0}
-								<VolumeX class="size-(--era-h-icon)" aria-hidden="true" />
+								<VolumeX class="size-icon" aria-hidden="true" />
 							{:else if volumeState < 0.5}
-								<Volume1 class="size-(--era-h-icon)" aria-hidden="true" />
+								<Volume1 class="size-icon" aria-hidden="true" />
 							{:else}
-								<Volume2 class="size-(--era-h-icon)" aria-hidden="true" />
+								<Volume2 class="size-icon" aria-hidden="true" />
 							{/if}
 						</Button>
 
@@ -1133,7 +1130,7 @@
 						<BitsDropdownMenu.Trigger>
 							{#snippet child({ props })}
 								<Button icon aria-label="Playback speed" {...props}>
-									<Gauge class="size-(--era-h-icon)" aria-hidden="true" />
+									<Gauge class="size-icon" aria-hidden="true" />
 								</Button>
 							{/snippet}
 						</BitsDropdownMenu.Trigger>
@@ -1147,7 +1144,7 @@
 										{#snippet children({ checked })}
 											<span>{r === 1 ? 'Normal' : `${r}x`}</span>
 											{#if checked}
-												<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
+												<Check class="ml-auto size-icon text-muted" aria-hidden="true" />
 											{/if}
 										{/snippet}
 									</DropdownMenu.RadioItem>
@@ -1167,7 +1164,7 @@
 						<BitsDropdownMenu.Trigger>
 							{#snippet child({ props })}
 								<Button icon aria-label="Quality" {...props}>
-									<Settings class="size-(--era-h-icon)" aria-hidden="true" />
+									<Settings class="size-icon" aria-hidden="true" />
 								</Button>
 							{/snippet}
 						</BitsDropdownMenu.Trigger>
@@ -1180,7 +1177,7 @@
 									{#snippet children({ checked })}
 										<span>Auto</span>
 										{#if checked}
-											<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
+											<Check class="ml-auto size-icon text-muted" aria-hidden="true" />
 										{/if}
 									{/snippet}
 								</DropdownMenu.RadioItem>
@@ -1189,7 +1186,7 @@
 										{#snippet children({ checked })}
 											<span>{q.height}p</span>
 											{#if checked}
-												<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
+												<Check class="ml-auto size-icon text-muted" aria-hidden="true" />
 											{/if}
 										{/snippet}
 									</DropdownMenu.RadioItem>
@@ -1206,9 +1203,9 @@
 						onclick={(e: MouseEvent) => remote.togglePictureInPicture(e)}
 					>
 						{#if pipState}
-							<PictureInPicture2 class="size-(--era-h-icon)" aria-hidden="true" />
+							<PictureInPicture2 class="size-icon" aria-hidden="true" />
 						{:else}
-							<PictureInPicture class="size-(--era-h-icon)" aria-hidden="true" />
+							<PictureInPicture class="size-icon" aria-hidden="true" />
 						{/if}
 					</Button>
 				{/if}
@@ -1220,9 +1217,9 @@
 						onclick={(e: MouseEvent) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}
 					>
 						{#if fullscreenState}
-							<Minimize class="size-(--era-h-icon)" aria-hidden="true" />
+							<Minimize class="size-icon" aria-hidden="true" />
 						{:else}
-							<Maximize class="size-(--era-h-icon)" aria-hidden="true" />
+							<Maximize class="size-icon" aria-hidden="true" />
 						{/if}
 					</Button>
 				{/if}
@@ -1246,11 +1243,11 @@
 		<ContextMenu.Content onOpenAutoFocus={(e: Event) => e.preventDefault()}>
 			<ContextMenu.Item onSelect={togglePlay}>
 				{#if ended}
-					<RotateCcw class="size-(--era-h-icon)" aria-hidden="true" />
+					<RotateCcw class="size-icon" aria-hidden="true" />
 				{:else if paused}
-					<Play class="size-(--era-h-icon)" aria-hidden="true" />
+					<Play class="size-icon" aria-hidden="true" />
 				{:else}
-					<Pause class="size-(--era-h-icon)" aria-hidden="true" />
+					<Pause class="size-icon" aria-hidden="true" />
 				{/if}
 				<span>{playLabel}</span>
 			</ContextMenu.Item>
@@ -1258,11 +1255,11 @@
 			{#if showVolume && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleMuted(e)}>
 					{#if mutedState || volumeState === 0}
-						<VolumeX class="size-(--era-h-icon)" aria-hidden="true" />
+						<VolumeX class="size-icon" aria-hidden="true" />
 					{:else if volumeState < 0.5}
-						<Volume1 class="size-(--era-h-icon)" aria-hidden="true" />
+						<Volume1 class="size-icon" aria-hidden="true" />
 					{:else}
-						<Volume2 class="size-(--era-h-icon)" aria-hidden="true" />
+						<Volume2 class="size-icon" aria-hidden="true" />
 					{/if}
 					<span>{muteLabel}</span>
 				</ContextMenu.Item>
@@ -1271,9 +1268,9 @@
 			{#if showSpeed && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Gauge class="size-(--era-h-icon)" aria-hidden="true" />
+						<Gauge class="size-icon" aria-hidden="true" />
 						<span class="flex-1">Speed</span>
-						<span class="ml-auto pl-(--era-gap) text-muted">
+						<span class="ml-auto pl-gutter text-muted">
 							{rateState === 1 ? '1x' : `${rateState}x`}
 						</span>
 					</ContextMenu.SubTrigger>
@@ -1295,9 +1292,9 @@
 			{#if showQualityMenu && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Settings class="size-(--era-h-icon)" aria-hidden="true" />
+						<Settings class="size-icon" aria-hidden="true" />
 						<span class="flex-1">Quality</span>
-						<span class="ml-auto pl-(--era-gap) text-muted">{qualityHint}</span>
+						<span class="ml-auto pl-gutter text-muted">{qualityHint}</span>
 					</ContextMenu.SubTrigger>
 					<ContextMenu.SubContent>
 						<ContextMenu.RadioGroup
@@ -1316,9 +1313,9 @@
 			{#if showPip && canEnterPip && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.togglePictureInPicture(e)}>
 					{#if pipState}
-						<PictureInPicture2 class="size-(--era-h-icon)" aria-hidden="true" />
+						<PictureInPicture2 class="size-icon" aria-hidden="true" />
 					{:else}
-						<PictureInPicture class="size-(--era-h-icon)" aria-hidden="true" />
+						<PictureInPicture class="size-icon" aria-hidden="true" />
 					{/if}
 					<span>{pipState ? 'Exit picture-in-picture' : 'Picture-in-picture'}</span>
 				</ContextMenu.Item>
@@ -1327,9 +1324,9 @@
 			{#if canEnterFullscreen}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}>
 					{#if fullscreenState}
-						<Minimize class="size-(--era-h-icon)" aria-hidden="true" />
+						<Minimize class="size-icon" aria-hidden="true" />
 					{:else}
-						<Maximize class="size-(--era-h-icon)" aria-hidden="true" />
+						<Maximize class="size-icon" aria-hidden="true" />
 					{/if}
 					<span>{fullscreenState ? 'Exit fullscreen' : 'Fullscreen'}</span>
 				</ContextMenu.Item>
@@ -1338,7 +1335,7 @@
 			<ContextMenu.Separator />
 
 			<ContextMenu.Item onSelect={downloadVideo}>
-				<Download class="size-(--era-h-icon)" aria-hidden="true" />
+				<Download class="size-icon" aria-hidden="true" />
 				<span>Download video</span>
 			</ContextMenu.Item>
 		</ContextMenu.Content>
@@ -1361,7 +1358,7 @@
 	   bits-ui slider thumb is being dragged (its `data-active` is set on
 	   pointerdown and cleared on pointerup, even if the cursor strays
 	   outside the cluster). Plain CSS rather than Tailwind variants on the
-	   button sidesteps cascade ambiguity with `rounded-(--era-rd-control)`. */
+	   button sidesteps cascade ambiguity with `rounded-control`. */
 	:global([data-volume-cluster] [data-volume-sleeve]) {
 		visibility: hidden;
 	}

package/dist/utils/index.js

@@ -7,7 +7,7 @@ import { createTV } from 'tailwind-variants';
 // The rest teaches tailwind-merge era's named class API (styles/index.css):
 // values it can't know about (h-control, px-inset-control, gap-gutter, shadow-well, …)
 // must land in their real class groups, or a consumer's `class="h-bar"` would
-// fail to replace a component's h-(--era-h-control) and both would apply.
+// fail to replace a component's h-control and both would apply.
 // Colors (bg-elevated, bg-highlight, …) need no entry — the bg group already
 // accepts any name. rounded-icon/sm/md/lg and bare shadow/shadow-lg are stock
 // names tailwind-merge knows; only era's additions to those scales are listed.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "10.0.0",
+	"version": "11.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -19,9 +19,10 @@
 		"check:surfaces": "node --experimental-strip-types scripts/check-surfaces.ts",
 		"check:tokens": "node --experimental-strip-types scripts/check-tokens.ts",
 		"check:routes": "node --experimental-strip-types scripts/check-routes.ts",
+		"check:canonical": "node --experimental-strip-types scripts/check-canonical.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes",
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical",
 		"test": "npm run test:visual"
 	},
 	"files": [