@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/cjs/nano-icon-button_2.cjs.entry.js

@@ -1,341 +0,0 @@
-/*!
- * Web Components for Nanopore digital Web Apps
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-615cdb64.js');
-const renderer = require('./renderer-cd8b6098.js');
-const focusVisible = require('./focus-visible-39b54d1f.js');
-const popover = require('./popover-3dfc73f6.js');
-
-const iconButtonCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px);--box-shadow:none;--button-bg:var(--background);border-radius:var(--border-radius);display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:inherit;background:var(--button-bg);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out;box-shadow:var(--box-shadow)}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button:focus{outline:none}.icon-button__label{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.icon-button--disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
-const NanoIconButtonStyle0 = iconButtonCss;
-
-const IconButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    button;
-    get host() { return index.getElement(this); }
-    /** The name of the icon to draw. */
-    iconName;
-    /** An external URL of an SVG file. */
-    iconSrc;
-    /** The default behavior of the button. */
-    type = 'button';
-    /** The name of the button, submitted as a pair with the button’s value as part of the form data. */
-    name;
-    /** Defines the value associated with the button’s name when it’s submitted with the form data. */
-    value;
-    /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
-     * always include a label that describes what the icon button does. */
-    label;
-    /** display the label as a `<nano-tooltip />` */
-    showTooltip = false;
-    /** Set to true to disable the button. */
-    disabled = false;
-    /** Contains a URL or a URL fragment that the hyperlink points to.
-     * If this property is set, an anchor tag will be rendered. */
-    href;
-    /** Specifies the relationship of the target object to the link object.
-     * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */
-    rel;
-    /** Specifies where to display the linked URL. Only applies when an `href` is provided.
-     * Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. */
-    target;
-    /** The HTML form element or form element id.
-     * Used to submit a form when the button is not a child of the form. */
-    form;
-    /** Sets focus on the internal button */
-    async setFocus() {
-        this.button.focus();
-    }
-    /**
-     * Finds the form element based on the provided `form` selector
-     * or element reference provided.
-     * @returns the found form element (if found)
-     */
-    findForm() {
-        const { form, host } = this;
-        if (!form)
-            return host.closest('form');
-        if (form instanceof HTMLFormElement) {
-            return form;
-        }
-        if (typeof form === 'string') {
-            const el = document.getElementById(form);
-            if (el instanceof HTMLFormElement) {
-                return el;
-            }
-        }
-        return null;
-    }
-    handleClick = (ev) => {
-        if (this.type === 'button')
-            return;
-        const formEl = this.findForm();
-        if (formEl) {
-            ev.preventDefault();
-            const fakeButton = document.createElement('button');
-            fakeButton.type = this.type;
-            fakeButton.style.display = 'none';
-            formEl.appendChild(fakeButton);
-            fakeButton.click();
-            fakeButton.remove();
-        }
-    };
-    componentDidLoad() {
-        focusVisible.focusVisible.observe(this.button);
-    }
-    connectedCallback() {
-        if (this.button)
-            focusVisible.focusVisible.observe(this.button);
-    }
-    disconnectedCallback() {
-        focusVisible.focusVisible.unobserve(this.button);
-    }
-    content() {
-        const TagType = this.href === undefined ? 'button' : 'a';
-        return (renderer.h(TagType, { onClick: this.handleClick, part: "base", ref: (el) => (this.button = el), class: {
-                'icon-button': true,
-                'icon-button--disabled': this.disabled,
-            }, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, rel: this.rel || undefined, type: !this.href && this.type ? this.type : undefined }, renderer.h("span", { class: "icon-button__label" }, this.label), renderer.h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
-    }
-    render() {
-        if (this.showTooltip) {
-            return (renderer.h(index.Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, renderer.h("nano-tooltip", { content: this.label }, this.content())));
-        }
-        return (renderer.h(index.Host, { class: "nano-icon-button", "aria-disabled": this.disabled ? 'true' : null }, this.content()));
-    }
-};
-IconButton.style = NanoIconButtonStyle0;
-
-const tooltipCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{--max-width:20rem;--hide-delay:0.125s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;--background:var(--nano-tooltip-bg-color, #4a4a4a);--color:var(--nano-tooltip-color, #fff);display:contents}.tooltip{max-inline-size:var(--max-width);border-radius:var(--nano-tooltip-border-radius, var(--nano-border-radius-small, 2px));background-color:var(--background);font-size:var(--nano-fontsize-small, 0.875rem);line-height:1.5;color:var(--color);opacity:0;padding:var(--nano-tooltip-padding, var(--nano-spacing-xsmall, 4px) var(--nano-spacing-small, 8px));transform:translateY(10px) translateZ(0);transform-origin:bottom;transition:opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);white-space:normal}.tooltip-arrow{content:\"\";position:absolute;inline-size:0;block-size:0;color:var(--background);transition:0.2s ease transform}.tooltip-positioner{position:absolute;z-index:var(--nano-layer-index-tooltip, 1000);border:0;background:none;padding:0;overflow:visible;color:unset}.tooltip-positioner::backdrop{display:none}.tooltip-positioner[popover],.tooltip-positioner:popover-open{inset:unset}.tooltip-positioner .tooltip{transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom;transform:translateY(-10px) translateZ(0)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none}.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow{inset-block-end:100%;inset-inline-start:calc(50% - 5px);border-block-end:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow{inset-block-start:100%;inset-inline-start:calc(50% - 5px);border-block-start:5px solid;border-inline-start:5px solid transparent;border-inline-end:5px solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow{inset-inline-start:5px}.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow{inset-inline:auto 5px}.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-start:100%;border-inline-start:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow{inset-block:auto 5px}.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow{inset-block-start:calc(50% - 5px);inset-inline-end:100%;border-inline-end:5px solid;border-block-start:5px solid transparent;border-block-end:5px solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow{inset-block-start:5px}.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow{inset-block:auto 5px}";
-const NanoTooltipStyle0 = tooltipCss;
-
-const Tooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.nanoShow = index.createEvent(this, "nanoShow", 7);
-        this.nanoAfterShow = index.createEvent(this, "nanoAfterShow", 7);
-        this.nanoHide = index.createEvent(this, "nanoHide", 7);
-        this.nanoAfterHide = index.createEvent(this, "nanoAfterHide", 7);
-    }
-    isVisible = false;
-    popover;
-    tooltipPositioner;
-    tooltip;
-    _target;
-    get target() {
-        return this._target;
-    }
-    set target(newTarget) {
-        if (newTarget !== this._target && this._target) {
-            this._target.removeAttribute('aria-label');
-        }
-        newTarget.setAttribute('aria-label', this.label);
-        this._target = newTarget;
-    }
-    label = '';
-    get host() { return index.getElement(this); }
-    /** The tooltip's content. Alternatively, you can use the content slot. */
-    content = '';
-    setLabel() {
-        const contentSlotNodes = Array.from(this.host.querySelectorAll('[slot="content"]'));
-        const textContent = contentSlotNodes
-            .map((node) => node.textContent)
-            .join(' ')
-            .trim();
-        if (!this.target) {
-            this.target = this.getTarget();
-            if (!this.target)
-                return;
-        }
-        this.label = textContent || this.content;
-        this.target.setAttribute('aria-label', this.label);
-    }
-    /**
-     * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
-     * inside of the viewport.
-     */
-    placement = 'top';
-    /** Set to true to disable the tooltip so it won't show when triggered. */
-    disabled = false;
-    /** The distance in pixels from which to offset the tooltip away from its target. */
-    distance = 10;
-    /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
-    open = false;
-    /** The distance in pixels from which to offset the tooltip along its target. */
-    skidding = 0;
-    /**
-     * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
-     * `overflow: auto|scroll`.
-     */
-    hoist = false;
-    /**
-     * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
-     * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
-     * programmatically.
-     */
-    trigger = 'hover focus';
-    handleOpenChange() {
-        if (this.open)
-            this.show();
-        else
-            this.hide();
-    }
-    // Events
-    /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */
-    nanoShow;
-    /** Emitted after the tooltip has shown and all transitions are complete. */
-    nanoAfterShow;
-    /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */
-    nanoHide;
-    /** Emitted after the tooltip has hidden and all transitions are complete. */
-    nanoAfterHide;
-    // Public methods
-    /** Shows the tooltip. */
-    async show() {
-        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-        if (this.isVisible || this.disabled) {
-            return;
-        }
-        const slShow = this.nanoShow.emit();
-        if (slShow.defaultPrevented) {
-            this.open = false;
-            return;
-        }
-        this.isVisible = true;
-        this.open = true;
-        if (typeof this.tooltipPositioner?.showPopover === 'function') {
-            this.hoist = true;
-            this.popover.show();
-            this.tooltipPositioner.showPopover();
-        }
-        else {
-            this.popover.show();
-        }
-    }
-    /** Hides the tooltip. */
-    async hide() {
-        // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher
-        if (!this.isVisible) {
-            return;
-        }
-        const slHide = this.nanoHide.emit();
-        if (slHide.defaultPrevented) {
-            this.open = true;
-            return;
-        }
-        this.isVisible = false;
-        this.open = false;
-        this.popover.hide();
-        setTimeout(() => {
-            if (!this.open &&
-                typeof this.tooltipPositioner?.hidePopover === 'function') {
-                this.tooltipPositioner.hidePopover();
-            }
-        }, 300);
-    }
-    // Private methods
-    getTarget() {
-        // Get the first child that isn't a <style> or content slot
-        const target = [...Array.from(this.host.children)].find((el) => el.tagName.toLowerCase() !== 'style' &&
-            el.getAttribute('slot') !== 'content');
-        if (!target) {
-            throw new Error('Invalid tooltip target: no child element was found.');
-        }
-        return target;
-    }
-    hasTrigger(triggerType) {
-        const triggers = this.trigger.split(' ');
-        return triggers.includes(triggerType);
-    }
-    syncOptions() {
-        this.popover.setOptions({
-            strategy: this.hoist ? 'fixed' : 'absolute',
-            placement: this.placement,
-            distance: this.distance,
-            skidding: this.skidding,
-            transitionElement: this.tooltip,
-            onAfterHide: () => this.nanoAfterHide.emit(),
-            onAfterShow: () => this.nanoAfterShow.emit(),
-        });
-    }
-    // Event Handlers
-    handleBlur = () => {
-        if (this.hasTrigger('focus')) {
-            this.hide();
-        }
-    };
-    handleClick = () => {
-        if (this.hasTrigger('click')) {
-            if (this.open)
-                this.hide();
-            else
-                this.show();
-        }
-    };
-    handleFocus = () => {
-        if (this.hasTrigger('focus')) {
-            this.show();
-        }
-    };
-    handleKeyDown = (event) => {
-        // Pressing escape when the target element has focus should dismiss the tooltip
-        if (this.open && event.key === 'Escape') {
-            event.stopPropagation();
-            this.hide();
-        }
-    };
-    handleMouseOver = () => {
-        if (this.hasTrigger('hover')) {
-            this.show();
-        }
-    };
-    handleMouseOut = () => {
-        if (this.hasTrigger('hover')) {
-            this.hide();
-        }
-    };
-    handleSlotChange = () => {
-        this.target = this.getTarget();
-    };
-    // Stencil hooks
-    componentDidLoad() {
-        this.target = this.getTarget();
-        this.popover = new popover.Popover(this.target, this.tooltipPositioner);
-        this.syncOptions();
-        this.setLabel();
-        // Show on init if open
-        this.tooltipPositioner.hidden = !this.open;
-        if (this.open) {
-            this.show();
-        }
-    }
-    componentDidUpdate() {
-        this.syncOptions();
-    }
-    disconnectedCallback() {
-        if (this.popover)
-            this.popover.destroy();
-    }
-    render() {
-        return (renderer.h(index.Host, { key: 'aea96e5f6c3a04be33309614166cde8809501bdd', onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick, class: "nano-tooltip" }, renderer.h("slot", { key: '1d35074667f546275cd81875cf49b5de5a9a144f', onSlotchange: this.handleSlotChange }), renderer.h("div", { key: '694a19141a36749d393e0db08ce48bfc490e7938', ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner", popover: "manual" }, renderer.h("div", { key: '8b181e183dff1ab3b1a2253f693f6d62f6a504d2', part: "base", ref: (el) => (this.tooltip = el), class: {
-                tooltip: true,
-                'tooltip--open': this.open,
-            }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, renderer.h("slot", { key: 'ba3d58a1cab421828b90a880019c334ddd15c40a', name: "content", onSlotchange: () => this.setLabel() }, this.content), renderer.h("div", { key: 'e254be92d3ca7ff1fc592c6f81a6b4de0185434a', class: "tooltip-arrow", "data-popper-arrow": true })))));
-    }
-    static get watchers() { return {
-        "content": ["setLabel"],
-        "open": ["handleOpenChange"]
-    }; }
-};
-Tooltip.style = NanoTooltipStyle0;
-
-exports.nano_icon_button = IconButton;
-exports.nano_tooltip = Tooltip;
-
-//# sourceMappingURL=nano-icon-button_2.cjs.entry.js.map

package/dist/cjs/nano-icon-button_2.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"nano-icon-button.nano-tooltip.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,aAAa,GAAG,++CAA++C,CAAC;AACtgD,6BAAe,aAAa;;MCoBf,UAAU;;;;IACb,MAAM,CAAoB;;;IAK1B,QAAQ,CAAU;;IAGlB,OAAO,CAAU;;IAGA,IAAI,GAAkC,QAAQ,CAAC;;IAG/C,IAAI,CAAU;;IAGd,KAAK,CAAU;;;IAIhC,KAAK,CAAU;;IAGf,WAAW,GAAY,KAAK,CAAC;;IAGZ,QAAQ,GAAG,KAAK,CAAC;;;IAIlC,IAAI,CAAqB;;;IAIzB,GAAG,CAAqB;;;IAIxB,MAAM,CAAqB;;;IAI3B,IAAI,CAA2B;;IAIvC,MAAM,QAAQ;QACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;;;;;;IAOO,QAAQ;QACd,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAEvC,IAAI,IAAI,YAAY,eAAe,EAAE;YACnC,OAAO,IAAI,CAAC;SACb;QACD,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC5B,MAAM,EAAE,GAAG,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;YACzC,IAAI,EAAE,YAAY,eAAe,EAAE;gBACjC,OAAO,EAAE,CAAC;aACX;SACF;QACD,OAAO,IAAI,CAAC;KACb;IAEO,WAAW,GAAG,CAAC,EAAS;QAC9B,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ;YAAE,OAAO;QACnC,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAE/B,IAAI,MAAM,EAAE;YACV,EAAE,CAAC,cAAc,EAAE,CAAC;YAEpB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YACpD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;YAC5B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAClC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC/B,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,UAAU,CAAC,MAAM,EAAE,CAAC;SACrB;KACF,CAAC;IAEF,gBAAgB;QACdA,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACnC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,MAAM;YAAEA,yBAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACpD;IAED,oBAAoB;QAClBA,yBAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACrC;IAEO,OAAO;QACb,MAAM,OAAO,GAAmB,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAG,GAAG,CAAC;QAEzE,QACEC,WAAC,OAAO,IACN,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;aACvC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC1D,GAAG,EAAE,IAAI,CAAC,GAAG,IAAI,SAAS,EAC1B,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,IAErDA,qBAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACpDA,0BACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,iBACL,MAAM,EAClB,IAAI,EAAE,KAAK,EACX,IAAI,EAAC,MAAM,GACX,CACM,EACV;KACH;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,QACEA,WAACC,UAAI,IACH,KAAK,EAAC,kBAAkB,mBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE5CD,6BAAc,OAAO,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,EAAE,CAAgB,CAC7D,EACP;SACH;QACD,QACEA,WAACC,UAAI,IACH,KAAK,EAAC,kBAAkB,mBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,IAE3C,IAAI,CAAC,OAAO,EAAE,CACV,EACP;KACH;;;;AC5KH,MAAM,UAAU,GAAG,ykHAAykH,CAAC;AAC7lH,0BAAe,UAAU;;MCsBZ,OAAO;;;;;;;;IACV,SAAS,GAAG,KAAK,CAAC;IAClB,OAAO,CAAU;IACjB,iBAAiB,CAAc;IAC/B,OAAO,CAAc;IAErB,OAAO,CAAc;IAC7B,IAAY,MAAM;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC;KACrB;IACD,IAAY,MAAM,CAAC,SAAS;QAC1B,IAAI,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;YAC9C,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;SAC5C;QACD,SAAS,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACjD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;KAC1B;IAEO,KAAK,GAAG,EAAE,CAAC;;;IAKX,OAAO,GAAG,EAAE,CAAC;IAGrB,QAAQ;QACN,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CACjC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAC/C,CAAC;QACF,MAAM,WAAW,GAAG,gBAAgB;aACjC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,WAAW,CAAC;aAC/B,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,CAAC;QAEV,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;YAE/B,IAAI,CAAC,IAAI,CAAC,MAAM;gBAAE,OAAO;SAC1B;QAED,IAAI,CAAC,KAAK,GAAG,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC;QACzC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KACpD;;;;;IAMO,SAAS,GAYA,KAAK,CAAC;;IAGf,QAAQ,GAAG,KAAK,CAAC;;IAGjB,QAAQ,GAAG,EAAE,CAAC;;IAGkB,IAAI,GAAG,KAAK,CAAC;;IAG7C,QAAQ,GAAG,CAAC,CAAC;;;;;IAMI,KAAK,GAAG,KAAK,CAAC;;;;;;IAO/B,OAAO,GAAW,aAAa,CAAC;IAGxC,gBAAgB;QACd,IAAI,IAAI,CAAC,IAAI;YAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;YACtB,IAAI,CAAC,IAAI,EAAE,CAAC;KAClB;;;IAKQ,QAAQ,CAAe;;IAGvB,aAAa,CAAe;;IAG5B,QAAQ,CAAe;;IAGvB,aAAa,CAAe;;;IAMrC,MAAM,IAAI;;QAER,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;YACnC,OAAO;SACR;QACD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;YAClB,OAAO;SACR;QAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,OAAO,IAAI,CAAC,iBAAiB,EAAE,WAAW,KAAK,UAAU,EAAE;YAC7D,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;YAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;YACpB,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,CAAC;SACtC;aAAM;YACL,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;SACrB;KACF;;IAID,MAAM,IAAI;;QAER,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO;SACR;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;YAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjB,OAAO;SACR;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAEpB,UAAU,CAAC;YACT,IACE,CAAC,IAAI,CAAC,IAAI;gBACV,OAAO,IAAI,CAAC,iBAAiB,EAAE,WAAW,KAAK,UAAU,EACzD;gBACA,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,CAAC;aACtC;SACF,EAAE,GAAG,CAAC,CAAC;KACT;;IAIO,SAAS;;QAEf,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACrD,CAAC,EAAE,KACD,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO;YACpC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CACzB,CAAC;QAEjB,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;SACxE;QAED,OAAO,MAAM,CAAC;KACf;IAEO,UAAU,CAAC,WAAmB;QACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;KACvC;IAEO,WAAW;QACjB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;YACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,OAAO,GAAG,UAAU;YAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;YACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,iBAAiB,EAAE,IAAI,CAAC,OAAO;YAC/B,WAAW,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;YAC5C,WAAW,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;SAC7C,CAAC,CAAC;KACJ;;IAIO,UAAU,GAAG;QACnB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,IAAI,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,EAAE,CAAC;;gBACtB,IAAI,CAAC,IAAI,EAAE,CAAC;SAClB;KACF,CAAC;IAEM,WAAW,GAAG;QACpB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAEM,aAAa,GAAG,CAAC,KAAoB;;QAE3C,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;YACvC,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAEM,eAAe,GAAG;QACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAEM,cAAc,GAAG;QACvB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;YAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF,CAAC;IAEM,gBAAgB,GAAG;QACzB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;KAChC,CAAC;;IAIF,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;QAC/B,IAAI,CAAC,OAAO,GAAG,IAAIC,eAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAChE,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;;QAGhB,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAC3C,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAED,kBAAkB;QAChB,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;KAC1C;IAED,MAAM;QACJ,QACEF,WAACC,UAAI,qDACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAC,cAAc,IAEpBD,sEAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,EAC7CA,qEACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,oBAAoB,EAC1B,OAAO,EAAC,QAAQ,IAEhBA,qEACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE;gBACL,OAAO,EAAE,IAAI;gBACb,eAAe,EAAE,IAAI,CAAC,IAAI;aAC3B,EACD,IAAI,EAAC,SAAS,iBACD,IAAI,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,IAEzCA,sEAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,IACrD,IAAI,CAAC,OAAO,CACR,EACPA,qEAAK,KAAK,EAAC,eAAe,8BAAyB,CAC/C,CACF,CACD,EACP;KACH;;;;;;;;;;;","names":["focusVisible","h","Host","Popover"],"sources":["src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx","src/components/tooltip/tooltip.scss?tag=nano-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["@use 'sass:map';\n@use '../../global/style/nano-theme/tokens';\n@use '../../global/style/utilities/mixins' as mx;\n\n:host {\n  /**\n    * @prop --color: defaults to #{map.get(tokens.$colors, palegrey)};\n    * @prop --active-color: defaults to #{map.get(tokens.$colors, darkblue--faded)};\n    * @prop --hover-color: defaults to #{map.get(tokens.$colors, blue)};\n    * @prop --background: defaults to transparent;\n    * @prop --padding: defaults to #{tokens.$spacing-small};\n    * @prop --box-shadow: defaults to none;\n    */\n\n  --border-radius: #{tokens.$border-radius-medium};\n  --active-color: #{map.get(tokens.$colors, darkblue--faded)};\n  --hover-color: #{map.get(tokens.$colors, blue)};\n  --nano-color-base: var(--color, #{map.get(tokens.$colors, mediumgrey)});\n  --background: transparent;\n  --padding: #{tokens.$spacing-small};\n  --box-shadow: none;\n  --button-bg: var(--background);\n\n  border-radius: var(--border-radius);\n  display: inline-block;\n}\n\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  border: none;\n  border-radius: inherit;\n  background: var(--button-bg);\n  font-size: inherit;\n  color: var(--color);\n  padding: var(--padding);\n  cursor: pointer;\n  appearance: none;\n  transition: box-shadow #{tokens.$transition-xfast} ease-in-out;\n  box-shadow: var(--box-shadow);\n\n  &:hover:not(.icon-button--disabled),\n  &:focus:not(.icon-button--disabled) {\n    color: var(--hover-color);\n\n    --nano-color-base: var(--hover-color);\n  }\n\n  &:active:not(.icon-button--disabled) {\n    color: var(--active-color);\n\n    --nano-color-base: var(--active-color);\n  }\n\n  &:focus {\n    outline: none;\n  }\n}\n\n.icon-button__label {\n  @include mx.visually-hide();\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: #{tokens.$control-focus-style};\n}\n","import {\n  Component,\n  Prop,\n  ComponentInterface,\n  Method,\n  Element,\n  Host,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n *\n * @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n */\n@Component({\n  tag: 'nano-icon-button',\n  styleUrl: 'icon-button.scss',\n  shadow: true,\n})\nexport class IconButton implements ComponentInterface {\n  private button: HTMLButtonElement;\n\n  @Element() host: HTMLNanoIconButtonElement;\n\n  /** The name of the icon to draw. */\n  @Prop() iconName?: string;\n\n  /** An external URL of an SVG file. */\n  @Prop() iconSrc?: string;\n\n  /** The default behavior of the button. */\n  @Prop({ reflect: true }) type: 'submit' | 'reset' | 'button' = 'button';\n\n  /** The name of the button, submitted as a pair with the button’s value as part of the form data. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** Defines the value associated with the button’s name when it’s submitted with the form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  /** A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n   * always include a label that describes what the icon button does. */\n  @Prop() label!: string;\n\n  /** display the label as a `<nano-tooltip />` */\n  @Prop() showTooltip: boolean = false;\n\n  /** Set to true to disable the button. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Contains a URL or a URL fragment that the hyperlink points to.\n   * If this property is set, an anchor tag will be rendered. */\n  @Prop() href: string | undefined;\n\n  /** Specifies the relationship of the target object to the link object.\n   * The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types) */\n  @Prop() rel: string | undefined;\n\n  /** Specifies where to display the linked URL. Only applies when an `href` is provided.\n   * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. */\n  @Prop() target: string | undefined;\n\n  /** The HTML form element or form element id.\n   * Used to submit a form when the button is not a child of the form. */\n  @Prop() form: HTMLFormElement | string;\n\n  /** Sets focus on the internal button */\n  @Method()\n  async setFocus() {\n    this.button.focus();\n  }\n\n  /**\n   * Finds the form element based on the provided `form` selector\n   * or element reference provided.\n   * @returns the found form element (if found)\n   */\n  private findForm(): HTMLFormElement | null {\n    const { form, host } = this;\n    if (!form) return host.closest('form');\n\n    if (form instanceof HTMLFormElement) {\n      return form;\n    }\n    if (typeof form === 'string') {\n      const el = document.getElementById(form);\n      if (el instanceof HTMLFormElement) {\n        return el;\n      }\n    }\n    return null;\n  }\n\n  private handleClick = (ev: Event) => {\n    if (this.type === 'button') return;\n    const formEl = this.findForm();\n\n    if (formEl) {\n      ev.preventDefault();\n\n      const fakeButton = document.createElement('button');\n      fakeButton.type = this.type;\n      fakeButton.style.display = 'none';\n      formEl.appendChild(fakeButton);\n      fakeButton.click();\n      fakeButton.remove();\n    }\n  };\n\n  componentDidLoad() {\n    focusVisible.observe(this.button);\n  }\n\n  connectedCallback() {\n    if (this.button) focusVisible.observe(this.button);\n  }\n\n  disconnectedCallback() {\n    focusVisible.unobserve(this.button);\n  }\n\n  private content() {\n    const TagType: 'a' | 'button' = this.href === undefined ? 'button' : 'a';\n\n    return (\n      <TagType\n        onClick={this.handleClick}\n        part=\"base\"\n        ref={(el) => (this.button = el)}\n        class={{\n          'icon-button': true,\n          'icon-button--disabled': this.disabled,\n        }}\n        name={this.name}\n        value={this.value}\n        href={this.href || undefined}\n        target={this.href && this.target ? this.target : undefined}\n        rel={this.rel || undefined}\n        type={!this.href && this.type ? this.type : undefined}\n      >\n        <span class=\"icon-button__label\">{this.label}</span>\n        <nano-icon\n          name={this.iconName}\n          src={this.iconSrc}\n          aria-hidden=\"true\"\n          lazy={false}\n          part=\"icon\"\n        />\n      </TagType>\n    );\n  }\n\n  render() {\n    if (this.showTooltip) {\n      return (\n        <Host\n          class=\"nano-icon-button\"\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>\n        </Host>\n      );\n    }\n    return (\n      <Host\n        class=\"nano-icon-button\"\n        aria-disabled={this.disabled ? 'true' : null}\n      >\n        {this.content()}\n      </Host>\n    );\n  }\n}\n","@use '../../global/style/nano-theme/tokens';\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0.125s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n  --background: #{tokens.$tooltip-bg-color};\n  --color: #{tokens.$tooltip-color};;\n\n  /* autoprefixer: ignore next */\n  display: contents;\n}\n\n.tooltip {\n  $self: &;\n\n  max-inline-size: var(--max-width);\n  border-radius: #{tokens.$tooltip-border-radius};\n  background-color: var(--background);\n  font-size: #{tokens.$tooltip-fontsize};\n  line-height: 1.5;\n  color: var(--color);\n  opacity: 0;\n  padding: #{tokens.$tooltip-padding};\n  transform: translateY(10px) translateZ(0);\n  transform-origin: bottom;\n  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);\n  white-space: normal;\n\n  &-arrow {\n    content: '';\n    position: absolute;\n    inline-size: 0;\n    block-size: 0;\n    color: var(--background);\n    transition: 0.2s ease transform;\n  }\n\n  &-positioner {\n    position: absolute;\n    z-index: #{tokens.$layer-index-tooltip};\n    border: 0;\n    background: none;\n    padding: 0;\n    overflow: visible;\n    color: unset;\n\n    &::backdrop { display: none; }\n\n    &[popover],\n    &:popover-open {\n      inset: unset;\n    }\n\n    #{$self} {\n      transition-delay: var(--show-delay);\n      transition-duration: var(--show-duration);\n      transition-timing-function: var(--show-timing-function);\n    }\n\n    &[data-popper-placement^='top'] #{$self} {\n      transform-origin: bottom;\n      transform: translateY(-10px) translateZ(0);\n    }\n\n    &[data-popper-placement^='bottom'] #{$self} {\n      transform-origin: top;\n    }\n\n    &[data-popper-placement^='left'] #{$self} {\n      transform-origin: right;\n    }\n\n    &[data-popper-placement^='right'] #{$self} {\n      transform-origin: left;\n    }\n\n    &.popover-visible #{$self} {\n      opacity: 1;\n      transform: none;\n    }\n\n    // Arrow + bottom\n    &[data-popper-placement^='bottom'] #{$self}-arrow {\n      inset-block-end: 100%;\n      inset-inline-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      border-block-end: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='bottom-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='bottom-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + top\n    &[data-popper-placement^='top'] #{$self}-arrow {\n      inset-block-start: 100%;\n      inset-inline-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      border-block-start: #{tokens.$tooltip-arrow-size} solid;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='top-start'] #{$self}-arrow {\n      inset-inline-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='top-end'] #{$self}-arrow {\n      inset-inline: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + left\n    &[data-popper-placement^='left'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-start: 100%;\n      border-inline-start: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='left-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='left-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$tooltip-arrow-offset};\n    }\n\n    // Arrow + right\n    &[data-popper-placement^='right'] #{$self}-arrow {\n      inset-block-start: calc(50% - #{tokens.$tooltip-arrow-size});\n      inset-inline-end: 100%;\n      border-inline-end: #{tokens.$tooltip-arrow-size} solid;\n      border-block-start: #{tokens.$tooltip-arrow-size} solid transparent;\n      border-block-end: #{tokens.$tooltip-arrow-size} solid transparent;\n    }\n\n    &[data-popper-placement='right-start'] #{$self}-arrow {\n      inset-block-start: #{tokens.$tooltip-arrow-offset};\n    }\n\n    &[data-popper-placement='right-end'] #{$self}-arrow {\n      inset-block: auto #{tokens.$tooltip-arrow-offset};\n    }\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { h } from '../../utils/renderer';\nimport Popover from '../../utils/popover';\n\n/**\n * Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n */\n@Component({\n  tag: 'nano-tooltip',\n  styleUrl: 'tooltip.scss',\n  shadow: true,\n})\nexport class Tooltip {\n  private isVisible = false;\n  private popover: Popover;\n  private tooltipPositioner: HTMLElement;\n  private tooltip: HTMLElement;\n\n  private _target: HTMLElement;\n  private get target() {\n    return this._target;\n  }\n  private set target(newTarget) {\n    if (newTarget !== this._target && this._target) {\n      this._target.removeAttribute('aria-label');\n    }\n    newTarget.setAttribute('aria-label', this.label);\n    this._target = newTarget;\n  }\n\n  private label = '';\n\n  @Element() host: HTMLNanoTooltipElement;\n\n  /** The tooltip's content. Alternatively, you can use the content slot. */\n  @Prop() content = '';\n\n  @Watch('content')\n  setLabel() {\n    const contentSlotNodes = Array.from(\n      this.host.querySelectorAll('[slot=\"content\"]')\n    );\n    const textContent = contentSlotNodes\n      .map((node) => node.textContent)\n      .join(' ')\n      .trim();\n\n    if (!this.target) {\n      this.target = this.getTarget();\n\n      if (!this.target) return;\n    }\n\n    this.label = textContent || this.content;\n    this.target.setAttribute('aria-label', this.label);\n  }\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @Prop() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Set to true to disable the tooltip so it won't show when triggered. */\n  @Prop() disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @Prop() distance = 10;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @Prop({ mutable: true, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @Prop() skidding = 0;\n\n  /**\n   * Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n   * `overflow: auto|scroll`.\n   */\n  @Prop({ mutable: true }) hoist = false;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @Prop() trigger: string = 'hover focus';\n\n  @Watch('open')\n  handleOpenChange() {\n    if (this.open) this.show();\n    else this.hide();\n  }\n\n  // Events\n\n  /** Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. */\n  @Event() nanoShow: EventEmitter;\n\n  /** Emitted after the tooltip has shown and all transitions are complete. */\n  @Event() nanoAfterShow: EventEmitter;\n\n  /** Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. */\n  @Event() nanoHide: EventEmitter;\n\n  /** Emitted after the tooltip has hidden and all transitions are complete. */\n  @Event() nanoAfterHide: EventEmitter;\n\n  // Public methods\n\n  /** Shows the tooltip. */\n  @Method()\n  async show() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (this.isVisible || this.disabled) {\n      return;\n    }\n    const slShow = this.nanoShow.emit();\n    if (slShow.defaultPrevented) {\n      this.open = false;\n      return;\n    }\n\n    this.isVisible = true;\n    this.open = true;\n    if (typeof this.tooltipPositioner?.showPopover === 'function') {\n      this.hoist = true;\n      this.popover.show();\n      this.tooltipPositioner.showPopover();\n    } else {\n      this.popover.show();\n    }\n  }\n\n  /** Hides the tooltip. */\n  @Method()\n  async hide() {\n    // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n    if (!this.isVisible) {\n      return;\n    }\n\n    const slHide = this.nanoHide.emit();\n    if (slHide.defaultPrevented) {\n      this.open = true;\n      return;\n    }\n\n    this.isVisible = false;\n    this.open = false;\n    this.popover.hide();\n\n    setTimeout(() => {\n      if (\n        !this.open &&\n        typeof this.tooltipPositioner?.hidePopover === 'function'\n      ) {\n        this.tooltipPositioner.hidePopover();\n      }\n    }, 300);\n  }\n\n  // Private methods\n\n  private getTarget() {\n    // Get the first child that isn't a <style> or content slot\n    const target = [...Array.from(this.host.children)].find(\n      (el) =>\n        el.tagName.toLowerCase() !== 'style' &&\n        el.getAttribute('slot') !== 'content'\n    ) as HTMLElement;\n\n    if (!target) {\n      throw new Error('Invalid tooltip target: no child element was found.');\n    }\n\n    return target;\n  }\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  private syncOptions() {\n    this.popover.setOptions({\n      strategy: this.hoist ? 'fixed' : 'absolute',\n      placement: this.placement,\n      distance: this.distance,\n      skidding: this.skidding,\n      transitionElement: this.tooltip,\n      onAfterHide: () => this.nanoAfterHide.emit(),\n      onAfterShow: () => this.nanoAfterShow.emit(),\n    });\n  }\n\n  // Event Handlers\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      if (this.open) this.hide();\n      else this.show();\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when the target element has focus should dismiss the tooltip\n    if (this.open && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      this.show();\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      this.hide();\n    }\n  };\n\n  private handleSlotChange = () => {\n    this.target = this.getTarget();\n  };\n\n  // Stencil hooks\n\n  componentDidLoad() {\n    this.target = this.getTarget();\n    this.popover = new Popover(this.target, this.tooltipPositioner);\n    this.syncOptions();\n    this.setLabel();\n\n    // Show on init if open\n    this.tooltipPositioner.hidden = !this.open;\n    if (this.open) {\n      this.show();\n    }\n  }\n\n  componentDidUpdate() {\n    this.syncOptions();\n  }\n\n  disconnectedCallback() {\n    if (this.popover) this.popover.destroy();\n  }\n\n  render() {\n    return (\n      <Host\n        onKeyDown={this.handleKeyDown}\n        onMouseOver={this.handleMouseOver}\n        onMouseOut={this.handleMouseOut}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onClick={this.handleClick}\n        class=\"nano-tooltip\"\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n        <div\n          ref={(el) => (this.tooltipPositioner = el)}\n          class=\"tooltip-positioner\"\n          popover=\"manual\"\n        >\n          <div\n            part=\"base\"\n            ref={(el) => (this.tooltip = el)}\n            class={{\n              tooltip: true,\n              'tooltip--open': this.open,\n            }}\n            role=\"tooltip\"\n            aria-hidden={this.open ? 'false' : 'true'}\n          >\n            <slot name=\"content\" onSlotchange={() => this.setLabel()}>\n              {this.content}\n            </slot>\n            <div class=\"tooltip-arrow\" data-popper-arrow></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}