desy-html 6.1.0 → 6.3.0

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

@@ -40,6 +40,10 @@ params:
     type: boolean
     required: false
     description: If true, nav item will be disabled.
+  - name: active
+    type: boolean
+    required: false
+    description: If true, tab item will be selected at start.
   - name: attributes
     type: object
     required: false
@@ -72,4 +76,4 @@ params:
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the tabs component.
+  description: HTML attributes (for example data attributes) to add to the tabs component.

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

@@ -60,11 +60,11 @@
       "isSwitch": true,
       "offState": {
         "classes": "",
-        "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">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><span class="text-sm" aria-hidden="true">On</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="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">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><span class="text-sm" aria-hidden="true">On</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"

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

@@ -1,41 +1,20 @@
 <!-- toggle -->
-<div
-  x-data="{
-    pressed: {{ params.pressed if params.pressed else 'false' }},
-    offClasses: '{{ params.offState.classes if params.offState.classes else '' }}',
-    onClasses: '{{ params.onState.classes if params.onState.classes else '' }}',
-    toggle() {
-      if (this.pressed) {
-        return this.unpress()
-      }
-      this.pressed = true
-    },
-    unpress() {
-      this.pressed = false
-    }
-  }"
-  x-id="['toggle-button']"
-  class="relative"
+<div class="relative c-toggle"
 >
   <!-- Button -->
   <button
-    x-ref="button"
-    x-on:click="toggle()"
+    aria-checked="false"
+    aria-pressed="false"
+    aria-expanded="false"
     {% if params.isSwitch %}
       role = "switch"
-      :aria-checked="pressed ? 'true' : 'false'"
-    {% elseif params.isExpandible == false %}
-      :aria-pressed="pressed ? 'true' : 'false'"
-    {% else %}
-      :aria-expanded="pressed ? 'true' : 'false'"
     {% endif %}
     type="button"
     class="{{ params.classes if params.classes else '' }}"
-    :class="pressed ? onClasses : offClasses"
     {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
   >
-    <span :class="pressed ? 'hidden' : ''">{{ params.offState.html | safe if params.offState.html else params.offState.text }}</span>
-    <span :class="pressed ? '' : 'hidden'">{{ 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 -->
+<!-- /toggle -->

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

@@ -3,6 +3,14 @@
    ========================================================================== */
 
 @layer components {
+  .c-tree--base {
+    input[type="checkbox"],
+    input[type="radio"] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
   .c-tree--sm {
     input[type="checkbox"],
     input[type="radio"] {

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

@@ -26,10 +26,10 @@
   {% set itemHintId = id + "-item-hint" if hasHint else "" %}
   {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
   {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-  <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+  <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
     <div class="relative flex items-start py-xs">
       <div class="flex items-center mx-sm">
-        <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
+        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox"{% else %} type="radio"{% endif %} value="{{ item.value }}"
         {{-" checked" if item.checked }}
         {{-" disabled" if item.disabled }}
         {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}