desy-html 5.3.0 → 6.2.0

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

@@ -160,5 +160,65 @@
         "aria-label": "Paginación"
       }
     }
+  },
+  {
+    "name": "with itemsListbox",
+    "data": {
+      "id": "with-items-listbox",
+      "idPrefix": "with-items-listbox",
+      "totalItems": "64",
+      "itemsPerPage": "10",
+      "hasSelect": true,
+      "itemsListbox": {
+        "items": [
+          {
+            "text": "10",
+            "active": true
+          },
+          {
+            "text": "25"
+          },
+          {
+            "text": "50"
+          },
+          {
+            "text": "75"
+          },
+          {
+            "text": "100"
+          }
+        ]
+      },
+      "items": [
+        {
+          "href": "#",
+          "text": 1
+        },
+        {
+          "href": "#",
+          "text": 2,
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": 3
+        },
+        {
+          "href": "#",
+          "text": 4
+        },
+        {
+          "href": "#",
+          "text": 5
+        },
+        {
+          "href": "#",
+          "text": 6
+        }
+      ],
+      "attributes": {
+        "aria-label": "Paginación"
+      }
+    }
   }
 ] %}

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

@@ -1,6 +1,7 @@
 {% from "../button/_macro.button.njk" import componentButton %}
 {% from "components/listbox/_macro.listbox.njk" import componentListbox %}
 
+
 {#- If an id 'prefix' is not passed, fall back to using a default one
    instead -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else "pagination-item" %}
@@ -75,7 +76,7 @@
 {% set nextSuffix %}
   {% if (((activePosition + 2) | int + 1)  * params.itemsPerPage | int) < ( params.totalItems | int ) %}<span class="sr-only">:&nbsp;Página {{ activePosition + 2 }} con los resultados del {{ (activePosition + 1) | int * params.itemsPerPage | int }} al {% if (((activePosition + 1) | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ ((activePosition + 1) | int + 1)  * params.itemsPerPage | int }}{% endif %}</span>{% endif %}
 {% endset %}
-<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:align-center{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
+<div id="{{ params.id }}" class="lg:flex lg:flex-wrap lg:items-center lg:gap-base{%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}">
   {% if params.hasSelect %}
   <p class="w-full mb-xs text-sm text-neutral-dark">
     Selecciona una página para cargar datos
@@ -120,7 +121,20 @@
     </ul>
   </nav>
   {% endif %}
-  <p class="block lg:ml-auto text-sm text-neutral-dark">
+  {% if params.itemsListbox %}
+    <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+      {{ componentListbox({
+        "id": "items-listbox-" + idPrefix,
+        "text": params.itemsPerPage,
+        "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
+        "doesChangeButtonText": true,
+        "classesContainer": "flex flex-wrap items-center gap-xs",
+        "classes": "c-listbox--sm c-listbox--transparent",
+        "items": params.itemsListbox.items
+      })  }}
+    </div>
+  {% endif %}
+  <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
      <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>

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

@@ -39,6 +39,55 @@ params:
   type: string
   required: false
   description: Text for the previous button. Defaults to "Siguiente".
+- name: itemsListbox
+  type: object
+  required: false
+  description: Options for a listbox component to choose number of items per page.
+  - name: label
+    type: object
+    required: true
+    description: Label text or HTML by specifying value for either text or html keys.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text for the button. 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 for the button. If `html` is provided, the `text` argument will be ignored.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the element that acts as label.
+  - name: items
+    type: array
+    required: true
+    description: Array of items objects.
+    params:
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within each item. 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 each item. If `html` is provided, the `text` argument will be ignored.
+    - name: id
+      type: string
+      required: false
+      description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+    - name: active
+      type: boolean
+      required: false
+      description: If true, item will be active.
+    - name: classes
+      type: string
+      required: false
+      description: Classes to add to the item.
+    - name: attributes
+      type: object
+      required: false
+      description: HTML attributes (for example data attributes) to add to the item.
 - name: items
   type: array
   required: true

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

@@ -3,6 +3,13 @@
    ========================================================================== */
 
 @layer components {
+  .c-radios--base {
+    input[type="radio"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-radios--sm {
     input[type="radio"] {
       @apply w-base !important;

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

@@ -5,7 +5,8 @@
     "data": {
       "id": "searchbar-1",
       "label": {
-        "text": "Buscar"
+        "text": "Buscar",
+        "classes": "not-sr-only mb-sm"
       }
     }
   },
@@ -42,6 +43,16 @@
       }
     }
   },
+  {
+    "name": "with label visible",
+    "data": {
+      "id": "searchbar-label-visible",
+      "label": {
+        "text": "Buscar items recientes",
+        "classes": "not-sr-only mb-sm"
+      }
+    }
+  },
   {
     "name": "small",
     "data": {

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

@@ -9,16 +9,16 @@
 {% endif %}
 
 <!-- searchbar -->
+{{ componentLabel({
+  html: params.label.html,
+  text: params.label.text,
+  classes: "sr-only " + params.label.classes,
+  isPageHeading: false,
+  attributes: params.label.attributes,
+  for: params.id
+}) | indent(2) | trim }}
 <div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
-  {{ componentLabel({
-      html: params.label.html,
-      text: params.label.text,
-      classes: "sr-only",
-      isPageHeading: false,
-      attributes: params.label.attributes,
-      for: params.id
-    }) | indent(2) | trim }}
-  <input class="c-input block mt-sm pr-12 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.button %} 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.id }}" type="search"
+  <input class="c-input block pr-12 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.button %} 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.id }}" type="search"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
   {%- if params.errorMessage %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}

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

@@ -31,6 +31,14 @@
   }
 
 
+  .c-select--base {
+    @apply pr-10;
+    @apply pl-3;
+    @apply py-2;
+    @apply text-base;
+  }
+
+
   .c-select--sm {
     @apply pl-2;
     @apply py-1;

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

@@ -5,6 +5,7 @@
 @layer components {
   .c-spinner {
     @apply relative;
+    @apply block;
     @apply pointer-events-none;
 
     &::after {

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

@@ -1,9 +1,9 @@
 <!-- spinner -->
-<div 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 %} >
+<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 %}
-  <p class="sr-only" role="alert" aria-live="assertive">
+  <span class="sr-only" role="alert" aria-live="assertive">
     {{ params.text }}
-  </p>
+  </span>
   {% endif %}
-</div>
+</span>
 <!-- /spinner -->

package/src/templates/components/table-advanced/_examples.table-advanced.njk

@@ -238,7 +238,7 @@
       "classes": "min-w-full"
     }
   },
-  {
+   {
     "name": "table with head and filters",
     "description": "hasFilter: true and filterClasses: text-right in numeric columns",
     "data": {
@@ -250,7 +250,8 @@
         },
         {
           "text": "Rate for bicycles",
-          "classes": "text-right"
+          "classes": "text-right",
+          "hasFilter": true
         },
         {
           "text": "Rate for vehicles",
@@ -302,6 +303,137 @@
       "classes": "min-w-full"
     }
   },
+  {
+    "name": "table with head and selects",
+    "description": "selects and filterClasses: text-right in numeric columns",
+    "data": {
+      "idPrefix": "table-with-head-and-selects",
+      "head": [
+        {
+          "text": "Month you apply",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Rate for bicycles",
+          "classes": "text-right",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Rate for vehicles",
+          "classes": "text-right",
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
+        }
+      ],
+      "rows": [
+        [
+          {
+            "text": "January"
+          },
+          {
+            "text": "85€",
+            "classes": "text-right"
+          },
+          {
+            "text": "95€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "February"
+          },
+          {
+            "text": "75€",
+            "classes": "text-right"
+          },
+          {
+            "text": "55€",
+            "classes": "text-right"
+          }
+        ],
+        [
+          {
+            "text": "March"
+          },
+          {
+            "text": "165€",
+            "classes": "text-right"
+          },
+          {
+            "text": "125€",
+            "classes": "text-right"
+          }
+        ]
+      ],
+      "classes": "min-w-full"
+    }
+  },
   {
     "name": "table with checkboxes",
     "data": {
@@ -366,7 +498,7 @@
   },
   {
     "name": "table with all",
-    "description": "orderBy, hasCheckboxes, hasFilter and firstCellIsHeader",
+    "description": "orderBy, hasCheckboxes, hasFilter, selects and firstCellIsHeader",
     "data": {
       "idPrefix": "table-with-all",
       "hasCheckboxes": true,
@@ -384,13 +516,58 @@
           "text": "Rate for bicycles",
           "orderBy": "none",
           "classes": "text-right",
-          "hasFilter": true
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
         },
         {
           "text": "Rate for vehicles",
           "orderBy": "none",
           "classes": "text-right",
-          "hasFilter": true
+          "hasFilter": true,
+          "select": {
+            "items": [
+              {
+                "value": "",
+                "text": "Filtrar por...",
+                "disabled": true,
+                "selected": true,
+                "hidden": true
+              },
+              {
+                "value": 1,
+                "text": "Option 1"
+              },
+              {
+                "value": 2,
+                "text": "Option 2"
+              },
+              {
+                "value": 3,
+                "text": "Option 3"
+              }
+            ]
+          }
         }
       ],
       "rows": [

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

@@ -1,14 +1,19 @@
 {% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
+{% from "components/select/_macro.select.njk" import componentSelect %}
 
 {#- If an id 'prefix' is not passed, fall back to using a generic one
    instead. -#}
 {% set idPrefix = params.idPrefix if params.idPrefix else 'id-table-row' %}
 {% set hasFilters = false %}
+{% set hasSelects = false %}
 
 {% for item in params.head %}
   {% if item.hasFilter %}
     {% set hasFilters = true %}
   {% endif %}
+  {% if item.select %}
+    {% set hasSelects = true %}
+  {% endif %}
 {% endfor %}
 
 {#- Capture the HTML so we can optionally nest it in a wrapper -#}
@@ -55,7 +60,7 @@
     </thead>
     {% endif %}
     <tbody>
-      {% if hasFilters %}
+      {% if hasFilters or hasSelects %}
         <tr class="divide-x divide-neutral-base">
           {% if params.hasCheckboxes %}
             <td {%- if params.checkboxesClasses %} class="{{ params.checkboxesClasses }}"{% endif %}></td>
@@ -63,7 +68,27 @@
           {% for item in params.head %}
             {%- set idHeader = idPrefix + "-header-" + loop.index0 -%}
             {%- set idFilter = idPrefix + "-header-filter-" + loop.index0 -%}
+            {%- set idSelect = idPrefix + "-header-select-" + loop.index0 -%}
             <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}">
+              {% if item.select %}
+                {{ componentSelect({
+                  "formGroup": {
+                    "classes": "mb-0"
+                  },
+                  "label": {
+                    "text": "Filtrar en esta columna",
+                    "classes": "sr-only"
+                  },
+                  "id": item.select.id if item.select.id else idSelect,
+                  "name": item.select.name if item.select.name else idSelect,
+                  "items": item.select.items,
+                  "describedBy": idHeader,
+                  "disabled": item.select.disabled,
+                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
+                  "attributes": item.select.attributes
+                })  }}
+              {% endif %}
+              {% if item.select and item.hasFilter %}<div class="pb-sm"></div>{% endif %}
               {% if item.hasFilter %}
                 {{ componentSearchbar({
                   "formGroup": {
@@ -74,7 +99,7 @@
                     "classes": "sr-only"
                   },
                   "id": idFilter,
-                  "name": "filter-column",
+                  "name": idFilter,
                   "placeholder": "Buscar",
                   "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
                   "buttonClasses": "m-xs p-0.5 text-xs",

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -61,6 +61,11 @@ params:
     type: string
     required: false
     description: Classes to add to the table head cell input.
+  - name: select
+    type: object
+    required: false
+    description: Options for a select component to filter results in the column.
+    isComponent: true
   - name: classes
     type: string
     required: false

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

@@ -2,31 +2,53 @@
 {% set examples =  [
   {
     "name": "default",
-    "description": "Button like appearance, no change of button text, only changes in visual state",
+    "description": "Button like appearance, no change of button text, only changes in visual state. It needs an outer element with an id to use it with its aria-controls to show/hide that outer element.",
     "data": {
-      "classes": "c-button c-button--transparent no-underline",
+      "classes": "c-button",
       "offState": {
         "classes": "",
-        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Notificar por correo electrónico</span>'
+        "html": 'Mostrar detalles'
       },
       "onState": {
-        "classes": "",
-        "html": 'Notificar por correo electrónico'
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M13.714 42.857A6.857 6.857 0 0 1 8.4 40.183L.857 31.646a3.429 3.429 0 0 1 .309-4.869A3.429 3.429 0 0 1 6 27.12l7.063 7.989a.72.72 0 0 0 .617.308.789.789 0 0 0 .617-.274L42.103 6.206a3.429 3.429 0 0 1 4.937 4.731L18.926 40.526a6.651 6.651 0 0 1-5.212 2.331Z" fill="currentColor"/></svg>Mostrar detalles</span>'
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
       }
     }
   },
   {
     "name": "2 icons",
-    "description": "Button like appearance, changes of button text, but no text changes for screenreaders",
+    "description": "Button like appearance, no change of button text, only changes in icons. It needs an outer element with an id to use it with its aria-controls to show/hide that outer element.",
     "data": {
-      "classes": "c-button c-button--sm c-button--transparent no-underline",
+      "classes": "c-button c-button--sm",
       "offState": {
         "classes": "",
-        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.33 5.5c-.2-.21-.43-.46-.69-.72a.25.25 0 0 0-.18-.08.26.26 0 0 0-.17.07l-1.07 1.07a.24.24 0 0 0 0 .35c.21.21.41.42.61.64a.25.25 0 0 1 0 .34C10.57 8.53 9.11 9.93 7.16 10a.28.28 0 0 0-.17.07l-1.38 1.38a.25.25 0 0 0-.06.25.24.24 0 0 0 .19.17A6.4 6.4 0 0 0 7 12c3.1 0 5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7ZM13.78.22a.75.75 0 0 0-1.06 0l-2.47 2.47a.26.26 0 0 1-.29 0A6.51 6.51 0 0 0 7 2C3.9 2 1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15a18.42 18.42 0 0 0 1.71 1.67.21.21 0 0 1 .09.18.23.23 0 0 1-.07.19L.22 12.72a.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0l12.5-12.5a.75.75 0 0 0 0-1.06Zm-11.61 7a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4a4.18 4.18 0 0 1 1.24.18.26.26 0 0 1 .17.18.27.27 0 0 1-.07.24L4.18 8.76a.26.26 0 0 1-.33 0 16 16 0 0 1-1.68-1.59Z" fill="currentColor" transform="scale(3.42857)"/></svg><span aria-hidden="true">Ocultar heredados del servicio</span><span class="sr-only">Mostrar heredados del servicio</span></span>'
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.71 2.3a1.45 1.45 0 0 0 .14-1.51A1.41 1.41 0 0 0 12.57 0H1.43A1.4 1.4 0 0 0 .15.8a1.43 1.43 0 0 0 .16 1.52l5.13 6.32a.25.25 0 0 1 .06.16v4.7a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.8a.25.25 0 0 1 .06-.16ZM7.6 6.65a.29.29 0 0 1-.2.09h-.8a.29.29 0 0 1-.2-.09L3 2.41a.26.26 0 0 1 0-.27.26.26 0 0 1 .15-.14h7.7a.26.26 0 0 1 .22.14.26.26 0 0 1 0 .27Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</span>'
       },
       "onState": {
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M13.9.8a.51.51 0 0 0 0-.52.51.51 0 0 0-.4-.28H.5a.51.51 0 0 0-.45.28A.51.51 0 0 0 .1.8l5.19 6.79a1 1 0 0 1 .21.61v5.3a.5.5 0 0 0 .31.46A.43.43 0 0 0 6 14a.47.47 0 0 0 .35-.15l2-2a.47.47 0 0 0 .15-.35V8.2a1 1 0 0 1 .21-.61Z" fill="currentColor" transform="scale(3.42857)"/></svg>Mostrar filtros</span>'
+      },
+      "attributes": {
+        "aria-controls": "id-panel-oculto"
+      }
+    }
+  },
+  {
+    "name": "Not Expandible",
+    "description": "isExpandible = false. Instead of aria-expanded will use aria-pressed.",
+    "data": {
+      "isExpandible": false,
+      "classes": "c-button",
+      "offState": {
         "classes": "",
-        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><g transform="scale(3.42857)"><circle cx="7" cy="7" r="2" fill="currentColor" /><path d="m13.47 5.65-.14-.15C12.2 4.28 10.1 2 7 2S1.8 4.28.67 5.5l-.14.15a2 2 0 0 0 0 2.7l.14.15C1.8 9.72 3.9 12 7 12s5.2-2.28 6.33-3.5l.14-.15a2 2 0 0 0 0-2.7Zm-1.64 1.52C10.53 8.57 9 10 7 10S3.47 8.57 2.17 7.17a.25.25 0 0 1 0-.34C3.49 5.41 5 4 7 4s3.51 1.41 4.83 2.83a.25.25 0 0 1 0 .34Z" fill="currentColor"/></g></svg>Mostrar heredados del servicio</span>'
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M6.41 10.78a.25.25 0 0 0 0 .34l2.16 2.41a1.35 1.35 0 0 0 .8.27 1.31 1.31 0 0 0 1.31-1.31V7.12a.26.26 0 0 0-.43-.18ZM.26 13.81a.76.76 0 0 0 1 0l12.5-12.5a.76.76 0 0 0 .18-.31.71.71 0 0 0 .06-.24.73.73 0 0 0-.19-.49.74.74 0 0 0-1.06 0l-2 2a.26.26 0 0 1-.19.07.25.25 0 0 1-.18-.08 1.23 1.23 0 0 0-1-.45 1.29 1.29 0 0 0-.8.27L5.74 5.21a.23.23 0 0 1-.19.09H4.42a1.75 1.75 0 0 0-1.75 1.75v1.5A1.78 1.78 0 0 0 3 9.61a.25.25 0 0 1 0 .33L.22 12.73a.75.75 0 0 0 0 1.06Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
+      },
+      "onState": {
+        "classes": "c-button--has-selection",
+        "html": '<span class="inline-flex"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="self-center mr-2" aria-hidden="true" width="1em" height="1em"><path d="M12 2.21a.75.75 0 0 0-1.06 0 .75.75 0 0 0 0 1.06 5.26 5.26 0 0 1 0 7.46.75.75 0 0 0 0 1.06.75.75 0 0 0 1.06 0 6.74 6.74 0 0 0 0-9.58Z" fill="currentColor" transform="scale(3.42857)"/><path d="M10.34 4.89a.75.75 0 0 0-1.23.85 2.23 2.23 0 0 1 0 2.52.74.74 0 0 0 .19 1 .75.75 0 0 0 1-.19 3.7 3.7 0 0 0 0-4.22ZM6.69 1a1.35 1.35 0 0 0-.8.27L3.07 4.42a.27.27 0 0 1-.19.08H1.75A1.76 1.76 0 0 0 0 6.25v1.5A1.76 1.76 0 0 0 1.75 9.5h1.13a.27.27 0 0 1 .19.08l2.82 3.15a1.35 1.35 0 0 0 .8.27A1.31 1.31 0 0 0 8 11.69V2.31A1.31 1.31 0 0 0 6.69 1Z" fill="currentColor" transform="scale(3.42857)"/></svg>Reproducir sonido</span>'
       }
     }
   },
@@ -38,11 +60,11 @@
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "html": '<span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">on</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-neutral-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">Off</span><span aria-hidden="true" class="translate-x-0 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
       },
       "onState": {
         "classes": "",
-        "html": '<span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">off</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span>'
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-sm" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-primary-base rounded-full cursor-pointer focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75"><span class="sr-only">On</span><span aria-hidden="true" class="translate-x-4 pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-sm" aria-hidden="true">On</span></span>'
       },
       "attributes": {
         "aria-labelledby": "id-text"