@signal9/era-ui 4.11.0 → 4.11.2

package/dist/styles/themes.css

@@ -78,9 +78,21 @@
 	 * that gap; pushing it darker closes it. */
 	--color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
 	--color-destructive-fg: oklch(0.96 0 0);
-	--color-success: oklch(0.65 0.17 145);
+	/* The semantic trio is one family: same lightness and chroma as destructive,
+	 * varying only in hue, so a success fill and a destructive fill carry the same
+	 * weight — which is what makes the pane's traffic lights read as three lights
+	 * rather than three unrelated colours.
+	 *
+	 * Green follows exactly (0.65 / 0.2). Yellow CANNOT, and this is a gamut wall
+	 * rather than a preference: sRGB holds no dark saturated yellow. At the red's
+	 * lightness, hue 85 caps at chroma 0.13 and renders #b3880f — brown, not
+	 * yellow. So warning takes the deepest lightness that still reads yellow at its
+	 * own ceiling (0.75 is the max chroma for that lightness), which closes most of
+	 * the gap: measured against the page, the three now sit at 5.9 / 7.0 / 9.3
+	 * where they sat at 5.9 / 7.0 / 11.1. */
+	--color-success: oklch(0.65 0.2 145);
 	--color-success-fg: oklch(0.96 0 0);
-	--color-warning: oklch(0.8 0.16 85);
+	--color-warning: oklch(0.75 0.15 85);
 	--color-warning-fg: oklch(0.162 0 0);
 }
 
@@ -117,7 +129,10 @@
 		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
 		--color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
 		--color-destructive-fg: oklch(0.98 0 0);
-		--color-success: oklch(0.5 0.17 145);
+		/* Chroma matched to destructive like the dark theme; the LIGHTNESSES stay
+		 * where they are, because here they carry white text — green at the red's
+		 * 0.65 drops to 2.99:1 against white, under the 3:1 a filled glyph needs. */
+		--color-success: oklch(0.5 0.2 145);
 		--color-success-fg: oklch(0.98 0 0);
 		--color-warning: oklch(0.72 0.15 85);
 		--color-warning-fg: oklch(0.162 0 0);

package/dist/ui/bar/bar.svelte

@@ -39,11 +39,11 @@
 		compoundVariants: [
 			// md ⊃ xxs = (3sp − sp − 10)/2 — the named token.
 			{ size: 'md', content: 'xxs', class: 'gap-(--era-xxs-inset-md) px-(--era-xxs-inset-md)' },
-			// sm ⊃ xxs = (2sp + 6 − sp − 10)/2 = (sp − 4)/2, which is ALSO (h-xxs − text)/2
-			// at 14px text — the same number --era-inset-xxs already carries, so the
-			// identity is reused rather than a fifth token invented. (lg ⊃ xxs has no
+			// sm ⊃ xxs — its own token, not the text inset it used to borrow. The two
+			// were the same number only while type was 14px at every density; dense's
+			// 12px broke the tie and left this pairing a pixel wide. (lg ⊃ xxs has no
 			// token because nothing pairs a page header with pill-tier controls.)
-			{ size: 'sm', content: 'xxs', class: 'gap-(--era-inset-xxs) px-(--era-inset-xxs)' }
+			{ size: 'sm', content: 'xxs', class: 'gap-(--era-xxs-inset-sm) px-(--era-xxs-inset-sm)' }
 		],
 		defaultVariants: { size: 'lg', content: 'tier' }
 	});

package/dist/ui/chip/chip.svelte

@@ -68,15 +68,24 @@
 			Popover.Trigger, etc.) that open on pointerdown — otherwise dismissing
 			a chip inside a trigger would also toggle the trigger.
 		-->
+		<!-- The glyph steps up a sub-tier, icon-xs -> icon-xxs (10 -> 12px at dense),
+		     the same exception Pane.Close takes and for the same reason: a dismiss is
+		     a control you have to hit, and half of a Lucide glyph's box is padding
+		     inside its own viewBox, so icon-xs drew a 5px × in a 14px button. 12
+		     leaves a 1px inset on the BOX while the ink gains a fifth of its size.
+		     It has to be written as [&_svg]: because that is the selector Button's
+		     icon variant uses — the bare size-* that sat on the <X> lost to it and
+		     had no effect at all. -->
 		<Button
 			icon
 			size="icon"
 			tone="destructive"
+			class="[&_svg]:size-(--era-icon-xxs)"
 			onclick={ondismiss}
 			onpointerdown={(e: PointerEvent) => e.stopPropagation()}
 			onpointerup={(e: PointerEvent) => e.stopPropagation()}
 		>
-			<X class="size-(--era-h-xs)" />
+			<X />
 		</Button>
 	{/if}
 </div>

package/dist/ui/code-block/code-block.svelte

@@ -23,23 +23,39 @@
 	const copyText = () => code ?? ref?.querySelector('code')?.textContent ?? '';
 </script>
 
+<!-- The same material a text field paints: the recessed fill (--era-field-bg)
+     under the well shadow, with the field's own side padding. A code block is
+     content the surrounding UI puts INTO the page — the same relationship a
+     textarea has to its form — and it used to read as RAISED chrome (bg-surface
+     + --era-shadow), which said the opposite. Sharing the tokens rather than the
+     variants keeps them in step without pretending this is a field: there is no
+     hover or focus tint, because there is nothing to type into.
+
+     The radius stays rd-lg where the field's is rd-md, and that is the one
+     deliberate difference: a container's radius follows its corner REGION, and
+     this corner holds the sm-tier copy button at --era-inset-md, so rd-sm + that
+     inset is what the corner has to be. An md radius here would leave the button
+     visibly off its curve. -->
 <div
 	bind:this={ref}
-	class={cn('relative rounded-(--era-rd-lg) bg-surface shadow-(--era-shadow)', className)}
+	class={cn(
+		'relative rounded-(--era-rd-lg) bg-(--era-field-bg) shadow-(--era-shadow-well)',
+		className
+	)}
 	{...restProps}
 >
 	<pre
-		class="overflow-x-auto p-(--era-inset-md) pr-[calc(var(--era-inset-md)+var(--era-h-sm)+var(--era-inset-md))] font-mono text-body leading-relaxed text-fg"><code
+		class="overflow-x-auto px-(--era-field-px) py-(--era-inset-md) pr-[calc(var(--era-field-px)+var(--era-h-sm)+var(--era-field-px))] font-mono text-body leading-relaxed text-fg"><code
 			>{#if children}{@render children()}{:else}{code}{/if}</code
 		></pre>
 	{#if copyable}
-		<!-- bg-surface, not transparent: the button floats over a scrollable <pre>,
-		     so long lines would show through a chromeless button. The block's own
-		     fill is bg-surface, so at rest this is pixel-identical to no background
-		     — it just occludes whatever scrolls beneath. -->
+		<!-- Filled, not transparent: the button floats over a scrollable <pre>, so
+		     long lines would show through a chromeless one. It carries the block's
+		     OWN fill, so at rest it is pixel-identical to no background — it just
+		     occludes whatever scrolls beneath. -->
 		<CopyButton
 			text={copyText}
-			class="absolute top-[calc(var(--era-inset-md)+(var(--era-text)*1.625-var(--era-h-sm))/2)] right-[calc(var(--era-inset-md)+(var(--era-text)*1.625-var(--era-h-sm))/2)] bg-surface"
+			class="absolute top-[calc(var(--era-inset-md)+(var(--era-text)*1.625-var(--era-h-sm))/2)] right-[calc(var(--era-field-px)+(var(--era-text)*1.625-var(--era-h-sm))/2)] bg-(--era-field-bg)"
 		/>
 	{/if}
 </div>

package/dist/ui/context-menu/context-menu-content.svelte

@@ -15,8 +15,16 @@
 	<ContextMenu.Content
 		bind:ref
 		align="start"
+		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
+		// to 0 on flat, so a menu there sat its rows flush against its own edges —
+		// the highlight ran edge to edge and the panel read as a list with no frame.
+		// The gutter is --era-gap, the same distance that separates the rows from
+		// each other, so a row sits an even gap from every edge (the pattern the
+		// conversations rail already documents). It is >= the panel inset at every
+		// density, so glass and bevel keep the frame protection the inset exists
+		// for.
 		class={cn(
-			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur',
+			'z-50 w-max overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur',
 			className
 		)}
 		{sideOffset}

package/dist/ui/context-menu/context-menu-item.svelte

@@ -13,7 +13,7 @@
 <ContextMenu.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -15,8 +15,16 @@
 	<DropdownMenu.Content
 		bind:ref
 		align="start"
+		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
+		// to 0 on flat, so a menu there sat its rows flush against its own edges —
+		// the highlight ran edge to edge and the panel read as a list with no frame.
+		// The gutter is --era-gap, the same distance that separates the rows from
+		// each other, so a row sits an even gap from every edge (the pattern the
+		// conversations rail already documents). It is >= the panel inset at every
+		// density, so glass and bevel keep the frame protection the inset exists
+		// for.
 		class={cn(
-			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+			'z-50 w-max min-w-(--bits-dropdown-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 			className
 		)}
 		{sideOffset}

package/dist/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -13,7 +13,7 @@
 <DropdownMenu.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -15,8 +15,16 @@
 	<Menubar.Content
 		bind:ref
 		align="start"
+		// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
+		// to 0 on flat, so a menu there sat its rows flush against its own edges —
+		// the highlight ran edge to edge and the panel read as a list with no frame.
+		// The gutter is --era-gap, the same distance that separates the rows from
+		// each other, so a row sits an even gap from every edge (the pattern the
+		// conversations rail already documents). It is >= the panel inset at every
+		// density, so glass and bevel keep the frame protection the inset exists
+		// for.
 		class={cn(
-			'z-50 w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+			'z-50 w-max min-w-(--bits-menubar-menu-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 			className
 		)}
 		{sideOffset}

package/dist/ui/menubar/menubar-item.svelte

@@ -13,7 +13,7 @@
 <Menubar.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

package/dist/ui/pane/pane-handle.svelte

@@ -34,7 +34,21 @@
 	size="md"
 	content="xxs"
 	class={cn(
-		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:inset_0_-1px_0_var(--color-divider-faded)] select-none',
+		// The divider is drawn OUTSIDE the box (0 1px 0), not inset.
+		//
+		// An inset shadow paints over the last pixel row INSIDE the bar, which is a
+		// row belonging to the content's own gap: a centred 18px control in a 24px
+		// bar has 3px above and 3px below, and the inset line ate one of the three
+		// below it. Every child of the bar therefore read 3px on top and right but
+		// 2px on the bottom — even by the box, visibly tight to the eye, which
+		// measures to the LINE.
+		//
+		// Outset costs no layout (so the bar keeps its full 24px content box and the
+		// concentric 3px walls) and puts the line where it belongs: the boundary
+		// between the bar and the content beneath it, rather than a pixel of the
+		// bar itself. It still follows the bottom radius, so the divider curves up
+		// at the ends exactly as before.
+		'shrink-0 rounded-t-none rounded-b-(--era-rd-md) [box-shadow:0_1px_0_var(--color-divider-faded)] select-none',
 		className
 	)}
 	{...restProps}

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

@@ -14,8 +14,16 @@
 <Select.Content
 	bind:ref
 	align="start"
+	// p-gutter, not p-(--era-panel-inset): the inset is SURFACE-owned and resolves
+	// to 0 on flat, so a menu there sat its rows flush against its own edges —
+	// the highlight ran edge to edge and the panel read as a list with no frame.
+	// The gutter is --era-gap, the same distance that separates the rows from
+	// each other, so a row sits an even gap from every edge (the pattern the
+	// conversations rail already documents). It is >= the panel inset at every
+	// density, so glass and bevel keep the frame protection the inset exists
+	// for.
 	class={cn(
-		'z-50 w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-(--era-panel-inset) shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
+		'z-50 w-max min-w-(--bits-select-anchor-width) overflow-hidden rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) p-gutter shadow-(--era-shadow-lg) glass-blur data-[side=bottom]:rounded-t-none data-[side=top]:rounded-b-none',
 		className
 	)}
 	{sideOffset}

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

@@ -10,7 +10,7 @@
 <Select.Item
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) cursor-pointer items-center rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
+		'flex h-(--era-h-md) cursor-pointer items-center gap-(--era-gap) rounded-(--era-item-rd) px-(--era-inset-md) text-body text-fg data-[highlighted]:bg-(--era-highlight) data-[highlighted]:shadow-(--era-highlight-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -1244,11 +1244,11 @@
 		<ContextMenu.Content onOpenAutoFocus={(e: Event) => e.preventDefault()}>
 			<ContextMenu.Item onSelect={togglePlay}>
 				{#if ended}
-					<RotateCcw class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					<RotateCcw class="size-(--era-h-xs)" aria-hidden="true" />
 				{:else if paused}
-					<Play class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					<Play class="size-(--era-h-xs)" aria-hidden="true" />
 				{:else}
-					<Pause class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+					<Pause class="size-(--era-h-xs)" aria-hidden="true" />
 				{/if}
 				<span>{playLabel}</span>
 			</ContextMenu.Item>
@@ -1256,11 +1256,11 @@
 			{#if showVolume && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleMuted(e)}>
 					{#if mutedState || volumeState === 0}
-						<VolumeX class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<VolumeX class="size-(--era-h-xs)" aria-hidden="true" />
 					{:else if volumeState < 0.5}
-						<Volume1 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Volume1 class="size-(--era-h-xs)" aria-hidden="true" />
 					{:else}
-						<Volume2 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Volume2 class="size-(--era-h-xs)" aria-hidden="true" />
 					{/if}
 					<span>{muteLabel}</span>
 				</ContextMenu.Item>
@@ -1269,7 +1269,7 @@
 			{#if showSpeed && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Gauge class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Gauge class="size-(--era-h-xs)" aria-hidden="true" />
 						<span class="flex-1">Speed</span>
 						<span class="ml-auto pl-(--era-gap) text-muted">
 							{rateState === 1 ? '1x' : `${rateState}x`}
@@ -1293,7 +1293,7 @@
 			{#if showQualityMenu && !mobileMode}
 				<ContextMenu.Sub>
 					<ContextMenu.SubTrigger>
-						<Settings class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Settings class="size-(--era-h-xs)" aria-hidden="true" />
 						<span class="flex-1">Quality</span>
 						<span class="ml-auto pl-(--era-gap) text-muted">{qualityHint}</span>
 					</ContextMenu.SubTrigger>
@@ -1314,9 +1314,9 @@
 			{#if showPip && canEnterPip && !mobileMode}
 				<ContextMenu.Item onSelect={(e: Event) => remote.togglePictureInPicture(e)}>
 					{#if pipState}
-						<PictureInPicture2 class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<PictureInPicture2 class="size-(--era-h-xs)" aria-hidden="true" />
 					{:else}
-						<PictureInPicture class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<PictureInPicture class="size-(--era-h-xs)" aria-hidden="true" />
 					{/if}
 					<span>{pipState ? 'Exit picture-in-picture' : 'Picture-in-picture'}</span>
 				</ContextMenu.Item>
@@ -1325,9 +1325,9 @@
 			{#if canEnterFullscreen}
 				<ContextMenu.Item onSelect={(e: Event) => remote.toggleFullscreen(FULLSCREEN_TARGET, e)}>
 					{#if fullscreenState}
-						<Minimize class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Minimize class="size-(--era-h-xs)" aria-hidden="true" />
 					{:else}
-						<Maximize class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+						<Maximize class="size-(--era-h-xs)" aria-hidden="true" />
 					{/if}
 					<span>{fullscreenState ? 'Exit fullscreen' : 'Fullscreen'}</span>
 				</ContextMenu.Item>
@@ -1336,7 +1336,7 @@
 			<ContextMenu.Separator />
 
 			<ContextMenu.Item onSelect={downloadVideo}>
-				<Download class="mr-(--era-gap) size-(--era-h-xs)" aria-hidden="true" />
+				<Download class="size-(--era-h-xs)" aria-hidden="true" />
 				<span>Download video</span>
 			</ContextMenu.Item>
 		</ContextMenu.Content>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "4.11.0",
+	"version": "4.11.2",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",