@a11y/skip-navigation/skip-button.js

Web component friendly skip navigation functionality.

import { f as focusAnchor } from './util-af268335.js';

var styles = `:host{position:fixed;pointer-events:none;z-index:123456789;left:0;top:0}button{background:var(--skip-button-bg,#000);color:var(--skip-button-color,#fff);padding:var(--skip-button-padding,18px);font-size:var(--skip-button-font-size,18px);border-radius:var(--skip-button-border-radius,0 0 12px);transition:var(--skip-button-transition,transform .2s ease,opacity .2s ease);transform:translateY(-100%);border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;margin:0;opacity:0}button:focus{transform:translateY(0);pointer-events:all;opacity:1}button::-moz-focus-inner{border:0}`;

/**
 * Template for the skip button component.
 */
const $template = document.createElement("template");
$template.innerHTML = `
	<style>${styles}</style>
	<button><slot>Skip to main content</slot></button>
`;
// Use polyfill only in browsers that lack native Shadow DOM.
window.ShadyCSS && window.ShadyCSS.prepareTemplateStyles($template, "skip-button");
/**
 * Button that skips to an anchor.
 * @slot - Text to the user. Defaults to "Skip to main content"
 * @attr {String} for - Optional ID of the anchor that should be navigated to.
 * @cssprop --skip-button-bg - Background.
 * @cssprop --skip-button-color - Foreground.
 * @cssprop --skip-button-padding - Padding.
 * @cssprop --skip-button-font-size - Font size.
 * @cssprop --skip-button-border-radius - Border radius.
 * @cssprop --skip-button-transition - Transition.
 */
class SkipButton extends HTMLElement {
    /**
     * Attaches the shadow root.
     */
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: "open" });
        shadow.appendChild($template.content.cloneNode(true));
    }
    /**
     * Hooks up the component.
     */
    connectedCallback() {
        this.focusAnchor = this.focusAnchor.bind(this);
        this.addEventListener("click", this.focusAnchor);
    }
    /**
     * Tears down the component.
     */
    disconnectedCallback() {
        this.removeEventListener("click", this.focusAnchor);
    }
    /**
     * Focuses the anchor.
     */
    focusAnchor() {
        focusAnchor(this.getAttribute("for"));
    }
}
customElements.define("skip-button", SkipButton);

export { SkipButton };