@luzmo/lucero 1.0.1-alpha.40 → 1.0.1-alpha.43

package/index.d.ts

@@ -7,6 +7,8 @@ export * from './components/avatar';
 export * from './components/button';
 export * from './components/button-group';
 export * from './components/calendar';
+export * from './components/chat-message';
+export * from './components/chat-message-group';
 export * from './components/checkbox';
 export * from './components/color-area';
 export * from './components/color-field';
@@ -33,6 +35,7 @@ export * from './components/picker';
 export * from './components/picker-button';
 export * from './components/popover';
 export * from './components/progress-circle';
+export * from './components/prompt-box';
 export * from './components/radio';
 export * from './components/search';
 export * from './components/select';
@@ -44,5 +47,4 @@ export * from './components/tags';
 export * from './components/text-field';
 export * from './components/toast';
 export * from './components/tooltip';
-export * from './components/unit-input';
 export * from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luzmo/lucero",
-  "version": "1.0.1-alpha.40",
+  "version": "1.0.1-alpha.43",
   "homepage": "https://luzmo.com",
   "description": "Lucero - The design system for Luzmo",
   "type": "module",
@@ -68,6 +68,18 @@
       "import": "./components/calendar/index.js",
       "require": "./components/calendar/index.cjs"
     },
+    "./chat-message": {
+      "types": "./components/chat-message/index.d.ts",
+      "node": "./components/chat-message/index.js",
+      "import": "./components/chat-message/index.js",
+      "require": "./components/chat-message/index.cjs"
+    },
+    "./chat-message-group": {
+      "types": "./components/chat-message-group/index.d.ts",
+      "node": "./components/chat-message-group/index.js",
+      "import": "./components/chat-message-group/index.js",
+      "require": "./components/chat-message-group/index.cjs"
+    },
     "./checkbox": {
       "types": "./components/checkbox/index.d.ts",
       "node": "./components/checkbox/index.js",
@@ -224,6 +236,12 @@
       "import": "./components/progress-circle/index.js",
       "require": "./components/progress-circle/index.cjs"
     },
+    "./prompt-box": {
+      "types": "./components/prompt-box/index.d.ts",
+      "node": "./components/prompt-box/index.js",
+      "import": "./components/prompt-box/index.js",
+      "require": "./components/prompt-box/index.cjs"
+    },
     "./radio": {
       "types": "./components/radio/index.d.ts",
       "node": "./components/radio/index.js",
@@ -290,12 +308,6 @@
       "import": "./components/tooltip/index.js",
       "require": "./components/tooltip/index.cjs"
     },
-    "./unit-input": {
-      "types": "./components/unit-input/index.d.ts",
-      "node": "./components/unit-input/index.js",
-      "import": "./components/unit-input/index.js",
-      "require": "./components/unit-input/index.cjs"
-    },
     "./utils": {
       "types": "./utils/index.d.ts",
       "node": "./components/utils.js",

package/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './focusable';
 export * from './platform';
 export * from './sized-mixin';
 export * from './streaming-listener';
+export * from './voice-recorder';

package/utils/voice-recorder.d.ts

@@ -0,0 +1,121 @@
+/**
+ * Voice Recorder Utility
+ * Provides audio recording functionality with waveform visualization support.
+ */
+export interface VoiceRecorderOptions {
+    /** Maximum recording duration in milliseconds (default: 300000 = 5 minutes) */
+    maxDuration?: number;
+    /** Audio bits per second (default: 128000) */
+    audioBitsPerSecond?: number;
+}
+export interface VoiceRecordingResult {
+    /** The recorded audio blob */
+    audioBlob: Blob;
+    /** Recording duration in milliseconds */
+    duration: number;
+    /** MIME type of the audio */
+    mimeType: string;
+}
+export type VoiceRecorderEventCallback<T = void> = (data: T) => void;
+/**
+ * VoiceRecorder class for handling audio recording with visualization support.
+ */
+export declare class VoiceRecorder {
+    private mediaRecorder;
+    private audioChunks;
+    private isRecording;
+    private stream;
+    private recordingStartTime;
+    private maxDuration;
+    private audioBitsPerSecond;
+    private mimeType;
+    private audioContext;
+    private analyser;
+    private animationFrame;
+    private onStartCallback?;
+    private onStopCallback?;
+    private onErrorCallback?;
+    private onAudioLevelCallback?;
+    private onDurationUpdateCallback?;
+    private durationInterval;
+    constructor(options?: VoiceRecorderOptions);
+    /**
+     * Check if the browser supports audio recording.
+     */
+    static isSupported(): boolean;
+    /**
+     * Get the best supported MIME type for recording.
+     */
+    private getSupportedMimeType;
+    /**
+     * Start audio recording.
+     * @returns Promise that resolves to true if recording started successfully.
+     */
+    startRecording(): Promise<boolean>;
+    /**
+     * Stop audio recording.
+     */
+    stopRecording(): void;
+    /**
+     * Cancel audio recording without emitting the result.
+     */
+    cancelRecording(): void;
+    /**
+     * Check if currently recording.
+     */
+    isCurrentlyRecording(): boolean;
+    /**
+     * Get recording duration in milliseconds.
+     */
+    getRecordingDuration(): number;
+    /**
+     * Set up audio analysis for waveform visualization.
+     */
+    private setupAudioAnalysis;
+    /**
+     * Start monitoring audio levels for visualization.
+     */
+    private startAudioLevelMonitoring;
+    /**
+     * Start duration update interval.
+     */
+    private startDurationUpdates;
+    /**
+     * Stop duration update interval.
+     */
+    private stopDurationUpdates;
+    /**
+     * Clean up resources.
+     */
+    private cleanup;
+    /**
+     * Destroy the recorder and clean up all resources.
+     */
+    destroy(): void;
+    /**
+     * Set callback for when recording starts.
+     */
+    onStart(callback: VoiceRecorderEventCallback): this;
+    /**
+     * Set callback for when recording stops with the result.
+     */
+    onStop(callback: VoiceRecorderEventCallback<VoiceRecordingResult>): this;
+    /**
+     * Set callback for recording errors.
+     */
+    onError(callback: VoiceRecorderEventCallback<string>): this;
+    /**
+     * Set callback for audio level updates (for waveform visualization).
+     * Level is normalized between 0 and 1.
+     */
+    onAudioLevel(callback: VoiceRecorderEventCallback<number>): this;
+    /**
+     * Set callback for duration updates (in milliseconds).
+     */
+    onDurationUpdate(callback: VoiceRecorderEventCallback<number>): this;
+    /**
+     * Format duration in milliseconds to MM:SS format.
+     */
+    static formatDuration(ms: number): string;
+}
+export default VoiceRecorder;

package/components/clear-button-Bjp7N52G.js

@@ -1,54 +0,0 @@
-/*! * 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 { luzmoIcon as e, luzmoClear12 as u, luzmoClear as i, luzmoClear14 as s } from "@luzmo/icons";
-import { unsafeCSS as b, html as a } from "lit";
-import { property as d } from "lit/decorators.js";
-import { S as v } from "./sized-mixin-cJbo3PKR.js";
-import { L as g } from "./button-base-B5uul3tZ.js";
-const h = ":host{font-size:var(--luzmo-clear-button-icon-size, var(--clear-button-icon-size));cursor:pointer;background-color:initial;background-color:var(--luzmo-clear-button-background-color, transparent);padding:var(--luzmo-clear-button-padding, var(--clear-button-padding));color:var(--luzmo-clear-button-icon-color, var(--clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover: hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover, var(--luzmo-clear-button-icon-color-hover, var(--clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--luzmo-clear-button-background-color-hover, var(--clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--luzmo-clear-button-icon-color-down, var(--clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--luzmo-clear-button-background-color-down, var(--clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within{color:var(--luzmo-clear-button-icon-color-key-focus, var(--clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--luzmo-clear-button-background-color-key-focus, var(--clear-button-background-color-key-focus))}:host([disabled]){--clear-button-icon-color: var( --luzmo-clear-button-icon-color-disabled, var(--disabled-content-color) );--clear-button-background-color: var( --luzmo-clear-button-background-color-disabled, transparent )}.fill{background-color:var(--luzmo-clear-button-background-color, var(--clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors: active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover: Highlight}}:host{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent;--clear-button-icon-size: var(--luzmo-font-size);--clear-button-padding: 0px;--clear-button-icon-color: var(--luzmo-font-color);--clear-button-icon-color-hover: var(--luzmo-font-color-hover);--clear-button-icon-color-down: var(--luzmo-font-color-down);--clear-button-icon-color-key-focus: var(--luzmo-font-color-focus)}:host([size=s]){--clear-button-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--clear-button-icon-size: var(--luzmo-font-size-l)}:host([size=xl]){--clear-button-icon-size: var(--luzmo-font-size-xl)}:host .luzmo-ClearButton--quiet{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent}:host([variant=overBackground]){--clear-button-icon-color: rgb(255, 255, 255);--clear-button-icon-color-hover: rgb(255, 255, 255);--clear-button-icon-color-down: rgb(255, 255, 255);--clear-button-icon-color-key-focus: rgb(255, 255, 255);--clear-button-background-color: transparent;--clear-button-background-color-hover: rgba(255, 255, 255, .25);--clear-button-background-color-down: rgba(255, 255, 255, .4);--clear-button-background-color-key-focus: rgba(255, 255, 255, .25)}:host([disabled]){--clear-button-icon-color: var(--luzmo-disabled-color);--clear-button-icon-color-hover: var(--luzmo-disabled-color);--clear-button-icon-color-down: var(--luzmo-disabled-color);--clear-button-background-color: transparent}:host{box-sizing:border-box}";
-var f = Object.defineProperty, z = (o, t, n, p) => {
-  for (var r = void 0, c = o.length - 1, l; c >= 0; c--)
-    (l = o[c]) && (r = l(t, n, r) || r);
-  return r && f(t, n, r), r;
-};
-const m = (o) => {
-  const t = o === "s" ? u : ["xl", "l"].includes(o) ? i : s;
-  return a` <div class="icon" slot="icon">${e(t)}</div> `;
-};
-class k extends v(g, {
-  noDefaultSize: !0
-}) {
-  constructor() {
-    super(...arguments), this.variant = "";
-  }
-  static get styles() {
-    return [...super.styles, b(h)];
-  }
-  get buttonContent() {
-    return [m(this.size)];
-  }
-  render() {
-    return a` <div class="fill">${super.render()}</div> `;
-  }
-}
-z([
-  d({ reflect: !0 })
-], k.prototype, "variant");
-export {
-  k as L
-};

package/components/clear-button-C39c3PH0.cjs

@@ -1,18 +0,0 @@
-/*! * 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";const c=require("@luzmo/icons"),l=require("lit"),i=require("lit/decorators.js"),s=require("./sized-mixin-DcvJLFeo.cjs"),b=require("./button-base-C7or8-FB.cjs"),d=":host{font-size:var(--luzmo-clear-button-icon-size, var(--clear-button-icon-size));cursor:pointer;background-color:initial;background-color:var(--luzmo-clear-button-background-color, transparent);padding:var(--luzmo-clear-button-padding, var(--clear-button-padding));color:var(--luzmo-clear-button-icon-color, var(--clear-button-icon-color));border:none;border-radius:100%;margin:0}.icon{margin-block:0;margin-inline:auto}@media (hover: hover){:host(:hover){color:var(--highcontrast-clear-button-icon-color-hover, var(--luzmo-clear-button-icon-color-hover, var(--clear-button-icon-color-hover)))}:host(:hover) .fill{background-color:var(--luzmo-clear-button-background-color-hover, var(--clear-button-background-color-hover))}}:host(:is(:active,[active])){color:var(--luzmo-clear-button-icon-color-down, var(--clear-button-icon-color-down))}:host(:is(:active,[active])) .fill{background-color:var(--luzmo-clear-button-background-color-down, var(--clear-button-background-color-down))}:host([focus-within]) .js-focus-within,:host(:focus-visible),:host:focus-within{color:var(--luzmo-clear-button-icon-color-key-focus, var(--clear-button-icon-color-key-focus))}:host([focus-within]) .js-focus-within .fill,:host(:focus-visible) .fill,:host:focus-within .fill{background-color:var(--luzmo-clear-button-background-color-key-focus, var(--clear-button-background-color-key-focus))}:host([disabled]){--clear-button-icon-color: var( --luzmo-clear-button-icon-color-disabled, var(--disabled-content-color) );--clear-button-background-color: var( --luzmo-clear-button-background-color-disabled, transparent )}.fill{background-color:var(--luzmo-clear-button-background-color, var(--clear-button-background-color));inline-size:100%;block-size:100%;border-radius:100%;justify-content:center;align-items:center;display:flex}:host([variant=overBackground]:focus-visible){outline:none}@media (forced-colors: active){:host:not(:disabled){--highcontrast-clear-button-icon-color-hover: Highlight}}:host{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent;--clear-button-icon-size: var(--luzmo-font-size);--clear-button-padding: 0px;--clear-button-icon-color: var(--luzmo-font-color);--clear-button-icon-color-hover: var(--luzmo-font-color-hover);--clear-button-icon-color-down: var(--luzmo-font-color-down);--clear-button-icon-color-key-focus: var(--luzmo-font-color-focus)}:host([size=s]){--clear-button-icon-size: var(--luzmo-font-size-s)}:host([size=l]){--clear-button-icon-size: var(--luzmo-font-size-l)}:host([size=xl]){--clear-button-icon-size: var(--luzmo-font-size-xl)}:host .luzmo-ClearButton--quiet{--clear-button-background-color: transparent;--clear-button-background-color-hover: transparent;--clear-button-background-color-down: transparent;--clear-button-background-color-key-focus: transparent}:host([variant=overBackground]){--clear-button-icon-color: rgb(255, 255, 255);--clear-button-icon-color-hover: rgb(255, 255, 255);--clear-button-icon-color-down: rgb(255, 255, 255);--clear-button-icon-color-key-focus: rgb(255, 255, 255);--clear-button-background-color: transparent;--clear-button-background-color-hover: rgba(255, 255, 255, .25);--clear-button-background-color-down: rgba(255, 255, 255, .4);--clear-button-background-color-key-focus: rgba(255, 255, 255, .25)}:host([disabled]){--clear-button-icon-color: var(--luzmo-disabled-color);--clear-button-icon-color-hover: var(--luzmo-disabled-color);--clear-button-icon-color-down: var(--luzmo-disabled-color);--clear-button-background-color: transparent}:host{box-sizing:border-box}";var v=Object.defineProperty,h=(o,t,a,z)=>{for(var r=void 0,n=o.length-1,e;n>=0;n--)(e=o[n])&&(r=e(t,a,r)||r);return r&&v(t,a,r),r};const g=o=>{const t=o==="s"?c.luzmoClear12:["xl","l"].includes(o)?c.luzmoClear:c.luzmoClear14;return l.html` <div class="icon" slot="icon">${c.luzmoIcon(t)}</div> `};class u extends s.SizedMixin(b.LuzmoButtonBase,{noDefaultSize:!0}){constructor(){super(...arguments),this.variant=""}static get styles(){return[...super.styles,l.unsafeCSS(d)]}get buttonContent(){return[g(this.size)]}render(){return l.html` <div class="fill">${super.render()}</div> `}}h([i.property({reflect:!0})],u.prototype,"variant");exports.LuzmoClearButton=u;

package/components/unit-input/index.cjs

@@ -1,43 +0,0 @@
-/*! * 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 c=require("lit"),o=require("lit/decorators.js"),d=require("@luzmo/icons"),z=require("lit/directives/style-map.js"),x=require("../base-5nDSSNeT.cjs"),w="*,*: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-hover);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";var k=Object.defineProperty,s=(m,t,e,i)=>{for(var a=void 0,n=m.length-1,u;n>=0;n--)(u=m[n])&&(a=u(t,e,a)||a);return a&&k(t,e,a),a};const l={min:-99999999999,max:99999999999,step:1,default:0,debounce:250},h=class h extends x.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 a=this.isDecimal?Number.parseFloat(i+""):Number.parseInt(i+"",10);Number.isNaN(a)&&this.errors.push("Not a number"),a<this.min&&this.errors.length===0&&this.errors.push("Value is lower than minimum"),a>this.max&&this.errors.length===0&&this.errors.push("Value is higher than maximum"),this.errors.length===0?(this.validValue=a,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,a,n,u,b,f;if(!this.disabled){t.preventDefault();const v=((n=(a=(i=this.validValue.toString())==null?void 0:i.split("."))==null?void 0:a[1])==null?void 0:n.length)??0,y=((f=(b=(u=this.step.toString())==null?void 0:u.split("."))==null?void 0:b[1])==null?void 0:f.length)??0,g=Math.max(v,y);let p=this.validValue+(e?this.step:-this.step);p=Number.parseFloat(p.toFixed(g)),this.createAndSetValidValue(p),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 c.html`
-      <div style=${z.styleMap(this.inputWidth?{width:this.inputWidth}:{})}>
-        <input
-          .min=${String(this.min)}
-          .max=${String(this.max)}
-          @input=${this.onInput}
-          @keydown=${this.onKeydown}
-        />
-        ${this.unit?c.html`<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>
-    `}};h.styles=c.unsafeCSS(w);let r=h;s([o.property({type:Number,reflect:!0,attribute:"value"})],r.prototype,"value");s([o.property({type:Number,reflect:!0,attribute:"default"})],r.prototype,"default");s([o.property({type:String,reflect:!0,attribute:"placeholder"})],r.prototype,"placeholder");s([o.property({type:String,reflect:!0,attribute:"unit"})],r.prototype,"unit");s([o.property({type:Number,reflect:!0,attribute:"min"})],r.prototype,"min");s([o.property({type:Number,reflect:!0,attribute:"max"})],r.prototype,"max");s([o.property({type:Number,reflect:!0,attribute:"step"})],r.prototype,"step");s([o.property({type:Boolean,reflect:!0,attribute:"isDecimal"})],r.prototype,"isDecimal");s([o.property({type:Boolean,reflect:!0,attribute:"disabled"})],r.prototype,"disabled");s([o.property({type:Boolean,reflect:!0,attribute:"readOnly"})],r.prototype,"readOnly");s([o.property({type:String,reflect:!0,attribute:"inputWidth"})],r.prototype,"inputWidth");s([o.property({type:Number,reflect:!0,attribute:"debounce"})],r.prototype,"debounce");s([o.state()],r.prototype,"errors");s([o.state()],r.prototype,"validValue");s([o.state()],r.prototype,"waitForUpdate");customElements.get("luzmo-unit-input")||customElements.define("luzmo-unit-input",r);exports.LuzmoUnitInput=r;

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

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

package/components/unit-input/index.js

@@ -1,184 +0,0 @@
-/*! * 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 { unsafeCSS as w, html as f } from "lit";
-import { property as u, state as m } from "lit/decorators.js";
-import { luzmoIcon as z, luzmoAngleUp as k, luzmoAngleDown as S } from "@luzmo/icons";
-import { styleMap as V } from "lit/directives/style-map.js";
-import { a as N } from "../base-CdYjmV_8.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-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(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-hover);background:var(--background-color-alt-2)}.unit-input-container .ticks>div.disabled,.unit-input-container .ticks>div.disabled:hover{cursor:not-allowed;color:var(--luzmo-font-color-disabled)!important;background-color:var(--luzmo-background-color)}.unit-input-container .ticks>div.tick-up{border-bottom:var(--luzmo-border-width) solid var(--luzmo-border-color)}.unit-input-container.with-unit input{padding-right:2.25rem}.unit-input-container.has-error input{border-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .ticks{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important}.unit-input-container.has-error .tick-up,.unit-input-container.has-error .tick-down{border-color:var(--luzmo-negative-color, red)!important;background-color:var(--luzmo-negative-color, red)!important;color:#fff!important}";
-var E = Object.defineProperty, i = (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 N {
-  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=${V(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(k)}
-          </div>
-
-          <div
-            class="tick-down"
-            @click=${{
-      handleEvent: (o) => this.applyStep(o, !1)
-    }}
-          >
-            ${z(S)}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-};
-p.styles = w(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

@@ -1,33 +0,0 @@
-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>;
-}