@ecopages/radiant-ui 0.1.0-beta.0

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

@@ -0,0 +1,91 @@
+import { RadiantElement } from '@ecopages/radiant';
+import { type ToastId, type ToastPosition, type ToastVariant } from './toast-context';
+export type RuiToastProps = {
+    /** JSX list reconciliation key (not reflected to the DOM). */
+    key?: string | number;
+    toastId?: ToastId;
+    title?: string;
+    description?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    dismissible?: boolean;
+    closeButton?: boolean;
+    actionLabel?: string;
+    position?: ToastPosition;
+    /** When true, plays the exit animation then removes the toast. */
+    markedDelete?: boolean;
+};
+type RuiToastBindings = {
+    title: string;
+    description: string;
+    variant: ToastVariant;
+    actionLabel: string;
+    closeButton: boolean;
+};
+/**
+ * `<rui-toast>` — a single transient notification in a toaster stack.
+ *
+ * Prefer the imperative {@link toast} API with `<rui-toaster>`; this element is
+ * rendered by the toaster and is not typically authored by hand.
+ *
+ * @element rui-toast
+ */
+export declare class RuiToast extends RadiantElement<RuiToastBindings> {
+    toastId: string;
+    title: string;
+    description: string;
+    variant: ToastVariant;
+    duration: number;
+    dismissible: boolean;
+    closeButton: boolean;
+    actionLabel: string;
+    position: ToastPosition;
+    markedDelete: boolean;
+    toastTarget: HTMLElement;
+    private mounted;
+    private removed;
+    private swiping;
+    private swipeOut;
+    private swipeAxis;
+    private swipeOutDirection;
+    private held;
+    private timerReady;
+    private timeoutId;
+    private pointerStart;
+    private dragStartTime;
+    private exitTimer;
+    /**
+     * Wire pointer listeners, then announce mount after paint so enter CSS can run.
+     * On reconnect, re-announce without restarting the enter sequence.
+     */
+    connectedCallback(): void;
+    /**
+     * Clear timers on unmount. Only purge shared state when this instance was exiting —
+     * overflow toasts are intentionally unmounted while still queued.
+     */
+    disconnectedCallback(): void;
+    onContentUpdated(): void;
+    onPositionUpdated(): void;
+    /**
+     * Hold or release auto-dismiss (toaster-controlled on stack hover).
+     * Leaving hover resets lifetime to a full `duration` (does not resume leftover time).
+     * A no-op `setPaused(false)` still starts the timer on first paint if it never ran.
+     */
+    setPaused(paused: boolean): void;
+    onDurationUpdated(): void;
+    onMarkedDeleteUpdated(): void;
+    private get resolvedId();
+    private clearTimer;
+    /** Start a fresh full-duration countdown (never resumes leftover time). */
+    private startTimer;
+    private beginRemove;
+    private onPointerDown;
+    private onPointerMove;
+    private onPointerUp;
+    onCloseClick(event: Event): void;
+    onActionClick(event: MouseEvent): void;
+    private syncDomState;
+    private iconForVariant;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

package/dist/components/ui/toast/toast.test.d.ts

@@ -0,0 +1,2 @@
+import './toast.script';
+import './toaster.script';

package/dist/components/ui/toast/toaster.script.d.ts

@@ -0,0 +1,79 @@
+import { RadiantElement } from '@ecopages/radiant';
+import { type ToastPosition, type ToastRecord } from './toast-context';
+import './toast.script';
+export type RuiToasterProps = {
+    /** Corner / edge placement. Default: `bottom-end`. */
+    position?: ToastPosition;
+    /** Default lifetime in ms. Default: `4000`. */
+    duration?: number;
+    /**
+     * Max toasts shown in the stack at once (older ones wait in queue).
+     * Default: `3`.
+     */
+    visibleToasts?: number;
+    /** Show a close button on every toast. */
+    closeButton?: boolean;
+    /**
+     * Always show the stack expanded with full gaps.
+     * Default `false`: toasts collapse behind the front one (Sonner-style peek)
+     * and expand on hover.
+     */
+    expand?: boolean;
+    /** Gap between toasts when expanded, in px. Default: `14`. */
+    gap?: number;
+    /** Viewport inset in px. Default: `24`. */
+    offset?: number;
+};
+type RuiToasterBindings = {
+    position: ToastPosition;
+    toasts: ToastRecord[];
+};
+/**
+ * `<rui-toaster>` — fixed viewport that renders the toast stack.
+ *
+ * @element rui-toaster
+ */
+export declare class RuiToaster extends RadiantElement<RuiToasterBindings> {
+    position: ToastPosition;
+    duration: number;
+    visibleToasts: number;
+    closeButton: boolean;
+    expand: boolean;
+    gap: number;
+    offset: number;
+    toasts: ToastRecord[];
+    private expanded;
+    private interacting;
+    private unsubscribe;
+    private visibilityHandler;
+    private readonly heights;
+    private readonly observers;
+    private layoutFrame;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onConfigUpdated(): void;
+    onDocumentShow(event: Event): void;
+    onDocumentDismiss(event: Event): void;
+    onToastMounted(): void;
+    private filteredToasts;
+    private syncHostPosition;
+    private isStackExpanded;
+    private isPaused;
+    private resetLayoutState;
+    private syncPauseState;
+    /**
+     * Measure + layout on the next frame. Re-reads `:hover` because emptying the
+     * stack under the cursor can skip `pointerout`, leaving hold/expand stale.
+     */
+    private scheduleLayoutSync;
+    private measureToast;
+    private observeToasts;
+    private patchStackLayout;
+    private onPointerOver;
+    private onPointerOut;
+    private onPointerDown;
+    /** End interaction; collapse only when the pointer is no longer over the toaster. */
+    private onPointerUp;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiToolbar as RuiToolbarElement, type RuiToolbarProps } from './toolbar.script';
+export { RuiToolbar } from './toolbar';

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

@@ -0,0 +1,2 @@
+import{RadiantElement as E,customElement as x,onEvent as f,prop as T}from"@ecopages/radiant";function u(t,e){t.forEach((r,o)=>{r.tabIndex=o===e?0:-1})}function R(t,e){if(!t.length)return null;let r=Math.max(0,Math.min(t.length-1,e));return u(t,r),t[r]?.focus(),t[r]??null}function A(t,e){return t==="Home"?"first":t==="End"?"last":e==="horizontal"?t==="ArrowRight"?"next":t==="ArrowLeft"?"prev":null:t==="ArrowDown"?"next":t==="ArrowUp"?"prev":null}function g(t){let{items:e,current:r,key:o,orientation:s="horizontal",wrap:d=!0}=t;if(!e.length||!r)return{handled:!1};let n=e.indexOf(r);if(n<0)return{handled:!1};let l=A(o,s);if(!l)return{handled:!1};let i=n;l==="first"?i=0:l==="last"?i=e.length-1:l==="next"?i=d?(n+1)%e.length:Math.min(e.length-1,n+1):i=d?(n-1+e.length)%e.length:Math.max(0,n-1);let p=R(e,i);return p?{handled:!0,index:i,item:p}:{handled:!1}}var a=@x("rui-toolbar")class extends E{@T({type:String,defaultValue:""})label;@T({type:Boolean,reflect:!0,defaultValue:!1})exclusiveToggles;resolvedAriaLabel=this.$.label.map(e=>e||void 0);getItems(){return Array.from(this.querySelectorAll('button, a[href], input, select, [tabindex]:not([tabindex="-1"])')).filter(e=>!e.hasAttribute("disabled"))}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>u(this.getItems(),0))}@f({type:"keydown",selector:"button, a[href], input, select, [tabindex]"})onKeydown(e){let r=this.getItems();g({items:r,current:e.target,key:e.key,orientation:"horizontal"}).handled&&e.preventDefault()}getToggleButtons(){return Array.from(this.querySelectorAll("button[data-toggle][aria-pressed]")).filter(e=>!e.disabled)}@f({type:"click",selector:"button[data-toggle][aria-pressed]",options:{capture:!0}})onToggleButtonClick(e){let r=e.target.closest("button[data-toggle][aria-pressed]");if(!r||r.disabled)return;e.stopImmediatePropagation();let o=r.getAttribute("aria-pressed")==="true";if(this.exclusiveToggles){for(let s of this.getToggleButtons())s.setAttribute("aria-pressed","false");o||r.setAttribute("aria-pressed","true");return}r.setAttribute("aria-pressed",String(!o))}render(){return React.createElement("div",{class:"rui-toolbar",role:"toolbar","aria-label":this.resolvedAriaLabel},React.createElement("slot",null))}};var h=Symbol.for("@ecopages/storybook-radiant.viewElement"),c=Symbol.for("@ecopages/storybook-radiant.scriptModule"),m=Symbol.for("@ecopages/storybook-radiant.scriptExport");function v(t,e){t[h]=e;let r=e[c];r&&(t[c]=r,t[m]=e[m]??e.name)}function b(t,e){let r=(o=>e(o));return v(r,t),r}import"./toolbar.css";var y=b(a,({slot:t,label:e,exclusiveToggles:r,children:o})=>React.createElement("rui-toolbar",{slot:t,label:e,exclusiveToggles:r},o));export{y as RuiToolbar,a as RuiToolbarElement};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/toolbar/toolbar.script.tsx", "../../../../src/lib/roving-tabindex.ts", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/toolbar/toolbar.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, onEvent, prop } from '@ecopages/radiant';\nimport { applyRovingTabindex, navigateRovingTabindex } from '../../../lib/roving-tabindex';\n\nexport type RuiToolbarProps = {\n\tlabel?: string;\n\t/** When true, only one toggle button in the toolbar can stay pressed at a time. */\n\texclusiveToggles?: boolean;\n};\n\ntype RuiToolbarBindings = {\n\tlabel: string;\n};\n\n/**\n * `<rui-toolbar>` \u2014 a container for grouping controls.\n *\n * Implements the APG Toolbar pattern with left/right arrow navigation among\n * focusable descendants.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n * @element rui-toolbar\n */\n@customElement('rui-toolbar')\nexport class RuiToolbar extends RadiantElement<RuiToolbarBindings> {\n\t@prop({ type: String, defaultValue: '' }) label: string;\n\t@prop({ type: Boolean, reflect: true, defaultValue: false }) exclusiveToggles: boolean;\n\n\tprivate readonly resolvedAriaLabel = this.$.label.map((label) => label || undefined);\n\n\tprivate getItems(): HTMLElement[] {\n\t\treturn Array.from(\n\t\t\tthis.querySelectorAll<HTMLElement>('button, a[href], input, select, [tabindex]:not([tabindex=\"-1\"])'),\n\t\t).filter((el) => !el.hasAttribute('disabled'));\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tqueueMicrotask(() => applyRovingTabindex(this.getItems(), 0));\n\t}\n\n\t@onEvent({ type: 'keydown', selector: 'button, a[href], input, select, [tabindex]' })\n\tonKeydown(event: KeyboardEvent): void {\n\t\tconst items = this.getItems();\n\t\tconst result = navigateRovingTabindex({\n\t\t\titems,\n\t\t\tcurrent: event.target as HTMLElement,\n\t\t\tkey: event.key,\n\t\t\torientation: 'horizontal',\n\t\t});\n\t\tif (!result.handled) return;\n\t\tevent.preventDefault();\n\t}\n\n\tprivate getToggleButtons(): HTMLButtonElement[] {\n\t\treturn Array.from(this.querySelectorAll<HTMLButtonElement>('button[data-toggle][aria-pressed]')).filter(\n\t\t\t(button) => !button.disabled,\n\t\t);\n\t}\n\n\t// Captures ahead of the button's own inline toggle handler (see `RuiButton`'s\n\t// `on:click`) so this reads pre-click state and stays the single source of truth\n\t// for `aria-pressed` when a toggle button lives in a toolbar.\n\t@onEvent({ type: 'click', selector: 'button[data-toggle][aria-pressed]', options: { capture: true } })\n\tonToggleButtonClick(event: Event): void {\n\t\tconst button = (event.target as HTMLElement).closest(\n\t\t\t'button[data-toggle][aria-pressed]',\n\t\t) as HTMLButtonElement | null;\n\t\tif (!button || button.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tevent.stopImmediatePropagation();\n\n\t\tconst wasPressed = button.getAttribute('aria-pressed') === 'true';\n\n\t\tif (this.exclusiveToggles) {\n\t\t\tfor (const toggle of this.getToggleButtons()) {\n\t\t\t\ttoggle.setAttribute('aria-pressed', 'false');\n\t\t\t}\n\n\t\t\tif (!wasPressed) {\n\t\t\t\tbutton.setAttribute('aria-pressed', 'true');\n\t\t\t}\n\t\t\treturn;\n\t\t}\n\n\t\tbutton.setAttribute('aria-pressed', String(!wasPressed));\n\t}\n\n\toverride render() {\n\t\treturn (\n\t\t\t<div class=\"rui-toolbar\" role=\"toolbar\" aria-label={this.resolvedAriaLabel}>\n\t\t\t\t<slot></slot>\n\t\t\t</div>\n\t\t);\n\t}\n}\n", "export type RovingOrientation = 'horizontal' | 'vertical';\n\nexport type RovingNavResult = { handled: false } | { handled: true; index: number; item: HTMLElement };\n\n/**\n * Apply the APG roving-tabindex pattern: one item is tabbable, the rest are `-1`.\n */\nexport function applyRovingTabindex(items: HTMLElement[], activeIndex: number): void {\n\titems.forEach((item, index) => {\n\t\titem.tabIndex = index === activeIndex ? 0 : -1;\n\t});\n}\n\n/**\n * Focus `items[index]` and update tabindexes. Returns the focused item, or null.\n */\nexport function focusRovingItem(items: HTMLElement[], index: number): HTMLElement | null {\n\tif (!items.length) return null;\n\tconst next = Math.max(0, Math.min(items.length - 1, index));\n\tapplyRovingTabindex(items, next);\n\titems[next]?.focus();\n\treturn items[next] ?? null;\n}\n\nfunction deltaForKey(key: string, orientation: RovingOrientation): 'prev' | 'next' | 'first' | 'last' | null {\n\tif (key === 'Home') return 'first';\n\tif (key === 'End') return 'last';\n\n\tif (orientation === 'horizontal') {\n\t\tif (key === 'ArrowRight') return 'next';\n\t\tif (key === 'ArrowLeft') return 'prev';\n\t\treturn null;\n\t}\n\n\tif (key === 'ArrowDown') return 'next';\n\tif (key === 'ArrowUp') return 'prev';\n\treturn null;\n}\n\n/**\n * Handle arrow / Home / End navigation for a flat roving-tabindex collection.\n * Does not activate the item \u2014 callers decide whether to select on move.\n */\nexport function navigateRovingTabindex(options: {\n\titems: HTMLElement[];\n\tcurrent: HTMLElement | null;\n\tkey: string;\n\torientation?: RovingOrientation;\n\twrap?: boolean;\n}): RovingNavResult {\n\tconst { items, current, key, orientation = 'horizontal', wrap = true } = options;\n\tif (!items.length || !current) return { handled: false };\n\n\tconst index = items.indexOf(current);\n\tif (index < 0) return { handled: false };\n\n\tconst delta = deltaForKey(key, orientation);\n\tif (!delta) return { handled: false };\n\n\tlet next = index;\n\tif (delta === 'first') next = 0;\n\telse if (delta === 'last') next = items.length - 1;\n\telse if (delta === 'next') next = wrap ? (index + 1) % items.length : Math.min(items.length - 1, index + 1);\n\telse next = wrap ? (index - 1 + items.length) % items.length : Math.max(0, index - 1);\n\n\tconst item = focusRovingItem(items, next);\n\tif (!item) return { handled: false };\n\treturn { handled: true, index: next, item };\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 { RuiToolbarProps } from './toolbar.script';\nimport { RuiToolbar as RuiToolbarElement } from './toolbar.script';\nimport './toolbar.css';\n\nexport const RuiToolbar = defineRadiantView(\n\tRuiToolbarElement,\n\t({ slot, label, exclusiveToggles, children }: WithChildren<RuiToolbarProps & RadiantSlotProps>) => (\n\t\t<rui-toolbar slot={slot} label={label} exclusiveToggles={exclusiveToggles}>\n\t\t\t{children}\n\t\t</rui-toolbar>\n\t),\n);\n"],
+  "mappings": "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",
+  "names": ["RadiantElement", "customElement", "onEvent", "prop", "applyRovingTabindex", "items", "activeIndex", "item", "index", "focusRovingItem", "next", "deltaForKey", "key", "orientation", "navigateRovingTabindex", "options", "current", "wrap", "delta", "RuiToolbar", "customElement", "RadiantElement", "prop", "label", "el", "applyRovingTabindex", "onEvent", "event", "items", "navigateRovingTabindex", "button", "wasPressed", "toggle", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "RuiToolbar", "defineRadiantView", "slot", "label", "exclusiveToggles", "children"]
+}

package/dist/components/ui/toolbar/toolbar.css

@@ -0,0 +1,16 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-toolbar {
+	@apply block;
+}
+
+@layer components {
+	.rui-toolbar {
+		@apply inline-flex items-center gap-1 rounded-container border border-border bg-surface p-1;
+	}
+
+	.rui-toolbar .rui-button--ghost[aria-pressed='true'],
+	.rui-toolbar .rui-button--outline[aria-pressed='true'] {
+		@apply bg-background font-medium text-on-background shadow-sm;
+	}
+}

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

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

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

@@ -0,0 +1,30 @@
+import { RadiantElement } from '@ecopages/radiant';
+export type RuiToolbarProps = {
+    label?: string;
+    /** When true, only one toggle button in the toolbar can stay pressed at a time. */
+    exclusiveToggles?: boolean;
+};
+type RuiToolbarBindings = {
+    label: string;
+};
+/**
+ * `<rui-toolbar>` — a container for grouping controls.
+ *
+ * Implements the APG Toolbar pattern with left/right arrow navigation among
+ * focusable descendants.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/
+ * @element rui-toolbar
+ */
+export declare class RuiToolbar extends RadiantElement<RuiToolbarBindings> {
+    label: string;
+    exclusiveToggles: boolean;
+    private readonly resolvedAriaLabel;
+    private getItems;
+    connectedCallback(): void;
+    onKeydown(event: KeyboardEvent): void;
+    private getToggleButtons;
+    onToggleButtonClick(event: Event): void;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiTooltip as RuiTooltipElement, type RuiTooltipProps } from './tooltip.script';
+export { RuiTooltip } from './tooltip';

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

@@ -0,0 +1,2 @@
+import{RadiantElement as c,bound as n,customElement as h,onEvent as s,onUpdated as T,prop as a,query as m}from"@ecopages/radiant";import{autoUpdate as g,computePosition as R,flip as v,offset as f,shift as E}from"@floating-ui/dom";var r=@h("rui-tooltip")class extends c{@a({type:String,defaultValue:""})content;@a({type:String,defaultValue:"top"})placement;@a({type:Number,defaultValue:200})delay;@m({ref:"tooltip"})tooltipTarget;open=!1;showTimer=null;hideTimer=null;cleanup=null;tooltipId=`rui-tooltip-${Math.random().toString(36).slice(2,9)}`;describedEl=null;connectedCallback(){super.connectedCallback(),this.addEventListener("pointerenter",this.onPointerEnter),this.addEventListener("pointerleave",this.onPointerLeave),queueMicrotask(()=>this.wireTrigger())}disconnectedCallback(){this.clearTimers(),this.teardownFloating(),this.removeEventListener("pointerenter",this.onPointerEnter),this.removeEventListener("pointerleave",this.onPointerLeave),this.describedEl?.removeAttribute("aria-describedby"),super.disconnectedCallback()}clearTimers(){this.showTimer&&clearTimeout(this.showTimer),this.hideTimer&&clearTimeout(this.hideTimer),this.showTimer=null,this.hideTimer=null}teardownFloating(){this.cleanup?.(),this.cleanup=null}getAnchor(){return this.querySelector('button, a[href], input, select, textarea, [tabindex]:not([tabindex="-1"])')??this}wireTrigger(){this.describedEl?.removeAttribute("aria-describedby"),this.describedEl=this.getAnchor(),this.describedEl.setAttribute("aria-describedby",this.tooltipId)}@n updatePosition(){if(!this.tooltipTarget||!this.open)return;let t=this.getAnchor();R(t,this.tooltipTarget,{placement:this.placement,middleware:[f(8),v(),E({padding:8})]}).then(({x:e,y:o})=>{Object.assign(this.tooltipTarget.style,{left:`${e}px`,top:`${o}px`})})}@T(["content","placement"])onDescribedPropsUpdated(){this.wireTrigger(),this.open&&this.updatePosition()}setOpen(t){if(this.clearTimers(),this.open=t,!!this.tooltipTarget)if(this.tooltipTarget.hidden=!t,t){this.teardownFloating();let e=this.getAnchor();this.cleanup=g(e,this.tooltipTarget,this.updatePosition),this.updatePosition()}else this.teardownFloating()}scheduleShow(){if(this.clearTimers(),this.delay<=0){this.setOpen(!0);return}this.showTimer=setTimeout(()=>this.setOpen(!0),this.delay)}scheduleHide(){this.clearTimers(),this.hideTimer=setTimeout(()=>this.setOpen(!1),80)}@s({document:!0,type:"keydown"})onDocumentKeydown(t){!this.open||t.key!=="Escape"||this.setOpen(!1)}@s({type:"focusin",selector:".rui-tooltip__trigger"})onFocusIn(){this.scheduleShow()}@s({type:"focusout",selector:".rui-tooltip__trigger"})onFocusOut(t){let e=t.relatedTarget;e&&this.contains(e)||this.scheduleHide()}@n onPointerEnter(){this.scheduleShow()}@n onPointerLeave(){this.scheduleHide()}render(){return React.createElement("span",{class:"rui-tooltip"},React.createElement("span",{class:"rui-tooltip__trigger"},React.createElement("slot",null)),React.createElement("span",{"data-ref":"tooltip",id:this.tooltipId,class:"rui-tooltip__content",role:"tooltip",hidden:!0},this.$.content))}};var y=Symbol.for("@ecopages/storybook-radiant.viewElement"),l=Symbol.for("@ecopages/storybook-radiant.scriptModule"),p=Symbol.for("@ecopages/storybook-radiant.scriptExport");function b(i,t){i[y]=t;let e=t[l];e&&(i[l]=e,i[p]=t[p]??t.name)}function d(i,t){let e=(o=>t(o));return b(e,i),e}import"./tooltip.css";var A=d(r,({slot:i,content:t,placement:e,delay:o,children:u})=>React.createElement("rui-tooltip",{slot:i,content:t,placement:e,delay:o},u));export{A as RuiTooltip,r as RuiTooltipElement};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/tooltip/tooltip.script.tsx", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/tooltip/tooltip.tsx"],
+  "sourcesContent": ["import { RadiantElement, bound, customElement, onEvent, onUpdated, prop, query } from '@ecopages/radiant';\nimport { type Placement, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\n\nexport type RuiTooltipProps = {\n\t/** Accessible description shown in the tooltip. */\n\tcontent?: string;\n\t/** Floating-ui placement. Default: `top`. */\n\tplacement?: Placement;\n\t/** Delay in ms before showing on hover/focus. Default: `200`. */\n\tdelay?: number;\n};\n\ntype RuiTooltipBindings = {\n\tcontent: string;\n};\n\n/**\n * `<rui-tooltip>` \u2014 a popup that describes a trigger on hover or focus.\n *\n * Implements the WAI-ARIA APG Tooltip pattern: the popup has `role=\"tooltip\"`\n * and the focusable trigger references it with `aria-describedby`. The tooltip\n * itself never receives focus.\n *\n * Event wiring:\n * - Bubbling events (`focusin` / `focusout`, document `keydown`) use `@onEvent`.\n * - `pointerenter` / `pointerleave` are bound directly on the host \u2014 they do not\n *   bubble, so `@onEvent` delegation cannot see them on the slotted trigger.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n * @element rui-tooltip\n * @slot - The trigger element (typically a button or focusable control).\n */\n@customElement('rui-tooltip')\nexport class RuiTooltip extends RadiantElement<RuiTooltipBindings> {\n\t@prop({ type: String, defaultValue: '' }) content: string;\n\t@prop({ type: String, defaultValue: 'top' }) placement: Placement;\n\t@prop({ type: Number, defaultValue: 200 }) delay: number;\n\n\t@query({ ref: 'tooltip' }) tooltipTarget: HTMLElement;\n\n\t/**\n\t * Plain (non-reactive) field, not a JSX binding target: `hidden` is toggled\n\t * imperatively in `setOpen()` rather than bound, since it flips on every\n\t * hover/focus in/out \u2014 high-frequency enough that a plain synchronous DOM\n\t * write is preferable to routing it through the reactive binding system.\n\t */\n\tprivate open = false;\n\n\tprivate showTimer: ReturnType<typeof setTimeout> | null = null;\n\tprivate hideTimer: ReturnType<typeof setTimeout> | null = null;\n\tprivate cleanup: ReturnType<typeof autoUpdate> | null = null;\n\tprivate tooltipId = `rui-tooltip-${Math.random().toString(36).slice(2, 9)}`;\n\tprivate describedEl: HTMLElement | null = null;\n\n\t/**\n\t * Pointer enter/leave must be host listeners: those events do not bubble, and\n\t * `@onEvent` only supports delegated (bubbling) listeners.\n\t */\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tthis.addEventListener('pointerenter', this.onPointerEnter);\n\t\tthis.addEventListener('pointerleave', this.onPointerLeave);\n\t\tqueueMicrotask(() => this.wireTrigger());\n\t}\n\n\toverride disconnectedCallback(): void {\n\t\tthis.clearTimers();\n\t\tthis.teardownFloating();\n\t\tthis.removeEventListener('pointerenter', this.onPointerEnter);\n\t\tthis.removeEventListener('pointerleave', this.onPointerLeave);\n\t\tthis.describedEl?.removeAttribute('aria-describedby');\n\t\tsuper.disconnectedCallback();\n\t}\n\n\tprivate clearTimers(): void {\n\t\tif (this.showTimer) clearTimeout(this.showTimer);\n\t\tif (this.hideTimer) clearTimeout(this.hideTimer);\n\t\tthis.showTimer = null;\n\t\tthis.hideTimer = null;\n\t}\n\n\tprivate teardownFloating(): void {\n\t\tthis.cleanup?.();\n\t\tthis.cleanup = null;\n\t}\n\n\tprivate getAnchor(): HTMLElement {\n\t\treturn (\n\t\t\t(this.querySelector(\n\t\t\t\t'button, a[href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n\t\t\t) as HTMLElement | null) ?? this\n\t\t);\n\t}\n\n\tprivate wireTrigger(): void {\n\t\tthis.describedEl?.removeAttribute('aria-describedby');\n\t\tthis.describedEl = this.getAnchor();\n\t\tthis.describedEl.setAttribute('aria-describedby', this.tooltipId);\n\t}\n\n\t@bound\n\tupdatePosition(): void {\n\t\tif (!this.tooltipTarget || !this.open) return;\n\t\tconst anchor = this.getAnchor();\n\t\tcomputePosition(anchor, this.tooltipTarget, {\n\t\t\tplacement: this.placement,\n\t\t\tmiddleware: [offset(8), flip(), shift({ padding: 8 })],\n\t\t}).then(({ x, y }) => {\n\t\t\tObject.assign(this.tooltipTarget.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\t\t});\n\t}\n\n\t@onUpdated(['content', 'placement'])\n\tonDescribedPropsUpdated(): void {\n\t\tthis.wireTrigger();\n\t\tif (this.open) this.updatePosition();\n\t}\n\n\tprivate setOpen(next: boolean): void {\n\t\tthis.clearTimers();\n\t\tthis.open = next;\n\t\tif (!this.tooltipTarget) return;\n\t\tthis.tooltipTarget.hidden = !next;\n\n\t\tif (next) {\n\t\t\tthis.teardownFloating();\n\t\t\tconst anchor = this.getAnchor();\n\t\t\tthis.cleanup = autoUpdate(anchor, this.tooltipTarget, this.updatePosition);\n\t\t\tthis.updatePosition();\n\t\t} else {\n\t\t\tthis.teardownFloating();\n\t\t}\n\t}\n\n\tprivate scheduleShow(): void {\n\t\tthis.clearTimers();\n\t\tif (this.delay <= 0) {\n\t\t\tthis.setOpen(true);\n\t\t\treturn;\n\t\t}\n\t\tthis.showTimer = setTimeout(() => this.setOpen(true), this.delay);\n\t}\n\n\tprivate scheduleHide(): void {\n\t\tthis.clearTimers();\n\t\tthis.hideTimer = setTimeout(() => this.setOpen(false), 80);\n\t}\n\n\t@onEvent({ document: true, type: 'keydown' })\n\tonDocumentKeydown(event: KeyboardEvent): void {\n\t\tif (!this.open || event.key !== 'Escape') return;\n\t\tthis.setOpen(false);\n\t}\n\n\t@onEvent({ type: 'focusin', selector: '.rui-tooltip__trigger' })\n\tonFocusIn(): void {\n\t\tthis.scheduleShow();\n\t}\n\n\t@onEvent({ type: 'focusout', selector: '.rui-tooltip__trigger' })\n\tonFocusOut(event: FocusEvent): void {\n\t\tconst next = event.relatedTarget as Node | null;\n\t\tif (next && this.contains(next)) return;\n\t\tthis.scheduleHide();\n\t}\n\n\t@bound\n\tonPointerEnter(): void {\n\t\tthis.scheduleShow();\n\t}\n\n\t@bound\n\tonPointerLeave(): void {\n\t\tthis.scheduleHide();\n\t}\n\n\toverride render() {\n\t\treturn (\n\t\t\t<span class=\"rui-tooltip\">\n\t\t\t\t<span class=\"rui-tooltip__trigger\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</span>\n\t\t\t\t<span data-ref=\"tooltip\" id={this.tooltipId} class=\"rui-tooltip__content\" role=\"tooltip\" hidden>\n\t\t\t\t\t{this.$.content}\n\t\t\t\t</span>\n\t\t\t</span>\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 { RuiTooltipProps } from './tooltip.script';\nimport { RuiTooltip as RuiTooltipElement } from './tooltip.script';\nimport './tooltip.css';\n\nexport const RuiTooltip = defineRadiantView(\n\tRuiTooltipElement,\n\t({ slot, content, placement, delay, children }: WithChildren<RuiTooltipProps & RadiantSlotProps>) => (\n\t\t<rui-tooltip slot={slot} content={content} placement={placement} delay={delay}>\n\t\t\t{children}\n\t\t</rui-tooltip>\n\t),\n);\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,EAAgB,SAAAC,EAAO,iBAAAC,EAAe,WAAAC,EAAS,aAAAC,EAAW,QAAAC,EAAM,SAAAC,MAAa,oBACtF,OAAyB,cAAAC,EAAY,mBAAAC,EAAiB,QAAAC,EAAM,UAAAC,EAAQ,SAAAC,MAAa,mBAiC1E,IAAMC,EADb,CAACV,EAAc,aAAa,CACrB,cAAyBF,CAAmC,CAClE,CAACK,EAAK,CAAE,KAAM,OAAQ,aAAc,EAAG,CAAC,CAAE,QAC1C,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,KAAM,CAAC,CAAE,UAC7C,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,GAAI,CAAC,CAAE,MAE3C,CAACC,EAAM,CAAE,IAAK,SAAU,CAAC,CAAE,cAQnB,KAAO,GAEP,UAAkD,KAClD,UAAkD,KAClD,QAAgD,KAChD,UAAY,eAAe,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,EAAG,CAAC,CAAC,GACjE,YAAkC,KAMjC,mBAA0B,CAClC,MAAM,kBAAkB,EACxB,KAAK,iBAAiB,eAAgB,KAAK,cAAc,EACzD,KAAK,iBAAiB,eAAgB,KAAK,cAAc,EACzD,eAAe,IAAM,KAAK,YAAY,CAAC,CACxC,CAES,sBAA6B,CACrC,KAAK,YAAY,EACjB,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,eAAgB,KAAK,cAAc,EAC5D,KAAK,oBAAoB,eAAgB,KAAK,cAAc,EAC5D,KAAK,aAAa,gBAAgB,kBAAkB,EACpD,MAAM,qBAAqB,CAC5B,CAEQ,aAAoB,CACvB,KAAK,WAAW,aAAa,KAAK,SAAS,EAC3C,KAAK,WAAW,aAAa,KAAK,SAAS,EAC/C,KAAK,UAAY,KACjB,KAAK,UAAY,IAClB,CAEQ,kBAAyB,CAChC,KAAK,UAAU,EACf,KAAK,QAAU,IAChB,CAEQ,WAAyB,CAChC,OACE,KAAK,cACL,2EACD,GAA4B,IAE9B,CAEQ,aAAoB,CAC3B,KAAK,aAAa,gBAAgB,kBAAkB,EACpD,KAAK,YAAc,KAAK,UAAU,EAClC,KAAK,YAAY,aAAa,mBAAoB,KAAK,SAAS,CACjE,CAEA,CAACL,EACD,gBAAuB,CACtB,GAAI,CAAC,KAAK,eAAiB,CAAC,KAAK,KAAM,OACvC,IAAMY,EAAS,KAAK,UAAU,EAC9BL,EAAgBK,EAAQ,KAAK,cAAe,CAC3C,UAAW,KAAK,UAChB,WAAY,CAACH,EAAO,CAAC,EAAGD,EAAK,EAAGE,EAAM,CAAE,QAAS,CAAE,CAAC,CAAC,CACtD,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAG,EAAG,EAAAC,CAAE,IAAM,CACrB,OAAO,OAAO,KAAK,cAAc,MAAO,CACvC,KAAM,GAAGD,CAAC,KACV,IAAK,GAAGC,CAAC,IACV,CAAC,CACF,CAAC,CACF,CAEA,CAACX,EAAU,CAAC,UAAW,WAAW,CAAC,CACnC,yBAAgC,CAC/B,KAAK,YAAY,EACb,KAAK,MAAM,KAAK,eAAe,CACpC,CAEQ,QAAQY,EAAqB,CAGpC,GAFA,KAAK,YAAY,EACjB,KAAK,KAAOA,EACR,EAAC,KAAK,cAGV,GAFA,KAAK,cAAc,OAAS,CAACA,EAEzBA,EAAM,CACT,KAAK,iBAAiB,EACtB,IAAMH,EAAS,KAAK,UAAU,EAC9B,KAAK,QAAUN,EAAWM,EAAQ,KAAK,cAAe,KAAK,cAAc,EACzE,KAAK,eAAe,CACrB,MACC,KAAK,iBAAiB,CAExB,CAEQ,cAAqB,CAE5B,GADA,KAAK,YAAY,EACb,KAAK,OAAS,EAAG,CACpB,KAAK,QAAQ,EAAI,EACjB,MACD,CACA,KAAK,UAAY,WAAW,IAAM,KAAK,QAAQ,EAAI,EAAG,KAAK,KAAK,CACjE,CAEQ,cAAqB,CAC5B,KAAK,YAAY,EACjB,KAAK,UAAY,WAAW,IAAM,KAAK,QAAQ,EAAK,EAAG,EAAE,CAC1D,CAEA,CAACV,EAAQ,CAAE,SAAU,GAAM,KAAM,SAAU,CAAC,CAC5C,kBAAkBc,EAA4B,CACzC,CAAC,KAAK,MAAQA,EAAM,MAAQ,UAChC,KAAK,QAAQ,EAAK,CACnB,CAEA,CAACd,EAAQ,CAAE,KAAM,UAAW,SAAU,uBAAwB,CAAC,CAC/D,WAAkB,CACjB,KAAK,aAAa,CACnB,CAEA,CAACA,EAAQ,CAAE,KAAM,WAAY,SAAU,uBAAwB,CAAC,CAChE,WAAWc,EAAyB,CACnC,IAAMD,EAAOC,EAAM,cACfD,GAAQ,KAAK,SAASA,CAAI,GAC9B,KAAK,aAAa,CACnB,CAEA,CAACf,EACD,gBAAuB,CACtB,KAAK,aAAa,CACnB,CAEA,CAACA,EACD,gBAAuB,CACtB,KAAK,aAAa,CACnB,CAES,QAAS,CACjB,OACC,oBAAC,QAAK,MAAM,eACX,oBAAC,QAAK,MAAM,wBACX,oBAAC,WAAK,CACP,EACA,oBAAC,QAAK,WAAS,UAAU,GAAI,KAAK,UAAW,MAAM,uBAAuB,KAAK,UAAU,OAAM,IAC7F,KAAK,EAAE,OACT,CACD,CAEF,CACD,EC9LA,IAAMiB,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,gBAEA,IAAMM,EAAaC,EACzBD,EACA,CAAC,CAAE,KAAAE,EAAM,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,SAAAC,CAAS,IAC5C,oBAAC,eAAY,KAAMJ,EAAM,QAASC,EAAS,UAAWC,EAAW,MAAOC,GACtEC,CACF,CAEF",
+  "names": ["RadiantElement", "bound", "customElement", "onEvent", "onUpdated", "prop", "query", "autoUpdate", "computePosition", "flip", "offset", "shift", "RuiTooltip", "anchor", "x", "y", "next", "event", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "RuiTooltip", "defineRadiantView", "slot", "content", "placement", "delay", "children"]
+}

package/dist/components/ui/tooltip/tooltip.css

@@ -0,0 +1,25 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-tooltip {
+	@apply inline-flex;
+}
+
+@layer components {
+	.rui-tooltip {
+		@apply relative inline-flex;
+	}
+
+	.rui-tooltip__trigger {
+		@apply inline-flex;
+	}
+
+	.rui-tooltip__content {
+		@apply absolute z-overlay max-w-xs rounded-container bg-on-background px-2 py-1 text-xs text-background shadow-md;
+		width: max-content;
+		pointer-events: none;
+	}
+
+	.rui-tooltip__content[hidden] {
+		display: none;
+	}
+}

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

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

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

@@ -0,0 +1,70 @@
+import { RadiantElement } from '@ecopages/radiant';
+import { type Placement } from '@floating-ui/dom';
+export type RuiTooltipProps = {
+    /** Accessible description shown in the tooltip. */
+    content?: string;
+    /** Floating-ui placement. Default: `top`. */
+    placement?: Placement;
+    /** Delay in ms before showing on hover/focus. Default: `200`. */
+    delay?: number;
+};
+type RuiTooltipBindings = {
+    content: string;
+};
+/**
+ * `<rui-tooltip>` — a popup that describes a trigger on hover or focus.
+ *
+ * Implements the WAI-ARIA APG Tooltip pattern: the popup has `role="tooltip"`
+ * and the focusable trigger references it with `aria-describedby`. The tooltip
+ * itself never receives focus.
+ *
+ * Event wiring:
+ * - Bubbling events (`focusin` / `focusout`, document `keydown`) use `@onEvent`.
+ * - `pointerenter` / `pointerleave` are bound directly on the host — they do not
+ *   bubble, so `@onEvent` delegation cannot see them on the slotted trigger.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
+ *
+ * @element rui-tooltip
+ * @slot - The trigger element (typically a button or focusable control).
+ */
+export declare class RuiTooltip extends RadiantElement<RuiTooltipBindings> {
+    content: string;
+    placement: Placement;
+    delay: number;
+    tooltipTarget: HTMLElement;
+    /**
+     * Plain (non-reactive) field, not a JSX binding target: `hidden` is toggled
+     * imperatively in `setOpen()` rather than bound, since it flips on every
+     * hover/focus in/out — high-frequency enough that a plain synchronous DOM
+     * write is preferable to routing it through the reactive binding system.
+     */
+    private open;
+    private showTimer;
+    private hideTimer;
+    private cleanup;
+    private tooltipId;
+    private describedEl;
+    /**
+     * Pointer enter/leave must be host listeners: those events do not bubble, and
+     * `@onEvent` only supports delegated (bubbling) listeners.
+     */
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private clearTimers;
+    private teardownFloating;
+    private getAnchor;
+    private wireTrigger;
+    updatePosition(): void;
+    onDescribedPropsUpdated(): void;
+    private setOpen;
+    private scheduleShow;
+    private scheduleHide;
+    onDocumentKeydown(event: KeyboardEvent): void;
+    onFocusIn(): void;
+    onFocusOut(event: FocusEvent): void;
+    onPointerEnter(): void;
+    onPointerLeave(): void;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiTree as RuiTreeElement, type RuiTreeProps, type RuiTreeChangeDetail } from './tree.script';
+export { RuiTree, type RuiTreeNode } from './tree';

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

@@ -0,0 +1,2 @@
+import{RadiantElement as R,customElement as v,event as A,onEvent as f,onUpdated as y,prop as g}from"@ecopages/radiant";function p(n,t){n.forEach((e,r)=>{e.tabIndex=r===t?0:-1})}function d(n,t){if(!n.length)return null;let e=Math.max(0,Math.min(n.length-1,t));return p(n,e),n[e]?.focus(),n[e]??null}function x(n,t){return n==="Home"?"first":n==="End"?"last":t==="horizontal"?n==="ArrowRight"?"next":n==="ArrowLeft"?"prev":null:n==="ArrowDown"?"next":n==="ArrowUp"?"prev":null}function m(n){let{items:t,current:e,key:r,orientation:i="horizontal",wrap:o=!0}=n;if(!t.length||!e)return{handled:!1};let l=t.indexOf(e);if(l<0)return{handled:!1};let s=x(r,i);if(!s)return{handled:!1};let a=l;s==="first"?a=0:s==="last"?a=t.length-1:s==="next"?a=o?(l+1)%t.length:Math.min(t.length-1,l+1):a=o?(l-1+t.length)%t.length:Math.max(0,l-1);let c=d(t,a);return c?{handled:!0,index:a,item:c}:{handled:!1}}var u=@v("rui-tree")class extends R{@g({type:String,defaultValue:""})label;@g({type:String,reflect:!0,defaultValue:""})value;@A({name:"rui-change",bubbles:!0,composed:!0})changeEvent;resolvedAriaLabel=this.$.label.map(t=>t||void 0);getVisibleItems(){return Array.from(this.querySelectorAll('[role="treeitem"]')).filter(t=>{let e=t.parentElement;for(;e&&e!==this;){if(e.getAttribute("role")==="group"&&e.hidden)return!1;e=e.parentElement}return!0})}getParentItem(t){let e=t.closest('[role="group"]');if(!e)return null;let r=e.previousElementSibling;return r?.getAttribute("role")==="treeitem"?r:null}getSiblingItems(t){let e=this.getParentItem(t),r=e?e.nextElementSibling?.getAttribute("role")==="group"?e.nextElementSibling:null:this.querySelector('[role="tree"]')??this;return r?Array.from(r.querySelectorAll(':scope > li > [role="treeitem"], :scope > [role="treeitem"]')):[]}syncSelection(){let t=Array.from(this.querySelectorAll('[role="treeitem"]')),e=this.getVisibleItems(),r=0;t.forEach((i,o)=>{let l=i.getAttribute("data-value")||i.id||"",s=!!this.value&&l===this.value;if(i.setAttribute("aria-selected",String(s)),s){let a=e.indexOf(i);a>=0&&(r=a)}else!this.value&&o===0&&(r=0)}),p(e,r)}syncExpanded(){let t=Array.from(this.querySelectorAll('[role="treeitem"]'));for(let e of t){if(!e.hasAttribute("aria-expanded"))continue;let r=e.nextElementSibling;r?.getAttribute("role")==="group"&&(r.hidden=e.getAttribute("aria-expanded")==="false")}}connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.syncExpanded(),this.syncSelection()})}@y("value")onValueUpdated(){this.syncSelection()}select(t){let e=t.getAttribute("data-value")||t.id||t.textContent?.trim()||"";this.value=e,this.syncSelection(),this.changeEvent.emit({value:e}),t.focus()}setExpanded(t,e){t.setAttribute("aria-expanded",String(e));let r=t.nextElementSibling;r?.getAttribute("role")==="group"&&(r.hidden=!e),this.syncSelection()}@f({selector:'[role="treeitem"]',type:"click"})onClick(t){let e=t.target.closest('[role="treeitem"]');!e||!this.contains(e)||(e.hasAttribute("aria-expanded")&&this.setExpanded(e,e.getAttribute("aria-expanded")!=="true"),this.select(e))}@f({selector:'[role="treeitem"]',type:"keydown"})onKeydown(t){let e=t.target.closest('[role="treeitem"]');if(e)switch(t.key){case"ArrowDown":case"ArrowUp":case"Home":case"End":{if(!m({items:this.getVisibleItems(),current:e,key:t.key,orientation:"vertical",wrap:!1}).handled)return;t.preventDefault();break}case"ArrowRight":{if(t.preventDefault(),e.getAttribute("aria-expanded")==="false"){this.setExpanded(e,!0);return}if(e.getAttribute("aria-expanded")==="true"){let r=this.getVisibleItems(),i=r.indexOf(e);r[i+1]&&d(r,i+1)}break}case"ArrowLeft":{if(t.preventDefault(),e.getAttribute("aria-expanded")==="true"){this.setExpanded(e,!1);return}let r=this.getParentItem(e);if(r){let i=this.getVisibleItems(),o=i.indexOf(r);o>=0&&d(i,o)}break}case"*":{t.preventDefault();for(let r of this.getSiblingItems(e))r.hasAttribute("aria-expanded")&&this.setExpanded(r,!0);break}case"Enter":{t.preventDefault(),e.hasAttribute("aria-expanded")&&this.setExpanded(e,e.getAttribute("aria-expanded")!=="true"),this.select(e);break}case" ":{t.preventDefault(),this.select(e);break}default:break}}render(){return React.createElement("ul",{class:"rui-tree",role:"tree","aria-label":this.resolvedAriaLabel,"aria-multiselectable":"false"},React.createElement("slot",null))}};var M=Symbol.for("@ecopages/storybook-radiant.viewElement"),b=Symbol.for("@ecopages/storybook-radiant.scriptModule"),T=Symbol.for("@ecopages/storybook-radiant.scriptExport");function L(n,t){n[M]=t;let e=t[b];e&&(n[b]=e,n[T]=t[T]??t.name)}function E(n,t){let e=(r=>t(r));return L(e,n),e}import"./tree.css";var h=({nodes:n})=>React.createElement(React.Fragment,null,n.map(t=>React.createElement("li",{class:"rui-tree__item"},t.children?.length?React.createElement(React.Fragment,null,React.createElement("button",{type:"button",class:"rui-tree__node",role:"treeitem","data-value":t.id,"aria-expanded":t.expanded??!1,"aria-selected":"false",tabindex:-1},t.label),React.createElement("ul",{role:"group",hidden:!(t.expanded??!1)},React.createElement(h,{nodes:t.children}))):React.createElement("button",{type:"button",class:"rui-tree__node",role:"treeitem","data-value":t.id,"aria-selected":"false",tabindex:-1},t.label)))),I=E(u,({slot:n,label:t,value:e,nodes:r})=>React.createElement("rui-tree",{slot:n,label:t,value:e},React.createElement(h,{nodes:r})));export{I as RuiTree,u as RuiTreeElement};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/tree/tree.script.tsx", "../../../../src/lib/roving-tabindex.ts", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/tree/tree.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, event, onEvent, onUpdated, prop } from '@ecopages/radiant';\nimport type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';\nimport { applyRovingTabindex, focusRovingItem, navigateRovingTabindex } from '../../../lib/roving-tabindex';\n\nexport type RuiTreeProps = {\n\tlabel?: string;\n\t/** Selected tree item `data-value` / id. */\n\tvalue?: string;\n};\n\nexport type RuiTreeChangeDetail = { value: string };\n\ntype RuiTreeBindings = {\n\tlabel: string;\n};\n\n/**\n * `<rui-tree>` \u2014 a hierarchical list of tree items.\n *\n * Implements a single-select APG Tree View with Arrow key navigation,\n * Home/End, parent navigation on ArrowLeft, and Enter/Space to select.\n * Expand/collapse is handled with ArrowRight/ArrowLeft (and `*` for siblings);\n * click or Enter on a parent also toggles expansion.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n * @element rui-tree\n * @fires rui-change\n */\n@customElement('rui-tree')\nexport class RuiTree extends RadiantElement<RuiTreeBindings> {\n\t@prop({ type: String, defaultValue: '' }) label: string;\n\t@prop({ type: String, reflect: true, defaultValue: '' }) value: string;\n\n\t@event({ name: 'rui-change', bubbles: true, composed: true })\n\tchangeEvent: EventEmitter<RuiTreeChangeDetail>;\n\n\tprivate readonly resolvedAriaLabel = this.$.label.map((label) => label || undefined);\n\n\tprivate getVisibleItems(): HTMLElement[] {\n\t\treturn Array.from(this.querySelectorAll<HTMLElement>('[role=\"treeitem\"]')).filter((item) => {\n\t\t\tlet node: HTMLElement | null = item.parentElement;\n\t\t\twhile (node && node !== this) {\n\t\t\t\tif (node.getAttribute('role') === 'group' && node.hidden) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t\tnode = node.parentElement;\n\t\t\t}\n\t\t\treturn true;\n\t\t});\n\t}\n\n\tprivate getParentItem(item: HTMLElement): HTMLElement | null {\n\t\tconst group = item.closest('[role=\"group\"]');\n\t\tif (!group) return null;\n\t\tconst parent = group.previousElementSibling as HTMLElement | null;\n\t\treturn parent?.getAttribute('role') === 'treeitem' ? parent : null;\n\t}\n\n\t/** Same-level treeitems as `item` (for `*` expand-siblings). */\n\tprivate getSiblingItems(item: HTMLElement): HTMLElement[] {\n\t\tconst parent = this.getParentItem(item);\n\t\tconst container = parent\n\t\t\t? parent.nextElementSibling?.getAttribute('role') === 'group'\n\t\t\t\t? (parent.nextElementSibling as HTMLElement)\n\t\t\t\t: null\n\t\t\t: (this.querySelector<HTMLElement>('[role=\"tree\"]') ?? this);\n\n\t\tif (!container) return [];\n\n\t\treturn Array.from(\n\t\t\tcontainer.querySelectorAll<HTMLElement>(':scope > li > [role=\"treeitem\"], :scope > [role=\"treeitem\"]'),\n\t\t);\n\t}\n\n\tprivate syncSelection(): void {\n\t\tconst items = Array.from(this.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'));\n\t\tconst visible = this.getVisibleItems();\n\t\tlet activeIndex = 0;\n\n\t\titems.forEach((item, i) => {\n\t\t\tconst id = item.getAttribute('data-value') || item.id || '';\n\t\t\tconst selected = Boolean(this.value) && id === this.value;\n\t\t\titem.setAttribute('aria-selected', String(selected));\n\t\t\tif (selected) {\n\t\t\t\tconst vis = visible.indexOf(item);\n\t\t\t\tif (vis >= 0) activeIndex = vis;\n\t\t\t} else if (!this.value && i === 0) {\n\t\t\t\tactiveIndex = 0;\n\t\t\t}\n\t\t});\n\n\t\tapplyRovingTabindex(visible, activeIndex);\n\t}\n\n\tprivate syncExpanded(): void {\n\t\tconst items = Array.from(this.querySelectorAll<HTMLElement>('[role=\"treeitem\"]'));\n\t\tfor (const item of items) {\n\t\t\tif (!item.hasAttribute('aria-expanded')) continue;\n\t\t\tconst group = item.nextElementSibling as HTMLElement | null;\n\t\t\tif (group?.getAttribute('role') === 'group') {\n\t\t\t\tgroup.hidden = item.getAttribute('aria-expanded') === 'false';\n\t\t\t}\n\t\t}\n\t}\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tqueueMicrotask(() => {\n\t\t\tthis.syncExpanded();\n\t\t\tthis.syncSelection();\n\t\t});\n\t}\n\n\t@onUpdated('value')\n\tonValueUpdated(): void {\n\t\tthis.syncSelection();\n\t}\n\n\tprivate select(item: HTMLElement): void {\n\t\tconst value = item.getAttribute('data-value') || item.id || item.textContent?.trim() || '';\n\t\tthis.value = value;\n\t\tthis.syncSelection();\n\t\tthis.changeEvent.emit({ value });\n\t\titem.focus();\n\t}\n\n\tprivate setExpanded(item: HTMLElement, expanded: boolean): void {\n\t\titem.setAttribute('aria-expanded', String(expanded));\n\t\tconst group = item.nextElementSibling as HTMLElement | null;\n\t\tif (group?.getAttribute('role') === 'group') group.hidden = !expanded;\n\t\tthis.syncSelection();\n\t}\n\n\t@onEvent({ selector: '[role=\"treeitem\"]', type: 'click' })\n\tonClick(event: Event): void {\n\t\tconst item = (event.target as HTMLElement).closest('[role=\"treeitem\"]') as HTMLElement | null;\n\t\tif (!item || !this.contains(item)) return;\n\t\tif (item.hasAttribute('aria-expanded')) {\n\t\t\tthis.setExpanded(item, item.getAttribute('aria-expanded') !== 'true');\n\t\t}\n\t\tthis.select(item);\n\t}\n\n\t@onEvent({ selector: '[role=\"treeitem\"]', type: 'keydown' })\n\tonKeydown(event: KeyboardEvent): void {\n\t\tconst current = (event.target as HTMLElement).closest('[role=\"treeitem\"]') as HTMLElement | null;\n\t\tif (!current) return;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'Home':\n\t\t\tcase 'End': {\n\t\t\t\tconst result = navigateRovingTabindex({\n\t\t\t\t\titems: this.getVisibleItems(),\n\t\t\t\t\tcurrent,\n\t\t\t\t\tkey: event.key,\n\t\t\t\t\torientation: 'vertical',\n\t\t\t\t\twrap: false,\n\t\t\t\t});\n\t\t\t\tif (!result.handled) return;\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowRight': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (current.getAttribute('aria-expanded') === 'false') {\n\t\t\t\t\tthis.setExpanded(current, true);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (current.getAttribute('aria-expanded') === 'true') {\n\t\t\t\t\tconst items = this.getVisibleItems();\n\t\t\t\t\tconst index = items.indexOf(current);\n\t\t\t\t\tif (items[index + 1]) focusRovingItem(items, index + 1);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'ArrowLeft': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (current.getAttribute('aria-expanded') === 'true') {\n\t\t\t\t\tthis.setExpanded(current, false);\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst parent = this.getParentItem(current);\n\t\t\t\tif (parent) {\n\t\t\t\t\tconst nextItems = this.getVisibleItems();\n\t\t\t\t\tconst parentIndex = nextItems.indexOf(parent);\n\t\t\t\t\tif (parentIndex >= 0) focusRovingItem(nextItems, parentIndex);\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase '*': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tfor (const sibling of this.getSiblingItems(current)) {\n\t\t\t\t\tif (sibling.hasAttribute('aria-expanded')) {\n\t\t\t\t\t\tthis.setExpanded(sibling, true);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Enter': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (current.hasAttribute('aria-expanded')) {\n\t\t\t\t\tthis.setExpanded(current, current.getAttribute('aria-expanded') !== 'true');\n\t\t\t\t}\n\t\t\t\tthis.select(current);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase ' ': {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.select(current);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tdefault:\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn (\n\t\t\t<ul class=\"rui-tree\" role=\"tree\" aria-label={this.resolvedAriaLabel} aria-multiselectable=\"false\">\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n", "export type RovingOrientation = 'horizontal' | 'vertical';\n\nexport type RovingNavResult = { handled: false } | { handled: true; index: number; item: HTMLElement };\n\n/**\n * Apply the APG roving-tabindex pattern: one item is tabbable, the rest are `-1`.\n */\nexport function applyRovingTabindex(items: HTMLElement[], activeIndex: number): void {\n\titems.forEach((item, index) => {\n\t\titem.tabIndex = index === activeIndex ? 0 : -1;\n\t});\n}\n\n/**\n * Focus `items[index]` and update tabindexes. Returns the focused item, or null.\n */\nexport function focusRovingItem(items: HTMLElement[], index: number): HTMLElement | null {\n\tif (!items.length) return null;\n\tconst next = Math.max(0, Math.min(items.length - 1, index));\n\tapplyRovingTabindex(items, next);\n\titems[next]?.focus();\n\treturn items[next] ?? null;\n}\n\nfunction deltaForKey(key: string, orientation: RovingOrientation): 'prev' | 'next' | 'first' | 'last' | null {\n\tif (key === 'Home') return 'first';\n\tif (key === 'End') return 'last';\n\n\tif (orientation === 'horizontal') {\n\t\tif (key === 'ArrowRight') return 'next';\n\t\tif (key === 'ArrowLeft') return 'prev';\n\t\treturn null;\n\t}\n\n\tif (key === 'ArrowDown') return 'next';\n\tif (key === 'ArrowUp') return 'prev';\n\treturn null;\n}\n\n/**\n * Handle arrow / Home / End navigation for a flat roving-tabindex collection.\n * Does not activate the item \u2014 callers decide whether to select on move.\n */\nexport function navigateRovingTabindex(options: {\n\titems: HTMLElement[];\n\tcurrent: HTMLElement | null;\n\tkey: string;\n\torientation?: RovingOrientation;\n\twrap?: boolean;\n}): RovingNavResult {\n\tconst { items, current, key, orientation = 'horizontal', wrap = true } = options;\n\tif (!items.length || !current) return { handled: false };\n\n\tconst index = items.indexOf(current);\n\tif (index < 0) return { handled: false };\n\n\tconst delta = deltaForKey(key, orientation);\n\tif (!delta) return { handled: false };\n\n\tlet next = index;\n\tif (delta === 'first') next = 0;\n\telse if (delta === 'last') next = items.length - 1;\n\telse if (delta === 'next') next = wrap ? (index + 1) % items.length : Math.min(items.length - 1, index + 1);\n\telse next = wrap ? (index - 1 + items.length) % items.length : Math.max(0, index - 1);\n\n\tconst item = focusRovingItem(items, next);\n\tif (!item) return { handled: false };\n\treturn { handled: true, index: next, item };\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 { RuiTreeProps } from './tree.script';\nimport { RuiTree as RuiTreeElement } from './tree.script';\nimport './tree.css';\n\nexport type RuiTreeNode = {\n\tid: string;\n\tlabel: JsxRenderable;\n\tchildren?: RuiTreeNode[];\n\texpanded?: boolean;\n};\n\nconst TreeNodes = ({ nodes }: { nodes: RuiTreeNode[] }) => (\n\t<>\n\t\t{nodes.map((node) => (\n\t\t\t<li class=\"rui-tree__item\">\n\t\t\t\t{node.children?.length ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tclass=\"rui-tree__node\"\n\t\t\t\t\t\t\trole=\"treeitem\"\n\t\t\t\t\t\t\tdata-value={node.id}\n\t\t\t\t\t\t\taria-expanded={node.expanded ?? false}\n\t\t\t\t\t\t\taria-selected=\"false\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{node.label}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t\t<ul role=\"group\" hidden={!(node.expanded ?? false)}>\n\t\t\t\t\t\t\t<TreeNodes nodes={node.children} />\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclass=\"rui-tree__node\"\n\t\t\t\t\t\trole=\"treeitem\"\n\t\t\t\t\t\tdata-value={node.id}\n\t\t\t\t\t\taria-selected=\"false\"\n\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t>\n\t\t\t\t\t\t{node.label}\n\t\t\t\t\t</button>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t))}\n\t</>\n);\n\nexport const RuiTree = defineRadiantView(\n\tRuiTreeElement,\n\t({ slot, label, value, nodes }: RuiTreeProps & RadiantSlotProps & { nodes: RuiTreeNode[] }) => (\n\t\t<rui-tree slot={slot} label={label} value={value}>\n\t\t\t<TreeNodes nodes={nodes} />\n\t\t</rui-tree>\n\t),\n);\n"],
+  "mappings": "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",
+  "names": ["RadiantElement", "customElement", "event", "onEvent", "onUpdated", "prop", "applyRovingTabindex", "items", "activeIndex", "item", "index", "focusRovingItem", "next", "deltaForKey", "key", "orientation", "navigateRovingTabindex", "options", "current", "wrap", "delta", "RuiTree", "customElement", "RadiantElement", "prop", "event", "label", "item", "node", "group", "parent", "container", "items", "visible", "activeIndex", "i", "id", "selected", "vis", "applyRovingTabindex", "onUpdated", "value", "expanded", "onEvent", "current", "navigateRovingTabindex", "index", "focusRovingItem", "nextItems", "parentIndex", "sibling", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "TreeNodes", "nodes", "node", "RuiTree", "defineRadiantView", "slot", "label", "value"]
+}

package/dist/components/ui/tree/tree.css

@@ -0,0 +1,54 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-tree {
+	@apply block;
+}
+
+@layer components {
+	.rui-tree {
+		@apply m-0 list-none rounded-container border border-border bg-background p-2 text-sm shadow-sm;
+	}
+
+	.rui-tree__item {
+		@apply list-none;
+	}
+
+	.rui-tree ul {
+		@apply m-0 mt-0.5 list-none border-l border-border pl-3;
+	}
+
+	.rui-tree__node {
+		@apply relative w-full cursor-pointer rounded-container border-0 bg-transparent px-2 py-1.5 text-left text-on-background;
+		@apply transition-colors duration-fast;
+	}
+
+	.rui-tree__node:hover {
+		@apply bg-surface;
+	}
+
+	.rui-tree__node[aria-selected='true'] {
+		@apply bg-primary-container font-medium text-on-primary-container;
+	}
+
+	.rui-tree__node[aria-expanded='false']::before,
+	.rui-tree__node[aria-expanded='true']::before {
+		content: '';
+		display: inline-block;
+		width: 0;
+		height: 0;
+		margin-right: 0.5rem;
+		border-top: 4px solid transparent;
+		border-bottom: 4px solid transparent;
+		border-left: 6px solid currentColor;
+		vertical-align: middle;
+		transition: transform 150ms ease;
+	}
+
+	.rui-tree__node[aria-expanded='true']::before {
+		transform: rotate(90deg);
+	}
+
+	.rui-tree__node:focus-visible {
+		@apply bg-surface outline-none ring-2 ring-focus-ring;
+	}
+}

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

@@ -0,0 +1,13 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+import type { RadiantSlotProps } from '../../../types';
+import type { RuiTreeProps } from './tree.script';
+import './tree.css';
+export type RuiTreeNode = {
+    id: string;
+    label: JsxRenderable;
+    children?: RuiTreeNode[];
+    expanded?: boolean;
+};
+export declare const RuiTree: import("../../../lib/radiant-view").RadiantViewComponent<RuiTreeProps & RadiantSlotProps & {
+    nodes: RuiTreeNode[];
+}>;

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

@@ -0,0 +1,45 @@
+import { RadiantElement } from '@ecopages/radiant';
+import type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';
+export type RuiTreeProps = {
+    label?: string;
+    /** Selected tree item `data-value` / id. */
+    value?: string;
+};
+export type RuiTreeChangeDetail = {
+    value: string;
+};
+type RuiTreeBindings = {
+    label: string;
+};
+/**
+ * `<rui-tree>` — a hierarchical list of tree items.
+ *
+ * Implements a single-select APG Tree View with Arrow key navigation,
+ * Home/End, parent navigation on ArrowLeft, and Enter/Space to select.
+ * Expand/collapse is handled with ArrowRight/ArrowLeft (and `*` for siblings);
+ * click or Enter on a parent also toggles expansion.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/
+ * @element rui-tree
+ * @fires rui-change
+ */
+export declare class RuiTree extends RadiantElement<RuiTreeBindings> {
+    label: string;
+    value: string;
+    changeEvent: EventEmitter<RuiTreeChangeDetail>;
+    private readonly resolvedAriaLabel;
+    private getVisibleItems;
+    private getParentItem;
+    /** Same-level treeitems as `item` (for `*` expand-siblings). */
+    private getSiblingItems;
+    private syncSelection;
+    private syncExpanded;
+    connectedCallback(): void;
+    onValueUpdated(): void;
+    private select;
+    private setExpanded;
+    onClick(event: Event): void;
+    onKeydown(event: KeyboardEvent): void;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiTreegrid as RuiTreegridElement, type RuiTreegridProps, type RuiTreegridChangeDetail, } from './treegrid.script';
+export { RuiTreegrid, type RuiTreegridRow } from './treegrid';