[{"data":1,"prerenderedAt":1191},["ShallowReactive",2],{"navigation_docs":3,"-documentation-getting-started-installation":385,"-documentation-getting-started-installation-surround":1188},[4,110,322],{"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,298,302,306,310,314,318],{"title":115,"path":116,"stem":117},"Action Menu","\u002Fcomponents\u002Faction-menu","2.components\u002Faction-menu",{"title":119,"path":120,"stem":121},"App","\u002Fcomponents\u002Fapp","2.components\u002Fapp",{"title":123,"path":124,"stem":125},"Avatar","\u002Fcomponents\u002Favatar","2.components\u002Favatar",{"title":127,"path":128,"stem":129},"Badge","\u002Fcomponents\u002Fbadge","2.components\u002Fbadge",{"title":131,"path":132,"stem":133},"Banner","\u002Fcomponents\u002Fbanner","2.components\u002Fbanner",{"title":135,"path":136,"stem":137},"Breadcrumb","\u002Fcomponents\u002Fbreadcrumb","2.components\u002Fbreadcrumb",{"title":139,"path":140,"stem":141},"Button","\u002Fcomponents\u002Fbutton","2.components\u002Fbutton",{"title":143,"path":144,"stem":145},"Card","\u002Fcomponents\u002Fcard","2.components\u002Fcard",{"title":147,"path":148,"stem":149},"Chart","\u002Fcomponents\u002Fchart","2.components\u002Fchart",{"title":151,"path":152,"stem":153},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002Fcheckbox",{"title":155,"path":156,"stem":157},"Collapsible","\u002Fcomponents\u002Fcollapsible","2.components\u002Fcollapsible",{"title":159,"path":160,"stem":161},"Colorpicker","\u002Fcomponents\u002Fcolorpicker","2.components\u002Fcolorpicker",{"title":163,"path":164,"stem":165},"Container","\u002Fcomponents\u002Fcontainer","2.components\u002Fcontainer",{"title":167,"path":168,"stem":169},"Data Table","\u002Fcomponents\u002Fdata-table","2.components\u002Fdata-table",{"title":171,"path":172,"stem":173},"Datepicker","\u002Fcomponents\u002Fdatepicker","2.components\u002Fdatepicker",{"title":175,"path":176,"stem":177},"Divider","\u002Fcomponents\u002Fdivider","2.components\u002Fdivider",{"title":179,"path":180,"stem":181},"Drawer","\u002Fcomponents\u002Fdrawer","2.components\u002Fdrawer",{"title":183,"path":184,"stem":185},"Email Field","\u002Fcomponents\u002Femail-field","2.components\u002Femail-field",{"title":187,"path":188,"stem":189},"Empty State","\u002Fcomponents\u002Fempty-state","2.components\u002Fempty-state",{"title":191,"path":192,"stem":193},"Entity Data Table","\u002Fcomponents\u002Fentity-data-table","2.components\u002Fentity-data-table",{"title":195,"path":196,"stem":197},"Entity Select","\u002Fcomponents\u002Fentity-select","2.components\u002Fentity-select",{"title":199,"path":200,"stem":201},"Floating UI","\u002Fcomponents\u002Ffloating-ui","2.components\u002Ffloating-ui",{"title":203,"path":204,"stem":205},"Help Text","\u002Fcomponents\u002Fhelp-text","2.components\u002Fhelp-text",{"title":207,"path":208,"stem":209},"Icon","\u002Fcomponents\u002Ficon","2.components\u002Ficon",{"title":211,"path":212,"stem":213},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":215,"path":216,"stem":217},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":219,"path":220,"stem":221},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":223,"path":224,"stem":225},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":227,"path":228,"stem":229},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":231,"path":232,"stem":233},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":235,"path":236,"stem":237},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":239,"path":240,"stem":241},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":243,"path":244,"stem":245},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":247,"path":248,"stem":249},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":251,"path":252,"stem":253},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":255,"path":256,"stem":257},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":259,"path":260,"stem":261},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":263,"path":264,"stem":265},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":267,"path":268,"stem":269},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"title":271,"path":272,"stem":273},"Status Dot","\u002Fcomponents\u002Fstatus-dot","2.components\u002Fstatus-dot",{"title":275,"path":276,"stem":277},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002Fswitch",{"title":279,"path":280,"stem":281},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002Ftabs",{"title":283,"path":284,"stem":285},"Text","\u002Fcomponents\u002Ftext","2.components\u002Ftext",{"title":287,"path":288,"stem":289},"Text Editor","\u002Fcomponents\u002Ftext-editor","2.components\u002Ftext-editor",{"title":291,"path":292,"stem":293},"Text Field","\u002Fcomponents\u002Ftext-field","2.components\u002Ftext-field",{"title":295,"path":296,"stem":297},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002Ftextarea",{"title":299,"path":300,"stem":301},"Theme Select","\u002Fcomponents\u002Ftheme-select","2.components\u002Ftheme-select",{"title":303,"path":304,"stem":305},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":307,"path":308,"stem":309},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":311,"path":312,"stem":313},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":315,"path":316,"stem":317},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":319,"path":320,"stem":321},"User","\u002Fcomponents\u002Fuser","2.components\u002Fuser",{"title":323,"path":324,"stem":325,"children":326,"page":34},"Utilities","\u002Futilities","3.utilities",[327,339,368,376],{"title":53,"path":328,"stem":329,"children":330,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[331,335],{"title":332,"path":333,"stem":334},"Inset","\u002Futilities\u002Fcomponents\u002Finset","3.utilities\u002Fcomponents\u002Finset",{"title":336,"path":337,"stem":338},"Theme Provider","\u002Futilities\u002Fcomponents\u002Ftheme-provider","3.utilities\u002Fcomponents\u002Ftheme-provider",{"title":340,"path":341,"stem":342,"children":343,"page":34},"Composables","\u002Futilities\u002Fcomposables","3.utilities\u002Fcomposables",[344,348,352,356,360,364],{"title":345,"path":346,"stem":347},"useFutureFlags","\u002Futilities\u002Fcomposables\u002Fuse-future-flags","3.utilities\u002Fcomposables\u002Fuse-future-flags",{"title":349,"path":350,"stem":351},"useMtApp","\u002Futilities\u002Fcomposables\u002Fuse-mt-app","3.utilities\u002Fcomposables\u002Fuse-mt-app",{"title":353,"path":354,"stem":355},"useMtAppRegions","\u002Futilities\u002Fcomposables\u002Fuse-mt-app-regions","3.utilities\u002Fcomposables\u002Fuse-mt-app-regions",{"title":357,"path":358,"stem":359},"useServicePermission","\u002Futilities\u002Fcomposables\u002Fuse-service-permission","3.utilities\u002Fcomposables\u002Fuse-service-permission",{"title":361,"path":362,"stem":363},"useSnackbar","\u002Futilities\u002Fcomposables\u002Fuse-snackbar","3.utilities\u002Fcomposables\u002Fuse-snackbar",{"title":365,"path":366,"stem":367},"useTheme","\u002Futilities\u002Fcomposables\u002Fuse-theme","3.utilities\u002Fcomposables\u002Fuse-theme",{"title":369,"path":370,"stem":371,"children":372,"page":34},"Directives","\u002Futilities\u002Fdirectives","3.utilities\u002Fdirectives",[373],{"title":307,"path":374,"stem":375},"\u002Futilities\u002Fdirectives\u002Ftooltip","3.utilities\u002Fdirectives\u002Ftooltip",{"title":377,"path":378,"stem":379,"children":380,"page":34},"Plugins","\u002Futilities\u002Fplugins","3.utilities\u002Fplugins",[381],{"title":382,"path":383,"stem":384},"Device helper","\u002Futilities\u002Fplugins\u002Fdevice-helper","3.utilities\u002Fplugins\u002Fdevice-helper",{"id":386,"title":15,"body":387,"description":1182,"extension":1183,"links":1184,"meta":1185,"navigation":546,"path":16,"seo":1186,"stem":17,"__hash__":1187},"docs\u002F1.documentation\u002F1.getting-started\u002F1.installation.md",{"type":388,"value":389,"toc":1159},"minimark",[390,395,399,410,414,417,421,424,429,443,447,450,481,485,492,606,610,613,726,730,750,859,872,876,893,908,911,914,917,926,929,940,963,966,1037,1040,1047,1050,1059,1063,1082,1086,1091,1138,1142,1152,1155],[391,392,394],"h2",{"id":393},"quick-start-with-ai","Quick Start with AI",[396,397,398],"p",{},"Paste this into your AI coding tool and let it handle the setup:",[400,401,407],"pre",{"className":402,"code":404,"language":405,"meta":406},[403],"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","",[408,409,404],"code",{"__ignoreMap":406},[391,411,413],{"id":412},"manual-setup","Manual setup",[396,415,416],{},"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.",[391,418,420],{"id":419},"component-library","Component library",[396,422,423],{},"The component library builds upon the icon kit and design tokens, and requires Vue 3.",[425,426,428],"h3",{"id":427},"install","Install",[400,430,434],{"className":431,"code":432,"language":433,"meta":406,"style":406},"language-sh shiki shiki-themes github-light github-dark-default github-dark-default","npm install @shopware-ag\u002Fmeteor-component-library\n","sh",[408,435,436],{"__ignoreMap":406},[437,438,441],"span",{"class":439,"line":440},"line",1,[437,442,432],{},[425,444,446],{"id":445},"import-styles","Import styles",[396,448,449],{},"Add both imports to your application entry point.",[400,451,455],{"className":452,"code":453,"language":454,"meta":406,"style":406},"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",[408,456,457,471],{"__ignoreMap":406},[437,458,459,463,467],{"class":439,"line":440},[437,460,462],{"class":461},"sLfaJ","import",[437,464,466],{"class":465},"sL1yV"," \"@shopware-ag\u002Fmeteor-component-library\u002Fstyles.css\"",[437,468,470],{"class":469},"sSgjj",";\n",[437,472,474,476,479],{"class":439,"line":473},2,[437,475,462],{"class":461},[437,477,478],{"class":465}," \"@shopware-ag\u002Fmeteor-component-library\u002Ffont.css\"",[437,480,470],{"class":469},[425,482,484],{"id":483},"configure-i18n","Configure i18n",[396,486,487,488,491],{},"English and German translations are bundled. Register ",[408,489,490],{},"vue-i18n"," before mounting your app.",[400,493,495],{"className":452,"code":494,"language":454,"meta":406,"style":406},"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",[408,496,497,512,526,541,548,574,579],{"__ignoreMap":406},[437,498,499,501,504,507,510],{"class":439,"line":440},[437,500,462],{"class":461},[437,502,503],{"class":469}," { createApp } ",[437,505,506],{"class":461},"from",[437,508,509],{"class":465}," \"vue\"",[437,511,470],{"class":469},[437,513,514,516,519,521,524],{"class":439,"line":473},[437,515,462],{"class":461},[437,517,518],{"class":469}," { createI18n } ",[437,520,506],{"class":461},[437,522,523],{"class":465}," \"vue-i18n\"",[437,525,470],{"class":469},[437,527,529,531,534,536,539],{"class":439,"line":528},3,[437,530,462],{"class":461},[437,532,533],{"class":469}," App ",[437,535,506],{"class":461},[437,537,538],{"class":465}," \".\u002FApp.vue\"",[437,540,470],{"class":469},[437,542,544],{"class":439,"line":543},4,[437,545,547],{"emptyLinePlaceholder":546},true,"\n",[437,549,551,554,558,561,565,568,571],{"class":439,"line":550},5,[437,552,553],{"class":461},"const",[437,555,557],{"class":556},"sfxXV"," i18n",[437,559,560],{"class":461}," =",[437,562,564],{"class":563},"s71ug"," createI18n",[437,566,567],{"class":469},"({ legacy: ",[437,569,570],{"class":556},"false",[437,572,573],{"class":469}," });\n",[437,575,577],{"class":439,"line":576},6,[437,578,547],{"emptyLinePlaceholder":546},[437,580,582,585,588,591,594,597,600,603],{"class":439,"line":581},7,[437,583,584],{"class":563},"createApp",[437,586,587],{"class":469},"(App).",[437,589,590],{"class":563},"use",[437,592,593],{"class":469},"(i18n).",[437,595,596],{"class":563},"mount",[437,598,599],{"class":469},"(",[437,601,602],{"class":465},"\"#app\"",[437,604,605],{"class":469},");\n",[425,607,609],{"id":608},"use-components","Use components",[396,611,612],{},"Components are tree-shakable. Import only what you use.",[400,614,618],{"className":615,"code":616,"language":617,"meta":406,"style":406},"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",[408,619,620,636,650,659,663,672,696,717],{"__ignoreMap":406},[437,621,622,625,629,633],{"class":439,"line":440},[437,623,624],{"class":469},"\u003C",[437,626,628],{"class":627},"sFzZJ","script",[437,630,632],{"class":631},"srQ81"," setup",[437,634,635],{"class":469},">\n",[437,637,638,640,643,645,648],{"class":439,"line":473},[437,639,462],{"class":461},[437,641,642],{"class":469}," { MtButton, MtBanner } ",[437,644,506],{"class":461},[437,646,647],{"class":465}," \"@shopware-ag\u002Fmeteor-component-library\"",[437,649,470],{"class":469},[437,651,652,655,657],{"class":439,"line":528},[437,653,654],{"class":469},"\u003C\u002F",[437,656,628],{"class":627},[437,658,635],{"class":469},[437,660,661],{"class":439,"line":543},[437,662,547],{"emptyLinePlaceholder":546},[437,664,665,667,670],{"class":439,"line":550},[437,666,624],{"class":469},[437,668,669],{"class":627},"template",[437,671,635],{"class":469},[437,673,674,677,680,683,686,689,692,694],{"class":439,"line":576},[437,675,676],{"class":469},"  \u003C",[437,678,679],{"class":627},"MtButton",[437,681,682],{"class":631}," variant",[437,684,685],{"class":469},"=",[437,687,688],{"class":465},"\"primary\"",[437,690,691],{"class":469},">Save\u003C\u002F",[437,693,679],{"class":627},[437,695,635],{"class":469},[437,697,698,700,703,705,707,710,713,715],{"class":439,"line":581},[437,699,676],{"class":469},[437,701,702],{"class":627},"MtBanner",[437,704,682],{"class":631},[437,706,685],{"class":469},[437,708,709],{"class":465},"\"success\"",[437,711,712],{"class":469},">Saved successfully.\u003C\u002F",[437,714,702],{"class":627},[437,716,635],{"class":469},[437,718,720,722,724],{"class":439,"line":719},8,[437,721,654],{"class":469},[437,723,669],{"class":627},[437,725,635],{"class":469},[425,727,729],{"id":728},"application-shell","Application shell",[396,731,732,733,739,740,744,745,749],{},"For a standalone application, make ",[734,735,736],"a",{"href":120},[737,738,119],"strong",{}," the root of your component tree. It lays out the header, both sidebars and the content area, turns the sidebars into drawers below 1280px, applies the color theme, mounts the ",[734,741,742],{"href":268},[737,743,267],{}," host and enables all future flags, so it replaces the ",[734,746,747],{"href":337},[737,748,336],{}," wrapper.",[400,751,753],{"className":615,"code":752,"language":617,"meta":406,"style":406},"\u003Ctemplate>\n  \u003CMtApp>\n    \u003Ctemplate #header>\u003CAppHeader \u002F>\u003C\u002Ftemplate>\n    \u003Ctemplate #sidebar-start>\u003CAppNavigation \u002F>\u003C\u002Ftemplate>\n    \u003Ctemplate #content>\u003CRouterView \u002F>\u003C\u002Ftemplate>\n  \u003C\u002FMtApp>\n\u003C\u002Ftemplate>\n",[408,754,755,763,772,798,820,842,851],{"__ignoreMap":406},[437,756,757,759,761],{"class":439,"line":440},[437,758,624],{"class":469},[437,760,669],{"class":627},[437,762,635],{"class":469},[437,764,765,767,770],{"class":439,"line":473},[437,766,676],{"class":469},[437,768,769],{"class":627},"MtApp",[437,771,635],{"class":469},[437,773,774,777,779,782,785,788,791,794,796],{"class":439,"line":528},[437,775,776],{"class":469},"    \u003C",[437,778,669],{"class":627},[437,780,781],{"class":469}," #",[437,783,784],{"class":631},"header",[437,786,787],{"class":469},">\u003C",[437,789,790],{"class":627},"AppHeader",[437,792,793],{"class":469}," \u002F>\u003C\u002F",[437,795,669],{"class":627},[437,797,635],{"class":469},[437,799,800,802,804,806,809,811,814,816,818],{"class":439,"line":543},[437,801,776],{"class":469},[437,803,669],{"class":627},[437,805,781],{"class":469},[437,807,808],{"class":631},"sidebar-start",[437,810,787],{"class":469},[437,812,813],{"class":627},"AppNavigation",[437,815,793],{"class":469},[437,817,669],{"class":627},[437,819,635],{"class":469},[437,821,822,824,826,828,831,833,836,838,840],{"class":439,"line":550},[437,823,776],{"class":469},[437,825,669],{"class":627},[437,827,781],{"class":469},[437,829,830],{"class":631},"content",[437,832,787],{"class":469},[437,834,835],{"class":627},"RouterView",[437,837,793],{"class":469},[437,839,669],{"class":627},[437,841,635],{"class":469},[437,843,844,847,849],{"class":439,"line":576},[437,845,846],{"class":469},"  \u003C\u002F",[437,848,769],{"class":627},[437,850,635],{"class":469},[437,852,853,855,857],{"class":439,"line":581},[437,854,654],{"class":469},[437,856,669],{"class":627},[437,858,635],{"class":469},[860,861,862,863,867,868,871],"note",{},"The shell claims the full viewport and positions its drawers against it. Use it for applications that own their window, also inside an iframe with a fixed height. Administration extensions and components embedded into an existing page layout keep using the ",[734,864,865],{"href":337},[737,866,336],{}," and their host's layout instead: the Administration already provides header and navigation, and an iframe that its host sizes to its content, such as an Administration location using ",[408,869,870],{},"startAutoResizer()",", cannot hold the shell, because the shell is always exactly one viewport tall.",[425,873,875],{"id":874},"future-flags","Future flags",[396,877,878,879,883,884,887,888,892],{},"Some behavior that will become the default in upcoming major releases is available early behind future flags. ",[734,880,881],{"href":120},[737,882,119],{}," enables all of them by default. Without the shell, opt in through the ",[408,885,886],{},"future"," prop of the ",[734,889,890],{"href":337},[737,891,336],{}," to align your application with the next major and reduce the work when you upgrade.",[860,894,895,896,899,900,904,905,907],{},"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 ",[408,897,898],{},"{ all: true }"," to the ",[734,901,902],{"href":337},[737,903,336],{}," ",[408,906,886],{}," prop whenever your application can accept the risk of visual breaks on future updates.",[391,909,62],{"id":910},"tokens",[396,912,913],{},"The token package is framework-agnostic. Install it independently whenever you need Meteor's design decisions without the component library.",[425,915,428],{"id":916},"install-1",[400,918,920],{"className":431,"code":919,"language":433,"meta":406,"style":406},"npm install @shopware-ag\u002Fmeteor-tokens\n",[408,921,922],{"__ignoreMap":406},[437,923,924],{"class":439,"line":440},[437,925,919],{},[425,927,928],{"id":462},"Import",[396,930,931,932,935,936,939],{},"The light theme defines design tokens via CSS variables on ",[408,933,934],{},":root"," and the dark theme replaces the variable values when ",[408,937,938],{},"data-theme=\"dark\""," is set on elements as an HTML attribute.",[400,941,943],{"className":452,"code":942,"language":454,"meta":406,"style":406},"import \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\";\nimport \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\";\n",[408,944,945,954],{"__ignoreMap":406},[437,946,947,949,952],{"class":439,"line":440},[437,948,462],{"class":461},[437,950,951],{"class":465}," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Flight.css\"",[437,953,470],{"class":469},[437,955,956,958,961],{"class":439,"line":473},[437,957,462],{"class":461},[437,959,960],{"class":465}," \"@shopware-ag\u002Fmeteor-tokens\u002Fadministration\u002Fdark.css\"",[437,962,470],{"class":469},[425,964,965],{"id":590},"Use",[400,967,971],{"className":968,"code":969,"language":970,"meta":406,"style":406},"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",[408,972,973,981,1000,1016,1032],{"__ignoreMap":406},[437,974,975,978],{"class":439,"line":440},[437,976,977],{"class":631},".my-component",[437,979,980],{"class":469}," {\n",[437,982,983,986,989,992,994,998],{"class":439,"line":473},[437,984,985],{"class":556},"  color",[437,987,988],{"class":469},": ",[437,990,991],{"class":556},"var",[437,993,599],{"class":469},[437,995,997],{"class":996},"s8FL_","--color-text-primary-default",[437,999,605],{"class":469},[437,1001,1002,1005,1007,1009,1011,1014],{"class":439,"line":528},[437,1003,1004],{"class":556},"  background",[437,1006,988],{"class":469},[437,1008,991],{"class":556},[437,1010,599],{"class":469},[437,1012,1013],{"class":996},"--color-elevation-surface-default",[437,1015,605],{"class":469},[437,1017,1018,1021,1023,1025,1027,1030],{"class":439,"line":543},[437,1019,1020],{"class":556},"  padding",[437,1022,988],{"class":469},[437,1024,991],{"class":556},[437,1026,599],{"class":469},[437,1028,1029],{"class":996},"--scale-size-16",[437,1031,605],{"class":469},[437,1033,1034],{"class":439,"line":550},[437,1035,1036],{"class":469},"}\n",[391,1038,86],{"id":1039},"icons",[396,1041,1042,1043,1046],{},"The icon kit can be used standalone in any framework as SVGs, or as Vue components via ",[408,1044,1045],{},"mt-icon"," in the component library.",[425,1048,428],{"id":1049},"install-2",[400,1051,1053],{"className":431,"code":1052,"language":433,"meta":406,"style":406},"npm install @shopware-ag\u002Fmeteor-icon-kit\n",[408,1054,1055],{"__ignoreMap":406},[437,1056,1057],{"class":439,"line":440},[437,1058,1052],{},[425,1060,1062],{"id":1061},"import-as-svg","Import as SVG",[400,1064,1066],{"className":452,"code":1065,"language":454,"meta":406,"style":406},"import PlusIcon from \"@shopware-ag\u002Fmeteor-icon-kit\u002Ficons\u002Fregular\u002Fplus.svg\";\n",[408,1067,1068],{"__ignoreMap":406},[437,1069,1070,1072,1075,1077,1080],{"class":439,"line":440},[437,1071,462],{"class":461},[437,1073,1074],{"class":469}," PlusIcon ",[437,1076,506],{"class":461},[437,1078,1079],{"class":465}," \"@shopware-ag\u002Fmeteor-icon-kit\u002Ficons\u002Fregular\u002Fplus.svg\"",[437,1081,470],{"class":469},[425,1083,1085],{"id":1084},"use-with-mt-icon-vue","Use with mt-icon (Vue)",[396,1087,1088,1090],{},[408,1089,1045],{}," is included in the component library and renders any icon by name.",[400,1092,1096],{"className":1093,"code":1094,"language":1095,"meta":406,"style":406},"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",[408,1097,1098,1115],{"__ignoreMap":406},[437,1099,1100,1102,1104,1107,1109,1112],{"class":439,"line":440},[437,1101,624],{"class":469},[437,1103,1045],{"class":627},[437,1105,1106],{"class":631}," name",[437,1108,685],{"class":469},[437,1110,1111],{"class":465},"\"regular-plus\"",[437,1113,1114],{"class":469}," \u002F>\n",[437,1116,1117,1119,1121,1123,1125,1128,1131,1133,1136],{"class":439,"line":473},[437,1118,624],{"class":469},[437,1120,1045],{"class":627},[437,1122,1106],{"class":631},[437,1124,685],{"class":469},[437,1126,1127],{"class":465},"\"solid-checkmark\"",[437,1129,1130],{"class":631}," size",[437,1132,685],{"class":469},[437,1134,1135],{"class":465},"\"20px\"",[437,1137,1114],{"class":469},[391,1139,1141],{"id":1140},"browser-support","Browser support",[396,1143,1144,1145,1151],{},"Meteor targets all major evergreen browsers. Features used in the component library and token package are limited to those with ",[734,1146,1150],{"href":1147,"rel":1148},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FGlossary\u002FBaseline\u002FCompatibility",[1149],"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.",[396,1153,1154],{},"Legacy browsers and non-evergreen environments are not supported.",[1156,1157,1158],"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":406,"searchDepth":473,"depth":473,"links":1160},[1161,1162,1163,1171,1176,1181],{"id":393,"depth":473,"text":394},{"id":412,"depth":473,"text":413},{"id":419,"depth":473,"text":420,"children":1164},[1165,1166,1167,1168,1169,1170],{"id":427,"depth":528,"text":428},{"id":445,"depth":528,"text":446},{"id":483,"depth":528,"text":484},{"id":608,"depth":528,"text":609},{"id":728,"depth":528,"text":729},{"id":874,"depth":528,"text":875},{"id":910,"depth":473,"text":62,"children":1172},[1173,1174,1175],{"id":916,"depth":528,"text":428},{"id":462,"depth":528,"text":928},{"id":590,"depth":528,"text":965},{"id":1039,"depth":473,"text":86,"children":1177},[1178,1179,1180],{"id":1049,"depth":528,"text":428},{"id":1061,"depth":528,"text":1062},{"id":1084,"depth":528,"text":1085},{"id":1140,"depth":473,"text":1141},"Install Meteor's component library, tokens, and icon kit, and set up your project.","md",null,{},{"title":15,"description":1182},"JQuRX9_0Lpmc414JNCMDQ1P-ySKulEEwaoMBxEf4rY0",[1184,1189],{"title":19,"path":20,"stem":21,"description":1190,"children":-1},"Connect AI assistants and tools to the Meteor documentation, through a live MCP server or static machine-readable files.",1791196273868]