[{"data":1,"prerenderedAt":1586},["ShallowReactive",2],{"navigation_docs":3,"-documentation-guidelines-components":337,"-documentation-guidelines-components-surround":1581},[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":53,"body":339,"description":1574,"extension":1575,"links":1576,"meta":1577,"navigation":1578,"path":54,"seo":1579,"stem":55,"__hash__":1580},"docs\u002F1.documentation\u002F2.guidelines\u002F4.components.md",{"type":340,"value":341,"toc":1558},"minimark",[342,346,351,359,369,380,384,488,501,912,916,930,933,1039,1042,1090,1097,1131,1135,1142,1153,1283,1296,1310,1314,1325,1378,1381,1385,1401,1407,1410,1420,1423,1426,1435,1442,1445,1448,1468,1472,1475,1480,1483,1486,1490,1493,1496,1510,1513,1517,1520,1523,1527,1530,1537,1543,1549,1555],[343,344,345],"p",{},"Consistency is what lets a library of parts feel like one system. The conventions below apply whenever you add a new component or change an existing one.",[347,348,350],"h2",{"id":349},"naming-and-file-structure","Naming and file structure",[343,352,353,354,358],{},"Every component uses the ",[355,356,357],"code",{},"mt-"," prefix and kebab-case. The component name, its folder, and its primary file all share the same name.",[360,361,366],"pre",{"className":362,"code":364,"language":365},[363],"language-text","mt-button\u002F\n  mt-button.vue\n  mt-button.stories.ts\n  mt-button.interactive.stories.ts\n  mt-button.spec.ts\n","text",[355,367,364],{"__ignoreMap":368},"",[343,370,371,372,375,376,379],{},"Add ",[355,373,374],{},"sub-components\u002F"," only when the component uses the compound pattern. Add ",[355,377,378],{},"composables\u002F"," when the component extracts logic into composables. Do not create either folder preemptively.",[347,381,383],{"id":382},"props","Props",[385,386,387,419,440,461,470,485],"ul",{},[388,389,390,391,394,395,398,399,402,403,406,407,410,411,414,415,418],"li",{},"Props use camelCase. Plural nouns for arrays (",[355,392,393],{},"items","), singular for objects (",[355,396,397],{},"item","), ",[355,400,401],{},"num"," prefix or ",[355,404,405],{},"Count","\u002F",[355,408,409],{},"Index"," suffix for numbers (",[355,412,413],{},"numColumns",", ",[355,416,417],{},"activeIndex",").",[388,420,421,422,414,425,414,428,431,432,435,436,439],{},"Boolean props use plain adjectives with no prefix: ",[355,423,424],{},"loading",[355,426,427],{},"open",[355,429,430],{},"disabled",". Avoid inverted booleans: ",[355,433,434],{},"showIcon"," not ",[355,437,438],{},"hideIcon",".",[388,441,442,443,446,447,450,451,414,453,456,457,460],{},"Avoid native HTML attribute names. Use ",[355,444,445],{},"heading"," instead of ",[355,448,449],{},"title",". ",[355,452,430],{},[355,454,455],{},"required",", and ",[355,458,459],{},"readonly"," are intentional exceptions.",[388,462,463,464,435,467,439],{},"Name props from the component's perspective, not the caller's: ",[355,465,466],{},"hasSubmitButton",[355,468,469],{},"hasSubmitPermission",[388,471,472,473,476,477,480,481,484],{},"Never use ",[355,474,475],{},"\"default\""," as a named prop value. Set the default via ",[355,478,479],{},"defineProps","'s ",[355,482,483],{},"default"," option.",[388,486,487],{},"Prefer slots over props for content that may contain markup.",[343,489,490,491,414,494,497,498,439],{},"Use the standard prop names below consistently. Never substitute alternatives like ",[355,492,493],{},"type",[355,495,496],{},"kind",", or ",[355,499,500],{},"style",[502,503,504,520],"table",{},[505,506,507],"thead",{},[508,509,510,514,517],"tr",{},[511,512,513],"th",{},"Prop",[511,515,516],{},"Purpose",[511,518,519],{},"Values \u002F Type",[521,522,523,552,573,594,630,661,691,724,740,753,765,777,789,800,814,829,841,852,863,874,885,897],"tbody",{},[508,524,525,531,534],{},[526,527,528],"td",{},[355,529,530],{},"variant",[526,532,533],{},"Semantic intent \u002F feedback tone",[526,535,536,539,540,539,543,539,546,539,549],{},[355,537,538],{},"neutral"," ",[355,541,542],{},"info",[355,544,545],{},"attention",[355,547,548],{},"critical",[355,550,551],{},"positive",[508,553,554,559,562],{},[526,555,556],{},[355,557,558],{},"appearance",[526,560,561],{},"Visual hierarchy for interactive components",[526,563,564,539,567,539,570],{},[355,565,566],{},"primary",[355,568,569],{},"secondary",[355,571,572],{},"tertiary",[508,574,575,580,583],{},[526,576,577],{},[355,578,579],{},"shape",[526,581,582],{},"Geometric shape variant",[526,584,585,539,588,539,591],{},[355,586,587],{},"circle",[355,589,590],{},"square",[355,592,593],{},"pill",[508,595,596,601,604],{},[526,597,598],{},[355,599,600],{},"size",[526,602,603],{},"Dimension",[526,605,606,539,609,539,612,539,615,539,618,539,621,539,624,539,627],{},[355,607,608],{},"2xs",[355,610,611],{},"xs",[355,613,614],{},"s",[355,616,617],{},"m",[355,619,620],{},"l",[355,622,623],{},"xl",[355,625,626],{},"2xl",[355,628,629],{},"3xl",[508,631,632,637,640],{},[526,633,634],{},[355,635,636],{},"width",[526,638,639],{},"Explicit width constraint",[526,641,642,539,644,539,646,539,648,539,650,539,652,539,654,539,656,539,658],{},[355,643,608],{},[355,645,611],{},[355,647,614],{},[355,649,617],{},[355,651,620],{},[355,653,623],{},[355,655,626],{},[355,657,629],{},[355,659,660],{},"full",[508,662,663,668,671],{},[526,664,665],{},[355,666,667],{},"height",[526,669,670],{},"Explicit height constraint",[526,672,673,539,675,539,677,539,679,539,681,539,683,539,685,539,687,539,689],{},[355,674,608],{},[355,676,611],{},[355,678,614],{},[355,680,617],{},[355,682,620],{},[355,684,623],{},[355,686,626],{},[355,688,629],{},[355,690,660],{},[508,692,693,698,701],{},[526,694,695],{},[355,696,697],{},"placement",[526,699,700],{},"Floating element anchor position",[526,702,703,539,706,539,709,539,712,715,716,719,720,723],{},[355,704,705],{},"top",[355,707,708],{},"bottom",[355,710,711],{},"left",[355,713,714],{},"right"," + ",[355,717,718],{},"-start"," \u002F ",[355,721,722],{},"-end"," variants",[508,725,726,731,737],{},[526,727,728],{},[355,729,730],{},"modelValue",[526,732,733,734],{},"Primary bound value, enables ",[355,735,736],{},"v-model",[526,738,739],{},"any",[508,741,742,747,750],{},[526,743,744],{},[355,745,746],{},"label",[526,748,749],{},"Visible label for a field or control",[526,751,752],{},"string",[508,754,755,760,763],{},[526,756,757],{},[355,758,759],{},"placeholder",[526,761,762],{},"Input placeholder text",[526,764,752],{},[508,766,767,772,775],{},[526,768,769],{},[355,770,771],{},"helpText",[526,773,774],{},"Helper text below a field",[526,776,752],{},[508,778,779,784,787],{},[526,780,781],{},[355,782,783],{},"name",[526,785,786],{},"Form field name attribute",[526,788,752],{},[508,790,791,795,798],{},[526,792,793],{},[355,794,445],{},[526,796,797],{},"Heading of a card, modal, or section",[526,799,752],{},[508,801,802,807,812],{},[526,803,804],{},[355,805,806],{},"subtitle",[526,808,809,810],{},"Secondary heading below ",[355,811,445],{},[526,813,752],{},[508,815,816,821,824],{},[526,817,818],{},[355,819,820],{},"error",[526,822,823],{},"Validation error for a field",[526,825,826],{},[355,827,828],{},"{ code?: number; detail: string }",[508,830,831,835,838],{},[526,832,833],{},[355,834,430],{},[526,836,837],{},"Prevents interaction",[526,839,840],{},"boolean",[508,842,843,847,850],{},[526,844,845],{},[355,846,455],{},[526,848,849],{},"Marks a field as required",[526,851,840],{},[508,853,854,858,861],{},[526,855,856],{},[355,857,459],{},[526,859,860],{},"Allows reading but not editing",[526,862,840],{},[508,864,865,869,872],{},[526,866,867],{},[355,868,424],{},[526,870,871],{},"Shows a loading state",[526,873,840],{},[508,875,876,880,883],{},[526,877,878],{},[355,879,427],{},[526,881,882],{},"Controls open\u002Fexpanded state",[526,884,840],{},[508,886,887,892,895],{},[526,888,889],{},[355,890,891],{},"closable",[526,893,894],{},"Shows a dismiss \u002F close control",[526,896,840],{},[508,898,899,904,907],{},[526,900,901],{},[355,902,903],{},"as",[526,905,906],{},"Polymorphic root element override",[526,908,909],{},[355,910,911],{},"string | Component",[347,913,915],{"id":914},"slots","Slots",[343,917,918,919,406,922,925,926,406,928,418],{},"All slot names use kebab-case without exception. Use logical direction names that are RTL-safe rather than physical ones (",[355,920,921],{},"start",[355,923,924],{},"end"," over ",[355,927,711],{},[355,929,714],{},[343,931,932],{},"Standard positional slot names:",[502,934,935,944],{},[505,936,937],{},[508,938,939,942],{},[511,940,941],{},"Slot",[511,943,516],{},[521,945,946,955,965,975,985,995,1005,1015,1029],{},[508,947,948,952],{},[526,949,950],{},[355,951,483],{},[526,953,954],{},"Primary content area. Always provide unless the component has none",[508,956,957,962],{},[526,958,959],{},[355,960,961],{},"leading",[526,963,964],{},"Icon or element flanking the component's primary content from the outside",[508,966,967,972],{},[526,968,969],{},[355,970,971],{},"trailing",[526,973,974],{},"Icon or element flanking the component's primary content from the outside, on the end side",[508,976,977,982],{},[526,978,979],{},[355,980,981],{},"prefix",[526,983,984],{},"Content rendered inside an input field boundary at the start (e.g. currency symbol)",[508,986,987,992],{},[526,988,989],{},[355,990,991],{},"suffix",[526,993,994],{},"Content rendered inside an input field boundary at the end (e.g. unit label)",[508,996,997,1002],{},[526,998,999],{},[355,1000,1001],{},"header-start",[526,1003,1004],{},"Left region of a header row",[508,1006,1007,1012],{},[526,1008,1009],{},[355,1010,1011],{},"header-end",[526,1013,1014],{},"Right region of a header row",[508,1016,1017,1022],{},[526,1018,1019],{},[355,1020,1021],{},"trigger",[526,1023,1024,1025,1028],{},"Element that opens an overlay or compound component. Receives ",[355,1026,1027],{},"{ open }"," scoped state",[508,1030,1031,1036],{},[526,1032,1033],{},[355,1034,1035],{},"footer",[526,1037,1038],{},"Bottom region of a card, modal, or panel",[343,1040,1041],{},"Use scoped slots to expose internal state that consumers may need to react to:",[360,1043,1047],{"className":1044,"code":1045,"language":1046,"meta":368,"style":368},"language-vue shiki shiki-themes github-light github-dark-default github-dark-default","\u003Cslot name=\"default\" :open=\"open\" \u002F>\n","vue",[355,1048,1049],{"__ignoreMap":368},[1050,1051,1054,1058,1062,1066,1069,1072,1075,1077,1079,1083,1085,1087],"span",{"class":1052,"line":1053},"line",1,[1050,1055,1057],{"class":1056},"sSgjj","\u003C",[1050,1059,1061],{"class":1060},"sFzZJ","slot",[1050,1063,1065],{"class":1064},"srQ81"," name",[1050,1067,1068],{"class":1056},"=",[1050,1070,475],{"class":1071},"sL1yV",[1050,1073,1074],{"class":1056}," :",[1050,1076,427],{"class":1064},[1050,1078,1068],{"class":1056},[1050,1080,1082],{"class":1081},"s-CWP","\"",[1050,1084,427],{"class":1056},[1050,1086,1082],{"class":1081},[1050,1088,1089],{"class":1056}," \u002F>\n",[343,1091,1092,1093,1096],{},"Mark internal-only slots with ",[355,1094,1095],{},"@private",":",[360,1098,1100],{"className":1044,"code":1099,"language":1046,"meta":368,"style":368},"\u003C!-- @private -->\n\u003Cslot name=\"before-card\" \u002F>\n",[355,1101,1102,1115],{"__ignoreMap":368},[1050,1103,1104,1108,1112],{"class":1052,"line":1053},[1050,1105,1107],{"class":1106},"sVYXU","\u003C!-- @",[1050,1109,1111],{"class":1110},"sLfaJ","private",[1050,1113,1114],{"class":1106}," -->\n",[1050,1116,1118,1120,1122,1124,1126,1129],{"class":1052,"line":1117},2,[1050,1119,1057],{"class":1056},[1050,1121,1061],{"class":1060},[1050,1123,1065],{"class":1064},[1050,1125,1068],{"class":1056},[1050,1127,1128],{"class":1071},"\"before-card\"",[1050,1130,1089],{"class":1056},[347,1132,1134],{"id":1133},"events","Events",[343,1136,1137,1138,1141],{},"Events use kebab-case. Two-way binding follows Vue's ",[355,1139,1140],{},"update:propName"," pattern. Custom events are verbs or verb-object phrases.",[343,1143,1144,1145,1148,1149,1152],{},"Always declare every event in ",[355,1146,1147],{},"defineEmits",". Undeclared ",[355,1150,1151],{},"$emit"," calls are a maintenance hazard and break TypeScript consumers.",[360,1154,1158],{"className":1155,"code":1156,"language":1157,"meta":368,"style":368},"language-ts shiki shiki-themes github-light github-dark-default github-dark-default","const emit = defineEmits\u003C{\n  \"update:modelValue\": [value: string];\n  \"update:open\": [value: boolean];\n  \"item-activate\": [item: Item];\n  focus: [event: FocusEvent];\n  blur: [event: FocusEvent];\n}>();\n","ts",[355,1159,1160,1179,1201,1219,1238,1259,1277],{"__ignoreMap":368},[1050,1161,1162,1165,1169,1172,1176],{"class":1052,"line":1053},[1050,1163,1164],{"class":1110},"const",[1050,1166,1168],{"class":1167},"sfxXV"," emit",[1050,1170,1171],{"class":1110}," =",[1050,1173,1175],{"class":1174},"s71ug"," defineEmits",[1050,1177,1178],{"class":1056},"\u003C{\n",[1050,1180,1181,1184,1186,1189,1193,1196,1198],{"class":1052,"line":1117},[1050,1182,1183],{"class":1071},"  \"update:modelValue\"",[1050,1185,1096],{"class":1110},[1050,1187,1188],{"class":1056}," [",[1050,1190,1192],{"class":1191},"s0wlp","value",[1050,1194,1195],{"class":1056},": ",[1050,1197,752],{"class":1167},[1050,1199,1200],{"class":1056},"];\n",[1050,1202,1204,1207,1209,1211,1213,1215,1217],{"class":1052,"line":1203},3,[1050,1205,1206],{"class":1071},"  \"update:open\"",[1050,1208,1096],{"class":1110},[1050,1210,1188],{"class":1056},[1050,1212,1192],{"class":1191},[1050,1214,1195],{"class":1056},[1050,1216,840],{"class":1167},[1050,1218,1200],{"class":1056},[1050,1220,1222,1225,1227,1229,1231,1233,1236],{"class":1052,"line":1221},4,[1050,1223,1224],{"class":1071},"  \"item-activate\"",[1050,1226,1096],{"class":1110},[1050,1228,1188],{"class":1056},[1050,1230,397],{"class":1191},[1050,1232,1195],{"class":1056},[1050,1234,1235],{"class":1191},"Item",[1050,1237,1200],{"class":1056},[1050,1239,1241,1245,1247,1249,1252,1254,1257],{"class":1052,"line":1240},5,[1050,1242,1244],{"class":1243},"s8FL_","  focus",[1050,1246,1096],{"class":1110},[1050,1248,1188],{"class":1056},[1050,1250,1251],{"class":1191},"event",[1050,1253,1195],{"class":1056},[1050,1255,1256],{"class":1191},"FocusEvent",[1050,1258,1200],{"class":1056},[1050,1260,1262,1265,1267,1269,1271,1273,1275],{"class":1052,"line":1261},6,[1050,1263,1264],{"class":1243},"  blur",[1050,1266,1096],{"class":1110},[1050,1268,1188],{"class":1056},[1050,1270,1251],{"class":1191},[1050,1272,1195],{"class":1056},[1050,1274,1256],{"class":1191},[1050,1276,1200],{"class":1056},[1050,1278,1280],{"class":1052,"line":1279},7,[1050,1281,1282],{"class":1056},"}>();\n",[343,1284,1285,1286,1288,1289,1292,1293,439],{},"Pair every two-way prop with a matching ",[355,1287,1140],{}," event. Never use a ",[355,1290,1291],{},"change"," event as a substitute for ",[355,1294,1295],{},"update:modelValue",[343,1297,1298,1299,1302,1303,1306,1307,1309],{},"Never re-emit raw DOM events directly. The one permitted exception is ",[355,1300,1301],{},"focus"," and ",[355,1304,1305],{},"blur"," on form field components: consumers need the ",[355,1308,1256],{}," object for custom validation timing and there is no semantic equivalent.",[347,1311,1313],{"id":1312},"css","CSS",[343,1315,1316,1317,1320,1321,1324],{},"Classes follow BEM: ",[355,1318,1319],{},"mt-{component}__element"," for sub-parts and ",[355,1322,1323],{},"mt-{component}--modifier"," for variants and states.",[360,1326,1329],{"className":1327,"code":1328,"language":1312,"meta":368,"style":368},"language-css shiki shiki-themes github-light github-dark-default github-dark-default",".mt-button {\n}\n.mt-button__content {\n}\n.mt-button--primary {\n}\n.mt-button--disabled {\n}\n",[355,1330,1331,1339,1344,1351,1355,1362,1366,1373],{"__ignoreMap":368},[1050,1332,1333,1336],{"class":1052,"line":1053},[1050,1334,1335],{"class":1064},".mt-button",[1050,1337,1338],{"class":1056}," {\n",[1050,1340,1341],{"class":1052,"line":1117},[1050,1342,1343],{"class":1056},"}\n",[1050,1345,1346,1349],{"class":1052,"line":1203},[1050,1347,1348],{"class":1064},".mt-button__content",[1050,1350,1338],{"class":1056},[1050,1352,1353],{"class":1052,"line":1221},[1050,1354,1343],{"class":1056},[1050,1356,1357,1360],{"class":1052,"line":1240},[1050,1358,1359],{"class":1064},".mt-button--primary",[1050,1361,1338],{"class":1056},[1050,1363,1364],{"class":1052,"line":1261},[1050,1365,1343],{"class":1056},[1050,1367,1368,1371],{"class":1052,"line":1279},[1050,1369,1370],{"class":1064},".mt-button--disabled",[1050,1372,1338],{"class":1056},[1050,1374,1376],{"class":1052,"line":1375},8,[1050,1377,1343],{"class":1056},[343,1379,1380],{},"Always use design tokens for colors, spacing, typography, and border radii. Never hardcode values that a token covers. This ensures components respond correctly to theme changes.",[347,1382,1384],{"id":1383},"compound-components","Compound components",[343,1386,1387,1388,1391,1392,1394,1395,406,1398,439],{},"Use the compound component pattern when a component requires coordinated sub-parts that consumers may want to compose independently. Sub-components are named ",[355,1389,1390],{},"mt-{parent}-{role}",". Shared state lives in a composable under ",[355,1393,378],{}," and is distributed via ",[355,1396,1397],{},"provide",[355,1399,1400],{},"inject",[360,1402,1405],{"className":1403,"code":1404,"language":365},[363],"mt-modal\u002F\n  mt-modal.vue\n  sub-components\u002F\n    mt-modal-trigger.vue\n    mt-modal-close.vue\n    mt-modal-action.vue\n  composables\u002F\n    useModalContext.ts\n",[355,1406,1404],{"__ignoreMap":368},[343,1408,1409],{},"Export all public sub-components from the package index alongside the parent.",[1411,1412,1413,1417],"do-dont",{},[1414,1415,1416],"template",{"v-slot:do":368},"mt-modal + mt-modal-trigger + mt-modal-action composed by the consumer",[1414,1418,1419],{"v-slot:dont":368},"one mt-modal with props: showTrigger, triggerLabel, showCloseButton, footerButtonLabel, ...",[347,1421,45],{"id":1422},"accessibility",[343,1424,1425],{},"Every interactive component must be keyboard-navigable and work with a screen reader out of the box. Use semantic HTML elements as the base. Apply ARIA attributes only when native semantics are insufficient.",[343,1427,1428,1429,414,1432,1434],{},"Form controls must always render a visible, associated label. Loading and disabled states must be communicated via the appropriate HTML attributes (",[355,1430,1431],{},"aria-busy",[355,1433,430],{},") so assistive technology can announce them without relying on visual cues alone.",[343,1436,1437,1438,1441],{},"For detailed accessibility requirements and patterns, see the ",[1439,1440,45],"a",{"href":46}," page.",[347,1443,5],{"id":1444},"documentation",[343,1446,1447],{},"A component is built and verified in Storybook first, then documented on this site.",[1449,1450,1451,1458],"ol",{},[388,1452,1453,1454,1457],{},"Ship a ",[355,1455,1456],{},".stories.ts"," file with the component and write its tests. Stories cover all significant variants and states, and at least one interactive story exercises the primary user flow.",[388,1459,1460,1461,1467],{},"Once the component and its stories are in place, document it on this docs site: add a page with live examples, an API reference, and usage guidance. Follow the ",[1439,1462,1466],{"href":1463,"rel":1464},"https:\u002F\u002Fgithub.com\u002Fshopware\u002Fmeteor\u002Fblob\u002Fmain\u002Fapps\u002Fdocs\u002FDOCS_STANDARD.md",[1465],"nofollow","content standard"," for the page structure and conventions.",[347,1469,1471],{"id":1470},"component-lifecycle","Component lifecycle",[343,1473,1474],{},"Meteor components have one of three lifecycle states: Experimental, Stable, or Deprecated. The state tells consumers how much they can rely on the component's API and behavior.",[1476,1477,1479],"h3",{"id":1478},"experimental","Experimental",[343,1481,1482],{},"Experimental components are available for early use, but their API and behavior are not stable yet. Use them when they solve your problem, but expect that props, events, slots, visual behavior, or accessibility details may still change.",[343,1484,1485],{},"During this stage, we test new ideas and gather feedback. If a component is not useful enough to become Stable, we may remove it in a future release. Breaking changes can happen without notice beforehand.",[1476,1487,1489],{"id":1488},"stable","Stable",[343,1491,1492],{},"Stable components are ready for production use.",[343,1494,1495],{},"A component can move to Stable when:",[385,1497,1498,1501,1504,1507],{},[388,1499,1500],{},"it is covered by automated tests",[388,1502,1503],{},"it uses Meteor Design Tokens",[388,1505,1506],{},"it meets WCAG 2.1 AA requirements",[388,1508,1509],{},"it has documentation and usage examples",[343,1511,1512],{},"Breaking changes to Stable components are documented at least one patch version before a major release.",[1476,1514,1516],{"id":1515},"deprecated","Deprecated",[343,1518,1519],{},"Deprecated components are still available, but should no longer be used for new work.",[343,1521,1522],{},"When possible, we provide an alternative and migration guidance. Deprecated components are removed in the next major version.",[347,1524,1526],{"id":1525},"adding-new-components","Adding new components",[343,1528,1529],{},"Meteor does not cover every component every team will ever need. When you hit a gap, follow this process.",[343,1531,1532,1536],{},[1533,1534,1535],"strong",{},"1. Build it locally first."," Build the component in your own app. Local implementations ship faster and let you validate the design and API in a real product context before committing to a shared interface.",[343,1538,1539,1542],{},[1533,1540,1541],{},"2. Inform the Meteor team."," Once the component is stable and in use, let the Meteor team know via a GitHub issue or the dedicated Slack channel. Share what the component does, where it is used, and any design decisions you made along the way.",[343,1544,1545,1548],{},[1533,1546,1547],{},"3. The Meteor team evaluates the fit."," The team will assess whether the component belongs in Meteor or should stay local. Not every component needs to be global. Some are too product-specific, too narrow in scope, or not yet stable enough to expose as a shared API.",[343,1550,1551,1554],{},[1533,1552,1553],{},"4. Promotion from local to global."," If the same component surfaces independently across multiple products, that is a strong signal it belongs in Meteor. The team tracks these patterns and will take ownership of the migration when the time is right. Your local implementation becomes the foundation for the global version.",[500,1556,1557],{},"html pre.shiki code .sSgjj, html code.shiki .sSgjj{--shiki-light:#24292E;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}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 .sL1yV, html code.shiki .sL1yV{--shiki-light:#032F62;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .s-CWP, html code.shiki .s-CWP{--shiki-light:#032F62;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}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 .sVYXU, html code.shiki .sVYXU{--shiki-light:#6A737D;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .sLfaJ, html code.shiki .sLfaJ{--shiki-light:#D73A49;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}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 .s0wlp, html code.shiki .s0wlp{--shiki-light:#6F42C1;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .s8FL_, html code.shiki .s8FL_{--shiki-light:#E36209;--shiki-default:#FFA657;--shiki-dark:#FFA657}",{"title":368,"searchDepth":1117,"depth":1117,"links":1559},[1560,1561,1562,1563,1564,1565,1566,1567,1568,1573],{"id":349,"depth":1117,"text":350},{"id":382,"depth":1117,"text":383},{"id":914,"depth":1117,"text":915},{"id":1133,"depth":1117,"text":1134},{"id":1312,"depth":1117,"text":1313},{"id":1383,"depth":1117,"text":1384},{"id":1422,"depth":1117,"text":45},{"id":1444,"depth":1117,"text":5},{"id":1470,"depth":1117,"text":1471,"children":1569},[1570,1571,1572],{"id":1478,"depth":1203,"text":1479},{"id":1488,"depth":1203,"text":1489},{"id":1515,"depth":1203,"text":1516},{"id":1525,"depth":1117,"text":1526},"Conventions for how Meteor components are structured, named, and built when contributing or updating a component.","md",null,{},true,{"title":53,"description":1574},"kLvupbSNCsSWS3fDDhFf_smldWnJjveExNQd2TaWpi8",[1582,1584],{"title":49,"path":50,"stem":51,"description":1583,"children":-1},"Guidelines for how interactive elements communicate availability, affordance, and system response across input methods.",{"title":62,"path":63,"stem":64,"description":1585,"children":-1},"Standardized name-value pairs that encode Meteor's design decisions for color, typography, spacing, and more.",1783088848718]