[{"data":1,"prerenderedAt":214},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fprogress-ring":3,"component-meta:UiProgressRing":148},{"id":4,"title":5,"body":6,"component":135,"dependsOn":136,"description":137,"emitDescriptions":138,"extension":139,"meta":140,"navigation":141,"order":142,"path":143,"seo":144,"status":145,"stem":146,"__hash__":147},"docs\u002Fdocs\u002Fcomponents\u002Fprogress-ring.md","ProgressRing",{"type":7,"value":8,"toc":127},"minimark",[9,33,38,43,46,50,60,64,78,82,100,114],[10,11,12,13,17,18,21,22,21,25,28,29,32],"p",{},"Та сама шкала, що в ",[14,15,16],"code",{},"UiProgress",", — ",[14,19,20],{},"modelValue",", ",[14,23,24],{},"max",[14,26,27],{},"tone",",\nневизначений стан через ",[14,30,31],{},"null"," — але в колі. Смуга потребує ширини; кільце\nвміщається там, де ширини немає: у рядку таблиці, у картці поруч із\nцифрою, на аватарі кроку онбордингу.",[34,35],"component-preview",{"name":36,"stage":37},"progress-ring-basic","min-h-72",[39,40,42],"h2",{"id":41},"api","API",[44,45],"component-api",{},[39,47,49],{"id":48},"коли-використовувати","Коли використовувати",[51,52,53,57],"ul",{},[54,55,56],"li",{},"Прогрес одного об'єкта в щільному місці: заповнення профілю, квота,\nвикористаний контекст, крок онбордингу («3\u002F5» у центрі через слот).",[54,58,59],{},"Ключова частка на дашборді, коли саме кільце — головна графіка картки.",[39,61,63],{"id":62},"коли-не-використовувати","Коли НЕ використовувати",[51,65,66,69],{},[54,67,68],{},"Для порівняння кількох величин. Кільця погано порівнюються на око —\nп'ять смуг одна під одною читаються швидше за п'ять кілець поруч.",[54,70,71,72,77],{},"Для завантаження без відомої частки довше кількох секунд — див.\nрозділ про вибір індикатора на сторінці ",[73,74,76],"a",{"href":75},"\u002Fdocs\u002Fcomponents\u002Fspinner","Spinner",".",[39,79,81],{"id":80},"доступність","Доступність",[10,83,84,87,88,91,92,95,96,99],{},[14,85,86],{},"role=\"progressbar\""," з ",[14,89,90],{},"aria-valuemin\u002Fmax\u002Fnow"," і назвою з ",[14,93,94],{},"label",". У\nневизначеному стані ",[14,97,98],{},"aria-valuenow"," немає зовсім — саме так специфікація\nвідрізняє «невідомо скільки» від «нуль».",[10,101,102,103,106,107,110,111,113],{},"Відсоток у центрі (",[14,104,105],{},"showValue",") має ",[14,108,109],{},"aria-hidden",": значення вже несе\n",[14,112,98],{},", і дубль прозвучав би двічі. Центр показується лише від\nдіаметра 40px — менше число в кільце читабельним не вміщається.",[10,115,116,117,120,121,124,125,77],{},"Геометрія рахується в пікселях самого кільця, а не у фіксованому\n",[14,118,119],{},"viewBox",": товщина — справжні пікселі за будь-якого діаметра, тож 3px на\n24px і 3px на 96px виглядають однаково. Під ",[14,122,123],{},"prefers-reduced-motion","\nневизначене кільце не застигає «на чверті» (що читалося б як 25 %), а стає\nповним і напівпрозорим — той самий прийом, що в ",[14,126,16],{},{"title":128,"searchDepth":129,"depth":129,"links":130},"",2,[131,132,133,134],{"id":41,"depth":129,"text":42},{"id":48,"depth":129,"text":49},{"id":62,"depth":129,"text":63},{"id":80,"depth":129,"text":81},"UiProgressRing",[],"Круговий прогрес для щільних місць — від 24px у рядку до великого кільця на дашборді.",{},"md",{},true,32,"\u002Fdocs\u002Fcomponents\u002Fprogress-ring",{"title":5,"description":137},"stable","docs\u002Fcomponents\u002Fprogress-ring","Av-Vbz1G4MAHXoypKBvWceoWowb-JctU1MnGrawMPMA",{"mode":149,"prefetch":150,"preload":150,"filePath":151,"declarationPath":152,"pascalName":135,"kebabName":153,"chunkName":154,"priority":155,"_scanned":141,"meta":156},"all",false,"app\u002Fcomponents\u002Fui\u002FUiProgressRing.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiProgressRing.vue","ui-progress-ring","components\u002Fui-progress-ring",1,{"type":155,"props":157,"slots":199,"events":211,"exposed":212,"hash":213},[158,162,167,172,176,187,191],{"name":20,"global":150,"default":31,"description":159,"tags":160,"required":150,"type":161,"schema":161},"Прогрес 0–max. `null` — невизначений стан (дуга обертається).",[],"number",{"name":163,"global":150,"default":164,"description":165,"tags":166,"required":150,"type":161,"schema":161},"size","48","Діаметр кільця в пікселях.",[],{"name":94,"global":150,"default":168,"description":169,"tags":170,"required":150,"type":171,"schema":171},"undefined","Доступна назва. Обов'язкова, якщо поруч немає видимого підпису.",[],"string",{"name":24,"global":150,"default":173,"description":174,"tags":175,"required":150,"type":161,"schema":161},"100","Максимум шкали.",[],{"name":27,"global":150,"default":177,"description":178,"tags":179,"required":150,"type":180,"schema":181},"\"accent\"","Колір дуги — ті самі тони, що в UiProgress: статусний тон, коли\nкільце саме є повідомленням (квота на 90% — `warning`).",[],"\"accent\" | \"success\" | \"warning\" | \"danger\"",{"kind":182,"type":180,"schema":183},"enum",{"0":177,"1":184,"2":185,"3":186},"\"success\"","\"warning\"","\"danger\"",{"name":188,"global":150,"default":168,"description":189,"tags":190,"required":150,"type":161,"schema":161},"thickness","Товщина кільця в пікселях. Типово — десята частина діаметра, але не\nтонше 3px: тонша дуга на 24px-індикаторі губиться.",[],{"name":105,"global":150,"default":192,"description":193,"tags":194,"required":150,"type":195,"schema":196},"false","Відсоток у центрі кільця. Від діаметра 40px — менше в кільце число\nне вміщається читабельним.",[],"boolean",{"kind":182,"type":195,"schema":197},{"0":192,"1":198},"true",[200],{"name":201,"type":202,"description":203,"tags":204,"schema":205},"default","{ percent: number; }","Власний вміст центру: іконка, «3\u002F5», короткий підпис.",[],{"kind":206,"type":202,"schema":207},"object",{"percent":208},{"name":209,"global":150,"description":128,"tags":210,"required":141,"type":161,"schema":161},"percent",[],[],[],"NKs6JahODezeE8h1cng5gq2kYZyIEnlW07vJuikcuqU",1792004323343]