https://ember-primitives.pages.dev/assets/portal.gjs-CrGuq4eh.js

1import{n as i}from"./chunk-BKSzLlU4.js";import"./browser-Cj-JSqhM.js";import{n as h}from"./template-Dc_cBOoX-jQZdGCuZ.js";import{c as E}from"./index-kwuZeaNz-DkfSDYND.js";import{t as l}from"./template-only-BEa_ZSRq.js";import{i as k}from"./modifier-BMAD6a8l-Du8-30TI.js";import"./shadowed-C8d8IJ3c.js";import{t as r}from"./portal-targets-BLM4cHYX.js";import{t}from"./portal-D_hAxOJZ.js";import{n as o}from"./dist-BwTUYrE9.js";import{s as a}from"./api-docs-DjNHeHUN.js";import{t as s}from"./viewport-DKHUQxuF.js";var d=h(E({id:null,block:'[[[10,0],[14,0,"style-wrapper"],[12],[1,"\\n  "],[10,0],[14,"data-portal-target",""],[12],[13],[1,"\\n\\n  "],[10,"button"],[12],[1,"main content"],[13],[1,"\\n\\n  "],[8,[32,0],null,[["@to"],["[data-portal-target]"]],[["default"],[[[[1,"\\n    "],[10,0],[14,0,"popover"],[12],[1,"\\n      "],[10,0],[14,"data-portal-target",""],[12],[13],[1,"\\n      first layer\\n\\n      "],[8,[32,0],null,[["@to"],["[data-portal-target]"]],[["default"],[[[[1,"\\n        "],[10,0],[14,0,"popover"],[12],[1,"\\n          "],[10,0],[14,"data-portal-target",""],[12],[13],[1,"\\n          second layer \\n\\n          "],[8,[32,0],null,[["@to"],["[data-portal-target]"]],[["default"],[[[[1,"\\n            "],[10,0],[14,0,"popover"],[12],[1,"\\n              tooltip / third layer\\n            "],[13],[1,"\\n          "]],[]]]]],[1,"\\n        "],[13],[1,"\\n      "]],[]]]]],[1,"\\n\\n    "],[13],[1,"\\n  "]],[]]]]],[1,"\\n"],[13],[1,"\\n\\n"],[10,"style"],[12],[1,"\\n  .popover {\\n    position: absolute;\\n    width: max-content;\\n    border: 1px solid;\\n    padding: 1rem;\\n    color: black;\\n    margin: 1.25rem;\\n    background: #fefefe;\\n    filter: invert(1)  drop-shadow(0 0 0.75rem rgba(0,0,0,0.2));\\n    border-radius: 4px;\\n  }\\n  .button {\\n    padding: 0.5rem 1rem;\\n  }\\n  .style-wrapper { \\n    height: 100px;\\n    position: relative;\\n  }\\n"],[13]],[],[]]',moduleName:"(unknown template module)",scope:()=>({Portal:t}),isStrictMode:!0}),l()),g=h(E({id:null,block:'[[[10,0],[14,0,"layout"],[12],[1,"\\n  "],[10,0],[14,0,"header-container"],[12],[13],[1,"\\n  "],[10,0],[14,0,"main-container"],[12],[13],[1,"\\n  "],[10,0],[14,0,"sidebar-container"],[12],[13],[1,"\\n  "],[10,0],[14,0,"footer-container"],[12],[13],[1,"\\n"],[13],[1,"\\n\\n"],[8,[32,0],null,null,null],[1,"\\n"],[8,[32,1],null,null,null],[1,"\\n"],[1,"\\n"],[10,"style"],[12],[1,"\\n  .header-container { grid-area: header; }\\n  .main-container { grid-area: main; }\\n  .sidebar-container { grid-area: sidebar; }\\n  .footer-container { grid-area: footer; }\\n  .layout {\\n    display: grid;\\n    grid-template-columns: 1fr 1fr 50px 1fr;\\n    grid-template-rows: auto;\\n    grid-template-areas: \\n      \\"header header header header\\"\\n      \\"main main . sidebar\\"\\n      \\"footer footer footer footer\\";\\n    gap: 0.5rem;\\n  }\\n\\n\\n  .header-container, .main-container, .sidebar-container, .footer-container {\\n    border: 1px solid;\\n  }\\n"],[13]],[],[]]',moduleName:"(unknown template module)",scope:()=>({ExampleA:e,ExampleB:n}),isStrictMode:!0}),l()),e=h(E({id:null,block:'[[[8,[32,0],null,[["@to","@append"],[".main-container",true]],[["default"],[[[[1,"\\n  ExampleA main\\n"]],[]]]]],[1,"\\n"],[8,[32,0],null,[["@to","@append"],[".header-container",true]],[["default"],[[[[1,"\\n  ExampleA header\\n"]],[]]]]],[1,"\\n"],[8,[32,0],null,[["@to","@append"],[".sidebar-container",true]],[["default"],[[[[1,"\\n  ExampleA sidebar\\n"]],[]]]]]],[],[]]',moduleName:"(unknown template module)",scope:()=>({Portal:t}),isStrictMode:!0}),l()),n=h(E({id:null,block:'[[[8,[32,0],null,[["@to","@append"],[".main-container",true]],[["default"],[[[[1,"\\n  ExampleB main\\n"]],[]]]]],[1,"\\n"],[8,[32,0],null,[["@to","@append"],[".sidebar-container",true]],[["default"],[[[[1,"\\n  ExampleB sidebar\\n"]],[]]]]],[1,"\\n"],[8,[32,0],null,[["@to","@append"],[".footer-container",true]],[["default"],[[[[1,"\\n  ExampleB footer\\n"]],[]]]]]],[],[]]',moduleName:"(unknown template module)",scope:()=>({Portal:t}),isStrictMode:!0}),l()),F=document.createElement("div"),c=h(E({id:null,block:'[[[10,"fieldset"],[14,0,"border"],[12],[1,"\\n  "],[10,"legend"],[12],[1,"origin"],[13],[1,"\\n  "],[8,[32,0],null,[["@to"],[[32,1]]],[["default"],[[[[1,"\\n    content\\n  "]],[]]]]],[1,"\\n"],[13],[1,"\\n\\nelement is 

1wherever we want:\\n"],[1,[32,1]]],[],[]]',moduleName:"(unknown template module)",scope:()=>({Portal:t,element:F}),isStrictMode:!0}),l()),C=h(E({id:null,block:'[[[8,[32,0],null,null,[["default"],[[[[1,"\\n  "],[10,"fieldset"],[14,0,"border"],[12],[1,"\\n    "],[10,"legend"],[12],[1,"origin"],[13],[1,"\\n    Two portals:\\n    "],[8,[32,1],null,[["@wormhole"],["wormhole-target"]],[["default"],[[[[1,"\\n      content\\n    "]],[]]]]],[1,"\\n\\n    "],[8,[32,1],null,[["@wormhole"],["#wormhole-target"]],[["default"],[[[[1,"\\n      extra content\\n    "]],[]]]]],[1,"\\n  "],[13],[1,"\\n\\n  element is wherever we want:\\n  "],[10,0],[14,1,"wormhole-target"],[12],[13],[1,"\\n"]],[]]]]]],[],[]]',moduleName:"(unknown template module)",scope:()=>({InViewport:s,Portal:t}),isStrictMode:!0}),l()),B=h(E({id:null,block:'[[[10,"fieldset"],[14,0,"border"],[12],[1,"\\n  "],[10,"legend"],[12],[1,"origin"],[13],[1,"\\n\\n  "],[8,[32,0],null,[["@to"],["name-here"]],[["default"],[[[[1,"\\n    content\\n  "]],[]]]]],[1,"\\n"],[13],[1,"\\n\\n"],[8,[32,1],null,[["@name"],["name-here"]],null]],[],[]]',moduleName:"(unknown template module)",scope:()=>({Portal:t,PortalTarget:r}),isStrictMode:!0}),l()),p=h(E({id:null,block:'[[[8,[32,0],null,[["@src","@since"],["components/portal.gts","0.0.4"]],null]],[],[]]',moduleName:"(unknown template module)",scope:()=>({SetupInstructions:a}),isStrictMode:!0}),l()),m=h(E({id:null,block:'[[[8,[32,0],null,[["@package","@module","@name"],["ember-primitives","declarations/components/portal","Signature"]],null]],[],[]]',moduleName:"(unknown template module)",scope:()=>({ComponentSignature:k}),isStrictMode:!0}),l()),D=i({default:()=>u}),u=h(E({id:null,block:'[[[10,"h1"],[14,1,"portal"],[12],[1,"Portal"],[13],[1,"\\n"],[10,2],[12],[1,"A "],[10,"code"],[12],[1,"<Portal>"],[13],[1," allows teleporting elements to another place in the DOM tree. This can be used for components altering the layout of the page, or getting around z-index issues with modals, popovers, etc."],[13],[1,"\\n"],[10,2],[12],[10,"code"],[12],[1,"<Portal>"],[13],[1," must be combined with "],[10,"code"],[12],[1,"<PortalTargets>"],[13],[1,", or your own portal targets that match the requirements of portalling.  Additionally, a "],[10,"code"],[12],[1,"<Portal>"],[13],[1," will render in to the nearest "],[10,"code"],[12],[1,"<PortalTargets>"],[13],[1," it can find, allowing for UI layering, e.g.: Modals have their own "],[10,"code"],[12],[1,"<PortalTargets>"],[13],[1," so they can have their own tooltips and popovers.  "],[10,"em"],[12],[1,"For use with popovers"],[13],[1,", this portalling can be a way to support "],[10,3],[14,6,"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover"],[12],[1,"popover"],[13],[1," on older browsers. But there are many other use cases outside of popovers as well."],[13],[1,"\\n"],[10,2],[12],[10,"strong"],[12],[1,"The "],[10,"code"],[12],[1,"@to"],[13],[1," argument accepts any valid CSS selector"],[13],[1," (like "],[10,"code"],[12],[1,"[data-portal-target]"],[13],[1,", "],[10,"code"],[12],[1,".my-class"],[13],[1,", "],[10,"code"],[12],[1,"#my-id"],[13],[1,"), a PortalTarget name (like "],[10,"code"],[12],[1,"popover"],[13],[1,", "],[10,"code"],[12],[1,"tooltip"],[13],[1,", or "],[10,"code"],[12],[1,"modal"],[13],[1,"), or an Element object."],[13],[1,"\\n"],[10,"h2"],[14,"visually-hidden",""],[12],[1,"Usage"],[13],[1,"\\n"],[10,2],[12],[1,"The following example demonstrates Portal-nesting:"],[13],[1,"\\n"],[10,0],[14,0,"featured-demo"],[12],[1,"\\n"],[10,0],[14,1,"repl_146"],[14,0,"repl-sdk__demo"],[12],[8,[32,0],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes github-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { Portal } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"style-wrapper\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," data-portal-target"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">main content</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"button"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"[data-portal-target]\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"popover\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," data-portal-target"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        first layer"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"[data-portal-target]\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"          <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"popover\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"            <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," data-portal-target"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"            second layer "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"            <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"[data-portal-target]\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"              <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"popover\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"                tooltip / third layer"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"              </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"            </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"          </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[

113],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"style"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .popover"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      position"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"absolute"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      width"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"max-content"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      border"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"px"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," solid"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      padding"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      color"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"black"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      margin"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1.25"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      background"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"#fefefe"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      filter"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"invert"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,")  "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"drop-shadow"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 0"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 0.75"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," rgba"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,","],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,","],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,","],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0.2"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"));"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      border-radius"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"4"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"px"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .button"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      padding"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0.5"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .style-wrapper"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      height"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"100"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"px"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      position"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"relative"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"style"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[13],[1,"\\n"],[8,[32,1],null,null,[["default"],[[[[1,"\\n"],[10,2],[12],[1,"When using a popover pattern, you\'ll want to use the native "],[10,3],[14,6,"https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using#nested_popovers"],[12],[10,"code"],[12],[1,"popover"],[13],[13],[1," capabilities of browsers. When coupled with "],[10,3],[14,6,"/5-floaty-bits/floating-ui.md"],[12],[1,"Floating UI"],[13],[1,", you also can correctly position a popover to a target element."],[13],[1,"\\n"]],[]]]]],[1,"\\n"],[10,"h3"],[14,1,"component-controlled-layout"],[12],[1,"Component-controlled Layout"],[13],[1,"\\n"],[10,2],[12],[1,"Using Portals enables you to be able to have sub-components (or even sub-routes render into elements that live outside of their hierarchy."],[13],[1,"\\n"],[10,0],[14,0,"featured-demo"],[12],[1,"\\n"],[10,0],[14,1,"repl_147"],[14,0,"repl-sdk__demo"],[12],[8,[32,2],null,

1null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes github-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { Portal } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"layout\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"header-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"main-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"sidebar-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"footer-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"ExampleA"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," />"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"ExampleB"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," />"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6A737D, #6A737D);--shiki-light:#6A737D;--shiki-dark:#6A737D"],[12],[1,"  "],[1,"{{!-- or yield or outlet --}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"style"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .header-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"grid-area"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": header; }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .main-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"grid-area"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": main; }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .sidebar-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"grid-area"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": sidebar; }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .footer-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"grid-area"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": footer; }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .layout"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      display"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"grid"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      grid-template-columns"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"fr"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"fr"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 50"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"px"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," 1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"fr"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      grid-template-rows"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"auto"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      grid-template-areas"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"        \\"header header header header\\""],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"        \\"main main . sidebar\\""],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"        \\"footer footer footer footer\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      gap"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"0.5"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"rem"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"    .header-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,", "],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,".main-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,", "],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,".sidebar-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,", "],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,".footer-container"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," {"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"      border"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,": "],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"1"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"px"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1," solid"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    }"],[13],[13]

1,[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"style"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6A737D, #6A737D);--shiki-light:#6A737D;--shiki-dark:#6A737D"],[12],[1,"// Var used for hoisting, so that the "],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#6A737D, #6A737D);--shiki-light:#6A737D;--shiki-dark:#6A737D"],[12],[1,"// layout component can be seen first"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"var"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," ExampleA "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".main-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleA main"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".header-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);

1--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleA header"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".sidebar-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleA sidebar"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">;"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"var"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," ExampleB "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".main-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);

1--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleB main"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".sidebar-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleB sidebar"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\".footer-container\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"append"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#032F62, #DBEDFF);

1--shiki-light:#032F62;--shiki-dark:#DBEDFF"],[12],[1,"true"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    ExampleB footer"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">;"],[13],[13],[13],[13],[13],[1,"\\n"],[13],[1,"\\n"],[10,"h3"],[14,1,"why-not-just-in-element"],[12],[1,"Why not just "],[10,"code"],[12],[1,"in-element"],[13],[1,"?"],[13],[1,"\\n"],[10,2],[12],[1,"The "],[10,3],[14,6,"https://api.emberjs.com/ember/6.5/classes/Ember.Templates.helpers/methods/in-element?anchor=in-element"],[12],[10,"code"],[12],[1,"in-element"],[13],[13],[1," utility is built in to Ember, but it requires the user handle how to find the element that is passed to in-element\'s first positional argument."],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes github-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"#in-element"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," ("],[13],[10,1],[14,5,"color:light-dark(#E36209, #FFAB70);--shiki-light:#E36209;--shiki-dark:#FFAB70"],[12],[1,"getElementSomehow"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,")"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    content portaled to the element"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"/in-element"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"}}"],[13],[13],[13],[13],[13],[1,"\\n"],[10,2],[12],[1,"This Portal and other implementatiosn solve this in various ways."],[13],[1,"\\n"],[10,"ul"],[12],[1,"\\n"],[10,"li"],[12],[10,3],[14,6,"https://github.com/yapplabs/ember-wormhole/blob/master/addon/components/ember-wormhole.js"],[12],[1,"ember-wormhole"],[13],[1," - created before "],[10,"code"],[12],[1,"in-element"],[13],[1," existed, so it contains "],[10,"em"],[12],[1,"a lot"],[13],[1," of code (but can be used as a sortof polyfill for "],[10,"em"],[12],[1,"very"],[13],[1," old ember versions)."],[13],[1,"\\n"],[10,"li"],[12],[10,3],[14,6,"https://github.com/simonihmig/ember-stargate"],[12],[1,"ember-stargate"],[13],[1,"  - builds on top of in-element and uses one of the techniques that this Portal component uses"],[13],[1,"\\n"],[13],[1,"\\n"],[10,"h3"],[14,1,"to-can-be-an-element"],[12],[10,"code"],[12],[1,"@to"],[13],[1," can be an element"],[13],[1,"\\n"],[10,2],[12],[1,"The element can be created dynamically (for rendering off screen), or any other element obtained by other means."],[13],[1,"\\n"],[10,0],[14,0,"featured-demo"],[12],[1,"\\n"],[10,0],[14,1,"repl_148"],[14,0,"repl-sdk__demo"],[12],[8,[32,3],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes g

1ithub-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { Portal } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"let"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," element "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," document."],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"createElement"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"("],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\'div\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,");"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"border\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">origin</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"element"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      content"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;

1--shiki-dark:#E1E4E8"],[12],[1,"  element is wherever we want:"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"  "],[1,"{{"],[13],[10,1],[14,5,"color:light-dark(#005CC5, #79B8FF);--shiki-light:#005CC5;--shiki-dark:#79B8FF"],[12],[1,"element"],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"}}"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[13],[1,"\\n"],[10,"h3"],[14,1,"ember-wormhole"],[12],[1,"ember-wormhole"],[13],[1,"\\n"],[10,2],[12],[1,"If you\'re migrating from "],[10,3],[14,6,"https://github.com/yapplabs/ember-wormhole/"],[12],[1,"ember-wormhole"],[13],[1,", a migration path using this Portal component would look like this:"],[13],[1,"\\n"],[10,0],[14,0,"featured-demo"],[12],[1,"\\n"],[10,0],[14,1,"repl_149"],[14,0,"repl-sdk__demo"],[12],[8,[32,4],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes github-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { Portal } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { InViewport } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/viewport\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"InViewport"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"border\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">origin</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      Two portals:"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"wormhole"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"wormhole-target\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        content"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"wormhole"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"#wormhole-target\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"        extra content"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;

1--shiki-dark:#E1E4E8"],[12],[1,"    element is wherever we want:"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," id"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"wormhole-target\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"></"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"div"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"InViewport"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[13],[1,"\\n"],[10,2],[12],[1,"The wormhole compatibility mode assumes that an element will be rendered in to the DOM before the next cycle of the runloop. This approach is non-reactive, and doesn\'t handle portal nesting -- which is why it can\'t use the same "],[10,"code"],[12],[1,"@to"],[13],[1," argument as the other usages (the code that polyfills ember-wormhole is "],[10,"em"],[12],[1,"very small"],[13],[1,")."],[13],[1,"\\n"],[10,2],[12],[1,"Additionally, ember-wormhole allows passing a plain "],[10,"code"],[12],[1,"id"],[13],[1," as in "],[10,"code"],[12],[1,"#selector"],[13],[1," without the leading "],[10,"code"],[12],[1,"#"],[13],[1,". But because we don\'t want to only support ids, any valid CSS selector is also allowed."],[13],[1,"\\n"],[10,2],[12],[1,"And an improvement upon ember-wormhole is that if the element can already be found in the DOM, the portaled contents will render right away, and not wait until the next render cycle.\\nOf note, the default behavior here is to append to the portal target instead of replace. The other usages do not default to this behavior."],[13],[1,"\\n"],[10,2],[12],[1,"A major limitation of the wormhole approach is that it does not work well within shadowdom nor does it work with off-canvas rendering (fragments not yet part of the DOM tree (which is a strategy that "],[10,3],[14,6,"https://limber.glimdown.com/docs/repl-sdk"],[12],[1,"repl-sdk"],[13],[1," employs))."],[13],[1,"\\n"],[10,"h3"],[14,1,"ember-stargate"],[12],[1,"ember-stargate"],[13],[1,"\\n"],[10,2],[12],[1,"ember-stargate uses reactive registration for the portal targets."],[13],[1,"\\n"],[10,2],[12],[1,"Note that when doing this, you also get the nested portals functionality demo\'d at the top of this page."],[13],[1,"\\n"],[10,2],[12],[1,"Here is what using ember-primitive\'s Portal in an ember-stargate style would look like:"],[13],[1,"\\n"],[10,0],[14,0,"featured-demo"],[12],[1,"\\n"],[10,0],[14,1,"repl_150"],[14,0,"repl-sdk__demo"],[12],[8,[32,5],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,0],[14,0,"repl-sdk__snippet"],[14,"data-repl-output",""],[12],[10,"pre"],[14,0,"shiki shiki-themes github-light github-dark"],[14,5,"background-color:light-dark(#fff, #24292e);--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;color:light-dark(#24292e, #e1e4e8);--shiki-light:#24292e;--shiki-dark:#e1e4e8"],[14,"tabindex","0"],[12],[10,"code"],[12],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { Portal } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"import"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," { PortalTarget } "],[13],[10,1],[14,5,"color:light-dark(#D73A49, #F97583);--shiki-light:#D73A49;--shiki-dark:#F97583"],[12],[1,"from"],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1," \'ember-primitives/components/portal-targets\'"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,";"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"<"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1," class"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"border\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">origin</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"legend"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"to"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"name-here\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"      content"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"    </"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"Portal"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  </"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"fieldset"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"  <"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"PortalTarget"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-light-font-style:italic;--shiki-dark:#E1E4E8;--shiki-dark-font-style:italic"],[12],[1," @"],[13],[10,1],[14,5,"color:light-dark(#6F42C1, #B392F0);--shiki-light:#6F42C1;--shiki-dark:#B392F0"],[12],[1,"name"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"="],[13],[10,1],[14,5,"color:light-dark(#032F62, #9ECBFF);--shiki-light:#032F62;--shiki-dark:#9ECBFF"],[12],[1,"\\"name-here\\""],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1," />"],[13],[13],[1,"\\n"],[10,1],[14,0,"line"],[12],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,"</"],[13],[10,1],[14,5,"color:light-dark(#22863A, #85E89D);--shiki-light:#22863A;--shiki-dark:#85E89D"],[12],[1,"template"],[13],[10,1],[14,5,"color:light-dark(#24292E, #E1E4E8);--shiki-light:#24292E;--shiki-dark:#E1E4E8"],[12],[1,">"],[13],[13],[13],[13],[13],[1,"\\n"],[13],[1,"\\n"],[10,"h2"],[14,1,"install"],[12],[1,"Install"],[13],[1,"\\n"],[10,0],[14,1,"repl_151"],[14,0,"repl-sdk__demo"],[12],[8,[32,6],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,"h2"],[14,1,"api-reference"],[12],[1,"API Reference"],[13],[1,"\\n"],[10,0],[14,1,"repl_152"],[14,0,"repl-sdk__demo"],[12],[8,[32,7],null,null,[["default"],[[[],[]]]]],[13],[1,"\\n"],[10,"h2"],[14,1,"accessibility"],[12],[1,"Accessibility"],[13],[1,"\\n"],[10,2],[12],[1,"When portalling content, we break away from how the browser natively handles focus, and returning focus to certain elements. This is important in Modals and other Popovers that can be made with portalling. During the rendering phase of portaled elements, you\'ll want to store the "],[10,"code"],[12],[1,"activeElement"],[13],[1," so that it can be restored when that portaled content is discarded."],[13]],[],[]]',moduleName:"(unknown template module)",scope:()=>({repl_146:d,Callout:o,repl_147:g,repl_148:c,repl_149:C,repl_150:B,repl_151:p,repl_152:m}),isStrictMode:!0}),l());export{D as n,u as t};