@ecopages/radiant-ui 0.1.0-beta.7 → 0.1.0-beta.8

package/dist/components/ui/sidebar/sidebar.css

@@ -10,7 +10,7 @@ rui-sidebar {
   width: 100%;
   min-width: 0px;
   flex: 1;
-  overflow: hidden;
+  overflow: clip;
   background-color: var(--color-background, var(--background));
 }
 .rui-sidebar-provider[data-layout='full'] {
@@ -21,7 +21,7 @@ rui-sidebar {
   height: 100svh;
   min-height: 0px;
   flex-direction: column;
-  overflow: hidden;
+  overflow: clip;
   .rui-sidebar-provider__site-header {
     position: sticky;
     top: 0px;
@@ -79,7 +79,7 @@ rui-sidebar {
   .rui-sidebar-provider__site-header-nav {
     display: flex;
     align-items: center;
-    gap: var(--spacing-4, var(--space-4));
+    gap: var(--spacing-1, var(--space-1));
   }
   .rui-sidebar-provider__site-header-link {
     font-size: var(--text-sm, var(--text-sm));
@@ -91,7 +91,7 @@ rui-sidebar {
     display: flex;
     min-height: 0px;
     flex: 1;
-    overflow: hidden;
+    overflow: clip;
   }
   .rui-sidebar-docs-page {
     margin-inline: auto;
@@ -137,13 +137,10 @@ rui-sidebar {
     }
   }
   @media (max-width: 767px) {
-    rui-sidebar-trigger {
-      display: inline-flex;
-    }
     rui-sidebar-trigger .rui-sidebar__trigger {
       width: calc(var(--spacing, 0.25rem) * 9);
       height: calc(var(--spacing, 0.25rem) * 9);
-      border-radius: var(--radius-lg, var(--border-radius-lg));
+      border-radius: var(--radius-control, var(--radius-control));
       border-style: var(--tw-border-style);
       border-width: 1px;
       border-color: var(--color-border, var(--border));
@@ -175,7 +172,7 @@ rui-sidebar {
   }
 }
 .rui-sidebar-provider:has(rui-sidebar[data-mobile='true'][data-state='expanded']) {
-  overflow: hidden;
+  overflow: clip;
 }
 .rui-sidebar {
   position: relative;
@@ -184,14 +181,14 @@ rui-sidebar {
   min-width: 0px;
   flex-shrink: 0;
   align-self: stretch;
-  background-color: var(--color-surface, var(--surface));
   color: var(--color-on-background, var(--on-background));
+  background-color: var(--rui-sidebar-background, var(--color-surface));
 }
 .rui-sidebar[data-side='right'] {
   flex-direction: row-reverse;
 }
 .rui-sidebar[data-variant='inset'] {
-  border-radius: var(--radius-lg, var(--border-radius-lg));
+  border-radius: var(--radius-container, var(--radius-container));
   border-style: var(--tw-border-style);
   border-width: 1px;
   border-color: var(--color-border, var(--border));
@@ -283,11 +280,11 @@ rui-sidebar {
   flex-shrink: 0;
   flex-direction: row;
   align-items: center;
-  gap: var(--spacing-2, var(--space-2));
+  gap: var(--spacing-inline, var(--space-inline));
   border-bottom-style: var(--tw-border-style);
   border-bottom-width: 1px;
   border-color: var(--color-border, var(--border));
-  padding-inline: var(--spacing-3, var(--space-3));
+  padding-inline: var(--spacing-control-x, var(--space-control-x));
 }
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__header {
   flex-direction: column;
@@ -315,7 +312,7 @@ rui-sidebar {
   padding: var(--spacing-3, var(--space-3));
 }
 .rui-sidebar[data-collapsible='icon'][data-state='collapsed'] .rui-sidebar__content {
-  gap: var(--spacing-2, var(--space-2));
+  gap: var(--spacing-inline, var(--space-inline));
   overflow-x: hidden;
   padding-inline: var(--spacing-1, var(--space-1));
 }
@@ -323,7 +320,7 @@ rui-sidebar {
   display: flex;
   flex-shrink: 0;
   flex-direction: column;
-  gap: var(--spacing-2, var(--space-2));
+  gap: var(--spacing-inline, var(--space-inline));
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
   border-color: var(--color-border, var(--border));
@@ -375,7 +372,7 @@ rui-sidebar {
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-md, var(--border-radius-md));
+  border-radius: var(--radius-control, var(--radius-control));
   border-style: var(--tw-border-style);
   border-width: 0px;
   background-color: transparent;
@@ -422,8 +419,8 @@ rui-sidebar {
   min-width: 0px;
   cursor: pointer;
   align-items: center;
-  gap: var(--spacing-2, var(--space-2));
-  border-radius: var(--radius-md, var(--border-radius-md));
+  gap: var(--spacing-inline, var(--space-inline));
+  border-radius: var(--radius-control, var(--radius-control));
   border-style: var(--tw-border-style);
   border-width: 0px;
   background-color: transparent;
@@ -526,7 +523,7 @@ rui-sidebar {
   flex: 1;
   flex-direction: column;
   gap: 0px;
-  overflow: hidden;
+  overflow: clip;
   background-color: var(--color-background, var(--background));
 }
 .rui-sidebar__trigger {
@@ -553,7 +550,15 @@ rui-sidebar {
 :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])),
 .rui-sidebar-provider:has(
 	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true'])
-)) rui-sidebar-trigger[data-placement='header'], :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])),
+)) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])),
+.rui-sidebar-provider:has(
+	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true'])
+)) 
+	rui-sidebar-trigger[data-placement='header'], :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])),
+.rui-sidebar-provider:has(
+	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true'])
+)) 
+	rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-collapsible='off']:not([data-mobile='true'])),
 .rui-sidebar-provider:has(
 	> .rui-sidebar-provider__body > rui-sidebar[data-collapsible='off']:not([data-mobile='true'])
 )) 
@@ -563,21 +568,33 @@ rui-sidebar {
 :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded']:not([data-mobile='true'])),
 .rui-sidebar-provider:has(
 	> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded']:not([data-mobile='true'])
-)) rui-sidebar-trigger[data-placement='inset'] {
+)) rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded']:not([data-mobile='true'])),
+.rui-sidebar-provider:has(
+	> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded']:not([data-mobile='true'])
+)) 
+	rui-sidebar-trigger[data-placement='inset'] {
   display: none;
 }
 :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed']:not([data-mobile='true'])),
 .rui-sidebar-provider:has(
 	> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed']:not([data-mobile='true'])
-)) rui-sidebar-trigger[data-placement='header'] {
+)) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed']:not([data-mobile='true'])),
+.rui-sidebar-provider:has(
+	> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed']:not([data-mobile='true'])
+)) 
+	rui-sidebar-trigger[data-placement='header'] {
   display: none;
 }
 :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded'][data-mobile='true']),
-.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded'][data-mobile='true'])) rui-sidebar-trigger[data-placement='inset'] {
+.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded'][data-mobile='true'])) rui-sidebar-trigger.rui-sidebar-trigger-placement--inset, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='expanded'][data-mobile='true']),
+.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='expanded'][data-mobile='true'])) 
+	rui-sidebar-trigger[data-placement='inset'] {
   display: none;
 }
 :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed'][data-mobile='true']),
-.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed'][data-mobile='true'])) rui-sidebar-trigger[data-placement='header'] {
+.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed'][data-mobile='true'])) rui-sidebar-trigger.rui-sidebar-trigger-placement--header, :is(.rui-sidebar-provider:has(> rui-sidebar[data-state='collapsed'][data-mobile='true']),
+.rui-sidebar-provider:has(> .rui-sidebar-provider__body > rui-sidebar[data-state='collapsed'][data-mobile='true'])) 
+	rui-sidebar-trigger[data-placement='header'] {
   display: none;
 }
 .rui-sidebar[data-mobile='true'] {

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

@@ -1,6 +1,8 @@
 import type { JsxHtmlPropsWithChildren, JsxRenderable } from '@ecopages/jsx';
 import type { RuiSidebarProps } from './sidebar.script';
+import './sidebar.script';
 import type { RuiSidebarTriggerProps } from './sidebar-trigger.script';
+import './sidebar-trigger.script';
 export type RuiSidebarProviderProps = {
     /**
      * Layout context. `default` is the standard shell; `full` removes chrome;
@@ -22,6 +24,10 @@ export type RuiSidebarProviderProps = {
  * `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.
+ *
+ * @cssclass rui-sidebar-provider - Shell wrapping sidebar + inset.
+ * @cssclass rui-sidebar-provider__site-header - Full-width chrome (`layout="docs"`).
+ * @cssclass rui-sidebar-provider__body - Sidebar + inset row.
  */
 export declare function RuiSidebarProvider({ layout, siteHeader, sidebar, children, class: className, }: RuiSidebarProviderProps): JsxRenderable;
 export type RuiSidebarHeaderProps = {
@@ -30,7 +36,11 @@ export type RuiSidebarHeaderProps = {
     /** Accessible name for the header region. */
     'aria-label'?: string;
 };
-/** Top section of the sidebar pane (logo, search, primary trigger). */
+/**
+ * Top section of the sidebar pane (logo, search, primary trigger).
+ *
+ * @cssclass rui-sidebar__header - Top, pinned section.
+ */
 export declare function RuiSidebarHeader({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarHeaderProps): JsxRenderable;
 export type RuiSidebarContentProps = {
     children: JsxRenderable;
@@ -38,20 +48,32 @@ export type RuiSidebarContentProps = {
     /** Optional label for the scrolling content region. */
     'aria-label'?: string;
 };
-/** Scrollable middle section. Multiple allowed; each becomes its own region. */
+/**
+ * Scrollable middle section. Multiple allowed; each becomes its own region.
+ *
+ * @cssclass rui-sidebar__content - Scrollable middle section.
+ */
 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). */
+/**
+ * Pinned bottom section (user, theme toggle, settings).
+ *
+ * @cssclass rui-sidebar__footer - Pinned bottom section.
+ */
 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. */
+/**
+ * Horizontal rule between sidebar sections.
+ *
+ * @cssclass rui-sidebar__separator - Horizontal rule (`role="separator"`).
+ */
 export declare function RuiSidebarSeparator({ class: className, 'aria-label': ariaLabel }: RuiSidebarSeparatorProps): JsxRenderable;
 export type RuiSidebarGroupProps = {
     children: JsxRenderable;
@@ -59,7 +81,11 @@ export type RuiSidebarGroupProps = {
     /** Accessible label for the group region. */
     'aria-label'?: string;
 };
-/** Landmark group of related sidebar items. */
+/**
+ * Landmark group of related sidebar items.
+ *
+ * @cssclass rui-sidebar__group - Landmark group region.
+ */
 export declare function RuiSidebarGroup({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarGroupProps): JsxRenderable;
 export type RuiSidebarGroupLabelProps = {
     children: JsxRenderable;
@@ -67,7 +93,11 @@ export type RuiSidebarGroupLabelProps = {
     /** Optional `id` so the group can be referenced by `aria-labelledby`. */
     id?: string;
 };
-/** Heading for a sidebar group. */
+/**
+ * Heading for a sidebar group.
+ *
+ * @cssclass rui-sidebar__group-label - Group heading (`<h2>`).
+ */
 export declare function RuiSidebarGroupLabel({ children, class: className, id }: RuiSidebarGroupLabelProps): JsxRenderable;
 export type RuiSidebarGroupActionProps = {
     children: JsxRenderable;
@@ -75,14 +105,22 @@ export type RuiSidebarGroupActionProps = {
     /** Accessible label for the action button. */
     'aria-label'?: string;
 };
-/** Top-right action button inside a group header. */
+/**
+ * Top-right action button inside a group header.
+ *
+ * @cssclass rui-sidebar__group-action - Group header action button.
+ */
 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. */
+/**
+ * Convenience: a label + optional action in one row.
+ *
+ * @cssclass rui-sidebar__group-header - Group label + action row.
+ */
 export declare function RuiSidebarGroupHeader({ label, action, class: className }: RuiSidebarGroupHeaderProps): JsxRenderable;
 export type RuiSidebarMenuProps = {
     children: JsxRenderable;
@@ -90,13 +128,21 @@ export type RuiSidebarMenuProps = {
     /** Accessible label for the menu list. */
     'aria-label'?: string;
 };
-/** `<ul>` of sidebar items. */
+/**
+ * `<ul>` of sidebar items.
+ *
+ * @cssclass rui-sidebar__menu - Menu list.
+ */
 export declare function RuiSidebarMenu({ children, class: className, 'aria-label': ariaLabel }: RuiSidebarMenuProps): JsxRenderable;
 export type RuiSidebarMenuItemProps = {
     children: JsxRenderable;
     class?: string;
 };
-/** `<li>` of a sidebar menu. */
+/**
+ * `<li>` of a sidebar menu.
+ *
+ * @cssclass rui-sidebar__menu-item - Menu item (`<li>`).
+ */
 export declare function RuiSidebarMenuItem({ children, class: className }: RuiSidebarMenuItemProps): JsxRenderable;
 export type RuiSidebarMenuButtonProps = {
     children: JsxRenderable;
@@ -118,10 +164,14 @@ export type RuiSidebarMenuButtonProps = {
  * 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.
+ *
+ * @cssclass rui-sidebar__menu-button - Clickable menu surface (`<a>`/`<button>`).
+ * @cssclass rui-sidebar__menu-button--active - Current-page marker (`aria-current="page"`).
  */
 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. */
+/** Smaller, secondary button (e.g. `+ New`) below a menu or group.
+ * @cssclass rui-sidebar__menu-action - Secondary menu action button. */
 export declare function RuiSidebarMenuAction(props: RuiSidebarMenuActionProps): JsxRenderable;
 export type RuiSidebarInsetProps = {
     children: JsxRenderable;
@@ -129,14 +179,18 @@ export type RuiSidebarInsetProps = {
     /** Optional `id` so the sidebar trigger can target the main landmark. */
     id?: string;
 };
-/** The main content area that sits next to the sidebar. */
+/**
+ * The main content area that sits next to the sidebar.
+ *
+ * @cssclass rui-sidebar__inset - Main content area (`<main>`).
+ */
 export declare function RuiSidebarInset({ children, class: className, id }: RuiSidebarInsetProps): JsxRenderable;
 export type RuiSidebarViewProps = JsxHtmlPropsWithChildren<RuiSidebarProps & {
     id: string;
     slot?: string;
 }>;
-export declare const RuiSidebar: import("@/lib/radiant-view").RadiantViewComponent<RuiSidebarViewProps>;
+export declare function RuiSidebar({ children, id, defaultOpen, mobileDefaultOpen, open, defaultWidth, width, resizable, mobileBreakpoint, matchActive, matchMode, scrollActiveOnMount, navigationEvents, ...props }: RuiSidebarViewProps): JsxRenderable;
 export type RuiSidebarTriggerViewProps = JsxHtmlPropsWithChildren<RuiSidebarTriggerProps & {
     slot?: string;
 }>;
-export declare const RuiSidebarTrigger: import("@/lib/radiant-view").RadiantViewComponent<RuiSidebarTriggerViewProps>;
+export declare function RuiSidebarTrigger({ children, class: className, controls, triggerLabel, placement, variant, size, ...props }: RuiSidebarTriggerViewProps): JsxRenderable;

package/dist/components/ui/sidebar/sidebar.docs.css

@@ -7,7 +7,7 @@ rui-sidebar .rui-sidebar {
   @supports (color: color-mix(in lab, red, red)) {
     border-color: color-mix(in oklab, var(--color-border, var(--border)) 60%, transparent);
   }
-  background-color: transparent;
+  background-color: var(--rui-sidebar-background, transparent);
 }
 rui-sidebar .rui-sidebar__header {
   height: auto;
@@ -113,10 +113,12 @@ rui-sidebar .rui-sidebar__menu {
     border-color: color-mix(in oklab, var(--color-border, var(--border)) 30%, transparent);
   }
   padding-left: var(--spacing-3, var(--space-3));
+  --rui-docs-navigation-inset: var(--space-3);
+  padding-left: var(--rui-docs-navigation-inset);
 }
 rui-sidebar .rui-sidebar__menu-button {
   position: relative;
-  border-radius: var(--radius-sm, var(--border-radius-sm));
+  border-radius: var(--radius-control, var(--radius-control));
   border-style: var(--tw-border-style);
   border-width: 0px;
   background-color: transparent;
@@ -170,6 +172,7 @@ rui-sidebar .rui-sidebar__menu-button[aria-current='page']::before, rui-sidebar
   border-top-right-radius: var(--radius-sm, var(--border-radius-sm));
   border-bottom-right-radius: var(--radius-sm, var(--border-radius-sm));
   background-color: var(--color-primary, var(--primary));
+  left: calc(-1 * (var(--rui-docs-navigation-inset) + 1px));
 }
 rui-sidebar .rui-sidebar__menu-button > :last-child {
   overflow: hidden;

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

@@ -14,6 +14,8 @@ export type RuiSidebarProps = {
     collapsible?: RuiSidebarCollapsible;
     /** Initial open state when uncontrolled. Default: `true`. */
     defaultOpen?: boolean;
+    /** Initial open state below `mobileBreakpoint` when uncontrolled. Default: `false`. */
+    mobileDefaultOpen?: boolean;
     /** Controlled open state. */
     open?: boolean;
     /** Initial width in pixels when uncontrolled. Default: `256`. */
@@ -92,6 +94,7 @@ export declare class RuiSidebar extends RadiantElement<RuiSidebarBindings> {
     maxWidth: number;
     resizable: boolean;
     defaultOpen: boolean;
+    mobileDefaultOpen: boolean;
     open: boolean | undefined;
     mobileBreakpoint: number;
     label: string;
@@ -160,6 +163,9 @@ export declare class RuiSidebar extends RadiantElement<RuiSidebarBindings> {
      */
     private setMobile;
     private clampWidth;
+    /**
+     * @remarks Mobile is always a full drawer — never leave an icon rail when closed.
+     */
     private paneWidth;
     /** Drive layout through the CSS variable only — never set inline pane width. */
     private syncPaneWidthVar;
@@ -173,6 +179,7 @@ export declare class RuiSidebar extends RadiantElement<RuiSidebarBindings> {
     private onHandlePointerDown;
     private onHandleKeydown;
     private onScrimClick;
+    onMenuLinkClick(): void;
     onHostKeydown(event: Event): void;
     /**
      * Only the pane's `aria-label` is bound below. `data-state`/`data-collapsible`/
@@ -183,6 +190,8 @@ export declare class RuiSidebar extends RadiantElement<RuiSidebarBindings> {
      * (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.
+     *
+     * @remarks The icon rail stays interactive when collapsed on desktop; the mobile drawer does not.
      */
     render(): import("@ecopages/jsx").JsxRenderable;
 }

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

@@ -1,2 +1,2 @@
-import{jsx as w,jsxs as C}from"@ecopages/jsx/jsx-runtime";import{RadiantElement as qe,customElement as et,event as tt,onEvent as v,onUpdated as ze,prop as p,query as Ke,state as Be}from"@ecopages/radiant";var le,ue,oe,he,ce,de,me,ge,pe,fe,be,ve,_e,ye,xe,Re,Me,we,Te,Ve,Se,Ee,De,Pe,ke,Ue,Ae,Ie,je,Ce,$e,Fe,Le,Ne;function Je(n,e,t,i,a,u){var _,o,F,L,P,N,S,X=Symbol.metadata||Symbol.for("Symbol.metadata"),G=Object.defineProperty,O=Object.create,H=[O(null),O(null)],J=e.length;function k(r,f,m){return function(s,l){f&&(l=s,s=n);for(var b=0;b<r.length;b++)l=r[b].apply(s,m?[l]:[]);return m?l:s}}function R(r,f,m,s){if(typeof r!="function"&&(s||r!==void 0))throw new TypeError(f+" must "+(m||"be")+" a function"+(s?"":" or undefined"));return r}function Q(r,f,m,s,l,b,T,g,y,x,Z){function q(c){if(!Z(c))throw new TypeError("Attempted to access private element on non-instance")}var z=[].concat(f[0]),ee=f[3],K=!T,E=l===1,te=l===3,ie=l===4,U=l===2;function A(c,V,re){return function(j,se){return V&&(se=j,j=r),re&&re(j),h[c].call(j,se)}}if(!K){var h={},B=[],M=te?"get":ie||E?"set":"value";if(y?(x||E?h={get:Oe(function(){return ee(this)},s,"get"),set:function(c){f[4](this,c)}}:h[M]=ee,x||Oe(h[M],s,U?"":M)):x||(h=Object.getOwnPropertyDescriptor(r,s)),!x&&!y){if((o=H[+g][s])&&(o^l)!==7)throw Error("Decorating two elements with the same name ("+h[M].name+") is not supported yet");H[+g][s]=l<3?1:l}}for(var d=r,I=z.length-1;I>=0;I-=m?2:1){var ne=R(z[I],"A decorator","be",!0),ae=m?z[I-1]:void 0,W={},D={kind:["field","accessor","method","getter","setter","class"][l],name:s,metadata:_,addInitializer:function(c,V){if(c.v)throw new TypeError("attempted to call addInitializer after decoration was finished");R(V,"An initializer","be",!0),b.push(V)}.bind(null,W)};if(K)o=ne.call(ae,d,D),W.v=1,R(o,"class decorators","return")&&(d=o);else if(D.static=g,D.private=y,o=D.access={has:y?Z.bind():function(c){return s in c}},ie||(o.get=y?U?function(c){return q(c),h.value}:A("get",0,q):function(c){return c[s]}),U||te||(o.set=y?A("set",0,q):function(c,V){c[s]=V}),d=ne.call(ae,E?{get:h.get,set:h.set}:h[M],D),W.v=1,E){if(typeof d=="object"&&d)(o=R(d.get,"accessor.get"))&&(h.get=o),(o=R(d.set,"accessor.set"))&&(h.set=o),(o=R(d.init,"accessor.init"))&&B.unshift(o);else if(d!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else R(d,(x?"field":"method")+" decorators","return")&&(x?B.unshift(d):h[M]=d)}return l<2&&T.push(k(B,g,1),k(b,g,0)),x||K||(y?E?T.splice(-1,0,A("get",g),A("set",g)):T.push(U?h[M]:R.call.bind(h[M])):G(r,s,h)),d}function Y(r){return G(r,X,{configurable:!0,enumerable:!0,value:_})}return u!==void 0&&(_=u[X]),_=O(_??null),P=[],N=function(r){r&&P.push(k(r))},S=function(r,f){for(var m=0;m<t.length;m++){var s=t[m],l=s[1],b=7&l;if((8&l)==r&&!b==f){var T=s[2],g=!!s[3],y=16&l;Q(r?n:n.prototype,s,y,g?"#"+T:Qe(T),b,b<2?[]:r?L=L||[]:F=F||[],P,!!r,g,f,r&&g?function(x){return Ze(x)===n}:a)}}},S(8,0),S(0,0),S(8,1),S(0,1),N(F),N(L),o=P,J||Y(n),{e:o,get c(){var r=[];return J&&[Y(n=Q(n,[e],i,n.name,5,r)),k(r,1)]}}}function Qe(n){var e=Ye(n,"string");return typeof e=="symbol"?e:e+""}function Ye(n,e){if(typeof n!="object"||!n)return n;var t=n[Symbol.toPrimitive];if(t!==void 0){var i=t.call(n,e||"default");if(typeof i!="object")return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(n)}function Oe(n,e,t){typeof e=="symbol"&&(e=(e=e.description)?"["+e+"]":"");try{Object.defineProperty(n,"name",{configurable:!0,value:t?t+" "+e:e})}catch{}return n}function Ze(n){if(Object(n)!==n)throw TypeError("right-hand side of 'in' should be an object, got "+(n!==null?typeof n:"null"));return n}var $,We=class extends qe{static{({e:[oe,he,ce,de,me,ge,pe,fe,be,ve,_e,ye,xe,Re,Me,we,Te,Ve,Se,Ee,De,Pe,ke,Ue,Ae,Ie,je,Ce,$e,Fe,Le,Ne,le],c:[$,ue]}=Je(this,[et("rui-slider")],[[p({type:String,defaultValue:"single"}),0,"variant"],[p({type:Number,reflect:!0,defaultValue:50}),0,"value"],[p({type:Number,reflect:!0,attribute:"range-min",defaultValue:25}),0,"rangeMin"],[p({type:Number,reflect:!0,attribute:"range-max",defaultValue:75}),0,"rangeMax"],[p({type:Number,defaultValue:0}),0,"min"],[p({type:Number,defaultValue:100}),0,"max"],[p({type:Number,defaultValue:1}),0,"step"],[p({type:Number,defaultValue:0}),0,"minDistance"],[p({type:Boolean,reflect:!0,defaultValue:!1}),0,"disabled"],[p({type:String,defaultValue:""}),0,"label"],[p({type:String,defaultValue:""}),0,"name"],[tt({name:"rui-change",bubbles:!0,composed:!0}),0,"changeEvent"],[Ke({ref:"input"}),0,"inputTarget"],[Ke({ref:"rangeFill"}),0,"rangeFill"],[Be,0,"pendingRange"],[Be,0,"displayedValue"],[ze(["value","min","max","step","variant"]),2,"onSinglePropsUpdated"],[ze(["rangeMin","rangeMax","min","max","step","minDistance","variant"]),2,"onRangePropsUpdated"],[v({ref:"input",type:"pointerdown"}),2,"onPointerDown"],[v({ref:"input",type:"pointerup"}),2,"onPointerUp"],[v({ref:"input",type:"pointercancel"}),2,"onPointerCancel"],[v({ref:"input",type:"input"}),2,"onInput"],[v({ref:"input",type:"change"}),2,"onChange"],[v({selector:"[data-thumb]",type:"pointerdown"}),2,"onThumbPointerDown"],[v({selector:"[data-thumb]",type:"pointermove"}),2,"onThumbPointerMove"],[v({selector:"[data-thumb]",type:"pointerup"}),2,"onThumbPointerUp"],[v({selector:"[data-thumb]",type:"pointercancel"}),2,"onThumbPointerCancel"],[v({selector:"[data-thumb]",type:"keydown"}),2,"onThumbKeydown"]],0,void 0,qe))}variant=(le(this),oe(this));value=(he(this),ce(this));rangeMin=(de(this),me(this));rangeMax=(ge(this),pe(this));min=(fe(this),be(this));max=(ve(this),_e(this));step=(ye(this),xe(this));minDistance=(Re(this),Me(this));disabled=(we(this),Te(this));label=(Ve(this),Se(this));name=(Ee(this),De(this));changeEvent=(Pe(this),ke(this));inputTarget=(Ue(this),Ae(this));rangeFill=(Ie(this),je(this));interacting=(Ce(this),!1);activeThumb=null;pendingRange=$e(this,null);displayedValue=(Fe(this),Le(this,null));resolvedDisabledTabindex=(Ne(this),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()})}onSinglePropsUpdated(){this.variant!=="single"||this.interacting||this.syncInputFromValue()}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.displayedValue=e}syncRangeUi(){let[e,t]=this.getActiveRange(),i=!1;if(this.activeThumb||(e!==this.rangeMin&&(this.rangeMin=e,i=!0),t!==this.rangeMax&&(this.rangeMax=t,i=!0)),i){queueMicrotask(()=>{this.activeThumb||this.paintRangeUi(...this.getActiveRange())});return}this.paintRangeUi(e,t)}paintRangeUi(e,t){let i=this.percentFor(e),a=this.percentFor(t),u=this.querySelector(".rui-slider__range-track");u&&(u.style.setProperty("--rui-slider-min",`${i}%`),u.style.setProperty("--rui-slider-max",`${a}%`)),this.rangeFill&&(this.rangeFill.style.left=`${i}%`,this.rangeFill.style.width=`${a-i}%`)}commitRange(e=!0){let[t,i]=this.getActiveRange(),a=t!==this.rangeMin||i!==this.rangeMax;this.pendingRange=null,this.rangeMin=t,this.rangeMax=i,e&&a&&this.changeEvent.emit({values:[t,i]})}setRangeValue(e,t){this.activeThumb=e;let[i,a]=this.pendingRange??[this.rangeMin,this.rangeMax],[u,_]=this.normalizeRange(e==="min"?t:i,e==="max"?t:a);this.pendingRange=[u,_],this.paintRangeUi(u,_)}commitSingleValue(e){let t=Number(e.value);this.updateDisplayedValue(t),t!==this.value&&(this.value=t,this.changeEvent.emit({value:t}))}onPointerDown(e){e.button!==0||this.variant!=="single"||(this.interacting=!0)}onPointerUp(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}onPointerCancel(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}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)}onChange(e){this.variant==="single"&&(this.interacting=!1,this.commitSingleValue(e.target))}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()}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}))}onThumbPointerUp(){!this.activeThumb||this.variant!=="range"||(this.commitRange(),this.activeThumb=null)}onThumbPointerCancel(){!this.activeThumb||this.variant!=="range"||(this.pendingRange=null,this.syncRangeUi(),this.activeThumb=null)}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,u=a;switch(e.key){case"ArrowRight":case"ArrowUp":u=this.clamp(a+this.step);break;case"ArrowLeft":case"ArrowDown":u=this.clamp(a-this.step);break;case"Home":u=this.min;break;case"End":u=this.max;break;case"PageUp":u=this.clamp(a+this.step*10);break;case"PageDown":u=this.clamp(a-this.step*10);break;default:return}e.preventDefault(),this.setRangeValue(i,u),this.commitRange(!1),this.changeEvent.emit({values:[this.rangeMin,this.rangeMax]}),this.activeThumb=null}render(){let[e,t]=this.getActiveRange(),i=this.displayedValue??this.value;return this.variant==="range"?C("div",{class:"rui-slider rui-slider--range",children:[this.label?w("span",{class:"rui-slider__label",children:this.label}):null,w("div",{class:"rui-slider__range",children:C("div",{class:"rui-slider__range-track",children:[w("div",{class:"rui-slider__range-fill","data-ref":"rangeFill"}),w("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":t,"aria-valuenow":e,disabled:this.$.disabled}),w("button",{type:"button",class:"rui-slider__thumb","data-ref":"rangeMaxThumb","data-thumb":"max",role:"slider",tabindex:this.resolvedDisabledTabindex,"aria-label":this.resolvedMaxLabel,"aria-valuemin":e,"aria-valuemax":this.max,"aria-valuenow":t,disabled:this.$.disabled})]})}),C("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true",children:[e," \u2013 ",t]})]}):C("label",{class:"rui-slider",children:[this.label?w("span",{class:"rui-slider__label",children:this.label}):null,w("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}),w("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true",children:i})]})}static{ue()}};import{jsx as at}from"@ecopages/jsx/jsx-runtime";var it=Symbol.for("@ecopages/storybook-radiant.viewElement"),Xe=Symbol.for("@ecopages/storybook-radiant.scriptModule"),Ge=Symbol.for("@ecopages/storybook-radiant.scriptExport");function nt(n,e){n[it]=e;let t=e[Xe];t&&(n[Xe]=t,n[Ge]=e[Ge]??e.name)}function He(n,e,t){let i=a=>e(a);return nt(i,n),i}var rt=He($,({values:n,...e})=>at("rui-slider",{...e,rangeMin:n?.[0],rangeMax:n?.[1]}),{stylesheets:["./slider.css"]});export{rt as RuiSlider,$ as RuiSliderElement};
+import{jsx as w,jsxs as C}from"@ecopages/jsx/jsx-runtime";import{RadiantElement as ze,customElement as We,event as Ye,onEvent as v,onUpdated as Ke,prop as p,query as Oe,state as Be}from"@ecopages/radiant";var se,le,ue,he,oe,ce,de,me,ge,pe,fe,be,ve,_e,ye,xe,Me,Re,we,Te,Ve,Se,De,Ee,Pe,Ue,ke,je,$e,Ae,Ce,Fe,Ie,Le;function Ge(n,e,t,i,r,u){var _,h,F,I,P,L,S,X=Symbol.metadata||Symbol.for("Symbol.metadata"),G=Object.defineProperty,q=Object.create,H=[q(null),q(null)],J=e.length;function U(a,f,m){return function(s,l){f&&(l=s,s=n);for(var b=0;b<a.length;b++)l=a[b].apply(s,m?[l]:[]);return m?l:s}}function M(a,f,m,s){if(typeof a!="function"&&(s||a!==void 0))throw new TypeError(f+" must "+(m||"be")+" a function"+(s?"":" or undefined"));return a}function Q(a,f,m,s,l,b,T,g,y,x,Y){function z(c){if(!Y(c))throw new TypeError("Attempted to access private element on non-instance")}var K=[].concat(f[0]),Z=f[3],O=!T,D=l===1,ee=l===3,te=l===4,k=l===2;function j(c,V,ae){return function(A,re){return V&&(re=A,A=a),ae&&ae(A),o[c].call(A,re)}}if(!O){var o={},B=[],R=ee?"get":te||D?"set":"value";if(y?(x||D?o={get:qe(function(){return Z(this)},s,"get"),set:function(c){f[4](this,c)}}:o[R]=Z,x||qe(o[R],s,k?"":R)):x||(o=Object.getOwnPropertyDescriptor(a,s)),!x&&!y){if((h=H[+g][s])&&(h^l)!==7)throw Error("Decorating two elements with the same name ("+o[R].name+") is not supported yet");H[+g][s]=l<3?1:l}}for(var d=a,$=K.length-1;$>=0;$-=m?2:1){var ie=M(K[$],"A decorator","be",!0),ne=m?K[$-1]:void 0,N={},E={kind:["field","accessor","method","getter","setter","class"][l],name:s,metadata:_,addInitializer:function(c,V){if(c.v)throw new TypeError("attempted to call addInitializer after decoration was finished");M(V,"An initializer","be",!0),b.push(V)}.bind(null,N)};if(O)h=ie.call(ne,d,E),N.v=1,M(h,"class decorators","return")&&(d=h);else if(E.static=g,E.private=y,h=E.access={has:y?Y.bind():function(c){return s in c}},te||(h.get=y?k?function(c){return z(c),o.value}:j("get",0,z):function(c){return c[s]}),k||ee||(h.set=y?j("set",0,z):function(c,V){c[s]=V}),d=ie.call(ne,D?{get:o.get,set:o.set}:o[R],E),N.v=1,D){if(typeof d=="object"&&d)(h=M(d.get,"accessor.get"))&&(o.get=h),(h=M(d.set,"accessor.set"))&&(o.set=h),(h=M(d.init,"accessor.init"))&&B.unshift(h);else if(d!==void 0)throw new TypeError("accessor decorators must return an object with get, set, or init properties or undefined")}else M(d,(x?"field":"method")+" decorators","return")&&(x?B.unshift(d):o[R]=d)}return l<2&&T.push(U(B,g,1),U(b,g,0)),x||O||(y?D?T.splice(-1,0,j("get",g),j("set",g)):T.push(k?o[R]:M.call.bind(o[R])):G(a,s,o)),d}function W(a){return G(a,X,{configurable:!0,enumerable:!0,value:_})}return u!==void 0&&(_=u[X]),_=q(_??null),P=[],L=function(a){a&&P.push(U(a))},S=function(a,f){for(var m=0;m<t.length;m++){var s=t[m],l=s[1],b=7&l;if((8&l)==a&&!b==f){var T=s[2],g=!!s[3],y=16&l;Q(a?n:n.prototype,s,y,g?"#"+T:He(T),b,b<2?[]:a?I=I||[]:F=F||[],P,!!a,g,f,a&&g?function(x){return Qe(x)===n}:r)}}},S(8,0),S(0,0),S(8,1),S(0,1),L(F),L(I),h=P,J||W(n),{e:h,get c(){var a=[];return J&&[W(n=Q(n,[e],i,n.name,5,a)),U(a,1)]}}}function He(n){var e=Je(n,"string");return typeof e=="symbol"?e:e+""}function Je(n,e){if(typeof n!="object"||!n)return n;var t=n[Symbol.toPrimitive];if(t!==void 0){var i=t.call(n,e||"default");if(typeof i!="object")return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(n)}function qe(n,e,t){typeof e=="symbol"&&(e=(e=e.description)?"["+e+"]":"");try{Object.defineProperty(n,"name",{configurable:!0,value:t?t+" "+e:e})}catch{}return n}function Qe(n){if(Object(n)!==n)throw TypeError("right-hand side of 'in' should be an object, got "+(n!==null?typeof n:"null"));return n}var Xe,Ne=class extends ze{static{({e:[ue,he,oe,ce,de,me,ge,pe,fe,be,ve,_e,ye,xe,Me,Re,we,Te,Ve,Se,De,Ee,Pe,Ue,ke,je,$e,Ae,Ce,Fe,Ie,Le,se],c:[Xe,le]}=Ge(this,[We("rui-slider")],[[p({type:String,defaultValue:"single"}),0,"variant"],[p({type:Number,reflect:!0,defaultValue:50}),0,"value"],[p({type:Number,reflect:!0,attribute:"range-min",defaultValue:25}),0,"rangeMin"],[p({type:Number,reflect:!0,attribute:"range-max",defaultValue:75}),0,"rangeMax"],[p({type:Number,defaultValue:0}),0,"min"],[p({type:Number,defaultValue:100}),0,"max"],[p({type:Number,defaultValue:1}),0,"step"],[p({type:Number,defaultValue:0}),0,"minDistance"],[p({type:Boolean,reflect:!0,defaultValue:!1}),0,"disabled"],[p({type:String,defaultValue:""}),0,"label"],[p({type:String,defaultValue:""}),0,"name"],[Ye({name:"rui-change",bubbles:!0,composed:!0}),0,"changeEvent"],[Oe({ref:"input"}),0,"inputTarget"],[Oe({ref:"rangeFill"}),0,"rangeFill"],[Be,0,"pendingRange"],[Be,0,"displayedValue"],[Ke(["value","min","max","step","variant"]),2,"onSinglePropsUpdated"],[Ke(["rangeMin","rangeMax","min","max","step","minDistance","variant"]),2,"onRangePropsUpdated"],[v({ref:"input",type:"pointerdown"}),2,"onPointerDown"],[v({ref:"input",type:"pointerup"}),2,"onPointerUp"],[v({ref:"input",type:"pointercancel"}),2,"onPointerCancel"],[v({ref:"input",type:"input"}),2,"onInput"],[v({ref:"input",type:"change"}),2,"onChange"],[v({selector:"[data-thumb]",type:"pointerdown"}),2,"onThumbPointerDown"],[v({selector:"[data-thumb]",type:"pointermove"}),2,"onThumbPointerMove"],[v({selector:"[data-thumb]",type:"pointerup"}),2,"onThumbPointerUp"],[v({selector:"[data-thumb]",type:"pointercancel"}),2,"onThumbPointerCancel"],[v({selector:"[data-thumb]",type:"keydown"}),2,"onThumbKeydown"]],0,void 0,ze))}variant=(se(this),ue(this));value=(he(this),oe(this));rangeMin=(ce(this),de(this));rangeMax=(me(this),ge(this));min=(pe(this),fe(this));max=(be(this),ve(this));step=(_e(this),ye(this));minDistance=(xe(this),Me(this));disabled=(Re(this),we(this));label=(Te(this),Ve(this));name=(Se(this),De(this));changeEvent=(Ee(this),Pe(this));inputTarget=(Ue(this),ke(this));rangeFill=(je(this),$e(this));interacting=(Ae(this),!1);activeThumb=null;pendingRange=Ce(this,null);displayedValue=(Fe(this),Ie(this,null));resolvedDisabledTabindex=(Le(this),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()})}onSinglePropsUpdated(){this.variant!=="single"||this.interacting||this.syncInputFromValue()}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),r=this.clamp(t);return i>r&&([i,r]=[r,i]),r-i<this.minDistance&&(this.activeThumb==="min"?i=this.clamp(r-this.minDistance):r=this.clamp(i+this.minDistance)),[i,r]}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(),r=Math.min(1,Math.max(0,(e-i.left)/i.width));return this.clamp(this.min+r*(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.displayedValue=e}syncRangeUi(){let[e,t]=this.getActiveRange(),i=!1;if(this.activeThumb||(e!==this.rangeMin&&(this.rangeMin=e,i=!0),t!==this.rangeMax&&(this.rangeMax=t,i=!0)),i){queueMicrotask(()=>{this.activeThumb||this.paintRangeUi(...this.getActiveRange())});return}this.paintRangeUi(e,t)}paintRangeUi(e,t){let i=this.percentFor(e),r=this.percentFor(t),u=this.querySelector(".rui-slider__range-track");u&&(u.style.setProperty("--rui-slider-min",`${i}%`),u.style.setProperty("--rui-slider-max",`${r}%`)),this.rangeFill&&(this.rangeFill.style.left=`${i}%`,this.rangeFill.style.width=`${r-i}%`)}commitRange(e=!0){let[t,i]=this.getActiveRange(),r=t!==this.rangeMin||i!==this.rangeMax;this.pendingRange=null,this.rangeMin=t,this.rangeMax=i,e&&r&&this.changeEvent.emit({values:[t,i]})}setRangeValue(e,t){this.activeThumb=e;let[i,r]=this.pendingRange??[this.rangeMin,this.rangeMax],[u,_]=this.normalizeRange(e==="min"?t:i,e==="max"?t:r);this.pendingRange=[u,_],this.paintRangeUi(u,_)}commitSingleValue(e){let t=Number(e.value);this.updateDisplayedValue(t),t!==this.value&&(this.value=t,this.changeEvent.emit({value:t}))}onPointerDown(e){e.button!==0||this.variant!=="single"||(this.interacting=!0)}onPointerUp(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}onPointerCancel(e){!this.interacting||this.variant!=="single"||(this.interacting=!1,this.commitSingleValue(e.target))}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)}onChange(e){this.variant==="single"&&(this.interacting=!1,this.commitSingleValue(e.target))}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()}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}))}onThumbPointerUp(){!this.activeThumb||this.variant!=="range"||(this.commitRange(),this.activeThumb=null)}onThumbPointerCancel(){!this.activeThumb||this.variant!=="range"||(this.pendingRange=null,this.syncRangeUi(),this.activeThumb=null)}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"),r=i==="min"?this.rangeMin:this.rangeMax,u=r;switch(e.key){case"ArrowRight":case"ArrowUp":u=this.clamp(r+this.step);break;case"ArrowLeft":case"ArrowDown":u=this.clamp(r-this.step);break;case"Home":u=this.min;break;case"End":u=this.max;break;case"PageUp":u=this.clamp(r+this.step*10);break;case"PageDown":u=this.clamp(r-this.step*10);break;default:return}e.preventDefault(),this.setRangeValue(i,u),this.commitRange(!1),this.changeEvent.emit({values:[this.rangeMin,this.rangeMax]}),this.activeThumb=null}render(){let[e,t]=this.getActiveRange(),i=this.displayedValue??this.value;return this.variant==="range"?C("div",{class:"rui-slider rui-slider--range",children:[this.label?w("span",{class:"rui-slider__label",children:this.label}):null,w("div",{class:"rui-slider__range",children:C("div",{class:"rui-slider__range-track",children:[w("div",{class:"rui-slider__range-fill","data-ref":"rangeFill"}),w("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":t,"aria-valuenow":e,disabled:this.$.disabled}),w("button",{type:"button",class:"rui-slider__thumb","data-ref":"rangeMaxThumb","data-thumb":"max",role:"slider",tabindex:this.resolvedDisabledTabindex,"aria-label":this.resolvedMaxLabel,"aria-valuemin":e,"aria-valuemax":this.max,"aria-valuenow":t,disabled:this.$.disabled})]})}),C("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true",children:[e," \u2013 ",t]})]}):C("label",{class:"rui-slider",children:[this.label?w("span",{class:"rui-slider__label",children:this.label}):null,w("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}),w("span",{class:"rui-slider__value","data-ref":"value","aria-hidden":"true",children:i})]})}static{le()}};import{jsx as Ze}from"@ecopages/jsx/jsx-runtime";function et({values:n,...e}){return Ze("rui-slider",{...e,rangeMin:n?.[0],rangeMax:n?.[1]})}export{et as RuiSlider,Xe as RuiSliderElement};
 //# sourceMappingURL=index.js.map