desy-html 6.3.2 → 6.4.0

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

@@ -290,41 +290,36 @@
   },
   {
     "name": "Expanded logo",
-    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano.",
+    "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano y también antes de hacer login en todas las apps.",
+    "data": {
+      "homepageUrl": "/",
+      "expandedLogo": true
+    }
+  },
+  {
+    "name": "con offcanvas",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
     "data": {
       "homepageUrl": "/",
-      "expandedLogo": true,
       "subnav": {
         "text": "Carpeta del gestor"
       },
-      "navigation": {
-        "items": [
-          {
-            "href": "#1",
-            "text": "Navigation item 1"
-          },
-          {
-            "href": "#2",
-            "text": "Navigation item 2",
-            "active": true
-          },
-          {
-            "href": "#3",
-            "text": "Navigation item 3"
-          },
-          {
-            "href": "#4",
-            "text": "Navigation item 4"
-          }
-          ]
-      }
+      "offcanvas": {
+        "text": "Menú",
+        "textClose": "Cerrar menu",
+        "labelledId": "offcanvas-title"
+      },
+      "caller": exampleOffcanvas
     }
   },
   {
-    "name": "con offcanvas",
-    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
+    "name": "con offcanvas y mobileTitle",
+    "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller y título que sólo se muestra en mobile",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Carpeta del gestor"
+      },
       "subnav": {
         "text": "Carpeta del gestor"
       },
@@ -432,7 +427,6 @@
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
     "data": {
       "homepageUrl": "/",
-      "expandedLogo": true,
       "subnav": {
         "text": "Carpeta del gestor",
         "items": [

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

@@ -1,6 +1,6 @@
       <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
-        <div class="origin-top-left left-0 fixed inset-0 h-screen">
-          <div class="h-full overflow-auto relative w-offcanvas h-screen ml-offcanvas-negative bg-white z-10">
+        <div class="left-0 fixed top-0 h-screen w-offcanvas ml-offcanvas-negative">
+          <div class="h-full overflow-auto relative h-screen bg-white z-10">
             <div class="text-right p-sm">
               <button
                 onclick="closeDialog(this)"

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

@@ -16,7 +16,7 @@
       <div class="container mx-auto px-base">
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
-            <div class="flex items-center flex-shrink-0">
+            <div class="flex items-center">
               <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                 {% if not params.noLogo %}
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-expanded"><path fill="gold" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="gold" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
@@ -51,6 +51,15 @@
                 {% endif %}
               {% endcall %}
               {% endif %}
+              {% if params.mobileTitle %}
+                <div class="{{ params.mobileTitle.classes if params.mobileTitle.classes else 'inline-block lg:hidden max-w-full' }}" {%- for attribute, value in params.mobileTitle.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+                  {% if params.mobileTitle.html %}
+                    {{ params.mobileTitle.html | safe }}
+                  {% else %}
+                    <p class="align-middle py-4 text-sm text-black overflow-hidden">{{ params.mobileTitle.text }}</p>
+                  {% endif %}
+                </div>
+              {% endif %}
             </div>
             {% if params.navigation.items %}
             {% from "./_macro.header.header__navigation.njk" import componentHeaderNavigation %}

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

@@ -19,6 +19,26 @@ params:
   type: string
   required: false
   description: HTML for the custom logo. If provided there will appear a custom logo after the Gobierno de Aragón logo
+- name: mobileTitle
+  type: object
+  required: false
+  description: The title of the app that appears after the logo only in mobile.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text for the mobileTitle. 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 mobileTitle. If `html` is provided, the `text` argument will be ignored.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the mobileTitle.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the mobileTitle.
 - name: subnav
   type: object
   required: false

package/src/templates/components/input-group/_examples.input-group.njk

@@ -144,8 +144,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -179,14 +182,24 @@
           "formGroup": {
             "classes": "mr-base"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-errors-hint datos-errors-error",
+            "aria-errormessage": "datos-errors-error",
+            "aria-invalid": "true"
+          }
         },
         {
           "name": "apellidos",
           "label": {
             "text": "Apellidos"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-errors-hint datos-errors-error",
+            "aria-errormessage": "datos-errors-error",
+            "aria-invalid": "true"
+          }
         }
       ]
     }
@@ -200,8 +213,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -235,7 +251,12 @@
           "formGroup": {
             "classes": "mr-base"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-error-nombre-a-hint datos-error-nombre-a-error",
+            "aria-errormessage": "datos-error-nombre-a-error",
+            "aria-invalid": "true"
+          }
         },
         {
           "name": "apellidos",
@@ -256,8 +277,11 @@
           "text": "Datos del solicitante"
         }
       },
+      "hint": {
+        "text": "Necesitamos tus datos para identificarte posteriormente."
+      },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Error: Estos campos no pueden estar vacíos"
       },
       "items": [
         {
@@ -298,7 +322,12 @@
           "label": {
             "text": "Apellidos"
           },
-          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base"
+          "classes": "w-full lg:w-40 border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "aria-describedby": "datos-error-nombre-b-hint datos-error-nombre-b-error",
+            "aria-errormessage": "datos-error-nombre-b-error",
+            "aria-invalid": "true"
+          }
         }
       ]
     }

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

@@ -726,7 +726,7 @@
         {
           "text": "Item 1",
           "id": "header-custom-nav-item-1",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "sub": {
             "items": [
               {
@@ -750,7 +750,7 @@
         {
           "text": "Active Item 2",
           "id": "header-custom-nav-item-2",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "active": true,
           "sub": {
             "items": [
@@ -776,7 +776,7 @@
         {
           "text": "Disabled Item 3",
           "id": "header-custom-nav-item-3",
-          "classes": "c-menu-navigation__button--header -mr-base uppercase",
+          "classes": "c-menu-navigation__button--header -mr-base",
           "disabled": true,
           "sub": {
             "items": [
@@ -801,7 +801,7 @@
         {
           "text": "Item 4 right",
           "id": "header-custom-nav-item-4",
-          "classes": "c-menu-navigation__button--header uppercase",
+          "classes": "c-menu-navigation__button--header",
           "sub": {
             "items": [
               {

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

@@ -4,7 +4,7 @@
 {% set labelledId = 'label-' + params.id %}
 
 <!-- modal -->
-<div id="{{ params.id }}" class="relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
+<div id="{{ params.id }}" class="mt-16 sm:mt-0 relative max-w-lg mx-auto p-base lg:p-lg border border-neutral-base rounded bg-white {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.icon %}
   <div class="flex justify-center p-base">
@@ -116,4 +116,4 @@
     </div>
   {% endif %}
 </div>
-<!-- /modal -->
+<!-- /modal -->

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

@@ -1,5 +1,5 @@
 <!-- notification -->
-<div id="{{ params.id }}" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
+<div id="{{ params.id }}" data-module="c-notification" class="c-notification {%- if params.classes %} {{ params.classes }}{% elseif params.type=="success" %} c-notification--success{% elseif params.type=="alert" %} c-notification--alert{% elseif params.type=="info" %} c-notification--primary{% else %} c-notification--primary{% endif %}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.icon or params.type %}
   <div class="h-full mr-base">
@@ -58,8 +58,8 @@
     </div>
     {% if params.isDismissible %}
       <div class="absolute top-0 right-0 p-sm">
-        <button class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
+        <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+          <svg class="pointer-events-none " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
         </button>
       </div>
     {% endif %}

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

@@ -216,6 +216,10 @@
           "text": 6
         }
       ],
+      "hasPrevious": false,
+      "hasNext": true,
+      "previousText": "Anterior",
+      "nextText": "Siguiente",
       "attributes": {
         "aria-label": "Paginación"
       }

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

@@ -149,7 +149,6 @@
         },
         {
           "text": "Tab 2",
-          "active": true,
           "panel": {
             "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }
@@ -162,6 +161,7 @@
         },
         {
           "text": "Tab 4",
+          "active": true,
           "panel": {
             "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
           }

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

@@ -70,5 +70,24 @@
         "aria-labelledby": "id-text"
       }
     }
+  },
+  {
+    "name": "isSwitch small",
+    "description": "Switch 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-labelledby.",
+    "data": {
+      "classes": "",
+      "isSwitch": true,
+      "offState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-neutral-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "onState": {
+        "classes": "",
+        "html": '<span class="flex align-center justify-between gap-xs"><span class="text-xs" aria-hidden="true">Off</span><span class="bg-primary-base relative inline-flex flex-shrink-0 h-4 w-8 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-3 w-3 rounded-full bg-white shadow-lg transform ring-0 transition ease-in-out duration-200" /></span></span><span class="text-xs" aria-hidden="true">On</span></span>'
+      },
+      "attributes": {
+        "aria-labelledby": "id-text"
+      }
+    }
   }
 ] %}

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

@@ -1,20 +1,22 @@
 <!-- toggle -->
-<div class="relative c-toggle"
+<div data-module="c-toggle" class="relative c-toggle"
 >
   <!-- Button -->
   <button
-    aria-checked="false"
-    aria-pressed="false"
-    aria-expanded="false"
     {% if params.isSwitch %}
       role = "switch"
+      aria-checked="false"
+    {% elseif params.isExpandible == false %}
+      aria-pressed="false"
+    {% else %}
+      aria-expanded="false"
     {% endif %}
     type="button"
-    class="{{ params.classes if params.classes else '' }}"
+    class="c-toggle__button {{ params.classes if params.classes else '' }}"
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   >
-    <span class="c-button-is-not_pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
-    <span class="c-button-is_pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
+    <span class="c-button--is-not-pressed pointer-events-none">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
+    <span class="c-button--is-pressed hidden pointer-events-none">{{ params.onState.html | safe if params.onState.html else params.onState.text }}</span>
   </button>
 </div>
 <!-- /toggle -->