[{"data":1,"prerenderedAt":564},["ShallowReactive",2],{"navigation_docs":3,"-documentation-guidelines-interactions":337,"-documentation-guidelines-interactions-surround":559},[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":49,"body":339,"description":552,"extension":553,"links":554,"meta":555,"navigation":556,"path":50,"seo":557,"stem":51,"__hash__":558},"docs\u002F1.documentation\u002F2.guidelines\u002F3.interactions.md",{"type":340,"value":341,"toc":541},"minimark",[342,346,349,354,357,395,399,402,405,408,412,415,436,440,443,450,472,476,479,482,510,513,518,521,528,531,537],[343,344,345],"p",{},"Every interactive element should communicate clearly whether it can be used, what will happen if it is used, and whether the system has responded. Getting this right reduces hesitation and builds trust in the interface.",[347,348],"interaction-states",{},[350,351,353],"h2",{"id":352},"input-methods","Input methods",[343,355,356],{},"Design and test with all four input methods in mind.",[358,359,360,373,379,385],"ul",{},[361,362,363,367,368,372],"li",{},[364,365,366],"strong",{},"Mouse:"," Hover states must appear immediately. Hit areas should be comfortably large. Use ",[369,370,371],"code",{},"cursor: pointer"," to signal interactivity.",[361,374,375,378],{},[364,376,377],{},"Keyboard:"," Every element must be reachable by Tab and operable with Enter or Space. Focus order should follow reading order. Never suppress the focus ring.",[361,380,381,384],{},[364,382,383],{},"Touch:"," Targets must be at least 40x40px. Hover states do not exist; never gate actions or labels behind hover.",[361,386,387,390,391,394],{},[364,388,389],{},"Voice:"," Every control needs a meaningful visible label. Icon-only buttons must have an ",[369,392,393],{},"aria-label"," matching what a user would say to activate it.",[350,396,398],{"id":397},"communicating-affordance","Communicating affordance",[343,400,401],{},"Before a user commits to an action, they need enough information to feel confident doing so. Labels, icons, and placement do most of this work. Interaction states reinforce it.",[343,403,404],{},"An element at rest should look clickable if it is clickable. Rely on shape, labeling, and context (not just color) to establish this. Hover and focus states then confirm the expectation once the user moves toward the element.",[343,406,407],{},"Unavailable actions should remain visible but clearly inactive. A disabled state that is invisible or easy to overlook leaves users stuck without knowing why. Where possible, accompany a disabled element with an explanation nearby: a tooltip, helper text, or contextual message.",[350,409,411],{"id":410},"responding-to-input","Responding to input",[343,413,414],{},"Once a user acts, the interface should respond immediately. Even if the operation takes time, the system should acknowledge the input right away.",[358,416,417,427,433],{},[361,418,419,420,423,424,426],{},"For operations that take time, show a ",[421,422,199],"a",{"href":200}," or ",[421,425,223],{"href":224}," so the user knows work is in progress.",[361,428,429,430,432],{},"For completed actions that do not require a new page or view, use a ",[421,431,251],{"href":252}," to confirm the outcome without interrupting the flow.",[361,434,435],{},"For failures, explain what went wrong and what the user can do to resolve it. Surface errors close to where the problem occurred rather than in a generic top-level message.",[350,437,439],{"id":438},"critical-actions","Critical actions",[343,441,442],{},"Actions that are destructive or irreversible must be marked clearly so users can make an informed decision before confirming.",[343,444,445,446,449],{},"Use the ",[369,447,448],{},"critical"," variant on components and the corresponding critical color tokens for any action that deletes, removes, or permanently changes data. This applies to the trigger element as well as any confirmation dialog that follows.",[358,451,452,459,469],{},[361,453,454,455,458],{},"Use ",[369,456,457],{},"--color-interaction-critical-default"," and its state variants for interactive controls.",[361,460,454,461,464,465,468],{},[369,462,463],{},"--color-text-critical-*"," and ",[369,466,467],{},"--color-icon-critical-*"," tokens for supporting text, icons, and inline warnings.",[361,470,471],{},"Always pair a critical action with a confirmation step. Never trigger a destructive operation on a single click.",[350,473,475],{"id":474},"focus-ring","Focus ring",[343,477,478],{},"The focus ring is the primary visual signal for keyboard navigation. It must always be visible.",[343,480,481],{},"Meteor's standard focus ring:",[483,484,489],"pre",{"className":485,"code":486,"language":487,"meta":488,"style":488},"language-css shiki shiki-themes github-light github-dark-default github-dark-default","outline: 2px solid var(--color-border-brand-default);\noutline-offset: 2px;\n","css","",[369,490,491,500],{"__ignoreMap":488},[492,493,496],"span",{"class":494,"line":495},"line",1,[492,497,499],{"class":498},"sSgjj","outline: 2px solid var(--color-border-brand-default);\n",[492,501,503,507],{"class":494,"line":502},2,[492,504,506],{"class":505},"sFzZJ","outline-offset",[492,508,509],{"class":498},": 2px;\n",[343,511,512],{},"The 2px outline is heavy enough to read against both light and dark surfaces. The 2px offset keeps it visually separate from the element's own border.",[514,515,517],"h3",{"id":516},"adjusting-the-offset","Adjusting the offset",[343,519,520],{},"The offset is the only thing that should change between contexts. The thickness and color stay the same.",[343,522,523,524,527],{},"If the default 2px offset looks broken or visually wrong in a specific component, adjust it. Higher values give the ring more breathing room; lower values pull it in. Zero offset is acceptable when the element is inside an ",[369,525,526],{},"overflow: hidden"," container and there is no other way to show the ring.",[350,529,62],{"id":530},"tokens",[343,532,533,534,536],{},"For interaction-specific color tokens, see the ",[421,535,62],{"href":63}," page.",[538,539,540],"style",{},"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 .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":488,"searchDepth":502,"depth":502,"links":542},[543,544,545,546,547,551],{"id":352,"depth":502,"text":353},{"id":397,"depth":502,"text":398},{"id":410,"depth":502,"text":411},{"id":438,"depth":502,"text":439},{"id":474,"depth":502,"text":475,"children":548},[549],{"id":516,"depth":550,"text":517},3,{"id":530,"depth":502,"text":62},"Guidelines for how interactive elements communicate availability, affordance, and system response across input methods.","md",null,{},true,{"title":49,"description":552},"rwByCAr1o5DunU3ObAHxzfrkSFxDywoVmpiaC2Wh7aQ",[560,562],{"title":45,"path":46,"stem":47,"description":561,"children":-1},"Guidance on building inclusive, barrier-free experiences with Meteor's built-in accessibility features and the considerations that remain your responsibility.",{"title":53,"path":54,"stem":55,"description":563,"children":-1},"Conventions for how Meteor components are structured, named, and built when contributing or updating a component.",1783088848718]