@nuraly/lumenui 0.1.0

package/dist/src/components/slider-input/bundle.js

@@ -0,0 +1,241 @@
+import{css as r,LitElement as l,html as a}from"lit";import{property as i,state as t}from"lit/decorators.js";var n=r`
+  ${r`
+  :host {
+    /* Component dimensions */
+    --nuraly-slider-input-local-width: var(--nuraly-size-slider-input-width, 100%);
+    --nuraly-slider-input-local-track-height: var(--nuraly-size-slider-input-track-height, 8px);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-size-slider-input-thumb-diameter, 20px);
+    --nuraly-slider-input-local-border-width: var(--nuraly-border-slider-input-width, 1px);
+
+    /* Size variants */
+    --nuraly-slider-input-local-small-height: var(--nuraly-size-slider-input-small-height, 6px);
+    --nuraly-slider-input-local-small-thumb-diameter: var(--nuraly-size-slider-input-small-thumb-diameter, 16px);
+    --nuraly-slider-input-local-large-height: var(--nuraly-size-slider-input-large-height, 10px);
+    --nuraly-slider-input-local-large-thumb-diameter: var(--nuraly-size-slider-input-large-thumb-diameter, 24px);
+
+    /* Typography */
+    --nuraly-slider-input-local-font-family: var(--nuraly-typograpnr-slider-input-font-family, var(--nuraly-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif));
+    --nuraly-slider-input-local-font-size: var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));
+    --nuraly-slider-input-local-font-weight: var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));
+
+    /* Border radius */
+    --nuraly-slider-input-local-border-radius: var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));
+    --nuraly-slider-input-local-thumb-border-radius: var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));
+
+    /* Colors - Track */
+    --nuraly-slider-input-local-track-color: var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));
+    --nuraly-slider-input-local-track-filled-color: var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));
+    --nuraly-slider-input-local-border-color: var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));
+
+    /* Colors - Thumb */
+    --nuraly-slider-input-local-thumb-color: var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));
+    --nuraly-slider-input-local-thumb-border-color: var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));
+    --nuraly-slider-input-local-thumb-hover-color: var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));
+    --nuraly-slider-input-local-thumb-active-color: var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));
+
+    /* Colors - Disabled states */
+    --nuraly-slider-input-local-disabled-track-color: var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));
+    --nuraly-slider-input-local-disabled-color: var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));
+    --nuraly-slider-input-local-disabled-thumb-color: var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));
+    --nuraly-slider-input-local-disabled-border-color: var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));
+
+    /* Colors - Status states */
+    --nuraly-slider-input-local-error-color: var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));
+    --nuraly-slider-input-local-warning-color: var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));
+    --nuraly-slider-input-local-success-color: var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));
+
+    /* Shadows */
+    --nuraly-slider-input-local-thumb-shadow: var(--nuraly-shadow-slider-input-thumb, var(--nuraly-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05)));
+    --nuraly-slider-input-local-focus-shadow: var(--nuraly-shadow-slider-input-focus, var(--nuraly-shadow-focus, 0 0 0 3px rgba(59, 130, 246, 0.15)));
+
+    /* Elevation */
+    --nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));
+
+    /* Transitions */
+    --nuraly-slider-input-local-transition-duration: var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));
+    --nuraly-slider-input-local-transition-timing: var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease));
+  }
+`}
+
+  :host {
+    display: inline-block;
+    width: var(--nuraly-slider-input-local-width);
+    font-family: var(--nuraly-slider-input-local-font-family);
+    font-size: var(--nuraly-slider-input-local-font-size);
+    font-weight: var(--nuraly-slider-input-local-font-weight);
+  }
+
+  /* Host attribute selectors for configuration */
+  :host([disabled]) {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .slider-wrapper {
+    position: relative;
+    padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;
+  }
+
+  .range-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .range-slider,
+  .range-slider-value {
+    border-radius: var(--nuraly-slider-input-local-border-radius);
+    height: var(--nuraly-slider-input-local-track-height);
+    position: absolute;
+    top: calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height)) / 2);
+    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
+  }
+
+  .range-slider {
+    background: var(--nuraly-slider-input-local-track-color);
+    width: 100%;
+    border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);
+  }
+
+  .range-slider-value {
+    background: var(--nuraly-slider-input-local-track-filled-color);
+    width: var(--nr-slider-value-width, 0%);
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);
+  }
+
+  .range-thumb {
+    background: var(--nuraly-slider-input-local-thumb-color);
+    border: 2px solid var(--nuraly-slider-input-local-thumb-border-color);
+    border-radius: var(--nuraly-slider-input-local-thumb-border-radius);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    position: absolute;
+    top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);
+    left: var(--nr-slider-thumb-offset, 0px);
+    cursor: pointer;
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 2);
+    box-shadow: var(--nuraly-slider-input-local-thumb-shadow);
+    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);
+  }
+
+  .range-thumb:hover {
+    background: var(--nuraly-slider-input-local-thumb-hover-color);
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  .range-thumb:active {
+    background: var(--nuraly-slider-input-local-thumb-active-color);
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    width: 100%;
+    cursor: pointer;
+    z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);
+    appearance: none;
+    background: transparent;
+    pointer-events: auto;
+  }
+
+  input::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    background: transparent;
+    cursor: pointer;
+  }
+
+  input::-moz-range-thumb {
+    appearance: none;
+    width: var(--nuraly-slider-input-local-thumb-diameter);
+    height: var(--nuraly-slider-input-local-thumb-diameter);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  input:focus-visible + .range-container .range-thumb {
+    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+  }
+
+  /* Disabled state styling */
+  :host([disabled]) .range-slider {
+    background: var(--nuraly-slider-input-local-disabled-track-color);
+    border-color: var(--nuraly-slider-input-local-disabled-border-color);
+  }
+
+  :host([disabled]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-disabled-color);
+  }
+
+  :host([disabled]) .range-thumb {
+    background: var(--nuraly-slider-input-local-disabled-thumb-color);
+    border-color: var(--nuraly-slider-input-local-disabled-border-color);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  :host([disabled]) input {
+    cursor: not-allowed;
+  }
+
+  /* Size variants */
+  :host([size="small"]) {
+    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-small-height);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-small-thumb-diameter);
+  }
+
+  :host([size="large"]) {
+    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-large-height);
+    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-large-thumb-diameter);
+  }
+
+  /* Error state */
+  :host([error]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-error-color);
+  }
+
+  :host([error]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-error-color);
+  }
+
+  /* Warning state */
+  :host([warning]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-warning-color);
+  }
+
+  :host([warning]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-warning-color);
+  }
+
+  /* Success state */
+  :host([success]) .range-slider-value {
+    background: var(--nuraly-slider-input-local-success-color);
+  }
+
+  :host([success]) .range-thumb {
+    border-color: var(--nuraly-slider-input-local-success-color);
+  }
+`;var e=function(r,l,a,i){for(var t,n=arguments.length,e=n<3?l:null===i?i=Object.getOwnPropertyDescriptor(l,a):i,o=r.length-1;o>=0;o--)(t=r[o])&&(e=(n<3?t(e):n>3?t(l,a,e):t(l,a))||e);return n>3&&e&&Object.defineProperty(l,a,e),e},o=function(r,l,a,i){return new(a||(a=Promise))(function(t,n){function e(r){try{u(i.next(r))}catch(r){n(r)}}function o(r){try{u(i.throw(r))}catch(r){n(r)}}function u(r){var l;r.done?t(r.value):(l=r.value,l instanceof a?l:new a(function(r){r(l)})).then(e,o)}u((i=i.apply(r,l||[])).next())})};class u extends l{constructor(){super(...arguments),this.disabled=!1,this.max=100,this.min=0,this.step=1,this.value=0,this._actualMin=0,this._actualMax=0,this._dispatchChangeEvents=function(r,l=100){let a;return function(...i){clearTimeout(a),a=setTimeout(()=>r.apply(this,i),l)}}(()=>{this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("changed",{detail:{value:Number(this.value)}}))},50)}firstUpdated(){return o(this,void 0,void 0,function*(){if(yield this.updateComplete,this._input=this.shadowRoot.querySelector("input"),this._slider=this.shadowRoot.querySelector(".range-slider"),this._thumb=this.shadowRoot.querySelector(".range-thumb"),this._actualMin=this.min,this._actualMax=this.max,this.step){const r=this.min%this.step,l=this.max%this.step;0!==r&&(this.min=this.min-r),0!==l&&(this.max=this.max+this.step-l)}requestAnimationFrame(()=>{this._updateSliderVisuals()})})}render(){return a`
+		  <div class="slider-wrapper">
+	        <input
+	          max=${this.max}
+	          min=${this.min}
+	          step=${this.step}
+	          type="range"
+	          value=${this.value}
+	          ?disabled=${this.disabled}
+	          @input=${this._inputHandler}
+	          @change=${this._changeHandler}
+	        />
+            <div class="range-container">
+	          <div class="range-slider"></div>
+	          <div class="range-slider-value"></div>
+	          <div class="range-thumb"></div>
+	        </div>
+	      </div>`}updated(r){(r.has("value")||r.has("min")||r.has("max"))&&requestAnimationFrame(()=>{this._updateSliderVisuals()})}_inputHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._updateSliderVisuals(),this.requestUpdate()}_changeHandler(r){r.stopPropagation();const l=r.target,a=Number(l.value);this.value=a>this._actualMax?this._actualMax:a<this._actualMin?this._actualMin:a,this._dispatchChangeEvents(),this.requestUpdate()}_updateSliderVisuals(){if(!this._thumb||!this._slider)return;const r=this.min<this._actualMin?this._actualMin:this.min,l=(this.max>this._actualMax?this._actualMax:this.max)-r;if(0===l)return;const a=Math.max(0,Math.min(1,(this.value-r)/l)),i=this._thumb.offsetWidth||20,t=100*a+"%",n=(this._slider.offsetWidth||200)-i,e=`${Math.max(0,Math.min(n,n*a))}px`;this.style.setProperty("--nr-slider-value-width",t),this.style.setProperty("--nr-slider-thumb-offset",e)}_updateSlider(){this._updateSliderVisuals(),this._dispatchChangeEvents(),this.requestUpdate()}}u.styles=n,e([i({type:Boolean,reflect:!0})],u.prototype,"disabled",void 0),e([i({type:Number})],u.prototype,"max",void 0),e([i({type:Number})],u.prototype,"min",void 0),e([i({type:Number})],u.prototype,"step",void 0),e([i({type:Number})],u.prototype,"value",void 0),e([t()],u.prototype,"_actualMin",void 0),e([t()],u.prototype,"_actualMax",void 0),e([t()],u.prototype,"_input",void 0),e([t()],u.prototype,"_slider",void 0),e([t()],u.prototype,"_thumb",void 0),customElements.define("nr-slider-input",u);export{u as SliderInput};

package/dist/src/components/slider-input/index.d.ts

@@ -0,0 +1,3 @@
+export * from './slider-input.component.js';
+export * from './slider-input.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/slider-input/index.js

@@ -0,0 +1,3 @@
+export * from './slider-input.component.js';
+export * from './slider-input.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/slider-input/react.d.ts

@@ -0,0 +1,340 @@
+export declare const HySliderInput: import("@lit-labs/react").ReactWebComponent<{
+    accessKey: string;
+    readonly accessKeyLabel: string;
+    autocapitalize: string;
+    dir: string;
+    draggable: boolean;
+    hidden: boolean;
+    inert: boolean;
+    innerText: string;
+    lang: string;
+    readonly offsetHeight: number;
+    readonly offsetLeft: number;
+    readonly offsetParent: Element | null;
+    readonly offsetTop: number;
+    readonly offsetWidth: number;
+    outerText: string;
+    popover: string | null;
+    spellcheck: boolean;
+    title: string;
+    translate: boolean;
+    writingSuggestions: string;
+    attachInternals(): ElementInternals;
+    click(): void;
+    hidePopover(): void;
+    showPopover(): void;
+    togglePopover(force?: boolean): boolean;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    readonly attributes: NamedNodeMap;
+    readonly classList: DOMTokenList;
+    className: string;
+    readonly clientHeight: number;
+    readonly clientLeft: number;
+    readonly clientTop: number;
+    readonly clientWidth: number;
+    readonly currentCSSZoom: number;
+    id: string;
+    innerHTML: string;
+    readonly localName: string;
+    readonly namespaceURI: string | null;
+    onfullscreenchange: ((this: Element, ev: Event) => any) | null;
+    onfullscreenerror: ((this: Element, ev: Event) => any) | null;
+    outerHTML: string;
+    readonly ownerDocument: Document;
+    readonly part: DOMTokenList;
+    readonly prefix: string | null;
+    readonly scrollHeight: number;
+    scrollLeft: number;
+    scrollTop: number;
+    readonly scrollWidth: number;
+    readonly shadowRoot: ShadowRoot | null;
+    slot: string;
+    readonly tagName: string;
+    attachShadow(init: ShadowRootInit): ShadowRoot;
+    checkVisibility(options?: CheckVisibilityOptions): boolean;
+    closest<K extends keyof HTMLElementTagNameMap>(selector: K): HTMLElementTagNameMap[K] | null;
+    closest<K extends keyof SVGElementTagNameMap>(selector: K): SVGElementTagNameMap[K] | null;
+    closest<K extends keyof MathMLElementTagNameMap>(selector: K): MathMLElementTagNameMap[K] | null;
+    closest<E extends Element = Element>(selectors: string): E | null;
+    computedStyleMap(): StylePropertyMapReadOnly;
+    getAttribute(qualifiedName: string): string | null;
+    getAttributeNS(namespace: string | null, localName: string): string | null;
+    getAttributeNames(): string[];
+    getAttributeNode(qualifiedName: string): Attr | null;
+    getAttributeNodeNS(namespace: string | null, localName: string): Attr | null;
+    getBoundingClientRect(): DOMRect;
+    getClientRects(): DOMRectList;
+    getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;
+    getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof SVGElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<SVGElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof MathMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<MathMLElementTagNameMap[K]>;
+    getElementsByTagName<K extends keyof HTMLElementDeprecatedTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementDeprecatedTagNameMap[K]>;
+    getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
+    getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
+    getElementsByTagNameNS(namespace: string | null, localName: string): HTMLCollectionOf<Element>;
+    getHTML(options?: GetHTMLOptions): string;
+    hasAttribute(qualifiedName: string): boolean;
+    hasAttributeNS(namespace: string | null, localName: string): boolean;
+    hasAttributes(): boolean;
+    hasPointerCapture(pointerId: number): boolean;
+    insertAdjacentElement(where: InsertPosition, element: Element): Element | null;
+    insertAdjacentHTML(position: InsertPosition, string: string): void;
+    insertAdjacentText(where: InsertPosition, data: string): void;
+    matches(selectors: string): boolean;
+    releasePointerCapture(pointerId: number): void;
+    removeAttribute(qualifiedName: string): void;
+    removeAttributeNS(namespace: string | null, localName: string): void;
+    removeAttributeNode(attr: Attr): Attr;
+    requestFullscreen(options?: FullscreenOptions): Promise<void>;
+    requestPointerLock(options?: PointerLockOptions): Promise<void>;
+    scroll(options?: ScrollToOptions): void;
+    scroll(x: number, y: number): void;
+    scrollBy(options?: ScrollToOptions): void;
+    scrollBy(x: number, y: number): void;
+    scrollIntoView(arg?: boolean | ScrollIntoViewOptions): void;
+    scrollTo(options?: ScrollToOptions): void;
+    scrollTo(x: number, y: number): void;
+    setAttribute(qualifiedName: string, value: string): void;
+    setAttributeNS(namespace: string | null, qualifiedName: string, value: string): void;
+    setAttributeNode(attr: Attr): Attr | null;
+    setAttributeNodeNS(attr: Attr): Attr | null;
+    setHTMLUnsafe(html: string): void;
+    setPointerCapture(pointerId: number): void;
+    toggleAttribute(qualifiedName: string, force?: boolean): boolean;
+    webkitMatchesSelector(selectors: string): boolean;
+    readonly baseURI: string;
+    readonly childNodes: NodeListOf<ChildNode>;
+    readonly firstChild: ChildNode | null;
+    readonly isConnected: boolean;
+    readonly lastChild: ChildNode | null;
+    readonly nextSibling: ChildNode | null;
+    readonly nodeName: string;
+    readonly nodeType: number;
+    nodeValue: string | null;
+    readonly parentElement: HTMLElement | null;
+    readonly parentNode: ParentNode | null;
+    readonly previousSibling: ChildNode | null;
+    textContent: string | null;
+    appendChild<T extends Node>(node: T): T;
+    cloneNode(deep?: boolean): Node;
+    compareDocumentPosition(other: Node): number;
+    contains(other: Node | null): boolean;
+    getRootNode(options?: GetRootNodeOptions): Node;
+    hasChildNodes(): boolean;
+    insertBefore<T extends Node>(node: T, child: Node | null): T;
+    isDefaultNamespace(namespace: string | null): boolean;
+    isEqualNode(otherNode: Node | null): boolean;
+    isSameNode(otherNode: Node | null): boolean;
+    lookupNamespaceURI(prefix: string | null): string | null;
+    lookupPrefix(namespace: string | null): string | null;
+    normalize(): void;
+    removeChild<T extends Node>(child: T): T;
+    replaceChild<T extends Node>(node: Node, child: T): T;
+    readonly ELEMENT_NODE: 1;
+    readonly ATTRIBUTE_NODE: 2;
+    readonly TEXT_NODE: 3;
+    readonly CDATA_SECTION_NODE: 4;
+    readonly ENTITY_REFERENCE_NODE: 5;
+    readonly ENTITY_NODE: 6;
+    readonly PROCESSING_INSTRUCTION_NODE: 7;
+    readonly COMMENT_NODE: 8;
+    readonly DOCUMENT_NODE: 9;
+    readonly DOCUMENT_TYPE_NODE: 10;
+    readonly DOCUMENT_FRAGMENT_NODE: 11;
+    readonly NOTATION_NODE: 12;
+    readonly DOCUMENT_POSITION_DISCONNECTED: 1;
+    readonly DOCUMENT_POSITION_PRECEDING: 2;
+    readonly DOCUMENT_POSITION_FOLLOWING: 4;
+    readonly DOCUMENT_POSITION_CONTAINS: 8;
+    readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
+    readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
+    dispatchEvent(event: Event): boolean;
+    ariaAtomic: string | null;
+    ariaAutoComplete: string | null;
+    ariaBrailleLabel: string | null;
+    ariaBrailleRoleDescription: string | null;
+    ariaBusy: string | null;
+    ariaChecked: string | null;
+    ariaColCount: string | null;
+    ariaColIndex: string | null;
+    ariaColIndexText: string | null;
+    ariaColSpan: string | null;
+    ariaCurrent: string | null;
+    ariaDescription: string | null;
+    ariaDisabled: string | null;
+    ariaExpanded: string | null;
+    ariaHasPopup: string | null;
+    ariaHidden: string | null;
+    ariaInvalid: string | null;
+    ariaKeyShortcuts: string | null;
+    ariaLabel: string | null;
+    ariaLevel: string | null;
+    ariaLive: string | null;
+    ariaModal: string | null;
+    ariaMultiLine: string | null;
+    ariaMultiSelectable: string | null;
+    ariaOrientation: string | null;
+    ariaPlaceholder: string | null;
+    ariaPosInSet: string | null;
+    ariaPressed: string | null;
+    ariaReadOnly: string | null;
+    ariaRequired: string | null;
+    ariaRoleDescription: string | null;
+    ariaRowCount: string | null;
+    ariaRowIndex: string | null;
+    ariaRowIndexText: string | null;
+    ariaRowSpan: string | null;
+    ariaSelected: string | null;
+    ariaSetSize: string | null;
+    ariaSort: string | null;
+    ariaValueMax: string | null;
+    ariaValueMin: string | null;
+    ariaValueNow: string | null;
+    ariaValueText: string | null;
+    role: string | null;
+    animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions): Animation;
+    getAnimations(options?: GetAnimationsOptions): Animation[];
+    after(...nodes: (Node | string)[]): void;
+    before(...nodes: (Node | string)[]): void;
+    remove(): void;
+    replaceWith(...nodes: (Node | string)[]): void;
+    readonly nextElementSibling: Element | null;
+    readonly previousElementSibling: Element | null;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    readonly firstElementChild: Element | null;
+    readonly lastElementChild: Element | null;
+    append(...nodes: (Node | string)[]): void;
+    prepend(...nodes: (Node | string)[]): void;
+    querySelector<K extends keyof HTMLElementTagNameMap>(selectors: K): HTMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof SVGElementTagNameMap>(selectors: K): SVGElementTagNameMap[K] | null;
+    querySelector<K extends keyof MathMLElementTagNameMap>(selectors: K): MathMLElementTagNameMap[K] | null;
+    querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): HTMLElementDeprecatedTagNameMap[K] | null;
+    querySelector<E extends Element = Element>(selectors: string): E | null;
+    querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof MathMLElementTagNameMap>(selectors: K): NodeListOf<MathMLElementTagNameMap[K]>;
+    querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(selectors: K): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
+    querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;
+    replaceChildren(...nodes: (Node | string)[]): void;
+    readonly assignedSlot: HTMLSlotElement | null;
+    readonly attributeStyleMap: StylePropertyMap;
+    readonly style: CSSStyleDeclaration;
+    contentEditable: string;
+    enterKeyHint: string;
+    inputMode: string;
+    readonly isContentEditable: boolean;
+    onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oncut: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    ondblclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    ondrag: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragend: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragenter: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragleave: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragover: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondragstart: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondrop: ((this: GlobalEventHandlers, ev: DragEvent) => any) | null;
+    ondurationchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onemptied: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onended: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onerror: OnErrorEventHandler;
+    onfocus: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
+    onformdata: ((this: GlobalEventHandlers, ev: FormDataEvent) => any) | null;
+    ongotpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    oninput: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    oninvalid: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onkeydown: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeypress: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onkeyup: ((this: GlobalEventHandlers, ev: KeyboardEvent) => any) | null;
+    onload: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadeddata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadedmetadata: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onloadstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onlostpointercapture: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onmousedown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseenter: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseleave: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmousemove: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseout: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseover: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onmouseup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onpaste: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
+    onpause: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onplaying: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onpointercancel: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerdown: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerenter: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerleave: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
+    onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onreset: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onresize: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
+    onscroll: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onscrollend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsecuritypolicyviolation: ((this: GlobalEventHandlers, ev: SecurityPolicyViolationEvent) => any) | null;
+    onseeked: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onseeking: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselect: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectionchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onselectstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onslotchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onstalled: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
+    onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+    ontransitioncancel: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionend: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionrun: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    ontransitionstart: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null;
+    onvolumechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwaiting: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationiteration: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkitanimationstart: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwebkittransitionend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onwheel: ((this: GlobalEventHandlers, ev: WheelEvent) => any) | null;
+    autofocus: boolean;
+    readonly dataset: DOMStringMap;
+    nonce?: string;
+    tabIndex: number;
+    blur(): void;
+    focus(options?: FocusOptions): void;
+}, {
+    change: string;
+    input: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/src/components/slider-input/react.js

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+export const HySliderInput = createComponent({
+    tagName: 'nr-slider-input',
+    elementClass: class extends HTMLElement {
+    },
+    react: React,
+    events: {
+        change: 'change',
+        input: 'input',
+    },
+});
+//# sourceMappingURL=react.js.map

package/dist/src/components/slider-input/slider-input.component.d.ts

@@ -0,0 +1,38 @@
+import { LitElement, PropertyValueMap } from 'lit';
+export declare class SliderInput extends LitElement {
+    disabled: boolean;
+    max: number;
+    min: number;
+    step: number;
+    value: number;
+    _actualMin: number;
+    _actualMax: number;
+    _input: HTMLInputElement | null;
+    _slider: HTMLInputElement | null;
+    _thumb: HTMLInputElement | null;
+    static styles: import("lit").CSSResult;
+    firstUpdated(): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    updated(changedProps: PropertyValueMap<any>): void;
+    /**
+     * Handles input events for immediate visual feedback during dragging.
+     */
+    _inputHandler(event: Event): void;
+    /**
+     * Handles change events when dragging is complete.
+     */
+    _changeHandler(event: Event): void;
+    /**
+     * Updates the slider's visual appearance immediately (no debounce for smooth dragging).
+     */
+    _updateSliderVisuals(): void;
+    /**
+     * Dispatches change events (debounced to avoid excessive event firing).
+     */
+    _dispatchChangeEvents: (this: any, ...args: any[]) => void;
+    /**
+     * Updates the slider's value width and thumb position (UI) and dispatches events.
+     */
+    _updateSlider(): void;
+}
+//# sourceMappingURL=slider-input.component.d.ts.map