desy-html 16.0.4 → 17.0.1

package/src/templates/components/spinner/_examples.spinner.njk

@@ -1,101 +1,91 @@
-{% set exampleComponent = "spinner" %}
-{% set examples =  [
-  {
-    "name": "default"
-  },
-  {
-    "name": "con texto para lector de pantalla",
-    "description": "Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.",
-    "data": {
-      "text": "Espere por favor",
-      "classes": "text-neutral-base"
-    },
-    "visualDescription": "Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px. Incluye texto descriptivo negro pequeño posicionado a la izquierda superior del contenedor.",
-    "_generated": {
-      "hash": "8511efaf4def7cfce2399dffb0b90975",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:51.449Z"
-    },
-    "visualDescription": "Spinner circular animado compuesto por un anillo con borde grueso, color gris claro en la mayor parte del círculo y azul en un segmento, creando efecto de rotación. El spinner tiene tamaño mediano (aproximadamente 40-50px de diámetro) y está centrado horizontalmente dentro de un contenedor rectangular con fondo blanco y borde gris claro de 1px.",
-    "_generated": {
-      "hash": "6780338ece7add80c4ca7b880d2da372",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:51.449Z"
-    }
-  },
-  {
-    "name": "Tamaño xs",
-    "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
-    "data": {
-      "classes": "text-xs"
-    },
-    "visualDescription": "Spinner circular animado de dimensiones reducidas (aproximadamente 16-20px de diámetro) con anillo de borde delgado, mostrando color gris claro en la mayoría del círculo y segmento azul en rotación. Está centrado horizontalmente dentro de contenedor rectangular con fondo blanco y borde gris claro de 1px. Texto descriptivo negro pequeño aparece en la esquina superior izquierda del contenedor.",
-    "_generated": {
-      "hash": "a61e977d2f10f747f279648b7a88d393",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:51.449Z"
-    }
-  },
-  {
-    "name": "Tamaño lg",
-    "data": {
-      "classes": "text-lg"
-    },
-    "visualDescription": "Spinner circular animado de tamaño mediano-grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación. Fondo blanco sin bordes visibles en el contenedor.",
-    "_generated": {
-      "hash": "8d32fc49a76315889fc61c2e944cefe0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:59.283Z"
-    }
-  },
-  {
-    "name": "Tamaño 6xl",
-    "data": {
-      "classes": "text-6xl"
-    },
-    "visualDescription": "Spinner circular animado de tamaño extra grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación continua. Fondo blanco sin bordes, ocupando mayor espacio vertical que proporcional al tamaño del spinner.",
-    "_generated": {
-      "hash": "fd91c6a9f4ef3cfadf3f09960c34254a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:59.283Z"
-    }
-  },
-  {
-    "name": "color neutral color base",
-    "description": "Usa las clases de color de texto para dar color al Spinner.",
-    "data": {
-      "classes": "text-neutral-base"
-    },
-    "visualDescription": "Spinner circular animado de tamaño mediano centrado horizontalmente. Ícono de carga de color gris medio con animación de rotación. Fondo blanco sin bordes visibles, con espaciado vertical equilibrado alrededor del elemento.",
-    "_generated": {
-      "hash": "8dbff641c7cfd55b74792bb69982882b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:59.283Z"
-    }
-  },
-  {
-    "name": "color primario",
-    "data": {
-      "classes": "text-primary-base"
-    },
-    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El spinner tiene un tamaño compacto (aproximadamente 20-30px de diámetro) y presenta animación de rotación continua. Fondo transparente con el indicador de carga centrado horizontalmente en el contenedor.",
-    "_generated": {
-      "hash": "aa215a43392aa849148d145595d26725",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:07.948Z"
-    }
-  },
-  {
-    "name": "Establecida la anchura y altura del contenedor con clases",
-    "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
-    "data": {
-      "classes": "border border-neutral-light w-60 h-60"
-    },
-    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El contenedor presenta borde gris claro de 1px, padding interno visible, y título descriptivo en negro arriba del spinner. El spinner mantiene animación de rotación continua dentro de un área rectangular delimitada.",
-    "_generated": {
-      "hash": "416dacab404dafef1a6c659c714f1b3f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:07.948Z"
-    }
-  }
-] %}
+{% set exampleComponent = "spinner" %}
+{% set examples =  [
+  {
+    "name": "default",
+    "visualDescription": "Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px."
+  },
+  {
+    "name": "con texto para lector de pantalla",
+    "description": "Usa un texto personalizado para lectores de pantalla en vez del texto por defecto.",
+    "data": {
+      "text": "Espere por favor",
+      "classes": "text-neutral-base"
+    },
+    "visualDescription": "Spinner circular animado con anillo de borde grueso, combinando color gris claro en la mayor parte y segmento azul en rotación. Dimensiones medianas (aproximadamente 40-50px de diámetro), centrado horizontalmente en contenedor rectangular blanco con borde gris claro de 1px. Incluye texto descriptivo posicionado debajo del spinner."
+  },
+  {
+    "name": "Tamaño xs",
+    "description": "Usa las clases de tamaño de texto para dar tamaño al Spinner.",
+    "data": {
+      "classes": "text-xs"
+    },
+    "visualDescription": "Spinner circular animado de dimensiones reducidas (aproximadamente 16-20px de diámetro) con anillo de borde delgado, mostrando color gris claro en la mayoría del círculo y segmento azul en rotación. Está centrado horizontalmente dentro de contenedor rectangular con fondo blanco y borde gris claro de 1px. Texto descriptivo negro pequeño aparece en la esquina superior izquierda del contenedor.",
+    "_generated": {
+      "hash": "a61e977d2f10f747f279648b7a88d393",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:51.449Z"
+    }
+  },
+  {
+    "name": "Tamaño lg",
+    "data": {
+      "classes": "text-lg"
+    },
+    "visualDescription": "Spinner circular animado de tamaño mediano-grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación. Fondo blanco sin bordes visibles en el contenedor.",
+    "_generated": {
+      "hash": "8d32fc49a76315889fc61c2e944cefe0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
+    }
+  },
+  {
+    "name": "Tamaño 6xl",
+    "data": {
+      "classes": "text-6xl"
+    },
+    "visualDescription": "Spinner circular animado de tamaño extra grande centrado horizontalmente. Ícono de carga de color gris oscuro con animación de rotación continua. Fondo blanco sin bordes, ocupando mayor espacio vertical que proporcional al tamaño del spinner.",
+    "_generated": {
+      "hash": "fd91c6a9f4ef3cfadf3f09960c34254a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
+    }
+  },
+  {
+    "name": "color neutral color base",
+    "description": "Usa las clases de color de texto para dar color al Spinner.",
+    "data": {
+      "classes": "text-neutral-base"
+    },
+    "visualDescription": "Spinner circular animado de tamaño mediano centrado horizontalmente. Ícono de carga de color gris medio con animación de rotación. Fondo blanco sin bordes visibles, con espaciado vertical equilibrado alrededor del elemento.",
+    "_generated": {
+      "hash": "8dbff641c7cfd55b74792bb69982882b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:59.283Z"
+    }
+  },
+  {
+    "name": "color primario",
+    "data": {
+      "classes": "text-primary-base"
+    },
+    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El spinner tiene un tamaño compacto (aproximadamente 20-30px de diámetro) y presenta animación de rotación continua. Fondo transparente con el indicador de carga centrado horizontalmente en el contenedor.",
+    "_generated": {
+      "hash": "aa215a43392aa849148d145595d26725",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:07.948Z"
+    }
+  },
+  {
+    "name": "Establecida la anchura y altura del contenedor con clases",
+    "description": "Usa las clases de tamaño para cambiar las dimensiones del contenedor.",
+    "data": {
+      "classes": "border border-neutral-light w-60 h-60"
+    },
+    "visualDescription": "Spinner circular animado con borde azul primario de grosor medio. El contenedor presenta borde gris claro de 1px, padding interno visible, y título descriptivo en negro arriba del spinner. El spinner mantiene animación de rotación continua dentro de un área rectangular delimitada.",
+    "_generated": {
+      "hash": "416dacab404dafef1a6c659c714f1b3f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:07.948Z"
+    }
+  }
+] %}

package/src/templates/components/spinner/_macro.spinner.njk

@@ -1,3 +1,3 @@
-{% macro componentSpinner(params) %}
-{% include "./_template.spinner.njk" %}
-{% endmacro %}
+{% macro componentSpinner(params) %}
+{% include "./_template.spinner.njk" %}
+{% endmacro %}

package/src/templates/components/spinner/_styles.spinner.css

@@ -1,33 +1,33 @@
-/* ==========================================================================
-   _styles.spinner.css
-   ========================================================================== */
-
-@layer components {
-
-  .c-spinner {
-    @apply relative;
-    @apply block;
-    @apply pointer-events-none;
-
-    &::after {
-      content: '';
-      @apply absolute!;
-      top: calc(50% - (1em / 2));
-      left: calc(50% - (1em / 2));
-      @apply block;
-      width: 1em;
-      height: 1em;
-      @apply border-0.125em border-solid border-current;
-      @apply rounded-full;
-      border-right-color: var(--color-transparent);
-      border-top-color: var(--color-transparent);
-      animation: spinAround 500ms infinite linear;
-    }
-  }
-
-
-  @keyframes spinAround {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-  }
-}
+/* ==========================================================================
+   _styles.spinner.css
+   ========================================================================== */
+
+@layer components {
+
+  .c-spinner {
+    @apply relative;
+    @apply block;
+    @apply pointer-events-none;
+
+    &::after {
+      content: '';
+      @apply absolute!;
+      top: calc(50% - (1em / 2));
+      left: calc(50% - (1em / 2));
+      @apply block;
+      width: 1em;
+      height: 1em;
+      @apply border-0.125em border-solid border-current;
+      @apply rounded-full;
+      border-right-color: var(--color-transparent);
+      border-top-color: var(--color-transparent);
+      animation: spinAround 500ms infinite linear;
+    }
+  }
+
+
+  @keyframes spinAround {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+}

package/src/templates/components/spinner/_template.spinner.njk

@@ -1,13 +1,13 @@
-<!-- spinner -->
-<span class="c-spinner {% if params.classes %}{{ params.classes }}{% endif %}" data-module="c-spinner"{% if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %} >
-  {% if params.text %}
-  <span class="sr-only" role="alert" aria-live="assertive">
-    {{ params.text }}
-  </span>
-  {% else %}
-  <span class="sr-only" role="alert" aria-live="assertive">
-    Cargando
-  </span>
-  {% endif %}
-</span>
+<!-- spinner -->
+<span class="c-spinner {% if params.classes %}{{ params.classes }}{% endif %}" data-module="c-spinner"{% if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %} >
+  {% if params.text %}
+  <span class="sr-only" role="alert" aria-live="assertive">
+    {{ params.text }}
+  </span>
+  {% else %}
+  <span class="sr-only" role="alert" aria-live="assertive">
+    Cargando
+  </span>
+  {% endif %}
+</span>
 <!-- /spinner -->

package/src/templates/components/spinner/params.spinner.yaml

@@ -1,13 +1,13 @@
-params:
-- name: text
-  type: string
-  required: false
-  description: Text for screenreaders.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the spinner component.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: text
+  type: string
+  required: false
+  description: Text for screenreaders.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the spinner component.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the spinner component.

package/src/templates/components/status/_examples.status.njk

@@ -1,80 +1,80 @@
-{% set exampleComponent = "status" %}
-{% set examples =  [
-  {
-    "name": "éxito",
-    "data": {
-      "text": "Completo",
-      "icon": {
-        "type": "success"
-      }
-    },
-    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro en negrita con un checkmark verde al lado derecho.",
-    "_generated": {
-      "hash": "210a3c994639ff72ccf3aa8da8c78331",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:54.477Z"
-    }
-  },
-  {
-    "name": "alerta",
-    "data": {
-      "text": "Incompleto",
-      "icon": {
-        "type": "alert"
-      },
-      "classes": "text-alert-base"
-    },
-    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto rojo en negrita con un ícono triangular de advertencia rojo al lado derecho.",
-    "_generated": {
-      "hash": "af93f448329f211c857158a43fcc9ad1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:54.478Z"
-    }
-  },
-  {
-    "name": "cargando",
-    "data": {
-      "text": "Subiendo (20%)",
-      "icon": {
-        "type": "loading"
-      }
-    },
-    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro con un ícono circular de progreso animado al lado derecho.",
-    "_generated": {
-      "hash": "0cdafd3c8ecb35991c0a071f05734b14",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:54.478Z"
-    }
-  },
-  {
-    "name": "error",
-    "data": {
-      "text": "Error",
-      "icon": {
-        "type": "error"
-      },
-      "classes": "text-alert-base"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular indicando tipo, seguido de texto en rojo negrita con ícono circular de información rojo adyacente.",
-    "_generated": {
-      "hash": "cb4f2b0375a7d930e44de5dbcb9f50d0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:15:01.600Z"
-    }
-  },
-  {
-    "name": "Icono personalizado",
-    "data": {
-      "text": "Atención",
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular, seguido de texto en negro negrita con ícono circular de información negro adyacente.",
-    "_generated": {
-      "hash": "7787f447d3996d45fb2da6a72218112d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:15:01.601Z"
-    }
-  }
-] %}
+{% set exampleComponent = "status" %}
+{% set examples =  [
+  {
+    "name": "éxito",
+    "data": {
+      "text": "Completo",
+      "icon": {
+        "type": "success"
+      }
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro en negrita con un icono de checkmark verde al lado derecho.",
+    "_generated": {
+      "hash": "210a3c994639ff72ccf3aa8da8c78331",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.477Z"
+    }
+  },
+  {
+    "name": "alerta",
+    "data": {
+      "text": "Incompleto",
+      "icon": {
+        "type": "alert"
+      },
+      "classes": "text-alert-base"
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto en color de alerta en negrita con un icono triangular de advertencia al lado derecho.",
+    "_generated": {
+      "hash": "af93f448329f211c857158a43fcc9ad1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.478Z"
+    }
+  },
+  {
+    "name": "cargando",
+    "data": {
+      "text": "Subiendo (20%)",
+      "icon": {
+        "type": "loading"
+      }
+    },
+    "visualDescription": "Componente rectangular con borde gris delgado y fondo blanco. Contiene texto pequeño gris en la parte superior indicando tipo, seguido de texto negro con un icono circular de progreso animado al lado derecho.",
+    "_generated": {
+      "hash": "0cdafd3c8ecb35991c0a071f05734b14",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:54.478Z"
+    }
+  },
+  {
+    "name": "error",
+    "data": {
+      "text": "Error",
+      "icon": {
+        "type": "error"
+      },
+      "classes": "text-alert-base"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular indicando tipo, seguido de texto en color de error en negrita con icono circular de información adyacente.",
+    "_generated": {
+      "hash": "cb4f2b0375a7d930e44de5dbcb9f50d0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:01.600Z"
+    }
+  },
+  {
+    "name": "Icono personalizado",
+    "data": {
+      "text": "Atención",
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 text-primary-base' aria-hidden='true' focusable='false'><path d='M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z' fill='currentColor'/></svg>"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene encabezado en texto negro pequeño regular, seguido de texto en negro negrita con icono personalizado adyacente.",
+    "_generated": {
+      "hash": "7787f447d3996d45fb2da6a72218112d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:15:01.601Z"
+    }
+  }
+] %}

package/src/templates/components/status/_macro.status.njk

@@ -1,3 +1,3 @@
-{% macro componentStatus(params) %}
-{% include "./_template.status.njk" %}
-{% endmacro %}
+{% macro componentStatus(params) %}
+{% include "./_template.status.njk" %}
+{% endmacro %}

package/src/templates/components/status/_template.status.njk

@@ -1,24 +1,24 @@
-<!-- status -->
-<div {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
-  <p class="inline-flex items-center">
-    <span class="inline-block font-bold uppercase">
-      {{ params.text }}
-    </span>
-    <span class="inline-block ml-sm">
-    {% if params.icon %}
-      {% if params.icon.html %}
-      {{ params.icon.html | filterquotes | safe }}
-      {% elseif params.icon.type == 'alert' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-      {% elseif params.icon.type == 'loading' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false"><path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor"/><path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor"/></svg>
-      {% elseif params.icon.type == 'error' %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor"/><path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor"/></svg>
-      {% else %}
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
-      {% endif %}
-    {% endif %}
-    </span>
-  </p>
-</div>
+<!-- status -->
+<div {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+  <p class="inline-flex items-center">
+    <span class="inline-block font-bold uppercase">
+      {{ params.text }}
+    </span>
+    <span class="inline-block ml-sm">
+    {% if params.icon %}
+      {% if params.icon.html %}
+      {{ params.icon.html | filterquotes | safe }}
+      {% elseif params.icon.type == 'alert' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% elseif params.icon.type == 'loading' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" focusable="false"><path d="M71.15 2.3a7.7 7.7 0 100 15.4A52.3 52.3 0 1118.85 70a62.29 62.29 0 014.7-23.16l5.76 4a7.55 7.55 0 004.25 1.31 7.41 7.41 0 004.09-1.22 7.51 7.51 0 003.28-7.68L37 22.45a7.52 7.52 0 00-8.66-6l-21 3.65a7.5 7.5 0 00-3 13.57l6.21 4.27A77.78 77.78 0 003.45 70a67.7 67.7 0 1067.7-67.7z" fill="currentColor"/><path d="M91.15 92.5a7.45 7.45 0 01-3.35-.79l-20-10A7.51 7.51 0 0163.65 75V42.5a7.5 7.5 0 0115 0v27.87l15.86 7.92a7.5 7.5 0 01-3.36 14.21z" fill="currentColor"/></svg>
+      {% elseif params.icon.type == 'error' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" aria-hidden="true" focusable="false"><path d="M70 75a7.5 7.5 0 007.5-7.5v-25a7.5 7.5 0 00-15 0v25A7.5 7.5 0 0070 75zM60 92.5a10 10 0 1020 0 10 10 0 10-20 0z" fill="currentColor"/><path d="M139.78 101.83L135 82.6a7.51 7.51 0 00-9.1-5.45l-19.22 4.8a7.5 7.5 0 00-2 13.71l6.11 3.66A55.31 55.31 0 0170 120.19a50.47 50.47 0 01-47.16-33.06 7.503 7.503 0 00-14.09 5.16A65.52 65.52 0 0070 135.19 71.27 71.27 0 00123.57 107l5.07 3a7.5 7.5 0 0011.14-8.25zM14.13 62.85l19.22-4.8a7.5 7.5 0 002.05-13.71L29.76 41A56.18 56.18 0 0170 19.81a50.47 50.47 0 0147.16 33.06 7.51 7.51 0 007 4.92 7.61 7.61 0 002.59-.46 7.51 7.51 0 004.46-9.62A65.52 65.52 0 0070 4.81 71.53 71.53 0 0016.83 33.2l-5.47-3.28A7.5 7.5 0 00.22 38.17L5 57.4a7.51 7.51 0 007.27 5.68 7.65 7.65 0 001.86-.23z" fill="currentColor"/></svg>
+      {% else %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-success-dark" aria-hidden="true" focusable="false"><path d="M39.94 125a19.88 19.88 0 01-15.53-7.81L2.48 92.26a10 10 0 0115-13.2l20.55 23.39a2.5 2.5 0 003.68.08l81-84.42a10.002 10.002 0 1114.5 13.78l-82.02 86.33A19.41 19.41 0 0139.94 125z" fill="currentColor"/></svg>
+      {% endif %}
+    {% endif %}
+    </span>
+  </p>
+</div>
 <!-- /status -->

package/src/templates/components/status/params.status.yaml

@@ -1,25 +1,25 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: Text for the status.
-- name: icon
-  type: object
-  required: true
-  description: This is the icon at right
-  - name: html
-    type: string
-    required: false
-    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
-  - name: type
-    type: string
-    required: false
-    description: Predefined icon types are `success`, `alert`,`loading` and `error`. Defaults to `success`.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the status component.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: text
+  type: string
+  required: true
+  description: Text for the status.
+- name: icon
+  type: object
+  required: true
+  description: This is the icon at right
+  - name: html
+    type: string
+    required: false
+    description: Use this html to insert a custom svg inline icon. If this is set, the type are not used.
+  - name: type
+    type: string
+    required: false
+    description: Predefined icon types are `success`, `alert`,`loading` and `error`. Defaults to `success`.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the status component.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the status component.