[FEATURE] Add bidi support

Author: benjaminkott

assets/js/main.js

@@ -1,16 +1,34 @@
-// Inplace Search
+// Inplace Search and BiDi Filter
 document.addEventListener("DOMContentLoaded", () => {
     let search = document.getElementById('search');
-    if (search) {
+    let bidiFilter = document.getElementById('bidiFilter');
+    let iconList = document.getElementById('iconlist');
+
+    if (search && iconList) {
         search.addEventListener('keyup', filterIcons);
+
+        if (bidiFilter) {
+            bidiFilter.addEventListener('change', filterIcons);
+        }
+
         function filterIcons() {
-            let searchWord = this.value.toLowerCase();
-            let iconList = document.getElementById('iconlist');
+            let searchWord = search.value.toLowerCase();
+            let showBidiOnly = bidiFilter ? bidiFilter.checked : false;
             let icons = iconList.querySelectorAll('[data-type="icon"]');
+
             for (let i = 0; i < icons.length; i++) {
                 let icon = icons[i];
                 let elementSearch = icon.dataset.search;
-                if (elementSearch.toLowerCase().indexOf(searchWord) > -1) {
+                let isBidi = icon.dataset.bidi === 'true';
+
+                // Check search filter
+                let matchesSearch = elementSearch.toLowerCase().indexOf(searchWord) > -1;
+
+                // Check BiDi filter
+                let matchesBidi = !showBidiOnly || isBidi;
+
+                // Show icon if it matches both filters
+                if (matchesSearch && matchesBidi) {
                     icon.style.display = 'flex';
                 } else {
                     icon.style.display = 'none';

assets/scss/docs/_icongrid.scss

@@ -25,3 +25,14 @@
     outline: none;
     color: var(--icongrid-color);
 }
+
+.icongrid-item-badge {
+    position: absolute;
+    top: 0;
+    right: 0;
+    font-size: 12px;
+    padding: 4px 6px;
+    line-height: 1;
+    border-radius: 0 4px 0 4px;
+    background-color: color-mix(in srgb, var(--icongrid-bg-color), var(--icongrid-color) 10%);
+}

assets/scss/icons.scss

@@ -105,6 +105,15 @@ $icon-opacity-disabled: .5 !default;
     }
 }
 
+//
+// BiDi Support
+//
+[dir="rtl"] .icon-bidi {
+    .icon-markup {
+        transform: scaleX(-1);
+    }
+}
+
 //
 // Variants
 //