[{"data":1,"prerenderedAt":492},["ShallowReactive",2],{"docs:meter":3,"demo:meter\u002Fhero":491},{"frontmatter":4,"meta":5,"nodes":6},{},{},[7,12,16,20,25,167,171,176,187,204,304,308,314,346,350,359,392,396,405,440,444,449],[8,9,11],"h1",{"id":10},"meter","Meter",[13,14,15],"p",{},"A gauge within a known range.",[17,18],"demo",{"name":19},"meter\u002Fhero",[21,22,24],"h2",{"id":23},"anatomy","Anatomy",[26,27,31],"pre",{"language":28,"meta":29,"class":30},"vue","title=\"Anatomy\"","shiki shiki-themes github-light github-dark dark:github-dark",[32,33,35,55,56,55,72,55,81,55,83,55,92,55,102,55,113,55,122,55,132,55,141,55,150,55,159],"code",{"class":34},"language-vue",[36,37,40,44,48,52],"span",{"class":38,"style":39},"line","display: inline",[36,41,43],{"style":42},"color:#24292E;--shiki-dark:#E1E4E8","\u003C",[36,45,47],{"style":46},"color:#22863A;--shiki-dark:#85E89D","script",[36,49,51],{"style":50},"color:#6F42C1;--shiki-dark:#B392F0"," setup",[36,53,54],{"style":42},">","\n",[36,57,58,62,65,68],{"class":38,"style":39},[36,59,61],{"style":60},"color:#D73A49;--shiki-dark:#F97583","import",[36,63,64],{"style":42}," { Meter } ",[36,66,67],{"style":60},"from",[36,69,71],{"style":70},"color:#032F62;--shiki-dark:#9ECBFF"," '@shardsui\u002Fvue\u002Fmeter'",[36,73,74,77,79],{"class":38,"style":39},[36,75,76],{"style":42},"\u003C\u002F",[36,78,47],{"style":46},[36,80,54],{"style":42},[36,82],{"class":38,"style":39},[36,84,85,87,90],{"class":38,"style":39},[36,86,43],{"style":42},[36,88,89],{"style":46},"template",[36,91,54],{"style":42},[36,93,94,97,100],{"class":38,"style":39},[36,95,96],{"style":42},"  \u003C",[36,98,99],{"style":46},"Meter.Root",[36,101,54],{"style":42},[36,103,104,107,110],{"class":38,"style":39},[36,105,106],{"style":42},"    \u003C",[36,108,109],{"style":46},"Meter.Label",[36,111,112],{"style":42}," \u002F>",[36,114,115,117,120],{"class":38,"style":39},[36,116,106],{"style":42},[36,118,119],{"style":46},"Meter.Track",[36,121,54],{"style":42},[36,123,124,127,130],{"class":38,"style":39},[36,125,126],{"style":42},"      \u003C",[36,128,129],{"style":46},"Meter.Indicator",[36,131,112],{"style":42},[36,133,134,137,139],{"class":38,"style":39},[36,135,136],{"style":42},"    \u003C\u002F",[36,138,119],{"style":46},[36,140,54],{"style":42},[36,142,143,145,148],{"class":38,"style":39},[36,144,106],{"style":42},[36,146,147],{"style":46},"Meter.Value",[36,149,112],{"style":42},[36,151,152,155,157],{"class":38,"style":39},[36,153,154],{"style":42},"  \u003C\u002F",[36,156,99],{"style":46},[36,158,54],{"style":42},[36,160,161,163,165],{"class":38,"style":39},[36,162,76],{"style":42},[36,164,89],{"style":46},[36,166,54],{"style":42},[21,168,170],{"id":169},"api-reference","API reference",[172,173,175],"h3",{"id":174},"api-reference-root","Root",[13,177,178,179,182,183,186],{},"Groups all parts of the meter and provides the value for screen readers.\nRenders a ",[32,180,181],{},"\u003Cdiv>"," element with ",[32,184,185],{},"role=\"meter\"",".",[13,188,189,191,192,194,195,197,198,201,202,186],{},[32,190,185],{}," requires an accessible name: render a ",[32,193,109],{}," inside ",[32,196,175],{},", or pass\n",[32,199,200],{},"aria-label"," to ",[32,203,175],{},[205,206],"table",{"columns":207,"rows":211},[208,209,210],"Prop","Type","Default",[212,224,235,244,254,264,274,284,294],{"summary":213,"detail":217},[214,215,216],"\u003Ccode>as\u003C\u002Fcode>","\u003Ccode>keyof HTMLElementTagNameMap\u003C\u002Fcode>","\u003Ccode>'div'\u003C\u002Fcode>",[218,219,220,221],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},"Description","HTML element to render.",{"summary":225,"detail":229},[226,227,228],"\u003Ccode>class\u003C\u002Fcode>","\u003Ccode>string\u003C\u002Fcode>","—",[230,231,232,233],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},"CSS class applied to the element.",{"summary":236,"detail":238},[237,227,228],"\u003Ccode>style\u003C\u002Fcode>",[239,240,241,242],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},"Inline style applied to the element.",{"summary":245,"detail":248},[246,247,228],"\u003Ccode>value\u003C\u002Fcode>","\u003Ccode>number\u003C\u002Fcode>",[249,250,251,252],{"label":208,"html":246},{"label":209,"html":247},{"label":210,"html":228},{"label":222,"html":253},"Required. The current value. Clamped to \u003Ccode>min\u003C\u002Fcode> and \u003Ccode>max\u003C\u002Fcode> for \u003Ccode>aria-valuenow\u003C\u002Fcode>, the indicator width and the displayed text.",{"summary":255,"detail":258},[256,257,228],"\u003Ccode>format\u003C\u002Fcode>","\u003Ccode>Intl.NumberFormatOptions\u003C\u002Fcode>",[259,260,261,262],{"label":208,"html":256},{"label":209,"html":257},{"label":210,"html":228},{"label":222,"html":263},"Options to format the value. Without it, the value is displayed as its percentage position in the range.",{"summary":265,"detail":268},[266,267,228],"\u003Ccode>locale\u003C\u002Fcode>","\u003Ccode>Intl.LocalesArgument\u003C\u002Fcode>",[269,270,271,272],{"label":208,"html":266},{"label":209,"html":267},{"label":210,"html":228},{"label":222,"html":273},"The locale used by \u003Ccode>Intl.NumberFormat\u003C\u002Fcode> when formatting the value. Defaults to the user's runtime locale.",{"summary":275,"detail":278},[276,247,277],"\u003Ccode>min\u003C\u002Fcode>","\u003Ccode>0\u003C\u002Fcode>",[279,280,281,282],{"label":208,"html":276},{"label":209,"html":247},{"label":210,"html":277},{"label":222,"html":283},"The minimum value.",{"summary":285,"detail":288},[286,247,287],"\u003Ccode>max\u003C\u002Fcode>","\u003Ccode>100\u003C\u002Fcode>",[289,290,291,292],{"label":208,"html":286},{"label":209,"html":247},{"label":210,"html":287},{"label":222,"html":293},"The maximum value.",{"summary":295,"detail":298},[296,297,228],"\u003Ccode>default\u003C\u002Fcode>","\u003Ccode>Slot\u003C\u002Fcode>",[299,300,301,302],{"label":208,"html":296},{"label":209,"html":297},{"label":210,"html":228},{"label":222,"html":303},"Content.",[172,305,307],{"id":306},"api-reference-track","Track",[13,309,310,311,313],{},"Contains the indicator and represents the entire range of the meter.\nRenders a ",[32,312,181],{}," element.",[205,315],{"columns":316,"rows":317},[208,209,210],[318,325,332,339],{"summary":319,"detail":320},[214,215,216],[321,322,323,324],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},{"summary":326,"detail":327},[226,227,228],[328,329,330,331],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":333,"detail":334},[237,227,228],[335,336,337,338],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":340,"detail":341},[296,297,228],[342,343,344,345],{"label":208,"html":296},{"label":209,"html":297},{"label":210,"html":228},{"label":222,"html":303},[172,347,349],{"id":348},"api-reference-indicator","Indicator",[13,351,352,353,356,357,313],{},"Visualizes the position of the value along the range. Its ",[32,354,355],{},"width"," is set inline, from the value's\npercentage position in the range.\nRenders a ",[32,358,181],{},[205,360],{"columns":361,"rows":362},[208,209,210],[363,370,377,385],{"summary":364,"detail":365},[214,215,216],[366,367,368,369],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":216},{"label":222,"html":223},{"summary":371,"detail":372},[226,227,228],[373,374,375,376],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":378,"detail":379},[237,227,228],[380,381,382,383],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":384},"Inline style applied to the element, after the built-in \u003Ccode>width\u003C\u002Fcode>.",{"summary":386,"detail":387},[296,297,228],[388,389,390,391],{"label":208,"html":296},{"label":209,"html":297},{"label":210,"html":228},{"label":222,"html":303},[172,393,395],{"id":394},"api-reference-value","Value",[13,397,398,399,401,402,313],{},"A text element displaying the current value. Hidden from screen readers, which read the value from\n",[32,400,175],{},".\nRenders a ",[32,403,404],{},"\u003Cspan>",[205,406],{"columns":407,"rows":408},[208,209,210],[409,417,424,431],{"summary":410,"detail":412},[214,215,411],"\u003Ccode>'span'\u003C\u002Fcode>",[413,414,415,416],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":411},{"label":222,"html":223},{"summary":418,"detail":419},[226,227,228],[420,421,422,423],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":425,"detail":426},[237,227,228],[427,428,429,430],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":432,"detail":434},[296,433,228],"\u003Ccode>Slot<{ formattedValue: string; value: number }>\u003C\u002Fcode>",[435,436,437,438],{"label":208,"html":296},{"label":209,"html":433},{"label":210,"html":228},{"label":222,"html":439},"Slot receiving the formatted value and the raw number. Defaults to the formatted value.",[172,441,443],{"id":442},"api-reference-label","Label",[13,445,446,447,313],{},"An accessible label for the meter.\nRenders a ",[32,448,404],{},[205,450],{"columns":451,"rows":452},[208,209,210],[453,460,467,474,484],{"summary":454,"detail":455},[214,215,411],[456,457,458,459],{"label":208,"html":214},{"label":209,"html":215},{"label":210,"html":411},{"label":222,"html":223},{"summary":461,"detail":462},[226,227,228],[463,464,465,466],{"label":208,"html":226},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":234},{"summary":468,"detail":469},[237,227,228],[470,471,472,473],{"label":208,"html":237},{"label":209,"html":227},{"label":210,"html":228},{"label":222,"html":243},{"summary":475,"detail":478},[476,227,477],"\u003Ccode>id\u003C\u002Fcode>","auto",[479,480,481,482],{"label":208,"html":476},{"label":209,"html":227},{"label":210,"html":477},{"label":222,"html":483},"Custom element ID. Associated with the meter via \u003Ccode>aria-labelledby\u003C\u002Fcode>.",{"summary":485,"detail":486},[296,297,228],[487,488,489,490],{"label":208,"html":296},{"label":209,"html":297},{"label":210,"html":228},{"label":222,"html":303},"\u003Cpre class=\"shiki shiki-themes github-light github-dark\" style=\"--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> setup\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> lang\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"ts\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">import\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> { Meter } \u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#D73A49;--shiki-dark:#F97583\">from\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\"> '@shardsui\u002Fvue\u002Fmeter'\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">script\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"grid w-60 max-w-full grid-cols-2 gap-y-2\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> :value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"50\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-sm font-normal text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>Daily goal<\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Label\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Value\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"text-right text-sm text-gray-900\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Track\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\">      class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"col-span-2 h-1 overflow-hidden rounded-sm bg-gray-50 inset-ring inset-ring-gray-200\"\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    >\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">      <\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Indicator\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#6F42C1;--shiki-dark:#B392F0\"> class\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">=\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#032F62;--shiki-dark:#9ECBFF\">\"bg-gray-500 transition-[width] duration-500\"\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"> \u002F>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">    <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Track\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">  <\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">Meter.Root\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\"><\u002F\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#22863A;--shiki-dark:#85E89D\">template\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#24292E;--shiki-dark:#E1E4E8\">>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>",1789390076469]