[{"data":1,"prerenderedAt":1340},["ShallowReactive",2],{"section-redirect:navigation":3,"navigation_docs":337,"-components-progress-bar":430,"-components-progress-bar-surround":698,"component-example-progressBarBasicExample":703,"component-example-progressBarCustomUnitsAndErrorExample":706,"component-meta-MtProgressBar":709,"component-example-ast-progressBarBasicExample":762,"component-example-ast-progressBarCustomUnitsAndErrorExample":1044},[4,110,290],{"title":5,"path":6,"stem":7,"children":8,"page":34},"Documentation","\u002Fdocumentation","1.documentation",[9,35,56,89],{"title":10,"path":11,"stem":12,"children":13,"page":34},"Getting Started","\u002Fdocumentation\u002Fgetting-started","1.documentation\u002F1.getting-started",[14,18,22,26,30],{"title":15,"path":16,"stem":17},"Installation","\u002Fdocumentation\u002Fgetting-started\u002Finstallation","1.documentation\u002F1.getting-started\u002F1.installation",{"title":19,"path":20,"stem":21},"Agents","\u002Fdocumentation\u002Fgetting-started\u002Fagents","1.documentation\u002F1.getting-started\u002F2.agents",{"title":23,"path":24,"stem":25},"Migration","\u002Fdocumentation\u002Fgetting-started\u002Fmigration","1.documentation\u002F1.getting-started\u002F3.migration",{"title":27,"path":28,"stem":29},"Contributing","\u002Fdocumentation\u002Fgetting-started\u002Fcontributing","1.documentation\u002F1.getting-started\u002F4.contributing",{"title":31,"path":32,"stem":33},"What's new","\u002Fdocumentation\u002Fgetting-started\u002Fwhats-new","1.documentation\u002F1.getting-started\u002F5.whats-new",false,{"title":36,"path":37,"stem":38,"children":39,"page":34},"Guidelines","\u002Fdocumentation\u002Fguidelines","1.documentation\u002F2.guidelines",[40,44,48,52],{"title":41,"path":42,"stem":43},"Design Principles","\u002Fdocumentation\u002Fguidelines\u002Fdesign-principles","1.documentation\u002F2.guidelines\u002F1.design-principles",{"title":45,"path":46,"stem":47},"Accessibility","\u002Fdocumentation\u002Fguidelines\u002Faccessibility","1.documentation\u002F2.guidelines\u002F2.accessibility",{"title":49,"path":50,"stem":51},"Interactions","\u002Fdocumentation\u002Fguidelines\u002Finteractions","1.documentation\u002F2.guidelines\u002F3.interactions",{"title":53,"path":54,"stem":55},"Components","\u002Fdocumentation\u002Fguidelines\u002Fcomponents","1.documentation\u002F2.guidelines\u002F4.components",{"title":57,"path":58,"stem":59,"children":60,"page":34},"Design","\u002Fdocumentation\u002Fdesign","1.documentation\u002F3.design",[61,65,69,73,77,81,85],{"title":62,"path":63,"stem":64},"Tokens","\u002Fdocumentation\u002Fdesign\u002Ftokens","1.documentation\u002F3.design\u002F1.tokens",{"title":66,"path":67,"stem":68},"Color Palette","\u002Fdocumentation\u002Fdesign\u002Fcolor-palette","1.documentation\u002F3.design\u002F2.color-palette",{"title":70,"path":71,"stem":72},"Elevation","\u002Fdocumentation\u002Fdesign\u002Felevation","1.documentation\u002F3.design\u002F3.elevation",{"title":74,"path":75,"stem":76},"Spacing","\u002Fdocumentation\u002Fdesign\u002Fspacing","1.documentation\u002F3.design\u002F4.spacing",{"title":78,"path":79,"stem":80},"Border Radius","\u002Fdocumentation\u002Fdesign\u002Fborder-radius","1.documentation\u002F3.design\u002F5.border-radius",{"title":82,"path":83,"stem":84},"Typography","\u002Fdocumentation\u002Fdesign\u002Ftypography","1.documentation\u002F3.design\u002F6.typography",{"title":86,"path":87,"stem":88},"Icons","\u002Fdocumentation\u002Fdesign\u002Ficons","1.documentation\u002F3.design\u002F7.icons",{"title":90,"path":91,"stem":92,"children":93,"page":34},"Content","\u002Fdocumentation\u002Fcontent","1.documentation\u002F4.content",[94,98,102,106],{"title":95,"path":96,"stem":97},"Wording","\u002Fdocumentation\u002Fcontent\u002Fwording","1.documentation\u002F4.content\u002F1.wording",{"title":99,"path":100,"stem":101},"Messaging","\u002Fdocumentation\u002Fcontent\u002Fmessaging","1.documentation\u002F4.content\u002F2.messaging",{"title":103,"path":104,"stem":105},"Glossary","\u002Fdocumentation\u002Fcontent\u002Fglossary","1.documentation\u002F4.content\u002F3.glossary",{"title":107,"path":108,"stem":109},"Artificial Intelligence","\u002Fdocumentation\u002Fcontent\u002Fartificial-intelligence","1.documentation\u002F4.content\u002F4.artificial-intelligence",{"title":53,"path":111,"stem":112,"children":113,"page":34},"\u002Fcomponents","2.components",[114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286],{"title":115,"path":116,"stem":117},"Action Menu","\u002Fcomponents\u002Faction-menu","2.components\u002Faction-menu",{"title":119,"path":120,"stem":121},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar",{"title":123,"path":124,"stem":125},"Badge","\u002Fcomponents\u002Fbadge","2.components\u002Fbadge",{"title":127,"path":128,"stem":129},"Banner","\u002Fcomponents\u002Fbanner","2.components\u002Fbanner",{"title":131,"path":132,"stem":133},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton",{"title":135,"path":136,"stem":137},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":139,"path":140,"stem":141},"Chart","\u002Fcomponents\u002Fchart","2.components\u002Fchart",{"title":143,"path":144,"stem":145},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox",{"title":147,"path":148,"stem":149},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible",{"title":151,"path":152,"stem":153},"Colorpicker","\u002Fcomponents\u002Fcolorpicker","2.components\u002Fcolorpicker",{"title":155,"path":156,"stem":157},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table",{"title":159,"path":160,"stem":161},"Datepicker","\u002Fcomponents\u002Fdatepicker","2.components\u002Fdatepicker",{"title":163,"path":164,"stem":165},"Email Field","\u002Fcomponents\u002Femail-field","2.components\u002Femail-field",{"title":167,"path":168,"stem":169},"Empty State","\u002Fcomponents\u002Fempty-state","2.components\u002Fempty-state",{"title":171,"path":172,"stem":173},"Entity Data Table","\u002Fcomponents\u002Fentity-data-table","2.components\u002Fentity-data-table",{"title":175,"path":176,"stem":177},"Entity Select","\u002Fcomponents\u002Fentity-select","2.components\u002Fentity-select",{"title":179,"path":180,"stem":181},"Floating UI","\u002Fcomponents\u002Ffloating-ui","2.components\u002Ffloating-ui",{"title":183,"path":184,"stem":185},"Help Text","\u002Fcomponents\u002Fhelp-text","2.components\u002Fhelp-text",{"title":187,"path":188,"stem":189},"Icon","\u002Fcomponents\u002Ficon","2.components\u002Ficon",{"title":191,"path":192,"stem":193},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":195,"path":196,"stem":197},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":199,"path":200,"stem":201},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":203,"path":204,"stem":205},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":207,"path":208,"stem":209},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":211,"path":212,"stem":213},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":215,"path":216,"stem":217},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":219,"path":220,"stem":221},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":223,"path":224,"stem":225},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":227,"path":228,"stem":229},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":231,"path":232,"stem":233},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":235,"path":236,"stem":237},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":239,"path":240,"stem":241},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":243,"path":244,"stem":245},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":247,"path":248,"stem":249},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"title":251,"path":252,"stem":253},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":255,"path":256,"stem":257},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":259,"path":260,"stem":261},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":263,"path":264,"stem":265},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":267,"path":268,"stem":269},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":271,"path":272,"stem":273},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":275,"path":276,"stem":277},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":279,"path":280,"stem":281},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":283,"path":284,"stem":285},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":287,"path":288,"stem":289},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":291,"path":292,"stem":293,"children":294,"page":34},"Utilities","\u002Futilities","3.utilities",[295,307,320,328],{"title":53,"path":296,"stem":297,"children":298,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[299,303],{"title":300,"path":301,"stem":302},"Inset","\u002Futilities\u002Fcomponents\u002Finset","3.utilities\u002Fcomponents\u002Finset",{"title":304,"path":305,"stem":306},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":308,"path":309,"stem":310,"children":311,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[312,316],{"title":313,"path":314,"stem":315},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":317,"path":318,"stem":319},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":321,"path":322,"stem":323,"children":324,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[325],{"title":279,"path":326,"stem":327},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":329,"path":330,"stem":331,"children":332,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[333],{"title":334,"path":335,"stem":336},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",[338,368,414],{"title":5,"path":6,"stem":7,"children":339,"page":34},[340,347,353,362],{"title":10,"path":11,"stem":12,"children":341,"page":34},[342,343,344,345,346],{"title":15,"path":16,"stem":17},{"title":19,"path":20,"stem":21},{"title":23,"path":24,"stem":25},{"title":27,"path":28,"stem":29},{"title":31,"path":32,"stem":33},{"title":36,"path":37,"stem":38,"children":348,"page":34},[349,350,351,352],{"title":41,"path":42,"stem":43},{"title":45,"path":46,"stem":47},{"title":49,"path":50,"stem":51},{"title":53,"path":54,"stem":55},{"title":57,"path":58,"stem":59,"children":354,"page":34},[355,356,357,358,359,360,361],{"title":62,"path":63,"stem":64},{"title":66,"path":67,"stem":68},{"title":70,"path":71,"stem":72},{"title":74,"path":75,"stem":76},{"title":78,"path":79,"stem":80},{"title":82,"path":83,"stem":84},{"title":86,"path":87,"stem":88},{"title":90,"path":91,"stem":92,"children":363,"page":34},[364,365,366,367],{"title":95,"path":96,"stem":97},{"title":99,"path":100,"stem":101},{"title":103,"path":104,"stem":105},{"title":107,"path":108,"stem":109},{"title":53,"path":111,"stem":112,"children":369,"page":34},[370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413],{"title":115,"path":116,"stem":117},{"title":119,"path":120,"stem":121},{"title":123,"path":124,"stem":125},{"title":127,"path":128,"stem":129},{"title":131,"path":132,"stem":133},{"title":135,"path":136,"stem":137},{"title":139,"path":140,"stem":141},{"title":143,"path":144,"stem":145},{"title":147,"path":148,"stem":149},{"title":151,"path":152,"stem":153},{"title":155,"path":156,"stem":157},{"title":159,"path":160,"stem":161},{"title":163,"path":164,"stem":165},{"title":167,"path":168,"stem":169},{"title":171,"path":172,"stem":173},{"title":175,"path":176,"stem":177},{"title":179,"path":180,"stem":181},{"title":183,"path":184,"stem":185},{"title":187,"path":188,"stem":189},{"title":191,"path":192,"stem":193},{"title":195,"path":196,"stem":197},{"title":199,"path":200,"stem":201},{"title":203,"path":204,"stem":205},{"title":207,"path":208,"stem":209},{"title":211,"path":212,"stem":213},{"title":215,"path":216,"stem":217},{"title":219,"path":220,"stem":221},{"title":223,"path":224,"stem":225},{"title":227,"path":228,"stem":229},{"title":231,"path":232,"stem":233},{"title":235,"path":236,"stem":237},{"title":239,"path":240,"stem":241},{"title":243,"path":244,"stem":245},{"title":247,"path":248,"stem":249},{"title":251,"path":252,"stem":253},{"title":255,"path":256,"stem":257},{"title":259,"path":260,"stem":261},{"title":263,"path":264,"stem":265},{"title":267,"path":268,"stem":269},{"title":271,"path":272,"stem":273},{"title":275,"path":276,"stem":277},{"title":279,"path":280,"stem":281},{"title":283,"path":284,"stem":285},{"title":287,"path":288,"stem":289},{"title":291,"path":292,"stem":293,"children":415,"page":34},[416,420,424,427],{"title":53,"path":296,"stem":297,"children":417,"page":34},[418,419],{"title":300,"path":301,"stem":302},{"title":304,"path":305,"stem":306},{"title":308,"path":309,"stem":310,"children":421,"page":34},[422,423],{"title":313,"path":314,"stem":315},{"title":317,"path":318,"stem":319},{"title":321,"path":322,"stem":323,"children":425,"page":34},[426],{"title":279,"path":326,"stem":327},{"title":329,"path":330,"stem":331,"children":428,"page":34},[429],{"title":334,"path":335,"stem":336},{"id":431,"title":219,"body":432,"description":691,"extension":692,"links":693,"meta":694,"navigation":695,"path":220,"seo":696,"stem":221,"__hash__":697},"docs\u002F2.components\u002Fprogress-bar.md",{"type":433,"value":434,"toc":678},"minimark",[435,440,445,452,485,489,494,497,501,504,508,566,570,612,615,660,664,674],[436,437],"component-example",{":full-width":438,"name":439},"true","progress-bar-basic-example",[441,442,444],"h2",{"id":443},"usage","Usage",[446,447,448,451],"p",{},[449,450,219],"strong",{}," is a determinate indicator for tasks such as uploads, imports, or processing steps where completion can be measured. Use it when you can communicate a meaningful current value and maximum value, placed in context close to the content or action the progress belongs to.",[453,454,459],"pre",{"className":455,"code":456,"language":457,"meta":458,"style":458},"language-ts shiki shiki-themes github-light github-dark-default github-dark-default","import { MtProgressBar } from \"@shopware-ag\u002Fmeteor-component-library\";\n","ts","",[460,461,462],"code",{"__ignoreMap":458},[463,464,467,471,475,478,482],"span",{"class":465,"line":466},"line",1,[463,468,470],{"class":469},"sLfaJ","import",[463,472,474],{"class":473},"sSgjj"," { MtProgressBar } ",[463,476,477],{"class":469},"from",[463,479,481],{"class":480},"sL1yV"," \"@shopware-ag\u002Fmeteor-component-library\"",[463,483,484],{"class":473},";\n",[441,486,488],{"id":487},"examples","Examples",[490,491,493],"h3",{"id":492},"custom-units-and-error","Custom units and error",[436,495],{":full-width":438,"name":496},"progress-bar-custom-units-and-error-example",[441,498,500],{"id":499},"api-reference","API reference",[502,503],"component-api",{},[441,505,507],{"id":506},"best-practices","Best practices",[509,510,511,549],"do-dont",{":vertical":438},[512,513,514],"template",{"v-slot:do":458},[515,516,517,521,524,527,542],"ul",{},[518,519,520],"li",{},"Provide a clear label so users understand what the progress refers to.",[518,522,523],{},"Keep the value and maximum meaningful, stable, and easy to reason about.",[518,525,526],{},"Use the default percentage label when percent is the clearest way to communicate progress.",[518,528,529,530,533,534,537,538,541],{},"Use ",[460,531,532],{},"progressLabelType"," when a concrete unit such as ",[460,535,536],{},"kb"," or ",[460,539,540],{},"items"," is more useful than a percentage.",[518,543,544,545,548],{},"Show the ",[460,546,547],{},"error"," state when progress is blocked or the related process fails.",[512,550,551,557,560,563],{"v-slot:dont":458},[518,552,553,554,556],{},"Do not use ",[449,555,219],{}," when the task has no measurable completion state.",[518,558,559],{},"Do not rely on progress color alone to communicate success or failure.",[518,561,562],{},"Do not feed invalid values on purpose and rely on clamping as the primary behavior.",[518,564,565],{},"Do not hide the surrounding context for long-running tasks that may need more explanation.",[441,567,569],{"id":568},"behavior","Behavior",[515,571,572,581,596,606],{},[518,573,574,576,577,580],{},[449,575,219],{}," uses the current value and ",[460,578,579],{},"maxValue"," to calculate the filled width.",[518,582,583,584,587,588,591,592,595],{},"The fill width is clamped between ",[460,585,586],{},"0%"," and ",[460,589,590],{},"100%",", so values below ",[460,593,594],{},"0"," or above the maximum do not overflow the track.",[518,597,598,599,601,602,605],{},"By default the progress label is shown as a percentage. When ",[460,600,532],{}," is set to another value, the label is rendered as ",[460,603,604],{},"current unit \u002F max unit",".",[518,607,608,609,611],{},"When ",[460,610,547],{}," is present, the fill changes to the critical color and the error message is rendered below the track.",[441,613,45],{"id":614},"accessibility",[515,616,617,637,647,654],{},[518,618,619,621,622,625,626,629,630,633,634,605],{},[449,620,219],{}," exposes ",[460,623,624],{},"role=\"progressbar\""," with ",[460,627,628],{},"aria-valuenow",", ",[460,631,632],{},"aria-valuemin",", and ",[460,635,636],{},"aria-valuemax",[518,638,639,640,643,644,605],{},"Provide a visible ",[460,641,642],{},"label",", because the progressbar is associated with that label via ",[460,645,646],{},"aria-labelledby",[518,648,649,650,653],{},"The percentage or unit label is marked ",[460,651,652],{},"aria-hidden",", so important status information should not depend on that text alone.",[518,655,656,657,659],{},"If the task is especially important or long-running, pair ",[449,658,219],{}," with additional explanatory text so screen-reader and keyboard users have enough context.",[441,661,663],{"id":662},"related-components","Related components",[515,665,666],{},[518,667,668,673],{},[669,670,671],"a",{"href":196},[449,672,195],{},": when work is in progress but the exact completion amount is unknown.",[675,676,677],"style",{},"html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sL1yV, html code.shiki .sL1yV{--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}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":458,"searchDepth":679,"depth":679,"links":680},2,[681,682,686,687,688,689,690],{"id":443,"depth":679,"text":444},{"id":487,"depth":679,"text":488,"children":683},[684],{"id":492,"depth":685,"text":493},3,{"id":499,"depth":679,"text":500},{"id":506,"depth":679,"text":507},{"id":568,"depth":679,"text":569},{"id":614,"depth":679,"text":45},{"id":662,"depth":679,"text":663},"A determinate progress indicator for tasks with a known current value and maximum.","md",null,{},true,{"title":219,"description":691},"dkbOy6_IFohvnAkXUdCGp46h1zLXuuVX_rRvYJlb_B4",[699,701],{"title":215,"path":216,"stem":217,"description":700,"children":-1},"An experimental floating surface that reveals contextual settings and nested option views from a trigger.",{"title":223,"path":224,"stem":225,"description":702,"children":-1},"A specialized Badge for predefined promotional labels such as New, Beta, or Shopware AI.",{"code":704,"pascalName":705},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport MtProgressBar from \"@shopware-ag\u002Fmeteor-component-library\u002FMtProgressBar\";\n\nconst value = ref(45);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmt-progress-bar v-model=\"value\" :max-value=\"100\" label=\"Upload progress\" \u002F>\n\u003C\u002Ftemplate>\n","ProgressBarBasicExample",{"code":707,"pascalName":708},"\u003Cscript setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport MtProgressBar from \"@shopware-ag\u002Fmeteor-component-library\u002FMtProgressBar\";\n\nconst uploadedSize = ref(277);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cmt-progress-bar\n    v-model=\"uploadedSize\"\n    :max-value=\"356\"\n    label=\"Upload progress\"\n    progress-label-type=\"kb\"\n    :error=\"{ code: 500, detail: 'Error while loading' }\"\n  \u002F>\n\u003C\u002Ftemplate>\n","ProgressBarCustomUnitsAndErrorExample",{"pascalName":710,"kebabName":711,"filePath":712,"meta":713},"MtProgressBar","mt-progress-bar","..\u002F..\u002Fpackages\u002Fcomponent-library\u002Fsrc\u002Fcomponents\u002Fmt-progress-bar\u002Fmt-progress-bar.vue",{"type":466,"props":714,"slots":750,"events":751,"exposed":760,"hash":761},[715,718,721,738,744],{"name":642,"global":34,"description":458,"tags":716,"required":695,"type":717,"schema":717},[],"string",{"name":579,"global":34,"description":458,"tags":719,"required":695,"type":720,"schema":720},[],"number",{"name":547,"global":34,"description":458,"tags":722,"required":34,"type":723,"schema":724},[],"{ detail: string; code: number; } | null | undefined",{"kind":725,"type":723,"schema":726},"enum",{"0":727,"1":728,"2":729},"undefined","null",{"kind":730,"type":731,"schema":732},"object","{ detail: string; code: number; }",{"detail":733,"code":736},{"name":734,"global":34,"description":458,"tags":735,"required":695,"type":717,"schema":717},"detail",[],{"name":460,"global":34,"description":458,"tags":737,"required":695,"type":720,"schema":720},[],{"name":532,"global":34,"default":739,"description":458,"tags":740,"required":34,"type":741,"schema":742},"\"percent\"",[],"string | undefined",{"kind":725,"type":741,"schema":743},{"0":727,"1":717},{"name":745,"global":34,"description":458,"tags":746,"required":34,"type":747,"schema":748},"modelValue",[],"number | undefined",{"kind":725,"type":747,"schema":749},{"0":727,"1":720},[],[752],{"name":753,"description":458,"tags":754,"type":755,"signature":756,"schema":757},"update:modelValue",[],"[value: number | undefined]","(event: \"update:modelValue\", value: number | undefined): void",[758],{"kind":725,"type":747,"schema":759},[727,720],[],"nB1GIJKB7c71L4Smb-Iss7P5R_yUEGeyB0U3KkDG49E",{"data":763,"body":764,"toc":1042},{"title":458,"description":458},{"type":765,"children":766},"root",[767,1037],{"type":768,"tag":453,"props":769,"children":772},"element",{"className":770,"code":704,"language":771,"meta":458,"style":458},"language-vue shiki shiki-themes github-light github-dark-default github-dark-default","vue",[773],{"type":768,"tag":460,"props":774,"children":775},{"__ignoreMap":458},[776,819,845,870,879,920,937,945,961,1021],{"type":768,"tag":463,"props":777,"children":778},{"class":465,"line":466},[779,786,792,798,803,808,814],{"type":768,"tag":463,"props":780,"children":782},{"style":781},"--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3",[783],{"type":784,"value":785},"text","\u003C",{"type":768,"tag":463,"props":787,"children":789},{"style":788},"--shiki-light:#22863A;--shiki-default:#7EE787;--shiki-dark:#7EE787",[790],{"type":784,"value":791},"script",{"type":768,"tag":463,"props":793,"children":795},{"style":794},"--shiki-light:#6F42C1;--shiki-default:#79C0FF;--shiki-dark:#79C0FF",[796],{"type":784,"value":797}," setup",{"type":768,"tag":463,"props":799,"children":800},{"style":794},[801],{"type":784,"value":802}," lang",{"type":768,"tag":463,"props":804,"children":805},{"style":781},[806],{"type":784,"value":807},"=",{"type":768,"tag":463,"props":809,"children":811},{"style":810},"--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF",[812],{"type":784,"value":813},"\"ts\"",{"type":768,"tag":463,"props":815,"children":816},{"style":781},[817],{"type":784,"value":818},">\n",{"type":768,"tag":463,"props":820,"children":821},{"class":465,"line":679},[822,827,832,836,841],{"type":768,"tag":463,"props":823,"children":825},{"style":824},"--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72",[826],{"type":784,"value":470},{"type":768,"tag":463,"props":828,"children":829},{"style":781},[830],{"type":784,"value":831}," { ref } ",{"type":768,"tag":463,"props":833,"children":834},{"style":824},[835],{"type":784,"value":477},{"type":768,"tag":463,"props":837,"children":838},{"style":810},[839],{"type":784,"value":840}," \"vue\"",{"type":768,"tag":463,"props":842,"children":843},{"style":781},[844],{"type":784,"value":484},{"type":768,"tag":463,"props":846,"children":847},{"class":465,"line":685},[848,852,857,861,866],{"type":768,"tag":463,"props":849,"children":850},{"style":824},[851],{"type":784,"value":470},{"type":768,"tag":463,"props":853,"children":854},{"style":781},[855],{"type":784,"value":856}," MtProgressBar ",{"type":768,"tag":463,"props":858,"children":859},{"style":824},[860],{"type":784,"value":477},{"type":768,"tag":463,"props":862,"children":863},{"style":810},[864],{"type":784,"value":865}," \"@shopware-ag\u002Fmeteor-component-library\u002FMtProgressBar\"",{"type":768,"tag":463,"props":867,"children":868},{"style":781},[869],{"type":784,"value":484},{"type":768,"tag":463,"props":871,"children":873},{"class":465,"line":872},4,[874],{"type":768,"tag":463,"props":875,"children":876},{"emptyLinePlaceholder":695},[877],{"type":784,"value":878},"\n",{"type":768,"tag":463,"props":880,"children":882},{"class":465,"line":881},5,[883,888,894,899,905,910,915],{"type":768,"tag":463,"props":884,"children":885},{"style":824},[886],{"type":784,"value":887},"const",{"type":768,"tag":463,"props":889,"children":891},{"style":890},"--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF",[892],{"type":784,"value":893}," value",{"type":768,"tag":463,"props":895,"children":896},{"style":824},[897],{"type":784,"value":898}," =",{"type":768,"tag":463,"props":900,"children":902},{"style":901},"--shiki-light:#6F42C1;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF",[903],{"type":784,"value":904}," ref",{"type":768,"tag":463,"props":906,"children":907},{"style":781},[908],{"type":784,"value":909},"(",{"type":768,"tag":463,"props":911,"children":912},{"style":890},[913],{"type":784,"value":914},"45",{"type":768,"tag":463,"props":916,"children":917},{"style":781},[918],{"type":784,"value":919},");\n",{"type":768,"tag":463,"props":921,"children":923},{"class":465,"line":922},6,[924,929,933],{"type":768,"tag":463,"props":925,"children":926},{"style":781},[927],{"type":784,"value":928},"\u003C\u002F",{"type":768,"tag":463,"props":930,"children":931},{"style":788},[932],{"type":784,"value":791},{"type":768,"tag":463,"props":934,"children":935},{"style":781},[936],{"type":784,"value":818},{"type":768,"tag":463,"props":938,"children":940},{"class":465,"line":939},7,[941],{"type":768,"tag":463,"props":942,"children":943},{"emptyLinePlaceholder":695},[944],{"type":784,"value":878},{"type":768,"tag":463,"props":946,"children":948},{"class":465,"line":947},8,[949,953,957],{"type":768,"tag":463,"props":950,"children":951},{"style":781},[952],{"type":784,"value":785},{"type":768,"tag":463,"props":954,"children":955},{"style":788},[956],{"type":784,"value":512},{"type":768,"tag":463,"props":958,"children":959},{"style":781},[960],{"type":784,"value":818},{"type":768,"tag":463,"props":962,"children":964},{"class":465,"line":963},9,[965,970,974,979,983,988,993,997,1002,1007,1011,1016],{"type":768,"tag":463,"props":966,"children":967},{"style":781},[968],{"type":784,"value":969},"  \u003C",{"type":768,"tag":463,"props":971,"children":972},{"style":788},[973],{"type":784,"value":711},{"type":768,"tag":463,"props":975,"children":976},{"style":794},[977],{"type":784,"value":978}," v-model",{"type":768,"tag":463,"props":980,"children":981},{"style":781},[982],{"type":784,"value":807},{"type":768,"tag":463,"props":984,"children":985},{"style":810},[986],{"type":784,"value":987},"\"value\"",{"type":768,"tag":463,"props":989,"children":990},{"style":794},[991],{"type":784,"value":992}," :max-value",{"type":768,"tag":463,"props":994,"children":995},{"style":781},[996],{"type":784,"value":807},{"type":768,"tag":463,"props":998,"children":999},{"style":810},[1000],{"type":784,"value":1001},"\"100\"",{"type":768,"tag":463,"props":1003,"children":1004},{"style":794},[1005],{"type":784,"value":1006}," label",{"type":768,"tag":463,"props":1008,"children":1009},{"style":781},[1010],{"type":784,"value":807},{"type":768,"tag":463,"props":1012,"children":1013},{"style":810},[1014],{"type":784,"value":1015},"\"Upload progress\"",{"type":768,"tag":463,"props":1017,"children":1018},{"style":781},[1019],{"type":784,"value":1020}," \u002F>\n",{"type":768,"tag":463,"props":1022,"children":1024},{"class":465,"line":1023},10,[1025,1029,1033],{"type":768,"tag":463,"props":1026,"children":1027},{"style":781},[1028],{"type":784,"value":928},{"type":768,"tag":463,"props":1030,"children":1031},{"style":788},[1032],{"type":784,"value":512},{"type":768,"tag":463,"props":1034,"children":1035},{"style":781},[1036],{"type":784,"value":818},{"type":768,"tag":675,"props":1038,"children":1039},{},[1040],{"type":784,"value":1041},"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":458,"searchDepth":679,"depth":679,"links":1043},[],{"data":1045,"body":1046,"toc":1338},{"title":458,"description":458},{"type":765,"children":1047},[1048,1334],{"type":768,"tag":453,"props":1049,"children":1050},{"className":770,"code":707,"language":771,"meta":458,"style":458},[1051],{"type":768,"tag":460,"props":1052,"children":1053},{"__ignoreMap":458},[1054,1085,1108,1131,1138,1171,1186,1193,1208,1220,1237,1255,1273,1291,1309,1318],{"type":768,"tag":463,"props":1055,"children":1056},{"class":465,"line":466},[1057,1061,1065,1069,1073,1077,1081],{"type":768,"tag":463,"props":1058,"children":1059},{"style":781},[1060],{"type":784,"value":785},{"type":768,"tag":463,"props":1062,"children":1063},{"style":788},[1064],{"type":784,"value":791},{"type":768,"tag":463,"props":1066,"children":1067},{"style":794},[1068],{"type":784,"value":797},{"type":768,"tag":463,"props":1070,"children":1071},{"style":794},[1072],{"type":784,"value":802},{"type":768,"tag":463,"props":1074,"children":1075},{"style":781},[1076],{"type":784,"value":807},{"type":768,"tag":463,"props":1078,"children":1079},{"style":810},[1080],{"type":784,"value":813},{"type":768,"tag":463,"props":1082,"children":1083},{"style":781},[1084],{"type":784,"value":818},{"type":768,"tag":463,"props":1086,"children":1087},{"class":465,"line":679},[1088,1092,1096,1100,1104],{"type":768,"tag":463,"props":1089,"children":1090},{"style":824},[1091],{"type":784,"value":470},{"type":768,"tag":463,"props":1093,"children":1094},{"style":781},[1095],{"type":784,"value":831},{"type":768,"tag":463,"props":1097,"children":1098},{"style":824},[1099],{"type":784,"value":477},{"type":768,"tag":463,"props":1101,"children":1102},{"style":810},[1103],{"type":784,"value":840},{"type":768,"tag":463,"props":1105,"children":1106},{"style":781},[1107],{"type":784,"value":484},{"type":768,"tag":463,"props":1109,"children":1110},{"class":465,"line":685},[1111,1115,1119,1123,1127],{"type":768,"tag":463,"props":1112,"children":1113},{"style":824},[1114],{"type":784,"value":470},{"type":768,"tag":463,"props":1116,"children":1117},{"style":781},[1118],{"type":784,"value":856},{"type":768,"tag":463,"props":1120,"children":1121},{"style":824},[1122],{"type":784,"value":477},{"type":768,"tag":463,"props":1124,"children":1125},{"style":810},[1126],{"type":784,"value":865},{"type":768,"tag":463,"props":1128,"children":1129},{"style":781},[1130],{"type":784,"value":484},{"type":768,"tag":463,"props":1132,"children":1133},{"class":465,"line":872},[1134],{"type":768,"tag":463,"props":1135,"children":1136},{"emptyLinePlaceholder":695},[1137],{"type":784,"value":878},{"type":768,"tag":463,"props":1139,"children":1140},{"class":465,"line":881},[1141,1145,1150,1154,1158,1162,1167],{"type":768,"tag":463,"props":1142,"children":1143},{"style":824},[1144],{"type":784,"value":887},{"type":768,"tag":463,"props":1146,"children":1147},{"style":890},[1148],{"type":784,"value":1149}," uploadedSize",{"type":768,"tag":463,"props":1151,"children":1152},{"style":824},[1153],{"type":784,"value":898},{"type":768,"tag":463,"props":1155,"children":1156},{"style":901},[1157],{"type":784,"value":904},{"type":768,"tag":463,"props":1159,"children":1160},{"style":781},[1161],{"type":784,"value":909},{"type":768,"tag":463,"props":1163,"children":1164},{"style":890},[1165],{"type":784,"value":1166},"277",{"type":768,"tag":463,"props":1168,"children":1169},{"style":781},[1170],{"type":784,"value":919},{"type":768,"tag":463,"props":1172,"children":1173},{"class":465,"line":922},[1174,1178,1182],{"type":768,"tag":463,"props":1175,"children":1176},{"style":781},[1177],{"type":784,"value":928},{"type":768,"tag":463,"props":1179,"children":1180},{"style":788},[1181],{"type":784,"value":791},{"type":768,"tag":463,"props":1183,"children":1184},{"style":781},[1185],{"type":784,"value":818},{"type":768,"tag":463,"props":1187,"children":1188},{"class":465,"line":939},[1189],{"type":768,"tag":463,"props":1190,"children":1191},{"emptyLinePlaceholder":695},[1192],{"type":784,"value":878},{"type":768,"tag":463,"props":1194,"children":1195},{"class":465,"line":947},[1196,1200,1204],{"type":768,"tag":463,"props":1197,"children":1198},{"style":781},[1199],{"type":784,"value":785},{"type":768,"tag":463,"props":1201,"children":1202},{"style":788},[1203],{"type":784,"value":512},{"type":768,"tag":463,"props":1205,"children":1206},{"style":781},[1207],{"type":784,"value":818},{"type":768,"tag":463,"props":1209,"children":1210},{"class":465,"line":963},[1211,1215],{"type":768,"tag":463,"props":1212,"children":1213},{"style":781},[1214],{"type":784,"value":969},{"type":768,"tag":463,"props":1216,"children":1217},{"style":788},[1218],{"type":784,"value":1219},"mt-progress-bar\n",{"type":768,"tag":463,"props":1221,"children":1222},{"class":465,"line":1023},[1223,1228,1232],{"type":768,"tag":463,"props":1224,"children":1225},{"style":794},[1226],{"type":784,"value":1227},"    v-model",{"type":768,"tag":463,"props":1229,"children":1230},{"style":781},[1231],{"type":784,"value":807},{"type":768,"tag":463,"props":1233,"children":1234},{"style":810},[1235],{"type":784,"value":1236},"\"uploadedSize\"\n",{"type":768,"tag":463,"props":1238,"children":1240},{"class":465,"line":1239},11,[1241,1246,1250],{"type":768,"tag":463,"props":1242,"children":1243},{"style":794},[1244],{"type":784,"value":1245},"    :max-value",{"type":768,"tag":463,"props":1247,"children":1248},{"style":781},[1249],{"type":784,"value":807},{"type":768,"tag":463,"props":1251,"children":1252},{"style":810},[1253],{"type":784,"value":1254},"\"356\"\n",{"type":768,"tag":463,"props":1256,"children":1258},{"class":465,"line":1257},12,[1259,1264,1268],{"type":768,"tag":463,"props":1260,"children":1261},{"style":794},[1262],{"type":784,"value":1263},"    label",{"type":768,"tag":463,"props":1265,"children":1266},{"style":781},[1267],{"type":784,"value":807},{"type":768,"tag":463,"props":1269,"children":1270},{"style":810},[1271],{"type":784,"value":1272},"\"Upload progress\"\n",{"type":768,"tag":463,"props":1274,"children":1276},{"class":465,"line":1275},13,[1277,1282,1286],{"type":768,"tag":463,"props":1278,"children":1279},{"style":794},[1280],{"type":784,"value":1281},"    progress-label-type",{"type":768,"tag":463,"props":1283,"children":1284},{"style":781},[1285],{"type":784,"value":807},{"type":768,"tag":463,"props":1287,"children":1288},{"style":810},[1289],{"type":784,"value":1290},"\"kb\"\n",{"type":768,"tag":463,"props":1292,"children":1294},{"class":465,"line":1293},14,[1295,1300,1304],{"type":768,"tag":463,"props":1296,"children":1297},{"style":794},[1298],{"type":784,"value":1299},"    :error",{"type":768,"tag":463,"props":1301,"children":1302},{"style":781},[1303],{"type":784,"value":807},{"type":768,"tag":463,"props":1305,"children":1306},{"style":810},[1307],{"type":784,"value":1308},"\"{ code: 500, detail: 'Error while loading' }\"\n",{"type":768,"tag":463,"props":1310,"children":1312},{"class":465,"line":1311},15,[1313],{"type":768,"tag":463,"props":1314,"children":1315},{"style":781},[1316],{"type":784,"value":1317},"  \u002F>\n",{"type":768,"tag":463,"props":1319,"children":1321},{"class":465,"line":1320},16,[1322,1326,1330],{"type":768,"tag":463,"props":1323,"children":1324},{"style":781},[1325],{"type":784,"value":928},{"type":768,"tag":463,"props":1327,"children":1328},{"style":788},[1329],{"type":784,"value":512},{"type":768,"tag":463,"props":1331,"children":1332},{"style":781},[1333],{"type":784,"value":818},{"type":768,"tag":675,"props":1335,"children":1336},{},[1337],{"type":784,"value":1041},{"title":458,"searchDepth":679,"depth":679,"links":1339},[],1783003022599]