@signal9/era-ui 1.1.2

package/dist/styles/surfaces/glass.css

@@ -0,0 +1,127 @@
+/*
+ * Glass — frosted, corner-lit material (Apple lineage)
+ *
+ * Fills are translucent over a backdrop-filter of blur + saturate — the
+ * saturation is the load-bearing half; blur alone reads muddy. Speculars
+ * are negative-spread inset arcs whose offset slightly exceeds the spread,
+ * so a thin crescent of light hugs the corner curve: stronger top-left
+ * (light source), fainter bottom-right (refracted counter-glow), plus a
+ * hairline rim that sells the pane's physicality. Dark mode is a raised
+ * smoked plate; light mode a raised white material with a faint dark rim
+ * (white-on-white highlights can't define an edge alone).
+ *
+ * Transient feedback is expressed as light, not paint: a translucent
+ * bright wash (--era-highlight) plus a shine (--era-highlight-shadow) that
+ * brightens the arcs and adds an inner sheen. Menus take the inset
+ * treatment (macOS-style) so row highlights never touch the rim or arcs.
+ */
+[data-surface='glass'] {
+	--era-divider-color: light-dark(
+		color-mix(in oklch, var(--color-bright) 12%, transparent),
+		color-mix(in oklch, var(--color-bright) 8%, transparent)
+	);
+	--era-surface-bg: light-dark(
+		color-mix(in oklch, var(--color-1) 66%, transparent),
+		color-mix(in oklch, var(--color-2) 62%, transparent)
+	);
+	/* Elevated = floating menus (select, dropdown, popover, context-menu). These
+	 * sit over arbitrary content, so they carry more fill than the large base
+	 * panels — enough that the blurred backdrop reads as frost, not as legible
+	 * content bleeding through. Still translucent: the glass is intact. */
+	--era-surface-bg-elevated: light-dark(
+		color-mix(in oklch, var(--color-1) 90%, transparent),
+		color-mix(in oklch, var(--color-3) 85%, transparent)
+	);
+
+	--era-shadow:
+		inset 1.5px 1.5px 0 -1px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 70%, transparent),
+				color-mix(in oklch, var(--color-bright) 18%, transparent)
+			),
+		inset -1.5px -1.5px 0 -1px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 35%, transparent),
+				color-mix(in oklch, var(--color-bright) 7%, transparent)
+			),
+		inset 0 0 0 0.5px
+			light-dark(
+				color-mix(in oklch, var(--color-bright) 8%, transparent),
+				color-mix(in oklch, var(--color-bright) 6%, transparent)
+			);
+	--era-shadow-lg:
+		inset 2px 2px 0 -1.25px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 85%, transparent),
+				color-mix(in oklch, var(--color-bright) 24%, transparent)
+			),
+		inset -2px -2px 0 -1.25px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 45%, transparent),
+				color-mix(in oklch, var(--color-bright) 10%, transparent)
+			),
+		inset 0 0 0 0.5px
+			light-dark(
+				color-mix(in oklch, var(--color-bright) 6%, transparent),
+				color-mix(in oklch, var(--color-bright) 7%, transparent)
+			),
+		inset 0 0 24px 0
+			light-dark(transparent, color-mix(in oklch, var(--color-bright) 4%, transparent)),
+		0 12px 32px -8px
+			light-dark(color-mix(in oklch, var(--color-bright) 18%, transparent), oklch(0 0 0 / 0.35));
+
+	--era-highlight: light-dark(
+		color-mix(in oklch, var(--color-bright) 9%, transparent),
+		color-mix(in oklch, var(--color-bright) 12%, transparent)
+	);
+	--era-highlight-shadow:
+		inset 1.5px 1.5px 0 -1px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 85%, transparent),
+				color-mix(in oklch, var(--color-bright) 28%, transparent)
+			),
+		inset -1.5px -1.5px 0 -1px
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 45%, transparent),
+				color-mix(in oklch, var(--color-bright) 12%, transparent)
+			),
+		inset 0 0 0 0.5px
+			light-dark(
+				color-mix(in oklch, var(--color-bright) 10%, transparent),
+				color-mix(in oklch, var(--color-bright) 9%, transparent)
+			),
+		inset 0 0 12px 0
+			light-dark(
+				color-mix(in oklch, oklch(1 0 0) 35%, transparent),
+				color-mix(in oklch, var(--color-bright) 6%, transparent)
+			);
+
+	--era-panel-inset: 2px;
+	--era-item-rd-scale: 1;
+	--era-blur: 20px;
+	/* Blur alone reads muddy/gray; saturation restores the backdrop's color
+	 * the way Apple's vibrancy does. */
+	--era-saturate: 180%;
+}
+
+/* Accessibility — honor reduced-transparency: solid fills, no filter,
+ * opaque highlight. Equal specificity, declared later, wins the cascade. */
+@media (prefers-reduced-transparency: reduce) {
+	[data-surface='glass'] {
+		--era-surface-bg: var(--color-2);
+		--era-surface-bg-elevated: var(--color-3);
+		--era-blur: 0px;
+		--era-saturate: 100%;
+		--era-highlight: var(--color-hover);
+		--era-highlight-shadow: var(--era-shadow);
+	}
+}
+
+/* Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
+ * is a registered utility, gated to glass subtrees. */
+@utility glass-blur {
+	[data-surface='glass'] & {
+		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+	}
+}

package/dist/styles/themes.css

@@ -0,0 +1,351 @@
+/*
+ * Era UI - Theme Definitions
+ *
+ * 12-step neutral scale using OKLCH.
+ * Dark theme is the default. Light theme reverses the scale.
+ *
+ * Usage:
+ *   - System preference is respected automatically.
+ *   - Add class="dark" to force dark mode.
+ *   - Add class="light" to force light mode.
+ *   - Add data-theme="adobe" to swap the neutral scale for a
+ *     sun-baked clay palette (modern New Mexico). Composes with
+ *     dark/light the same way the default neutral scale does.
+ *   - Add data-theme="sand" for a cooler sandstone palette with
+ *     mint contrast.
+ */
+
+/* -------------------------------------------------- */
+/* Dark theme (default)                               */
+/* -------------------------------------------------- */
+:root {
+	background-color: var(--color-1);
+	color: var(--color-fg);
+}
+
+:root,
+.dark {
+	color-scheme: dark;
+
+	--color-1: oklch(0.162 0 0);
+	--color-2: oklch(0.195 0 0);
+	--color-3: oklch(0.254 0 0);
+	--color-4: oklch(0.302 0 0);
+	--color-5: oklch(0.348 0 0);
+	--color-6: oklch(0.396 0 0);
+	--color-7: oklch(0.459 0 0);
+	--color-8: oklch(0.549 0 0);
+	--color-9: oklch(0.649 0 0);
+	--color-10: oklch(0.72 0 0);
+	--color-11: oklch(0.863 0 0);
+	--color-12: oklch(0.933 0 0);
+
+	/* Semantic tokens */
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: oklch(0.25 0 0);
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	/* Accent tokens — override these to theme the library */
+	--color-primary: var(--color-fg);
+	--color-primary-fg: var(--color-1);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-destructive: oklch(0.675 0.3 30);
+	--color-destructive-fg: oklch(0.96 0 0);
+	--color-success: oklch(0.65 0.17 145);
+	--color-success-fg: oklch(0.96 0 0);
+}
+
+/* -------------------------------------------------- */
+/* Light theme (reversed scale)                       */
+/* -------------------------------------------------- */
+@media (prefers-color-scheme: light) {
+	:root:not(.dark) {
+		color-scheme: light;
+
+		--color-1: oklch(0.933 0 0);
+		--color-2: oklch(0.863 0 0);
+		--color-3: oklch(0.72 0 0);
+		--color-4: oklch(0.649 0 0);
+		--color-5: oklch(0.549 0 0);
+		--color-6: oklch(0.459 0 0);
+		--color-7: oklch(0.396 0 0);
+		--color-8: oklch(0.348 0 0);
+		--color-9: oklch(0.302 0 0);
+		--color-10: oklch(0.254 0 0);
+		--color-11: oklch(0.195 0 0);
+		--color-12: oklch(0.162 0 0);
+
+		--color-border: var(--color-5);
+		--color-surface: var(--color-2);
+		--color-hover: oklch(0.8 0 0);
+		--color-fg: var(--color-11);
+		--color-bright: var(--color-12);
+		--color-muted: var(--color-10);
+
+		/* Accent tokens */
+		--color-primary: var(--color-fg);
+		--color-primary-fg: var(--color-1);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-destructive: oklch(0.675 0.3 30);
+		--color-destructive-fg: oklch(0.98 0 0);
+		--color-success: oklch(0.5 0.17 145);
+		--color-success-fg: oklch(0.98 0 0);
+	}
+}
+
+.light {
+	color-scheme: light;
+
+	--color-1: oklch(0.933 0 0);
+	--color-2: oklch(0.863 0 0);
+	--color-3: oklch(0.72 0 0);
+	--color-4: oklch(0.649 0 0);
+	--color-5: oklch(0.549 0 0);
+	--color-6: oklch(0.459 0 0);
+	--color-7: oklch(0.396 0 0);
+	--color-8: oklch(0.348 0 0);
+	--color-9: oklch(0.302 0 0);
+	--color-10: oklch(0.254 0 0);
+	--color-11: oklch(0.195 0 0);
+	--color-12: oklch(0.162 0 0);
+
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: oklch(0.8 0 0);
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	/* Accent tokens */
+	--color-primary: var(--color-fg);
+	--color-primary-fg: var(--color-1);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-destructive: oklch(0.675 0.3 30);
+	--color-destructive-fg: oklch(0.98 0 0);
+	--color-success: oklch(0.5 0.17 145);
+	--color-success-fg: oklch(0.98 0 0);
+}
+
+/* -------------------------------------------------- */
+/* Adobe — dark (default for [data-theme='adobe'])    */
+/*                                                    */
+/* Dusk over sandstone. Base neutrals stay warm-sand,   */
+/* while selective turquoise accents add a cool counter */
+/* point so the palette breaks the rules without losing */
+/* harmony.                                             */
+/* -------------------------------------------------- */
+:root[data-theme='adobe'],
+[data-theme='adobe'].dark {
+	color-scheme: dark;
+
+	--color-1: oklch(0.162 0.016 48);
+	--color-2: oklch(0.198 0.02 52);
+	--color-3: oklch(0.254 0.024 56);
+	--color-4: oklch(0.302 0.028 60);
+	--color-5: oklch(0.348 0.032 64);
+	--color-6: oklch(0.396 0.036 68);
+	--color-7: oklch(0.459 0.034 72);
+	--color-8: oklch(0.549 0.03 76);
+	--color-9: oklch(0.649 0.024 82);
+	--color-10: oklch(0.72 0.02 86);
+	--color-11: oklch(0.863 0.016 90);
+	--color-12: oklch(0.933 0.014 94);
+
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: oklch(0.252 0.024 56);
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	/* Warm sandstone primary + unexpected turquoise support. */
+	--color-primary: oklch(0.74 0.108 68);
+	--color-primary-fg: oklch(0.19 0.014 50);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 78%, var(--color-success));
+	--color-destructive: oklch(0.66 0.17 30);
+	--color-destructive-fg: oklch(0.96 0.016 90);
+	--color-success: oklch(0.7 0.125 184);
+	--color-success-fg: oklch(0.19 0.014 50);
+}
+
+/* -------------------------------------------------- */
+/* Adobe — light (sun-bleached clay)                  */
+/*                                                    */
+/* Reversed scale: pale sand at the floor, espresso   */
+/* at the ceiling. Same hue ramp as dark adobe so the */
+/* two variants feel like the same place at different */
+/* times of day.                                      */
+/* -------------------------------------------------- */
+@media (prefers-color-scheme: light) {
+	:root[data-theme='adobe']:not(.dark) {
+		color-scheme: light;
+
+		--color-1: oklch(0.933 0.014 78);
+		--color-2: oklch(0.863 0.018 75);
+		--color-3: oklch(0.72 0.026 70);
+		--color-4: oklch(0.649 0.034 66);
+		--color-5: oklch(0.549 0.046 60);
+		--color-6: oklch(0.459 0.056 55);
+		--color-7: oklch(0.396 0.054 52);
+		--color-8: oklch(0.348 0.048 49);
+		--color-9: oklch(0.302 0.04 46);
+		--color-10: oklch(0.254 0.032 43);
+		--color-11: oklch(0.198 0.024 40);
+		--color-12: oklch(0.162 0.018 38);
+
+		--color-border: var(--color-5);
+		--color-surface: var(--color-2);
+		--color-hover: oklch(0.81 0.022 73);
+		--color-fg: var(--color-11);
+		--color-bright: var(--color-12);
+		--color-muted: var(--color-10);
+
+		--color-primary: oklch(0.515 0.16 38);
+		--color-primary-fg: oklch(0.96 0.014 78);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-destructive: oklch(0.575 0.22 28);
+		--color-destructive-fg: oklch(0.98 0.012 78);
+		--color-success: oklch(0.5 0.13 158);
+		--color-success-fg: oklch(0.98 0.012 78);
+	}
+}
+
+[data-theme='adobe'].light {
+	color-scheme: light;
+
+	--color-1: oklch(0.933 0.014 78);
+	--color-2: oklch(0.863 0.018 75);
+	--color-3: oklch(0.72 0.026 70);
+	--color-4: oklch(0.649 0.034 66);
+	--color-5: oklch(0.549 0.046 60);
+	--color-6: oklch(0.459 0.056 55);
+	--color-7: oklch(0.396 0.054 52);
+	--color-8: oklch(0.348 0.048 49);
+	--color-9: oklch(0.302 0.04 46);
+	--color-10: oklch(0.254 0.032 43);
+	--color-11: oklch(0.198 0.024 40);
+	--color-12: oklch(0.162 0.018 38);
+
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: oklch(0.81 0.022 73);
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	--color-primary: oklch(0.515 0.16 38);
+	--color-primary-fg: oklch(0.96 0.014 78);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-destructive: oklch(0.575 0.22 28);
+	--color-destructive-fg: oklch(0.98 0.012 78);
+	--color-success: oklch(0.5 0.13 158);
+	--color-success-fg: oklch(0.98 0.012 78);
+}
+
+/* -------------------------------------------------- */
+/* Sand — dark (cooler sandstone with mint contrast)  */
+/* -------------------------------------------------- */
+:root[data-theme='sand'],
+[data-theme='sand'].dark {
+	color-scheme: dark;
+
+	--color-1: oklch(0.25 0.019 56);
+	--color-2: oklch(0.3 0.022 57);
+	--color-3: oklch(0.37 0.026 58);
+	--color-4: oklch(0.45 0.03 58);
+	--color-5: oklch(0.54 0.034 59);
+	--color-6: oklch(0.62 0.036 58);
+	--color-7: oklch(0.7 0.035 57);
+	--color-8: oklch(0.76 0.033 56);
+	--color-9: oklch(0.8 0.034 54);
+	--color-10: oklch(0.84 0.028 62);
+	--color-11: oklch(0.89 0.022 70);
+	--color-12: oklch(0.93 0.016 78);
+
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	--color-primary: oklch(0.8 0.034 54);
+	--color-primary-fg: var(--color-1);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 80%, var(--color-success));
+	--color-destructive: oklch(0.665 0.15 33);
+	--color-destructive-fg: var(--color-12);
+	--color-success: oklch(0.71 0.09 164);
+	--color-success-fg: var(--color-1);
+}
+
+/* -------------------------------------------------- */
+/* Sand — light                                        */
+/* -------------------------------------------------- */
+@media (prefers-color-scheme: light) {
+	:root[data-theme='sand']:not(.dark) {
+		color-scheme: light;
+
+		--color-1: oklch(0.96 0.01 78);
+		--color-2: oklch(0.92 0.014 74);
+		--color-3: oklch(0.85 0.02 68);
+		--color-4: oklch(0.78 0.026 62);
+		--color-5: oklch(0.69 0.032 57);
+		--color-6: oklch(0.6 0.035 54);
+		--color-7: oklch(0.52 0.033 52);
+		--color-8: oklch(0.45 0.03 50);
+		--color-9: oklch(0.39 0.026 48);
+		--color-10: oklch(0.32 0.022 46);
+		--color-11: oklch(0.26 0.018 44);
+		--color-12: oklch(0.21 0.014 42);
+
+		--color-border: var(--color-5);
+		--color-surface: var(--color-2);
+		--color-hover: oklch(0.88 0.016 72);
+		--color-fg: var(--color-11);
+		--color-bright: var(--color-12);
+		--color-muted: var(--color-10);
+
+		--color-primary: oklch(0.55 0.12 58);
+		--color-primary-fg: oklch(0.97 0.008 80);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-destructive: oklch(0.59 0.18 32);
+		--color-destructive-fg: oklch(0.98 0.008 80);
+		--color-success: oklch(0.54 0.11 164);
+		--color-success-fg: oklch(0.98 0.008 80);
+	}
+}
+
+[data-theme='sand'].light {
+	color-scheme: light;
+
+	--color-1: oklch(0.96 0.01 78);
+	--color-2: oklch(0.92 0.014 74);
+	--color-3: oklch(0.85 0.02 68);
+	--color-4: oklch(0.78 0.026 62);
+	--color-5: oklch(0.69 0.032 57);
+	--color-6: oklch(0.6 0.035 54);
+	--color-7: oklch(0.52 0.033 52);
+	--color-8: oklch(0.45 0.03 50);
+	--color-9: oklch(0.39 0.026 48);
+	--color-10: oklch(0.32 0.022 46);
+	--color-11: oklch(0.26 0.018 44);
+	--color-12: oklch(0.21 0.014 42);
+
+	--color-border: var(--color-5);
+	--color-surface: var(--color-2);
+	--color-hover: oklch(0.88 0.016 72);
+	--color-fg: var(--color-11);
+	--color-bright: var(--color-12);
+	--color-muted: var(--color-10);
+
+	--color-primary: oklch(0.55 0.12 58);
+	--color-primary-fg: oklch(0.97 0.008 80);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-destructive: oklch(0.59 0.18 32);
+	--color-destructive-fg: oklch(0.98 0.008 80);
+	--color-success: oklch(0.54 0.11 164);
+	--color-success-fg: oklch(0.98 0.008 80);
+}

package/dist/styles/typography.css

@@ -0,0 +1,28 @@
+/*
+ * Era UI — Typography Tokens
+ *
+ * Font family is switchable per subtree via [data-font]. The library ships
+ * "mono" and "sans" as the default axis; consumers can register their own
+ * values by adding extra [data-font="..."] rules in their own CSS. The !
+ * on sans is because the UI defaults elsewhere to font-mono utility.
+ *
+ * GOTCHA: applying data-font="mono" to the <html> root triggers a browser quirk
+ * — a monospace root gets a legacy ~13px default font-size, which shrinks every
+ * rem-derived density token to ~81%. If your root is monospace, set an explicit
+ * absolute root size (e.g. `html { font-size: 16px }`); see the docs' layout.css.
+ */
+
+[data-font='mono'],
+[data-font='mono'] * {
+	font-family: var(--font-mono, ui-monospace, monospace) !important;
+}
+
+[data-font='sans'],
+[data-font='sans'] * {
+	font-family: var(--font-sans, system-ui, sans-serif) !important;
+}
+
+[data-font='serif'],
+[data-font='serif'] * {
+	font-family: var(--font-serif, ui-serif, Georgia, 'Times New Roman', serif) !important;
+}

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Accordion.ContentProps = $props();
+</script>
+
+<Accordion.Content
+	bind:ref
+	class={cn(
+		'overflow-hidden border-t border-divider-faded p-(--era-content-p) text-body leading-relaxed text-muted',
+		className
+	)}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Accordion } from 'bits-ui';
+declare const AccordionContent: import("svelte").Component<Accordion.ContentProps, {}, "ref">;
+type AccordionContent = ReturnType<typeof AccordionContent>;
+export default AccordionContent;

package/dist/ui/accordion/accordion-header.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Accordion.HeaderProps = $props();
+</script>
+
+<Accordion.Header bind:ref class={cn('flex', className)} {...restProps} />

package/dist/ui/accordion/accordion-header.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion } from 'bits-ui';
+declare const AccordionHeader: import("svelte").Component<Accordion.HeaderProps, {}, "ref">;
+type AccordionHeader = ReturnType<typeof AccordionHeader>;
+export default AccordionHeader;

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Accordion.ItemProps = $props();
+</script>
+
+<Accordion.Item
+	bind:ref
+	class={cn('border-b border-divider-faded last:border-b-0', className)}
+	{...restProps}
+/>

package/dist/ui/accordion/accordion-item.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Accordion } from 'bits-ui';
+declare const AccordionItem: import("svelte").Component<Accordion.ItemProps, {}, "ref">;
+type AccordionItem = ReturnType<typeof AccordionItem>;
+export default AccordionItem;

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import ChevronDown from '@lucide/svelte/icons/chevron-down';
+	import { cn, type PartProps } from '../../utils/index.js';
+
+	let {
+		ref = $bindable(null),
+		children,
+		class: className,
+		...restProps
+	}: PartProps<Accordion.TriggerProps> = $props();
+</script>
+
+<Accordion.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) px-(--era-inset-md) text-body text-fg hover:bg-(--era-highlight) hover:shadow-(--era-highlight-shadow) focus:outline-none disabled:opacity-50',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDown class="size-(--era-h-xs) text-muted" />
+</Accordion.Trigger>

package/dist/ui/accordion/accordion-trigger.svelte.d.ts

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

package/dist/ui/accordion/accordion.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Accordion } from 'bits-ui';
+	import { cn } from '../../utils/index.js';
+
+	let { ref = $bindable(null), class: className, ...restProps }: Accordion.RootProps = $props();
+</script>
+
+<Accordion.Root bind:ref class={cn('w-full', className)} {...restProps} />

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

@@ -0,0 +1,4 @@
+import { Accordion } from 'bits-ui';
+declare const Accordion: import("svelte").Component<Accordion.RootProps, {}, "ref">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

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

@@ -0,0 +1,5 @@
+export { default as Root } from './accordion.svelte';
+export { default as Item } from './accordion-item.svelte';
+export { default as Header } from './accordion-header.svelte';
+export { default as Trigger } from './accordion-trigger.svelte';
+export { default as Content } from './accordion-content.svelte';

package/dist/ui/accordion/index.js

@@ -0,0 +1,5 @@
+export { default as Root } from './accordion.svelte';
+export { default as Item } from './accordion-item.svelte';
+export { default as Header } from './accordion-header.svelte';
+export { default as Trigger } from './accordion-trigger.svelte';
+export { default as Content } from './accordion-content.svelte';

package/dist/ui/alert-dialog/alert-dialog-action.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+	import { Button, type ButtonVariants } from '../button';
+
+	// AlertDialog.Action is the confirm / primary affordance, so it defaults to
+	// the accent tone — consumers can still override with any other tone.
+	let {
+		ref = $bindable(null),
+		tone = 'accent',
+		size,
+		variant,
+		icon,
+		loading,
+		loadingLabel,
+		children,
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialog.ActionProps> &
+		Omit<ButtonVariants, 'active'> & {
+			children?: Snippet;
+		} = $props();
+</script>
+
+<AlertDialog.Action {...restProps}>
+	{#snippet child({ props })}
+		<Button
+			bind:ref
+			{...props}
+			{tone}
+			{size}
+			{variant}
+			{icon}
+			{loading}
+			{loadingLabel}
+			class={className}
+		>
+			{@render children?.()}
+		</Button>
+	{/snippet}
+</AlertDialog.Action>

package/dist/ui/alert-dialog/alert-dialog-action.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import { AlertDialog, type WithoutChildrenOrChild } from 'bits-ui';
+import { type ButtonVariants } from '../button';
+type $$ComponentProps = WithoutChildrenOrChild<AlertDialog.ActionProps> & Omit<ButtonVariants, 'active'> & {
+    children?: Snippet;
+};
+declare const AlertDialogAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type AlertDialogAction = ReturnType<typeof AlertDialogAction>;
+export default AlertDialogAction;