labx-components 0.1.0

package/dist/esm/index.js

@@ -0,0 +1,5 @@
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+export { format };

package/dist/esm/labx-button_3.entry.js

@@ -0,0 +1,100 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-dLjo-EBs.js';
+
+const labxButtonCss = () => `:host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.btn:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px}.btn--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-surface)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--secondary{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-light)}.btn--danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-bg-surface)}.btn--danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger)}.btn:disabled{background-color:var(--color-bg-subtle);border-color:var(--color-border);color:var(--color-disabled);cursor:not-allowed}`;
+
+const LabxButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.labxClick = createEvent(this, "labxClick");
+    }
+    /** Texto del botón */
+    label = 'Button';
+    /** Estilo visual: primary | secondary | danger */
+    variant = 'primary';
+    /** Deshabilita el botón */
+    disabled = false;
+    /** Tipo HTML del botón */
+    type = 'button';
+    /** Se emite cuando el botón es clickeado */
+    labxClick;
+    handleClick() {
+        if (!this.disabled) {
+            this.labxClick.emit();
+        }
+    }
+    render() {
+        return (h(Host, { key: '76d607e0f7612ef141b30d884166181402e4e6a0' }, h("button", { key: 'cd3204b93d8791529784d04ccf80a566221aab74', type: this.type, disabled: this.disabled, class: `btn btn--${this.variant}`, onClick: () => this.handleClick() }, this.label)));
+    }
+};
+LabxButton.style = labxButtonCss();
+
+const labxIconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.icon--filled{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20}`;
+
+const LabxIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Nombre del ícono de Material Symbols (ej: "email", "search", "close") */
+    name;
+    /** Tamaño en px */
+    size = 20;
+    /** Filled (true) u Outlined (false) */
+    filled = false;
+    render() {
+        return (h(Host, { key: '30e38c191019432490921f13c23fc91f96952e90', style: { fontSize: `${this.size}px` } }, h("span", { key: '9ff64363cdb1fcb0f0eec24e13a2fc623506972f', class: { 'icon': true, 'icon--filled': this.filled } }, this.name)));
+    }
+};
+LabxIcon.style = labxIconCss();
+
+const labxInputCss = () => `:host{display:block}.input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--color-bg-surface);border:2px solid var(--color-border);border-radius:8px;transition:border-color 0.2s ease}.input-wrapper--focused{border-color:var(--color-primary)}.input-wrapper--error{border-color:var(--color-danger)}.input-wrapper--disabled{background-color:var(--color-bg-subtle);cursor:not-allowed}.input{width:100%;padding:20px 14px 6px 14px;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--color-text-default);cursor:inherit}.input:disabled{color:var(--color-disabled);cursor:not-allowed}.input-wrapper--icon-left .input{padding-left:40px}.input-wrapper--icon-right .input{padding-right:40px}.input-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--color-text-muted);pointer-events:none;transition:top 0.2s ease, font-size 0.2s ease, color 0.2s ease}.input-label--floating{top:7px;transform:none;font-size:11px;color:var(--color-primary)}.input-wrapper--error .input-label--floating{color:var(--color-danger)}.input-wrapper--icon-left .input-label{left:40px}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted);pointer-events:none}.input-icon--left{left:12px}.input-icon--right{right:12px}.input-error{display:block;margin-top:4px;padding-left:4px;font-size:12px;color:var(--color-danger)}`;
+
+const LabxInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.labxChange = createEvent(this, "labxChange");
+    }
+    /** Texto del label flotante */
+    label;
+    /** Valor del input */
+    value = '';
+    /** Type HTML del input */
+    type = 'text';
+    /** Deshabilita el input */
+    disabled = false;
+    /** Mensaje de error */
+    error;
+    /** El input tiene foco actualmente */
+    focused = false;
+    /** true si el slot icon-left tiene contenido */
+    hasIconLeft = false;
+    /** true si el slot icon-right tiene contenido */
+    hasIconRight = false;
+    /** Se emite cuando el valor cambia */
+    labxChange;
+    handleInput(e) {
+        this.value = e.target.value;
+        this.labxChange.emit(this.value);
+    }
+    onSlotChange(side, e) {
+        const slot = e.target;
+        const hasContent = slot.assignedNodes().length > 0;
+        if (side === 'left')
+            this.hasIconLeft = hasContent;
+        else
+            this.hasIconRight = hasContent;
+    }
+    render() {
+        const isFloating = this.focused || this.value?.length > 0;
+        return (h(Host, { key: '357eb1c2b3c395801c8d7249c3e649f5ddd33bda' }, h("div", { key: '1bc8515582f79c560196c7631cef3de31344234e', class: {
+                'input-wrapper': true,
+                'input-wrapper--focused': this.focused,
+                'input-wrapper--error': !!this.error,
+                'input-wrapper--disabled': this.disabled,
+                'input-wrapper--icon-left': this.hasIconLeft,
+                'input-wrapper--icon-right': this.hasIconRight,
+            } }, h("span", { key: 'd3da76f5d96c55179870583faf5931c6008188ec', class: "input-icon input-icon--left" }, h("slot", { key: 'eeea94735ef34585bd88eef2e6d753f58733aeb7', name: "icon-left", onSlotchange: (e) => this.onSlotChange('left', e) })), h("input", { key: '2792b2634677fe2ebe272248bd75fbd0e993080a', class: "input", type: this.type, value: this.value, disabled: this.disabled, onInput: (e) => this.handleInput(e), onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.label && (h("label", { key: '0d1ae4db30645f2a4a1927f0495b053620d5a3d5', class: { 'input-label': true, 'input-label--floating': isFloating } }, this.label)), h("span", { key: '4e25bc9f95998d3d94f36306a353859fa67fc5f3', class: "input-icon input-icon--right" }, h("slot", { key: '2492d04ec309a636128fd7da1729875e2c0c93d5', name: "icon-right", onSlotchange: (e) => this.onSlotChange('right', e) }))), this.error && h("span", { key: 'bfde298513f8d55f4b36b51afee6565d312f52d3', class: "input-error" }, this.error)));
+    }
+};
+LabxInput.style = labxInputCss();
+
+export { LabxButton as labx_button, LabxIcon as labx_icon, LabxInput as labx_input };

package/dist/esm/labx-components.js

@@ -0,0 +1,20 @@
+import { p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-dLjo-EBs.js';
+export { s as setNonce } from './index-dLjo-EBs.js';
+
+/*
+ Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["labx-button_3",[[513,"labx-button",{"label":[1],"variant":[1],"disabled":[4],"type":[1]}],[513,"labx-icon",{"name":[1],"size":[2],"filled":[4]}],[769,"labx-input",{"label":[1],"value":[1537],"type":[1],"disabled":[4],"error":[1],"focused":[32],"hasIconLeft":[32],"hasIconRight":[32]}]]]], options);
+});

package/dist/esm/loader.js

@@ -0,0 +1,10 @@
+import { g as globalScripts, b as bootstrapLazy } from './index-dLjo-EBs.js';
+export { s as setNonce } from './index-dLjo-EBs.js';
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await globalScripts();
+  return bootstrapLazy([["labx-button_3",[[513,"labx-button",{"label":[1],"variant":[1],"disabled":[4],"type":[1]}],[513,"labx-icon",{"name":[1],"size":[2],"filled":[4]}],[769,"labx-input",{"label":[1],"value":[1537],"type":[1],"disabled":[4],"error":[1],"focused":[32],"hasIconLeft":[32],"hasIconRight":[32]}]]]], options);
+};
+
+export { defineCustomElements };

package/dist/index.cjs.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/index.cjs.js');

package/dist/index.js

@@ -0,0 +1 @@
+export * from './esm/index.js';

package/dist/labx-components/index.esm.js

@@ -0,0 +1 @@
+function n(n,r,t){return(n||"")+(r?` ${r}`:"")+(t?` ${t}`:"")}export{n as format}

package/dist/labx-components/labx-components.css

@@ -0,0 +1 @@
+:root{--color-bg-surface:#FFFDF8;--color-bg-light:#FAF3E1;--color-bg-subtle:#F5E7C6;--color-primary:#FA8112;--color-primary-hover:#D96A0A;--color-primary-light:#FEE8CE;--color-text-default:#222222;--color-text-muted:#8C7B6B;--color-border:#DDD0B3;--color-success:#3A8C5C;--color-success-light:#D4EDDF;--color-danger:#C0392B;--color-danger-light:#FAD7D4;--color-disabled:#B0A89A}.labx-bg-surface{background-color:var(--color-bg-surface)}.labx-bg-light{background-color:var(--color-bg-light)}.labx-bg-subtle{background-color:var(--color-bg-subtle)}.labx-bg-primary{background-color:var(--color-primary)}.labx-bg-success{background-color:var(--color-success-light)}.labx-bg-danger{background-color:var(--color-danger-light)}.labx-text-default{color:var(--color-text-default)}.labx-text-muted{color:var(--color-text-muted)}.labx-text-primary{color:var(--color-primary)}.labx-text-success{color:var(--color-success)}.labx-text-danger{color:var(--color-danger)}.labx-text-disabled{color:var(--color-disabled)}.labx-border{border:1px solid var(--color-border)}.labx-border-primary{border:1px solid var(--color-primary)}.labx-border-success{border:1px solid var(--color-success)}.labx-border-danger{border:1px solid var(--color-danger)}

package/dist/labx-components/labx-components.esm.js

@@ -0,0 +1 @@
+import{p as a,g as e,b as t}from"./p-dLjo-EBs.js";export{s as setNonce}from"./p-dLjo-EBs.js";(()=>{const e=import.meta.url,s={};return""!==e&&(s.resourcesUrl=new URL(".",e).href),a(s)})().then((async a=>(await e(),t([["p-956be281",[[513,"labx-button",{label:[1],variant:[1],disabled:[4],type:[1]}],[513,"labx-icon",{name:[1],size:[2],filled:[4]}],[769,"labx-input",{label:[1],value:[1537],type:[1],disabled:[4],error:[1],focused:[32],hasIconLeft:[32],hasIconRight:[32]}]]]],a))));

package/dist/labx-components/p-956be281.entry.js

@@ -0,0 +1 @@
+import{r,c as o,h as e,H as t}from"./p-dLjo-EBs.js";const n=class{constructor(e){r(this,e),this.labxClick=o(this,"labxClick")}label="Button";variant="primary";disabled=!1;type="button";labxClick;handleClick(){this.disabled||this.labxClick.emit()}render(){return e(t,{key:"76d607e0f7612ef141b30d884166181402e4e6a0"},e("button",{key:"cd3204b93d8791529784d04ccf80a566221aab74",type:this.type,disabled:this.disabled,class:`btn btn--${this.variant}`,onClick:()=>this.handleClick()},this.label))}};n.style=":host{display:inline-block}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid transparent;border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease}.btn:focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px}.btn--primary{background-color:var(--color-primary);border-color:var(--color-primary);color:var(--color-bg-surface)}.btn--primary:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--secondary{background-color:transparent;border-color:var(--color-primary);color:var(--color-primary)}.btn--secondary:hover:not(:disabled){background-color:var(--color-primary-light)}.btn--danger{background-color:var(--color-danger);border-color:var(--color-danger);color:var(--color-bg-surface)}.btn--danger:hover:not(:disabled){background-color:var(--color-danger-light);border-color:var(--color-danger);color:var(--color-danger)}.btn:disabled{background-color:var(--color-bg-subtle);border-color:var(--color-border);color:var(--color-disabled);cursor:not-allowed}";const i=class{constructor(o){r(this,o)}name;size=20;filled=!1;render(){return e(t,{key:"30e38c191019432490921f13c23fc91f96952e90",style:{fontSize:`${this.size}px`}},e("span",{key:"9ff64363cdb1fcb0f0eec24e13a2fc623506972f",class:{icon:!0,"icon--filled":this.filled}},this.name))}};i.style=":host{display:inline-flex;align-items:center;justify-content:center;color:inherit}.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:inherit;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20}.icon--filled{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20}";const a=class{constructor(e){r(this,e),this.labxChange=o(this,"labxChange")}label;value="";type="text";disabled=!1;error;focused=!1;hasIconLeft=!1;hasIconRight=!1;labxChange;handleInput(r){this.value=r.target.value,this.labxChange.emit(this.value)}onSlotChange(r,o){const e=o.target.assignedNodes().length>0;"left"===r?this.hasIconLeft=e:this.hasIconRight=e}render(){const r=this.focused||this.value?.length>0;return e(t,{key:"357eb1c2b3c395801c8d7249c3e649f5ddd33bda"},e("div",{key:"1bc8515582f79c560196c7631cef3de31344234e",class:{"input-wrapper":!0,"input-wrapper--focused":this.focused,"input-wrapper--error":!!this.error,"input-wrapper--disabled":this.disabled,"input-wrapper--icon-left":this.hasIconLeft,"input-wrapper--icon-right":this.hasIconRight}},e("span",{key:"d3da76f5d96c55179870583faf5931c6008188ec",class:"input-icon input-icon--left"},e("slot",{key:"eeea94735ef34585bd88eef2e6d753f58733aeb7",name:"icon-left",onSlotchange:r=>this.onSlotChange("left",r)})),e("input",{key:"2792b2634677fe2ebe272248bd75fbd0e993080a",class:"input",type:this.type,value:this.value,disabled:this.disabled,onInput:r=>this.handleInput(r),onFocus:()=>this.focused=!0,onBlur:()=>this.focused=!1}),this.label&&e("label",{key:"0d1ae4db30645f2a4a1927f0495b053620d5a3d5",class:{"input-label":!0,"input-label--floating":r}},this.label),e("span",{key:"4e25bc9f95998d3d94f36306a353859fa67fc5f3",class:"input-icon input-icon--right"},e("slot",{key:"2492d04ec309a636128fd7da1729875e2c0c93d5",name:"icon-right",onSlotchange:r=>this.onSlotChange("right",r)}))),this.error&&e("span",{key:"bfde298513f8d55f4b36b51afee6565d312f52d3",class:"input-error"},this.error))}};a.style=":host{display:block}.input-wrapper{position:relative;display:flex;align-items:center;background-color:var(--color-bg-surface);border:2px solid var(--color-border);border-radius:8px;transition:border-color 0.2s ease}.input-wrapper--focused{border-color:var(--color-primary)}.input-wrapper--error{border-color:var(--color-danger)}.input-wrapper--disabled{background-color:var(--color-bg-subtle);cursor:not-allowed}.input{width:100%;padding:20px 14px 6px 14px;border:none;outline:none;background:transparent;font-family:inherit;font-size:14px;color:var(--color-text-default);cursor:inherit}.input:disabled{color:var(--color-disabled);cursor:not-allowed}.input-wrapper--icon-left .input{padding-left:40px}.input-wrapper--icon-right .input{padding-right:40px}.input-label{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--color-text-muted);pointer-events:none;transition:top 0.2s ease, font-size 0.2s ease, color 0.2s ease}.input-label--floating{top:7px;transform:none;font-size:11px;color:var(--color-primary)}.input-wrapper--error .input-label--floating{color:var(--color-danger)}.input-wrapper--icon-left .input-label{left:40px}.input-icon{position:absolute;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--color-text-muted);pointer-events:none}.input-icon--left{left:12px}.input-icon--right{right:12px}.input-error{display:block;margin-top:4px;padding-left:4px;font-size:12px;color:var(--color-danger)}";export{n as labx_button,i as labx_icon,a as labx_input}

package/dist/labx-components/p-dLjo-EBs.js

@@ -0,0 +1,2 @@
+const e=()=>{},t=":root{--color-bg-surface:#FFFDF8;--color-bg-light:#FAF3E1;--color-bg-subtle:#F5E7C6;--color-primary:#FA8112;--color-primary-hover:#D96A0A;--color-primary-light:#FEE8CE;--color-text-default:#222222;--color-text-muted:#8C7B6B;--color-border:#DDD0B3;--color-success:#3A8C5C;--color-success-light:#D4EDDF;--color-danger:#C0392B;--color-danger-light:#FAD7D4;--color-disabled:#B0A89A}.labx-bg-surface{background-color:var(--color-bg-surface)}.labx-bg-light{background-color:var(--color-bg-light)}.labx-bg-subtle{background-color:var(--color-bg-subtle)}.labx-bg-primary{background-color:var(--color-primary)}.labx-bg-success{background-color:var(--color-success-light)}.labx-bg-danger{background-color:var(--color-danger-light)}.labx-text-default{color:var(--color-text-default)}.labx-text-muted{color:var(--color-text-muted)}.labx-text-primary{color:var(--color-primary)}.labx-text-success{color:var(--color-success)}.labx-text-danger{color:var(--color-danger)}.labx-text-disabled{color:var(--color-disabled)}.labx-border{border:1px solid var(--color-border)}.labx-border-primary{border:1px solid var(--color-primary)}.labx-border-success{border:1px solid var(--color-success)}.labx-border-danger{border:1px solid var(--color-danger)}";function n(e,t,n){const o="undefined"!=typeof HTMLElement?HTMLElement.prototype:null;for(;e&&e!==o;){const o=Object.getOwnPropertyDescriptor(e,t);if(o&&(!n||o.get))return o;e=Object.getPrototypeOf(e)}}var o,l=(e,t)=>{var o;Object.entries(null!=(o=t.o.t)?o:{}).map((([o,[l]])=>{if(31&l||32&l){const l=e[o],r=n(Object.getPrototypeOf(e),o,!0)||Object.getOwnPropertyDescriptor(e,o);r&&Object.defineProperty(e,o,{get(){return r.get.call(this)},set(e){r.set.call(this,e)},configurable:!0,enumerable:!0}),t.l.has(o)?e[o]=t.l.get(o):void 0!==l&&(e[o]=l)}}))},r=e=>{if(e.__stencil__getHostRef)return e.__stencil__getHostRef()},s=(e,t)=>{t&&(e.__stencil__getHostRef=()=>t,t.i=e,512&t.o.u&&l(e,t))},i=(e,t)=>t in e,c=(e,t)=>(0,console.error)(e,t),a=new Map,u=new Map,f="undefined"!=typeof window?window:{},d={u:0,p:"",jmp:e=>e(),raf:e=>requestAnimationFrame(e),ael:(e,t,n,o)=>e.addEventListener(t,n,o),rel:(e,t,n,o)=>e.removeEventListener(t,n,o),ce:(e,t)=>new CustomEvent(e,t)},b=e=>Promise.resolve(e),p=(()=>{try{return!!f.document.adoptedStyleSheets&&(new CSSStyleSheet,"function"==typeof(new CSSStyleSheet).replaceSync)}catch(e){}return!1})(),h=!!p&&(()=>!!f.document&&Object.getOwnPropertyDescriptor(f.document.adoptedStyleSheets,"length").writable)(),m=!1,v=[],y=[],g=(e,t)=>n=>{e.push(n),m||(m=!0,t&&4&d.u?x(w):d.raf(w))},$=e=>{for(let t=0;t<e.length;t++)try{e[t](performance.now())}catch(e){c(e)}e.length=0},w=()=>{$(v),$(y),(m=v.length>0)&&d.raf(w)},x=e=>b().then(e),S=g(y,!0);function j(){var e;const n=this.attachShadow({mode:"open"});if(void 0===o&&(o=null!=(e=function(e){if(!p)return;const t=new CSSStyleSheet;return t.replaceSync(e),t}(t))?e:null),o)h?n.adoptedStyleSheets.push(o):n.adoptedStyleSheets=[...n.adoptedStyleSheets,o];else if(!p){const e=document.createElement("style");e.innerHTML=t,n.prepend(e)}}function O(e){var t,n,o;return null!=(o=null==(n=null==(t=e.head)?void 0:t.querySelector('meta[name="csp-nonce"]'))?void 0:n.getAttribute("content"))?o:void 0}var k,E=new WeakMap,C=e=>"sc-"+e.h,D=e=>"object"==(e=typeof e)||"function"===e,A=(e,t,...n)=>{let o=null,l=null,r=!1,s=!1;const i=[],c=t=>{for(let n=0;n<t.length;n++)o=t[n],Array.isArray(o)?c(o):null!=o&&"boolean"!=typeof o&&((r="function"!=typeof e&&!D(o))&&(o+=""),r&&s?i[i.length-1].m+=o:i.push(r?F(null,o):o),s=r)};if(c(n),t){t.key&&(l=t.key);{const e=t.className||t.class;e&&(t.class="object"!=typeof e?e:Object.keys(e).filter((t=>e[t])).join(" "))}}const a=F(e,null);return a.v=t,i.length>0&&(a.$=i),a.S=l,a},F=(e,t)=>({u:0,j:e,m:null!=t?t:null,O:null,$:null,v:null,S:null}),M={},L=(e,t)=>null==e||D(e)?e:4&t?"false"!==e&&(""===e||!!e):2&t?"string"==typeof e?parseFloat(e):"number"==typeof e?e:NaN:1&t?e+"":e,N=(e,t)=>{const n=(e=>{var t;return null==(t=r(e))?void 0:t.$hostElement$})(e);return{emit:e=>R(n,t,{bubbles:!0,composed:!0,cancelable:!0,detail:e})}},R=(e,t,n)=>{const o=d.ce(t,n);return e.dispatchEvent(o),o},H=(e,t,n,o,l,s)=>{if(n===o)return;let c=i(e,t),a=t.toLowerCase();if("class"===t){const t=e.classList,l=T(n);let r=T(o);t.remove(...l.filter((e=>e&&!r.includes(e)))),t.add(...r.filter((e=>e&&!l.includes(e))))}else if("style"===t){for(const t in n)o&&null!=o[t]||(t.includes("-")?e.style.removeProperty(t):e.style[t]="");for(const t in o)n&&o[t]===n[t]||(t.includes("-")?e.style.setProperty(t,o[t]):e.style[t]=o[t])}else if("key"===t);else if(c||"o"!==t[0]||"n"!==t[1]){if("a"===t[0]&&t.startsWith("attr:")){const n=t.slice(5);let l;{const t=r(e);if(t&&t.o&&t.o.t){const e=t.o.t[n];e&&e[1]&&(l=e[1])}}return l||(l=n.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()),void(null==o||!1===o?!1===o&&""!==e.getAttribute(l)||e.removeAttribute(l):e.setAttribute(l,!0===o?"":o))}if("p"===t[0]&&t.startsWith("prop:")){const n=t.slice(5);try{e[n]=o}catch(e){}return}{const r=D(o);if((c||r&&null!==o)&&!l)try{if(e.tagName.includes("-"))e[t]!==o&&(e[t]=o);else{const l=null==o?"":o;"list"===t?c=!1:null!=n&&e[t]===l||("function"==typeof e.__lookupSetter__(t)?e[t]=l:e.setAttribute(t,l))}}catch(e){}null==o||!1===o?!1===o&&""!==e.getAttribute(t)||e.removeAttribute(t):(!c||4&s||l)&&!r&&1===e.nodeType&&e.setAttribute(t,o=!0===o?"":o)}}else if(t="-"===t[2]?t.slice(3):i(f,a)?a.slice(2):a[2]+t.slice(3),n||o){const l=t.endsWith(B);t=t.replace(U,""),n&&d.rel(e,t,n,l),o&&d.ael(e,t,o,l)}},P=/\s/,T=e=>("object"==typeof e&&e&&"baseVal"in e&&(e=e.baseVal),e&&"string"==typeof e?e.split(P):[]),B="Capture",U=RegExp(B+"$"),W=(e,t,n)=>{const o=11===t.O.nodeType&&t.O.host?t.O.host:t.O,l=e&&e.v||{},r=t.v||{};for(const e of z(Object.keys(l)))e in r||H(o,e,l[e],void 0,n,t.u);for(const e of z(Object.keys(r)))H(o,e,l[e],r[e],n,t.u)};function z(e){return e.includes("ref")?[...e.filter((e=>"ref"!==e)),"ref"]:e}var V=!1,q=!1,G=(e,t,n)=>{const o=t.$[n];let l,r,s=0;if(null!=o.m)l=o.O=f.document.createTextNode(o.m);else{if(!f.document)throw Error("You are trying to render a Stencil component in an environment that doesn't support the DOM.");if(l=o.O=f.document.createElement(o.j),W(null,o,q),o.$){const t="template"===o.j?l.content:l;for(s=0;s<o.$.length;++s)r=G(e,o,s),r&&t.appendChild(r)}}return l["s-hn"]=k,l},Y=(e,t,n,o,l,r)=>{let s,i=e;for(i.shadowRoot&&i.tagName===k&&(i=i.shadowRoot),"template"===n.j&&(i=i.content);l<=r;++l)o[l]&&(s=G(null,n,l),s&&(o[l].O=s,J(i,s,t)))},Z=(e,t,n)=>{for(let o=t;o<=n;++o){const t=e[o];if(t){const e=t.O;e&&e.remove()}}},_=(e,t,n=!1)=>e.j===t.j&&(n?(n&&!e.S&&t.S&&(e.S=t.S),!0):e.S===t.S),I=(e,t,n=!1)=>{const o=t.O=e.O,l=e.$,r=t.$,s=t.m;null==s?("slot"!==t.j||V||e.k!==t.k&&(t.O["s-sn"]=t.k||"",(e=>{d.u|=1;const t=e.closest(k.toLowerCase());if(null!=t){const n=Array.from(t.__childNodes||t.childNodes).find((e=>e["s-cr"])),o=Array.from(e.__childNodes||e.childNodes);for(const e of n?o.reverse():o)null!=e["s-sh"]&&(J(t,e,null!=n?n:null),e["s-sh"]=void 0)}d.u&=-2})(t.O.parentElement)),W(e,t,q),null!==l&&null!==r?((e,t,n,o,l=!1)=>{let r,s,i=0,c=0,a=0,u=0,f=t.length-1,d=t[0],b=t[f],p=o.length-1,h=o[0],m=o[p];const v="template"===n.j?e.content:e;for(;i<=f&&c<=p;)if(null==d)d=t[++i];else if(null==b)b=t[--f];else if(null==h)h=o[++c];else if(null==m)m=o[--p];else if(_(d,h,l))I(d,h,l),d=t[++i],h=o[++c];else if(_(b,m,l))I(b,m,l),b=t[--f],m=o[--p];else if(_(d,m,l))I(d,m,l),J(v,d.O,b.O.nextSibling),d=t[++i],m=o[--p];else if(_(b,h,l))I(b,h,l),J(v,b.O,d.O),b=t[--f],h=o[++c];else{for(a=-1,u=i;u<=f;++u)if(t[u]&&null!==t[u].S&&t[u].S===h.S){a=u;break}a>=0?(s=t[a],s.j!==h.j?r=G(t&&t[c],n,a):(I(s,h,l),t[a]=void 0,r=s.O),h=o[++c]):(r=G(t&&t[c],n,c),h=o[++c]),r&&J(d.O.parentNode,r,d.O)}i>f?Y(e,null==o[p+1]?null:o[p+1].O,n,o,c,p):c>p&&Z(t,i,f)})(o,l,t,r,n):null!==r?(null!==e.m&&(o.textContent=""),Y(o,null,t,r,0,r.length-1)):!n&&null!==l&&Z(l,0,l.length-1)):e.m!==s&&(o.data=s)},J=(e,t,n)=>e.__insertBefore?e.__insertBefore(t,n):null==e?void 0:e.insertBefore(t,n),K=(e,t)=>{if(t&&!e.C&&t["s-p"]){const n=t["s-p"].push(new Promise((o=>e.C=()=>{t["s-p"].splice(n-1,1),o()})))}},Q=(e,t)=>{if(e.u|=16,4&e.u)return void(e.u|=512);K(e,e.D);const n=()=>X(e,t);if(!t)return S(n);queueMicrotask((()=>{n()}))},X=(e,t)=>{const n=e.$hostElement$,o=e.i;if(!o)throw Error(`Can't render component <${n.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime`);let l;return t?(e.A.length&&e.A.forEach((e=>e(n))),l=se(o,"componentWillLoad",void 0,n)):l=se(o,"componentWillUpdate",void 0,n),l=ee(l,(()=>se(o,"componentWillRender",void 0,n))),ee(l,(()=>ne(e,o,t)))},ee=(e,t)=>te(e)?e.then(t).catch((e=>{console.error(e),t()})):t(),te=e=>e instanceof Promise||e&&e.then&&"function"==typeof e.then,ne=async(e,t,n)=>{var o;const l=e.$hostElement$,r=l["s-rc"];n&&(e=>{const t=e.o,n=e.$hostElement$,o=t.u,l=((e,t)=>{var n,o,l;const r=C(t),s=u.get(r);if(!f.document)return r;if(e=11===e.nodeType?e:f.document,s)if("string"==typeof s){let l,i=E.get(e=e.head||e);if(i||E.set(e,i=new Set),!i.has(r)){l=f.document.createElement("style"),l.textContent=s;const c=null!=(n=d.F)?n:O(f.document);if(null!=c&&l.setAttribute("nonce",c),!(1&t.u))if("HEAD"===e.nodeName){const t=e.querySelectorAll("link[rel=preconnect]"),n=t.length>0?t[t.length-1].nextSibling:e.querySelector("style");e.insertBefore(l,(null==n?void 0:n.parentNode)===e?n:null)}else if("host"in e)if(p){const t=new(null!=(o=e.defaultView)?o:e.ownerDocument.defaultView).CSSStyleSheet;t.replaceSync(s),h?e.adoptedStyleSheets.unshift(t):e.adoptedStyleSheets=[t,...e.adoptedStyleSheets]}else{const t=e.querySelector("style");t?t.textContent=s+t.textContent:e.prepend(l)}else e.append(l);1&t.u&&e.insertBefore(l,null),4&t.u&&(l.textContent+="slot-fb{display:contents}slot-fb[hidden]{display:none}"),i&&i.add(r)}}else{let t=E.get(e);if(t||E.set(e,t=new Set),!t.has(r)){const n=null!=(l=e.defaultView)?l:e.ownerDocument.defaultView;let o;if(s.constructor===n.CSSStyleSheet)o=s;else{o=new n.CSSStyleSheet;for(let e=0;e<s.cssRules.length;e++)o.insertRule(s.cssRules[e].cssText,e)}h?e.adoptedStyleSheets.push(o):e.adoptedStyleSheets=[...e.adoptedStyleSheets,o],t.add(r)}}return r})(n.shadowRoot?n.shadowRoot:n.getRootNode(),t);10&o&&(n["s-sc"]=l,n.classList.add(l+"-h"))})(e);oe(e,t,l,n),r&&(r.map((e=>e())),l["s-rc"]=void 0);{const t=null!=(o=l["s-p"])?o:[],n=()=>le(e);0===t.length?n():(Promise.all(t).then(n).catch(n),e.u|=4,t.length=0)}},oe=(e,t,n,o)=>{try{t=t.render(),e.u&=-17,e.u|=2,((e,t,n=!1)=>{const o=e.$hostElement$,l=e.o,r=e.M||F(null,null),s=(e=>e&&e.j===M)(t)?t:A(null,null,t);if(k=o.tagName,l.L&&(s.v=s.v||{},l.L.forEach((([e,t])=>{s.v[t]=o[e]}))),n&&s.v)for(const e of Object.keys(s.v))o.hasAttribute(e)&&!["key","ref","style","class"].includes(e)&&(s.v[e]=o[e]);s.j=null,s.u|=4,e.M=s,s.O=r.O=o.shadowRoot||o,V=!(!(1&l.u)||128&l.u),I(r,s,n)})(e,t,o)}catch(t){c(t,e.$hostElement$)}return null},le=e=>{const t=e.$hostElement$,n=e.i,o=e.D;se(n,"componentDidRender",void 0,t),64&e.u?se(n,"componentDidUpdate",void 0,t):(e.u|=64,ie(t),se(n,"componentDidLoad",void 0,t),e.N(t),o||re()),e.C&&(e.C(),e.C=void 0),512&e.u&&x((()=>Q(e,!1))),e.u&=-517},re=()=>{x((()=>R(f,"appload",{detail:{namespace:"labx-components"}})))},se=(e,t,n,o)=>{if(e&&e[t])try{return e[t](n)}catch(e){c(e,o)}},ie=e=>e.classList.add("hydrated"),ce=(e,t,n,o)=>{const l=r(e);if(!l)return;if(!l)throw Error(`Couldn't find host element for "${o.h}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`);const s=l.l.get(t),i=l.u,c=l.i;if(n=L(n,o.t[t][0]),(!(8&i)||void 0===s)&&n!==s&&(!Number.isNaN(s)||!Number.isNaN(n))&&(l.l.set(t,n),2&i)){if(c.componentShouldUpdate&&!1===c.componentShouldUpdate(n,s,t)&&!(16&i))return;16&i||Q(l,!1)}},ae=(e,t,o)=>{var l,s;const i=e.prototype;if(t.t){const c=Object.entries(null!=(l=t.t)?l:{});if(c.map((([e,[l]])=>{if(31&l||2&o&&32&l){const{get:s,set:c}=n(i,e)||{};s&&(t.t[e][0]|=2048),c&&(t.t[e][0]|=4096),(1&o||!s)&&Object.defineProperty(i,e,{get(){{if(!(2048&t.t[e][0]))return((e,t)=>r(this).l.get(t))(0,e);const n=r(this),o=n?n.i:i;if(!o)return;return o[e]}},configurable:!0,enumerable:!0}),Object.defineProperty(i,e,{set(n){const s=r(this);if(s){if(c)return void 0===(32&l?this[e]:s.$hostElement$[e])&&s.l.get(e)&&(n=s.l.get(e)),c.call(this,L(n,l)),void ce(this,e,n=32&l?this[e]:s.$hostElement$[e],t);{if(!(1&o&&4096&t.t[e][0]))return ce(this,e,n,t),void(1&o&&!s.i&&s.A.push((()=>{4096&t.t[e][0]&&s.i[e]!==s.l.get(e)&&(s.i[e]=n)})));const r=()=>{const o=s.i[e];!s.l.get(e)&&o&&s.l.set(e,o),s.i[e]=L(n,l),ce(this,e,s.i[e],t)};s.i?r():s.A.push((()=>{r()}))}}}})}})),1&o){const n=new Map;i.attributeChangedCallback=function(e,o,l){d.jmp((()=>{var s;const a=n.get(e),u=r(this);if(this.hasOwnProperty(a)&&(l=this[a],delete this[a]),i.hasOwnProperty(a)&&"number"==typeof this[a]&&this[a]==l)return;if(null==a){const n=null==u?void 0:u.u;if(u&&n&&!(8&n)&&l!==o){const r=u.i,i=null==(s=t.R)?void 0:s[e];null==i||i.forEach((t=>{const[[s,i]]=Object.entries(t);null!=r[s]&&(128&n||1&i)&&r[s].call(r,l,o,e)}))}return}const f=c.find((([e])=>e===a));f&&4&f[1][0]&&(l=null!==l&&"false"!==l);const d=Object.getOwnPropertyDescriptor(i,a);l==this[a]||d.get&&!d.set||(this[a]=l)}))},e.observedAttributes=Array.from(new Set([...Object.keys(null!=(s=t.R)?s:{}),...c.filter((([e,t])=>31&t[0])).map((([e,o])=>{var l;const r=o[1]||e;return n.set(r,e),512&o[0]&&(null==(l=t.L)||l.push([e,r])),r}))]))}}return e},ue=(e,t)=>{se(e,"connectedCallback",void 0,t)},fe=(e,t)=>{se(e,"disconnectedCallback",void 0,t||e)},de=(e,t={})=>{var n;if(!f.document)return void console.warn("Stencil: No document found. Skipping bootstrapping lazy components.");const o=[],l=t.exclude||[],s=f.customElements,i=f.document.head,b=i.querySelector("meta[charset]"),h=f.document.createElement("style"),m=[];let v,y=!0;if(Object.assign(d,t),d.p=new URL(t.resourcesUrl||"./",f.document.baseURI).href,e.map((e=>{e[1].map((t=>{const n={u:t[0],h:t[1],t:t[2],H:t[3]};n.t=t[2],n.L=[];const i=n.h,f=class extends HTMLElement{"s-p";"s-rc";hasRegisteredEventListeners=!1;constructor(e){if(super(e),((e,t)=>{const n={u:0,$hostElement$:e,o:t,l:new Map,P:new Map};n.T=new Promise((e=>n.N=e)),e["s-p"]=[],e["s-rc"]=[],n.A=[];const o=n;e.__stencil__getHostRef=()=>o})(e=this,n),1&n.u)if(e.shadowRoot){if("open"!==e.shadowRoot.mode)throw Error(`Unable to re-use existing shadow root for ${n.h}! Mode is set to ${e.shadowRoot.mode} but Stencil only supports open shadow roots.`)}else j.call(e,n)}connectedCallback(){r(this)&&(this.hasRegisteredEventListeners||(this.hasRegisteredEventListeners=!0),v&&(clearTimeout(v),v=null),y?m.push(this):d.jmp((()=>(e=>{if(!(1&d.u)){const t=r(e);if(!t)return;const n=t.o,o=()=>{};if(1&t.u)(null==t?void 0:t.i)?ue(t.i,e):(null==t?void 0:t.T)&&t.T.then((()=>ue(t.i,e)));else{t.u|=1;{let n=e;for(;n=n.parentNode||n.host;)if(n["s-p"]){K(t,t.D=n);break}}n.t&&Object.entries(n.t).map((([t,[n]])=>{if(31&n&&Object.prototype.hasOwnProperty.call(e,t)){const n=e[t];delete e[t],e[t]=n}})),(async(e,t,n)=>{let o;try{if(!(32&t.u)){if(t.u|=32,n.B){const l=((e,t)=>{const n=e.h.replace(/-/g,"_"),o=e.B;if(!o)return;const l=a.get(o);return l?l[n]:import(`./${o}.entry.js`).then((e=>(a.set(o,e),e[n])),(e=>{c(e,t.$hostElement$)}))
+/*!__STENCIL_STATIC_IMPORT_SWITCH__*/})(n,t);if(l&&"then"in l){const e=()=>{};o=await l,e()}else o=l;if(!o)throw Error(`Constructor for "${n.h}#${t.U}" was not found`);o.isProxied||(ae(o,n,2),o.isProxied=!0);const r=()=>{};t.u|=8;try{new o(t)}catch(t){c(t,e)}t.u&=-9,r(),ue(t.i,e)}else o=e.constructor,customElements.whenDefined(e.localName).then((()=>t.u|=128));if(o&&o.style){let e;"string"==typeof o.style&&(e=o.style);const t=C(n);if(!u.has(t)){const o=()=>{};((e,t,n)=>{let o=u.get(e);p&&n?(o=o||new CSSStyleSheet,"string"==typeof o?o=t:o.replaceSync(t)):o=t,u.set(e,o)})(t,e,!!(1&n.u)),o()}}}const l=t.D,r=()=>Q(t,!0);l&&l["s-rc"]?l["s-rc"].push(r):r()}catch(n){c(n,e),t.C&&(t.C(),t.C=void 0),t.N&&t.N(e)}})(e,t,n)}o()}})(this))))}disconnectedCallback(){d.jmp((()=>(async e=>{if(!(1&d.u)){const t=r(e);(null==t?void 0:t.i)?fe(t.i,e):(null==t?void 0:t.T)&&t.T.then((()=>fe(t.i,e)))}E.has(e)&&E.delete(e),e.shadowRoot&&E.has(e.shadowRoot)&&E.delete(e.shadowRoot)})(this))),d.raf((()=>{var e;const t=r(this);if(!t)return;const n=m.findIndex((e=>e===this));n>-1&&m.splice(n,1),(null==(e=null==t?void 0:t.M)?void 0:e.O)instanceof Node&&!t.M.O.isConnected&&delete t.M.O}))}componentOnReady(){var e;return null==(e=r(this))?void 0:e.T}};n.B=e[0],l.includes(i)||s.get(i)||(o.push(i),s.define(i,ae(f,n,1)))}))})),o.length>0&&(h.textContent+=o.sort()+"{visibility:hidden}.hydrated{visibility:inherit}",h.innerHTML.length)){h.setAttribute("data-styles","");const e=null!=(n=d.F)?n:O(f.document);null!=e&&h.setAttribute("nonce",e),i.insertBefore(h,b?b.nextSibling:i.firstChild)}y=!1,m.length?m.map((e=>e.connectedCallback())):d.jmp((()=>v=setTimeout(re,30)))},be=e=>d.F=e;export{M as H,de as b,N as c,e as g,A as h,b as p,s as r,be as s}

package/dist/types/components/labx-button/labx-button.d.ts

@@ -0,0 +1,15 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class LabxButton {
+    /** Texto del botón */
+    label: string;
+    /** Estilo visual: primary | secondary | danger */
+    variant: 'primary' | 'secondary' | 'danger';
+    /** Deshabilita el botón */
+    disabled: boolean;
+    /** Tipo HTML del botón */
+    type: 'button' | 'submit' | 'reset';
+    /** Se emite cuando el botón es clickeado */
+    labxClick: EventEmitter<void>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/labx-icon/labx-icon.d.ts

@@ -0,0 +1,9 @@
+export declare class LabxIcon {
+    /** Nombre del ícono de Material Symbols (ej: "email", "search", "close") */
+    name: string;
+    /** Tamaño en px */
+    size: number;
+    /** Filled (true) u Outlined (false) */
+    filled: boolean;
+    render(): any;
+}

package/dist/types/components/labx-input/labx-input.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class LabxInput {
+    /** Texto del label flotante */
+    label: string;
+    /** Valor del input */
+    value: string;
+    /** Type HTML del input */
+    type: string;
+    /** Deshabilita el input */
+    disabled: boolean;
+    /** Mensaje de error */
+    error: string;
+    /** El input tiene foco actualmente */
+    focused: boolean;
+    /** true si el slot icon-left tiene contenido */
+    hasIconLeft: boolean;
+    /** true si el slot icon-right tiene contenido */
+    hasIconRight: boolean;
+    /** Se emite cuando el valor cambia */
+    labxChange: EventEmitter<string>;
+    private handleInput;
+    private onSlotChange;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,237 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+export namespace Components {
+    interface LabxButton {
+        /**
+          * Deshabilita el botón
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Texto del botón
+          * @default 'Button'
+         */
+        "label": string;
+        /**
+          * Tipo HTML del botón
+          * @default 'button'
+         */
+        "type": 'button' | 'submit' | 'reset';
+        /**
+          * Estilo visual: primary | secondary | danger
+          * @default 'primary'
+         */
+        "variant": 'primary' | 'secondary' | 'danger';
+    }
+    interface LabxIcon {
+        /**
+          * Filled (true) u Outlined (false)
+          * @default false
+         */
+        "filled": boolean;
+        /**
+          * Nombre del ícono de Material Symbols (ej: "email", "search", "close")
+         */
+        "name": string;
+        /**
+          * Tamaño en px
+          * @default 20
+         */
+        "size": number;
+    }
+    interface LabxInput {
+        /**
+          * Deshabilita el input
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Mensaje de error
+         */
+        "error": string;
+        /**
+          * Texto del label flotante
+         */
+        "label": string;
+        /**
+          * Type HTML del input
+          * @default 'text'
+         */
+        "type": string;
+        /**
+          * Valor del input
+          * @default ''
+         */
+        "value": string;
+    }
+}
+export interface LabxButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLabxButtonElement;
+}
+export interface LabxInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLLabxInputElement;
+}
+declare global {
+    interface HTMLLabxButtonElementEventMap {
+        "labxClick": void;
+    }
+    interface HTMLLabxButtonElement extends Components.LabxButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLabxButtonElementEventMap>(type: K, listener: (this: HTMLLabxButtonElement, ev: LabxButtonCustomEvent<HTMLLabxButtonElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLabxButtonElementEventMap>(type: K, listener: (this: HTMLLabxButtonElement, ev: LabxButtonCustomEvent<HTMLLabxButtonElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLabxButtonElement: {
+        prototype: HTMLLabxButtonElement;
+        new (): HTMLLabxButtonElement;
+    };
+    interface HTMLLabxIconElement extends Components.LabxIcon, HTMLStencilElement {
+    }
+    var HTMLLabxIconElement: {
+        prototype: HTMLLabxIconElement;
+        new (): HTMLLabxIconElement;
+    };
+    interface HTMLLabxInputElementEventMap {
+        "labxChange": string;
+    }
+    interface HTMLLabxInputElement extends Components.LabxInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLLabxInputElementEventMap>(type: K, listener: (this: HTMLLabxInputElement, ev: LabxInputCustomEvent<HTMLLabxInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLLabxInputElementEventMap>(type: K, listener: (this: HTMLLabxInputElement, ev: LabxInputCustomEvent<HTMLLabxInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLLabxInputElement: {
+        prototype: HTMLLabxInputElement;
+        new (): HTMLLabxInputElement;
+    };
+    interface HTMLElementTagNameMap {
+        "labx-button": HTMLLabxButtonElement;
+        "labx-icon": HTMLLabxIconElement;
+        "labx-input": HTMLLabxInputElement;
+    }
+}
+declare namespace LocalJSX {
+    type OneOf<K extends string, PropT, AttrT = PropT> = { [P in K]: PropT } & { [P in `attr:${K}` | `prop:${K}`]?: never } | { [P in `attr:${K}`]: AttrT } & { [P in K | `prop:${K}`]?: never } | { [P in `prop:${K}`]: PropT } & { [P in K | `attr:${K}`]?: never };
+
+    interface LabxButton {
+        /**
+          * Deshabilita el botón
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Texto del botón
+          * @default 'Button'
+         */
+        "label"?: string;
+        /**
+          * Se emite cuando el botón es clickeado
+         */
+        "onLabxClick"?: (event: LabxButtonCustomEvent<void>) => void;
+        /**
+          * Tipo HTML del botón
+          * @default 'button'
+         */
+        "type"?: 'button' | 'submit' | 'reset';
+        /**
+          * Estilo visual: primary | secondary | danger
+          * @default 'primary'
+         */
+        "variant"?: 'primary' | 'secondary' | 'danger';
+    }
+    interface LabxIcon {
+        /**
+          * Filled (true) u Outlined (false)
+          * @default false
+         */
+        "filled"?: boolean;
+        /**
+          * Nombre del ícono de Material Symbols (ej: "email", "search", "close")
+         */
+        "name": string;
+        /**
+          * Tamaño en px
+          * @default 20
+         */
+        "size"?: number;
+    }
+    interface LabxInput {
+        /**
+          * Deshabilita el input
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Mensaje de error
+         */
+        "error"?: string;
+        /**
+          * Texto del label flotante
+         */
+        "label"?: string;
+        /**
+          * Se emite cuando el valor cambia
+         */
+        "onLabxChange"?: (event: LabxInputCustomEvent<string>) => void;
+        /**
+          * Type HTML del input
+          * @default 'text'
+         */
+        "type"?: string;
+        /**
+          * Valor del input
+          * @default ''
+         */
+        "value"?: string;
+    }
+
+    interface LabxButtonAttributes {
+        "label": string;
+        "variant": 'primary' | 'secondary' | 'danger';
+        "disabled": boolean;
+        "type": 'button' | 'submit' | 'reset';
+    }
+    interface LabxIconAttributes {
+        "name": string;
+        "size": number;
+        "filled": boolean;
+    }
+    interface LabxInputAttributes {
+        "label": string;
+        "value": string;
+        "type": string;
+        "disabled": boolean;
+        "error": string;
+    }
+
+    interface IntrinsicElements {
+        "labx-button": Omit<LabxButton, keyof LabxButtonAttributes> & { [K in keyof LabxButton & keyof LabxButtonAttributes]?: LabxButton[K] } & { [K in keyof LabxButton & keyof LabxButtonAttributes as `attr:${K}`]?: LabxButtonAttributes[K] } & { [K in keyof LabxButton & keyof LabxButtonAttributes as `prop:${K}`]?: LabxButton[K] };
+        "labx-icon": Omit<LabxIcon, keyof LabxIconAttributes> & { [K in keyof LabxIcon & keyof LabxIconAttributes]?: LabxIcon[K] } & { [K in keyof LabxIcon & keyof LabxIconAttributes as `attr:${K}`]?: LabxIconAttributes[K] } & { [K in keyof LabxIcon & keyof LabxIconAttributes as `prop:${K}`]?: LabxIcon[K] } & OneOf<"name", LabxIcon["name"], LabxIconAttributes["name"]>;
+        "labx-input": Omit<LabxInput, keyof LabxInputAttributes> & { [K in keyof LabxInput & keyof LabxInputAttributes]?: LabxInput[K] } & { [K in keyof LabxInput & keyof LabxInputAttributes as `attr:${K}`]?: LabxInputAttributes[K] } & { [K in keyof LabxInput & keyof LabxInputAttributes as `prop:${K}`]?: LabxInput[K] };
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "labx-button": LocalJSX.IntrinsicElements["labx-button"] & JSXBase.HTMLAttributes<HTMLLabxButtonElement>;
+            "labx-icon": LocalJSX.IntrinsicElements["labx-icon"] & JSXBase.HTMLAttributes<HTMLLabxIconElement>;
+            "labx-input": LocalJSX.IntrinsicElements["labx-input"] & JSXBase.HTMLAttributes<HTMLLabxInputElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+export type * from './components.d.ts';