@typo3/icons 4.3.2 → 4.4.0

package/src/actions/actions-bell-slash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <path d="M15.071106,13.6568604l-1.2749023-1.2748413c.1086426-.2526855.1201782-.5491943-.0198364-.8292236l-.6707764-1.3414917c-.069458-.138916-.1055908-.2919922-.1055908-.4472656v-2.7641602c0-2.7614136-2.2385864-5-5-5-1.2758179,0-2.4277954.4888916-3.3075562,1.2783813L2.3431396.9289551c-.1952515-.1952515-.5118408-.1952515-.7070923,0s-.1952515.5118408,0,.7070923l2.3762817,2.3762817v.000061l.708313.708313v-.000061l7.2793579,7.2793579.9862671.9862671,1.3776855,1.3776855c.1952515.1952515.5118408.1952515.7071533,0,.1952515-.1952515.1952515-.5118408,0-.7070923ZM5.3925171,3.9783325c.7002563-.6072388,1.6097412-.9784546,2.6074829-.9784546,2.2056274,0,4,1.7944336,4,4.0001221v2.7640381c0,.3088989.072998.6182251.2111816.8944702l.1384277.2769165L5.3925171,3.9783325Z"/>
+  <path d="M3.118042,12l.6707764-1.3414917c.1381836-.2762451.2111816-.5855713.2111816-.8944702v-2.7641602c0-.4716187.0966797-.9179077.2472534-1.3383789l-.7675781-.7675781c-.2998047.6419678-.4796753,1.350708-.4796753,2.105957v2.7641602c0,.1552734-.0361328.3083496-.1055908.4472656l-.6707764,1.3414917c-.3324585.664856.151062,1.4472046.8944092,1.4472046h2.881958c0,1.1045532.8954468,2,2,2s2-.8954468,2-2h1.5857544l-1-1H3.118042ZM8,14c-.5513916,0-1-.4486084-1-1h2c0,.5513916-.4486084,1-1,1Z"/>
+</g>
+</svg>

package/src/actions/actions-bell.svg

@@ -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.7763672,11.5527954l-.6707764-1.3414917c-.069458-.138916-.1055908-.2919922-.1055908-.4472656v-2.7641602c0-2.7614136-2.2385864-5-5-5S3,4.2384644,3,6.9998779v2.7641602c0,.1552734-.0361328.3083496-.1055908.4472656l-.6707764,1.3414917c-.3324585.664856.151062,1.4472046.8944092,1.4472046h2.881958c0,1.1045532.8954468,2,2,2s2-.8954468,2-2h2.881958c.7433472,0,1.2268677-.7823486.8944092-1.4472046ZM8,14c-.5513916,0-1-.4486084-1-1h2c0,.5513916-.4486084,1-1,1ZM3.118042,12l.6707764-1.3414917c.1381836-.2762451.2111816-.5855713.2111816-.8944702v-2.7641602c0-2.2056274,1.7943726-4,4-4s4,1.7944336,4,4.0001221v2.7640381c0,.3088989.072998.6182251.2111816.8944702l.6707764,1.3414917H3.118042Z"/>
+</g>
+</svg>

package/src/actions/actions-brand-google.svg

@@ -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.616864283310861,5.752896632469856h-6.592717950995393v2.710915305397066h3.767261851916373c-.833546710324299,3.872207561627874-6.6607253319753,3.511094754087026-7.687244762073533-.101839932529401h-.008311878550558c.000271883876849-.000194202766579.008311878550558-.006369850852934.008311878550558-.006369850852934C1.726357851571265,4.498255506276109,6.612011965030433.970463714079415,9.703251224003907,3.856545425083823l2.004522150215053-2.004560990767459C6.020626859243748-3.323457249892272-2.64383037083644,3.285213907151046.775050762357751,10.16289197160404v.006369850849296c3.743065816678609,7.023387269127852,14.408893745931891,3.830170286533757,12.84181352095311-4.41636518998348Z"/>
+</g>
+</svg>

package/src/actions/actions-bullhorn-slash.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <path d="M1.9897138.7828827c-.1279601,0-.2559201.0488119-.3535451.1464376-.19525.1952496-.19525.5118399,0,.7070894l12.7279098,12.7279103c.0976248.097625.225585.1464375.3535528.1464375s.2559423-.0488125.3535976-.1464375c.1952496-.1952499.1952496-.5118399,0-.7070899l-1.724-1.7240002c.3663301-.13727.65277-.4795599.65277-.93329V3.4142504c0-.6027164-.4930525-1.0019608-1.0070848-1.0019608h-.0001154c-.2457304,0-.4962196.0911903-.6998901.2948608l-.82831.82831c-.9376802.9377499-2.2094698,1.4645395-3.5355802,1.4645395h-1.51508L2.3432586.9293203c-.0976248-.0976257-.225585-.1464376-.3535448-.1464376h0ZM12.999999,10.9999399l-1.0665302-.79987c-.2586002-.1939697-.5368605-.3563199-.8229303-.50354l-3.6966-3.6965299h.51508c1.6027198,0,3.1094298-.6241503,4.2426705-1.7574501l.82831-.8274498v7.5848398h0Z"/>
+  <path d="M3.596555,5h-.59655c-.55231,0-1,.44769-1,1v3c0,.55231.44769,1,1,1h.9999998v2.5c0,.2761199.2238703.5.5.5h2c.2761202,0,.5-.2238801.5-.5v-2.5h1.3334303c.0963697,0,.1904898.01758.2862501.0231299l-1.0231304-1.0231299h-.59655v-.59656l-1-.9999995v1.5965595h-2.9999998v-3h1.5965497l-.9999998-1h0ZM5.0000048,12v-2h1v2h-1Z"/>
+</g>
+</svg>

package/src/actions/actions-bullhorn.svg

@@ -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="M12.9929161,2.4122953h-.0001163c-.2457294,0-.4962196.0911808-.6998901.2948608l-.82831.82831c-.9376793.9377394-2.2094698,1.46453-3.5355797,1.46453H3c-.55231,0-1,.4476995-1,1v2.9999995c0,.55231.44769,1,1,1h1v2.5c0,.27613.2238798.5.5.5h2c.2761202,0,.5-.22387.5-.5v-2.5h1.3334398c1.0818405,0,2.1345806.3509002,3.0000601,1.0000701l1.0664597.79986c.1854906.1391001.3931904.2018399.5959501.2018399.5181303,0,1.0040903-.4095402,1.0040903-1.0018301V3.4142456c0-.602706-.4930515-1.0019503-1.0070839-1.0019503h0ZM7,8.9999957v-2.9999995h.9290199c1.6027203,0,3.1094303-.6241407,4.2426701-1.7574406l.82831-.8274603v7.5848403l-1.0665302-.79986c-1.0317402-.77387-2.3102999-1.2000799-3.6000299-1.2000799h-1.3334398ZM3,8.9999957v-2.9999995h3v2.9999995h-3ZM5,11.9999957v-2h1v2h-1Z"/>
+</g>
+</svg>

package/src/actions/actions-copyright.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <path d="M8,2c3.3000002,0,6,2.6999998,6,6s-2.6999998,6-6,6-6-2.6999998-6-6,2.6999998-6,6-6M8,1c-3.9000001,0-7,3.0999999-7,7s3.0999999,7,7,7,7-3.1000004,7-7S11.8999996,1,8,1h0Z"/>
+  <path d="M8,10.5c-1.3807373,0-2.5-1.1192627-2.5-2.5s1.1192627-2.5,2.5-2.5c.6900024,0,1.3146362.2796631,1.7670288.7316284l1.0601807-1.0610352c-.7237549-.7232056-1.7232056-1.1705933-2.8272095-1.1705933-2.2091675,0-4,1.7908325-4,4s1.7908325,4,4,4c1.1046143,0,2.1045532-.4476929,2.8284302-1.1715698l-1.0606689-1.0606689c-.4524536.4523926-1.0773926.7322388-1.7677612.7322388Z"/>
+</g>
+</svg>

package/src/actions/actions-line-columns.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <rect x="2" y="2" width="5" height="2"/>
+  <rect x="2" y="5" width="5" height="1"/>
+  <rect x="2" y="7" width="5" height="1"/>
+  <rect x="2" y="9" width="5" height="1"/>
+  <rect x="2" y="11" width="5" height="1"/>
+  <rect x="2" y="13" width="5" height="1"/>
+  <rect x="9" y="2" width="5" height="2"/>
+  <rect x="9" y="5" width="5" height="1"/>
+  <rect x="9" y="7" width="5" height="1"/>
+  <rect x="9" y="9" width="5" height="1"/>
+  <rect x="9" y="11" width="5" height="1"/>
+  <rect x="9" y="13" width="5" height="1"/>
+</g>
+</svg>

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

@@ -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

@@ -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/src/actions/actions-text-indent.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 16 16">
+<g fill="currentColor">
+  <rect x="9" y="2" width="5" height="2"/>
+  <rect x="9" y="5" width="5" height="1"/>
+  <rect x="9" y="7" width="5" height="1"/>
+  <rect x="9" y="9" width="5" height="1"/>
+  <rect x="9" y="11" width="5" height="1"/>
+  <rect x="9" y="13" width="5" height="1"/>
+  <rect x="7" y="2" width="1" height="12" opacity=".5"/>
+  <path d="M2.2999372,9.9999371c0,.3999996.5.6000004.8000002.3999996l2.6999368-1.999937c.1999998-.1999998.1999998-.5999999,0-.8000002l-2.6999368-1.999937c-.3000002-.1999993-.8000002.0000005-.8000002.4000006v3.999874Z"/>
+</g>
+</svg>

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

@@ -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

@@ -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/_makros.html.twig

@@ -1,3 +1,6 @@
 {% macro codeblock(markup, language = 'html') %}
-    <pre class="p-3 rounded bg-adapt-light"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    <div class="code-container position-relative">
+        <button class="btn btn-default btn-sm code-copy-btn" aria-label="Copy code" title="Copy">Copy</button>
+        <pre class="p-3 rounded bg-adapt-light code-block"><code class="language-{{ language }}">{{ markup|trim|escape }}</code></pre>
+    </div>
 {% endmacro %}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,38 +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
-tags: []

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

@@ -1,38 +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
-tags: []

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

@@ -1,39 +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
-tags: []

package/meta/actions/actions-caret-right.yaml

@@ -1,43 +0,0 @@
-alias:
-  - actions-move-right
-  - actions-pagetree-collapse
-  - status-status-current
-  - apps-irre-collapsed
-  - apps-pagetree-collapse
-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
-tags: []