@lmvz-ds/components 0.12.5-alpha.1 → 0.12.5-alpha.5

package/dist/components/p-CkTUjPwD.js

@@ -1,2 +0,0 @@
-import{p as e,d as t,h as m,c as r,t as o}from"./p-DBeynNeU.js";import{E as n}from"./p-CN0JX9-m.js";import{R as a,A as l}from"./p-D7xthqTT.js";const s=()=>`@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-menuitem-h {   display: inline-flex;   flex-direction: row;   align-items: center;   justify-content: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router);   padding: var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)) var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));   cursor: pointer;    --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary, #545454);   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);    background: var(--lmvz-menuitem-background);   color: var(--lmvz-menuitem-color); } .sc-lmvz-menuitem-h:hover {   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); } .sc-lmvz-menuitem-h:active {   --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); } .sc-lmvz-menuitem-h:focus-visible {      z-index: 1; } [aria-expanded='true'].sc-lmvz-menuitem-h {   --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected, #f1f9fe);   --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected, #0e7ab4); }`;const i=e(class e extends a{get el(){return this}get role(){return"menuitem"}get ti(){return 0}lmvzActivation;constructor(e){super(false);if(e!==false){this.__registerHost()}this.lmvzActivation=t(this,"lmvzActivation");this.addController(new l(this));this.addController(new n(this))}render(){return m(r,{key:"44399be11122af25d05e5b3b5f05dd90a89fddc4"},m("slot",{key:"2809f9e89a0c38af4d3f1f17ad78397487370134"}))}static get style(){return s()}},[774,"lmvz-menuitem",{role:[2561],ti:[2562,"tabindex"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["lmvz-menuitem"];e.forEach((e=>{switch(e){case"lmvz-menuitem":if(!customElements.get(o(e))){customElements.define(o(e),i)}break}}))}export{i as L,c as d};
-//# sourceMappingURL=p-CkTUjPwD.js.map

package/dist/components/p-CkTUjPwD.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["lmvzMenuitemCss","LmvzMenuItem","__stencil_proxyCustomElement","ReactiveControllerHost","role","ti","lmvzActivation","constructor","registerHost","this","addController","AriaValidationController","ElementActivationController","render","h","Host","key"],"sources":["src/components/lmvz-menuitem/lmvz-menuitem.css?tag=lmvz-menuitem&encapsulation=scoped","src/components/lmvz-menuitem/lmvz-menuitem.tsx"],"sourcesContent":["@import url('../../styles/internal/define-layers.css');\n@import url('../../styles/fragments/_routerFont.css') layer(lmvz-ds.theme);\n\n:host {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  gap: var(--lmvz-component-input-md-gap-x);\n  border-radius: var(--lmvz-semantic-border-radius-lg);\n  font: var(--lmvz-typography-body-md);\n  padding: var(--lmvz-component-input-md-padding-y) var(--lmvz-component-input-md-padding-x);\n  cursor: pointer;\n\n  --lmvz-menuitem-color: var(--lmvz-semantic-color-int-on-tertiary);\n  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary);\n\n  background: var(--lmvz-menuitem-background);\n  color: var(--lmvz-menuitem-color);\n}\n\n:host(:hover) {\n  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-hover);\n}\n\n:host(:active) {\n  --lmvz-menuitem-background: var(--lmvz-semantic-color-int-tertiary-active);\n}\n:host(:focus-visible) {\n  /* work around siblings overlapping outline */\n  z-index: 1;\n}\n\n:host([aria-expanded='true']) {\n  --lmvz-menuitem-background: var(--lmvz-semantic-color-status-selected);\n  --lmvz-menuitem-color: var(--lmvz-semantic-color-status-on-selected);\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, h } from '@stencil/core';\nimport { ElementActivationController, type ElementActivationHost } from '../../utils/element-activation-controller';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/validation/aria-validation-controller';\n\n/**\n * A menu item component to be used within the `lmvz-header` component's navigation slots.\n */\n@Component({\n  tag: 'lmvz-menuitem',\n  styleUrl: './lmvz-menuitem.css',\n  scoped: true,\n})\nexport class LmvzMenuItem extends ReactiveControllerHost implements AriaValidationHost, ElementActivationHost {\n  @Element() el!: HTMLElement;\n\n  @Prop({ reflect: true }) get role() {\n    return 'menuitem';\n  }\n  @Prop({ reflect: true, attribute: 'tabindex' }) get ti() {\n    return 0;\n  }\n\n  @Event() lmvzActivation: EventEmitter<void>;\n\n  constructor() {\n    super();\n    this.addController(new AriaValidationController(this));\n    this.addController(new ElementActivationController(this));\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot>{/* The content of the menu item will be provided by the user */}</slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+IAAA,MAAMA,EAAkB,IAAM,q5D,MCajBC,EAAaC,EAAA,MAAAD,UAAQE,E,qBAGhC,QAA6BC,GAC3B,MAAO,U,CAET,MAAoDC,GAClD,OAAO,C,CAGAC,eAET,WAAAC,CAAAC,G,8FAEEC,KAAKC,cAAc,IAAIC,EAAyBF,OAChDA,KAAKC,cAAc,IAAIE,EAA4BH,MACpD,CAED,MAAAI,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/p-CpI4KFOu.js

@@ -1,2 +0,0 @@
-import{p as e,d as t,h as r,t as i}from"./p-DBeynNeU.js";import{c as o}from"./p-DMLRPGid.js";import{a}from"./p-B3JVFwO1.js";import{R as n,A as s}from"./p-D7xthqTT.js";const l=()=>`@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } .sc-lmvz-input-h {   display: block;   font-family: var(--lmvz-global-font-family-default, Router);      --input-radius: var(--lmvz-component-input-radius-default, 999px);   --input-bg: var(--lmvz-semantic-color-surface-input-primary, #ffffff);   --input-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0);   --input-border-color-hover: var(--lmvz-semantic-color-border-hover, #c7c7c7);   --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected, #0e7ab4);   --input-border-width: var(--lmvz-semantic-border-width-default, 1px);   --input-height: 48px;    --input-padding-x: 16px;    --label-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary, #000000);   --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary, #7a7a7a);   --error-text-color: var(--lmvz-semantic-color-status-on-danger, #e52a31);    --label-floating-scale: 0.85;    --label-minimized-top: -6px;   --label-minimized-bg: var(--input-bg);   --label-minimized-padding-x: 4px;       --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity, 40%); } .input-container.sc-lmvz-input {   display: flex;   flex-direction: column;   position: relative;   width: 100%; } .input-wrapper.sc-lmvz-input {   background-color: var(--input-bg);   border: var(--input-border-width) solid var(--input-border-color);   border-radius: var(--input-radius);   display: flex;   align-items: center;   height: var(--input-height);   padding: 0 var(--input-padding-x);   position: relative;   transition: border-color 0.2s ease;   gap: 8px;  } [disabled].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   opacity: var(--input-disabled-opacity);   cursor: not-allowed;   pointer-events: none; } .input-container.sc-lmvz-input:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--input-border-color-focus);   outline: 2px solid var(--input-border-color-focus);   outline-offset: 2px; }  .input-container.sc-lmvz-input:has(input:focus-visible) .input-wrapper.sc-lmvz-input {   box-shadow: 0 0 0 3px rgb(0 86 214 / 20%); }  [error].sc-lmvz-input-h .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color); } [error].sc-lmvz-input-h:focus-within .input-wrapper.sc-lmvz-input {   border-color: var(--error-text-color);   outline-color: var(--error-text-color); }  .sc-lmvz-input-h:not([disabled]) .input-wrapper.sc-lmvz-input:hover {   border-color: var(--input-border-color-hover); } .label-input-group.sc-lmvz-input {   position: relative;   flex-grow: 1;   display: flex;   align-items: center;   height: 100%; } label.sc-lmvz-input {   position: absolute;   left: 0;   top: 50%;   transform: translateY(-50%);   color: var(--label-color);   font-size: 14px;    font-family: Router, sans-serif;   font-weight: 400;   pointer-events: none;   transition: all 0.2s ease-out;   background-color: transparent;   padding: 0;   margin: 0;   line-height: normal;   white-space: nowrap; } label.floating.sc-lmvz-input {   top: 0;    transform: translateY(-50%) scale(0.85);    transform-origin: left top;   background-color: var(--label-minimized-bg);   padding: 0 var(--label-minimized-padding-x);   left: -2px;    color: var(--input-text-color);    font-weight: 500;  } .required-indicator.sc-lmvz-input {   color: var(--error-text-color);   margin-left: 2px; } input.sc-lmvz-input {   border: none;   background: transparent;   width: 100%;   height: 100%;   color: var(--input-text-color);   font-family: inherit;   font-size: 14px;   outline: none;   padding: 0;   margin: 0;   font-weight: 400;  } input.sc-lmvz-input::placeholder {   color: var(--label-color); } .helper-text.sc-lmvz-input {   padding-top: 8px;    padding-left: 12px;    font-size: 12px;   color: var(--helper-text-color);   font-family: Router, sans-serif;   font-weight: 500;  } .error-message.sc-lmvz-input {   padding-top: 8px;   padding-left: 12px;   font-size: 12px;   color: var(--error-text-color);   font-family: Router, sans-serif;   font-weight: 500; } .sc-lmvz-input-s > lmvz-button {      --lmvz-button-padding: 4px; }`;let c=0;const p=e(class e extends n{get el(){return this}lmvzInput;internals;nativeInputElement;inputId=`lmvz-input-${c++}`;initialValue="";nativeError=false;errorFromProp=false;get helperId(){return this.helperText?`${this.inputId}-helper`:undefined}get showErrorMessage(){return this.error&&Boolean(this.errorMessage)}get errorId(){return`${this.inputId}-error`}get describedBy(){const e=[];if(this.helperId)e.push(this.helperId);if(this.showErrorMessage)e.push(this.errorId);return e.length>0?e.join(" "):undefined}value;label;helperText;placeholder;disabled=false;readonly=false;required=false;name;type="text";errorMessage;autocomplete;inputmode;autocorrect;autocapitalize;spellcheck;autofocus=false;minlength;maxlength;pattern;min;max;step;form;get error(){return this.errorFromProp||this.nativeError}set error(e){this.errorFromProp=e}async setValue(e){const t=this.nativeInputElement;this.value=t.value=e??"";this.internals.setFormValue?.(e);this.lmvzInput.emit(e)}async focusInput(){this.nativeInputElement?.focus()}async blurInput(){this.nativeInputElement?.blur()}async select(){this.nativeInputElement?.select()}async checkValidity(){return this.nativeInputElement?.checkValidity?.()??false}async reportValidity(){return this.nativeInputElement?.reportValidity?.()??false}async getInputElement(){if(!this.nativeInputElement){await new Promise((e=>a(this.el,e)))}return Promise.resolve(this.nativeInputElement)}constructor(e){super(false);if(e!==false){this.__registerHost()}this.lmvzInput=t(this,"lmvzInput");this.internals=this.attachInternals();this.addController(new s(this,{reValidateOnPropChanges:true}))}componentWillLoad(){this.initialValue=this.value}formAssociatedCallback(e){if(!e)return;this.internals.setFormValue?.(this.value)}formResetCallback(){this.internals.setValidity({});this.setValue(this.initialValue)}formStateRestoreCallback(e){this.setValue(e)}handleValueChange(e){if(!this.nativeInputElement)return;const t=this.nativeInputElement.value===e;if(t)return;this.setValue(e)}handleDisabledChange(e){if(e&&this.nativeInputElement){this.nativeInputElement.blur()}}handleInput=e=>{const t=e.target;this.setValue(t.value)};handleChange=e=>{const t=e.target??this.nativeInputElement;this.updateNativeError(t)};handleFocus=()=>{};handleBlur=e=>{const t=e.target;t.reportValidity?.()};updateNativeError(e){const t=e??this.nativeInputElement;if(!t)return;this.nativeError=!(t.checkValidity?.()??true)}render(){const e=Boolean(this.value);const t=e||Boolean(this.placeholder);return r("div",{key:"402189a211eec970a9f5b8fcc551c6c3508bec05",class:o("input-container",{"interaction-filled":e})},r("div",{key:"1cbe6011f14774e1226406ef4fe301fd94338444",class:"input-wrapper"},r("slot",{key:"ea0f30124315c88e9721bb4457126bd6cf18110a",name:"before-input"}),r("div",{key:"f630b5f3a33a961f94b5a782b0ce6b4d49d1958c",class:"label-input-group"},r("label",{key:"dbb3fe066ebf93f7fcbe6973a1e37685d7206888",htmlFor:this.inputId,class:o({floating:t})},this.label,this.required&&r("span",{key:"7c1a2458b66becb45c730bfe3ff0c570293f702f",class:"required-indicator","aria-hidden":"true"}," ","*")),r("input",{key:"14b14457e200d20faf9053848662743dfe1cf417",id:this.inputId,ref:e=>this.nativeInputElement=e,type:this.type,min:this.min,max:this.max,step:this.step,value:this.value,name:this.name,placeholder:this.placeholder,disabled:this.disabled,readOnly:this.readonly,required:this.required,form:this.form,autocomplete:this.autocomplete,inputmode:this.inputmode,autocorrect:this.autocorrect,autocapitalize:this.autocapitalize,spellcheck:this.spellcheck,autofocus:this.autofocus,minlength:this.minlength,maxlength:this.maxlength,pattern:this.pattern,"aria-invalid":this.error?"true":"false","aria-required":this.required?"true":"false","aria-describedby":this.describedBy,"aria-errormessage":this.errorId,onInput:this.handleInput,onChange:this.handleChange,onFocus:this.handleFocus,onBlur:this.handleBlur})),r("slot",{key:"4b530738ff7404eb1bcecc10a0388570e2243cf3",name:"after-input"})),this.helperText&&r("div",{key:"f1a287047e9b4d58aa90af157d50b3d564555e9b",id:this.helperId,class:"helper-text"},this.helperText),this.showErrorMessage&&r("div",{key:"2a25c4a88a63363cdd814f1d4fead5e8a238621b",id:this.errorId,class:"error-message",role:"alert"},this.errorMessage))}static get formAssociated(){return true}static get watchers(){return{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}}static get style(){return l()}},[838,"lmvz-input",{value:[1025],label:[1],helperText:[1,"helper-text"],placeholder:[1],disabled:[516],readonly:[516],required:[516],name:[1],type:[1],errorMessage:[1,"error-message"],autocomplete:[1],inputmode:[1],autocorrect:[1],autocapitalize:[1],spellcheck:[4],autofocus:[4],minlength:[2],maxlength:[2],pattern:[1],min:[8],max:[8],step:[8],form:[1],error:[6660],nativeError:[32],setValue:[64],focusInput:[64],blurInput:[64],select:[64],checkValidity:[64],reportValidity:[64],getInputElement:[64]},undefined,{value:[{handleValueChange:0}],disabled:[{handleDisabledChange:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["lmvz-input"];e.forEach((e=>{switch(e){case"lmvz-input":if(!customElements.get(i(e))){customElements.define(i(e),p)}break}}))}export{p as L,u as d};
-//# sourceMappingURL=p-CpI4KFOu.js.map

package/dist/components/p-CpI4KFOu.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["lmvzInputCss","inputIdCounter","LmvzInput","__stencil_proxyCustomElement","ReactiveControllerHost","lmvzInput","internals","nativeInputElement","inputId","initialValue","nativeError","errorFromProp","helperId","this","helperText","undefined","showErrorMessage","error","Boolean","errorMessage","errorId","describedBy","ids","push","length","join","value","label","placeholder","disabled","readonly","required","name","type","autocomplete","inputmode","autocorrect","autocapitalize","spellcheck","autofocus","minlength","maxlength","pattern","min","max","step","form","setValue","newValue","input","setFormValue","emit","focusInput","focus","blurInput","blur","select","checkValidity","reportValidity","getInputElement","Promise","resolve","componentOnReady","el","constructor","registerHost","addController","AriaValidationController","reValidateOnPropChanges","componentWillLoad","formAssociatedCallback","formResetCallback","setValidity","formStateRestoreCallback","state","handleValueChange","isInternalChange","handleDisabledChange","handleInput","event","target","handleChange","updateNativeError","handleFocus","handleBlur","fromEvent","render","hasValue","shouldFloatLabel","h","key","class","classNames","htmlFor","floating","id","ref","readOnly","onInput","onChange","onFocus","onBlur","role"],"sources":["src/components/lmvz-input/lmvz-input.css?tag=lmvz-input&encapsulation=scoped","src/components/lmvz-input/lmvz-input.tsx"],"sourcesContent":["@import url('../../styles/internal/define-layers.css');\n@import url('../../styles/fragments/_routerFont.css') layer(lmvz-ds.theme);\n\n:host {\n  display: block;\n  font-family: var(--lmvz-global-font-family-default);\n  /* Component Variables Mapping */\n  --input-radius: var(--lmvz-component-input-radius-default);\n  --input-bg: var(--lmvz-semantic-color-surface-input-primary);\n  --input-border-color: var(--lmvz-semantic-color-border-default);\n  --input-border-color-hover: var(--lmvz-semantic-color-border-hover);\n  --input-border-color-focus: var(--lmvz-semantic-color-status-on-selected);\n  --input-border-width: var(--lmvz-semantic-border-width-default);\n  --input-height: 48px; /* From Figma input-size=48 */\n  --input-padding-x: 16px;\n\n  --label-color: var(--lmvz-semantic-color-on-surface-input-secondary);\n  --input-text-color: var(--lmvz-semantic-color-on-surface-input-primary);\n  --helper-text-color: var(--lmvz-semantic-color-on-surface-input-secondary);\n  --error-text-color: var(--lmvz-semantic-color-status-on-danger);\n\n  --label-floating-scale: 0.85; /* 14px -> 12px approx */\n  --label-minimized-top: -6px;\n  --label-minimized-bg: var(--input-bg);\n  --label-minimized-padding-x: 4px;\n\n  /* Disabled state uses opacity token */\n  --input-disabled-opacity: var(--lmvz-component-input-disabled-opacity);\n}\n\n.input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n\n.input-wrapper {\n  background-color: var(--input-bg);\n  border: var(--input-border-width) solid var(--input-border-color);\n  border-radius: var(--input-radius);\n  display: flex;\n  align-items: center;\n  height: var(--input-height);\n  padding: 0 var(--input-padding-x);\n  position: relative;\n  transition: border-color 0.2s ease;\n  gap: 8px; /* input-gap-x */\n}\n\n:host([disabled]) .input-wrapper {\n  opacity: var(--input-disabled-opacity);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.input-container:focus-within .input-wrapper {\n  border-color: var(--input-border-color-focus);\n  outline: 2px solid var(--input-border-color-focus);\n  outline-offset: 2px;\n}\n\n/* Enhanced focus indicator for keyboard users */\n.input-container:has(input:focus-visible) .input-wrapper {\n  box-shadow: 0 0 0 3px rgb(0 86 214 / 20%);\n}\n\n/* Error State */\n:host([error]) .input-wrapper {\n  border-color: var(--error-text-color);\n}\n\n:host([error]):focus-within .input-wrapper {\n  border-color: var(--error-text-color);\n  outline-color: var(--error-text-color);\n}\n\n/* Hover State - Use CSS pseudo-selector instead of class */\n:host(:not([disabled])) .input-wrapper:hover {\n  border-color: var(--input-border-color-hover);\n}\n\n.label-input-group {\n  position: relative;\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\nlabel {\n  position: absolute;\n  left: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--label-color);\n  font-size: 14px; /* body-md size from Figma */\n  font-family: Router, sans-serif;\n  font-weight: 400;\n  pointer-events: none;\n  transition: all 0.2s ease-out;\n  background-color: transparent;\n  padding: 0;\n  margin: 0;\n  line-height: normal;\n  white-space: nowrap;\n}\n\nlabel.floating {\n  top: 0; /* Align to top border area */\n  transform: translateY(-50%) scale(0.85); /* Scale down */\n  transform-origin: left top;\n  background-color: var(--label-minimized-bg);\n  padding: 0 var(--label-minimized-padding-x);\n  left: -2px; /* Adjust for padding/border visual alignment */\n  color: var(--input-text-color); /* Darker when floating */\n  font-weight: 500; /* Medium weight when minimized */\n}\n\n.required-indicator {\n  color: var(--error-text-color);\n  margin-left: 2px;\n}\n\ninput {\n  border: none;\n  background: transparent;\n  width: 100%;\n  height: 100%;\n  color: var(--input-text-color);\n  font-family: inherit;\n  font-size: 14px;\n  outline: none;\n  padding: 0;\n  margin: 0;\n  font-weight: 400; /* Regular weight */\n}\n\ninput::placeholder {\n  color: var(--label-color);\n}\n\n.helper-text {\n  padding-top: 8px; /* space-gap-component-input-helper-text */\n  padding-left: 12px; /* input-md-padding-x for helper text indent */\n  font-size: 12px;\n  color: var(--helper-text-color);\n  font-family: Router, sans-serif;\n  font-weight: 500; /* Medium weight */\n}\n\n.error-message {\n  padding-top: 8px;\n  padding-left: 12px;\n  font-size: 12px;\n  color: var(--error-text-color);\n  font-family: Router, sans-serif;\n  font-weight: 500;\n}\n\n::slotted(lmvz-button) {\n  /* Minimize padding for (icon) buttons due to height constraints */\n  --lmvz-button-padding: 4px;\n}\n","import { AttachInternals, Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport classNames from 'classnames';\nimport { Input } from '../../api';\nimport { componentOnReady } from '../../utils/component';\nimport { ReactiveControllerHost } from '../../utils/reactive-controller-host';\nimport { AriaValidationController, type AriaValidationHost } from '../../utils/validation/aria-validation-controller';\n\nlet inputIdCounter = 0;\n\n/**\n * Input component with floating label, (form) validation, and slotted content support.\n *\n * @example\n * ```html\n * <lmvz-input\n *   label=\"Email\"\n *   type=\"email\"\n *   required\n *   autocomplete=\"email\"\n *   helper-text=\"We'll never share your email\"\n * ></lmvz-input>\n * ```\n *\n * @example\n * ```typescript\n * const input = document.querySelector('lmvz-input');\n * input.addEventListener('input', (e) => console.log(e.target.value));\n * await input.focus();\n * ```\n *\n * @slot before-input - Content to the left of the input. If interactive (e.g., clear button), use an lmvz-button element.\n *   Example: <lmvz-button slot=\"before-input\" aria-label=\"Clear input\" tabindex=\"0\"><lmvz-icon icon=\"close-sm\"></lmvz-icon></lmvz-button>\n * @slot after-input - Content to the right of the input. If interactive (e.g., password toggle), use an lmvz-button element.\n *   Example: <lmvz-button slot=\"after-input\" aria-label=\"Toggle password visibility\" tabindex=\"0\"><lmvz-icon icon=\"eye\"></lmvz-icon></lmvz-button>\n */\n@Component({\n  tag: 'lmvz-input',\n  styleUrl: './lmvz-input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class LmvzInput extends ReactiveControllerHost implements AriaValidationHost {\n  @Element() el!: HTMLElement;\n  @Event() lmvzInput: EventEmitter<string>;\n\n  @AttachInternals() internals: ElementInternals;\n\n  private nativeInputElement?: HTMLInputElement;\n  private inputId = `lmvz-input-${inputIdCounter++}`;\n  private initialValue = '';\n\n  /**\n   * Internal state tracking native validation\n   */\n  @State() private nativeError = false;\n\n  /**\n   * Track if error was manually set via prop\n   */\n  private errorFromProp = false;\n\n  private get helperId(): string | undefined {\n    return this.helperText ? `${this.inputId}-helper` : undefined;\n  }\n\n  private get showErrorMessage() {\n    return this.error && Boolean(this.errorMessage);\n  }\n\n  private get errorId(): string {\n    return `${this.inputId}-error`;\n  }\n\n  /**\n   * reactively updated via depedency of `error`\n   */\n  private get describedBy(): string | undefined {\n    const ids: string[] = [];\n    if (this.helperId) ids.push(this.helperId);\n    if (this.showErrorMessage) ids.push(this.errorId);\n    return ids.length > 0 ? ids.join(' ') : undefined;\n  }\n\n  /**\n   * * PUBLIC API\n   */\n\n  /**\n   * Value of the input\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * Label text for the input\n   */\n  @Prop() label!: string;\n\n  /**\n   * Helper text displayed below the input\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder?: string;\n\n  /**\n   * Whether the input is disabled\n   * @default false\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Whether the input is readonly\n   * @default false\n   */\n  @Prop({ reflect: true }) readonly = false;\n\n  /**\n   * Whether the input is required\n   * @default false\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Name attribute for the input\n   */\n  @Prop() name?: string;\n\n  /**\n   * Type of the input\n   * @default 'text'\n   */\n  @Prop() type: Input.Type = 'text';\n\n  /**\n   * Error message to display when error is true\n   */\n  @Prop() errorMessage?: string;\n\n  /**\n   * Autocomplete attribute for form autofill\n   */\n  @Prop() autocomplete?: Input.Autocomplete;\n\n  /**\n   * Input mode for mobile keyboards\n   */\n  @Prop() inputmode?: Input.Inputmode;\n\n  /**\n   * Autocorrect attribute for mobile keyboards\n   * @default undefined\n   */\n  @Prop() autocorrect?: 'on' | 'off';\n\n  /**\n   * Autocapitalize attribute for mobile keyboards\n   * @default undefined\n   */\n  @Prop() autocapitalize?: Input.Autocapitalize;\n\n  /**\n   * Spellcheck attribute\n   * @default undefined\n   */\n  @Prop() spellcheck?: boolean;\n\n  /**\n   * Whether the input should autofocus\n   * @default false\n   */\n  @Prop() autofocus = false;\n\n  /**\n   * Minimum length for text inputs\n   */\n  @Prop() minlength?: number;\n\n  /**\n   * Maximum length for text inputs\n   */\n  @Prop() maxlength?: number;\n\n  /**\n   * Validation pattern (regex)\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * Minimum value for number/date inputs\n   */\n  @Prop() min?: number | string;\n\n  /**\n   * Maximum value for number/date inputs\n   */\n  @Prop() max?: number | string;\n\n  /**\n   * Step interval for number inputs\n   */\n  @Prop() step?: number | string;\n\n  /**\n   * Form id to associate with\n   */\n  @Prop() form?: string;\n\n  /**\n   * Whether the input is in an error state\n   * When not set manually, this will automatically reflect native HTML5 validation state\n   * @default false\n   */\n  @Prop({ reflect: true })\n  get error(): boolean {\n    return this.errorFromProp || this.nativeError;\n  }\n  set error(value: boolean) {\n    this.errorFromProp = value;\n  }\n\n  @Method()\n  async setValue(newValue: string | undefined) {\n    const input = this.nativeInputElement;\n    this.value = input.value = newValue ?? '';\n    this.internals.setFormValue?.(newValue); // undefined in stencil test environment\n    this.lmvzInput.emit(newValue);\n  }\n\n  /**\n   * Sets focus on the input\n   */\n  @Method()\n  async focusInput() {\n    this.nativeInputElement?.focus();\n  }\n\n  /**\n   * Removes focus from the input\n   */\n  @Method()\n  async blurInput() {\n    this.nativeInputElement?.blur();\n  }\n\n  /**\n   * Selects the text in the input\n   */\n  @Method()\n  async select() {\n    this.nativeInputElement?.select();\n  }\n\n  /**\n   * Returns whether the input satisfies its validation constraints\n   */\n  @Method()\n  async checkValidity(): Promise<boolean> {\n    return this.nativeInputElement?.checkValidity?.() ?? false;\n  }\n\n  /**\n   * Reports validation errors to the user\n   */\n  @Method()\n  async reportValidity(): Promise<boolean> {\n    return this.nativeInputElement?.reportValidity?.() ?? false;\n  }\n\n  /**\n   * Returns the native HTMLInputElement.\n   *\n   * Promise resolves when the element is ready and the input is available. If the input is not yet rendered, it waits for the component to be ready.\n   */\n  @Method()\n  async getInputElement(): Promise<HTMLInputElement> {\n    if (!this.nativeInputElement) {\n      await new Promise(resolve => componentOnReady(this.el, resolve));\n    }\n    return Promise.resolve(this.nativeInputElement);\n  }\n\n  /**\n   * * Lifecycle & Reactivity\n   */\n\n  constructor() {\n    super();\n    this.addController(\n      new AriaValidationController(this, {\n        reValidateOnPropChanges: true,\n      }),\n    );\n  }\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n  }\n\n  formAssociatedCallback(form: HTMLFormElement | undefined) {\n    if (!form) return;\n    this.internals.setFormValue?.(this.value); // undefined in stencil test environment\n  }\n\n  formResetCallback() {\n    this.internals.setValidity({});\n    this.setValue(this.initialValue);\n  }\n\n  formStateRestoreCallback(state: string) {\n    this.setValue(state);\n  }\n\n  @Watch('value')\n  protected handleValueChange(newValue: string | undefined) {\n    if (!this.nativeInputElement) return;\n\n    const isInternalChange = this.nativeInputElement.value === newValue;\n    if (isInternalChange) return;\n\n    this.setValue(newValue);\n  }\n\n  @Watch('disabled')\n  protected handleDisabledChange(disabled: boolean) {\n    if (disabled && this.nativeInputElement) {\n      this.nativeInputElement.blur();\n    }\n  }\n\n  /**\n   * Fires whenever the input changes\n   */\n  private handleInput = (event: InputEvent) => {\n    const input = event.target as HTMLInputElement;\n\n    this.setValue(input.value);\n  };\n\n  /**\n   * Fires when value changes and input loses focus.\n   */\n  private handleChange = (event: InputEvent) => {\n    const input = (event.target as HTMLInputElement) ?? this.nativeInputElement;\n    this.updateNativeError(input);\n  };\n\n  private handleFocus = () => {};\n\n  /**\n   * Fires when the input loses focus\n   */\n  private handleBlur = (event: FocusEvent) => {\n    const input = event.target as HTMLInputElement;\n    input.reportValidity?.();\n  };\n\n  /**\n   * Updates the nativeError state based on the validity of the input.\n   * validity may not exist in test environments\n   */\n  private updateNativeError(fromEvent?: HTMLInputElement) {\n    const input = fromEvent ?? this.nativeInputElement;\n    if (!input) return;\n    this.nativeError = !(input.checkValidity?.() ?? true);\n  }\n\n  render() {\n    const hasValue = Boolean(this.value);\n    const shouldFloatLabel = hasValue || Boolean(this.placeholder);\n\n    return (\n      <div\n        class={classNames('input-container', {\n          'interaction-filled': hasValue,\n        })}\n      >\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"label-input-group\">\n            <label htmlFor={this.inputId} class={classNames({ floating: shouldFloatLabel })}>\n              {this.label}\n              {this.required && (\n                <span class=\"required-indicator\" aria-hidden=\"true\">\n                  {' '}\n                  *\n                </span>\n              )}\n            </label>\n            <input\n              id={this.inputId}\n              ref={el => (this.nativeInputElement = el)}\n              type={this.type}\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.value}\n              name={this.name}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              form={this.form}\n              autocomplete={this.autocomplete}\n              inputmode={this.inputmode}\n              autocorrect={this.autocorrect}\n              autocapitalize={this.autocapitalize}\n              spellcheck={this.spellcheck}\n              autofocus={this.autofocus}\n              minlength={this.minlength}\n              maxlength={this.maxlength}\n              pattern={this.pattern}\n              aria-invalid={this.error ? 'true' : 'false'}\n              aria-required={this.required ? 'true' : 'false'}\n              aria-describedby={this.describedBy}\n              aria-errormessage={this.errorId}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onFocus={this.handleFocus}\n              onBlur={this.handleBlur}\n            />\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {this.helperText && (\n          <div id={this.helperId} class=\"helper-text\">\n            {this.helperText}\n          </div>\n        )}\n\n        {this.showErrorMessage && (\n          <div id={this.errorId} class=\"error-message\" role=\"alert\">\n            {this.errorMessage}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"uKAAA,MAAMA,EAAe,IAAM,6oJCO3B,IAAIC,EAAiB,E,MAkCRC,EAAUC,EAAA,MAAAD,UAAQE,E,qBAEpBC,UAEUC,UAEXC,mBACAC,QAAU,cAAcP,MACxBQ,aAAe,GAKNC,YAAc,MAKvBC,cAAgB,MAExB,YAAYC,GACV,OAAOC,KAAKC,WAAa,GAAGD,KAAKL,iBAAmBO,S,CAGtD,oBAAYC,GACV,OAAOH,KAAKI,OAASC,QAAQL,KAAKM,a,CAGpC,WAAYC,GACV,MAAO,GAAGP,KAAKL,e,CAMjB,eAAYa,GACV,MAAMC,EAAgB,GACtB,GAAIT,KAAKD,SAAUU,EAAIC,KAAKV,KAAKD,UACjC,GAAIC,KAAKG,iBAAkBM,EAAIC,KAAKV,KAAKO,SACzC,OAAOE,EAAIE,OAAS,EAAIF,EAAIG,KAAK,KAAOV,S,CAUjBW,MAKjBC,MAKAb,WAKAc,YAMiBC,SAAW,MAMXC,SAAW,MAMXC,SAAW,MAK5BC,KAMAC,KAAmB,OAKnBd,aAKAe,aAKAC,UAMAC,YAMAC,eAMAC,WAMAC,UAAY,MAKZC,UAKAC,UAKAC,QAKAC,IAKAC,IAKAC,KAKAC,KAOR,SACI7B,GACF,OAAOJ,KAAKF,eAAiBE,KAAKH,W,CAEpC,SAAIO,CAAMS,GACRb,KAAKF,cAAgBe,C,CAIvB,cAAMqB,CAASC,GACb,MAAMC,EAAQpC,KAAKN,mBACnBM,KAAKa,MAAQuB,EAAMvB,MAAQsB,GAAY,GACvCnC,KAAKP,UAAU4C,eAAeF,GAC9BnC,KAAKR,UAAU8C,KAAKH,E,CAOtB,gBAAMI,GACJvC,KAAKN,oBAAoB8C,O,CAO3B,eAAMC,GACJzC,KAAKN,oBAAoBgD,M,CAO3B,YAAMC,GACJ3C,KAAKN,oBAAoBiD,Q,CAO3B,mBAAMC,GACJ,OAAO5C,KAAKN,oBAAoBkD,mBAAqB,K,CAOvD,oBAAMC,GACJ,OAAO7C,KAAKN,oBAAoBmD,oBAAsB,K,CASxD,qBAAMC,GACJ,IAAK9C,KAAKN,mBAAoB,OACtB,IAAIqD,SAAQC,GAAWC,EAAiBjD,KAAKkD,GAAIF,I,CAEzD,OAAOD,QAAQC,QAAQhD,KAAKN,mB,CAO9B,WAAAyD,CAAAC,G,0HAEEpD,KAAKqD,cACH,IAAIC,EAAyBtD,KAAM,CACjCuD,wBAAyB,OAG9B,CAED,iBAAAC,GACExD,KAAKJ,aAAeI,KAAKa,K,CAG3B,sBAAA4C,CAAuBxB,GACrB,IAAKA,EAAM,OACXjC,KAAKP,UAAU4C,eAAerC,KAAKa,M,CAGrC,iBAAA6C,GACE1D,KAAKP,UAAUkE,YAAY,IAC3B3D,KAAKkC,SAASlC,KAAKJ,a,CAGrB,wBAAAgE,CAAyBC,GACvB7D,KAAKkC,SAAS2B,E,CAIN,iBAAAC,CAAkB3B,GAC1B,IAAKnC,KAAKN,mBAAoB,OAE9B,MAAMqE,EAAmB/D,KAAKN,mBAAmBmB,QAAUsB,EAC3D,GAAI4B,EAAkB,OAEtB/D,KAAKkC,SAASC,E,CAIN,oBAAA6B,CAAqBhD,GAC7B,GAAIA,GAAYhB,KAAKN,mBAAoB,CACvCM,KAAKN,mBAAmBgD,M,EAOpBuB,YAAeC,IACrB,MAAM9B,EAAQ8B,EAAMC,OAEpBnE,KAAKkC,SAASE,EAAMvB,MAAM,EAMpBuD,aAAgBF,IACtB,MAAM9B,EAAS8B,EAAMC,QAA+BnE,KAAKN,mBACzDM,KAAKqE,kBAAkBjC,EAAM,EAGvBkC,YAAc,OAKdC,WAAcL,IACpB,MAAM9B,EAAQ8B,EAAMC,OACpB/B,EAAMS,kBAAkB,EAOlB,iBAAAwB,CAAkBG,GACxB,MAAMpC,EAAQoC,GAAaxE,KAAKN,mBAChC,IAAK0C,EAAO,OACZpC,KAAKH,cAAgBuC,EAAMQ,mBAAqB,K,CAGlD,MAAA6B,GACE,MAAMC,EAAWrE,QAAQL,KAAKa,OAC9B,MAAM8D,EAAmBD,GAAYrE,QAAQL,KAAKe,aAElD,OACE6D,EAAA,OAAAC,IAAA,2CACEC,MAAOC,EAAW,kBAAmB,CACnC,qBAAsBL,KAGxBE,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACTF,EAAA,QAAAC,IAAA,2CAAM1D,KAAK,iBAEXyD,EAAA,OAAAC,IAAA,2CAAKC,MAAM,qBACTF,EAAA,SAAAC,IAAA,2CAAOG,QAAShF,KAAKL,QAASmF,MAAOC,EAAW,CAAEE,SAAUN,KACzD3E,KAAKc,MACLd,KAAKkB,UACJ0D,EAAA,QAAAC,IAAA,2CAAMC,MAAM,qBAAoB,cAAa,QAC1C,IAEI,MAGXF,EAAA,SAAAC,IAAA,2CACEK,GAAIlF,KAAKL,QACTwF,IAAKjC,GAAOlD,KAAKN,mBAAqBwD,EACtC9B,KAAMpB,KAAKoB,KACXU,IAAK9B,KAAK8B,IACVC,IAAK/B,KAAK+B,IACVC,KAAMhC,KAAKgC,KACXnB,MAAOb,KAAKa,MACZM,KAAMnB,KAAKmB,KACXJ,YAAaf,KAAKe,YAClBC,SAAUhB,KAAKgB,SACfoE,SAAUpF,KAAKiB,SACfC,SAAUlB,KAAKkB,SACfe,KAAMjC,KAAKiC,KACXZ,aAAcrB,KAAKqB,aACnBC,UAAWtB,KAAKsB,UAChBC,YAAavB,KAAKuB,YAClBC,eAAgBxB,KAAKwB,eACrBC,WAAYzB,KAAKyB,WACjBC,UAAW1B,KAAK0B,UAChBC,UAAW3B,KAAK2B,UAChBC,UAAW5B,KAAK4B,UAChBC,QAAS7B,KAAK6B,QAAO,eACP7B,KAAKI,MAAQ,OAAS,QAAO,gBAC5BJ,KAAKkB,SAAW,OAAS,QAAO,mBAC7BlB,KAAKQ,YAAW,oBACfR,KAAKO,QACxB8E,QAASrF,KAAKiE,YACdqB,SAAUtF,KAAKoE,aACfmB,QAASvF,KAAKsE,YACdkB,OAAQxF,KAAKuE,cAIjBK,EAAA,QAAAC,IAAA,2CAAM1D,KAAK,iBAGZnB,KAAKC,YACJ2E,EAAA,OAAAC,IAAA,2CAAKK,GAAIlF,KAAKD,SAAU+E,MAAM,eAC3B9E,KAAKC,YAITD,KAAKG,kBACJyE,EAAA,OAAAC,IAAA,2CAAKK,GAAIlF,KAAKO,QAASuE,MAAM,gBAAgBW,KAAK,SAC/CzF,KAAKM,c","ignoreList":[]}