@signal9/era-ui 2.0.0 → 2.2.0

package/dist/generated-docs/manifest.json

@@ -1,14 +1,12 @@
 {
   "entries": [
     {
-      "slug": "quickstart",
-      "title": "Quickstart",
-      "summary": "Installation and setup guide.",
-      "tokenEstimate": 339,
-      "sections": [
-        "Hero Template"
-      ],
-      "file": "quickstart.md"
+      "slug": "spacing",
+      "title": "Spacing",
+      "summary": "The sp-derived tier ladder — heights, insets, radii, concentricity.",
+      "tokenEstimate": 20,
+      "sections": [],
+      "file": "spacing.md"
     },
     {
       "slug": "surfaces",
@@ -345,6 +343,20 @@
       "sections": [],
       "file": "command-bar.md"
     },
+    {
+      "slug": "step",
+      "title": "Step",
+      "summary": "Expandable inline step — tool calls, thinking, agent actions.",
+      "tokenEstimate": 313,
+      "sections": [
+        "Import",
+        "Step.Root",
+        "Step.Summary",
+        "Step.Content",
+        "Step.Section"
+      ],
+      "file": "step.md"
+    },
     {
       "slug": "context-menu",
       "title": "Context Menu",

package/dist/generated-docs/spacing.md

@@ -0,0 +1,3 @@
+# Spacing
+
+The sp-derived tier ladder — heights, insets, radii, concentricity.

package/dist/generated-docs/step.md

@@ -0,0 +1,51 @@
+# Step
+
+Expandable inline step — tool calls, thinking, agent actions.
+
+## Import
+
+```ts
+import { Step } from "$lib/ui/step";
+```
+
+Composed from sub-components — compose explicitly at the call site:
+
+- `Step.Root`
+- `Step.Summary`
+- `Step.Content`
+- `Step.Section`
+
+## Step.Root
+
+Inherits all props from `Collapsible.RootProps`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `status?` | `StepStatus` | `'done'` | Drives the summary's icon and shimmer; exposed as data-status. |
+| `ref?` | `(forwarded)` | `null` | bindable |
+| `open?` | `(forwarded)` | `false` | bindable |
+
+## Step.Summary
+
+Inherits all props from `PartProps<Collapsible.TriggerProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Step.Content
+
+Inherits all props from `PartProps<Collapsible.ContentProps>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `ref?` | `(forwarded)` | `null` | bindable |
+
+## Step.Section
+
+Inherits all props from `HTMLAttributes<HTMLDivElement>`.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `label?` | `string` | — | Tiny uppercase section header — INPUT, OUTPUT, … |
+| `children?` | `Snippet` | — | — |

package/dist/os/motion.d.ts

@@ -1,19 +1 @@
-import type { EasingFunction, TransitionConfig } from 'svelte/transition';
-type EraFlyParams = {
-    x?: number | string;
-    y?: number | string;
-    opacity?: number;
-    delay?: number;
-    duration?: number;
-    easing?: EasingFunction;
-};
-/**
- * Fly transition that reads Era's motion tokens from the rendered element.
- *
- * Svelte transition durations are JavaScript parameters, so hard-coded numbers
- * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
- * overlays in sync with docs settings and library consumers that set motion on
- * an ancestor.
- */
-export declare function eraFly(node: Element, { x, y, opacity, delay, duration, easing }?: EraFlyParams): TransitionConfig;
-export {};
+export { eraFly } from '../utils/motion.js';

package/dist/os/motion.js

@@ -1,44 +1,3 @@
-const durationUnits = {
-    ms: 1,
-    s: 1000
-};
-function parseDuration(value) {
-    const match = value.trim().match(/^(-?\d*\.?\d+)(ms|s)$/i);
-    if (!match)
-        return undefined;
-    return Math.max(0, Number(match[1]) * durationUnits[match[2].toLowerCase()]);
-}
-function eraDuration(node, fallback) {
-    const token = getComputedStyle(node).getPropertyValue('--era-duration');
-    return parseDuration(token) ?? fallback;
-}
-function offset(value, progress) {
-    return typeof value === 'number' ? `${value * progress}px` : `calc(${value} * ${progress})`;
-}
-function eraEase(node) {
-    return getComputedStyle(node).getPropertyValue('--era-ease').trim() || undefined;
-}
-/**
- * Fly transition that reads Era's motion tokens from the rendered element.
- *
- * Svelte transition durations are JavaScript parameters, so hard-coded numbers
- * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
- * overlays in sync with docs settings and library consumers that set motion on
- * an ancestor.
- */
-export function eraFly(node, { x = 0, y = 0, opacity = 0, delay = 0, duration = 150, easing } = {}) {
-    const style = getComputedStyle(node);
-    const targetOpacity = Number(style.opacity);
-    const transform = style.transform === 'none' ? '' : style.transform;
-    const cssEase = eraEase(node);
-    return {
-        delay,
-        duration: eraDuration(node, duration),
-        easing,
-        css: (t, u) => `
-			transform: ${transform} translate(${offset(x, u)}, ${offset(y, u)});
-			opacity: ${targetOpacity - (targetOpacity - opacity) * u};
-			${cssEase ? `animation-timing-function: ${cssEase};` : ''}
-		`
-    };
-}
+// Motion helpers moved to utils (they're layer-agnostic — the ui/ layer needs
+// them too). Re-exported here so os-internal imports keep working.
+export { eraFly } from '../utils/motion.js';

package/dist/os/taskbar.svelte

@@ -76,20 +76,14 @@
 		};
 	});
 
-	// Live clock (minute resolution is plenty; tick often enough to feel current).
-	let now = $state(new Date());
-	$effect(() => {
-		const t = setInterval(() => (now = new Date()), 10_000);
-		return () => clearInterval(t);
-	});
-	const time = $derived(now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }));
-
 	// The command bar owns everything the old spotlight overlay did, and more:
 	// every registered app launches from the root view, `windows` drills into
 	// the open windows (focus/restore — the recovery path when the window tabs
 	// are hidden), and `workspace` drills into numbered workspaces + `new`.
-	// Consumer `commands` append after the built-ins.
-	const commandItems = $derived.by((): CommandBarItem[] => {
+	// Consumer `commands` append after the built-ins (merged in a thin outer
+	// derived, so a consumer-commands change doesn't rebuild the wm closures
+	// and vice-versa).
+	const builtinItems = $derived.by((): CommandBarItem[] => {
 		const apps: CommandBarItem[] = Object.values(wm.apps).map((app) => ({
 			value: `app:${app.id}`,
 			label: app.title,
@@ -133,8 +127,9 @@
 				}
 			]
 		};
-		return [...apps, windows, workspaces, ...commands];
+		return [...apps, windows, workspaces];
 	});
+	const commandItems = $derived([...builtinItems, ...commands]);
 </script>
 
 <!-- Flush: three edges touch the shell; the exposed OUTER corners are the two
@@ -221,7 +216,6 @@
 	<!-- System tray -->
 	<div class="flex shrink-0 items-center gap-(--era-gap)">
 		{@render end?.()}
-		<span class="px-(--era-inset-sm) text-body text-muted tabular-nums">{time}</span>
 		<div class="relative">
 			<Button icon size="default" aria-label="Notifications" onclick={onNotifications}>
 				<Bell class="size-(--era-h-xs)" />

package/dist/styles/index.css

@@ -56,6 +56,32 @@
 	}
 }
 
+/* In-progress text shimmer — a bright sweep through muted text (the standard
+ * "working…" label treatment in streaming UIs). Timing derives from the motion
+ * axis (10× --era-duration ≈ 1.5s at normal, 2.6s at extra); at instant the
+ * duration is 0s and the sweep freezes on its base frame — plain muted text —
+ * so reduced-motion and data-motion="instant" both kill it for free. */
+@utility era-shimmer {
+	background: linear-gradient(
+		110deg,
+		var(--color-muted) 0% 43%,
+		var(--color-bright) 50%,
+		var(--color-muted) 57% 100%
+	);
+	background-size: 200% 100%;
+	background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: era-shimmer calc(var(--era-duration) * 10) cubic-bezier(0.7, 0, 1, 0.4) infinite;
+}
+@keyframes era-shimmer {
+	0% {
+		background-position: 100% 0;
+	}
+	100% {
+		background-position: -100% 0;
+	}
+}
+
 /* Register color tokens as Tailwind theme values for autocomplete and bare utility usage */
 @theme inline {
 	/* Density-derived body size: `text-body` replaces text-[length:var(--era-text)] */

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

@@ -61,6 +61,12 @@
 	});
 	const selected = $derived(filtered[selectedIndex]);
 	const open = $derived(focused || value !== '');
+	const hotkeyList = $derived(hotkey ? (Array.isArray(hotkey) ? hotkey : [hotkey]) : []);
+	// The focus hotkeys double as close keys while the bar is focused (a bound
+	// key is never part of a command — it toggles). Only single-character
+	// bindings qualify; chords/mod combos can't collide with typing. Escape
+	// always closes.
+	const closeKeys = $derived(new Set(['Escape', ...hotkeyList.filter((b) => b.length === 1)]));
 
 	// zsh-style ghost completion: the selected item's remaining characters laid
 	// under the caret (or the view placeholder while empty).
@@ -118,7 +124,8 @@
 				e.preventDefault();
 				complete(selected);
 			}
-		} else if (e.key === 'Escape') {
+		} else if (closeKeys.has(e.key)) {
+			e.preventDefault();
 			e.stopPropagation();
 			reset();
 			input?.blur();
@@ -136,10 +143,8 @@
 	// acts (it blurs the field); every other binding is ignored so typing a
 	// backtick in a text input never steals the caret.
 	const bindings = $derived.by((): KeyBindingMap => {
-		if (!hotkey) return {};
-		const list = Array.isArray(hotkey) ? hotkey : [hotkey];
 		return Object.fromEntries(
-			list.map((b) => [
+			hotkeyList.map((b) => [
 				b,
 				(e: KeyboardEvent) => {
 					if (isTextEntryFocused()) {
@@ -164,7 +169,7 @@
      dropdown is a flat sheet anchored under it — no border, shadow or radius,
      just the elevated surface, exactly like the shell it mirrors. -->
 <div class={cn('relative flex h-(--era-h-md) w-full min-w-0 items-center font-mono', className)}>
-	<ChevronRight class="mx-(--era-gap) size-(--era-h-xs) shrink-0 text-muted" />
+	<ChevronRight class="mx-(--era-gap) size-(--era-h-xs) shrink-0 text-fg" />
 
 	<!-- Completed segments: the locked prefix. Backspace (empty input) pops. -->
 	{#each stack as seg (seg.value)}

package/dist/ui/index.d.ts

@@ -11,6 +11,7 @@ export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';
 export * as Command from './command/index.js';
 export * from './command-bar/index.js';
+export * as Step from './step/index.js';
 export * as ContextMenu from './context-menu/index.js';
 export * as DateField from './date-field/index.js';
 export * as DatePicker from './date-picker/index.js';

package/dist/ui/index.js

@@ -11,6 +11,7 @@ export * as Combobox from './combobox/index.js';
 export * as Collapsible from './collapsible/index.js';
 export * as Command from './command/index.js';
 export * from './command-bar/index.js';
+export * as Step from './step/index.js';
 export * as ContextMenu from './context-menu/index.js';
 export * as DateField from './date-field/index.js';
 export * as DatePicker from './date-picker/index.js';

package/dist/ui/step/context.d.ts

@@ -0,0 +1,8 @@
+/** The lifecycle of a step: not started, working, finished, failed. */
+export type StepStatus = 'pending' | 'running' | 'done' | 'error';
+type StepContext = {
+    readonly status: StepStatus;
+};
+export declare function setStepContext(ctx: StepContext): void;
+export declare function getStepContext(): StepContext;
+export {};

package/dist/ui/step/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('era-step');
+export function setStepContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getStepContext() {
+    return getContext(KEY) ?? { status: 'done' };
+}

package/dist/ui/step/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Root } from './step-root.svelte';
+export { default as Summary } from './step-summary.svelte';
+export { default as Content } from './step-content.svelte';
+export { default as Section } from './step-section.svelte';
+export type { StepStatus } from './context.js';

package/dist/ui/step/index.js

@@ -0,0 +1,4 @@
+export { default as Root } from './step-root.svelte';
+export { default as Summary } from './step-summary.svelte';
+export { default as Content } from './step-content.svelte';
+export { default as Section } from './step-section.svelte';

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Collapsible.ContentProps> = $props();
+</script>
+
+<!-- Height animates on the outer (padding-free) element via bits' measured
+     content-height var — padding lives on the inner well so the animation
+     never fights box metrics. The well is recessed (shadow-well): payload the
+     step produced, not raised chrome. -->
+<Collapsible.Content bind:ref class="era-step-content overflow-hidden" {...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)',
+			className
+		)}
+	>
+		{@render children?.()}
+	</div>
+</Collapsible.Content>
+
+<style>
+	:global(.era-step-content[data-state='open']) {
+		animation: era-step-expand var(--era-duration) var(--era-ease);
+	}
+	:global(.era-step-content[data-state='closed']) {
+		animation: era-step-collapse var(--era-duration) var(--era-ease);
+	}
+	@keyframes -global-era-step-expand {
+		from {
+			height: 0;
+			opacity: 0;
+		}
+		to {
+			height: var(--bits-collapsible-content-height);
+			opacity: 1;
+		}
+	}
+	@keyframes -global-era-step-collapse {
+		from {
+			height: var(--bits-collapsible-content-height);
+			opacity: 1;
+		}
+		to {
+			height: 0;
+			opacity: 0;
+		}
+	}
+</style>

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

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const StepContent: import("svelte").Component<PartProps<Collapsible.ContentProps>, {}, "ref">;
+type StepContent = ReturnType<typeof StepContent>;
+export default StepContent;

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+	import { setStepContext, type StepStatus } from './context.js';
+
+	let {
+		ref = $bindable(null),
+		open = $bindable(false),
+		status = 'done',
+		class: className,
+		...restProps
+	}: Collapsible.RootProps & {
+		/** Drives the summary's icon and shimmer; exposed as data-status. */
+		status?: StepStatus;
+	} = $props();
+
+	// Shared with Summary via context (a getter, so status stays reactive).
+	setStepContext({
+		get status() {
+			return status;
+		}
+	});
+</script>
+
+<Collapsible.Root
+	bind:ref
+	bind:open
+	data-status={status}
+	class={cn('group/step flex w-full min-w-0 flex-col', className)}
+	{...restProps}
+/>

package/dist/ui/step/step-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import { Collapsible } from 'bits-ui';
+import { type StepStatus } from './context.js';
+type $$ComponentProps = Collapsible.RootProps & {
+    /** Drives the summary's icon and shimmer; exposed as data-status. */
+    status?: StepStatus;
+};
+declare const StepRoot: import("svelte").Component<$$ComponentProps, {}, "ref" | "open">;
+type StepRoot = ReturnType<typeof StepRoot>;
+export default StepRoot;

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

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '../../utils/index.js';
+
+	let {
+		label,
+		children,
+		class: className,
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Tiny uppercase section header — INPUT, OUTPUT, … */
+		label?: string;
+		children?: Snippet;
+	} = $props();
+</script>
+
+<div class={cn('flex min-w-0 flex-col gap-(--era-gap)', className)} {...restProps}>
+	{#if label}
+		<span class="text-[0.625rem] leading-none tracking-[0.15em] text-muted uppercase">{label}</span>
+	{/if}
+	{@render children?.()}
+</div>

package/dist/ui/step/step-section.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Tiny uppercase section header — INPUT, OUTPUT, … */
+    label?: string;
+    children?: Snippet;
+};
+declare const StepSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepSection = ReturnType<typeof StepSection>;
+export default StepSection;

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { Collapsible } from 'bits-ui';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+	import CircleCheck from '@lucide/svelte/icons/circle-check';
+	import CircleX from '@lucide/svelte/icons/circle-x';
+	import CircleDashed from '@lucide/svelte/icons/circle-dashed';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn, type PartProps } from '../../utils/index.js';
+	import { getStepContext } from './context.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Collapsible.TriggerProps> = $props();
+
+	const step = getStepContext();
+</script>
+
+<!-- The collapsed line: status icon, label (shimmering while running — the
+     shimmer freezes to plain muted text at instant motion), rotating chevron.
+     Quiet by design — a step reads as an aside in the conversation, not a
+     control; it brightens on hover to reveal it's expandable. The spinner is
+     a progress indicator, not decoration, so it spins at every motion level. -->
+<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',
+		className
+	)}
+	{...restProps}
+>
+	{#if step.status === 'running'}
+		<LoaderCircle class="size-(--era-h-xs) 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" />
+	{:else if step.status === 'error'}
+		<CircleX class="size-(--era-h-xs) shrink-0 text-destructive" aria-hidden="true" />
+	{:else}
+		<CircleDashed class="size-(--era-h-xs) shrink-0" aria-hidden="true" />
+	{/if}
+	<span
+		class={cn(
+			'flex min-w-0 flex-1 items-center gap-(--era-gap) truncate text-left',
+			step.status === 'running' && 'era-shimmer'
+		)}
+	>
+		{@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"
+		aria-hidden="true"
+	/>
+</Collapsible.Trigger>

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

@@ -0,0 +1,5 @@
+import { Collapsible } from 'bits-ui';
+import { type PartProps } from '../../utils/index.js';
+declare const StepSummary: import("svelte").Component<PartProps<Collapsible.TriggerProps>, {}, "ref">;
+type StepSummary = ReturnType<typeof StepSummary>;
+export default StepSummary;

package/dist/utils/index.d.ts

@@ -14,3 +14,4 @@ export type PartProps<T> = WithoutChildrenOrChild<T> & {
     children?: Snippet;
 };
 export { hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey, type KeyBindingMap, type KeyBindingPress, type KeyBindingOptions } from './hotkeys.js';
+export { eraFly } from './motion.js';

package/dist/utils/index.js

@@ -23,3 +23,4 @@ export function cn(...inputs) {
 /** `tv` preconfigured with this library's tailwind-merge settings. */
 export const tv = createTV({ twMergeConfig });
 export { hotkeys, keys, parseKeybinding, matchKeyBindingPress, createKeybindingsHandler, formatKeybinding, isApplePlatform, modKey } from './hotkeys.js';
+export { eraFly } from './motion.js';

package/dist/utils/motion.d.ts

@@ -0,0 +1,19 @@
+import type { EasingFunction, TransitionConfig } from 'svelte/transition';
+type EraFlyParams = {
+    x?: number | string;
+    y?: number | string;
+    opacity?: number;
+    delay?: number;
+    duration?: number;
+    easing?: EasingFunction;
+};
+/**
+ * Fly transition that reads Era's motion tokens from the rendered element.
+ *
+ * Svelte transition durations are JavaScript parameters, so hard-coded numbers
+ * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
+ * overlays in sync with docs settings and library consumers that set motion on
+ * an ancestor.
+ */
+export declare function eraFly(node: Element, { x, y, opacity, delay, duration, easing }?: EraFlyParams): TransitionConfig;
+export {};

package/dist/utils/motion.js

@@ -0,0 +1,44 @@
+const durationUnits = {
+    ms: 1,
+    s: 1000
+};
+function parseDuration(value) {
+    const match = value.trim().match(/^(-?\d*\.?\d+)(ms|s)$/i);
+    if (!match)
+        return undefined;
+    return Math.max(0, Number(match[1]) * durationUnits[match[2].toLowerCase()]);
+}
+function eraDuration(node, fallback) {
+    const token = getComputedStyle(node).getPropertyValue('--era-duration');
+    return parseDuration(token) ?? fallback;
+}
+function offset(value, progress) {
+    return typeof value === 'number' ? `${value * progress}px` : `calc(${value} * ${progress})`;
+}
+function eraEase(node) {
+    return getComputedStyle(node).getPropertyValue('--era-ease').trim() || undefined;
+}
+/**
+ * Fly transition that reads Era's motion tokens from the rendered element.
+ *
+ * Svelte transition durations are JavaScript parameters, so hard-coded numbers
+ * bypass the runtime `data-motion` axis. Reading `--era-duration` here keeps OS
+ * overlays in sync with docs settings and library consumers that set motion on
+ * an ancestor.
+ */
+export function eraFly(node, { x = 0, y = 0, opacity = 0, delay = 0, duration = 150, easing } = {}) {
+    const style = getComputedStyle(node);
+    const targetOpacity = Number(style.opacity);
+    const transform = style.transform === 'none' ? '' : style.transform;
+    const cssEase = eraEase(node);
+    return {
+        delay,
+        duration: eraDuration(node, duration),
+        easing,
+        css: (t, u) => `
+			transform: ${transform} translate(${offset(x, u)}, ${offset(y, u)});
+			opacity: ${targetOpacity - (targetOpacity - opacity) * u};
+			${cssEase ? `animation-timing-function: ${cssEase};` : ''}
+		`
+    };
+}

package/package.json

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