desy-html 8.13.0 → 9.0.0

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

@@ -0,0 +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
+  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.

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

@@ -108,7 +108,7 @@
     "data": {
       "text": "Dropdown anchura completa",
       "classes": "w-full justify-between",
-      "classesTooltip": "max-h-64 overflow-y-auto",
+      "classesTooltip": "w-max max-h-64 overflow-y-auto",
       "caller": "<div class=\" p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-64 \"><div style=\" width:900px \"></div></div></div>"
     }
   }

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

@@ -49,7 +49,7 @@
                   isMenu: true,
                   idPrefix: "header-subnav-nav-item",
                   items: params.subnav.items,
-                  classes: "max-w-64",
+                  classes: "w-max max-w-64",
                   attributes: {
                     "id": "id-subnav-nav",
                     "aria-label": "Aplicaciones"
@@ -100,7 +100,7 @@
                   isMenu: true,
                   idPrefix: "header-dropdown-nav-item",
                   items: params.dropdown.items,
-                  classes: "max-w-64",
+                  classes: "w-max max-w-64",
                   attributes: {
                     "id": "id-dropdown-nav",
                     "aria-label": "Menú de usuario"

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -113,7 +113,7 @@
               isMenu: true,
               idPrefix: "header-dropdown-nav-item",
               items: params.dropdown.items,
-              classes: "max-w-64",
+              classes: "w-max max-w-64",
               attributes: {
                 "id": "id-dropdown-nav",
                 "aria-label": "Menú de usuario"

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

@@ -417,7 +417,7 @@
           "classes": "font-semibold text-sm"
         },
         "classes": "w-full justify-between",
-        "classesTooltip": "max-h-64 overflow-y-auto",
+        "classesTooltip": "w-max max-h-64 overflow-y-auto",
         "items": [
           {
             "href": "#",

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -38,7 +38,7 @@
       {% endif %}
       {% if item.sub.items %}
       <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

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

@@ -37,7 +37,7 @@
       </a>
       {% endif %}
       {% if item.sub.items %}
-      <ul role="menu" class="c-menubar__tooltip max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

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

@@ -394,7 +394,7 @@
         "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
       }
       ],
-      "classes": "max-w-64",
+      "classes": "w-max max-w-64",
       "attributes": {
         "aria-label": "Navegación local"
       }