@luzmo/lucero 1.0.1-alpha.18 → 1.0.1-alpha.19

package/components/unit-input/index.js

@@ -15,262 +15,169 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-const initializeGlobalLuzmoCSSVariables = () => {
-  if (typeof document !== "undefined" && !document.querySelector("style[data-luzmo-vars]")) {
-    const styleElement = document.createElement("style");
-    styleElement.setAttribute("data-luzmo-vars", "");
-    styleElement.textContent = `html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}`;
-    document.head.appendChild(styleElement);
+import { a as w, r as k, x as f, n as s } from "../base-CFWO09N1.js";
+import { r as m } from "../state-DwIwYPvt.js";
+import { T as z, d as S, c as V } from "../luzmo-icons-CiSek5iM.js";
+import { o as N } from "../style-map-Bnhf_mVZ.js";
+const y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const u = document.createElement("style");
+    u.setAttribute("data-luzmo-vars", ""), u.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(u);
   }
 };
-initializeGlobalLuzmoCSSVariables();
-import { unsafeCSS, html } from "lit";
-import { property, state } from "lit/decorators.js";
-import { luzmoIcon, luzmoAngleUp, luzmoAngleDown } from "@luzmo/icons";
-import { styleMap } from "lit/directives/style-map.js";
-import { a as LuzmoElement } from "../base-DmeVy0cq.js";
-const styles = "*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
+y();
+const R = "*,*:before,*:after{box-sizing:border-box}:host{display:flex;flex:1 1 auto}svg{height:.75em}.unit-input-container{width:100%;position:relative;display:flex;height:1.875rem;box-sizing:border-box;border-radius:var(--luzmo-border-radius)}.unit-input-container input{box-sizing:border-box;min-width:0;width:100%;line-height:1.6rem;color:var(--luzmo-font-color);padding-left:var(--luzmo-spacing-3);padding-right:var(--luzmo-spacing-5);outline:none;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-radius:var(--luzmo-border-radius);background:transparent;font-weight:400;text-align:right;transition:border .2s ease-in-out}.unit-input-container input:focus{border:var(--luzmo-border-width) solid var(--luzmo-primary);background:var(--luzmo-background-color-hover)}.unit-input-container input:focus~.ticks{border:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container input:focus~.ticks .tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-primary)}.unit-input-container .unit{position:absolute;box-sizing:border-box;display:flex;align-items:center;justify-content:center;right:1.125rem;color:var(--luzmo-font-color-disabled);padding:0 var(--luzmo-spacing-2);height:100%;cursor:default;-webkit-user-select:none;user-select:none;z-index:2;font-size:80%}.unit-input-container .ticks{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;right:0;width:var(--luzmo-unit-input-tick-width, 1rem);-webkit-user-select:none;user-select:none;z-index:3;border:var(--luzmo-border-width) solid var(--luzmo-border-color);border-top-right-radius:var(--luzmo-border-radius);border-bottom-right-radius:var(--luzmo-border-radius);overflow:hidden;background-color:var(--luzmo-background-color-hover)}.unit-input-container .ticks>div{flex:1 1 auto;display:flex;justify-content:center;align-items:center;overflow:hidden;color:var(--luzmo-font-color);transition:all .2s ease-in-out;cursor:pointer;position:relative}.unit-input-container .ticks>div:hover{color:var(--luzmo-font-color-hard);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";
+var E = Object.defineProperty, i = (u, o, e, t) => {
+  for (var l = void 0, a = u.length - 1, n; a >= 0; a--)
+    (n = u[a]) && (l = n(o, e, l) || l);
+  return l && E(o, e, l), l;
 };
-const DEFAULTVALUES = {
+const d = {
   min: -99999999999,
   max: 99999999999,
   step: 1,
   default: 0,
   debounce: 250
-};
-const _LuzmoUnitInput = class _LuzmoUnitInput extends LuzmoElement {
+}, p = class p extends w {
   constructor() {
-    super();
-    this.isDecimal = false;
-    this.disabled = false;
-    this.readOnly = false;
-    this.inputWidth = "";
-    this.debounce = DEFAULTVALUES.debounce;
-    this.errors = [];
-    this.setValue = (value) => {
-      this.waitForUpdate = true;
-      if (this.debounceTimeout) {
-        clearTimeout(this.debounceTimeout);
-      }
-      this.debounceTimeout = setTimeout(() => {
+    super(), this.isDecimal = !1, this.disabled = !1, this.readOnly = !1, this.inputWidth = "", this.debounce = d.debounce, this.errors = [], this.setValue = (o) => {
+      this.waitForUpdate = !0, this.debounceTimeout && clearTimeout(this.debounceTimeout), this.debounceTimeout = setTimeout(() => {
         this.dispatchEvent(
           new CustomEvent("change", {
-            detail: value,
-            bubbles: true,
-            composed: true
+            detail: o,
+            bubbles: !0,
+            composed: !0
           })
         );
       }, this.debounce || 0);
-    };
-    this.setCorrectInitialValues();
+    }, this.setCorrectInitialValues();
   }
-  transformToNumber(value, fallbackValue) {
-    let transformedValue = value;
-    transformedValue = this.isDecimal ? Number.parseFloat(value + "") : Number.parseInt(value + "", 10);
-    transformedValue = Number.isNaN(transformedValue) ? Number(fallbackValue) : Number(transformedValue);
-    return transformedValue;
+  transformToNumber(o, e) {
+    let t = o;
+    return t = this.isDecimal ? Number.parseFloat(o + "") : Number.parseInt(o + "", 10), t = Number.isNaN(t) ? Number(e) : Number(t), t;
   }
-  onInput(event) {
-    let regex = new RegExp(/[^0-9+-]/g);
-    if (this.isDecimal) {
-      regex = new RegExp(/[^0-9.,+-]/g);
-    }
-    const value = event.target.value.replace(regex, "").replaceAll(",", ".");
-    event.target.value = value;
-    this.errors = [];
-    const checkValue = this.isDecimal ? Number.parseFloat(value + "") : Number.parseInt(value + "", 10);
-    if (Number.isNaN(checkValue)) {
-      this.errors.push("Not a number");
-    }
-    if (checkValue < this.min && this.errors.length === 0) {
-      this.errors.push("Value is lower than minimum");
-    }
-    if (checkValue > this.max && this.errors.length === 0) {
-      this.errors.push("Value is higher than maximum");
-    }
-    if (this.errors.length === 0) {
-      this.validValue = checkValue;
-      this.value = this.validValue;
-      this.setValue(this.value);
-      this.setErrorStatus(false);
-    } else {
-      this.setErrorStatus(true);
-    }
+  onInput(o) {
+    let e = new RegExp(/[^0-9+-]/g);
+    this.isDecimal && (e = new RegExp(/[^0-9.,+-]/g));
+    const t = o.target.value.replace(e, "").replaceAll(",", ".");
+    o.target.value = t, this.errors = [];
+    const l = this.isDecimal ? Number.parseFloat(t + "") : Number.parseInt(t + "", 10);
+    Number.isNaN(l) && this.errors.push("Not a number"), l < this.min && this.errors.length === 0 && this.errors.push("Value is lower than minimum"), l > this.max && this.errors.length === 0 && this.errors.push("Value is higher than maximum"), this.errors.length === 0 ? (this.validValue = l, this.value = this.validValue, this.setValue(this.value), this.setErrorStatus(!1)) : this.setErrorStatus(!0);
   }
-  setErrorStatus(hasError) {
-    var _a, _b;
-    if (hasError) {
-      (_a = this.renderRoot.querySelector(".unit-input-container")) == null ? void 0 : _a.classList.add("has-error");
-    } else {
-      this.errors = [];
-      (_b = this.renderRoot.querySelector(".unit-input-container")) == null ? void 0 : _b.classList.remove("has-error");
-    }
+  setErrorStatus(o) {
+    var e, t;
+    o ? (e = this.renderRoot.querySelector(".unit-input-container")) == null || e.classList.add("has-error") : (this.errors = [], (t = this.renderRoot.querySelector(".unit-input-container")) == null || t.classList.remove("has-error"));
   }
   setDisabledUpDownStatus() {
-    if (this.value === this.min) {
-      this.renderRoot.querySelector(".tick-down").classList.add("disabled");
-    } else {
-      this.renderRoot.querySelector(".tick-down").classList.remove("disabled");
-    }
-    if (this.value === this.max) {
-      this.renderRoot.querySelector(".tick-up").classList.add("disabled");
-    } else {
-      this.renderRoot.querySelector(".tick-up").classList.remove("disabled");
-    }
+    this.value === this.min ? this.renderRoot.querySelector(".tick-down").classList.add("disabled") : this.renderRoot.querySelector(".tick-down").classList.remove("disabled"), this.value === this.max ? this.renderRoot.querySelector(".tick-up").classList.add("disabled") : this.renderRoot.querySelector(".tick-up").classList.remove("disabled");
   }
-  createAndSetValidValue(value) {
-    let newValue = this.validValue ? this.transformToNumber(value, this.validValue) : this.transformToNumber(value, this.default);
-    if (this.max < newValue) {
-      newValue = this.max;
-    }
-    if (this.min > newValue) {
-      newValue = this.min;
-    }
-    this.validValue = newValue;
-    this.value = newValue;
+  createAndSetValidValue(o) {
+    let e = this.validValue ? this.transformToNumber(o, this.validValue) : this.transformToNumber(o, this.default);
+    this.max < e && (e = this.max), this.min > e && (e = this.min), this.validValue = e, this.value = e;
   }
   setCorrectInitialValues() {
-    this.min = this.transformToNumber(this.min, DEFAULTVALUES.min);
-    this.max = this.transformToNumber(this.max, DEFAULTVALUES.max);
-    this.step = Math.abs(this.transformToNumber(this.step, DEFAULTVALUES.step));
-    if (this.min > this.max) {
-      this.min = this.max;
-    }
-    if (this.max < this.min + this.step) {
-      this.max = this.min + this.step;
-    }
-    this.default = this.transformToNumber(this.default, DEFAULTVALUES.default);
-    this.createAndSetValidValue(this.value);
+    this.min = this.transformToNumber(this.min, d.min), this.max = this.transformToNumber(this.max, d.max), this.step = Math.abs(this.transformToNumber(this.step, d.step)), this.min > this.max && (this.min = this.max), this.max < this.min + this.step && (this.max = this.min + this.step), this.default = this.transformToNumber(this.default, d.default), this.createAndSetValidValue(this.value);
   }
-  onKeydown(event) {
-    if (!this.disabled && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
-      this.applyStep(event, event.key === "ArrowUp");
-    }
+  onKeydown(o) {
+    !this.disabled && (o.key === "ArrowUp" || o.key === "ArrowDown") && this.applyStep(o, o.key === "ArrowUp");
   }
-  applyStep(event, isUp) {
-    var _a, _b, _c, _d, _e, _f;
+  applyStep(o, e) {
+    var t, l, a, n, h, b;
     if (!this.disabled) {
-      event.preventDefault();
-      const precisionValid = ((_c = (_b = (_a = this.validValue.toString()) == null ? void 0 : _a.split(".")) == null ? void 0 : _b[1]) == null ? void 0 : _c.length) ?? 0;
-      const precisionStep = ((_f = (_e = (_d = this.step.toString()) == null ? void 0 : _d.split(".")) == null ? void 0 : _e[1]) == null ? void 0 : _f.length) ?? 0;
-      const maxPrecision = Math.max(precisionValid, precisionStep);
-      let newValue = this.validValue + (isUp ? this.step : -this.step);
-      newValue = Number.parseFloat(newValue.toFixed(maxPrecision));
-      this.createAndSetValidValue(newValue);
-      this.setErrorStatus(false);
-      this.renderRoot.querySelector("input").value = this.validValue + "";
-      this.setValue(this.validValue);
-      this.setDisabledUpDownStatus();
+      o.preventDefault();
+      const g = ((a = (l = (t = this.validValue.toString()) == null ? void 0 : t.split(".")) == null ? void 0 : l[1]) == null ? void 0 : a.length) ?? 0, v = ((b = (h = (n = this.step.toString()) == null ? void 0 : n.split(".")) == null ? void 0 : h[1]) == null ? void 0 : b.length) ?? 0, x = Math.max(g, v);
+      let c = this.validValue + (e ? this.step : -this.step);
+      c = Number.parseFloat(c.toFixed(x)), this.createAndSetValidValue(c), this.setErrorStatus(!1), this.renderRoot.querySelector("input").value = this.validValue + "", this.setValue(this.validValue), this.setDisabledUpDownStatus();
     }
   }
   setPaddingRightOfInput() {
-    const unitDiv = this.renderRoot.querySelector(".unit");
-    const ticksDiv = this.renderRoot.querySelector(".ticks");
-    const paddingRight = this.unit ? `calc(${unitDiv == null ? void 0 : unitDiv.offsetWidth}px + ${ticksDiv == null ? void 0 : ticksDiv.offsetWidth}px)` : `calc(${ticksDiv == null ? void 0 : ticksDiv.offsetWidth}px + var(--luzmo-spacing-3))`;
-    this.renderRoot.querySelector("input").style.paddingRight = paddingRight;
+    const o = this.renderRoot.querySelector(".unit"), e = this.renderRoot.querySelector(".ticks"), t = this.unit ? `calc(${o == null ? void 0 : o.offsetWidth}px + ${e == null ? void 0 : e.offsetWidth}px)` : `calc(${e == null ? void 0 : e.offsetWidth}px + var(--luzmo-spacing-3))`;
+    this.renderRoot.querySelector("input").style.paddingRight = t;
   }
-  updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this.setCorrectInitialValues();
-      if (this.waitForUpdate) {
-        this.waitForUpdate = false;
-      } else {
-        this.renderRoot.querySelector("input").value = this.value + "";
-      }
-      this.setPaddingRightOfInput();
-    }
+  updated(o) {
+    o.has("value") && (this.setCorrectInitialValues(), this.waitForUpdate ? this.waitForUpdate = !1 : this.renderRoot.querySelector("input").value = this.value + "", this.setPaddingRightOfInput());
   }
   render() {
-    return html`
-      <div style=${styleMap(this.inputWidth ? { width: this.inputWidth } : {})}>
+    return f`
+      <div style=${N(this.inputWidth ? { width: this.inputWidth } : {})}>
         <input
           .min=${String(this.min)}
           .max=${String(this.max)}
           @input=${this.onInput}
           @keydown=${this.onKeydown}
         />
-        ${this.unit ? html`<div class="unit">${this.unit}</div>` : ""}
+        ${this.unit ? f`<div class="unit">${this.unit}</div>` : ""}
         <div class="ticks">
           <div
             class="tick-up"
             @click=${{
-      handleEvent: (event) => this.applyStep(event, true)
+      handleEvent: (o) => this.applyStep(o, !0)
     }}
           >
-            ${luzmoIcon(luzmoAngleUp)}
+            ${z(S)}
           </div>
 
           <div
             class="tick-down"
             @click=${{
-      handleEvent: (event) => this.applyStep(event, false)
+      handleEvent: (o) => this.applyStep(o, !1)
     }}
           >
-            ${luzmoIcon(luzmoAngleDown)}
+            ${z(V)}
           </div>
         </div>
       </div>
     `;
   }
 };
-_LuzmoUnitInput.styles = unsafeCSS(styles);
-let LuzmoUnitInput = _LuzmoUnitInput;
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "value" })
-], LuzmoUnitInput.prototype, "value");
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "default" })
-], LuzmoUnitInput.prototype, "default");
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "placeholder" })
-], LuzmoUnitInput.prototype, "placeholder");
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "unit" })
-], LuzmoUnitInput.prototype, "unit");
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "min" })
-], LuzmoUnitInput.prototype, "min");
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "max" })
-], LuzmoUnitInput.prototype, "max");
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "step" })
-], LuzmoUnitInput.prototype, "step");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "isDecimal" })
-], LuzmoUnitInput.prototype, "isDecimal");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "disabled" })
-], LuzmoUnitInput.prototype, "disabled");
-__decorateClass([
-  property({ type: Boolean, reflect: true, attribute: "readOnly" })
-], LuzmoUnitInput.prototype, "readOnly");
-__decorateClass([
-  property({ type: String, reflect: true, attribute: "inputWidth" })
-], LuzmoUnitInput.prototype, "inputWidth");
-__decorateClass([
-  property({ type: Number, reflect: true, attribute: "debounce" })
-], LuzmoUnitInput.prototype, "debounce");
-__decorateClass([
-  state()
-], LuzmoUnitInput.prototype, "errors");
-__decorateClass([
-  state()
-], LuzmoUnitInput.prototype, "validValue");
-__decorateClass([
-  state()
-], LuzmoUnitInput.prototype, "waitForUpdate");
-if (!customElements.get("luzmo-unit-input")) {
-  customElements.define("luzmo-unit-input", LuzmoUnitInput);
-}
+p.styles = k(R);
+let r = p;
+i([
+  s({ type: Number, reflect: !0, attribute: "value" })
+], r.prototype, "value");
+i([
+  s({ type: Number, reflect: !0, attribute: "default" })
+], r.prototype, "default");
+i([
+  s({ type: String, reflect: !0, attribute: "placeholder" })
+], r.prototype, "placeholder");
+i([
+  s({ type: String, reflect: !0, attribute: "unit" })
+], r.prototype, "unit");
+i([
+  s({ type: Number, reflect: !0, attribute: "min" })
+], r.prototype, "min");
+i([
+  s({ type: Number, reflect: !0, attribute: "max" })
+], r.prototype, "max");
+i([
+  s({ type: Number, reflect: !0, attribute: "step" })
+], r.prototype, "step");
+i([
+  s({ type: Boolean, reflect: !0, attribute: "isDecimal" })
+], r.prototype, "isDecimal");
+i([
+  s({ type: Boolean, reflect: !0, attribute: "disabled" })
+], r.prototype, "disabled");
+i([
+  s({ type: Boolean, reflect: !0, attribute: "readOnly" })
+], r.prototype, "readOnly");
+i([
+  s({ type: String, reflect: !0, attribute: "inputWidth" })
+], r.prototype, "inputWidth");
+i([
+  s({ type: Number, reflect: !0, attribute: "debounce" })
+], r.prototype, "debounce");
+i([
+  m()
+], r.prototype, "errors");
+i([
+  m()
+], r.prototype, "validValue");
+i([
+  m()
+], r.prototype, "waitForUpdate");
+customElements.get("luzmo-unit-input") || customElements.define("luzmo-unit-input", r);
 export {
-  LuzmoUnitInput
+  r as LuzmoUnitInput
 };

package/components/utils.cjs

@@ -15,28 +15,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const base = require("./base-COw9n7UR.cjs");
-const focusVisible = require("./focus-visible-B-B8-P9R.cjs");
-const focusable = require("./focusable-BPrTcZPd.cjs");
-const platform = require("./platform-CxDar3Dn.cjs");
-const sizedMixin = require("./sized-mixin-UaTVa-AE.cjs");
-const streamingListener = require("./streaming-listener-D4sHaMub.cjs");
-exports.LuzmoElement = base.LuzmoElement;
-exports.LuzmoMixin = base.LuzmoMixin;
-exports.FocusVisiblePolyfillMixin = focusVisible.FocusVisiblePolyfillMixin;
-exports.Focusable = focusable.Focusable;
-exports.isAndroid = platform.isAndroid;
-exports.isAppleDevice = platform.isAppleDevice;
-exports.isChrome = platform.isChrome;
-exports.isFirefox = platform.isFirefox;
-exports.isIOS = platform.isIOS;
-exports.isIPad = platform.isIPad;
-exports.isIPhone = platform.isIPhone;
-exports.isMac = platform.isMac;
-exports.isSeamonkey = platform.isSeamonkey;
-exports.isWebKit = platform.isWebKit;
-exports.ElementSizes = sizedMixin.ElementSizes;
-exports.SizedMixin = sizedMixin.SizedMixin;
-exports.streamingListener = streamingListener.streamingListener;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./base-Cy0MQrPT.cjs"),o=require("./focus-visible-D4BXb5RB.cjs"),n=require("./focusable-B_KwfEec.cjs"),i=require("./platform-BiXhwqk3.cjs"),s=require("./sized-mixin-WPHH0a_D.cjs"),r=require("./streaming-listener-DeGQYM-9.cjs");exports.LuzmoElement=e.LuzmoElement;exports.LuzmoMixin=e.LuzmoMixin;exports.FocusVisiblePolyfillMixin=o.FocusVisiblePolyfillMixin;exports.Focusable=n.Focusable;exports.isAndroid=i.isAndroid;exports.isAppleDevice=i.isAppleDevice;exports.isChrome=i.isChrome;exports.isFirefox=i.isFirefox;exports.isIOS=i.isIOS;exports.isIPad=i.isIPad;exports.isIPhone=i.isIPhone;exports.isMac=i.isMac;exports.isSeamonkey=i.isSeamonkey;exports.isWebKit=i.isWebKit;exports.ElementSizes=s.ElementSizes;exports.SizedMixin=s.SizedMixin;exports.streamingListener=r.streamingListener;

package/components/utils.js

@@ -15,28 +15,28 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { a, L } from "./base-DmeVy0cq.js";
-import { F } from "./focus-visible-BUPRWlsh.js";
-import { F as F2 } from "./focusable-ChCLg1k4.js";
-import { j, d, e, h, c, b, a as a2, i, g, f } from "./platform-Cxn0WbyT.js";
-import { E, S } from "./sized-mixin-DmkrNdWB.js";
-import { s } from "./streaming-listener-cAz5zJyk.js";
+import { a as e, L as a } from "./base-CFWO09N1.js";
+import { F as r } from "./focus-visible-BvScGDCE.js";
+import { F as t } from "./focusable-C5JjRZmT.js";
+import { j as x, d as f, e as l, h as p, c, b as d, a as F, i as S, g as b, f as u } from "./platform-BM-uMWpX.js";
+import { E as L, S as M } from "./sized-mixin-CJbBHWRQ.js";
+import { s as E } from "./streaming-listener-BQ68fKMa.js";
 export {
-  E as ElementSizes,
-  F as FocusVisiblePolyfillMixin,
-  F2 as Focusable,
-  a as LuzmoElement,
-  L as LuzmoMixin,
-  S as SizedMixin,
-  j as isAndroid,
-  d as isAppleDevice,
-  e as isChrome,
-  h as isFirefox,
+  L as ElementSizes,
+  r as FocusVisiblePolyfillMixin,
+  t as Focusable,
+  e as LuzmoElement,
+  a as LuzmoMixin,
+  M as SizedMixin,
+  x as isAndroid,
+  f as isAppleDevice,
+  l as isChrome,
+  p as isFirefox,
   c as isIOS,
-  b as isIPad,
-  a2 as isIPhone,
-  i as isMac,
-  g as isSeamonkey,
-  f as isWebKit,
-  s as streamingListener
+  d as isIPad,
+  F as isIPhone,
+  S as isMac,
+  b as isSeamonkey,
+  u as isWebKit,
+  E as streamingListener
 };

package/components/{random-id-BE6HA503.cjs → when-CDK1Tt5Y.js}

@@ -15,11 +15,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-"use strict";
-function randomID() {
-  return Array.from(
-    crypto.getRandomValues(new Uint8Array(4)),
-    (b) => `0${(b & 255).toString(16)}`.slice(-2)
-  ).join("");
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function o(r, n, e) {
+  return r ? n(r) : e == null ? void 0 : e(r);
 }
-exports.randomID = randomID;
+export {
+  o as n
+};

package/components/when-CDZyJPvd.cjs

@@ -0,0 +1,22 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+"use strict";/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function c(n,u,r){return n?u(n):r==null?void 0:r(n)}exports.n=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/lucero",
-  "version": "1.0.1-alpha.18",
+  "version": "1.0.1-alpha.19",
   "homepage": "https://luzmo.com",
   "description": "Lucero - The design system for Luzmo",
   "type": "module",