@luzmo/lucero 0.0.3 → 0.0.6

package/components/tooltip/index.js

@@ -0,0 +1,220 @@
+/*! * 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.
+ * */
+import { L as z, r as d, x as s, n } from "../base-CxUap9HL.js";
+import { e as u } from "../query-D_KR_GUc.js";
+import { o as h } from "../if-defined-XzWkhMhg.js";
+import { f as g } from "../focusable-selectors-B4YgbghQ.js";
+import { D as b } from "../dependency-manger-CEXvGQUV.js";
+import { S as f } from "../sized-mixin-DcJTTohI.js";
+const c = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const p = document.createElement("style");
+    p.setAttribute("data-luzmo-vars", ""), p.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-color-disabled);--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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #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(p);
+  }
+};
+c();
+const v = "#tooltip{pointer-events:none;visibility:hidden;opacity:0;transition:transform .13s ease-in-out,opacity .13s ease-in-out,visibility 0s linear .13s;transition:transform var(--luzmo-overlay-animation-duration, .13s) ease-in-out,opacity var(--luzmo-overlay-animation-duration, .13s) ease-in-out,visibility 0s linear var(--luzmo-overlay-animation-duration, .13s)}:host([open]) #tooltip{pointer-events:auto;visibility:visible;opacity:1;transition-delay:0s;transition-delay:var(--luzmo-overlay-animation-duration-opened, 0s)}@media (forced-colors: active){#tooltip{border:1px solid rgba(0,0,0,0)}#tip{--highcontrast-tooltip-background-color-default: CanvasText;--highcontrast-tooltip-background-color-informative: CanvasText;--highcontrast-tooltip-background-color-positive: CanvasText;--highcontrast-tooltip-background-color-negative: CanvasText;forced-color-adjust:none}}#tooltip{box-sizing:border-box;vertical-align:top;inline-size:auto;padding-inline:var(--luzmo-tooltip-spacing-inline, .688rem);border-radius:var(--luzmo-tooltip-border-radius, .313rem);block-size:auto;min-block-size:var(--luzmo-tooltip-height, 1.875rem);max-inline-size:var(--luzmo-tooltip-max-inline-size, 12.5rem);background-color:var(--highcontrast-tooltip-background-color-default, var(--luzmo-tooltip-background-color-default, rgb(109, 109, 109)));color:var(--luzmo-tooltip-content-color, white);font-size:var(--luzmo-tooltip-font-size, var(--tooltip-font-size, .938rem));font-weight:var(--luzmo-tooltip-font-weight, 400);line-height:var(--luzmo-tooltip-line-height, 1.3);word-break:break-word;-webkit-font-smoothing:antialiased;cursor:default;-webkit-user-select:none;user-select:none;flex-direction:row;align-items:center;display:inline-flex;position:relative}:host(:lang(ja)) #tooltip,:host(:lang(ko)) #tooltip,:host(:lang(zh)) #tooltip{line-height:var(--luzmo-tooltip-cjk-line-height, 1.5)}#tooltip p{margin:0}:host([variant=info]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-informative, var(--luzmo-tooltip-background-color-informative, rgb(2, 101, 220)))}:host([variant=positive]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-positive, var(--luzmo-tooltip-background-color-positive, rgb(0, 122, 77)))}:host([variant=negative]) #tooltip{background-color:var(--highcontrast-tooltip-background-color-negative, var(--luzmo-tooltip-background-color-negative, rgb(211, 21, 16)))}#tip{block-size:var(--luzmo-tooltip-tip-square-size, .625rem);inline-size:var(--luzmo-tooltip-tip-square-size, .625rem);inset-block-start:100%;background-color:var(--highcontrast-tooltip-background-color-default, var(--luzmo-tooltip-background-color-default, rgb(109, 109, 109)));clip-path:polygon(0 calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)),50% var(--luzmo-tooltip-tip-height-percentage, 50%),100% calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)));position:absolute;left:50%;transform:translate(-50%)}:host([variant=info]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-informative, var(--luzmo-tooltip-background-color-informative, rgb(2, 101, 220)))}:host([variant=positive]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-positive, var(--luzmo-tooltip-background-color-positive, rgb(0, 122, 77)))}:host([variant=negative]) #tooltip #tip{background-color:var(--highcontrast-tooltip-background-color-negative, var(--luzmo-tooltip-background-color-negative, rgb(211, 21, 16)))}:host([placement*=top]) #tooltip #tip,.luzmo-Tooltip--top-end #tip,.luzmo-Tooltip--top-left #tip,.luzmo-Tooltip--top-right #tip,.luzmo-Tooltip--top-start #tip{inset-block-start:100%}:host([placement*=bottom]) #tooltip #tip,.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--bottom-start #tip{clip-path:polygon(50% calc(100% - var(--luzmo-tooltip-tip-height-percentage, 50%)),0 calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)),100% calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)));inset-block:auto 100%}.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--bottom-start #tip,.luzmo-Tooltip--top-end #tip,.luzmo-Tooltip--top-left #tip,.luzmo-Tooltip--top-right #tip,.luzmo-Tooltip--top-start #tip{transform:none}.luzmo-Tooltip--bottom-left #tip,.luzmo-Tooltip--top-left #tip{inset-inline-start:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-right #tip,.luzmo-Tooltip--top-right #tip{inset-inline:auto var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-start #tip,.luzmo-Tooltip--top-start #tip{inset-inline:var(--luzmo-tooltip-pointer-corner-spacing, .313rem) auto}.luzmo-Tooltip--bottom-start #tip:dir(rtl),.luzmo-Tooltip--top-start #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--bottom-start #tip,:host([dir=rtl]) .luzmo-Tooltip--top-start #tip{right:var(--luzmo-tooltip-pointer-corner-spacing, .313rem);left:auto}.luzmo-Tooltip--bottom-end #tip,.luzmo-Tooltip--top-end #tip{inset-inline:auto var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--bottom-end #tip:dir(rtl),.luzmo-Tooltip--top-end #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--bottom-end #tip,:host([dir=rtl]) .luzmo-Tooltip--top-end #tip{left:var(--luzmo-tooltip-pointer-corner-spacing, .313rem);right:auto}.luzmo-Tooltip--end #tip,.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,:host([placement*=left]) #tooltip #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,:host([placement*=right]) #tooltip #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:50%;transform:translateY(-50%)}.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:auto;transform:none}.luzmo-Tooltip--end #tip,.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--end-top #tip,:host([placement*=right]) #tooltip #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--right-top #tip{clip-path:polygon(calc(100% - var(--luzmo-tooltip-tip-height-percentage, 50%)) 50%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0);inset-inline:auto 100%}:host([placement*=left]) #tooltip #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--start #tip,.luzmo-Tooltip--start-bottom #tip,.luzmo-Tooltip--start-top #tip{clip-path:polygon(calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0,calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,var(--luzmo-tooltip-tip-height-percentage, 50%) 50%);inset-inline-start:100%}.luzmo-Tooltip--end-top #tip,.luzmo-Tooltip--left-top #tip,.luzmo-Tooltip--right-top #tip,.luzmo-Tooltip--start-top #tip{inset-block-start:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--end-bottom #tip,.luzmo-Tooltip--left-bottom #tip,.luzmo-Tooltip--right-bottom #tip,.luzmo-Tooltip--start-bottom #tip{inset-block-end:var(--luzmo-tooltip-pointer-corner-spacing, .313rem)}.luzmo-Tooltip--end #tip:dir(rtl),.luzmo-Tooltip--end-bottom #tip:dir(rtl),.luzmo-Tooltip--end-top #tip:dir(rtl),:host([placement*=left]) #tooltip #tip:dir(rtl),.luzmo-Tooltip--left-bottom #tip:dir(rtl),.luzmo-Tooltip--left-top #tip:dir(rtl),:host([dir=rtl]) .luzmo-Tooltip--end #tip,:host([dir=rtl]) .luzmo-Tooltip--end-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--end-top #tip,:host([dir=rtl][placement*=left]) #tooltip #tip,:host([dir=rtl]) .luzmo-Tooltip--left-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--left-top #tip{clip-path:polygon(calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0,calc(0% - var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,var(--luzmo-tooltip-tip-height-percentage, 50%) 50%);left:100%;right:auto}:host([placement*=right]) #tooltip #tip:dir(rtl),.luzmo-Tooltip--right-bottom #tip:dir(rtl),.luzmo-Tooltip--right-top #tip:dir(rtl),.luzmo-Tooltip--start #tip:dir(rtl),.luzmo-Tooltip--start-bottom #tip:dir(rtl),.luzmo-Tooltip--start-top #tip:dir(rtl),:host([dir=rtl][placement*=right]) #tooltip #tip,:host([dir=rtl]) .luzmo-Tooltip--right-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--right-top #tip,:host([dir=rtl]) .luzmo-Tooltip--start #tip,:host([dir=rtl]) .luzmo-Tooltip--start-bottom #tip,:host([dir=rtl]) .luzmo-Tooltip--start-top #tip{clip-path:polygon(var(--luzmo-tooltip-tip-height-percentage, 50%) 50%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 100%,calc(100% + var(--luzmo-tooltip-tip-antialiasing-inset, .5px)) 0);left:auto;right:100%}::slotted([slot=icon]){inline-size:var(--luzmo-tooltip-icon-width, 1.125rem);block-size:var(--luzmo-tooltip-icon-height, 1.125rem);flex-shrink:0;align-self:flex-start;margin-block-start:var(--luzmo-tooltip-icon-spacing-block-start, .313rem);margin-inline-start:calc(var(--luzmo-tooltip-icon-spacing-inline-start, .563rem) - var(--luzmo-tooltip-spacing-inline, .688rem));margin-inline-end:var(--luzmo-tooltip-icon-spacing-inline-end, .563rem)}#label{line-height:var(--luzmo-tooltip-line-height, 1.3);margin-block-start:var(--luzmo-tooltip-spacing-block-start, .313rem);margin-block-end:var(--luzmo-tooltip-spacing-block-end, .375rem)}#tooltip,:host([placement*=top]) #tooltip,.luzmo-Tooltip--top-end,.luzmo-Tooltip--top-left,.luzmo-Tooltip--top-right,.luzmo-Tooltip--top-start{margin-block-end:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--top-end,:host([open]) .luzmo-Tooltip--top-left,:host([open]) .luzmo-Tooltip--top-right,:host([open]) .luzmo-Tooltip--top-start,:host([placement*=top][open]) #tooltip,:host([open]) #tooltip{transform:translateY(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host([placement*=bottom]) #tooltip,.luzmo-Tooltip--bottom-end,.luzmo-Tooltip--bottom-left,.luzmo-Tooltip--bottom-right,.luzmo-Tooltip--bottom-start{margin-block-start:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--bottom-end,:host([open]) .luzmo-Tooltip--bottom-left,:host([open]) .luzmo-Tooltip--bottom-right,:host([open]) .luzmo-Tooltip--bottom-start,:host([placement*=bottom][open]) #tooltip{transform:translateY(var(--luzmo-tooltip-animation-distance, .313rem))}:host([placement*=right]) #tooltip,.luzmo-Tooltip--right-bottom,.luzmo-Tooltip--right-top{margin-left:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--right-bottom,:host([open]) .luzmo-Tooltip--right-top,:host([placement*=right][open]) #tooltip{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}:host([placement*=left]) #tooltip,.luzmo-Tooltip--left-bottom,.luzmo-Tooltip--left-top{margin-right:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--left-bottom,:host([open]) .luzmo-Tooltip--left-top,:host([placement*=left][open]) #tooltip{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}.luzmo-Tooltip--start,.luzmo-Tooltip--start-bottom,.luzmo-Tooltip--start-top{margin-inline-end:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--start-bottom,:host([open]) .luzmo-Tooltip--start-top,:host([open]) .luzmo-Tooltip--start{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host([open]) .luzmo-Tooltip--start-bottom:dir(rtl),:host([open]) .luzmo-Tooltip--start-top:dir(rtl),:host([open]) .luzmo-Tooltip--start:dir(rtl),:host([dir=rtl][open]) .luzmo-Tooltip--start-bottom,:host([dir=rtl][open]) .luzmo-Tooltip--start-top,:host([dir=rtl][open]) .luzmo-Tooltip--start{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}.luzmo-Tooltip--end,.luzmo-Tooltip--end-bottom,.luzmo-Tooltip--end-top{margin-inline-start:calc(var(--luzmo-tooltip-tip-block-size, .313rem) + var(--luzmo-tooltip-margin, 0rem))}:host([open]) .luzmo-Tooltip--end-bottom,:host([open]) .luzmo-Tooltip--end-top,:host([open]) .luzmo-Tooltip--end{transform:translate(var(--luzmo-tooltip-animation-distance, .313rem))}:host([open]) .luzmo-Tooltip--end-bottom:dir(rtl),:host([open]) .luzmo-Tooltip--end-top:dir(rtl),:host([open]) .luzmo-Tooltip--end:dir(rtl),:host([dir=rtl][open]) .luzmo-Tooltip--end-bottom,:host([dir=rtl][open]) .luzmo-Tooltip--end-top,:host([dir=rtl][open]) .luzmo-Tooltip--end{transform:translate(calc(var(--luzmo-tooltip-animation-distance, .313rem) * -1))}:host{--luzmo-tooltip-background-color-default: rgb(0, 0, 0);--tooltip-font-size: var(--luzmo-font-size)}:host([size=s]){--tooltip-font-size: var(--luzmo-font-size-s)}:host([size=m]){--tooltip-font-size: var(--luzmo-font-size-m)}:host([size=l]){--tooltip-font-size: var(--luzmo-font-size-l)}:host([size=xl]){--tooltip-font-size: var(--luzmo-font-size-xl)}:host{display:contents;white-space:initial}#tooltip{inline-size:max-content}#tip{clip-path:polygon(0 -5%,50% 50%,100% -5%);width:.625rem!important;height:.625rem!important}#tip[style]{transform:none!important}:host(:not([placement*=top])) #tooltip{margin-bottom:0}:host([placement*=top]) #tooltip #tip{inset-block-start:100%}:host([placement*=bottom]) #tooltip #tip{inset-block-end:100%;clip-path:polygon(50% 50%,0 105%,100% 105%);top:auto}:host([placement*=left]) #tooltip #tip,:host([placement*=right]) #tooltip #tip{inset-block-start:50%;transform:translateY(-50%)}:host([placement*=right]) #tooltip #tip{clip-path:polygon(50% 50%,105% 100%,105% 0);inset-inline:calc(var(--luzmo-tooltip-tip-block-size, .313rem) * -2) 100%}:host([placement*=left]) #tooltip #tip{clip-path:polygon(-5% 0,-5% 100%,50% 50%);inset-inline-start:100%}luzmo-overlay:not(:defined){display:none}";
+var T = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (p, o, t, l) => {
+  for (var e = l > 1 ? void 0 : l ? y(o, t) : o, a = p.length - 1, m; a >= 0; a--)
+    (m = p[a]) && (e = (l ? m(o, t, e) : m(e)) || e);
+  return l && e && T(o, t, e), e;
+};
+class x extends HTMLElement {
+  constructor() {
+    super(), this._open = !1, this._placement = "top", this.addEventListener("luzmo-opened", this.redispatchEvent), this.addEventListener("luzmo-closed", this.redispatchEvent);
+  }
+  redispatchEvent(o) {
+    o.stopPropagation(), this.tooltip.dispatchEvent(
+      new CustomEvent(o.type, {
+        bubbles: o.bubbles,
+        composed: o.composed,
+        detail: o.detail
+      })
+    );
+  }
+  get tooltip() {
+    return this.getRootNode().host;
+  }
+  static get observedAttributes() {
+    return ["open", "placement"];
+  }
+  attributeChangedCallback(o, t, l) {
+    switch (o) {
+      // API generally sets `open` as a property
+      /* c8 ignore next 3 */
+      case "open": {
+        this.open = l !== null;
+        break;
+      }
+      case "placement": {
+        this.placement = l;
+        break;
+      }
+    }
+  }
+  set open(o) {
+    this._open = o;
+    const { tooltip: t } = this;
+    t && (t.open = o);
+  }
+  /* c8 ignore next 3 */
+  get open() {
+    return this._open;
+  }
+  /**
+   * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+   * @attr
+   */
+  set placement(o) {
+    this._placement = o;
+    const { tooltip: t } = this;
+    t && (t.placement = o);
+  }
+  /* c8 ignore next 3 */
+  get placement() {
+    return this._placement;
+  }
+  get tipElement() {
+    return this.tooltip.tipElement;
+  }
+}
+customElements.get("luzmo-tooltip-openable") || customElements.define("luzmo-tooltip-openable", x);
+class i extends f(z, { defaultSize: "s" }) {
+  constructor() {
+    super(...arguments), this.delayed = !1, this.dependencyManager = new b(this), this.disabled = !1, this.selfManaged = !1, this.offset = 0, this.open = !1, this._variant = "", this.handleOpenOverlay = () => {
+      this.open = !0;
+    }, this.handleCloseOverlay = () => {
+      this.open = !1;
+    };
+  }
+  static get styles() {
+    return [d(v)];
+  }
+  get variant() {
+    return this._variant;
+  }
+  set variant(o) {
+    if (o !== this.variant) {
+      if (["info", "positive", "negative"].includes(o)) {
+        this.setAttribute("variant", o), this._variant = o;
+        return;
+      }
+      this.removeAttribute("variant"), this._variant = "";
+    }
+  }
+  forwardTransitionEvent(o) {
+    this.dispatchEvent(
+      new TransitionEvent(o.type, {
+        bubbles: !0,
+        composed: !0,
+        propertyName: o.propertyName
+      })
+    );
+  }
+  get triggerElement() {
+    var e;
+    let o = this.assignedSlot || this, t = o.getRootNode();
+    if (t === document)
+      return null;
+    let l = o.parentElement || t.host || /* c8 ignore next 1 */
+    t;
+    for (; !((e = l == null ? void 0 : l.matches) != null && e.call(l, g)); ) {
+      if (o = l.assignedSlot || l, t = o.getRootNode(), t === document)
+        return null;
+      l = o.parentElement || t.host || /* c8 ignore next 1 */
+      t;
+    }
+    return l;
+  }
+  render() {
+    const o = s`
+      <luzmo-tooltip-openable
+        id="tooltip"
+        placement=${h(this.placement)}
+        @transitionrun=${this.forwardTransitionEvent}
+        @transitionend=${this.forwardTransitionEvent}
+        @transitioncancel=${this.forwardTransitionEvent}
+      >
+        <slot name="icon"></slot>
+        <span id="label"><slot></slot></span>
+        <span id="tip" aria-hidden="true"></span>
+      </luzmo-tooltip-openable>
+    `;
+    return this.selfManaged ? (this.dependencyManager.add("luzmo-overlay"), import("../overlay/index.js"), s`
+        <luzmo-overlay
+          ?open=${this.open && !this.disabled && this.dependencyManager.loaded}
+          ?delayed=${this.delayed}
+          ?disabled=${this.disabled}
+          offset=${this.offset}
+          .placement=${this.placement}
+          type="hint"
+          .tipPadding=${this.tipPadding}
+          .triggerInteraction=${"hover"}
+          @luzmo-opened=${this.handleOpenOverlay}
+          @luzmo-closed=${this.handleCloseOverlay}
+        >
+          ${o}
+        </luzmo-overlay>
+      `) : o;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      if (!this.selfManaged)
+        return;
+      const o = this.overlayElement;
+      if (o) {
+        const t = this.triggerElement;
+        o.triggerElement = t;
+      }
+    });
+  }
+}
+r([
+  n({ type: Boolean })
+], i.prototype, "delayed", 2);
+r([
+  n({ type: Boolean })
+], i.prototype, "disabled", 2);
+r([
+  n({ type: Boolean, attribute: "self-managed" })
+], i.prototype, "selfManaged", 2);
+r([
+  n({ type: Number })
+], i.prototype, "offset", 2);
+r([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+r([
+  u("luzmo-overlay")
+], i.prototype, "overlayElement", 2);
+r([
+  n({ reflect: !0 })
+], i.prototype, "placement", 2);
+r([
+  u("#tip")
+], i.prototype, "tipElement", 2);
+r([
+  n({ type: Number })
+], i.prototype, "tipPadding", 2);
+r([
+  n({ type: String })
+], i.prototype, "variant", 1);
+customElements.get("luzmo-tooltip") || customElements.define("luzmo-tooltip", i);
+export {
+  i as Tooltip
+};

package/components/tooltip/tooltip-directive.d.ts

@@ -0,0 +1,5 @@
+import { TemplateResult } from 'lit';
+import { OverlayTriggerOptions, trigger } from '../overlay/overlay-trigger-directive';
+export declare const tooltip: (tooltipContent: () => TemplateResult, options?: Partial<OverlayTriggerOptions & {
+    variant: string;
+}>) => ReturnType<typeof trigger>;

package/components/tooltip/tooltip.d.ts

@@ -0,0 +1,55 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import { Overlay } from '../overlay';
+import { Placement } from '../overlay/overlay-types';
+declare const Tooltip_base: typeof LuzmoElement & {
+    new (...args: any[]): import("../../utils/sized-mixin").SizedElementInterface;
+    prototype: import("../../utils/sized-mixin").SizedElementInterface;
+};
+/**
+ * @element luzmo-tooltip
+ *
+ * @slot icon - the icon element appearing at the start of the label
+ * @slot - the text label of the Tooltip
+ */
+export declare class Tooltip extends Tooltip_base {
+    static get styles(): CSSResultArray;
+    /**
+     * A Tooltip that is `delayed` will its Overlay wait until a warm-up period of
+     * 1000ms has completed before opening. Once the warmup period has completed, all
+     * subsequent Overlays will open immediately. When no Overlays are opened, a
+     * cooldown period of 1000ms will begin. Once the cooldown has completed, the next
+     * Overlay to be opened will be subject to the warm-up period if provided that option.
+     */
+    delayed: boolean;
+    private dependencyManager;
+    /**
+     * Whether to prevent a self-managed Tooltip from responding to user input.
+     */
+    disabled: boolean;
+    /**
+     * Automatically bind to the parent element of the assigned `slot` or the parent element of the `luzmo-tooltip`.
+     * Without this, you must provide your own `overlay-trigger`.
+     */
+    selfManaged: boolean;
+    offset: number;
+    open: boolean;
+    overlayElement?: Overlay;
+    /**
+     * @type {"top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"}
+     * @attr
+     */
+    placement?: Placement;
+    tipElement: HTMLSpanElement;
+    tipPadding?: number;
+    private _variant;
+    get variant(): string;
+    set variant(variant: string);
+    private handleOpenOverlay;
+    protected handleCloseOverlay: () => void;
+    protected forwardTransitionEvent(event: TransitionEvent): void;
+    private get triggerElement();
+    render(): TemplateResult;
+    connectedCallback(): void;
+}
+export {};

package/components/unit-input/index.cjs

@@ -0,0 +1,43 @@
+/*! * 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";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../base-rtxi7uaR.cjs"),h=require("../state-WWHLNMRG.cjs"),d=require("@luzmo/icons"),x=require("../style-map-DH0jkl7s.cjs"),z="*,*: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-color-negative, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important;color:#fff!important}";var w=Object.defineProperty,s=(m,t,e,i)=>{for(var n=void 0,a=m.length-1,u;a>=0;a--)(u=m[a])&&(n=u(t,e,n)||n);return n&&w(t,e,n),n};const l={min:-99999999999,max:99999999999,step:1,default:0,debounce:250},p=class p extends o.LuzmoElement{constructor(){super(),this.isDecimal=!1,this.disabled=!1,this.readOnly=!1,this.inputWidth="",this.debounce=l.debounce,this.errors=[],this.setValue=t=>{this.waitForUpdate=!0,this.debounceTimeout&&clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(()=>{this.dispatchEvent(new CustomEvent("change",{detail:t,bubbles:!0,composed:!0}))},this.debounce||0)},this.setCorrectInitialValues()}transformToNumber(t,e){let i=t;return i=this.isDecimal?Number.parseFloat(t+""):Number.parseInt(t+"",10),i=Number.isNaN(i)?Number(e):Number(i),i}onInput(t){let e=new RegExp(/[^0-9+-]/g);this.isDecimal&&(e=new RegExp(/[^0-9.,+-]/g));const i=t.target.value.replace(e,"").replaceAll(",",".");t.target.value=i,this.errors=[];const n=this.isDecimal?Number.parseFloat(i+""):Number.parseInt(i+"",10);Number.isNaN(n)&&this.errors.push("Not a number"),n<this.min&&this.errors.length===0&&this.errors.push("Value is lower than minimum"),n>this.max&&this.errors.length===0&&this.errors.push("Value is higher than maximum"),this.errors.length===0?(this.validValue=n,this.value=this.validValue,this.setValue(this.value),this.setErrorStatus(!1)):this.setErrorStatus(!0)}setErrorStatus(t){var e,i;t?(e=this.renderRoot.querySelector(".unit-input-container"))==null||e.classList.add("has-error"):(this.errors=[],(i=this.renderRoot.querySelector(".unit-input-container"))==null||i.classList.remove("has-error"))}setDisabledUpDownStatus(){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(t){let e=this.validValue?this.transformToNumber(t,this.validValue):this.transformToNumber(t,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,l.min),this.max=this.transformToNumber(this.max,l.max),this.step=Math.abs(this.transformToNumber(this.step,l.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,l.default),this.createAndSetValidValue(this.value)}onKeydown(t){!this.disabled&&(t.key==="ArrowUp"||t.key==="ArrowDown")&&this.applyStep(t,t.key==="ArrowUp")}applyStep(t,e){var i,n,a,u,b,f;if(!this.disabled){t.preventDefault();const v=((a=(n=(i=this.validValue.toString())==null?void 0:i.split("."))==null?void 0:n[1])==null?void 0:a.length)??0,g=((f=(b=(u=this.step.toString())==null?void 0:u.split("."))==null?void 0:b[1])==null?void 0:f.length)??0,y=Math.max(v,g);let c=this.validValue+(e?this.step:-this.step);c=Number.parseFloat(c.toFixed(y)),this.createAndSetValidValue(c),this.setErrorStatus(!1),this.renderRoot.querySelector("input").value=this.validValue+"",this.setValue(this.validValue),this.setDisabledUpDownStatus()}}setPaddingRightOfInput(){const t=this.renderRoot.querySelector(".unit"),e=this.renderRoot.querySelector(".ticks"),i=this.unit?`calc(${t==null?void 0:t.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=i}updated(t){t.has("value")&&(this.setCorrectInitialValues(),this.waitForUpdate?this.waitForUpdate=!1:this.renderRoot.querySelector("input").value=this.value+"",this.setPaddingRightOfInput())}render(){return o.x`
+      <div style=${x.o(this.inputWidth?{width:this.inputWidth}:{})}>
+        <input
+          .min=${String(this.min)}
+          .max=${String(this.max)}
+          @input=${this.onInput}
+          @keydown=${this.onKeydown}
+        />
+        ${this.unit?o.x`<div class="unit">${this.unit}</div>`:""}
+        <div class="ticks">
+          <div
+            class="tick-up"
+            @click=${{handleEvent:t=>this.applyStep(t,!0)}}
+          >
+            ${d.luzmoIcon(d.luzmoAngleUp)}
+          </div>
+
+          <div
+            class="tick-down"
+            @click=${{handleEvent:t=>this.applyStep(t,!1)}}
+          >
+            ${d.luzmoIcon(d.luzmoAngleDown)}
+          </div>
+        </div>
+      </div>
+    `}};p.styles=o.r(z);let r=p;s([o.n({type:Number,reflect:!0,attribute:"value"})],r.prototype,"value");s([o.n({type:Number,reflect:!0,attribute:"default"})],r.prototype,"default");s([o.n({type:String,reflect:!0,attribute:"placeholder"})],r.prototype,"placeholder");s([o.n({type:String,reflect:!0,attribute:"unit"})],r.prototype,"unit");s([o.n({type:Number,reflect:!0,attribute:"min"})],r.prototype,"min");s([o.n({type:Number,reflect:!0,attribute:"max"})],r.prototype,"max");s([o.n({type:Number,reflect:!0,attribute:"step"})],r.prototype,"step");s([o.n({type:Boolean,reflect:!0,attribute:"isDecimal"})],r.prototype,"isDecimal");s([o.n({type:Boolean,reflect:!0,attribute:"disabled"})],r.prototype,"disabled");s([o.n({type:Boolean,reflect:!0,attribute:"readOnly"})],r.prototype,"readOnly");s([o.n({type:String,reflect:!0,attribute:"inputWidth"})],r.prototype,"inputWidth");s([o.n({type:Number,reflect:!0,attribute:"debounce"})],r.prototype,"debounce");s([h.r()],r.prototype,"errors");s([h.r()],r.prototype,"validValue");s([h.r()],r.prototype,"waitForUpdate");customElements.get("luzmo-unit-input")||customElements.define("luzmo-unit-input",r);exports.LuzmoUnitInput=r;

package/components/unit-input/index.d.ts

@@ -0,0 +1,7 @@
+import { LuzmoUnitInput } from './unit-input';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-unit-input': LuzmoUnitInput;
+    }
+}
+export { LuzmoUnitInput } from './unit-input';

package/components/unit-input/index.js

@@ -0,0 +1,183 @@
+/*! * 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.
+ * */
+import { L as w, r as k, x as f, n as u } from "../base-CxUap9HL.js";
+import { r as m } from "../state-D8vot9IB.js";
+import { luzmoIcon as z, luzmoAngleUp as S, luzmoAngleDown as V } from "@luzmo/icons";
+import { o as N } from "../style-map-CoBJRbvu.js";
+const y = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const s = document.createElement("style");
+    s.setAttribute("data-luzmo-vars", ""), s.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-color-disabled);--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-color-negative: #ca221c;--luzmo-color-negative-hover: #b3241f;--luzmo-color-negative-down: #9f231f;--luzmo-color-negative-focus: #b3241f;--luzmo-color-negative-rgb: 202, 34, 28;--luzmo-color-positive: rgb(20, 150, 101);--luzmo-color-positive-hover: rgb(17, 128, 86);--luzmo-color-positive-down: rgb(16, 105, 71);--luzmo-color-positive-focus: rgb(17, 128, 86);--luzmo-color-positive-rgb: 20, 150, 101;--luzmo-color-selected: rgb(110, 110, 110);--luzmo-color-selected-hover: rgb(70, 70, 70);--luzmo-color-selected-down: rgb(40, 40, 40);--luzmo-color-selected-focus: rgb(70, 70, 70);--luzmo-color-selected-hard: #1e1e1e;--luzmo-color-selected-hard-hover: rgb(0, 0, 0);--luzmo-color-selected-hard-down: rgb(0, 0, 0);--luzmo-color-selected-hard-focus: rgb(0, 0, 0);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #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(s);
+  }
+};
+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-color-negative, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-color-negative, red)!important;background-color:var(--luzmo-color-negative, red)!important;color:#fff!important}";
+var E = Object.defineProperty, i = (s, o, e, t) => {
+  for (var l = void 0, a = s.length - 1, n; a >= 0; a--)
+    (n = s[a]) && (l = n(o, e, l) || l);
+  return l && E(o, e, l), l;
+};
+const d = {
+  min: -99999999999,
+  max: 99999999999,
+  step: 1,
+  default: 0,
+  debounce: 250
+}, p = class p extends w {
+  constructor() {
+    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: o,
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      }, this.debounce || 0);
+    }, this.setCorrectInitialValues();
+  }
+  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(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(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() {
+    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(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, 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(o) {
+    !this.disabled && (o.key === "ArrowUp" || o.key === "ArrowDown") && this.applyStep(o, o.key === "ArrowUp");
+  }
+  applyStep(o, e) {
+    var t, l, a, n, h, b;
+    if (!this.disabled) {
+      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 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(o) {
+    o.has("value") && (this.setCorrectInitialValues(), this.waitForUpdate ? this.waitForUpdate = !1 : this.renderRoot.querySelector("input").value = this.value + "", this.setPaddingRightOfInput());
+  }
+  render() {
+    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 ? f`<div class="unit">${this.unit}</div>` : ""}
+        <div class="ticks">
+          <div
+            class="tick-up"
+            @click=${{
+      handleEvent: (o) => this.applyStep(o, !0)
+    }}
+          >
+            ${z(S)}
+          </div>
+
+          <div
+            class="tick-down"
+            @click=${{
+      handleEvent: (o) => this.applyStep(o, !1)
+    }}
+          >
+            ${z(V)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+p.styles = k(R);
+let r = p;
+i([
+  u({ type: Number, reflect: !0, attribute: "value" })
+], r.prototype, "value");
+i([
+  u({ type: Number, reflect: !0, attribute: "default" })
+], r.prototype, "default");
+i([
+  u({ type: String, reflect: !0, attribute: "placeholder" })
+], r.prototype, "placeholder");
+i([
+  u({ type: String, reflect: !0, attribute: "unit" })
+], r.prototype, "unit");
+i([
+  u({ type: Number, reflect: !0, attribute: "min" })
+], r.prototype, "min");
+i([
+  u({ type: Number, reflect: !0, attribute: "max" })
+], r.prototype, "max");
+i([
+  u({ type: Number, reflect: !0, attribute: "step" })
+], r.prototype, "step");
+i([
+  u({ type: Boolean, reflect: !0, attribute: "isDecimal" })
+], r.prototype, "isDecimal");
+i([
+  u({ type: Boolean, reflect: !0, attribute: "disabled" })
+], r.prototype, "disabled");
+i([
+  u({ type: Boolean, reflect: !0, attribute: "readOnly" })
+], r.prototype, "readOnly");
+i([
+  u({ type: String, reflect: !0, attribute: "inputWidth" })
+], r.prototype, "inputWidth");
+i([
+  u({ 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 {
+  r as LuzmoUnitInput
+};

package/components/unit-input/unit-input.d.ts

@@ -0,0 +1,33 @@
+import { LuzmoElement } from '../../utils/base';
+export declare class LuzmoUnitInput extends LuzmoElement {
+    static styles: import("lit").CSSResult;
+    value: number;
+    default: number;
+    placeholder: string;
+    unit: string;
+    min: number;
+    max: number;
+    step: number;
+    isDecimal: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    inputWidth: string;
+    debounce: number;
+    debounceTimeout: any;
+    errors: string[];
+    validValue: number;
+    waitForUpdate: boolean;
+    private transformToNumber;
+    private onInput;
+    private setErrorStatus;
+    setDisabledUpDownStatus(): void;
+    private createAndSetValidValue;
+    private setCorrectInitialValues;
+    private onKeydown;
+    private applyStep;
+    private setValue;
+    private setPaddingRightOfInput;
+    constructor();
+    protected updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/components/when-CDK1Tt5Y.js

@@ -0,0 +1,28 @@
+/*! * 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.
+ * */
+/**
+ * @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);
+}
+export {
+  o as n
+};