@signal9/era-ui 4.11.1 → 4.12.0

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

@@ -23,10 +23,21 @@
 			// Text-only: symmetric pill padding, inter-element gap for a lead icon.
 			{ size: 'sm', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-sm)' },
 			{ size: 'xxs', dismissible: false, class: 'gap-(--era-gap) pr-(--era-pill-xxs)' },
-			// Dismissible: the xs button nests with the xs-inset-T concentric gap,
-			// mirrored as the right padding so it sits evenly in the pill.
-			{ size: 'sm', dismissible: true, class: 'gap-(--era-xs-inset-sm) pr-(--era-xs-inset-sm)' },
-			{ size: 'xxs', dismissible: true, class: 'gap-(--era-xs-inset-xxs) pr-(--era-xs-inset-xxs)' }
+			// Dismissible, two geometries because the two tiers afford different ones:
+			//
+			//   sm  — the xxs-tier button NESTS, with its concentric gap mirrored as
+			//         the right padding (--era-xxs-inset-sm). 18px of hit target, and
+			//         since the dismiss glyph is 12px in every box, the ink sits where
+			//         the old 14px button put it — (h − glyph)/2 telescopes.
+			//   xxs — nesting has run out of road: density.css's own note says xxs
+			//         "is sized around text, not as a container", and the best a
+			//         nested button managed here was 1px of pad. So the dismiss is a
+			//         flush END-CAP instead — a full-height segment of the pill
+			//         (pr-0; the button supplies the right edge). Flush means offset
+			//         zero, and at offset zero concentric radius = the chip's own, so
+			//         the cap shares rd-xxs exactly rather than approximating it.
+			{ size: 'sm', dismissible: true, class: 'gap-(--era-xxs-inset-sm) pr-(--era-xxs-inset-sm)' },
+			{ size: 'xxs', dismissible: true, class: 'gap-(--era-xs-inset-xxs) pr-0' }
 		],
 		defaultVariants: { size: 'sm', dismissible: false }
 	});
@@ -68,15 +79,22 @@
 			Popover.Trigger, etc.) that open on pointerdown — otherwise dismissing
 			a chip inside a trigger would also toggle the trigger.
 		-->
+		<!-- One tier of button for both chips — xxs, whose default glyph IS the
+		     12px dismiss ink (a dismiss is a control you have to hit, and half a
+		     Lucide glyph's box is viewBox padding: the old icon-xs drew a 5px ×).
+		     In the sm chip it nests; in the xxs chip the same button is the flush
+		     end-cap, so only its OUTER corners round — squaring the inner pair is
+		     what reads as "segment of this pill" rather than "pill on a pill". -->
 		<Button
 			icon
-			size="icon"
+			size="xxs"
 			tone="destructive"
+			class={size === 'xxs' ? 'rounded-l-none' : undefined}
 			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/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/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.1",
+	"version": "4.12.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",