[{"data":1,"prerenderedAt":229},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fseparator":3,"component-meta:UiSeparator":168},{"id":4,"title":5,"body":6,"component":155,"dependsOn":156,"description":157,"emitDescriptions":158,"extension":159,"meta":160,"navigation":161,"order":162,"path":163,"seo":164,"status":165,"stem":166,"__hash__":167},"docs\u002Fdocs\u002Fcomponents\u002Fseparator.md","Separator",{"type":7,"value":8,"toc":146},"minimark",[9,13,18,23,26,42,55,66,70,73,77,93,97,119,123,140],[10,11,12],"p",{},"Лінія між блоками. Уся складність тут не у вигляді, а в одному питанні:\nчи має скрінрідер знати про цю межу.",[14,15],"component-preview",{"name":16,"stage":17},"separator-basic","min-h-56",[19,20,22],"h2",{"id":21},"декоративний-чи-смисловий","Декоративний чи смисловий",[10,24,25],{},"Правило коротке, а ціна помилки різна в обидва боки.",[10,27,28,32,33,37,38,41],{},[29,30,31],"strong",{},"Декоративний"," (",[34,35,36],"code",{},"decorative: true",", типово) — межу вже виражає розмітка\nнавколо: рядки списку, секції картки, групи тулбара. Лінія лише малює те,\nщо й так зрозуміло зі структури. Такий роздільник отримує ",[34,39,40],{},"aria-hidden"," і\nдля скрінрідера не існує. Інакше довгий список перетворюється на «роздільник,\nпункт, роздільник, пункт» — сто зайвих оголошень на екран.",[10,43,44,32,47,50,51,54],{},[29,45,46],{},"Смисловий",[34,48,49],{},"decorative: false",") — межа існує ЛИШЕ як ця лінія. Дві\nнезв'язані групи пунктів меню, «або» між способами входу. Тут потрібен\n",[34,52,53],{},"role=\"separator\"",", інакше межа зникає для тих, хто її не бачить.",[10,56,57,58,61,62,65],{},"Підпис (",[34,59,60],{},"label",") робить роздільник смисловим автоматично: лінія, яка щось\nговорить, за визначенням несе зміст. ",[34,63,64],{},"decorative"," при ньому ігнорується.",[19,67,69],{"id":68},"api","API",[71,72],"component-api",{},[19,74,76],{"id":75},"коли-використовувати","Коли використовувати",[78,79,80,84,87,90],"ul",{},[81,82,83],"li",{},"Між секціями картки або панелі, де відступу замало.",[81,85,86],{},"Між групами дій у тулбарі чи меню.",[81,88,89],{},"Як підписану межу: «або», «Архів», «Показати ще».",[81,91,92],{},"Вертикально — між дрібними діями в одному рядку.",[19,94,96],{"id":95},"коли-не-використовувати","Коли НЕ використовувати",[78,98,99,102,105,112],{},[81,100,101],{},"Замість відступу. Якщо блоки й так читаються окремо, лінія лише додає шуму.",[81,103,104],{},"Між рядками таблиці — для цього є межі самої таблиці.",[81,106,107,108,111],{},"Як межу картки: це ",[34,109,110],{},"border"," картки, а не окремий елемент.",[81,113,114,115,118],{},"Вертикально поза flex-рядком: ",[34,116,117],{},"self-stretch"," нема від чого відштовхнутись,\nі лінія схлопнеться в нуль.",[19,120,122],{"id":121},"доступність","Доступність",[10,124,125,126,128,129,132,133,136,137,139],{},"Текст підпису має ",[34,127,40],{},", а ім'я береться з ",[34,130,131],{},"aria-label",". Так треба:\nроль ",[34,134,135],{},"separator"," не обчислює назву з вмісту, і без ",[34,138,131],{}," роздільник\nлишився б безіменним, а видимий текст прозвучав би окремо від нього.",[10,141,142,145],{},[34,143,144],{},"aria-orientation"," виставляється лише для смислового варіанту — у\nдекоративного немає ролі, до якої його можна прикласти.",{"title":147,"searchDepth":148,"depth":148,"links":149},"",2,[150,151,152,153,154],{"id":21,"depth":148,"text":22},{"id":68,"depth":148,"text":69},{"id":75,"depth":148,"text":76},{"id":95,"depth":148,"text":96},{"id":121,"depth":148,"text":122},"UiSeparator",[],"Роздільник із підписом або без — і правило, коли він потрібен скрінрідеру, а коли ні.",{},"md",{},true,53,"\u002Fdocs\u002Fcomponents\u002Fseparator",{"title":5,"description":157},"stable","docs\u002Fcomponents\u002Fseparator","i1PgoXsTvEA20FfV9KBEl3JB7lidDJdElCfptb06fMM",{"mode":169,"prefetch":170,"preload":170,"filePath":171,"declarationPath":172,"pascalName":155,"kebabName":173,"chunkName":174,"priority":175,"_scanned":161,"meta":176},"all",false,"app\u002Fcomponents\u002Fui\u002FUiSeparator.vue","C:\u002Fproject-DS\u002FtatetUI\u002Fapp\u002Fcomponents\u002Fui\u002FUiSeparator.vue","ui-separator","components\u002Fui-separator",1,{"type":175,"props":177,"slots":220,"events":226,"exposed":227,"hash":228},[178,188,198,208,212],{"name":179,"global":170,"default":180,"description":181,"tags":182,"required":170,"type":183,"schema":184},"orientation","\"horizontal\"","Напрям лінії. Вертикальна вимагає, щоб батько був flex-рядком.",[],"\"horizontal\" | \"vertical\"",{"kind":185,"type":183,"schema":186},"enum",{"0":180,"1":187},"\"vertical\"",{"name":189,"global":170,"default":190,"description":191,"tags":192,"required":170,"type":193,"schema":194},"labelPosition","\"center\"","Де стоїть підпис уздовж лінії.",[],"\"center\" | \"start\" | \"end\"",{"kind":185,"type":193,"schema":195},{"0":190,"1":196,"2":197},"\"start\"","\"end\"",{"name":199,"global":170,"default":200,"description":201,"tags":202,"required":170,"type":203,"schema":204},"spacing","\"md\"","Зовнішні відступи навколо лінії.",[],"\"md\" | \"none\" | \"sm\"",{"kind":185,"type":203,"schema":205},{"0":200,"1":206,"2":207},"\"none\"","\"sm\"",{"name":60,"global":170,"description":209,"tags":210,"required":170,"type":211,"schema":211},"Текст посередині лінії: «або», «Архів». Наявність підпису САМА\r\nробить роздільник смисловим, тож `decorative` при ньому ігнорується.",[],"string",{"name":64,"global":170,"default":213,"description":214,"tags":215,"required":170,"type":216,"schema":217},"true","`true` — межа вже виражена розміткою навколо, лінія лише декор.\r\n`false` — межа існує ЛИШЕ як ця лінія.",[],"boolean",{"kind":185,"type":216,"schema":218},{"0":219,"1":213},"false",[221],{"name":222,"type":223,"description":224,"tags":225,"schema":223},"default","any","Власний підпис замість `label`. `label` при цьому лишається потрібним:\r\nроль `separator` не бере назву з вмісту, тож `aria-label` береться саме\r\nз нього.",[],[],[],"FTWgTdnfoQctGijVjc3RxCWsBPIrZu9D4JHLTTIaAQU",1788072639726]