oleg
/
alpine
mirror da https://github.com/alpinejs/alpine.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<html>
    <!-- <script src="./packages/intersect/dist/cdn.js" defer></script>
    <script src="./packages/morph/dist/cdn.js" defer></script>
    <script src="./packages/persist/dist/cdn.js"></script>
    <script src="./packages/focus/dist/cdn.js"></script>
    <script src="./packages/mask/dist/cdn.js"></script>
    <script src="./packages/ui/dist/cdn.js" defer></script> -->
    <script src="./packages/collapse/dist/cdn.js" defer></script>
    <script src="./packages/focus/dist/cdn.js"></script>
    <script src="./packages/ui/dist/cdn.js" defer></script>
    <script src="./packages/anchor/dist/cdn.js" defer></script>
    <script src="./packages/signal/dist/cdn.js" defer></script>
    <script src="./packages/alpinejs/dist/cdn.js" defer></script>
    <script src="//cdn.tailwindcss.com"></script>
    <!-- <script src="//cdn.tailwindcss.com"></script> -->


<!-- <div
    x-data="{
        query: '',
        selected: null,
        frameworks: [
        {'id': 1, 'name': 'KXIiIxgnXL', 'disabled': false}, {'id': 2, 'name': 'AKJIDEdIrW', 'disabled': false}, {'id': 3, 'name': 'UQLWLuFXeq', 'disabled': false}, {'id': 4, 'name': 'ihUbJGVBYx', 'disabled': false}, {'id': 5, 'name': 'GTnWXNXKTc', 'disabled': false}, {'id': 6, 'name': 'fHSOBixAme', 'disabled': false}, {'id': 7, 'name': 'UDkknzscEU', 'disabled': false}, {'id': 8, 'name': 'LOGipVmmHW', 'disabled': false}, {'id': 9, 'name': 'EFJFpwKQOj', 'disabled': false}, {'id': 10, 'name': 'PyoSfpdFxC', 'disabled': false}, {'id': 11, 'name': 'OJDXuhELof', 'disabled': false}, {'id': 12, 'name': 'cuIVELuaED', 'disabled': false}, {'id': 13, 'name': 'MWKVykuDYS', 'disabled': false}, {'id': 14, 'name': 'fOZulRCQuA', 'disabled': false}, {'id': 15, 'name': 'BKedVrncDt', 'disabled': false}, {'id': 16, 'name': 'AxDkoZyFJc', 'disabled': false}, {'id': 17, 'name': 'xuBWLlgcOj', 'disabled': false}, {'id': 18, 'name': 'fjikjrxBTY', 'disabled': false}, {'id': 19, 'name': 'cYPSBDkKuT', 'disabled': false}, {'id': 20, 'name': 'fUHPmYsjLS', 'disabled': false}, {'id': 21, 'name': 'WwFhCwyilW', 'disabled': false}, {'id': 22, 'name': 'oCuEIZQlqA', 'disabled': false}, {'id': 23, 'name': 'laDUAAKtDJ', 'disabled': false}, {'id': 24, 'name': 'EzlJUxCaiX', 'disabled': false}, {'id': 25, 'name': 'pwqlEysEjj', 'disabled': false}, {'id': 26, 'name': 'epxRsEhVND', 'disabled': false}, {'id': 27, 'name': 'cZIBOEFdeA', 'disabled': false}, {'id': 28, 'name': 'YCAmtySoug', 'disabled': false}, {'id': 29, 'name': 'IkQopAcUAY', 'disabled': false}, {'id': 30, 'name': 'HBmJvWiXfq', 'disabled': false}, {'id': 31, 'name': 'keJyfpRjPn', 'disabled': false}, {'id': 32, 'name': 'lxGKCSOiLf', 'disabled': false}, {'id': 33, 'name': 'rvbSgiPxtr', 'disabled': false}, {'id': 34, 'name': 'LNpgxkKZpg', 'disabled': false}, {'id': 35, 'name': 'TaNRlGknzm', 'disabled': false}, {'id': 36, 'name': 'RxdxGRiJzX', 'disabled': false}, {'id': 37, 'name': 'YTqvSukepc', 'disabled': false}, {'id': 38, 'name': 'zaKVMBTSYu', 'disabled': false}, {'id': 39, 'name': 'AZoHHyISjg', 'disabled': false}, {'id': 40, 'name': 'uInRltzkxq', 'disabled': false}, {'id': 41, 'name': 'YjhdHybLKb', 'disabled': false}, {'id': 42, 'name': 'YOFwVvcPxN', 'disabled': false}, {'id': 43, 'name': 'DfaiKdQiOU', 'disabled': false}, {'id': 44, 'name': 'AjlddzndcO', 'disabled': false}, {'id': 45, 'name': 'hBPYxlqgMV', 'disabled': false}, {'id': 46, 'name': 'fHvpZhoiFR', 'disabled': false}, {'id': 47, 'name': 'RIzwliHDtg', 'disabled': false}, {'id': 48, 'name': 'xHGiGNBNGK', 'disabled': false}, {'id': 49, 'name': 'YCxMQUaOLh', 'disabled': false}, {'id': 50, 'name': 'ceQFcGovGJ', 'disabled': false}, {'id': 51, 'name': 'DZdrtriEIS', 'disabled': false}, {'id': 52, 'name': 'DrvTnGJhLh', 'disabled': false}, {'id': 53, 'name': 'GjNDAhFvJq', 'disabled': false}, {'id': 54, 'name': 'qeRLdsHhMk', 'disabled': false}, {'id': 55, 'name': 'IFurLAkWHg', 'disabled': false}, {'id': 56, 'name': 'JtjZvsoiUl', 'disabled': false}, {'id': 57, 'name': 'KgkFwMgtLh', 'disabled': false}, {'id': 58, 'name': 'yCysfFMZaY', 'disabled': false}, {'id': 59, 'name': 'dphkpJEZIo', 'disabled': false}, {'id': 60, 'name': 'SGJumkKNDr', 'disabled': false}, {'id': 61, 'name': 'sJQIfXKtHb', 'disabled': false}, {'id': 62, 'name': 'hwZnsaFkmg', 'disabled': false}, {'id': 63, 'name': 'gLcSEtTPds', 'disabled': false}, {'id': 64, 'name': 'ciyAdjanRD', 'disabled': false}, {'id': 65, 'name': 'ChqcuxAXZm', 'disabled': false}, {'id': 66, 'name': 'HewKxcMeBn', 'disabled': false}, {'id': 67, 'name': 'DAErMjcZFf', 'disabled': false}, {'id': 68, 'name': 'ixFWJlaCky', 'disabled': false}, {'id': 69, 'name': 'mOANWKDPlP', 'disabled': false}, {'id': 70, 'name': 'XbLyqIXGPL', 'disabled': false}, {'id': 71, 'name': 'ltDyAmGMwp', 'disabled': false}, {'id': 72, 'name': 'pPosoLgCHN', 'disabled': false}, {'id': 73, 'name': 'RnnOsJKtjV', 'disabled': false}, {'id': 74, 'name': 'jVHvCXzvPD', 'disabled': false}, {'id': 75, 'name': 'LApyqYOWnt', 'disabled': false}, {'id': 76, 'name': 'IUDmMgERly', 'disabled': false}, {'id': 77, 'name': 'QwnvmTdWMp', 'disabled': false}, {'id': 78, 'name': 'EyQCsScGds', 'disabled': false}, {'id': 79, 'name': 'IAhxrwydmd', 'disabled': false}, {'id': 80, 'name': 'JuysrXJnYB', 'disabled': false}, {'id': 81, 'name': 'VQQLQLmqGX', 'disabled': false}, {'id': 82, 'name': 'uXmLzBrGez', 'disabled': false}, {'id': 83, 'name': 'YUURVjXAZK', 'disabled': false}, {'id': 84, 'name': 'AdMAqofDKP', 'disabled': false}, {'id': 85, 'name': 'kHQBBeWozW', 'disabled': false}, {'id': 86, 'name': 'WHgNwRfQwL', 'disabled': false}, {'id': 87, 'name': 'ccMPuVRjxK', 'disabled': false}, {'id': 88, 'name': 'DedZkuXNZP', 'disabled': false}, {'id': 89, 'name': 'PXZGujcEAM', 'disabled': false}, {'id': 90, 'name': 'lFiYHupMfB', 'disabled': false}, {'id': 91, 'name': 'GPMZNBcYKL', 'disabled': false}, {'id': 92, 'name': 'fEUErAwade', 'disabled': false}, {'id': 93, 'name': 'NYQQyrqGGF', 'disabled': false}, {'id': 94, 'name': 'xNUtrmmret', 'disabled': false}, {'id': 95, 'name': 'gtvTlmnBfN', 'disabled': false}, {'id': 96, 'name': 'KySalIaVqZ', 'disabled': false}, {'id': 97, 'name': 'rGnJSXNOdc', 'disabled': false}, {'id': 98, 'name': 'cdALAILUUV', 'disabled': false}, {'id': 99, 'name': 'hsxObuOspS', 'disabled': false},
        {'id': 100, 'name': 'rSyESUKsxu', 'disabled': false}, {'id': 101, 'name': 'NRzYPBbLVH', 'disabled': false}, {'id': 102, 'name': 'nshqGdumFa', 'disabled': false}, {'id': 103, 'name': 'znDiHYeUqy', 'disabled': false}, {'id': 104, 'name': 'xwfvSKyCuo', 'disabled': false}, {'id': 105, 'name': 'fJnGzTTjDC', 'disabled': false}, {'id': 106, 'name': 'LbzDaauJvC', 'disabled': false}, {'id': 107, 'name': 'khKurrsDjS', 'disabled': false}, {'id': 108, 'name': 'xgnugltCLb', 'disabled': false}, {'id': 109, 'name': 'FqfyWITBaw', 'disabled': false}, {'id': 110, 'name': 'OfJBYMCdKG', 'disabled': false}, {'id': 111, 'name': 'LiQJOENnLO', 'disabled': false}, {'id': 112, 'name': 'GaLSUdkVcs', 'disabled': false}, {'id': 113, 'name': 'hMgyTodQmu', 'disabled': false}, {'id': 114, 'name': 'LUyWRaOpAu', 'disabled': false}, {'id': 115, 'name': 'icRBkMmFQZ', 'disabled': false}, {'id': 116, 'name': 'ckhOgpVUjO', 'disabled': false}, {'id': 117, 'name': 'PwnGwFGEeN', 'disabled': false}, {'id': 118, 'name': 'nQETnbanVY', 'disabled': false}, {'id': 119, 'name': 'wDCyHdGjvz', 'disabled': false}, {'id': 120, 'name': 'qTZzuHymQb', 'disabled': false}, {'id': 121, 'name': 'WDBhlUHRmg', 'disabled': false}, {'id': 122, 'name': 'OlEBOeEnFG', 'disabled': false}, {'id': 123, 'name': 'hZafsvsCbk', 'disabled': false}, {'id': 124, 'name': 'qzvpYcyDWW', 'disabled': false}, {'id': 125, 'name': 'SMqWKexqYg', 'disabled': false}, {'id': 126, 'name': 'AOsbGwgtjt', 'disabled': false}, {'id': 127, 'name': 'LVlJqqAmQO', 'disabled': false}, {'id': 128, 'name': 'YOxZzWyWvj', 'disabled': false}, {'id': 129, 'name': 'nCMhkqRuep', 'disabled': false}, {'id': 130, 'name': 'ewDcHczOox', 'disabled': false}, {'id': 131, 'name': 'HQhmikcEbo', 'disabled': false}, {'id': 132, 'name': 'mgYwdZEXjp', 'disabled': false}, {'id': 133, 'name': 'gsQMXwBDbo', 'disabled': false}, {'id': 134, 'name': 'vmKrLiBmic', 'disabled': false}, {'id': 135, 'name': 'uaSvNtkEHe', 'disabled': false}, {'id': 136, 'name': 'ovEulNiSLW', 'disabled': false}, {'id': 137, 'name': 'tdONWcqXOX', 'disabled': false}, {'id': 138, 'name': 'KdCWkSFyJB', 'disabled': false}, {'id': 139, 'name': 'ojaSLveBvX', 'disabled': false}, {'id': 140, 'name': 'UBJsaSRxeO', 'disabled': false}, {'id': 141, 'name': 'uxKMCAoCXi', 'disabled': false}, {'id': 142, 'name': 'zMYrVGngHD', 'disabled': false}, {'id': 143, 'name': 'vXMFkeTFlb', 'disabled': false}, {'id': 144, 'name': 'uxlKsJAAts', 'disabled': false}, {'id': 145, 'name': 'fBtWtirrdz', 'disabled': false}, {'id': 146, 'name': 'YZnvETZxMy', 'disabled': false}, {'id': 147, 'name': 'SHvNcBhgvw', 'disabled': false}, {'id': 148, 'name': 'TquBImMnPk', 'disabled': false}, {'id': 149, 'name': 'StrtPGgIBa', 'disabled': false}, {'id': 150, 'name': 'KgoUwgjeHQ', 'disabled': false}, {'id': 151, 'name': 'UtMBsBYkur', 'disabled': false}, {'id': 152, 'name': 'KCrkeBZWIn', 'disabled': false}, {'id': 153, 'name': 'uQqAfwmKLc', 'disabled': false}, {'id': 154, 'name': 'klJSNbhqRU', 'disabled': false}, {'id': 155, 'name': 'ZgZPFNUtWT', 'disabled': false}, {'id': 156, 'name': 'VyXmqBJArz', 'disabled': false}, {'id': 157, 'name': 'znPvmMoXPU', 'disabled': false}, {'id': 158, 'name': 'XFlgXnmPsu', 'disabled': false}, {'id': 159, 'name': 'PdQnRlcOSp', 'disabled': false}, {'id': 160, 'name': 'kqCbAsHZGT', 'disabled': false}, {'id': 161, 'name': 'WxBIhqMGhK', 'disabled': false}, {'id': 162, 'name': 'oinEJtJvDi', 'disabled': false}, {'id': 163, 'name': 'YeGggPXYpM', 'disabled': false}, {'id': 164, 'name': 'yLHVQOkTTb', 'disabled': false}, {'id': 165, 'name': 'EkKJrscPMp', 'disabled': false}, {'id': 166, 'name': 'hGrFWuCNtn', 'disabled': false}, {'id': 167, 'name': 'NtIRfvpuzv', 'disabled': false}, {'id': 168, 'name': 'YqkWhSntth', 'disabled': false}, {'id': 169, 'name': 'qyuWAYMDEJ', 'disabled': false}, {'id': 170, 'name': 'nPkrmMgLBL', 'disabled': false}, {'id': 171, 'name': 'PxaNIiPVJo', 'disabled': false}, {'id': 172, 'name': 'GQcCTzIfpM', 'disabled': false}, {'id': 173, 'name': 'HIrWhwbTIL', 'disabled': false}, {'id': 174, 'name': 'FmNYHcFezY', 'disabled': false}, {'id': 175, 'name': 'wWkQAkXKza', 'disabled': false}, {'id': 176, 'name': 'yHxrdrhdHe', 'disabled': false}, {'id': 177, 'name': 'hQPQZBcPAs', 'disabled': false}, {'id': 178, 'name': 'mhBsBAYUYQ', 'disabled': false}, {'id': 179, 'name': 'fpijrFtQRJ', 'disabled': false}, {'id': 180, 'name': 'BVHWMTAqJM', 'disabled': false}, {'id': 181, 'name': 'XNCzAQcWyI', 'disabled': false}, {'id': 182, 'name': 'doGWMTusfm', 'disabled': false}, {'id': 183, 'name': 'FOOuKZAVLY', 'disabled': false}, {'id': 184, 'name': 'SahbyxcUuc', 'disabled': false}, {'id': 185, 'name': 'QRNedFUhMv', 'disabled': false}, {'id': 186, 'name': 'wbQMMDCFfA', 'disabled': false}, {'id': 187, 'name': 'qtEzsoYEqA', 'disabled': false}, {'id': 188, 'name': 'TZJaUejCrq', 'disabled': false}, {'id': 189, 'name': 'mWQqSanuwJ', 'disabled': false}, {'id': 190, 'name': 'tWXQQqZBFl', 'disabled': false}, {'id': 191, 'name': 'dNyQKDIxWu', 'disabled': false}, {'id': 192, 'name': 'nDfaWniFVC', 'disabled': false}, {'id': 193, 'name': 'LZCvBycqcF', 'disabled': false}, {'id': 194, 'name': 'bxaahGfqeP', 'disabled': false}, {'id': 195, 'name': 'jNARLOQnRj', 'disabled': false}, {'id': 196, 'name': 'SLzUiMIJgw', 'disabled': false}, {'id': 197, 'name': 'rQSaslLqmK', 'disabled': false}, {'id': 198, 'name': 'uoDWMJkZJC', 'disabled': false}, {'id': 199, 'name': 'mlinxhQNfl', 'disabled': false},
        {'id': 200, 'name': 'HgfouFQDoM', 'disabled': false}, {'id': 201, 'name': 'HgQTBsXUuu', 'disabled': false}, {'id': 202, 'name': 'xaODNkyBAh', 'disabled': false}, {'id': 203, 'name': 'HZZAxeGRgW', 'disabled': false}, {'id': 204, 'name': 'UXConsewhM', 'disabled': false}, {'id': 205, 'name': 'gnWXXEPmsU', 'disabled': false}, {'id': 206, 'name': 'jInHprebSp', 'disabled': false}, {'id': 207, 'name': 'HPiOXCccjL', 'disabled': false}, {'id': 208, 'name': 'VzpOFvjSgA', 'disabled': false}, {'id': 209, 'name': 'IVNcfPzyTB', 'disabled': false}, {'id': 210, 'name': 'GkxNShuRLy', 'disabled': false}, {'id': 211, 'name': 'RBpKZputxz', 'disabled': false}, {'id': 212, 'name': 'ZAartJcVNS', 'disabled': false}, {'id': 213, 'name': 'REXHBFsTTL', 'disabled': false}, {'id': 214, 'name': 'VsjwENPqtx', 'disabled': false}, {'id': 215, 'name': 'fVNFuhKOcJ', 'disabled': false}, {'id': 216, 'name': 'ALldLkOsdL', 'disabled': false}, {'id': 217, 'name': 'TvrwKbRzAX', 'disabled': false}, {'id': 218, 'name': 'BjcCSKfDgG', 'disabled': false}, {'id': 219, 'name': 'NokrlbmGYm', 'disabled': false}, {'id': 220, 'name': 'reDPWPDazv', 'disabled': false}, {'id': 221, 'name': 'dJvwIaeLKh', 'disabled': false}, {'id': 222, 'name': 'EQltEBoEQB', 'disabled': false}, {'id': 223, 'name': 'TzILvddEkM', 'disabled': false}, {'id': 224, 'name': 'CgQKwiDgvy', 'disabled': false}, {'id': 225, 'name': 'czsQaWvcec', 'disabled': false}, {'id': 226, 'name': 'oEdTiQYBNe', 'disabled': false}, {'id': 227, 'name': 'VXpAgWMRXf', 'disabled': false}, {'id': 228, 'name': 'UBhzbiyvrN', 'disabled': false}, {'id': 229, 'name': 'VGifTJTaGV', 'disabled': false}, {'id': 230, 'name': 'ewCqUEwtzG', 'disabled': false}, {'id': 231, 'name': 'GDjuJsTwvW', 'disabled': false}, {'id': 232, 'name': 'jERgREPOwP', 'disabled': false}, {'id': 233, 'name': 'pCrtgAaFhJ', 'disabled': false}, {'id': 234, 'name': 'dpfxgMZCDI', 'disabled': false}, {'id': 235, 'name': 'OsjAplRaTf', 'disabled': false}, {'id': 236, 'name': 'TUjUKlTwie', 'disabled': false}, {'id': 237, 'name': 'uNgarIeXEc', 'disabled': false}, {'id': 238, 'name': 'CjXkeHLteT', 'disabled': false}, {'id': 239, 'name': 'WLmXebTuxl', 'disabled': false}, {'id': 240, 'name': 'rkPOihBeRh', 'disabled': false}, {'id': 241, 'name': 'zlAsysepCm', 'disabled': false}, {'id': 242, 'name': 'WeCrvVQXoW', 'disabled': false}, {'id': 243, 'name': 'uEaLqFmUen', 'disabled': false}, {'id': 244, 'name': 'imbYhPechg', 'disabled': false}, {'id': 245, 'name': 'xFCqOPuFji', 'disabled': false}, {'id': 246, 'name': 'KYIJFBbSWw', 'disabled': false}, {'id': 247, 'name': 'XYBMRzBGFE', 'disabled': false}, {'id': 248, 'name': 'yjBbWgbOza', 'disabled': false}, {'id': 249, 'name': 'XqZSDBMhdE', 'disabled': false}, {'id': 250, 'name': 'fqMbUauFZc', 'disabled': false}, {'id': 251, 'name': 'HJhxJLxoeB', 'disabled': false}, {'id': 252, 'name': 'wLRttaDYoJ', 'disabled': false}, {'id': 253, 'name': 'AolkxMIKPb', 'disabled': false}, {'id': 254, 'name': 'fnZLBQfyTn', 'disabled': false}, {'id': 255, 'name': 'sjSCpOynEF', 'disabled': false}, {'id': 256, 'name': 'LXeXxBkQSL', 'disabled': false}, {'id': 257, 'name': 'XlIeQvlPKH', 'disabled': false}, {'id': 258, 'name': 'HzKEvjKaqG', 'disabled': false}, {'id': 259, 'name': 'HBUJjIyUrS', 'disabled': false}, {'id': 260, 'name': 'awouyaOLJS', 'disabled': false}, {'id': 261, 'name': 'YfzUVNrpWd', 'disabled': false}, {'id': 262, 'name': 'WIYybkuNMK', 'disabled': false}, {'id': 263, 'name': 'cinfMUfLni', 'disabled': false}, {'id': 264, 'name': 'gKGxQMQqll', 'disabled': false}, {'id': 265, 'name': 'ctzypxcxYX', 'disabled': false}, {'id': 266, 'name': 'YcszRIjXrs', 'disabled': false}, {'id': 267, 'name': 'ztRxlVYSUa', 'disabled': false}, {'id': 268, 'name': 'xvQTHnJUHD', 'disabled': false}, {'id': 269, 'name': 'ksCNezZTeo', 'disabled': false}, {'id': 270, 'name': 'xCQdsabLhI', 'disabled': false}, {'id': 271, 'name': 'BsQcGLGniE', 'disabled': false}, {'id': 272, 'name': 'hKlPrHWGHm', 'disabled': false}, {'id': 273, 'name': 'RbNzwzZeXh', 'disabled': false}, {'id': 274, 'name': 'uKSFCYxMCX', 'disabled': false}, {'id': 275, 'name': 'OJpyhTUDvv', 'disabled': false}, {'id': 276, 'name': 'gJtRSpgWqD', 'disabled': false}, {'id': 277, 'name': 'rZvpZraBNI', 'disabled': false}, {'id': 278, 'name': 'mOizYaAiLI', 'disabled': false}, {'id': 279, 'name': 'WhuXqXNckB', 'disabled': false}, {'id': 280, 'name': 'MtPYRRAvQK', 'disabled': false}, {'id': 281, 'name': 'TNXBQzIDwj', 'disabled': false}, {'id': 282, 'name': 'OvmQrFjBvs', 'disabled': false}, {'id': 283, 'name': 'WJpCEStmRD', 'disabled': false}, {'id': 284, 'name': 'EwfTYeoeda', 'disabled': false}, {'id': 285, 'name': 'XbsRPBAkbo', 'disabled': false}, {'id': 286, 'name': 'AUZfUzqtzE', 'disabled': false}, {'id': 287, 'name': 'uvWkVVhKQs', 'disabled': false}, {'id': 288, 'name': 'nebdXJQqbQ', 'disabled': false}, {'id': 289, 'name': 'nhckxaPcMA', 'disabled': false}, {'id': 290, 'name': 'qLnxKwQezZ', 'disabled': false}, {'id': 291, 'name': 'lJidVyZCrA', 'disabled': false}, {'id': 292, 'name': 'emCvOQpaIy', 'disabled': false}, {'id': 293, 'name': 'nLWgqeHFlN', 'disabled': false}, {'id': 294, 'name': 'fFRmGduHmN', 'disabled': false}, {'id': 295, 'name': 'vPMmGVMzdo', 'disabled': false}, {'id': 296, 'name': 'sVsEwZVMof', 'disabled': false}, {'id': 297, 'name': 'oAmluWityN', 'disabled': false}, {'id': 298, 'name': 'AHpQbxtFtG', 'disabled': false}, {'id': 299, 'name': 'cenwuRzGcA', 'disabled': false}, {'id': 300, 'name': 'rQypcFlrvE', 'disabled': false},
        ],
        showAll: false,
        reverse: false,
        get filteredFrameworks() {
            return ! this.showAll
                ? []
                : (this.reverse ? this.frameworks.toReversed() : this.frameworks )
        },
    }"
    class="max-w-xs w-full"
>
<button @click="showAll = true">Populate</button>
<button @click="reverse = true">Reverse</button>
    <div>
        <div class="mt-1 relative rounded-md focus-within:ring-2 focus-within:ring-blue-500">

            <div x-cloak class="absolute left-0 max-w-xs w-full max-h-60 mt-2 z-10 origin-top-right overflow-auto bg-white border border-gray-200 rounded-md shadow-md outline-none" x-transition.out.opacity>
                <ul class="divide-y divide-gray-100">
                    <template
                        x-for="framework in filteredFrameworks"
                        :key="framework.id"
                        hidden
                    >
                        <li
                            :value="framework"
                            :disabled="framework.disabled"
                            :class="{
                                'bg-cyan-500/10 text-gray-900': {}.isActive,
                                'text-gray-600': ! {}.isActive,
                                'opacity-50 cursor-not-allowed': {}.isDisabled,
                            }"
                            class="flex items-center cursor-default justify-between gap-2 w-full px-4 py-2 text-sm"
                        >
                            <span x-text="framework.name"></span>

                            <span x-show="{}.isSelected" class="text-cyan-600 font-bold">&check;</span>
                        </li>
                    </template>
                </ul>

                <p x-show="filteredFrameworks.length == 0" class="px-4 py-2 text-sm text-gray-600">No frameworks match your query.</p>
            </div>
        </div>
    </div>
</div> -->
<div
    x-data="{
        query: '',
        selected: null,
        frameworks: $signal([
            {'id': 1, 'name': 'KXIiIxgnXL', 'disabled': false}, {'id': 2, 'name': 'AKJIDEdIrW', 'disabled': false}, {'id': 3, 'name': 'UQLWLuFXeq', 'disabled': false}, {'id': 4, 'name': 'ihUbJGVBYx', 'disabled': false}, {'id': 5, 'name': 'GTnWXNXKTc', 'disabled': false}, {'id': 6, 'name': 'fHSOBixAme', 'disabled': false}, {'id': 7, 'name': 'UDkknzscEU', 'disabled': false}, {'id': 8, 'name': 'LOGipVmmHW', 'disabled': false}, {'id': 9, 'name': 'EFJFpwKQOj', 'disabled': false}, {'id': 10, 'name': 'PyoSfpdFxC', 'disabled': false}, {'id': 11, 'name': 'OJDXuhELof', 'disabled': false}, {'id': 12, 'name': 'cuIVELuaED', 'disabled': false}, {'id': 13, 'name': 'MWKVykuDYS', 'disabled': false}, {'id': 14, 'name': 'fOZulRCQuA', 'disabled': false}, {'id': 15, 'name': 'BKedVrncDt', 'disabled': false}, {'id': 16, 'name': 'AxDkoZyFJc', 'disabled': false}, {'id': 17, 'name': 'xuBWLlgcOj', 'disabled': false}, {'id': 18, 'name': 'fjikjrxBTY', 'disabled': false}, {'id': 19, 'name': 'cYPSBDkKuT', 'disabled': false}, {'id': 20, 'name': 'fUHPmYsjLS', 'disabled': false}, {'id': 21, 'name': 'WwFhCwyilW', 'disabled': false}, {'id': 22, 'name': 'oCuEIZQlqA', 'disabled': false}, {'id': 23, 'name': 'laDUAAKtDJ', 'disabled': false}, {'id': 24, 'name': 'EzlJUxCaiX', 'disabled': false}, {'id': 25, 'name': 'pwqlEysEjj', 'disabled': false}, {'id': 26, 'name': 'epxRsEhVND', 'disabled': false}, {'id': 27, 'name': 'cZIBOEFdeA', 'disabled': false}, {'id': 28, 'name': 'YCAmtySoug', 'disabled': false}, {'id': 29, 'name': 'IkQopAcUAY', 'disabled': false}, {'id': 30, 'name': 'HBmJvWiXfq', 'disabled': false}, {'id': 31, 'name': 'keJyfpRjPn', 'disabled': false}, {'id': 32, 'name': 'lxGKCSOiLf', 'disabled': false}, {'id': 33, 'name': 'rvbSgiPxtr', 'disabled': false}, {'id': 34, 'name': 'LNpgxkKZpg', 'disabled': false}, {'id': 35, 'name': 'TaNRlGknzm', 'disabled': false}, {'id': 36, 'name': 'RxdxGRiJzX', 'disabled': false}, {'id': 37, 'name': 'YTqvSukepc', 'disabled': false}, {'id': 38, 'name': 'zaKVMBTSYu', 'disabled': false}, {'id': 39, 'name': 'AZoHHyISjg', 'disabled': false}, {'id': 40, 'name': 'uInRltzkxq', 'disabled': false}, {'id': 41, 'name': 'YjhdHybLKb', 'disabled': false}, {'id': 42, 'name': 'YOFwVvcPxN', 'disabled': false}, {'id': 43, 'name': 'DfaiKdQiOU', 'disabled': false}, {'id': 44, 'name': 'AjlddzndcO', 'disabled': false}, {'id': 45, 'name': 'hBPYxlqgMV', 'disabled': false}, {'id': 46, 'name': 'fHvpZhoiFR', 'disabled': false}, {'id': 47, 'name': 'RIzwliHDtg', 'disabled': false}, {'id': 48, 'name': 'xHGiGNBNGK', 'disabled': false}, {'id': 49, 'name': 'YCxMQUaOLh', 'disabled': false}, {'id': 50, 'name': 'ceQFcGovGJ', 'disabled': false}, {'id': 51, 'name': 'DZdrtriEIS', 'disabled': false}, {'id': 52, 'name': 'DrvTnGJhLh', 'disabled': false}, {'id': 53, 'name': 'GjNDAhFvJq', 'disabled': false}, {'id': 54, 'name': 'qeRLdsHhMk', 'disabled': false}, {'id': 55, 'name': 'IFurLAkWHg', 'disabled': false}, {'id': 56, 'name': 'JtjZvsoiUl', 'disabled': false}, {'id': 57, 'name': 'KgkFwMgtLh', 'disabled': false}, {'id': 58, 'name': 'yCysfFMZaY', 'disabled': false}, {'id': 59, 'name': 'dphkpJEZIo', 'disabled': false}, {'id': 60, 'name': 'SGJumkKNDr', 'disabled': false}, {'id': 61, 'name': 'sJQIfXKtHb', 'disabled': false}, {'id': 62, 'name': 'hwZnsaFkmg', 'disabled': false}, {'id': 63, 'name': 'gLcSEtTPds', 'disabled': false}, {'id': 64, 'name': 'ciyAdjanRD', 'disabled': false}, {'id': 65, 'name': 'ChqcuxAXZm', 'disabled': false}, {'id': 66, 'name': 'HewKxcMeBn', 'disabled': false}, {'id': 67, 'name': 'DAErMjcZFf', 'disabled': false}, {'id': 68, 'name': 'ixFWJlaCky', 'disabled': false}, {'id': 69, 'name': 'mOANWKDPlP', 'disabled': false}, {'id': 70, 'name': 'XbLyqIXGPL', 'disabled': false}, {'id': 71, 'name': 'ltDyAmGMwp', 'disabled': false}, {'id': 72, 'name': 'pPosoLgCHN', 'disabled': false}, {'id': 73, 'name': 'RnnOsJKtjV', 'disabled': false}, {'id': 74, 'name': 'jVHvCXzvPD', 'disabled': false}, {'id': 75, 'name': 'LApyqYOWnt', 'disabled': false}, {'id': 76, 'name': 'IUDmMgERly', 'disabled': false}, {'id': 77, 'name': 'QwnvmTdWMp', 'disabled': false}, {'id': 78, 'name': 'EyQCsScGds', 'disabled': false}, {'id': 79, 'name': 'IAhxrwydmd', 'disabled': false}, {'id': 80, 'name': 'JuysrXJnYB', 'disabled': false}, {'id': 81, 'name': 'VQQLQLmqGX', 'disabled': false}, {'id': 82, 'name': 'uXmLzBrGez', 'disabled': false}, {'id': 83, 'name': 'YUURVjXAZK', 'disabled': false}, {'id': 84, 'name': 'AdMAqofDKP', 'disabled': false}, {'id': 85, 'name': 'kHQBBeWozW', 'disabled': false}, {'id': 86, 'name': 'WHgNwRfQwL', 'disabled': false}, {'id': 87, 'name': 'ccMPuVRjxK', 'disabled': false}, {'id': 88, 'name': 'DedZkuXNZP', 'disabled': false}, {'id': 89, 'name': 'PXZGujcEAM', 'disabled': false}, {'id': 90, 'name': 'lFiYHupMfB', 'disabled': false}, {'id': 91, 'name': 'GPMZNBcYKL', 'disabled': false}, {'id': 92, 'name': 'fEUErAwade', 'disabled': false}, {'id': 93, 'name': 'NYQQyrqGGF', 'disabled': false}, {'id': 94, 'name': 'xNUtrmmret', 'disabled': false}, {'id': 95, 'name': 'gtvTlmnBfN', 'disabled': false}, {'id': 96, 'name': 'KySalIaVqZ', 'disabled': false}, {'id': 97, 'name': 'rGnJSXNOdc', 'disabled': false}, {'id': 98, 'name': 'cdALAILUUV', 'disabled': false}, {'id': 99, 'name': 'hsxObuOspS', 'disabled': false},
            {'id': 100, 'name': 'rSyESUKsxu', 'disabled': false}, {'id': 101, 'name': 'NRzYPBbLVH', 'disabled': false}, {'id': 102, 'name': 'nshqGdumFa', 'disabled': false}, {'id': 103, 'name': 'znDiHYeUqy', 'disabled': false}, {'id': 104, 'name': 'xwfvSKyCuo', 'disabled': false}, {'id': 105, 'name': 'fJnGzTTjDC', 'disabled': false}, {'id': 106, 'name': 'LbzDaauJvC', 'disabled': false}, {'id': 107, 'name': 'khKurrsDjS', 'disabled': false}, {'id': 108, 'name': 'xgnugltCLb', 'disabled': false}, {'id': 109, 'name': 'FqfyWITBaw', 'disabled': false}, {'id': 110, 'name': 'OfJBYMCdKG', 'disabled': false}, {'id': 111, 'name': 'LiQJOENnLO', 'disabled': false}, {'id': 112, 'name': 'GaLSUdkVcs', 'disabled': false}, {'id': 113, 'name': 'hMgyTodQmu', 'disabled': false}, {'id': 114, 'name': 'LUyWRaOpAu', 'disabled': false}, {'id': 115, 'name': 'icRBkMmFQZ', 'disabled': false}, {'id': 116, 'name': 'ckhOgpVUjO', 'disabled': false}, {'id': 117, 'name': 'PwnGwFGEeN', 'disabled': false}, {'id': 118, 'name': 'nQETnbanVY', 'disabled': false}, {'id': 119, 'name': 'wDCyHdGjvz', 'disabled': false}, {'id': 120, 'name': 'qTZzuHymQb', 'disabled': false}, {'id': 121, 'name': 'WDBhlUHRmg', 'disabled': false}, {'id': 122, 'name': 'OlEBOeEnFG', 'disabled': false}, {'id': 123, 'name': 'hZafsvsCbk', 'disabled': false}, {'id': 124, 'name': 'qzvpYcyDWW', 'disabled': false}, {'id': 125, 'name': 'SMqWKexqYg', 'disabled': false}, {'id': 126, 'name': 'AOsbGwgtjt', 'disabled': false}, {'id': 127, 'name': 'LVlJqqAmQO', 'disabled': false}, {'id': 128, 'name': 'YOxZzWyWvj', 'disabled': false}, {'id': 129, 'name': 'nCMhkqRuep', 'disabled': false}, {'id': 130, 'name': 'ewDcHczOox', 'disabled': false}, {'id': 131, 'name': 'HQhmikcEbo', 'disabled': false}, {'id': 132, 'name': 'mgYwdZEXjp', 'disabled': false}, {'id': 133, 'name': 'gsQMXwBDbo', 'disabled': false}, {'id': 134, 'name': 'vmKrLiBmic', 'disabled': false}, {'id': 135, 'name': 'uaSvNtkEHe', 'disabled': false}, {'id': 136, 'name': 'ovEulNiSLW', 'disabled': false}, {'id': 137, 'name': 'tdONWcqXOX', 'disabled': false}, {'id': 138, 'name': 'KdCWkSFyJB', 'disabled': false}, {'id': 139, 'name': 'ojaSLveBvX', 'disabled': false}, {'id': 140, 'name': 'UBJsaSRxeO', 'disabled': false}, {'id': 141, 'name': 'uxKMCAoCXi', 'disabled': false}, {'id': 142, 'name': 'zMYrVGngHD', 'disabled': false}, {'id': 143, 'name': 'vXMFkeTFlb', 'disabled': false}, {'id': 144, 'name': 'uxlKsJAAts', 'disabled': false}, {'id': 145, 'name': 'fBtWtirrdz', 'disabled': false}, {'id': 146, 'name': 'YZnvETZxMy', 'disabled': false}, {'id': 147, 'name': 'SHvNcBhgvw', 'disabled': false}, {'id': 148, 'name': 'TquBImMnPk', 'disabled': false}, {'id': 149, 'name': 'StrtPGgIBa', 'disabled': false}, {'id': 150, 'name': 'KgoUwgjeHQ', 'disabled': false}, {'id': 151, 'name': 'UtMBsBYkur', 'disabled': false}, {'id': 152, 'name': 'KCrkeBZWIn', 'disabled': false}, {'id': 153, 'name': 'uQqAfwmKLc', 'disabled': false}, {'id': 154, 'name': 'klJSNbhqRU', 'disabled': false}, {'id': 155, 'name': 'ZgZPFNUtWT', 'disabled': false}, {'id': 156, 'name': 'VyXmqBJArz', 'disabled': false}, {'id': 157, 'name': 'znPvmMoXPU', 'disabled': false}, {'id': 158, 'name': 'XFlgXnmPsu', 'disabled': false}, {'id': 159, 'name': 'PdQnRlcOSp', 'disabled': false}, {'id': 160, 'name': 'kqCbAsHZGT', 'disabled': false}, {'id': 161, 'name': 'WxBIhqMGhK', 'disabled': false}, {'id': 162, 'name': 'oinEJtJvDi', 'disabled': false}, {'id': 163, 'name': 'YeGggPXYpM', 'disabled': false}, {'id': 164, 'name': 'yLHVQOkTTb', 'disabled': false}, {'id': 165, 'name': 'EkKJrscPMp', 'disabled': false}, {'id': 166, 'name': 'hGrFWuCNtn', 'disabled': false}, {'id': 167, 'name': 'NtIRfvpuzv', 'disabled': false}, {'id': 168, 'name': 'YqkWhSntth', 'disabled': false}, {'id': 169, 'name': 'qyuWAYMDEJ', 'disabled': false}, {'id': 170, 'name': 'nPkrmMgLBL', 'disabled': false}, {'id': 171, 'name': 'PxaNIiPVJo', 'disabled': false}, {'id': 172, 'name': 'GQcCTzIfpM', 'disabled': false}, {'id': 173, 'name': 'HIrWhwbTIL', 'disabled': false}, {'id': 174, 'name': 'FmNYHcFezY', 'disabled': false}, {'id': 175, 'name': 'wWkQAkXKza', 'disabled': false}, {'id': 176, 'name': 'yHxrdrhdHe', 'disabled': false}, {'id': 177, 'name': 'hQPQZBcPAs', 'disabled': false}, {'id': 178, 'name': 'mhBsBAYUYQ', 'disabled': false}, {'id': 179, 'name': 'fpijrFtQRJ', 'disabled': false}, {'id': 180, 'name': 'BVHWMTAqJM', 'disabled': false}, {'id': 181, 'name': 'XNCzAQcWyI', 'disabled': false}, {'id': 182, 'name': 'doGWMTusfm', 'disabled': false}, {'id': 183, 'name': 'FOOuKZAVLY', 'disabled': false}, {'id': 184, 'name': 'SahbyxcUuc', 'disabled': false}, {'id': 185, 'name': 'QRNedFUhMv', 'disabled': false}, {'id': 186, 'name': 'wbQMMDCFfA', 'disabled': false}, {'id': 187, 'name': 'qtEzsoYEqA', 'disabled': false}, {'id': 188, 'name': 'TZJaUejCrq', 'disabled': false}, {'id': 189, 'name': 'mWQqSanuwJ', 'disabled': false}, {'id': 190, 'name': 'tWXQQqZBFl', 'disabled': false}, {'id': 191, 'name': 'dNyQKDIxWu', 'disabled': false}, {'id': 192, 'name': 'nDfaWniFVC', 'disabled': false}, {'id': 193, 'name': 'LZCvBycqcF', 'disabled': false}, {'id': 194, 'name': 'bxaahGfqeP', 'disabled': false}, {'id': 195, 'name': 'jNARLOQnRj', 'disabled': false}, {'id': 196, 'name': 'SLzUiMIJgw', 'disabled': false}, {'id': 197, 'name': 'rQSaslLqmK', 'disabled': false}, {'id': 198, 'name': 'uoDWMJkZJC', 'disabled': false}, {'id': 199, 'name': 'mlinxhQNfl', 'disabled': false},
            {'id': 200, 'name': 'HgfouFQDoM', 'disabled': false}, {'id': 201, 'name': 'HgQTBsXUuu', 'disabled': false}, {'id': 202, 'name': 'xaODNkyBAh', 'disabled': false}, {'id': 203, 'name': 'HZZAxeGRgW', 'disabled': false}, {'id': 204, 'name': 'UXConsewhM', 'disabled': false}, {'id': 205, 'name': 'gnWXXEPmsU', 'disabled': false}, {'id': 206, 'name': 'jInHprebSp', 'disabled': false}, {'id': 207, 'name': 'HPiOXCccjL', 'disabled': false}, {'id': 208, 'name': 'VzpOFvjSgA', 'disabled': false}, {'id': 209, 'name': 'IVNcfPzyTB', 'disabled': false}, {'id': 210, 'name': 'GkxNShuRLy', 'disabled': false}, {'id': 211, 'name': 'RBpKZputxz', 'disabled': false}, {'id': 212, 'name': 'ZAartJcVNS', 'disabled': false}, {'id': 213, 'name': 'REXHBFsTTL', 'disabled': false}, {'id': 214, 'name': 'VsjwENPqtx', 'disabled': false}, {'id': 215, 'name': 'fVNFuhKOcJ', 'disabled': false}, {'id': 216, 'name': 'ALldLkOsdL', 'disabled': false}, {'id': 217, 'name': 'TvrwKbRzAX', 'disabled': false}, {'id': 218, 'name': 'BjcCSKfDgG', 'disabled': false}, {'id': 219, 'name': 'NokrlbmGYm', 'disabled': false}, {'id': 220, 'name': 'reDPWPDazv', 'disabled': false}, {'id': 221, 'name': 'dJvwIaeLKh', 'disabled': false}, {'id': 222, 'name': 'EQltEBoEQB', 'disabled': false}, {'id': 223, 'name': 'TzILvddEkM', 'disabled': false}, {'id': 224, 'name': 'CgQKwiDgvy', 'disabled': false}, {'id': 225, 'name': 'czsQaWvcec', 'disabled': false}, {'id': 226, 'name': 'oEdTiQYBNe', 'disabled': false}, {'id': 227, 'name': 'VXpAgWMRXf', 'disabled': false}, {'id': 228, 'name': 'UBhzbiyvrN', 'disabled': false}, {'id': 229, 'name': 'VGifTJTaGV', 'disabled': false}, {'id': 230, 'name': 'ewCqUEwtzG', 'disabled': false}, {'id': 231, 'name': 'GDjuJsTwvW', 'disabled': false}, {'id': 232, 'name': 'jERgREPOwP', 'disabled': false}, {'id': 233, 'name': 'pCrtgAaFhJ', 'disabled': false}, {'id': 234, 'name': 'dpfxgMZCDI', 'disabled': false}, {'id': 235, 'name': 'OsjAplRaTf', 'disabled': false}, {'id': 236, 'name': 'TUjUKlTwie', 'disabled': false}, {'id': 237, 'name': 'uNgarIeXEc', 'disabled': false}, {'id': 238, 'name': 'CjXkeHLteT', 'disabled': false}, {'id': 239, 'name': 'WLmXebTuxl', 'disabled': false}, {'id': 240, 'name': 'rkPOihBeRh', 'disabled': false}, {'id': 241, 'name': 'zlAsysepCm', 'disabled': false}, {'id': 242, 'name': 'WeCrvVQXoW', 'disabled': false}, {'id': 243, 'name': 'uEaLqFmUen', 'disabled': false}, {'id': 244, 'name': 'imbYhPechg', 'disabled': false}, {'id': 245, 'name': 'xFCqOPuFji', 'disabled': false}, {'id': 246, 'name': 'KYIJFBbSWw', 'disabled': false}, {'id': 247, 'name': 'XYBMRzBGFE', 'disabled': false}, {'id': 248, 'name': 'yjBbWgbOza', 'disabled': false}, {'id': 249, 'name': 'XqZSDBMhdE', 'disabled': false}, {'id': 250, 'name': 'fqMbUauFZc', 'disabled': false}, {'id': 251, 'name': 'HJhxJLxoeB', 'disabled': false}, {'id': 252, 'name': 'wLRttaDYoJ', 'disabled': false}, {'id': 253, 'name': 'AolkxMIKPb', 'disabled': false}, {'id': 254, 'name': 'fnZLBQfyTn', 'disabled': false}, {'id': 255, 'name': 'sjSCpOynEF', 'disabled': false}, {'id': 256, 'name': 'LXeXxBkQSL', 'disabled': false}, {'id': 257, 'name': 'XlIeQvlPKH', 'disabled': false}, {'id': 258, 'name': 'HzKEvjKaqG', 'disabled': false}, {'id': 259, 'name': 'HBUJjIyUrS', 'disabled': false}, {'id': 260, 'name': 'awouyaOLJS', 'disabled': false}, {'id': 261, 'name': 'YfzUVNrpWd', 'disabled': false}, {'id': 262, 'name': 'WIYybkuNMK', 'disabled': false}, {'id': 263, 'name': 'cinfMUfLni', 'disabled': false}, {'id': 264, 'name': 'gKGxQMQqll', 'disabled': false}, {'id': 265, 'name': 'ctzypxcxYX', 'disabled': false}, {'id': 266, 'name': 'YcszRIjXrs', 'disabled': false}, {'id': 267, 'name': 'ztRxlVYSUa', 'disabled': false}, {'id': 268, 'name': 'xvQTHnJUHD', 'disabled': false}, {'id': 269, 'name': 'ksCNezZTeo', 'disabled': false}, {'id': 270, 'name': 'xCQdsabLhI', 'disabled': false}, {'id': 271, 'name': 'BsQcGLGniE', 'disabled': false}, {'id': 272, 'name': 'hKlPrHWGHm', 'disabled': false}, {'id': 273, 'name': 'RbNzwzZeXh', 'disabled': false}, {'id': 274, 'name': 'uKSFCYxMCX', 'disabled': false}, {'id': 275, 'name': 'OJpyhTUDvv', 'disabled': false}, {'id': 276, 'name': 'gJtRSpgWqD', 'disabled': false}, {'id': 277, 'name': 'rZvpZraBNI', 'disabled': false}, {'id': 278, 'name': 'mOizYaAiLI', 'disabled': false}, {'id': 279, 'name': 'WhuXqXNckB', 'disabled': false}, {'id': 280, 'name': 'MtPYRRAvQK', 'disabled': false}, {'id': 281, 'name': 'TNXBQzIDwj', 'disabled': false}, {'id': 282, 'name': 'OvmQrFjBvs', 'disabled': false}, {'id': 283, 'name': 'WJpCEStmRD', 'disabled': false}, {'id': 284, 'name': 'EwfTYeoeda', 'disabled': false}, {'id': 285, 'name': 'XbsRPBAkbo', 'disabled': false}, {'id': 286, 'name': 'AUZfUzqtzE', 'disabled': false}, {'id': 287, 'name': 'uvWkVVhKQs', 'disabled': false}, {'id': 288, 'name': 'nebdXJQqbQ', 'disabled': false}, {'id': 289, 'name': 'nhckxaPcMA', 'disabled': false}, {'id': 290, 'name': 'qLnxKwQezZ', 'disabled': false}, {'id': 291, 'name': 'lJidVyZCrA', 'disabled': false}, {'id': 292, 'name': 'emCvOQpaIy', 'disabled': false}, {'id': 293, 'name': 'nLWgqeHFlN', 'disabled': false}, {'id': 294, 'name': 'fFRmGduHmN', 'disabled': false}, {'id': 295, 'name': 'vPMmGVMzdo', 'disabled': false}, {'id': 296, 'name': 'sVsEwZVMof', 'disabled': false}, {'id': 297, 'name': 'oAmluWityN', 'disabled': false}, {'id': 298, 'name': 'AHpQbxtFtG', 'disabled': false}, {'id': 299, 'name': 'cenwuRzGcA', 'disabled': false}, {'id': 300, 'name': 'rQypcFlrvE', 'disabled': false},
        ]),
        get filteredFrameworks() {
            return this.query === ''
                ? this.frameworks()
                : this.frameworks().filter((framework) => {
                    return framework.name.toLowerCase().includes(this.query.toLowerCase())
                })
        },
    }"
    class="max-w-xs w-full"
>
    <div x-combobox x-model="selected">
        <div class="mt-1 relative rounded-md focus-within:ring-2 focus-within:ring-blue-500">
            <div class="flex items-center justify-between gap-2 w-full bg-white pl-5 pr-3 py-2.5 rounded-md shadow">
                <input
                    x-combobox:input
                    :display-value="framework => framework.name"
                    @change="query = $event.target.value;"
                    class="border-none p-0 focus:outline-none focus:ring-0"
                    placeholder="Search..."
                />
                <button x-combobox:button class="absolute inset-y-0 right-0 flex items-center pr-2">
                    <svg class="shrink-0 w-5 h-5 text-gray-500" viewBox="0 0 20 20" fill="none" stroke="currentColor"><path d="M7 7l3-3 3 3m0 6l-3 3-3-3" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>
                </button>
            </div>

            <div x-combobox:options x-cloak class="absolute left-0 max-w-xs w-full max-h-60 mt-2 z-10 origin-top-right overflow-auto bg-white border border-gray-200 rounded-md shadow-md outline-none" x-transition.out.opacity>
                <ul class="divide-y divide-gray-100">
                    <template
                        x-for="framework in filteredFrameworks"
                        :key="framework.id"
                        hidden
                    >
                        <li
                            x-combobox:option
                            :value="framework"
                            :disabled="framework.disabled"
                            :class="{
                                'bg-cyan-500/10 text-gray-900': $comboboxOption.isActive,
                                'text-gray-600': ! $comboboxOption.isActive,
                                'opacity-50 cursor-not-allowed': $comboboxOption.isDisabled,
                            }"
                            class="flex items-center cursor-default justify-between gap-2 w-full px-4 py-2 text-sm"
                        >
                            <span x-text="framework.name"></span>

                            <span x-show="$comboboxOption.isSelected" class="text-cyan-600 font-bold">&check;</span>
                        </li>
                    </template>
                </ul>

                <p x-show="filteredFrameworks.length == 0" class="px-4 py-2 text-sm text-gray-600">No frameworks match your query.</p>
            </div>
        </div>
    </div>
</div>
</html>