decidim-design 0.30.2 → 0.31.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58cfe797de046ee4ad9593fa5c2adb140ef59f3063483cf111a912354b9ae65d
-  data.tar.gz: 18963c1d5c94a0ac36ae321d7f89ce6fd7739d651c4098bed12b06e79571bdaf
+  metadata.gz: 25ad5c9d038b21bcaccb85a93821ef11876af2982e045e02f42dbd0ebfd2dfdc
+  data.tar.gz: 92059b3a899e91a3c50a4e6842d5b4feedf33e73d7647c2c1604b4da7299f0a4
 SHA512:
-  metadata.gz: 50f96bc130868c03b6d5a2e1b93fd3a54fe1b78c54c6156f04ce5f3ce93c744f5dccea55dd4606c328386526ed505a03c58b9dc8b1da9488a19b6d34a0eea08a
-  data.tar.gz: 60b67c7fa1ee50cc941e92de60a603d7bc3164ce58d66880cc15c63f50b72b7904790f2abc493fee74de4594bc3429855f86b84d0ae81ea4cc8c045878ccd05c
+  metadata.gz: f29c7f07c084539afce9651a41ba7fea004751924160bd857e07efaa19780d74f07559ef24b1a44031b170666858c9af01b6216bbc36cfd2fc7b747339b5b8ad
+  data.tar.gz: e30c878dc9a919e0114f24dabeb626fbd2fc1b37ae3bf406e992f1498df22c5634f1053eab5341aaa0288bf7ed0064a6e9ac8387467a35b5368b3ea25bf4cff0

data/app/helpers/decidim/design/colors_helper.rb

@@ -48,7 +48,8 @@ module Decidim
                   { value: "#020203", name: "black", rgba: "rgba(2,2,3,1)", usage: t("decidim.design.helpers.usage_typography_1") },
                   { value: "#3E4C5C", name: "gray-2", rgba: "rgba(62,76,92,1)", usage: t("decidim.design.helpers.usage_typography_2") },
                   { value: "#FFFFFF", name: "white", rgba: "rgba(255,255,255,1)", usage: t("decidim.design.helpers.usage_typography_3") },
-                  { value: "#155ABF", name: "secondary", rgba: "rgba(21,90,191,1)", usage: t("decidim.design.helpers.usage_typography_4") }
+                  { value: "#155ABF", name: "secondary", rgba: "rgba(21,90,191,1)", usage: t("decidim.design.helpers.usage_typography_4") },
+                  { value: "#a3a3a3", name: "neutral-400", rgba: "rgba(163,163,163,1)", usage: t("decidim.design.helpers.usage_typography_5") }
                 )
               },
               {

data/app/helpers/decidim/design/share_helper.rb

@@ -18,7 +18,7 @@ module Decidim
                 options: { headings: [t("decidim.design.helpers.share_button")] },
                 cell_snippet: {
                   cell: "decidim/share_widget",
-                  args: [{}],
+                  args: [shareable],
                   call_string: 'cell("decidim/share_widget", resource)'
                 }
               }
@@ -26,6 +26,30 @@ module Decidim
           }
         ]
       end
+
+      def shareable
+        ShareableResource.new
+      end
+
+      class ShareableResourcePresenter < SimpleDelegator
+        def title(*)
+          __getobj__.title
+        end
+      end
+
+      class ShareableResource
+        def initialize
+          @title = "Shareable Resource"
+        end
+
+        def presenter = ShareableResourcePresenter.new(self)
+
+        def to_sgid = "#"
+
+        def [](key); end
+
+        attr_accessor :title
+      end
     end
   end
 end

data/app/packs/stylesheets/design.scss

@@ -1,4 +1,4 @@
-@import "tom-select/dist/scss/tom-select";
+@use "tom-select/dist/scss/tom-select";
 
 .design__layout {
   @apply grid md:grid-cols-12 container min-h-screen before:content-[''] before:absolute before:-z-10 before:w-1/2 before:h-full before:inset-0 before:bg-background;

data/app/views/decidim/design/components/accordions.html.erb

@@ -17,7 +17,7 @@
 
   <p><%= t(".demo_description") %></p>
 
-  <div data-component="accordion" data-multiselectable="false" id="example-accordion-1">
+  <div data-controller="accordion" data-multiselectable="false" id="example-accordion-1">
     <ul class="tab-x-container">
       <% 3.times do |tab| %>
         <li>
@@ -53,7 +53,7 @@
 
     <code>
       <textarea spellcheck="false" rows="8">
-<div data-component="accordion" id="example-accordion">
+<div data-controller="accordion" id="example-accordion">
   <button id="trigger" data-controls="panel">
     <%= t(".trigger") %>
   </button>

data/app/views/decidim/design/components/activities/_static-activities.html.erb

@@ -19,7 +19,7 @@
     </div>
     <div class="activity__author">
       <div class="author" data-author="">
-        <div class="author__container" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+        <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
           <div class=&quot;author__container&quot;>
           <span class=&quot;author__avatar-container&quot;>
           <a href=&quot;#&quot;>
@@ -45,7 +45,7 @@
           <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
           </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;l10A9D-VXx2J_sZi-EpPchvyyTbr_MuBIof0orqJ8mjskMZN38Nr1MLZHbYb06Q8XSxGIxtHP1Yz99QH5NtWaA&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJajFuYVdRNkx5OWtaV05wWkdsdExYQnZjSFZzWVhSbExYSmxaR1Z6YVdkdUwwUmxZMmxrYVcwNk9sVnpaWEpIY205MWNDOHlPREEzT0FZNkJrVlUiLCJleHAiOiIyMDIzLTEyLTA4VDE3OjM2OjUxLjk1MVoiLCJwdXIiOiJkZWZhdWx0In19--3388eefc3a8a7c90bdb54c2473912eb49caa3192&quot; autocomplete=&quot;off&quot; /></form>
           </div>
-          " aria-describedby="0f99qi-tooltip" data-yeti-box="0f99qi-tooltip" data-toggle="0f99qi-tooltip" data-resize="0f99qi-tooltip" id="toggle-0q86" aria-controls="0f99qi-tooltip" data-events="resize">
+          " aria-describedby="0f99qi-tooltip" data-yeti-box="0f99qi-tooltip" data-resize="0f99qi-tooltip" id="toggle-0q86" aria-controls="0f99qi-tooltip" data-events="resize">
           <span class="author__avatar-container">
           <a href="#">
           <img alt="Avatar: User Group 28078" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">

data/app/views/decidim/design/components/activities/_static-activity.html.erb

@@ -18,7 +18,7 @@
   </div>
   <div class="activity__author">
     <div class="author" data-author="">
-      <div class="author__container" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+      <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
         <div class=&quot;author__container&quot;>
         <span class=&quot;author__avatar-container&quot;>
         <a href=&quot;#&quot;>
@@ -44,7 +44,7 @@
         <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
         </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;YDKRsY0hZ4fwm-K_uG6tJua9MP4qEnaP46S_3F9VAVMb_1cIbXdTTru8OWtb90ZooGO_69qpgljy1J95AQelUw&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaEpJajFuYVdRNkx5OWtaV05wWkdsdExYQnZjSFZzWVhSbExYSmxaR1Z6YVdkdUwwUmxZMmxrYVcwNk9sVnpaWEpIY205MWNDOHlPREF6TmdZNkJrVlUiLCJleHAiOiIyMDIzLTEyLTEwVDExOjM3OjA1LjExNFoiLCJwdXIiOiJkZWZhdWx0In19--8488df6a633dd76191d973d968ce85a2fee73622&quot; autocomplete=&quot;off&quot; /></form>
         </div>
-        " aria-describedby="j1iaa9-tooltip" data-yeti-box="j1iaa9-tooltip" data-toggle="j1iaa9-tooltip" data-resize="j1iaa9-tooltip" id="toggle-nuqmnw" aria-controls="j1iaa9-tooltip" data-events="resize">
+        " aria-describedby="j1iaa9-tooltip" data-yeti-box="j1iaa9-tooltip" data-resize="j1iaa9-tooltip" id="toggle-nuqmnw" aria-controls="j1iaa9-tooltip" data-events="resize">
         <span class="author__avatar-container">
         <a href="#">
         <img alt="Avatar: User Group 28036" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">

data/app/views/decidim/design/components/cards/_static-card-l-description.html.erb

@@ -15,7 +15,7 @@
         <%= icon("wechat-line") %>
         0
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

data/app/views/decidim/design/components/cards/_static-card-l-image.html.erb

@@ -13,7 +13,7 @@
       <span>
         <!-- linthtml-disable -->
         <div class="author" data-author="">
-          <div class="author__container" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+          <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
             <div class=&quot;author__container&quot;>
             <span class=&quot;author__avatar-container&quot;>
             <img alt=&quot;Avatar: Terica MacGyver Sr.&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
@@ -40,7 +40,7 @@
             <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
             </a>
             </div>
-            " aria-describedby="5filn3-tooltip" data-yeti-box="5filn3-tooltip" data-toggle="5filn3-tooltip" data-resize="5filn3-tooltip" id="toggle-0rsefa" aria-controls="5filn3-tooltip">
+            " aria-describedby="5filn3-tooltip" data-yeti-box="5filn3-tooltip" data-resize="5filn3-tooltip" id="toggle-0rsefa" aria-controls="5filn3-tooltip">
             <span class="author__avatar-container">
             <img alt="Avatar: Terica MacGyver Sr." class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
             </span>
@@ -57,7 +57,7 @@
         <%= icon("wechat-line") %>
         2
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

data/app/views/decidim/design/components/cards/_static-card-l.html.erb

@@ -7,7 +7,7 @@
       <span>
         <!-- linthtml-disable -->
         <div class="author" data-author="">
-          <div class="author__container" data-tooltip="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
+          <div class="author__container" data-controller="tooltip" data-tooltip-tooltip-value="<div class=&quot;author__tooltip bottom&quot; role=&quot;tooltip&quot;>
             <div class=&quot;author__container&quot;>
             <span class=&quot;author__avatar-container&quot;>
             <img alt=&quot;Avatar: Tammy Lesch VM&quot; class=&quot;author__avatar&quot; src=&quot;<%= asset_pack_path("media/images/default-avatar.svg") %>&quot; />
@@ -31,7 +31,7 @@
             <svg width=&quot;1em&quot; height=&quot;1em&quot; role=&quot;img&quot; aria-hidden=&quot;true&quot;><use href=&quot;<%= "#{asset_pack_path("media/images/remixicon.symbol.svg")}#ri-notification-3-line" %>&quot; tabindex=&quot;-1&quot;></use></svg>
             </button><input type=&quot;hidden&quot; name=&quot;authenticity_token&quot; value=&quot;lS3Qr0rPEGR-g40UKR1aXFG0ekPAg3vX75katkSHYSttywRbOAj5EvsNAWZ91bMhwstNuRYPuhbLQE-AvlAs6w&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[button_classes]&quot; value=&quot;button button__sm button__transparent&quot; autocomplete=&quot;off&quot; /><input type=&quot;hidden&quot; name=&quot;follow[followable_gid]&quot; value=&quot;BAh7CEkiCGdpZAY6BkVUSSI4Z2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6VXNlckdyb3VwLzI0BjsAVEkiDHB1cnBvc2UGOwBUSSIMZGVmYXVsdAY7AFRJIg9leHBpcmVzX2F0BjsAVEkiHTIwMjMtMTEtMTlUMDc6MDg6NDAuNDU3WgY7AFQ=--a0875a4b535cbc4218f1e0707cc6ea2148e213f3&quot; autocomplete=&quot;off&quot; /></form>
             </div>
-            " aria-describedby="t17dfd-tooltip" data-yeti-box="t17dfd-tooltip" data-toggle="t17dfd-tooltip" data-resize="t17dfd-tooltip" id="toggle-2k3n55" aria-controls="t17dfd-tooltip">
+            " aria-describedby="t17dfd-tooltip" data-yeti-box="t17dfd-tooltip" data-resize="t17dfd-tooltip" id="toggle-2k3n55" aria-controls="t17dfd-tooltip">
             <span class="author__avatar-container">
             <img alt="Avatar: Tammy Lesch VM" class="author__avatar" src="<%= asset_pack_path("media/images/default-avatar.svg") %>">
             </span>
@@ -44,7 +44,7 @@
         <%= icon("wechat-line") %>
         0
       </span>
-      <span data-endorsements-count="">
+      <span data-likes-count="">
         <%= icon("like") %>
         0
       </span>

data/app/views/decidim/design/components/dropdowns.html.erb

@@ -20,7 +20,7 @@
 
   <p><%= t("decidim.design.helpers.dropdowns_demo_1_description") %></p>
 
-  <button id="dropdown-trigger-element" data-component="dropdown" data-target="dropdown-menu-element" data-auto-close="true">
+  <button id="dropdown-trigger-element" data-controller="dropdown" data-target="dropdown-menu-element" data-auto-close="true">
     <span><%= t("decidim.searches.filters.jump_to") %></span>
     <%= icon "arrow-down-s-line" %>
     <%= icon "arrow-up-s-line" %>

data/app/views/decidim/design/components/forms.html.erb

@@ -40,8 +40,8 @@
 
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>"
-        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> hide_help="true" <% end %>>
+        input type="<%= element %>"  <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> hide_help="true" data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -80,9 +80,9 @@
   <div class="form__wrapper">
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>"
+        input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
         <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
-        <input type="<%= element %>">
+        <input type="<%= element %>" <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -124,8 +124,8 @@
   <div class="form__wrapper">
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>" disabled
-        <input type="<%= element %>" disabled>
+        input type="<%= element %>" disabled <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" disabled <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
       </label>
     <% end %>
 
@@ -166,8 +166,8 @@
 
     <% text_types.each do |element| %>
       <label>
-        input type="<%= element %>" required
-        <input type="<%= element %>" required>
+        input type="<%= element %>" required <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>
+        <input type="<%= element %>" required <% if %w(datetime-local date).include?(element) %> data-controller="date-picker" <% end %>>
         <div class="form-error">Lorem ipsum dolor sit amet.</div>
       </label>
     <% end %>
@@ -201,23 +201,23 @@
     <%= cell "decidim/announcement", t(".min_max_length_description") %>
 
     <label>
-      input type="text" maxlength="20"
-      <input type="text" maxlength="20">
+      input type="text" maxlength="20" data-controller="character-counter"
+      <input type="text" maxlength="20" data-controller="character-counter">
     </label>
 
     <label>
-      textarea maxlength="20"
-      <textarea cols="30" rows="10" maxlength="20"></textarea>
+      textarea maxlength="20" data-controller="character-counter"
+      <textarea cols="30" rows="10" maxlength="20" data-controller="character-counter"></textarea>
     </label>
 
     <label>
-      input type="text" minlength="5" maxlength="20"
-      <input type="text" minlength="5" maxlength="20">
+      input type="text" minlength="5" maxlength="20" data-controller="character-counter"
+      <input type="text" minlength="5" maxlength="20" data-controller="character-counter">
     </label>
 
     <label>
-      textarea minlength="5" maxlength="20"
-      <textarea cols="30" rows="10" minlength="5" maxlength="20"></textarea>
+      textarea minlength="5" maxlength="20" data-controller="character-counter"
+      <textarea cols="30" rows="10" minlength="5" data-controller="character-counter" maxlength="20"></textarea>
     </label>
   </div>
 </section>
@@ -229,8 +229,8 @@
     <%= cell "decidim/announcement", t(".emojis_description") %>
 
     <label>
-      textarea data-input-emoji="true"
-      <textarea cols="30" rows="10" data-input-emoji="true"></textarea>
+      textarea data-controller="emoji"
+      <textarea cols="30" rows="10" data-controller="emoji"></textarea>
     </label>
   </div>
 </section>
@@ -242,8 +242,8 @@
     <p><%= t(".multiselect_description_html") %></p>
 
     <label>
-      input type="text" class="js-tags-container" value="abc, 123"
-      <input type="text" class="js-tags-container" value="abc, 123">
+      input type="text" data-controller="input-tags" value="abc, 123"
+      <input type="text" data-controller="input-tags" value="abc, 123">
     </label>
   </div>
 </section>

data/app/views/layouts/decidim/design/_head.html.erb

@@ -1,4 +1,4 @@
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<%= tag :meta, name: "viewport", content: "width=device-width, initial-scale=1.0" %>
 <%= javascript_pack_tag "decidim_core", "decidim_design", defer: false %>
 
 <%= append_stylesheet_pack_tag "decidim_overrides", media: "all" %>

data/config/assets.rb

@@ -2,7 +2,7 @@
 
 base_path = File.expand_path("..", __dir__)
 
-Decidim::Webpacker.register_path("#{base_path}/app/packs")
-Decidim::Webpacker.register_entrypoints(
+Decidim::Shakapacker.register_path("#{base_path}/app/packs")
+Decidim::Shakapacker.register_entrypoints(
   decidim_design: "#{base_path}/app/packs/entrypoints/decidim_design.js"
 )

data/config/brakeman.ignore

@@ -0,0 +1,51 @@
+{
+  "ignored_warnings": [
+    {
+      "warning_type": "Dynamic Render Path",
+      "warning_code": 15,
+      "fingerprint": "7a3411e36cd1e0fe2644f8be0eafd08ce2b1f5cacab6a6e88d9598671a3ed523",
+      "check_name": "Render",
+      "message": "Render path contains parameter value",
+      "file": "app/controllers/decidim/design/components_controller.rb",
+      "line": 15,
+      "link": "https://brakemanscanner.org/docs/warning_types/dynamic_render_path/",
+      "code": "render(action => \"decidim/design/#{controller_name}/#{params[:id]}\", {})",
+      "render_path": null,
+      "location": {
+        "type": "method",
+        "class": "Decidim::Design::ComponentsController",
+        "method": "show"
+      },
+      "user_input": "params[:id]",
+      "confidence": "Medium",
+      "cwe_id": [
+        22
+      ],
+      "note": ""
+    },
+    {
+      "warning_type": "Dynamic Render Path",
+      "warning_code": 15,
+      "fingerprint": "ef8d78c5d19841fda160e60f935722ac88bb1be92003164a8e63fd7b51e8bcc5",
+      "check_name": "Render",
+      "message": "Render path contains parameter value",
+      "file": "app/controllers/decidim/design/foundations_controller.rb",
+      "line": 15,
+      "link": "https://brakemanscanner.org/docs/warning_types/dynamic_render_path/",
+      "code": "render(action => \"decidim/design/#{controller_name}/#{params[:id]}\", {})",
+      "render_path": null,
+      "location": {
+        "type": "method",
+        "class": "Decidim::Design::FoundationsController",
+        "method": "show"
+      },
+      "user_input": "params[:id]",
+      "confidence": "Medium",
+      "cwe_id": [
+        22
+      ],
+      "note": ""
+    }
+  ],
+  "brakeman_version": "7.0.0"
+}

data/config/locales/bg.yml

@@ -14,7 +14,6 @@ bg:
           trigger: Задействане
           usage: Употреба
           usage_p: '"Акордеонът" изисква поне три елемента'
-          usage_p_1_html: 1. Обвивка <code>div</code>, с атрибута на данните <code>data-component="accordion"</code>, над всички налични задействащи елементи и панели.
           usage_p_2_html: 2. Задействащ елемент, с който потребителят може да действа (като бутон), сочещ към сгъваемия елемент чрез <code>data-controls="panel"</code>, където <i>panel</i> е <code>id </code> на панела.
           usage_p_3_html: 3. Елемент с възможност за скриване, чийто <code>id</code> съвпада със стойността на контролите на данните, към която препраща задействащия елемент.
         activities:
@@ -185,7 +184,6 @@ bg:
         conference_s: Конференция S
         conferences: Конференции
         context: Контекст
-        context_description: Тази клетка показва информация за потребителя. Това е визуална помощ за идентифициране на създателя на ресурса/съдържанието. Задържането на курсора на мишката показва подсказка с допълнителна информация и връзки към неговия профил.
         context_description_2: За ресурси тази клетка се появява под основното заглавие. За друго съдържание се появява до самото съдържание.
         debate_l: Дебат L
         debate_s: Дебат S
@@ -206,7 +204,6 @@ bg:
         dropdowns_description_html: Падащите менюта са функция на javascript, достъпна благодарение на външна библиотека, наречена %{link}.
         dropdowns_usage_1_description: 2. Елемент с възможност за скриване, чийто <code>id</code> съвпада с целевата стойност на данните, към която препраща тригерът.
         dropdowns_usage_description: 'Падащото меню изисква два елемента:'
-        dropdowns_usage_description_html: 1. Елемент с възможност за действие от страна на потребителя с атрибутите на данни <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Упростено описание на ресурса
         dummy_title: Упростено заглавие на ресурса
         follow_button: Бутон за следване

data/config/locales/ca-IT.yml

@@ -14,7 +14,7 @@ ca-IT:
           trigger: Activador
           usage: Ús
           usage_p: Un acordió necessita com a mínim tres elements
-          usage_p_1_html: '1. Un embolcall <code>div</code>, amb l''atribut "data": <code>data-component="accordion"</code>, sobre tots els activadors i panells disponibles.'
+          usage_p_1_html: '1. Un embolcall (wrapper) <code>div</code>, amb l''atribut "data": <code>data-component="accordion"</code>, sobre tots els activadors i panells disponibles.'
           usage_p_2_html: 2. Un element activador, usuària accionable (com un botó), apuntant a l'element plegable a través de <code>data-controls="panel"</code>, on <i>panel</i> és el <code>id</code> del panell.
           usage_p_3_html: 3. Un element ocult, on <code>id</code> coincideix amb el valor dels controls de dades al que es refereix l'activador.
         activities:
@@ -185,7 +185,7 @@ ca-IT:
         conference_s: Jornada S
         conferences: Jornadas
         context: Context
-        context_description: Aquesta cel·la mostra informació al voltant d'una usuària. És una ajuda visual per a identificar la creadora d'un recurs/contingut. En passar per sobre el cursor, es mostra una descripció amb més informació i enllaços al seu perfil.
+        context_description: Aquesta cel·la mostra informació sobre una usuària. És una ajuda visual per identificar la creadora de recursos/continguts.
         context_description_2: Pels recursos, aquesta cel·la apareix sota l'encapçalament principal. Per altres continguts, apareix al costat del mateix contingut.
         debate_l: Debat L
         debate_s: Debat S
@@ -206,7 +206,7 @@ ca-IT:
         dropdowns_description_html: Els menús desplegables són una característica <i>JavaScript</i> disponible gràcies a una biblioteca externa anomenada %{link}.
         dropdowns_usage_1_description: 2. Un element modal, la <code>id</code> del qual coincideix amb el valor dels controls de dades a què es refereix l'activador.
         dropdowns_usage_description: 'Un menú desplegable requereix dos elements:'
-        dropdowns_usage_description_html: 1. Un element accionable pel participant, amb els atributs de dades <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. Un element accionable per la participant, amb els atributs de dades <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Descripció del recurs fictici
         dummy_title: Títol del recurs fictici
         follow_button: Botó "Seguir"
@@ -294,6 +294,7 @@ ca-IT:
         usage_typography_2: Text en línia
         usage_typography_3: Text sobre fons fosc
         usage_typography_4: Enllaços i botons
+        usage_typography_5: Pestanya desactivada
         value: Valor
         variations: Variacions
         variations_cards_description: Cada targeta es veurà diferent d'acord amb les propietats del recurs que es mostri. Pot anul·lar aquest comportament a la cel·la específica.

data/config/locales/ca.yml

@@ -14,7 +14,7 @@ ca:
           trigger: Activador
           usage: Ús
           usage_p: Un acordió necessita com a mínim tres elements
-          usage_p_1_html: '1. Un embolcall <code>div</code>, amb l''atribut "data": <code>data-component="accordion"</code>, sobre tots els activadors i panells disponibles.'
+          usage_p_1_html: '1. Un embolcall (wrapper) <code>div</code>, amb l''atribut "data": <code>data-component="accordion"</code>, sobre tots els activadors i panells disponibles.'
           usage_p_2_html: 2. Un element activador, usuària accionable (com un botó), apuntant a l'element plegable a través de <code>data-controls="panel"</code>, on <i>panel</i> és el <code>id</code> del panell.
           usage_p_3_html: 3. Un element ocult, on <code>id</code> coincideix amb el valor dels controls de dades al que es refereix l'activador.
         activities:
@@ -185,7 +185,7 @@ ca:
         conference_s: Jornada S
         conferences: Jornadas
         context: Context
-        context_description: Aquesta cel·la mostra informació al voltant d'una usuària. És una ajuda visual per a identificar la creadora d'un recurs/contingut. En passar per sobre el cursor, es mostra una descripció amb més informació i enllaços al seu perfil.
+        context_description: Aquesta cel·la mostra informació sobre una usuària. És una ajuda visual per identificar la creadora de recursos/continguts.
         context_description_2: Pels recursos, aquesta cel·la apareix sota l'encapçalament principal. Per altres continguts, apareix al costat del mateix contingut.
         debate_l: Debat L
         debate_s: Debat S
@@ -206,7 +206,7 @@ ca:
         dropdowns_description_html: Els menús desplegables són una característica <i>JavaScript</i> disponible gràcies a una biblioteca externa anomenada %{link}.
         dropdowns_usage_1_description: 2. Un element modal, la <code>id</code> del qual coincideix amb el valor dels controls de dades a què es refereix l'activador.
         dropdowns_usage_description: 'Un menú desplegable requereix dos elements:'
-        dropdowns_usage_description_html: 1. Un element accionable pel participant, amb els atributs de dades <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. Un element accionable per la participant, amb els atributs de dades <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Descripció del recurs fictici
         dummy_title: Títol del recurs fictici
         follow_button: Botó "Seguir"
@@ -294,6 +294,7 @@ ca:
         usage_typography_2: Text en línia
         usage_typography_3: Text sobre fons fosc
         usage_typography_4: Enllaços i botons
+        usage_typography_5: Pestanya desactivada
         value: Valor
         variations: Variacions
         variations_cards_description: Cada targeta es veurà diferent d'acord amb les propietats del recurs que es mostri. Pot anul·lar aquest comportament a la cel·la específica.

data/config/locales/cs.yml

@@ -14,7 +14,6 @@ cs:
           trigger: Spouštěč
           usage: Použití
           usage_p: Akce vyžaduje nejméně tři prvky
-          usage_p_1_html: 1. wrapper <code>div</code>, s atributem dat <code>data-component="accordion"</code>, přes všechny dostupné spouštěče a panely.
           usage_p_2_html: 2. spouštěcí prvek, uživatelsky proveditelný (jako tlačítko), ukazující na sbalitelný prvek prostřednictvím <code>data-controls="panel"</code>, kde <i>panel</i> je <code>id</code> panelu.
           usage_p_3_html: 3. Modální prvek, jehož <code>id</code> odpovídá hodnotě data-target, ke které se spouštěč vztahuje.
         activities:
@@ -185,7 +184,7 @@ cs:
         conference_s: Konference S
         conferences: Konference
         context: Kontext
-        context_description: Tato buňka zobrazuje některé informace o uživateli. Je to vizuální nápověda k identifikaci zdroje/tvůrce obsahu. Po najetí myší se zobrazí nápověda s dalšími informacemi a odkazy na její profil.
+        context_description: Tato buňka zobrazuje některé informace o uživateli. Je to vizuální pomoc k identifikaci tvůrce zdrojů/obsahu.
         context_description_2: Pro zdroje se tato buňka objevuje pod hlavní položkou. U jiného obsahu se objeví vedle samotného obsahu.
         debate_l: Debata L
         debate_s: Debata S
@@ -206,7 +205,6 @@ cs:
         dropdowns_description_html: Stahovací nabídky jsou javascript funkce dostupná díky externí knihovně s názvem %{link}.
         dropdowns_usage_1_description: 2. Modální prvek, jehož <code>id</code> odpovídá hodnotě data-target, ke které se spouštěč vztahuje.
         dropdowns_usage_description: 'Rozevírací nabídka vyžaduje dva prvky:'
-        dropdowns_usage_description_html: 1. Uživatelsky proveditelný prvek, s atributy <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Zástupný popis zdoje
         dummy_title: Zástupný titulek zdroje
         follow_button: Tlačítko Sledovat
@@ -294,6 +292,7 @@ cs:
         usage_typography_2: Vložený text
         usage_typography_3: Text na tmavém pozadí
         usage_typography_4: Odkazy a tlačítka
+        usage_typography_5: Vypnutá karta
         value: Hodnota
         variations: Variace
         variations_cards_description: Každá karta bude vypadat jinak než s ohledem na vlastnosti zobrazeného dokumentu. Toto chování můžete přepsat v konkrétní buňce.

data/config/locales/de.yml

@@ -14,7 +14,7 @@ de:
           trigger: Auslöser
           usage: Nutzung
           usage_p: Ein Akkordeon benötigt mindestens drei Elemente
-          usage_p_1_html: 1. Ein Wrapper <code>div</code>, mit dem Data-Attribut <code>data-component="accordion"</code>, über alle verfügbaren Trigger und Panels.
+          usage_p_1_html: 1. Ein Wrapper <code>div</code>, mit dem Data-Attribut <code>data-controller="accordion"</code>, über alle verfügbaren Trigger und Panels.
           usage_p_2_html: 2. Ein Triggerelement, fremdbedienbar (als Button), das auf das zusammenklappbare Element durch <code>data-controls="Panel"</code>zeigt, wobei das <i>panel</i> durch die <code>id</code> des Panels angesteuert wird.
           usage_p_3_html: 3. Ein versteckbares Element, dessen <code>id</code> mit dem Wert der Datensteuerung übereinstimmt, auf den sich der Trigger bezieht.
         activities:
@@ -185,7 +185,7 @@ de:
         conference_s: Konferenz S
         conferences: Konferenzen
         context: Kontext
-        context_description: Diese Zelle zeigt einige Informationen über einen Benutzer an. Es ist eine visuelle Hilfe um den Ressourcen-/Inhalts-Ersteller zu identifizieren. Mit der Maus bewegen zeigt einen Tooltip mit weiteren Informationen und Links zu seinem Profil.
+        context_description: Diese Zelle zeigt einige Informationen über die Nutzenden an. Es ist eine visuelle Hilfe um den Ressourcen-/Inhalts-Erstellende zu identifizieren.
         context_description_2: Für Ressourcen erscheint diese Zelle unterhalb der Hauptüberschrift. Für andere Inhalte erscheint sie neben dem Inhalt selbst.
         debate_l: Debatte L
         debate_s: Debatte S
@@ -206,7 +206,7 @@ de:
         dropdowns_description_html: Dropdowns sind eine Javascript-Funktion, die dank einer externen Bibliothek namens %{link} verfügbar ist.
         dropdowns_usage_1_description: 2. Ein versteckbares Element, dessen <code>ID</code> mit dem Datenzielwert übereinstimmt, auf den der Trigger verweist.
         dropdowns_usage_description: 'Ein Dropdown erfordert zwei Elemente:'
-        dropdowns_usage_description_html: 1. Ein benutzerdefinierbares Element, mit den Datenattributen <code>Datenkomponent="Dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. Ein benutzerdefinierbares Element, mit den Datenattributen <code>data-controller="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Beschreibung der Dummy Ressource
         dummy_title: Dummy Ressourcentitel
         follow_button: Folgen-Button
@@ -294,6 +294,7 @@ de:
         usage_typography_2: Inline-Text
         usage_typography_3: Text über dunklem Hintergrund
         usage_typography_4: Links und Schaltflächen
+        usage_typography_5: Deaktivierter Tab
         value: Wert
         variations: Variationen
         variations_cards_description: Jede Karte sieht je nach Eigenschaften der angezeigten Ressource unterschiedlich aus. Sie können dieses Verhalten in der jeweiligen Zelle überschreiben.

data/config/locales/en.yml

@@ -14,7 +14,7 @@ en:
           trigger: Trigger
           usage: Usage
           usage_p: An accordion requires at least three elements
-          usage_p_1_html: 1. A wrapper <code>div</code>, with the data-attribute <code>data-component="accordion"</code>, over all the available triggers and panels.
+          usage_p_1_html: 1. A wrapper <code>div</code>, with the data-attribute <code>data-controller="accordion"</code>, over all the available triggers and panels.
           usage_p_2_html: 2. A trigger element, user actionable (as a button), pointing to the collapsable element through <code>data-controls="panel"</code>, where <i>panel</i> is the <code>id</code> of the panel.
           usage_p_3_html: 3. A hideable element, whose <code>id</code> matches the data-controls value the trigger refers to.
         activities:
@@ -185,7 +185,7 @@ en:
         conference_s: Conference S
         conferences: Conferences
         context: Context
-        context_description: This cell display some information about a user. It a visual help to identify the resource/content creator. Hovering with the mouse displays a tooltip with further info and links to its profile.
+        context_description: This cell display some information about a user. It a visual help to identify the resource/content creator.
         context_description_2: For resources, this cell appears beneath the main heading. For other contents, it appears next to the content itself.
         debate_l: Debate L
         debate_s: Debate S
@@ -206,7 +206,7 @@ en:
         dropdowns_description_html: Dropdowns are a javascript feature available thanks to an external library called %{link}.
         dropdowns_usage_1_description: 2. A hideable element, whose <code>id</code> matches the data-target value the trigger refers to.
         dropdowns_usage_description: 'An dropdown requires two elements:'
-        dropdowns_usage_description_html: 1. A user actionable element, with the data-attributes <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. A user actionable element, with the data-attributes <code>data-controller="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Dummy resource description
         dummy_title: Dummy resource title
         follow_button: Follow Button
@@ -294,6 +294,7 @@ en:
         usage_typography_2: Inline text
         usage_typography_3: Text over dark background
         usage_typography_4: Links and buttons
+        usage_typography_5: Disabled tab
         value: Value
         variations: Variations
         variations_cards_description: Each card will look like different regarding the properties of the resource displayed. You can override such behaviour in the specific cell.

data/config/locales/es-MX.yml

@@ -14,7 +14,7 @@ es-MX:
           trigger: Activador
           usage: Uso
           usage_p: Un acordeón requiere al menos tres elementos
-          usage_p_1_html: '1. Un envoltorio <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
+          usage_p_1_html: '1. Un envoltorio (wrapper) <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
           usage_p_2_html: 2. Un elemento activador, usuaria accionable (como un botón), apuntando al elemento plegable a través de <code>data-controls="panel"</code>, donde <i>panel</i> es la <code>id</code> del panel.
           usage_p_3_html: 3. Un elemento oculto, cuyo <code>id</code> coincide con el valor de los controles de datos al que se refiere el activador.
         activities:
@@ -185,7 +185,7 @@ es-MX:
         conference_s: Conferencia S
         conferences: Conferencia
         context: Contexto
-        context_description: Esta celda muestra información acerca de un usuario. Es una ayuda visual para identificar la creadora del recurso/contenido. Al pasar por encima el cursor, se muestra una descripción con más información y enlaces a su perfil.
+        context_description: Esta celda muestra información acerca de una usuaria. Es una ayuda visual para identificar la creadora de recursos/contenidos.
         context_description_2: Para los recursos, esta célula aparece debajo del encabezado principal. Para otros contenidos, aparece al lado del contenido mismo.
         debate_l: Debate L
         debate_s: Debate S
@@ -294,6 +294,7 @@ es-MX:
         usage_typography_2: Texto en línea
         usage_typography_3: Texto sobre fondo oscuro
         usage_typography_4: Enlaces y botones
+        usage_typography_5: Pestaña desactivada
         value: Valor
         variations: Variaciones
         variations_cards_description: Cada tarjeta se verá diferente en función a las propiedades del recurso mostrado. Puedes anular este comportamiento en la celda específica.

data/config/locales/es-PY.yml

@@ -14,7 +14,7 @@ es-PY:
           trigger: Activador
           usage: Uso
           usage_p: Un acordeón requiere al menos tres elementos
-          usage_p_1_html: '1. Un envoltorio <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
+          usage_p_1_html: '1. Un envoltorio (wrapper) <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
           usage_p_2_html: 2. Un elemento activador, usuaria accionable (como un botón), apuntando al elemento plegable a través de <code>data-controls="panel"</code>, donde <i>panel</i> es la <code>id</code> del panel.
           usage_p_3_html: 3. Un elemento oculto, cuyo <code>id</code> coincide con el valor de los controles de datos al que se refiere el activador.
         activities:
@@ -185,7 +185,7 @@ es-PY:
         conference_s: Conferencia S
         conferences: Conferencia
         context: Contexto
-        context_description: Esta celda muestra información acerca de un usuario. Es una ayuda visual para identificar la creadora del recurso/contenido. Al pasar por encima el cursor, se muestra una descripción con más información y enlaces a su perfil.
+        context_description: Esta celda muestra información acerca de una usuaria. Es una ayuda visual para identificar la creadora de recursos/contenidos.
         context_description_2: Para los recursos, esta célula aparece debajo del encabezado principal. Para otros contenidos, aparece al lado del contenido mismo.
         debate_l: Debate L
         debate_s: Debate S
@@ -294,6 +294,7 @@ es-PY:
         usage_typography_2: Texto en línea
         usage_typography_3: Texto sobre fondo oscuro
         usage_typography_4: Enlaces y botones
+        usage_typography_5: Pestaña desactivada
         value: Valor
         variations: Variaciones
         variations_cards_description: Cada tarjeta se verá diferente en función a las propiedades del recurso mostrado. Puedes anular este comportamiento en la celda específica.

data/config/locales/es.yml

@@ -14,7 +14,7 @@ es:
           trigger: Activador
           usage: Uso
           usage_p: Un acordeón requiere al menos tres elementos
-          usage_p_1_html: '1. Un envoltorio <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
+          usage_p_1_html: '1. Un envoltorio (wrapper) <code>div</code>, con el atributo "data": <code>data-component="accordion"</code>, sobre todos los activadores y paneles disponibles.'
           usage_p_2_html: 2. Un elemento activador, usuaria accionable (como un botón), apuntando al elemento plegable a través de <code>data-controls="panel"</code>, donde <i>panel</i> es la <code>id</code> del panel.
           usage_p_3_html: 3. Un elemento oculto, cuyo <code>id</code> coincide con el valor de los controles de datos al que se refiere el activador.
         activities:
@@ -185,7 +185,7 @@ es:
         conference_s: Conferencia S
         conferences: Conferencia
         context: Contexto
-        context_description: Esta celda muestra información acerca de un usuario. Es una ayuda visual para identificar la creadora del recurso/contenido. Al pasar por encima el cursor, se muestra una descripción con más información y enlaces a su perfil.
+        context_description: Esta celda muestra información acerca de una usuaria. Es una ayuda visual para identificar la creadora de recursos/contenidos.
         context_description_2: Para los recursos, esta célula aparece debajo del encabezado principal. Para otros contenidos, aparece al lado del contenido mismo.
         debate_l: Debate L
         debate_s: Debate S
@@ -294,6 +294,7 @@ es:
         usage_typography_2: Texto en línea
         usage_typography_3: Texto sobre fondo oscuro
         usage_typography_4: Enlaces y botones
+        usage_typography_5: Pestaña desactivada
         value: Valor
         variations: Variaciones
         variations_cards_description: Cada tarjeta se verá diferente en función a las propiedades del recurso mostrado. Puedes anular este comportamiento en la celda específica.

data/config/locales/eu.yml

@@ -8,7 +8,7 @@ eu:
           demo: Demoa
           demo_description: Aplikazioan zehar akordeoiak erabiltzen dira, batez ere edukiak erlaitzetan erakusteko/ezkutatzeko edo testu ikusgarriak tolesteko/ez tolesteko.
           description_accordions_html: Akordeoiak javascript funtzioak dira, erabilgarri daudenak %{link_code} izeneko kanpoko liburutegi bati esker.
-          github_source_html: 'Iturburu-kodea hemen: GitHub %{github_link}}'
+          github_source_html: 'Iturburu-kodea hemen: GitHub %{github_link}'
           panel: Panela
           title: Akordeoiak
           trigger: Eragin
@@ -185,7 +185,7 @@ eu:
         conference_s: S Jardunaldia
         conferences: Jardunaldiak
         context: Testuingurua
-        context_description: Gelaxka honek parte-hartzaile bati buruzko informazioa erakusten du. Baliabidearen/edukiaren sortzailea identifikatzeko laguntza bisuala da. Kursoreaz gainetik pasatzean, informazio gehiago eta bere profilerako estekak dituen deskribapena agertzen da.
+        context_description: Gelaxka honek parte-hartzaile bati buruzko informazioa erakusten du. Ikusizko laguntza bat da baliabidearen/edukiaren sortzailea identifikatzeko.
         context_description_2: Baliabideetarako, gelaxka hau sarrera nagusiaren azpian agertzen da. Beste eduki batzuetarako, edukiaren ondoan agertzen da.
         debate_l: L Eztabaida
         debate_s: S Eztabaida
@@ -294,6 +294,7 @@ eu:
         usage_typography_2: Lineako proba
         usage_typography_3: Hondo ilunaren gaineko testua
         usage_typography_4: Estekak eta botoiak
+        usage_typography_5: Elbarrien fitxa
         value: Balioa
         variations: Aldakuntzak
         variations_cards_description: Txartel bakoitza desberdina izango da erakutsitako baliabidearen propietateei dagokienez. Zelula espezifikoan horrelako portaera deuseztatu dezakezu.

data/config/locales/fi-plain.yml

@@ -14,7 +14,7 @@ fi-pl:
           trigger: Liipaisin
           usage: Käyttöesimerkki
           usage_p: Haitarielementti tarvitsee vähintään kolme elementtiä
-          usage_p_1_html: 1. Jäsentävä <code>div</code>-elementti, jossa on data-attribuutti <code>data-component="accordion"</code>, joka pitää sisällään kaikki liipaisimet ja paneelit.
+          usage_p_1_html: 1. Jäsentävä <code>div</code>-elementti, jossa on data-attribuutti <code>data-controller="accordion"</code>, joka pitää sisällään kaikki liipaisimet ja paneelit.
           usage_p_2_html: 2. Käyttäjän kohdistettavissa oleva liipaisinelementti (painike), joka viittaa hallinnoitavaan elementtiin attribuutin <code>data-controls="panel"</code> avulla. Kyseisessä attribuutissa <i>panel</i> on viitattavan paneelielementin <code>id</code>-attribuutin arvo.
           usage_p_3_html: 3. Piilotettava tai näytettävä elementti, jonka <code>id</code>-attribuutti vastaa <code>data-controls</code>-attribuutin arvoa haitarielementin liipaisimessa.
         activities:
@@ -185,7 +185,7 @@ fi-pl:
         conference_s: Konferenssi S
         conferences: Konferenssit
         context: Asiayhteys
-        context_description: Tämä solu näyttää tietoja käyttäjästä. Se on visuaalinen tapa tunnistaa tietueen sisältöä tai sen laatija. Hiiren osoittaminen elementin päällä näyttää sivun päälle avautuvan työkaluvinkin, jossa on lisätietoa ja linkkejä profiiliin.
+        context_description: Tämä solu näyttää tietoja käyttäjästä. Sitä käytetään visuaalisena vihjeenä, joka auttaa tunnistamaan asian/sisällön luojan.
         context_description_2: Tämä solu näytetään pääotsikon alapuolella tietueille. Muilla sisällöillä se näytetään sisällön vieressä.
         debate_l: Keskustelu L
         debate_s: Keskustelu S
@@ -206,7 +206,7 @@ fi-pl:
         dropdowns_description_html: Pudotusvalikot ovat ulkoisen %{link} -kirjaston tarjoama JavaScript ominaisuus.
         dropdowns_usage_1_description: 2. Piilotettava elementti, jonka <code>id</code>-attribuutti vastaa pudotusvalikkoon viittaavan liipaisinelementin <code>data-target</code>-attribuutin arvoa.
         dropdowns_usage_description: 'Pudotusvalikko tarvitsee kaksi elementtiä:'
-        dropdowns_usage_description_html: 1. Käyttäjän kohdistettavissa oleva elementti, joka sisältää data-attribuutit <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. Käyttäjän kohdistettavissa oleva elementti, joka sisältää data-attribuutit <code>data-controller="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Esimerkkitietueen kuvaus
         dummy_title: Esimerkkitietueen otsikko
         follow_button: Seuraa-painike
@@ -294,6 +294,7 @@ fi-pl:
         usage_typography_2: Leipäteksti
         usage_typography_3: Tumman taustan päällä näytettävän tekstin väri
         usage_typography_4: Linkit ja painikkeet
+        usage_typography_5: Käytöstä poistettu välilehti
         value: Arvo
         variations: Muunnelmat
         variations_cards_description: Jokainen kortti näyttää erilaiselta, riippuen mitä tietueen ominaisuuksia näytetään. Voit ohittaa tämän oletustoiminnallisuuden yksittäisissä soluissa.

data/config/locales/fi.yml

@@ -14,7 +14,7 @@ fi:
           trigger: Liipaisin
           usage: Käyttöesimerkki
           usage_p: Haitarielementti tarvitsee vähintään kolme elementtiä
-          usage_p_1_html: 1. Jäsentävä <code>div</code>-elementti, jossa on data-attribuutti <code>data-component="accordion"</code>, joka pitää sisällään kaikki liipaisimet ja paneelit.
+          usage_p_1_html: 1. Jäsentävä <code>div</code>-elementti, jossa on data-attribuutti <code>data-controller="accordion"</code>, joka pitää sisällään kaikki liipaisimet ja paneelit.
           usage_p_2_html: 2. Käyttäjän kohdistettavissa oleva liipaisinelementti (painike), joka viittaa hallinnoitavaan elementtiin attribuutin <code>data-controls="panel"</code> avulla. Kyseisessä attribuutissa <i>panel</i> on viitattavan paneelielementin <code>id</code>-attribuutin arvo.
           usage_p_3_html: 3. Piilotettava tai näytettävä elementti, jonka <code>id</code>-attribuutti vastaa <code>data-controls</code>-attribuutin arvoa haitarielementin liipaisimessa.
         activities:
@@ -185,7 +185,7 @@ fi:
         conference_s: Konferenssi S
         conferences: Konferenssit
         context: Asiayhteys
-        context_description: Tämä solu näyttää tietoja käyttäjästä. Se on visuaalinen tapa tunnistaa tietueen sisältöä tai sen laatija. Hiiren osoittaminen elementin päällä näyttää sivun päälle avautuvan työkaluvinkin, jossa on lisätietoa ja linkkejä profiiliin.
+        context_description: Tämä solu näyttää tietoja käyttäjästä. Sitä käytetään visuaalisena vihjeenä, joka auttaa tunnistamaan asian/sisällön luojan.
         context_description_2: Tämä solu näytetään pääotsikon alapuolella tietueille. Muilla sisällöillä se näytetään sisällön vieressä.
         debate_l: Keskustelu L
         debate_s: Keskustelu S
@@ -206,7 +206,7 @@ fi:
         dropdowns_description_html: Pudotusvalikot ovat ulkoisen %{link} -kirjaston tarjoama JavaScript ominaisuus.
         dropdowns_usage_1_description: 2. Piilotettava elementti, jonka <code>id</code>-attribuutti vastaa pudotusvalikkoon viittaavan liipaisinelementin <code>data-target</code>-attribuutin arvoa.
         dropdowns_usage_description: 'Pudotusvalikko tarvitsee kaksi elementtiä:'
-        dropdowns_usage_description_html: 1. Käyttäjän kohdistettavissa oleva elementti, joka sisältää data-attribuutit <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
+        dropdowns_usage_description_html: 1. Käyttäjän kohdistettavissa oleva elementti, joka sisältää data-attribuutit <code>data-controller="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Esimerkkitietueen kuvaus
         dummy_title: Esimerkkitietueen otsikko
         follow_button: Seuraa-painike
@@ -294,6 +294,7 @@ fi:
         usage_typography_2: Leipäteksti
         usage_typography_3: Tumman taustan päällä näytettävän tekstin väri
         usage_typography_4: Linkit ja painikkeet
+        usage_typography_5: Käytöstä poistettu välilehti
         value: Arvo
         variations: Muunnelmat
         variations_cards_description: Jokainen kortti näyttää erilaiselta, riippuen mitä tietueen ominaisuuksia näytetään. Voit ohittaa tämän oletustoiminnallisuuden yksittäisissä soluissa.

data/config/locales/fr-CA.yml

@@ -14,7 +14,6 @@ fr-CA:
           trigger: Déclencheur
           usage: Usage
           usage_p: Un accordéon nécessite au moins trois éléments
-          usage_p_1_html: 1. Un wrapper <code>div</code>, avec l'attribut de données <code>data-component="accordion"</code>, sur tous les déclencheurs et panneaux disponibles.
           usage_p_2_html: 2. Un élément de déclencheur utilisable (comme un bouton), pointant vers l'élément pliable à travers <code>data-controls="panel"</code>, où le <i>panneau</i> est l'<code>id</code> du panneau.
           usage_p_3_html: 3. Un élément cachable, dont l' <code>id</code> correspond à la valeur data-controls à laquelle se réfère le déclencheur.
         activities:
@@ -185,7 +184,7 @@ fr-CA:
         conference_s: Conférence S
         conferences: Conférences
         context: Contexte
-        context_description: Cette cellule affiche quelques informations à propos d'un utilisateur. C'est une aide visuelle pour identifier le créateur de ressource/contenu. Survoler avec la souris affiche une info-bulle avec des informations supplémentaires et des liens vers son profil.
+        context_description: Cette cellule affiche quelques informations à propos d'un utilisateur. C'est une aide visuelle pour identifier le créateur de la ressource/du contenu.
         context_description_2: Pour les ressources, cette cellule apparaît sous le titre principal. Pour les autres contenus, elle apparaît à côté du contenu lui-même.
         debate_l: Débat L
         debate_s: Débat S
@@ -206,7 +205,6 @@ fr-CA:
         dropdowns_description_html: Les listes déroulantes sont une fonctionnalité javascript disponible grâce à une bibliothèque externe appelée %{link}.
         dropdowns_usage_1_description: 2. Un élément cachable, dont l' <code>id</code> correspond à la valeur data-taget à laquelle se réfère le déclencheur.
         dropdowns_usage_description: 'Une liste déroulante nécessite deux éléments :'
-        dropdowns_usage_description_html: 1. Un élément utilisable par l'utilisateur, avec les attributs de données <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Description de la ressource factice
         dummy_title: Titre de la ressource factice
         follow_button: Bouton Suivre
@@ -294,6 +292,7 @@ fr-CA:
         usage_typography_2: Texte inline
         usage_typography_3: Texte sur fond sombre
         usage_typography_4: Liens et boutons
+        usage_typography_5: Onglet désactivé
         value: Valeur
         variations: Variantes
         variations_cards_description: Chaque carte sera différente en ce qui concerne les propriétés de la ressource affichée. Vous pouvez remplacer ce comportement dans la cellule spécifique.

data/config/locales/fr.yml

@@ -14,7 +14,6 @@ fr:
           trigger: Déclencheur
           usage: Usage
           usage_p: Un accordéon nécessite au moins trois éléments
-          usage_p_1_html: 1. Un wrapper <code>div</code>, avec l'attribut de données <code>data-component="accordion"</code>, sur tous les déclencheurs et panneaux disponibles.
           usage_p_2_html: 2. Un élément de déclencheur utilisable (comme un bouton), pointant vers l'élément pliable à travers <code>data-controls="panel"</code>, où le <i>panneau</i> est l'<code>id</code> du panneau.
           usage_p_3_html: 3. Un élément cachable, dont l' <code>id</code> correspond à la valeur data-controls à laquelle se réfère le déclencheur.
         activities:
@@ -185,7 +184,7 @@ fr:
         conference_s: Conférence S
         conferences: Conférences
         context: Contexte
-        context_description: Cette cellule affiche quelques informations à propos d'un utilisateur. C'est une aide visuelle pour identifier le créateur de ressource/contenu. Survoler avec la souris affiche une info-bulle avec des informations supplémentaires et des liens vers son profil.
+        context_description: Cette cellule affiche quelques informations à propos d'un utilisateur. C'est une aide visuelle pour identifier le créateur de la ressource/du contenu.
         context_description_2: Pour les ressources, cette cellule apparaît sous le titre principal. Pour les autres contenus, elle apparaît à côté du contenu lui-même.
         debate_l: Débat L
         debate_s: Débat S
@@ -206,7 +205,6 @@ fr:
         dropdowns_description_html: Les listes déroulantes sont une fonctionnalité javascript disponible grâce à une bibliothèque externe appelée %{link}.
         dropdowns_usage_1_description: 2. Un élément cachable, dont l' <code>id</code> correspond à la valeur data-taget à laquelle se réfère le déclencheur.
         dropdowns_usage_description: 'Une liste déroulante nécessite deux éléments :'
-        dropdowns_usage_description_html: 1. Un élément utilisable par l'utilisateur, avec les attributs de données <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Description de la ressource factice
         dummy_title: Titre de la ressource factice
         follow_button: Bouton Suivre
@@ -294,6 +292,7 @@ fr:
         usage_typography_2: Texte inline
         usage_typography_3: Texte sur fond sombre
         usage_typography_4: Liens et boutons
+        usage_typography_5: Onglet désactivé
         value: Valeur
         variations: Variantes
         variations_cards_description: Chaque carte sera différente en ce qui concerne les propriétés de la ressource affichée. Vous pouvez remplacer ce comportement dans la cellule spécifique.

data/config/locales/ja.yml

@@ -14,7 +14,7 @@ ja:
           trigger: トリガー
           usage: 使い方
           usage_p: アコーディオンには少なくとも3つの要素が必要です
-          usage_p_1_html: 1. すべての使用可能なトリガーとパネルを覆う、data-属性<code>data-component="accordion"</code>を持つラッパー<code>div</code>。
+          usage_p_1_html: 1. すべての利用可能なトリガーとパネルを囲む、<code>data-controller="accordion"</code> というデータ属性を持つラッパーの <code>div</code>。
           usage_p_2_html: <code>data-controls="panel"</code>によって折りたたみ可能となる要素を指定する、（ボタンとして）ユーザー操作可能なトリガー要素。ここで指定されている<i>panel</i>は対象となるパネルの<code>id</code>を指す。
           usage_p_3_html: 3. トリガーが指定するdata-controlsの値と一致する<code>id</code> を持つ非表示要素。
         activities:
@@ -185,7 +185,7 @@ ja:
         conference_s: カンファレンスS
         conferences: カンファレンス
         context: コンテキスト
-        context_description: このセルは、ユーザーに関する情報を表示します。これは、リソース/コンテンツクリエーターを識別するための視覚的なサポートです。マウスをホバーすると、さらに詳しい情報とそのプロフィールへのリンクが含まれたツールチップが表示されます。
+        context_description: このセルはユーザーに関する情報を表示します。リソースやコンテンツの作成者を視覚的に識別するための補助となります。
         context_description_2: リソースの場合、このセルはメインヘッダーの下に表示されます。その他のコンテンツの場合、コンテンツ自体の隣に表示されます。
         debate_l: ディベートL
         debate_s: ディベートS
@@ -206,7 +206,7 @@ ja:
         dropdowns_description_html: ドロップダウンは %{link} と呼ばれる外部ライブラリにより利用可能な javascriptの機能です。
         dropdowns_usage_1_description: 2. トリガーが参照するdata-target属性の値と一致する<code>id</code> を持つ非表示要素。
         dropdowns_usage_description: 'ドロップダウンには2つの要素が必要です:'
-        dropdowns_usage_description_html: 1. data-属性 <code>data-component="dropdown" data-target="dropdown-menu-element"</code> を持つ、ユーザーのアクションを受け付ける要素。
+        dropdowns_usage_description_html: 1. <code>data-controller="dropdown" data-target="dropdown-menu-element"</code> というデータ属性を持つ、ユーザーが操作可能な要素。
         dummy_description: Dummy resource description
         dummy_title: Dummy resource title
         follow_button: フォローボタン
@@ -294,6 +294,7 @@ ja:
         usage_typography_2: インラインテキスト
         usage_typography_3: ダーク背景上のテキスト
         usage_typography_4: リンクとボタン
+        usage_typography_5: 無効なタブ
         value: 値
         variations: バリエーション
         variations_cards_description: 表示されるリソースのプロパティに応じて、各カードの見た目は異なります。この振る舞いは特定のセルでオーバーライドすることができます。

data/config/locales/pl.yml

@@ -14,7 +14,6 @@ pl:
           trigger: Wyzwalacz
           usage: Użycie
           usage_p: Akordion wymaga co najmniej trzech elementów
-          usage_p_1_html: 1. Wrapper <code>div</code>, z atrybutem data-attribute <code>data-component="accordion"</code>, na wszystkich dostępnych wyzwalaczach i panelach.
           usage_p_2_html: 2. Element wyzwalający, z którego może skorzystać użytkownik (jak przez przycisk), wskazujący na zwijany element przez <code>data-controls="panel"</code>, gdzie <i>panel</i> jest <code>id</code> panelu.
           usage_p_3_html: 3. Ukrywany element, którego <code>id</code> odpowiada wartości data-controls, do której odnosi się wyzwalacz.
         activities:
@@ -185,7 +184,6 @@ pl:
         conference_s: Konferencja S
         conferences: Konferencje
         context: Kontekst
-        context_description: Ta komórka wyświetla informacje o użytkowniku. Jest to wizualna pomoc w identyfikacji twórcy zasobów/treści. Najechanie myszą wyświetla podpowiedź z dalszymi informacjami i linkami do jego lub jej profilu.
         context_description_2: W przypadku zasobów, ta komórka pojawia się pod głównym nagłówkiem. W przypadku innych treści pojawia się obok samej treści.
         debate_l: Debata L
         debate_s: Debata S
@@ -206,7 +204,6 @@ pl:
         dropdowns_description_html: Listy rozwijane są funkcją javascript dostępną dzięki bibliotece zewnętrznej o nazwie %{link}.
         dropdowns_usage_1_description: 2. Element ukryty, którego <code>id</code> odpowiada wartości docelowej danych, do której odnosi się wyzwalacz.
         dropdowns_usage_description: 'Lista rozwijana wymaga dwóch elementów:'
-        dropdowns_usage_description_html: 1. Element wywoływany przez użytkownika, z atrybutami danych <code>data-component="dropdown" data-target="dropdown-menu-element"</code>.
         dummy_description: Opis zasobu Dummy
         dummy_title: Tytuł zasobu Dummy
         follow_button: Przycisk podążania

data/config/locales/ro-RO.yml

@@ -12,7 +12,6 @@ ro:
           trigger: Declanșator
           usage: Utilizare
           usage_p: Un acordeon necesită cel puțin trei elemente
-          usage_p_1_html: 1. Un wrapper <code>div</code>, cu data-atributul <code>data-component="accordion"</code>, pentru toate declanșatoarele și panourile disponibile.
           usage_p_2_html: 2. Un element de declanșare, acționabil de utilizator (ca un buton), indicând către elementul de colaps prin intermediul <code>data-controls="panel"</code>, unde <i>panel</i> este <code>id</code> al panoului.
           usage_p_3_html: 3. Un element ascuns, al cărui <code>id</code> corespunde valorii controlului datelor la care se referă declanșatorul.
         activities:
@@ -43,3 +42,6 @@ ro:
           adjacent_links: Link-uri adiacente
           elements_hidden: Elemente ascunse
           elements_hidden_header: Elemente ascunse de API-ul de accesibilitate
+      helpers:
+        context_description: Această celulă afișează câteva informații despre un utilizator. Un ajutor vizual pentru identificarea creatorului de resurse/conținut.
+        usage_typography_5: Tab dezactivat

data/config/locales/sv.yml

@@ -2,6 +2,11 @@
 sv:
   decidim:
     design:
+      components:
+        accordions:
+          usage_p_1_html: 1. En wrapper <code>div</code>, med data-attributet <code>data-controller="dragspelsmeny"</code>, över alla tillgängliga rubriker och paneler.
       helpers:
         assembly_g: Samråd G
         assembly_s: Samråd S
+        context_description: Denna cell visar information om en användare. Det är en visuell hjälp för att identifiera resurs/innehållsskaparen.
+        dropdowns_usage_description_html: 1. Ett användarvänligt element, med data-attributen <code>data-controller="rullgardin" data-target="rullgardinsmeny-element"</code>.

data/config/locales/tr-TR.yml

@@ -55,7 +55,6 @@ tr:
         avatar_description: Yazarın ikincil bir bilgi olduğu alanlarda kullanılır.
         compact: "Yoğun\nSıkıştırılmış"
         context: İçerik
-        context_description: Bu hücre, bir kullanıcı hakkında bazı bilgileri görüntüler. Bu kaynağı/içerik üreticiyi tanımlamaya yönelik görsel bir yardımdır. Fare üzerine gelindiğinde, daha fazla bilgi ve profil bağlantıları içeren bir bilgi kutusu görüntülenir.
         context_description_2: Kaynaklar bu hücre ana başlığın altında görünür. Diğer içerikler ise içeriğin yanında görünür.
         default: Varsayılan
         demo: Gösteri

data/lib/decidim/design/engine.rb

@@ -27,7 +27,7 @@ module Decidim
         Cell::ViewModel.view_paths << File.expand_path("#{Decidim::Design::Engine.root}/app/views") # for partials
       end
 
-      initializer "decidim_design.webpacker.assets_path" do
+      initializer "decidim_design.shakapacker.assets_path" do
         Decidim.register_assets_path File.expand_path("app/packs", root)
       end
     end

data/lib/decidim/design/version.rb

@@ -3,7 +3,7 @@
 module Decidim
   module Design
     def self.version
-      "0.30.2"
+      "0.31.0.rc1"
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: decidim-design
 version: !ruby/object:Gem::Version
-  version: 0.30.2
+  version: 0.31.0.rc1
 platform: ruby
 authors:
 - Decidim Team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-23 00:00:00.000000000 Z
+date: 2025-09-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: decidim-core
@@ -16,28 +16,28 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.30.2
+        version: 0.31.0.rc1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.30.2
+        version: 0.31.0.rc1
 - !ruby/object:Gem::Dependency
   name: decidim-dev
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.30.2
+        version: 0.31.0.rc1
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 0.30.2
+        version: 0.31.0.rc1
 description: The design guide module for Decidim.
 email:
 - hola@decidim.org
@@ -115,6 +115,7 @@ files:
 - app/views/layouts/decidim/design/_layout.html.erb
 - app/views/layouts/decidim/design/application.html.erb
 - config/assets.rb
+- config/brakeman.ignore
 - config/locales/am-ET.yml
 - config/locales/ar.yml
 - config/locales/bg.yml