/* ============================================
   RSL Icon Picker Component
   Version: 1.0.0
   Description: Premium accessible icon picker with
   support for Font Awesome and RSL icon libraries,
   full keyboard navigation, virtualization, and
   WCAG 2.1 AA compliance.
   ============================================ */

(function() {
    'use strict';

    // Initialize RSL namespace
    window.RSL = window.RSL || {};

    /**
     * Icon Picker Component
     * A fully accessible icon picker supporting Font Awesome and RSL icons
     */
    window.RSL.IconPicker = {

        /** Store all initialized instances */
        instances: new Map(),

        /** Default configuration */
        defaults: {
            sources: 'all',                 // Available sources: 'all', 'fontawesome', 'fa', 'rsl', or comma-separated
            defaultSource: 'all',           // Default filter: 'all', 'fa', 'rsl'
            defaultCategory: 'all',         // Category filter
            showRecent: true,               // Show recently used section
            showPreview: true,              // Show preview panel
            showLabels: true,               // Show text labels under icons
            showBadges: true,               // Show source badges
            columns: 8,                     // Icons per row (desktop)
            inline: false,                  // Inline or popup mode
            filterKey: null,                // FilterBus integration key
            placeholder: 'Select an icon',
            value: null,                    // Pre-selected icon
            disabled: false,
            maxRecent: 8,                   // Max recent icons
            recentStorageKey: 'rsl-icon-picker-recent',
            closeOnSelect: false,           // Close picker on selection
            ariaLabel: 'Icon picker',
            rslIconsPath: null              // Path to RSL icons SVG sprite (auto-detected if null)
        },

        /** Icon categories */
        categories: {
            all: 'All Icons',
            social: 'Social & Brands',
            navigation: 'Navigation',
            actions: 'Actions',
            communication: 'Communication',
            media: 'Media',
            data: 'Data & Files',
            user: 'User & People',
            interface: 'Interface',
            status: 'Status',
            objects: 'Objects',
            symbols: 'Symbols'
        },

        /** Font Awesome icon manifest (free solid icons - popular subset) */
        faIcons: [
            // Navigation
            { id: 'fa-arrow-up', name: 'Arrow Up', keywords: ['up', 'direction'], category: 'navigation', class: 'fas fa-arrow-up' },
            { id: 'fa-arrow-down', name: 'Arrow Down', keywords: ['down', 'direction'], category: 'navigation', class: 'fas fa-arrow-down' },
            { id: 'fa-arrow-left', name: 'Arrow Left', keywords: ['left', 'back', 'direction'], category: 'navigation', class: 'fas fa-arrow-left' },
            { id: 'fa-arrow-right', name: 'Arrow Right', keywords: ['right', 'forward', 'direction'], category: 'navigation', class: 'fas fa-arrow-right' },
            { id: 'fa-chevron-up', name: 'Chevron Up', keywords: ['up', 'expand'], category: 'navigation', class: 'fas fa-chevron-up' },
            { id: 'fa-chevron-down', name: 'Chevron Down', keywords: ['down', 'collapse'], category: 'navigation', class: 'fas fa-chevron-down' },
            { id: 'fa-chevron-left', name: 'Chevron Left', keywords: ['left', 'previous'], category: 'navigation', class: 'fas fa-chevron-left' },
            { id: 'fa-chevron-right', name: 'Chevron Right', keywords: ['right', 'next'], category: 'navigation', class: 'fas fa-chevron-right' },
            { id: 'fa-home', name: 'Home', keywords: ['house', 'main', 'start'], category: 'navigation', class: 'fas fa-home' },
            { id: 'fa-bars', name: 'Bars', keywords: ['menu', 'hamburger', 'navigation'], category: 'navigation', class: 'fas fa-bars' },
            { id: 'fa-ellipsis-h', name: 'Ellipsis H', keywords: ['more', 'dots', 'menu'], category: 'navigation', class: 'fas fa-ellipsis-h' },
            { id: 'fa-ellipsis-v', name: 'Ellipsis V', keywords: ['more', 'dots', 'menu'], category: 'navigation', class: 'fas fa-ellipsis-v' },
            { id: 'fa-external-link-alt', name: 'External Link', keywords: ['link', 'open', 'new window'], category: 'navigation', class: 'fas fa-external-link-alt' },
            { id: 'fa-link', name: 'Link', keywords: ['chain', 'url', 'hyperlink'], category: 'navigation', class: 'fas fa-link' },
            { id: 'fa-unlink', name: 'Unlink', keywords: ['chain', 'break', 'disconnect'], category: 'navigation', class: 'fas fa-unlink' },

            // Actions
            { id: 'fa-check', name: 'Check', keywords: ['done', 'complete', 'yes', 'tick'], category: 'actions', class: 'fas fa-check' },
            { id: 'fa-times', name: 'Times', keywords: ['close', 'cancel', 'x', 'delete'], category: 'actions', class: 'fas fa-times' },
            { id: 'fa-plus', name: 'Plus', keywords: ['add', 'new', 'create'], category: 'actions', class: 'fas fa-plus' },
            { id: 'fa-minus', name: 'Minus', keywords: ['remove', 'subtract'], category: 'actions', class: 'fas fa-minus' },
            { id: 'fa-edit', name: 'Edit', keywords: ['pencil', 'modify', 'write'], category: 'actions', class: 'fas fa-edit' },
            { id: 'fa-trash', name: 'Trash', keywords: ['delete', 'remove', 'bin'], category: 'actions', class: 'fas fa-trash' },
            { id: 'fa-trash-alt', name: 'Trash Alt', keywords: ['delete', 'remove', 'bin'], category: 'actions', class: 'fas fa-trash-alt' },
            { id: 'fa-copy', name: 'Copy', keywords: ['duplicate', 'clone'], category: 'actions', class: 'fas fa-copy' },
            { id: 'fa-paste', name: 'Paste', keywords: ['clipboard'], category: 'actions', class: 'fas fa-paste' },
            { id: 'fa-cut', name: 'Cut', keywords: ['scissors'], category: 'actions', class: 'fas fa-cut' },
            { id: 'fa-save', name: 'Save', keywords: ['floppy', 'disk', 'store'], category: 'actions', class: 'fas fa-save' },
            { id: 'fa-download', name: 'Download', keywords: ['save', 'export'], category: 'actions', class: 'fas fa-download' },
            { id: 'fa-upload', name: 'Upload', keywords: ['import'], category: 'actions', class: 'fas fa-upload' },
            { id: 'fa-undo', name: 'Undo', keywords: ['back', 'revert'], category: 'actions', class: 'fas fa-undo' },
            { id: 'fa-redo', name: 'Redo', keywords: ['forward', 'repeat'], category: 'actions', class: 'fas fa-redo' },
            { id: 'fa-sync', name: 'Sync', keywords: ['refresh', 'reload', 'update'], category: 'actions', class: 'fas fa-sync' },
            { id: 'fa-search', name: 'Search', keywords: ['find', 'magnify', 'lookup'], category: 'actions', class: 'fas fa-search' },
            { id: 'fa-share', name: 'Share', keywords: ['send', 'forward'], category: 'actions', class: 'fas fa-share' },
            { id: 'fa-share-alt', name: 'Share Alt', keywords: ['send', 'social'], category: 'actions', class: 'fas fa-share-alt' },
            { id: 'fa-print', name: 'Print', keywords: ['printer', 'paper'], category: 'actions', class: 'fas fa-print' },
            { id: 'fa-expand', name: 'Expand', keywords: ['fullscreen', 'maximize'], category: 'actions', class: 'fas fa-expand' },
            { id: 'fa-compress', name: 'Compress', keywords: ['minimize', 'shrink'], category: 'actions', class: 'fas fa-compress' },
            { id: 'fa-lock', name: 'Lock', keywords: ['secure', 'password'], category: 'actions', class: 'fas fa-lock' },
            { id: 'fa-unlock', name: 'Unlock', keywords: ['open', 'access'], category: 'actions', class: 'fas fa-unlock' },
            { id: 'fa-sign-in-alt', name: 'Sign In', keywords: ['login', 'enter'], category: 'actions', class: 'fas fa-sign-in-alt' },
            { id: 'fa-sign-out-alt', name: 'Sign Out', keywords: ['logout', 'exit'], category: 'actions', class: 'fas fa-sign-out-alt' },

            // Communication
            { id: 'fa-envelope', name: 'Envelope', keywords: ['email', 'mail', 'message'], category: 'communication', class: 'fas fa-envelope' },
            { id: 'fa-envelope-open', name: 'Envelope Open', keywords: ['email', 'mail', 'read'], category: 'communication', class: 'fas fa-envelope-open' },
            { id: 'fa-phone', name: 'Phone', keywords: ['call', 'telephone', 'contact'], category: 'communication', class: 'fas fa-phone' },
            { id: 'fa-phone-alt', name: 'Phone Alt', keywords: ['call', 'telephone'], category: 'communication', class: 'fas fa-phone-alt' },
            { id: 'fa-comment', name: 'Comment', keywords: ['chat', 'message', 'speech'], category: 'communication', class: 'fas fa-comment' },
            { id: 'fa-comments', name: 'Comments', keywords: ['chat', 'conversation'], category: 'communication', class: 'fas fa-comments' },
            { id: 'fa-comment-alt', name: 'Comment Alt', keywords: ['chat', 'message'], category: 'communication', class: 'fas fa-comment-alt' },
            { id: 'fa-bell', name: 'Bell', keywords: ['notification', 'alert', 'alarm'], category: 'communication', class: 'fas fa-bell' },
            { id: 'fa-bell-slash', name: 'Bell Slash', keywords: ['notification off', 'mute'], category: 'communication', class: 'fas fa-bell-slash' },
            { id: 'fa-inbox', name: 'Inbox', keywords: ['mail', 'messages'], category: 'communication', class: 'fas fa-inbox' },
            { id: 'fa-paper-plane', name: 'Paper Plane', keywords: ['send', 'message'], category: 'communication', class: 'fas fa-paper-plane' },
            { id: 'fa-at', name: 'At', keywords: ['email', 'address'], category: 'communication', class: 'fas fa-at' },

            // Media
            { id: 'fa-image', name: 'Image', keywords: ['picture', 'photo', 'gallery'], category: 'media', class: 'fas fa-image' },
            { id: 'fa-images', name: 'Images', keywords: ['pictures', 'photos', 'gallery'], category: 'media', class: 'fas fa-images' },
            { id: 'fa-camera', name: 'Camera', keywords: ['photo', 'picture'], category: 'media', class: 'fas fa-camera' },
            { id: 'fa-video', name: 'Video', keywords: ['movie', 'film', 'camera'], category: 'media', class: 'fas fa-video' },
            { id: 'fa-play', name: 'Play', keywords: ['start', 'begin', 'video'], category: 'media', class: 'fas fa-play' },
            { id: 'fa-pause', name: 'Pause', keywords: ['stop', 'hold'], category: 'media', class: 'fas fa-pause' },
            { id: 'fa-stop', name: 'Stop', keywords: ['end', 'halt'], category: 'media', class: 'fas fa-stop' },
            { id: 'fa-forward', name: 'Forward', keywords: ['skip', 'next'], category: 'media', class: 'fas fa-forward' },
            { id: 'fa-backward', name: 'Backward', keywords: ['rewind', 'previous'], category: 'media', class: 'fas fa-backward' },
            { id: 'fa-volume-up', name: 'Volume Up', keywords: ['sound', 'audio', 'loud'], category: 'media', class: 'fas fa-volume-up' },
            { id: 'fa-volume-down', name: 'Volume Down', keywords: ['sound', 'audio', 'quiet'], category: 'media', class: 'fas fa-volume-down' },
            { id: 'fa-volume-mute', name: 'Volume Mute', keywords: ['sound off', 'silent'], category: 'media', class: 'fas fa-volume-mute' },
            { id: 'fa-music', name: 'Music', keywords: ['audio', 'song'], category: 'media', class: 'fas fa-music' },
            { id: 'fa-microphone', name: 'Microphone', keywords: ['audio', 'record', 'voice'], category: 'media', class: 'fas fa-microphone' },
            { id: 'fa-headphones', name: 'Headphones', keywords: ['audio', 'music', 'listen'], category: 'media', class: 'fas fa-headphones' },

            // Data & Files
            { id: 'fa-file', name: 'File', keywords: ['document', 'page'], category: 'data', class: 'fas fa-file' },
            { id: 'fa-file-alt', name: 'File Alt', keywords: ['document', 'text'], category: 'data', class: 'fas fa-file-alt' },
            { id: 'fa-file-pdf', name: 'File PDF', keywords: ['document', 'adobe'], category: 'data', class: 'fas fa-file-pdf' },
            { id: 'fa-file-word', name: 'File Word', keywords: ['document', 'microsoft'], category: 'data', class: 'fas fa-file-word' },
            { id: 'fa-file-excel', name: 'File Excel', keywords: ['spreadsheet', 'microsoft'], category: 'data', class: 'fas fa-file-excel' },
            { id: 'fa-file-image', name: 'File Image', keywords: ['picture', 'photo'], category: 'data', class: 'fas fa-file-image' },
            { id: 'fa-file-code', name: 'File Code', keywords: ['programming', 'source'], category: 'data', class: 'fas fa-file-code' },
            { id: 'fa-file-archive', name: 'File Archive', keywords: ['zip', 'compress'], category: 'data', class: 'fas fa-file-archive' },
            { id: 'fa-folder', name: 'Folder', keywords: ['directory'], category: 'data', class: 'fas fa-folder' },
            { id: 'fa-folder-open', name: 'Folder Open', keywords: ['directory', 'open'], category: 'data', class: 'fas fa-folder-open' },
            { id: 'fa-database', name: 'Database', keywords: ['storage', 'data'], category: 'data', class: 'fas fa-database' },
            { id: 'fa-server', name: 'Server', keywords: ['computer', 'hosting'], category: 'data', class: 'fas fa-server' },
            { id: 'fa-cloud', name: 'Cloud', keywords: ['storage', 'sync'], category: 'data', class: 'fas fa-cloud' },
            { id: 'fa-cloud-upload-alt', name: 'Cloud Upload', keywords: ['upload', 'sync'], category: 'data', class: 'fas fa-cloud-upload-alt' },
            { id: 'fa-cloud-download-alt', name: 'Cloud Download', keywords: ['download', 'sync'], category: 'data', class: 'fas fa-cloud-download-alt' },
            { id: 'fa-chart-bar', name: 'Chart Bar', keywords: ['graph', 'statistics'], category: 'data', class: 'fas fa-chart-bar' },
            { id: 'fa-chart-line', name: 'Chart Line', keywords: ['graph', 'statistics'], category: 'data', class: 'fas fa-chart-line' },
            { id: 'fa-chart-pie', name: 'Chart Pie', keywords: ['graph', 'statistics'], category: 'data', class: 'fas fa-chart-pie' },
            { id: 'fa-table', name: 'Table', keywords: ['grid', 'data'], category: 'data', class: 'fas fa-table' },
            { id: 'fa-list', name: 'List', keywords: ['items', 'bullets'], category: 'data', class: 'fas fa-list' },
            { id: 'fa-list-ul', name: 'List Unordered', keywords: ['bullets', 'items'], category: 'data', class: 'fas fa-list-ul' },
            { id: 'fa-list-ol', name: 'List Ordered', keywords: ['numbers', 'items'], category: 'data', class: 'fas fa-list-ol' },
            { id: 'fa-clipboard', name: 'Clipboard', keywords: ['copy', 'paste'], category: 'data', class: 'fas fa-clipboard' },
            { id: 'fa-clipboard-list', name: 'Clipboard List', keywords: ['tasks', 'checklist'], category: 'data', class: 'fas fa-clipboard-list' },

            // User & People
            { id: 'fa-user', name: 'User', keywords: ['person', 'profile', 'account'], category: 'user', class: 'fas fa-user' },
            { id: 'fa-user-circle', name: 'User Circle', keywords: ['avatar', 'profile'], category: 'user', class: 'fas fa-user-circle' },
            { id: 'fa-users', name: 'Users', keywords: ['people', 'group', 'team'], category: 'user', class: 'fas fa-users' },
            { id: 'fa-user-plus', name: 'User Plus', keywords: ['add user', 'invite'], category: 'user', class: 'fas fa-user-plus' },
            { id: 'fa-user-minus', name: 'User Minus', keywords: ['remove user', 'delete'], category: 'user', class: 'fas fa-user-minus' },
            { id: 'fa-user-edit', name: 'User Edit', keywords: ['edit profile', 'modify'], category: 'user', class: 'fas fa-user-edit' },
            { id: 'fa-user-cog', name: 'User Cog', keywords: ['settings', 'preferences'], category: 'user', class: 'fas fa-user-cog' },
            { id: 'fa-user-shield', name: 'User Shield', keywords: ['admin', 'security'], category: 'user', class: 'fas fa-user-shield' },
            { id: 'fa-id-card', name: 'ID Card', keywords: ['identity', 'badge'], category: 'user', class: 'fas fa-id-card' },
            { id: 'fa-address-book', name: 'Address Book', keywords: ['contacts', 'directory'], category: 'user', class: 'fas fa-address-book' },

            // Interface
            { id: 'fa-cog', name: 'Cog', keywords: ['settings', 'gear', 'options'], category: 'interface', class: 'fas fa-cog' },
            { id: 'fa-cogs', name: 'Cogs', keywords: ['settings', 'gears', 'options'], category: 'interface', class: 'fas fa-cogs' },
            { id: 'fa-sliders-h', name: 'Sliders', keywords: ['settings', 'controls', 'options'], category: 'interface', class: 'fas fa-sliders-h' },
            { id: 'fa-filter', name: 'Filter', keywords: ['sort', 'funnel'], category: 'interface', class: 'fas fa-filter' },
            { id: 'fa-sort', name: 'Sort', keywords: ['order', 'arrange'], category: 'interface', class: 'fas fa-sort' },
            { id: 'fa-sort-up', name: 'Sort Up', keywords: ['ascending', 'order'], category: 'interface', class: 'fas fa-sort-up' },
            { id: 'fa-sort-down', name: 'Sort Down', keywords: ['descending', 'order'], category: 'interface', class: 'fas fa-sort-down' },
            { id: 'fa-eye', name: 'Eye', keywords: ['view', 'visible', 'show'], category: 'interface', class: 'fas fa-eye' },
            { id: 'fa-eye-slash', name: 'Eye Slash', keywords: ['hidden', 'invisible', 'hide'], category: 'interface', class: 'fas fa-eye-slash' },
            { id: 'fa-th', name: 'Grid', keywords: ['tiles', 'layout'], category: 'interface', class: 'fas fa-th' },
            { id: 'fa-th-large', name: 'Grid Large', keywords: ['tiles', 'layout'], category: 'interface', class: 'fas fa-th-large' },
            { id: 'fa-th-list', name: 'List View', keywords: ['rows', 'layout'], category: 'interface', class: 'fas fa-th-list' },
            { id: 'fa-grip-horizontal', name: 'Grip', keywords: ['drag', 'handle'], category: 'interface', class: 'fas fa-grip-horizontal' },
            { id: 'fa-grip-vertical', name: 'Grip Vertical', keywords: ['drag', 'handle'], category: 'interface', class: 'fas fa-grip-vertical' },
            { id: 'fa-window-maximize', name: 'Window Maximize', keywords: ['fullscreen'], category: 'interface', class: 'fas fa-window-maximize' },
            { id: 'fa-window-minimize', name: 'Window Minimize', keywords: ['collapse'], category: 'interface', class: 'fas fa-window-minimize' },
            { id: 'fa-window-close', name: 'Window Close', keywords: ['exit'], category: 'interface', class: 'fas fa-window-close' },
            { id: 'fa-columns', name: 'Columns', keywords: ['layout', 'grid'], category: 'interface', class: 'fas fa-columns' },

            // Status
            { id: 'fa-check-circle', name: 'Check Circle', keywords: ['success', 'complete', 'done'], category: 'status', class: 'fas fa-check-circle' },
            { id: 'fa-times-circle', name: 'Times Circle', keywords: ['error', 'cancel', 'close'], category: 'status', class: 'fas fa-times-circle' },
            { id: 'fa-exclamation-circle', name: 'Exclamation Circle', keywords: ['warning', 'alert'], category: 'status', class: 'fas fa-exclamation-circle' },
            { id: 'fa-exclamation-triangle', name: 'Warning', keywords: ['caution', 'alert'], category: 'status', class: 'fas fa-exclamation-triangle' },
            { id: 'fa-info-circle', name: 'Info Circle', keywords: ['information', 'help'], category: 'status', class: 'fas fa-info-circle' },
            { id: 'fa-question-circle', name: 'Question Circle', keywords: ['help', 'support'], category: 'status', class: 'fas fa-question-circle' },
            { id: 'fa-spinner', name: 'Spinner', keywords: ['loading', 'wait'], category: 'status', class: 'fas fa-spinner' },
            { id: 'fa-circle-notch', name: 'Circle Notch', keywords: ['loading', 'wait'], category: 'status', class: 'fas fa-circle-notch' },
            { id: 'fa-hourglass', name: 'Hourglass', keywords: ['waiting', 'time'], category: 'status', class: 'fas fa-hourglass' },
            { id: 'fa-ban', name: 'Ban', keywords: ['forbidden', 'blocked', 'no'], category: 'status', class: 'fas fa-ban' },

            // Objects
            { id: 'fa-calendar', name: 'Calendar', keywords: ['date', 'schedule', 'event'], category: 'objects', class: 'fas fa-calendar' },
            { id: 'fa-calendar-alt', name: 'Calendar Alt', keywords: ['date', 'schedule'], category: 'objects', class: 'fas fa-calendar-alt' },
            { id: 'fa-clock', name: 'Clock', keywords: ['time', 'schedule'], category: 'objects', class: 'fas fa-clock' },
            { id: 'fa-map', name: 'Map', keywords: ['location', 'directions'], category: 'objects', class: 'fas fa-map' },
            { id: 'fa-map-marker-alt', name: 'Map Marker', keywords: ['location', 'pin'], category: 'objects', class: 'fas fa-map-marker-alt' },
            { id: 'fa-globe', name: 'Globe', keywords: ['world', 'web', 'internet'], category: 'objects', class: 'fas fa-globe' },
            { id: 'fa-shopping-cart', name: 'Shopping Cart', keywords: ['buy', 'commerce'], category: 'objects', class: 'fas fa-shopping-cart' },
            { id: 'fa-shopping-bag', name: 'Shopping Bag', keywords: ['buy', 'commerce'], category: 'objects', class: 'fas fa-shopping-bag' },
            { id: 'fa-credit-card', name: 'Credit Card', keywords: ['payment', 'money'], category: 'objects', class: 'fas fa-credit-card' },
            { id: 'fa-wallet', name: 'Wallet', keywords: ['money', 'payment'], category: 'objects', class: 'fas fa-wallet' },
            { id: 'fa-tag', name: 'Tag', keywords: ['label', 'price'], category: 'objects', class: 'fas fa-tag' },
            { id: 'fa-tags', name: 'Tags', keywords: ['labels', 'categories'], category: 'objects', class: 'fas fa-tags' },
            { id: 'fa-gift', name: 'Gift', keywords: ['present', 'reward'], category: 'objects', class: 'fas fa-gift' },
            { id: 'fa-trophy', name: 'Trophy', keywords: ['award', 'winner'], category: 'objects', class: 'fas fa-trophy' },
            { id: 'fa-briefcase', name: 'Briefcase', keywords: ['work', 'business'], category: 'objects', class: 'fas fa-briefcase' },
            { id: 'fa-building', name: 'Building', keywords: ['office', 'company'], category: 'objects', class: 'fas fa-building' },
            { id: 'fa-key', name: 'Key', keywords: ['password', 'access'], category: 'objects', class: 'fas fa-key' },
            { id: 'fa-lightbulb', name: 'Lightbulb', keywords: ['idea', 'tip'], category: 'objects', class: 'fas fa-lightbulb' },
            { id: 'fa-bolt', name: 'Bolt', keywords: ['lightning', 'power', 'fast'], category: 'objects', class: 'fas fa-bolt' },
            { id: 'fa-fire', name: 'Fire', keywords: ['hot', 'trending', 'popular'], category: 'objects', class: 'fas fa-fire' },
            { id: 'fa-sun', name: 'Sun', keywords: ['light', 'day', 'bright'], category: 'objects', class: 'fas fa-sun' },
            { id: 'fa-moon', name: 'Moon', keywords: ['night', 'dark'], category: 'objects', class: 'fas fa-moon' },
            { id: 'fa-palette', name: 'Palette', keywords: ['color', 'art', 'design'], category: 'objects', class: 'fas fa-palette' },
            { id: 'fa-paint-brush', name: 'Paint Brush', keywords: ['art', 'design'], category: 'objects', class: 'fas fa-paint-brush' },
            { id: 'fa-magic', name: 'Magic', keywords: ['wand', 'wizard'], category: 'objects', class: 'fas fa-magic' },

            // Symbols
            { id: 'fa-star', name: 'Star', keywords: ['favorite', 'rating'], category: 'symbols', class: 'fas fa-star' },
            { id: 'fa-star-half-alt', name: 'Star Half', keywords: ['rating', 'half'], category: 'symbols', class: 'fas fa-star-half-alt' },
            { id: 'fa-heart', name: 'Heart', keywords: ['love', 'favorite', 'like'], category: 'symbols', class: 'fas fa-heart' },
            { id: 'fa-thumbs-up', name: 'Thumbs Up', keywords: ['like', 'approve'], category: 'symbols', class: 'fas fa-thumbs-up' },
            { id: 'fa-thumbs-down', name: 'Thumbs Down', keywords: ['dislike', 'disapprove'], category: 'symbols', class: 'fas fa-thumbs-down' },
            { id: 'fa-flag', name: 'Flag', keywords: ['report', 'mark'], category: 'symbols', class: 'fas fa-flag' },
            { id: 'fa-bookmark', name: 'Bookmark', keywords: ['save', 'favorite'], category: 'symbols', class: 'fas fa-bookmark' },
            { id: 'fa-award', name: 'Award', keywords: ['badge', 'achievement'], category: 'symbols', class: 'fas fa-award' },
            { id: 'fa-certificate', name: 'Certificate', keywords: ['badge', 'achievement'], category: 'symbols', class: 'fas fa-certificate' },
            { id: 'fa-crown', name: 'Crown', keywords: ['king', 'premium'], category: 'symbols', class: 'fas fa-crown' },
            { id: 'fa-gem', name: 'Gem', keywords: ['diamond', 'premium'], category: 'symbols', class: 'fas fa-gem' },
            { id: 'fa-percent', name: 'Percent', keywords: ['discount', 'percentage'], category: 'symbols', class: 'fas fa-percent' },
            { id: 'fa-hashtag', name: 'Hashtag', keywords: ['tag', 'social'], category: 'symbols', class: 'fas fa-hashtag' },
            { id: 'fa-code', name: 'Code', keywords: ['programming', 'developer'], category: 'symbols', class: 'fas fa-code' },
            { id: 'fa-terminal', name: 'Terminal', keywords: ['command', 'console'], category: 'symbols', class: 'fas fa-terminal' },
            { id: 'fa-bug', name: 'Bug', keywords: ['error', 'debug'], category: 'symbols', class: 'fas fa-bug' },
            { id: 'fa-shield-alt', name: 'Shield', keywords: ['security', 'protect'], category: 'symbols', class: 'fas fa-shield-alt' },
            { id: 'fa-fingerprint', name: 'Fingerprint', keywords: ['identity', 'biometric'], category: 'symbols', class: 'fas fa-fingerprint' },
            { id: 'fa-qrcode', name: 'QR Code', keywords: ['scan', 'barcode'], category: 'symbols', class: 'fas fa-qrcode' },
            { id: 'fa-barcode', name: 'Barcode', keywords: ['scan', 'product'], category: 'symbols', class: 'fas fa-barcode' },
            { id: 'fa-wifi', name: 'WiFi', keywords: ['wireless', 'internet', 'signal'], category: 'symbols', class: 'fas fa-wifi' },
            { id: 'fa-bluetooth', name: 'Bluetooth', keywords: ['wireless', 'connect'], category: 'symbols', class: 'fab fa-bluetooth' },
            { id: 'fa-rss', name: 'RSS', keywords: ['feed', 'subscribe'], category: 'symbols', class: 'fas fa-rss' },

            // Social & Brands (Font Awesome brand icons)
            { id: 'fa-facebook', name: 'Facebook', keywords: ['facebook', 'social', 'meta'], category: 'social', class: 'fab fa-facebook-f' },
            { id: 'fa-facebook-square', name: 'Facebook Square', keywords: ['facebook', 'social', 'meta'], category: 'social', class: 'fab fa-facebook-square' },
            { id: 'fa-twitter', name: 'Twitter', keywords: ['twitter', 'social', 'tweet'], category: 'social', class: 'fab fa-twitter' },
            { id: 'fa-x-twitter', name: 'X (Twitter)', keywords: ['x', 'twitter', 'social', 'tweet'], category: 'social', class: 'fab fa-x-twitter' },
            { id: 'fa-instagram', name: 'Instagram', keywords: ['instagram', 'social', 'photo'], category: 'social', class: 'fab fa-instagram' },
            { id: 'fa-linkedin', name: 'LinkedIn', keywords: ['linkedin', 'social', 'professional', 'business'], category: 'social', class: 'fab fa-linkedin-in' },
            { id: 'fa-linkedin-square', name: 'LinkedIn Square', keywords: ['linkedin', 'social', 'professional'], category: 'social', class: 'fab fa-linkedin' },
            { id: 'fa-youtube', name: 'YouTube', keywords: ['youtube', 'video', 'social'], category: 'social', class: 'fab fa-youtube' },
            { id: 'fa-tiktok', name: 'TikTok', keywords: ['tiktok', 'social', 'video'], category: 'social', class: 'fab fa-tiktok' },
            { id: 'fa-pinterest', name: 'Pinterest', keywords: ['pinterest', 'social', 'pin'], category: 'social', class: 'fab fa-pinterest-p' },
            { id: 'fa-pinterest-square', name: 'Pinterest Square', keywords: ['pinterest', 'social'], category: 'social', class: 'fab fa-pinterest-square' },
            { id: 'fa-snapchat', name: 'Snapchat', keywords: ['snapchat', 'social', 'snap'], category: 'social', class: 'fab fa-snapchat-ghost' },
            { id: 'fa-whatsapp', name: 'WhatsApp', keywords: ['whatsapp', 'social', 'messaging', 'chat'], category: 'social', class: 'fab fa-whatsapp' },
            { id: 'fa-telegram', name: 'Telegram', keywords: ['telegram', 'social', 'messaging', 'chat'], category: 'social', class: 'fab fa-telegram-plane' },
            { id: 'fa-discord', name: 'Discord', keywords: ['discord', 'social', 'gaming', 'chat'], category: 'social', class: 'fab fa-discord' },
            { id: 'fa-slack', name: 'Slack', keywords: ['slack', 'social', 'work', 'chat'], category: 'social', class: 'fab fa-slack' },
            { id: 'fa-twitch', name: 'Twitch', keywords: ['twitch', 'social', 'gaming', 'streaming'], category: 'social', class: 'fab fa-twitch' },
            { id: 'fa-reddit', name: 'Reddit', keywords: ['reddit', 'social', 'forum'], category: 'social', class: 'fab fa-reddit-alien' },
            { id: 'fa-tumblr', name: 'Tumblr', keywords: ['tumblr', 'social', 'blog'], category: 'social', class: 'fab fa-tumblr' },
            { id: 'fa-medium', name: 'Medium', keywords: ['medium', 'social', 'blog', 'writing'], category: 'social', class: 'fab fa-medium-m' },
            { id: 'fa-github', name: 'GitHub', keywords: ['github', 'social', 'code', 'developer'], category: 'social', class: 'fab fa-github' },
            { id: 'fa-github-square', name: 'GitHub Square', keywords: ['github', 'social', 'code'], category: 'social', class: 'fab fa-github-square' },
            { id: 'fa-gitlab', name: 'GitLab', keywords: ['gitlab', 'social', 'code', 'developer'], category: 'social', class: 'fab fa-gitlab' },
            { id: 'fa-bitbucket', name: 'Bitbucket', keywords: ['bitbucket', 'social', 'code', 'developer'], category: 'social', class: 'fab fa-bitbucket' },
            { id: 'fa-stack-overflow', name: 'Stack Overflow', keywords: ['stackoverflow', 'social', 'code', 'developer'], category: 'social', class: 'fab fa-stack-overflow' },
            { id: 'fa-codepen', name: 'CodePen', keywords: ['codepen', 'social', 'code', 'developer'], category: 'social', class: 'fab fa-codepen' },
            { id: 'fa-dribbble', name: 'Dribbble', keywords: ['dribbble', 'social', 'design'], category: 'social', class: 'fab fa-dribbble' },
            { id: 'fa-behance', name: 'Behance', keywords: ['behance', 'social', 'design', 'portfolio'], category: 'social', class: 'fab fa-behance' },
            { id: 'fa-figma', name: 'Figma', keywords: ['figma', 'social', 'design'], category: 'social', class: 'fab fa-figma' },
            { id: 'fa-spotify', name: 'Spotify', keywords: ['spotify', 'social', 'music', 'streaming'], category: 'social', class: 'fab fa-spotify' },
            { id: 'fa-soundcloud', name: 'SoundCloud', keywords: ['soundcloud', 'social', 'music', 'audio'], category: 'social', class: 'fab fa-soundcloud' },
            { id: 'fa-apple', name: 'Apple', keywords: ['apple', 'brand', 'mac', 'ios'], category: 'social', class: 'fab fa-apple' },
            { id: 'fa-android', name: 'Android', keywords: ['android', 'brand', 'google', 'mobile'], category: 'social', class: 'fab fa-android' },
            { id: 'fa-windows', name: 'Windows', keywords: ['windows', 'brand', 'microsoft'], category: 'social', class: 'fab fa-windows' },
            { id: 'fa-google', name: 'Google', keywords: ['google', 'brand', 'search'], category: 'social', class: 'fab fa-google' },
            { id: 'fa-amazon', name: 'Amazon', keywords: ['amazon', 'brand', 'shopping'], category: 'social', class: 'fab fa-amazon' },
            { id: 'fa-paypal', name: 'PayPal', keywords: ['paypal', 'brand', 'payment'], category: 'social', class: 'fab fa-paypal' },
            { id: 'fa-stripe', name: 'Stripe', keywords: ['stripe', 'brand', 'payment'], category: 'social', class: 'fab fa-stripe-s' },
            { id: 'fa-cc-visa', name: 'Visa', keywords: ['visa', 'brand', 'payment', 'credit card'], category: 'social', class: 'fab fa-cc-visa' },
            { id: 'fa-cc-mastercard', name: 'Mastercard', keywords: ['mastercard', 'brand', 'payment', 'credit card'], category: 'social', class: 'fab fa-cc-mastercard' },
            { id: 'fa-cc-amex', name: 'American Express', keywords: ['amex', 'brand', 'payment', 'credit card'], category: 'social', class: 'fab fa-cc-amex' },
            { id: 'fa-wordpress', name: 'WordPress', keywords: ['wordpress', 'brand', 'cms', 'blog'], category: 'social', class: 'fab fa-wordpress' },
            { id: 'fa-shopify', name: 'Shopify', keywords: ['shopify', 'brand', 'ecommerce'], category: 'social', class: 'fab fa-shopify' },
            { id: 'fa-airbnb', name: 'Airbnb', keywords: ['airbnb', 'brand', 'travel'], category: 'social', class: 'fab fa-airbnb' },
            { id: 'fa-uber', name: 'Uber', keywords: ['uber', 'brand', 'travel', 'ride'], category: 'social', class: 'fab fa-uber' },
            { id: 'fa-lyft', name: 'Lyft', keywords: ['lyft', 'brand', 'travel', 'ride'], category: 'social', class: 'fab fa-lyft' },
            { id: 'fa-dropbox', name: 'Dropbox', keywords: ['dropbox', 'brand', 'storage', 'cloud'], category: 'social', class: 'fab fa-dropbox' },
            { id: 'fa-google-drive', name: 'Google Drive', keywords: ['google', 'drive', 'brand', 'storage', 'cloud'], category: 'social', class: 'fab fa-google-drive' },
            { id: 'fa-vimeo', name: 'Vimeo', keywords: ['vimeo', 'social', 'video'], category: 'social', class: 'fab fa-vimeo-v' },
            { id: 'fa-flickr', name: 'Flickr', keywords: ['flickr', 'social', 'photo'], category: 'social', class: 'fab fa-flickr' },
            { id: 'fa-yelp', name: 'Yelp', keywords: ['yelp', 'social', 'reviews'], category: 'social', class: 'fab fa-yelp' },
            { id: 'fa-tripadvisor', name: 'TripAdvisor', keywords: ['tripadvisor', 'social', 'travel', 'reviews'], category: 'social', class: 'fab fa-tripadvisor' },
            { id: 'fa-threads', name: 'Threads', keywords: ['threads', 'social', 'meta', 'instagram'], category: 'social', class: 'fab fa-threads' },
            { id: 'fa-mastodon', name: 'Mastodon', keywords: ['mastodon', 'social', 'fediverse'], category: 'social', class: 'fab fa-mastodon' },
            { id: 'fa-bluesky', name: 'Bluesky', keywords: ['bluesky', 'social'], category: 'social', class: 'fab fa-bluesky' }
        ],

        /** RSL icon manifest (from rsl-icons.svg) */
        rslIcons: [],

        /** Combined icon list (populated on init) */
        allIcons: [],

        /**
         * Initialize all icon pickers on page
         */
        init: function() {
            var self = this;

            // Build RSL icons list from the SVG sprite
            this._buildRSLIconManifest();

            // Combine all icons
            this.allIcons = this.faIcons.map(function(icon) {
                return Object.assign({}, icon, { source: 'fa' });
            }).concat(this.rslIcons.map(function(icon) {
                return Object.assign({}, icon, { source: 'rsl' });
            }));

            // Initialize all pickers
            var elements = document.querySelectorAll('[data-rsl-icon-picker]');
            elements.forEach(function(element) {
                if (!self.instances.has(element)) {
                    self.create(element);
                }
            });

            return this;
        },

        /**
         * Build RSL icon manifest from SVG sprite
         */
        _buildRSLIconManifest: function() {
            var self = this;

            // RSL icons definition (matches rsl-icons.svg) - All 300 icons
            var rslIconDefs = [
                // Navigation (13 icons)
                { id: 'rsl-icon-arrow-up', name: 'Arrow Up', category: 'navigation', keywords: ['up', 'direction'] },
                { id: 'rsl-icon-arrow-down', name: 'Arrow Down', category: 'navigation', keywords: ['down', 'direction'] },
                { id: 'rsl-icon-arrow-left', name: 'Arrow Left', category: 'navigation', keywords: ['left', 'back'] },
                { id: 'rsl-icon-arrow-right', name: 'Arrow Right', category: 'navigation', keywords: ['right', 'forward'] },
                { id: 'rsl-icon-chevron-up', name: 'Chevron Up', category: 'navigation', keywords: ['up', 'expand'] },
                { id: 'rsl-icon-chevron-down', name: 'Chevron Down', category: 'navigation', keywords: ['down', 'collapse'] },
                { id: 'rsl-icon-chevron-left', name: 'Chevron Left', category: 'navigation', keywords: ['left', 'previous'] },
                { id: 'rsl-icon-chevron-right', name: 'Chevron Right', category: 'navigation', keywords: ['right', 'next'] },
                { id: 'rsl-icon-angle-double-left', name: 'Angle Double Left', category: 'navigation', keywords: ['first', 'start'] },
                { id: 'rsl-icon-angle-double-right', name: 'Angle Double Right', category: 'navigation', keywords: ['last', 'end'] },
                { id: 'rsl-icon-caret-down', name: 'Caret Down', category: 'navigation', keywords: ['dropdown', 'expand'] },
                { id: 'rsl-icon-caret-up', name: 'Caret Up', category: 'navigation', keywords: ['collapse', 'up'] },
                { id: 'rsl-icon-caret-left', name: 'Caret Left', category: 'navigation', keywords: ['back', 'left'] },
                { id: 'rsl-icon-caret-right', name: 'Caret Right', category: 'navigation', keywords: ['forward', 'right'] },
                { id: 'rsl-icon-home', name: 'Home', category: 'navigation', keywords: ['house', 'main'] },
                { id: 'rsl-icon-bars', name: 'Menu', category: 'navigation', keywords: ['hamburger', 'menu'] },
                { id: 'rsl-icon-menu', name: 'Menu Alt', category: 'navigation', keywords: ['hamburger', 'navigation'] },
                { id: 'rsl-icon-external-link', name: 'External Link', category: 'navigation', keywords: ['link', 'open'] },
                { id: 'rsl-icon-link', name: 'Link', category: 'navigation', keywords: ['chain', 'url'] },
                { id: 'rsl-icon-unlink', name: 'Unlink', category: 'navigation', keywords: ['break', 'disconnect'] },
                { id: 'rsl-icon-sidebar', name: 'Sidebar', category: 'navigation', keywords: ['panel', 'layout'] },
                { id: 'rsl-icon-sitemap', name: 'Sitemap', category: 'navigation', keywords: ['structure', 'hierarchy'] },
                { id: 'rsl-icon-route', name: 'Route', category: 'navigation', keywords: ['path', 'direction'] },
                { id: 'rsl-icon-compass', name: 'Compass', category: 'navigation', keywords: ['direction', 'navigate'] },
                { id: 'rsl-icon-crosshairs', name: 'Crosshairs', category: 'navigation', keywords: ['target', 'aim'] },
                { id: 'rsl-icon-shoe-prints', name: 'Shoe Prints', category: 'navigation', keywords: ['walk', 'steps'] },

                // Actions (32 icons)
                { id: 'rsl-icon-check', name: 'Check', category: 'actions', keywords: ['done', 'complete', 'yes'] },
                { id: 'rsl-icon-times', name: 'Times', category: 'actions', keywords: ['close', 'cancel', 'x'] },
                { id: 'rsl-icon-plus', name: 'Plus', category: 'actions', keywords: ['add', 'new'] },
                { id: 'rsl-icon-minus', name: 'Minus', category: 'actions', keywords: ['remove', 'subtract'] },
                { id: 'rsl-icon-edit', name: 'Edit', category: 'actions', keywords: ['pencil', 'modify'] },
                { id: 'rsl-icon-pencil', name: 'Pencil', category: 'actions', keywords: ['write', 'edit'] },
                { id: 'rsl-icon-eraser', name: 'Eraser', category: 'actions', keywords: ['delete', 'remove'] },
                { id: 'rsl-icon-trash', name: 'Trash', category: 'actions', keywords: ['delete', 'remove'] },
                { id: 'rsl-icon-copy', name: 'Copy', category: 'actions', keywords: ['duplicate', 'clone'] },
                { id: 'rsl-icon-save', name: 'Save', category: 'actions', keywords: ['floppy', 'disk'] },
                { id: 'rsl-icon-download', name: 'Download', category: 'actions', keywords: ['save', 'export'] },
                { id: 'rsl-icon-upload', name: 'Upload', category: 'actions', keywords: ['import'] },
                { id: 'rsl-icon-undo', name: 'Undo', category: 'actions', keywords: ['back', 'revert'] },
                { id: 'rsl-icon-redo', name: 'Redo', category: 'actions', keywords: ['forward', 'repeat'] },
                { id: 'rsl-icon-share', name: 'Share', category: 'actions', keywords: ['send', 'forward'] },
                { id: 'rsl-icon-search', name: 'Search', category: 'actions', keywords: ['find', 'magnify'] },
                { id: 'rsl-icon-expand', name: 'Expand', category: 'actions', keywords: ['fullscreen', 'maximize'] },
                { id: 'rsl-icon-compress', name: 'Compress', category: 'actions', keywords: ['minimize', 'shrink'] },
                { id: 'rsl-icon-maximize', name: 'Maximize', category: 'actions', keywords: ['fullscreen', 'expand'] },
                { id: 'rsl-icon-filter', name: 'Filter', category: 'actions', keywords: ['sort', 'funnel'] },
                { id: 'rsl-icon-sync', name: 'Sync', category: 'actions', keywords: ['refresh', 'update'] },
                { id: 'rsl-icon-refresh-ccw', name: 'Refresh', category: 'actions', keywords: ['reload', 'update'] },
                { id: 'rsl-icon-rotate', name: 'Rotate', category: 'actions', keywords: ['turn', 'spin'] },
                { id: 'rsl-icon-crop', name: 'Crop', category: 'actions', keywords: ['cut', 'trim'] },
                { id: 'rsl-icon-scissors', name: 'Scissors', category: 'actions', keywords: ['cut', 'trim'] },
                { id: 'rsl-icon-zoom-in', name: 'Zoom In', category: 'actions', keywords: ['magnify', 'enlarge'] },
                { id: 'rsl-icon-zoom-out', name: 'Zoom Out', category: 'actions', keywords: ['shrink', 'reduce'] },
                { id: 'rsl-icon-move', name: 'Move', category: 'actions', keywords: ['drag', 'reposition'] },
                { id: 'rsl-icon-lock', name: 'Lock', category: 'actions', keywords: ['secure', 'private'] },
                { id: 'rsl-icon-unlock', name: 'Unlock', category: 'actions', keywords: ['open', 'access'] },
                { id: 'rsl-icon-ban', name: 'Ban', category: 'actions', keywords: ['block', 'prohibit'] },
                { id: 'rsl-icon-power-off', name: 'Power Off', category: 'actions', keywords: ['shutdown', 'off'] },

                // Communication (16 icons)
                { id: 'rsl-icon-bell', name: 'Bell', category: 'communication', keywords: ['notification', 'alert'] },
                { id: 'rsl-icon-bell-slash', name: 'Bell Slash', category: 'communication', keywords: ['mute', 'silent'] },
                { id: 'rsl-icon-envelope', name: 'Envelope', category: 'communication', keywords: ['email', 'mail'] },
                { id: 'rsl-icon-phone', name: 'Phone', category: 'communication', keywords: ['call', 'telephone'] },
                { id: 'rsl-icon-comment', name: 'Comment', category: 'communication', keywords: ['chat', 'message'] },
                { id: 'rsl-icon-comments', name: 'Comments', category: 'communication', keywords: ['chat', 'discussion'] },
                { id: 'rsl-icon-send', name: 'Send', category: 'communication', keywords: ['submit', 'paper plane'] },
                { id: 'rsl-icon-inbox', name: 'Inbox', category: 'communication', keywords: ['mail', 'messages'] },
                { id: 'rsl-icon-paperclip', name: 'Paperclip', category: 'communication', keywords: ['attach', 'attachment'] },
                { id: 'rsl-icon-bullhorn', name: 'Bullhorn', category: 'communication', keywords: ['announce', 'megaphone'] },
                { id: 'rsl-icon-newspaper', name: 'Newspaper', category: 'communication', keywords: ['news', 'article'] },
                { id: 'rsl-icon-rss', name: 'RSS', category: 'communication', keywords: ['feed', 'subscribe'] },
                { id: 'rsl-icon-broadcast', name: 'Broadcast', category: 'communication', keywords: ['live', 'stream'] },
                { id: 'rsl-icon-microphone', name: 'Microphone', category: 'communication', keywords: ['audio', 'record'] },
                { id: 'rsl-icon-microphone-slash', name: 'Microphone Slash', category: 'communication', keywords: ['mute', 'silent'] },
                { id: 'rsl-icon-headset', name: 'Headset', category: 'communication', keywords: ['support', 'audio'] },

                // Media (13 icons)
                { id: 'rsl-icon-image', name: 'Image', category: 'media', keywords: ['picture', 'photo'] },
                { id: 'rsl-icon-video', name: 'Video', category: 'media', keywords: ['movie', 'film'] },
                { id: 'rsl-icon-play', name: 'Play', category: 'media', keywords: ['start', 'begin'] },
                { id: 'rsl-icon-pause', name: 'Pause', category: 'media', keywords: ['stop', 'hold'] },
                { id: 'rsl-icon-stop', name: 'Stop', category: 'media', keywords: ['end', 'halt'] },
                { id: 'rsl-icon-eye', name: 'Eye', category: 'media', keywords: ['view', 'visible'] },
                { id: 'rsl-icon-eye-slash', name: 'Eye Slash', category: 'media', keywords: ['hidden', 'invisible'] },
                { id: 'rsl-icon-volume-mute', name: 'Volume Mute', category: 'media', keywords: ['silent', 'off'] },
                { id: 'rsl-icon-volume-down', name: 'Volume Down', category: 'media', keywords: ['quiet', 'low'] },
                { id: 'rsl-icon-repeat', name: 'Repeat', category: 'media', keywords: ['loop', 'replay'] },
                { id: 'rsl-icon-shuffle', name: 'Shuffle', category: 'media', keywords: ['random', 'mix'] },
                { id: 'rsl-icon-feather', name: 'Feather', category: 'media', keywords: ['write', 'pen'] },
                { id: 'rsl-icon-quill', name: 'Quill', category: 'media', keywords: ['write', 'pen'] },

                // Data & Files (28 icons)
                { id: 'rsl-icon-file', name: 'File', category: 'data', keywords: ['document', 'page'] },
                { id: 'rsl-icon-file-alt', name: 'File Alt', category: 'data', keywords: ['document', 'text'] },
                { id: 'rsl-icon-file-code', name: 'File Code', category: 'data', keywords: ['programming', 'source'] },
                { id: 'rsl-icon-folder', name: 'Folder', category: 'data', keywords: ['directory'] },
                { id: 'rsl-icon-folder-open', name: 'Folder Open', category: 'data', keywords: ['directory', 'open'] },
                { id: 'rsl-icon-archive', name: 'Archive', category: 'data', keywords: ['zip', 'compress'] },
                { id: 'rsl-icon-clipboard', name: 'Clipboard', category: 'data', keywords: ['copy', 'paste'] },
                { id: 'rsl-icon-clipboard-check', name: 'Clipboard Check', category: 'data', keywords: ['checklist', 'done'] },
                { id: 'rsl-icon-database', name: 'Database', category: 'data', keywords: ['storage', 'data'] },
                { id: 'rsl-icon-table', name: 'Table', category: 'data', keywords: ['grid', 'data'] },
                { id: 'rsl-icon-columns', name: 'Columns', category: 'data', keywords: ['layout', 'grid'] },
                { id: 'rsl-icon-chart-bar', name: 'Chart Bar', category: 'data', keywords: ['graph', 'statistics'] },
                { id: 'rsl-icon-chart-line', name: 'Chart Line', category: 'data', keywords: ['graph', 'statistics'] },
                { id: 'rsl-icon-chart-pie', name: 'Chart Pie', category: 'data', keywords: ['graph', 'statistics'] },
                { id: 'rsl-icon-chart-area', name: 'Chart Area', category: 'data', keywords: ['graph', 'statistics'] },
                { id: 'rsl-icon-chart-growth', name: 'Chart Growth', category: 'data', keywords: ['graph', 'increase'] },
                { id: 'rsl-icon-sort', name: 'Sort', category: 'data', keywords: ['order', 'arrange'] },
                { id: 'rsl-icon-sort-up', name: 'Sort Up', category: 'data', keywords: ['ascending'] },
                { id: 'rsl-icon-sort-down', name: 'Sort Down', category: 'data', keywords: ['descending'] },
                { id: 'rsl-icon-list-ul', name: 'List Unordered', category: 'data', keywords: ['bullets'] },
                { id: 'rsl-icon-list-ol', name: 'List Ordered', category: 'data', keywords: ['numbers'] },
                { id: 'rsl-icon-th', name: 'Grid', category: 'data', keywords: ['table', 'layout'] },
                { id: 'rsl-icon-th-large', name: 'Grid Large', category: 'data', keywords: ['table', 'layout'] },
                { id: 'rsl-icon-layers', name: 'Layers', category: 'data', keywords: ['stack', 'levels'] },
                { id: 'rsl-icon-project-diagram', name: 'Project Diagram', category: 'data', keywords: ['flowchart', 'workflow'] },
                { id: 'rsl-icon-stream', name: 'Stream', category: 'data', keywords: ['flow', 'timeline'] },
                { id: 'rsl-icon-barcode', name: 'Barcode', category: 'data', keywords: ['scan', 'product'] },
                { id: 'rsl-icon-qrcode', name: 'QR Code', category: 'data', keywords: ['scan', 'link'] },

                // User (10 icons)
                { id: 'rsl-icon-user', name: 'User', category: 'user', keywords: ['person', 'profile'] },
                { id: 'rsl-icon-users', name: 'Users', category: 'user', keywords: ['people', 'group'] },
                { id: 'rsl-icon-user-plus', name: 'User Plus', category: 'user', keywords: ['add user'] },
                { id: 'rsl-icon-user-circle', name: 'User Circle', category: 'user', keywords: ['avatar'] },
                { id: 'rsl-icon-id-card', name: 'ID Card', category: 'user', keywords: ['identity', 'badge'] },
                { id: 'rsl-icon-graduation-cap', name: 'Graduation Cap', category: 'user', keywords: ['education', 'student'] },
                { id: 'rsl-icon-briefcase', name: 'Briefcase', category: 'user', keywords: ['work', 'business'] },
                { id: 'rsl-icon-building', name: 'Building', category: 'user', keywords: ['office', 'company'] },
                { id: 'rsl-icon-handshake-alt', name: 'Handshake', category: 'user', keywords: ['deal', 'agreement'] },
                { id: 'rsl-icon-crown', name: 'Crown', category: 'user', keywords: ['king', 'premium'] },

                // Interface (38 icons)
                { id: 'rsl-icon-cog', name: 'Cog', category: 'interface', keywords: ['settings', 'gear'] },
                { id: 'rsl-icon-sliders', name: 'Sliders', category: 'interface', keywords: ['settings', 'controls'] },
                { id: 'rsl-icon-tachometer', name: 'Tachometer', category: 'interface', keywords: ['dashboard', 'speed'] },
                { id: 'rsl-icon-toggle-on', name: 'Toggle On', category: 'interface', keywords: ['switch', 'enable'] },
                { id: 'rsl-icon-toggle-off', name: 'Toggle Off', category: 'interface', keywords: ['switch', 'disable'] },
                { id: 'rsl-icon-ellipsis-h', name: 'Ellipsis Horizontal', category: 'interface', keywords: ['more', 'options'] },
                { id: 'rsl-icon-ellipsis-v', name: 'Ellipsis Vertical', category: 'interface', keywords: ['more', 'options'] },
                { id: 'rsl-icon-grip-horizontal', name: 'Grip Horizontal', category: 'interface', keywords: ['drag', 'handle'] },
                { id: 'rsl-icon-grip-vertical', name: 'Grip Vertical', category: 'interface', keywords: ['drag', 'handle'] },
                { id: 'rsl-icon-window-maximize', name: 'Window Maximize', category: 'interface', keywords: ['fullscreen', 'expand'] },
                { id: 'rsl-icon-window-minimize', name: 'Window Minimize', category: 'interface', keywords: ['shrink', 'collapse'] },
                { id: 'rsl-icon-window-restore', name: 'Window Restore', category: 'interface', keywords: ['resize', 'restore'] },
                { id: 'rsl-icon-bold', name: 'Bold', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-italic', name: 'Italic', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-underline', name: 'Underline', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-strikethrough', name: 'Strikethrough', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-align-left', name: 'Align Left', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-align-center', name: 'Align Center', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-align-right', name: 'Align Right', category: 'interface', keywords: ['text', 'format'] },
                { id: 'rsl-icon-quote-left', name: 'Quote', category: 'interface', keywords: ['text', 'blockquote'] },
                { id: 'rsl-icon-keyboard', name: 'Keyboard', category: 'interface', keywords: ['type', 'input'] },
                { id: 'rsl-icon-mouse-pointer', name: 'Mouse Pointer', category: 'interface', keywords: ['cursor', 'click'] },
                { id: 'rsl-icon-hand-pointer', name: 'Hand Pointer', category: 'interface', keywords: ['click', 'select'] },
                { id: 'rsl-icon-hand', name: 'Hand', category: 'interface', keywords: ['stop', 'gesture'] },
                { id: 'rsl-icon-text-height', name: 'Text Height', category: 'interface', keywords: ['size', 'font'] },
                { id: 'rsl-icon-contrast', name: 'Contrast', category: 'interface', keywords: ['brightness', 'theme'] },
                { id: 'rsl-icon-desktop', name: 'Desktop', category: 'interface', keywords: ['computer', 'monitor'] },
                { id: 'rsl-icon-laptop', name: 'Laptop', category: 'interface', keywords: ['computer', 'portable'] },
                { id: 'rsl-icon-mobile', name: 'Mobile', category: 'interface', keywords: ['phone', 'smartphone'] },
                { id: 'rsl-icon-tablet', name: 'Tablet', category: 'interface', keywords: ['ipad', 'device'] },
                { id: 'rsl-icon-server', name: 'Server', category: 'interface', keywords: ['hosting', 'backend'] },
                { id: 'rsl-icon-printer', name: 'Printer', category: 'interface', keywords: ['print', 'output'] },
                { id: 'rsl-icon-pager', name: 'Pager', category: 'interface', keywords: ['beeper', 'device'] },
                { id: 'rsl-icon-memory', name: 'Memory', category: 'interface', keywords: ['ram', 'chip'] },
                { id: 'rsl-icon-microchip', name: 'Microchip', category: 'interface', keywords: ['processor', 'cpu'] },
                { id: 'rsl-icon-plug', name: 'Plug', category: 'interface', keywords: ['power', 'connect'] },
                { id: 'rsl-icon-signal', name: 'Signal', category: 'interface', keywords: ['wifi', 'connection'] },
                { id: 'rsl-icon-wifi', name: 'Wifi', category: 'interface', keywords: ['wireless', 'internet'] },

                // Status (16 icons)
                { id: 'rsl-icon-check-circle', name: 'Check Circle', category: 'status', keywords: ['success', 'complete'] },
                { id: 'rsl-icon-times-circle', name: 'Times Circle', category: 'status', keywords: ['error', 'cancel'] },
                { id: 'rsl-icon-plus-circle', name: 'Plus Circle', category: 'status', keywords: ['add'] },
                { id: 'rsl-icon-minus-circle', name: 'Minus Circle', category: 'status', keywords: ['remove'] },
                { id: 'rsl-icon-info-circle', name: 'Info Circle', category: 'status', keywords: ['information'] },
                { id: 'rsl-icon-exclamation-circle', name: 'Exclamation Circle', category: 'status', keywords: ['warning'] },
                { id: 'rsl-icon-question-circle', name: 'Question Circle', category: 'status', keywords: ['help'] },
                { id: 'rsl-icon-exclamation-triangle', name: 'Warning', category: 'status', keywords: ['caution', 'alert'] },
                { id: 'rsl-icon-check-square', name: 'Check Square', category: 'status', keywords: ['checkbox', 'done'] },
                { id: 'rsl-icon-circle', name: 'Circle', category: 'status', keywords: ['dot', 'bullet'] },
                { id: 'rsl-icon-circle-filled', name: 'Circle Filled', category: 'status', keywords: ['dot', 'bullet'] },
                { id: 'rsl-icon-square', name: 'Square', category: 'status', keywords: ['box', 'shape'] },
                { id: 'rsl-icon-square-filled', name: 'Square Filled', category: 'status', keywords: ['box', 'shape'] },
                { id: 'rsl-icon-spinner', name: 'Spinner', category: 'status', keywords: ['loading', 'wait'] },
                { id: 'rsl-icon-circle-notch', name: 'Circle Notch', category: 'status', keywords: ['loading', 'progress'] },
                { id: 'rsl-icon-question', name: 'Question', category: 'status', keywords: ['help', 'unknown'] },

                // Objects (55 icons)
                { id: 'rsl-icon-calendar', name: 'Calendar', category: 'objects', keywords: ['date', 'schedule'] },
                { id: 'rsl-icon-calendar-day', name: 'Calendar Day', category: 'objects', keywords: ['date', 'day'] },
                { id: 'rsl-icon-calendar-week', name: 'Calendar Week', category: 'objects', keywords: ['date', 'week'] },
                { id: 'rsl-icon-calendar-plus', name: 'Calendar Plus', category: 'objects', keywords: ['add', 'event'] },
                { id: 'rsl-icon-clock', name: 'Clock', category: 'objects', keywords: ['time', 'schedule'] },
                { id: 'rsl-icon-alarm-clock', name: 'Alarm Clock', category: 'objects', keywords: ['time', 'wake'] },
                { id: 'rsl-icon-timer', name: 'Timer', category: 'objects', keywords: ['countdown', 'stopwatch'] },
                { id: 'rsl-icon-stopwatch', name: 'Stopwatch', category: 'objects', keywords: ['time', 'speed'] },
                { id: 'rsl-icon-hourglass', name: 'Hourglass', category: 'objects', keywords: ['time', 'wait'] },
                { id: 'rsl-icon-history', name: 'History', category: 'objects', keywords: ['time', 'past'] },
                { id: 'rsl-icon-globe', name: 'Globe', category: 'objects', keywords: ['world', 'web'] },
                { id: 'rsl-icon-map-marker', name: 'Map Marker', category: 'objects', keywords: ['location', 'pin'] },
                { id: 'rsl-icon-sun', name: 'Sun', category: 'objects', keywords: ['light', 'day'] },
                { id: 'rsl-icon-sunrise', name: 'Sunrise', category: 'objects', keywords: ['morning', 'dawn'] },
                { id: 'rsl-icon-sunset', name: 'Sunset', category: 'objects', keywords: ['evening', 'dusk'] },
                { id: 'rsl-icon-moon', name: 'Moon', category: 'objects', keywords: ['night', 'dark'] },
                { id: 'rsl-icon-cloud', name: 'Cloud', category: 'objects', keywords: ['weather', 'storage'] },
                { id: 'rsl-icon-cloud-alt', name: 'Cloud Alt', category: 'objects', keywords: ['weather', 'sky'] },
                { id: 'rsl-icon-cloud-upload', name: 'Cloud Upload', category: 'objects', keywords: ['upload', 'save'] },
                { id: 'rsl-icon-cloud-download', name: 'Cloud Download', category: 'objects', keywords: ['download', 'get'] },
                { id: 'rsl-icon-cloud-rain', name: 'Cloud Rain', category: 'objects', keywords: ['weather', 'rain'] },
                { id: 'rsl-icon-cloud-snow', name: 'Cloud Snow', category: 'objects', keywords: ['weather', 'snow'] },
                { id: 'rsl-icon-wind', name: 'Wind', category: 'objects', keywords: ['weather', 'breeze'] },
                { id: 'rsl-icon-droplet', name: 'Droplet', category: 'objects', keywords: ['water', 'liquid'] },
                { id: 'rsl-icon-thermometer', name: 'Thermometer', category: 'objects', keywords: ['temperature', 'heat'] },
                { id: 'rsl-icon-snowflake', name: 'Snowflake', category: 'objects', keywords: ['cold', 'winter'] },
                { id: 'rsl-icon-mountain', name: 'Mountain', category: 'objects', keywords: ['nature', 'landscape'] },
                { id: 'rsl-icon-tree', name: 'Tree', category: 'objects', keywords: ['nature', 'forest'] },
                { id: 'rsl-icon-waves', name: 'Waves', category: 'objects', keywords: ['water', 'ocean'] },
                { id: 'rsl-icon-leaf', name: 'Leaf', category: 'objects', keywords: ['nature', 'eco'] },
                { id: 'rsl-icon-umbrella', name: 'Umbrella', category: 'objects', keywords: ['rain', 'protection'] },
                { id: 'rsl-icon-anchor', name: 'Anchor', category: 'objects', keywords: ['ship', 'marine'] },
                { id: 'rsl-icon-palette', name: 'Palette', category: 'objects', keywords: ['color', 'art'] },
                { id: 'rsl-icon-paint-brush', name: 'Paint Brush', category: 'objects', keywords: ['art', 'design'] },
                { id: 'rsl-icon-eye-dropper', name: 'Eye Dropper', category: 'objects', keywords: ['color', 'pick'] },
                { id: 'rsl-icon-ruler', name: 'Ruler', category: 'objects', keywords: ['measure', 'size'] },
                { id: 'rsl-icon-wrench', name: 'Wrench', category: 'objects', keywords: ['tool', 'fix'] },
                { id: 'rsl-icon-tools', name: 'Tools', category: 'objects', keywords: ['settings', 'fix'] },
                { id: 'rsl-icon-key', name: 'Key', category: 'objects', keywords: ['unlock', 'password'] },
                { id: 'rsl-icon-shield', name: 'Shield', category: 'objects', keywords: ['security', 'protect'] },
                { id: 'rsl-icon-gift', name: 'Gift', category: 'objects', keywords: ['present', 'surprise'] },
                { id: 'rsl-icon-trophy', name: 'Trophy', category: 'objects', keywords: ['award', 'winner'] },
                { id: 'rsl-icon-award', name: 'Award', category: 'objects', keywords: ['medal', 'achievement'] },
                { id: 'rsl-icon-gem', name: 'Gem', category: 'objects', keywords: ['diamond', 'precious'] },
                { id: 'rsl-icon-magic', name: 'Magic', category: 'objects', keywords: ['wand', 'sparkle'] },
                { id: 'rsl-icon-rocket', name: 'Rocket', category: 'objects', keywords: ['launch', 'startup'] },
                { id: 'rsl-icon-bolt', name: 'Bolt', category: 'objects', keywords: ['lightning', 'power'] },
                { id: 'rsl-icon-zap', name: 'Zap', category: 'objects', keywords: ['lightning', 'fast'] },
                { id: 'rsl-icon-fire', name: 'Fire', category: 'objects', keywords: ['hot', 'flame'] },
                { id: 'rsl-icon-lightbulb', name: 'Lightbulb', category: 'objects', keywords: ['idea', 'light'] },
                { id: 'rsl-icon-cube', name: 'Cube', category: 'objects', keywords: ['3d', 'box'] },
                { id: 'rsl-icon-box', name: 'Box', category: 'objects', keywords: ['package', 'container'] },
                { id: 'rsl-icon-package', name: 'Package', category: 'objects', keywords: ['box', 'shipping'] },
                { id: 'rsl-icon-puzzle-piece', name: 'Puzzle Piece', category: 'objects', keywords: ['plugin', 'addon'] },
                { id: 'rsl-icon-flask', name: 'Flask', category: 'objects', keywords: ['science', 'lab'] },
                { id: 'rsl-icon-vial', name: 'Vial', category: 'objects', keywords: ['science', 'test'] },

                // Symbols (36 icons)
                { id: 'rsl-icon-star', name: 'Star', category: 'symbols', keywords: ['favorite', 'rating'] },
                { id: 'rsl-icon-star-half', name: 'Star Half', category: 'symbols', keywords: ['rating', 'half'] },
                { id: 'rsl-icon-heart', name: 'Heart', category: 'symbols', keywords: ['love', 'favorite'] },
                { id: 'rsl-icon-bookmark', name: 'Bookmark', category: 'symbols', keywords: ['save', 'favorite'] },
                { id: 'rsl-icon-flag', name: 'Flag', category: 'symbols', keywords: ['report', 'mark'] },
                { id: 'rsl-icon-tag', name: 'Tag', category: 'symbols', keywords: ['label', 'price'] },
                { id: 'rsl-icon-percentage', name: 'Percentage', category: 'symbols', keywords: ['percent', 'discount'] },
                { id: 'rsl-icon-percent', name: 'Percent', category: 'symbols', keywords: ['percentage', 'discount'] },
                { id: 'rsl-icon-hashtag', name: 'Hashtag', category: 'symbols', keywords: ['tag', 'number'] },
                { id: 'rsl-icon-hash', name: 'Hash', category: 'symbols', keywords: ['number', 'pound'] },
                { id: 'rsl-icon-at', name: 'At', category: 'symbols', keywords: ['email', 'mention'] },
                { id: 'rsl-icon-dollar-sign', name: 'Dollar Sign', category: 'symbols', keywords: ['money', 'currency'] },
                { id: 'rsl-icon-infinity', name: 'Infinity', category: 'symbols', keywords: ['forever', 'endless'] },
                { id: 'rsl-icon-triangle', name: 'Triangle', category: 'symbols', keywords: ['shape', 'geometry'] },
                { id: 'rsl-icon-hexagon', name: 'Hexagon', category: 'symbols', keywords: ['shape', 'geometry'] },
                { id: 'rsl-icon-octagon', name: 'Octagon', category: 'symbols', keywords: ['shape', 'stop'] },
                { id: 'rsl-icon-shapes', name: 'Shapes', category: 'symbols', keywords: ['geometry', 'design'] },
                { id: 'rsl-icon-thumbtack', name: 'Thumbtack', category: 'symbols', keywords: ['pin', 'attach'] },
                { id: 'rsl-icon-thumbs-up', name: 'Thumbs Up', category: 'symbols', keywords: ['like', 'approve'] },
                { id: 'rsl-icon-thumbs-down', name: 'Thumbs Down', category: 'symbols', keywords: ['dislike', 'disapprove'] },
                { id: 'rsl-icon-target', name: 'Target', category: 'symbols', keywords: ['goal', 'aim'] },
                { id: 'rsl-icon-activity', name: 'Activity', category: 'symbols', keywords: ['pulse', 'health'] },
                { id: 'rsl-icon-trending-up', name: 'Trending Up', category: 'symbols', keywords: ['increase', 'growth'] },
                { id: 'rsl-icon-trending-down', name: 'Trending Down', category: 'symbols', keywords: ['decrease', 'decline'] },
                { id: 'rsl-icon-ticket', name: 'Ticket', category: 'symbols', keywords: ['coupon', 'event'] },
                { id: 'rsl-icon-price-tag', name: 'Price Tag', category: 'symbols', keywords: ['sale', 'cost'] },
                { id: 'rsl-icon-gavel', name: 'Gavel', category: 'symbols', keywords: ['law', 'judge'] },
                { id: 'rsl-icon-balance-scale', name: 'Balance Scale', category: 'symbols', keywords: ['law', 'justice'] },
                { id: 'rsl-icon-scroll', name: 'Scroll', category: 'symbols', keywords: ['document', 'ancient'] },
                { id: 'rsl-icon-tasks', name: 'Tasks', category: 'symbols', keywords: ['checklist', 'todo'] },

                // Development (20 icons)
                { id: 'rsl-icon-terminal', name: 'Terminal', category: 'development', keywords: ['console', 'command'] },
                { id: 'rsl-icon-code', name: 'Code', category: 'development', keywords: ['programming', 'html'] },
                { id: 'rsl-icon-bug', name: 'Bug', category: 'development', keywords: ['error', 'debug'] },
                { id: 'rsl-icon-code-branch', name: 'Code Branch', category: 'development', keywords: ['git', 'version'] },
                { id: 'rsl-icon-git-merge', name: 'Git Merge', category: 'development', keywords: ['version', 'combine'] },
                { id: 'rsl-icon-git-pull-request', name: 'Git Pull Request', category: 'development', keywords: ['version', 'pr'] },
                { id: 'rsl-icon-git-commit', name: 'Git Commit', category: 'development', keywords: ['version', 'save'] },
                { id: 'rsl-icon-brackets', name: 'Brackets', category: 'development', keywords: ['code', 'array'] },
                { id: 'rsl-icon-variable', name: 'Variable', category: 'development', keywords: ['code', 'programming'] },
                { id: 'rsl-icon-function', name: 'Function', category: 'development', keywords: ['code', 'method'] },
                { id: 'rsl-icon-api', name: 'API', category: 'development', keywords: ['interface', 'endpoint'] },
                { id: 'rsl-icon-webhook', name: 'Webhook', category: 'development', keywords: ['callback', 'hook'] },

                // Accessibility (8 icons)
                { id: 'rsl-icon-universal-access', name: 'Universal Access', category: 'accessibility', keywords: ['accessibility', 'a11y'] },
                { id: 'rsl-icon-glasses', name: 'Glasses', category: 'accessibility', keywords: ['vision', 'read'] },
                { id: 'rsl-icon-closed-captioning', name: 'Closed Captioning', category: 'accessibility', keywords: ['subtitles', 'cc'] },

                // Commerce (16 icons)
                { id: 'rsl-icon-credit-card', name: 'Credit Card', category: 'commerce', keywords: ['payment', 'card'] },
                { id: 'rsl-icon-shopping-cart', name: 'Shopping Cart', category: 'commerce', keywords: ['buy', 'cart'] },
                { id: 'rsl-icon-shopping-bag', name: 'Shopping Bag', category: 'commerce', keywords: ['buy', 'bag'] },
                { id: 'rsl-icon-truck', name: 'Truck', category: 'commerce', keywords: ['delivery', 'shipping'] },
                { id: 'rsl-icon-receipt', name: 'Receipt', category: 'commerce', keywords: ['bill', 'invoice'] },
                { id: 'rsl-icon-wallet', name: 'Wallet', category: 'commerce', keywords: ['money', 'payment'] },
                { id: 'rsl-icon-piggy-bank', name: 'Piggy Bank', category: 'commerce', keywords: ['savings', 'money'] },
                { id: 'rsl-icon-bank', name: 'Bank', category: 'commerce', keywords: ['finance', 'money'] },
                { id: 'rsl-icon-store', name: 'Store', category: 'commerce', keywords: ['shop', 'retail'] },

                // Education (6 icons)
                { id: 'rsl-icon-book', name: 'Book', category: 'education', keywords: ['read', 'learn'] },
                { id: 'rsl-icon-book-open', name: 'Book Open', category: 'education', keywords: ['read', 'study'] },
                { id: 'rsl-icon-school', name: 'School', category: 'education', keywords: ['education', 'learn'] },

                // Travel (8 icons)
                { id: 'rsl-icon-plane', name: 'Plane', category: 'travel', keywords: ['flight', 'travel'] },
                { id: 'rsl-icon-car', name: 'Car', category: 'travel', keywords: ['vehicle', 'drive'] },
                { id: 'rsl-icon-bicycle', name: 'Bicycle', category: 'travel', keywords: ['bike', 'cycle'] },
                { id: 'rsl-icon-hotel', name: 'Hotel', category: 'travel', keywords: ['bed', 'stay'] },

                // Food (3 icons)
                { id: 'rsl-icon-utensils', name: 'Utensils', category: 'food', keywords: ['food', 'restaurant'] },
                { id: 'rsl-icon-coffee', name: 'Coffee', category: 'food', keywords: ['drink', 'cafe'] }
            ];

            this.rslIcons = rslIconDefs.map(function(icon) {
                return {
                    id: icon.id,
                    name: icon.name,
                    keywords: icon.keywords || [],
                    category: icon.category,
                    symbolId: icon.id
                };
            });
        },

        /**
         * Create a single icon picker instance
         * @param {HTMLElement} element - Container element
         * @param {Object} options - Configuration options
         * @returns {Object} Instance object
         */
        create: function(element, options) {
            var self = this;

            if (this.instances.has(element)) {
                return this.instances.get(element);
            }

            // Parse options from data attributes and merge with defaults
            var config = this._parseConfig(element, options);

            // Auto-detect RSL icons path if not specified
            if (!config.rslIconsPath) {
                config.rslIconsPath = this._detectRslIconsPath();
            }
            // Store globally for easy access
            this._rslIconsPath = config.rslIconsPath;

            // Create instance object
            // Normalize defaultSource: "fontawesome" -> "fa"
            var normalizedSource = config.defaultSource;
            if (normalizedSource === 'fontawesome') normalizedSource = 'fa';

            var instance = {
                element: element,
                config: config,
                isOpen: false,
                selectedIcon: null,
                focusedIndex: -1,
                recentIcons: [],
                filteredIcons: [],
                currentSource: normalizedSource,
                currentCategory: config.defaultCategory,
                searchQuery: '',
                trigger: null,
                dialog: null,
                backdrop: null,
                searchInput: null,
                grid: null,
                liveRegion: null,
                previewPanel: null
            };

            // Load recent icons from storage
            this._loadRecentIcons(instance);

            // Set initial selected icon
            if (config.value) {
                instance.selectedIcon = this._findIconById(config.value);
            }

            // Build the UI
            this._buildTrigger(instance);
            this._buildDialog(instance);

            // Store instance
            this.instances.set(element, instance);

            // Setup FilterBus if configured
            if (config.filterKey && window.RSL.FilterBus) {
                this._setupFilterBus(instance);
            }

            return instance;
        },

        /**
         * Parse configuration from data attributes
         */
        _parseConfig: function(element, options) {
            var config = Object.assign({}, this.defaults, options || {});

            // Parse data attributes
            var attrs = {
                'sources': 'sources',
                'default-source': 'defaultSource',
                'default-category': 'defaultCategory',
                'show-recent': 'showRecent',
                'show-preview': 'showPreview',
                'show-labels': 'showLabels',
                'show-badges': 'showBadges',
                'columns': 'columns',
                'inline': 'inline',
                'filter-key': 'filterKey',
                'placeholder': 'placeholder',
                'value': 'value',
                'disabled': 'disabled',
                'max-recent': 'maxRecent',
                'close-on-select': 'closeOnSelect',
                'aria-label': 'ariaLabel'
            };

            Object.keys(attrs).forEach(function(attr) {
                var value = element.getAttribute('data-' + attr);
                if (value !== null) {
                    var key = attrs[attr];
                    // Convert boolean strings
                    if (value === 'true') value = true;
                    else if (value === 'false') value = false;
                    // Convert numbers
                    else if (!isNaN(value) && value !== '') value = parseInt(value, 10);

                    config[key] = value;
                }
            });

            return config;
        },

        /**
         * Build the trigger button
         */
        _buildTrigger: function(instance) {
            var self = this;
            var config = instance.config;

            // Hide the original input element
            instance.element.style.display = 'none';

            // Create a wrapper container
            var wrapper = document.createElement('div');
            wrapper.className = 'rsl-icon-picker-wrapper';

            var trigger = document.createElement('button');
            trigger.type = 'button';
            trigger.className = 'rsl-icon-picker-trigger';
            trigger.setAttribute('aria-haspopup', 'dialog');
            trigger.setAttribute('aria-expanded', 'false');
            trigger.setAttribute('aria-label', config.ariaLabel);

            if (config.disabled) {
                trigger.disabled = true;
            }

            // Build trigger content
            var iconContainer = document.createElement('span');
            iconContainer.className = 'rsl-icon-picker-trigger-icon';

            var textSpan = document.createElement('span');
            textSpan.className = 'rsl-icon-picker-trigger-text';

            var chevron = document.createElement('span');
            chevron.className = 'rsl-icon-picker-trigger-chevron';
            chevron.innerHTML = '<i class="fas fa-chevron-down"></i>';

            // Set initial state
            if (instance.selectedIcon) {
                this._renderIconInElement(iconContainer, instance.selectedIcon, config.rslIconsPath);
                textSpan.textContent = instance.selectedIcon.name;
            } else {
                iconContainer.innerHTML = '<i class="fas fa-icons"></i>';
                textSpan.textContent = config.placeholder;
                textSpan.classList.add('placeholder');
            }

            trigger.appendChild(iconContainer);
            trigger.appendChild(textSpan);
            trigger.appendChild(chevron);

            // Event listeners
            trigger.addEventListener('click', function() {
                if (!config.disabled) {
                    self.toggle(instance.element);
                }
            });

            trigger.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    if (!config.disabled) {
                        self.open(instance.element);
                    }
                }
            });

            instance.trigger = trigger;
            instance.wrapper = wrapper;

            // Insert wrapper after the input, then move input into wrapper
            instance.element.parentNode.insertBefore(wrapper, instance.element.nextSibling);
            wrapper.appendChild(trigger);
        },

        /**
         * Build the dialog/modal
         */
        _buildDialog: function(instance) {
            var self = this;
            var config = instance.config;

            // Create backdrop
            if (!config.inline) {
                var backdrop = document.createElement('div');
                backdrop.className = 'rsl-icon-picker-backdrop';
                backdrop.addEventListener('click', function() {
                    self.close(instance.element);
                });
                instance.backdrop = backdrop;
                document.body.appendChild(backdrop);
            }

            // Create dialog
            var dialog = document.createElement('div');
            dialog.className = 'rsl-icon-picker-dialog' + (config.inline ? ' inline' : '');
            dialog.setAttribute('role', 'dialog');
            dialog.setAttribute('aria-modal', config.inline ? 'false' : 'true');
            dialog.setAttribute('aria-label', 'Select an icon');
            dialog.tabIndex = -1;

            // Build dialog content
            dialog.innerHTML = this._buildDialogHTML(instance);

            // Store references
            instance.dialog = dialog;
            instance.searchInput = dialog.querySelector('.rsl-icon-picker-search');
            instance.grid = dialog.querySelector('.rsl-icon-picker-grid');
            instance.liveRegion = dialog.querySelector('.rsl-icon-picker-live');
            instance.previewPanel = dialog.querySelector('.rsl-icon-picker-preview');

            // Setup event listeners
            this._setupDialogEvents(instance);

            // Append to body or element for inline mode
            if (config.inline) {
                instance.element.appendChild(dialog);
                dialog.classList.add('open');
            } else {
                document.body.appendChild(dialog);
            }

            // Initial render
            this._filterIcons(instance);
            this._renderGrid(instance);
        },

        /**
         * Build dialog HTML structure
         */
        _buildDialogHTML: function(instance) {
            var self = this;
            var config = instance.config;
            var uniqueId = Date.now() + '-' + Math.random().toString(36).substr(2, 9);
            var allowedSources = this._getAllowedSources(config);
            var showSourceFilter = allowedSources.length > 1;

            var html = '';

            // Header
            html += '<div class="rsl-icon-picker-header">';
            html += '<h2 class="rsl-icon-picker-title"><i class="fas fa-icons"></i> Select an Icon</h2>';

            // Search
            html += '<div class="rsl-icon-picker-search-wrapper">';
            html += '<i class="fas fa-search rsl-icon-picker-search-icon"></i>';
            html += '<input type="text" class="rsl-icon-picker-search" placeholder="Search icons..." aria-label="Search icons">';
            html += '<button type="button" class="rsl-icon-picker-search-clear" aria-label="Clear search"><i class="fas fa-times"></i></button>';
            html += '</div>';
            html += '<div class="rsl-icon-picker-results-count" aria-live="polite"></div>';

            // Filters
            html += '<div class="rsl-icon-picker-filters">';

            // Source filter - only show if multiple sources available
            if (showSourceFilter) {
                // Normalize defaultSource for comparison
                var defaultSrc = config.defaultSource;
                if (defaultSrc === 'fontawesome') defaultSrc = 'fa';

                html += '<div class="rsl-icon-picker-source-filter" role="radiogroup" aria-label="Icon source">';
                html += '<input type="radio" name="icon-source-' + uniqueId + '" id="source-all-' + uniqueId + '" value="all"' + (defaultSrc === 'all' ? ' checked' : '') + '>';
                html += '<label for="source-all-' + uniqueId + '">All</label>';
                html += '<input type="radio" name="icon-source-' + uniqueId + '" id="source-fa-' + uniqueId + '" value="fa"' + (defaultSrc === 'fa' ? ' checked' : '') + '>';
                html += '<label for="source-fa-' + uniqueId + '">Font Awesome</label>';
                html += '<input type="radio" name="icon-source-' + uniqueId + '" id="source-rsl-' + uniqueId + '" value="rsl"' + (defaultSrc === 'rsl' ? ' checked' : '') + '>';
                html += '<label for="source-rsl-' + uniqueId + '">RSL Icons</label>';
                html += '</div>';
            }

            // Category dropdown
            html += '<select class="rsl-icon-picker-category-select" aria-label="Icon category">';
            var categories = this.categories;
            Object.keys(categories).forEach(function(key) {
                var selected = key === config.defaultCategory ? ' selected' : '';
                html += '<option value="' + key + '"' + selected + '>' + categories[key] + '</option>';
            });
            html += '</select>';

            html += '</div>'; // filters
            html += '</div>'; // header

            // Body
            html += '<div class="rsl-icon-picker-body">';

            // Recent icons
            if (config.showRecent) {
                html += '<div class="rsl-icon-picker-recent">';
                html += '<button type="button" class="rsl-icon-picker-recent-header" aria-expanded="true">';
                html += '<span>Recently Used</span>';
                html += '<i class="fas fa-chevron-down rsl-icon-picker-recent-toggle"></i>';
                html += '</button>';
                html += '<div class="rsl-icon-picker-recent-grid" role="grid" aria-label="Recently used icons"></div>';
                html += '</div>';
            }

            // Icon grid
            html += '<div class="rsl-icon-picker-grid" role="grid" aria-label="Icon selection"></div>';

            html += '</div>'; // body

            // Preview panel
            if (config.showPreview) {
                html += '<div class="rsl-icon-picker-preview">';
                html += '<div class="rsl-icon-picker-preview-inner">';
                html += '<span class="rsl-icon-picker-preview-empty">Select an icon to preview</span>';
                html += '</div>';
                html += '</div>';
            }

            // Footer
            html += '<div class="rsl-icon-picker-footer">';
            html += '<div class="rsl-icon-picker-keyboard-hint">';
            html += '<kbd>↑</kbd><kbd>↓</kbd><kbd>←</kbd><kbd>→</kbd> Navigate &nbsp; <kbd>Enter</kbd> Select &nbsp; <kbd>Esc</kbd> Close';
            html += '</div>';
            html += '<div class="rsl-icon-picker-actions">';
            html += '<button type="button" class="rsl-icon-picker-btn rsl-icon-picker-btn-secondary" data-action="cancel">Cancel</button>';
            html += '<button type="button" class="rsl-icon-picker-btn rsl-icon-picker-btn-primary" data-action="select" disabled>Select Icon</button>';
            html += '</div>';
            html += '</div>'; // footer

            // Live region for screen readers
            html += '<div class="rsl-icon-picker-live" role="status" aria-live="polite" aria-atomic="true"></div>';

            return html;
        },

        /**
         * Setup dialog event listeners
         */
        _setupDialogEvents: function(instance) {
            var self = this;
            var dialog = instance.dialog;
            var config = instance.config;

            // Search input
            var searchTimeout;
            instance.searchInput.addEventListener('input', function(e) {
                clearTimeout(searchTimeout);
                var query = e.target.value;

                // Show/hide clear button
                var clearBtn = dialog.querySelector('.rsl-icon-picker-search-clear');
                clearBtn.classList.toggle('visible', query.length > 0);

                // Debounced search
                searchTimeout = setTimeout(function() {
                    instance.searchQuery = query;
                    self._filterIcons(instance);
                    self._renderGrid(instance);
                }, 300);
            });

            // Clear search button
            dialog.querySelector('.rsl-icon-picker-search-clear').addEventListener('click', function() {
                instance.searchInput.value = '';
                instance.searchQuery = '';
                this.classList.remove('visible');
                self._filterIcons(instance);
                self._renderGrid(instance);
                instance.searchInput.focus();
            });

            // Source filter
            dialog.querySelectorAll('.rsl-icon-picker-source-filter input').forEach(function(radio) {
                radio.addEventListener('change', function(e) {
                    instance.currentSource = e.target.value;
                    self._filterIcons(instance);
                    self._renderGrid(instance);
                    self._announce(instance, 'Showing ' + self._getSourceLabel(instance.currentSource) + ' icons');
                });
            });

            // Category filter
            dialog.querySelector('.rsl-icon-picker-category-select').addEventListener('change', function(e) {
                instance.currentCategory = e.target.value;
                self._filterIcons(instance);
                self._renderGrid(instance);
                self._announce(instance, 'Showing ' + self.categories[instance.currentCategory] + ' category');
            });

            // Recent section toggle
            if (config.showRecent) {
                var recentHeader = dialog.querySelector('.rsl-icon-picker-recent-header');
                if (recentHeader) {
                    recentHeader.addEventListener('click', function() {
                        var isExpanded = this.getAttribute('aria-expanded') === 'true';
                        this.setAttribute('aria-expanded', !isExpanded);
                        var grid = dialog.querySelector('.rsl-icon-picker-recent-grid');
                        grid.classList.toggle('collapsed', isExpanded);
                    });
                }
            }

            // Action buttons
            dialog.querySelector('[data-action="cancel"]').addEventListener('click', function() {
                self.close(instance.element);
            });

            dialog.querySelector('[data-action="select"]').addEventListener('click', function() {
                if (instance.selectedIcon) {
                    self._confirmSelection(instance);
                }
            });

            // Keyboard navigation
            dialog.addEventListener('keydown', function(e) {
                self._handleKeydown(instance, e);
            });

            // Grid click delegation
            instance.grid.addEventListener('click', function(e) {
                var cell = e.target.closest('.rsl-icon-picker-cell');
                if (cell) {
                    var iconId = cell.getAttribute('data-icon-id');
                    self._selectIcon(instance, iconId);
                }
            });

            // Recent grid click delegation
            var recentGrid = dialog.querySelector('.rsl-icon-picker-recent-grid');
            if (recentGrid) {
                recentGrid.addEventListener('click', function(e) {
                    var cell = e.target.closest('.rsl-icon-picker-cell');
                    if (cell) {
                        var iconId = cell.getAttribute('data-icon-id');
                        self._selectIcon(instance, iconId);
                    }
                });
            }
        },

        /**
         * Handle keyboard navigation
         */
        _handleKeydown: function(instance, e) {
            var self = this;
            var cells = instance.grid.querySelectorAll('.rsl-icon-picker-cell');
            var columns = instance.config.columns;

            // Adjust columns for responsive
            if (window.innerWidth <= 640) columns = 4;
            if (window.innerWidth <= 480) columns = 3;

            switch (e.key) {
                case 'Escape':
                    e.preventDefault();
                    this.close(instance.element);
                    break;

                case 'Enter':
                case ' ':
                    // Let native form elements handle their own Enter/Space
                    if (document.activeElement.tagName === 'SELECT' ||
                        document.activeElement.tagName === 'INPUT' ||
                        document.activeElement.type === 'radio') {
                        // Don't prevent default - let native behavior work
                        break;
                    }
                    if (document.activeElement.classList.contains('rsl-icon-picker-cell')) {
                        e.preventDefault();
                        var iconId = document.activeElement.getAttribute('data-icon-id');
                        this._selectIcon(instance, iconId);
                        if (instance.config.closeOnSelect && instance.selectedIcon) {
                            this._confirmSelection(instance);
                        }
                    }
                    break;

                case 'ArrowUp':
                case 'ArrowDown':
                case 'ArrowLeft':
                case 'ArrowRight':
                    // Let native form elements handle their own arrow key navigation
                    if (document.activeElement.type === 'radio' ||
                        document.activeElement.tagName === 'SELECT' ||
                        document.activeElement.tagName === 'INPUT') {
                        // Don't prevent default - let native behavior work
                        break;
                    }
                    e.preventDefault();
                    if (e.key === 'ArrowUp') {
                        this._moveFocus(instance, cells, -columns);
                    } else if (e.key === 'ArrowDown') {
                        this._moveFocus(instance, cells, columns);
                    } else if (e.key === 'ArrowLeft') {
                        this._moveFocus(instance, cells, -1);
                    } else if (e.key === 'ArrowRight') {
                        this._moveFocus(instance, cells, 1);
                    }
                    break;

                case 'Home':
                    e.preventDefault();
                    if (cells.length > 0) {
                        instance.focusedIndex = 0;
                        cells[0].focus();
                    }
                    break;

                case 'End':
                    e.preventDefault();
                    if (cells.length > 0) {
                        instance.focusedIndex = cells.length - 1;
                        cells[cells.length - 1].focus();
                    }
                    break;

                case 'Tab':
                    // Focus trap - ensure focus stays within dialog
                    if (!instance.config.inline) {
                        var focusableElements = Array.from(instance.dialog.querySelectorAll(
                            'button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
                        )).filter(function(el) {
                            // Filter out elements that are not visible
                            return el.offsetParent !== null || el.type === 'radio';
                        });

                        if (focusableElements.length === 0) break;

                        var firstFocusable = focusableElements[0];
                        var lastFocusable = focusableElements[focusableElements.length - 1];

                        // If focus is outside dialog, bring it back
                        if (!instance.dialog.contains(document.activeElement)) {
                            e.preventDefault();
                            firstFocusable.focus();
                            break;
                        }

                        if (e.shiftKey && document.activeElement === firstFocusable) {
                            e.preventDefault();
                            lastFocusable.focus();
                        } else if (!e.shiftKey && document.activeElement === lastFocusable) {
                            e.preventDefault();
                            firstFocusable.focus();
                        }
                    }
                    break;
            }
        },

        /**
         * Handle focus trap for modal dialog
         */
        _handleFocusTrap: function(instance, e) {
            var focusableElements = Array.from(instance.dialog.querySelectorAll(
                'button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])'
            )).filter(function(el) {
                // Filter out elements that are not visible (but include radio buttons)
                return el.offsetParent !== null || el.type === 'radio';
            });

            if (focusableElements.length === 0) return;

            var firstFocusable = focusableElements[0];
            var lastFocusable = focusableElements[focusableElements.length - 1];

            // If focus is outside dialog, bring it back
            if (!instance.dialog.contains(document.activeElement)) {
                e.preventDefault();
                firstFocusable.focus();
                return;
            }

            if (e.shiftKey && document.activeElement === firstFocusable) {
                e.preventDefault();
                lastFocusable.focus();
            } else if (!e.shiftKey && document.activeElement === lastFocusable) {
                e.preventDefault();
                firstFocusable.focus();
            }
        },

        /**
         * Move focus in grid
         */
        _moveFocus: function(instance, cells, delta) {
            if (cells.length === 0) return;

            var currentIndex = instance.focusedIndex;
            if (currentIndex < 0) currentIndex = 0;

            var newIndex = currentIndex + delta;
            if (newIndex < 0) newIndex = 0;
            if (newIndex >= cells.length) newIndex = cells.length - 1;

            instance.focusedIndex = newIndex;
            cells[newIndex].focus();

            // Announce icon name
            var iconId = cells[newIndex].getAttribute('data-icon-id');
            var icon = this._findIconById(iconId);
            if (icon) {
                this._announce(instance, icon.name + ', ' + this._getSourceLabel(icon.source));
            }
        },

        /**
         * Detect the path to RSL icons SVG sprite
         */
        _detectRslIconsPath: function() {
            // Try to find an existing RSL icon use element on the page
            var existingUse = document.querySelector('svg use[href*="rsl-icons.svg"]');
            if (existingUse) {
                var href = existingUse.getAttribute('href') || existingUse.getAttribute('xlink:href');
                if (href) {
                    // Extract the path before the #
                    var path = href.split('#')[0];
                    if (path) return path;
                }
            }

            // Try common paths based on current page location
            var pathDepth = window.location.pathname.split('/').filter(Boolean).length;
            var basePath = '';

            // Build relative path based on depth
            // Most doc pages are 3 levels deep: /docs/components/icon-picker/
            if (pathDepth >= 3) {
                basePath = '../'.repeat(pathDepth - 1);
            } else if (pathDepth === 2) {
                basePath = '../';
            } else {
                basePath = './';
            }

            return basePath + 'images/rsl-icons.svg';
        },

        /**
         * Get allowed sources based on config
         */
        _getAllowedSources: function(config) {
            var sources = config.sources || 'all';
            if (sources === 'all') {
                return ['fa', 'rsl'];
            }
            // Normalize source names
            return sources.split(',').map(function(s) {
                s = s.trim().toLowerCase();
                if (s === 'fontawesome') return 'fa';
                return s;
            });
        },

        /**
         * Filter icons based on current filters
         */
        _filterIcons: function(instance) {
            var self = this;
            var config = instance.config;
            var query = instance.searchQuery.toLowerCase().trim();
            var source = instance.currentSource;
            var category = instance.currentCategory;
            var allowedSources = this._getAllowedSources(config);

            instance.filteredIcons = this.allIcons.filter(function(icon) {
                // First check if this source is allowed at all
                if (allowedSources.indexOf(icon.source) === -1) return false;

                // Source filter (user's current selection)
                if (source !== 'all' && icon.source !== source) return false;

                // Category filter
                if (category !== 'all' && icon.category !== category) return false;

                // Search filter
                if (query) {
                    var searchText = (icon.name + ' ' + (icon.keywords || []).join(' ')).toLowerCase();
                    if (!searchText.includes(query)) return false;
                }

                return true;
            });

            // Update results count
            var countEl = instance.dialog.querySelector('.rsl-icon-picker-results-count');
            if (countEl) {
                countEl.textContent = instance.filteredIcons.length + ' icons found';
            }
        },

        /**
         * Render the icon grid
         */
        _renderGrid: function(instance) {
            var self = this;
            var config = instance.config;
            var grid = instance.grid;

            // Clear grid
            grid.innerHTML = '';

            // Check if empty
            if (instance.filteredIcons.length === 0) {
                grid.innerHTML = this._buildEmptyState();
                return;
            }

            // Render icons
            instance.filteredIcons.forEach(function(icon, index) {
                var cell = self._buildIconCell(instance, icon, index);
                grid.appendChild(cell);
            });

            // Also render recent icons
            this._renderRecentIcons(instance);
        },

        /**
         * Build empty state HTML
         */
        _buildEmptyState: function() {
            return '<div class="rsl-icon-picker-empty">' +
                '<div class="rsl-icon-picker-empty-icon"><i class="fas fa-search"></i></div>' +
                '<h3 class="rsl-icon-picker-empty-title">No icons found</h3>' +
                '<p class="rsl-icon-picker-empty-text">Try adjusting your search or filters</p>' +
                '</div>';
        },

        /**
         * Build a single icon cell
         */
        _buildIconCell: function(instance, icon, index) {
            var self = this;
            var config = instance.config;

            var cell = document.createElement('button');
            cell.type = 'button';
            cell.className = 'rsl-icon-picker-cell';
            cell.setAttribute('role', 'gridcell');
            cell.setAttribute('data-icon-id', icon.id);
            cell.setAttribute('aria-label', icon.name + ' from ' + this._getSourceLabel(icon.source));
            cell.tabIndex = index === 0 ? 0 : -1;

            // Check if selected
            if (instance.selectedIcon && instance.selectedIcon.id === icon.id) {
                cell.setAttribute('aria-selected', 'true');
            }

            // Icon
            var iconEl = document.createElement('span');
            iconEl.className = 'rsl-icon-picker-cell-icon';
            this._renderIconInElement(iconEl, icon, config.rslIconsPath);
            cell.appendChild(iconEl);

            // Label
            if (config.showLabels) {
                var label = document.createElement('span');
                label.className = 'rsl-icon-picker-cell-label';
                label.textContent = icon.name.length > 10 ? icon.name.substring(0, 10) + '...' : icon.name;
                label.title = icon.name;
                cell.appendChild(label);
            }

            // Source badge
            if (config.showBadges) {
                var badge = document.createElement('span');
                badge.className = 'rsl-icon-picker-cell-badge ' + icon.source;
                badge.textContent = icon.source === 'fa' ? 'FA' : 'RSL';
                cell.appendChild(badge);
            }

            return cell;
        },

        /**
         * Render recent icons section
         */
        _renderRecentIcons: function(instance) {
            if (!instance.config.showRecent) return;

            var recentGrid = instance.dialog.querySelector('.rsl-icon-picker-recent-grid');
            if (!recentGrid) return;

            recentGrid.innerHTML = '';

            if (instance.recentIcons.length === 0) {
                var emptyMsg = document.createElement('span');
                emptyMsg.style.cssText = 'color: var(--rsl-icon-picker-text-muted); font-size: 0.85rem; padding: 0.5rem;';
                emptyMsg.textContent = 'No recently used icons';
                recentGrid.appendChild(emptyMsg);
                return;
            }

            var self = this;
            instance.recentIcons.forEach(function(iconId, index) {
                var icon = self._findIconById(iconId);
                if (icon) {
                    var cell = self._buildIconCell(instance, icon, index);
                    cell.tabIndex = -1; // Not in main tab flow
                    recentGrid.appendChild(cell);
                }
            });
        },

        /**
         * Render icon in element (FA or RSL)
         */
        _renderIconInElement: function(element, icon, rslIconsPath) {
            if (icon.source === 'fa') {
                element.innerHTML = '<i class="' + icon.class + '"></i>';
            } else {
                // RSL SVG icon - use external sprite path
                var spritePath = rslIconsPath || this._rslIconsPath || '';
                element.innerHTML = '<svg class="rsl-icon"><use href="' + spritePath + '#' + icon.symbolId + '"></use></svg>';
            }
        },

        /**
         * Select an icon
         */
        _selectIcon: function(instance, iconId) {
            var icon = this._findIconById(iconId);
            if (!icon) return;

            // Update selection
            instance.selectedIcon = icon;

            // Update cell states
            instance.dialog.querySelectorAll('.rsl-icon-picker-cell').forEach(function(cell) {
                var isSelected = cell.getAttribute('data-icon-id') === iconId;
                cell.setAttribute('aria-selected', isSelected ? 'true' : 'false');
            });

            // Update preview
            this._updatePreview(instance);

            // Enable select button
            var selectBtn = instance.dialog.querySelector('[data-action="select"]');
            if (selectBtn) {
                selectBtn.disabled = false;
            }

            // Announce
            this._announce(instance, icon.name + ' selected');

            // Auto-select if configured
            if (instance.config.closeOnSelect) {
                this._confirmSelection(instance);
            }
        },

        /**
         * Update preview panel
         */
        _updatePreview: function(instance) {
            if (!instance.config.showPreview) return;

            var preview = instance.previewPanel;
            if (!preview) return;

            var icon = instance.selectedIcon;
            if (!icon) {
                preview.querySelector('.rsl-icon-picker-preview-inner').innerHTML =
                    '<span class="rsl-icon-picker-preview-empty">Select an icon to preview</span>';
                return;
            }

            var self = this;
            var spritePath = instance.config.rslIconsPath || this._rslIconsPath || '';
            var sizes = [16, 24, 32];
            var sizesHtml = '<div class="rsl-icon-picker-preview-sizes">';
            sizes.forEach(function(size) {
                sizesHtml += '<div class="rsl-icon-picker-preview-size">';
                sizesHtml += '<span class="rsl-icon-picker-preview-size-icon size-' + size + '">';
                if (icon.source === 'fa') {
                    sizesHtml += '<i class="' + icon.class + '"></i>';
                } else {
                    sizesHtml += '<svg class="rsl-icon"><use href="' + spritePath + '#' + icon.symbolId + '"></use></svg>';
                }
                sizesHtml += '</span>';
                sizesHtml += '<span class="rsl-icon-picker-preview-size-label">' + size + 'px</span>';
                sizesHtml += '</div>';
            });
            sizesHtml += '</div>';

            var codeHtml = icon.source === 'fa'
                ? '&lt;i class="' + icon.class + '"&gt;&lt;/i&gt;'
                : '&lt;svg&gt;&lt;use href="#' + icon.symbolId + '"&gt;&lt;/use&gt;&lt;/svg&gt;';

            var html = sizesHtml +
                '<div class="rsl-icon-picker-preview-info">' +
                '<p class="rsl-icon-picker-preview-name">' + icon.name + '</p>' +
                '<p class="rsl-icon-picker-preview-source">' + this._getSourceLabel(icon.source) + '</p>' +
                '</div>' +
                '<div class="rsl-icon-picker-preview-code">' +
                '<code>' + codeHtml + '</code>' +
                '<button type="button" class="rsl-icon-picker-preview-copy" aria-label="Copy code">' +
                '<i class="fas fa-copy"></i>' +
                '</button>' +
                '</div>';

            preview.querySelector('.rsl-icon-picker-preview-inner').innerHTML = html;

            // Setup copy button
            preview.querySelector('.rsl-icon-picker-preview-copy').addEventListener('click', function() {
                var code = icon.source === 'fa'
                    ? '<i class="' + icon.class + '"></i>'
                    : '<svg class="rsl-icon"><use href="#' + icon.symbolId + '"></use></svg>';
                navigator.clipboard.writeText(code).then(function() {
                    self._announce(instance, 'Code copied to clipboard');
                });
            });
        },

        /**
         * Confirm selection and close
         */
        _confirmSelection: function(instance) {
            var icon = instance.selectedIcon;
            if (!icon) return;

            // Add to recent
            this._addToRecent(instance, icon.id);

            // Update trigger
            var iconContainer = instance.trigger.querySelector('.rsl-icon-picker-trigger-icon');
            var textSpan = instance.trigger.querySelector('.rsl-icon-picker-trigger-text');

            this._renderIconInElement(iconContainer, icon, instance.config.rslIconsPath);
            textSpan.textContent = icon.name;
            textSpan.classList.remove('placeholder');

            // Build return value
            var spritePath = instance.config.rslIconsPath || this._rslIconsPath || '';
            var value = {
                source: icon.source,
                id: icon.id,
                name: icon.name,
                category: icon.category,
                html: icon.source === 'fa'
                    ? '<i class="' + icon.class + '"></i>'
                    : '<svg class="rsl-icon"><use href="' + spritePath + '#' + icon.symbolId + '"></use></svg>'
            };

            if (icon.source === 'fa') {
                value.class = icon.class;
            } else {
                value.symbolId = icon.symbolId;
            }

            // Store value on element
            instance.element.setAttribute('data-value', icon.id);

            // Dispatch event
            var event = new CustomEvent('rsl-icon-change', {
                bubbles: true,
                detail: value
            });
            instance.element.dispatchEvent(event);

            // Close
            this.close(instance.element);
        },

        /**
         * Open the picker
         */
        open: function(element) {
            var self = this;
            var instance = this.instances.get(element);
            if (!instance || instance.isOpen || instance.config.inline) return;

            instance.isOpen = true;
            instance.trigger.setAttribute('aria-expanded', 'true');
            instance.dialog.classList.add('open');

            if (instance.backdrop) {
                instance.backdrop.classList.add('open');
            }

            // Focus search input
            setTimeout(function() {
                instance.searchInput.focus();
            }, 100);

            // Add document-level focus trap
            instance._focusTrapHandler = function(e) {
                if (e.key === 'Tab' && !instance.config.inline) {
                    self._handleFocusTrap(instance, e);
                }
            };
            document.addEventListener('keydown', instance._focusTrapHandler);

            // Prevent body scroll
            document.body.style.overflow = 'hidden';

            // Dispatch event
            var event = new CustomEvent('rsl-icon-picker-open', { bubbles: true });
            element.dispatchEvent(event);
        },

        /**
         * Close the picker
         */
        close: function(element) {
            var instance = this.instances.get(element);
            if (!instance || !instance.isOpen || instance.config.inline) return;

            instance.isOpen = false;
            instance.trigger.setAttribute('aria-expanded', 'false');
            instance.dialog.classList.remove('open');

            if (instance.backdrop) {
                instance.backdrop.classList.remove('open');
            }

            // Remove document-level focus trap
            if (instance._focusTrapHandler) {
                document.removeEventListener('keydown', instance._focusTrapHandler);
                instance._focusTrapHandler = null;
            }

            // Return focus to trigger
            instance.trigger.focus();

            // Restore body scroll
            document.body.style.overflow = '';

            // Dispatch event
            var event = new CustomEvent('rsl-icon-picker-close', { bubbles: true });
            element.dispatchEvent(event);
        },

        /**
         * Toggle the picker
         */
        toggle: function(element) {
            var instance = this.instances.get(element);
            if (!instance) return;

            if (instance.isOpen) {
                this.close(element);
            } else {
                this.open(element);
            }
        },

        /**
         * Get current value
         */
        getValue: function(element) {
            var instance = this.instances.get(element);
            if (!instance || !instance.selectedIcon) return null;

            var icon = instance.selectedIcon;
            var spritePath = instance.config.rslIconsPath || this._rslIconsPath || '';
            return {
                source: icon.source,
                id: icon.id,
                name: icon.name,
                category: icon.category,
                html: icon.source === 'fa'
                    ? '<i class="' + icon.class + '"></i>'
                    : '<svg class="rsl-icon"><use href="' + spritePath + '#' + icon.symbolId + '"></use></svg>',
                class: icon.class,
                symbolId: icon.symbolId
            };
        },

        /**
         * Set value programmatically
         */
        setValue: function(element, iconId) {
            var instance = this.instances.get(element);
            if (!instance) return;

            var icon = this._findIconById(iconId);
            if (!icon) return;

            instance.selectedIcon = icon;

            // Update trigger
            var iconContainer = instance.trigger.querySelector('.rsl-icon-picker-trigger-icon');
            var textSpan = instance.trigger.querySelector('.rsl-icon-picker-trigger-text');

            this._renderIconInElement(iconContainer, icon, instance.config.rslIconsPath);
            textSpan.textContent = icon.name;
            textSpan.classList.remove('placeholder');

            // Update element attribute
            element.setAttribute('data-value', iconId);

            // Update grid if open
            if (instance.isOpen) {
                this._renderGrid(instance);
                this._updatePreview(instance);
            }
        },

        /**
         * Clear selection
         */
        clear: function(element) {
            var instance = this.instances.get(element);
            if (!instance) return;

            instance.selectedIcon = null;

            // Reset trigger
            var iconContainer = instance.trigger.querySelector('.rsl-icon-picker-trigger-icon');
            var textSpan = instance.trigger.querySelector('.rsl-icon-picker-trigger-text');

            iconContainer.innerHTML = '<i class="fas fa-icons"></i>';
            textSpan.textContent = instance.config.placeholder;
            textSpan.classList.add('placeholder');

            // Remove value attribute
            element.removeAttribute('data-value');

            // Update grid if open
            if (instance.isOpen) {
                this._renderGrid(instance);
                this._updatePreview(instance);
            }

            // Dispatch event
            var event = new CustomEvent('rsl-icon-clear', { bubbles: true });
            element.dispatchEvent(event);
        },

        /**
         * Destroy instance
         */
        destroy: function(element) {
            var instance = this.instances.get(element);
            if (!instance) return;

            // Close if open
            this.close(element);

            // Remove DOM elements
            if (instance.trigger) {
                instance.trigger.remove();
            }
            if (instance.dialog) {
                instance.dialog.remove();
            }
            if (instance.backdrop) {
                instance.backdrop.remove();
            }

            // Remove from instances
            this.instances.delete(element);
        },

        /**
         * Find icon by ID
         */
        _findIconById: function(iconId) {
            return this.allIcons.find(function(icon) {
                return icon.id === iconId;
            });
        },

        /**
         * Get source label
         */
        _getSourceLabel: function(source) {
            if (source === 'fa') return 'Font Awesome';
            if (source === 'rsl') return 'RSL Icons';
            return 'All';
        },

        /**
         * Announce to screen readers
         */
        _announce: function(instance, message) {
            if (instance.liveRegion) {
                instance.liveRegion.textContent = message;
            }
        },

        /**
         * Load recent icons from localStorage
         */
        _loadRecentIcons: function(instance) {
            try {
                var stored = localStorage.getItem(instance.config.recentStorageKey);
                if (stored) {
                    instance.recentIcons = JSON.parse(stored);
                }
            } catch (e) {
                console.warn('[RSL.IconPicker] Error loading recent icons:', e);
            }
        },

        /**
         * Add icon to recent list
         */
        _addToRecent: function(instance, iconId) {
            // Remove if already exists
            var index = instance.recentIcons.indexOf(iconId);
            if (index > -1) {
                instance.recentIcons.splice(index, 1);
            }

            // Add to front
            instance.recentIcons.unshift(iconId);

            // Trim to max
            if (instance.recentIcons.length > instance.config.maxRecent) {
                instance.recentIcons = instance.recentIcons.slice(0, instance.config.maxRecent);
            }

            // Save to localStorage
            try {
                localStorage.setItem(instance.config.recentStorageKey, JSON.stringify(instance.recentIcons));
            } catch (e) {
                console.warn('[RSL.IconPicker] Error saving recent icons:', e);
            }
        },

        /**
         * Setup FilterBus integration
         */
        _setupFilterBus: function(instance) {
            var self = this;
            var filterKey = instance.config.filterKey;

            window.RSL.FilterBus.subscribe('icon-picker-' + Date.now(), function(filters) {
                var value = filters[filterKey];
                if (value) {
                    // Filter icons by the external filter value (could be category)
                    instance.currentCategory = value;
                    var categorySelect = instance.dialog.querySelector('.rsl-icon-picker-category-select');
                    if (categorySelect) {
                        categorySelect.value = value;
                    }
                    self._filterIcons(instance);
                    self._renderGrid(instance);
                }
            }, { keys: [filterKey] });
        }

    };

    // Auto-initialize on DOMContentLoaded
    document.addEventListener('DOMContentLoaded', function() {
        window.RSL.IconPicker.init();
    });

})();
