@luzmo/lucero 0.0.4 → 0.0.6

package/components/toast/index.cjs

@@ -0,0 +1,51 @@
+/*! * 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");require("../close-button-CcD-aVqh.cjs");const d=require("../focus-visible-B0P9aY_G.cjs"),u=require("@luzmo/icons"),v="@media (forced-colors: active){:host{--highcontrast-toast-border-color: ButtonText;border:var(--luzmo-toast-border-width, var(--toast-border-width)) solid var(--highcontrast-toast-border-color, transparent)}}:host{box-sizing:border-box;min-block-size:var(--luzmo-toast-block-size, var(--toast-block-size));max-inline-size:var(--luzmo-toast-max-inline-size, var(--toast-max-inline-size));border-radius:var(--luzmo-toast-corner-radius, var(--toast-corner-radius));font-size:var(--luzmo-toast-font-size, var(--toast-font-size));font-weight:var(--luzmo-toast-font-weight, var(--toast-font-weight));-webkit-font-smoothing:antialiased;background-color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));color:var(--highcontrast-toast-background-color-default, var(--luzmo-toast-background-color-default, var(--toast-background-color-default)));overflow-wrap:anywhere;flex-direction:row;align-items:stretch;padding-inline-start:var(--luzmo-toast-spacing-start-edge-to-text-and-icon, var(--toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=info]){background-color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-informative-background-color-default, var(--luzmo-toast-informative-background-color-default, var(--toast-informative-background-color-default)))}:host([variant=positive]){background-color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-positive-background-color-default, var(--luzmo-toast-positive-background-color-default, var(--toast-positive-background-color-default)))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-icon, var(--toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--luzmo-toast-spacing-icon-to-text, var(--toast-spacing-icon-to-text))}.content,.type{color:var(--highcontrast-toast-text-and-icon-color, var(--luzmo-toast-text-and-icon-color, var(--toast-text-and-icon-color)))}.content{box-sizing:border-box;line-height:var(--luzmo-toast-line-height, var(--toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--luzmo-toast-spacing-top-edge-to-text, var(--toast-spacing-top-edge-to-text)) - var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start)));padding-block-end:calc(var(--luzmo-toast-spacing-bottom-edge-to-text, var(--toast-spacing-bottom-edge-to-text)) - var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--luzmo-toast-spacing-text-to-action-button-horizontal, var(--toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--luzmo-toast-line-height-cjk, var(--toast-line-height-cjk))}.buttons{border-inline-start-color:var(--luzmo-toast-divider-color, var(--toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--luzmo-toast-spacing-top-edge-to-divider, var(--toast-spacing-top-edge-to-divider));margin-block-end:var(--luzmo-toast-spacing-bottom-edge-to-divider, var(--toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button));display:flex}.buttons .luzmo-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--luzmo-toast-spacing-block-start, var(--toast-spacing-block-start));padding-block-end:var(--luzmo-toast-spacing-block-end, var(--toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)),:host([dir=rtl]) .body ::slotted([slot=action]){margin-inline-end:var(--luzmo-toast-spacing-text-and-action-button-to-divider, var(--toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--luzmo-toast-spacing-close-button, var(--toast-spacing-close-button))}:host{--toast-background-color-default: rgb(80, 80, 80);--toast-font-weight: var(--luzmo-font-weight);--toast-font-size: var(--luzmo-font-size);--toast-corner-radius: var(--luzmo-border-radius);--toast-block-size: var(--luzmo-component-height);--toast-max-inline-size: 360px;--toast-border-width: var(--luzmo-border-width);--toast-line-height: var(--luzmo-line-height);--toast-line-height-cjk: 1.5;--toast-spacing-icon-to-text: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--toast-spacing-start-edge-to-text-and-icon: var(--luzmo-spacing-5);--toast-spacing-text-and-action-button-to-divider: var(--luzmo-spacing-5);--toast-spacing-top-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-bottom-edge-to-divider: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-icon: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-text-to-action-button-horizontal: var(--luzmo-spacing-5);--toast-spacing-close-button: var(--luzmo-spacing-3);--toast-spacing-block-start: var(--luzmo-spacing-3);--toast-spacing-block-end: var(--luzmo-spacing-3);--toast-spacing-top-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-spacing-bottom-edge-to-text: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--toast-negative-background-color-default: var(--luzmo-color-negative);--toast-positive-background-color-default: var(--luzmo-color-positive);--toast-informative-background-color-default: var(--luzmo-color-informative);--toast-text-and-icon-color: rgb(255, 255, 255);--toast-divider-color: rgba(255, 255, 255, .2)}:host{--overlay-animation-distance: var(--spacing-100);--overlay-animation-duration: var(--animation-duration-100);opacity:0;pointer-events:none;transition:transform var(--overlay-animation-duration) ease-in-out,opacity var(--overlay-animation-duration) ease-in-out,visibility 0s linear var(--overlay-animation-duration);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0s;visibility:visible}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default, var(--luzmo-toast-negative-background-color-default, var(--toast-negative-background-color-default)))}";var g=Object.defineProperty,h=Object.getOwnPropertyDescriptor,s=(r,t,a,n)=>{for(var i=n>1?void 0:n?h(t,a):t,l=r.length-1,c;l>=0;l--)(c=r[l])&&(i=(n?c(t,a,i):c(i))||i);return n&&i&&g(t,a,i),i};const m=["negative","positive","info"];class e extends d.FocusVisiblePolyfillMixin(o.LuzmoElement){constructor(){super(...arguments),this.open=!1,this._timeout=null,this._variant="",this.countdownStart=0,this.nextCount=-1,this.doCountdown=t=>{this.countdownStart||(this.countdownStart=performance.now()),t-this.countdownStart>this._timeout?(this.shouldClose(),this.countdownStart=0):this.countdown()},this.countdown=()=>{cancelAnimationFrame(this.nextCount),this.nextCount=requestAnimationFrame(this.doCountdown)},this.holdCountdown=()=>{this.stopCountdown(),this.addEventListener("focusout",this.resumeCountdown)},this.resumeCountdown=()=>{this.removeEventListener("focusout",this.holdCountdown),this.countdown()}}static get styles(){return[o.r(v)]}set timeout(t){const n=typeof t!==null&&t>0?Math.max(6e3,t):null,i=this.timeout;n&&this.countdownStart&&(this.countdownStart=performance.now()),this._timeout=n,this.requestUpdate("timeout",i)}get timeout(){return this._timeout}set variant(t){if(t===this.variant)return;const a=this.variant;m.includes(t)?(this.setAttribute("variant",t),this._variant=t):(this.removeAttribute("variant"),this._variant=""),this.requestUpdate("variant",a)}get variant(){return this._variant}renderIcon(t,a){switch(t){case"info":return o.x`
+          <luzmo-icon
+            .icon=${u.luzmoInfoCircleOutline}
+            label=${a||"Information"}
+            class="type"
+          ></luzmo-icon>
+        `;case"negative":return o.x`
+          <luzmo-icon
+            .icon=${u.luzmoAlertOutline}
+            label=${a||"Error"}
+            class="type"
+          ></luzmo-icon>
+        `;case"positive":return o.x`
+          <luzmo-icon
+            .icon=${u.luzmoCheckCircleOutline}
+            label=${a||"Success"}
+            class="type"
+          ></luzmo-icon>
+        `;default:return o.x``}}startCountdown(){this.countdown(),this.addEventListener("focusin",this.holdCountdown)}stopCountdown(){cancelAnimationFrame(this.nextCount),this.countdownStart=0}shouldClose(){this.dispatchEvent(new CustomEvent("close",{composed:!0,bubbles:!0,cancelable:!0}))&&this.close()}close(){this.open=!1}render(){return o.x`
+      ${this.renderIcon(this.variant,this.iconLabel)}
+      <div class="body" role="alert">
+        <div class="content">
+          <slot></slot>
+        </div>
+        <slot name="action"></slot>
+      </div>
+      <div class="buttons">
+        <luzmo-close-button
+          @click=${this.shouldClose}
+          label="Close"
+          static-color="white"
+        ></luzmo-close-button>
+      </div>
+    `}updated(t){super.updated(t),t.has("open")&&(this.open?this.timeout&&this.startCountdown():this.timeout&&this.stopCountdown()),t.has("timeout")&&(this.timeout!==null&&this.open?this.startCountdown():this.stopCountdown())}}s([o.n({type:Boolean,reflect:!0})],e.prototype,"open",2);s([o.n({type:Number})],e.prototype,"timeout",1);s([o.n({type:String})],e.prototype,"variant",1);s([o.n({type:String,attribute:"icon-label"})],e.prototype,"iconLabel",2);customElements.get("luzmo-toast")||customElements.define("luzmo-toast",e);exports.LuzmoToast=e;

package/components/toast/index.d.ts

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

package/{lib → components}/toast/index.js

@@ -15,9 +15,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as m, n as l } from "../base-nYalvNMy.js";
-import { unsafeCSS as g, html as i } from "lit";
-import "../close-button-CGISEF33.js";
+import { L as m, r as g, x as i, n as l } from "../base-CxUap9HL.js";
+import "../close-button-CzpdWCWI.js";
 import { F as v } from "../focus-visible-DBlJGoEW.js";
 import { luzmoCheckCircleOutline as p, luzmoAlertOutline as z, luzmoInfoCircleOutline as b } from "@luzmo/icons";
 const d = () => {

package/components/toast/toast.d.ts

@@ -0,0 +1,77 @@
+import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import { LuzmoElement } from '../../utils/base';
+import '../button/close-button';
+export declare const toastVariants: ToastVariants[];
+export type ToastVariants = 'negative' | 'positive' | 'info' | '';
+declare const LuzmoToast_base: typeof LuzmoElement;
+/**
+ * @element luzmo-toast
+ *
+ * @slot - The toast content
+ * @slot action - button element surfacing an action in the Toast
+ *
+ * @fires close - Announces that the Toast has been closed by the user or by its timeout.
+ */
+export declare class LuzmoToast extends LuzmoToast_base {
+    static get styles(): CSSResultArray;
+    /**
+     * The `open` property indicates whether the toast is visible or hidden.
+     *
+     * @param {Boolean} open
+     */
+    open: boolean;
+    /**
+     * When a timeout is provided, it represents the number of milliseconds from when
+     * the Toast was placed on the page before it will automatically dismiss itself.
+     *
+     * Accessibility concerns require that a Toast is available for at least 6000ms
+     * before being dismissed, so any timeout of less than 6000ms will be raised to
+     * that baseline.
+     *
+     * It is suggested that messages longer than 120 words should receive an additional
+     * 1000ms in their timeout for each additional 120 words in the message.
+     *
+     * For example, a message with 240 words should have a timeout of 7000ms,
+     * and a message with 360 words should have a timeout of 8000ms.
+     *
+     * @param timeout
+     * @default null
+     */
+    set timeout(timeout: number | null);
+    get timeout(): number | null;
+    private _timeout;
+    /**
+     * The variant applies specific styling when set to `negative`, `positive`, `info`, `error`, or `warning`.
+     *
+     * The variants `error` and `warning` are deprecated and should be replaced with `negative`.
+     *
+     * `variant` attribute is removed when not matching one of the above.
+     *
+     * @param variant
+     */
+    set variant(variant: ToastVariants);
+    get variant(): ToastVariants;
+    private _variant;
+    /**
+     * The `iconLabel` property is used to set the `label` attribute on the icon element. This is used to provide a text alternative for the icon to ensure accessibility.
+     *
+     * If the `iconLabel` property is not set, the icon will use the `variant` to dynamically set the `label`.
+     *
+     * @param {String} iconLabel
+     */
+    iconLabel?: string;
+    private renderIcon;
+    private countdownStart;
+    private nextCount;
+    private doCountdown;
+    private countdown;
+    private holdCountdown;
+    private resumeCountdown;
+    private startCountdown;
+    private stopCountdown;
+    private shouldClose;
+    close(): void;
+    protected render(): TemplateResult;
+    protected updated(changes: PropertyValues): void;
+}
+export {};

package/components/tooltip/index.cjs

@@ -0,0 +1,45 @@
+/*! * 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 l=require("../base-rtxi7uaR.cjs"),m=require("../query-BL-TJj7K.cjs"),u=require("../if-defined-C-8FyBSN.cjs"),c=require("../focusable-selectors-BgFlyFcY.cjs"),h=require("../dependency-manger-C5HCkMMB.cjs"),z=require("../sized-mixin-BAI6NiE2.cjs"),d="#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 g=Object.defineProperty,b=Object.getOwnPropertyDescriptor,r=(n,t,o,i)=>{for(var p=i>1?void 0:i?b(t,o):t,a=n.length-1,s;a>=0;a--)(s=n[a])&&(p=(i?s(t,o,p):s(p))||p);return i&&p&&g(t,o,p),p};class v extends HTMLElement{constructor(){super(),this._open=!1,this._placement="top",this.addEventListener("luzmo-opened",this.redispatchEvent),this.addEventListener("luzmo-closed",this.redispatchEvent)}redispatchEvent(t){t.stopPropagation(),this.tooltip.dispatchEvent(new CustomEvent(t.type,{bubbles:t.bubbles,composed:t.composed,detail:t.detail}))}get tooltip(){return this.getRootNode().host}static get observedAttributes(){return["open","placement"]}attributeChangedCallback(t,o,i){switch(t){case"open":{this.open=i!==null;break}case"placement":{this.placement=i;break}}}set open(t){this._open=t;const{tooltip:o}=this;o&&(o.open=t)}get open(){return this._open}set placement(t){this._placement=t;const{tooltip:o}=this;o&&(o.placement=t)}get placement(){return this._placement}get tipElement(){return this.tooltip.tipElement}}customElements.get("luzmo-tooltip-openable")||customElements.define("luzmo-tooltip-openable",v);class e extends z.SizedMixin(l.LuzmoElement,{defaultSize:"s"}){constructor(){super(...arguments),this.delayed=!1,this.dependencyManager=new h.DependencyManagerController(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[l.r(d)]}get variant(){return this._variant}set variant(t){if(t!==this.variant){if(["info","positive","negative"].includes(t)){this.setAttribute("variant",t),this._variant=t;return}this.removeAttribute("variant"),this._variant=""}}forwardTransitionEvent(t){this.dispatchEvent(new TransitionEvent(t.type,{bubbles:!0,composed:!0,propertyName:t.propertyName}))}get triggerElement(){var p;let t=this.assignedSlot||this,o=t.getRootNode();if(o===document)return null;let i=t.parentElement||o.host||o;for(;!((p=i==null?void 0:i.matches)!=null&&p.call(i,c.focusableSelector));){if(t=i.assignedSlot||i,o=t.getRootNode(),o===document)return null;i=t.parentElement||o.host||o}return i}render(){const t=l.x`
+      <luzmo-tooltip-openable
+        id="tooltip"
+        placement=${u.o(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"),Promise.resolve().then(()=>require("../overlay/index.cjs")),l.x`
+        <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}
+        >
+          ${t}
+        </luzmo-overlay>
+      `):t}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{if(!this.selfManaged)return;const t=this.overlayElement;if(t){const o=this.triggerElement;t.triggerElement=o}})}}r([l.n({type:Boolean})],e.prototype,"delayed",2);r([l.n({type:Boolean})],e.prototype,"disabled",2);r([l.n({type:Boolean,attribute:"self-managed"})],e.prototype,"selfManaged",2);r([l.n({type:Number})],e.prototype,"offset",2);r([l.n({type:Boolean,reflect:!0})],e.prototype,"open",2);r([m.e("luzmo-overlay")],e.prototype,"overlayElement",2);r([l.n({reflect:!0})],e.prototype,"placement",2);r([m.e("#tip")],e.prototype,"tipElement",2);r([l.n({type:Number})],e.prototype,"tipPadding",2);r([l.n({type:String})],e.prototype,"variant",1);customElements.get("luzmo-tooltip")||customElements.define("luzmo-tooltip",e);exports.Tooltip=e;

package/components/tooltip/index.d.ts

@@ -0,0 +1,8 @@
+export * from './tooltip';
+import { Tooltip } from './tooltip';
+declare global {
+    interface HTMLElementTagNameMap {
+        'luzmo-tooltip': Tooltip;
+    }
+}
+export { Tooltip } from './tooltip';

package/{lib → components}/tooltip/index.js

@@ -15,13 +15,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { L as z, n } from "../base-nYalvNMy.js";
-import { f as d } from "../focusable-selectors-B4YgbghQ.js";
-import { D as h } from "../dependency-manger-CEXvGQUV.js";
-import { S as g } from "../sized-mixin-Dl0KoEcV.js";
-import { unsafeCSS as b, html as s } from "lit";
+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 f } from "../if-defined-CYpcjGCb.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");
@@ -95,16 +94,16 @@ class x extends HTMLElement {
   }
 }
 customElements.get("luzmo-tooltip-openable") || customElements.define("luzmo-tooltip-openable", x);
-class i extends g(z, { defaultSize: "s" }) {
+class i extends f(z, { defaultSize: "s" }) {
   constructor() {
-    super(...arguments), this.delayed = !1, this.dependencyManager = new h(this), this.disabled = !1, this.selfManaged = !1, this.offset = 0, this.open = !1, this._variant = "", this.handleOpenOverlay = () => {
+    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 [b(v)];
+    return [d(v)];
   }
   get variant() {
     return this._variant;
@@ -134,7 +133,7 @@ class i extends g(z, { defaultSize: "s" }) {
       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, d)); ) {
+    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 */
@@ -146,7 +145,7 @@ class i extends g(z, { defaultSize: "s" }) {
     const o = s`
       <luzmo-tooltip-openable
         id="tooltip"
-        placement=${f(this.placement)}
+        placement=${h(this.placement)}
         @transitionrun=${this.forwardTransitionEvent}
         @transitionend=${this.forwardTransitionEvent}
         @transitioncancel=${this.forwardTransitionEvent}

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/{lib → components}/unit-input/index.js

@@ -15,11 +15,10 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-import { unsafeCSS as w, html as f } from "lit";
-import { L as k, n as u } from "../base-nYalvNMy.js";
-import { r as m } from "../state-BAO-13Bs.js";
+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-BqvQDFJt.js";
+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");
@@ -39,7 +38,7 @@ const d = {
   step: 1,
   default: 0,
   debounce: 250
-}, p = class p extends k {
+}, 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(() => {
@@ -131,7 +130,7 @@ const d = {
     `;
   }
 };
-p.styles = w(R);
+p.styles = k(R);
 let r = p;
 i([
   u({ type: Number, reflect: !0, attribute: "value" })

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/index.d.ts

@@ -0,0 +1,39 @@
+export * from './components/accordion';
+export * from './components/action-bar';
+export * from './components/action-button';
+export * from './components/action-group';
+export * from './components/action-menu';
+export * from './components/avatar';
+export * from './components/button';
+export * from './components/button-group';
+export * from './components/checkbox';
+export * from './components/color-area';
+export * from './components/color-field';
+export * from './components/color-handle';
+export * from './components/color-loupe';
+export * from './components/color-menu';
+export * from './components/color-picker';
+export * from './components/color-slider';
+export * from './components/divider';
+export * from './components/field-group';
+export * from './components/field-label';
+export * from './components/icon';
+export * from './components/infield-button';
+export * from './components/label';
+export * from './components/legend-position';
+export * from './components/menu';
+export * from './components/multi-language-field';
+export * from './components/number-field';
+export * from './components/overlay';
+export * from './components/picker';
+export * from './components/popover';
+export * from './components/progress-circle';
+export * from './components/radio';
+export * from './components/search';
+export * from './components/slider';
+export * from './components/swatch';
+export * from './components/switch';
+export * from './components/tags';
+export * from './components/text-field';
+export * from './components/tooltip';
+export * from './components/unit-input';