[{"data":1,"prerenderedAt":587},["ShallowReactive",2],{"navigation_docs":3,"-components-inset":337,"-components-inset-surround":582},[4,110,294],{"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],{"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},"Inset","\u002Fcomponents\u002Finset","2.components\u002Finset",{"title":195,"path":196,"stem":197},"Link","\u002Fcomponents\u002Flink","2.components\u002Flink",{"title":199,"path":200,"stem":201},"Loader","\u002Fcomponents\u002Floader","2.components\u002Floader",{"title":203,"path":204,"stem":205},"Modal","\u002Fcomponents\u002Fmodal","2.components\u002Fmodal",{"title":207,"path":208,"stem":209},"Number Field","\u002Fcomponents\u002Fnumber-field","2.components\u002Fnumber-field",{"title":211,"path":212,"stem":213},"Pagination","\u002Fcomponents\u002Fpagination","2.components\u002Fpagination",{"title":215,"path":216,"stem":217},"Password Field","\u002Fcomponents\u002Fpassword-field","2.components\u002Fpassword-field",{"title":219,"path":220,"stem":221},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002Fpopover",{"title":223,"path":224,"stem":225},"Progress Bar","\u002Fcomponents\u002Fprogress-bar","2.components\u002Fprogress-bar",{"title":227,"path":228,"stem":229},"Promo Badge","\u002Fcomponents\u002Fpromo-badge","2.components\u002Fpromo-badge",{"title":231,"path":232,"stem":233},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002Fradio-group",{"title":235,"path":236,"stem":237},"Search","\u002Fcomponents\u002Fsearch","2.components\u002Fsearch",{"title":239,"path":240,"stem":241},"Select","\u002Fcomponents\u002Fselect","2.components\u002Fselect",{"title":243,"path":244,"stem":245},"Skeleton Bar","\u002Fcomponents\u002Fskeleton-bar","2.components\u002Fskeleton-bar",{"title":247,"path":248,"stem":249},"Slider","\u002Fcomponents\u002Fslider","2.components\u002Fslider",{"title":251,"path":252,"stem":253},"Snackbar","\u002Fcomponents\u002Fsnackbar","2.components\u002Fsnackbar",{"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},"Toast","\u002Fcomponents\u002Ftoast","2.components\u002Ftoast",{"title":283,"path":284,"stem":285},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002Ftooltip",{"title":287,"path":288,"stem":289},"Unit Field","\u002Fcomponents\u002Funit-field","2.components\u002Funit-field",{"title":291,"path":292,"stem":293},"URL Field","\u002Fcomponents\u002Furl-field","2.components\u002Furl-field",{"title":295,"path":296,"stem":297,"children":298,"page":34},"Utilities","\u002Futilities","3.utilities",[299,307,320,328],{"title":53,"path":300,"stem":301,"children":302,"page":34},"\u002Futilities\u002Fcomponents","3.utilities\u002Fcomponents",[303],{"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":283,"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",{"id":338,"title":191,"body":339,"description":576,"extension":577,"links":578,"meta":579,"navigation":446,"path":192,"seo":580,"stem":193,"__hash__":581},"docs\u002F2.components\u002Finset.md",{"type":340,"value":341,"toc":570},"minimark",[342,347,365,397,401,406,482,486,491,551,555,566],[343,344,346],"h2",{"id":345},"usage","Usage",[348,349,350,353,354,359,360,364],"p",{},[351,352,191],"strong",{}," lets content break out to the edges of a padded container by consuming that container's inset spacing variables. Use it inside a padded surface such as ",[355,356,357],"a",{"href":136},[351,358,135],{},", for example in a ",[361,362,363],"code",{},"footer"," slot that needs its own full-width background, when an inner block should align to the container's outer edges instead of the content padding. Use it only inside components that define the inset spacing variables it consumes.",[366,367,372],"pre",{"className":368,"code":369,"language":370,"meta":371,"style":371},"language-ts shiki shiki-themes github-light github-dark-default github-dark-default","import { MtInset } from \"@shopware-ag\u002Fmeteor-component-library\";\n","ts","",[361,373,374],{"__ignoreMap":371},[375,376,379,383,387,390,394],"span",{"class":377,"line":378},"line",1,[375,380,382],{"class":381},"sLfaJ","import",[375,384,386],{"class":385},"sSgjj"," { MtInset } ",[375,388,389],{"class":381},"from",[375,391,393],{"class":392},"sL1yV"," \"@shopware-ag\u002Fmeteor-component-library\"",[375,395,396],{"class":385},";\n",[343,398,400],{"id":399},"example","Example",[348,402,403,405],{},[351,404,191],{}," has no visual style of its own. It reads the inset spacing variables from its container and applies matching negative margins so its content reaches the container edges:",[366,407,411],{"className":408,"code":409,"language":410,"meta":371,"style":371},"language-vue shiki shiki-themes github-light github-dark-default github-dark-default","\u003Cmt-card title=\"Card title\">\n  Regular padded content.\n\n  \u003Cmt-inset>\n    \u003C!-- Aligns to the card edges instead of the content padding -->\n    Full-bleed block inside the card.\n  \u003C\u002Fmt-inset>\n\u003C\u002Fmt-card>\n","vue",[361,412,413,435,441,448,454,460,466,472],{"__ignoreMap":371},[375,414,415,418,422,426,429,432],{"class":377,"line":378},[375,416,417],{"class":385},"\u003C",[375,419,421],{"class":420},"sFzZJ","mt-card",[375,423,425],{"class":424},"srQ81"," title",[375,427,428],{"class":385},"=",[375,430,431],{"class":392},"\"Card title\"",[375,433,434],{"class":385},">\n",[375,436,438],{"class":377,"line":437},2,[375,439,440],{"class":385},"  Regular padded content.\n",[375,442,444],{"class":377,"line":443},3,[375,445,447],{"emptyLinePlaceholder":446},true,"\n",[375,449,451],{"class":377,"line":450},4,[375,452,453],{"class":385},"  \u003Cmt-inset>\n",[375,455,457],{"class":377,"line":456},5,[375,458,459],{"class":385},"    \u003C!-- Aligns to the card edges instead of the content padding -->\n",[375,461,463],{"class":377,"line":462},6,[375,464,465],{"class":385},"    Full-bleed block inside the card.\n",[375,467,469],{"class":377,"line":468},7,[375,470,471],{"class":385},"  \u003C\u002Fmt-inset>\n",[375,473,475,478,480],{"class":377,"line":474},8,[375,476,477],{"class":385},"\u003C\u002F",[375,479,421],{"class":420},[375,481,434],{"class":385},[343,483,485],{"id":484},"css-variables","CSS variables",[348,487,488,490],{},[351,489,191],{}," pulls each edge outward by the amount its container sets on these variables. A container that does not define them (the default) leaves the content in place.",[492,493,494,507],"table",{},[495,496,497],"thead",{},[498,499,500,504],"tr",{},[501,502,503],"th",{},"Variable",[501,505,506],{},"Effect",[508,509,510,521,531,541],"tbody",{},[498,511,512,518],{},[513,514,515],"td",{},[361,516,517],{},"--mt-inset-block-start",[513,519,520],{},"Pulls the top edge out",[498,522,523,528],{},[513,524,525],{},[361,526,527],{},"--mt-inset-inline-end",[513,529,530],{},"Pulls the right edge out",[498,532,533,538],{},[513,534,535],{},[361,536,537],{},"--mt-inset-block-end",[513,539,540],{},"Pulls the bottom edge out",[498,542,543,548],{},[513,544,545],{},[361,546,547],{},"--mt-inset-inline-start",[513,549,550],{},"Pulls the left edge out",[343,552,554],{"id":553},"related-components","Related components",[556,557,558],"ul",{},[559,560,561,565],"li",{},[355,562,563],{"href":136},[351,564,135],{},": when you need the full bordered surface with a header, content, and footer that defines the inset spacing for you.",[567,568,569],"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);}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}",{"title":371,"searchDepth":437,"depth":437,"links":571},[572,573,574,575],{"id":345,"depth":437,"text":346},{"id":399,"depth":437,"text":400},{"id":484,"depth":437,"text":485},{"id":553,"depth":437,"text":554},"A layout utility that lets content break out to the edges of a padded container, such as a Card, by consuming the container's inset spacing variables.","md",null,{},{"title":191,"description":576},"pjXRcAP0tnlJ-o06jTQgtZ_oZYLXvJs0DztEK7kOIWU",[583,585],{"title":187,"path":188,"stem":189,"description":584,"children":-1},"An SVG glyph from the Meteor icon kit for interface affordances, status cues, and supporting visuals.",{"title":195,"path":196,"stem":197,"description":586,"children":-1},"A text-level navigation control that moves users to another page, route, or destination.",1783241645389]