[{"data":1,"prerenderedAt":1697},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Frating":313,"\u002Fcomponents\u002Frating-surround":1692},[4,24,41,48,293,298,303,308],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":23},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles","i-lucide-rocket",{"title":25,"package":11,"icon":26,"path":27,"stem":28,"children":29,"page":40},"Packages","i-lucide-package","\u002Fpackages","2.packages",[30,35],{"title":31,"path":32,"stem":33,"package":11,"icon":34},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":36,"path":37,"stem":38,"package":11,"icon":39},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":42,"path":43,"stem":44,"children":45,"package":11,"icon":47},"CLI","\u002Fcli","3.cli\u002F1.index",[46],{"title":42,"path":43,"stem":44,"package":11,"icon":47},"i-lucide-terminal",{"title":49,"package":11,"icon":50,"path":51,"stem":52,"children":53},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[54,56,62,67,72,77,82,87,92,97,102,107,112,117,122,127,132,136,141,145,150,155,160,165,170,175,180,185,190,195,200,205,210,215,220,225,230,234,238,243,248,253,258,263,268,272,276,280,284,288],{"title":49,"path":51,"stem":55,"package":11,"icon":50},"3.components\u002Findex",{"title":57,"path":58,"stem":59,"package":60,"icon":61},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":63,"path":64,"stem":65,"package":60,"icon":66},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":68,"path":69,"stem":70,"package":60,"icon":71},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":73,"path":74,"stem":75,"package":76,"icon":71},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":78,"path":79,"stem":80,"package":60,"icon":81},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":83,"path":84,"stem":85,"package":60,"icon":86},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":88,"path":89,"stem":90,"package":60,"icon":91},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":93,"path":94,"stem":95,"package":60,"icon":96},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":98,"path":99,"stem":100,"package":60,"icon":101},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":103,"path":104,"stem":105,"package":60,"icon":106},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":108,"path":109,"stem":110,"package":60,"icon":111},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":113,"path":114,"stem":115,"package":76,"icon":116},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":118,"path":119,"stem":120,"package":76,"icon":121},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":123,"path":124,"stem":125,"package":76,"icon":126},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":128,"path":129,"stem":130,"package":60,"icon":131},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":133,"path":134,"stem":135,"package":76,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":137,"path":138,"stem":139,"package":60,"icon":140},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":142,"path":143,"stem":144,"package":60,"icon":66},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":146,"path":147,"stem":148,"package":60,"icon":149},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":151,"path":152,"stem":153,"package":60,"icon":154},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":156,"path":157,"stem":158,"package":60,"icon":159},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":161,"path":162,"stem":163,"package":60,"icon":164},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":166,"path":167,"stem":168,"package":60,"icon":169},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":171,"path":172,"stem":173,"package":76,"icon":174},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":176,"path":177,"stem":178,"package":60,"icon":179},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":181,"path":182,"stem":183,"package":76,"icon":184},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":186,"path":187,"stem":188,"package":60,"icon":189},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":191,"path":192,"stem":193,"package":60,"icon":194},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":196,"path":197,"stem":198,"package":60,"icon":199},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":201,"path":202,"stem":203,"package":60,"icon":204},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":206,"path":207,"stem":208,"package":60,"icon":209},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":211,"path":212,"stem":213,"package":60,"icon":214},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":216,"path":217,"stem":218,"package":76,"icon":219},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":221,"path":222,"stem":223,"package":60,"icon":224},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":226,"path":227,"stem":228,"package":60,"icon":229},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":231,"path":232,"stem":233,"package":76,"icon":66},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":235,"path":236,"stem":237,"package":60,"icon":154},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":239,"path":240,"stem":241,"package":60,"icon":242},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":244,"path":245,"stem":246,"package":60,"icon":247},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":249,"path":250,"stem":251,"package":60,"icon":252},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":254,"path":255,"stem":256,"package":60,"icon":257},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":259,"path":260,"stem":261,"package":60,"icon":262},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":264,"path":265,"stem":266,"package":60,"icon":267},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":269,"path":270,"stem":271,"package":60,"icon":154},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":273,"path":274,"stem":275,"package":60,"icon":140},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":277,"path":278,"stem":279,"package":60,"icon":199},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":281,"path":282,"stem":283,"package":60,"icon":267},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":285,"path":286,"stem":287,"package":60,"icon":154},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":289,"path":290,"stem":291,"package":60,"icon":292},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":294,"path":295,"stem":296,"package":11,"icon":297},"Theming","\u002Ftheming","4.theming","i-lucide-palette",{"title":299,"path":300,"stem":301,"package":11,"icon":302},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":304,"path":305,"stem":306,"package":11,"icon":307},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":309,"path":310,"stem":311,"package":11,"icon":312},"Roadmap","\u002Froadmap","7.roadmap","i-lucide-map",{"id":314,"title":211,"body":315,"description":1681,"extension":1531,"links":1682,"meta":1688,"navigation":1689,"package":60,"path":212,"seo":1690,"stem":213,"__hash__":1691},"docs\u002F3.components\u002Frating.md",{"type":316,"value":317,"toc":1661},"minimark",[318,323,338,343,347,527,541,546,552,763,769,773,780,839,846,850,857,925,937,941,946,988,991,995,1001,1081,1085,1137,1141,1321,1347,1356,1360,1390,1394,1417,1421,1430,1476,1480,1564,1574,1577,1588,1594,1597,1601,1631,1635,1657],[319,320,322],"h2",{"id":321},"overview","Overview",[324,325,326,330,331,333,334,337],"p",{},[327,328,329],"code",{},"VyRating"," is a styled integer rating control built on the ",[327,332,31],{}," rating primitives. It supports a configurable item count, semantic active color, four sizes, a custom Iconify glyph, disabled state, and controlled state through ",[327,335,336],{},"v-model",".",[339,340],"component-code",{"height":341,"name":342},"140px","rating-example",[319,344,346],{"id":345},"usage","Usage",[348,349,354],"pre",{"className":350,"code":351,"language":352,"meta":353,"style":353},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyRating } from '@vyui\u002Fkit'\n\nconst rating = ref(3)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVyRating v-model=\"rating\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[327,355,356,391,419,439,446,470,480,485,495,518],{"__ignoreMap":353},[357,358,361,365,369,373,376,379,382,386,388],"span",{"class":359,"line":360},"line",1,[357,362,364],{"class":363},"sMK4o","\u003C",[357,366,368],{"class":367},"swJcz","script",[357,370,372],{"class":371},"spNyl"," setup",[357,374,375],{"class":371}," lang",[357,377,378],{"class":363},"=",[357,380,381],{"class":363},"\"",[357,383,385],{"class":384},"sfazB","ts",[357,387,381],{"class":363},[357,389,390],{"class":363},">\n",[357,392,394,398,401,405,408,411,414,416],{"class":359,"line":393},2,[357,395,397],{"class":396},"s7zQu","import",[357,399,400],{"class":363}," {",[357,402,404],{"class":403},"sTEyZ"," ref",[357,406,407],{"class":363}," }",[357,409,410],{"class":396}," from",[357,412,413],{"class":363}," '",[357,415,352],{"class":384},[357,417,418],{"class":363},"'\n",[357,420,422,424,426,429,431,433,435,437],{"class":359,"line":421},3,[357,423,397],{"class":396},[357,425,400],{"class":363},[357,427,428],{"class":403}," VyRating",[357,430,407],{"class":363},[357,432,410],{"class":396},[357,434,413],{"class":363},[357,436,36],{"class":384},[357,438,418],{"class":363},[357,440,442],{"class":359,"line":441},4,[357,443,445],{"emptyLinePlaceholder":444},true,"\n",[357,447,449,452,455,457,460,463,467],{"class":359,"line":448},5,[357,450,451],{"class":371},"const",[357,453,454],{"class":403}," rating ",[357,456,378],{"class":363},[357,458,404],{"class":459},"s2Zo4",[357,461,462],{"class":403},"(",[357,464,466],{"class":465},"sbssI","3",[357,468,469],{"class":403},")\n",[357,471,473,476,478],{"class":359,"line":472},6,[357,474,475],{"class":363},"\u003C\u002F",[357,477,368],{"class":367},[357,479,390],{"class":363},[357,481,483],{"class":359,"line":482},7,[357,484,445],{"emptyLinePlaceholder":444},[357,486,488,490,493],{"class":359,"line":487},8,[357,489,364],{"class":363},[357,491,492],{"class":367},"template",[357,494,390],{"class":363},[357,496,498,501,503,506,508,510,513,515],{"class":359,"line":497},9,[357,499,500],{"class":363},"  \u003C",[357,502,329],{"class":367},[357,504,505],{"class":371}," v-model",[357,507,378],{"class":363},[357,509,381],{"class":363},[357,511,512],{"class":384},"rating",[357,514,381],{"class":363},[357,516,517],{"class":363}," \u002F>\n",[357,519,521,523,525],{"class":359,"line":520},10,[357,522,475],{"class":363},[357,524,492],{"class":367},[357,526,390],{"class":363},[324,528,529,530,533,534,537,538,540],{},"The bound value is a number from ",[327,531,532],{},"0"," through ",[327,535,536],{},"count",". A value of ",[327,539,532],{}," leaves every item inactive.",[542,543,545],"h3",{"id":544},"item-count","Item count",[324,547,548,549,551],{},"Use ",[327,550,536],{}," to change the number of rendered choices.",[348,553,555],{"className":350,"code":554,"language":352,"meta":353,"style":353},"\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VyRating } from '@vyui\u002Fkit'\n\nconst difficulty = ref(2)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cview class=\"gap-2\">\n    \u003Ctext class=\"text-sm font-medium text-neutral-900\">\n      Difficulty: {{ difficulty }} of 3\n    \u003C\u002Ftext>\n    \u003CVyRating v-model=\"difficulty\" :count=\"3\" \u002F>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n",[327,556,557,577,595,613,617,635,643,647,655,676,697,703,713,744,754],{"__ignoreMap":353},[357,558,559,561,563,565,567,569,571,573,575],{"class":359,"line":360},[357,560,364],{"class":363},[357,562,368],{"class":367},[357,564,372],{"class":371},[357,566,375],{"class":371},[357,568,378],{"class":363},[357,570,381],{"class":363},[357,572,385],{"class":384},[357,574,381],{"class":363},[357,576,390],{"class":363},[357,578,579,581,583,585,587,589,591,593],{"class":359,"line":393},[357,580,397],{"class":396},[357,582,400],{"class":363},[357,584,404],{"class":403},[357,586,407],{"class":363},[357,588,410],{"class":396},[357,590,413],{"class":363},[357,592,352],{"class":384},[357,594,418],{"class":363},[357,596,597,599,601,603,605,607,609,611],{"class":359,"line":421},[357,598,397],{"class":396},[357,600,400],{"class":363},[357,602,428],{"class":403},[357,604,407],{"class":363},[357,606,410],{"class":396},[357,608,413],{"class":363},[357,610,36],{"class":384},[357,612,418],{"class":363},[357,614,615],{"class":359,"line":441},[357,616,445],{"emptyLinePlaceholder":444},[357,618,619,621,624,626,628,630,633],{"class":359,"line":448},[357,620,451],{"class":371},[357,622,623],{"class":403}," difficulty ",[357,625,378],{"class":363},[357,627,404],{"class":459},[357,629,462],{"class":403},[357,631,632],{"class":465},"2",[357,634,469],{"class":403},[357,636,637,639,641],{"class":359,"line":472},[357,638,475],{"class":363},[357,640,368],{"class":367},[357,642,390],{"class":363},[357,644,645],{"class":359,"line":482},[357,646,445],{"emptyLinePlaceholder":444},[357,648,649,651,653],{"class":359,"line":487},[357,650,364],{"class":363},[357,652,492],{"class":367},[357,654,390],{"class":363},[357,656,657,659,662,665,667,669,672,674],{"class":359,"line":497},[357,658,500],{"class":363},[357,660,661],{"class":367},"view",[357,663,664],{"class":371}," class",[357,666,378],{"class":363},[357,668,381],{"class":363},[357,670,671],{"class":384},"gap-2",[357,673,381],{"class":363},[357,675,390],{"class":363},[357,677,678,681,684,686,688,690,693,695],{"class":359,"line":520},[357,679,680],{"class":363},"    \u003C",[357,682,683],{"class":367},"text",[357,685,664],{"class":371},[357,687,378],{"class":363},[357,689,381],{"class":363},[357,691,692],{"class":384},"text-sm font-medium text-neutral-900",[357,694,381],{"class":363},[357,696,390],{"class":363},[357,698,700],{"class":359,"line":699},11,[357,701,702],{"class":403},"      Difficulty: {{ difficulty }} of 3\n",[357,704,706,709,711],{"class":359,"line":705},12,[357,707,708],{"class":363},"    \u003C\u002F",[357,710,683],{"class":367},[357,712,390],{"class":363},[357,714,716,718,720,722,724,726,729,731,734,736,738,740,742],{"class":359,"line":715},13,[357,717,680],{"class":363},[357,719,329],{"class":367},[357,721,505],{"class":371},[357,723,378],{"class":363},[357,725,381],{"class":363},[357,727,728],{"class":384},"difficulty",[357,730,381],{"class":363},[357,732,733],{"class":371}," :count",[357,735,378],{"class":363},[357,737,381],{"class":363},[357,739,466],{"class":384},[357,741,381],{"class":363},[357,743,517],{"class":363},[357,745,747,750,752],{"class":359,"line":746},14,[357,748,749],{"class":363},"  \u003C\u002F",[357,751,661],{"class":367},[357,753,390],{"class":363},[357,755,757,759,761],{"class":359,"line":756},15,[357,758,475],{"class":363},[357,760,492],{"class":367},[357,762,390],{"class":363},[324,764,765,766,768],{},"Keep the model within the new range when changing ",[327,767,536],{}," dynamically. The component does not clamp an existing value when the count decreases.",[542,770,772],{"id":771},"color-and-size","Color and size",[324,774,775,776,779],{},"Use a semantic ",[327,777,778],{},"color"," and one of four sizes to fit the surrounding interface.",[348,781,783],{"className":350,"code":782,"language":352,"meta":353,"style":353},"\u003CVyRating\n  v-model=\"rating\"\n  color=\"success\"\n  size=\"lg\"\n\u002F>\n",[327,784,785,792,806,820,834],{"__ignoreMap":353},[357,786,787,789],{"class":359,"line":360},[357,788,364],{"class":363},[357,790,791],{"class":367},"VyRating\n",[357,793,794,797,799,801,803],{"class":359,"line":393},[357,795,796],{"class":371},"  v-model",[357,798,378],{"class":363},[357,800,381],{"class":363},[357,802,512],{"class":403},[357,804,805],{"class":363},"\"\n",[357,807,808,811,813,815,818],{"class":359,"line":421},[357,809,810],{"class":371},"  color",[357,812,378],{"class":363},[357,814,381],{"class":363},[357,816,817],{"class":384},"success",[357,819,805],{"class":363},[357,821,822,825,827,829,832],{"class":359,"line":441},[357,823,824],{"class":371},"  size",[357,826,378],{"class":363},[357,828,381],{"class":363},[357,830,831],{"class":384},"lg",[357,833,805],{"class":363},[357,835,836],{"class":359,"line":448},[357,837,838],{"class":403},"\u002F>\n",[324,840,841,842,845],{},"The default active color is ",[327,843,844],{},"warning","; inactive icons use the neutral theme color.",[542,847,849],{"id":848},"custom-icon","Custom icon",[324,851,852,853,856],{},"Set ",[327,854,855],{},"icon"," to any Iconify name. The icon changes for every rating item.",[348,858,860],{"className":350,"code":859,"language":352,"meta":353,"style":353},"\u003CVyRating\n  v-model=\"satisfaction\"\n  icon=\"i-lucide-heart\"\n  color=\"error\"\n  size=\"xl\"\n\u002F>\n",[327,861,862,868,881,895,908,921],{"__ignoreMap":353},[357,863,864,866],{"class":359,"line":360},[357,865,364],{"class":363},[357,867,791],{"class":367},[357,869,870,872,874,876,879],{"class":359,"line":393},[357,871,796],{"class":371},[357,873,378],{"class":363},[357,875,381],{"class":363},[357,877,878],{"class":403},"satisfaction",[357,880,805],{"class":363},[357,882,883,886,888,890,893],{"class":359,"line":421},[357,884,885],{"class":371},"  icon",[357,887,378],{"class":363},[357,889,381],{"class":363},[357,891,892],{"class":384},"i-lucide-heart",[357,894,805],{"class":363},[357,896,897,899,901,903,906],{"class":359,"line":441},[357,898,810],{"class":371},[357,900,378],{"class":363},[357,902,381],{"class":363},[357,904,905],{"class":384},"error",[357,907,805],{"class":363},[357,909,910,912,914,916,919],{"class":359,"line":448},[357,911,824],{"class":371},[357,913,378],{"class":363},[357,915,381],{"class":363},[357,917,918],{"class":384},"xl",[357,920,805],{"class":363},[357,922,923],{"class":359,"line":472},[357,924,838],{"class":403},[324,926,927,928,930,931,934,935,337],{},"When ",[327,929,855],{}," is omitted, the component resolves ",[327,932,933],{},"appConfig.ui.icons.star"," and then falls back to ",[327,936,214],{},[542,938,940],{"id":939},"disabled","Disabled",[324,942,548,943,945],{},[327,944,939],{}," for a read-only score display that keeps the same visual treatment.",[348,947,949],{"className":350,"code":948,"language":352,"meta":353,"style":353},"\u003Cview class=\"flex flex-row items-center gap-2\">\n  \u003CVyRating :model-value=\"4\" disabled \u002F>\n  \u003Ctext class=\"text-sm text-neutral-500\">4 out of 5\u003C\u002Ftext>\n\u003C\u002Fview>\n",[327,950,951,970,975,980],{"__ignoreMap":353},[357,952,953,955,957,959,961,963,966,968],{"class":359,"line":360},[357,954,364],{"class":363},[357,956,661],{"class":367},[357,958,664],{"class":371},[357,960,378],{"class":363},[357,962,381],{"class":363},[357,964,965],{"class":384},"flex flex-row items-center gap-2",[357,967,381],{"class":363},[357,969,390],{"class":363},[357,971,972],{"class":359,"line":393},[357,973,974],{"class":403},"  \u003CVyRating :model-value=\"4\" disabled \u002F>\n",[357,976,977],{"class":359,"line":421},[357,978,979],{"class":403},"  \u003Ctext class=\"text-sm text-neutral-500\">4 out of 5\u003C\u002Ftext>\n",[357,981,982,984,986],{"class":359,"line":441},[357,983,475],{"class":363},[357,985,661],{"class":367},[357,987,390],{"class":363},[324,989,990],{},"A disabled rating blocks taps and dims each item.",[542,992,994],{"id":993},"local-theme-overrides","Local theme overrides",[324,996,548,997,1000],{},[327,998,999],{},"ui"," to customize the root, item wrapper, or icon.",[348,1002,1004],{"className":350,"code":1003,"language":352,"meta":353,"style":353},"\u003CVyRating\n  v-model=\"rating\"\n  :ui=\"{\n    root: 'gap-2',\n    icon: 'text-neutral-200 ui-active:text-secondary-500'\n  }\"\n\u002F>\n",[327,1005,1006,1012,1024,1038,1056,1070,1077],{"__ignoreMap":353},[357,1007,1008,1010],{"class":359,"line":360},[357,1009,364],{"class":363},[357,1011,791],{"class":367},[357,1013,1014,1016,1018,1020,1022],{"class":359,"line":393},[357,1015,796],{"class":371},[357,1017,378],{"class":363},[357,1019,381],{"class":363},[357,1021,512],{"class":403},[357,1023,805],{"class":363},[357,1025,1026,1029,1031,1033,1035],{"class":359,"line":421},[357,1027,1028],{"class":363},"  :",[357,1030,999],{"class":371},[357,1032,378],{"class":363},[357,1034,381],{"class":363},[357,1036,1037],{"class":363},"{\n",[357,1039,1040,1043,1046,1048,1050,1053],{"class":359,"line":441},[357,1041,1042],{"class":367},"    root",[357,1044,1045],{"class":363},":",[357,1047,413],{"class":363},[357,1049,671],{"class":384},[357,1051,1052],{"class":363},"'",[357,1054,1055],{"class":363},",\n",[357,1057,1058,1061,1063,1065,1068],{"class":359,"line":448},[357,1059,1060],{"class":367},"    icon",[357,1062,1045],{"class":363},[357,1064,413],{"class":363},[357,1066,1067],{"class":384},"text-neutral-200 ui-active:text-secondary-500",[357,1069,418],{"class":363},[357,1071,1072,1075],{"class":359,"line":472},[357,1073,1074],{"class":363},"  }",[357,1076,805],{"class":363},[357,1078,1079],{"class":359,"line":482},[357,1080,838],{"class":403},[319,1082,1084],{"id":1083},"features-and-behavior","Features and behavior",[1086,1087,1088,1096,1108,1111,1114,1119,1124,1127],"ul",{},[1089,1090,1091,1093,1094,337],"li",{},[327,1092,336],{}," controls the selected integer value and defaults to ",[327,1095,532],{},[1089,1097,1098,1099,1101,1102,533,1105,1107],{},"The component renders ",[327,1100,536],{}," items numbered from ",[327,1103,1104],{},"1",[327,1106,536],{},"; tapping an item emits that number.",[1089,1109,1110],{},"Every item at or below the selected value receives active styling.",[1089,1112,1113],{},"Tapping the current value again does not clear it.",[1089,1115,1116,1118],{},[327,1117,939],{}," prevents updates and applies reduced opacity to each item wrapper.",[1089,1120,1121,1123],{},[327,1122,855],{}," is resolved once and used for every item.",[1089,1125,1126],{},"The kit wrapper fixes the core rating granularity to whole items and lays them out horizontally.",[1089,1128,1129,1130,1133,1134,1136],{},"Fractional steps, uncontrolled ",[327,1131,1132],{},"defaultValue",", clear-on-repeat, hover previews, and vertical orientation are available only through the lower-level ",[327,1135,31],{}," rating primitives.",[319,1138,1140],{"id":1139},"props","Props",[1142,1143,1144,1163],"table",{},[1145,1146,1147],"thead",{},[1148,1149,1150,1154,1157,1160],"tr",{},[1151,1152,1153],"th",{},"Prop",[1151,1155,1156],{},"Type",[1151,1158,1159],{},"Default",[1151,1161,1162],{},"Description",[1164,1165,1166,1188,1206,1225,1244,1264,1283,1303],"tbody",{},[1148,1167,1168,1174,1179,1183],{},[1169,1170,1171],"td",{},[327,1172,1173],{},"modelValue",[1169,1175,1176],{},[327,1177,1178],{},"number",[1169,1180,1181],{},[327,1182,532],{},[1169,1184,1185,1186,337],{},"Controlled integer score used by ",[327,1187,336],{},[1148,1189,1190,1194,1198,1203],{},[1169,1191,1192],{},[327,1193,536],{},[1169,1195,1196],{},[327,1197,1178],{},[1169,1199,1200],{},[327,1201,1202],{},"5",[1169,1204,1205],{},"Number of rating items rendered.",[1148,1207,1208,1212,1217,1222],{},[1169,1209,1210],{},[327,1211,939],{},[1169,1213,1214],{},[327,1215,1216],{},"boolean",[1169,1218,1219],{},[327,1220,1221],{},"false",[1169,1223,1224],{},"Prevents interaction and dims the items.",[1148,1226,1227,1231,1236,1241],{},[1169,1228,1229],{},[327,1230,778],{},[1169,1232,1233],{},[327,1234,1235],{},"Color",[1169,1237,1238],{},[327,1239,1240],{},"'warning'",[1169,1242,1243],{},"Semantic color applied to active icons.",[1148,1245,1246,1251,1256,1261],{},[1169,1247,1248],{},[327,1249,1250],{},"size",[1169,1252,1253],{},[327,1254,1255],{},"'sm' | 'md' | 'lg' | 'xl'",[1169,1257,1258],{},[327,1259,1260],{},"'md'",[1169,1262,1263],{},"Icon dimensions.",[1148,1265,1266,1270,1275,1280],{},[1169,1267,1268],{},[327,1269,855],{},[1169,1271,1272],{},[327,1273,1274],{},"string",[1169,1276,1277,1278],{},"App star icon \u002F ",[327,1279,214],{},[1169,1281,1282],{},"Iconify name rendered for every item.",[1148,1284,1285,1290,1295,1300],{},[1169,1286,1287],{},[327,1288,1289],{},"class",[1169,1291,1292],{},[327,1293,1294],{},"any",[1169,1296,1297],{},[327,1298,1299],{},"undefined",[1169,1301,1302],{},"Classes merged onto the rating root.",[1148,1304,1305,1309,1314,1318],{},[1169,1306,1307],{},[327,1308,999],{},[1169,1310,1311],{},[327,1312,1313],{},"Partial\u003CRecord\u003CRatingSlot, any>>",[1169,1315,1316],{},[327,1317,1299],{},[1169,1319,1320],{},"Per-instance theme slot overrides.",[324,1322,1323,1325,1326,1329,1330,1329,1333,1329,1335,1329,1338,1329,1340,1342,1343,1346],{},[327,1324,1235],{}," defaults to ",[327,1327,1328],{},"primary",", ",[327,1331,1332],{},"secondary",[327,1334,817],{},[327,1336,1337],{},"info",[327,1339,844],{},[327,1341,905],{},", or ",[327,1344,1345],{},"neutral",", and supports consumer registry extensions.",[324,1348,1349,1351,1352,1355],{},[327,1350,536],{}," is passed directly to the render loop and core ",[327,1353,1354],{},"length"," prop. Use a positive integer; the kit component does not validate or normalize invalid counts.",[319,1357,1359],{"id":1358},"emits","Emits",[1142,1361,1362,1374],{},[1145,1363,1364],{},[1148,1365,1366,1369,1372],{},[1151,1367,1368],{},"Event",[1151,1370,1371],{},"Payload",[1151,1373,1162],{},[1164,1375,1376],{},[1148,1377,1378,1383,1387],{},[1169,1379,1380],{},[327,1381,1382],{},"update:modelValue",[1169,1384,1385],{},[327,1386,1178],{},[1169,1388,1389],{},"Emitted with the tapped item's one-based value.",[319,1391,1393],{"id":1392},"slots","Slots",[324,1395,1396,1397,1399,1400,1402,1403,1329,1406,1409,1410,1413,1414,1416],{},"This kit component does not expose slots. Use ",[327,1398,855],{}," and ",[327,1401,999],{}," for visual customization, or compose ",[327,1404,1405],{},"RatingRoot",[327,1407,1408],{},"RatingItem",", and ",[327,1411,1412],{},"RatingItemIndicator"," from ",[327,1415,31],{}," when custom item markup or fractional steps are required.",[319,1418,1420],{"id":1419},"styling-and-theming","Styling and theming",[324,1422,1423,1424,1427,1428,337],{},"Override globally through ",[327,1425,1426],{},"appConfig.ui.rating"," or locally with ",[327,1429,999],{},[1142,1431,1432,1442],{},[1145,1433,1434],{},[1148,1435,1436,1439],{},[1151,1437,1438],{},"UI slot",[1151,1440,1441],{},"Purpose",[1164,1443,1444,1457,1467],{},[1148,1445,1446,1451],{},[1169,1447,1448],{},[327,1449,1450],{},"root",[1169,1452,1453,1454,1456],{},"Horizontal rating layout and spacing. The ",[327,1455,1289],{}," prop is also merged here.",[1148,1458,1459,1464],{},[1169,1460,1461],{},[327,1462,1463],{},"base",[1169,1465,1466],{},"Wrapper around one rating item, including disabled opacity.",[1148,1468,1469,1473],{},[1169,1470,1471],{},[327,1472,855],{},[1169,1474,1475],{},"Shared inactive color, active color, and dimensions of every glyph.",[542,1477,1479],{"id":1478},"theme-variants","Theme variants",[1142,1481,1482,1497],{},[1145,1483,1484],{},[1148,1485,1486,1489,1492,1494],{},[1151,1487,1488],{},"Variant",[1151,1490,1491],{},"Values",[1151,1493,1159],{},[1151,1495,1496],{},"Effect",[1164,1498,1499,1518,1543],{},[1148,1500,1501,1505,1508,1512],{},[1169,1502,1503],{},[327,1504,778],{},[1169,1506,1507],{},"Registered semantic colors",[1169,1509,1510],{},[327,1511,1240],{},[1169,1513,1514,1515,337],{},"Colors icons whose core indicator has ",[327,1516,1517],{},"data-state=\"active\"",[1148,1519,1520,1524,1536,1540],{},[1169,1521,1522],{},[327,1523,1250],{},[1169,1525,1526,1329,1529,1329,1532,1329,1534],{},[327,1527,1528],{},"sm",[327,1530,1531],{},"md",[327,1533,831],{},[327,1535,918],{},[1169,1537,1538],{},[327,1539,1260],{},[1169,1541,1542],{},"Sets icon size from 20px through 32px.",[1148,1544,1545,1549,1556,1561],{},[1169,1546,1547],{},[327,1548,939],{},[1169,1550,1551,1329,1554],{},[327,1552,1553],{},"true",[327,1555,1221],{},[1169,1557,1558,1559],{},"From ",[327,1560,939],{},[1169,1562,1563],{},"Reduces item opacity and applies a non-interactive cursor class.",[324,1565,1566,1567,1570,1571,337],{},"The default root is a horizontal flex row with a small gap. Icons start at ",[327,1568,1569],{},"text-neutral-300","; the active state uses the selected semantic color at shade ",[327,1572,1573],{},"500",[319,1575,299],{"id":1576},"accessibility",[324,1578,1579,1580,1583,1584,1587],{},"Each core rating indicator is exposed as an accessibility element with option semantics mapped to a native button trait. It announces ",[327,1581,1582],{},"selected"," or ",[327,1585,1586],{},"unselected",", and disabled indicators receive the disabled trait.",[324,1589,1590,1591,1593],{},"The kit wrapper does not currently assign an accessible name to the individual icon controls and does not forward arbitrary attributes or per-item accessibility labels. Nearby visible text such as “Rate this product” does not automatically label those controls. Treat this as a current accessibility limitation: test with VoiceOver and TalkBack, and use the ",[327,1592,31],{}," primitives when each choice must announce a label such as “3 out of 5 stars.”",[324,1595,1596],{},"Do not rely on color alone when displaying an existing score. Pair the rating with visible numeric text when the exact value matters.",[319,1598,1600],{"id":1599},"platform-notes","Platform notes",[1086,1602,1603,1613,1622,1625,1628],{},[1089,1604,1605,1606,1608,1609,1612],{},"The component uses Lynx ",[327,1607,661],{}," nodes and native ",[327,1610,1611],{},"tap"," events rather than DOM radio inputs or buttons.",[1089,1614,1615,1616,1399,1618,1621],{},"Active styling is driven by the core indicator's ",[327,1617,1517],{},[327,1619,1620],{},"ui-active"," markers.",[1089,1623,1624],{},"The kit wrapper renders one indicator per item, so fractional and partial-fill ratings require direct use of the core primitives.",[1089,1626,1627],{},"The default theme is light-mode oriented and does not include DOM hover or focus-ring styles.",[1089,1629,1630],{},"A rating is not a native form input and does not submit a value by itself.",[319,1632,1634],{"id":1633},"related-components","Related components",[1086,1636,1637,1645,1652],{},[1089,1638,1639,1644],{},[1640,1641,1642],"a",{"href":207},[327,1643,206],{}," for a single choice with visible labels and descriptions.",[1089,1646,1647,1651],{},[1640,1648,1649],{"href":240},[327,1650,239],{}," for selecting a value from a larger numeric range.",[1089,1653,1654,1656],{},[327,1655,133],{}," for rendering a non-interactive score display.",[1658,1659,1660],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":353,"searchDepth":360,"depth":393,"links":1662},[1663,1664,1671,1672,1673,1674,1675,1678,1679,1680],{"id":321,"depth":393,"text":322},{"id":345,"depth":393,"text":346,"children":1665},[1666,1667,1668,1669,1670],{"id":544,"depth":421,"text":545},{"id":771,"depth":421,"text":772},{"id":848,"depth":421,"text":849},{"id":939,"depth":421,"text":940},{"id":993,"depth":421,"text":994},{"id":1083,"depth":393,"text":1084},{"id":1139,"depth":393,"text":1140},{"id":1358,"depth":393,"text":1359},{"id":1392,"depth":393,"text":1393},{"id":1419,"depth":393,"text":1420,"children":1676},[1677],{"id":1478,"depth":421,"text":1479},{"id":1576,"depth":393,"text":299},{"id":1599,"depth":393,"text":1600},{"id":1633,"depth":393,"text":1634},"Capture an integer score with a row of tappable icons.",[1683],{"label":1684,"icon":1685,"to":1686,"target":1687},"Source","i-simple-icons-github","https:\u002F\u002Fgithub.com\u002FKealanAU\u002Fvyui\u002Fblob\u002Fmain\u002Fpackages\u002Fkit\u002Fsrc\u002Fcomponents\u002FRating.vue","_blank",{},{"icon":214},{"title":211,"description":1681},"BUVofdDcgkn9wFOMR-kYxo_CoYrbueYBFnts12PrDuI",[1693,1695],{"title":206,"path":207,"stem":208,"description":1694,"icon":-1,"children":-1,"navigation":-1},"Choose one value from a visible set of labeled options.",{"title":216,"path":217,"stem":218,"description":1696,"icon":-1,"children":-1,"navigation":-1},"Headless scroll container primitive with edge thresholds and an optional main-thread bounce\u002Foverscroll system.",1783464069588]