desy-html 16.0.4 → 17.0.0

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

@@ -1,5 +1,5 @@
-<!-- _macro.select.njk -->
-
-{% macro componentSelect(params) %}
-{% include "./_template.select.njk" %}
-{% endmacro %}
+<!-- _macro.select.njk -->
+
+{% macro componentSelect(params) %}
+{% include "./_template.select.njk" %}
+{% endmacro %}

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

@@ -1,45 +1,45 @@
-/* ==========================================================================
-   _styles.select.css
-   ========================================================================== */
-
-@layer components {
-  .c-select--transparent {
-    @apply bg-transparent;
-    @apply border-transparent!;
-    @apply shadow-none;
-    @apply text-primary-base;
-    @apply underline;
-    @apply cursor-pointer;
-
-    &:hover:not(:disabled),
-    &.ds-hover:not(:disabled) {
-      @apply bg-neutral-light;
-      @apply border-neutral-base!;
-      @apply text-primary-base;
-    }
-
-    &[disabled],
-    &[disabled]:hover,
-    &[disabled]:focus,
-    &.c-button--disabled,
-    &.c-button--disabled:hover,
-    &.c-button--disabled:focus {
-      @apply bg-transparent;
-      @apply border-transparent!;
-      @apply no-underline;
-    }
-  }
-
-  .c-select--base {
-    @apply pr-10;
-    @apply pl-3;
-    @apply py-2;
-    @apply text-base;
-  }
-
-  .c-select--sm {
-    @apply pl-2;
-    @apply py-1;
-    @apply text-sm;
-  }
-}
+/* ==========================================================================
+   _styles.select.css
+   ========================================================================== */
+
+@layer components {
+  .c-select--transparent {
+    @apply bg-transparent;
+    @apply border-transparent!;
+    @apply shadow-none;
+    @apply text-primary-base;
+    @apply underline;
+    @apply cursor-pointer;
+
+    &:hover:not(:disabled),
+    &.ds-hover:not(:disabled) {
+      @apply bg-neutral-light;
+      @apply border-neutral-base!;
+      @apply text-primary-base;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-button--disabled,
+    &.c-button--disabled:hover,
+    &.c-button--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent!;
+      @apply no-underline;
+    }
+  }
+
+  .c-select--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+  .c-select--sm {
+    @apply pl-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+}

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

@@ -1,68 +1,68 @@
-{% 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' %}
-<!-- select -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {{ componentLabel({
-    html: params.label.html,
-    text: params.label.text,
-    classes: params.label.classes,
-    isPageHeading: params.label.isPageHeading,
-    attributes: params.label.attributes,
-    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 %}
-  {{ 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 %}
-  <select class="c-select block mt-sm transition duration-150 ease-in-out {% if params.errorMessage %}c-select--error border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold 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 }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {% for item in params.items %}
-    {% if item %}
-      {% if item.optgroup %}
-    <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
-          {% if item.optgroup.items %}
-            {% for sub in item.optgroup.items %}
-      <option value="{{ sub.value }}"
-      {{-" selected" if sub.selected }}
-      {{-" disabled" if sub.disabled }}
-      {{-" hidden" if sub.hidden }}
-      {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
-            {% endfor %}
-          {% endif %}
-    </optgroup>
-        {% for sub in item.optgroup.items %}
-        {% endfor %}
-      {% else %}
-    <option value="{{ item.value }}"
-      {{-" selected" if item.selected }}
-      {{-" disabled" if item.disabled }}
-      {{-" hidden" if item.hidden }}
-      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
-      {% endif %}
-    {% endif %}
-  {% endfor %}
-  </select>
-</div>
+{% 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' %}
+<!-- select -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ componentLabel({
+    html: params.label.html,
+    text: params.label.text,
+    classes: params.label.classes,
+    isPageHeading: params.label.isPageHeading,
+    attributes: params.label.attributes,
+    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 %}
+  {{ 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 %}
+  <select class="c-select block mt-sm transition duration-150 ease-in-out {% if params.errorMessage %}c-select--error border-alert-base ring-2 ring-alert-base{% else %}border-black{% endif %} rounded-sm font-semibold 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 }}" name="{{ params.name }}" {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %} {%- if params.errorMessage %} aria-errorMessage="{{ errorId }}" aria-invalid="true"{% endif %} {{-" disabled" if params.disabled }} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% for item in params.items %}
+    {% if item %}
+      {% if item.optgroup %}
+    <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
+          {% if item.optgroup.items %}
+            {% for sub in item.optgroup.items %}
+      <option value="{{ sub.value }}"
+      {{-" selected" if sub.selected }}
+      {{-" disabled" if sub.disabled }}
+      {{-" hidden" if sub.hidden }}
+      {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
+            {% endfor %}
+          {% endif %}
+    </optgroup>
+        {% for sub in item.optgroup.items %}
+        {% endfor %}
+      {% else %}
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {{-" hidden" if item.hidden }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
+      {% endif %}
+    {% endif %}
+  {% endfor %}
+  </select>
+</div>
 <!-- /select -->

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

@@ -1,94 +1,94 @@
-params:
-- name: id
-  type: string
-  required: true
-  description: Id for each select box.
-- name: name
-  type: string
-  required: true
-  description: Name property for the select.
-- name: items
-  type: array
-  required: true
-  description: Array of option items for the select.
-  params:
-  - name: value
-    type: string
-    required: false
-    description: Value for the option item.
-  - name: text
-    type: string
-    required: true
-    description: Text for the option item.
-  - name: optgroup
-    type: boolean
-    required: false
-    description: If true, there will be an optgroup with items.
-  - name: optgroup.label
-    type: string
-    required: false
-    description: Label for the optgroup.
-  - name: optgroup.disabled
-    type: boolean
-    required: false
-    description: If true, the optgroup will be disabled.
-  - name: optgroup.items
-    type: array
-    required: false
-    description: Provide subitems for the optgroup.
-  - name: selected
-    type: boolean
-    required: false
-    description: Sets the option as the selected.
-  - name: disabled
-    type: boolean
-    required: false
-    description: Sets the option item as disabled.
-  - name: hidden
-    type: boolean
-    required: false
-    description: Sets the option item as hidden.
-  - name: attributes
-    type: object
-    required: false
-    description: HTML attributes (for example data attributes) to add to the option.
-- name: describedBy
-  type: string
-  required: false
-  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
-- name: label
-  type: object
-  required: false
-  description: Label text or HTML by specifying value for either text or html keys.
-  isComponent: true
-- name: hint
-  type: object
-  required: false
-  description: Options for the hint component.
-  isComponent: true
-- name: errorMessage
-  type: object
-  required: false
-  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
-  isComponent: true
-- name: formGroup
-  type: object
-  required: false
-  description: Options for the form-group wrapper
-  params:
-  - name: classes
-    type: string
-    required: false
-    description: Classes to add to the form group (e.g. to show error state for the whole group)
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, select will be disabled.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the select.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: id
+  type: string
+  required: true
+  description: Id for each select box.
+- name: name
+  type: string
+  required: true
+  description: Name property for the select.
+- name: items
+  type: array
+  required: true
+  description: Array of option items for the select.
+  params:
+  - name: value
+    type: string
+    required: false
+    description: Value for the option item.
+  - name: text
+    type: string
+    required: true
+    description: Text for the option item.
+  - name: optgroup
+    type: boolean
+    required: false
+    description: If true, there will be an optgroup with items.
+  - name: optgroup.label
+    type: string
+    required: false
+    description: Label for the optgroup.
+  - name: optgroup.disabled
+    type: boolean
+    required: false
+    description: If true, the optgroup will be disabled.
+  - name: optgroup.items
+    type: array
+    required: false
+    description: Provide subitems for the optgroup.
+  - name: selected
+    type: boolean
+    required: false
+    description: Sets the option as the selected.
+  - name: disabled
+    type: boolean
+    required: false
+    description: Sets the option item as disabled.
+  - name: hidden
+    type: boolean
+    required: false
+    description: Sets the option item as hidden.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the option.
+- name: describedBy
+  type: string
+  required: false
+  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
+- name: label
+  type: object
+  required: false
+  description: Label text or HTML by specifying value for either text or html keys.
+  isComponent: true
+- name: hint
+  type: object
+  required: false
+  description: Options for the hint component.
+  isComponent: true
+- name: errorMessage
+  type: object
+  required: false
+  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
+  isComponent: true
+- name: formGroup
+  type: object
+  required: false
+  description: Options for the form-group wrapper
+  params:
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the form group (e.g. to show error state for the whole group)
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, select will be disabled.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the select.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the select.

package/src/templates/components/skip-link/_examples.skip-link.njk

@@ -1,32 +1,32 @@
-{% set exampleComponent = "skip-link" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.",
-    "data": {
-      "text": "Saltar al contenido principal",
-      "href": "#content"
-    },
-    "visualDescription": "Componente skip-link con un rectángulo delgado de borde gris claro sobre fondo blanco. Contiene texto negro pequeño alineado a la izquierda. El elemento ocupa todo el ancho disponible con padding mínimo.",
-    "_generated": {
-      "hash": "43ab4ecc6459d5d946643b08a94efd25",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:41.980Z"
-    }
-  },
-  {
-    "name": "con estado focus",
-    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
-    "data": {
-      "classes": "ds-focus",
-      "text": "Saltar al contenido principal",
-      "href": "#content"
-    },
-    "visualDescription": "Componente skip-link con una barra amarilla brillante que ocupa todo el ancho. Contiene texto negro subrayado centrado horizontalmente. El fondo amarillo sólido cubre completamente el área del componente con padding vertical visible.",
-    "_generated": {
-      "hash": "3fe73c4cd84250602d475a36ba56e9f2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:41.980Z"
-    }
-  }
+{% set exampleComponent = "skip-link" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.",
+    "data": {
+      "text": "Saltar al contenido principal",
+      "href": "#content"
+    },
+    "visualDescription": "Componente skip-link con un rectángulo delgado de borde gris claro sobre fondo blanco. Contiene texto negro pequeño alineado a la izquierda. El elemento ocupa todo el ancho disponible con padding mínimo.",
+    "_generated": {
+      "hash": "43ab4ecc6459d5d946643b08a94efd25",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:41.980Z"
+    }
+  },
+  {
+    "name": "con estado focus",
+    "description": "Simula activar la pseudoclase de CSS <code>:focus</code>",
+    "data": {
+      "classes": "ds-focus",
+      "text": "Saltar al contenido principal",
+      "href": "#content"
+    },
+    "visualDescription": "Componente skip-link con una barra amarilla brillante que ocupa todo el ancho. Contiene texto negro subrayado centrado horizontalmente. El fondo amarillo sólido cubre completamente el área del componente con padding vertical visible.",
+    "_generated": {
+      "hash": "3fe73c4cd84250602d475a36ba56e9f2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:41.980Z"
+    }
+  }
 ] %}

package/src/templates/components/skip-link/_macro.skip-link.njk

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

package/src/templates/components/skip-link/_styles.skip-link.css

@@ -1,12 +1,12 @@
-/* ==========================================================================
-   _styles.skip-link.css
-   ========================================================================== */
-@layer components {
-  .c-skip-link {
-    &.ds-focus {
-      @apply not-sr-only!;
-      @apply outline-hidden!;
-      @apply shadow-outline-warning!;
-    }
-  }
-}
+/* ==========================================================================
+   _styles.skip-link.css
+   ========================================================================== */
+@layer components {
+  .c-skip-link {
+    &.ds-focus {
+      @apply not-sr-only!;
+      @apply outline-hidden!;
+      @apply shadow-outline-warning!;
+    }
+  }
+}

package/src/templates/components/skip-link/_template.skip-link.njk

@@ -1,5 +1,5 @@
-<!-- skip-link -->
-<a href="{{ params.href | default('#content') }}" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-hidden focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline {%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {{- params.html | filterquotes | safe if params.html else params.text -}}
-</a>
+<!-- skip-link -->
+<a href="{{ params.href | default('#content') }}" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-hidden focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline {%- if params.classes %} {{ params.classes }}{% endif -%}"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{- params.html | filterquotes | safe if params.html else params.text -}}
+</a>
 <!-- /skip-link -->

package/src/templates/components/skip-link/params.skip-link.yaml

@@ -1,21 +1,21 @@
-params:
-- name: text
-  type: string
-  required: true
-  description: If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
-- name: html
-  type: string
-  required: true
-  description: If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
-- name: href
-  type: string
-  required: false
-  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
-- name: classes
-  type: string
-  required: false
-  description: Classes to add to the skip link.
-- name: attributes
-  type: object
-  required: false
+params:
+- name: text
+  type: string
+  required: true
+  description: If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
+- name: html
+  type: string
+  required: true
+  description: If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
+- name: href
+  type: string
+  required: false
+  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the skip link.
+- name: attributes
+  type: object
+  required: false
   description: HTML attributes (for example data attributes) to add to the skip link.