@grandbazar/ui-baza 1.2.21 → 1.3.0

package/dist/style.css

@@ -1423,17 +1423,19 @@ textarea {
     }
   }
 }
-._textFieldLabel_1l2ya_1 {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  color: var(--color-neutral);
-  font-size: var(--size-sm);
-  line-height: var(--line-height-md);
-
-  &[data-required='true']::after {
-    content: '*';
-    color: var(--color-red);
+@layer ui_baza_components {
+  ._textFieldLabel_1xy6x_2 {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+    color: var(--color-neutral);
+    font-size: var(--size-sm);
+    line-height: var(--line-height-md);
+
+    &[data-required='true']::after {
+      content: '*';
+      color: var(--color-red);
+    }
   }
 }
 @layer ui_baza_components {
@@ -1660,6 +1662,143 @@ textarea {
     }
   }
 }
+@layer ui_baza_components {
+  ._slider_vuele_2 {
+    --slider-handle-size: var(--size-xl);
+    --slider-handle-radius: calc(var(--slider-handle-size) / 2);
+    --slider-track-height: var(--space-md);
+    --slider-fill-height: var(--space-md);
+    --slider-mark-size: var(--space-md);
+    --slider-ring-width: var(--space-md);
+
+    display: block;
+    position: relative;
+    width: 100%;
+    user-select: none;
+
+    &[data-marks='true'] {
+      --slider-track-height: var(--space-xs);
+
+      padding-block-end: calc(var(--space-xs) + var(--line-height-lg));
+
+      ._fill_vuele_20 {
+        border-radius: 0;
+      }
+    }
+
+    &[data-disabled='true'] {
+      ._rail_vuele_26 {
+        pointer-events: none;
+      }
+
+      ._fill_vuele_20 {
+        background-color: var(--color-neutral-40);
+      }
+
+      ._handle_vuele_34 {
+        background-color: var(--color-neutral-40);
+        cursor: not-allowed;
+      }
+
+      ._mark_vuele_39 {
+        color: var(--color-neutral-340);
+      }
+
+      ._mark_vuele_39[data-state='active'] ._markDot_vuele_43 {
+        background-color: var(--color-neutral-40);
+      }
+    }
+  }
+
+  ._rail_vuele_26 {
+    position: relative;
+    height: var(--slider-handle-size);
+    margin-inline: var(--slider-handle-radius);
+    touch-action: none;
+  }
+
+  ._track_vuele_56 {
+    position: absolute;
+    top: 50%;
+    height: var(--slider-track-height);
+    inset-inline: 0;
+    translate: 0 -50%;
+    border-radius: var(--radius-full);
+    background-color: var(--color-neutral-40);
+  }
+
+  ._fill_vuele_20 {
+    position: absolute;
+    top: 50%;
+    height: var(--slider-fill-height);
+    translate: 0 -50%;
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+  }
+
+  ._handle_vuele_34 {
+    --slider-ring-color: var(--color-transparent);
+
+    position: absolute;
+    top: 50%;
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    translate: -50% -50%;
+    border-radius: var(--radius-full);
+    background-color: var(--color-accent);
+    box-shadow: 0 0 0 var(--slider-ring-width) var(--slider-ring-color);
+    cursor: grab;
+    transition: box-shadow var(--transition-duration-default) ease-in-out;
+
+    &:hover,
+    &:focus-visible {
+      --slider-ring-color: var(--color-accent-alpha-100);
+    }
+
+    &:focus-visible {
+      outline: var(--space-2xs) solid var(--color-accent);
+      outline-offset: var(--space-2xs);
+    }
+
+    &:active {
+      --slider-ring-color: var(--color-accent-alpha-150);
+
+      cursor: grabbing;
+    }
+  }
+
+  ._marks_vuele_106 {
+    position: absolute;
+    inset: 0;
+  }
+
+  ._mark_vuele_39 {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--space-xl);
+    translate: -50% calc(var(--slider-mark-size) / -2);
+    color: var(--color-neutral-540);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+    white-space: nowrap;
+    pointer-events: none;
+  }
+
+  ._markDot_vuele_43 {
+    width: var(--slider-mark-size);
+    height: var(--slider-mark-size);
+    border-radius: var(--radius-full);
+    background-color: var(--color-neutral-40);
+
+    ._mark_vuele_39[data-state='active'] & {
+      background-color: var(--color-accent);
+    }
+  }
+}
 @layer ui_baza_components {
   ._stepper_103n3_2 {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.2.21",
+  "version": "1.3.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",