[{"data":1,"prerenderedAt":6889},["ShallowReactive",2],{"search-de":3,"content-de-developer\u002Fcomponents":4,"surround-de-\u002Fdeveloper\u002Fcomponents":6880},[],{"id":5,"title":6,"body":7,"description":6873,"extension":6874,"meta":6875,"navigation":261,"path":6876,"seo":6877,"stem":6878,"__hash__":6879},"content_de\u002F3.developer\u002F9.components.md","Komponentenbibliothek",{"type":8,"value":9,"toc":6733},"minimark",[10,19,30,35,38,67,71,74,79,180,184,204,208,408,412,415,418,561,564,576,579,740,744,762,765,892,895,1013,1017,1020,1023,1144,1147,1226,1230,1233,1236,1302,1305,1384,1388,1403,1406,1460,1463,1541,1545,1555,1558,1647,1650,1773,1777,1780,1783,1870,1873,1892,1895,2090,2094,2097,2100,2200,2203,2215,2219,2227,2230,2448,2452,2455,2458,2546,2549,2556,2559,2573,2577,2580,2583,2639,2642,2654,2657,2753,2757,2760,2763,2810,2813,2918,2922,2925,2928,2994,2997,3028,3032,3035,3038,3101,3104,3112,3115,3208,3212,3215,3218,3263,3266,3273,3276,3311,3315,3318,3321,3378,3381,3453,3457,3460,3463,3585,3588,3595,3598,3613,3616,3719,3723,3726,3729,3772,3775,3788,3792,3806,3809,3922,3926,3931,3934,3995,3998,4005,4008,4015,4019,4025,4029,4032,4035,4147,4150,4217,4221,4224,4227,4282,4285,4301,4304,4379,4383,4386,4389,4445,4448,4533,4537,4540,4543,4609,4612,4755,4759,4762,4766,4842,4845,4849,4855,4858,4930,4933,5033,5037,5051,5149,5153,5164,5167,5231,5235,5238,5304,5308,5311,5315,5413,5416,5487,5491,5497,5500,5589,5592,5626,5630,5635,5638,5713,5716,5801,5805,5815,5818,5924,5927,6033,6037,6056,6060,6081,6088,6111,6163,6229,6236,6257,6295,6348,6355,6358,6396,6430,6437,6444,6492,6523,6527,6543,6546,6592,6595,6701,6729],[11,12,13,14,18],"p",{},"Owlat enthält eine Reihe wiederverwendbarer Vue-Komponenten in ",[15,16,17],"code",{},"packages\u002Fui\u002Fcomponents\u002Fui\u002F",".",[11,20,21,22,29],{},"Wenn Sie diese Komponenten zu einer Oberfläche zusammensetzen, folgen Sie dem ",[23,24,28],"a",{"href":25,"rel":26},"https:\u002F\u002Fgithub.com\u002Fwolvesdotink\u002Fowlat\u002Fblob\u002Fmain\u002Fdocs\u002Fdesign\u002Fprogressive-disclosure.md",[27],"nofollow","Standard zur schrittweisen Offenlegung",": Beginnen Sie mit einem Urteil bzw. einer Zusammenfassung und halten Sie tiefergehende Details genau eine Interaktion entfernt.",[31,32,34],"h2",{"id":33},"überblick","Überblick",[11,36,37],{},"Alle Komponenten folgen diesen Prinzipien:",[39,40,41,49,55,61],"ul",{},[42,43,44,48],"li",{},[45,46,47],"strong",{},"Einheitliches Styling"," - Verwendet Design-System-Tokens aus main.css",[42,50,51,54],{},[45,52,53],{},"TypeScript"," - Vollständige Typunterstützung",[42,56,57,60],{},[45,58,59],{},"Barrierefrei"," - ARIA-Attribute und Tastaturnavigation",[42,62,63,66],{},[45,64,65],{},"Automatisch importiert"," - Ohne explizite Imports verfügbar (Nuxt-Feature)",[31,68,70],{"id":69},"button-uibutton","Button (UiButton)",[11,72,73],{},"Vielseitige Button-Komponente mit Varianten und Zuständen.",[75,76,78],"h3",{"id":77},"props","Props",[80,81,82,101],"table",{},[83,84,85],"thead",{},[86,87,88,92,95,98],"tr",{},[89,90,91],"th",{},"Prop",[89,93,94],{},"Typ",[89,96,97],{},"Standard",[89,99,100],{},"Beschreibung",[102,103,104,121,136,152,166],"tbody",{},[86,105,106,112,115,118],{},[107,108,109],"td",{},[15,110,111],{},"variant",[107,113,114],{},"string",[107,116,117],{},"'primary'",[107,119,120],{},"'primary', 'secondary', 'outline', 'ghost', 'danger', 'danger-ghost', 'danger-outline'",[86,122,123,128,130,133],{},[107,124,125],{},[15,126,127],{},"size",[107,129,114],{},[107,131,132],{},"'md'",[107,134,135],{},"'sm', 'md', 'lg'",[86,137,138,143,146,149],{},[107,139,140],{},[15,141,142],{},"loading",[107,144,145],{},"boolean",[107,147,148],{},"false",[107,150,151],{},"Spinner anzeigen und Button deaktivieren",[86,153,154,159,161,163],{},[107,155,156],{},[15,157,158],{},"disabled",[107,160,145],{},[107,162,148],{},[107,164,165],{},"Button deaktivieren",[86,167,168,173,175,177],{},[107,169,170],{},[15,171,172],{},"fullWidth",[107,174,145],{},[107,176,148],{},[107,178,179],{},"Button über die volle Breite",[75,181,183],{"id":182},"slots","Slots",[39,185,186,192,198],{},[42,187,188,191],{},[15,189,190],{},"default"," - Buttontext",[42,193,194,197],{},[15,195,196],{},"iconLeft"," - Icon vor dem Text",[42,199,200,203],{},[15,201,202],{},"iconRight"," - Icon nach dem Text",[75,205,207],{"id":206},"beispiele","Beispiele",[209,210,215],"pre",{"className":211,"code":212,"language":213,"meta":214,"style":214},"language-vue shiki shiki-themes github-light github-dark-dimmed","\u003C!-- Primary button -->\n\u003CUiButton variant=\"primary\">Save\u003C\u002FUiButton>\n\n\u003C!-- With loading state -->\n\u003CUiButton variant=\"primary\" :loading=\"isSubmitting\">\n  Submit\n\u003C\u002FUiButton>\n\n\u003C!-- With icon -->\n\u003CUiButton variant=\"secondary\">\n  \u003Ctemplate #iconLeft>\n    \u003CIcon name=\"lucide:plus\" class=\"w-4 h-4\" \u002F>\n  \u003C\u002Ftemplate>\n  Add Item\n\u003C\u002FUiButton>\n\n\u003C!-- Danger button -->\n\u003CUiButton variant=\"danger\">Delete\u003C\u002FUiButton>\n","vue","",[15,216,217,226,256,263,269,300,306,316,321,327,343,349,355,361,367,376,381,387],{"__ignoreMap":214},[218,219,222],"span",{"class":220,"line":221},"line",1,[218,223,225],{"class":224},"sDN9O","\u003C!-- Primary button -->\n",[218,227,229,233,237,241,244,248,251,253],{"class":220,"line":228},2,[218,230,232],{"class":231},"sYgZi","\u003C",[218,234,236],{"class":235},"sIAta","UiButton",[218,238,240],{"class":239},"sMOND"," variant",[218,242,243],{"class":231},"=",[218,245,247],{"class":246},"s-HuK","\"primary\"",[218,249,250],{"class":231},">Save\u003C\u002F",[218,252,236],{"class":235},[218,254,255],{"class":231},">\n",[218,257,259],{"class":220,"line":258},3,[218,260,262],{"emptyLinePlaceholder":261},true,"\n",[218,264,266],{"class":220,"line":265},4,[218,267,268],{"class":224},"\u003C!-- With loading state -->\n",[218,270,272,274,276,278,280,282,285,287,289,293,296,298],{"class":220,"line":271},5,[218,273,232],{"class":231},[218,275,236],{"class":235},[218,277,240],{"class":239},[218,279,243],{"class":231},[218,281,247],{"class":246},[218,283,284],{"class":231}," :",[218,286,142],{"class":239},[218,288,243],{"class":231},[218,290,292],{"class":291},"s4G6O","\"",[218,294,295],{"class":231},"isSubmitting",[218,297,292],{"class":291},[218,299,255],{"class":231},[218,301,303],{"class":220,"line":302},6,[218,304,305],{"class":231},"  Submit\n",[218,307,309,312,314],{"class":220,"line":308},7,[218,310,311],{"class":231},"\u003C\u002F",[218,313,236],{"class":235},[218,315,255],{"class":231},[218,317,319],{"class":220,"line":318},8,[218,320,262],{"emptyLinePlaceholder":261},[218,322,324],{"class":220,"line":323},9,[218,325,326],{"class":224},"\u003C!-- With icon -->\n",[218,328,330,332,334,336,338,341],{"class":220,"line":329},10,[218,331,232],{"class":231},[218,333,236],{"class":235},[218,335,240],{"class":239},[218,337,243],{"class":231},[218,339,340],{"class":246},"\"secondary\"",[218,342,255],{"class":231},[218,344,346],{"class":220,"line":345},11,[218,347,348],{"class":231},"  \u003Ctemplate #iconLeft>\n",[218,350,352],{"class":220,"line":351},12,[218,353,354],{"class":231},"    \u003CIcon name=\"lucide:plus\" class=\"w-4 h-4\" \u002F>\n",[218,356,358],{"class":220,"line":357},13,[218,359,360],{"class":231},"  \u003C\u002Ftemplate>\n",[218,362,364],{"class":220,"line":363},14,[218,365,366],{"class":231},"  Add Item\n",[218,368,370,372,374],{"class":220,"line":369},15,[218,371,311],{"class":231},[218,373,236],{"class":235},[218,375,255],{"class":231},[218,377,379],{"class":220,"line":378},16,[218,380,262],{"emptyLinePlaceholder":261},[218,382,384],{"class":220,"line":383},17,[218,385,386],{"class":224},"\u003C!-- Danger button -->\n",[218,388,390,392,394,396,398,401,404,406],{"class":220,"line":389},18,[218,391,232],{"class":231},[218,393,236],{"class":235},[218,395,240],{"class":239},[218,397,243],{"class":231},[218,399,400],{"class":246},"\"danger\"",[218,402,403],{"class":231},">Delete\u003C\u002F",[218,405,236],{"class":235},[218,407,255],{"class":231},[31,409,411],{"id":410},"input-uiinput","Input (UiInput)",[11,413,414],{},"Texteingabe mit Label, Fehlerzustand und Icons.",[75,416,78],{"id":417},"props-1",[80,419,420,432],{},[83,421,422],{},[86,423,424,426,428,430],{},[89,425,91],{},[89,427,94],{},[89,429,97],{},[89,431,100],{},[102,433,434,449,465,479,493,507,521,535,548],{},[86,435,436,441,443,446],{},[107,437,438],{},[15,439,440],{},"type",[107,442,114],{},[107,444,445],{},"'text'",[107,447,448],{},"'text', 'email', 'password', 'number', 'date'",[86,450,451,456,459,462],{},[107,452,453],{},[15,454,455],{},"modelValue",[107,457,458],{},"string\u002Fnumber",[107,460,461],{},"-",[107,463,464],{},"v-model-Wert",[86,466,467,472,474,476],{},[107,468,469],{},[15,470,471],{},"label",[107,473,114],{},[107,475,461],{},[107,477,478],{},"Label-Text",[86,480,481,486,488,490],{},[107,482,483],{},[15,484,485],{},"placeholder",[107,487,114],{},[107,489,461],{},[107,491,492],{},"Platzhaltertext",[86,494,495,500,502,504],{},[107,496,497],{},[15,498,499],{},"error",[107,501,114],{},[107,503,461],{},[107,505,506],{},"Fehlermeldung",[86,508,509,514,516,518],{},[107,510,511],{},[15,512,513],{},"helpText",[107,515,114],{},[107,517,461],{},[107,519,520],{},"Hilfetext (wird angezeigt, wenn kein Fehler vorliegt)",[86,522,523,528,530,532],{},[107,524,525],{},[15,526,527],{},"required",[107,529,145],{},[107,531,148],{},[107,533,534],{},"Sternchen für Pflichtfeld anzeigen",[86,536,537,541,543,545],{},[107,538,539],{},[15,540,158],{},[107,542,145],{},[107,544,148],{},[107,546,547],{},"Eingabefeld deaktivieren",[86,549,550,554,556,558],{},[107,551,552],{},[15,553,127],{},[107,555,114],{},[107,557,132],{},[107,559,560],{},"'sm', 'md'",[75,562,183],{"id":563},"slots-1",[39,565,566,571],{},[42,567,568,570],{},[15,569,196],{}," - Icon auf der linken Seite des Eingabefelds",[42,572,573,575],{},[15,574,202],{}," - Icon auf der rechten Seite des Eingabefelds",[75,577,207],{"id":578},"beispiele-1",[209,580,582],{"className":211,"code":581,"language":213,"meta":214,"style":214},"\u003C!-- Basic input -->\n\u003CUiInput v-model=\"email\" label=\"Email\" type=\"email\" placeholder=\"you@example.com\" \u002F>\n\n\u003C!-- With error -->\n\u003CUiInput v-model=\"email\" label=\"Email\" :error=\"errors.email\" required \u002F>\n\n\u003C!-- With search icon -->\n\u003CUiInput v-model=\"search\" placeholder=\"Search...\">\n  \u003Ctemplate #iconLeft>\n    \u003CIcon name=\"lucide:search\" class=\"w-4 h-4\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiInput>\n",[15,583,584,589,635,639,644,684,688,693,719,723,728,732],{"__ignoreMap":214},[218,585,586],{"class":220,"line":221},[218,587,588],{"class":224},"\u003C!-- Basic input -->\n",[218,590,591,593,596,599,601,603,606,608,611,613,616,619,621,624,627,629,632],{"class":220,"line":228},[218,592,232],{"class":231},[218,594,595],{"class":235},"UiInput",[218,597,598],{"class":239}," v-model",[218,600,243],{"class":231},[218,602,292],{"class":291},[218,604,605],{"class":231},"email",[218,607,292],{"class":291},[218,609,610],{"class":239}," label",[218,612,243],{"class":231},[218,614,615],{"class":246},"\"Email\"",[218,617,618],{"class":239}," type",[218,620,243],{"class":231},[218,622,623],{"class":246},"\"email\"",[218,625,626],{"class":239}," placeholder",[218,628,243],{"class":231},[218,630,631],{"class":246},"\"you@example.com\"",[218,633,634],{"class":231}," \u002F>\n",[218,636,637],{"class":220,"line":258},[218,638,262],{"emptyLinePlaceholder":261},[218,640,641],{"class":220,"line":265},[218,642,643],{"class":224},"\u003C!-- With error -->\n",[218,645,646,648,650,652,654,656,658,660,662,664,666,668,670,672,674,677,679,682],{"class":220,"line":271},[218,647,232],{"class":231},[218,649,595],{"class":235},[218,651,598],{"class":239},[218,653,243],{"class":231},[218,655,292],{"class":291},[218,657,605],{"class":231},[218,659,292],{"class":291},[218,661,610],{"class":239},[218,663,243],{"class":231},[218,665,615],{"class":246},[218,667,284],{"class":231},[218,669,499],{"class":239},[218,671,243],{"class":231},[218,673,292],{"class":291},[218,675,676],{"class":231},"errors.email",[218,678,292],{"class":291},[218,680,681],{"class":239}," required",[218,683,634],{"class":231},[218,685,686],{"class":220,"line":302},[218,687,262],{"emptyLinePlaceholder":261},[218,689,690],{"class":220,"line":308},[218,691,692],{"class":224},"\u003C!-- With search icon -->\n",[218,694,695,697,699,701,703,705,708,710,712,714,717],{"class":220,"line":318},[218,696,232],{"class":231},[218,698,595],{"class":235},[218,700,598],{"class":239},[218,702,243],{"class":231},[218,704,292],{"class":291},[218,706,707],{"class":231},"search",[218,709,292],{"class":291},[218,711,626],{"class":239},[218,713,243],{"class":231},[218,715,716],{"class":246},"\"Search...\"",[218,718,255],{"class":231},[218,720,721],{"class":220,"line":323},[218,722,348],{"class":231},[218,724,725],{"class":220,"line":329},[218,726,727],{"class":231},"    \u003CIcon name=\"lucide:search\" class=\"w-4 h-4\" \u002F>\n",[218,729,730],{"class":220,"line":345},[218,731,360],{"class":231},[218,733,734,736,738],{"class":220,"line":351},[218,735,311],{"class":231},[218,737,595],{"class":235},[218,739,255],{"class":231},[31,741,743],{"id":742},"select-uiselect","Select (UiSelect)",[11,745,746,747,750,751,754,755,758,759,18],{},"Eigenes Dropdown, aufgebaut aus einem ",[15,748,749],{},"\u003Cbutton>","-Trigger und einem schwebenden Menü (kein natives ",[15,752,753],{},"\u003Cselect>","). Beim Öffnen erscheint eine mit einer Transition animierte Liste; der Trigger trägt einen Lucide-Chevron und die ausgewählte Option ein Häkchen-Icon. Das Menü schließt bei einem Klick außerhalb oder mit ",[15,756,757],{},"Escape",". Die Komponente ist generisch über ",[15,760,761],{},"T extends string | number",[75,763,78],{"id":764},"props-2",[80,766,767,779],{},[83,768,769],{},[86,770,771,773,775,777],{},[89,772,91],{},[89,774,94],{},[89,776,97],{},[89,778,100],{},[102,780,781,800,817,829,843,855,867,880],{},[86,782,783,788,791,795],{},[107,784,785],{},[15,786,787],{},"options",[107,789,790],{},"array",[107,792,793],{},[218,794],{},[107,796,797],{},[15,798,799],{},"[{ value, label }]",[86,801,802,806,811,814],{},[107,803,804],{},[15,805,455],{},[107,807,808],{},[15,809,810],{},"T | null",[107,812,813],{},"null",[107,815,816],{},"v-model-Wert (String oder Zahl)",[86,818,819,823,825,827],{},[107,820,821],{},[15,822,471],{},[107,824,114],{},[107,826,461],{},[107,828,478],{},[86,830,831,835,837,840],{},[107,832,833],{},[15,834,485],{},[107,836,114],{},[107,838,839],{},"'Select an option'",[107,841,842],{},"Text, der angezeigt wird, wenn keine Option ausgewählt ist",[86,844,845,849,851,853],{},[107,846,847],{},[15,848,499],{},[107,850,114],{},[107,852,461],{},[107,854,506],{},[86,856,857,861,863,865],{},[107,858,859],{},[15,860,527],{},[107,862,145],{},[107,864,148],{},[107,866,534],{},[86,868,869,873,875,877],{},[107,870,871],{},[15,872,158],{},[107,874,145],{},[107,876,148],{},[107,878,879],{},"Select deaktivieren",[86,881,882,886,888,890],{},[107,883,884],{},[15,885,127],{},[107,887,114],{},[107,889,132],{},[107,891,560],{},[75,893,207],{"id":894},"beispiele-2",[209,896,898],{"className":211,"code":897,"language":213,"meta":214,"style":214},"\u003CUiSelect\n    v-model=\"country\"\n    label=\"Country\"\n    placeholder=\"Select a country\"\n    :options=\"[\n        { value: 'us', label: 'United States' },\n        { value: 'uk', label: 'United Kingdom' },\n        { value: 'de', label: 'Germany' },\n    ]\"\n\u002F>\n",[15,899,900,907,922,932,942,956,973,987,1001,1008],{"__ignoreMap":214},[218,901,902,904],{"class":220,"line":221},[218,903,232],{"class":231},[218,905,906],{"class":235},"UiSelect\n",[218,908,909,912,914,916,919],{"class":220,"line":228},[218,910,911],{"class":239},"    v-model",[218,913,243],{"class":231},[218,915,292],{"class":291},[218,917,918],{"class":231},"country",[218,920,921],{"class":291},"\"\n",[218,923,924,927,929],{"class":220,"line":258},[218,925,926],{"class":239},"    label",[218,928,243],{"class":231},[218,930,931],{"class":246},"\"Country\"\n",[218,933,934,937,939],{"class":220,"line":265},[218,935,936],{"class":239},"    placeholder",[218,938,243],{"class":231},[218,940,941],{"class":246},"\"Select a country\"\n",[218,943,944,947,949,951,953],{"class":220,"line":271},[218,945,946],{"class":231},"    :",[218,948,787],{"class":239},[218,950,243],{"class":231},[218,952,292],{"class":291},[218,954,955],{"class":231},"[\n",[218,957,958,961,964,967,970],{"class":220,"line":302},[218,959,960],{"class":231},"        { value: ",[218,962,963],{"class":246},"'us'",[218,965,966],{"class":231},", label: ",[218,968,969],{"class":246},"'United States'",[218,971,972],{"class":231}," },\n",[218,974,975,977,980,982,985],{"class":220,"line":308},[218,976,960],{"class":231},[218,978,979],{"class":246},"'uk'",[218,981,966],{"class":231},[218,983,984],{"class":246},"'United Kingdom'",[218,986,972],{"class":231},[218,988,989,991,994,996,999],{"class":220,"line":318},[218,990,960],{"class":231},[218,992,993],{"class":246},"'de'",[218,995,966],{"class":231},[218,997,998],{"class":246},"'Germany'",[218,1000,972],{"class":231},[218,1002,1003,1006],{"class":220,"line":323},[218,1004,1005],{"class":231},"    ]",[218,1007,921],{"class":291},[218,1009,1010],{"class":220,"line":329},[218,1011,1012],{"class":231},"\u002F>\n",[31,1014,1016],{"id":1015},"textarea-uitextarea","Textarea (UiTextarea)",[11,1018,1019],{},"Mehrzeilige Texteingabe mit Zeichenzähler.",[75,1021,78],{"id":1022},"props-3",[80,1024,1025,1037],{},[83,1026,1027],{},[86,1028,1029,1031,1033,1035],{},[89,1030,91],{},[89,1032,94],{},[89,1034,97],{},[89,1036,100],{},[102,1038,1039,1051,1063,1075,1091,1105,1120,1132],{},[86,1040,1041,1045,1047,1049],{},[107,1042,1043],{},[15,1044,455],{},[107,1046,114],{},[107,1048,461],{},[107,1050,464],{},[86,1052,1053,1057,1059,1061],{},[107,1054,1055],{},[15,1056,471],{},[107,1058,114],{},[107,1060,461],{},[107,1062,478],{},[86,1064,1065,1069,1071,1073],{},[107,1066,1067],{},[15,1068,485],{},[107,1070,114],{},[107,1072,461],{},[107,1074,492],{},[86,1076,1077,1082,1085,1088],{},[107,1078,1079],{},[15,1080,1081],{},"rows",[107,1083,1084],{},"number",[107,1086,1087],{},"4",[107,1089,1090],{},"Anzahl der Zeilen",[86,1092,1093,1098,1100,1102],{},[107,1094,1095],{},[15,1096,1097],{},"maxLength",[107,1099,1084],{},[107,1101,461],{},[107,1103,1104],{},"Maximale Zeichenzahl (zeigt einen Zähler)",[86,1106,1107,1112,1114,1117],{},[107,1108,1109],{},[15,1110,1111],{},"resize",[107,1113,114],{},[107,1115,1116],{},"'none'",[107,1118,1119],{},"'none', 'vertical', 'both'",[86,1121,1122,1126,1128,1130],{},[107,1123,1124],{},[15,1125,499],{},[107,1127,114],{},[107,1129,461],{},[107,1131,506],{},[86,1133,1134,1138,1140,1142],{},[107,1135,1136],{},[15,1137,527],{},[107,1139,145],{},[107,1141,148],{},[107,1143,534],{},[75,1145,207],{"id":1146},"beispiele-3",[209,1148,1150],{"className":211,"code":1149,"language":213,"meta":214,"style":214},"\u003CUiTextarea\n    v-model=\"description\"\n    label=\"Description\"\n    :rows=\"4\"\n    :max-length=\"500\"\n    resize=\"vertical\"\n\u002F>\n",[15,1151,1152,1159,1172,1181,1196,1212,1222],{"__ignoreMap":214},[218,1153,1154,1156],{"class":220,"line":221},[218,1155,232],{"class":231},[218,1157,1158],{"class":235},"UiTextarea\n",[218,1160,1161,1163,1165,1167,1170],{"class":220,"line":228},[218,1162,911],{"class":239},[218,1164,243],{"class":231},[218,1166,292],{"class":291},[218,1168,1169],{"class":231},"description",[218,1171,921],{"class":291},[218,1173,1174,1176,1178],{"class":220,"line":258},[218,1175,926],{"class":239},[218,1177,243],{"class":231},[218,1179,1180],{"class":246},"\"Description\"\n",[218,1182,1183,1185,1187,1189,1191,1194],{"class":220,"line":265},[218,1184,946],{"class":231},[218,1186,1081],{"class":239},[218,1188,243],{"class":231},[218,1190,292],{"class":291},[218,1192,1087],{"class":1193},"sviXB",[218,1195,921],{"class":291},[218,1197,1198,1200,1203,1205,1207,1210],{"class":220,"line":271},[218,1199,946],{"class":231},[218,1201,1202],{"class":239},"max-length",[218,1204,243],{"class":231},[218,1206,292],{"class":291},[218,1208,1209],{"class":1193},"500",[218,1211,921],{"class":291},[218,1213,1214,1217,1219],{"class":220,"line":302},[218,1215,1216],{"class":239},"    resize",[218,1218,243],{"class":231},[218,1220,1221],{"class":246},"\"vertical\"\n",[218,1223,1224],{"class":220,"line":308},[218,1225,1012],{"class":231},[31,1227,1229],{"id":1228},"checkbox-uicheckbox","Checkbox (UiCheckbox)",[11,1231,1232],{},"Checkbox mit Label und optionaler Beschreibung.",[75,1234,78],{"id":1235},"props-4",[80,1237,1238,1250],{},[83,1239,1240],{},[86,1241,1242,1244,1246,1248],{},[89,1243,91],{},[89,1245,94],{},[89,1247,97],{},[89,1249,100],{},[102,1251,1252,1264,1276,1289],{},[86,1253,1254,1258,1260,1262],{},[107,1255,1256],{},[15,1257,455],{},[107,1259,145],{},[107,1261,148],{},[107,1263,464],{},[86,1265,1266,1270,1272,1274],{},[107,1267,1268],{},[15,1269,471],{},[107,1271,114],{},[107,1273,461],{},[107,1275,478],{},[86,1277,1278,1282,1284,1286],{},[107,1279,1280],{},[15,1281,1169],{},[107,1283,114],{},[107,1285,461],{},[107,1287,1288],{},"Hilfetext unter dem Label",[86,1290,1291,1295,1297,1299],{},[107,1292,1293],{},[15,1294,158],{},[107,1296,145],{},[107,1298,148],{},[107,1300,1301],{},"Checkbox deaktivieren",[75,1303,207],{"id":1304},"beispiele-4",[209,1306,1308],{"className":211,"code":1307,"language":213,"meta":214,"style":214},"\u003CUiCheckbox v-model=\"acceptTerms\" label=\"I accept the terms and conditions\" \u002F>\n\n\u003CUiCheckbox\n    v-model=\"newsletter\"\n    label=\"Subscribe to newsletter\"\n    description=\"Receive weekly updates about new features\"\n\u002F>\n",[15,1309,1310,1337,1341,1348,1361,1370,1380],{"__ignoreMap":214},[218,1311,1312,1314,1317,1319,1321,1323,1326,1328,1330,1332,1335],{"class":220,"line":221},[218,1313,232],{"class":231},[218,1315,1316],{"class":235},"UiCheckbox",[218,1318,598],{"class":239},[218,1320,243],{"class":231},[218,1322,292],{"class":291},[218,1324,1325],{"class":231},"acceptTerms",[218,1327,292],{"class":291},[218,1329,610],{"class":239},[218,1331,243],{"class":231},[218,1333,1334],{"class":246},"\"I accept the terms and conditions\"",[218,1336,634],{"class":231},[218,1338,1339],{"class":220,"line":228},[218,1340,262],{"emptyLinePlaceholder":261},[218,1342,1343,1345],{"class":220,"line":258},[218,1344,232],{"class":231},[218,1346,1347],{"class":235},"UiCheckbox\n",[218,1349,1350,1352,1354,1356,1359],{"class":220,"line":265},[218,1351,911],{"class":239},[218,1353,243],{"class":231},[218,1355,292],{"class":291},[218,1357,1358],{"class":231},"newsletter",[218,1360,921],{"class":291},[218,1362,1363,1365,1367],{"class":220,"line":271},[218,1364,926],{"class":239},[218,1366,243],{"class":231},[218,1368,1369],{"class":246},"\"Subscribe to newsletter\"\n",[218,1371,1372,1375,1377],{"class":220,"line":302},[218,1373,1374],{"class":239},"    description",[218,1376,243],{"class":231},[218,1378,1379],{"class":246},"\"Receive weekly updates about new features\"\n",[218,1381,1382],{"class":220,"line":308},[218,1383,1012],{"class":231},[31,1385,1387],{"id":1386},"switch-uiswitch","Switch (UiSwitch)",[11,1389,1390,1391,1394,1395,1398,1399,1402],{},"Umschalter aus Schiene und Griff mit ",[15,1392,1393],{},"role=\"switch\"","-Semantik — das An\u002FAus-Bedienelement, das in Einstellungen, Präferenzen und Konfigurationskarten verwendet wird. Verwenden Sie ",[15,1396,1397],{},"UiSwitch"," für einen gleitenden Schienen-Umschalter und ",[15,1400,1401],{},"UiToggle"," für den Umschalter im Icon-Stil; für dreiwertige Feature-Pakete (an\u002Fteilweise\u002Faus) behalten Sie ein maßgeschneidertes Bedienelement.",[75,1404,78],{"id":1405},"props-5",[80,1407,1408,1420],{},[83,1409,1410],{},[86,1411,1412,1414,1416,1418],{},[89,1413,91],{},[89,1415,94],{},[89,1417,97],{},[89,1419,100],{},[102,1421,1422,1434,1447],{},[86,1423,1424,1428,1430,1432],{},[107,1425,1426],{},[15,1427,455],{},[107,1429,145],{},[107,1431,148],{},[107,1433,464],{},[86,1435,1436,1440,1442,1444],{},[107,1437,1438],{},[15,1439,158],{},[107,1441,145],{},[107,1443,148],{},[107,1445,1446],{},"Den Switch deaktivieren",[86,1448,1449,1453,1455,1457],{},[107,1450,1451],{},[15,1452,471],{},[107,1454,114],{},[107,1456,461],{},[107,1458,1459],{},"Zugänglicher Name — erforderlich, wenn kein sichtbares Label auf den Switch verweist",[75,1461,207],{"id":1462},"beispiele-5",[209,1464,1466],{"className":211,"code":1465,"language":213,"meta":214,"style":214},"\u003CUiSwitch v-model=\"autoReplyEnabled\" label=\"Enable auto-reply\" \u002F>\n\n\u003CUiSwitch v-model=\"featureOn\" :disabled=\"!canToggle\" label=\"Knowledge graph\" \u002F>\n",[15,1467,1468,1494,1498],{"__ignoreMap":214},[218,1469,1470,1472,1474,1476,1478,1480,1483,1485,1487,1489,1492],{"class":220,"line":221},[218,1471,232],{"class":231},[218,1473,1397],{"class":235},[218,1475,598],{"class":239},[218,1477,243],{"class":231},[218,1479,292],{"class":291},[218,1481,1482],{"class":231},"autoReplyEnabled",[218,1484,292],{"class":291},[218,1486,610],{"class":239},[218,1488,243],{"class":231},[218,1490,1491],{"class":246},"\"Enable auto-reply\"",[218,1493,634],{"class":231},[218,1495,1496],{"class":220,"line":228},[218,1497,262],{"emptyLinePlaceholder":261},[218,1499,1500,1502,1504,1506,1508,1510,1513,1515,1517,1519,1521,1523,1527,1530,1532,1534,1536,1539],{"class":220,"line":258},[218,1501,232],{"class":231},[218,1503,1397],{"class":235},[218,1505,598],{"class":239},[218,1507,243],{"class":231},[218,1509,292],{"class":291},[218,1511,1512],{"class":231},"featureOn",[218,1514,292],{"class":291},[218,1516,284],{"class":231},[218,1518,158],{"class":239},[218,1520,243],{"class":231},[218,1522,292],{"class":291},[218,1524,1526],{"class":1525},"s7YZ4","!",[218,1528,1529],{"class":231},"canToggle",[218,1531,292],{"class":291},[218,1533,610],{"class":239},[218,1535,243],{"class":231},[218,1537,1538],{"class":246},"\"Knowledge graph\"",[218,1540,634],{"class":231},[31,1542,1544],{"id":1543},"progress-bar-uiprogressbar","Progress Bar (UiProgressBar)",[11,1546,1547,1548,1551,1552,18],{},"Fortschrittsbalken mit bestimmtem oder unbestimmtem Verlauf und ",[15,1549,1550],{},"role=\"progressbar\"",". Wird für Importe, Versandlimits und jede Arbeit unbekannter Dauer (unbestimmter Durchlauf) verwendet. Berücksichtigt ",[15,1553,1554],{},"prefers-reduced-motion",[75,1556,78],{"id":1557},"props-6",[80,1559,1560,1572],{},[83,1561,1562],{},[86,1563,1564,1566,1568,1570],{},[89,1565,91],{},[89,1567,94],{},[89,1569,97],{},[89,1571,100],{},[102,1573,1574,1593,1607,1620,1633],{},[86,1575,1576,1581,1583,1586],{},[107,1577,1578],{},[15,1579,1580],{},"value",[107,1582,1084],{},[107,1584,1585],{},"0",[107,1587,1588,1589,1592],{},"0–100. Wird ignoriert, wenn ",[15,1590,1591],{},"indeterminate"," true ist.",[86,1594,1595,1599,1601,1604],{},[107,1596,1597],{},[15,1598,111],{},[107,1600,114],{},[107,1602,1603],{},"'brand'",[107,1605,1606],{},"'brand', 'success', 'warning', 'error'",[86,1608,1609,1613,1615,1617],{},[107,1610,1611],{},[15,1612,1591],{},[107,1614,145],{},[107,1616,148],{},[107,1618,1619],{},"Animierter Durchlauf für Arbeit unbekannter Dauer",[86,1621,1622,1626,1628,1630],{},[107,1623,1624],{},[15,1625,127],{},[107,1627,114],{},[107,1629,132],{},[107,1631,1632],{},"'sm', 'md' (Höhe der Schiene)",[86,1634,1635,1640,1642,1644],{},[107,1636,1637],{},[15,1638,1639],{},"ariaLabel",[107,1641,114],{},[107,1643,461],{},[107,1645,1646],{},"Zugänglicher Name, den Screenreader vorlesen",[75,1648,207],{"id":1649},"beispiele-6",[209,1651,1653],{"className":211,"code":1652,"language":213,"meta":214,"style":214},"\u003CUiProgressBar :value=\"importPercent\" :aria-label=\"`Importing: ${importPercent}%`\" \u002F>\n\n\u003CUiProgressBar indeterminate variant=\"brand\" aria-label=\"Discovering messages\" \u002F>\n\n\u003CUiProgressBar :value=\"95\" variant=\"warning\" size=\"sm\" aria-label=\"Sending limit\" \u002F>\n",[15,1654,1655,1696,1700,1726,1730],{"__ignoreMap":214},[218,1656,1657,1659,1662,1664,1666,1668,1670,1673,1675,1677,1680,1682,1684,1687,1689,1692,1694],{"class":220,"line":221},[218,1658,232],{"class":231},[218,1660,1661],{"class":235},"UiProgressBar",[218,1663,284],{"class":231},[218,1665,1580],{"class":239},[218,1667,243],{"class":231},[218,1669,292],{"class":291},[218,1671,1672],{"class":231},"importPercent",[218,1674,292],{"class":291},[218,1676,284],{"class":231},[218,1678,1679],{"class":239},"aria-label",[218,1681,243],{"class":231},[218,1683,292],{"class":291},[218,1685,1686],{"class":246},"`Importing: ${",[218,1688,1672],{"class":231},[218,1690,1691],{"class":246},"}%`",[218,1693,292],{"class":291},[218,1695,634],{"class":231},[218,1697,1698],{"class":220,"line":228},[218,1699,262],{"emptyLinePlaceholder":261},[218,1701,1702,1704,1706,1709,1711,1713,1716,1719,1721,1724],{"class":220,"line":258},[218,1703,232],{"class":231},[218,1705,1661],{"class":235},[218,1707,1708],{"class":239}," indeterminate",[218,1710,240],{"class":239},[218,1712,243],{"class":231},[218,1714,1715],{"class":246},"\"brand\"",[218,1717,1718],{"class":239}," aria-label",[218,1720,243],{"class":231},[218,1722,1723],{"class":246},"\"Discovering messages\"",[218,1725,634],{"class":231},[218,1727,1728],{"class":220,"line":265},[218,1729,262],{"emptyLinePlaceholder":261},[218,1731,1732,1734,1736,1738,1740,1742,1744,1747,1749,1751,1753,1756,1759,1761,1764,1766,1768,1771],{"class":220,"line":271},[218,1733,232],{"class":231},[218,1735,1661],{"class":235},[218,1737,284],{"class":231},[218,1739,1580],{"class":239},[218,1741,243],{"class":231},[218,1743,292],{"class":291},[218,1745,1746],{"class":1193},"95",[218,1748,292],{"class":291},[218,1750,240],{"class":239},[218,1752,243],{"class":231},[218,1754,1755],{"class":246},"\"warning\"",[218,1757,1758],{"class":239}," size",[218,1760,243],{"class":231},[218,1762,1763],{"class":246},"\"sm\"",[218,1765,1718],{"class":239},[218,1767,243],{"class":231},[218,1769,1770],{"class":246},"\"Sending limit\"",[218,1772,634],{"class":231},[31,1774,1776],{"id":1775},"card-uicard","Card (UiCard)",[11,1778,1779],{},"Container mit Varianten und Slots.",[75,1781,78],{"id":1782},"props-7",[80,1784,1785,1797],{},[83,1786,1787],{},[86,1788,1789,1791,1793,1795],{},[89,1790,91],{},[89,1792,94],{},[89,1794,97],{},[89,1796,100],{},[102,1798,1799,1813,1827,1841,1855],{},[86,1800,1801,1806,1808,1810],{},[107,1802,1803],{},[15,1804,1805],{},"padding",[107,1807,114],{},[107,1809,132],{},[107,1811,1812],{},"'none', 'sm', 'md', 'lg'",[86,1814,1815,1819,1821,1824],{},[107,1816,1817],{},[15,1818,111],{},[107,1820,114],{},[107,1822,1823],{},"'default'",[107,1825,1826],{},"'default', 'info', 'warning', 'error'",[86,1828,1829,1834,1836,1838],{},[107,1830,1831],{},[15,1832,1833],{},"hoverable",[107,1835,145],{},[107,1837,148],{},[107,1839,1840],{},"Rahmeneffekt beim Hovern hinzufügen",[86,1842,1843,1848,1850,1852],{},[107,1844,1845],{},[15,1846,1847],{},"clickable",[107,1849,145],{},[107,1851,148],{},[107,1853,1854],{},"Zeiger anzeigen und Click-Event emittieren",[86,1856,1857,1862,1864,1867],{},[107,1858,1859],{},[15,1860,1861],{},"overflow",[107,1863,114],{},[107,1865,1866],{},"'visible'",[107,1868,1869],{},"'visible', 'hidden'",[75,1871,183],{"id":1872},"slots-2",[39,1874,1875,1880,1886],{},[42,1876,1877,1879],{},[15,1878,190],{}," - Hauptinhalt",[42,1881,1882,1885],{},[15,1883,1884],{},"header"," - Kopfbereich mit unterer Rahmenlinie",[42,1887,1888,1891],{},[15,1889,1890],{},"footer"," - Fußbereich mit oberer Rahmenlinie",[75,1893,207],{"id":1894},"beispiele-7",[209,1896,1898],{"className":211,"code":1897,"language":213,"meta":214,"style":214},"\u003C!-- Simple card -->\n\u003CUiCard padding=\"md\">\n  Card content here\n\u003C\u002FUiCard>\n\n\u003C!-- Card with header and footer -->\n\u003CUiCard padding=\"none\">\n  \u003Ctemplate #header>\n    \u003Cdiv class=\"px-6 py-4\">\n      \u003Ch2>Card Title\u003C\u002Fh2>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\n  \u003Cdiv class=\"px-6 py-4\">\n    Content here\n  \u003C\u002Fdiv>\n\n  \u003Ctemplate #footer>\n    \u003Cdiv class=\"px-6 py-4 flex justify-end\">\n      \u003CUiButton>Action\u003C\u002FUiButton>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiCard>\n\n\u003C!-- Info callout -->\n\u003CUiCard variant=\"info\" padding=\"md\">\n  \u003Cp>This is informational text.\u003C\u002Fp>\n\u003C\u002FUiCard>\n",[15,1899,1900,1905,1922,1927,1935,1939,1944,1959,1964,1969,1974,1979,1983,1987,1992,1997,2002,2006,2011,2017,2023,2028,2033,2042,2047,2053,2075,2081],{"__ignoreMap":214},[218,1901,1902],{"class":220,"line":221},[218,1903,1904],{"class":224},"\u003C!-- Simple card -->\n",[218,1906,1907,1909,1912,1915,1917,1920],{"class":220,"line":228},[218,1908,232],{"class":231},[218,1910,1911],{"class":235},"UiCard",[218,1913,1914],{"class":239}," padding",[218,1916,243],{"class":231},[218,1918,1919],{"class":246},"\"md\"",[218,1921,255],{"class":231},[218,1923,1924],{"class":220,"line":258},[218,1925,1926],{"class":231},"  Card content here\n",[218,1928,1929,1931,1933],{"class":220,"line":265},[218,1930,311],{"class":231},[218,1932,1911],{"class":235},[218,1934,255],{"class":231},[218,1936,1937],{"class":220,"line":271},[218,1938,262],{"emptyLinePlaceholder":261},[218,1940,1941],{"class":220,"line":302},[218,1942,1943],{"class":224},"\u003C!-- Card with header and footer -->\n",[218,1945,1946,1948,1950,1952,1954,1957],{"class":220,"line":308},[218,1947,232],{"class":231},[218,1949,1911],{"class":235},[218,1951,1914],{"class":239},[218,1953,243],{"class":231},[218,1955,1956],{"class":246},"\"none\"",[218,1958,255],{"class":231},[218,1960,1961],{"class":220,"line":318},[218,1962,1963],{"class":231},"  \u003Ctemplate #header>\n",[218,1965,1966],{"class":220,"line":323},[218,1967,1968],{"class":231},"    \u003Cdiv class=\"px-6 py-4\">\n",[218,1970,1971],{"class":220,"line":329},[218,1972,1973],{"class":231},"      \u003Ch2>Card Title\u003C\u002Fh2>\n",[218,1975,1976],{"class":220,"line":345},[218,1977,1978],{"class":231},"    \u003C\u002Fdiv>\n",[218,1980,1981],{"class":220,"line":351},[218,1982,360],{"class":231},[218,1984,1985],{"class":220,"line":357},[218,1986,262],{"emptyLinePlaceholder":261},[218,1988,1989],{"class":220,"line":363},[218,1990,1991],{"class":231},"  \u003Cdiv class=\"px-6 py-4\">\n",[218,1993,1994],{"class":220,"line":369},[218,1995,1996],{"class":231},"    Content here\n",[218,1998,1999],{"class":220,"line":378},[218,2000,2001],{"class":231},"  \u003C\u002Fdiv>\n",[218,2003,2004],{"class":220,"line":383},[218,2005,262],{"emptyLinePlaceholder":261},[218,2007,2008],{"class":220,"line":389},[218,2009,2010],{"class":231},"  \u003Ctemplate #footer>\n",[218,2012,2014],{"class":220,"line":2013},19,[218,2015,2016],{"class":231},"    \u003Cdiv class=\"px-6 py-4 flex justify-end\">\n",[218,2018,2020],{"class":220,"line":2019},20,[218,2021,2022],{"class":231},"      \u003CUiButton>Action\u003C\u002FUiButton>\n",[218,2024,2026],{"class":220,"line":2025},21,[218,2027,1978],{"class":231},[218,2029,2031],{"class":220,"line":2030},22,[218,2032,360],{"class":231},[218,2034,2036,2038,2040],{"class":220,"line":2035},23,[218,2037,311],{"class":231},[218,2039,1911],{"class":235},[218,2041,255],{"class":231},[218,2043,2045],{"class":220,"line":2044},24,[218,2046,262],{"emptyLinePlaceholder":261},[218,2048,2050],{"class":220,"line":2049},25,[218,2051,2052],{"class":224},"\u003C!-- Info callout -->\n",[218,2054,2056,2058,2060,2062,2064,2067,2069,2071,2073],{"class":220,"line":2055},26,[218,2057,232],{"class":231},[218,2059,1911],{"class":235},[218,2061,240],{"class":239},[218,2063,243],{"class":231},[218,2065,2066],{"class":246},"\"info\"",[218,2068,1914],{"class":239},[218,2070,243],{"class":231},[218,2072,1919],{"class":246},[218,2074,255],{"class":231},[218,2076,2078],{"class":220,"line":2077},27,[218,2079,2080],{"class":231},"  \u003Cp>This is informational text.\u003C\u002Fp>\n",[218,2082,2084,2086,2088],{"class":220,"line":2083},28,[218,2085,311],{"class":231},[218,2087,1911],{"class":235},[218,2089,255],{"class":231},[31,2091,2093],{"id":2092},"modal-uimodal","Modal (UiModal)",[11,2095,2096],{},"Dialog-Overlay mit Hintergrundfläche.",[75,2098,78],{"id":2099},"props-8",[80,2101,2102,2114],{},[83,2103,2104],{},[86,2105,2106,2108,2110,2112],{},[89,2107,91],{},[89,2109,94],{},[89,2111,97],{},[89,2113,100],{},[102,2115,2116,2130,2144,2157,2172,2186],{},[86,2117,2118,2123,2125,2127],{},[107,2119,2120],{},[15,2121,2122],{},"open",[107,2124,145],{},[107,2126,148],{},[107,2128,2129],{},"v-model:open",[86,2131,2132,2137,2139,2141],{},[107,2133,2134],{},[15,2135,2136],{},"title",[107,2138,114],{},[107,2140,461],{},[107,2142,2143],{},"Titel des Modals",[86,2145,2146,2150,2152,2154],{},[107,2147,2148],{},[15,2149,127],{},[107,2151,114],{},[107,2153,132],{},[107,2155,2156],{},"'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', 'full'",[86,2158,2159,2164,2166,2169],{},[107,2160,2161],{},[15,2162,2163],{},"closable",[107,2165,145],{},[107,2167,2168],{},"true",[107,2170,2171],{},"Schließen-Button anzeigen",[86,2173,2174,2179,2181,2183],{},[107,2175,2176],{},[15,2177,2178],{},"persistent",[107,2180,145],{},[107,2182,148],{},[107,2184,2185],{},"Schließen per Klick auf die Hintergrundfläche deaktivieren",[86,2187,2188,2193,2195,2197],{},[107,2189,2190],{},[15,2191,2192],{},"zIndex",[107,2194,1084],{},[107,2196,461],{},[107,2198,2199],{},"Eigener z-index, um über Elementen mit hohem z-index wie dem E-Mail-Builder zu rendern",[75,2201,183],{"id":2202},"slots-3",[39,2204,2205,2210],{},[42,2206,2207,2209],{},[15,2208,190],{}," - Inhalt des Modals",[42,2211,2212,2214],{},[15,2213,1890],{}," - Fußbereich des Modals (Buttons)",[75,2216,2218],{"id":2217},"events","Events",[39,2220,2221],{},[42,2222,2223,2226],{},[15,2224,2225],{},"update:open"," - Für v-model",[75,2228,207],{"id":2229},"beispiele-8",[209,2231,2233],{"className":211,"code":2232,"language":213,"meta":214,"style":214},"\u003Ctemplate>\n    \u003CUiButton @click=\"showModal = true\">Open Modal\u003C\u002FUiButton>\n\n    \u003CUiModal v-model:open=\"showModal\" title=\"Confirm Action\" size=\"sm\">\n        \u003Cp>Are you sure you want to proceed?\u003C\u002Fp>\n\n        \u003Ctemplate #footer>\n            \u003CUiButton variant=\"ghost\" @click=\"showModal = false\"> Cancel \u003C\u002FUiButton>\n            \u003CUiButton variant=\"primary\" @click=\"handleConfirm\"> Confirm \u003C\u002FUiButton>\n        \u003C\u002Ftemplate>\n    \u003C\u002FUiModal>\n\u003C\u002Ftemplate>\n",[15,2234,2235,2244,2278,2282,2321,2335,2339,2352,2390,2422,2431,2440],{"__ignoreMap":214},[218,2236,2237,2239,2242],{"class":220,"line":221},[218,2238,232],{"class":231},[218,2240,2241],{"class":235},"template",[218,2243,255],{"class":231},[218,2245,2246,2249,2251,2254,2257,2259,2261,2264,2266,2269,2271,2274,2276],{"class":220,"line":228},[218,2247,2248],{"class":231},"    \u003C",[218,2250,236],{"class":235},[218,2252,2253],{"class":231}," @",[218,2255,2256],{"class":239},"click",[218,2258,243],{"class":231},[218,2260,292],{"class":291},[218,2262,2263],{"class":231},"showModal ",[218,2265,243],{"class":1525},[218,2267,2268],{"class":1193}," true",[218,2270,292],{"class":291},[218,2272,2273],{"class":231},">Open Modal\u003C\u002F",[218,2275,236],{"class":235},[218,2277,255],{"class":231},[218,2279,2280],{"class":220,"line":258},[218,2281,262],{"emptyLinePlaceholder":261},[218,2283,2284,2286,2289,2291,2294,2296,2298,2300,2303,2305,2308,2310,2313,2315,2317,2319],{"class":220,"line":265},[218,2285,2248],{"class":231},[218,2287,2288],{"class":235},"UiModal",[218,2290,598],{"class":239},[218,2292,2293],{"class":231},":",[218,2295,2122],{"class":239},[218,2297,243],{"class":231},[218,2299,292],{"class":291},[218,2301,2302],{"class":231},"showModal",[218,2304,292],{"class":291},[218,2306,2307],{"class":239}," title",[218,2309,243],{"class":231},[218,2311,2312],{"class":246},"\"Confirm Action\"",[218,2314,1758],{"class":239},[218,2316,243],{"class":231},[218,2318,1763],{"class":246},[218,2320,255],{"class":231},[218,2322,2323,2326,2328,2331,2333],{"class":220,"line":271},[218,2324,2325],{"class":231},"        \u003C",[218,2327,11],{"class":235},[218,2329,2330],{"class":231},">Are you sure you want to proceed?\u003C\u002F",[218,2332,11],{"class":235},[218,2334,255],{"class":231},[218,2336,2337],{"class":220,"line":302},[218,2338,262],{"emptyLinePlaceholder":261},[218,2340,2341,2343,2345,2348,2350],{"class":220,"line":308},[218,2342,2325],{"class":231},[218,2344,2241],{"class":235},[218,2346,2347],{"class":231}," #",[218,2349,1890],{"class":239},[218,2351,255],{"class":231},[218,2353,2354,2357,2359,2361,2363,2366,2368,2370,2372,2374,2376,2378,2381,2383,2386,2388],{"class":220,"line":318},[218,2355,2356],{"class":231},"            \u003C",[218,2358,236],{"class":235},[218,2360,240],{"class":239},[218,2362,243],{"class":231},[218,2364,2365],{"class":246},"\"ghost\"",[218,2367,2253],{"class":231},[218,2369,2256],{"class":239},[218,2371,243],{"class":231},[218,2373,292],{"class":291},[218,2375,2263],{"class":231},[218,2377,243],{"class":1525},[218,2379,2380],{"class":1193}," false",[218,2382,292],{"class":291},[218,2384,2385],{"class":231},"> Cancel \u003C\u002F",[218,2387,236],{"class":235},[218,2389,255],{"class":231},[218,2391,2392,2394,2396,2398,2400,2402,2404,2406,2408,2410,2413,2415,2418,2420],{"class":220,"line":323},[218,2393,2356],{"class":231},[218,2395,236],{"class":235},[218,2397,240],{"class":239},[218,2399,243],{"class":231},[218,2401,247],{"class":246},[218,2403,2253],{"class":231},[218,2405,2256],{"class":239},[218,2407,243],{"class":231},[218,2409,292],{"class":291},[218,2411,2412],{"class":231},"handleConfirm",[218,2414,292],{"class":291},[218,2416,2417],{"class":231},"> Confirm \u003C\u002F",[218,2419,236],{"class":235},[218,2421,255],{"class":231},[218,2423,2424,2427,2429],{"class":220,"line":329},[218,2425,2426],{"class":231},"        \u003C\u002F",[218,2428,2241],{"class":235},[218,2430,255],{"class":231},[218,2432,2433,2436,2438],{"class":220,"line":345},[218,2434,2435],{"class":231},"    \u003C\u002F",[218,2437,2288],{"class":235},[218,2439,255],{"class":231},[218,2441,2442,2444,2446],{"class":220,"line":351},[218,2443,311],{"class":231},[218,2445,2241],{"class":235},[218,2447,255],{"class":231},[31,2449,2451],{"id":2450},"modal-footer-uimodalfooter","Modal Footer (UiModalFooter)",[11,2453,2454],{},"Fußbereichs-Komponente für Modals mit Abbrechen- und Bestätigen-Button.",[75,2456,78],{"id":2457},"props-9",[80,2459,2460,2472],{},[83,2461,2462],{},[86,2463,2464,2466,2468,2470],{},[89,2465,91],{},[89,2467,94],{},[89,2469,97],{},[89,2471,100],{},[102,2473,2474,2489,2504,2518,2532],{},[86,2475,2476,2481,2483,2486],{},[107,2477,2478],{},[15,2479,2480],{},"cancelText",[107,2482,114],{},[107,2484,2485],{},"'Cancel'",[107,2487,2488],{},"Beschriftung des Abbrechen-Buttons",[86,2490,2491,2496,2498,2501],{},[107,2492,2493],{},[15,2494,2495],{},"confirmText",[107,2497,114],{},[107,2499,2500],{},"'Confirm'",[107,2502,2503],{},"Beschriftung des Bestätigen-Buttons",[86,2505,2506,2511,2513,2515],{},[107,2507,2508],{},[15,2509,2510],{},"confirmVariant",[107,2512,114],{},[107,2514,117],{},[107,2516,2517],{},"Button-Variante: 'primary', 'secondary', 'ghost', 'danger', 'danger-ghost' usw.",[86,2519,2520,2525,2527,2529],{},[107,2521,2522],{},[15,2523,2524],{},"isLoading",[107,2526,145],{},[107,2528,148],{},[107,2530,2531],{},"Deaktiviert die Buttons und zeigt den Ladezustand",[86,2533,2534,2539,2541,2543],{},[107,2535,2536],{},[15,2537,2538],{},"isDisabled",[107,2540,145],{},[107,2542,148],{},[107,2544,2545],{},"Deaktiviert den Bestätigen-Button",[75,2547,183],{"id":2548},"slots-4",[39,2550,2551],{},[42,2552,2553,2555],{},[15,2554,190],{}," - Eigener Inhalt des Fußbereichs (überschreibt die Standardbuttons)",[75,2557,2218],{"id":2558},"events-1",[39,2560,2561,2567],{},[42,2562,2563,2566],{},[15,2564,2565],{},"cancel"," - Abbrechen-Button geklickt",[42,2568,2569,2572],{},[15,2570,2571],{},"confirm"," - Bestätigen-Button geklickt",[31,2574,2576],{"id":2575},"badge-uibadge","Badge (UiBadge)",[11,2578,2579],{},"Statusanzeige mit Varianten.",[75,2581,78],{"id":2582},"props-10",[80,2584,2585,2597],{},[83,2586,2587],{},[86,2588,2589,2591,2593,2595],{},[89,2590,91],{},[89,2592,94],{},[89,2594,97],{},[89,2596,100],{},[102,2598,2599,2612,2625],{},[86,2600,2601,2605,2607,2609],{},[107,2602,2603],{},[15,2604,111],{},[107,2606,114],{},[107,2608,1823],{},[107,2610,2611],{},"'default', 'success', 'warning', 'error', 'neutral'",[86,2613,2614,2618,2620,2623],{},[107,2615,2616],{},[15,2617,127],{},[107,2619,114],{},[107,2621,2622],{},"'sm'",[107,2624,560],{},[86,2626,2627,2632,2634,2636],{},[107,2628,2629],{},[15,2630,2631],{},"dot",[107,2633,145],{},[107,2635,148],{},[107,2637,2638],{},"Punkt statt Hintergrund anzeigen",[75,2640,183],{"id":2641},"slots-5",[39,2643,2644,2649],{},[42,2645,2646,2648],{},[15,2647,190],{}," - Badge-Text",[42,2650,2651,197],{},[15,2652,2653],{},"icon",[75,2655,207],{"id":2656},"beispiele-9",[209,2658,2660],{"className":211,"code":2659,"language":213,"meta":214,"style":214},"\u003CUiBadge variant=\"success\">Active\u003C\u002FUiBadge>\n\u003CUiBadge variant=\"warning\">Pending\u003C\u002FUiBadge>\n\u003CUiBadge variant=\"error\">Failed\u003C\u002FUiBadge>\n\n\u003C!-- With dot -->\n\u003CUiBadge variant=\"success\" dot>Online\u003C\u002FUiBadge>\n",[15,2661,2662,2683,2702,2722,2726,2731],{"__ignoreMap":214},[218,2663,2664,2666,2669,2671,2673,2676,2679,2681],{"class":220,"line":221},[218,2665,232],{"class":231},[218,2667,2668],{"class":235},"UiBadge",[218,2670,240],{"class":239},[218,2672,243],{"class":231},[218,2674,2675],{"class":246},"\"success\"",[218,2677,2678],{"class":231},">Active\u003C\u002F",[218,2680,2668],{"class":235},[218,2682,255],{"class":231},[218,2684,2685,2687,2689,2691,2693,2695,2698,2700],{"class":220,"line":228},[218,2686,232],{"class":231},[218,2688,2668],{"class":235},[218,2690,240],{"class":239},[218,2692,243],{"class":231},[218,2694,1755],{"class":246},[218,2696,2697],{"class":231},">Pending\u003C\u002F",[218,2699,2668],{"class":235},[218,2701,255],{"class":231},[218,2703,2704,2706,2708,2710,2712,2715,2718,2720],{"class":220,"line":258},[218,2705,232],{"class":231},[218,2707,2668],{"class":235},[218,2709,240],{"class":239},[218,2711,243],{"class":231},[218,2713,2714],{"class":246},"\"error\"",[218,2716,2717],{"class":231},">Failed\u003C\u002F",[218,2719,2668],{"class":235},[218,2721,255],{"class":231},[218,2723,2724],{"class":220,"line":265},[218,2725,262],{"emptyLinePlaceholder":261},[218,2727,2728],{"class":220,"line":271},[218,2729,2730],{"class":224},"\u003C!-- With dot -->\n",[218,2732,2733,2735,2737,2739,2741,2743,2746,2749,2751],{"class":220,"line":302},[218,2734,232],{"class":231},[218,2736,2668],{"class":235},[218,2738,240],{"class":239},[218,2740,243],{"class":231},[218,2742,2675],{"class":246},[218,2744,2745],{"class":239}," dot",[218,2747,2748],{"class":231},">Online\u003C\u002F",[218,2750,2668],{"class":235},[218,2752,255],{"class":231},[31,2754,2756],{"id":2755},"tabs-uitabs","Tabs (UiTabs)",[11,2758,2759],{},"Tab-Navigation mit Tastaturunterstützung.",[75,2761,78],{"id":2762},"props-11",[80,2764,2765,2777],{},[83,2766,2767],{},[86,2768,2769,2771,2773,2775],{},[89,2770,91],{},[89,2772,94],{},[89,2774,97],{},[89,2776,100],{},[102,2778,2779,2792],{},[86,2780,2781,2785,2787,2789],{},[107,2782,2783],{},[15,2784,455],{},[107,2786,114],{},[107,2788,461],{},[107,2790,2791],{},"v-model (Wert des aktiven Tabs)",[86,2793,2794,2799,2801,2805],{},[107,2795,2796],{},[15,2797,2798],{},"tabs",[107,2800,790],{},[107,2802,2803],{},[218,2804],{},[107,2806,2807],{},[15,2808,2809],{},"[{ value, label, count? }]",[75,2811,207],{"id":2812},"beispiele-10",[209,2814,2816],{"className":211,"code":2815,"language":213,"meta":214,"style":214},"\u003CUiTabs\n    v-model=\"activeTab\"\n    :tabs=\"[\n        { value: 'all', label: 'All', count: 25 },\n        { value: 'active', label: 'Active', count: 20 },\n        { value: 'draft', label: 'Drafts', count: 5 },\n    ]\"\n\u002F>\n",[15,2817,2818,2825,2838,2850,2870,2889,2908,2914],{"__ignoreMap":214},[218,2819,2820,2822],{"class":220,"line":221},[218,2821,232],{"class":231},[218,2823,2824],{"class":235},"UiTabs\n",[218,2826,2827,2829,2831,2833,2836],{"class":220,"line":228},[218,2828,911],{"class":239},[218,2830,243],{"class":231},[218,2832,292],{"class":291},[218,2834,2835],{"class":231},"activeTab",[218,2837,921],{"class":291},[218,2839,2840,2842,2844,2846,2848],{"class":220,"line":258},[218,2841,946],{"class":231},[218,2843,2798],{"class":239},[218,2845,243],{"class":231},[218,2847,292],{"class":291},[218,2849,955],{"class":231},[218,2851,2852,2854,2857,2859,2862,2865,2868],{"class":220,"line":265},[218,2853,960],{"class":231},[218,2855,2856],{"class":246},"'all'",[218,2858,966],{"class":231},[218,2860,2861],{"class":246},"'All'",[218,2863,2864],{"class":231},", count: ",[218,2866,2867],{"class":1193},"25",[218,2869,972],{"class":231},[218,2871,2872,2874,2877,2879,2882,2884,2887],{"class":220,"line":271},[218,2873,960],{"class":231},[218,2875,2876],{"class":246},"'active'",[218,2878,966],{"class":231},[218,2880,2881],{"class":246},"'Active'",[218,2883,2864],{"class":231},[218,2885,2886],{"class":1193},"20",[218,2888,972],{"class":231},[218,2890,2891,2893,2896,2898,2901,2903,2906],{"class":220,"line":302},[218,2892,960],{"class":231},[218,2894,2895],{"class":246},"'draft'",[218,2897,966],{"class":231},[218,2899,2900],{"class":246},"'Drafts'",[218,2902,2864],{"class":231},[218,2904,2905],{"class":1193},"5",[218,2907,972],{"class":231},[218,2909,2910,2912],{"class":220,"line":308},[218,2911,1005],{"class":231},[218,2913,921],{"class":291},[218,2915,2916],{"class":220,"line":318},[218,2917,1012],{"class":231},[31,2919,2921],{"id":2920},"toggle-uitoggle","Toggle (UiToggle)",[11,2923,2924],{},"Umschalter auf Icon-Basis.",[75,2926,78],{"id":2927},"props-12",[80,2929,2930,2942],{},[83,2931,2932],{},[86,2933,2934,2936,2938,2940],{},[89,2935,91],{},[89,2937,94],{},[89,2939,97],{},[89,2941,100],{},[102,2943,2944,2956,2969,2981],{},[86,2945,2946,2950,2952,2954],{},[107,2947,2948],{},[15,2949,455],{},[107,2951,145],{},[107,2953,148],{},[107,2955,464],{},[86,2957,2958,2962,2964,2966],{},[107,2959,2960],{},[15,2961,471],{},[107,2963,114],{},[107,2965,461],{},[107,2967,2968],{},"Zugängliches Label",[86,2970,2971,2975,2977,2979],{},[107,2972,2973],{},[15,2974,127],{},[107,2976,114],{},[107,2978,132],{},[107,2980,560],{},[86,2982,2983,2987,2989,2991],{},[107,2984,2985],{},[15,2986,158],{},[107,2988,145],{},[107,2990,148],{},[107,2992,2993],{},"Toggle deaktivieren",[75,2995,207],{"id":2996},"beispiele-11",[209,2998,3000],{"className":211,"code":2999,"language":213,"meta":214,"style":214},"\u003CUiToggle v-model=\"enabled\" label=\"Enable feature\" \u002F>\n",[15,3001,3002],{"__ignoreMap":214},[218,3003,3004,3006,3008,3010,3012,3014,3017,3019,3021,3023,3026],{"class":220,"line":221},[218,3005,232],{"class":231},[218,3007,1401],{"class":235},[218,3009,598],{"class":239},[218,3011,243],{"class":231},[218,3013,292],{"class":291},[218,3015,3016],{"class":231},"enabled",[218,3018,292],{"class":291},[218,3020,610],{"class":239},[218,3022,243],{"class":231},[218,3024,3025],{"class":246},"\"Enable feature\"",[218,3027,634],{"class":231},[31,3029,3031],{"id":3030},"empty-state-uiemptystate","Empty State (UiEmptyState)",[11,3033,3034],{},"Platzhalter für leere Daten.",[75,3036,78],{"id":3037},"props-13",[80,3039,3040,3052],{},[83,3041,3042],{},[86,3043,3044,3046,3048,3050],{},[89,3045,91],{},[89,3047,94],{},[89,3049,97],{},[89,3051,100],{},[102,3053,3054,3074,3088],{},[86,3055,3056,3060,3062,3064],{},[107,3057,3058],{},[15,3059,2653],{},[107,3061,114],{},[107,3063,461],{},[107,3065,3066,3067,3070,3071],{},"Nuxt-\u002FLucide-Iconname (z. B. ",[15,3068,3069],{},"lucide:inbox","), gerendert über ",[15,3072,3073],{},"UiIconBox",[86,3075,3076,3080,3082,3085],{},[107,3077,3078],{},[15,3079,2136],{},[107,3081,114],{},[107,3083,3084],{},"erforderlich",[107,3086,3087],{},"Hauptüberschrift",[86,3089,3090,3094,3096,3098],{},[107,3091,3092],{},[15,3093,1169],{},[107,3095,114],{},[107,3097,461],{},[107,3099,3100],{},"Sekundärtext",[75,3102,183],{"id":3103},"slots-6",[39,3105,3106],{},[42,3107,3108,3111],{},[15,3109,3110],{},"action"," - CTA-Button",[75,3113,207],{"id":3114},"beispiele-12",[209,3116,3118],{"className":211,"code":3117,"language":213,"meta":214,"style":214},"\u003CUiEmptyState\n    icon=\"lucide:mail\"\n    title=\"No emails yet\"\n    description=\"Create your first email template to get started.\"\n>\n  \u003Ctemplate #action>\n    \u003CUiButton variant=\"primary\">\n      \u003Ctemplate #iconLeft>\n        \u003CIcon name=\"lucide:plus\" class=\"w-4 h-4\" \u002F>\n      \u003C\u002Ftemplate>\n      Create Template\n    \u003C\u002FUiButton>\n  \u003C\u002Ftemplate>\n\u003C\u002FUiEmptyState>\n",[15,3119,3120,3127,3137,3147,3156,3160,3165,3170,3175,3180,3185,3190,3195,3199],{"__ignoreMap":214},[218,3121,3122,3124],{"class":220,"line":221},[218,3123,232],{"class":231},[218,3125,3126],{"class":235},"UiEmptyState\n",[218,3128,3129,3132,3134],{"class":220,"line":228},[218,3130,3131],{"class":239},"    icon",[218,3133,243],{"class":231},[218,3135,3136],{"class":246},"\"lucide:mail\"\n",[218,3138,3139,3142,3144],{"class":220,"line":258},[218,3140,3141],{"class":239},"    title",[218,3143,243],{"class":231},[218,3145,3146],{"class":246},"\"No emails yet\"\n",[218,3148,3149,3151,3153],{"class":220,"line":265},[218,3150,1374],{"class":239},[218,3152,243],{"class":231},[218,3154,3155],{"class":246},"\"Create your first email template to get started.\"\n",[218,3157,3158],{"class":220,"line":271},[218,3159,255],{"class":231},[218,3161,3162],{"class":220,"line":302},[218,3163,3164],{"class":231},"  \u003Ctemplate #action>\n",[218,3166,3167],{"class":220,"line":308},[218,3168,3169],{"class":231},"    \u003CUiButton variant=\"primary\">\n",[218,3171,3172],{"class":220,"line":318},[218,3173,3174],{"class":231},"      \u003Ctemplate #iconLeft>\n",[218,3176,3177],{"class":220,"line":323},[218,3178,3179],{"class":231},"        \u003CIcon name=\"lucide:plus\" class=\"w-4 h-4\" \u002F>\n",[218,3181,3182],{"class":220,"line":329},[218,3183,3184],{"class":231},"      \u003C\u002Ftemplate>\n",[218,3186,3187],{"class":220,"line":345},[218,3188,3189],{"class":231},"      Create Template\n",[218,3191,3192],{"class":220,"line":351},[218,3193,3194],{"class":231},"    \u003C\u002FUiButton>\n",[218,3196,3197],{"class":220,"line":357},[218,3198,360],{"class":231},[218,3200,3201,3203,3206],{"class":220,"line":363},[218,3202,311],{"class":231},[218,3204,3205],{"class":235},"UiEmptyState",[218,3207,255],{"class":231},[31,3209,3211],{"id":3210},"error-boundary-uierrorboundary","Error Boundary (UiErrorBoundary)",[11,3213,3214],{},"Fängt Fehler aus Kindkomponenten ab und zeigt eine Fallback-Oberfläche mit optionaler Wiederholung an.",[75,3216,78],{"id":3217},"props-14",[80,3219,3220,3232],{},[83,3221,3222],{},[86,3223,3224,3226,3228,3230],{},[89,3225,91],{},[89,3227,94],{},[89,3229,97],{},[89,3231,100],{},[102,3233,3234,3249],{},[86,3235,3236,3241,3243,3246],{},[107,3237,3238],{},[15,3239,3240],{},"fallbackMessage",[107,3242,114],{},[107,3244,3245],{},"'Something went wrong. Please try again.'",[107,3247,3248],{},"Eigene Fallback-Meldung",[86,3250,3251,3256,3258,3260],{},[107,3252,3253],{},[15,3254,3255],{},"showRetry",[107,3257,145],{},[107,3259,2168],{},[107,3261,3262],{},"Ob ein Wiederholen-Button angezeigt wird",[75,3264,183],{"id":3265},"slots-7",[39,3267,3268],{},[42,3269,3270,3272],{},[15,3271,190],{}," - Zu rendernder Inhalt (von der Error Boundary abgefangen)",[75,3274,207],{"id":3275},"beispiele-13",[209,3277,3279],{"className":211,"code":3278,"language":213,"meta":214,"style":214},"\u003CUiErrorBoundary fallback-message=\"Failed to load contacts.\">\n  \u003CContactList \u002F>\n\u003C\u002FUiErrorBoundary>\n",[15,3280,3281,3298,3303],{"__ignoreMap":214},[218,3282,3283,3285,3288,3291,3293,3296],{"class":220,"line":221},[218,3284,232],{"class":231},[218,3286,3287],{"class":235},"UiErrorBoundary",[218,3289,3290],{"class":239}," fallback-message",[218,3292,243],{"class":231},[218,3294,3295],{"class":246},"\"Failed to load contacts.\"",[218,3297,255],{"class":231},[218,3299,3300],{"class":220,"line":228},[218,3301,3302],{"class":231},"  \u003CContactList \u002F>\n",[218,3304,3305,3307,3309],{"class":220,"line":258},[218,3306,311],{"class":231},[218,3308,3287],{"class":235},[218,3310,255],{"class":231},[31,3312,3314],{"id":3313},"error-alert-uierroralert","Error Alert (UiErrorAlert)",[11,3316,3317],{},"Hinweisbanner zur Anzeige von Fehler-, Warn-, Info- oder Erfolgsmeldungen.",[75,3319,78],{"id":3320},"props-15",[80,3322,3323,3335],{},[83,3324,3325],{},[86,3326,3327,3329,3331,3333],{},[89,3328,91],{},[89,3330,94],{},[89,3332,97],{},[89,3334,100],{},[102,3336,3337,3351,3364],{},[86,3338,3339,3344,3346,3348],{},[107,3340,3341],{},[15,3342,3343],{},"message",[107,3345,114],{},[107,3347,3084],{},[107,3349,3350],{},"Text der Meldung",[86,3352,3353,3357,3359,3361],{},[107,3354,3355],{},[15,3356,2136],{},[107,3358,114],{},[107,3360,461],{},[107,3362,3363],{},"Eigener Titel (standardmäßig ein variantenabhängiger Titel)",[86,3365,3366,3370,3372,3375],{},[107,3367,3368],{},[15,3369,111],{},[107,3371,114],{},[107,3373,3374],{},"'error'",[107,3376,3377],{},"'error', 'warning', 'info', 'success'",[75,3379,207],{"id":3380},"beispiele-14",[209,3382,3384],{"className":211,"code":3383,"language":213,"meta":214,"style":214},"\u003CUiErrorAlert message=\"Failed to save changes.\" \u002F>\n\n\u003CUiErrorAlert variant=\"warning\" message=\"Your domain DNS is not yet verified.\" \u002F>\n\n\u003CUiErrorAlert variant=\"success\" message=\"Campaign sent successfully!\" \u002F>\n",[15,3385,3386,3403,3407,3428,3432],{"__ignoreMap":214},[218,3387,3388,3390,3393,3396,3398,3401],{"class":220,"line":221},[218,3389,232],{"class":231},[218,3391,3392],{"class":235},"UiErrorAlert",[218,3394,3395],{"class":239}," message",[218,3397,243],{"class":231},[218,3399,3400],{"class":246},"\"Failed to save changes.\"",[218,3402,634],{"class":231},[218,3404,3405],{"class":220,"line":228},[218,3406,262],{"emptyLinePlaceholder":261},[218,3408,3409,3411,3413,3415,3417,3419,3421,3423,3426],{"class":220,"line":258},[218,3410,232],{"class":231},[218,3412,3392],{"class":235},[218,3414,240],{"class":239},[218,3416,243],{"class":231},[218,3418,1755],{"class":246},[218,3420,3395],{"class":239},[218,3422,243],{"class":231},[218,3424,3425],{"class":246},"\"Your domain DNS is not yet verified.\"",[218,3427,634],{"class":231},[218,3429,3430],{"class":220,"line":265},[218,3431,262],{"emptyLinePlaceholder":261},[218,3433,3434,3436,3438,3440,3442,3444,3446,3448,3451],{"class":220,"line":271},[218,3435,232],{"class":231},[218,3437,3392],{"class":235},[218,3439,240],{"class":239},[218,3441,243],{"class":231},[218,3443,2675],{"class":246},[218,3445,3395],{"class":239},[218,3447,243],{"class":231},[218,3449,3450],{"class":246},"\"Campaign sent successfully!\"",[218,3452,634],{"class":231},[31,3454,3456],{"id":3455},"confirmation-dialog-uiconfirmationdialog","Confirmation Dialog (UiConfirmationDialog)",[11,3458,3459],{},"Modal zum Bestätigen bzw. Abbrechen mit anpassbarem Titel, anpassbarer Beschreibung und Variantenstilen.",[75,3461,78],{"id":3462},"props-16",[80,3464,3465,3477],{},[83,3466,3467],{},[86,3468,3469,3471,3473,3475],{},[89,3470,91],{},[89,3472,94],{},[89,3474,97],{},[89,3476,100],{},[102,3478,3479,3492,3506,3520,3533,3546,3559,3572],{},[86,3480,3481,3485,3487,3489],{},[107,3482,3483],{},[15,3484,2122],{},[107,3486,145],{},[107,3488,461],{},[107,3490,3491],{},"Steuert die Sichtbarkeit des Dialogs",[86,3493,3494,3498,3500,3503],{},[107,3495,3496],{},[15,3497,2136],{},[107,3499,114],{},[107,3501,3502],{},"'Are you sure?'",[107,3504,3505],{},"Titel des Dialogs",[86,3507,3508,3512,3514,3517],{},[107,3509,3510],{},[15,3511,1169],{},[107,3513,114],{},[107,3515,3516],{},"'This action cannot be undone.'",[107,3518,3519],{},"Beschreibung des Dialogs",[86,3521,3522,3526,3528,3530],{},[107,3523,3524],{},[15,3525,2495],{},[107,3527,114],{},[107,3529,2500],{},[107,3531,3532],{},"Text des Bestätigen-Buttons",[86,3534,3535,3539,3541,3543],{},[107,3536,3537],{},[15,3538,2480],{},[107,3540,114],{},[107,3542,2485],{},[107,3544,3545],{},"Text des Abbrechen-Buttons",[86,3547,3548,3552,3554,3556],{},[107,3549,3550],{},[15,3551,111],{},[107,3553,114],{},[107,3555,1823],{},[107,3557,3558],{},"'danger', 'warning', 'default'",[86,3560,3561,3565,3567,3569],{},[107,3562,3563],{},[15,3564,2524],{},[107,3566,145],{},[107,3568,148],{},[107,3570,3571],{},"Zeigt einen Ladespinner auf dem Bestätigen-Button",[86,3573,3574,3578,3580,3582],{},[107,3575,3576],{},[15,3577,2178],{},[107,3579,145],{},[107,3581,148],{},[107,3583,3584],{},"Verhindert das Schließen per Klick auf die Hintergrundfläche",[75,3586,183],{"id":3587},"slots-8",[39,3589,3590],{},[42,3591,3592,3594],{},[15,3593,190],{}," - Eigener Inhalt oberhalb der Aktionsbuttons",[75,3596,2218],{"id":3597},"events-2",[39,3599,3600,3605,3609],{},[42,3601,3602,3604],{},[15,3603,2225],{}," - Sichtbarkeit des Dialogs geändert",[42,3606,3607,2572],{},[15,3608,2571],{},[42,3610,3611,2566],{},[15,3612,2565],{},[75,3614,207],{"id":3615},"beispiele-15",[209,3617,3619],{"className":211,"code":3618,"language":213,"meta":214,"style":214},"\u003CUiConfirmationDialog\n    v-model:open=\"showDeleteDialog\"\n    title=\"Delete Contact\"\n    description=\"This will permanently remove the contact and all associated data.\"\n    variant=\"danger\"\n    confirm-text=\"Delete\"\n    :is-loading=\"isDeleting\"\n    @confirm=\"handleDelete\"\n\u002F>\n",[15,3620,3621,3628,3645,3654,3663,3673,3683,3699,3715],{"__ignoreMap":214},[218,3622,3623,3625],{"class":220,"line":221},[218,3624,232],{"class":231},[218,3626,3627],{"class":235},"UiConfirmationDialog\n",[218,3629,3630,3632,3634,3636,3638,3640,3643],{"class":220,"line":228},[218,3631,911],{"class":239},[218,3633,2293],{"class":231},[218,3635,2122],{"class":239},[218,3637,243],{"class":231},[218,3639,292],{"class":291},[218,3641,3642],{"class":231},"showDeleteDialog",[218,3644,921],{"class":291},[218,3646,3647,3649,3651],{"class":220,"line":258},[218,3648,3141],{"class":239},[218,3650,243],{"class":231},[218,3652,3653],{"class":246},"\"Delete Contact\"\n",[218,3655,3656,3658,3660],{"class":220,"line":265},[218,3657,1374],{"class":239},[218,3659,243],{"class":231},[218,3661,3662],{"class":246},"\"This will permanently remove the contact and all associated data.\"\n",[218,3664,3665,3668,3670],{"class":220,"line":271},[218,3666,3667],{"class":239},"    variant",[218,3669,243],{"class":231},[218,3671,3672],{"class":246},"\"danger\"\n",[218,3674,3675,3678,3680],{"class":220,"line":302},[218,3676,3677],{"class":239},"    confirm-text",[218,3679,243],{"class":231},[218,3681,3682],{"class":246},"\"Delete\"\n",[218,3684,3685,3687,3690,3692,3694,3697],{"class":220,"line":308},[218,3686,946],{"class":231},[218,3688,3689],{"class":239},"is-loading",[218,3691,243],{"class":231},[218,3693,292],{"class":291},[218,3695,3696],{"class":231},"isDeleting",[218,3698,921],{"class":291},[218,3700,3701,3704,3706,3708,3710,3713],{"class":220,"line":318},[218,3702,3703],{"class":231},"    @",[218,3705,2571],{"class":239},[218,3707,243],{"class":231},[218,3709,292],{"class":291},[218,3711,3712],{"class":231},"handleDelete",[218,3714,921],{"class":291},[218,3716,3717],{"class":220,"line":323},[218,3718,1012],{"class":231},[31,3720,3722],{"id":3721},"dropdown-menu-uidropdownmenu","Dropdown Menu (UiDropdownMenu)",[11,3724,3725],{},"Kontextmenü, das ein Abschneiden durch Overflow vermeidet.",[75,3727,78],{"id":3728},"props-17",[80,3730,3731,3743],{},[83,3732,3733],{},[86,3734,3735,3737,3739,3741],{},[89,3736,91],{},[89,3738,94],{},[89,3740,97],{},[89,3742,100],{},[102,3744,3745,3757],{},[86,3746,3747,3751,3753,3755],{},[107,3748,3749],{},[15,3750,2122],{},[107,3752,145],{},[107,3754,148],{},[107,3756,2129],{},[86,3758,3759,3764,3766,3769],{},[107,3760,3761],{},[15,3762,3763],{},"position",[107,3765,114],{},[107,3767,3768],{},"'right'",[107,3770,3771],{},"'left', 'right'",[75,3773,183],{"id":3774},"slots-9",[39,3776,3777,3783],{},[42,3778,3779,3782],{},[15,3780,3781],{},"trigger"," - Button, der das Menü öffnet",[42,3784,3785,3787],{},[15,3786,190],{}," - Menüeinträge",[75,3789,3791],{"id":3790},"verwandte-komponenten","Verwandte Komponenten",[39,3793,3794,3800],{},[42,3795,3796,3799],{},[15,3797,3798],{},"UiDropdownMenuItem"," - Menüeintrag mit den Props icon, disabled und danger",[42,3801,3802,3805],{},[15,3803,3804],{},"UiDropdownDivider"," - Trennlinie",[75,3807,207],{"id":3808},"beispiele-16",[209,3810,3812],{"className":211,"code":3811,"language":213,"meta":214,"style":214},"\u003CUiDropdownMenu v-model:open=\"menuOpen\">\n  \u003Ctemplate #trigger>\n    \u003Cbutton class=\"btn btn-ghost p-2\">\n      \u003CIcon name=\"lucide:more-vertical\" class=\"w-4 h-4\" \u002F>\n    \u003C\u002Fbutton>\n  \u003C\u002Ftemplate>\n\n  \u003CUiDropdownMenuItem icon=\"lucide:pencil\" @click=\"handleEdit\">\n    Edit\n  \u003C\u002FUiDropdownMenuItem>\n  \u003CUiDropdownMenuItem icon=\"lucide:copy\" @click=\"handleDuplicate\">\n    Duplicate\n  \u003C\u002FUiDropdownMenuItem>\n  \u003CUiDropdownDivider \u002F>\n  \u003CUiDropdownMenuItem icon=\"lucide:trash-2\" danger @click=\"handleDelete\">\n    Delete\n  \u003C\u002FUiDropdownMenuItem>\n\u003C\u002FUiDropdownMenu>\n",[15,3813,3814,3838,3843,3848,3853,3858,3862,3866,3871,3876,3881,3886,3891,3895,3900,3905,3910,3914],{"__ignoreMap":214},[218,3815,3816,3818,3821,3823,3825,3827,3829,3831,3834,3836],{"class":220,"line":221},[218,3817,232],{"class":231},[218,3819,3820],{"class":235},"UiDropdownMenu",[218,3822,598],{"class":239},[218,3824,2293],{"class":231},[218,3826,2122],{"class":239},[218,3828,243],{"class":231},[218,3830,292],{"class":291},[218,3832,3833],{"class":231},"menuOpen",[218,3835,292],{"class":291},[218,3837,255],{"class":231},[218,3839,3840],{"class":220,"line":228},[218,3841,3842],{"class":231},"  \u003Ctemplate #trigger>\n",[218,3844,3845],{"class":220,"line":258},[218,3846,3847],{"class":231},"    \u003Cbutton class=\"btn btn-ghost p-2\">\n",[218,3849,3850],{"class":220,"line":265},[218,3851,3852],{"class":231},"      \u003CIcon name=\"lucide:more-vertical\" class=\"w-4 h-4\" \u002F>\n",[218,3854,3855],{"class":220,"line":271},[218,3856,3857],{"class":231},"    \u003C\u002Fbutton>\n",[218,3859,3860],{"class":220,"line":302},[218,3861,360],{"class":231},[218,3863,3864],{"class":220,"line":308},[218,3865,262],{"emptyLinePlaceholder":261},[218,3867,3868],{"class":220,"line":318},[218,3869,3870],{"class":231},"  \u003CUiDropdownMenuItem icon=\"lucide:pencil\" @click=\"handleEdit\">\n",[218,3872,3873],{"class":220,"line":323},[218,3874,3875],{"class":231},"    Edit\n",[218,3877,3878],{"class":220,"line":329},[218,3879,3880],{"class":231},"  \u003C\u002FUiDropdownMenuItem>\n",[218,3882,3883],{"class":220,"line":345},[218,3884,3885],{"class":231},"  \u003CUiDropdownMenuItem icon=\"lucide:copy\" @click=\"handleDuplicate\">\n",[218,3887,3888],{"class":220,"line":351},[218,3889,3890],{"class":231},"    Duplicate\n",[218,3892,3893],{"class":220,"line":357},[218,3894,3880],{"class":231},[218,3896,3897],{"class":220,"line":363},[218,3898,3899],{"class":231},"  \u003CUiDropdownDivider \u002F>\n",[218,3901,3902],{"class":220,"line":369},[218,3903,3904],{"class":231},"  \u003CUiDropdownMenuItem icon=\"lucide:trash-2\" danger @click=\"handleDelete\">\n",[218,3906,3907],{"class":220,"line":378},[218,3908,3909],{"class":231},"    Delete\n",[218,3911,3912],{"class":220,"line":383},[218,3913,3880],{"class":231},[218,3915,3916,3918,3920],{"class":220,"line":389},[218,3917,311],{"class":231},[218,3919,3820],{"class":235},[218,3921,255],{"class":231},[31,3923,3925],{"id":3924},"dropdown-menu-item-uidropdownmenuitem","Dropdown Menu Item (UiDropdownMenuItem)",[11,3927,3928,3929,18],{},"Menüeintrag zur Verwendung innerhalb von ",[15,3930,3820],{},[75,3932,78],{"id":3933},"props-18",[80,3935,3936,3948],{},[83,3937,3938],{},[86,3939,3940,3942,3944,3946],{},[89,3941,91],{},[89,3943,94],{},[89,3945,97],{},[89,3947,100],{},[102,3949,3950,3968,3981],{},[86,3951,3952,3956,3958,3960],{},[107,3953,3954],{},[15,3955,2653],{},[107,3957,114],{},[107,3959,461],{},[107,3961,3066,3962,3070,3965],{},[15,3963,3964],{},"lucide:pencil",[15,3966,3967],{},"\u003CIcon :name>",[86,3969,3970,3974,3976,3978],{},[107,3971,3972],{},[15,3973,158],{},[107,3975,145],{},[107,3977,148],{},[107,3979,3980],{},"Deaktiviert den Menüeintrag",[86,3982,3983,3988,3990,3992],{},[107,3984,3985],{},[15,3986,3987],{},"danger",[107,3989,145],{},[107,3991,148],{},[107,3993,3994],{},"Wendet die Danger-Formatierung an",[75,3996,183],{"id":3997},"slots-10",[39,3999,4000],{},[42,4001,4002,4004],{},[15,4003,190],{}," - Beschriftung des Menüeintrags",[75,4006,2218],{"id":4007},"events-3",[39,4009,4010],{},[42,4011,4012,4014],{},[15,4013,2256],{}," - Eintrag geklickt",[31,4016,4018],{"id":4017},"dropdown-divider-uidropdowndivider","Dropdown Divider (UiDropdownDivider)",[11,4020,4021,4022,4024],{},"Trennlinie zur Verwendung innerhalb von ",[15,4023,3820],{},". Keine Props.",[31,4026,4028],{"id":4027},"selectable-list-item-uiselectablelistitem","Selectable List Item (UiSelectableListItem)",[11,4030,4031],{},"Listeneintrag mit Radio- oder Checkbox-Auswahl.",[75,4033,78],{"id":4034},"props-19",[80,4036,4037,4049],{},[83,4038,4039],{},[86,4040,4041,4043,4045,4047],{},[89,4042,91],{},[89,4044,94],{},[89,4046,97],{},[89,4048,100],{},[102,4050,4051,4064,4077,4091,4107,4120,4134],{},[86,4052,4053,4057,4059,4061],{},[107,4054,4055],{},[15,4056,471],{},[107,4058,114],{},[107,4060,3084],{},[107,4062,4063],{},"Beschriftungstext des Eintrags",[86,4065,4066,4070,4072,4074],{},[107,4067,4068],{},[15,4069,1169],{},[107,4071,114],{},[107,4073,461],{},[107,4075,4076],{},"Optionale Beschreibung",[86,4078,4079,4083,4085,4088],{},[107,4080,4081],{},[15,4082,440],{},[107,4084,114],{},[107,4086,4087],{},"'radio'",[107,4089,4090],{},"'radio' oder 'checkbox'",[86,4092,4093,4097,4102,4104],{},[107,4094,4095],{},[15,4096,455],{},[107,4098,4099,4100],{},"string \u002F boolean \u002F string",[218,4101],{},[107,4103,461],{},[107,4105,4106],{},"Aktuell ausgewählter Wert",[86,4108,4109,4113,4115,4117],{},[107,4110,4111],{},[15,4112,1580],{},[107,4114,114],{},[107,4116,461],{},[107,4118,4119],{},"Wert des Eintrags",[86,4121,4122,4127,4129,4131],{},[107,4123,4124],{},[15,4125,4126],{},"name",[107,4128,114],{},[107,4130,461],{},[107,4132,4133],{},"name-Attribut des Inputs",[86,4135,4136,4140,4142,4144],{},[107,4137,4138],{},[15,4139,158],{},[107,4141,145],{},[107,4143,148],{},[107,4145,4146],{},"Deaktiviert den Eintrag",[75,4148,207],{"id":4149},"beispiele-17",[209,4151,4153],{"className":211,"code":4152,"language":213,"meta":214,"style":214},"\u003CUiSelectableListItem\n    v-model=\"selectedPlan\"\n    value=\"pro\"\n    label=\"Pro Plan\"\n    description=\"Up to 10,000 contacts\"\n    name=\"plan\"\n\u002F>\n",[15,4154,4155,4162,4175,4185,4194,4203,4213],{"__ignoreMap":214},[218,4156,4157,4159],{"class":220,"line":221},[218,4158,232],{"class":231},[218,4160,4161],{"class":235},"UiSelectableListItem\n",[218,4163,4164,4166,4168,4170,4173],{"class":220,"line":228},[218,4165,911],{"class":239},[218,4167,243],{"class":231},[218,4169,292],{"class":291},[218,4171,4172],{"class":231},"selectedPlan",[218,4174,921],{"class":291},[218,4176,4177,4180,4182],{"class":220,"line":258},[218,4178,4179],{"class":239},"    value",[218,4181,243],{"class":231},[218,4183,4184],{"class":246},"\"pro\"\n",[218,4186,4187,4189,4191],{"class":220,"line":265},[218,4188,926],{"class":239},[218,4190,243],{"class":231},[218,4192,4193],{"class":246},"\"Pro Plan\"\n",[218,4195,4196,4198,4200],{"class":220,"line":271},[218,4197,1374],{"class":239},[218,4199,243],{"class":231},[218,4201,4202],{"class":246},"\"Up to 10,000 contacts\"\n",[218,4204,4205,4208,4210],{"class":220,"line":302},[218,4206,4207],{"class":239},"    name",[218,4209,243],{"class":231},[218,4211,4212],{"class":246},"\"plan\"\n",[218,4214,4215],{"class":220,"line":308},[218,4216,1012],{"class":231},[31,4218,4220],{"id":4219},"segmented-control-uisegmentedcontrol","Segmented Control (UiSegmentedControl)",[11,4222,4223],{},"Tab-ähnlicher segmentierter Auswahlschalter mit animiertem Indikator.",[75,4225,78],{"id":4226},"props-20",[80,4228,4229,4241],{},[83,4230,4231],{},[86,4232,4233,4235,4237,4239],{},[89,4234,91],{},[89,4236,94],{},[89,4238,97],{},[89,4240,100],{},[102,4242,4243,4258,4270],{},[86,4244,4245,4249,4251,4253],{},[107,4246,4247],{},[15,4248,787],{},[107,4250,790],{},[107,4252,3084],{},[107,4254,4255],{},[15,4256,4257],{},"[{ value, label, disabled? }]",[86,4259,4260,4264,4266,4268],{},[107,4261,4262],{},[15,4263,455],{},[107,4265,114],{},[107,4267,461],{},[107,4269,4106],{},[86,4271,4272,4276,4278,4280],{},[107,4273,4274],{},[15,4275,127],{},[107,4277,114],{},[107,4279,132],{},[107,4281,560],{},[75,4283,183],{"id":4284},"slots-11",[39,4286,4287],{},[42,4288,4289,4292,4293,4296,4297,4300],{},[15,4290,4291],{},"option-{value}"," - Eigenes Rendering für eine bestimmte Option (erhält die Props ",[15,4294,4295],{},"option"," und ",[15,4298,4299],{},"active",")",[75,4302,207],{"id":4303},"beispiele-18",[209,4305,4307],{"className":211,"code":4306,"language":213,"meta":214,"style":214},"\u003CUiSegmentedControl\n    v-model=\"view\"\n    :options=\"[\n        { value: 'grid', label: 'Grid' },\n        { value: 'list', label: 'List' },\n    ]\"\n\u002F>\n",[15,4308,4309,4316,4329,4341,4355,4369,4375],{"__ignoreMap":214},[218,4310,4311,4313],{"class":220,"line":221},[218,4312,232],{"class":231},[218,4314,4315],{"class":235},"UiSegmentedControl\n",[218,4317,4318,4320,4322,4324,4327],{"class":220,"line":228},[218,4319,911],{"class":239},[218,4321,243],{"class":231},[218,4323,292],{"class":291},[218,4325,4326],{"class":231},"view",[218,4328,921],{"class":291},[218,4330,4331,4333,4335,4337,4339],{"class":220,"line":258},[218,4332,946],{"class":231},[218,4334,787],{"class":239},[218,4336,243],{"class":231},[218,4338,292],{"class":291},[218,4340,955],{"class":231},[218,4342,4343,4345,4348,4350,4353],{"class":220,"line":265},[218,4344,960],{"class":231},[218,4346,4347],{"class":246},"'grid'",[218,4349,966],{"class":231},[218,4351,4352],{"class":246},"'Grid'",[218,4354,972],{"class":231},[218,4356,4357,4359,4362,4364,4367],{"class":220,"line":271},[218,4358,960],{"class":231},[218,4360,4361],{"class":246},"'list'",[218,4363,966],{"class":231},[218,4365,4366],{"class":246},"'List'",[218,4368,972],{"class":231},[218,4370,4371,4373],{"class":220,"line":302},[218,4372,1005],{"class":231},[218,4374,921],{"class":291},[218,4376,4377],{"class":220,"line":308},[218,4378,1012],{"class":231},[31,4380,4382],{"id":4381},"stat-card-uistatcard","Stat Card (UiStatCard)",[11,4384,4385],{},"Karte zur Anzeige einer Kennzahl mit Wert, Beschriftung und Variante.",[75,4387,78],{"id":4388},"props-21",[80,4390,4391,4403],{},[83,4392,4393],{},[86,4394,4395,4397,4399,4401],{},[89,4396,91],{},[89,4398,94],{},[89,4400,97],{},[89,4402,100],{},[102,4404,4405,4419,4432],{},[86,4406,4407,4411,4414,4416],{},[107,4408,4409],{},[15,4410,1580],{},[107,4412,4413],{},"string \u002F number",[107,4415,3084],{},[107,4417,4418],{},"Wert der Kennzahl",[86,4420,4421,4425,4427,4429],{},[107,4422,4423],{},[15,4424,471],{},[107,4426,114],{},[107,4428,3084],{},[107,4430,4431],{},"Beschriftung der Kennzahl",[86,4433,4434,4438,4440,4442],{},[107,4435,4436],{},[15,4437,111],{},[107,4439,114],{},[107,4441,1823],{},[107,4443,4444],{},"'default', 'success', 'warning', 'error', 'secondary'",[75,4446,207],{"id":4447},"beispiele-19",[209,4449,4451],{"className":211,"code":4450,"language":213,"meta":214,"style":214},"\u003CUiStatCard value=\"1,234\" label=\"Total Contacts\" \u002F>\n\u003CUiStatCard value=\"98.5%\" label=\"Delivery Rate\" variant=\"success\" \u002F>\n\u003CUiStatCard value=\"12\" label=\"Bounces\" variant=\"error\" \u002F>\n",[15,4452,4453,4477,4505],{"__ignoreMap":214},[218,4454,4455,4457,4460,4463,4465,4468,4470,4472,4475],{"class":220,"line":221},[218,4456,232],{"class":231},[218,4458,4459],{"class":235},"UiStatCard",[218,4461,4462],{"class":239}," value",[218,4464,243],{"class":231},[218,4466,4467],{"class":246},"\"1,234\"",[218,4469,610],{"class":239},[218,4471,243],{"class":231},[218,4473,4474],{"class":246},"\"Total Contacts\"",[218,4476,634],{"class":231},[218,4478,4479,4481,4483,4485,4487,4490,4492,4494,4497,4499,4501,4503],{"class":220,"line":228},[218,4480,232],{"class":231},[218,4482,4459],{"class":235},[218,4484,4462],{"class":239},[218,4486,243],{"class":231},[218,4488,4489],{"class":246},"\"98.5%\"",[218,4491,610],{"class":239},[218,4493,243],{"class":231},[218,4495,4496],{"class":246},"\"Delivery Rate\"",[218,4498,240],{"class":239},[218,4500,243],{"class":231},[218,4502,2675],{"class":246},[218,4504,634],{"class":231},[218,4506,4507,4509,4511,4513,4515,4518,4520,4522,4525,4527,4529,4531],{"class":220,"line":258},[218,4508,232],{"class":231},[218,4510,4459],{"class":235},[218,4512,4462],{"class":239},[218,4514,243],{"class":231},[218,4516,4517],{"class":246},"\"12\"",[218,4519,610],{"class":239},[218,4521,243],{"class":231},[218,4523,4524],{"class":246},"\"Bounces\"",[218,4526,240],{"class":239},[218,4528,243],{"class":231},[218,4530,2714],{"class":246},[218,4532,634],{"class":231},[31,4534,4536],{"id":4535},"step-indicator-uistepindicator","Step Indicator (UiStepIndicator)",[11,4538,4539],{},"Fortschrittsanzeige, die Schritte mit Abschlussstatus und Verbindungslinien darstellt.",[75,4541,78],{"id":4542},"props-22",[80,4544,4545,4557],{},[83,4546,4547],{},[86,4548,4549,4551,4553,4555],{},[89,4550,91],{},[89,4552,94],{},[89,4554,97],{},[89,4556,100],{},[102,4558,4559,4575,4592],{},[86,4560,4561,4566,4568,4570],{},[107,4562,4563],{},[15,4564,4565],{},"steps",[107,4567,790],{},[107,4569,3084],{},[107,4571,4572],{},[15,4573,4574],{},"[{ id, label, number }]",[86,4576,4577,4582,4585,4587],{},[107,4578,4579],{},[15,4580,4581],{},"getStepStatus",[107,4583,4584],{},"function",[107,4586,3084],{},[107,4588,4589],{},[15,4590,4591],{},"(stepId: string) => 'completed' | 'current' | 'upcoming'",[86,4593,4594,4599,4601,4603],{},[107,4595,4596],{},[15,4597,4598],{},"isConnectorHighlighted",[107,4600,4584],{},[107,4602,3084],{},[107,4604,4605,4608],{},[15,4606,4607],{},"(index: number) => boolean"," — bestimmt die Hervorhebung der Verbindungslinie",[75,4610,207],{"id":4611},"beispiele-20",[209,4613,4615],{"className":211,"code":4614,"language":213,"meta":214,"style":214},"\u003CUiStepIndicator\n    :steps=\"[\n        { id: 'domain', label: 'Add Domain', number: 1 },\n        { id: 'dns', label: 'Configure DNS', number: 2 },\n        { id: 'verify', label: 'Verify', number: 3 },\n    ]\"\n    :get-step-status=\"getStatus\"\n    :is-connector-highlighted=\"(i) => i \u003C currentStep\"\n\u002F>\n",[15,4616,4617,4624,4636,4657,4676,4695,4701,4717,4751],{"__ignoreMap":214},[218,4618,4619,4621],{"class":220,"line":221},[218,4620,232],{"class":231},[218,4622,4623],{"class":235},"UiStepIndicator\n",[218,4625,4626,4628,4630,4632,4634],{"class":220,"line":228},[218,4627,946],{"class":231},[218,4629,4565],{"class":239},[218,4631,243],{"class":231},[218,4633,292],{"class":291},[218,4635,955],{"class":231},[218,4637,4638,4641,4644,4646,4649,4652,4655],{"class":220,"line":258},[218,4639,4640],{"class":231},"        { id: ",[218,4642,4643],{"class":246},"'domain'",[218,4645,966],{"class":231},[218,4647,4648],{"class":246},"'Add Domain'",[218,4650,4651],{"class":231},", number: ",[218,4653,4654],{"class":1193},"1",[218,4656,972],{"class":231},[218,4658,4659,4661,4664,4666,4669,4671,4674],{"class":220,"line":265},[218,4660,4640],{"class":231},[218,4662,4663],{"class":246},"'dns'",[218,4665,966],{"class":231},[218,4667,4668],{"class":246},"'Configure DNS'",[218,4670,4651],{"class":231},[218,4672,4673],{"class":1193},"2",[218,4675,972],{"class":231},[218,4677,4678,4680,4683,4685,4688,4690,4693],{"class":220,"line":271},[218,4679,4640],{"class":231},[218,4681,4682],{"class":246},"'verify'",[218,4684,966],{"class":231},[218,4686,4687],{"class":246},"'Verify'",[218,4689,4651],{"class":231},[218,4691,4692],{"class":1193},"3",[218,4694,972],{"class":231},[218,4696,4697,4699],{"class":220,"line":302},[218,4698,1005],{"class":231},[218,4700,921],{"class":291},[218,4702,4703,4705,4708,4710,4712,4715],{"class":220,"line":308},[218,4704,946],{"class":231},[218,4706,4707],{"class":239},"get-step-status",[218,4709,243],{"class":231},[218,4711,292],{"class":291},[218,4713,4714],{"class":231},"getStatus",[218,4716,921],{"class":291},[218,4718,4719,4721,4724,4726,4728,4731,4735,4738,4741,4744,4746,4749],{"class":220,"line":318},[218,4720,946],{"class":231},[218,4722,4723],{"class":239},"is-connector-highlighted",[218,4725,243],{"class":231},[218,4727,292],{"class":291},[218,4729,4730],{"class":231},"(",[218,4732,4734],{"class":4733},"stnAF","i",[218,4736,4737],{"class":231},") ",[218,4739,4740],{"class":1525},"=>",[218,4742,4743],{"class":231}," i ",[218,4745,232],{"class":1525},[218,4747,4748],{"class":231}," currentStep",[218,4750,921],{"class":291},[218,4752,4753],{"class":220,"line":323},[218,4754,1012],{"class":231},[31,4756,4758],{"id":4757},"toast-usetoast","Toast (useToast)",[11,4760,4761],{},"Globale Toast-Benachrichtigungen über ein Composable.",[75,4763,4765],{"id":4764},"verwendung","Verwendung",[209,4767,4771],{"className":4768,"code":4769,"language":4770,"meta":214,"style":214},"language-typescript shiki shiki-themes github-light github-dark-dimmed","const { showToast } = useToast();\n\n\u002F\u002F Success (default)\nshowToast('Saved successfully');\n\n\u002F\u002F Error\nshowToast('Failed to save', 'error');\n","typescript",[15,4772,4773,4796,4800,4805,4817,4821,4826],{"__ignoreMap":214},[218,4774,4775,4778,4781,4784,4787,4789,4793],{"class":220,"line":221},[218,4776,4777],{"class":1525},"const",[218,4779,4780],{"class":231}," { ",[218,4782,4783],{"class":1193},"showToast",[218,4785,4786],{"class":231}," } ",[218,4788,243],{"class":1525},[218,4790,4792],{"class":4791},"sPO5f"," useToast",[218,4794,4795],{"class":231},"();\n",[218,4797,4798],{"class":220,"line":228},[218,4799,262],{"emptyLinePlaceholder":261},[218,4801,4802],{"class":220,"line":258},[218,4803,4804],{"class":224},"\u002F\u002F Success (default)\n",[218,4806,4807,4809,4811,4814],{"class":220,"line":265},[218,4808,4783],{"class":4791},[218,4810,4730],{"class":231},[218,4812,4813],{"class":246},"'Saved successfully'",[218,4815,4816],{"class":231},");\n",[218,4818,4819],{"class":220,"line":271},[218,4820,262],{"emptyLinePlaceholder":261},[218,4822,4823],{"class":220,"line":302},[218,4824,4825],{"class":224},"\u002F\u002F Error\n",[218,4827,4828,4830,4832,4835,4838,4840],{"class":220,"line":308},[218,4829,4783],{"class":4791},[218,4831,4730],{"class":231},[218,4833,4834],{"class":246},"'Failed to save'",[218,4836,4837],{"class":231},", ",[218,4839,3374],{"class":246},[218,4841,4816],{"class":231},[11,4843,4844],{},"Toasts blenden sich nach 3 Sekunden automatisch aus. Mehrere Toasts stapeln sich vertikal.",[31,4846,4848],{"id":4847},"icon-box-uiiconbox","Icon Box (UiIconBox)",[11,4850,4851,4852,18],{},"Ein abgerundeter Container, der ein einzelnes Icon aufnimmt — verwendet für Empty States, Listenzeilen und Abschnittsüberschriften. Rendert das Icon über Nuxts ",[15,4853,4854],{},"\u003CIcon>",[75,4856,78],{"id":4857},"props-23",[80,4859,4860,4872],{},[83,4861,4862],{},[86,4863,4864,4866,4868,4870],{},[89,4865,91],{},[89,4867,94],{},[89,4869,97],{},[89,4871,100],{},[102,4873,4874,4889,4902,4915],{},[86,4875,4876,4880,4882,4884],{},[107,4877,4878],{},[15,4879,2653],{},[107,4881,114],{},[107,4883,3084],{},[107,4885,3066,4886,4300],{},[15,4887,4888],{},"lucide:users",[86,4890,4891,4895,4897,4899],{},[107,4892,4893],{},[15,4894,127],{},[107,4896,114],{},[107,4898,132],{},[107,4900,4901],{},"'xs', 'sm', 'md', 'lg', 'xl'",[86,4903,4904,4908,4910,4912],{},[107,4905,4906],{},[15,4907,111],{},[107,4909,114],{},[107,4911,1603],{},[107,4913,4914],{},"'brand', 'success', 'warning', 'error', 'surface', 'inverse'",[86,4916,4917,4922,4924,4927],{},[107,4918,4919],{},[15,4920,4921],{},"rounded",[107,4923,114],{},[107,4925,4926],{},"'xl'",[107,4928,4929],{},"'lg', 'xl', '2xl', 'full'",[75,4931,207],{"id":4932},"beispiele-21",[209,4934,4936],{"className":211,"code":4935,"language":213,"meta":214,"style":214},"\u003CUiIconBox icon=\"lucide:users\" \u002F>\n\n\u003CUiIconBox icon=\"lucide:check\" variant=\"success\" size=\"sm\" rounded=\"full\" \u002F>\n\n\u003CUiIconBox icon=\"lucide:inbox\" size=\"xl\" variant=\"surface\" rounded=\"2xl\" \u002F>\n",[15,4937,4938,4954,4958,4993,4997],{"__ignoreMap":214},[218,4939,4940,4942,4944,4947,4949,4952],{"class":220,"line":221},[218,4941,232],{"class":231},[218,4943,3073],{"class":235},[218,4945,4946],{"class":239}," icon",[218,4948,243],{"class":231},[218,4950,4951],{"class":246},"\"lucide:users\"",[218,4953,634],{"class":231},[218,4955,4956],{"class":220,"line":228},[218,4957,262],{"emptyLinePlaceholder":261},[218,4959,4960,4962,4964,4966,4968,4971,4973,4975,4977,4979,4981,4983,4986,4988,4991],{"class":220,"line":258},[218,4961,232],{"class":231},[218,4963,3073],{"class":235},[218,4965,4946],{"class":239},[218,4967,243],{"class":231},[218,4969,4970],{"class":246},"\"lucide:check\"",[218,4972,240],{"class":239},[218,4974,243],{"class":231},[218,4976,2675],{"class":246},[218,4978,1758],{"class":239},[218,4980,243],{"class":231},[218,4982,1763],{"class":246},[218,4984,4985],{"class":239}," rounded",[218,4987,243],{"class":231},[218,4989,4990],{"class":246},"\"full\"",[218,4992,634],{"class":231},[218,4994,4995],{"class":220,"line":265},[218,4996,262],{"emptyLinePlaceholder":261},[218,4998,4999,5001,5003,5005,5007,5010,5012,5014,5017,5019,5021,5024,5026,5028,5031],{"class":220,"line":271},[218,5000,232],{"class":231},[218,5002,3073],{"class":235},[218,5004,4946],{"class":239},[218,5006,243],{"class":231},[218,5008,5009],{"class":246},"\"lucide:inbox\"",[218,5011,1758],{"class":239},[218,5013,243],{"class":231},[218,5015,5016],{"class":246},"\"xl\"",[218,5018,240],{"class":239},[218,5020,243],{"class":231},[218,5022,5023],{"class":246},"\"surface\"",[218,5025,4985],{"class":239},[218,5027,243],{"class":231},[218,5029,5030],{"class":246},"\"2xl\"",[218,5032,634],{"class":231},[75,5034,5036],{"id":5035},"einrichtung","Einrichtung",[11,5038,5039,5042,5043,5046,5047,5050],{},[15,5040,5041],{},"UiToast"," wird einmalig in ",[15,5044,5045],{},"apps\u002Fweb\u002Fapp\u002Fapp.vue"," eingebunden, um global verfügbar zu sein. Es ist in ",[15,5048,5049],{},"\u003CClientOnly>"," verpackt, um eine SSR-Hydration-Diskrepanz zu vermeiden:",[209,5052,5054],{"className":211,"code":5053,"language":213,"meta":214,"style":214},"\u003Ctemplate>\n    \u003Cdiv>\n        \u003CNuxtLayout>\n            \u003CNuxtPage \u002F>\n        \u003C\u002FNuxtLayout>\n\n        \u003C!-- Global toast notifications (client-only to avoid SSR hydration mismatch) -->\n        \u003CClientOnly>\n            \u003CUiToast \u002F>\n        \u003C\u002FClientOnly>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[15,5055,5056,5064,5073,5082,5091,5099,5103,5108,5117,5125,5133,5141],{"__ignoreMap":214},[218,5057,5058,5060,5062],{"class":220,"line":221},[218,5059,232],{"class":231},[218,5061,2241],{"class":235},[218,5063,255],{"class":231},[218,5065,5066,5068,5071],{"class":220,"line":228},[218,5067,2248],{"class":231},[218,5069,5070],{"class":235},"div",[218,5072,255],{"class":231},[218,5074,5075,5077,5080],{"class":220,"line":258},[218,5076,2325],{"class":231},[218,5078,5079],{"class":235},"NuxtLayout",[218,5081,255],{"class":231},[218,5083,5084,5086,5089],{"class":220,"line":265},[218,5085,2356],{"class":231},[218,5087,5088],{"class":235},"NuxtPage",[218,5090,634],{"class":231},[218,5092,5093,5095,5097],{"class":220,"line":271},[218,5094,2426],{"class":231},[218,5096,5079],{"class":235},[218,5098,255],{"class":231},[218,5100,5101],{"class":220,"line":302},[218,5102,262],{"emptyLinePlaceholder":261},[218,5104,5105],{"class":220,"line":308},[218,5106,5107],{"class":224},"        \u003C!-- Global toast notifications (client-only to avoid SSR hydration mismatch) -->\n",[218,5109,5110,5112,5115],{"class":220,"line":318},[218,5111,2325],{"class":231},[218,5113,5114],{"class":235},"ClientOnly",[218,5116,255],{"class":231},[218,5118,5119,5121,5123],{"class":220,"line":323},[218,5120,2356],{"class":231},[218,5122,5041],{"class":235},[218,5124,634],{"class":231},[218,5126,5127,5129,5131],{"class":220,"line":329},[218,5128,2426],{"class":231},[218,5130,5114],{"class":235},[218,5132,255],{"class":231},[218,5134,5135,5137,5139],{"class":220,"line":345},[218,5136,2435],{"class":231},[218,5138,5070],{"class":235},[218,5140,255],{"class":231},[218,5142,5143,5145,5147],{"class":220,"line":351},[218,5144,311],{"class":231},[218,5146,2241],{"class":235},[218,5148,255],{"class":231},[31,5150,5152],{"id":5151},"theme-toggle-uithemetoggle","Theme Toggle (UiThemeToggle)",[11,5154,5155,5156,5159,5160,5163],{},"Ein einzelner Button, der das Farbschema durch ",[45,5157,5158],{},"System -> Hell -> Dunkel"," schaltet. Intern verwendet er ",[15,5161,5162],{},"@nuxtjs\u002Fcolor-mode"," und speichert die Einstellung automatisch. Das Icon (Monitor \u002F Sonne \u002F Mond) spiegelt den aktuellen Modus wider. Es gibt keine Props; ein optionaler Default-Slot erlaubt es, eine Textbeschriftung neben dem Icon anzufügen.",[75,5165,207],{"id":5166},"beispiele-22",[209,5168,5170],{"className":211,"code":5169,"language":213,"meta":214,"style":214},"\u003C!-- Icon-only toggle -->\n\u003CUiThemeToggle class=\"p-2 rounded-lg hover:bg-bg-surface\" \u002F>\n\n\u003C!-- With a label -->\n\u003CUiThemeToggle class=\"flex items-center gap-2\">\n  Theme\n\u003C\u002FUiThemeToggle>\n",[15,5171,5172,5177,5194,5198,5203,5218,5223],{"__ignoreMap":214},[218,5173,5174],{"class":220,"line":221},[218,5175,5176],{"class":224},"\u003C!-- Icon-only toggle -->\n",[218,5178,5179,5181,5184,5187,5189,5192],{"class":220,"line":228},[218,5180,232],{"class":231},[218,5182,5183],{"class":235},"UiThemeToggle",[218,5185,5186],{"class":239}," class",[218,5188,243],{"class":231},[218,5190,5191],{"class":246},"\"p-2 rounded-lg hover:bg-bg-surface\"",[218,5193,634],{"class":231},[218,5195,5196],{"class":220,"line":258},[218,5197,262],{"emptyLinePlaceholder":261},[218,5199,5200],{"class":220,"line":265},[218,5201,5202],{"class":224},"\u003C!-- With a label -->\n",[218,5204,5205,5207,5209,5211,5213,5216],{"class":220,"line":271},[218,5206,232],{"class":231},[218,5208,5183],{"class":235},[218,5210,5186],{"class":239},[218,5212,243],{"class":231},[218,5214,5215],{"class":246},"\"flex items-center gap-2\"",[218,5217,255],{"class":231},[218,5219,5220],{"class":220,"line":302},[218,5221,5222],{"class":231},"  Theme\n",[218,5224,5225,5227,5229],{"class":220,"line":308},[218,5226,311],{"class":231},[218,5228,5183],{"class":235},[218,5230,255],{"class":231},[31,5232,5234],{"id":5233},"chart-kit","Chart-Kit",[11,5236,5237],{},"Handgeschriebene SVG-Diagramme auf Basis von Design-Tokens — ohne Diagrammbibliothek. Vier Komponenten teilen sich dieselben Regeln:",[39,5239,5240,5246,5260,5274,5288,5298],{},[42,5241,5242,5245],{},[45,5243,5244],{},"Nur eine Achse."," Niemals zwei Skalen; brauchen zwei Reihen unterschiedliche Skalen, verwenden Sie zwei Diagramme.",[42,5247,5248,5251,5252,5255,5256,5259],{},[45,5249,5250],{},"Eine einzelne Reihe = Markenfarbton"," (",[15,5253,5254],{},"--color-brand",", der Standardwert von ",[15,5257,5258],{},"color"," bei jeder Komponente).",[42,5261,5262,5265,5266,5269,5270,5273],{},[45,5263,5264],{},"Mehrere Reihen\u002Fkategorial = die Palette in fester Reihenfolge"," ",[15,5267,5268],{},"--chart-cat-1"," … ",[15,5271,5272],{},"--chart-cat-4"," (in beiden Themes auf Farbfehlsichtigkeit und Kontrast geprüft). Weisen Sie die Farben der Reihe nach zu — mischen Sie sie niemals, damit es „hübsch aussieht“.",[42,5275,5276,5279,5280,5283,5284,5287],{},[45,5277,5278],{},"Text in Text-Tokens, niemals in Reihenfarben."," Beschriftungen und Werte verwenden ",[15,5281,5282],{},"text-text-*"," \u002F ",[15,5285,5286],{},"fill-text-tertiary","; Farbe gehört ausschließlich den Marks.",[42,5289,5290,5293,5294,5297],{},[45,5291,5292],{},"Zurückhaltende Raster."," Rasterlinien verwenden ",[15,5295,5296],{},"--chart-grid",", gestrichelt, Strichstärke 0,5; die Grundlinie ist durchgezogen.",[42,5299,5300,5303],{},[45,5301,5302],{},"Tabellenziffern"," überall dort, wo eine Zahl ihre Breite ändern kann.",[75,5305,5307],{"id":5306},"trend-chart-uitrendchart","Trend Chart (UiTrendChart)",[11,5309,5310],{},"Linien-\u002FFlächen-Zeitreihe mit zurückhaltendem gestricheltem Raster, y-Achsen-Beschriftungen für Max\u002FMitte\u002FMin, x-Beschriftungen für den ersten und letzten Wert, einem Endpunkt-Punkt sowie einem Fadenkreuz beim Hovern samt Tooltip.",[5312,5313,78],"h4",{"id":5314},"props-24",[80,5316,5317,5329],{},[83,5318,5319],{},[86,5320,5321,5323,5325,5327],{},[89,5322,91],{},[89,5324,94],{},[89,5326,97],{},[89,5328,100],{},[102,5330,5331,5348,5364,5378,5399],{},[86,5332,5333,5338,5343,5345],{},[107,5334,5335],{},[15,5336,5337],{},"data",[107,5339,5340],{},[15,5341,5342],{},"{ label, value }[]",[107,5344,3084],{},[107,5346,5347],{},"Geordnete Reihe (Beschriftungen sind kategorial)",[86,5349,5350,5354,5356,5361],{},[107,5351,5352],{},[15,5353,5258],{},[107,5355,114],{},[107,5357,5358],{},[15,5359,5360],{},"var(--color-brand)",[107,5362,5363],{},"Farbe von Linie und Markern",[86,5365,5366,5371,5373,5375],{},[107,5367,5368],{},[15,5369,5370],{},"showArea",[107,5372,145],{},[107,5374,2168],{},[107,5376,5377],{},"Füllung unter der Linie mit 10 % Deckkraft",[86,5379,5380,5385,5390,5396],{},[107,5381,5382],{},[15,5383,5384],{},"formatValue",[107,5386,5387],{},[15,5388,5389],{},"(value: number) => string",[107,5391,5392,5393,4300],{},"kompakt (",[15,5394,5395],{},"1.2k",[107,5397,5398],{},"Zahlenformat für Achse und Tooltip",[86,5400,5401,5405,5407,5410],{},[107,5402,5403],{},[15,5404,1639],{},[107,5406,114],{},[107,5408,5409],{},"'Trend chart'",[107,5411,5412],{},"Zugänglicher Name für das SVG",[5312,5414,207],{"id":5415},"beispiele-23",[209,5417,5419],{"className":211,"code":5418,"language":213,"meta":214,"style":214},"\u003CUiTrendChart\n    :data=\"days.map((d) => ({ label: d.label, value: d.opens }))\"\n    aria-label=\"Opens per day over the last 30 days\"\n\u002F>\n\n\u003C!-- Second categorical series on its own chart, palette order preserved -->\n\u003CUiTrendChart :data=\"clicksSeries\" color=\"var(--chart-cat-2)\" :show-area=\"false\" \u002F>\n",[15,5420,5421,5428,5459,5469,5473,5477,5482],{"__ignoreMap":214},[218,5422,5423,5425],{"class":220,"line":221},[218,5424,232],{"class":231},[218,5426,5427],{"class":235},"UiTrendChart\n",[218,5429,5430,5432,5434,5436,5438,5441,5444,5447,5450,5452,5454,5457],{"class":220,"line":228},[218,5431,946],{"class":231},[218,5433,5337],{"class":239},[218,5435,243],{"class":231},[218,5437,292],{"class":291},[218,5439,5440],{"class":231},"days.",[218,5442,5443],{"class":4791},"map",[218,5445,5446],{"class":231},"((",[218,5448,5449],{"class":4733},"d",[218,5451,4737],{"class":231},[218,5453,4740],{"class":1525},[218,5455,5456],{"class":231}," ({ label: d.label, value: d.opens }))",[218,5458,921],{"class":291},[218,5460,5461,5464,5466],{"class":220,"line":258},[218,5462,5463],{"class":239},"    aria-label",[218,5465,243],{"class":231},[218,5467,5468],{"class":246},"\"Opens per day over the last 30 days\"\n",[218,5470,5471],{"class":220,"line":265},[218,5472,1012],{"class":231},[218,5474,5475],{"class":220,"line":271},[218,5476,262],{"emptyLinePlaceholder":261},[218,5478,5479],{"class":220,"line":302},[218,5480,5481],{"class":231},"\u003C!-- Second categorical series on its own chart, palette order preserved -->\n",[218,5483,5484],{"class":220,"line":308},[218,5485,5486],{"class":231},"\u003CUiTrendChart :data=\"clicksSeries\" color=\"var(--chart-cat-2)\" :show-area=\"false\" \u002F>\n",[75,5488,5490],{"id":5489},"sparkline-uisparkline","Sparkline (UiSparkline)",[11,5492,5493,5494,5496],{},"Eingebettete Mini-Polylinie (keine Achsen, kein Raster) mit einem Endpunkt-Punkt, für Listenzeilen und Kennzahlenkacheln. ",[15,5495,1639],{}," ist erforderlich — die Sparkline selbst ist rein visuell.",[5312,5498,78],{"id":5499},"props-25",[80,5501,5502,5514],{},[83,5503,5504],{},[86,5505,5506,5508,5510,5512],{},[89,5507,91],{},[89,5509,94],{},[89,5511,97],{},[89,5513,100],{},[102,5515,5516,5531,5544,5559,5574],{},[86,5517,5518,5522,5526,5528],{},[107,5519,5520],{},[15,5521,5337],{},[107,5523,1084,5524],{},[218,5525],{},[107,5527,3084],{},[107,5529,5530],{},"Geordnete Werte",[86,5532,5533,5537,5539,5541],{},[107,5534,5535],{},[15,5536,1639],{},[107,5538,114],{},[107,5540,3084],{},[107,5542,5543],{},"Zugängliche Zusammenfassung des Trends",[86,5545,5546,5550,5552,5556],{},[107,5547,5548],{},[15,5549,5258],{},[107,5551,114],{},[107,5553,5554],{},[15,5555,5360],{},[107,5557,5558],{},"Linienfarbe",[86,5560,5561,5566,5568,5571],{},[107,5562,5563],{},[15,5564,5565],{},"width",[107,5567,1084],{},[107,5569,5570],{},"88",[107,5572,5573],{},"Breite in px",[86,5575,5576,5581,5583,5586],{},[107,5577,5578],{},[15,5579,5580],{},"height",[107,5582,1084],{},[107,5584,5585],{},"26",[107,5587,5588],{},"Höhe in px",[5312,5590,207],{"id":5591},"beispiele-24",[209,5593,5595],{"className":211,"code":5594,"language":213,"meta":214,"style":214},"\u003CUiSparkline :data=\"weeklyOpens\" aria-label=\"Opens trending up over the last 8 weeks\" \u002F>\n",[15,5596,5597],{"__ignoreMap":214},[218,5598,5599,5601,5604,5606,5608,5610,5612,5615,5617,5619,5621,5624],{"class":220,"line":221},[218,5600,232],{"class":231},[218,5602,5603],{"class":235},"UiSparkline",[218,5605,284],{"class":231},[218,5607,5337],{"class":239},[218,5609,243],{"class":231},[218,5611,292],{"class":291},[218,5613,5614],{"class":231},"weeklyOpens",[218,5616,292],{"class":291},[218,5618,1718],{"class":239},[218,5620,243],{"class":231},[218,5622,5623],{"class":246},"\"Opens trending up over the last 8 weeks\"",[218,5625,634],{"class":231},[75,5627,5629],{"id":5628},"stat-tile-uistattile","Stat Tile (UiStatTile)",[11,5631,5632,5633,18],{},"Die Kennzahl des Chart-Kits: gedämpfte Beschriftung in Großbuchstaben, Display-Ziffer in Instrument Serif (tabular-nums), optionale Delta-Zeile. Verwenden Sie sie, wenn die Zahl der Held einer Diagrammfläche ist; für schlichte farbige Kennzahlenwerte behalten Sie ",[15,5634,4459],{},[5312,5636,78],{"id":5637},"props-26",[80,5639,5640,5652],{},[83,5641,5642],{},[86,5643,5644,5646,5648,5650],{},[89,5645,91],{},[89,5647,94],{},[89,5649,97],{},[89,5651,100],{},[102,5653,5654,5667,5680,5697],{},[86,5655,5656,5660,5662,5664],{},[107,5657,5658],{},[15,5659,471],{},[107,5661,114],{},[107,5663,3084],{},[107,5665,5666],{},"Beschriftung der Kachel in Großbuchstaben",[86,5668,5669,5673,5675,5677],{},[107,5670,5671],{},[15,5672,1580],{},[107,5674,4413],{},[107,5676,3084],{},[107,5678,5679],{},"Anzeigewert (vorformatiert)",[86,5681,5682,5687,5689,5691],{},[107,5683,5684],{},[15,5685,5686],{},"delta",[107,5688,114],{},[107,5690,461],{},[107,5692,5693,5694],{},"Delta-Text, z. B. ",[15,5695,5696],{},"'12% vs last week'",[86,5698,5699,5704,5707,5710],{},[107,5700,5701],{},[15,5702,5703],{},"deltaDirection",[107,5705,5706],{},"'up' \u002F 'down' \u002F 'flat'",[107,5708,5709],{},"'flat'",[107,5711,5712],{},"up = success, down = error, flat = tertiary",[5312,5714,207],{"id":5715},"beispiele-25",[209,5717,5719],{"className":211,"code":5718,"language":213,"meta":214,"style":214},"\u003CUiStatTile label=\"Delivered\" value=\"12,480\" delta=\"8% vs last week\" delta-direction=\"up\" \u002F>\n\u003CUiStatTile label=\"Bounces\" :value=\"bounces\" delta=\"2 more than usual\" delta-direction=\"down\" \u002F>\n",[15,5720,5721,5760],{"__ignoreMap":214},[218,5722,5723,5725,5728,5730,5732,5735,5737,5739,5742,5745,5747,5750,5753,5755,5758],{"class":220,"line":221},[218,5724,232],{"class":231},[218,5726,5727],{"class":235},"UiStatTile",[218,5729,610],{"class":239},[218,5731,243],{"class":231},[218,5733,5734],{"class":246},"\"Delivered\"",[218,5736,4462],{"class":239},[218,5738,243],{"class":231},[218,5740,5741],{"class":246},"\"12,480\"",[218,5743,5744],{"class":239}," delta",[218,5746,243],{"class":231},[218,5748,5749],{"class":246},"\"8% vs last week\"",[218,5751,5752],{"class":239}," delta-direction",[218,5754,243],{"class":231},[218,5756,5757],{"class":246},"\"up\"",[218,5759,634],{"class":231},[218,5761,5762,5764,5766,5768,5770,5772,5774,5776,5778,5780,5783,5785,5787,5789,5792,5794,5796,5799],{"class":220,"line":228},[218,5763,232],{"class":231},[218,5765,5727],{"class":235},[218,5767,610],{"class":239},[218,5769,243],{"class":231},[218,5771,4524],{"class":246},[218,5773,284],{"class":231},[218,5775,1580],{"class":239},[218,5777,243],{"class":231},[218,5779,292],{"class":291},[218,5781,5782],{"class":231},"bounces",[218,5784,292],{"class":291},[218,5786,5744],{"class":239},[218,5788,243],{"class":231},[218,5790,5791],{"class":246},"\"2 more than usual\"",[218,5793,5752],{"class":239},[218,5795,243],{"class":231},[218,5797,5798],{"class":246},"\"down\"",[218,5800,634],{"class":231},[75,5802,5804],{"id":5803},"bars-uibars","Bars (UiBars)",[11,5806,5807,5808,5811,5812,5814],{},"Schmale vertikale Balken, an der Grundlinie verankert: abgerundete Datenenden, 2 px Abstand, Tooltip pro Balken beim Hovern ",[45,5809,5810],{},"und"," bei Tastaturfokus (nur über Deckkraft — kein Layout-Sprung), optionale spärliche x-Beschriftungen. Nullwerte werden als 2 px hoher Grundlinien-Stummel in ",[15,5813,5296],{}," gerendert.",[5312,5816,78],{"id":5817},"props-27",[80,5819,5820,5832],{},[83,5821,5822],{},[86,5823,5824,5826,5828,5830],{},[89,5825,91],{},[89,5827,94],{},[89,5829,97],{},[89,5831,100],{},[102,5833,5834,5849,5864,5878,5892,5910],{},[86,5835,5836,5840,5844,5846],{},[107,5837,5838],{},[15,5839,5337],{},[107,5841,5842],{},[15,5843,5342],{},[107,5845,3084],{},[107,5847,5848],{},"Geordnete Balken",[86,5850,5851,5855,5857,5861],{},[107,5852,5853],{},[15,5854,5258],{},[107,5856,114],{},[107,5858,5859],{},[15,5860,5360],{},[107,5862,5863],{},"Balkenfüllung",[86,5865,5866,5870,5872,5875],{},[107,5867,5868],{},[15,5869,5580],{},[107,5871,1084],{},[107,5873,5874],{},"128",[107,5876,5877],{},"Höhe der Plotfläche in px (Beschriftungen kommen darunter hinzu)",[86,5879,5880,5885,5887,5889],{},[107,5881,5882],{},[15,5883,5884],{},"labelEvery",[107,5886,1084],{},[107,5888,1585],{},[107,5890,5891],{},"Jede N-te x-Beschriftung anzeigen (die letzte immer); 0 = keine",[86,5893,5894,5898,5902,5907],{},[107,5895,5896],{},[15,5897,5384],{},[107,5899,5900],{},[15,5901,5389],{},[107,5903,5904],{},[15,5905,5906],{},"toLocaleString()",[107,5908,5909],{},"Wertformat für Tooltip und aria",[86,5911,5912,5916,5918,5921],{},[107,5913,5914],{},[15,5915,1639],{},[107,5917,114],{},[107,5919,5920],{},"'Bar chart'",[107,5922,5923],{},"Zugänglicher Name für die Diagrammgruppe",[5312,5925,207],{"id":5926},"beispiele-26",[209,5928,5930],{"className":211,"code":5929,"language":213,"meta":214,"style":214},"\u003CUiBars\n    :data=\"sendVolume.map((d) => ({ label: d.label, value: d.count }))\"\n    :label-every=\"1\"\n    :format-value=\"(v) => `${v.toLocaleString()} emails`\"\n    aria-label=\"Emails sent per day over the last 7 days\"\n\u002F>\n",[15,5931,5932,5939,5967,5982,6020,6029],{"__ignoreMap":214},[218,5933,5934,5936],{"class":220,"line":221},[218,5935,232],{"class":231},[218,5937,5938],{"class":235},"UiBars\n",[218,5940,5941,5943,5945,5947,5949,5952,5954,5956,5958,5960,5962,5965],{"class":220,"line":228},[218,5942,946],{"class":231},[218,5944,5337],{"class":239},[218,5946,243],{"class":231},[218,5948,292],{"class":291},[218,5950,5951],{"class":231},"sendVolume.",[218,5953,5443],{"class":4791},[218,5955,5446],{"class":231},[218,5957,5449],{"class":4733},[218,5959,4737],{"class":231},[218,5961,4740],{"class":1525},[218,5963,5964],{"class":231}," ({ label: d.label, value: d.count }))",[218,5966,921],{"class":291},[218,5968,5969,5971,5974,5976,5978,5980],{"class":220,"line":258},[218,5970,946],{"class":231},[218,5972,5973],{"class":239},"label-every",[218,5975,243],{"class":231},[218,5977,292],{"class":291},[218,5979,4654],{"class":1193},[218,5981,921],{"class":291},[218,5983,5984,5986,5989,5991,5993,5995,5998,6000,6002,6005,6007,6009,6012,6015,6018],{"class":220,"line":265},[218,5985,946],{"class":231},[218,5987,5988],{"class":239},"format-value",[218,5990,243],{"class":231},[218,5992,292],{"class":291},[218,5994,4730],{"class":231},[218,5996,5997],{"class":4733},"v",[218,5999,4737],{"class":231},[218,6001,4740],{"class":1525},[218,6003,6004],{"class":246}," `${",[218,6006,5997],{"class":231},[218,6008,18],{"class":246},[218,6010,6011],{"class":4791},"toLocaleString",[218,6013,6014],{"class":246},"()",[218,6016,6017],{"class":246},"} emails`",[218,6019,921],{"class":291},[218,6021,6022,6024,6026],{"class":220,"line":271},[218,6023,5463],{"class":239},[218,6025,243],{"class":231},[218,6027,6028],{"class":246},"\"Emails sent per day over the last 7 days\"\n",[218,6030,6031],{"class":220,"line":302},[218,6032,1012],{"class":231},[75,6034,6036],{"id":6035},"helfer","Helfer",[11,6038,6039,6040,5251,6043,4837,6046,4837,6049,4837,6052,6055],{},"Die reinen Geometrie- und Formatierungshelfer hinter dem Kit liegen in ",[15,6041,6042],{},"packages\u002Fui\u002Futils\u002Fchart.ts",[15,6044,6045],{},"computeChartPoints",[15,6047,6048],{},"computeYBounds",[15,6050,6051],{},"buildAreaPath",[15,6053,6054],{},"formatChartValue",", …) und sind unit-getestet; verwenden Sie sie für maßgeschneiderte SVG-Diagramme wieder, statt Skalen erneut herzuleiten.",[31,6057,6059],{"id":6058},"mikrointeraktions-kit","Mikrointeraktions-Kit",[11,6061,6062,6063,6066,6067,6070,6071,4837,6074,6077,6078,6080],{},"Wiederverwendbare Motion-Drop-ins im Sinne des Fluid Functionalism, definiert in ",[15,6064,6065],{},"packages\u002Fui\u002Fassets\u002Fcss\u002Fmotion.css"," und über das Design-System-Barrel importiert — in jeder App ohne zusätzliche Einrichtung verfügbar. Sie alle nutzen die gemeinsamen Motion-Tokens (",[15,6068,6069],{},"--motion-fast","\u002F",[15,6072,6073],{},"--motion-moderate",[15,6075,6076],{},"--ease-spring",") — niemals handgeschriebene Millisekundenwerte — und reduzieren sich unter ",[15,6079,1554],{}," auf reine Deckkraftänderungen (oder auf gar nichts).",[75,6082,6084,6085,4300],{"id":6083},"hover-reveal-ui-hover-reveal","Hover-Reveal (",[15,6086,6087],{},".ui-hover-reveal",[11,6089,6090,6091,6094,6095,6098,6099,6102,6103,6106,6107,6110],{},"Einblenden eines Aktions-Clusters allein über die Deckkraft, sobald seine Zeile gehovert oder fokussiert wird. Das Cluster bleibt in voller Größe im DOM (Deckkraft, nicht ",[15,6092,6093],{},"display","), sodass das Einblenden nie das Layout verschiebt, und ",[15,6096,6097],{},"pointer-events"," werden zusammen mit der Einblendung geschaltet, damit unsichtbare Aktionen auf Touch-Geräten nie antippbar sind. Auslösen über Tailwinds ",[15,6100,6101],{},"group","-Klasse oder ein explizites ",[15,6104,6105],{},".ui-hover-reveal-host"," an der Zeile; auch Tastaturfokus innerhalb der Zeile (",[15,6108,6109],{},":focus-within",") blendet es ein.",[209,6112,6114],{"className":211,"code":6113,"language":213,"meta":214,"style":214},"\u003C!-- DO: cluster inside a hovered\u002Ffocused host; absolute so it overlays -->\n\u003Cli class=\"group relative\">\n  \u003Cspan>{{ item.title }}\u003C\u002Fspan>\n  \u003Cdiv class=\"ui-hover-reveal absolute right-3 top-1\u002F2 -translate-y-1\u002F2 flex gap-0.5\">\n    \u003Cbutton type=\"button\" aria-label=\"Archive\">…\u003C\u002Fbutton>\n  \u003C\u002Fdiv>\n\u003C\u002Fli>\n",[15,6115,6116,6121,6136,6141,6146,6151,6155],{"__ignoreMap":214},[218,6117,6118],{"class":220,"line":221},[218,6119,6120],{"class":224},"\u003C!-- DO: cluster inside a hovered\u002Ffocused host; absolute so it overlays -->\n",[218,6122,6123,6125,6127,6129,6131,6134],{"class":220,"line":228},[218,6124,232],{"class":231},[218,6126,42],{"class":235},[218,6128,5186],{"class":239},[218,6130,243],{"class":231},[218,6132,6133],{"class":246},"\"group relative\"",[218,6135,255],{"class":231},[218,6137,6138],{"class":220,"line":258},[218,6139,6140],{"class":231},"  \u003Cspan>{{ item.title }}\u003C\u002Fspan>\n",[218,6142,6143],{"class":220,"line":265},[218,6144,6145],{"class":231},"  \u003Cdiv class=\"ui-hover-reveal absolute right-3 top-1\u002F2 -translate-y-1\u002F2 flex gap-0.5\">\n",[218,6147,6148],{"class":220,"line":271},[218,6149,6150],{"class":231},"    \u003Cbutton type=\"button\" aria-label=\"Archive\">…\u003C\u002Fbutton>\n",[218,6152,6153],{"class":220,"line":302},[218,6154,2001],{"class":231},[218,6156,6157,6159,6161],{"class":220,"line":308},[218,6158,311],{"class":231},[218,6160,42],{"class":235},[218,6162,255],{"class":231},[209,6164,6166],{"className":211,"code":6165,"language":213,"meta":214,"style":214},"\u003C!-- DON'T: v-if \u002F display toggles shift layout and drop keyboard access -->\n\u003Cli @mouseenter=\"show = true\" @mouseleave=\"show = false\">\n  \u003Cdiv v-if=\"show\">…\u003C\u002Fdiv>\n\u003C\u002Fli>\n",[15,6167,6168,6173,6216,6221],{"__ignoreMap":214},[218,6169,6170],{"class":220,"line":221},[218,6171,6172],{"class":224},"\u003C!-- DON'T: v-if \u002F display toggles shift layout and drop keyboard access -->\n",[218,6174,6175,6177,6179,6181,6184,6186,6188,6191,6193,6195,6197,6199,6202,6204,6206,6208,6210,6212,6214],{"class":220,"line":228},[218,6176,232],{"class":231},[218,6178,42],{"class":235},[218,6180,2253],{"class":231},[218,6182,6183],{"class":239},"mouseenter",[218,6185,243],{"class":231},[218,6187,292],{"class":291},[218,6189,6190],{"class":231},"show ",[218,6192,243],{"class":1525},[218,6194,2268],{"class":1193},[218,6196,292],{"class":291},[218,6198,2253],{"class":231},[218,6200,6201],{"class":239},"mouseleave",[218,6203,243],{"class":231},[218,6205,292],{"class":291},[218,6207,6190],{"class":231},[218,6209,243],{"class":1525},[218,6211,2380],{"class":1193},[218,6213,292],{"class":291},[218,6215,255],{"class":231},[218,6217,6218],{"class":220,"line":258},[218,6219,6220],{"class":231},"  \u003Cdiv v-if=\"show\">…\u003C\u002Fdiv>\n",[218,6222,6223,6225,6227],{"class":220,"line":265},[218,6224,311],{"class":231},[218,6226,42],{"class":235},[218,6228,255],{"class":231},[75,6230,6232,6233,4300],{"id":6231},"spring-press-ui-press","Spring-Press (",[15,6234,6235],{},".ui-press",[11,6237,6238,6239,6242,6243,6246,6247,6249,6250,6252,6253,6256],{},"Ein Druckeffekt mit ",[15,6240,6241],{},"scale: 0.98"," bei ",[15,6244,6245],{},":active",", getragen von ",[15,6248,6069],{}," + ",[15,6251,6076],{},". Für maßgeschneiderte interaktive Elemente (Icon-Buttons, Karten, die als Buttons fungieren) — ",[15,6254,6255],{},".btn"," bringt seinen eigenen Druckeffekt bereits mit.",[209,6258,6260],{"className":211,"code":6259,"language":213,"meta":214,"style":214},"\u003C!-- DO -->\n\u003Cbutton type=\"button\" class=\"ui-press p-2 rounded-lg hover:bg-bg-surface\">…\u003C\u002Fbutton>\n",[15,6261,6262,6267],{"__ignoreMap":214},[218,6263,6264],{"class":220,"line":221},[218,6265,6266],{"class":224},"\u003C!-- DO -->\n",[218,6268,6269,6271,6274,6276,6278,6281,6283,6285,6288,6291,6293],{"class":220,"line":228},[218,6270,232],{"class":231},[218,6272,6273],{"class":235},"button",[218,6275,618],{"class":239},[218,6277,243],{"class":231},[218,6279,6280],{"class":246},"\"button\"",[218,6282,5186],{"class":239},[218,6284,243],{"class":231},[218,6286,6287],{"class":246},"\"ui-press p-2 rounded-lg hover:bg-bg-surface\"",[218,6289,6290],{"class":231},">…\u003C\u002F",[218,6292,6273],{"class":235},[218,6294,255],{"class":231},[209,6296,6298],{"className":211,"code":6297,"language":213,"meta":214,"style":214},"\u003C!-- DON'T: hand-rolled press with hardcoded timing, or doubling up on .btn\n     (which already presses) -->\n\u003Cbutton class=\"btn btn-primary ui-press\">…\u003C\u002Fbutton>\n\u003Cbutton class=\"active:scale-95 transition-transform duration-100\">…\u003C\u002Fbutton>\n",[15,6299,6300,6305,6310,6329],{"__ignoreMap":214},[218,6301,6302],{"class":220,"line":221},[218,6303,6304],{"class":224},"\u003C!-- DON'T: hand-rolled press with hardcoded timing, or doubling up on .btn\n",[218,6306,6307],{"class":220,"line":228},[218,6308,6309],{"class":224},"     (which already presses) -->\n",[218,6311,6312,6314,6316,6318,6320,6323,6325,6327],{"class":220,"line":258},[218,6313,232],{"class":231},[218,6315,6273],{"class":235},[218,6317,5186],{"class":239},[218,6319,243],{"class":231},[218,6321,6322],{"class":246},"\"btn btn-primary ui-press\"",[218,6324,6290],{"class":231},[218,6326,6273],{"class":235},[218,6328,255],{"class":231},[218,6330,6331,6333,6335,6337,6339,6342,6344,6346],{"class":220,"line":265},[218,6332,232],{"class":231},[218,6334,6273],{"class":235},[218,6336,5186],{"class":239},[218,6338,243],{"class":231},[218,6340,6341],{"class":246},"\"active:scale-95 transition-transform duration-100\"",[218,6343,6290],{"class":231},[218,6345,6273],{"class":235},[218,6347,255],{"class":231},[75,6349,6351,6352,4300],{"id":6350},"gestaffelter-auftritt-ui-stagger","Gestaffelter Auftritt (",[15,6353,6354],{},".ui-stagger",[11,6356,6357],{},"An einen Listencontainer setzen: direkte Kinder treten mit Deckkraft und einem Anstieg von 6 px in Schritten von 20 ms auf der mittleren Stufe ein. Gedacht für kurze Listen (bis zu 8 Einträge — Warteschlangen, Aktionsdecks, Dashboards); spätere Einträge teilen sich die letzte Verzögerung, damit lange Listen nie träge wirken. Bei reduzierter Bewegung erscheinen die Einträge einfach.",[209,6359,6361],{"className":211,"code":6360,"language":213,"meta":214,"style":214},"\u003C!-- DO: a short, meaningful queue -->\n\u003Cul class=\"ui-stagger\">\n  \u003Cli v-for=\"task in todaysTasks\" :key=\"task.id\">…\u003C\u002Fli>\n\u003C\u002Ful>\n",[15,6362,6363,6368,6383,6388],{"__ignoreMap":214},[218,6364,6365],{"class":220,"line":221},[218,6366,6367],{"class":224},"\u003C!-- DO: a short, meaningful queue -->\n",[218,6369,6370,6372,6374,6376,6378,6381],{"class":220,"line":228},[218,6371,232],{"class":231},[218,6373,39],{"class":235},[218,6375,5186],{"class":239},[218,6377,243],{"class":231},[218,6379,6380],{"class":246},"\"ui-stagger\"",[218,6382,255],{"class":231},[218,6384,6385],{"class":220,"line":258},[218,6386,6387],{"class":231},"  \u003Cli v-for=\"task in todaysTasks\" :key=\"task.id\">…\u003C\u002Fli>\n",[218,6389,6390,6392,6394],{"class":220,"line":265},[218,6391,311],{"class":231},[218,6393,39],{"class":235},[218,6395,255],{"class":231},[209,6397,6399],{"className":211,"code":6398,"language":213,"meta":214,"style":214},"\u003C!-- DON'T: hundreds of virtualized rows — the animation replays on every\n     scroll-in and delays reading the data -->\n\u003Cul class=\"ui-stagger\">\u003Cli v-for=\"msg in allMessages\" :key=\"msg.id\">…\u003C\u002Fli>\u003C\u002Ful>\n",[15,6400,6401,6406,6411],{"__ignoreMap":214},[218,6402,6403],{"class":220,"line":221},[218,6404,6405],{"class":224},"\u003C!-- DON'T: hundreds of virtualized rows — the animation replays on every\n",[218,6407,6408],{"class":220,"line":228},[218,6409,6410],{"class":224},"     scroll-in and delays reading the data -->\n",[218,6412,6413,6415,6417,6419,6421,6423,6426,6428],{"class":220,"line":258},[218,6414,232],{"class":231},[218,6416,39],{"class":235},[218,6418,5186],{"class":239},[218,6420,243],{"class":231},[218,6422,6380],{"class":246},[218,6424,6425],{"class":231},">\u003Cli v-for=\"msg in allMessages\" :key=\"msg.id\">…\u003C\u002Fli>\u003C\u002F",[218,6427,39],{"class":235},[218,6429,255],{"class":231},[75,6431,6433,6434,4300],{"id":6432},"nähe-betonung-ui-proximity","Nähe-Betonung (",[15,6435,6436],{},".ui-proximity",[11,6438,6439,6440,6443],{},"Für dichte Icon-Zeilen (Toolbars, Schnellaktions-Cluster): Das gehoverte Ziel hebt sich leicht ab, seine unmittelbaren Nachbarn bleiben nahezu voll deckend, der Rest tritt zurück — der Fokus folgt dem Zeiger, rein per CSS. Tastaturfokus (",[15,6441,6442],{},":focus-visible",") erhält dieselbe Betonung.",[209,6445,6447],{"className":211,"code":6446,"language":213,"meta":214,"style":214},"\u003C!-- DO: a dense, single-purpose icon row -->\n\u003Cdiv class=\"ui-proximity flex items-center gap-1\">\n  \u003Cbutton type=\"button\" aria-label=\"Reply\">…\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\" aria-label=\"Archive\">…\u003C\u002Fbutton>\n  \u003Cbutton type=\"button\" aria-label=\"Snooze\">…\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[15,6448,6449,6454,6469,6474,6479,6484],{"__ignoreMap":214},[218,6450,6451],{"class":220,"line":221},[218,6452,6453],{"class":224},"\u003C!-- DO: a dense, single-purpose icon row -->\n",[218,6455,6456,6458,6460,6462,6464,6467],{"class":220,"line":228},[218,6457,232],{"class":231},[218,6459,5070],{"class":235},[218,6461,5186],{"class":239},[218,6463,243],{"class":231},[218,6465,6466],{"class":246},"\"ui-proximity flex items-center gap-1\"",[218,6468,255],{"class":231},[218,6470,6471],{"class":220,"line":258},[218,6472,6473],{"class":231},"  \u003Cbutton type=\"button\" aria-label=\"Reply\">…\u003C\u002Fbutton>\n",[218,6475,6476],{"class":220,"line":265},[218,6477,6478],{"class":231},"  \u003Cbutton type=\"button\" aria-label=\"Archive\">…\u003C\u002Fbutton>\n",[218,6480,6481],{"class":220,"line":271},[218,6482,6483],{"class":231},"  \u003Cbutton type=\"button\" aria-label=\"Snooze\">…\u003C\u002Fbutton>\n",[218,6485,6486,6488,6490],{"class":220,"line":302},[218,6487,311],{"class":231},[218,6489,5070],{"class":235},[218,6491,255],{"class":231},[209,6493,6495],{"className":211,"code":6494,"language":213,"meta":214,"style":214},"\u003C!-- DON'T: on mixed content — receding siblings reads as disabling them -->\n\u003Cnav class=\"ui-proximity\">…text links and headings…\u003C\u002Fnav>\n",[15,6496,6497,6502],{"__ignoreMap":214},[218,6498,6499],{"class":220,"line":221},[218,6500,6501],{"class":224},"\u003C!-- DON'T: on mixed content — receding siblings reads as disabling them -->\n",[218,6503,6504,6506,6509,6511,6513,6516,6519,6521],{"class":220,"line":228},[218,6505,232],{"class":231},[218,6507,6508],{"class":235},"nav",[218,6510,5186],{"class":239},[218,6512,243],{"class":231},[218,6514,6515],{"class":246},"\"ui-proximity\"",[218,6517,6518],{"class":231},">…text links and headings…\u003C\u002F",[218,6520,6508],{"class":235},[218,6522,255],{"class":231},[75,6524,6526],{"id":6525},"zahlen-ticker-uinumberticker","Zahlen-Ticker (UiNumberTicker)",[11,6528,6529,6530,6532,6533,6535,6536,6539,6540,6542],{},"Animierte Ziffer für Kennzahlenkacheln und Zähler: Ändert sich ",[15,6531,1580],{},", rollt die angezeigte Zahl über einen ",[15,6534,6073],{},"-Takt zum neuen Wert. Immer ",[15,6537,6538],{},"tabular-nums",", damit Ziffern horizontal nie springen. Unter ",[15,6541,1554],{}," wird schlichter Text gerendert, der sich einfach aktualisiert.",[5312,6544,78],{"id":6545},"props-28",[80,6547,6548,6560],{},[83,6549,6550],{},[86,6551,6552,6554,6556,6558],{},[89,6553,91],{},[89,6555,94],{},[89,6557,97],{},[89,6559,100],{},[102,6561,6562,6575],{},[86,6563,6564,6568,6570,6572],{},[107,6565,6566],{},[15,6567,1580],{},[107,6569,1084],{},[107,6571,3084],{},[107,6573,6574],{},"Zielwert; Änderungen werden animiert",[86,6576,6577,6582,6586,6589],{},[107,6578,6579],{},[15,6580,6581],{},"formatter",[107,6583,6584],{},[15,6585,5389],{},[107,6587,6588],{},"gerundet + gruppiert",[107,6590,6591],{},"Anzeigeformat für den laufenden Wert",[5312,6593,207],{"id":6594},"beispiele-27",[209,6596,6598],{"className":211,"code":6597,"language":213,"meta":214,"style":214},"\u003C!-- DO: hero numeral that updates live -->\n\u003Cp class=\"text-2xl font-semibold\">\u003CUiNumberTicker :value=\"stats.sentToday\" \u002F>\u003C\u002Fp>\n\n\u003C!-- Custom format -->\n\u003CUiNumberTicker :value=\"deliveryRate\" :formatter=\"(n) => `${(n * 100).toFixed(1)}%`\" \u002F>\n",[15,6599,6600,6605,6625,6629,6634],{"__ignoreMap":214},[218,6601,6602],{"class":220,"line":221},[218,6603,6604],{"class":224},"\u003C!-- DO: hero numeral that updates live -->\n",[218,6606,6607,6609,6611,6613,6615,6618,6621,6623],{"class":220,"line":228},[218,6608,232],{"class":231},[218,6610,11],{"class":235},[218,6612,5186],{"class":239},[218,6614,243],{"class":231},[218,6616,6617],{"class":246},"\"text-2xl font-semibold\"",[218,6619,6620],{"class":231},">\u003CUiNumberTicker :value=\"stats.sentToday\" \u002F>\u003C\u002F",[218,6622,11],{"class":235},[218,6624,255],{"class":231},[218,6626,6627],{"class":220,"line":258},[218,6628,262],{"emptyLinePlaceholder":261},[218,6630,6631],{"class":220,"line":265},[218,6632,6633],{"class":224},"\u003C!-- Custom format -->\n",[218,6635,6636,6638,6641,6643,6645,6647,6649,6652,6654,6656,6658,6660,6662,6664,6667,6669,6671,6673,6675,6677,6680,6683,6686,6689,6691,6693,6695,6697,6699],{"class":220,"line":271},[218,6637,232],{"class":231},[218,6639,6640],{"class":235},"UiNumberTicker",[218,6642,284],{"class":231},[218,6644,1580],{"class":239},[218,6646,243],{"class":231},[218,6648,292],{"class":291},[218,6650,6651],{"class":231},"deliveryRate",[218,6653,292],{"class":291},[218,6655,284],{"class":231},[218,6657,6581],{"class":239},[218,6659,243],{"class":231},[218,6661,292],{"class":291},[218,6663,4730],{"class":231},[218,6665,6666],{"class":4733},"n",[218,6668,4737],{"class":231},[218,6670,4740],{"class":1525},[218,6672,6004],{"class":246},[218,6674,4730],{"class":246},[218,6676,6666],{"class":231},[218,6678,6679],{"class":1525}," *",[218,6681,6682],{"class":1193}," 100",[218,6684,6685],{"class":246},").",[218,6687,6688],{"class":4791},"toFixed",[218,6690,4730],{"class":246},[218,6692,4654],{"class":1193},[218,6694,4300],{"class":246},[218,6696,1691],{"class":246},[218,6698,292],{"class":291},[218,6700,634],{"class":231},[209,6702,6704],{"className":211,"code":6703,"language":213,"meta":214,"style":214},"\u003C!-- DON'T: static values that never change (plain text is simpler), or\n     inside sentences where rolling digits distract from reading -->\n\u003Cp>You have \u003CUiNumberTicker :value=\"3\" \u002F> drafts.\u003C\u002Fp>\n",[15,6705,6706,6711,6716],{"__ignoreMap":214},[218,6707,6708],{"class":220,"line":221},[218,6709,6710],{"class":224},"\u003C!-- DON'T: static values that never change (plain text is simpler), or\n",[218,6712,6713],{"class":220,"line":228},[218,6714,6715],{"class":224},"     inside sentences where rolling digits distract from reading -->\n",[218,6717,6718,6720,6722,6725,6727],{"class":220,"line":258},[218,6719,232],{"class":231},[218,6721,11],{"class":235},[218,6723,6724],{"class":231},">You have \u003CUiNumberTicker :value=\"3\" \u002F> drafts.\u003C\u002F",[218,6726,11],{"class":235},[218,6728,255],{"class":231},[6730,6731,6732],"style",{},"html pre.shiki code .sDN9O, html code.shiki .sDN9O{--shiki-default:#6A737D;--shiki-dark:#768390}html pre.shiki code .sYgZi, html code.shiki .sYgZi{--shiki-default:#24292E;--shiki-dark:#ADBAC7}html pre.shiki code .sIAta, html code.shiki .sIAta{--shiki-default:#22863A;--shiki-dark:#8DDB8C}html pre.shiki code .sMOND, html code.shiki .sMOND{--shiki-default:#6F42C1;--shiki-dark:#6CB6FF}html pre.shiki code .s-HuK, html code.shiki .s-HuK{--shiki-default:#032F62;--shiki-dark:#96D0FF}html pre.shiki code .s4G6O, html code.shiki .s4G6O{--shiki-default:#032F62;--shiki-dark:#ADBAC7}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sviXB, html code.shiki .sviXB{--shiki-default:#005CC5;--shiki-dark:#6CB6FF}html pre.shiki code .s7YZ4, html code.shiki .s7YZ4{--shiki-default:#D73A49;--shiki-dark:#F47067}html pre.shiki code .stnAF, html code.shiki .stnAF{--shiki-default:#E36209;--shiki-dark:#F69D50}html pre.shiki code .sPO5f, html code.shiki .sPO5f{--shiki-default:#6F42C1;--shiki-dark:#DCBDFB}",{"title":214,"searchDepth":228,"depth":228,"links":6734},[6735,6736,6741,6746,6750,6754,6758,6762,6766,6771,6777,6782,6787,6791,6795,6800,6805,6809,6815,6821,6826,6827,6831,6836,6840,6844,6847,6852,6855,6862],{"id":33,"depth":228,"text":34},{"id":69,"depth":228,"text":70,"children":6737},[6738,6739,6740],{"id":77,"depth":258,"text":78},{"id":182,"depth":258,"text":183},{"id":206,"depth":258,"text":207},{"id":410,"depth":228,"text":411,"children":6742},[6743,6744,6745],{"id":417,"depth":258,"text":78},{"id":563,"depth":258,"text":183},{"id":578,"depth":258,"text":207},{"id":742,"depth":228,"text":743,"children":6747},[6748,6749],{"id":764,"depth":258,"text":78},{"id":894,"depth":258,"text":207},{"id":1015,"depth":228,"text":1016,"children":6751},[6752,6753],{"id":1022,"depth":258,"text":78},{"id":1146,"depth":258,"text":207},{"id":1228,"depth":228,"text":1229,"children":6755},[6756,6757],{"id":1235,"depth":258,"text":78},{"id":1304,"depth":258,"text":207},{"id":1386,"depth":228,"text":1387,"children":6759},[6760,6761],{"id":1405,"depth":258,"text":78},{"id":1462,"depth":258,"text":207},{"id":1543,"depth":228,"text":1544,"children":6763},[6764,6765],{"id":1557,"depth":258,"text":78},{"id":1649,"depth":258,"text":207},{"id":1775,"depth":228,"text":1776,"children":6767},[6768,6769,6770],{"id":1782,"depth":258,"text":78},{"id":1872,"depth":258,"text":183},{"id":1894,"depth":258,"text":207},{"id":2092,"depth":228,"text":2093,"children":6772},[6773,6774,6775,6776],{"id":2099,"depth":258,"text":78},{"id":2202,"depth":258,"text":183},{"id":2217,"depth":258,"text":2218},{"id":2229,"depth":258,"text":207},{"id":2450,"depth":228,"text":2451,"children":6778},[6779,6780,6781],{"id":2457,"depth":258,"text":78},{"id":2548,"depth":258,"text":183},{"id":2558,"depth":258,"text":2218},{"id":2575,"depth":228,"text":2576,"children":6783},[6784,6785,6786],{"id":2582,"depth":258,"text":78},{"id":2641,"depth":258,"text":183},{"id":2656,"depth":258,"text":207},{"id":2755,"depth":228,"text":2756,"children":6788},[6789,6790],{"id":2762,"depth":258,"text":78},{"id":2812,"depth":258,"text":207},{"id":2920,"depth":228,"text":2921,"children":6792},[6793,6794],{"id":2927,"depth":258,"text":78},{"id":2996,"depth":258,"text":207},{"id":3030,"depth":228,"text":3031,"children":6796},[6797,6798,6799],{"id":3037,"depth":258,"text":78},{"id":3103,"depth":258,"text":183},{"id":3114,"depth":258,"text":207},{"id":3210,"depth":228,"text":3211,"children":6801},[6802,6803,6804],{"id":3217,"depth":258,"text":78},{"id":3265,"depth":258,"text":183},{"id":3275,"depth":258,"text":207},{"id":3313,"depth":228,"text":3314,"children":6806},[6807,6808],{"id":3320,"depth":258,"text":78},{"id":3380,"depth":258,"text":207},{"id":3455,"depth":228,"text":3456,"children":6810},[6811,6812,6813,6814],{"id":3462,"depth":258,"text":78},{"id":3587,"depth":258,"text":183},{"id":3597,"depth":258,"text":2218},{"id":3615,"depth":258,"text":207},{"id":3721,"depth":228,"text":3722,"children":6816},[6817,6818,6819,6820],{"id":3728,"depth":258,"text":78},{"id":3774,"depth":258,"text":183},{"id":3790,"depth":258,"text":3791},{"id":3808,"depth":258,"text":207},{"id":3924,"depth":228,"text":3925,"children":6822},[6823,6824,6825],{"id":3933,"depth":258,"text":78},{"id":3997,"depth":258,"text":183},{"id":4007,"depth":258,"text":2218},{"id":4017,"depth":228,"text":4018},{"id":4027,"depth":228,"text":4028,"children":6828},[6829,6830],{"id":4034,"depth":258,"text":78},{"id":4149,"depth":258,"text":207},{"id":4219,"depth":228,"text":4220,"children":6832},[6833,6834,6835],{"id":4226,"depth":258,"text":78},{"id":4284,"depth":258,"text":183},{"id":4303,"depth":258,"text":207},{"id":4381,"depth":228,"text":4382,"children":6837},[6838,6839],{"id":4388,"depth":258,"text":78},{"id":4447,"depth":258,"text":207},{"id":4535,"depth":228,"text":4536,"children":6841},[6842,6843],{"id":4542,"depth":258,"text":78},{"id":4611,"depth":258,"text":207},{"id":4757,"depth":228,"text":4758,"children":6845},[6846],{"id":4764,"depth":258,"text":4765},{"id":4847,"depth":228,"text":4848,"children":6848},[6849,6850,6851],{"id":4857,"depth":258,"text":78},{"id":4932,"depth":258,"text":207},{"id":5035,"depth":258,"text":5036},{"id":5151,"depth":228,"text":5152,"children":6853},[6854],{"id":5166,"depth":258,"text":207},{"id":5233,"depth":228,"text":5234,"children":6856},[6857,6858,6859,6860,6861],{"id":5306,"depth":258,"text":5307},{"id":5489,"depth":258,"text":5490},{"id":5628,"depth":258,"text":5629},{"id":5803,"depth":258,"text":5804},{"id":6035,"depth":258,"text":6036},{"id":6058,"depth":228,"text":6059,"children":6863},[6864,6866,6868,6870,6872],{"id":6083,"depth":258,"text":6865},"Hover-Reveal (.ui-hover-reveal)",{"id":6231,"depth":258,"text":6867},"Spring-Press (.ui-press)",{"id":6350,"depth":258,"text":6869},"Gestaffelter Auftritt (.ui-stagger)",{"id":6432,"depth":258,"text":6871},"Nähe-Betonung (.ui-proximity)",{"id":6525,"depth":258,"text":6526},"Referenz für die wiederverwendbaren, automatisch importierten Vue-UI-Komponenten aus dem Layer packages\u002Fui.","md",{},"\u002Fdeveloper\u002Fcomponents",{"title":6,"description":6873},"3.developer\u002F9.components","8VzpHnvXa-_P8d-X4qWBjLqaQ7Vjlf4CJCUzZeH2Fso",[6881,6885],{"title":6882,"path":6883,"stem":6884,"children":-1},"Umgebungsvariablen","\u002Fdeveloper\u002Fenvironment-variables","3.developer\u002F8.environment-variables",{"title":6886,"path":6887,"stem":6888,"children":-1},"Architecture Decision Records","\u002Fdeveloper\u002Fdecisions","3.developer\u002Fdecisions\u002F1.index",1786915107587]