@swisspost/design-system-components 10.0.0-next.55 → 10.0.0-next.57

package/dist/components/post-tabs.js

@@ -1,196 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { f as fadeOut, a as fadeIn } from './fade.js';
-import './breakpoints.js';
-
-/**
- * Invoke the `componentOnReady` method if it is available, simulate it otherwise
- * @see https://stenciljs.com/docs/api#componentonready
- */
-function componentOnReady(el) {
-    if (typeof el.componentOnReady === 'function') {
-        return el.componentOnReady();
-    }
-    else {
-        return new Promise(resolve => customOnReady(() => {
-            resolve(el);
-        }));
-    }
-}
-function customOnReady(callback) {
-    if (typeof requestAnimationFrame === 'function') {
-        return requestAnimationFrame(callback);
-    }
-    return setTimeout(callback);
-}
-
-const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}";
-
-const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
-        /**
-         * When set to true, this property allows the tabs container to span the
-         * full width of the screen, from edge to edge.
-         */
-        this.fullWidth = false;
-    }
-    get tabs() {
-        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
-    }
-    componentDidLoad() {
-        this.moveMisplacedTabs();
-        this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
-        void this.show(initiallyActivePanel);
-        this.isLoaded = true;
-    }
-    /**
-     * Shows the panel with the given name and selects its associated tab.
-     * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
-     */
-    async show(panelName) {
-        // do nothing if the tab is already active
-        if (panelName === this.activeTab?.panel) {
-            return;
-        }
-        const previousTab = this.activeTab;
-        const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
-        this.activateTab(newTab);
-        // if a panel is currently being displayed, remove it from the view and complete the associated animation
-        if (this.showing) {
-            this.showing.effect['target'].style.display = 'none';
-            this.showing.finish();
-        }
-        // hide the currently visible panel only if no other animation is running
-        if (previousTab && !this.showing && !this.hiding)
-            this.hidePanel(previousTab.panel);
-        // wait for any hiding animation to complete before showing the selected tab
-        if (this.hiding)
-            await this.hiding.finished;
-        this.showSelectedPanel();
-        // wait for any display animation to complete for the returned promise to fully resolve
-        if (this.showing)
-            await this.showing.finished;
-        if (this.isLoaded)
-            this.postChange.emit(this.activeTab.panel);
-    }
-    moveMisplacedTabs() {
-        if (!this.tabs)
-            return;
-        this.tabs.forEach(tab => {
-            if (tab.getAttribute('slot') === 'tabs')
-                return;
-            tab.setAttribute('slot', 'tabs');
-        });
-    }
-    enableTabs() {
-        if (!this.tabs)
-            return;
-        this.tabs.forEach(async (tab) => {
-            await componentOnReady(tab);
-            // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
-            if (tab.getAttribute('aria-controls'))
-                return;
-            const tabPanel = this.getPanel(tab.panel);
-            tab.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tab.id);
-            tab.addEventListener('click', () => {
-                void this.show(tab.panel);
-            });
-            tab.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    void this.show(tab.panel);
-                }
-            });
-            tab.addEventListener('keydown', (e) => {
-                if (e.key === 'ArrowRight' || e.key === 'ArrowLeft')
-                    this.navigateTabs(tab, e.key);
-            });
-        });
-        // if the currently active tab was removed from the DOM then select the first one
-        if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show(this.tabs[0]?.panel);
-        }
-    }
-    activateTab(tab) {
-        if (this.activeTab) {
-            this.activeTab.setAttribute('aria-selected', 'false');
-            this.activeTab.setAttribute('tabindex', '-1');
-            this.activeTab.classList.remove('active');
-        }
-        tab.setAttribute('aria-selected', 'true');
-        tab.setAttribute('tabindex', '0');
-        tab.classList.add('active');
-        this.activeTab = tab;
-    }
-    hidePanel(panelName) {
-        const previousPanel = this.getPanel(panelName);
-        if (!previousPanel)
-            return;
-        this.hiding = fadeOut(previousPanel);
-        this.hiding.onfinish = () => {
-            previousPanel.style.display = 'none';
-            this.hiding = null;
-        };
-    }
-    showSelectedPanel() {
-        const panel = this.getPanel(this.activeTab.panel);
-        panel.style.display = 'block';
-        // prevent the initially selected panel from fading in
-        if (!this.isLoaded)
-            return;
-        this.showing = fadeIn(panel);
-        this.showing.onfinish = () => {
-            this.showing = null;
-        };
-    }
-    getPanel(name) {
-        return this.host.querySelector(`post-tab-panel[name=${name}]`);
-    }
-    navigateTabs(tab, key) {
-        const activeTabIndex = Array.from(this.tabs).indexOf(tab);
-        let nextTab;
-        if (key === 'ArrowRight') {
-            nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];
-        }
-        else {
-            nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];
-        }
-        if (!nextTab)
-            return;
-        nextTab.focus();
-    }
-    render() {
-        return (h(Host, { key: 'f3534a3b05c379ce1cb311d4c5ea950c8eba87d0', "data-version": version }, h("div", { key: 'd812db6b2a895504fce8ac9dae2663821b9dd759', class: "tabs-wrapper", part: "tabs" }, h("div", { key: '9abd0ee00204a085ceaebce5e11fcff527273605', class: "tabs", role: "tablist" }, h("slot", { key: '89f09f443ca740dc9af66fedb1367cdb4885074d', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: '4a94a19fd67814482934bd31bb219470bea8dec6', class: "tab-content", part: "content" }, h("slot", { key: '44db446865edacb1b1c0fc20ef391adfa189e8cb', onSlotchange: () => this.moveMisplacedTabs() }))));
-    }
-    get host() { return this; }
-    static get style() { return postTabsCss; }
-}, [1, "post-tabs", {
-        "activePanel": [1, "active-panel"],
-        "fullWidth": [516, "full-width"],
-        "show": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tabs"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tabs":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTabs$1);
-            }
-            break;
-    } });
-}
-
-const PostTabs = PostTabs$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTabs, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as a,transformTag as n}from"@stencil/core/internal/client";import{v as o}from"./package.js";import{f as h}from"./fade.js";import{c as r}from"./breakpoints.js";const l=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.postChange=i(this,"postChange",7),this.isLoaded=!1,this.isNavigationMode=!1,this.fullWidth=!1}get tabs(){return Array.from(this.host.querySelectorAll("post-tab-item")).filter((t=>t.closest("post-tabs")===this.host))}get panels(){return Array.from(this.host.querySelectorAll("post-tab-panel")).filter((t=>t.closest("post-tabs")===this.host))}validateLabel(){this.isNavigationMode&&r(this,"label","string")}componentWillRender(){this.detectMode()}componentDidLoad(){if(this.moveMisplacedTabs(),this.moveMisplacedPanels(),this.enableTabs(),this.setupContentObserver(),this.validateLabel(),this.isNavigationMode){const t=this.findActiveNavigationTab();t&&this.activateTab(t)}else{const t=this.activeTab||this.tabs[0]?.name;t&&this.show(t)}}disconnectedCallback(){this.showing&&(this.showing.cancel(),this.showing=null),this.hiding&&(this.hiding.cancel(),this.hiding=null),this.contentObserver&&this.contentObserver.disconnect()}setupContentObserver(){this.contentObserver=new MutationObserver(this.handleContentChange.bind(this)),this.contentObserver.observe(this.host,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-navigation-mode","aria-current"]})}handleContentChange(t){const s=this.shouldRedetectMode(t);this.hasAriaCurrentChanged(t)&&this.isNavigationMode&&this.updateActiveNavigationTab(),s&&this.handleModeChange()}shouldRedetectMode(t){return t.some((t=>"childList"===t.type?t.addedNodes.length>0||t.removedNodes.length>0:"attributes"===t.type&&"data-navigation-mode"===t.attributeName))}hasAriaCurrentChanged(t){return t.some((t=>"attributes"===t.type&&"aria-current"===t.attributeName))}updateActiveNavigationTab(){const t=this.findActiveNavigationTab();t&&t!==this.currentActiveTab&&this.activateTab(t)}handleModeChange(){const t=this.isNavigationMode;this.detectMode(),t!==this.isNavigationMode&&(this.enableTabs(),this.initializeActiveTab())}initializeActiveTab(){if(this.isNavigationMode){const t=this.findActiveNavigationTab();t&&this.activateTab(t)}else{const t=this.activeTab||this.tabs[0]?.name;t&&this.show(t)}}detectMode(){const t=this.tabs.some((t=>{const s=null!==t.querySelector("a"),i="true"===t.getAttribute("data-navigation-mode");return s||i}));if(t&&this.panels.length>0)throw Error("PostTabs: Mixed mode detected. Cannot use both navigation mode (anchor elements) and panel mode (post-tab-panel elements) at the same time.");this.isNavigationMode=t}findActiveNavigationTab(){return this.tabs.find((t=>null!==t.querySelector('a[aria-current="page"]')))||null}async show(t){if(t===this.currentActiveTab?.name)return;const s=this.currentActiveTab,i=this.host.querySelector(`post-tab-item[name=${t}]`);this.activateTab(i),this.showing&&(this.showing.finish(),this.showing=null),!s||this.showing||this.hiding||this.hidePanel(s.name),this.hiding&&await this.hiding.finished,this.showSelectedPanel(),this.showing&&await this.showing.finished,this.isLoaded&&this.postChange.emit(this.currentActiveTab.name)}moveMisplacedTabs(){this.tabs&&this.tabs.forEach((t=>{t.getAttribute("slot")&&t.removeAttribute("slot")}))}moveMisplacedPanels(){this.panels&&this.panels.forEach((t=>{"panels"!==t.getAttribute("slot")&&t.setAttribute("slot","panels")}))}enableTabs(){this.tabs&&(this.tabs.forEach((async t=>{if(await function(t){return"function"==typeof t.componentOnReady?t.componentOnReady():new Promise((s=>function(t){return"function"==typeof requestAnimationFrame?requestAnimationFrame(t):setTimeout(t)}((()=>{s(t)}))))}(t),this.isNavigationMode)return;if(t.getAttribute("aria-controls"))return;const s=this.getPanel(t.name);s&&(t.setAttribute("aria-controls",s.id),s.setAttribute("aria-labelledby",t.id)),t.addEventListener("click",(()=>{this.show(t.name)})),t.addEventListener("keydown",(s=>{"Enter"!==s.key&&" "!==s.key||(s.preventDefault(),this.show(t.name))})),t.addEventListener("keydown",(s=>{"ArrowRight"!==s.key&&"ArrowLeft"!==s.key||this.navigateTabs(t,s.key)}))})),this.currentActiveTab&&!this.currentActiveTab.isConnected&&this.show(this.tabs[0]?.name))}activateTab(t){this.currentActiveTab&&(this.currentActiveTab.classList.remove("active"),this.isNavigationMode||(this.currentActiveTab.setAttribute("aria-selected","false"),this.currentActiveTab.setAttribute("tabindex","-1"))),t.classList.add("active"),this.isNavigationMode||(t.setAttribute("aria-selected","true"),t.setAttribute("tabindex","0")),this.currentActiveTab=t}hidePanel(t){const s=this.getPanel(t);s&&(this.hiding=h(s,"out"),this.hiding.onfinish=()=>{s.style.display="none",this.hiding=null})}showSelectedPanel(){const t=this.getPanel(this.currentActiveTab.name);t&&(t.style.display="block",this.isLoaded&&(this.showing=h(t,"in"),this.showing.onfinish=()=>{this.showing=null}))}getPanel(t){return this.host.querySelector(`post-tab-panel[for=${t}]`)}navigateTabs(t,s){const i=Array.from(this.tabs).indexOf(t);let e;e="ArrowRight"===s?this.tabs[i+1]||this.tabs[0]:this.tabs[i-1]||this.tabs[this.tabs.length-1],e&&(e.focus(),this.show(e.name))}render(){return e(a,{key:"89edc2a79734ee9cd60c9db0f01e2f05f2849071","data-version":o},e("div",{key:"d85aa2320cef490831bf59117b54dc7c4edd9d65",class:"tabs-wrapper",part:"post-tabs"},e(this.isNavigationMode?"nav":"div",{key:"e4aa70db5e2d0f3391d8ebfaab6374c1966d6678",class:"tabs",role:this.isNavigationMode?void 0:"tablist","aria-label":this.isNavigationMode?this.label:void 0},e("slot",{key:"7ab6f1e7bbe24ef642d5917b810b62e362ae2dc1",onSlotchange:()=>{this.moveMisplacedTabs(),this.enableTabs()}}))),!this.isNavigationMode&&e("div",{key:"354eafcea40f6aa9bbb206a93bc2155eac725bb4",class:"tab-content",part:"post-tabs-content"},e("slot",{key:"a133b48cea08eade14a954933062380edf112523",name:"panels",onSlotchange:()=>this.moveMisplacedPanels()})))}get host(){return this}static get watchers(){return{label:[{validateLabel:0}]}}static get style(){return'.tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:"";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:"";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}:host([full-width=true]) .tabs-wrapper{margin-inline:calc(-1*var(--post-container-offset))}:host([full-width=true]) .tabs-wrapper .tabs{padding-inline:var(--post-container-offset)}'}},[257,"post-tabs",{activeTab:[1,"active-tab"],fullWidth:[516,"full-width"],label:[513],isNavigationMode:[32],show:[64]},void 0,{label:[{validateLabel:0}]}]),c=l,d=function(){"undefined"!=typeof customElements&&["post-tabs"].forEach((t=>{"post-tabs"===t&&(customElements.get(n(t))||customElements.define(n(t),l))}))};export{c as PostTabs,d as defineCustomElement}

package/dist/components/post-togglebutton.js

@@ -1,56 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-
-const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
-
-const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
-         */
-        this.toggled = false;
-        this.handleClick = () => {
-            this.toggled = !this.toggled;
-        };
-        this.handleKeydown = (event) => {
-            // perform a click when enter or spaced are pressed to mimic the button behavior
-            if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault(); // prevents the page from scrolling when space is pressed
-                this.host.click();
-            }
-        };
-    }
-    componentWillLoad() {
-        // add event listener to not override listener that might be set on the host
-        this.host.addEventListener('click', () => this.handleClick());
-        this.host.addEventListener('keydown', (e) => this.handleKeydown(e));
-    }
-    render() {
-        return (h(Host, { key: 'ecd5772b09be8842e5c6fc3bf34932b27d90c533', "data-version": version, role: "button", tabindex: "0", "aria-pressed": this.toggled.toString() }, h("slot", { key: '3bb32b33155e71ced9375afb5a26d1d4e63a83c8' })));
-    }
-    get host() { return this; }
-    static get style() { return postTogglebuttonCss; }
-}, [1, "post-togglebutton", {
-        "toggled": [1028]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-togglebutton"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-togglebutton":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTogglebutton$1);
-            }
-            break;
-    } });
-}
-
-const PostTogglebutton = PostTogglebutton$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTogglebutton, defineCustomElement };
+import{P as o,d as t}from"./post-togglebutton2.js";const s=o,p=t;export{s as PostTogglebutton,p as defineCustomElement}

package/dist/components/post-togglebutton2.js

@@ -0,0 +1 @@
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as n}from"./package.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.toggled=!1,this.handleClick=()=>{this.toggled=!this.toggled},this.handleKeydown=t=>{"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.host.click())}}componentWillLoad(){this.host.addEventListener("click",(()=>this.handleClick())),this.host.addEventListener("keydown",(t=>this.handleKeydown(t)))}render(){return o(s,{key:"e0708bda008257aeab8e9ad82c33c66eff4aedb6","data-version":n,role:"button",tabindex:"0","aria-pressed":this.toggled.toString()},o("slot",{key:"a10862573155edbef1a88bd8a1f9f8abf9dbe4c0"}))}get host(){return this}static get style(){return":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}"}},[257,"post-togglebutton",{toggled:[1028]}]);function a(){"undefined"!=typeof customElements&&["post-togglebutton"].forEach((t=>{"post-togglebutton"===t&&(customElements.get(i(t))||customElements.define(i(t),r))}))}export{r as P,a as d}

package/dist/components/post-tooltip-trigger.js

@@ -1,206 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as IS_BROWSER } from './breakpoints.js';
-import { e as checkEmptyOrType } from './index2.js';
-import { v as version } from './package.js';
-import { i as isFocusable } from './focusable.js';
-
-const postTooltipTriggerCss = "post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}";
-
-const TRIGGER_EVENTS = ['pointerenter', 'pointerleave', 'focusin', 'focusout', 'long-press'];
-if (IS_BROWSER) {
-    (async () => {
-        await import('./long-press-event.js');
-    })();
-}
-const PostTooltipTrigger$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltipTrigger extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Delay (in milliseconds) before the tooltip is shown.
-         */
-        this.delay = 0;
-        /**
-         * Reference to the element inside the host that will act as the trigger.
-         */
-        this.trigger = null;
-        /**
-         * Timeout ID for the delay.
-         */
-        this.delayTimeout = null;
-        this.boundTriggerHandler = this.handleTriggerEvent.bind(this);
-        this.boundTooltipHandler = this.handleTooltipEvent.bind(this);
-    }
-    validateControlFor() {
-        checkEmptyOrType(this, 'for', 'string');
-    }
-    get tooltip() {
-        if (!IS_BROWSER)
-            return null;
-        const ref = document.getElementById(this.for);
-        return ref?.localName === 'post-tooltip' ? ref : null;
-    }
-    componentDidLoad() {
-        this.setupTrigger();
-        this.attachListeners();
-        this.attachTooltipListeners();
-    }
-    disconnectedCallback() {
-        this.removeListeners();
-        this.removeTooltipListeners();
-        this.cleanupTrigger();
-        if (this.delayTimeout) {
-            clearTimeout(this.delayTimeout);
-            this.delayTimeout = null;
-        }
-    }
-    handleSlotChange() {
-        this.cleanupTrigger();
-        this.setupTrigger();
-    }
-    cleanupTrigger() {
-        if (this.trigger) {
-            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
-            if (describedBy.includes(this.for)) {
-                const newDescribedBy = describedBy
-                    .split(' ')
-                    .filter(id => id !== this.for)
-                    .join(' ');
-                if (newDescribedBy) {
-                    this.trigger.setAttribute('aria-describedby', newDescribedBy);
-                }
-                else {
-                    this.trigger.removeAttribute('aria-describedby');
-                }
-            }
-            this.trigger = null;
-        }
-    }
-    setupTrigger() {
-        this.trigger = this.host.querySelector('*');
-        if (this.trigger) {
-            if (!isFocusable(this.trigger)) {
-                this.trigger.setAttribute('tabindex', '0');
-            }
-            const describedBy = this.trigger.getAttribute('aria-describedby') || '';
-            if (!describedBy.includes(this.for)) {
-                this.trigger.setAttribute('aria-describedby', `${describedBy} ${this.for}`.trim());
-            }
-        }
-        else {
-            console.warn('No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.');
-        }
-    }
-    attachListeners() {
-        TRIGGER_EVENTS.forEach(event => {
-            this.host.addEventListener(event, this.boundTriggerHandler);
-        });
-    }
-    removeListeners() {
-        TRIGGER_EVENTS.forEach(event => {
-            this.host.removeEventListener(event, this.boundTriggerHandler);
-        });
-    }
-    attachTooltipListeners() {
-        if (this.tooltip) {
-            this.tooltip.addEventListener('pointerenter', this.boundTooltipHandler);
-            this.tooltip.addEventListener('pointerleave', this.boundTooltipHandler);
-        }
-    }
-    removeTooltipListeners() {
-        if (this.tooltip) {
-            this.tooltip.removeEventListener('pointerenter', this.boundTooltipHandler);
-            this.tooltip.removeEventListener('pointerleave', this.boundTooltipHandler);
-        }
-    }
-    handleTriggerEvent(event) {
-        switch (event.type) {
-            case 'pointerenter':
-            case 'focusin':
-            case 'long-press':
-                this.handleEnter();
-                break;
-            case 'pointerleave':
-            case 'focusout':
-                this.handleLeave(event);
-                break;
-        }
-    }
-    handleTooltipEvent(event) {
-        switch (event.type) {
-            case 'pointerenter':
-                this.handleEnter();
-                break;
-            case 'pointerleave':
-                this.handleLeave(event);
-                break;
-        }
-    }
-    handleEnter() {
-        if (this.delayTimeout) {
-            clearTimeout(this.delayTimeout);
-            this.delayTimeout = null;
-        }
-        this.interestHandler();
-    }
-    handleLeave(event) {
-        const newTarget = event.relatedTarget;
-        if ((this.tooltip && newTarget && this.tooltip.contains(newTarget)) ||
-            newTarget === this.trigger) {
-            return;
-        }
-        this.interestLostHandler();
-    }
-    interestHandler() {
-        if (this.trigger) {
-            if (this.delay > 0) {
-                this.delayTimeout = window.setTimeout(() => {
-                    this.tooltip?.show(this.trigger);
-                    this.delayTimeout = null;
-                }, this.delay);
-            }
-            else {
-                this.tooltip?.show(this.trigger);
-            }
-        }
-    }
-    interestLostHandler() {
-        if (this.delayTimeout) {
-            clearTimeout(this.delayTimeout);
-            this.delayTimeout = null;
-        }
-        this.tooltip?.hide();
-    }
-    render() {
-        return (h(Host, { key: '48246523aabaf1851e05d0273346d3e26e7ad866', "data-version": version }, h("slot", { key: '0442aeadddd59642c317b6f10c93008adf3e6585', onSlotchange: () => this.handleSlotChange() })));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "for": ["validateControlFor"]
-    }; }
-    static get style() { return postTooltipTriggerCss; }
-}, [1, "post-tooltip-trigger", {
-        "for": [513],
-        "delay": [2]
-    }, undefined, {
-        "for": ["validateControlFor"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tooltip-trigger"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tooltip-trigger":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTooltipTrigger$1);
-            }
-            break;
-    } });
-}
-
-const PostTooltipTrigger = PostTooltipTrigger$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTooltipTrigger, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{I as r}from"./environment.js";import{e as n}from"./breakpoints.js";import{v as h}from"./package.js";import{i as a}from"./focusable.js";const l=["pointerenter","pointerleave","focusin","focusout","long-press"];r&&(async()=>{await import("./long-press-event.js")})();const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.delay=0,this.trigger=null,this.delayTimeout=null,this.boundTriggerHandler=this.handleTriggerEvent.bind(this),this.boundTooltipHandler=this.handleTooltipEvent.bind(this)}validateControlFor(){n(this,"for","string")}get tooltip(){if(!r)return null;const t=document.getElementById(this.for);return"post-tooltip"===t?.localName?t:null}componentDidLoad(){this.setupTrigger(),this.attachListeners(),this.attachTooltipListeners()}disconnectedCallback(){this.removeListeners(),this.removeTooltipListeners(),this.cleanupTrigger(),this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null)}handleSlotChange(){this.cleanupTrigger(),this.setupTrigger()}cleanupTrigger(){if(this.trigger){const t=this.trigger.getAttribute("aria-describedby")||"";if(t.includes(this.for)){const e=t.split(" ").filter((t=>t!==this.for)).join(" ");e?this.trigger.setAttribute("aria-describedby",e):this.trigger.removeAttribute("aria-describedby")}this.trigger=null}}setupTrigger(){if(this.trigger=this.host.querySelector("*"),this.trigger){a(this.trigger)||this.trigger.setAttribute("tabindex","0");const t=this.trigger.getAttribute("aria-describedby")||"";t.includes(this.for)||this.trigger.setAttribute("aria-describedby",`${t} ${this.for}`.trim())}else console.warn("No content found in the post-tooltip-trigger slot. Please insert a focusable element or content that can receive focus.")}attachListeners(){l.forEach((t=>{this.host.addEventListener(t,this.boundTriggerHandler)}))}removeListeners(){l.forEach((t=>{this.host.removeEventListener(t,this.boundTriggerHandler)}))}attachTooltipListeners(){this.tooltip&&(this.tooltip.addEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.addEventListener("pointerleave",this.boundTooltipHandler))}removeTooltipListeners(){this.tooltip&&(this.tooltip.removeEventListener("pointerenter",this.boundTooltipHandler),this.tooltip.removeEventListener("pointerleave",this.boundTooltipHandler))}handleTriggerEvent(t){switch(t.type){case"pointerenter":case"focusin":case"long-press":this.handleEnter();break;case"pointerleave":case"focusout":this.handleLeave(t)}}handleTooltipEvent(t){switch(t.type){case"pointerenter":this.handleEnter();break;case"pointerleave":this.handleLeave(t)}}handleEnter(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.interestHandler()}handleLeave(t){const e=t.relatedTarget;this.tooltip&&e&&this.tooltip.contains(e)||e===this.trigger||this.interestLostHandler()}interestHandler(){this.trigger&&(this.delay>0?this.delayTimeout=window.setTimeout((()=>{this.tooltip?.show(this.trigger),this.delayTimeout=null}),this.delay):this.tooltip?.show(this.trigger))}interestLostHandler(){this.delayTimeout&&(clearTimeout(this.delayTimeout),this.delayTimeout=null),this.tooltip?.hide()}render(){return s(i,{key:"4f6165e23284794b677748c495401ed7c110d134","data-version":h},s("slot",{key:"87a8d412ed0e3fb145853aebb9426dfe13677853",onSlotchange:()=>this.handleSlotChange()}))}get host(){return this}static get watchers(){return{for:[{validateControlFor:0}]}}static get style(){return"post-tooltip-trigger{vertical-align:top}:host{cursor:pointer}"}},[257,"post-tooltip-trigger",{for:[513],delay:[2]},void 0,{for:[{validateControlFor:0}]}]),p=c,d=function(){"undefined"!=typeof customElements&&["post-tooltip-trigger"].forEach((t=>{"post-tooltip-trigger"===t&&(customElements.get(o(t))||customElements.define(o(t),c))}))};export{p as PostTooltipTrigger,d as defineCustomElement}

package/dist/components/post-tooltip.js

@@ -1,114 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { v as version } from './package.js';
-import { d as checkEmptyOrOneOf } from './index2.js';
-import './breakpoints.js';
-import { a as PLACEMENT_TYPES, d as defineCustomElement$2 } from './post-popovercontainer2.js';
-
-const postTooltipCss = ":host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}";
-
-const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * Defines the position of the tooltip relative to its trigger.
-         * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
-         * For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
-         */
-        this.placement = 'top';
-        /**
-         * Whether or not to display a little pointer arrow
-         */
-        this.arrow = false;
-        /**
-         * Indicates the open state of the tooltip
-         */
-        this.open = false;
-    }
-    validatePlacement() {
-        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
-    }
-    componentWillLoad() {
-        this.validatePlacement();
-    }
-    componentDidLoad() {
-        if (!this.host.id) {
-            console.error(
-            /*prettier-ignore*/
-            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
-        }
-    }
-    /**
-     * Programmatically display the tooltip.
-     * @param target An element where the tooltip should be shown
-     */
-    async show(target) {
-        if (this.open)
-            return;
-        this.popoverRef.show(target);
-    }
-    /**
-     * Programmatically hide this tooltip.
-     */
-    async hide() {
-        this.popoverRef.hide();
-    }
-    /**
-     * Toggle tooltip display.
-     * @param target An element where the tooltip should be shown
-     * @param [force] Pass true to always show or false to always hide
-     */
-    async toggle(target, force) {
-        this.popoverRef.toggle(target, force);
-    }
-    /**
-     * Set the open state based on the toggle event.
-     * @param e Popovercontainer toggle event
-     */
-    handleToggle(e) {
-        this.open = e.detail.isOpen;
-    }
-    render() {
-        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
-        return (h(Host, { key: 'ebc25bd8a9615a13be82d58f246b5a5d42113cf2', "data-version": version }, h("post-popovercontainer", { key: 'dba7a96c1f354752475a6f1d9116b0097dddf320', safeSpace: "trapezoid", class: popoverClass, role: "tooltip", arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, h("slot", { key: '537370b88912d323a72ee074767b4cf2b4bc1b57' }))));
-    }
-    get host() { return this; }
-    static get watchers() { return {
-        "placement": ["validatePlacement"]
-    }; }
-    static get style() { return postTooltipCss; }
-}, [1, "post-tooltip", {
-        "placement": [1],
-        "arrow": [4],
-        "animation": [1],
-        "open": [1540],
-        "show": [64],
-        "hide": [64],
-        "toggle": [64]
-    }, undefined, {
-        "placement": ["validatePlacement"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["post-tooltip", "post-popovercontainer"];
-    components.forEach(tagName => { switch (tagName) {
-        case "post-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PostTooltip$1);
-            }
-            break;
-        case "post-popovercontainer":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const PostTooltip = PostTooltip$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { PostTooltip, defineCustomElement };
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{v as a}from"./package.js";import{d as n}from"./breakpoints.js";import{a as r,d as p}from"./post-popovercontainer2.js";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.placement="top",this.arrow=!1,this.open=!1}validatePlacement(){n(this,"placement",r)}componentWillLoad(){this.validatePlacement()}componentDidLoad(){this.host.id||console.error("No id set: <post-tooltip> must have an id, linking it to it's target element with a <post-tooltip-trigger> element.")}async show(t){this.open||await this.popoverRef.show(t)}async hide(){this.popoverRef.hide()}async toggle(t,e){this.popoverRef.toggle(t,e)}handleBeforeToggle(t){this.open=t.detail.willOpen}render(){return o(s,{key:"5de53c10c2556ddb974a65ba06e27ccc99311762","data-version":a},o("post-popovercontainer",{key:"ae3a26fc69d983884eb5aee2b024e74d91983c73",safeSpace:"trapezoid",class:this.arrow?"has-arrow":"",role:"tooltip",arrow:this.arrow,placement:this.placement,onPostBeforeToggle:t=>this.handleBeforeToggle(t),ref:t=>this.popoverRef=t},o("slot",{key:"1fd537504554e094894f8549de5c29c515322866"})))}get host(){return this}static get watchers(){return{placement:[{validatePlacement:0}]}}static get style(){return':host{display:none}:host([open]){display:contents}post-popovercontainer[arrow]::after{position:absolute;content:"";inset:-13px;z-index:-1}post-popovercontainer>div{color:var(--post-current-fg);background-color:var(--post-current-bg);padding:var(--post-core-dimension-4) var(--post-core-dimension-8);max-width:var(--post-tooltip-max-width, 280px);width:inherit;min-height:32px;word-wrap:break-word;white-space:normal}'}},[257,"post-tooltip",{placement:[1],arrow:[4],open:[1540],show:[64],hide:[64],toggle:[64]},void 0,{placement:[{validatePlacement:0}]}]),l=c,d=function(){"undefined"!=typeof customElements&&["post-tooltip","post-popovercontainer"].forEach((t=>{switch(t){case"post-tooltip":customElements.get(i(t))||customElements.define(i(t),c);break;case"post-popovercontainer":customElements.get(i(t))||p()}}))};export{l as PostTooltip,d as defineCustomElement}

package/dist/components/react/index.d.ts

@@ -31,3 +31,5 @@ export interface SetPlatformOptions {
   rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
 }
 export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../../types';