@signal9/era-ui 7.0.0 → 9.0.0

package/dist/ui/select/select-trigger.svelte

@@ -14,11 +14,11 @@
 <Select.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full items-center justify-between gap-(--era-xs-inset-sm) rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
+		'flex h-(--era-h-control) w-full items-center justify-between gap-(--era-icon-inset-chip) rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) px-(--era-inset-control) text-body era-text-trim text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) focus:bg-(--era-highlight) focus:outline-none disabled:opacity-50 data-[state=open]:rounded-b-none data-[state=open]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-(--era-h-xs) text-muted" />
+	<ChevronDown class="size-(--era-h-icon) text-muted" />
 </Select.Trigger>

package/dist/ui/select/select-value.svelte

@@ -51,7 +51,7 @@
 				the horizontal rhythm matches the vertical one.
 			-->
 			<div
-				class="-ml-(--era-inset-xxs) flex min-w-0 flex-wrap items-center gap-(--era-xxs-inset-md)"
+				class="-ml-(--era-inset-pill) flex min-w-0 flex-wrap items-center gap-(--era-pill-inset-control)"
 			>
 				{#each sel.selected as item (item.value)}
 					<Chip

package/dist/ui/sheet/sheet-content.svelte

@@ -27,8 +27,8 @@
 			 * padded rd-lg surface is unchanged.
 			 */
 			header: {
-				true: '[--sheet-rd:var(--era-rd-md)]',
-				false: '[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)'
+				true: '[--sheet-rd:var(--era-rd-control)]',
+				false: '[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)'
 			}
 		},
 		defaultVariants: { side: 'bottom', header: false }
@@ -64,7 +64,7 @@
 	>
 		{#if header}
 			{@render header()}
-			<div class="flex min-h-0 flex-1 flex-col gap-(--era-gap) overflow-y-auto p-(--era-pad-md)">
+			<div class="flex min-h-0 flex-1 flex-col gap-(--era-gap) overflow-y-auto p-(--era-pad-card)">
 				{@render children?.()}
 			</div>
 		{:else}

package/dist/ui/sheet/sheet-content.svelte.d.ts

@@ -14,8 +14,8 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "[--sheet-rd:var(--era-rd-md)]";
-        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-control)]";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
     };
 }, undefined, "fixed z-50 flex flex-col border border-divider bg-(--era-surface-bg) shadow-(--era-shadow-lg) glass-blur", {
     side: {
@@ -32,8 +32,8 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "[--sheet-rd:var(--era-rd-md)]";
-        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-control)]";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     side: {
@@ -50,8 +50,8 @@ export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
      * padded rd-lg surface is unchanged.
      */
     header: {
-        true: "[--sheet-rd:var(--era-rd-md)]";
-        false: "[--sheet-rd:var(--era-rd-lg)] gap-(--era-gap) overflow-y-auto p-(--era-pad-md)";
+        true: "[--sheet-rd:var(--era-rd-control)]";
+        false: "[--sheet-rd:var(--era-rd-bar)] gap-(--era-gap) overflow-y-auto p-(--era-pad-card)";
     };
 }, undefined>>;
 import type { Snippet } from 'svelte';

package/dist/ui/skeleton/skeleton.svelte

@@ -5,9 +5,9 @@
 		base: 'animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)',
 		variants: {
 			variant: {
-				line: 'h-(--era-text) w-full rounded-(--era-rd-md)',
-				circle: 'size-(--era-h-lg) rounded-full',
-				block: 'h-24 w-full rounded-(--era-rd-md)'
+				line: 'h-(--era-text) w-full rounded-(--era-rd-control)',
+				circle: 'size-(--era-h-bar) rounded-full',
+				block: 'h-24 w-full rounded-(--era-rd-control)'
 			}
 		},
 		defaultVariants: { variant: 'line' }

package/dist/ui/skeleton/skeleton.svelte.d.ts

@@ -1,20 +1,20 @@
 export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-md)";
-        circle: "size-(--era-h-lg) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-md)";
+        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
+        circle: "size-(--era-h-bar) rounded-full";
+        block: "h-24 w-full rounded-(--era-rd-control)";
     };
 }, undefined, "animate-[skeleton-pulse_2s_ease-in-out_infinite] bg-(--era-surface-bg-elevated)", {
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-md)";
-        circle: "size-(--era-h-lg) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-md)";
+        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
+        circle: "size-(--era-h-bar) rounded-full";
+        block: "h-24 w-full rounded-(--era-rd-control)";
     };
 }, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        line: "h-(--era-text) w-full rounded-(--era-rd-md)";
-        circle: "size-(--era-h-lg) rounded-full";
-        block: "h-24 w-full rounded-(--era-rd-md)";
+        line: "h-(--era-text) w-full rounded-(--era-rd-control)";
+        circle: "size-(--era-h-bar) rounded-full";
+        block: "h-24 w-full rounded-(--era-rd-control)";
     };
 }, undefined>>;
 import type { HTMLAttributes } from 'svelte/elements';

package/dist/ui/slider/slider-range.svelte

@@ -25,7 +25,7 @@
 
 <span
 	class={cn(
-		'relative h-[calc(var(--era-sp)/2)] w-full grow cursor-pointer overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
+		'relative h-[calc(var(--era-sp)/2)] w-full grow cursor-pointer overflow-hidden rounded-(--era-rd-control) bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well)',
 		trackClass
 	)}
 >

package/dist/ui/slider/slider-thumb.svelte

@@ -8,7 +8,7 @@
 <Slider.Thumb
 	bind:ref
 	class={cn(
-		"relative block size-(--era-h-xs) cursor-pointer rounded-(--era-rd-xs) bg-fg shadow-(--era-shadow) transition-transform duration-(--era-duration) will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
+		"relative block size-(--era-h-icon) cursor-pointer rounded-(--era-rd-icon) bg-fg shadow-(--era-shadow) transition-transform duration-(--era-duration) will-change-transform after:absolute after:inset-[-13px] after:content-[''] hover:scale-105 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:scale-[0.96]",
 		className
 	)}
 	{...restProps}

package/dist/ui/step/step-content.svelte

@@ -17,7 +17,7 @@
 <Collapsible.Content bind:ref class="era-collapse" {...restProps}>
 	<div
 		class={cn(
-			'mt-(--era-gap) mb-(--era-gap) flex min-w-0 flex-col gap-(--era-pad-sm) rounded-(--era-rd-md) bg-(--era-surface-bg) p-(--era-pad-sm) shadow-(--era-shadow-well)',
+			'mt-(--era-gap) mb-(--era-gap) flex min-w-0 flex-col gap-(--era-pad-panel) rounded-(--era-rd-control) bg-(--era-surface-bg) p-(--era-pad-panel) shadow-(--era-shadow-well)',
 			className
 		)}
 	>

package/dist/ui/step/step-summary.svelte

@@ -26,19 +26,19 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg',
+		'flex h-(--era-h-control) w-full min-w-0 era-interactive cursor-pointer items-center gap-(--era-gap) rounded-(--era-rd-control) px-(--era-inset-control) text-body era-text-trim text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg',
 		className
 	)}
 	{...restProps}
 >
 	{#if step.status === 'running'}
-		<LoaderCircle class="size-(--era-h-xs) shrink-0 animate-spin" aria-hidden="true" />
+		<LoaderCircle class="size-(--era-h-icon) shrink-0 animate-spin" aria-hidden="true" />
 	{:else if step.status === 'done'}
-		<CircleCheck class="size-(--era-h-xs) shrink-0 text-success" aria-hidden="true" />
+		<CircleCheck class="size-(--era-h-icon) shrink-0 text-success" aria-hidden="true" />
 	{:else if step.status === 'error'}
-		<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+		<CircleX class="size-(--era-h-icon) shrink-0 text-destructive" aria-hidden="true" />
 	{:else}
-		<CircleDashed class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+		<CircleDashed class="size-(--era-h-icon) shrink-0" aria-hidden="true" />
 	{/if}
 	<span
 		class={cn(
@@ -49,7 +49,7 @@
 		{@render children?.()}
 	</span>
 	<ChevronDown
-		class="size-(--era-h-xs) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/step:rotate-180"
+		class="size-(--era-h-icon) shrink-0 transition-transform duration-(--era-duration) ease-(--era-ease) group-data-[state=open]/step:rotate-180"
 		aria-hidden="true"
 	/>
 </Collapsible.Trigger>

package/dist/ui/switch/switch.svelte

@@ -21,13 +21,13 @@
 		// "activated" — rather than --color-hover, which is calibrated for
 		// transient list-hover feedback, not a persistent on/off signal.
 		// justify-center is load-bearing, not cosmetic: it lets the thumb travel
-		// be expressed as ±h-xs/2 about the CONTENT-box centre, which absorbs the
+		// be expressed as ±h-icon/2 about the CONTENT-box centre, which absorbs the
 		// 1px border on both sides automatically — exactly how items-center
 		// already gets the vertical gap right. Offsetting from the content-box
 		// ORIGIN instead (translate-x = xs-inset-sm) silently adds the border to
 		// the left gap and subtracts it from the right, so the thumb rests 1px
 		// too far right in both states and the two ends differ by 2px.
-		'inline-flex h-(--era-h-sm) w-[calc(var(--era-h-sm)+var(--era-h-xs))] shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-sm) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight) data-[state=checked]:bg-fg',
+		'inline-flex h-(--era-h-chip) w-[calc(var(--era-h-chip)+var(--era-h-icon))] shrink-0 era-interactive cursor-pointer items-center justify-center rounded-(--era-rd-chip) border border-divider bg-(--era-surface-bg-elevated) shadow-(--era-shadow-well) hover:bg-(--era-highlight) data-[state=checked]:bg-fg',
 		className
 	)}
 	{...restProps}
@@ -38,6 +38,6 @@
 	     vs bevel track-slide) scopes a rule to its own surface — see the
 	     surface-animation recipe in surfaces/base.css. -->
 	<Switch.Thumb
-		class="pointer-events-none block size-(--era-h-xs) -translate-x-[calc(var(--era-h-xs)/2)] rounded-(--era-rd-xs) bg-fg transition-transform duration-(--era-duration) ease-(--era-ease) data-[state=checked]:translate-x-[calc(var(--era-h-xs)/2)] data-[state=checked]:bg-2"
+		class="pointer-events-none block size-(--era-h-icon) -translate-x-[calc(var(--era-h-icon)/2)] rounded-(--era-rd-icon) bg-fg transition-transform duration-(--era-duration) ease-(--era-ease) data-[state=checked]:translate-x-[calc(var(--era-h-icon)/2)] data-[state=checked]:bg-2"
 	/>
 </Switch.Root>

package/dist/ui/table/table-cell.svelte

@@ -17,7 +17,7 @@
 <td
 	bind:this={ref}
 	class={cn(
-		'h-(--era-h-md) px-(--era-inset-md) text-left align-middle [table[data-variant=cells]_&]:rounded-(--era-rd-sm) [table[data-variant=cells]_&]:bg-(--era-surface-bg-elevated) [table[data-variant=cells]_&]:px-(--era-inset-sm) [table[data-variant=cells]_&]:shadow-(--era-shadow)',
+		'h-(--era-h-control) px-(--era-inset-control) text-left align-middle [table[data-variant=cells]_&]:rounded-(--era-rd-chip) [table[data-variant=cells]_&]:bg-(--era-surface-bg-elevated) [table[data-variant=cells]_&]:px-(--era-inset-chip) [table[data-variant=cells]_&]:shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/table/table-head-cell.svelte

@@ -17,7 +17,7 @@
 <th
 	bind:this={ref}
 	class={cn(
-		'h-(--era-h-md) px-(--era-inset-md) text-left align-middle font-medium text-muted [table[data-variant=cells]_&]:rounded-(--era-rd-sm) [table[data-variant=cells]_&]:bg-fill [table[data-variant=cells]_&]:px-(--era-inset-sm) [table[data-variant=cells]_&]:text-bright [table[data-variant=cells]_&]:shadow-(--era-shadow)',
+		'h-(--era-h-control) px-(--era-inset-control) text-left align-middle font-medium text-muted [table[data-variant=cells]_&]:rounded-(--era-rd-chip) [table[data-variant=cells]_&]:bg-fill [table[data-variant=cells]_&]:px-(--era-inset-chip) [table[data-variant=cells]_&]:text-bright [table[data-variant=cells]_&]:shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-field/time-field-segment.svelte

@@ -8,7 +8,7 @@
 <TimeField.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/time-range-field/time-range-field-segment.svelte

@@ -12,7 +12,7 @@
 <TimeRangeField.Segment
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-sm) items-center rounded-(--era-rd-sm) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
+		'inline-flex h-(--era-h-chip) items-center rounded-(--era-rd-chip) px-[calc(var(--era-sp)/2)] focus:bg-(--era-highlight) focus:text-bright focus:outline-none aria-[valuetext=Empty]:text-muted data-[segment=literal]:text-muted',
 		className
 	)}
 	{...restProps}

package/dist/ui/toggle-group/toggle-group-item.svelte

@@ -10,7 +10,7 @@
 <ToggleGroup.Item
 	bind:ref
 	class={cn(
-		'inline-flex h-(--era-h-md) min-w-(--era-h-md) items-center justify-center rounded-(--era-rd-md) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none active:shadow-(--era-shadow-pressed) disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-(--era-shadow-pressed)',
+		'inline-flex h-(--era-h-control) min-w-(--era-h-control) items-center justify-center rounded-(--era-rd-control) px-(--era-inset-control) text-body text-fg shadow-(--era-shadow) hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none active:shadow-(--era-shadow-pressed) disabled:opacity-50 data-[state=on]:bg-fill data-[state=on]:text-bright data-[state=on]:shadow-(--era-shadow-pressed)',
 		className
 	)}
 	{...restProps}

package/dist/ui/tooltip/tooltip-content.svelte

@@ -15,7 +15,7 @@
 	<Tooltip.Content
 		bind:ref
 		class={cn(
-			'z-50 inline-flex h-(--era-h-xxs) items-center gap-(--era-gap) rounded-(--era-rd-xxs) bg-(--era-surface-bg-elevated) px-(--era-inset-xxs) text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow-lg) glass-blur has-[svg]:gap-(--era-inset-xxs)',
+			'z-50 inline-flex h-(--era-h-pill) items-center gap-(--era-gap) rounded-(--era-rd-pill) bg-(--era-surface-bg-elevated) px-(--era-inset-pill) text-body leading-none whitespace-nowrap text-fg shadow-(--era-shadow-lg) glass-blur has-[svg]:gap-(--era-inset-pill)',
 			className
 		)}
 		{sideOffset}

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

@@ -814,7 +814,7 @@
 		volumeOrientation === 'vertical' ? 'vertical' : 'horizontal'
 	);
 	// In vertical mode the popup is anchored to the mute icon — same width
-	// (h-md), shared bg, rounded top + flat bottom — so it reads as the icon
+	// (h-control), shared bg, rounded top + flat bottom — so it reads as the icon
 	// extending upward (vidstack has no native API for this). The sleeve's
 	// box runs all the way down to the button (`bottom-full`, no offset) so
 	// the cursor crossing the visual gap stays inside the cluster's hover
@@ -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-lg)*3)] w-(--era-h-md) -translate-x-1/2 rounded-t-(--era-rd-md) bg-hover shadow-(--era-shadow) glass-blur'
-			: 'relative h-(--era-h-sm) w-[calc(var(--era-h-md)*3)]'
+			? '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)]'
 	);
 	// 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-xs) bg-3 shadow-(--era-shadow) focus:outline-none ${
+		`absolute touch-none select-none overflow-hidden rounded-(--era-rd-icon) bg-3 shadow-(--era-shadow) focus:outline-none ${
 			resolvedVolumeOrientation === 'vertical'
-				? 'top-(--era-gap) bottom-(--era-gap) left-1/2 w-(--era-h-xs) -translate-x-1/2'
-				: 'inset-x-(--era-xs-inset-sm) top-1/2 h-(--era-h-xs) -translate-y-1/2'
+				? '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'
 		}`
 	);
 	// Bits-ui's slider needs a thumb element to handle pointer events, but
@@ -871,7 +871,7 @@
 	<media-player
 		bind:this={ref}
 		class={cn(
-			'relative block w-full overflow-hidden [border-radius:calc(var(--era-rd-lg)+var(--era-gap))] bg-black',
+			'relative block w-full overflow-hidden [border-radius:calc(var(--era-rd-bar)+var(--era-gap))] bg-black',
 			className
 		)}
 		{src}
@@ -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-lg) animate-spin text-fg" />
+					<LoaderCircle class="size-(--era-h-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-xs)" aria-hidden="true" />
+						<Rewind class="size-(--era-h-icon)" aria-hidden="true" />
 					</Button>
 				{/if}
 
 				{#if showPlay && !mobileMode}
 					<Button icon aria-label={playLabel} onclick={togglePlay}>
 						{#if ended}
-							<RotateCcw class="size-(--era-h-xs)" aria-hidden="true" />
+							<RotateCcw class="size-(--era-h-icon)" aria-hidden="true" />
 						{:else if paused}
-							<Play class="size-(--era-h-xs)" aria-hidden="true" />
+							<Play class="size-(--era-h-icon)" aria-hidden="true" />
 						{:else}
-							<Pause class="size-(--era-h-xs)" aria-hidden="true" />
+							<Pause class="size-(--era-h-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-xs)" aria-hidden="true" />
+						<FastForward class="size-(--era-h-icon)" aria-hidden="true" />
 					</Button>
 				{/if}
 
@@ -1016,7 +1016,7 @@
 					aria-valuenow={seekAriaValue}
 					aria-valuetext={seekValueText}
 					aria-disabled={seekDisabled}
-					class="relative h-(--era-h-sm) 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-(--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"
 					style="--era-video-played-scale: 0; --era-video-buffered-scale: 0; --era-video-hover-pct: 0%;"
 					data-seek-root
 					data-disabled={seekDisabled}
@@ -1030,10 +1030,10 @@
 				>
 					<span
 						aria-hidden="true"
-						class="pointer-events-none absolute inset-0 rounded-(--era-rd-sm)"
+						class="pointer-events-none absolute inset-0 rounded-(--era-rd-chip)"
 					>
 						<span
-							class="absolute inset-(--era-xs-inset-sm) overflow-hidden rounded-(--era-rd-xs) bg-3 shadow-(--era-shadow)"
+							class="absolute inset-(--era-icon-inset-chip) overflow-hidden rounded-(--era-rd-icon) bg-3 shadow-(--era-shadow)"
 						>
 							<span
 								class="absolute inset-y-0 left-0 w-full origin-left scale-x-(--era-video-buffered-scale) bg-4"
@@ -1054,14 +1054,14 @@
 					{#if seekPreviewVisible}
 						<!--
 							Anchored to the seek-timeline div, but the timeline sits
-							centered inside the taller Bar (h-lg around h-sm). To
+							centered inside the taller Bar (h-bar around h-chip). To
 							keep a `--era-gap`-sized clearance above the visible Bar
 							surface — not just above the timeline div's top — we
 							add half the bar/timeline height delta to the offset.
 						-->
 						<span
 							aria-hidden="true"
-							class="pointer-events-none absolute bottom-[calc(100%+(var(--era-h-lg)-var(--era-h-sm))/2+var(--era-gap))] left-(--era-video-hover-pct) inline-flex h-(--era-h-xxs) -translate-x-1/2 items-center gap-(--era-gap) rounded-(--era-rd-xxs) bg-(--era-surface-bg-elevated) px-(--era-inset-xxs) 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-(--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"
 						>
 							<span class="tabular-nums">{hoverTimeLabel}</span>
 							{#if hoverChapter}
@@ -1089,11 +1089,11 @@
 							onclick={(e: MouseEvent) => remote.toggleMuted(e)}
 						>
 							{#if mutedState || volumeState === 0}
-								<VolumeX class="size-(--era-h-xs)" aria-hidden="true" />
+								<VolumeX class="size-(--era-h-icon)" aria-hidden="true" />
 							{:else if volumeState < 0.5}
-								<Volume1 class="size-(--era-h-xs)" aria-hidden="true" />
+								<Volume1 class="size-(--era-h-icon)" aria-hidden="true" />
 							{:else}
-								<Volume2 class="size-(--era-h-xs)" aria-hidden="true" />
+								<Volume2 class="size-(--era-h-icon)" aria-hidden="true" />
 							{/if}
 						</Button>
 
@@ -1133,7 +1133,7 @@
 						<BitsDropdownMenu.Trigger>
 							{#snippet child({ props })}
 								<Button icon aria-label="Playback speed" {...props}>
-									<Gauge class="size-(--era-h-xs)" aria-hidden="true" />
+									<Gauge class="size-(--era-h-icon)" aria-hidden="true" />
 								</Button>
 							{/snippet}
 						</BitsDropdownMenu.Trigger>
@@ -1147,7 +1147,7 @@
 										{#snippet children({ checked })}
 											<span>{r === 1 ? 'Normal' : `${r}x`}</span>
 											{#if checked}
-												<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+												<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
 											{/if}
 										{/snippet}
 									</DropdownMenu.RadioItem>
@@ -1167,7 +1167,7 @@
 						<BitsDropdownMenu.Trigger>
 							{#snippet child({ props })}
 								<Button icon aria-label="Quality" {...props}>
-									<Settings class="size-(--era-h-xs)" aria-hidden="true" />
+									<Settings class="size-(--era-h-icon)" aria-hidden="true" />
 								</Button>
 							{/snippet}
 						</BitsDropdownMenu.Trigger>
@@ -1180,7 +1180,7 @@
 									{#snippet children({ checked })}
 										<span>Auto</span>
 										{#if checked}
-											<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+											<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
 										{/if}
 									{/snippet}
 								</DropdownMenu.RadioItem>
@@ -1189,7 +1189,7 @@
 										{#snippet children({ checked })}
 											<span>{q.height}p</span>
 											{#if checked}
-												<Check class="ml-auto size-(--era-h-xs) text-muted" aria-hidden="true" />
+												<Check class="ml-auto size-(--era-h-icon) text-muted" aria-hidden="true" />
 											{/if}
 										{/snippet}
 									</DropdownMenu.RadioItem>
@@ -1206,9 +1206,9 @@
 						onclick={(e: MouseEvent) => remote.togglePictureInPicture(e)}
 					>
 						{#if pipState}
-							<PictureInPicture2 class="size-(--era-h-xs)" aria-hidden="true" />
+							<PictureInPicture2 class="size-(--era-h-icon)" aria-hidden="true" />
 						{:else}
-							<PictureInPicture class="size-(--era-h-xs)" aria-hidden="true" />
+							<PictureInPicture class="size-(--era-h-icon)" aria-hidden="true" />
 						{/if}
 					</Button>
 				{/if}
@@ -1220,9 +1220,9 @@
 						onclick={(e: MouseEvent) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}
 					>
 						{#if fullscreenState}
-							<Minimize class="size-(--era-h-xs)" aria-hidden="true" />
+							<Minimize class="size-(--era-h-icon)" aria-hidden="true" />
 						{:else}
-							<Maximize class="size-(--era-h-xs)" aria-hidden="true" />
+							<Maximize class="size-(--era-h-icon)" aria-hidden="true" />
 						{/if}
 					</Button>
 				{/if}
@@ -1246,11 +1246,11 @@
 		<ContextMenu.Content onOpenAutoFocus={(e: Event) => e.preventDefault()}>
 			<ContextMenu.Item onSelect={togglePlay}>
 				{#if ended}
-					<RotateCcw class="size-(--era-h-xs)" aria-hidden="true" />
+					<RotateCcw class="size-(--era-h-icon)" aria-hidden="true" />
 				{:else if paused}
-					<Play class="size-(--era-h-xs)" aria-hidden="true" />
+					<Play class="size-(--era-h-icon)" aria-hidden="true" />
 				{:else}
-					<Pause class="size-(--era-h-xs)" aria-hidden="true" />
+					<Pause class="size-(--era-h-icon)" aria-hidden="true" />
 				{/if}
 				<span>{playLabel}</span>
 			</ContextMenu.Item>
@@ -1258,11 +1258,11 @@
 			{#if showVolume && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleMuted(e)}>
 					{#if mutedState || volumeState === 0}
-						<VolumeX class="size-(--era-h-xs)" aria-hidden="true" />
+						<VolumeX class="size-(--era-h-icon)" aria-hidden="true" />
 					{:else if volumeState < 0.5}
-						<Volume1 class="size-(--era-h-xs)" aria-hidden="true" />
+						<Volume1 class="size-(--era-h-icon)" aria-hidden="true" />
 					{:else}
-						<Volume2 class="size-(--era-h-xs)" aria-hidden="true" />
+						<Volume2 class="size-(--era-h-icon)" aria-hidden="true" />
 					{/if}
 					<span>{muteLabel}</span>
 				</ContextMenu.Item>
@@ -1271,7 +1271,7 @@
 			{#if showSpeed && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Gauge class="size-(--era-h-xs)" aria-hidden="true" />
+						<Gauge class="size-(--era-h-icon)" aria-hidden="true" />
 						<span class="flex-1">Speed</span>
 						<span class="ml-auto pl-(--era-gap) text-muted">
 							{rateState === 1 ? '1x' : `${rateState}x`}
@@ -1295,7 +1295,7 @@
 			{#if showQualityMenu && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Settings class="size-(--era-h-xs)" aria-hidden="true" />
+						<Settings class="size-(--era-h-icon)" aria-hidden="true" />
 						<span class="flex-1">Quality</span>
 						<span class="ml-auto pl-(--era-gap) text-muted">{qualityHint}</span>
 					</ContextMenu.SubTrigger>
@@ -1316,9 +1316,9 @@
 			{#if showPip && canEnterPip && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.togglePictureInPicture(e)}>
 					{#if pipState}
-						<PictureInPicture2 class="size-(--era-h-xs)" aria-hidden="true" />
+						<PictureInPicture2 class="size-(--era-h-icon)" aria-hidden="true" />
 					{:else}
-						<PictureInPicture class="size-(--era-h-xs)" aria-hidden="true" />
+						<PictureInPicture class="size-(--era-h-icon)" aria-hidden="true" />
 					{/if}
 					<span>{pipState ? 'Exit picture-in-picture' : 'Picture-in-picture'}</span>
 				</ContextMenu.Item>
@@ -1327,9 +1327,9 @@
 			{#if canEnterFullscreen}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}>
 					{#if fullscreenState}
-						<Minimize class="size-(--era-h-xs)" aria-hidden="true" />
+						<Minimize class="size-(--era-h-icon)" aria-hidden="true" />
 					{:else}
-						<Maximize class="size-(--era-h-xs)" aria-hidden="true" />
+						<Maximize class="size-(--era-h-icon)" aria-hidden="true" />
 					{/if}
 					<span>{fullscreenState ? 'Exit fullscreen' : 'Fullscreen'}</span>
 				</ContextMenu.Item>
@@ -1338,7 +1338,7 @@
 			<ContextMenu.Separator />
 
 			<ContextMenu.Item onSelect={downloadVideo}>
-				<Download class="size-(--era-h-xs)" aria-hidden="true" />
+				<Download class="size-(--era-h-icon)" aria-hidden="true" />
 				<span>Download video</span>
 			</ContextMenu.Item>
 		</ContextMenu.Content>
@@ -1361,7 +1361,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-md)`. */
+	   button sidesteps cascade ambiguity with `rounded-(--era-rd-control)`. */
 	:global([data-volume-cluster] [data-volume-sleeve]) {
 		visibility: hidden;
 	}

package/dist/utils/index.js

@@ -5,11 +5,11 @@ import { createTV } from 'tailwind-variants';
 // so it must conflict-resolve against the backdrop-blur group. text-body is
 // a registered font-size token — without this it would be misread as a color.
 // The rest teaches tailwind-merge era's named class API (styles/index.css):
-// values it can't know about (h-md, px-inset-md, gap-gutter, shadow-well, …)
-// must land in their real class groups, or a consumer's `class="h-lg"` would
-// fail to replace a component's h-(--era-h-md) and both would apply.
+// 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.
 // Colors (bg-elevated, bg-highlight, …) need no entry — the bg group already
-// accepts any name. rounded-xs/sm/md/lg and bare shadow/shadow-lg are stock
+// 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.
 const TIERS = ['xs', 'xxs', 'sm', 'md', 'lg'];
 const INSETS = ['inset-xxs', 'inset-sm', 'inset-md'];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "7.0.0",
+	"version": "9.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -79,6 +79,7 @@
 		},
 		"./styles": "./dist/styles/index.css",
 		"./styles/video-player": "./dist/styles/video-player.css",
+		"./styles/prose": "./dist/styles/prose.css",
 		"./styles/themes": "./dist/styles/themes.css",
 		"./css": "./dist/era-ui.css",
 		"./utilities.json": "./dist/generated-docs/utilities.json",