labx-components 1.0.0 → 1.1.0

package/dist/cjs/index.cjs.js

@@ -1,7 +0,0 @@
-'use strict';
-
-function format(first, middle, last) {
-    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-
-exports.format = format;

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

@@ -1,104 +0,0 @@
-'use strict';
-
-var index = require('./index-eATbt1kz.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) {
-        index.registerInstance(this, hostRef);
-        this.labxClick = index.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 (index.h(index.Host, { key: '76d607e0f7612ef141b30d884166181402e4e6a0' }, index.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) {
-        index.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 (index.h(index.Host, { key: '30e38c191019432490921f13c23fc91f96952e90', style: { fontSize: `${this.size}px` } }, index.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) {
-        index.registerInstance(this, hostRef);
-        this.labxChange = index.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 (index.h(index.Host, { key: '357eb1c2b3c395801c8d7249c3e649f5ddd33bda' }, index.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,
-            } }, index.h("span", { key: 'd3da76f5d96c55179870583faf5931c6008188ec', class: "input-icon input-icon--left" }, index.h("slot", { key: 'eeea94735ef34585bd88eef2e6d753f58733aeb7', name: "icon-left", onSlotchange: (e) => this.onSlotChange('left', e) })), index.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 && (index.h("label", { key: '0d1ae4db30645f2a4a1927f0495b053620d5a3d5', class: { 'input-label': true, 'input-label--floating': isFloating } }, this.label)), index.h("span", { key: '4e25bc9f95998d3d94f36306a353859fa67fc5f3', class: "input-icon input-icon--right" }, index.h("slot", { key: '2492d04ec309a636128fd7da1729875e2c0c93d5', name: "icon-right", onSlotchange: (e) => this.onSlotChange('right', e) }))), this.error && index.h("span", { key: 'bfde298513f8d55f4b36b51afee6565d312f52d3', class: "input-error" }, this.error)));
-    }
-};
-LabxInput.style = labxInputCss();
-
-exports.labx_button = LabxButton;
-exports.labx_icon = LabxIcon;
-exports.labx_input = LabxInput;

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

@@ -1,24 +0,0 @@
-'use strict';
-
-var index = require('./index-eATbt1kz.js');
-
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-/*
- Stencil Client Patch Browser v4.43.3 | MIT Licensed | https://stenciljs.com
- */
-
-var patchBrowser = () => {
-  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('labx-components.cjs.js', document.baseURI).href));
-  const opts = {};
-  if (importMeta !== "") {
-    opts.resourcesUrl = new URL(".", importMeta).href;
-  }
-  return index.promiseResolve(opts);
-};
-
-patchBrowser().then(async (options) => {
-  await index.globalScripts();
-  return index.bootstrapLazy([["labx-button_3.cjs",[[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);
-});
-
-exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var index = require('./index-eATbt1kz.js');
-
-const defineCustomElements = async (win, options) => {
-  if (typeof window === 'undefined') return undefined;
-  await index.globalScripts();
-  return index.bootstrapLazy([["labx-button_3.cjs",[[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);
-};
-
-exports.setNonce = index.setNonce;
-exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -1,15 +0,0 @@
-{
-  "entries": [
-    "components/labx-button/labx-button.js",
-    "components/labx-icon/labx-icon.js",
-    "components/labx-input/labx-input.js"
-  ],
-  "mixins": [],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "4.43.3",
-    "typescriptVersion": "5.8.3"
-  },
-  "collections": [],
-  "bundles": []
-}

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

@@ -1,74 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-/* ─── Base ───────────────────────────────────────────── */
-.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;
-}
-
-/* ─── Variant: Primary ───────────────────────────────── */
-.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);
-}
-
-/* ─── Variant: Secondary ─────────────────────────────── */
-.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);
-}
-
-/* ─── Variant: Danger ────────────────────────────────── */
-.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);
-}
-
-/* ─── Disabled ───────────────────────────────────────── */
-.btn:disabled {
-  background-color: var(--color-bg-subtle);
-  border-color: var(--color-border);
-  color: var(--color-disabled);
-  cursor: not-allowed;
-}

package/dist/collection/components/labx-button/labx-button.js

@@ -1,135 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LabxButton {
-    /** 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)));
-    }
-    static get is() { return "labx-button"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["labx-button.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["labx-button.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "label": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Texto del bot\u00F3n"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "label",
-                "defaultValue": "'Button'"
-            },
-            "variant": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'primary' | 'secondary' | 'danger'",
-                    "resolved": "\"danger\" | \"primary\" | \"secondary\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Estilo visual: primary | secondary | danger"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "variant",
-                "defaultValue": "'primary'"
-            },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Deshabilita el bot\u00F3n"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "disabled",
-                "defaultValue": "false"
-            },
-            "type": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'button' | 'submit' | 'reset'",
-                    "resolved": "\"button\" | \"reset\" | \"submit\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tipo HTML del bot\u00F3n"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "type",
-                "defaultValue": "'button'"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "labxClick",
-                "name": "labxClick",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Se emite cuando el bot\u00F3n es clickeado"
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }];
-    }
-}

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

@@ -1,26 +0,0 @@
-: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;
-
-  /* Sin relleno por defecto */
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}
-
-.icon--filled {
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
-}

package/dist/collection/components/labx-icon/labx-icon.js

@@ -1,87 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class LabxIcon {
-    /** 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)));
-    }
-    static get is() { return "labx-icon"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["labx-icon.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["labx-icon.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "name": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": true,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Nombre del \u00EDcono de Material Symbols (ej: \"email\", \"search\", \"close\")"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "name"
-            },
-            "size": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Tama\u00F1o en px"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "20"
-            },
-            "filled": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Filled (true) u Outlined (false)"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "filled",
-                "defaultValue": "false"
-            }
-        };
-    }
-}

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

@@ -1,117 +0,0 @@
-:host {
-  display: block;
-}
-
-/* ─── Wrapper ────────────────────────────────────────── */
-.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 ──────────────────────────────────────────── */
-.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;
-}
-
-/* Ajuste de padding cuando hay íconos */
-.input-wrapper--icon-left .input {
-  padding-left: 40px;
-}
-
-.input-wrapper--icon-right .input {
-  padding-right: 40px;
-}
-
-/* ─── Label flotante ─────────────────────────────────── */
-.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);
-}
-
-/* Ajuste del label cuando hay ícono izquierdo */
-.input-wrapper--icon-left .input-label {
-  left: 40px;
-}
-
-/* ─── Íconos ─────────────────────────────────────────── */
-.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;
-}
-
-/* ─── Error ──────────────────────────────────────────── */
-.input-error {
-  display: block;
-  margin-top: 4px;
-  padding-left: 4px;
-  font-size: 12px;
-  color: var(--color-danger);
-}