Login Form

/* Componente: Login Form */
/* Categoría: forms · Librería: core · Versión: 1.0.0 */
/* Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos. */
/* Importar: npx webmcpcss components import core-login-form */

.wm-form { display: grid; gap: 14px; width: min(100%, 380px); padding: 24px; background: var(--wm-surface, #fff); border: 1px solid #e5e7eb; border-radius: var(--wm-radius, 14px); box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .35); font-family: system-ui, sans-serif; }
.wm-form__title { margin: 0 0 4px; font-size: 20px; }
.wm-field { display: grid; gap: 6px; }
.wm-field label { font-size: 13px; font-weight: 600; color: #374151; }
.wm-field input, .wm-field textarea { padding: 10px 12px; border: 1px solid #d1d5db; border-radius: calc(var(--wm-radius, 14px) - 6px); font: 15px system-ui, sans-serif; }
.wm-field input:focus-visible, .wm-field textarea:focus-visible { outline: 3px solid color-mix(in srgb, var(--wm-primary, #2563eb) 35%, white); border-color: var(--wm-primary, #2563eb); }
.wm-btn { min-height: 44px; padding: 10px 22px; border: 0; border-radius: calc(var(--wm-radius, 14px) - 4px); font: 600 15px/1 system-ui, sans-serif; cursor: pointer; }
.wm-btn--primary { background: var(--wm-primary, #2563eb); color: var(--wm-on-primary, #fff); }

/* Contrato WebMCP (equivalente al marcado declarativo del HTML: toolname/tooldescription/toolparamtitle) */
form[data-form="login-form"] button[type="submit"] {
  webmcp-tool: "login";
  webmcp-description: "Inicia sesión con correo y contraseña";
  webmcp-param-email: value(form[data-form="login-form"] [name="email"]);
  webmcp-param-password: value(form[data-form="login-form"] [name="password"]);
  webmcp-trigger: "submit" on form[data-form="login-form"];
  webmcp-intent: "submit";
  webmcp-confirmation: "needed";
  webmcp-permissions: "restricted";
  webmcp-doc-email: "Correo con el que te registraste";
  webmcp-doc-password: "Contraseña de la cuenta (mínimo 8 caracteres)";
}

<form class="wm-form" data-form="login-form" toolname="login" tooldescription="Inicia sesión con correo y contraseña" action="#" method="post" novalidate>
  <h2 class="wm-form__title">Iniciar sesión</h2>
  <div class="wm-field"><label for="email">Correo electrónico</label><input id="email" name="email" type="email" required autocomplete="email" toolparamtitle="email" toolparamdescription="Correo con el que te registraste"></div>
  <div class="wm-field"><label for="password">Contraseña</label><input id="password" name="password" type="password" required minlength="8" autocomplete="current-password" toolparamtitle="password" toolparamdescription="Contraseña de la cuenta (mínimo 8 caracteres)"></div>
  <button class="wm-btn wm-btn--primary" type="submit">Entrar</button>
</form>

{
  "id": "core-login-form",
  "name": "Login Form",
  "category": "forms",
  "library": "core",
  "version": "1.0.0",
  "description": "Formulario de acceso IA-First (email + contraseña) con API declarativa WebMCP (toolname/tooldescription), confirmación requerida y permisos restringidos.",
  "author": "WebMCPcss Team",
  "tags": [
    "form",
    "login",
    "auth",
    "declarative",
    "core"
  ],
  "controls": [
    {
      "variable": "--wm-primary",
      "label": "Color primario",
      "type": "color",
      "default": "#2563eb"
    },
    {
      "variable": "--wm-on-primary",
      "label": "Texto sobre primario",
      "type": "color",
      "default": "#ffffff"
    },
    {
      "variable": "--wm-radius",
      "label": "Radio",
      "type": "range",
      "default": "10px",
      "min": 0,
      "max": 24,
      "step": 1,
      "unit": "px"
    },
    {
      "variable": "--wm-surface",
      "label": "Fondo de la superficie",
      "type": "color",
      "default": "#ffffff"
    }
  ],
  "promptExamples": [
    "añade un enlace de “¿olvidaste tu contraseña?” bajo el formulario",
    "cambia el texto del botón Entrar a Acceder"
  ],
  "animateExamples": [
    "haz que el formulario de login aparezca con fade-in",
    "agita el formulario cuando falle el acceso"
  ],
  "related": [
    "tailwind-login-form",
    "bootstrap-login-form",
    "mui-login-form",
    "shadcn-login-form"
  ],
  "preview": "preview.css",
  "css": "login-form.webmcp.css",
  "html": "login-form.html"
}