(()=>{var c=class{constructor(e){this.el=e;this.el.addEventListener("change",t=>{let i=t.target,s=i.value;i.value.startsWith("/")||(s="/"+s),window.location.href=s})}};function d(r){let e=document.createElement("label");e.classList.add("go-Label"),e.setAttribute("aria-label","Menu");let t=document.createElement("select");t.classList.add("go-Select","js-selectNav"),e.appendChild(t);let i=document.createElement("optgroup");i.label="Outline",t.appendChild(i);let s={},l;for(let n of r.treeitems){if(Number(n.depth)>4)continue;n.groupTreeitem?(l=s[n.groupTreeitem.label],l||(l=s[n.groupTreeitem.label]=document.createElement("optgroup"),l.label=n.groupTreeitem.label,t.appendChild(l))):l=i;let a=document.createElement("option");a.label=n.label,a.textContent=n.label,a.value=n.el.href.replace(window.location.origin,"").replace("/",""),l.appendChild(a)}return r.addObserver(n=>{let a=n.el.hash,u=t.querySelector(`[value$="${a}"]`)?.value;u&&(t.value=u)},50),e}var o=class{constructor(e){this.el=e;this.treeitems=[],this.firstChars=[],this.firstTreeitem=null,this.lastTreeitem=null,this.observerCallbacks=[],this.init()}init(){this.el.style.setProperty("--js-tree-height",this.el.clientHeight+"px"),this.findTreeItems(),this.updateVisibleTreeitems(),this.observeTargets(),this.firstTreeitem&&(this.firstTreeitem.el.tabIndex=0)}observeTargets(){this.addObserver(i=>{this.expandTreeitem(i),this.setSelected(i)});let e=new Map,t=new IntersectionObserver(i=>{for(let s of i)e.set(s.target.id,s.isIntersecting||s.intersectionRatio===1);for(let[s,l]of e)if(l){let n=this.treeitems.find(a=>a.el?.href.endsWith(`#${s}`));if(n)for(let a of this.observerCallbacks)a(n);break}},{threshold:1,rootMargin:"-60px 0px 0px 0px"});for(let i of this.treeitems.map(s=>s.el.getAttribute("href")))if(i){let s=i.replace(window.location.origin,"").replace("/","").replace("#",""),l=document.getElementById(s);l&&t.observe(l)}}addObserver(e,t=200){this.observerCallbacks.push(m(e,t))}setFocusToNextItem(e){let t=null;for(let i=e.index+1;i<this.treeitems.length;i++){let s=this.treeitems[i];if(s.isVisible){t=s;break}}t&&this.setFocusToItem(t)}setFocusToPreviousItem(e){let t=null;for(let i=e.index-1;i>-1;i--){let s=this.treeitems[i];if(s.isVisible){t=s;break}}t&&this.setFocusToItem(t)}setFocusToParentItem(e){e.groupTreeitem&&this.setFocusToItem(e.groupTreeitem)}setFocusToFirstItem(){this.firstTreeitem&&this.setFocusToItem(this.firstTreeitem)}setFocusToLastItem(){this.lastTreeitem&&this.setFocusToItem(this.lastTreeitem)}setSelected(e){for(let t of this.el.querySelectorAll('[aria-expanded="true"]'))t!==e.el&&(t.nextElementSibling?.contains(e.el)||t.setAttribute("aria-expanded","false"));for(let t of this.el.querySelectorAll("[aria-selected]"))t!==e.el&&t.setAttribute("aria-selected","false");e.el.setAttribute("aria-selected","true"),this.updateVisibleTreeitems(),this.setFocusToItem(e,!1)}expandTreeitem(e){let t=e;for(;t;)t.isExpandable&&t.el.setAttribute("aria-expanded","true"),t=t.groupTreeitem;this.updateVisibleTreeitems()}expandAllSiblingItems(e){for(let t of this.treeitems)t.groupTreeitem===e.groupTreeitem&&t.isExpandable&&this.expandTreeitem(t)}collapseTreeitem(e){let t=null;e.isExpanded()?t=e:t=e.groupTreeitem,t&&(t.el.setAttribute("aria-expanded","false"),this.updateVisibleTreeitems(),this.setFocusToItem(t))}setFocusByFirstCharacter(e,t){let i,s;t=t.toLowerCase(),i=e.index+1,i===this.treeitems.length&&(i=0),s=this.getIndexFirstChars(i,t),s===-1&&(s=this.getIndexFirstChars(0,t)),s>-1&&this.setFocusToItem(this.treeitems[s])}findTreeItems(){let e=(t,i)=>{let s=i,l=t.firstElementChild;for(;l;)(l.tagName==="A"||l.tagName==="SPAN")&&(s=new h(l,this,i),this.treeitems.push(s),this.firstChars.push(s.label.substring(0,1).toLowerCase())),l.firstElementChild&&e(l,s),l=l.nextElementSibling};e(this.el,null),this.treeitems.map((t,i)=>t.index=i)}updateVisibleTreeitems(){this.firstTreeitem=this.treeitems[0];for(let e of this.treeitems){let t=e.groupTreeitem;for(e.isVisible=!0;t&&t.el!==this.el;)t.isExpanded()||(e.isVisible=!1),t=t.groupTreeitem;e.isVisible&&(this.lastTreeitem=e)}}setFocusToItem(e,t=!0){e.el.tabIndex=0,t&&e.el.focus();for(let i of this.treeitems)i!==e&&(i.el.tabIndex=-1)}getIndexFirstChars(e,t){for(let i=e;i<this.firstChars.length;i++)if(this.treeitems[i].isVisible&&t===this.firstChars[i])return i;return-1}},h=class{constructor(e,t,i){e.tabIndex=-1,this.el=e,this.groupTreeitem=i,this.label=e.textContent?.trim()??"",this.tree=t,this.depth=(i?.depth||0)+1,this.index=0;let s=e.parentElement;s?.tagName.toLowerCase()==="li"&&s?.setAttribute("role","none"),e.setAttribute("aria-level",this.depth+""),e.getAttribute("aria-label")&&(this.label=e?.getAttribute("aria-label")?.trim()??""),this.isExpandable=!1,this.isVisible=!1,this.isInGroup=!!i;let l=e.nextElementSibling;for(;l;){if(l.tagName.toLowerCase()=="ul"){let n=`${i?.label??""} nav group ${this.label}`.replace(/[\W_]+/g,"_");e.setAttribute("aria-owns",n),e.setAttribute("aria-expanded","false"),l.setAttribute("role","group"),l.setAttribute("id",n),this.isExpandable=!0;break}l=l.nextElementSibling}this.init()}init(){this.el.tabIndex=-1,this.el.getAttribute("role")||this.el.setAttribute("role","treeitem"),this.el.addEventListener("keydown",this.handleKeydown.bind(this)),this.el.addEventListener("click",this.handleClick.bind(this)),this.el.addEventListener("focus",this.handleFocus.bind(this)),this.el.addEventListener("blur",this.handleBlur.bind(this))}isExpanded(){return this.isExpandable?this.el.getAttribute("aria-expanded")==="true":!1}isSelected(){return this.el.getAttribute("aria-selected")==="true"}handleClick(e){e.target!==this.el&&e.target!==this.el.firstElementChild||(this.isExpandable&&(this.isExpanded()&&this.isSelected()?this.tree.collapseTreeitem(this):this.tree.expandTreeitem(this),e.stopPropagation()),this.tree.setSelected(this))}handleFocus(){let e=this.el;this.isExpandable&&(e=e.firstElementChild??e),e.classList.add("focus")}handleBlur(){let e=this.el;this.isExpandable&&(e=e.firstElementChild??e),e.classList.remove("focus")}handleKeydown(e){if(e.altKey||e.ctrlKey||e.metaKey)return;let t=!1;switch(e.key){case" ":case"Enter":this.isExpandable?(this.isExpanded()&&this.isSelected()?this.tree.collapseTreeitem(this):this.tree.expandTreeitem(this),t=!0):e.stopPropagation(),this.tree.setSelected(this);break;case"ArrowUp":this.tree.setFocusToPreviousItem(this),t=!0;break;case"ArrowDown":this.tree.setFocusToNextItem(this),t=!0;break;case"ArrowRight":this.isExpandable&&(this.isExpanded()?this.tree.setFocusToNextItem(this):this.tree.expandTreeitem(this)),t=!0;break;case"ArrowLeft":this.isExpandable&&this.isExpanded()?(this.tree.collapseTreeitem(this),t=!0):this.isInGroup&&(this.tree.setFocusToParentItem(this),t=!0);break;case"Home":this.tree.setFocusToFirstItem(),t=!0;break;case"End":this.tree.setFocusToLastItem(),t=!0;break;default:e.key.length===1&&e.key.match(/\S/)&&(e.key=="*"?this.tree.expandAllSiblingItems(this):this.tree.setFocusByFirstCharacter(this,e.key),t=!0);break}t&&(e.stopPropagation(),e.preventDefault())}};function m(r,e){let t;return(...i)=>{let s=()=>{t=null,r(...i)};t&&clearTimeout(t),t=setTimeout(s,e)}}window.addEventListener("load",()=>{let r=document.querySelector(".js-tree");if(r){let t=new o(r),i=d(t);document.querySelector(".js-mainNavMobile")?.appendChild(i)}let e=document.querySelector(".Outline .js-tree");if(e){let t=new o(e),i=d(t);document.querySelector(".Outline .js-select")?.appendChild(i)}for(let t of document.querySelectorAll(".js-toggleTheme"))t.addEventListener("click",i=>{let s=i.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-theme",String(s))});for(let t of document.querySelectorAll(".js-toggleLayout"))t.addEventListener("click",i=>{let s=i.currentTarget.getAttribute("data-value");document.documentElement.setAttribute("data-layout",String(s))});for(let t of document.querySelectorAll(".js-selectNav"))new c(t)});customElements.define("go-color",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");let r=this.id;this.removeAttribute("id"),this.innerHTML=`
        <div style="--color: var(${r});" class="GoColor-circle"></div>
        <span>
          <div id="${r}" class="go-textLabel GoColor-title">${r.replace("--color-","").replaceAll("-"," ")}</div>
          <pre class="StringifyElement-markup">var(${r})</pre>
        </span>
      `,this.querySelector("pre")?.addEventListener("click",()=>{navigator.clipboard.writeText(`var(${r})`)})}});customElements.define("go-icon",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");let r=this.getAttribute("name");this.innerHTML=`<p id="icon-${r}" class="go-textLabel GoIcon-title">${r.replaceAll("_"," ")}</p>
        <stringify-el>
          <img class="go-Icon" height="24" width="24" src="/static/shared/icon/${r}_gm_grey_24dp.svg" alt="">
        </stringify-el>
      `}});customElements.define("clone-el",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");let r=this.getAttribute("selector");if(!r)return;let e="    "+document.querySelector(r)?.outerHTML;this.innerHTML=`
        <stringify-el collapsed>${e}</stringify-el>
      `}});customElements.define("stringify-el",class extends HTMLElement{constructor(){super();this.style.setProperty("display","contents");let r=this.innerHTML,e=this.id?` id="${this.id}"`:"";this.removeAttribute("id");let t='<pre class="StringifyElement-markup">'+f(p(r))+"</pre>";this.hasAttribute("collapsed")&&(t=`<details class="StringifyElement-details"><summary>Markup</summary>${t}</details>`),this.innerHTML=`<span${e}>${r}</span>${t}`,this.querySelector("pre")?.addEventListener("click",()=>{navigator.clipboard.writeText(r)})}});function p(r){return r.split(`
`).reduce((e,t)=>{if(e.result.length===0){let i=t.indexOf("<");e.start=i===-1?0:i}return t=t.slice(e.start),t&&e.result.push(t),e},{result:[],start:0}).result.join(`
`)}function f(r){return r?.replaceAll("<","&lt;")?.replaceAll(">","&gt;")}})();
/**
 * @license
 * Copyright 2021 The Go Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */
//# sourceMappingURL=styleguide.js.map