desy-html 16.0.4 → 17.0.1

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

@@ -0,0 +1,440 @@
+{% set exampleComponent = "combobox" %}
+{% set examples =  [
+    {
+      "name": "por defecto",
+      "data": {
+        "id": "default",
+        "name": "provincia",
+        "label": {
+          "text": "Provincia"
+        },
+        "autocomplete": "both",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo alineado a la derecha del input.",
+    "_generated": {
+      "hash": "756694d3c33391d35e6bb5d73f7629a0",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:11.765Z"
+    }
+    },
+    {
+      "name": "selección múltiple",
+      "description": "Usa el parámetro <code>multiselect: true</code> para permitir varias selecciones. En este caso al seleccionar un item el elemento no se cerrará.",
+      "data": {
+        "id": "multiselect",
+        "name": "provincias",
+        "label": {
+          "text": "Provincias"
+        },
+        "multiselect": true,
+        "autocomplete": "list",
+        "placeholder": "Escribe para filtrar...",
+        "items": [
+          { "text": "Huesca", "selected": true },
+          { "text": "Zaragoza" },
+          { "text": "Teruel" },
+          { "text": "Barcelona" },
+          { "text": "Madrid", "selected": true },
+          { "text": "Valencia" }
+        ]
+      },
+    "visualDescription": "Combobox con label negro encima. Campo rectangular con borde gris, fondo blanco e icono de chevron a la derecha, con texto de ayuda gris para filtrar. Al desplegarse muestra la lista de opciones. Puede tener varias opciones seleccionadas. Las seleccionadas aparecen en negrita con un checkmark a la izquierda. El listbox permanece abierto al elegir varias."
+    },
+    {
+      "name": "con estado activo",
+      "description": "Simula activar la pseudo-clase de CSS <code>:active</code>. En realidad sólo se usa para documentar estos ejemplos.",
+      "data": {
+        "id": "with-active-state",
+        "name": "provincia-active",
+        "label": {
+          "text": "Provincia"
+        },
+        "classes": "ds-active",
+        "items": [
+          { "text": "Huesca" },
+          { "text": "Zaragoza" },
+          { "text": "Teruel" },
+          { "text": "Barcelona" },
+          { "text": "Madrid" },
+          { "text": "Valencia" }
+        ]
+      },
+    "visualDescription": "Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde gris claro de 1px, fondo blanco, y ícono de chevron gris apuntando hacia abajo alineado a la derecha del input.",
+    "_generated": {
+      "hash": "5ce51117eba35850b1bc5bfe2a597ccf",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:11.765Z"
+    }
+    },
+    {
+      "name": "con estado focus",
+      "description": "Simula activar la pseudo-clase de CSS <code>:focus</code>. En realidad sólo se usa para documentar estos ejemplos.",
+      "data": {
+        "id": "with-focus-state",
+        "name": "provincia-focus",
+        "label": {
+          "text": "Provincia"
+        },
+        "classes": "ds-focus",
+        "items": [
+          { "text": "Huesca" },
+          { "text": "Zaragoza" },
+          { "text": "Teruel" },
+          { "text": "Barcelona" },
+          { "text": "Madrid" },
+          { "text": "Valencia" }
+        ]
+      },
+    "visualDescription": "Combobox con dropdown desplegable cerrado. Label gris oscuro pequeño posicionado arriba. Campo rectangular con borde amarillo/dorado de 2-3px grosor destacado, fondo blanco, y ícono de chevron gris oscuro alineado a la derecha del input.",
+    "_generated": {
+      "hash": "c73755ca5c716f6c7ab62e6b50219bf6",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:11.765Z"
+    }
+    },
+    {
+      "name": "con placeholder",
+      "description": "Usa el parámetro <code>placeholder</code> para mostrar texto de ayuda en el campo vacío.",
+      "data": {
+        "id": "with-placeholder",
+        "name": "provincia-placeholder",
+        "label": {
+          "text": "Provincia"
+        },
+        "placeholder": "Escribe para buscar...",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label negro encima, campo desplegable con borde gris de 1px y fondo blanco. El campo muestra texto gris claro interno alineado a la izquierda, con icono de flecha gris apuntando hacia abajo en el extremo derecho.",
+    "_generated": {
+      "hash": "f3fd2ce66ed2e85173b34d0e9241534b",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:19.601Z"
+    }
+    },
+    {
+      "name": "con autocomplete list",
+      "description": "Usa <code>autocomplete: 'list'</code> para filtrar las opciones sin autocompletar inline en el campo de texto.",
+      "data": {
+        "id": "autocomplete-list",
+        "name": "provincia-list",
+        "label": {
+          "text": "Provincia"
+        },
+        "autocomplete": "list",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label negro encima, campo desplegable rectangular con borde gris de 1px y fondo blanco. Campo de entrada de altura mediana con icono de flecha gris hacia abajo alineado a la derecha, sin texto interno visible.",
+    "_generated": {
+      "hash": "19ae452df9aff333194de962d888dd17",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:19.601Z"
+    }
+    },
+    {
+      "name": "con valor por defecto",
+      "description": "Usa <code>defaultValue</code> y el parámetro <code>selected: true</code> en un item para preseleccionar una opción.",
+      "data": {
+        "id": "with-default-value",
+        "name": "provincia-default",
+        "label": {
+          "text": "Provincia"
+        },
+        "defaultValue": "Zaragoza",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza",
+            "selected": true
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label negro encima, campo desplegable con borde gris de 1px y fondo blanco. El campo contiene texto negro alineado a la izquierda e icono de flecha gris apuntando hacia abajo en el borde derecho.",
+    "_generated": {
+      "hash": "37062e31ad900b6ac90bbce6213b5835",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:19.601Z"
+    }
+    },
+    {
+      "name": "con hint",
+      "description": "Usa el componente <code>hint</code> para proporcionar información adicional al usuario.",
+      "data": {
+        "id": "with-hint",
+        "name": "provincia-hint",
+        "label": {
+          "text": "Provincia"
+        },
+        "hint": {
+          "text": "Selecciona la provincia donde resides actualmente."
+        },
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label de texto pequeño en negro posicionado encima del campo. Dropdown rectangular con borde gris de 1px, fondo blanco, esquinas redondeadas y flecha desplegable gris a la derecha. Texto de ayuda gris claro en tamaño pequeño ubicado debajo del campo desplegable.",
+    "_generated": {
+      "hash": "b6fc99effbc295d9f8188a396050820a",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:28.284Z"
+    }
+    },
+    {
+      "name": "con mensaje de error",
+      "description": "Usa <code>errorMessage</code> para mostrar el estado de error.",
+      "data": {
+        "id": "with-error",
+        "name": "provincia-error",
+        "label": {
+          "text": "Provincia"
+        },
+        "errorMessage": {
+          "text": "Selecciona una provincia válida."
+        },
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label negro en tamaño estándar posicionado arriba del campo. Dropdown rectangular con borde rojo de 2px, fondo blanco, esquinas redondeadas y flecha desplegable a la derecha. Mensaje de validación en rojo ubicado debajo del campo, en tamaño pequeño.",
+    "_generated": {
+      "hash": "1fa5ead8d446595cbab0521aa091a777",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:28.284Z"
+    }
+    },
+    {
+      "name": "peque",
+      "description": "Label solo visible para lectores de pantalla.",
+      "data": {
+        "id": "small",
+        "name": "provincia-small",
+        "label": {
+          "text": "Provincia",
+          "classes": "sr-only"
+        },
+        "classes": "px-2 py-1 text-sm",
+        "items": [
+          { "text": "Huesca" },
+          { "text": "Zaragoza" },
+          { "text": "Teruel" },
+          { "text": "Barcelona" },
+          { "text": "Madrid" },
+          { "text": "Valencia" }
+        ]
+      },
+    "visualDescription": "Combobox con label negro en tamaño estándar posicionado arriba del campo. Dropdown rectangular compacto con borde gris de 1px, fondo blanco, esquinas redondeadas y flecha desplegable gris a la derecha. Altura reducida del campo de entrada en comparación con dimensiones estándar.",
+    "_generated": {
+      "hash": "9ceb87c4fb1288fdef9c191d3ea711dc",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:28.284Z"
+    }
+    },
+    {
+      "name": "grande",
+      "description": "Label solo visible para lectores de pantalla.",
+      "data": {
+        "id": "large",
+        "name": "provincia-large",
+        "label": {
+          "text": "Provincia",
+          "classes": "sr-only"
+        },
+        "classes": "px-4 py-3 text-lg",
+        "items": [
+          { "text": "Huesca" },
+          { "text": "Zaragoza" },
+          { "text": "Teruel" },
+          { "text": "Barcelona" },
+          { "text": "Madrid" },
+          { "text": "Valencia" }
+        ]
+      },
+    "visualDescription": "Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde gris de 1px, fondo blanco, altura aproximada de 48px, con icono de flecha hacia abajo en el extremo derecho. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "0bb17432fea14d5dc34d8525e580d60b",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:37.642Z"
+    }
+    },
+    {
+      "name": "deshabilitado",
+      "description": "Usa <code>disabled: true</code> para deshabilitar el combobox.",
+      "data": {
+        "id": "disabled",
+        "name": "provincia-disabled",
+        "label": {
+          "text": "Provincia"
+        },
+        "disabled": true,
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde gris claro de 1px, fondo gris muy claro (#f5f5f5 aproximadamente), altura estándar de 40px, con icono de flecha hacia abajo atenuado en el extremo derecho. Esquinas ligeramente redondeadas, apariencia visualmente inactiva.",
+    "_generated": {
+      "hash": "e67fe676a91a3750b1666ef8b2b9fab1",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:37.642Z"
+    }
+    },
+    {
+      "name": "con clases en container",
+      "description": "Usa <code>classesContainer</code> para aplicar clases CSS al contenedor del combobox.",
+      "data": {
+        "id": "classes-container",
+        "name": "provincia-classes",
+        "label": {
+          "text": "Provincia"
+        },
+        "classesContainer": "inline-block p-base bg-primary-light",
+        "items": [
+          {
+            "text": "Huesca"
+          },
+          {
+            "text": "Zaragoza"
+          },
+          {
+            "text": "Teruel"
+          },
+          {
+            "text": "Barcelona"
+          },
+          {
+            "text": "Madrid"
+          },
+          {
+            "text": "Valencia"
+          }
+        ]
+      },
+    "visualDescription": "Combobox con label de texto pequeño en negro posicionado encima del campo. Campo desplegable rectangular con borde turquesa/cyan de 2px, fondo celeste muy claro, altura estándar de 40px, con icono de flecha hacia abajo en el extremo derecho. Esquinas ligeramente redondeadas, contenedor con fondo turquesa claro que envuelve todo el componente.",
+    "_generated": {
+      "hash": "22034d92ea1a5d59162e03504ca3c7cc",
+      "version": "1.0.0",
+      "timestamp": "2026-04-20T17:48:37.642Z"
+    }
+    }
+] %}

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

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

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

@@ -0,0 +1,92 @@
+/* ==========================================================================
+   _styles.combobox.css
+   ========================================================================== */
+@layer components {
+  .c-combobox__input-wrapper {
+    @apply relative;
+    @apply inline-flex;
+    @apply items-center;
+  }
+
+  .c-combobox__toggle {
+    @apply absolute;
+    @apply right-1;
+    @apply top-1/2;
+    @apply -translate-y-1/2;
+    @apply p-1;
+    @apply text-neutral-dark;
+    @apply rounded-sm;
+    @apply cursor-pointer;
+    @apply border-0;
+    @apply bg-transparent;
+
+    &:hover {
+      @apply text-black;
+    }
+
+    &:focus-visible {
+      @apply outline-hidden;
+      @apply bg-warning-base;
+      @apply shadow-outline-focus;
+      @apply text-black;
+    }
+  }
+
+  .c-combobox__tooltip {
+    @apply hidden;
+
+    [role='option'] {
+      @apply relative;
+
+      &.focused,
+      &:focus,
+      &.ds-focus {
+        @apply bg-warning-base;
+        @apply border-warning-base;
+        @apply shadow-outline-black;
+        @apply text-black;
+        @apply outline-hidden;
+      }
+
+      &[aria-selected='true'] {
+        @apply font-bold;
+
+        &::before {
+          @apply bg-center bg-no-repeat bg-cover;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+          content: '';
+          @apply w-3;
+          @apply h-3;
+          @apply absolute;
+          @apply top-3;
+          @apply left-2;
+        }
+      }
+    }
+  }
+
+  .c-combobox__input {
+    @apply cursor-pointer;
+
+    &:active:not(:disabled),
+    &.ds-active:not(:disabled) {
+      @apply relative;
+      @apply top-px;
+    }
+
+    &.ds-focus {
+      @apply border-black;
+      @apply shadow-outline-focus-input;
+      @apply ring-4;
+      @apply ring-warning-base;
+    }
+  }
+
+  .c-combobox__no-results {
+    @apply px-base;
+    @apply py-sm;
+    @apply text-sm;
+    @apply text-neutral-dark;
+    @apply italic;
+  }
+}

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

@@ -0,0 +1,97 @@
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% set errorId = params.id + '-error' %}
+{% set listboxId = params.id + '-listbox' %}
+{% set noResultsId = params.id + '-no-results' %}
+{% set autocompleteMode = params.autocomplete if params.autocomplete else "both" %}
+{% set noResultsText = params.noResultsText if params.noResultsText else "No hay resultados" %}
+{% set isMultiselect = params.multiselect %}
+{#- Build the id prefix for option items -#}
+{% set idPrefix = params.id + "-option" %}
+
+{#- Find the selected item to pre-fill the input -#}
+{% set selectedText = "" %}
+{% for item in params.items %}
+  {% if item and item.selected %}
+    {% set selectedText = item.text %}
+  {% endif %}
+{% endfor %}
+
+{% set inputValue = "" if params.multiselect else (params.defaultValue if params.defaultValue else selectedText) %}
+
+<!-- combobox -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}" data-module="c-combobox" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: {"id": params.id + "-label"},
+    for: params.id
+  }) | indent(2) | trim }}
+{% if params.hint %}
+  {% set hintId = params.id + '-hint' %}
+  {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+  {{ componentHint({
+    id: hintId,
+    classes: params.hint.classes,
+    attributes: params.hint.attributes,
+    html: params.hint.html,
+    text: params.hint.text
+  }) | indent(2) | trim }}
+{% endif %}
+{% if params.errorMessage %}
+  {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+  {{ componentErrorMessage({
+    id: errorId,
+    classes: params.errorMessage.classes,
+    attributes: params.errorMessage.attributes,
+    html: params.errorMessage.html,
+    text: params.errorMessage.text,
+    visuallyHiddenText: params.errorMessage.visuallyHiddenText
+  }) | indent(2) | trim }}
+{% endif %}
+  <div class="c-combobox relative {%- if params.classesContainer %} {{ params.classesContainer }}{% endif %}">
+    <div class="c-combobox__input-wrapper">
+      <input class="c-input c-combobox__input block mt-sm {% if params.errorMessage %}border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %}" id="{{ params.id }}" type="text" role="combobox" autocomplete="off" aria-autocomplete="{{ autocompleteMode }}" aria-expanded="false" aria-haspopup="listbox" aria-controls="{{ listboxId }}"
+      {%- if inputValue %} value="{{ inputValue }}"{% endif %}
+      {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+      {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+      {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
+      {{-" disabled" if params.disabled }} data-module="c-combobox-input">
+      <button class="c-combobox__toggle" type="button" tabindex="-1" aria-label="{{ params.toggleButtonLabel | default(params.label.text) }}" aria-controls="{{ listboxId }}" aria-expanded="false" data-module="c-combobox-toggle" {{-" disabled" if params.disabled }}>
+        <svg class="relative inline-block align-middle top-0.5" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+      </button>
+    </div>
+    {%- if not isMultiselect %}
+    <input type="hidden" name="{{ params.name }}" {%- if inputValue %} value="{{ inputValue }}"{% endif %} data-module="c-combobox-hidden">
+    {% endif -%}
+    <div class="c-combobox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white" data-module="c-combobox-tooltip">
+      <ul id="{{ listboxId }}" role="listbox" class="text-sm outline-hidden" aria-labelledby="{{ params.id }}-label"{% if isMultiselect %} aria-multiselectable="true" data-name="{{ params.name }}"{% endif %} data-module="c-combobox-list">
+      {% for item in params.items %}
+        {% if item %}
+        {%- if item.id -%}
+          {%- set optionId = item.id -%}
+        {%- else -%}
+          {%- if loop.first -%}
+            {%- set optionId = idPrefix -%}
+          {%- else -%}
+            {%- set optionId = idPrefix + "-" + loop.index -%}
+          {%- endif -%}
+        {%- endif -%}
+        <li role="option" id="{{ optionId }}" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif %}" aria-selected="{{ 'true' if item.selected else 'false' }}" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+          {{ item.text }}
+        </li>
+        {% endif %}
+      {% endfor %}
+      </ul>
+      <div role="status" class="c-combobox__no-results" hidden data-module="c-combobox-no-results">{{ noResultsText }}</div>
+    </div>
+  </div>
+</div>
+<!-- /combobox -->