@ecopages/radiant-ui 0.1.0-beta.0

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

@@ -0,0 +1,141 @@
+import type { JsxRenderable } from '@ecopages/jsx';
+import type { RadiantSlotProps } from '../../../types';
+import type { RuiSidebarProps } from './sidebar.script';
+import type { RuiSidebarTriggerProps } from './sidebar-trigger.script';
+import './sidebar.css';
+export type RuiSidebarProviderProps = {
+    /** Layout context. `default` is the standard shell; `full` removes chrome. */
+    layout?: 'default' | 'full';
+    /** Slot for the sidebar element. */
+    sidebar?: JsxRenderable;
+    /** Slot for the inset (main content). */
+    children?: JsxRenderable;
+    /** Extra class names. */
+    class?: string;
+};
+/**
+ * `<div>` shell that wraps the sidebar and the main inset. Reflects
+ * `data-layout` so stylesheets can adapt. Plays the role of
+ * `SidebarProvider` from common sidebar kits, but without a runtime context —
+ * coordination between trigger, sidebar, and inset is achieved through
+ * `id`/`aria-controls` and shared `data-*` attributes.
+ */
+export declare function RuiSidebarProvider({ layout, sidebar, children, class: className, }: RuiSidebarProviderProps): JsxRenderable;
+export type RuiSidebarHeaderProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Accessible name for the header region. */
+    'aria-label'?: string;
+};
+/** Top section of the sidebar pane (logo, search, primary trigger). */
+export declare function RuiSidebarHeader({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarHeaderProps): JsxRenderable;
+export type RuiSidebarContentProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Optional label for the scrolling content region. */
+    'aria-label'?: string;
+};
+/** Scrollable middle section. Multiple allowed; each becomes its own region. */
+export declare function RuiSidebarContent({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarContentProps): JsxRenderable;
+export type RuiSidebarFooterProps = {
+    children: JsxRenderable;
+    class?: string;
+};
+/** Pinned bottom section (user, theme toggle, settings). */
+export declare function RuiSidebarFooter({ children, class: className }: RuiSidebarFooterProps): JsxRenderable;
+export type RuiSidebarSeparatorProps = {
+    class?: string;
+    /** Accessible label for the separator. */
+    'aria-label'?: string;
+};
+/** Horizontal rule between sidebar sections. */
+export declare function RuiSidebarSeparator({ class: className, 'aria-label': ariaLabel }: RuiSidebarSeparatorProps): JsxRenderable;
+export type RuiSidebarGroupProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Accessible label for the group region. */
+    'aria-label'?: string;
+};
+/** Landmark group of related sidebar items. */
+export declare function RuiSidebarGroup({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarGroupProps): JsxRenderable;
+export type RuiSidebarGroupLabelProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Optional `id` so the group can be referenced by `aria-labelledby`. */
+    id?: string;
+};
+/** Heading for a sidebar group. */
+export declare function RuiSidebarGroupLabel({ children, class: className, id }: RuiSidebarGroupLabelProps): JsxRenderable;
+export type RuiSidebarGroupActionProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Accessible label for the action button. */
+    'aria-label'?: string;
+};
+/** Top-right action button inside a group header. */
+export declare function RuiSidebarGroupAction({ children, class: className, 'aria-label': ariaLabel, }: RuiSidebarGroupActionProps): JsxRenderable;
+export type RuiSidebarGroupHeaderProps = {
+    label: JsxRenderable;
+    action?: JsxRenderable;
+    class?: string;
+};
+/** Convenience: a label + optional action in one row. */
+export declare function RuiSidebarGroupHeader({ label, action, class: className }: RuiSidebarGroupHeaderProps): JsxRenderable;
+export type RuiSidebarMenuProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Accessible label for the menu list. */
+    'aria-label'?: string;
+};
+/** `<ul>` of sidebar items. */
+export declare function RuiSidebarMenu({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarMenuProps): JsxRenderable;
+export type RuiSidebarMenuItemProps = {
+    children: JsxRenderable;
+    class?: string;
+};
+/** `<li>` of a sidebar menu. */
+export declare function RuiSidebarMenuItem({ children, class: className }: RuiSidebarMenuItemProps): JsxRenderable;
+export type RuiSidebarMenuButtonProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Mark this button as the current page. */
+    isActive?: boolean;
+    /** Render as a different element via the `as` prop. Default: `a` when `href` is set, else `button`. */
+    as?: 'a' | 'button';
+    /** Forwarded to anchor or button. */
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    /** Optional tooltip label for collapsed-icon mode. */
+    tooltip?: string;
+    disabled?: boolean;
+    /** Click handler for `button` mode. */
+    onClick?: (event: Event) => void;
+};
+/**
+ * The clickable surface inside a `RuiSidebarMenuItem`. When the sidebar
+ * collapses to icon mode, only this element remains visible; it must keep an
+ * accessible name via `tooltip` or visible children.
+ */
+export declare function RuiSidebarMenuButton({ children, class: className, isActive, as, href, type, tooltip, disabled, onClick, }: RuiSidebarMenuButtonProps): JsxRenderable;
+export type RuiSidebarMenuActionProps = RuiSidebarMenuButtonProps;
+/** Smaller, secondary button (e.g. `+ New`) below a menu or group. */
+export declare function RuiSidebarMenuAction(props: RuiSidebarMenuActionProps): JsxRenderable;
+export type RuiSidebarInsetProps = {
+    children: JsxRenderable;
+    class?: string;
+    /** Optional `id` so the sidebar trigger can target the main landmark. */
+    id?: string;
+};
+/** The main content area that sits next to the sidebar. */
+export declare function RuiSidebarInset({ children, class: className, id }: RuiSidebarInsetProps): JsxRenderable;
+export type RuiSidebarViewProps = RuiSidebarProps & RadiantSlotProps & {
+    id: string;
+    children: JsxRenderable;
+    class?: string;
+};
+export declare const RuiSidebar: import("../../../lib/radiant-view").RadiantViewComponent<RuiSidebarViewProps>;
+export type RuiSidebarTriggerViewProps = RuiSidebarTriggerProps & RadiantSlotProps & {
+    children?: JsxRenderable;
+    class?: string;
+};
+export declare const RuiSidebarTrigger: import("../../../lib/radiant-view").RadiantViewComponent<RuiSidebarTriggerViewProps>;

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

@@ -0,0 +1,140 @@
+import { RadiantElement } from '@ecopages/radiant';
+import type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';
+export type RuiSidebarVariant = 'sidebar' | 'inset';
+export type RuiSidebarSide = 'left' | 'right';
+export type RuiSidebarCollapsible = 'off' | 'icon' | 'full';
+export type RuiSidebarState = 'expanded' | 'collapsed';
+export type RuiSidebarProps = {
+    /** Visual treatment. `sidebar` is the default bordered pane; `inset` floats inside a card. Default: `sidebar`. */
+    variant?: RuiSidebarVariant;
+    /** Which edge the sidebar sits on. Default: `left`. */
+    side?: RuiSidebarSide;
+    /** Collapse behavior. `off` keeps the pane open; `icon` collapses to an icon rail; `full` collapses fully. Default: `off`. */
+    collapsible?: RuiSidebarCollapsible;
+    /** Initial open state when uncontrolled. Default: `true`. */
+    defaultOpen?: boolean;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Initial width in pixels when uncontrolled. Default: `256`. */
+    defaultWidth?: number;
+    /** Controlled width in pixels. */
+    width?: number;
+    /** Minimum width in pixels when resizing. Default: `200`. */
+    minWidth?: number;
+    /** Maximum width in pixels when resizing. Default: `480`. */
+    maxWidth?: number;
+    /** Hide on viewports below this width. Default: `768`. */
+    mobileBreakpoint?: number;
+    /** Accessible name announced by the pane landmark and triggers. Default: `Sidebar`. */
+    label?: string;
+};
+export type RuiSidebarToggleDetail = {
+    open: boolean;
+    state: RuiSidebarState;
+};
+export type RuiSidebarResizeDetail = {
+    width: number;
+};
+type RuiSidebarBindings = {
+    label: string;
+};
+/**
+ * `<rui-sidebar>` — a resizable, collapsible side panel.
+ *
+ * The sidebar hosts the pane content in the default slot. When the parent
+ * supplies a `RuiSidebarRail` element (or the `collapsible` mode is not
+ * `off`), the sidebar manages open/closed state, a focusable resize handle,
+ * and keyboard navigation that follows the APG Window Splitter pattern.
+ *
+ * When `collapsible="off"` (the default), the pane stays open and exposes
+ * a draggable resize handle. When `collapsible="icon"`, the pane collapses
+ * to a narrow rail. When `collapsible="full"`, the pane is hidden until
+ * toggled, and shown as an overlay drawer below the mobile breakpoint.
+ *
+ * The host reflects `data-state`, `data-collapsible`, `data-variant`,
+ * `data-side`, and `data-mobile` so the stylesheet can drive every visual
+ * mode without imperative JS.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+ *
+ * @element rui-sidebar
+ * @slot - Pane content. Stack header, content, and footer inside.
+ * @fires rui-sidebar-toggle - Emitted on every open/closed transition.
+ *        `detail` is `{ open, state }`.
+ * @fires rui-sidebar-resize - Emitted on every width change. `detail` is `{ width }`.
+ * @fires rui-sidebar-mobile-change - Emitted when the host flips between
+ *        mobile drawer mode and inline mode. `detail` is `{ mobile: boolean }`.
+ */
+export declare class RuiSidebar extends RadiantElement<RuiSidebarBindings> {
+    variant: RuiSidebarVariant;
+    side: RuiSidebarSide;
+    collapsible: RuiSidebarCollapsible;
+    defaultWidth: number;
+    width: number | undefined;
+    minWidth: number;
+    maxWidth: number;
+    defaultOpen: boolean;
+    open: boolean | undefined;
+    mobileBreakpoint: number;
+    label: string;
+    rootTarget: HTMLElement;
+    paneTarget: HTMLElement;
+    handleTarget: HTMLElement;
+    scrimTarget: HTMLButtonElement;
+    toggleEvent: EventEmitter<RuiSidebarToggleDetail>;
+    resizeEvent: EventEmitter<RuiSidebarResizeDetail>;
+    mobileChangeEvent: EventEmitter<{
+        mobile: boolean;
+    }>;
+    isMobile: boolean;
+    private mediaQuery;
+    private readonly mediaListener;
+    private dragging;
+    private dragStartCoord;
+    private dragStartSize;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Keep host `data-*` in sync for `:has(> rui-sidebar[...])` and public API.
+     * Visual styles target the inner `.rui-sidebar` root (host is `display: contents`).
+     */
+    private syncHostAttributes;
+    private isOpen;
+    /**
+     * Optional `Number` props initialize to `0` when no attribute/default is set
+     * (`defaultValueForType(Number)`). Treat that unset `0` as “use defaultWidth”.
+     */
+    private ensureWidthInitialized;
+    onStateUpdated(): void;
+    onMobileBreakpointUpdated(): void;
+    private unbindMobileMediaQuery;
+    private bindMobileMediaQuery;
+    private setMobile;
+    private clampWidth;
+    private paneWidth;
+    /** Drive layout through the CSS variable only — never set inline pane width. */
+    private syncPaneWidthVar;
+    private applyWidth;
+    toggle(): void;
+    setOpen(next: boolean): void;
+    private beginDrag;
+    private endDrag;
+    private onPointerMove;
+    private onPointerUp;
+    private onHandlePointerDown;
+    private onHandleKeydown;
+    private onScrimClick;
+    onHostKeydown(event: Event): void;
+    /**
+     * Only the pane's `aria-label` is bound below. `data-state`/`data-collapsible`/
+     * `data-variant`/`data-side`/`data-mobile` and the handle's `aria-value*`/
+     * `aria-orientation` stay plain reads deliberately — this component's open/
+     * close, drag-resize, and mobile-detection paths are the same high-frequency
+     * interactive category where two sibling components in this migration
+     * (tooltip, menu-button) hit real regressions from binding conversion that
+     * weren't fully root-caused. Deferred as a follow-up rather than risking the
+     * same class of bug here under the same review budget.
+     */
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiSlider as RuiSliderElement, type RuiSliderProps, type RuiSliderChangeDetail } from './slider.script';
+export { RuiSlider } from './slider';

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

@@ -0,0 +1,2 @@
+import{RadiantElement as T,customElement as M,event as R,onEvent as s,onUpdated as h,prop as r,query as u}from"@ecopages/radiant";var m=@M("rui-slider")class extends T{@r({type:String,defaultValue:"single"})variant;@r({type:Number,reflect:!0,defaultValue:50})value;@r({type:Number,reflect:!0,attribute:"range-min",defaultValue:25})rangeMin;@r({type:Number,reflect:!0,attribute:"range-max",defaultValue:75})rangeMax;@r({type:Number,defaultValue:0})min;@r({type:Number,defaultValue:100})max;@r({type:Number,defaultValue:1})step;@r({type:Number,defaultValue:0})minDistance;@r({type:Boolean,reflect:!0,defaultValue:!1})disabled;@r({type:String,defaultValue:""})label;@r({type:String,defaultValue:""})name;@R({name:"rui-change",bubbles:!0,composed:!0})changeEvent;@u({ref:"input"})inputTarget;@u({ref:"value"})valueTarget;@u({ref:"rangeMinThumb"})rangeMinThumb;@u({ref:"rangeMaxThumb"})rangeMaxThumb;@u({ref:"rangeFill"})rangeFill;interacting=!1;activeThumb=null;pendingRange=null;resolvedDisabledTabindex=this.$.disabled.map(e=>e?-1:0);resolvedMinLabel=this.$.label.map(e=>e?`${e} minimum`:"Minimum value");resolvedMaxLabel=this.$.label.map(e=>e?`${e} maximum`:"Maximum value");resolvedName=this.$.name.map(e=>e||void 0);connectedCallback(){super.connectedCallback(),queueMicrotask(()=>{this.variant==="single"?this.syncInputFromValue():this.syncRangeUi()})}@h(["value","min","max","step","variant"])onSinglePropsUpdated(){this.variant!=="single"||this.interacting||this.syncInputFromValue()}@h(["rangeMin","rangeMax","min","max","step","minDistance","variant"])onRangePropsUpdated(){this.variant!=="range"||this.activeThumb||this.syncRangeUi()}clamp(e){let t=Math.round(e/this.step)*this.step;return Math.min(this.max,Math.max(this.min,t))}normalizeRange(e=this.rangeMin,t=this.rangeMax){let i=this.clamp(e),a=this.clamp(t);return i>a&&([i,a]=[a,i]),a-i<this.minDistance&&(this.activeThumb==="min"?i=this.clamp(a-this.minDistance):a=this.clamp(i+this.minDistance)),[i,a]}getActiveRange(){return this.normalizeRange(...this.pendingRange??[this.rangeMin,this.rangeMax])}percentFor(e){return this.max===this.min?0:(e-this.min)/(this.max-this.min)*100}valueFromPointer(e,t){let i=t.getBoundingClientRect(),a=Math.min(1,Math.max(0,(e-i.left)/i.width));return this.clamp(this.min+a*(this.max-this.min))}syncInputFromValue(){let e=this.inputTarget;if(!e)return;let t=String(this.value);e.value!==t&&(e.value=t),e.min=String(this.min),e.max=String(this.max),e.step=String(this.step),this.updateDisplayedValue(this.value)}updateDisplayedValue(e){this.valueTarget&&(this.valueTarget.textContent=String(e)),this.inputTarget&&this.inputTarget.setAttribute("aria-valuenow",String(e))}syncRangeUi(){let[e,t]=this.getActiveRange();this.activeThumb||(e!==this.rangeMin&&(this.rangeMin=e),t!==this.rangeMax&&(this.rangeMax=t)),this.paintRangeUi(e,t)}paintRangeUi(e,t){let i=this.percentFor(e),a=this.percentFor(t),n=this.querySelector(".rui-slider__range-track");n&&(n.style.setProperty("--rui-slider-min",`${i}%`),n.style.setProperty("--rui-slider-max",`${a}%`)),this.rangeMinThumb&&(this.rangeMinThumb.setAttribute("aria-valuemin",String(this.min)),this.rangeMinThumb.setAttribute("aria-valuemax",String(t)),this.rangeMinThumb.setAttribute("aria-valuenow",String(e))),this.rangeMaxThumb&&(this.rangeMaxThumb.setAttribute("aria-valuemin",String(e)),this.rangeMaxThumb.setAttribute("aria-valuemax",String(this.max)),this.rangeMaxThumb.setAttribute("aria-valuenow",String(t))),this.rangeFill&&(this.rangeFill.style.left=`${i}%`,this.rangeFill.style.width=`${a-i}%`),this.valueTarget&&(this.valueTarget.textContent=`${e} \u2013 ${t}`)}commitRange(e=!0){let[t,i]=this.getActiveRange(),a=t!==this.rangeMin||i!==this.rangeMax;this.pendingRange=null,this.rangeMin=t,this.rangeMax=i,this.paintRangeUi(t,i),e&&a&&this.changeEvent.emit({values:[t,i]})}setRangeValue(e,t){this.activeThumb=e;let[i,a]=this.pendingRange??[this.rangeMin,this.rangeMax],[n,o]=this.normalizeRange(e==="min"?t:i,e==="max"?t:a);this.pendingRange=[n,o],this.paintRangeUi(n,o)}commitSingleValue(e){let t=Number(e.value);this.updateDisplayedValue(t),t!==this.value&&(this.value=t,this.changeEvent.emit({value:t}))}@s({ref:"input",type:"pointerdown"})onPointerDown(e){e.button!==0||this.variant!=="single"||(this.interacting=!0)}@s({ref:"input",type:"pointerup"})onPointerUp(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}@s({ref:"input",type:"pointercancel"})onPointerCancel(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}@s({ref:"input",type:"input"})onInput(e){if(this.variant!=="single")return;let t=e.target,i=Number(t.value);if(this.updateDisplayedValue(i),this.interacting){this.changeEvent.emit({value:i});return}this.commitSingleValue(t)}@s({ref:"input",type:"change"})onChange(e){this.variant==="single"&&(this.interacting=!1,this.commitSingleValue(e.target))}@s({selector:"[data-thumb]",type:"pointerdown"})onThumbPointerDown(e){if(e.button!==0||this.variant!=="range"||this.disabled)return;let t=e.target.closest("[data-thumb]");if(!t)return;let i=t.getAttribute("data-thumb");this.activeThumb=i,this.pendingRange=[this.rangeMin,this.rangeMax],t.setPointerCapture(e.pointerId),e.preventDefault()}@s({selector:"[data-thumb]",type:"pointermove"})onThumbPointerMove(e){if(!this.activeThumb||this.variant!=="range")return;let t=this.querySelector(".rui-slider__range-track");t&&(this.setRangeValue(this.activeThumb,this.valueFromPointer(e.clientX,t)),this.pendingRange&&this.changeEvent.emit({values:this.pendingRange}))}@s({selector:"[data-thumb]",type:"pointerup"})onThumbPointerUp(){!this.activeThumb||this.variant!=="range"||(this.commitRange(),this.activeThumb=null)}@s({selector:"[data-thumb]",type:"pointercancel"})onThumbPointerCancel(){!this.activeThumb||this.variant!=="range"||(this.pendingRange=null,this.syncRangeUi(),this.activeThumb=null)}@s({selector:"[data-thumb]",type:"keydown"})onThumbKeydown(e){if(this.variant!=="range"||this.disabled)return;let t=e.target.closest("[data-thumb]");if(!t)return;let i=t.getAttribute("data-thumb"),a=i==="min"?this.rangeMin:this.rangeMax,n=a;switch(e.key){case"ArrowRight":case"ArrowUp":n=this.clamp(a+this.step);break;case"ArrowLeft":case"ArrowDown":n=this.clamp(a-this.step);break;case"Home":n=this.min;break;case"End":n=this.max;break;case"PageUp":n=this.clamp(a+this.step*10);break;case"PageDown":n=this.clamp(a-this.step*10);break;default:return}e.preventDefault(),this.setRangeValue(i,n),this.commitRange(!1),this.changeEvent.emit({values:[this.rangeMin,this.rangeMax]}),this.activeThumb=null}render(){return this.variant==="range"?React.createElement("div",{class:"rui-slider rui-slider--range"},this.label?React.createElement("span",{class:"rui-slider__label"},this.label):null,React.createElement("div",{class:"rui-slider__range"},React.createElement("div",{class:"rui-slider__range-track"},React.createElement("div",{class:"rui-slider__range-fill","data-ref":"rangeFill"}),React.createElement("button",{type:"button",class:"rui-slider__thumb","data-ref":"rangeMinThumb","data-thumb":"min",role:"slider",tabindex:this.resolvedDisabledTabindex,"aria-label":this.resolvedMinLabel,"aria-valuemin":this.min,"aria-valuemax":this.rangeMax,"aria-valuenow":this.rangeMin,disabled:this.$.disabled}),React.createElement("button",{type:"button",class:"rui-slider__thumb","data-ref":"rangeMaxThumb","data-thumb":"max",role:"slider",tabindex:this.resolvedDisabledTabindex,"aria-label":this.resolvedMaxLabel,"aria-valuemin":this.rangeMin,"aria-valuemax":this.max,"aria-valuenow":this.rangeMax,disabled:this.$.disabled}))),React.createElement("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true"},this.rangeMin," \u2013 ",this.rangeMax)):React.createElement("label",{class:"rui-slider"},this.label?React.createElement("span",{class:"rui-slider__label"},this.label):null,React.createElement("input",{type:"range","data-ref":"input","data-rui-control":!0,"data-rui-control-type":"number",class:"rui-slider__input",disabled:this.$.disabled,name:this.resolvedName,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-valuenow":this.value}),React.createElement("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true"},this.value))}};var x=Symbol.for("@ecopages/storybook-radiant.viewElement"),d=Symbol.for("@ecopages/storybook-radiant.scriptModule"),g=Symbol.for("@ecopages/storybook-radiant.scriptExport");function y(l,e){l[x]=e;let t=e[d];t&&(l[d]=t,l[g]=e[g]??e.name)}function p(l,e){let t=(i=>e(i));return y(t,l),t}import"./slider.css";var E=p(m,({slot:l,variant:e,value:t,values:i,min:a,max:n,step:o,minDistance:c,disabled:b,label:v,name:f})=>React.createElement("rui-slider",{slot:l,variant:e,value:t,rangeMin:i?.[0],rangeMax:i?.[1],min:a,max:n,step:o,minDistance:c,disabled:b,label:v,name:f}));export{E as RuiSlider,m as RuiSliderElement};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/slider/slider.script.tsx", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/slider/slider.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, event, onEvent, onUpdated, prop, query } from '@ecopages/radiant';\nimport type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';\n\nexport type RuiSliderVariant = 'single' | 'range';\n\nexport type RuiSliderProps = {\n\tvariant?: RuiSliderVariant;\n\tvalue?: number;\n\trangeMin?: number;\n\trangeMax?: number;\n\tmin?: number;\n\tmax?: number;\n\tstep?: number;\n\tminDistance?: number;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tname?: string;\n};\n\nexport type RuiSliderChangeDetail = { value: number } | { values: [number, number] };\n\ntype RuiSliderBindings = {\n\tdisabled: boolean;\n\tname: string;\n\tlabel: string;\n};\n\n/**\n * `<rui-slider>` \u2014 select a value from a continuous or discrete range.\n *\n * Single mode uses native `<input type=\"range\">`. Range mode implements the APG\n * multi-thumb slider pattern with two `role=\"slider\"` thumbs on one track.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/\n *\n * @element rui-slider\n * @fires rui-change\n */\n@customElement('rui-slider')\nexport class RuiSlider extends RadiantElement<RuiSliderBindings> {\n\t@prop({ type: String, defaultValue: 'single' }) variant: RuiSliderVariant;\n\t@prop({ type: Number, reflect: true, defaultValue: 50 }) value: number;\n\t@prop({ type: Number, reflect: true, attribute: 'range-min', defaultValue: 25 }) rangeMin: number;\n\t@prop({ type: Number, reflect: true, attribute: 'range-max', defaultValue: 75 }) rangeMax: number;\n\t@prop({ type: Number, defaultValue: 0 }) min: number;\n\t@prop({ type: Number, defaultValue: 100 }) max: number;\n\t@prop({ type: Number, defaultValue: 1 }) step: number;\n\t@prop({ type: Number, defaultValue: 0 }) minDistance: number;\n\t@prop({ type: Boolean, reflect: true, defaultValue: false }) disabled: boolean;\n\t@prop({ type: String, defaultValue: '' }) label: string;\n\t@prop({ type: String, defaultValue: '' }) name: string;\n\n\t@event({ name: 'rui-change', bubbles: true, composed: true })\n\tchangeEvent: EventEmitter<RuiSliderChangeDetail>;\n\n\t@query({ ref: 'input' }) inputTarget: HTMLInputElement;\n\t@query({ ref: 'value' }) valueTarget: HTMLElement;\n\t@query({ ref: 'rangeMinThumb' }) rangeMinThumb: HTMLElement;\n\t@query({ ref: 'rangeMaxThumb' }) rangeMaxThumb: HTMLElement;\n\t@query({ ref: 'rangeFill' }) rangeFill: HTMLElement;\n\n\tprivate interacting = false;\n\tprivate activeThumb: 'min' | 'max' | null = null;\n\t/** Live range while dragging \u2014 avoids reactive prop updates that re-render mid-drag. */\n\tprivate pendingRange: [number, number] | null = null;\n\n\t/**\n\t * Only disabled/tabindex/aria-label/name are bound below \u2014 none of them\n\t * change during a drag. The value text and every aria-value* attribute\n\t * stay plain reads + imperative writes (paintRangeUi/updateDisplayedValue)\n\t * deliberately: they must show the LIVE pointer position while dragging,\n\t * before pendingRange commits to the reactive value/rangeMin/rangeMax\n\t * props. A binding only reacts to committed prop changes, so it cannot\n\t * replace that live-preview write without losing drag feedback \u2014 this\n\t * isn't a caution-driven exception, it's the correct tool for the job.\n\t */\n\tprivate readonly resolvedDisabledTabindex = this.$.disabled.map((disabled) => (disabled ? -1 : 0));\n\tprivate readonly resolvedMinLabel = this.$.label.map((label) => (label ? `${label} minimum` : 'Minimum value'));\n\tprivate readonly resolvedMaxLabel = this.$.label.map((label) => (label ? `${label} maximum` : 'Maximum value'));\n\tprivate readonly resolvedName = this.$.name.map((name) => name || undefined);\n\n\toverride connectedCallback(): void {\n\t\tsuper.connectedCallback();\n\t\tqueueMicrotask(() => {\n\t\t\tif (this.variant === 'single') {\n\t\t\t\tthis.syncInputFromValue();\n\t\t\t} else {\n\t\t\t\tthis.syncRangeUi();\n\t\t\t}\n\t\t});\n\t}\n\n\t@onUpdated(['value', 'min', 'max', 'step', 'variant'])\n\tonSinglePropsUpdated(): void {\n\t\tif (this.variant !== 'single' || this.interacting) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.syncInputFromValue();\n\t}\n\n\t@onUpdated(['rangeMin', 'rangeMax', 'min', 'max', 'step', 'minDistance', 'variant'])\n\tonRangePropsUpdated(): void {\n\t\tif (this.variant !== 'range' || this.activeThumb) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.syncRangeUi();\n\t}\n\n\tprivate clamp(next: number): number {\n\t\tconst stepped = Math.round(next / this.step) * this.step;\n\t\treturn Math.min(this.max, Math.max(this.min, stepped));\n\t}\n\n\tprivate normalizeRange(low = this.rangeMin, high = this.rangeMax): [number, number] {\n\t\tlet nextLow = this.clamp(low);\n\t\tlet nextHigh = this.clamp(high);\n\n\t\tif (nextLow > nextHigh) {\n\t\t\t[nextLow, nextHigh] = [nextHigh, nextLow];\n\t\t}\n\n\t\tif (nextHigh - nextLow < this.minDistance) {\n\t\t\tif (this.activeThumb === 'min') {\n\t\t\t\tnextLow = this.clamp(nextHigh - this.minDistance);\n\t\t\t} else {\n\t\t\t\tnextHigh = this.clamp(nextLow + this.minDistance);\n\t\t\t}\n\t\t}\n\n\t\treturn [nextLow, nextHigh];\n\t}\n\n\tprivate getActiveRange(): [number, number] {\n\t\treturn this.normalizeRange(...(this.pendingRange ?? [this.rangeMin, this.rangeMax]));\n\t}\n\n\tprivate percentFor(value: number): number {\n\t\tif (this.max === this.min) {\n\t\t\treturn 0;\n\t\t}\n\n\t\treturn ((value - this.min) / (this.max - this.min)) * 100;\n\t}\n\n\tprivate valueFromPointer(clientX: number, track: HTMLElement): number {\n\t\tconst rect = track.getBoundingClientRect();\n\t\tconst ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));\n\t\treturn this.clamp(this.min + ratio * (this.max - this.min));\n\t}\n\n\tprivate syncInputFromValue(): void {\n\t\tconst input = this.inputTarget;\n\t\tif (!input) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst nextValue = String(this.value);\n\t\tif (input.value !== nextValue) {\n\t\t\tinput.value = nextValue;\n\t\t}\n\n\t\tinput.min = String(this.min);\n\t\tinput.max = String(this.max);\n\t\tinput.step = String(this.step);\n\t\tthis.updateDisplayedValue(this.value);\n\t}\n\n\tprivate updateDisplayedValue(next: number): void {\n\t\tif (this.valueTarget) {\n\t\t\tthis.valueTarget.textContent = String(next);\n\t\t}\n\n\t\tif (this.inputTarget) {\n\t\t\tthis.inputTarget.setAttribute('aria-valuenow', String(next));\n\t\t}\n\t}\n\n\tprivate syncRangeUi(): void {\n\t\tconst [low, high] = this.getActiveRange();\n\n\t\tif (!this.activeThumb) {\n\t\t\tif (low !== this.rangeMin) {\n\t\t\t\tthis.rangeMin = low;\n\t\t\t}\n\t\t\tif (high !== this.rangeMax) {\n\t\t\t\tthis.rangeMax = high;\n\t\t\t}\n\t\t}\n\n\t\tthis.paintRangeUi(low, high);\n\t}\n\n\tprivate paintRangeUi(low: number, high: number): void {\n\t\tconst lowPercent = this.percentFor(low);\n\t\tconst highPercent = this.percentFor(high);\n\t\tconst track = this.querySelector<HTMLElement>('.rui-slider__range-track');\n\n\t\tif (track) {\n\t\t\ttrack.style.setProperty('--rui-slider-min', `${lowPercent}%`);\n\t\t\ttrack.style.setProperty('--rui-slider-max', `${highPercent}%`);\n\t\t}\n\n\t\tif (this.rangeMinThumb) {\n\t\t\tthis.rangeMinThumb.setAttribute('aria-valuemin', String(this.min));\n\t\t\tthis.rangeMinThumb.setAttribute('aria-valuemax', String(high));\n\t\t\tthis.rangeMinThumb.setAttribute('aria-valuenow', String(low));\n\t\t}\n\n\t\tif (this.rangeMaxThumb) {\n\t\t\tthis.rangeMaxThumb.setAttribute('aria-valuemin', String(low));\n\t\t\tthis.rangeMaxThumb.setAttribute('aria-valuemax', String(this.max));\n\t\t\tthis.rangeMaxThumb.setAttribute('aria-valuenow', String(high));\n\t\t}\n\n\t\tif (this.rangeFill) {\n\t\t\tthis.rangeFill.style.left = `${lowPercent}%`;\n\t\t\tthis.rangeFill.style.width = `${highPercent - lowPercent}%`;\n\t\t}\n\n\t\tif (this.valueTarget) {\n\t\t\tthis.valueTarget.textContent = `${low} \u2013 ${high}`;\n\t\t}\n\t}\n\n\tprivate commitRange(emit = true): void {\n\t\tconst [low, high] = this.getActiveRange();\n\t\tconst changed = low !== this.rangeMin || high !== this.rangeMax;\n\t\tthis.pendingRange = null;\n\t\tthis.rangeMin = low;\n\t\tthis.rangeMax = high;\n\t\tthis.paintRangeUi(low, high);\n\n\t\tif (emit && changed) {\n\t\t\tthis.changeEvent.emit({ values: [low, high] });\n\t\t}\n\t}\n\n\tprivate setRangeValue(thumb: 'min' | 'max', next: number): void {\n\t\tthis.activeThumb = thumb;\n\t\tconst [currentLow, currentHigh] = this.pendingRange ?? [this.rangeMin, this.rangeMax];\n\t\tconst [low, high] = this.normalizeRange(\n\t\t\tthumb === 'min' ? next : currentLow,\n\t\t\tthumb === 'max' ? next : currentHigh,\n\t\t);\n\t\tthis.pendingRange = [low, high];\n\t\tthis.paintRangeUi(low, high);\n\t}\n\n\tprivate commitSingleValue(input: HTMLInputElement): void {\n\t\tconst next = Number(input.value);\n\t\tthis.updateDisplayedValue(next);\n\n\t\tif (next === this.value) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = next;\n\t\tthis.changeEvent.emit({ value: next });\n\t}\n\n\t@onEvent({ ref: 'input', type: 'pointerdown' })\n\tonPointerDown(event: PointerEvent): void {\n\t\tif (event.button !== 0 || this.variant !== 'single') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.interacting = true;\n\t}\n\n\t@onEvent({ ref: 'input', type: 'pointerup' })\n\tonPointerUp(event: Event): void {\n\t\tif (!this.interacting || this.variant !== 'single') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.interacting = false;\n\t\tthis.commitSingleValue(event.target as HTMLInputElement);\n\t}\n\n\t@onEvent({ ref: 'input', type: 'pointercancel' })\n\tonPointerCancel(event: Event): void {\n\t\tif (!this.interacting || this.variant !== 'single') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.interacting = false;\n\t\tthis.commitSingleValue(event.target as HTMLInputElement);\n\t}\n\n\t@onEvent({ ref: 'input', type: 'input' })\n\tonInput(event: Event): void {\n\t\tif (this.variant !== 'single') {\n\t\t\treturn;\n\t\t}\n\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst next = Number(input.value);\n\t\tthis.updateDisplayedValue(next);\n\n\t\tif (this.interacting) {\n\t\t\tthis.changeEvent.emit({ value: next });\n\t\t\treturn;\n\t\t}\n\n\t\tthis.commitSingleValue(input);\n\t}\n\n\t@onEvent({ ref: 'input', type: 'change' })\n\tonChange(event: Event): void {\n\t\tif (this.variant !== 'single') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.interacting = false;\n\t\tthis.commitSingleValue(event.target as HTMLInputElement);\n\t}\n\n\t@onEvent({ selector: '[data-thumb]', type: 'pointerdown' })\n\tonThumbPointerDown(event: PointerEvent): void {\n\t\tif (event.button !== 0 || this.variant !== 'range' || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst thumbElement = (event.target as HTMLElement).closest<HTMLElement>('[data-thumb]');\n\t\tif (!thumbElement) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst thumb = thumbElement.getAttribute('data-thumb') as 'min' | 'max';\n\t\tthis.activeThumb = thumb;\n\t\tthis.pendingRange = [this.rangeMin, this.rangeMax];\n\t\tthumbElement.setPointerCapture(event.pointerId);\n\t\tevent.preventDefault();\n\t}\n\n\t@onEvent({ selector: '[data-thumb]', type: 'pointermove' })\n\tonThumbPointerMove(event: PointerEvent): void {\n\t\tif (!this.activeThumb || this.variant !== 'range') {\n\t\t\treturn;\n\t\t}\n\n\t\tconst track = this.querySelector<HTMLElement>('.rui-slider__range-track');\n\t\tif (!track) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setRangeValue(this.activeThumb, this.valueFromPointer(event.clientX, track));\n\n\t\tif (this.pendingRange) {\n\t\t\tthis.changeEvent.emit({ values: this.pendingRange });\n\t\t}\n\t}\n\n\t@onEvent({ selector: '[data-thumb]', type: 'pointerup' })\n\tonThumbPointerUp(): void {\n\t\tif (!this.activeThumb || this.variant !== 'range') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.commitRange();\n\t\tthis.activeThumb = null;\n\t}\n\n\t@onEvent({ selector: '[data-thumb]', type: 'pointercancel' })\n\tonThumbPointerCancel(): void {\n\t\tif (!this.activeThumb || this.variant !== 'range') {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.pendingRange = null;\n\t\tthis.syncRangeUi();\n\t\tthis.activeThumb = null;\n\t}\n\n\t@onEvent({ selector: '[data-thumb]', type: 'keydown' })\n\tonThumbKeydown(event: KeyboardEvent): void {\n\t\tif (this.variant !== 'range' || this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst thumbElement = (event.target as HTMLElement).closest<HTMLElement>('[data-thumb]');\n\t\tif (!thumbElement) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst thumb = thumbElement.getAttribute('data-thumb') as 'min' | 'max';\n\t\tconst current = thumb === 'min' ? this.rangeMin : this.rangeMax;\n\t\tlet next = current;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowRight':\n\t\t\tcase 'ArrowUp':\n\t\t\t\tnext = this.clamp(current + this.step);\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowLeft':\n\t\t\tcase 'ArrowDown':\n\t\t\t\tnext = this.clamp(current - this.step);\n\t\t\t\tbreak;\n\t\t\tcase 'Home':\n\t\t\t\tnext = this.min;\n\t\t\t\tbreak;\n\t\t\tcase 'End':\n\t\t\t\tnext = this.max;\n\t\t\t\tbreak;\n\t\t\tcase 'PageUp':\n\t\t\t\tnext = this.clamp(current + this.step * 10);\n\t\t\t\tbreak;\n\t\t\tcase 'PageDown':\n\t\t\t\tnext = this.clamp(current - this.step * 10);\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tevent.preventDefault();\n\t\tthis.setRangeValue(thumb, next);\n\t\tthis.commitRange(false);\n\t\tthis.changeEvent.emit({ values: [this.rangeMin, this.rangeMax] });\n\t\tthis.activeThumb = null;\n\t}\n\n\toverride render() {\n\t\tif (this.variant === 'range') {\n\t\t\treturn (\n\t\t\t\t<div class=\"rui-slider rui-slider--range\">\n\t\t\t\t\t{this.label ? <span class=\"rui-slider__label\">{this.label}</span> : null}\n\t\t\t\t\t<div class=\"rui-slider__range\">\n\t\t\t\t\t\t<div class=\"rui-slider__range-track\">\n\t\t\t\t\t\t\t<div class=\"rui-slider__range-fill\" data-ref=\"rangeFill\" />\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"rui-slider__thumb\"\n\t\t\t\t\t\t\t\tdata-ref=\"rangeMinThumb\"\n\t\t\t\t\t\t\t\tdata-thumb=\"min\"\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\ttabindex={this.resolvedDisabledTabindex}\n\t\t\t\t\t\t\t\taria-label={this.resolvedMinLabel}\n\t\t\t\t\t\t\t\taria-valuemin={this.min}\n\t\t\t\t\t\t\t\taria-valuemax={this.rangeMax}\n\t\t\t\t\t\t\t\taria-valuenow={this.rangeMin}\n\t\t\t\t\t\t\t\tdisabled={this.$.disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tclass=\"rui-slider__thumb\"\n\t\t\t\t\t\t\t\tdata-ref=\"rangeMaxThumb\"\n\t\t\t\t\t\t\t\tdata-thumb=\"max\"\n\t\t\t\t\t\t\t\trole=\"slider\"\n\t\t\t\t\t\t\t\ttabindex={this.resolvedDisabledTabindex}\n\t\t\t\t\t\t\t\taria-label={this.resolvedMaxLabel}\n\t\t\t\t\t\t\t\taria-valuemin={this.rangeMin}\n\t\t\t\t\t\t\t\taria-valuemax={this.max}\n\t\t\t\t\t\t\t\taria-valuenow={this.rangeMax}\n\t\t\t\t\t\t\t\tdisabled={this.$.disabled}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"rui-slider__value\" data-ref=\"value\" aria-hidden=\"true\">\n\t\t\t\t\t\t{this.rangeMin} \u2013 {this.rangeMax}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<label class=\"rui-slider\">\n\t\t\t\t{this.label ? <span class=\"rui-slider__label\">{this.label}</span> : null}\n\t\t\t\t<input\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\tdata-ref=\"input\"\n\t\t\t\t\tdata-rui-control\n\t\t\t\t\tdata-rui-control-type=\"number\"\n\t\t\t\t\tclass=\"rui-slider__input\"\n\t\t\t\t\tdisabled={this.$.disabled}\n\t\t\t\t\tname={this.resolvedName}\n\t\t\t\t\taria-valuemin={this.min}\n\t\t\t\t\taria-valuemax={this.max}\n\t\t\t\t\taria-valuenow={this.value}\n\t\t\t\t/>\n\t\t\t\t<span class=\"rui-slider__value\" data-ref=\"value\" aria-hidden=\"true\">\n\t\t\t\t\t{this.value}\n\t\t\t\t</span>\n\t\t\t</label>\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 { RadiantSlotProps } from '../../../types';\nimport { defineRadiantView } from '../../../lib/radiant-view';\nimport type { RuiSliderProps } from './slider.script';\nimport { RuiSlider as RuiSliderElement } from './slider.script';\nimport './slider.css';\n\nexport type RuiSliderViewProps = RuiSliderProps &\n\tRadiantSlotProps & {\n\t\tvalues?: [number, number];\n\t};\n\nexport const RuiSlider = defineRadiantView(\n\tRuiSliderElement,\n\t({ slot, variant, value, values, min, max, step, minDistance, disabled, label, name }: RuiSliderViewProps) => (\n\t\t<rui-slider\n\t\t\tslot={slot}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\trangeMin={values?.[0]}\n\t\t\trangeMax={values?.[1]}\n\t\t\tmin={min}\n\t\t\tmax={max}\n\t\t\tstep={step}\n\t\t\tminDistance={minDistance}\n\t\t\tdisabled={disabled}\n\t\t\tlabel={label}\n\t\t\tname={name}\n\t\t/>\n\t),\n);\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,EAAgB,iBAAAC,EAAe,SAAAC,EAAO,WAAAC,EAAS,aAAAC,EAAW,QAAAC,EAAM,SAAAC,MAAa,oBAwC/E,IAAMC,EADb,CAACN,EAAc,YAAY,CACpB,cAAwBD,CAAkC,CAChE,CAACK,EAAK,CAAE,KAAM,OAAQ,aAAc,QAAS,CAAC,CAAE,QAChD,CAACA,EAAK,CAAE,KAAM,OAAQ,QAAS,GAAM,aAAc,EAAG,CAAC,CAAE,MACzD,CAACA,EAAK,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,YAAa,aAAc,EAAG,CAAC,CAAE,SACjF,CAACA,EAAK,CAAE,KAAM,OAAQ,QAAS,GAAM,UAAW,YAAa,aAAc,EAAG,CAAC,CAAE,SACjF,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,CAAE,CAAC,CAAE,IACzC,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,GAAI,CAAC,CAAE,IAC3C,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,CAAE,CAAC,CAAE,KACzC,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,CAAE,CAAC,CAAE,YACzC,CAACA,EAAK,CAAE,KAAM,QAAS,QAAS,GAAM,aAAc,EAAM,CAAC,CAAE,SAC7D,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,EAAG,CAAC,CAAE,MAC1C,CAACA,EAAK,CAAE,KAAM,OAAQ,aAAc,EAAG,CAAC,CAAE,KAE1C,CAACH,EAAM,CAAE,KAAM,aAAc,QAAS,GAAM,SAAU,EAAK,CAAC,CAC5D,YAEA,CAACI,EAAM,CAAE,IAAK,OAAQ,CAAC,CAAE,YACzB,CAACA,EAAM,CAAE,IAAK,OAAQ,CAAC,CAAE,YACzB,CAACA,EAAM,CAAE,IAAK,eAAgB,CAAC,CAAE,cACjC,CAACA,EAAM,CAAE,IAAK,eAAgB,CAAC,CAAE,cACjC,CAACA,EAAM,CAAE,IAAK,WAAY,CAAC,CAAE,UAErB,YAAc,GACd,YAAoC,KAEpC,aAAwC,KAY/B,yBAA2B,KAAK,EAAE,SAAS,IAAKE,GAAcA,EAAW,GAAK,CAAE,EAChF,iBAAmB,KAAK,EAAE,MAAM,IAAKC,GAAWA,EAAQ,GAAGA,CAAK,WAAa,eAAgB,EAC7F,iBAAmB,KAAK,EAAE,MAAM,IAAKA,GAAWA,EAAQ,GAAGA,CAAK,WAAa,eAAgB,EAC7F,aAAe,KAAK,EAAE,KAAK,IAAKC,GAASA,GAAQ,MAAS,EAElE,mBAA0B,CAClC,MAAM,kBAAkB,EACxB,eAAe,IAAM,CAChB,KAAK,UAAY,SACpB,KAAK,mBAAmB,EAExB,KAAK,YAAY,CAEnB,CAAC,CACF,CAEA,CAACN,EAAU,CAAC,QAAS,MAAO,MAAO,OAAQ,SAAS,CAAC,CACrD,sBAA6B,CACxB,KAAK,UAAY,UAAY,KAAK,aAItC,KAAK,mBAAmB,CACzB,CAEA,CAACA,EAAU,CAAC,WAAY,WAAY,MAAO,MAAO,OAAQ,cAAe,SAAS,CAAC,CACnF,qBAA4B,CACvB,KAAK,UAAY,SAAW,KAAK,aAIrC,KAAK,YAAY,CAClB,CAEQ,MAAMO,EAAsB,CACnC,IAAMC,EAAU,KAAK,MAAMD,EAAO,KAAK,IAAI,EAAI,KAAK,KACpD,OAAO,KAAK,IAAI,KAAK,IAAK,KAAK,IAAI,KAAK,IAAKC,CAAO,CAAC,CACtD,CAEQ,eAAeC,EAAM,KAAK,SAAUC,EAAO,KAAK,SAA4B,CACnF,IAAIC,EAAU,KAAK,MAAMF,CAAG,EACxBG,EAAW,KAAK,MAAMF,CAAI,EAE9B,OAAIC,EAAUC,IACb,CAACD,EAASC,CAAQ,EAAI,CAACA,EAAUD,CAAO,GAGrCC,EAAWD,EAAU,KAAK,cACzB,KAAK,cAAgB,MACxBA,EAAU,KAAK,MAAMC,EAAW,KAAK,WAAW,EAEhDA,EAAW,KAAK,MAAMD,EAAU,KAAK,WAAW,GAI3C,CAACA,EAASC,CAAQ,CAC1B,CAEQ,gBAAmC,CAC1C,OAAO,KAAK,eAAe,GAAI,KAAK,cAAgB,CAAC,KAAK,SAAU,KAAK,QAAQ,CAAE,CACpF,CAEQ,WAAWC,EAAuB,CACzC,OAAI,KAAK,MAAQ,KAAK,IACd,GAGCA,EAAQ,KAAK,MAAQ,KAAK,IAAM,KAAK,KAAQ,GACvD,CAEQ,iBAAiBC,EAAiBC,EAA4B,CACrE,IAAMC,EAAOD,EAAM,sBAAsB,EACnCE,EAAQ,KAAK,IAAI,EAAG,KAAK,IAAI,GAAIH,EAAUE,EAAK,MAAQA,EAAK,KAAK,CAAC,EACzE,OAAO,KAAK,MAAM,KAAK,IAAMC,GAAS,KAAK,IAAM,KAAK,IAAI,CAC3D,CAEQ,oBAA2B,CAClC,IAAMC,EAAQ,KAAK,YACnB,GAAI,CAACA,EACJ,OAGD,IAAMC,EAAY,OAAO,KAAK,KAAK,EAC/BD,EAAM,QAAUC,IACnBD,EAAM,MAAQC,GAGfD,EAAM,IAAM,OAAO,KAAK,GAAG,EAC3BA,EAAM,IAAM,OAAO,KAAK,GAAG,EAC3BA,EAAM,KAAO,OAAO,KAAK,IAAI,EAC7B,KAAK,qBAAqB,KAAK,KAAK,CACrC,CAEQ,qBAAqBX,EAAoB,CAC5C,KAAK,cACR,KAAK,YAAY,YAAc,OAAOA,CAAI,GAGvC,KAAK,aACR,KAAK,YAAY,aAAa,gBAAiB,OAAOA,CAAI,CAAC,CAE7D,CAEQ,aAAoB,CAC3B,GAAM,CAACE,EAAKC,CAAI,EAAI,KAAK,eAAe,EAEnC,KAAK,cACLD,IAAQ,KAAK,WAChB,KAAK,SAAWA,GAEbC,IAAS,KAAK,WACjB,KAAK,SAAWA,IAIlB,KAAK,aAAaD,EAAKC,CAAI,CAC5B,CAEQ,aAAaD,EAAaC,EAAoB,CACrD,IAAMU,EAAa,KAAK,WAAWX,CAAG,EAChCY,EAAc,KAAK,WAAWX,CAAI,EAClCK,EAAQ,KAAK,cAA2B,0BAA0B,EAEpEA,IACHA,EAAM,MAAM,YAAY,mBAAoB,GAAGK,CAAU,GAAG,EAC5DL,EAAM,MAAM,YAAY,mBAAoB,GAAGM,CAAW,GAAG,GAG1D,KAAK,gBACR,KAAK,cAAc,aAAa,gBAAiB,OAAO,KAAK,GAAG,CAAC,EACjE,KAAK,cAAc,aAAa,gBAAiB,OAAOX,CAAI,CAAC,EAC7D,KAAK,cAAc,aAAa,gBAAiB,OAAOD,CAAG,CAAC,GAGzD,KAAK,gBACR,KAAK,cAAc,aAAa,gBAAiB,OAAOA,CAAG,CAAC,EAC5D,KAAK,cAAc,aAAa,gBAAiB,OAAO,KAAK,GAAG,CAAC,EACjE,KAAK,cAAc,aAAa,gBAAiB,OAAOC,CAAI,CAAC,GAG1D,KAAK,YACR,KAAK,UAAU,MAAM,KAAO,GAAGU,CAAU,IACzC,KAAK,UAAU,MAAM,MAAQ,GAAGC,EAAcD,CAAU,KAGrD,KAAK,cACR,KAAK,YAAY,YAAc,GAAGX,CAAG,WAAMC,CAAI,GAEjD,CAEQ,YAAYY,EAAO,GAAY,CACtC,GAAM,CAACb,EAAKC,CAAI,EAAI,KAAK,eAAe,EAClCa,EAAUd,IAAQ,KAAK,UAAYC,IAAS,KAAK,SACvD,KAAK,aAAe,KACpB,KAAK,SAAWD,EAChB,KAAK,SAAWC,EAChB,KAAK,aAAaD,EAAKC,CAAI,EAEvBY,GAAQC,GACX,KAAK,YAAY,KAAK,CAAE,OAAQ,CAACd,EAAKC,CAAI,CAAE,CAAC,CAE/C,CAEQ,cAAcc,EAAsBjB,EAAoB,CAC/D,KAAK,YAAciB,EACnB,GAAM,CAACC,EAAYC,CAAW,EAAI,KAAK,cAAgB,CAAC,KAAK,SAAU,KAAK,QAAQ,EAC9E,CAACjB,EAAKC,CAAI,EAAI,KAAK,eACxBc,IAAU,MAAQjB,EAAOkB,EACzBD,IAAU,MAAQjB,EAAOmB,CAC1B,EACA,KAAK,aAAe,CAACjB,EAAKC,CAAI,EAC9B,KAAK,aAAaD,EAAKC,CAAI,CAC5B,CAEQ,kBAAkBQ,EAA+B,CACxD,IAAMX,EAAO,OAAOW,EAAM,KAAK,EAC/B,KAAK,qBAAqBX,CAAI,EAE1BA,IAAS,KAAK,QAIlB,KAAK,MAAQA,EACb,KAAK,YAAY,KAAK,CAAE,MAAOA,CAAK,CAAC,EACtC,CAEA,CAACR,EAAQ,CAAE,IAAK,QAAS,KAAM,aAAc,CAAC,CAC9C,cAAcD,EAA2B,CACpCA,EAAM,SAAW,GAAK,KAAK,UAAY,WAI3C,KAAK,YAAc,GACpB,CAEA,CAACC,EAAQ,CAAE,IAAK,QAAS,KAAM,WAAY,CAAC,CAC5C,YAAYD,EAAoB,CAC3B,CAAC,KAAK,aAAe,KAAK,UAAY,WAI1C,KAAK,YAAc,GACnB,KAAK,kBAAkBA,EAAM,MAA0B,EACxD,CAEA,CAACC,EAAQ,CAAE,IAAK,QAAS,KAAM,eAAgB,CAAC,CAChD,gBAAgBD,EAAoB,CAC/B,CAAC,KAAK,aAAe,KAAK,UAAY,WAI1C,KAAK,YAAc,GACnB,KAAK,kBAAkBA,EAAM,MAA0B,EACxD,CAEA,CAACC,EAAQ,CAAE,IAAK,QAAS,KAAM,OAAQ,CAAC,CACxC,QAAQD,EAAoB,CAC3B,GAAI,KAAK,UAAY,SACpB,OAGD,IAAMoB,EAAQpB,EAAM,OACdS,EAAO,OAAOW,EAAM,KAAK,EAG/B,GAFA,KAAK,qBAAqBX,CAAI,EAE1B,KAAK,YAAa,CACrB,KAAK,YAAY,KAAK,CAAE,MAAOA,CAAK,CAAC,EACrC,MACD,CAEA,KAAK,kBAAkBW,CAAK,CAC7B,CAEA,CAACnB,EAAQ,CAAE,IAAK,QAAS,KAAM,QAAS,CAAC,CACzC,SAASD,EAAoB,CACxB,KAAK,UAAY,WAIrB,KAAK,YAAc,GACnB,KAAK,kBAAkBA,EAAM,MAA0B,EACxD,CAEA,CAACC,EAAQ,CAAE,SAAU,eAAgB,KAAM,aAAc,CAAC,CAC1D,mBAAmBD,EAA2B,CAC7C,GAAIA,EAAM,SAAW,GAAK,KAAK,UAAY,SAAW,KAAK,SAC1D,OAGD,IAAM6B,EAAgB7B,EAAM,OAAuB,QAAqB,cAAc,EACtF,GAAI,CAAC6B,EACJ,OAGD,IAAMH,EAAQG,EAAa,aAAa,YAAY,EACpD,KAAK,YAAcH,EACnB,KAAK,aAAe,CAAC,KAAK,SAAU,KAAK,QAAQ,EACjDG,EAAa,kBAAkB7B,EAAM,SAAS,EAC9CA,EAAM,eAAe,CACtB,CAEA,CAACC,EAAQ,CAAE,SAAU,eAAgB,KAAM,aAAc,CAAC,CAC1D,mBAAmBD,EAA2B,CAC7C,GAAI,CAAC,KAAK,aAAe,KAAK,UAAY,QACzC,OAGD,IAAMiB,EAAQ,KAAK,cAA2B,0BAA0B,EACnEA,IAIL,KAAK,cAAc,KAAK,YAAa,KAAK,iBAAiBjB,EAAM,QAASiB,CAAK,CAAC,EAE5E,KAAK,cACR,KAAK,YAAY,KAAK,CAAE,OAAQ,KAAK,YAAa,CAAC,EAErD,CAEA,CAAChB,EAAQ,CAAE,SAAU,eAAgB,KAAM,WAAY,CAAC,CACxD,kBAAyB,CACpB,CAAC,KAAK,aAAe,KAAK,UAAY,UAI1C,KAAK,YAAY,EACjB,KAAK,YAAc,KACpB,CAEA,CAACA,EAAQ,CAAE,SAAU,eAAgB,KAAM,eAAgB,CAAC,CAC5D,sBAA6B,CACxB,CAAC,KAAK,aAAe,KAAK,UAAY,UAI1C,KAAK,aAAe,KACpB,KAAK,YAAY,EACjB,KAAK,YAAc,KACpB,CAEA,CAACA,EAAQ,CAAE,SAAU,eAAgB,KAAM,SAAU,CAAC,CACtD,eAAeD,EAA4B,CAC1C,GAAI,KAAK,UAAY,SAAW,KAAK,SACpC,OAGD,IAAM6B,EAAgB7B,EAAM,OAAuB,QAAqB,cAAc,EACtF,GAAI,CAAC6B,EACJ,OAGD,IAAMH,EAAQG,EAAa,aAAa,YAAY,EAC9CC,EAAUJ,IAAU,MAAQ,KAAK,SAAW,KAAK,SACnDjB,EAAOqB,EAEX,OAAQ9B,EAAM,IAAK,CAClB,IAAK,aACL,IAAK,UACJS,EAAO,KAAK,MAAMqB,EAAU,KAAK,IAAI,EACrC,MACD,IAAK,YACL,IAAK,YACJrB,EAAO,KAAK,MAAMqB,EAAU,KAAK,IAAI,EACrC,MACD,IAAK,OACJrB,EAAO,KAAK,IACZ,MACD,IAAK,MACJA,EAAO,KAAK,IACZ,MACD,IAAK,SACJA,EAAO,KAAK,MAAMqB,EAAU,KAAK,KAAO,EAAE,EAC1C,MACD,IAAK,WACJrB,EAAO,KAAK,MAAMqB,EAAU,KAAK,KAAO,EAAE,EAC1C,MACD,QACC,MACF,CAEA9B,EAAM,eAAe,EACrB,KAAK,cAAc0B,EAAOjB,CAAI,EAC9B,KAAK,YAAY,EAAK,EACtB,KAAK,YAAY,KAAK,CAAE,OAAQ,CAAC,KAAK,SAAU,KAAK,QAAQ,CAAE,CAAC,EAChE,KAAK,YAAc,IACpB,CAES,QAAS,CACjB,OAAI,KAAK,UAAY,QAEnB,oBAAC,OAAI,MAAM,gCACT,KAAK,MAAQ,oBAAC,QAAK,MAAM,qBAAqB,KAAK,KAAM,EAAU,KACpE,oBAAC,OAAI,MAAM,qBACV,oBAAC,OAAI,MAAM,2BACV,oBAAC,OAAI,MAAM,yBAAyB,WAAS,YAAY,EACzD,oBAAC,UACA,KAAK,SACL,MAAM,oBACN,WAAS,gBACT,aAAW,MACX,KAAK,SACL,SAAU,KAAK,yBACf,aAAY,KAAK,iBACjB,gBAAe,KAAK,IACpB,gBAAe,KAAK,SACpB,gBAAe,KAAK,SACpB,SAAU,KAAK,EAAE,SAClB,EACA,oBAAC,UACA,KAAK,SACL,MAAM,oBACN,WAAS,gBACT,aAAW,MACX,KAAK,SACL,SAAU,KAAK,yBACf,aAAY,KAAK,iBACjB,gBAAe,KAAK,SACpB,gBAAe,KAAK,IACpB,gBAAe,KAAK,SACpB,SAAU,KAAK,EAAE,SAClB,CACD,CACD,EACA,oBAAC,QAAK,MAAM,oBAAoB,WAAS,QAAQ,cAAY,QAC3D,KAAK,SAAS,WAAI,KAAK,QACzB,CACD,EAKD,oBAAC,SAAM,MAAM,cACX,KAAK,MAAQ,oBAAC,QAAK,MAAM,qBAAqB,KAAK,KAAM,EAAU,KACpE,oBAAC,SACA,KAAK,QACL,WAAS,QACT,mBAAgB,GAChB,wBAAsB,SACtB,MAAM,oBACN,SAAU,KAAK,EAAE,SACjB,KAAM,KAAK,aACX,gBAAe,KAAK,IACpB,gBAAe,KAAK,IACpB,gBAAe,KAAK,MACrB,EACA,oBAAC,QAAK,MAAM,oBAAoB,WAAS,QAAQ,cAAY,QAC3D,KAAK,KACP,CACD,CAEF,CACD,ECteA,IAAMsB,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,eAOA,IAAMM,EAAYC,EACxBD,EACA,CAAC,CAAE,KAAAE,EAAM,QAAAC,EAAS,MAAAC,EAAO,OAAAC,EAAQ,IAAAC,EAAK,IAAAC,EAAK,KAAAC,EAAM,YAAAC,EAAa,SAAAC,EAAU,MAAAC,EAAO,KAAAC,CAAK,IACnF,oBAAC,cACA,KAAMV,EACN,QAASC,EACT,MAAOC,EACP,SAAUC,IAAS,CAAC,EACpB,SAAUA,IAAS,CAAC,EACpB,IAAKC,EACL,IAAKC,EACL,KAAMC,EACN,YAAaC,EACb,SAAUC,EACV,MAAOC,EACP,KAAMC,EACP,CAEF",
+  "names": ["RadiantElement", "customElement", "event", "onEvent", "onUpdated", "prop", "query", "RuiSlider", "disabled", "label", "name", "next", "stepped", "low", "high", "nextLow", "nextHigh", "value", "clientX", "track", "rect", "ratio", "input", "nextValue", "lowPercent", "highPercent", "emit", "changed", "thumb", "currentLow", "currentHigh", "thumbElement", "current", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "RuiSlider", "defineRadiantView", "slot", "variant", "value", "values", "min", "max", "step", "minDistance", "disabled", "label", "name"]
+}

package/dist/components/ui/slider/slider.css

@@ -0,0 +1,51 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-slider {
+	@apply block w-full max-w-full min-w-0;
+}
+
+@layer components {
+	.rui-slider {
+		@apply flex w-full min-w-0 max-w-full flex-col gap-inline text-sm text-on-background;
+	}
+
+	.rui-slider__input {
+		@apply block w-full min-w-0 max-w-full accent-primary;
+	}
+
+	.rui-slider__value {
+		@apply tabular-nums text-on-surface;
+	}
+
+	.rui-slider__range {
+		@apply w-full min-w-0 py-2;
+	}
+
+	.rui-slider__range-track {
+		@apply relative h-2 w-full min-w-0 rounded-full bg-surface;
+	}
+
+	.rui-slider__range-fill {
+		@apply absolute top-0 h-full rounded-full bg-primary;
+	}
+
+	.rui-slider__thumb {
+		@apply absolute top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-primary bg-background shadow-sm;
+	}
+
+	.rui-slider__thumb:focus-visible {
+		@apply rounded-full outline-hidden ring-2 ring-focus-ring;
+	}
+
+	.rui-slider__thumb:active:not(:disabled) {
+		@apply rounded-full;
+	}
+
+	.rui-slider__thumb[data-thumb='min'] {
+		left: var(--rui-slider-min, 0%);
+	}
+
+	.rui-slider__thumb[data-thumb='max'] {
+		left: var(--rui-slider-max, 100%);
+	}
+}

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

@@ -0,0 +1,7 @@
+import type { RadiantSlotProps } from '../../../types';
+import type { RuiSliderProps } from './slider.script';
+import './slider.css';
+export type RuiSliderViewProps = RuiSliderProps & RadiantSlotProps & {
+    values?: [number, number];
+};
+export declare const RuiSlider: import("../../../lib/radiant-view").RadiantViewComponent<RuiSliderViewProps>;

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

@@ -0,0 +1,102 @@
+import { RadiantElement } from '@ecopages/radiant';
+import type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';
+export type RuiSliderVariant = 'single' | 'range';
+export type RuiSliderProps = {
+    variant?: RuiSliderVariant;
+    value?: number;
+    rangeMin?: number;
+    rangeMax?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    minDistance?: number;
+    disabled?: boolean;
+    label?: string;
+    name?: string;
+};
+export type RuiSliderChangeDetail = {
+    value: number;
+} | {
+    values: [number, number];
+};
+type RuiSliderBindings = {
+    disabled: boolean;
+    name: string;
+    label: string;
+};
+/**
+ * `<rui-slider>` — select a value from a continuous or discrete range.
+ *
+ * Single mode uses native `<input type="range">`. Range mode implements the APG
+ * multi-thumb slider pattern with two `role="slider"` thumbs on one track.
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/
+ *
+ * @element rui-slider
+ * @fires rui-change
+ */
+export declare class RuiSlider extends RadiantElement<RuiSliderBindings> {
+    variant: RuiSliderVariant;
+    value: number;
+    rangeMin: number;
+    rangeMax: number;
+    min: number;
+    max: number;
+    step: number;
+    minDistance: number;
+    disabled: boolean;
+    label: string;
+    name: string;
+    changeEvent: EventEmitter<RuiSliderChangeDetail>;
+    inputTarget: HTMLInputElement;
+    valueTarget: HTMLElement;
+    rangeMinThumb: HTMLElement;
+    rangeMaxThumb: HTMLElement;
+    rangeFill: HTMLElement;
+    private interacting;
+    private activeThumb;
+    /** Live range while dragging — avoids reactive prop updates that re-render mid-drag. */
+    private pendingRange;
+    /**
+     * Only disabled/tabindex/aria-label/name are bound below — none of them
+     * change during a drag. The value text and every aria-value* attribute
+     * stay plain reads + imperative writes (paintRangeUi/updateDisplayedValue)
+     * deliberately: they must show the LIVE pointer position while dragging,
+     * before pendingRange commits to the reactive value/rangeMin/rangeMax
+     * props. A binding only reacts to committed prop changes, so it cannot
+     * replace that live-preview write without losing drag feedback — this
+     * isn't a caution-driven exception, it's the correct tool for the job.
+     */
+    private readonly resolvedDisabledTabindex;
+    private readonly resolvedMinLabel;
+    private readonly resolvedMaxLabel;
+    private readonly resolvedName;
+    connectedCallback(): void;
+    onSinglePropsUpdated(): void;
+    onRangePropsUpdated(): void;
+    private clamp;
+    private normalizeRange;
+    private getActiveRange;
+    private percentFor;
+    private valueFromPointer;
+    private syncInputFromValue;
+    private updateDisplayedValue;
+    private syncRangeUi;
+    private paintRangeUi;
+    private commitRange;
+    private setRangeValue;
+    private commitSingleValue;
+    onPointerDown(event: PointerEvent): void;
+    onPointerUp(event: Event): void;
+    onPointerCancel(event: Event): void;
+    onInput(event: Event): void;
+    onChange(event: Event): void;
+    onThumbPointerDown(event: PointerEvent): void;
+    onThumbPointerMove(event: PointerEvent): void;
+    onThumbPointerUp(): void;
+    onThumbPointerCancel(): void;
+    onThumbKeydown(event: KeyboardEvent): void;
+    render(): import("@ecopages/jsx").JsxRenderable;
+}
+export {};

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

@@ -0,0 +1,2 @@
+export { RuiSpinbutton as RuiSpinbuttonElement, type RuiSpinbuttonProps, type RuiSpinbuttonChangeDetail, } from './spinbutton.script';
+export { RuiSpinbutton } from './spinbutton';

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

@@ -0,0 +1,2 @@
+import{RadiantElement as f,customElement as v,event as R,onEvent as r,onUpdated as y,prop as a,state as o}from"@ecopages/radiant";var s=@v("rui-spinbutton")class extends f{@a({type:Number,reflect:!0,defaultValue:0})value;@a({type:Number,defaultValue:0})min;@a({type:Number,defaultValue:100})max;@a({type:Number,defaultValue:1})step;@a({type:Boolean,reflect:!0,defaultValue:!1})disabled;@a({type:String,defaultValue:""})label;@a({type:String,defaultValue:""})name;@R({name:"rui-change",bubbles:!0,composed:!0})changeEvent;@o decreaseDisabled=!1;@o increaseDisabled=!1;nameAttr=this.$.name.map(e=>e||void 0);resolvedAriaLabel=this.$.label.map(e=>e||void 0);@y(["disabled","value","min","max"])onRangeUpdated(){this.decreaseDisabled=this.isDecreaseDisabled(),this.increaseDisabled=this.isIncreaseDisabled(),queueMicrotask(()=>this.syncSlottedStepperControls())}syncSlottedStepperControls(){let e=this.isDecreaseDisabled(),t=this.isIncreaseDisabled();for(let i of this.querySelectorAll('[slot][data-spinbutton-action="decrease"]'))i.disabled=e;for(let i of this.querySelectorAll('[slot][data-spinbutton-action="increase"]'))i.disabled=t}isDecreaseDisabled(){return this.disabled||this.value<=this.min}isIncreaseDisabled(){return this.disabled||this.value>=this.max}clamp(e){let t=Math.round(e/this.step)*this.step;return Math.min(this.max,Math.max(this.min,t))}setValue(e){let t=this.clamp(e);t!==this.value&&(this.value=t,this.changeEvent.emit({value:t}))}@r({selector:'[data-spinbutton-action="decrease"]',type:"click"})decrement(){this.isDecreaseDisabled()||this.setValue(this.value-this.step)}@r({selector:'[data-spinbutton-action="increase"]',type:"click"})increment(){this.isIncreaseDisabled()||this.setValue(this.value+this.step)}@r({ref:"input",type:"change"})onChange(e){let t=e.target,i=Number(t.value);this.setValue(Number.isFinite(i)?i:this.value),t.value=String(this.value)}@r({ref:"input",type:"keydown"})onKeydown(e){this.disabled||(e.key==="ArrowUp"?(e.preventDefault(),this.increment()):e.key==="ArrowDown"?(e.preventDefault(),this.decrement()):e.key==="Home"?(e.preventDefault(),this.setValue(this.min)):e.key==="End"&&(e.preventDefault(),this.setValue(this.max)))}render(){return React.createElement("div",{class:"rui-spinbutton"},this.label?React.createElement("span",{class:"rui-spinbutton__label",id:`${this.id||"spin"}-label`},this.$.label):null,React.createElement("div",{class:"rui-spinbutton__control"},React.createElement("slot",{name:"decrease"},React.createElement("button",{type:"button",class:"rui-button rui-button--outline rui-button--sm","data-spinbutton-action":"decrease","aria-label":"Decrease",disabled:this.$.decreaseDisabled},"\u2212")),React.createElement("input",{type:"text",inputmode:"numeric","data-ref":"input","data-rui-control":!0,"data-rui-control-type":"number",class:"rui-spinbutton__input",role:"spinbutton","prop:value":this.$.value.map(String),disabled:this.$.disabled,name:this.nameAttr,"aria-valuemin":this.$.min,"aria-valuemax":this.$.max,"aria-valuenow":this.$.value,"aria-label":this.resolvedAriaLabel}),React.createElement("slot",{name:"increase"},React.createElement("button",{type:"button",class:"rui-button rui-button--outline rui-button--sm","data-spinbutton-action":"increase","aria-label":"Increase",disabled:this.$.increaseDisabled},"+"))))}};var D=Symbol.for("@ecopages/storybook-radiant.viewElement"),l=Symbol.for("@ecopages/storybook-radiant.scriptModule"),u=Symbol.for("@ecopages/storybook-radiant.scriptExport");function g(n,e){n[D]=e;let t=e[l];t&&(n[l]=t,n[u]=e[u]??e.name)}function d(n,e){let t=(i=>e(i));return g(t,n),t}import"./spinbutton.css";var E=d(s,({slot:n,value:e,min:t,max:i,step:p,disabled:b,label:m,name:c,children:h})=>React.createElement("rui-spinbutton",{slot:n,value:e,min:t,max:i,step:p,disabled:b,label:m,name:c},h));export{E as RuiSpinbutton,s as RuiSpinbuttonElement};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ui/spinbutton/spinbutton.script.tsx", "../../../../src/lib/radiant-view.ts", "../../../../src/components/ui/spinbutton/spinbutton.tsx"],
+  "sourcesContent": ["import { RadiantElement, customElement, event, onEvent, onUpdated, prop, state } from '@ecopages/radiant';\nimport type { EventEmitter } from '@ecopages/radiant/tools/event-emitter';\n\nexport type RuiSpinbuttonProps = {\n\tvalue?: number;\n\tmin?: number;\n\tmax?: number;\n\tstep?: number;\n\tdisabled?: boolean;\n\tlabel?: string;\n\tname?: string;\n};\n\nexport type RuiSpinbuttonChangeDetail = { value: number };\n\ntype RuiSpinbuttonBindings = {\n\tvalue: number;\n\tdisabled: boolean;\n\tlabel: string;\n\tname: string;\n\tmin: number;\n\tmax: number;\n\tdecreaseDisabled: boolean;\n\tincreaseDisabled: boolean;\n};\n\n/**\n * `<rui-spinbutton>` \u2014 an input restricted to a discrete numeric range.\n *\n * Implements the APG Spinbutton pattern with `role=\"spinbutton\"` on a native\n * number-like text field, plus decrement/increment buttons.\n *\n * @see https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/\n *\n * @element rui-spinbutton\n * @slot decrease - Optional custom decrease control. Use `data-spinbutton-action=\"decrease\"`.\n * @slot increase - Optional custom increase control. Use `data-spinbutton-action=\"increase\"`.\n * @fires rui-change\n */\n@customElement('rui-spinbutton')\nexport class RuiSpinbutton extends RadiantElement<RuiSpinbuttonBindings> {\n\t@prop({ type: Number, reflect: true, defaultValue: 0 }) value: number;\n\t@prop({ type: Number, defaultValue: 0 }) min: number;\n\t@prop({ type: Number, defaultValue: 100 }) max: number;\n\t@prop({ type: Number, defaultValue: 1 }) step: number;\n\t@prop({ type: Boolean, reflect: true, defaultValue: false }) disabled: boolean;\n\t@prop({ type: String, defaultValue: '' }) label: string;\n\t@prop({ type: String, defaultValue: '' }) name: string;\n\n\t@event({ name: 'rui-change', bubbles: true, composed: true })\n\tchangeEvent: EventEmitter<RuiSpinbuttonChangeDetail>;\n\n\t@state decreaseDisabled = false;\n\t@state increaseDisabled = false;\n\n\tprivate readonly nameAttr = this.$.name.map((name) => name || undefined);\n\tprivate readonly resolvedAriaLabel = this.$.label.map((label) => label || undefined);\n\n\t/** Derived from disabled/value/min/max \u2014 recomputed here instead of per-render. */\n\t@onUpdated(['disabled', 'value', 'min', 'max'])\n\tonRangeUpdated(): void {\n\t\tthis.decreaseDisabled = this.isDecreaseDisabled();\n\t\tthis.increaseDisabled = this.isIncreaseDisabled();\n\t\tqueueMicrotask(() => this.syncSlottedStepperControls());\n\t}\n\n\tprivate syncSlottedStepperControls(): void {\n\t\tconst decreaseDisabled = this.isDecreaseDisabled();\n\t\tconst increaseDisabled = this.isIncreaseDisabled();\n\n\t\tfor (const button of this.querySelectorAll<HTMLButtonElement>('[slot][data-spinbutton-action=\"decrease\"]')) {\n\t\t\tbutton.disabled = decreaseDisabled;\n\t\t}\n\n\t\tfor (const button of this.querySelectorAll<HTMLButtonElement>('[slot][data-spinbutton-action=\"increase\"]')) {\n\t\t\tbutton.disabled = increaseDisabled;\n\t\t}\n\t}\n\n\tprivate isDecreaseDisabled(): boolean {\n\t\treturn this.disabled || this.value <= this.min;\n\t}\n\n\tprivate isIncreaseDisabled(): boolean {\n\t\treturn this.disabled || this.value >= this.max;\n\t}\n\n\tprivate clamp(next: number): number {\n\t\tconst stepped = Math.round(next / this.step) * this.step;\n\t\treturn Math.min(this.max, Math.max(this.min, stepped));\n\t}\n\n\tprivate setValue(next: number): void {\n\t\tconst value = this.clamp(next);\n\t\tif (value === this.value) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.value = value;\n\t\tthis.changeEvent.emit({ value });\n\t}\n\n\t@onEvent({ selector: '[data-spinbutton-action=\"decrease\"]', type: 'click' })\n\tdecrement(): void {\n\t\tif (this.isDecreaseDisabled()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setValue(this.value - this.step);\n\t}\n\n\t@onEvent({ selector: '[data-spinbutton-action=\"increase\"]', type: 'click' })\n\tincrement(): void {\n\t\tif (this.isIncreaseDisabled()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.setValue(this.value + this.step);\n\t}\n\n\t@onEvent({ ref: 'input', type: 'change' })\n\tonChange(event: Event): void {\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst parsed = Number(input.value);\n\t\tthis.setValue(Number.isFinite(parsed) ? parsed : this.value);\n\t\tinput.value = String(this.value);\n\t}\n\n\t@onEvent({ ref: 'input', type: 'keydown' })\n\tonKeydown(event: KeyboardEvent): void {\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'ArrowUp') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.increment();\n\t\t} else if (event.key === 'ArrowDown') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.decrement();\n\t\t} else if (event.key === 'Home') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.setValue(this.min);\n\t\t} else if (event.key === 'End') {\n\t\t\tevent.preventDefault();\n\t\t\tthis.setValue(this.max);\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn (\n\t\t\t<div class=\"rui-spinbutton\">\n\t\t\t\t{this.label ? (\n\t\t\t\t\t<span class=\"rui-spinbutton__label\" id={`${this.id || 'spin'}-label`}>\n\t\t\t\t\t\t{this.$.label}\n\t\t\t\t\t</span>\n\t\t\t\t) : null}\n\t\t\t\t<div class=\"rui-spinbutton__control\">\n\t\t\t\t\t<slot name=\"decrease\">\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-button rui-button--outline rui-button--sm\"\n\t\t\t\t\t\t\tdata-spinbutton-action=\"decrease\"\n\t\t\t\t\t\t\taria-label=\"Decrease\"\n\t\t\t\t\t\t\tdisabled={this.$.decreaseDisabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\u2212\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</slot>\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tinputmode=\"numeric\"\n\t\t\t\t\t\tdata-ref=\"input\"\n\t\t\t\t\t\tdata-rui-control\n\t\t\t\t\t\tdata-rui-control-type=\"number\"\n\t\t\t\t\t\tclass=\"rui-spinbutton__input\"\n\t\t\t\t\t\trole=\"spinbutton\"\n\t\t\t\t\t\tprop:value={this.$.value.map(String)}\n\t\t\t\t\t\tdisabled={this.$.disabled}\n\t\t\t\t\t\tname={this.nameAttr}\n\t\t\t\t\t\taria-valuemin={this.$.min}\n\t\t\t\t\t\taria-valuemax={this.$.max}\n\t\t\t\t\t\taria-valuenow={this.$.value}\n\t\t\t\t\t\taria-label={this.resolvedAriaLabel}\n\t\t\t\t\t/>\n\t\t\t\t\t<slot name=\"increase\">\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-button rui-button--outline rui-button--sm\"\n\t\t\t\t\t\t\tdata-spinbutton-action=\"increase\"\n\t\t\t\t\t\t\taria-label=\"Increase\"\n\t\t\t\t\t\t\tdisabled={this.$.increaseDisabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</slot>\n\t\t\t\t</div>\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 { RuiSpinbuttonProps } from './spinbutton.script';\nimport { RuiSpinbutton as RuiSpinbuttonElement } from './spinbutton.script';\nimport './spinbutton.css';\n\nexport const RuiSpinbutton = defineRadiantView(\n\tRuiSpinbuttonElement,\n\t({\n\t\tslot,\n\t\tvalue,\n\t\tmin,\n\t\tmax,\n\t\tstep,\n\t\tdisabled,\n\t\tlabel,\n\t\tname,\n\t\tchildren,\n\t}: WithChildren<RuiSpinbuttonProps & RadiantSlotProps>) => (\n\t\t<rui-spinbutton\n\t\t\tslot={slot}\n\t\t\tvalue={value}\n\t\t\tmin={min}\n\t\t\tmax={max}\n\t\t\tstep={step}\n\t\t\tdisabled={disabled}\n\t\t\tlabel={label}\n\t\t\tname={name}\n\t\t>\n\t\t\t{children}\n\t\t</rui-spinbutton>\n\t),\n);\n"],
+  "mappings": "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",
+  "names": ["RadiantElement", "customElement", "event", "onEvent", "onUpdated", "prop", "state", "RuiSpinbutton", "name", "label", "decreaseDisabled", "increaseDisabled", "button", "next", "stepped", "value", "input", "parsed", "RADIANT_VIEW_ELEMENT", "RADIANT_SCRIPT_MODULE", "RADIANT_SCRIPT_EXPORT", "linkViewToElement", "view", "element", "ssrModule", "defineRadiantView", "render", "args", "RuiSpinbutton", "defineRadiantView", "slot", "value", "min", "max", "step", "disabled", "label", "name", "children"]
+}

package/dist/components/ui/spinbutton/spinbutton.css

@@ -0,0 +1,19 @@
+@reference '../../../styles/radiant-ui.css';
+
+rui-spinbutton {
+	@apply inline-flex;
+}
+
+@layer components {
+	.rui-spinbutton {
+		@apply flex flex-col gap-1 text-sm;
+	}
+
+	.rui-spinbutton__control {
+		@apply inline-flex items-center gap-1;
+	}
+
+	.rui-spinbutton__input {
+		@apply w-16 rounded-button border border-border bg-background px-2 py-1 text-center tabular-nums;
+	}
+}

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

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