@nuralyui/slider-input 0.0.3 → 0.0.4

package/slider-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-input.component.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './slider-input.style.js';\nimport { debounce } from './utils.js';\n\nexport class SliderInput extends LitElement {\n\t\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@property({ type: Number })\n\t_actualMin = 0;\n\n\t@property({ type: Number })\n\t_actualMax = 0;\n\n\n\t@state()\n\t_input!: HTMLInputElement | null;\n\t@state()\n\t_slider! : HTMLInputElement | null;\n\t@state()\n\t_thumb! : HTMLInputElement | null;\n\n\tstatic override styles = styles;\n\n\n\toverride async firstUpdated() {\n\t\tthis._input = this.shadowRoot!.querySelector('input');\n\t\tthis._slider = this.shadowRoot!.querySelector('.range-slider');\n\t\tthis._thumb = this.shadowRoot!.querySelector('.range-thumb');\n\t\tthis._actualMin = this.min;\n\t\tthis._actualMax = this.max;\n\n\t\tif (this.step) {\n\t\t\tconst minRemainder = this.min % this.step;\n\t\t\tconst maxRemainder = this.max % this.step;\n\t\t\tif (minRemainder !== 0) {\n\t\t\t\tthis.min = this.min - minRemainder;\n\t\t\t}\n\t\t\tif (maxRemainder !== 0) {\n\t\t\t\tthis.max = this.max + this.step - maxRemainder;\n\t\t\t}\n\t\t}\n\t}\n\n\toverride render() {\n\t\treturn html`\n          <div class=\"range-container\">\n\t        <div class=\"range-slider\"></div>\n\t        <div class=\"range-slider-value\"></div>\n\t        <div class=\"range-thumb\"></div>\n\t        <input\n\t          max=${this.max}\n\t          min=${this.min}\n\t          step=${this.step}\n\t          type=\"range\"\n\t          value=${this.value}\n\t          ?disabled=${this.disabled}\n\t          @input=${this._changeHandler}\n\t        />\n\t      </div>`;\n\t}\n\n\n\toverride updated(changedProps: PropertyValueMap<any>) {\n\t\tif (changedProps.has('value')) {\n\t\t\tthis._updateSlider();\n\t\t}\n\t}\n\n\t/**\n\t * Sets the slider value.\n\t */\n\t_changeHandler() {\n\t\tconst { value } : any = this._input;\n\t\tthis.value = value > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: value < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: value;\n\t}\n\n\t/**\n\t * Updates the slider's value width and thumb position (UI).\n\t * @event change\n\t */\n\t_updateSlider= debounce(()=> {\n\t\tconst min = this.min < this._actualMin ? this._actualMin : this.min;\n\t\tconst max = this.max > this._actualMax ? this._actualMax : this.max;\n\t\tconst percentage = (this.value - min) / (max - min);\n\t\tconst thumbWidth = this._thumb!.offsetWidth;\n\t\tconst sliderWidth = this._slider!.offsetWidth;\n\t\tconst sliderValueWidth = `${percentage * 100}%`;\n\t\tconst thumbOffset = `${(sliderWidth - thumbWidth) * percentage}px`;\n\n\t\tthis.style.setProperty('--hy-slider-value-width', sliderValueWidth);\n\t\tthis.style.setProperty('--hy-slider-thumb-offset', thumbOffset);\n\n\t\t// Dispatch the change event for range-slider. (For event handlers.)\n\t\tthis.dispatchEvent(new Event('change'));\n\t\tthis.dispatchEvent(new CustomEvent('changed' , {\n\t\t\tdetail: {\n\t\t\t\tvalue: Number(this.value)\n\t\t\t}\n\t\t}));\n\t\tthis.requestUpdate()\n\t})\n}\ncustomElements.define('hy-slider-input', SliderInput);\n"]}
+{"version":3,"file":"slider-input.component.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValueMap } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport styles from './slider-input.style.js';\nimport { debounce } from './utils/index.js';\n\nexport class SliderInput extends LitElement {\n\t\n\t@property({ type: Boolean, reflect: true })\n\tdisabled = false;\n\n\t@property({ type: Number })\n\tmax = 100;\n\n\t@property({ type: Number })\n\tmin = 0;\n\n\t@property({ type: Number })\n\tstep = 1;\n\n\t@property({ type: Number })\n\tvalue = 0;\n\n\t@state()\n\t_actualMin = 0;\n\n\t@state()\n\t_actualMax = 0;\n\n\n\t@state()\n\t_input!: HTMLInputElement | null;\n\t@state()\n\t_slider! : HTMLInputElement | null;\n\t@state()\n\t_thumb! : HTMLInputElement | null;\n\n\tstatic override styles = styles;\n\n\n\toverride async firstUpdated() {\n\t\tawait this.updateComplete;\n\t\t\n\t\tthis._input = this.shadowRoot!.querySelector('input');\n\t\tthis._slider = this.shadowRoot!.querySelector('.range-slider');\n\t\tthis._thumb = this.shadowRoot!.querySelector('.range-thumb');\n\t\tthis._actualMin = this.min;\n\t\tthis._actualMax = this.max;\n\n\t\tif (this.step) {\n\t\t\tconst minRemainder = this.min % this.step;\n\t\t\tconst maxRemainder = this.max % this.step;\n\t\t\tif (minRemainder !== 0) {\n\t\t\t\tthis.min = this.min - minRemainder;\n\t\t\t}\n\t\t\tif (maxRemainder !== 0) {\n\t\t\t\tthis.max = this.max + this.step - maxRemainder;\n\t\t\t}\n\t\t}\n\n\t\t// Initial visual update\n\t\trequestAnimationFrame(() => {\n\t\t\tthis._updateSliderVisuals();\n\t\t});\n\t}\n\n\toverride render() {\n\t\treturn html`\n\t\t  <div class=\"slider-wrapper\">\n\t        <input\n\t          max=${this.max}\n\t          min=${this.min}\n\t          step=${this.step}\n\t          type=\"range\"\n\t          value=${this.value}\n\t          ?disabled=${this.disabled}\n\t          @input=${this._inputHandler}\n\t          @change=${this._changeHandler}\n\t        />\n            <div class=\"range-container\">\n\t          <div class=\"range-slider\"></div>\n\t          <div class=\"range-slider-value\"></div>\n\t          <div class=\"range-thumb\"></div>\n\t        </div>\n\t      </div>`;\n\t}\n\n\n\toverride updated(changedProps: PropertyValueMap<any>) {\n\t\tif (changedProps.has('value') || changedProps.has('min') || changedProps.has('max')) {\n\t\t\t// Use requestAnimationFrame to ensure DOM is updated before calculating positions\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tthis._updateSliderVisuals();\n\t\t\t});\n\t\t}\n\t}\n\n\t/**\n\t * Handles input events for immediate visual feedback during dragging.\n\t */\n\t_inputHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Update visuals immediately for smooth dragging\n\t\tthis._updateSliderVisuals();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Handles change events when dragging is complete.\n\t */\n\t_changeHandler(event: Event) {\n\t\tevent.stopPropagation();\n\t\tconst input = event.target as HTMLInputElement;\n\t\tconst newValue = Number(input.value);\n\t\t\n\t\t// Clamp value to actual min/max bounds\n\t\tthis.value = newValue > this._actualMax\n\t\t\t? this._actualMax\n\t\t\t: newValue < this._actualMin\n\t\t\t\t? this._actualMin\n\t\t\t\t: newValue;\n\t\t\n\t\t// Dispatch events when dragging is complete\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n\n\t/**\n\t * Updates the slider's visual appearance immediately (no debounce for smooth dragging).\n\t */\n\t_updateSliderVisuals() {\n\t\tif (!this._thumb || !this._slider) return;\n\t\t\n\t\tconst min = this.min < this._actualMin ? this._actualMin : this.min;\n\t\tconst max = this.max > this._actualMax ? this._actualMax : this.max;\n\t\tconst range = max - min;\n\t\t\n\t\tif (range === 0) return; // Avoid division by zero\n\t\t\n\t\tconst percentage = Math.max(0, Math.min(1, (this.value - min) / range));\n\t\tconst thumbWidth = this._thumb.offsetWidth || 20; // Fallback if not measured yet\n\t\tconst sliderWidth = this._slider.offsetWidth || 200; // Fallback if not measured yet\n\t\t\n\t\tconst sliderValueWidth = `${percentage * 100}%`;\n\t\t// Calculate thumb position so it stays within track bounds\n\t\tconst maxThumbOffset = sliderWidth - thumbWidth;\n\t\tconst thumbOffset = `${Math.max(0, Math.min(maxThumbOffset, maxThumbOffset * percentage))}px`;\n\n\t\tthis.style.setProperty('--nr-slider-value-width', sliderValueWidth);\n\t\tthis.style.setProperty('--nr-slider-thumb-offset', thumbOffset);\n\t}\n\n\t/**\n\t * Dispatches change events (debounced to avoid excessive event firing).\n\t */\n\t_dispatchChangeEvents = debounce(() => {\n\t\t// Dispatch the change event for range-slider. (For event handlers.)\n\t\tthis.dispatchEvent(new Event('change'));\n\t\tthis.dispatchEvent(new CustomEvent('changed' , {\n\t\t\tdetail: {\n\t\t\t\tvalue: Number(this.value)\n\t\t\t}\n\t\t}));\n\t}, 50); // Reduced debounce time for more responsive events\n\n\t/**\n\t * Updates the slider's value width and thumb position (UI) and dispatches events.\n\t */\n\t_updateSlider() {\n\t\tthis._updateSliderVisuals();\n\t\tthis._dispatchChangeEvents();\n\t\tthis.requestUpdate();\n\t}\n}\ncustomElements.define('nr-slider-input', SliderInput);\n"]}

package/slider-input.style.js

@@ -1,77 +1,171 @@
 import { css } from "lit";
+import { styleVariables } from './slider-input.style.variables.js';
 export default css `
-:host {
-      --hy-slider-background: #7c7c7c;
-      --hy-slider-height: 2px;
-      --hy-slider-radius: var(--hy-slider-height);
-      --hy-slider-value-color: #00ccff;
-      --hy-slider-value-width: 0;
-      --hy-slider-thumb-color: #e0e0e0;
-      --hy-slider-thumb-diameter: 15px;
-      --hy-slider-thumb-offset: 0;
-
-      display: inline-block;
-    }
-
-    .range-container {
-      position: relative;
-      width: 100%;
-    }
-
-    .range-slider,
-    .range-slider-value {
-      border-radius: var(--hy-slider-radius);
-      height: var(--hy-slider-height);
-      max-height: var(--hy-slider-thumb-diameter);
-      position: absolute;
-      top: calc((var(--hy-slider-thumb-diameter) - min(var(--hy-slider-height), var(--hy-slider-thumb-diameter))) / 2);
-    }
-
-    .range-slider {
-      background: var(--hy-slider-background);
-      width: 100%;
-    }
-
-    .range-slider-value {
-      background: var(--hy-slider-value-color);
-      width: var(--hy-slider-value-width);
-    }
-
-    .range-thumb {
-      background: var(--hy-slider-thumb-color);
-      border-radius: 50%;
-      height: var(--hy-slider-thumb-diameter);
-      position: absolute;
-      transform: translateX(var(--hy-slider-thumb-offset));
-      width: var(--hy-slider-thumb-diameter);
-    }
-
-    input {
-      display: inline-block;
-      height: var(--hy-slider-thumb-diameter);
-      margin: 0;
-      opacity: 0;
-      position: relative;
-      width: 100%;
-    }
-
-    :host([disabled]) {
-      --hy-slider-background: #d9d9d9;
-      --hy-slider-value-color: #a8a8a8;
-      --hy-slider-thumb-color: #f0f0f0;
-    }
-
-     @media (prefers-color-scheme: dark) {
-        body {
-           --hy-slider-background: #767676;
-	      --hy-slider-height: 2px;
-	      --hy-slider-radius: var(--hy-slider-height);
-	      --hy-slider-value-color: #ff6200;
-	      --hy-slider-value-width: 0;
-	      --hy-slider-thumb-color: #adadad;
-	      --hy-slider-thumb-diameter: 15px;
-	      --hy-slider-thumb-offset: 0;
-        }
-      }
+  ${styleVariables}
+
+  :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);
+  }
 `;
 //# sourceMappingURL=slider-input.style.js.map

package/slider-input.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-input.style.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0EjB,CAAC","sourcesContent":["import { css } from \"lit\";\n\nexport default css`\n:host {\n      --hy-slider-background: #7c7c7c;\n      --hy-slider-height: 2px;\n      --hy-slider-radius: var(--hy-slider-height);\n      --hy-slider-value-color: #00ccff;\n      --hy-slider-value-width: 0;\n      --hy-slider-thumb-color: #e0e0e0;\n      --hy-slider-thumb-diameter: 15px;\n      --hy-slider-thumb-offset: 0;\n\n      display: inline-block;\n    }\n\n    .range-container {\n      position: relative;\n      width: 100%;\n    }\n\n    .range-slider,\n    .range-slider-value {\n      border-radius: var(--hy-slider-radius);\n      height: var(--hy-slider-height);\n      max-height: var(--hy-slider-thumb-diameter);\n      position: absolute;\n      top: calc((var(--hy-slider-thumb-diameter) - min(var(--hy-slider-height), var(--hy-slider-thumb-diameter))) / 2);\n    }\n\n    .range-slider {\n      background: var(--hy-slider-background);\n      width: 100%;\n    }\n\n    .range-slider-value {\n      background: var(--hy-slider-value-color);\n      width: var(--hy-slider-value-width);\n    }\n\n    .range-thumb {\n      background: var(--hy-slider-thumb-color);\n      border-radius: 50%;\n      height: var(--hy-slider-thumb-diameter);\n      position: absolute;\n      transform: translateX(var(--hy-slider-thumb-offset));\n      width: var(--hy-slider-thumb-diameter);\n    }\n\n    input {\n      display: inline-block;\n      height: var(--hy-slider-thumb-diameter);\n      margin: 0;\n      opacity: 0;\n      position: relative;\n      width: 100%;\n    }\n\n    :host([disabled]) {\n      --hy-slider-background: #d9d9d9;\n      --hy-slider-value-color: #a8a8a8;\n      --hy-slider-thumb-color: #f0f0f0;\n    }\n\n     @media (prefers-color-scheme: dark) {\n        body {\n           --hy-slider-background: #767676;\n\t      --hy-slider-height: 2px;\n\t      --hy-slider-radius: var(--hy-slider-height);\n\t      --hy-slider-value-color: #ff6200;\n\t      --hy-slider-value-width: 0;\n\t      --hy-slider-thumb-color: #adadad;\n\t      --hy-slider-thumb-diameter: 15px;\n\t      --hy-slider-thumb-offset: 0;\n        }\n      }\n`;"]}
+{"version":3,"file":"slider-input.style.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAEnE,eAAe,GAAG,CAAA;IACd,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsKjB,CAAC","sourcesContent":["import { css } from \"lit\";\nimport { styleVariables } from './slider-input.style.variables.js';\n\nexport default css`\n  ${styleVariables}\n\n  :host {\n    display: inline-block;\n    width: var(--nuraly-slider-input-local-width);\n    font-family: var(--nuraly-slider-input-local-font-family);\n    font-size: var(--nuraly-slider-input-local-font-size);\n    font-weight: var(--nuraly-slider-input-local-font-weight);\n  }\n\n  /* Host attribute selectors for configuration */\n  :host([disabled]) {\n    opacity: 0.6;\n    pointer-events: none;\n  }\n\n  .slider-wrapper {\n    position: relative;\n    padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;\n  }\n\n  .range-container {\n    position: relative;\n    width: 100%;\n  }\n\n  .range-slider,\n  .range-slider-value {\n    border-radius: var(--nuraly-slider-input-local-border-radius);\n    height: var(--nuraly-slider-input-local-track-height);\n    position: absolute;\n    top: calc((var(--nuraly-slider-input-local-thumb-diameter) - var(--nuraly-slider-input-local-track-height)) / 2);\n    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);\n  }\n\n  .range-slider {\n    background: var(--nuraly-slider-input-local-track-color);\n    width: 100%;\n    border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);\n  }\n\n  .range-slider-value {\n    background: var(--nuraly-slider-input-local-track-filled-color);\n    width: var(--nr-slider-value-width, 0%);\n    z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);\n  }\n\n  .range-thumb {\n    background: var(--nuraly-slider-input-local-thumb-color);\n    border: 2px solid var(--nuraly-slider-input-local-thumb-border-color);\n    border-radius: var(--nuraly-slider-input-local-thumb-border-radius);\n    height: var(--nuraly-slider-input-local-thumb-diameter);\n    width: var(--nuraly-slider-input-local-thumb-diameter);\n    position: absolute;\n    top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);\n    left: var(--nr-slider-thumb-offset, 0px);\n    cursor: pointer;\n    z-index: calc(var(--nuraly-slider-input-local-z-index) + 2);\n    box-shadow: var(--nuraly-slider-input-local-thumb-shadow);\n    transition: all var(--nuraly-slider-input-local-transition-duration) var(--nuraly-slider-input-local-transition-timing);\n  }\n\n  .range-thumb:hover {\n    background: var(--nuraly-slider-input-local-thumb-hover-color);\n    box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n  }\n\n  .range-thumb:active {\n    background: var(--nuraly-slider-input-local-thumb-active-color);\n    box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n  }\n\n  input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    width: 100%;\n    cursor: pointer;\n    z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);\n    appearance: none;\n    background: transparent;\n    pointer-events: auto;\n  }\n\n  input::-webkit-slider-thumb {\n    appearance: none;\n    width: var(--nuraly-slider-input-local-thumb-diameter);\n    height: var(--nuraly-slider-input-local-thumb-diameter);\n    background: transparent;\n    cursor: pointer;\n  }\n\n  input::-moz-range-thumb {\n    appearance: none;\n    width: var(--nuraly-slider-input-local-thumb-diameter);\n    height: var(--nuraly-slider-input-local-thumb-diameter);\n    background: transparent;\n    border: none;\n    cursor: pointer;\n  }\n\n  input:focus-visible + .range-container .range-thumb {\n    box-shadow: var(--nuraly-slider-input-local-focus-shadow);\n  }\n\n  /* Disabled state styling */\n  :host([disabled]) .range-slider {\n    background: var(--nuraly-slider-input-local-disabled-track-color);\n    border-color: var(--nuraly-slider-input-local-disabled-border-color);\n  }\n\n  :host([disabled]) .range-slider-value {\n    background: var(--nuraly-slider-input-local-disabled-color);\n  }\n\n  :host([disabled]) .range-thumb {\n    background: var(--nuraly-slider-input-local-disabled-thumb-color);\n    border-color: var(--nuraly-slider-input-local-disabled-border-color);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  :host([disabled]) input {\n    cursor: not-allowed;\n  }\n\n  /* Size variants */\n  :host([size=\"small\"]) {\n    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-small-height);\n    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-small-thumb-diameter);\n  }\n\n  :host([size=\"large\"]) {\n    --nuraly-slider-input-local-track-height: var(--nuraly-slider-input-local-large-height);\n    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-slider-input-local-large-thumb-diameter);\n  }\n\n  /* Error state */\n  :host([error]) .range-slider-value {\n    background: var(--nuraly-slider-input-local-error-color);\n  }\n\n  :host([error]) .range-thumb {\n    border-color: var(--nuraly-slider-input-local-error-color);\n  }\n\n  /* Warning state */\n  :host([warning]) .range-slider-value {\n    background: var(--nuraly-slider-input-local-warning-color);\n  }\n\n  :host([warning]) .range-thumb {\n    border-color: var(--nuraly-slider-input-local-warning-color);\n  }\n\n  /* Success state */\n  :host([success]) .range-slider-value {\n    background: var(--nuraly-slider-input-local-success-color);\n  }\n\n  :host([success]) .range-thumb {\n    border-color: var(--nuraly-slider-input-local-success-color);\n  }\n`;"]}

package/slider-input.style.variables.d.ts

@@ -0,0 +1,2 @@
+export declare const styleVariables: import("lit").CSSResult;
+//# sourceMappingURL=slider-input.style.variables.d.ts.map

package/slider-input.style.variables.js

@@ -0,0 +1,59 @@
+import { css } from 'lit';
+export const styleVariables = css `
+  :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));
+  }
+`;
+//# sourceMappingURL=slider-input.style.variables.js.map

package/slider-input.style.variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-input.style.variables.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.style.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDhC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styleVariables = css`\n  :host {\n    /* Component dimensions */\n    --nuraly-slider-input-local-width: var(--nuraly-size-slider-input-width, 100%);\n    --nuraly-slider-input-local-track-height: var(--nuraly-size-slider-input-track-height, 8px);\n    --nuraly-slider-input-local-thumb-diameter: var(--nuraly-size-slider-input-thumb-diameter, 20px);\n    --nuraly-slider-input-local-border-width: var(--nuraly-border-slider-input-width, 1px);\n\n    /* Size variants */\n    --nuraly-slider-input-local-small-height: var(--nuraly-size-slider-input-small-height, 6px);\n    --nuraly-slider-input-local-small-thumb-diameter: var(--nuraly-size-slider-input-small-thumb-diameter, 16px);\n    --nuraly-slider-input-local-large-height: var(--nuraly-size-slider-input-large-height, 10px);\n    --nuraly-slider-input-local-large-thumb-diameter: var(--nuraly-size-slider-input-large-thumb-diameter, 24px);\n\n    /* Typography */\n    --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));\n    --nuraly-slider-input-local-font-size: var(--nuraly-typograpnr-slider-input-font-size, var(--nuraly-font-size-base, 14px));\n    --nuraly-slider-input-local-font-weight: var(--nuraly-typograpnr-slider-input-font-weight, var(--nuraly-font-weight-normal, 400));\n\n    /* Border radius */\n    --nuraly-slider-input-local-border-radius: var(--nuraly-border-slider-input-radius, var(--nuraly-border-radius-base, 6px));\n    --nuraly-slider-input-local-thumb-border-radius: var(--nuraly-border-slider-input-thumb-radius, var(--nuraly-border-radius-round, 50%));\n\n    /* Colors - Track */\n    --nuraly-slider-input-local-track-color: var(--nuraly-color-slider-input-track, var(--nuraly-color-neutral-200, #e5e7eb));\n    --nuraly-slider-input-local-track-filled-color: var(--nuraly-color-slider-input-track-filled, var(--nuraly-color-primary-500, #3b82f6));\n    --nuraly-slider-input-local-border-color: var(--nuraly-color-slider-input-border, var(--nuraly-color-neutral-300, #d1d5db));\n\n    /* Colors - Thumb */\n    --nuraly-slider-input-local-thumb-color: var(--nuraly-color-slider-input-thumb, var(--nuraly-color-white, #ffffff));\n    --nuraly-slider-input-local-thumb-border-color: var(--nuraly-color-slider-input-thumb-border, var(--nuraly-color-primary-500, #3b82f6));\n    --nuraly-slider-input-local-thumb-hover-color: var(--nuraly-color-slider-input-thumb-hover, var(--nuraly-color-primary-50, #eff6ff));\n    --nuraly-slider-input-local-thumb-active-color: var(--nuraly-color-slider-input-thumb-active, var(--nuraly-color-primary-100, #dbeafe));\n\n    /* Colors - Disabled states */\n    --nuraly-slider-input-local-disabled-track-color: var(--nuraly-color-slider-input-disabled-track, var(--nuraly-color-neutral-100, #f5f5f5));\n    --nuraly-slider-input-local-disabled-color: var(--nuraly-color-slider-input-disabled, var(--nuraly-color-neutral-300, #d1d5db));\n    --nuraly-slider-input-local-disabled-thumb-color: var(--nuraly-color-slider-input-disabled-thumb, var(--nuraly-color-neutral-200, #e5e7eb));\n    --nuraly-slider-input-local-disabled-border-color: var(--nuraly-color-slider-input-disabled-border, var(--nuraly-color-neutral-200, #e5e7eb));\n\n    /* Colors - Status states */\n    --nuraly-slider-input-local-error-color: var(--nuraly-color-slider-input-error, var(--nuraly-color-error-500, #ef4444));\n    --nuraly-slider-input-local-warning-color: var(--nuraly-color-slider-input-warning, var(--nuraly-color-warning-500, #f59e0b));\n    --nuraly-slider-input-local-success-color: var(--nuraly-color-slider-input-success, var(--nuraly-color-success-500, #10b981));\n\n    /* Shadows */\n    --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)));\n    --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)));\n\n    /* Elevation */\n    --nuraly-slider-input-local-z-index: var(--nuraly-elevation-slider-input-z-index, var(--nuraly-z-index-base, 1));\n\n    /* Transitions */\n    --nuraly-slider-input-local-transition-duration: var(--nuraly-transition-slider-input-duration, var(--nuraly-transition-duration-base, 150ms));\n    --nuraly-slider-input-local-transition-timing: var(--nuraly-transition-slider-input-timing, var(--nuraly-transition-timing-ease, ease));\n  }\n`;"]}

package/slider-input.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Slider Input Types
+ * Type definitions for the slider input component
+ */
+export interface SliderInputChangeEvent extends CustomEvent {
+    detail: {
+        value: number;
+        min: number;
+        max: number;
+    };
+}
+export interface SliderInputOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    disabled?: boolean;
+}
+export declare type SliderInputSize = 'small' | 'medium' | 'large';
+export declare type SliderInputVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+//# sourceMappingURL=slider-input.types.d.ts.map

package/slider-input.types.js

@@ -0,0 +1,6 @@
+/**
+ * Slider Input Types
+ * Type definitions for the slider input component
+ */
+export {};
+//# sourceMappingURL=slider-input.types.js.map

package/slider-input.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider-input.types.js","sourceRoot":"","sources":["../../../src/components/slider-input/slider-input.types.ts"],"names":[],"mappings":"AAAA;;;GAGG","sourcesContent":["/**\n * Slider Input Types\n * Type definitions for the slider input component\n */\n\nexport interface SliderInputChangeEvent extends CustomEvent {\n  detail: {\n    value: number;\n    min: number;\n    max: number;\n  };\n}\n\nexport interface SliderInputOptions {\n  min?: number;\n  max?: number;\n  step?: number;\n  value?: number;\n  disabled?: boolean;\n}\n\nexport type SliderInputSize = 'small' | 'medium' | 'large';\n\nexport type SliderInputVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';"]}

package/demo/slider-input-demo.d.ts

@@ -1,21 +0,0 @@
-import { LitElement } from 'lit';
-export declare class SliderInputDemi extends LitElement {
-    static styles: import("lit").CSSResult[];
-    _sliderChangeViaTextboxValue: number;
-    _sliderDisabled: boolean;
-    _sliderMinMaxNotMultipleOfStepValue: number;
-    _sliderWithChangeHandlerValue: number;
-    min: number;
-    max: number;
-    /**
-     * Sets the slider's disabled prop.
-     */
-    _toggleDisabled(): void;
-    /**
-     * Updates the slider prop's value.
-     * @param {EventObject} e The event object.
-     */
-    _updateValue(e: any): void;
-    render(): import("lit").TemplateResult<1>;
-}
-//# sourceMappingURL=slider-input-demo.d.ts.map

package/demo/slider-input-demo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"slider-input-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/slider-input/demo/slider-input-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,qBACa,eAAgB,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA6DpB;IAC4B,4BAA4B,SAAM;IACrC,eAAe,UAAS;IACzB,mCAAmC,SAAS;IAC5C,6BAA6B,SAAK;IAClC,GAAG,SAAK;IACR,GAAG,SAAK;IAGpC;;OAEG;IACH,eAAe;IAIf;;;OAGG;IACF,YAAY,CAAC,CAAC,EAAE,GAAG;IAWT,MAAM;CAgGlB"}