@signal9/era-ui 2.21.0 → 2.23.0

package/dist/ui/command-bar/command-bar.svelte

@@ -214,7 +214,7 @@
 			role="listbox"
 			tabindex="-1"
 			aria-label="Commands"
-			class="glass-blur absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg)"
+			class="absolute top-full left-0 z-50 max-h-64 w-full overflow-x-hidden overflow-y-auto bg-(--era-surface-bg-elevated) shadow-(--era-shadow-lg) glass-blur"
 			onmousedown={(e) => e.preventDefault()}
 		>
 			{#if !filtered.length}
@@ -234,7 +234,7 @@
 						tabindex={-1}
 						aria-selected={i === selectedIndex}
 						class={cn(
-							'flex h-(--era-h-md) cursor-default era-text-trim items-center gap-(--era-gap) px-(--era-inset-md) text-body whitespace-nowrap',
+							'flex h-(--era-h-md) cursor-default items-center gap-(--era-gap) px-(--era-inset-md) text-body era-text-trim whitespace-nowrap',
 							i === selectedIndex ? 'bg-3 text-bright' : 'text-fg'
 						)}
 						onclick={() => choose(item)}

package/dist/ui/copy-button/copy-button.svelte

@@ -92,6 +92,8 @@
 	<span class="relative block size-(--era-h-xs) shrink-0">
 		<IdleIcon class={cn(iconBase, status === 'idle' ? iconIn : iconOut)} />
 		<SuccessIcon class={cn(iconBase, 'text-success', status === 'success' ? iconIn : iconOut)} />
-		<FailureIcon class={cn(iconBase, 'text-destructive', status === 'failure' ? iconIn : iconOut)} />
+		<FailureIcon
+			class={cn(iconBase, 'text-destructive', status === 'failure' ? iconIn : iconOut)}
+		/>
 	</span>
 </Button>

package/dist/ui/input/input.svelte

@@ -16,7 +16,7 @@
 	bind:this={ref}
 	bind:value
 	class={cn(
-		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight) era-text-trim',
+		'flex h-(--era-h-md) w-full era-interactive rounded-(--era-rd-md) bg-(--era-surface-bg-elevated) px-(--era-inset-md) text-body era-text-trim text-fg shadow-(--era-shadow-well) placeholder:text-muted hover:bg-(--era-highlight) focus:bg-(--era-highlight)',
 		className
 	)}
 	{...restProps}

package/dist/ui/kv/kv.svelte

@@ -21,7 +21,7 @@
 <span
 	bind:this={ref}
 	class={cn(
-		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body leading-none shadow-(--era-shadow) era-text-trim',
+		'inline-flex h-(--era-h-xxs) items-center overflow-hidden rounded-(--era-rd-xxs) bg-hover font-mono text-body era-text-trim leading-none shadow-(--era-shadow)',
 		className
 	)}
 	{...restProps}

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

@@ -18,6 +18,14 @@
      movement and suppresses the trailing click after a real drag). Its natural
      rd-xs is what the PANE's corner radius conforms to (rd-sm — see Pane.Root),
      not the other way round. -->
-<Button bind:ref icon size="icon" tone="destructive" aria-label="Close" class={className} {...restProps}>
+<Button
+	bind:ref
+	icon
+	size="icon"
+	tone="destructive"
+	aria-label="Close"
+	class={className}
+	{...restProps}
+>
 	<X class="size-(--era-h-xs)" />
 </Button>

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

@@ -14,7 +14,7 @@
 <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 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) era-text-trim',
+		'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)',
 		className
 	)}
 	{...restProps}

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

@@ -26,7 +26,7 @@
 <Collapsible.Trigger
 	bind:ref
 	class={cn(
-		'flex h-(--era-h-md) w-full min-w-0 cursor-pointer era-interactive items-center gap-(--era-gap) rounded-(--era-rd-md) px-(--era-inset-md) text-body text-muted transition-colors duration-(--era-duration) ease-(--era-ease) hover:text-fg era-text-trim',
+		'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',
 		className
 	)}
 	{...restProps}

package/package.json

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

package/skill/SKILL.md

@@ -34,13 +34,13 @@ to ~13px, silently shrinking every rem-derived token).
 
 ## The tier ladder
 
-| Tier  | Height token   | Radius token    | Use for                              |
-| ----- | -------------- | --------------- | ------------------------------------ |
-| `xs`  | `--era-h-xs`   | `--era-rd-xs`   | icons (THE icon size), switch thumbs |
-| `xxs` | `--era-h-xxs`  | `--era-rd-xxs`  | pills nested inside md (badge/chip in a button) |
-| `sm`  | `--era-h-sm`   | `--era-rd-sm`   | standalone pills, switch tracks, KV  |
-| `md`  | `--era-h-md`   | `--era-rd-md`   | buttons, inputs, selects, triggers   |
-| `lg`  | `--era-h-lg`   | `--era-rd-lg`   | bars, containers, dialog headers     |
+| Tier  | Height token  | Radius token   | Use for                                         |
+| ----- | ------------- | -------------- | ----------------------------------------------- |
+| `xs`  | `--era-h-xs`  | `--era-rd-xs`  | icons (THE icon size), switch thumbs            |
+| `xxs` | `--era-h-xxs` | `--era-rd-xxs` | pills nested inside md (badge/chip in a button) |
+| `sm`  | `--era-h-sm`  | `--era-rd-sm`  | standalone pills, switch tracks, KV             |
+| `md`  | `--era-h-md`  | `--era-rd-md`  | buttons, inputs, selects, triggers              |
+| `lg`  | `--era-h-lg`  | `--era-rd-lg`  | bars, containers, dialog headers                |
 
 Usage: `h-(--era-h-md)`, `rounded-(--era-rd-md)`, icons `size-(--era-h-xs)`.
 Always the paren shorthand — never `h-[var(--era-h-md)]`.
@@ -119,8 +119,8 @@ motion-axis-aware for free.
 
 ```svelte
 <script lang="ts">
-  import { Button, Badge, OS, AI } from '@sig-nine/era-ui';
-  import * as Select from '@sig-nine/era-ui'; // namespaced parts: Select.Root…
+	import { Button, Badge, OS, AI } from '@sig-nine/era-ui';
+	import * as Select from '@sig-nine/era-ui'; // namespaced parts: Select.Root…
 </script>
 ```