npm - @typo3/icons - Versions diffs - 4.3.3 → 4.4.1 - Mend

@typo3/icons 4.3.3 → 4.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (875) hide show

package/src/actions/actions-arrow-down-end.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M13.512,9.389l-3.7,2.96C9.485,12.611,9,12.378,9,11.959V6.04c0-0.419,0.485-0.652,0.812-0.39l3.7,2.959
+		C13.762,8.809,13.762,9.189,13.512,9.389z"/>
+	<polygon points="3,4 3,10 10,10 10,8 5,8 5,4 	"/>
+</g>
+</svg>

package/src/actions/actions-arrow-down-start-alt.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M8.157,12.95c0.391-0.391,0.391-1.024,0-1.414L5.621,9L13,9c0.552,0,1-0.448,1-1l0-5c0-0.552-0.448-1-1-1h0
+		c-0.552,0-1,0.448-1,1l0,4L5.621,7l2.536-2.536c0.391-0.391,0.391-1.024,0-1.414s-1.024-0.39-1.414,0L3.207,6.586L2.5,7.293
+		c-0.39,0.39-0.39,1.024,0,1.414l0.707,0.707l3.536,3.536C7.133,13.34,7.766,13.34,8.157,12.95z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-down-start.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M2.488,8.609l3.7-2.959C6.515,5.388,7,5.621,7,6.04v5.919c0,0.419-0.485,0.652-0.812,0.39l-3.7-2.96
+		C2.238,9.189,2.238,8.809,2.488,8.609z"/>
+	<polygon points="11,4 11,8 6,8 6,10 13,10 13,4 	"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end-alt.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M7.843,3.05L7.843,3.05c-0.391,0.391-0.391,1.024,0,1.414L10.379,7H3C2.448,7,2,7.448,2,8l0,0c0,0.552,0.448,1,1,1h7.379
+		l-2.536,2.536c-0.391,0.391-0.391,1.024,0,1.414l0,0c0.391,0.39,1.024,0.39,1.414,0l3.536-3.536L13.5,8.707
+		c0.391-0.391,0.391-1.024,0-1.414l-0.707-0.707L9.257,3.05C8.867,2.66,8.234,2.66,7.843,3.05z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end-down-alt.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M12.95,7.843c-0.391-0.391-1.024-0.391-1.414,0L9,10.379V3c0-0.552-0.448-1-1-1H3C2.448,2,2,2.448,2,3l0,0
+		c0,0.552,0.448,1,1,1h4v6.379L4.464,7.843c-0.391-0.391-1.024-0.391-1.414,0c-0.39,0.391-0.39,1.024,0,1.414l3.536,3.536
+		L7.293,13.5c0.39,0.39,1.024,0.39,1.414,0l0.707-0.707l3.536-3.536C13.34,8.867,13.34,8.234,12.95,7.843z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end-down.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M8.609,13.512l-2.959-3.7C5.388,9.485,5.621,9,6.04,9h5.919c0.419,0,0.652,0.485,0.39,0.812l-2.96,3.7
+		C9.189,13.762,8.809,13.762,8.609,13.512z"/>
+	<polygon points="4,5 8,5 8,10 10,10 10,3 4,3 	"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end-up-alt.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M12.95,8.157c-0.391,0.391-1.024,0.391-1.414,0L9,5.621V13c0,0.552-0.448,1-1,1H3c-0.552,0-1-0.448-1-1l0,0
+		c0-0.552,0.448-1,1-1h4V5.621L4.464,8.157c-0.391,0.391-1.024,0.391-1.414,0s-0.39-1.024,0-1.414l3.536-3.536L7.293,2.5
+		c0.39-0.39,1.024-0.39,1.414,0l0.707,0.707l3.536,3.536C13.34,7.133,13.34,7.766,12.95,8.157z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end-up.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M9.391,2.488l2.959,3.7C12.612,6.515,12.379,7,11.96,7H6.04C5.621,7,5.388,6.515,5.65,6.188l2.96-3.7
+		C8.811,2.238,9.191,2.238,9.391,2.488z"/>
+	<polygon points="4,11 8,11 8,6 10,6 10,13 4,13 	"/>
+</g>
+</svg>

package/src/actions/actions-arrow-end.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M2,9h7.3v2c0,0.4,0.5,0.6,0.8,0.4l3.7-3c0.2-0.2,0.2-0.6,0-0.8l-3.7-3C9.8,4.4,9.3,4.6,9.3,5v2H2V9z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-start-alt.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M8.157,12.95L8.157,12.95c0.391-0.391,0.391-1.024,0-1.414L5.621,9L13,9c0.552,0,1-0.448,1-1v0c0-0.552-0.448-1-1-1
+		L5.621,7l2.536-2.536c0.391-0.391,0.391-1.024,0-1.414l0,0c-0.391-0.39-1.024-0.39-1.414,0L3.207,6.586L2.5,7.293
+		c-0.391,0.391-0.391,1.024,0,1.414l0.707,0.707l3.536,3.536C7.133,13.34,7.766,13.34,8.157,12.95z"/>
+</g>
+</svg>

package/src/actions/actions-arrow-start.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M14,7H6.7V5c0-0.4-0.5-0.6-0.8-0.4l-3.7,3C2,7.8,2,8.2,2.2,8.4l3.7,3c0.3,0.3,0.8,0,0.8-0.4V9H14V7z"/>
+</g>
+</svg>

package/src/actions/actions-aspect-ratio.svg ADDED Viewed

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <path d="M13,4c.5514002,0,1,.4485998,1,1v6c0,.5514002-.4485998,1-1,1H3c-.5513999,0-1-.4485998-1-1v-6c0-.5514002.4486001-1,1-1h10M13,3H3c-1.10457,0-2,.8954296-2,2v6c0,1.1045699.89543,2,2,2h10c1.1045704,0,2-.8954301,2-2v-6c0-1.1045704-.8954296-2-2-2h0Z"/>
+  <path d="M6,5h-2.5c-.276123,0-.5.223877-.5.5v2.5h1v-2h2v-1Z"/>
+  <path d="M12,8v2h-2v1h2.5c.276123,0,.5-.223877.5-.5v-2.5h-1Z"/>
+</g>
+</svg>

package/src/actions/actions-menu-sidebar-collapsed.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M13,2H3c-1.1045532,0-2,.8954468-2,2v8c0,1.1045532.8954468,2,2,2h10c1.1045532,0,2-.8954468,2-2V4c0-1.1045532-.8954468-2-2-2ZM4,10.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,8.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,6.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,4.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM14,12c0,.5513916-.4486084,1-1,1h-7V3h7c.5513916,0,1,.4486084,1,1v8Z"/>
+</g>
+</svg>

package/src/actions/actions-menu-sidebar-expanded.svg ADDED Viewed

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+	<path d="M13,2H3c-1.1045532,0-2,.8954468-2,2v8c0,1.1045532.8954468,2,2,2h10c1.1045532,0,2-.8954468,2-2V4c0-1.1045532-.8954468-2-2-2ZM4,10.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,8.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,6.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM4,4.75c0,.1380615-.1119385.25-.25.25h-.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h.5c.1380615,0,.25.1119385.25.25v.5ZM8,10.75c0,.1380615-.1119385.25-.25.25h-2.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h2.5c.1380615,0,.25.1119385.25.25v.5ZM8,8.75c0,.1380615-.1119385.25-.25.25h-2.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h2.5c.1380615,0,.25.1119385.25.25v.5ZM8,6.75c0,.1380615-.1119385.25-.25.25h-2.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h2.5c.1380615,0,.25.1119385.25.25v.5ZM8,4.75c0,.1380615-.1119385.25-.25.25h-2.5c-.1380615,0-.25-.1119385-.25-.25v-.5c0-.1380615.1119385-.25.25-.25h2.5c.1380615,0,.25.1119385.25.25v.5ZM14,12c0,.5513916-.4486084,1-1,1h-3V3h3c.5513916,0,1,.4486084,1,1v8Z"/>
+</g>
+</svg>

package/tmpl/html/docs/_filters.html.twig ADDED Viewed

@@ -0,0 +1,9 @@
+<div class="d-flex flex-nowrap ms-auto gap-4 align-items-center">
+    <div class="form-check form-switch mb-0">
+        <input class="form-check-input" type="checkbox" id="bidiFilter" autocomplete="off">
+        <label class="form-check-label" for="bidiFilter" title="Show only icons with BiDi support">
+            BiDi
+        </label>
+    </div>
+    <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
+</div>

package/tmpl/html/docs/_icon.html.twig CHANGED Viewed

@@ -3,7 +3,7 @@
 {%- set iconSize = iconSize ?? 'auto' -%}
 {%- set iconSpinning = iconSpinning ?? false -%}
 {% if icon %}
-<span class="icon icon-size-{{ iconSize }} icon-state-default{% if iconSpinning %} icon-spin{% endif %}">
+<span class="icon icon-size-{{ iconSize }} icon-state-default{% if iconSpinning %} icon-spin{% endif %}{% if icon._meta.bidi %} icon-bidi{% endif %}">
     <span class="icon-markup">
         {% include '_symbol.html.twig' with { icon: icon } %}
     </span>

package/tmpl/html/docs/guide.html.twig CHANGED Viewed

@@ -163,6 +163,67 @@
     <hr class="my-4">
+    <h3>BiDi (Bidirectional) Support</h3>
+    <p>
+        This icon set includes logical icon variants that support bidirectional languages (Arabic, Hebrew, etc.).
+    </p>
+    <dl>
+        <dt>Logical Icons</dt>
+        <dd>Use <code>-start</code>/<code>-end</code> for navigation and reading direction (previous/next, back/forward)</dd>
+        <dt>Physical Icons</dt>
+        <dd>Use <code>-left</code>/<code>-right</code> for absolute positioning (west/east, align left/right)</dd>
+        <dt>Implementation</dt>
+        <dd>Icons with <code>bidi: true</code> automatically receive the <code>icon-bidi</code> class and flip in RTL mode</dd>
+        <dt>Example</dt>
+        <dd>
+            <div class="row my-3">
+                <div class="col-md-6">
+                    <strong>LTR (Left-to-Right)</strong>
+                    <div dir="ltr" class="mt-2">
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: 'actions-chevron-start',
+                                iconSize: 'small'
+                            } -%}
+                            Previous
+                        </span>
+                        <span class="btn btn-default">
+                            Next
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: 'actions-chevron-end',
+                                iconSize: 'small'
+                            } -%}
+                        </span>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <strong>RTL (Right-to-Left)</strong>
+                    <div dir="rtl" class="mt-2">
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: 'actions-chevron-start',
+                                iconSize: 'small'
+                            } -%}
+                            السابق
+                        </span>
+                        <span class="btn btn-default">
+                            التالي
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: 'actions-chevron-end',
+                                iconSize: 'small'
+                            } -%}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </dd>
+    </dl>
+    <hr class="my-4">
     <h3>Module Icons</h3>
     <dl>
         <dt>Size</dt>
@@ -187,9 +248,24 @@ npm run site-serve
     ', 'bash') }}
     <h3>Release</h3>
     {{ makros.codeblock('
 npm version [major | minor | patch]
+git push origin main --tags
 npm publish
     ', 'bash') }}
+    <hr class="my-4">
+    <h4>Commit Message Convention</h4>
+    <p>This project follows a commit message convention where each commit should be prefixed with a type:</p>
+    <ul>
+        <li><code>[FEATURE]</code> - New features or functionality</li>
+        <li><code>[BUGFIX]</code> - Bug fixes</li>
+        <li><code>[TASK]</code> - General maintenance tasks (refactoring, dependencies, etc.)</li>
+        <li><code>[DOCS]</code> - Documentation changes</li>
+        <li><code>[!!!]</code> or <code>[BREAKING]</code> - Breaking changes</li>
+    </ul>
+    <p>The automated changelog generation categorizes commits based on these prefixes. Release commits with <code>[RELEASE]</code> prefix are automatically excluded from the changelog.</p>
 {% endblock %}

package/tmpl/html/docs/index.html.twig CHANGED Viewed

@@ -8,33 +8,41 @@
         </ul>
     </nav>
-    <div class="d-flex mb-4">
+    <div class="d-flex mb-4 align-items-center">
         <h2 class="mb-0">Icons</h2>
-        <form class="d-flex flex-nowrap ms-auto">
-            <label for="search" class="sr-only">Search for icons</label>
-            <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
-        </form>
+        {%- include '_filters.html.twig' -%}
     </div>
     <div class="icongrid" id="iconlist">
-        {%- for categoryItem in categories -%}
-            {%- for iconIdentifier in categoryItem.icons -%}
+        {%- for category in categories -%}
+            {%- for iconIdentifier in category.icons -%}
                 {%- set icon = icons[iconIdentifier] -%}
-                <a class="icongrid-item" data-type="icon" data-identifier="{{ icon.identifier }}" data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}" href="{{ pathPrefix }}icons/{{ categoryItem.identifier }}/{{ icon.identifier }}.html" title="{{ icon.identifier }}">
-                    {%- if not categoryItem.rendering.overlay -%}
+                    <a
+                        class="icongrid-item"
+                        data-type="icon"
+                        data-identifier="{{ icon.identifier }}"
+                        data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}"
+                        {% if icon._meta.bidi %}data-bidi="true"{% endif %}
+                        href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html"
+                        title="{{ icon.identifier }}"
+                    >
+                    {%- if not category.rendering.overlay -%}
                         {%- include '_icon.html.twig' with {
                             iconIdentifier: iconIdentifier,
                             iconSize: 'medium',
-                            iconSpinning: categoryItem.rendering.spinning
+                            iconSpinning: category.rendering.spinning
                         } -%}
                     {%- else -%}
                         {%- include '_icon.html.twig' with {
                             iconIdentifier: 'apps-pagetree-page',
                             iconOverlayIdentifier: iconIdentifier,
                             iconSize: 'medium',
-                            iconSpinning: categoryItem.rendering.spinning
+                            iconSpinning: category.rendering.spinning
                         } -%}
                     {%- endif -%}
+                    {%- if icon._meta.bidi -%}
+                        <span class="icongrid-item-badge" title="BiDi support - flips in RTL">BiDi</span>
+                    {%- endif -%}
                 </a>
             {%- endfor -%}
         {%- endfor -%}

package/tmpl/html/docs/section.html.twig CHANGED Viewed

@@ -9,17 +9,23 @@
         </ol>
     </nav>
-    <div class="d-flex mb-4">
+    <div class="d-flex mb-4 align-items-center">
         <h2 class="mb-0">{{ category.title }}</h2>
-        <form class="d-flex flex-nowrap ms-auto">
-            <input class="form-control search mb-0" id="search" placeholder="Start typing to filter..." autocomplete="off">
-        </form>
+        {%- include '_filters.html.twig' -%}
     </div>
     <div class="icongrid" id="iconlist">
         {%- for iconIdentifier in category.icons -%}
             {%- set icon = icons[iconIdentifier] -%}
-            <a class="icongrid-item" data-type="icon" data-identifier="{{ icon.identifier }}" data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}" href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html" title="{{ icon.identifier }}">
+            <a
+                class="icongrid-item"
+                data-type="icon"
+                data-identifier="{{ icon.identifier }}"
+                data-search="{{ icon.identifier }} {{ icon._meta.tags|join(' ') }}"
+                {% if icon._meta.bidi %}data-bidi="true"{% endif %}
+                href="{{ pathPrefix }}icons/{{ category.identifier }}/{{ icon.identifier }}.html"
+                title="{{ icon.identifier }}"
+            >
                 {%- if not category.rendering.overlay -%}
                     {%- include '_icon.html.twig' with {
                         iconIdentifier: iconIdentifier,
@@ -34,6 +40,9 @@
                         iconSpinning: category.rendering.spinning
                     } -%}
                 {%- endif -%}
+                {%- if icon._meta.bidi -%}
+                    <span class="icongrid-item-badge" title="BiDi support - flips in RTL">BiDi</span>
+                {%- endif -%}
             </a>
         {%- endfor -%}
     </div>

package/tmpl/html/docs/single.html.twig CHANGED Viewed

@@ -14,7 +14,17 @@
     <div class="mb-4">
         <h1 class="h2 mb-2">{{ icon.identifier }}</h1>
         <div class="d-sm-flex">
-            <div class="my-2 flex-grow-1">{% if icon._meta.tags|length > 0 %}<strong>Tags:</strong> {{ icon._meta.tags|join(', ') }}{% endif %}</div>
+            <div class="my-2 flex-grow-1">
+                {%- if icon._meta.tags|length > 0 -%}
+                    <strong>Tags:</strong>
+                    {{ icon._meta.tags|join(', ') }}
+                {%- endif -%}
+            </div>
+            {%- if icon._meta.bidi -%}
+                <div class="my-2">
+                    <span class="badge bg-primary" title="This icon automatically flips in right-to-left (RTL) languages">BiDi</span>
+                </div>
+            {%- endif -%}
             {%- if icon._meta.changes|length > 0 -%}
                 <div class="my-2 ms-sm-3">Introduced in <a href="https://github.com/TYPO3/TYPO3.Icons/releases/tag/v{{ icon._meta.changes.0 }}" target="_blank" rel="noopener">v{{ icon._meta.changes.0 }}</a></div>
                 {%- set available = false -%}
@@ -132,6 +142,72 @@
         </div>
     {%- endif -%}
+    {%- if category.rendering.buttons and icon._meta.bidi -%}
+        <div class="section">
+            <h2 class="mb-3">BiDi Comparison (LTR vs RTL)</h2>
+            <div class="row">
+                <div class="col-md-6" dir="ltr">
+                    <h3 class="h5 mb-3">LTR (Left-to-Right)</h3>
+                    <p>
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                        </span>
+                        <span class="btn btn-dark">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                        </span>
+                    </p>
+                    <p>
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                            Next
+                        </span>
+                    </p>
+                </div>
+                <div class="col-md-6" dir="rtl">
+                    <h3 class="h5 mb-3">RTL (Right-to-Left)</h3>
+                    <p>
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                        </span>
+                        <span class="btn btn-dark">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                        </span>
+                    </p>
+                    <p>
+                        <span class="btn btn-default">
+                            {%- include '_icon.html.twig' with {
+                                iconIdentifier: icon.identifier,
+                                iconSize: 'small',
+                                iconSpinning: category.rendering.spinning
+                            } -%}
+                            التالي
+                        </span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    {%- endif -%}
     {%- if category.rendering.overlay -%}
         <div class="section">
             <div class="preview">
@@ -159,10 +235,26 @@
     <div class="section">
         <h2 class="mb-3">Usage</h2>
+        {%- if icon._meta.bidi -%}
+        <div class="alert alert-info">
+            <strong>BiDi Support:</strong> This icon uses logical naming (start/end instead of left/right) and is designed for bidirectional support.
+            See the usage examples below for implementation details.
+        </div>
+        {%- endif -%}
+        <h3 class="my-3">Icon Identifier</h3>
+        {{ makros.codeblock(icon.identifier) }}
         <h3 class="my-3">Markup</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Raw SVG cannot be flipped. Use inline or sprite methods for BiDi support.</p>
+        {%- endif -%}
         {{ makros.codeblock(icon._inline, 'svg') }}
         <h3 class="my-3">Inline</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">✓ BiDi supported - Icon will flip in RTL mode when using the <code>icon-bidi</code> class</p>
+        {%- endif -%}
         {%- set inlineusage -%}
             {%- if not category.rendering.overlay -%}
                 {%- include '_icon.html.twig' with {
@@ -186,6 +278,9 @@
         {{ makros.codeblock(inlineusage) }}
         <h3 class="my-3">Sprite</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">✓ BiDi supported - Icon will flip in RTL mode when using the <code>icon-bidi</code> class</p>
+        {%- endif -%}
         {%- set spriteusage -%}
             {%- if not category.rendering.overlay -%}
                 {%- include '_icon.html.twig' with {
@@ -207,13 +302,29 @@
         {{ makros.codeblock(spriteusage) }}
         <h3 class="my-3">TYPO3 ViewHelper</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">✓ BiDi supported</p>
+        {%- endif -%}
         {%- if category.rendering.overlay -%}
             {{ makros.codeblock('<core:icon identifier="apps-pagetree-page" overlay="' ~ icon.identifier ~ '" size="small" />') }}
         {%- else -%}
             {{ makros.codeblock('<core:icon identifier="' ~ icon.identifier ~ '" size="small" />') }}
         {%- endif -%}
+        <h3 class="my-3">TYPO3 Web Component</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">✓ BiDi supported</p>
+        {%- endif -%}
+        {%- if category.rendering.overlay -%}
+            {{ makros.codeblock('<typo3-backend-icon identifier="apps-pagetree-page" overlay="' ~ icon.identifier ~ '" size="small"></typo3-backend-icon>') }}
+        {%- else -%}
+            {{ makros.codeblock('<typo3-backend-icon identifier="' ~ icon.identifier ~ '" size="small"></typo3-backend-icon>') }}
+        {%- endif -%}
         <h3 class="my-3">CSS Background Image</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.</p>
+        {%- endif -%}
         {%- set cssbackgroundimageusage -%}
 .myclass {
     background-size: 1em 1em;
@@ -223,6 +334,9 @@
         {{ makros.codeblock(cssbackgroundimageusage) }}
         <h3 class="my-3">Sass Background Variable</h3>
+        {%- if icon._meta.bidi -%}
+        <p class="text-muted small mb-2">⚠ BiDi NOT supported - Background images cannot be flipped with CSS. Use inline or sprite methods for BiDi support.</p>
+        {%- endif -%}
         {%- set sassbackgroundvariable -%}
 @import "@typo3/icons/dist/icons.scss";
 @import "@typo3/icons/dist/scss/icons-variables-{{ icon.category }}.scss";

package/meta/actions/actions-caret-bar-left.yaml DELETED Viewed

@@ -1,40 +0,0 @@
-alias: []
-changes:
-  - 2.0.0
-  - 2.0.1
-  - 2.0.2
-  - 2.0.3
-  - 2.0.4
-  - 2.0.5
-  - 2.1.0
-  - 2.1.1
-  - 2.2.0
-  - 2.2.1
-  - 2.2.2
-  - 2.2.3
-  - 2.3.0
-  - 2.3.1
-  - 2.3.2
-  - 2.4.0
-  - 2.4.1
-  - 2.5.0
-  - 2.6.0
-  - 3.0.0
-  - 3.1.0
-  - 3.1.1
-  - 3.1.2
-  - 3.1.3
-  - 3.2.0
-  - 3.3.0
-  - 3.3.1
-  - 3.4.0
-  - 3.5.0
-  - 3.6.0
-  - 3.6.1
-  - 4.0.0
-  - 4.1.0
-  - 4.2.0
-  - 4.3.0
-  - 4.3.1
-  - 4.3.2
-tags: []

package/meta/actions/actions-caret-bar-right.yaml DELETED Viewed

@@ -1,40 +0,0 @@
-alias: []
-changes:
-  - 2.0.0
-  - 2.0.1
-  - 2.0.2
-  - 2.0.3
-  - 2.0.4
-  - 2.0.5
-  - 2.1.0
-  - 2.1.1
-  - 2.2.0
-  - 2.2.1
-  - 2.2.2
-  - 2.2.3
-  - 2.3.0
-  - 2.3.1
-  - 2.3.2
-  - 2.4.0
-  - 2.4.1
-  - 2.5.0
-  - 2.6.0
-  - 3.0.0
-  - 3.1.0
-  - 3.1.1
-  - 3.1.2
-  - 3.1.3
-  - 3.2.0
-  - 3.3.0
-  - 3.3.1
-  - 3.4.0
-  - 3.5.0
-  - 3.6.0
-  - 3.6.1
-  - 4.0.0
-  - 4.1.0
-  - 4.2.0
-  - 4.3.0
-  - 4.3.1
-  - 4.3.2
-tags: []

package/meta/actions/actions-caret-left.yaml DELETED Viewed

@@ -1,41 +0,0 @@
-alias:
-  - actions-move-left
-changes:
-  - 2.0.0
-  - 2.0.1
-  - 2.0.2
-  - 2.0.3
-  - 2.0.4
-  - 2.0.5
-  - 2.1.0
-  - 2.1.1
-  - 2.2.0
-  - 2.2.1
-  - 2.2.2
-  - 2.2.3
-  - 2.3.0
-  - 2.3.1
-  - 2.3.2
-  - 2.4.0
-  - 2.4.1
-  - 2.5.0
-  - 2.6.0
-  - 3.0.0
-  - 3.1.0
-  - 3.1.1
-  - 3.1.2
-  - 3.1.3
-  - 3.2.0
-  - 3.3.0
-  - 3.3.1
-  - 3.4.0
-  - 3.5.0
-  - 3.6.0
-  - 3.6.1
-  - 4.0.0
-  - 4.1.0
-  - 4.2.0
-  - 4.3.0
-  - 4.3.1
-  - 4.3.2
-tags: []