[{"data":1,"prerenderedAt":1005},["ShallowReactive",2],{"navigation_docs":3,"-documentation-getting-started-installation":349,"-documentation-getting-started-installation-surround":1002},[4,110,298],{"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,290,294],{"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},"Status Dot","\u002Fcomponents\u002Fstatus-dot","2.components\u002Fstatus-dot",{"title":255,"path":256,"stem":257},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":259,"path":260,"stem":261},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":263,"path":264,"stem":265},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":267,"path":268,"stem":269},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":271,"path":272,"stem":273},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":275,"path":276,"stem":277},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":279,"path":280,"stem":281},"Theme Select","\u002Fcomponents\u002Ftheme-select","2.components\u002Ftheme-select",{"title":283,"path":284,"stem":285},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":287,"path":288,"stem":289},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":291,"path":292,"stem":293},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":295,"path":296,"stem":297},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":299,"path":300,"stem":301,"children":302,"page":34},"Utilities","\u002Futilities","3.utilities",[303,315,332,340],{"title":53,"path":304,"stem":305,"children":306,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[307,311],{"title":308,"path":309,"stem":310},"Inset","\u002Futilities\u002Fcomponents\u002Finset","3.utilities\u002Fcomponents\u002Finset",{"title":312,"path":313,"stem":314},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":316,"path":317,"stem":318,"children":319,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[320,324,328],{"title":321,"path":322,"stem":323},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":325,"path":326,"stem":327},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":329,"path":330,"stem":331},"useTheme","\u002Futilities\u002Fcomposables\u002Fuse-theme","3.utilities\u002Fcomposables\u002Fuse-theme",{"title":333,"path":334,"stem":335,"children":336,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[337],{"title":287,"path":338,"stem":339},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":341,"path":342,"stem":343,"children":344,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[345],{"title":346,"path":347,"stem":348},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",{"id":350,"title":15,"body":351,"description":996,"extension":997,"links":998,"meta":999,"navigation":510,"path":16,"seo":1000,"stem":17,"__hash__":1001},"docs\u002F1.documentation\u002F1.getting-started\u002F1.installation.md",{"type":352,"value":353,"toc":974},"minimark",[354,359,363,374,378,381,385,388,393,407,411,414,445,449,456,570,574,577,690,694,708,723,726,729,732,741,744,755,778,781,852,855,862,865,874,878,897,901,906,953,957,967,970],[355,356,358],"h2",{"id":357},"quick-start-with-ai","Quick Start with AI",[360,361,362],"p",{},"Paste this into your AI coding tool and let it handle the setup:",[364,365,371],"pre",{"className":366,"code":368,"language":369,"meta":370},[367],"language-text","Install @shopware-ag\u002Fmeteor-component-library in this project. Connect the Meteor MCP server at https:\u002F\u002Fmeteor.shopware.com\u002Fmcp (or read https:\u002F\u002Fmeteor.shopware.com\u002Fllms.txt) to learn the components and conventions.\n","text","",[372,373,368],"code",{"__ignoreMap":370},[355,375,377],{"id":376},"manual-setup","Manual setup",[360,379,380],{},"Meteor is a monorepo that publishes each part of the design system as a standalone npm package. You can adopt the full stack or pick only what your project needs: the component library, the token set, and the icon kit are all independently installable and versioned.",[355,382,384],{"id":383},"component-library","Component library",[360,386,387],{},"The component library builds upon the icon kit and design tokens, and requires Vue 3.",[389,390,392],"h3",{"id":391},"install","Install",[364,394,398],{"className":395,"code":396,"language":397,"meta":370,"style":370},"language-sh shiki shiki-themes github-light github-dark-default github-dark-default","npm install @shopware-ag\u002Fmeteor-component-library\n","sh",[372,399,400],{"__ignoreMap":370},[401,402,405],"span",{"class":403,"line":404},"line",1,[401,406,396],{},[389,408,410],{"id":409},"import-styles","Import styles",[360,412,413],{},"Add both imports to your application entry point.",[364,415,419],{"className":416,"code":417,"language":418,"meta":370,"style":370},"language-ts shiki shiki-themes github-light github-dark-default github-dark-default","import \"@shopware-ag\u002Fmeteor-component-library\u002Fstyles.css\";\nimport \"@shopware-ag\u002Fmeteor-component-library\u002Ffont.css\";\n","ts",[372,420,421,435],{"__ignoreMap":370},[401,422,423,427,431],{"class":403,"line":404},[401,424,426],{"class":425},"sLfaJ","import",[401,428,430],{"class":429},"sL1yV"," \"@shopware-ag\u002Fmeteor-component-library\u002Fstyles.css\"",[401,432,434],{"class":433},"sSgjj",";\n",[401,436,438,440,443],{"class":403,"line":437},2,[401,439,426],{"class":425},[401,441,442],{"class":429}," \"@shopware-ag\u002Fmeteor-component-library\u002Ffont.css\"",[401,444,434],{"class":433},[389,446,448],{"id":447},"configure-i18n","Configure i18n",[360,450,451,452,455],{},"English and German translations are bundled. Register ",[372,453,454],{},"vue-i18n"," before mounting your app.",[364,457,459],{"className":416,"code":458,"language":418,"meta":370,"style":370},"import { createApp } from \"vue\";\nimport { createI18n } from \"vue-i18n\";\nimport App from \".\u002FApp.vue\";\n\nconst i18n = createI18n({ legacy: false });\n\ncreateApp(App).use(i18n).mount(\"#app\");\n",[372,460,461,476,490,505,512,538,543],{"__ignoreMap":370},[401,462,463,465,468,471,474],{"class":403,"line":404},[401,464,426],{"class":425},[401,466,467],{"class":433}," { createApp } ",[401,469,470],{"class":425},"from",[401,472,473],{"class":429}," \"vue\"",[401,475,434],{"class":433},[401,477,478,480,483,485,488],{"class":403,"line":437},[401,479,426],{"class":425},[401,481,482],{"class":433}," { createI18n } ",[401,484,470],{"class":425},[401,486,487],{"class":429}," \"vue-i18n\"",[401,489,434],{"class":433},[401,491,493,495,498,500,503],{"class":403,"line":492},3,[401,494,426],{"class":425},[401,496,497],{"class":433}," App ",[401,499,470],{"class":425},[401,501,502],{"class":429}," \".\u002FApp.vue\"",[401,504,434],{"class":433},[401,506,508],{"class":403,"line":507},4,[401,509,511],{"emptyLinePlaceholder":510},true,"\n",[401,513,515,518,522,525,529,532,535],{"class":403,"line":514},5,[401,516,517],{"class":425},"const",[401,519,521],{"class":520},"sfxXV"," i18n",[401,523,524],{"class":425}," =",[401,526,528],{"class":527},"s71ug"," createI18n",[401,530,531],{"class":433},"({ legacy: ",[401,533,534],{"class":520},"false",[401,536,537],{"class":433}," });\n",[401,539,541],{"class":403,"line":540},6,[401,542,511],{"emptyLinePlaceholder":510},[401,544,546,549,552,555,558,561,564,567],{"class":403,"line":545},7,[401,547,548],{"class":527},"createApp",[401,550,551],{"class":433},"(App).",[401,553,554],{"class":527},"use",[401,556,557],{"class":433},"(i18n).",[401,559,560],{"class":527},"mount",[401,562,563],{"class":433},"(",[401,565,566],{"class":429},"\"#app\"",[401,568,569],{"class":433},");\n",[389,571,573],{"id":572},"use-components","Use components",[360,575,576],{},"Components are tree-shakable. Import only what you use.",[364,578,582],{"className":579,"code":580,"language":581,"meta":370,"style":370},"language-vue shiki shiki-themes github-light github-dark-default github-dark-default","\u003Cscript setup>\nimport { MtButton, MtBanner } from \"@shopware-ag\u002Fmeteor-component-library\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CMtButton variant=\"primary\">Save\u003C\u002FMtButton>\n  \u003CMtBanner variant=\"success\">Saved successfully.\u003C\u002FMtBanner>\n\u003C\u002Ftemplate>\n","vue",[372,583,584,600,614,623,627,636,660,681],{"__ignoreMap":370},[401,585,586,589,593,597],{"class":403,"line":404},[401,587,588],{"class":433},"\u003C",[401,590,592],{"class":591},"sFzZJ","script",[401,594,596],{"class":595},"srQ81"," setup",[401,598,599],{"class":433},">\n",[401,601,602,604,607,609,612],{"class":403,"line":437},[401,603,426],{"class":425},[401,605,606],{"class":433}," { MtButton, MtBanner } ",[401,608,470],{"class":425},[401,610,611],{"class":429}," \"@shopware-ag\u002Fmeteor-component-library\"",[401,613,434],{"class":433},[401,615,616,619,621],{"class":403,"line":492},[401,617,618],{"class":433},"\u003C\u002F",[401,620,592],{"class":591},[401,622,599],{"class":433},[401,624,625],{"class":403,"line":507},[401,626,511],{"emptyLinePlaceholder":510},[401,628,629,631,634],{"class":403,"line":514},[401,630,588],{"class":433},[401,632,633],{"class":591},"template",[401,635,599],{"class":433},[401,637,638,641,644,647,650,653,656,658],{"class":403,"line":540},[401,639,640],{"class":433},"  \u003C",[401,642,643],{"class":591},"MtButton",[401,645,646],{"class":595}," variant",[401,648,649],{"class":433},"=",[401,651,652],{"class":429},"\"primary\"",[401,654,655],{"class":433},">Save\u003C\u002F",[401,657,643],{"class":591},[401,659,599],{"class":433},[401,661,662,664,667,669,671,674,677,679],{"class":403,"line":545},[401,663,640],{"class":433},[401,665,666],{"class":591},"MtBanner",[401,668,646],{"class":595},[401,670,649],{"class":433},[401,672,673],{"class":429},"\"success\"",[401,675,676],{"class":433},">Saved successfully.\u003C\u002F",[401,678,666],{"class":591},[401,680,599],{"class":433},[401,682,684,686,688],{"class":403,"line":683},8,[401,685,618],{"class":433},[401,687,633],{"class":591},[401,689,599],{"class":433},[389,691,693],{"id":692},"future-flags","Future flags",[360,695,696,697,703,704,707],{},"Some behavior that will become the default in upcoming major releases is available early behind future flags. Opt in through the ",[698,699,700],"a",{"href":313},[701,702,312],"strong",{}," ",[372,705,706],{},"future"," prop to align your application with the next major and reduce the work when you upgrade.",[709,710,711,712,715,716,703,720,722],"note",{},"Future flags let established applications like the Shopware Admin stay visually stable while the library evolves, since new behavior stays opt-in. Because the flags also carry the behavior we intend to make default, we recommend turning them all on by passing ",[372,713,714],{},"{ all: true }"," to the ",[698,717,718],{"href":313},[701,719,312],{},[372,721,706],{}," prop whenever your application can accept the risk of visual breaks on future updates.",[355,724,62],{"id":725},"tokens",[360,727,728],{},"The token package is framework-agnostic. Install it independently whenever you need Meteor's design decisions without the component library.",[389,730,392],{"id":731},"install-1",[364,733,735],{"className":395,"code":734,"language":397,"meta":370,"style":370},"npm install @shopware-ag\u002Fmeteor-tokens\n",[372,736,737],{"__ignoreMap":370},[401,738,739],{"class":403,"line":404},[401,740,734],{},[389,742,743],{"id":426},"Import",[360,745,746,747,750,751,754],{},"The light theme defines design tokens via CSS variables on ",[372,748,749],{},":root"," and the dark theme replaces the variable values when ",[372,752,753],{},"data-theme=\"dark\""," is set on elements as an HTML attribute.",[364,756,758],{"className":416,"code":757,"language":418,"meta":370,"style":370},"import \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\";\nimport \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\";\n",[372,759,760,769],{"__ignoreMap":370},[401,761,762,764,767],{"class":403,"line":404},[401,763,426],{"class":425},[401,765,766],{"class":429}," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\"",[401,768,434],{"class":433},[401,770,771,773,776],{"class":403,"line":437},[401,772,426],{"class":425},[401,774,775],{"class":429}," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\"",[401,777,434],{"class":433},[389,779,780],{"id":554},"Use",[364,782,786],{"className":783,"code":784,"language":785,"meta":370,"style":370},"language-css shiki shiki-themes github-light github-dark-default github-dark-default",".my-component {\n  color: var(--color-text-primary-default);\n  background: var(--color-elevation-surface-default);\n  padding: var(--scale-size-16);\n}\n","css",[372,787,788,796,815,831,847],{"__ignoreMap":370},[401,789,790,793],{"class":403,"line":404},[401,791,792],{"class":595},".my-component",[401,794,795],{"class":433}," {\n",[401,797,798,801,804,807,809,813],{"class":403,"line":437},[401,799,800],{"class":520},"  color",[401,802,803],{"class":433},": ",[401,805,806],{"class":520},"var",[401,808,563],{"class":433},[401,810,812],{"class":811},"s8FL_","--color-text-primary-default",[401,814,569],{"class":433},[401,816,817,820,822,824,826,829],{"class":403,"line":492},[401,818,819],{"class":520},"  background",[401,821,803],{"class":433},[401,823,806],{"class":520},[401,825,563],{"class":433},[401,827,828],{"class":811},"--color-elevation-surface-default",[401,830,569],{"class":433},[401,832,833,836,838,840,842,845],{"class":403,"line":507},[401,834,835],{"class":520},"  padding",[401,837,803],{"class":433},[401,839,806],{"class":520},[401,841,563],{"class":433},[401,843,844],{"class":811},"--scale-size-16",[401,846,569],{"class":433},[401,848,849],{"class":403,"line":514},[401,850,851],{"class":433},"}\n",[355,853,86],{"id":854},"icons",[360,856,857,858,861],{},"The icon kit can be used standalone in any framework as SVGs, or as Vue components via ",[372,859,860],{},"mt-icon"," in the component library.",[389,863,392],{"id":864},"install-2",[364,866,868],{"className":395,"code":867,"language":397,"meta":370,"style":370},"npm install @shopware-ag\u002Fmeteor-icon-kit\n",[372,869,870],{"__ignoreMap":370},[401,871,872],{"class":403,"line":404},[401,873,867],{},[389,875,877],{"id":876},"import-as-svg","Import as SVG",[364,879,881],{"className":416,"code":880,"language":418,"meta":370,"style":370},"import PlusIcon from \"@shopware-ag\u002Fmeteor-icon-kit\u002Ficons\u002Fregular\u002Fplus.svg\";\n",[372,882,883],{"__ignoreMap":370},[401,884,885,887,890,892,895],{"class":403,"line":404},[401,886,426],{"class":425},[401,888,889],{"class":433}," PlusIcon ",[401,891,470],{"class":425},[401,893,894],{"class":429}," \"@shopware-ag\u002Fmeteor-icon-kit\u002Ficons\u002Fregular\u002Fplus.svg\"",[401,896,434],{"class":433},[389,898,900],{"id":899},"use-with-mt-icon-vue","Use with mt-icon (Vue)",[360,902,903,905],{},[372,904,860],{}," is included in the component library and renders any icon by name.",[364,907,911],{"className":908,"code":909,"language":910,"meta":370,"style":370},"language-html shiki shiki-themes github-light github-dark-default github-dark-default","\u003Cmt-icon name=\"regular-plus\" \u002F>\n\u003Cmt-icon name=\"solid-checkmark\" size=\"20px\" \u002F>\n","html",[372,912,913,930],{"__ignoreMap":370},[401,914,915,917,919,922,924,927],{"class":403,"line":404},[401,916,588],{"class":433},[401,918,860],{"class":591},[401,920,921],{"class":595}," name",[401,923,649],{"class":433},[401,925,926],{"class":429},"\"regular-plus\"",[401,928,929],{"class":433}," \u002F>\n",[401,931,932,934,936,938,940,943,946,948,951],{"class":403,"line":437},[401,933,588],{"class":433},[401,935,860],{"class":591},[401,937,921],{"class":595},[401,939,649],{"class":433},[401,941,942],{"class":429},"\"solid-checkmark\"",[401,944,945],{"class":595}," size",[401,947,649],{"class":433},[401,949,950],{"class":429},"\"20px\"",[401,952,929],{"class":433},[355,954,956],{"id":955},"browser-support","Browser support",[360,958,959,960,966],{},"Meteor targets all major evergreen browsers. Features used in the component library and token package are limited to those with ",[698,961,965],{"href":962,"rel":963},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FBaseline\u002FCompatibility",[964],"nofollow","Baseline Newly available"," status, a web platform interoperability signal meaning the feature is supported in the latest stable releases of Chrome, Edge, Firefox, and Safari with no polyfills required.",[360,968,969],{},"Legacy browsers and non-evergreen environments are not supported.",[971,972,973],"style",{},"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);}html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sL1yV, html code.shiki .sL1yV{--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .sfxXV, html code.shiki .sfxXV{--shiki-light:#005CC5;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .s71ug, html code.shiki .s71ug{--shiki-light:#6F42C1;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sFzZJ, html code.shiki .sFzZJ{--shiki-light:#22863A;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .srQ81, html code.shiki .srQ81{--shiki-light:#6F42C1;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .s8FL_, html code.shiki .s8FL_{--shiki-light:#E36209;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":370,"searchDepth":437,"depth":437,"links":975},[976,977,978,985,990,995],{"id":357,"depth":437,"text":358},{"id":376,"depth":437,"text":377},{"id":383,"depth":437,"text":384,"children":979},[980,981,982,983,984],{"id":391,"depth":492,"text":392},{"id":409,"depth":492,"text":410},{"id":447,"depth":492,"text":448},{"id":572,"depth":492,"text":573},{"id":692,"depth":492,"text":693},{"id":725,"depth":437,"text":62,"children":986},[987,988,989],{"id":731,"depth":492,"text":392},{"id":426,"depth":492,"text":743},{"id":554,"depth":492,"text":780},{"id":854,"depth":437,"text":86,"children":991},[992,993,994],{"id":864,"depth":492,"text":392},{"id":876,"depth":492,"text":877},{"id":899,"depth":492,"text":900},{"id":955,"depth":437,"text":956},"Install Meteor's component library, tokens, and icon kit, and set up your project.","md",null,{},{"title":15,"description":996},"S2diehXfgVLzZfszrWhGkj07QJ3vAOGDDBPPm8jC8ok",[998,1003],{"title":19,"path":20,"stem":21,"description":1004,"children":-1},"Connect AI assistants and tools to the Meteor documentation, through a live MCP server or static machine-readable files.",1784733261469]