@ecopages/radiant-ui 0.1.0-beta.0

package/README.md

@@ -0,0 +1,70 @@
+# @ecopages/radiant-ui
+
+Accessible light-DOM UI components built with [`@ecopages/radiant`](https://www.npmjs.com/package/@ecopages/radiant) and `@ecopages/jsx`, documented in Storybook.
+
+Custom elements use the **`rui-*`** tag prefix. Public TypeScript / JSX exports use the **`Rui*`** prefix.
+
+This project is **not a React app**. JSX compiles through `@ecopages/jsx`.
+
+## Packages
+
+| Path                                                            | Role                                                                |
+| --------------------------------------------------------------- | ------------------------------------------------------------------- |
+| `src/components/ui`                                             | **`@ecopages/radiant-ui`** component library (APG-oriented widgets) |
+| [`@ecopages/storybook-radiant-vite`](../storybook-radiant-vite) | Storybook framework for Radiant (client + SSR → hydrate)            |
+| `src/components/client`, `src/components/ssr`, `src/stories`    | Framework dogfood demos (not the published UI catalog)              |
+
+Framework documentation (API, SSR contract, Vitest, limitations):  
+**[../storybook-radiant-vite/README.md](../storybook-radiant-vite/README.md)**
+
+Library overview and conventions: Storybook **Introduction** (`src/Introduction.mdx`).
+
+## Develop
+
+```bash
+pnpm install
+pnpm run storybook
+```
+
+Open the URL Storybook prints (default port `6006`).
+
+Useful scripts:
+
+```bash
+pnpm run test          # Vitest browser story tests
+pnpm run typecheck
+pnpm run lint
+pnpm run build:lib     # generate exports + build dist
+```
+
+## Using radiant-ui
+
+```ts
+import '@ecopages/radiant-ui/themes/default';
+import '@ecopages/radiant-ui/styles.css';
+import '@ecopages/radiant-ui/disclosure';
+import { RuiDisclosure, RuiDisclosureGroup } from '@ecopages/radiant-ui/disclosure';
+import { RuiButton } from '@ecopages/radiant-ui/button';
+```
+
+Or register every custom element from the root entry (still load theme + styles separately):
+
+```ts
+import '@ecopages/radiant-ui/themes/default';
+import '@ecopages/radiant-ui/styles.css';
+import '@ecopages/radiant-ui';
+```
+
+Convenience bundle (default theme + Tailwind + button primitive):
+
+```ts
+import '@ecopages/radiant-ui/radiant-ui.css';
+```
+
+Design tokens and themes: see [`AGENTS.md`](./AGENTS.md) and [`DESIGN-SYSTEM-PLAN.md`](./DESIGN-SYSTEM-PLAN.md).
+
+## Story map
+
+- **Components/** — `radiant-ui` catalog (`src/components/ui`)
+- **Client/** — framework demos ported from Radiant `playground/vite`
+- **SSR/** — framework demos ported from Radiant `playground/vite-nitro`

package/dist/components/ui/alert/alert.css

@@ -0,0 +1,27 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-alert {
+	@apply block;
+}
+
+@layer components {
+	.rui-alert {
+		@apply rounded-container border px-control-x py-control-y text-sm;
+	}
+
+	.rui-alert--info {
+		@apply border-border bg-surface text-on-surface;
+	}
+
+	.rui-alert--success {
+		@apply border-success/40 bg-success/10 text-success;
+	}
+
+	.rui-alert--warning {
+		@apply border-border bg-surface text-on-surface;
+	}
+
+	.rui-alert--error {
+		@apply border-error/40 bg-error/10 text-error;
+	}
+}

package/dist/components/ui/alert/alert.d.ts

@@ -0,0 +1,4 @@
+import type { WithChildren, RadiantSlotProps } from '../../../types';
+import type { RuiAlertProps } from './alert.script';
+import './alert.css';
+export declare const RuiAlert: import("../../../lib/radiant-view").RadiantViewComponent<WithChildren<RuiAlertProps & RadiantSlotProps>>;

package/dist/components/ui/alert/alert.script.d.ts

@@ -0,0 +1,25 @@
+import { RadiantElement } from '@ecopages/radiant';
+export type RuiAlertProps = {
+    /** Visual tone of the alert. Default: `info`. */
+    variant?: 'info' | 'success' | 'warning' | 'error';
+};
+/**
+ * `<rui-alert>` — a brief, important message that attracts attention
+ * without interrupting the user's task.
+ *
+ * Implements the WAI-ARIA APG Alert pattern via `role="alert"`. Dynamically
+ * rendered alerts are announced by most screen readers. Do not move focus
+ * into the alert; use an Alert Dialog when interrupting workflow is required.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+ *
+ * Keyboard interaction: not applicable — alerts must not steal focus.
+ *
+ * @element rui-alert
+ * @slot - The alert message content.
+ */
+export declare class RuiAlert extends RadiantElement {
+    variant: RuiAlertProps['variant'];
+    render(): import("@ecopages/jsx").JsxRenderable;
+}

package/dist/components/ui/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { RuiAlert as RuiAlertElement, type RuiAlertProps } from './alert.script';
+export { RuiAlert } from './alert';

package/dist/components/ui/alert/index.js

@@ -0,0 +1,2 @@
+import{RadiantElement as l,customElement as R,prop as p}from"@ecopages/radiant";var o=@R("rui-alert")class extends l{@p({type:String,reflect:!0,defaultValue:"info"})variant;render(){return React.createElement("div",{class:`rui-alert rui-alert--${this.variant??"info"}`,role:"alert"},React.createElement("slot",null))}};var A=Symbol.for("@ecopages/storybook-radiant.viewElement"),i=Symbol.for("@ecopages/storybook-radiant.scriptModule"),n=Symbol.for("@ecopages/storybook-radiant.scriptExport");function m(t,r){t[A]=r;let e=r[i];e&&(t[i]=e,t[n]=r[n]??r.name)}function s(t,r){let e=(a=>r(a));return m(e,t),e}import"./alert.css";var u=s(o,({slot:t,variant:r,children:e})=>React.createElement("rui-alert",{slot:t,variant:r},e));export{u as RuiAlert,o as RuiAlertElement};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/alert/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/alert/alert.script.tsx", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/alert/alert.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, prop } from '@ecopages/radiant';\n\nexport type RuiAlertProps = {\n\t/** Visual tone of the alert. Default: `info`. */\n\tvariant?: 'info' | 'success' | 'warning' | 'error';\n};\n\n/**\n * `<rui-alert>` \u2014 a brief, important message that attracts attention\n * without interrupting the user's task.\n *\n * Implements the WAI-ARIA APG Alert pattern via `role=\"alert\"`. Dynamically\n * rendered alerts are announced by most screen readers. Do not move focus\n * into the alert; use an Alert Dialog when interrupting workflow is required.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/alert/\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/\n *\n * Keyboard interaction: not applicable \u2014 alerts must not steal focus.\n *\n * @element rui-alert\n * @slot - The alert message content.\n */\n@customElement('rui-alert')\nexport class RuiAlert extends RadiantElement {\n\t@prop({ type: String, reflect: true, defaultValue: 'info' }) variant: RuiAlertProps['variant'];\n\n\toverride render() {\n\t\treturn (\n\t\t\t<div class={`rui-alert rui-alert--${this.variant ?? 'info'}`} role=\"alert\">\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t);\n\t}\n}\n", "import type { JsxRenderable } from '@ecopages/jsx';\n\nconst RADIANT_VIEW_ELEMENT = Symbol.for('@ecopages/storybook-radiant.viewElement');\nconst RADIANT_SCRIPT_MODULE = Symbol.for('@ecopages/storybook-radiant.scriptModule');\nconst RADIANT_SCRIPT_EXPORT = Symbol.for('@ecopages/storybook-radiant.scriptExport');\n\nexport type RadiantViewComponent<TArgs = unknown> = ((args: TArgs) => JsxRenderable) & {\n\t[RADIANT_VIEW_ELEMENT]?: CustomElementConstructor;\n\t[RADIANT_SCRIPT_MODULE]?: string;\n\t[RADIANT_SCRIPT_EXPORT]?: string;\n};\n\nfunction linkViewToElement<TArgs>(\n\tview: RadiantViewComponent<TArgs>,\n\telement: CustomElementConstructor & {\n\t\t[RADIANT_SCRIPT_MODULE]?: string;\n\t\t[RADIANT_SCRIPT_EXPORT]?: string;\n\t},\n): void {\n\tview[RADIANT_VIEW_ELEMENT] = element;\n\n\tconst ssrModule = element[RADIANT_SCRIPT_MODULE];\n\tif (ssrModule) {\n\t\tview[RADIANT_SCRIPT_MODULE] = ssrModule;\n\t\tview[RADIANT_SCRIPT_EXPORT] = element[RADIANT_SCRIPT_EXPORT] ?? element.name;\n\t}\n}\n\n/** Link a JSX view export to its RadiantElement class (same symbols as the Storybook framework). */\nexport function defineRadiantView<TArgs>(\n\telement: CustomElementConstructor & {\n\t\t[RADIANT_SCRIPT_MODULE]?: string;\n\t\t[RADIANT_SCRIPT_EXPORT]?: string;\n\t},\n\trender: (args: TArgs) => JsxRenderable,\n): RadiantViewComponent<TArgs> {\n\tconst view = ((args: TArgs) => render(args)) as RadiantViewComponent<TArgs>;\n\tlinkViewToElement(view, element);\n\treturn view;\n}\n\n/** Re-copy SSR metadata from the linked element (e.g. after HMR). */\nexport function syncRadiantViewMetadata(view: RadiantViewComponent): void {\n\tconst element = view[RADIANT_VIEW_ELEMENT];\n\tif (element) {\n\t\tlinkViewToElement(view, element);\n\t}\n}\n", "import type { WithChildren, RadiantSlotProps } from '../../../types';\nimport { defineRadiantView } from '../../../lib/radiant-view';\nimport type { RuiAlertProps } from './alert.script';\nimport { RuiAlert as RuiAlertElement } from './alert.script';\nimport './alert.css';\n\nexport const RuiAlert = defineRadiantView(\n\tRuiAlertElement,\n\t({ slot, variant, children }: WithChildren<RuiAlertProps & RadiantSlotProps>) => (\n\t\t<rui-alert slot={slot} variant={variant}>\n\t\t\t{children}\n\t\t</rui-alert>\n\t),\n);\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,EAAgB,iBAAAC,EAAe,QAAAC,MAAY,oBAwB7C,IAAMC,EADb,CAACF,EAAc,WAAW,CACnB,cAAuBD,CAAe,CAC5C,CAACE,EAAK,CAAE,KAAM,OAAQ,QAAS,GAAM,aAAc,MAAO,CAAC,CAAE,QAEpD,QAAS,CACjB,OACC,oBAAC,OAAI,MAAO,wBAAwB,KAAK,SAAW,MAAM,GAAI,KAAK,SAClE,oBAAC,WAAK,CACP,CAEF,CACD,EChCA,IAAME,EAAuB,OAAO,IAAI,yCAAyC,EAC3EC,EAAwB,OAAO,IAAI,0CAA0C,EAC7EC,EAAwB,OAAO,IAAI,0CAA0C,EAQnF,SAASC,EACRC,EACAC,EAIO,CACPD,EAAKJ,CAAoB,EAAIK,EAE7B,IAAMC,EAAYD,EAAQJ,CAAqB,EAC3CK,IACHF,EAAKH,CAAqB,EAAIK,EAC9BF,EAAKF,CAAqB,EAAIG,EAAQH,CAAqB,GAAKG,EAAQ,KAE1E,CAGO,SAASE,EACfF,EAIAG,EAC8B,CAC9B,IAAMJ,GAASK,GAAgBD,EAAOC,CAAI,GAC1C,OAAAN,EAAkBC,EAAMC,CAAO,EACxBD,CACR,CCnCA,MAAO,cAEA,IAAMM,EAAWC,EACvBD,EACA,CAAC,CAAE,KAAAE,EAAM,QAAAC,EAAS,SAAAC,CAAS,IAC1B,oBAAC,aAAU,KAAMF,EAAM,QAASC,GAC9BC,CACF,CAEF",
+  "names": ["RadiantElement", "customElement", "prop", "RuiAlert", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "RuiAlert", "defineRadiantView", "slot", "variant", "children"]
+}

package/dist/components/ui/breadcrumb/breadcrumb.css

@@ -0,0 +1,41 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-breadcrumb {
+	@apply block;
+	--rui-breadcrumb-separator: '/';
+}
+
+@layer components {
+	.rui-breadcrumb__list {
+		@apply m-0 flex list-none flex-wrap items-center gap-inline p-0 text-sm;
+	}
+
+	.rui-breadcrumb__item {
+		@apply inline-flex items-center gap-inline;
+	}
+
+	.rui-breadcrumb__link {
+		@apply inline-flex items-center gap-inline text-primary underline-offset-2 hover:underline;
+	}
+
+	.rui-breadcrumb__page,
+	.rui-breadcrumb [aria-current='page'] {
+		@apply font-medium text-on-background;
+	}
+
+	.rui-breadcrumb__separator {
+		@apply inline-flex items-center text-on-surface/60;
+	}
+
+	.rui-breadcrumb__separator:empty::before {
+		content: var(--rui-breadcrumb-separator);
+	}
+
+	.rui-breadcrumb__ellipsis {
+		@apply inline-flex items-center tracking-widest text-on-surface/60;
+	}
+
+	.rui-breadcrumb__ellipsis-label {
+		@apply sr-only;
+	}
+}

package/dist/components/ui/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,59 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+import type { RadiantSlotProps } from '../../../types';
+import type { RuiBreadcrumbProps } from './breadcrumb.script';
+import './breadcrumb.css';
+export type RuiBreadcrumbViewProps = RuiBreadcrumbProps & RadiantSlotProps & {
+    children?: JsxRenderable;
+    class?: string;
+};
+/**
+ * Landmark wrapper for a breadcrumb trail. Set `separator` once here (e.g. `/`
+ * or `>`); empty `RuiBreadcrumbSeparator` nodes pick it up via CSS — no context.
+ * Pass children into a separator to override for that instance.
+ */
+export declare const RuiBreadcrumb: import("../../../lib/radiant-view").RadiantViewComponent<RuiBreadcrumbViewProps>;
+export type RuiBreadcrumbListProps = {
+    children: JsxRenderable;
+    class?: string;
+};
+/** Ordered list of breadcrumb items and separators. */
+export declare function RuiBreadcrumbList({ children, class: className }: RuiBreadcrumbListProps): JsxRenderable;
+export type RuiBreadcrumbItemProps = {
+    children: JsxRenderable;
+    class?: string;
+};
+/** Single crumb (`<li>`). */
+export declare function RuiBreadcrumbItem({ children, class: className }: RuiBreadcrumbItemProps): JsxRenderable;
+export type RuiBreadcrumbLinkProps = {
+    href: string;
+    children: JsxRenderable;
+    class?: string;
+    /** Accessible name when the link content is non-text (e.g. an icon). */
+    'aria-label'?: string;
+};
+/** Linked ancestor page. */
+export declare function RuiBreadcrumbLink({ href, children, class: className, 'aria-label': ariaLabel, }: RuiBreadcrumbLinkProps): JsxRenderable;
+export type RuiBreadcrumbPageProps = {
+    children: JsxRenderable;
+    class?: string;
+};
+/** Current page (non-link). */
+export declare function RuiBreadcrumbPage({ children, class: className }: RuiBreadcrumbPageProps): JsxRenderable;
+export type RuiBreadcrumbSeparatorProps = {
+    /** Override the trail separator for this instance only. */
+    children?: JsxRenderable;
+    class?: string;
+};
+/**
+ * Visual separator between crumbs. Renders as a presentational list item.
+ * With no children, uses the glyph from `RuiBreadcrumb`’s `separator` prop
+ * (CSS custom property). With children, those replace the default glyph.
+ */
+export declare function RuiBreadcrumbSeparator({ children, class: className }: RuiBreadcrumbSeparatorProps): JsxRenderable;
+export type RuiBreadcrumbEllipsisProps = {
+    class?: string;
+    /** Accessible label announced for the collapsed segment. Default: `More`. */
+    label?: string;
+};
+/** Collapsed middle segment indicator. */
+export declare function RuiBreadcrumbEllipsis({ class: className, label }: RuiBreadcrumbEllipsisProps): JsxRenderable;

package/dist/components/ui/breadcrumb/breadcrumb.script.d.ts

@@ -0,0 +1,40 @@
+import { RadiantElement } from '@ecopages/radiant';
+export type RuiBreadcrumbProps = {
+    /** Accessible name for the navigation landmark. Default: `Breadcrumb`. */
+    label?: string;
+    /**
+     * Glyph used by empty `RuiBreadcrumbSeparator` nodes (via CSS custom
+     * property). Default: `/`. Override per-separator with children instead
+     * of reaching for context.
+     */
+    separator?: string;
+};
+type RuiBreadcrumbBindings = {
+    label: string;
+    separator: string;
+};
+/**
+ * `<rui-breadcrumb>` — a trail of links to ancestor pages in hierarchical order.
+ *
+ * Implements the WAI-ARIA APG Breadcrumb pattern: a `<nav>` landmark containing
+ * an ordered list of links, with `aria-current="page"` on the current page item.
+ *
+ * Compose with the JSX helpers (`RuiBreadcrumbList`, `RuiBreadcrumbItem`,
+ * `RuiBreadcrumbLink`, `RuiBreadcrumbPage`, `RuiBreadcrumbSeparator`,
+ * `RuiBreadcrumbEllipsis`), or author equivalent light-DOM markup into the slot.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
+ *
+ * Keyboard interaction: standard link navigation (`Tab`, `Enter`).
+ *
+ * @element rui-breadcrumb
+ * @slot - Authored breadcrumb list markup.
+ */
+export declare class RuiBreadcrumb extends RadiantElement<RuiBreadcrumbBindings> {
+    label: string;
+    separator: string;
+    private readonly resolvedAriaLabel;
+    private readonly separatorStyle;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

package/dist/components/ui/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export { RuiBreadcrumb as RuiBreadcrumbElement, type RuiBreadcrumbProps } from './breadcrumb.script';
+export { RuiBreadcrumb, RuiBreadcrumbList, RuiBreadcrumbItem, RuiBreadcrumbLink, RuiBreadcrumbPage, RuiBreadcrumbSeparator, RuiBreadcrumbEllipsis, type RuiBreadcrumbViewProps, type RuiBreadcrumbListProps, type RuiBreadcrumbItemProps, type RuiBreadcrumbLinkProps, type RuiBreadcrumbPageProps, type RuiBreadcrumbSeparatorProps, type RuiBreadcrumbEllipsisProps, } from './breadcrumb';

package/dist/components/ui/breadcrumb/index.js

@@ -0,0 +1,2 @@
+import{RadiantElement as l,customElement as d,prop as o}from"@ecopages/radiant";var i=@d("rui-breadcrumb")class extends l{@o({type:String,defaultValue:"Breadcrumb"})label;@o({type:String,defaultValue:"/"})separator;resolvedAriaLabel=this.$.label.map(r=>r||"Breadcrumb");separatorStyle=this.$.separator.map(r=>({"--rui-breadcrumb-separator":JSON.stringify(r||"/")}));render(){return React.createElement("nav",{class:"rui-breadcrumb","aria-label":this.resolvedAriaLabel,style:this.separatorStyle},React.createElement("slot",null))}};var m=Symbol.for("@ecopages/storybook-radiant.viewElement"),n=Symbol.for("@ecopages/storybook-radiant.scriptModule"),u=Symbol.for("@ecopages/storybook-radiant.scriptExport");function b(e,r){e[m]=r;let a=r[n];a&&(e[n]=a,e[u]=r[u]??r.name)}function p(e,r){let a=(t=>r(t));return b(a,e),a}import"./breadcrumb.css";function s(...e){return e.filter(Boolean).join(" ")}var R=p(i,({slot:e,label:r,separator:a,class:t,children:c})=>React.createElement("rui-breadcrumb",{slot:e,class:t,label:r,separator:a},c));function g({children:e,class:r}){return React.createElement("ol",{class:s("rui-breadcrumb__list",r)},e)}function B({children:e,class:r}){return React.createElement("li",{class:s("rui-breadcrumb__item",r)},e)}function P({href:e,children:r,class:a,"aria-label":t}){return React.createElement("a",{class:s("rui-breadcrumb__link",a),href:e,"aria-label":t},r)}function y({children:e,class:r}){return React.createElement("span",{class:s("rui-breadcrumb__page",r),"aria-current":"page"},e)}function x({children:e,class:r}){return React.createElement("li",{class:s("rui-breadcrumb__separator",r),role:"presentation","aria-hidden":"true"},e)}function f({class:e,label:r="More"}){return React.createElement("span",{class:s("rui-breadcrumb__ellipsis",e),role:"presentation","aria-hidden":"true"},React.createElement("span",{"aria-hidden":"true"},"\u2026"),React.createElement("span",{class:"rui-breadcrumb__ellipsis-label"},r))}export{R as RuiBreadcrumb,i as RuiBreadcrumbElement,f as RuiBreadcrumbEllipsis,B as RuiBreadcrumbItem,P as RuiBreadcrumbLink,g as RuiBreadcrumbList,y as RuiBreadcrumbPage,x as RuiBreadcrumbSeparator};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/breadcrumb/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/breadcrumb/breadcrumb.script.tsx", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/breadcrumb/breadcrumb.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, prop } from '@ecopages/radiant';\n\nexport type RuiBreadcrumbProps = {\n\t/** Accessible name for the navigation landmark. Default: `Breadcrumb`. */\n\tlabel?: string;\n\t/**\n\t * Glyph used by empty `RuiBreadcrumbSeparator` nodes (via CSS custom\n\t * property). Default: `/`. Override per-separator with children instead\n\t * of reaching for context.\n\t */\n\tseparator?: string;\n};\n\ntype RuiBreadcrumbBindings = {\n\tlabel: string;\n\tseparator: string;\n};\n\n/**\n * `<rui-breadcrumb>` \u2014 a trail of links to ancestor pages in hierarchical order.\n *\n * Implements the WAI-ARIA APG Breadcrumb pattern: a `<nav>` landmark containing\n * an ordered list of links, with `aria-current=\"page\"` on the current page item.\n *\n * Compose with the JSX helpers (`RuiBreadcrumbList`, `RuiBreadcrumbItem`,\n * `RuiBreadcrumbLink`, `RuiBreadcrumbPage`, `RuiBreadcrumbSeparator`,\n * `RuiBreadcrumbEllipsis`), or author equivalent light-DOM markup into the slot.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/\n *\n * Keyboard interaction: standard link navigation (`Tab`, `Enter`).\n *\n * @element rui-breadcrumb\n * @slot - Authored breadcrumb list markup.\n */\n@customElement('rui-breadcrumb')\nexport class RuiBreadcrumb extends RadiantElement<RuiBreadcrumbBindings> {\n\t@prop({ type: String, defaultValue: 'Breadcrumb' }) label: string;\n\t@prop({ type: String, defaultValue: '/' }) separator: string;\n\n\tprivate readonly resolvedAriaLabel = this.$.label.map((label) => label || 'Breadcrumb');\n\tprivate readonly separatorStyle = this.$.separator.map(\n\t\t(separator) =>\n\t\t\t({\n\t\t\t\t'--rui-breadcrumb-separator': JSON.stringify(separator || '/'),\n\t\t\t}) as Record<string, string>,\n\t);\n\n\toverride render() {\n\t\treturn (\n\t\t\t<nav class=\"rui-breadcrumb\" aria-label={this.resolvedAriaLabel} style={this.separatorStyle}>\n\t\t\t\t<slot></slot>\n\t\t\t</nav>\n\t\t);\n\t}\n}\n", "import type { JsxRenderable } from '@ecopages/jsx';\n\nconst RADIANT_VIEW_ELEMENT = Symbol.for('@ecopages/storybook-radiant.viewElement');\nconst RADIANT_SCRIPT_MODULE = Symbol.for('@ecopages/storybook-radiant.scriptModule');\nconst RADIANT_SCRIPT_EXPORT = Symbol.for('@ecopages/storybook-radiant.scriptExport');\n\nexport type RadiantViewComponent<TArgs = unknown> = ((args: TArgs) => JsxRenderable) & {\n\t[RADIANT_VIEW_ELEMENT]?: CustomElementConstructor;\n\t[RADIANT_SCRIPT_MODULE]?: string;\n\t[RADIANT_SCRIPT_EXPORT]?: string;\n};\n\nfunction linkViewToElement<TArgs>(\n\tview: RadiantViewComponent<TArgs>,\n\telement: CustomElementConstructor & {\n\t\t[RADIANT_SCRIPT_MODULE]?: string;\n\t\t[RADIANT_SCRIPT_EXPORT]?: string;\n\t},\n): void {\n\tview[RADIANT_VIEW_ELEMENT] = element;\n\n\tconst ssrModule = element[RADIANT_SCRIPT_MODULE];\n\tif (ssrModule) {\n\t\tview[RADIANT_SCRIPT_MODULE] = ssrModule;\n\t\tview[RADIANT_SCRIPT_EXPORT] = element[RADIANT_SCRIPT_EXPORT] ?? element.name;\n\t}\n}\n\n/** Link a JSX view export to its RadiantElement class (same symbols as the Storybook framework). */\nexport function defineRadiantView<TArgs>(\n\telement: CustomElementConstructor & {\n\t\t[RADIANT_SCRIPT_MODULE]?: string;\n\t\t[RADIANT_SCRIPT_EXPORT]?: string;\n\t},\n\trender: (args: TArgs) => JsxRenderable,\n): RadiantViewComponent<TArgs> {\n\tconst view = ((args: TArgs) => render(args)) as RadiantViewComponent<TArgs>;\n\tlinkViewToElement(view, element);\n\treturn view;\n}\n\n/** Re-copy SSR metadata from the linked element (e.g. after HMR). */\nexport function syncRadiantViewMetadata(view: RadiantViewComponent): void {\n\tconst element = view[RADIANT_VIEW_ELEMENT];\n\tif (element) {\n\t\tlinkViewToElement(view, element);\n\t}\n}\n", "import type { JsxRenderable } from '@ecopages/jsx';\nimport type { RadiantSlotProps } from '../../../types';\nimport { defineRadiantView } from '../../../lib/radiant-view';\nimport type { RuiBreadcrumbProps } from './breadcrumb.script';\nimport { RuiBreadcrumb as RuiBreadcrumbElement } from './breadcrumb.script';\nimport './breadcrumb.css';\n\nfunction cx(...parts: Array<string | false | null | undefined>): string {\n\treturn parts.filter(Boolean).join(' ');\n}\n\nexport type RuiBreadcrumbViewProps = RuiBreadcrumbProps &\n\tRadiantSlotProps & {\n\t\tchildren?: JsxRenderable;\n\t\tclass?: string;\n\t};\n\n/**\n * Landmark wrapper for a breadcrumb trail. Set `separator` once here (e.g. `/`\n * or `>`); empty `RuiBreadcrumbSeparator` nodes pick it up via CSS \u2014 no context.\n * Pass children into a separator to override for that instance.\n */\nexport const RuiBreadcrumb = defineRadiantView(\n\tRuiBreadcrumbElement,\n\t({ slot, label, separator, class: className, children }: RuiBreadcrumbViewProps) => (\n\t\t<rui-breadcrumb slot={slot} class={className} label={label} separator={separator}>\n\t\t\t{children}\n\t\t</rui-breadcrumb>\n\t),\n);\n\nexport type RuiBreadcrumbListProps = {\n\tchildren: JsxRenderable;\n\tclass?: string;\n};\n\n/** Ordered list of breadcrumb items and separators. */\nexport function RuiBreadcrumbList({ children, class: className }: RuiBreadcrumbListProps) {\n\treturn <ol class={cx('rui-breadcrumb__list', className)}>{children}</ol>;\n}\n\nexport type RuiBreadcrumbItemProps = {\n\tchildren: JsxRenderable;\n\tclass?: string;\n};\n\n/** Single crumb (`<li>`). */\nexport function RuiBreadcrumbItem({ children, class: className }: RuiBreadcrumbItemProps) {\n\treturn <li class={cx('rui-breadcrumb__item', className)}>{children}</li>;\n}\n\nexport type RuiBreadcrumbLinkProps = {\n\thref: string;\n\tchildren: JsxRenderable;\n\tclass?: string;\n\t/** Accessible name when the link content is non-text (e.g. an icon). */\n\t'aria-label'?: string;\n};\n\n/** Linked ancestor page. */\nexport function RuiBreadcrumbLink({\n\thref,\n\tchildren,\n\tclass: className,\n\t'aria-label': ariaLabel,\n}: RuiBreadcrumbLinkProps) {\n\treturn (\n\t\t<a class={cx('rui-breadcrumb__link', className)} href={href} aria-label={ariaLabel}>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\nexport type RuiBreadcrumbPageProps = {\n\tchildren: JsxRenderable;\n\tclass?: string;\n};\n\n/** Current page (non-link). */\nexport function RuiBreadcrumbPage({ children, class: className }: RuiBreadcrumbPageProps) {\n\treturn (\n\t\t<span class={cx('rui-breadcrumb__page', className)} aria-current=\"page\">\n\t\t\t{children}\n\t\t</span>\n\t);\n}\n\nexport type RuiBreadcrumbSeparatorProps = {\n\t/** Override the trail separator for this instance only. */\n\tchildren?: JsxRenderable;\n\tclass?: string;\n};\n\n/**\n * Visual separator between crumbs. Renders as a presentational list item.\n * With no children, uses the glyph from `RuiBreadcrumb`\u2019s `separator` prop\n * (CSS custom property). With children, those replace the default glyph.\n */\nexport function RuiBreadcrumbSeparator({ children, class: className }: RuiBreadcrumbSeparatorProps) {\n\treturn (\n\t\t<li class={cx('rui-breadcrumb__separator', className)} role=\"presentation\" aria-hidden=\"true\">\n\t\t\t{children}\n\t\t</li>\n\t);\n}\n\nexport type RuiBreadcrumbEllipsisProps = {\n\tclass?: string;\n\t/** Accessible label announced for the collapsed segment. Default: `More`. */\n\tlabel?: string;\n};\n\n/** Collapsed middle segment indicator. */\nexport function RuiBreadcrumbEllipsis({ class: className, label = 'More' }: RuiBreadcrumbEllipsisProps) {\n\treturn (\n\t\t<span class={cx('rui-breadcrumb__ellipsis', className)} role=\"presentation\" aria-hidden=\"true\">\n\t\t\t<span aria-hidden=\"true\">\u2026</span>\n\t\t\t<span class=\"rui-breadcrumb__ellipsis-label\">{label}</span>\n\t\t</span>\n\t);\n}\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,EAAgB,iBAAAC,EAAe,QAAAC,MAAY,oBAoC7C,IAAMC,EADb,CAACF,EAAc,gBAAgB,CACxB,cAA4BD,CAAsC,CACxE,CAACE,EAAK,CAAE,KAAM,OAAQ,aAAc,YAAa,CAAC,CAAE,MACpD,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,GAAI,CAAC,CAAE,UAE1B,kBAAoB,KAAK,EAAE,MAAM,IAAKE,GAAUA,GAAS,YAAY,EACrE,eAAiB,KAAK,EAAE,UAAU,IACjDC,IACC,CACA,6BAA8B,KAAK,UAAUA,GAAa,GAAG,CAC9D,EACF,EAES,QAAS,CACjB,OACC,oBAAC,OAAI,MAAM,iBAAiB,aAAY,KAAK,kBAAmB,MAAO,KAAK,gBAC3E,oBAAC,WAAK,CACP,CAEF,CACD,ECrDA,IAAMC,EAAuB,OAAO,IAAI,yCAAyC,EAC3EC,EAAwB,OAAO,IAAI,0CAA0C,EAC7EC,EAAwB,OAAO,IAAI,0CAA0C,EAQnF,SAASC,EACRC,EACAC,EAIO,CACPD,EAAKJ,CAAoB,EAAIK,EAE7B,IAAMC,EAAYD,EAAQJ,CAAqB,EAC3CK,IACHF,EAAKH,CAAqB,EAAIK,EAC9BF,EAAKF,CAAqB,EAAIG,EAAQH,CAAqB,GAAKG,EAAQ,KAE1E,CAGO,SAASE,EACfF,EAIAG,EAC8B,CAC9B,IAAMJ,GAASK,GAAgBD,EAAOC,CAAI,GAC1C,OAAAN,EAAkBC,EAAMC,CAAO,EACxBD,CACR,CClCA,MAAO,mBAEP,SAASM,KAAMC,EAAyD,CACvE,OAAOA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG,CACtC,CAaO,IAAMC,EAAgBC,EAC5BD,EACA,CAAC,CAAE,KAAAE,EAAM,MAAAC,EAAO,UAAAC,EAAW,MAAOC,EAAW,SAAAC,CAAS,IACrD,oBAAC,kBAAe,KAAMJ,EAAM,MAAOG,EAAW,MAAOF,EAAO,UAAWC,GACrEE,CACF,CAEF,EAQO,SAASC,EAAkB,CAAE,SAAAD,EAAU,MAAOD,CAAU,EAA2B,CACzF,OAAO,oBAAC,MAAG,MAAOP,EAAG,uBAAwBO,CAAS,GAAIC,CAAS,CACpE,CAQO,SAASE,EAAkB,CAAE,SAAAF,EAAU,MAAOD,CAAU,EAA2B,CACzF,OAAO,oBAAC,MAAG,MAAOP,EAAG,uBAAwBO,CAAS,GAAIC,CAAS,CACpE,CAWO,SAASG,EAAkB,CACjC,KAAAC,EACA,SAAAJ,EACA,MAAOD,EACP,aAAcM,CACf,EAA2B,CAC1B,OACC,oBAAC,KAAE,MAAOb,EAAG,uBAAwBO,CAAS,EAAG,KAAMK,EAAM,aAAYC,GACvEL,CACF,CAEF,CAQO,SAASM,EAAkB,CAAE,SAAAN,EAAU,MAAOD,CAAU,EAA2B,CACzF,OACC,oBAAC,QAAK,MAAOP,EAAG,uBAAwBO,CAAS,EAAG,eAAa,QAC/DC,CACF,CAEF,CAaO,SAASO,EAAuB,CAAE,SAAAP,EAAU,MAAOD,CAAU,EAAgC,CACnG,OACC,oBAAC,MAAG,MAAOP,EAAG,4BAA6BO,CAAS,EAAG,KAAK,eAAe,cAAY,QACrFC,CACF,CAEF,CASO,SAASQ,EAAsB,CAAE,MAAOT,EAAW,MAAAF,EAAQ,MAAO,EAA+B,CACvG,OACC,oBAAC,QAAK,MAAOL,EAAG,2BAA4BO,CAAS,EAAG,KAAK,eAAe,cAAY,QACvF,oBAAC,QAAK,cAAY,QAAO,QAAC,EAC1B,oBAAC,QAAK,MAAM,kCAAkCF,CAAM,CACrD,CAEF",
+  "names": ["RadiantElement", "customElement", "prop", "RuiBreadcrumb", "label", "separator", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "cx", "parts", "RuiBreadcrumb", "defineRadiantView", "slot", "label", "separator", "className", "children", "RuiBreadcrumbList", "RuiBreadcrumbItem", "RuiBreadcrumbLink", "href", "ariaLabel", "RuiBreadcrumbPage", "RuiBreadcrumbSeparator", "RuiBreadcrumbEllipsis"]
+}

package/dist/components/ui/button/button.d.ts

@@ -0,0 +1,37 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+import type { RadiantSlotProps } from '../../../types';
+export type RuiButtonVariant = 'filled' | 'outline' | 'destructive' | 'ghost';
+export type RuiButtonSize = 'sm' | 'md' | 'lg';
+export type RuiButtonProps = RadiantSlotProps & {
+    /** Visual style. Default: `filled`. */
+    variant?: RuiButtonVariant;
+    /** Control size. Default: `md`. */
+    size?: RuiButtonSize;
+    /** Native button type. Default: `button`. */
+    type?: 'button' | 'submit' | 'reset';
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Controlled pressed state for toggle buttons (`aria-pressed`). */
+    pressed?: boolean;
+    /** Initial pressed state when `toggle` is used without a controlled `pressed` value. */
+    defaultPressed?: boolean;
+    /** Toggle `aria-pressed` on click when `pressed` is not controlled. */
+    toggle?: boolean;
+    /** Extra class names appended after the variant/size classes. */
+    class?: string;
+    /** Accessible name when the button has no visible text. */
+    'aria-label'?: string;
+    'on:click'?: (event: Event) => void;
+    children?: JsxRenderable;
+};
+/**
+ * Presentational wrapper around a native `<button>`.
+ *
+ * No custom element and no controller — only CSS variants/sizes. Follows the
+ * APG Button pattern by staying on the native control for activation and focus.
+ *
+ * Styles ship via the radiant-ui base stylesheet (`rui-button` classes).
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/
+ */
+export declare function RuiButton({ variant, size, type, disabled, pressed, defaultPressed, toggle, class: className, slot, children, 'on:click': onClick, ...rest }: RuiButtonProps): JsxRenderable;

package/dist/components/ui/button/index.d.ts

@@ -0,0 +1 @@
+export { RuiButton, type RuiButtonProps, type RuiButtonSize, type RuiButtonVariant } from './button';

package/dist/components/ui/button/index.js

@@ -0,0 +1,2 @@
+function B(...t){return t.filter(Boolean).join(" ")}function y(t,n,o){if(t!==void 0)return t;if(n)return o}function m({variant:t="filled",size:n="md",type:o="button",disabled:s,pressed:i,defaultPressed:l=!1,toggle:e=!1,class:d,slot:f,children:p,"on:click":r,...b}){let c=u=>{if(e&&i===void 0){let a=u.currentTarget,R=a.getAttribute("aria-pressed")!=="true";a.setAttribute("aria-pressed",String(R))}r?.(u)};return React.createElement("button",{type:o,slot:f,class:B("rui-button",`rui-button--${t}`,`rui-button--${n}`,d),disabled:s,"aria-pressed":y(i,e,l),"data-toggle":e&&i===void 0?"":void 0,"on:click":e||r?c:void 0,...b},p)}export{m as RuiButton};
+//# sourceMappingURL=index.js.map

package/dist/components/ui/button/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/button/button.tsx"],
+  "sourcesContent": ["import type { JsxRenderable } from '@ecopages/jsx';\nimport type { RadiantSlotProps } from '../../../types';\n\nexport type RuiButtonVariant = 'filled' | 'outline' | 'destructive' | 'ghost';\nexport type RuiButtonSize = 'sm' | 'md' | 'lg';\n\nexport type RuiButtonProps = RadiantSlotProps & {\n\t/** Visual style. Default: `filled`. */\n\tvariant?: RuiButtonVariant;\n\t/** Control size. Default: `md`. */\n\tsize?: RuiButtonSize;\n\t/** Native button type. Default: `button`. */\n\ttype?: 'button' | 'submit' | 'reset';\n\t/** Disabled state. */\n\tdisabled?: boolean;\n\t/** Controlled pressed state for toggle buttons (`aria-pressed`). */\n\tpressed?: boolean;\n\t/** Initial pressed state when `toggle` is used without a controlled `pressed` value. */\n\tdefaultPressed?: boolean;\n\t/** Toggle `aria-pressed` on click when `pressed` is not controlled. */\n\ttoggle?: boolean;\n\t/** Extra class names appended after the variant/size classes. */\n\tclass?: string;\n\t/** Accessible name when the button has no visible text. */\n\t'aria-label'?: string;\n\t'on:click'?: (event: Event) => void;\n\tchildren?: JsxRenderable;\n};\n\nfunction cx(...parts: Array<string | false | null | undefined>): string {\n\treturn parts.filter(Boolean).join(' ');\n}\n\nfunction resolveAriaPressed(\n\tpressed: boolean | undefined,\n\ttoggle: boolean,\n\tdefaultPressed: boolean,\n): boolean | undefined {\n\tif (pressed !== undefined) {\n\t\treturn pressed;\n\t}\n\n\tif (toggle) {\n\t\treturn defaultPressed;\n\t}\n\n\treturn undefined;\n}\n\n/**\n * Presentational wrapper around a native `<button>`.\n *\n * No custom element and no controller \u2014 only CSS variants/sizes. Follows the\n * APG Button pattern by staying on the native control for activation and focus.\n *\n * Styles ship via the radiant-ui base stylesheet (`rui-button` classes).\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\nexport function RuiButton({\n\tvariant = 'filled',\n\tsize = 'md',\n\ttype = 'button',\n\tdisabled,\n\tpressed,\n\tdefaultPressed = false,\n\ttoggle = false,\n\tclass: className,\n\tslot,\n\tchildren,\n\t'on:click': onClick,\n\t...rest\n}: RuiButtonProps) {\n\tconst handleClick = (event: Event) => {\n\t\tif (toggle && pressed === undefined) {\n\t\t\tconst button = event.currentTarget as HTMLButtonElement;\n\t\t\tconst next = button.getAttribute('aria-pressed') !== 'true';\n\t\t\tbutton.setAttribute('aria-pressed', String(next));\n\t\t}\n\n\t\tonClick?.(event);\n\t};\n\n\treturn (\n\t\t<button\n\t\t\ttype={type}\n\t\t\tslot={slot}\n\t\t\tclass={cx('rui-button', `rui-button--${variant}`, `rui-button--${size}`, className)}\n\t\t\tdisabled={disabled}\n\t\t\taria-pressed={resolveAriaPressed(pressed, toggle, defaultPressed)}\n\t\t\tdata-toggle={toggle && pressed === undefined ? '' : undefined}\n\t\t\ton:click={toggle || onClick ? handleClick : undefined}\n\t\t\t{...rest}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}\n"],
+  "mappings": "AA6BA,SAASA,KAAMC,EAAyD,CACvE,OAAOA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG,CACtC,CAEA,SAASC,EACRC,EACAC,EACAC,EACsB,CACtB,GAAIF,IAAY,OACf,OAAOA,EAGR,GAAIC,EACH,OAAOC,CAIT,CAYO,SAASC,EAAU,CACzB,QAAAC,EAAU,SACV,KAAAC,EAAO,KACP,KAAAC,EAAO,SACP,SAAAC,EACA,QAAAP,EACA,eAAAE,EAAiB,GACjB,OAAAD,EAAS,GACT,MAAOO,EACP,KAAAC,EACA,SAAAC,EACA,WAAYC,EACZ,GAAGC,CACJ,EAAmB,CAClB,IAAMC,EAAeC,GAAiB,CACrC,GAAIb,GAAUD,IAAY,OAAW,CACpC,IAAMe,EAASD,EAAM,cACfE,EAAOD,EAAO,aAAa,cAAc,IAAM,OACrDA,EAAO,aAAa,eAAgB,OAAOC,CAAI,CAAC,CACjD,CAEAL,IAAUG,CAAK,CAChB,EAEA,OACC,oBAAC,UACA,KAAMR,EACN,KAAMG,EACN,MAAOZ,EAAG,aAAc,eAAeO,CAAO,GAAI,eAAeC,CAAI,GAAIG,CAAS,EAClF,SAAUD,EACV,eAAcR,EAAmBC,EAASC,EAAQC,CAAc,EAChE,cAAaD,GAAUD,IAAY,OAAY,GAAK,OACpD,WAAUC,GAAUU,EAAUE,EAAc,OAC3C,GAAGD,GAEHF,CACF,CAEF",
+  "names": ["cx", "parts", "resolveAriaPressed", "pressed", "toggle", "defaultPressed", "RuiButton", "variant", "size", "type", "disabled", "className", "slot", "children", "onClick", "rest", "handleClick", "event", "button", "next"]
+}

package/dist/components/ui/carousel/carousel.css

@@ -0,0 +1,170 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-carousel {
+	@apply block w-full max-w-full min-w-0;
+}
+
+@layer components {
+	.rui-carousel {
+		@apply flex w-full min-w-0 max-w-full flex-col gap-stack;
+	}
+
+	.rui-carousel:focus-visible {
+		@apply outline-hidden ring-2 ring-focus-ring rounded-container;
+	}
+
+	.rui-carousel__stage {
+		@apply relative w-full min-w-0;
+	}
+
+	.rui-carousel__viewport {
+		@apply relative w-full min-w-0 overflow-hidden rounded-container border border-border bg-surface text-sm;
+		touch-action: pan-y;
+	}
+
+	.rui-carousel--controls-toolbar .rui-carousel__viewport {
+		@apply p-inset;
+	}
+
+	.rui-carousel--controls-overlay .rui-carousel__viewport {
+		@apply p-0;
+	}
+
+	.rui-carousel__track {
+		@apply relative w-full min-h-[clamp(8rem,40vw,16rem)];
+	}
+
+	.rui-carousel__slide {
+		@apply flex w-full min-w-0 min-h-[clamp(8rem,40vw,16rem)] items-center justify-center;
+	}
+
+	.rui-carousel__footer {
+		@apply w-full min-w-0;
+	}
+
+	.rui-carousel__toolbar {
+		@apply grid w-full items-center gap-inline;
+		grid-template-columns: 1fr auto 1fr;
+		grid-template-rows: auto auto;
+	}
+
+	.rui-carousel__toolbar-rotation {
+		@apply flex justify-center;
+		grid-column: 2;
+		grid-row: 1;
+	}
+
+	.rui-carousel__toolbar-center {
+		@apply flex justify-center px-2;
+		grid-column: 2;
+		grid-row: 2;
+	}
+
+	.rui-carousel__toolbar-side--start {
+		@apply flex min-w-0 items-center justify-start;
+		grid-column: 1;
+		grid-row: 2;
+	}
+
+	.rui-carousel__toolbar-side--end {
+		@apply flex min-w-0 items-center justify-end;
+		grid-column: 3;
+		grid-row: 2;
+	}
+
+	.rui-carousel__nav-label {
+		@apply inline-flex items-center gap-1;
+	}
+
+	.rui-carousel__overlay-chrome {
+		@apply pointer-events-none absolute inset-0 z-dropdown;
+	}
+
+	.rui-carousel__overlay-rotation {
+		top: var(--space-inset);
+		right: var(--space-inset);
+		@apply pointer-events-auto absolute;
+	}
+
+	.rui-carousel__controls--overlay {
+		@apply pointer-events-none absolute inset-0 flex items-center justify-between;
+		padding-inline: var(--space-inset);
+	}
+
+	.rui-carousel__controls--overlay > * {
+		@apply pointer-events-auto;
+	}
+
+	.rui-carousel__indicators--overlay {
+		top: var(--space-inset);
+		@apply pointer-events-auto absolute left-1/2 max-w-[calc(100%-5rem)] -translate-x-1/2 rounded-full border border-border/80 bg-surface/80 px-3 py-1.5 shadow-sm backdrop-blur-sm;
+	}
+
+	.rui-carousel__nav--overlay {
+		@apply min-h-11 min-w-11 shrink-0 rounded-full border-border/80 bg-surface/90 shadow-sm backdrop-blur-sm;
+	}
+
+	.rui-carousel__nav--overlay:focus-visible {
+		@apply rounded-full;
+	}
+
+	.rui-carousel__nav--overlay:active:not(:disabled) {
+		@apply rounded-full;
+	}
+
+	.rui-carousel__nav-icon {
+		@apply block text-lg leading-none;
+	}
+
+	.rui-carousel__rotation--overlay {
+		@apply rounded-full border border-border/80 bg-surface/90 px-3 shadow-sm backdrop-blur-sm;
+	}
+
+	.rui-carousel__indicators {
+		@apply flex items-center justify-center gap-inline;
+	}
+
+	.rui-carousel__indicator {
+		@apply h-2.5 w-2.5 shrink-0 rounded-full border border-border bg-background transition-[background-color,border-color] focus:rounded-full;
+	}
+
+	.rui-carousel__indicator[aria-selected='true'] {
+		@apply rounded-full bg-primary border-primary;
+	}
+
+	.rui-carousel__indicator:focus-visible {
+		@apply rounded-full outline-hidden ring-2 ring-focus-ring;
+	}
+
+	.rui-carousel__indicator:active {
+		@apply rounded-full;
+	}
+
+	.rui-carousel--none .rui-carousel__slide[hidden] {
+		display: none;
+	}
+
+	.rui-carousel--slide .rui-carousel__track {
+		@apply flex w-full transition-transform duration-slow ease-in-out;
+		transform: translateX(calc(var(--rui-carousel-index, 0) * -100%));
+	}
+
+	.rui-carousel--slide .rui-carousel__slide {
+		@apply min-w-full w-full shrink-0;
+	}
+
+	.rui-carousel--fade .rui-carousel__track {
+		@apply grid w-full;
+	}
+
+	.rui-carousel--fade .rui-carousel__slide {
+		@apply col-start-1 row-start-1 w-full transition-opacity duration-slow ease-in-out;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.rui-carousel--fade .rui-carousel__slide[data-active='true'] {
+		opacity: 1;
+		pointer-events: auto;
+	}
+}

package/dist/components/ui/carousel/carousel.d.ts

@@ -0,0 +1,39 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+import type { RadiantSlotProps } from '../../../types';
+import type { RuiCarouselProps } from './carousel.script';
+import './carousel.css';
+export type RuiCarouselSlideData = {
+    id: string;
+    children: JsxRenderable;
+};
+export type RuiCarouselSlideProps = {
+    id: string;
+    index?: number;
+    children: JsxRenderable;
+    class?: string;
+};
+/** Slide in the default carousel slot (APG `group` / `tabpanel` roles are applied by the host). */
+export declare function RuiCarouselSlide({ id, children, class: className }: RuiCarouselSlideProps): JsxRenderable;
+export type RuiCarouselControlProps = RadiantSlotProps & {
+    children?: JsxRenderable;
+    class?: string;
+    disabled?: boolean;
+    /** Match `controls-variant="overlay"` on the carousel for circular on-slide chrome. */
+    overlay?: boolean;
+};
+/** Previous control slotted into `prev` by default. */
+export declare function RuiCarouselPrev({ slot, children, class: className, disabled, overlay, }: RuiCarouselControlProps): JsxRenderable;
+/** Next control slotted into `next` by default. */
+export declare function RuiCarouselNext({ slot, children, class: className, disabled, overlay, }: RuiCarouselControlProps): JsxRenderable;
+export type RuiCarouselRotationProps = RadiantSlotProps & {
+    children?: JsxRenderable;
+    class?: string;
+    overlay?: boolean;
+};
+/** Play/pause rotation control slotted into `rotation` by default. */
+export declare function RuiCarouselRotation({ slot, children, class: className, overlay, }: RuiCarouselRotationProps): JsxRenderable;
+export declare const RuiCarousel: import("../../../lib/radiant-view").RadiantViewComponent<RuiCarouselProps & RadiantSlotProps & {
+    slides?: RuiCarouselSlideData[];
+} & {
+    children?: JsxRenderable;
+}>;