{"version":3,"file":"close-button-snippet.min.js","mappings":"yBAYA,MAAMA,oBAAoBC,YACxB,6BAAkBC,GAChB,MAAO,CAAC,aACV,CASO,iBAAAC,GACLC,KAAKC,uBACLD,KAAKE,QACP,CAEO,wBAAAC,CAAyBC,EAAcC,EAAkBC,GAC9DN,KAAKC,uBAEDD,KAAKO,aAAwB,eAATH,GAAyBC,IAAaC,GAC5DN,KAAKE,QAET,CAEQ,oBAAAD,GACDD,KAAKQ,aAIRR,KAAKS,aAAa,CAAEC,KAAM,OAAQC,gBAAgB,IAClDX,KAAKQ,WAAWI,UAAY,2gCAEhC,CAEQ,MAAAV,GACSF,KAAKQ,WAAWK,cAAc,UACtCC,aAAa,aAAcd,KAAKe,QAAQC,OAAS,QAC1D,EASGC,eAAeC,IAAI,iBACtBD,eAAeE,OAAO,eAAgBvB","sources":["webpack://lange/./snippets/close-button/index.ts"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * The round close button that modals and drawers put in their corner. It draws a white circle with\n * an X inside an invisible 44px tap target, and turns the circle's border blue on focus.\n *\n * It exists so each modal stops carrying its own copy of the markup and styles. A modal renders\n * `<close-button>`, positions it, and listens for clicks on it. The accessible name comes from\n * `data-label` and is \"Close\" when that is left off.\n */\nclass CloseButton extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return ['data-label'];\n  }\n\n  declare readonly dataset: {\n    /**\n     * The accessible name of the button, such as \"Close cart drawer\"\n     */\n    label: string;\n  };\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n    this.render();\n  }\n\n  public attributeChangedCallback(name: string, oldValue: string, newValue: string) {\n    this.initializeShadowRoot();\n\n    if (this.isConnected && name === 'data-label' && oldValue !== newValue) {\n      this.render();\n    }\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      // The host has no tabindex or role of its own, so the native button inside is what takes\n      // focus. delegatesFocus sends a focus call on the host to that button, which lets a modal\n      // focus its close button on open and lets focus come back here when it is restored.\n      this.attachShadow({ mode: 'open', delegatesFocus: true });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  private render() {\n    const button = this.shadowRoot.querySelector('button');\n    button.setAttribute('aria-label', this.dataset.label || 'Close');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'close-button': CloseButton;\n  }\n}\n\nif (!customElements.get('close-button')) {\n  customElements.define('close-button', CloseButton);\n}\n"],"names":["CloseButton","HTMLElement","observedAttributes","connectedCallback","this","initializeShadowRoot","render","attributeChangedCallback","name","oldValue","newValue","isConnected","shadowRoot","attachShadow","mode","delegatesFocus","innerHTML","querySelector","setAttribute","dataset","label","customElements","get","define"],"sourceRoot":""}