@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/skeleton/skeleton.style.js

@@ -1,8 +1,6 @@
 import { css } from 'lit';
 export const styles = css `
-  :host {
-    display: block;
-  }
+  :host { display: block; }
 
   .skeleton {
     display: flex;
@@ -16,51 +14,30 @@ export const styles = css `
     gap: 16px;
   }
 
-  .skeleton-content {
-    flex: 1;
-  }
+  .skeleton-content { flex: 1; }
 
   /* Avatar */
   .skeleton-avatar {
     flex-shrink: 0;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
-    border-radius: 4px;
-  }
-
-  .skeleton-avatar--circle {
-    border-radius: 50%;
-  }
-
-  .skeleton-avatar--square {
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-avatar--small {
-    width: 32px;
-    height: 32px;
-  }
-
-  .skeleton-avatar--default {
-    width: 40px;
-    height: 40px;
-  }
-
-  .skeleton-avatar--large {
-    width: 48px;
-    height: 48px;
-  }
+  .skeleton-avatar--circle { border-radius: 50%; }
+  .skeleton-avatar--square { border-radius: 4px; }
+  .skeleton-avatar--small { width: 32px; height: 32px; }
+  .skeleton-avatar--default { width: 40px; height: 40px; }
+  .skeleton-avatar--large { width: 48px; height: 48px; }
 
   /* Title */
   .skeleton-title {
     height: 16px;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
     margin-bottom: 12px;
   }
 
-  .skeleton-title--round {
-    border-radius: 8px;
-  }
+  .skeleton-title--round { border-radius: 8px; }
 
   /* Paragraph */
   .skeleton-paragraph {
@@ -71,82 +48,45 @@ export const styles = css `
 
   .skeleton-paragraph-line {
     height: 16px;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-paragraph-line--round {
-    border-radius: 8px;
-  }
+  .skeleton-paragraph-line--round { border-radius: 8px; }
 
   /* Button */
   .skeleton-button {
     display: inline-block;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-button--block {
-    display: block;
-    width: 100%;
-  }
-
-  .skeleton-button--circle {
-    border-radius: 50%;
-  }
-
-  .skeleton-button--round {
-    border-radius: 16px;
-  }
-
-  .skeleton-button--square {
-    border-radius: 4px;
-  }
-
-  .skeleton-button--small {
-    width: 64px;
-    height: 24px;
-  }
-
-  .skeleton-button--default {
-    width: 80px;
-    height: 32px;
-  }
-
-  .skeleton-button--large {
-    width: 96px;
-    height: 40px;
-  }
+  .skeleton-button--block { display: block; width: 100%; }
+  .skeleton-button--circle { border-radius: 50%; }
+  .skeleton-button--round { border-radius: 16px; }
+  .skeleton-button--square { border-radius: 4px; }
+  .skeleton-button--small { width: 64px; height: 24px; }
+  .skeleton-button--default { width: 80px; height: 32px; }
+  .skeleton-button--large { width: 96px; height: 40px; }
 
   /* Input */
   .skeleton-input {
     display: block;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
   }
 
-  .skeleton-input--small {
-    height: 24px;
-  }
-
-  .skeleton-input--default {
-    height: 32px;
-  }
-
-  .skeleton-input--large {
-    height: 40px;
-  }
-
-  .skeleton-input--block {
-    width: 100%;
-  }
+  .skeleton-input--small { height: 24px; }
+  .skeleton-input--default { height: 32px; }
+  .skeleton-input--large { height: 40px; }
+  .skeleton-input--block { width: 100%; }
 
   /* Image */
   .skeleton-image {
     display: flex;
     align-items: center;
     justify-content: center;
-    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    background: rgba(0, 0, 0, 0.06);
     border-radius: 4px;
     width: 100%;
     height: 200px;
@@ -154,17 +94,13 @@ export const styles = css `
 
   .skeleton-image-icon {
     font-size: 48px;
-    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));
+    color: rgba(0, 0, 0, 0.15);
   }
 
   /* Active animation */
   @keyframes skeleton-loading {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
+    0% { background-position: 100% 50%; }
+    100% { background-position: 0 50%; }
   }
 
   .skeleton--active .skeleton-avatar,
@@ -175,50 +111,15 @@ export const styles = css `
   .skeleton--active .skeleton-image {
     background: linear-gradient(
       90deg,
-      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,
-      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,
-      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%
+      rgba(0, 0, 0, 0.06) 25%,
+      rgba(0, 0, 0, 0.15) 37%,
+      rgba(0, 0, 0, 0.06) 63%
     );
     background-size: 400% 100%;
     animation: skeleton-loading 1.4s ease infinite;
   }
 
-  /* Dark theme support */
-  :host([theme='carbon-dark']) .skeleton-avatar,
-  :host([theme='carbon-dark']) .skeleton-title,
-  :host([theme='carbon-dark']) .skeleton-paragraph-line,
-  :host([theme='carbon-dark']) .skeleton-button,
-  :host([theme='carbon-dark']) .skeleton-input,
-  :host([theme='carbon-dark']) .skeleton-image {
-    background: rgba(255, 255, 255, 0.08);
-  }
-
-  :host([theme='carbon-dark']) .skeleton-image-icon {
-    color: rgba(255, 255, 255, 0.15);
-  }
-
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,
-  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {
-    background: linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.08) 25%,
-      rgba(255, 255, 255, 0.15) 37%,
-      rgba(255, 255, 255, 0.08) 63%
-    );
-    background-size: 400% 100%;
-  }
-
-  /* Content wrapper for loading state */
-  .skeleton-wrapper {
-    display: block;
-  }
-
-  .skeleton-wrapper--hidden {
-    display: none;
-  }
+  .skeleton-wrapper { display: block; }
+  .skeleton-wrapper--hidden { display: none; }
 `;
 //# sourceMappingURL=skeleton.style.js.map

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

@@ -1,68 +1,68 @@
-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`
+import{css as t,LitElement as i,html as r}from"lit";import{property as e,state as a}from"lit/decorators.js";var s=t`
+  ${t`
   :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;
   }
 `}
 
   :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 */
@@ -73,7 +73,7 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
 
   .slider-wrapper {
     position: relative;
-    padding: calc(var(--nuraly-slider-input-local-thumb-diameter) / 2) 0;
+    padding: calc(20px / 2) 0;
   }
 
   .range-container {
@@ -83,48 +83,48 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
 
   .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 {
@@ -136,7 +136,7 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
     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;
@@ -144,38 +144,38 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
 
   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;
   }
@@ -186,44 +186,45 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
 
   /* 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;
   }
-`;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">
+`;var l=function(t,i,r,e){for(var a,s=arguments.length,l=s<3?i:null===e?e=Object.getOwnPropertyDescriptor(i,r):e,n=t.length-1;n>=0;n--)(a=t[n])&&(l=(s<3?a(l):s>3?a(i,r,l):a(i,r))||l);return s>3&&l&&Object.defineProperty(i,r,l),l},n=function(t,i,r,e){return new(r||(r=Promise))(function(a,s){function l(t){try{o(e.next(t))}catch(t){s(t)}}function n(t){try{o(e.throw(t))}catch(t){s(t)}}function o(t){var i;t.done?a(t.value):(i=t.value,i instanceof r?i:new r(function(t){t(i)})).then(l,n)}o((e=e.apply(t,i||[])).next())})};class o extends i{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(t,i=100){let r;return function(...e){clearTimeout(r),r=setTimeout(()=>t.apply(this,e),i)}}(()=>{this.dispatchEvent(new Event("change")),this.dispatchEvent(new CustomEvent("changed",{detail:{value:Number(this.value)}}))},50)}firstUpdated(){return n(this,void 0,void 0,function*(){if(yield this.updateComplete,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,this.step){const t=this.min%this.step,i=this.max%this.step;0!==t&&(this.min=this.min-t),0!==i&&(this.max=this.max+this.step-i)}requestAnimationFrame(()=>{this._updateSliderVisuals()})})}render(){return r`
+		  <div part="wrapper" class="slider-wrapper">
 	        <input
+	          part="input"
 	          max=${this.max}
 	          min=${this.min}
 	          step=${this.step}
@@ -233,9 +234,9 @@ import{css as r,LitElement as l,html as a}from"lit";import{property as i,state a
 	          @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>`}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};
+	      </div>`}updated(t){(t.has("value")||t.has("min")||t.has("max"))&&requestAnimationFrame(()=>{this._updateSliderVisuals()})}_inputHandler(t){t.stopPropagation();const i=t.target,r=Number(i.value);this.value=r>this._actualMax?this._actualMax:r<this._actualMin?this._actualMin:r,this._updateSliderVisuals(),this.requestUpdate()}_changeHandler(t){t.stopPropagation();const i=t.target,r=Number(i.value);this.value=r>this._actualMax?this._actualMax:r<this._actualMin?this._actualMin:r,this._dispatchChangeEvents(),this.requestUpdate()}_updateSliderVisuals(){if(!this._thumb||!this._slider)return;const t=this.min<this._actualMin?this._actualMin:this.min,i=(this.max>this._actualMax?this._actualMax:this.max)-t;if(0===i)return;const r=Math.max(0,Math.min(1,(this.value-t)/i)),e=this._thumb.offsetWidth||20,a=100*r+"%",s=(this._slider.offsetWidth||200)-e,l=`${Math.max(0,Math.min(s,s*r))}px`;this.style.setProperty("--nr-slider-value-width",a),this.style.setProperty("--nr-slider-thumb-offset",l)}_updateSlider(){this._updateSliderVisuals(),this._dispatchChangeEvents(),this.requestUpdate()}}o.styles=s,o.useShadowDom=!0,l([e({type:Boolean,reflect:!0})],o.prototype,"disabled",void 0),l([e({type:Number})],o.prototype,"max",void 0),l([e({type:Number})],o.prototype,"min",void 0),l([e({type:Number})],o.prototype,"step",void 0),l([e({type:Number})],o.prototype,"value",void 0),l([a()],o.prototype,"_actualMin",void 0),l([a()],o.prototype,"_actualMax",void 0),l([a()],o.prototype,"_input",void 0),l([a()],o.prototype,"_slider",void 0),l([a()],o.prototype,"_thumb",void 0),customElements.define("nr-slider-input",o);export{o as SliderInput};

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

@@ -1,4 +1,14 @@
 import { LitElement, PropertyValueMap } from 'lit';
+/**
+ * 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 declare class SliderInput extends LitElement {
     disabled: boolean;
     max: number;
@@ -11,6 +21,7 @@ export declare class SliderInput extends LitElement {
     _slider: HTMLInputElement | null;
     _thumb: HTMLInputElement | null;
     static styles: import("lit").CSSResult;
+    static useShadowDom: boolean;
     firstUpdated(): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
     updated(changedProps: PropertyValueMap<any>): void;