@luzmo/lucero 0.0.16 → 0.0.17

package/components/text-field-CvKSS59x.js

@@ -1,313 +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 { T as h, E as u, r as m, x as c, n as o } from "./base-CawdqE7p.js";
-import { r as x } from "./state-CYxk12SV.js";
-import { e as g } from "./query-D_KR_GUc.js";
-import { o as a } from "./if-defined-BSAr_4u4.js";
-import { e as b, i as z, t as s } from "./directive-oAbCiebi.js";
-import { f as y, m as k } from "./directive-helpers-nlQRAaQt.js";
-import { luzmoIcon as v, luzmoAlert as w, luzmoCheck as q } from "@luzmo/icons";
-import { F as $ } from "./focusable-cj2QhwDT.js";
-import { S as T } from "./sized-mixin-BxMraZLS.js";
-import { M as E } from "./manage-help-text-Cozl9Sgn.js";
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const _ = b(class extends z {
-  constructor(l) {
-    if (super(l), l.type !== s.PROPERTY && l.type !== s.ATTRIBUTE && l.type !== s.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!y(l)) throw Error("`live` bindings can only contain a single expression");
-  }
-  render(l) {
-    return l;
-  }
-  update(l, [e]) {
-    if (e === h || e === u) return e;
-    const r = l.element, n = l.name;
-    if (l.type === s.PROPERTY) {
-      if (e === r[n]) return h;
-    } else if (l.type === s.BOOLEAN_ATTRIBUTE) {
-      if (!!e === r.hasAttribute(n)) return h;
-    } else if (l.type === s.ATTRIBUTE && r.getAttribute(n) === e + "") return h;
-    return k(l), e;
-  }
-}), S = '#text-field{--luzmo-text-field-input-line-height: var( --luzmo-text-field-height, var(--text-field-height) );text-overflow:ellipsis;inline-size:var(--luzmo-text-field-width, 240px);grid-template-rows:auto auto auto;grid-template-columns:auto auto;margin:0;display:inline-grid;position:relative;overflow:visible}:host([quiet]) #text-field:after{content:"";pointer-events:none;inline-size:100%;block-size:var(--luzmo-text-field-focus-indicator-width, 2px);position:absolute;inset-block-end:calc((var(--luzmo-text-field-focus-indicator-gap, 2px) + var(--luzmo-text-field-focus-indicator-width, 2px)) * -1);inset-inline-start:0}:host([quiet][focused]) #text-field:after{background-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)))}:host([quiet][invalid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)))}:host([quiet][valid]) #text-field .input{padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)))}:host([invalid]) #text-field .icon,:host([valid]) #text-field .icon{pointer-events:all;grid-area:2/2;margin-inline-start:auto;position:absolute;inset-block-start:0;display:flex;align-items:center;justify-content:center}#text-field.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([valid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid));color:var(--highcontrast-text-field-icon-color-valid, var(--luzmo-text-field-icon-color-valid, var(--luzmo-color-positive)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-valid, var(--text-field-icon-spacing-block-valid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid))}:host([invalid]) #text-field .icon{font-size:var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid));color:var(--highcontrast-text-field-icon-color-invalid, var(--luzmo-text-field-icon-color-invalid, var(--luzmo-color-negative)));inset-block-start:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-block-end:var(--luzmo-text-field-icon-spacing-block-invalid, var(--text-field-icon-spacing-block-invalid));inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid))}:host([disabled]) #text-field .icon,:host([readonly]) #text-field .icon{color:#0000}:host([quiet]) .icon{padding-inline-end:0}:host([quiet][valid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-valid, 0px)}:host([quiet][invalid]) .icon{inset-inline-end:var(--luzmo-text-field-icon-spacing-inline-end-quiet-invalid, 0px)}#text-field .luzmo-field-label{grid-area:1/1/auto/span 1;margin-block-end:var(--luzmo-text-field-label-spacing-block, 0px)}:host([quiet]) .luzmo-field-label{margin-block-end:var(--luzmo-text-field-label-spacing-block-quiet, var(--text-field-label-spacing-block-quiet))}:host([disabled]) .luzmo-field-label{color:var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled))}#text-field .luzmo-help-text{grid-area:3/1/auto/span 2;margin-block-start:var(--luzmo-text-field-helptext-spacing-block, 0px)}.luzmo-text-field-characterCount{inline-size:auto;font-size:var(--luzmo-text-field-character-count-font-size, var(--text-field-character-count-font-size));font-family:var(--luzmo-text-field-character-count-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-character-count-font-weight, var(--luzmo-font-weight));grid-area:1/2/auto/span 1;justify-content:flex-end;align-items:flex-end;margin-block-end:var(--luzmo-text-field-character-count-spacing-block, var(--text-field-character-count-spacing-block));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline, 12px);margin-inline-end:0;padding-inline-end:calc(var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius)) / 2);display:inline-flex}:host([quiet]) .luzmo-text-field-characterCount{margin-block-end:var(--luzmo-text-field-character-count-spacing-block-quiet, var(--text-field-character-count-spacing-block-quiet))}.input{text-align:var(--luzmo-text-field-text-align, start);line-height:var(--luzmo-text-field-input-line-height);box-sizing:border-box;inline-size:100%;min-inline-size:var(--luzmo-text-field-min-width, 1.5);block-size:var(--luzmo-text-field-height, var(--text-field-height));padding-block-start:calc(var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-block-end:calc(var(--luzmo-text-field-spacing-block-end, var(--luzmo-spacing-3)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));padding-inline:calc(var(--luzmo-text-field-spacing-inline, var(--text-field-spacing-inline)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)));vertical-align:top;background-color:var(--luzmo-text-field-background-color, var(--luzmo-background-color));border-color:var(--highcontrast-text-field-border-color, var(--luzmo-text-field-border-color, var(--luzmo-border-color)));border-style:solid;border-width:var(--luzmo-text-field-border-width, var(--luzmo-border-width));border-radius:var(--luzmo-text-field-corner-radius, var(--luzmo-border-radius));transition:border-color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-text-color-default, var(--luzmo-font-color)));text-overflow:ellipsis;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;grid-area:2/1/auto/span 2;margin:0}:host([type=number]) .input{-moz-appearance:text-field}:host([type=number]) .input::-webkit-inner-spin-button,:host([type=number]) .input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input:-moz-ui-invalid{box-shadow:none}.input::placeholder{opacity:1;font-size:var(--luzmo-text-field-placeholder-font-size, var(--text-field-placeholder-font-size));font-family:var(--luzmo-text-field-font-family, var(--luzmo-font-family));font-weight:var(--luzmo-text-field-font-weight, var(--luzmo-font-weight));color:var(--highcontrast-text-field-text-color-default, var(--luzmo-text-field-placeholder-text-color-default, var(--luzmo-font-color-disabled)));transition:color var(--luzmo-text-field-animation-duration, var(--luzmo-animation-duration)) ease-in-out}.input:lang(ja)::placeholder,.input:lang(ko)::placeholder,.input:lang(zh)::placeholder{font-style:normal}:host([focused]) .input,.input:focus{border-color:var(--highcontrast-text-field-border-color-focus, var(--luzmo-text-field-border-color-focus, var(--luzmo-primary)));color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-text-color-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder,.input:focus::placeholder{color:var(--highcontrast-text-field-text-color-focus, var(--luzmo-text-field-placeholder-text-color-focus, var(--luzmo-color-disabled)))}:host([focused]) .input{border-color:var(--highcontrast-text-field-border-color-keyboard-focus, var(--luzmo-text-field-border-color-keyboard-focus, var(--luzmo-primary)));outline:var(--luzmo-text-field-focus-indicator-width, 0) solid;outline-color:var(--highcontrast-text-field-focus-indicator-color, var(--luzmo-text-field-focus-indicator-color, var(--luzmo-color-informative)));outline-offset:var(--luzmo-text-field-focus-indicator-gap, 2px);color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-text-color-keyboard-focus, var(--luzmo-font-color-hard)))}:host([focused]) .input::placeholder{color:var(--highcontrast-text-field-text-color-keyboard-focus, var(--luzmo-text-field-placeholder-text-color-keyboard-focus, var(--luzmo-color-disabled)))}:host([valid]) .input{color:var(--highcontrast-text-field-text-color-valid, var(--luzmo-text-field-text-color-valid, var(--luzmo-font-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-valid, var(--text-field-icon-spacing-inline-start-valid)) + var(--luzmo-text-field-icon-size-valid, var(--text-field-icon-size-valid)) + var(--luzmo-text-field-icon-spacing-inline-end-valid, var(--text-field-icon-spacing-inline-end-valid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input{color:var(--highcontrast-text-field-text-color-invalid, var(--luzmo-text-field-text-color-invalid, var(--luzmo-font-color)));border-color:var(--highcontrast-text-field-border-color-invalid-default, var(--luzmo-text-field-border-color-invalid-default, var(luzmo-danger-color)));padding-inline-end:calc(var(--luzmo-text-field-icon-spacing-inline-start-invalid, var(--text-field-icon-spacing-inline-start-invalid)) + var(--luzmo-text-field-icon-size-invalid, var(--text-field-icon-size-invalid)) + var(--luzmo-text-field-icon-spacing-inline-end-invalid, var(--text-field-icon-spacing-inline-end-invalid)) - var(--luzmo-text-field-border-width, var(--luzmo-border-width)))}:host([invalid]) .input:focus,:host([invalid][focused]) .input,:host([invalid]:focus) .input{border-color:var(--highcontrast-text-field-border-color-invalid-focus, var(--luzmo-text-field-border-color-invalid-focus, var(luzmo-danger-color)))}:host([invalid]) .input:focus-visible,:host([invalid][focused]) .input{border-color:var(--highcontrast-text-field-border-color-invalid-keyboard-focus, var(--luzmo-text-field-border-color-invalid-keyboard-focus, var(luzmo-danger-color)))}.input:disabled,:host([disabled]) #text-field .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}.input:disabled,.input:disabled::placeholder,:host([disabled]) #text-field .input,:host([disabled]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([border=none]) .input{border-width:0;outline:none}:host([quiet]) .input{padding-block-start:var(--luzmo-text-field-spacing-block-start, var(--luzmo-spacing-2));padding-inline:var(--luzmo-text-field-spacing-inline-quiet, 0px);background-color:initial;resize:none;border-block-start-width:0;border-inline-width:0;border-radius:0;outline:none;margin-block-end:var(--luzmo-text-field-spacing-block-quiet, 0px);overflow-y:hidden}:host([quiet][disabled]) .input,.input:disabled{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]) .input,:host([quiet][disabled]) .input::placeholder,.input:disabled,.input:disabled::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-color-disabled)))}.input:read-only,:host([readonly]) #text-field .input{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)));border-color:#0000;outline:none}.input:read-only::placeholder,:host([readonly]) #text-field .input::placeholder{color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-color-disabled)));background-color:initial}@media (hover: hover){.input:hover,#text-field:hover .input{border-color:var(--highcontrast-text-field-border-color-hover, var(--luzmo-text-field-border-color-hover, rgba(var(--luzmo-primary-rgb), .3)))}.input:hover,#text-field:hover .input{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-text-color-hover, var(--luzmo-font-color-hard)))}.input:hover::placeholder,#text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-hover, var(--luzmo-text-field-placeholder-text-color-hover, var(--luzmo-color-disabled)))}:host([focused]) .input:hover,:host([focused]) #text-field:hover .input,.input:focus:hover{border-color:var(--highcontrast-text-field-border-color-focus-hover, var(--luzmo-text-field-border-color-focus-hover, var(--luzmo-primary)))}:host([focused]) .input:hover,.input:focus:hover{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-text-color-focus-hover, var(--luzmo-font-color-hard)))}:host([focused]) .input:hover::placeholder,.input:focus:hover::placeholder{color:var(--highcontrast-text-field-text-color-focus-hover, var(--luzmo-text-field-placeholder-text-color-focus-hover, var(--luzmo-color-disabled)))}:host([invalid]) .input:hover:not(.is-disabled),:host([invalid]:hover):not(.is-disabled) .input{border-color:var(--highcontrast-text-field-border-color-invalid-hover, var(--luzmo-text-field-border-color-invalid-hover, var(luzmo-danger-color)))}:host([invalid]) .input:focus:hover,:host([invalid][focused]) .input:hover,:host([invalid]:focus) .input:hover{border-color:var(--highcontrast-text-field-border-color-invalid-focus-hover, var(--luzmo-text-field-border-color-invalid-focus-hover, var(luzmo-danger-color)))}:host([disabled]) #text-field:hover .input{background-color:var(--luzmo-text-field-background-color-disabled, var(--luzmo-background-color-disabled));resize:none;opacity:1;border-color:#0000}:host([quiet][disabled]:hover) .input,:host([disabled]) #text-field:hover .input,:host([disabled]) #text-field:hover .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([quiet][disabled]:hover) .input{background-color:initial;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled))}:host([quiet][disabled]:hover) .input::placeholder{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([readonly]) #text-field:hover .input{border-color:#0000;outline:none}:host([readonly]) #text-field:hover .input,:host([readonly]) #text-field:hover .input::placeholder{background-color:initial;color:var(--highcontrast-text-field-text-color-readonly, var(--luzmo-text-field-text-color-readonly, var(--luzmo-font-color)))}}.luzmo-text-field--sideLabel{grid-template-rows:auto auto;grid-template-columns:auto auto auto}.luzmo-text-field--sideLabel:after{grid-area:1/2/span 1/span 1}.luzmo-text-field--sideLabel .luzmo-field-label{grid-area:1/1/span 2/span 1;margin-inline-end:var(--luzmo-text-field-label-spacing-inline-side-label, var(--text-field-label-spacing-inline-side-label))}.luzmo-text-field--sideLabel .luzmo-text-field-characterCount{grid-area:1/3/auto/span 1;align-items:flex-start;margin-block-start:var(--luzmo-text-field-character-count-spacing-block-side, var(--text-field-character-count-spacing-block-side));margin-inline-start:var(--luzmo-text-field-character-count-spacing-inline-side, 12px)}.luzmo-text-field--sideLabel .luzmo-help-text{grid-area:2/2/auto/span 1}.luzmo-text-field--sideLabel .input,.luzmo-text-field--sideLabel .icon{grid-area:1/2/span 1/span 1}:host([multiline]){--luzmo-text-field-input-line-height: normal}:host([multiline]) .input{min-inline-size:var(--luzmo-text-area-min-inline-size, 112px);min-block-size:var(--luzmo-text-area-min-block-size, 56px);resize:inherit}:host([multiline][grows]) .input{grid-row:2}:host([multiline][grows]) .luzmo-text-field--sideLabel .input{grid-row:1}:host([multiline][quiet]) .input{min-block-size:var(--luzmo-text-area-min-block-size-quiet, var(--text-area-min-block-size-quiet));resize:none;overflow-y:hidden}@media (forced-colors: active){:host{--highcontrast-text-field-border-color-hover: Highlight;--highcontrast-text-field-border-color-focus: Highlight;--highcontrast-text-field-border-color-keyboard-focus: CanvasText;--highcontrast-text-field-focus-indicator-color: Highlight;--highcontrast-text-field-border-color-invalid-default: Highlight;--highcontrast-text-field-border-color-invalid-hover: Highlight;--highcontrast-text-field-border-color-invalid-focus: Highlight;--highcontrast-text-field-border-color-invalid-keyboard-focus: Highlight;--highcontrast-text-field-text-color-valid: CanvasText;--highcontrast-text-field-text-color-invalid: CanvasText}#text-field .input{--highcontrast-text-field-text-color-default: CanvasText;--highcontrast-text-field-text-color-hover: CanvasText;--highcontrast-text-field-text-color-keyboard-focus: CanvasText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}#text-field .input::placeholder{--highcontrast-text-field-text-color-default: GrayText;--highcontrast-text-field-text-color-hover: GrayText;--highcontrast-text-field-text-color-keyboard-focus: GrayText;--highcontrast-text-field-text-color-disabled: GrayText;--highcontrast-text-field-text-color-readonly: CanvasText}}:host{display:inline-flex;flex-direction:column;inline-size:var(--luzmo-text-field-width, 240px)}:host([multiline]){resize:both}:host([multiline][readonly]){resize:none}:host([disabled]:focus-visible){outline:none}#text-field{inline-size:100%}#text-field,textarea{resize:inherit}.input{min-inline-size:var(--luzmo-text-field-min-width, 1.5)}:host([focused]) .input{caret-color:var(--swc-test-caret-color);forced-color-adjust:var(--swc-test-forced-color-adjust)}#sizer{block-size:auto;word-break:break-word;opacity:0;white-space:pre-line}.icon,.icon-workflow{pointer-events:none}:host([multiline]) #text-field{display:inline-grid;--luzmo-text-field-input-line-height: normal}:host([multiline]) textarea{transition:box-shadow var(--luzmo-animation-duration) ease-in-out,border-color var(--luzmo-animation-duration) ease-in-out}:host([multiline]:not([quiet])) #text-field:after{box-shadow:none}:host([multiline][rows]) .input{block-size:auto;resize:none}:host([multiline][rows="1"]) .input{min-block-size:auto}:host([disabled][quiet]) #text-field .input,:host([disabled][quiet]) #text-field:hover .input,:host([quiet]) .input :disabled{background-color:#0000;border-color:var(--luzmo-text-field-border-color-disabled, var(--luzmo-border-color-disabled));color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([disabled]) #text-field .icon.icon-search,:host([readonly]) #text-field .icon.icon-search{color:var(--highcontrast-text-field-text-color-disabled, var(--luzmo-text-field-text-color-disabled, var(--luzmo-font-color-disabled)))}:host([multiline][grows]:not([quiet])) #text-field:after{grid-area:unset;min-block-size:calc(var(--luzmo-text-area-min-block-size, var(--luzmo-text-area-min-block-size)) + var(--luzmo-text-field-focus-indicator-gap, 2px) * 2)}:host([multiline][grows]:not([rows])) .input:not(#sizer){position:absolute;top:0;left:0;height:100%;resize:none;overflow:hidden}:host{--text-field-height: var(--luzmo-component-height);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 14px;--text-field-spacing-inline: 12px;--text-field-icon-size-invalid: 18px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 12px;--text-field-icon-spacing-inline-end-valid: 15px;--text-field-icon-spacing-block-invalid: 7px;--text-field-icon-spacing-block-valid: 4px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-4);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-4);--text-field-character-count-font-size: var(--luzmo-font-size-s);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 8px;--text-area-min-block-size-quiet: var(--luzmo-component-height)}:host([size=s]){--text-field-height: var(--luzmo-component-height-s);--text-field-label-spacing-block-quiet: -8px;--text-field-label-spacing-inline-side-label: 8px;--text-field-placeholder-font-size: 12px;--text-field-spacing-inline: 9px;--text-field-icon-size-invalid: 16px;--text-field-icon-size-valid: 10px;--text-field-icon-spacing-inline-end-invalid: 9px;--text-field-icon-spacing-inline-end-valid: 11px;--text-field-icon-spacing-block-invalid: 2px;--text-field-icon-spacing-block-valid: -1px;--text-field-icon-spacing-inline-start-invalid: var(--luzmo-spacing-3);--text-field-icon-spacing-inline-start-valid: var(--luzmo-spacing-3);--text-field-character-count-font-size: var(--luzmo-font-size-xs);--text-field-character-count-spacing-block: 5px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 4px;--text-area-min-block-size-quiet: var(--luzmo-component-height-s)}:host([size=l]){--text-field-height: var(--luzmo-component-height-l);--text-field-label-spacing-block-quiet: -12px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 16px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 20px;--text-field-icon-size-valid: 12px;--text-field-icon-spacing-inline-end-invalid: 15px;--text-field-icon-spacing-inline-end-valid: 17px;--text-field-icon-spacing-block-invalid: 10px;--text-field-icon-spacing-block-valid: 8px;--text-field-icon-spacing-inline-start-invalid: 15px;--text-field-icon-spacing-inline-start-valid: 15px;--text-field-character-count-font-size: var(--luzmo-font-size);--text-field-character-count-spacing-block: 9px;--text-field-character-count-spacing-block-quiet: -3px;--text-field-character-count-spacing-block-side: 11px;--text-area-min-block-size-quiet: var(--luzmo-component-height-l)}:host([size=xl]){--text-field-height: var(--luzmo-component-height-xl);--text-field-label-spacing-block-quiet: -15px;--text-field-label-spacing-inline-side-label: 12px;--text-field-placeholder-font-size: 18px;--text-field-spacing-inline: 15px;--text-field-icon-size-invalid: 22px;--text-field-icon-size-valid: 14px;--text-field-icon-spacing-inline-end-invalid: 18px;--text-field-icon-spacing-inline-end-valid: 20px;--text-field-icon-spacing-block-invalid: 12px;--text-field-icon-spacing-block-valid: 13px;--text-field-icon-spacing-inline-start-invalid: 18px;--text-field-icon-spacing-inline-start-valid: 18px;--text-field-character-count-font-size: var(--luzmo-font-size-l);--text-field-character-count-spacing-block: 11px;--text-field-character-count-spacing-block-quiet: -4px;--text-field-character-count-spacing-block-side: 14px;--text-area-min-block-size-quiet: var(--luzmo-component-height-xl)}';
-var B = Object.defineProperty, C = Object.getOwnPropertyDescriptor, t = (l, e, r, n) => {
-  for (var d = n > 1 ? void 0 : n ? C(e, r) : e, f = l.length - 1, p; f >= 0; f--)
-    (p = l[f]) && (d = (n ? p(e, r, d) : p(d)) || d);
-  return n && d && B(e, r, d), d;
-};
-const L = ["text", "url", "tel", "email", "password"];
-class i extends E(
-  T($, {
-    noDefaultSize: !0
-  })
-) {
-  constructor() {
-    super(...arguments), this.allowedKeys = "", this.focused = !1, this.invalid = !1, this.label = "", this.placeholder = "", this._type = "text", this.grows = !1, this.maxlength = -1, this.minlength = -1, this.multiline = !1, this.readonly = !1, this.rows = -1, this.valid = !1, this._value = "", this.quiet = !1, this.required = !1;
-  }
-  static get styles() {
-    return [m(S)];
-  }
-  set type(e) {
-    const r = this._type;
-    this._type = e, this.requestUpdate("type", r);
-  }
-  get type() {
-    return L.find((e) => e === this._type) ?? "text";
-  }
-  set value(e) {
-    if (e === this.value)
-      return;
-    const r = this._value;
-    this._value = e, this.requestUpdate("value", r);
-  }
-  get value() {
-    return this._value;
-  }
-  get focusElement() {
-    return this.inputElement;
-  }
-  /**
-   * Sets the start and end positions of the current selection.
-   *
-   * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the
-   * element's value is treated as pointing to the end of the value.
-   * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than
-   * the length of the element's value is treated as pointing to the end of the value.
-   * @param [selectionDirection="none"] A string indicating the direction in which the selection is considered to
-   * have been performed.
-   */
-  setSelectionRange(e, r, n = "none") {
-    this.inputElement.setSelectionRange(
-      e,
-      r,
-      n
-    );
-  }
-  /**
-   * Selects all the text.
-   */
-  select() {
-    this.inputElement.select();
-  }
-  handleInput(e) {
-    if (this.allowedKeys && this.inputElement.value && !new RegExp(`^[${this.allowedKeys}]*$`, "u").test(this.inputElement.value)) {
-      const d = this.inputElement.selectionStart - 1;
-      this.inputElement.value = this.value.toString(), this.inputElement.setSelectionRange(d, d);
-      return;
-    }
-    this.value = this.inputElement.value;
-  }
-  handleChange() {
-    this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  onFocus() {
-    this.focused = !this.readonly && !0;
-  }
-  onBlur(e) {
-    this.focused = !this.readonly && !1;
-  }
-  handleInputElementPointerdown() {
-  }
-  renderStateIcons() {
-    return this.invalid ? c`
-        <div id="invalid" class="icon">${v(w)}</div>
-      ` : this.valid ? c`
-        <div id="valid" class="icon">${v(q)}</div>
-      ` : u;
-  }
-  get displayValue() {
-    return this.value.toString();
-  }
-  // prettier-ignore
-  get renderMultiline() {
-    return c`
-      ${this.multiline && this.grows && this.rows === -1 ? c`
-          <div id="sizer" class="input" aria-hidden="true">${this.value}&#8203;
-          </div>
-        ` : u}
-      <!-- @ts-ignore -->
-      <textarea
-        name=${a(this.name || void 0)}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label || this.appliedLabel || this.placeholder}
-        aria-invalid=${a(this.invalid || void 0)}
-        class="input"
-        maxlength=${a(this.maxlength > -1 ? this.maxlength : void 0)}
-        minlength=${a(this.minlength > -1 ? this.minlength : void 0)}
-        title=${this.invalid ? "" : u}
-        pattern=${a(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${this.displayValue}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        rows=${a(this.rows > -1 ? this.rows : void 0)}
-        autocomplete=${a(this.autocomplete)}
-      ></textarea>
-    `;
-  }
-  get renderInput() {
-    return c`
-      <!-- @ts-ignore -->
-      <input
-        name=${a(this.name || void 0)}
-        type=${this.type}
-        aria-describedby=${this.helpTextId}
-        aria-label=${this.label || this.appliedLabel || this.placeholder}
-        aria-invalid=${a(this.invalid || void 0)}
-        class="input"
-        title=${this.invalid ? "" : u}
-        maxlength=${a(this.maxlength > -1 ? this.maxlength : void 0)}
-        minlength=${a(this.minlength > -1 ? this.minlength : void 0)}
-        pattern=${a(this.pattern)}
-        placeholder=${this.placeholder}
-        .value=${_(this.displayValue)}
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        @pointerdown=${this.handleInputElementPointerdown}
-        @focus=${this.onFocus}
-        @blur=${this.onBlur}
-        ?disabled=${this.disabled}
-        ?required=${this.required}
-        ?readonly=${this.readonly}
-        autocomplete=${a(this.autocomplete)}
-      />
-    `;
-  }
-  renderField() {
-    return c`
-      ${this.renderStateIcons()}
-      ${this.multiline ? this.renderMultiline : this.renderInput}
-    `;
-  }
-  render() {
-    return c`
-      <div id="text-field">${this.renderField()}</div>
-      ${this.renderHelpText(this.invalid)}
-    `;
-  }
-  update(e) {
-    (e.has("value") || e.has("required") && this.required) && this.updateComplete.then(() => {
-      this.checkValidity();
-    }), super.update(e);
-  }
-  checkValidity() {
-    let e = this.inputElement.checkValidity();
-    return (this.required || this.value && this.pattern) && ((this.disabled || this.multiline) && this.pattern && (e = new RegExp(`^${this.pattern}$`, "u").test(this.value.toString())), this.minlength !== void 0 && (e = e && this.value.toString().length >= this.minlength), this.valid = e, this.invalid = !e), e;
-  }
-}
-t([
-  x()
-], i.prototype, "appliedLabel", 2);
-t([
-  o({ attribute: "allowed-keys" })
-], i.prototype, "allowedKeys", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "focused", 2);
-t([
-  g(".input:not(#sizer)")
-], i.prototype, "inputElement", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "invalid", 2);
-t([
-  o()
-], i.prototype, "label", 2);
-t([
-  o({ type: String, reflect: !0 })
-], i.prototype, "name", 2);
-t([
-  o()
-], i.prototype, "placeholder", 2);
-t([
-  x()
-], i.prototype, "type", 1);
-t([
-  o({ attribute: "type", reflect: !0 })
-], i.prototype, "_type", 2);
-t([
-  o()
-], i.prototype, "pattern", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "grows", 2);
-t([
-  o({ type: Number })
-], i.prototype, "maxlength", 2);
-t([
-  o({ type: Number })
-], i.prototype, "minlength", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "multiline", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "readonly", 2);
-t([
-  o({ type: Number })
-], i.prototype, "rows", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "valid", 2);
-t([
-  o({ type: String })
-], i.prototype, "value", 1);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "quiet", 2);
-t([
-  o({ type: Boolean, reflect: !0 })
-], i.prototype, "required", 2);
-t([
-  o({ type: String, reflect: !0 })
-], i.prototype, "autocomplete", 2);
-class I extends i {
-  constructor() {
-    super(...arguments), this._value = "";
-  }
-  set value(e) {
-    if (e === this.value)
-      return;
-    const r = this._value;
-    this._value = e, this.requestUpdate("value", r);
-  }
-  get value() {
-    return this._value;
-  }
-}
-t([
-  o({ type: String })
-], I.prototype, "value", 1);
-export {
-  I as L,
-  i as a
-};