desy-html 10.2.2 → 11.0.2

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

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

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

@@ -1,85 +1,85 @@
-/* ==========================================================================
-   _styles.datepicker.css
-   ========================================================================== */
-
-@layer components {
-  .c-datepicker {
-    calendar-month {
-      --color-accent: theme(colors.primary.base);
-      --color-text-on-accent: theme(colors.white);
-
-      &::part(button){
-        @apply mx-px;
-        @apply rounded;
-
-        &:focus-visible {
-          @apply focus:bg-warning-base;
-          @apply focus:border-warning-base;
-          @apply focus:shadow-outline-black;
-          @apply focus:text-black;
-          @apply focus:outline-none;
-        }
-      }
-    }
-
-    calendar-date,
-    calendar-range,
-    calendar-multi {
-      &::part(header){
-        @apply flex;
-        @apply flex-wrap;
-        @apply gap-base;
-      }
-
-      &::part(next),
-      &::part(previous)  {
-        @apply inline-flex;
-        @apply items-baseline;
-        @apply px-3;
-        @apply py-2;
-        @apply bg-white;
-        @apply border;
-        @apply border-primary-base;
-        @apply rounded;
-        @apply align-baseline;
-        @apply font-semibold;
-        @apply text-primary-base;
-        @apply transition-all;
-        @apply duration-100;
-        @apply ease-out;
-        @apply whitespace-nowrap;
-        @apply cursor-pointer;
-
-        @apply focus:bg-warning-base;
-        @apply focus:border-warning-base;
-        @apply focus:shadow-outline-black;
-        @apply focus:text-black;
-        @apply focus:outline-none;
-
-        &:hover:not(disabled),
-        &:active:not(disabled) {
-          @apply bg-neutral-light;
-          @apply border-primary-base;
-          @apply text-primary-base;
-        }
-
-        &:active:not(disabled) {
-          @apply relative;
-          @apply top-px;
-        }
-
-        &[disabled],
-        &[disabled]:hover,
-        &[disabled]:focus {
-          @apply bg-white;
-          @apply opacity-50;
-          @apply cursor-not-allowed;
-        }
-
-        @apply px-2;
-        @apply py-1;
-        @apply text-sm;
-      }
-    }
-  }
-}
+/* ==========================================================================
+   _styles.datepicker.css
+   ========================================================================== */
+
+@layer components {
+  .c-datepicker {
+    calendar-month {
+      --color-accent: theme(colors.primary.base);
+      --color-text-on-accent: theme(colors.white);
+
+      &::part(button){
+        @apply mx-px;
+        @apply rounded;
+
+        &:focus-visible {
+          @apply focus:bg-warning-base;
+          @apply focus:border-warning-base;
+          @apply focus:shadow-outline-black;
+          @apply focus:text-black;
+          @apply focus:outline-none;
+        }
+      }
+    }
+
+    calendar-date,
+    calendar-range,
+    calendar-multi {
+      &::part(header){
+        @apply flex;
+        @apply flex-wrap;
+        @apply gap-base;
+      }
+
+      &::part(next),
+      &::part(previous)  {
+        @apply inline-flex;
+        @apply items-baseline;
+        @apply px-3;
+        @apply py-2;
+        @apply bg-white;
+        @apply border;
+        @apply border-primary-base;
+        @apply rounded;
+        @apply align-baseline;
+        @apply font-semibold;
+        @apply text-primary-base;
+        @apply transition-all;
+        @apply duration-100;
+        @apply ease-out;
+        @apply whitespace-nowrap;
+        @apply cursor-pointer;
+
+        @apply focus:bg-warning-base;
+        @apply focus:border-warning-base;
+        @apply focus:shadow-outline-black;
+        @apply focus:text-black;
+        @apply focus:outline-none;
+
+        &:hover:not(disabled),
+        &:active:not(disabled) {
+          @apply bg-neutral-light;
+          @apply border-primary-base;
+          @apply text-primary-base;
+        }
+
+        &:active:not(disabled) {
+          @apply relative;
+          @apply top-px;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus {
+          @apply bg-white;
+          @apply opacity-50;
+          @apply cursor-not-allowed;
+        }
+
+        @apply px-2;
+        @apply py-1;
+        @apply text-sm;
+      }
+    }
+  }
+}

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

@@ -1,124 +1,124 @@
-{% from "components/button/_macro.button.njk" import componentButton %}
-{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../input/_macro.input.njk" import componentInput %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-
-{% set describedBy = params.describedBy if params.describedBy else "" %}
-{% if params.errorMessage %}
-  {% set errorId = params.id + '-error' %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
-{% endif %}
-{% set datepickerContent %}
-  {% if caller %}
-    {% set myCaller = caller() %}
-    {% if myCaller | string != '' %}
-  <div class="p-sm overflow-x-auto">
-    {{ myCaller }}
-  </div>
-    {% endif %}
-  {% elseif params.caller %}
-  <div class="p-sm overflow-x-auto">
-    {{ params.caller | safe }}
-  </div>
-  {% endif %}
-{% endset %}
-
-<!-- datepicker -->
-<div data-module="c-datepicker" class="c-datepicker {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}" {%- for attribute, value in params.containerAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% if params.standalone %}
-    {{ datepickerContent | safe }}
-  {% else %}
-    <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
-      }) }}
-    {% 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
-      }) }}
-    {% endif %}
-    {% if params.errorMessage %}
-      {% if not params.errorId %}
-      {% set errorId = params.id + '-error' %}
-      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
-      {% endif %}
-      {{ componentErrorMessage({
-        id: errorId,
-        classes: params.errorMessage.classes,
-        attributes: params.errorMessage.attributes,
-        html: params.errorMessage.html,
-        text: params.errorMessage.text,
-        visuallyHiddenText: params.errorMessage.visuallyHiddenText
-      }) }}
-    {% endif %}
-    <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
-      <input class="c-input block mt-sm border-black rounded 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 not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
-        {%- if params.value %} value="{{ params.value}}"{% endif %}
-        {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
-        {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
-        {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
-        {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
-        {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
-        {{-" disabled" if params.disabled }}
-        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {% set dropdownActionButtons %}
-        <ul class="flex flex-wrap justify-between gap-sm p-sm">
-          <li>
-            {{ componentButton({
-              "text": "Aceptar",
-              "classes": "c-button--primary c-button--sm",
-              "attributes": {
-                "id": params.id + "-submit"
-              }
-            }) }}
-          </li>
-          <li>
-            {{ componentButton({
-              "text": "Cancelar",
-              "classes": " c-button--sm",
-              "attributes": {
-                "id": params.id + "-cancel"
-              }
-            }) }}
-          </li>
-        </ul>
-      {% endset %}
-      {% if params.dropdown %}
-        {% call componentDropdown(params.dropdown) %}
-          {{ datepickerContent | safe }}
-          {{ dropdownActionButtons | safe }}
-        {% endcall  %}
-      {% else %}
-        <div class="absolute top-0 right-0">
-          {% call componentDropdown({
-            "html": '<span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true"><g><path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
-            "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
-            "disabled": params.disabled,
-            "attributes": {
-              "id": params.id + "-dropdown"
-            }
-          }) %}
-            {{ datepickerContent | safe }}
-            {{ dropdownActionButtons | safe }}
-          {% endcall  %}
-        </div>
-      {% endif %}
-    </div>
-  </div>
-  {% endif %}
-</div>
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../input/_macro.input.njk" import componentInput %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+{% endif %}
+{% set datepickerContent %}
+  {% if caller %}
+    {% set myCaller = caller() %}
+    {% if myCaller | string != '' %}
+  <div class="p-sm overflow-x-auto">
+    {{ myCaller }}
+  </div>
+    {% endif %}
+  {% elseif params.caller %}
+  <div class="p-sm overflow-x-auto">
+    {{ params.caller | safe }}
+  </div>
+  {% endif %}
+{% endset %}
+
+<!-- datepicker -->
+<div data-module="c-datepicker" class="c-datepicker {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}" {%- for attribute, value in params.containerAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.standalone %}
+    {{ datepickerContent | safe }}
+  {% else %}
+    <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
+      }) }}
+    {% 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
+      }) }}
+    {% endif %}
+    {% if params.errorMessage %}
+      {% if not params.errorId %}
+      {% set errorId = params.id + '-error' %}
+      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+      {% endif %}
+      {{ componentErrorMessage({
+        id: errorId,
+        classes: params.errorMessage.classes,
+        attributes: params.errorMessage.attributes,
+        html: params.errorMessage.html,
+        text: params.errorMessage.text,
+        visuallyHiddenText: params.errorMessage.visuallyHiddenText
+      }) }}
+    {% endif %}
+    <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
+      <input class="c-input block mt-sm border-black rounded 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 not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+        {%- if params.value %} value="{{ params.value}}"{% endif %}
+        {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+        {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+        {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+        {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+        {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+        {{-" disabled" if params.disabled }}
+        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {% set dropdownActionButtons %}
+        <ul class="flex flex-wrap justify-between gap-sm p-sm">
+          <li>
+            {{ componentButton({
+              "text": "Aceptar",
+              "classes": "c-button--primary c-button--sm",
+              "attributes": {
+                "id": params.id + "-submit"
+              }
+            }) }}
+          </li>
+          <li>
+            {{ componentButton({
+              "text": "Cancelar",
+              "classes": " c-button--sm",
+              "attributes": {
+                "id": params.id + "-cancel"
+              }
+            }) }}
+          </li>
+        </ul>
+      {% endset %}
+      {% if params.dropdown %}
+        {% call componentDropdown(params.dropdown) %}
+          {{ datepickerContent | safe }}
+          {{ dropdownActionButtons | safe }}
+        {% endcall  %}
+      {% else %}
+        <div class="absolute top-0 right-0">
+          {% call componentDropdown({
+            "html": '<span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true"><g><path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+            "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
+            "disabled": params.disabled,
+            "attributes": {
+              "id": params.id + "-dropdown"
+            }
+          }) %}
+            {{ datepickerContent | safe }}
+            {{ dropdownActionButtons | safe }}
+          {% endcall  %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+</div>
 <!-- /datepicker -->

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

@@ -1,105 +1,105 @@
-params:
-- name: containerClasses
-  type: string
-  required: false
-  description: Classes for the container.
-- name: containerAttributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the container element.
-- name: standalone
-  type: boolean
-  required: false
-  description: If `true` the datepicker only shows the months and navigation without the input. Defaults to `false.
-- name: id
-  type: string
-  required: true
-  description: The id of the input.
-- name: name
-  type: string
-  required: true
-  description: The name of the input, which is submitted with the form data.
-- name: type
-  type: string
-  required: false
-  description: Type of input control to render. Defaults to "text".
-- name: inputmode
-  type: string
-  require: false
-  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
-- name: value
-  type: string
-  required: false
-  description: Optional initial value of the input.
-- 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: true
-  description: Options for the label component.
-  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: errorId
-  type: string
-  required: false
-  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
-- 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: 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: classes
-  type: string
-  required: false
-  description: Classes to add to the input.
-- name: autocomplete
-  type: string
-  required: false
-  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
-- name: pattern
-  type: string
-  required: false
-  description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
-- name: placeholder
-  type: string
-  required: false
-  description: Placeholder text
-- name: disabled
-  type: boolean
-  required: false
-  description: If true, input will be disabled.
-- name: attributes
-  type: object
-  required: false
-  description: HTML attributes (for example data attributes) to add to the anchor tag.
-- name: dropdown
-  type: component
-  required: false
-  description: dropdown component parameters. If there are any, the datepicker will show a dropdown after the input instead of the calendar icon.
-- name: dropdownClasses
-  type: string
-  required: false
-  description: Classes to add to the dropdown.
-- name: caller
-  type: nunjucks-block
-  required: false
+params:
+- name: containerClasses
+  type: string
+  required: false
+  description: Classes for the container.
+- name: containerAttributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the container element.
+- name: standalone
+  type: boolean
+  required: false
+  description: If `true` the datepicker only shows the months and navigation without the input. Defaults to `false.
+- name: id
+  type: string
+  required: true
+  description: The id of the input.
+- name: name
+  type: string
+  required: true
+  description: The name of the input, which is submitted with the form data.
+- name: type
+  type: string
+  required: false
+  description: Type of input control to render. Defaults to "text".
+- name: inputmode
+  type: string
+  require: false
+  description: Optional value for [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).
+- name: value
+  type: string
+  required: false
+  description: Optional initial value of the input.
+- 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: true
+  description: Options for the label component.
+  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: errorId
+  type: string
+  required: false
+  description: Custom ID to add to the `aria-errormessage` attribute, used to provide additional descriptive information for screenreader users. Used in date-input component with errors.
+- 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: 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: classes
+  type: string
+  required: false
+  description: Classes to add to the input.
+- name: autocomplete
+  type: string
+  required: false
+  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
+- name: pattern
+  type: string
+  required: false
+  description: Attribute to [provide a regular expression pattern](https://www.w3.org/TR/html51/sec-forms.html#the-pattern-attribute), used to match allowed character combinations for the input value.
+- name: placeholder
+  type: string
+  required: false
+  description: Placeholder text
+- name: disabled
+  type: boolean
+  required: false
+  description: If true, input will be disabled.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the anchor tag.
+- name: dropdown
+  type: component
+  required: false
+  description: dropdown component parameters. If there are any, the datepicker will show a dropdown after the input instead of the calendar icon.
+- name: dropdownClasses
+  type: string
+  required: false
+  description: Classes to add to the dropdown.
+- name: caller
+  type: nunjucks-block
+  required: false
   description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire dropdown component in a `call` block.