@nuraly/lumenui 0.1.0 → 0.2.1

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

@@ -17,6 +17,16 @@ import { LitElement, html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import styles from './slider-input.style.js';
 import { debounce } from './utils/index.js';
+/**
+ * A range slider input component for selecting numeric values within a min/max range.
+ *
+ * @csspart wrapper - The outermost div wrapping the native input and custom visual track
+ * @csspart input - The native range input element (hidden, drives the value)
+ * @csspart track-container - The div containing the filled track, value indicator, and thumb
+ * @csspart track - The background track bar of the slider
+ * @csspart track-value - The filled portion of the track up to the current value
+ * @csspart thumb - The draggable thumb indicator showing the current position
+ */
 export class SliderInput extends LitElement {
     constructor() {
         super(...arguments);
@@ -43,9 +53,9 @@ export class SliderInput extends LitElement {
     firstUpdated() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.updateComplete;
-            this._input = this.shadowRoot.querySelector('input');
-            this._slider = this.shadowRoot.querySelector('.range-slider');
-            this._thumb = this.shadowRoot.querySelector('.range-thumb');
+            this._input = this.renderRoot.querySelector('input');
+            this._slider = this.renderRoot.querySelector('.range-slider');
+            this._thumb = this.renderRoot.querySelector('.range-thumb');
             this._actualMin = this.min;
             this._actualMax = this.max;
             if (this.step) {
@@ -66,8 +76,9 @@ export class SliderInput extends LitElement {
     }
     render() {
         return html `
-		  <div class="slider-wrapper">
+		  <div part="wrapper" class="slider-wrapper">
 	        <input
+	          part="input"
 	          max=${this.max}
 	          min=${this.min}
 	          step=${this.step}
@@ -77,10 +88,10 @@ export class SliderInput extends LitElement {
 	          @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 part="track-container" class="range-container">
+	          <div part="track" class="range-slider"></div>
+	          <div part="track-value" class="range-slider-value"></div>
+	          <div part="thumb" class="range-thumb"></div>
 	        </div>
 	      </div>`;
     }
@@ -157,6 +168,7 @@ export class SliderInput extends LitElement {
     }
 }
 SliderInput.styles = styles;
+SliderInput.useShadowDom = true;
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SliderInput.prototype, "disabled", void 0);

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

@@ -5,10 +5,10 @@ export default css `
 
   :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);
+    width: 100%;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    font-size: 14px;
+    font-weight: 400;
   }
 
   /* Host attribute selectors for configuration */
@@ -19,7 +19,7 @@ export default css `
 
   .slider-wrapper {
     position: relative;
-    padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;
+    padding: calc(20px / 2) 0;
   }
 
   .range-container {
@@ -29,48 +29,48 @@ export default css `
 
   .range-slider,
   .range-slider-value {
-    border-radius: var(--nuraly-slider-input-local-border-radius);
-    height: var(--nuraly-slider-input-local-track-height);
+    border-radius: 6px;
+    height: 8px;
     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);
+    top: calc((20px - 8px) / 2);
+    transition: all 150ms ease;
   }
 
   .range-slider {
-    background: var(--nuraly-slider-input-local-track-color);
+    background: #e5e7eb;
     width: 100%;
-    border: var(--nuraly-slider-input-local-border-width) solid var(--nuraly-slider-input-local-border-color);
+    border: 1px solid #d1d5db;
   }
 
   .range-slider-value {
-    background: var(--nuraly-slider-input-local-track-filled-color);
+    background: #3b82f6;
     width: var(--nr-slider-value-width, 0%);
-    z-index: calc(var(--nuraly-slider-input-local-z-index) + 1);
+    z-index: calc(1 + 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);
+    background: #ffffff;
+    border: 2px solid #3b82f6;
+    border-radius: 50%;
+    height: 20px;
+    width: 20px;
     position: absolute;
-    top: calc((var(--nuraly-slider-input-local-track-height) - var(--nuraly-slider-input-local-thumb-diameter)) / 2);
+    top: calc((8px - 20px) / 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);
+    z-index: calc(1 + 2);
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    transition: all 150ms ease;
   }
 
   .range-thumb:hover {
-    background: var(--nuraly-slider-input-local-thumb-hover-color);
-    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+    background: #eff6ff;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
   }
 
   .range-thumb:active {
-    background: var(--nuraly-slider-input-local-thumb-active-color);
-    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+    background: #dbeafe;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
   }
 
   input {
@@ -82,7 +82,7 @@ export default css `
     opacity: 0;
     width: 100%;
     cursor: pointer;
-    z-index: calc(var(--nuraly-slider-input-local-z-index) + 3);
+    z-index: calc(1 + 3);
     appearance: none;
     background: transparent;
     pointer-events: auto;
@@ -90,38 +90,38 @@ export default css `
 
   input::-webkit-slider-thumb {
     appearance: none;
-    width: var(--nuraly-slider-input-local-thumb-diameter);
-    height: var(--nuraly-slider-input-local-thumb-diameter);
+    width: 20px;
+    height: 20px;
     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);
+    width: 20px;
+    height: 20px;
     background: transparent;
     border: none;
     cursor: pointer;
   }
 
   input:focus-visible + .range-container .range-thumb {
-    box-shadow: var(--nuraly-slider-input-local-focus-shadow);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
   }
 
   /* 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);
+    background: #f5f5f5;
+    border-color: #e5e7eb;
   }
 
   :host([disabled]) .range-slider-value {
-    background: var(--nuraly-slider-input-local-disabled-color);
+    background: #d1d5db;
   }
 
   :host([disabled]) .range-thumb {
-    background: var(--nuraly-slider-input-local-disabled-thumb-color);
-    border-color: var(--nuraly-slider-input-local-disabled-border-color);
+    background: #e5e7eb;
+    border-color: #e5e7eb;
     cursor: not-allowed;
     box-shadow: none;
   }
@@ -132,40 +132,40 @@ export default css `
 
   /* 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);
+    --nuraly-slider-input-local-track-height: 6px;
+    --nuraly-slider-input-local-thumb-diameter: 16px;
   }
 
   :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);
+    --nuraly-slider-input-local-track-height: 10px;
+    --nuraly-slider-input-local-thumb-diameter: 24px;
   }
 
   /* Error state */
   :host([error]) .range-slider-value {
-    background: var(--nuraly-slider-input-local-error-color);
+    background: #ef4444;
   }
 
   :host([error]) .range-thumb {
-    border-color: var(--nuraly-slider-input-local-error-color);
+    border-color: #ef4444;
   }
 
   /* Warning state */
   :host([warning]) .range-slider-value {
-    background: var(--nuraly-slider-input-local-warning-color);
+    background: #f59e0b;
   }
 
   :host([warning]) .range-thumb {
-    border-color: var(--nuraly-slider-input-local-warning-color);
+    border-color: #f59e0b;
   }
 
   /* Success state */
   :host([success]) .range-slider-value {
-    background: var(--nuraly-slider-input-local-success-color);
+    background: #10b981;
   }
 
   :host([success]) .range-thumb {
-    border-color: var(--nuraly-slider-input-local-success-color);
+    border-color: #10b981;
   }
 `;
 //# sourceMappingURL=slider-input.style.js.map

package/dist/src/components/slider-input/slider-input.style.variables.js

@@ -2,58 +2,58 @@ 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);
+    --nuraly-slider-input-local-width: 100%;
+    --nuraly-slider-input-local-track-height: 8px;
+    --nuraly-slider-input-local-thumb-diameter: 20px;
+    --nuraly-slider-input-local-border-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);
+    --nuraly-slider-input-local-small-height: 6px;
+    --nuraly-slider-input-local-small-thumb-diameter: 16px;
+    --nuraly-slider-input-local-large-height: 10px;
+    --nuraly-slider-input-local-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));
+    --nuraly-slider-input-local-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+    --nuraly-slider-input-local-font-size: 14px;
+    --nuraly-slider-input-local-font-weight: 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%));
+    --nuraly-slider-input-local-border-radius: 6px;
+    --nuraly-slider-input-local-thumb-border-radius: 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));
+    --nuraly-slider-input-local-track-color: #e5e7eb;
+    --nuraly-slider-input-local-track-filled-color: #3b82f6;
+    --nuraly-slider-input-local-border-color: #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));
+    --nuraly-slider-input-local-thumb-color: #ffffff;
+    --nuraly-slider-input-local-thumb-border-color: #3b82f6;
+    --nuraly-slider-input-local-thumb-hover-color: #eff6ff;
+    --nuraly-slider-input-local-thumb-active-color: #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));
+    --nuraly-slider-input-local-disabled-track-color: #f5f5f5;
+    --nuraly-slider-input-local-disabled-color: #d1d5db;
+    --nuraly-slider-input-local-disabled-thumb-color: #e5e7eb;
+    --nuraly-slider-input-local-disabled-border-color: #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));
+    --nuraly-slider-input-local-error-color: #ef4444;
+    --nuraly-slider-input-local-warning-color: #f59e0b;
+    --nuraly-slider-input-local-success-color: #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)));
+    --nuraly-slider-input-local-thumb-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    --nuraly-slider-input-local-focus-shadow: 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));
+    --nuraly-slider-input-local-z-index: 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));
+    --nuraly-slider-input-local-transition-duration: 150ms;
+    --nuraly-slider-input-local-transition-timing: ease;
   }
 `;
 //# sourceMappingURL=slider-input.style.variables.js.map