@swisspost/design-system-components 1.6.2 → 1.7.0

package/dist/collection/components/post-popover/post-popover.js

@@ -0,0 +1,267 @@
+import { h, Host } from "@stencil/core";
+import { version } from "../../../package.json";
+export class PostPopover {
+    constructor() {
+        this.placement = 'top';
+        this.closeButtonCaption = undefined;
+        this.arrow = true;
+        this.localTogglePopover = e => this.toggle(e.target);
+        this.localEnterTogglePopover = e => {
+            if (e.key === 'Enter')
+                this.toggle(e.target);
+        };
+        this.localTouchTogglePopover = e => {
+            e.preventDefault();
+            this.toggle(e.target);
+        };
+    }
+    connectedCallback() {
+        if (!this.triggers) {
+            throw new Error(`No trigger found for <post-popover popover-id="${this.host.id}`);
+        }
+        // As long as cross-shadow-boundary [popovertarget] and button.popoverTargetElement are not working
+        // we're left with listening to trigger events ourselves
+        // https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement
+        // https://github.com/whatwg/html/issues/9109#issuecomment-1494030465 (does not seem to work for now)
+        // https://stackoverflow.com/questions/77324143/popovertargetelement-does-not-cross-shadow-boundaries?noredirect=1#comment136318281_77324143
+        this.triggers.forEach(trigger => {
+            // See this.onToggle for one time mouse event listener
+            trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });
+            trigger.addEventListener('keypress', this.localEnterTogglePopover);
+            trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });
+            trigger.setAttribute('aria-expanded', 'false');
+        });
+    }
+    disconnectedCallback() {
+        this.triggers.forEach(trigger => {
+            trigger.removeEventListener('mouseup', this.localTogglePopover);
+            trigger.removeEventListener('keypress', this.localEnterTogglePopover);
+            trigger.removeEventListener('touch', this.localTouchTogglePopover);
+            trigger.removeAttribute('aria-expanded');
+        });
+    }
+    /**
+     * Programmatically display the popover
+     * @param target An element with [data-popover-target="id"] where the popover should be shown
+     */
+    async show(target) {
+        this.currentTarget = target;
+        this.popoverRef.show(target);
+        target.setAttribute('aria-expanded', 'true');
+    }
+    /**
+     * Programmatically hide this popover
+     */
+    async hide() {
+        this.popoverRef.hide();
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    /**
+     * Toggle popover display
+     * @param target An element with [data-popover-target="id"] where the popover should be anchored to
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.currentTarget = target;
+        const newState = await this.popoverRef.toggle(target, force);
+        target.setAttribute('aria-expanded', `${newState}`);
+    }
+    get triggers() {
+        return document.querySelectorAll(`[data-popover-target="${this.host.id}"]`);
+    }
+    /**
+     * One time event handler for click events
+     * A permanent event listener would prevent a toggle button from working properly:
+     * A click opens the popover, a second click first closes it (due to light dismiss), then directly
+     * opens it again because of the click listener on the button. Registering a new
+     * one time listener after a small timeout solves this issue.
+     * @param e toggle event from post-popovercontainer
+     */
+    onToggle(e) {
+        if (this.currentTarget) {
+            this.currentTarget.setAttribute('aria-expanded', `${e.detail}`);
+        }
+        if (!e.detail) {
+            window.requestAnimationFrame(() => {
+                this.triggers.forEach(trigger => {
+                    trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });
+                    trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });
+                });
+            });
+            // Handle missing re-focusing logic after close. Can be removed as soon as popovertarget works correctly
+            if (this.currentTarget) {
+                this.currentTarget.focus();
+                this.currentTarget = null;
+            }
+        }
+    }
+    // Fix for firefox to prevent the following lines from triggering
+    // https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts#L338
+    stopImmediatePropagation(e) {
+        e.stopImmediatePropagation();
+    }
+    render() {
+        return (h(Host, { "data-version": version }, h("post-popovercontainer", { arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e), onPostPopoverToggled: e => this.onToggle(e) }, h("div", { class: "popover-container", onPointerDown: e => this.stopImmediatePropagation(e), onPointerUp: e => this.stopImmediatePropagation(e) }, h("div", { class: "popover-content" }, h("slot", null)), h("button", { class: "btn-close", onClick: () => this.hide() }, h("span", { class: "visually-hidden" }, this.closeButtonCaption))))));
+    }
+    static get is() { return "post-popover"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nPopoverss are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "closeButtonCaption": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the caption of the close button for assistive technology"
+                },
+                "attribute": "close-button-caption",
+                "reflect": false
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a little indicator arrow"
+                },
+                "attribute": "arrow",
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(target: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-popover-target=\"id\"] where the popover should be shown"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically display the popover",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-popover-target=\"id\"] where the popover should be shown"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide this popover",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "(target: HTMLElement, force?: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-popover-target=\"id\"] where the popover should be anchored to"
+                        }, {
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": "Pass true to always show or false to always hide"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle popover display",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-popover-target=\"id\"] where the popover should be anchored to"
+                        }, {
+                            "name": "param",
+                            "text": "force Pass true to always show or false to always hide"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-popover.js.map

package/dist/collection/components/post-popover/post-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-popover.js","sourceRoot":"","sources":["../../../../src/components/post-popover/post-popover.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { Placement } from '@floating-ui/dom';\n\nimport { version } from '../../../package.json';\n@Component({\n  tag: 'post-popover',\n  styleUrl: 'post-popover.scss',\n  shadow: true,\n})\nexport class PostPopover {\n  private popoverRef: HTMLPostPopovercontainerElement;\n  private localTogglePopover: (e: Event) => Promise<void>;\n  private localEnterTogglePopover: (e: KeyboardEvent) => void;\n  private localTouchTogglePopover: (e: TouchEvent) => void;\n  private currentTarget: HTMLElement;\n\n  @Element() host: HTMLPostPopoverElement;\n\n  /**\n   * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Popoverss are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  /**\n   * Define the caption of the close button for assistive technology\n   */\n  @Prop() readonly closeButtonCaption!: string;\n  /**\n   * Show a little indicator arrow\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop() readonly arrow?: boolean = true;\n\n  constructor() {\n    this.localTogglePopover = e => this.toggle(e.target as HTMLElement);\n    this.localEnterTogglePopover = e => {\n      if (e.key === 'Enter') this.toggle(e.target as HTMLElement);\n    };\n    this.localTouchTogglePopover = e => {\n      e.preventDefault();\n      this.toggle(e.target as HTMLElement);\n    };\n  }\n\n  connectedCallback() {\n    if (!this.triggers) {\n      throw new Error(`No trigger found for <post-popover popover-id=\"${this.host.id}`);\n    }\n\n    // As long as cross-shadow-boundary [popovertarget] and button.popoverTargetElement are not working\n    // we're left with listening to trigger events ourselves\n    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/popoverTargetElement\n    // https://github.com/whatwg/html/issues/9109#issuecomment-1494030465 (does not seem to work for now)\n    // https://stackoverflow.com/questions/77324143/popovertargetelement-does-not-cross-shadow-boundaries?noredirect=1#comment136318281_77324143\n    this.triggers.forEach(trigger => {\n      // See this.onToggle for one time mouse event listener\n      trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });\n      trigger.addEventListener('keypress', this.localEnterTogglePopover);\n      trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });\n      trigger.setAttribute('aria-expanded', 'false');\n    });\n  }\n\n  disconnectedCallback() {\n    this.triggers.forEach(trigger => {\n      trigger.removeEventListener('mouseup', this.localTogglePopover);\n      trigger.removeEventListener('keypress', this.localEnterTogglePopover);\n      trigger.removeEventListener('touch', this.localTouchTogglePopover);\n      trigger.removeAttribute('aria-expanded');\n    });\n  }\n\n  /**\n   * Programmatically display the popover\n   * @param target An element with [data-popover-target=\"id\"] where the popover should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.currentTarget = target;\n    this.popoverRef.show(target);\n    target.setAttribute('aria-expanded', 'true');\n  }\n\n  /**\n   * Programmatically hide this popover\n   */\n  @Method()\n  async hide() {\n    this.popoverRef.hide();\n    this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));\n  }\n\n  /**\n   * Toggle popover display\n   * @param target An element with [data-popover-target=\"id\"] where the popover should be anchored to\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean) {\n    this.currentTarget = target;\n    const newState = await this.popoverRef.toggle(target, force);\n    target.setAttribute('aria-expanded', `${newState}`);\n  }\n\n  private get triggers() {\n    return document.querySelectorAll(`[data-popover-target=\"${this.host.id}\"]`);\n  }\n\n  /**\n   * One time event handler for click events\n   * A permanent event listener would prevent a toggle button from working properly:\n   * A click opens the popover, a second click first closes it (due to light dismiss), then directly\n   * opens it again because of the click listener on the button. Registering a new\n   * one time listener after a small timeout solves this issue.\n   * @param e toggle event from post-popovercontainer\n   */\n  private onToggle(e: CustomEvent<boolean>) {\n    if (this.currentTarget) {\n      this.currentTarget.setAttribute('aria-expanded', `${e.detail}`);\n    }\n    if (!e.detail) {\n      window.requestAnimationFrame(() => {\n        this.triggers.forEach(trigger => {\n          trigger.addEventListener('mouseup', this.localTogglePopover, { once: true });\n          trigger.addEventListener('touch', this.localTouchTogglePopover, { once: true });\n        });\n      });\n\n      // Handle missing re-focusing logic after close. Can be removed as soon as popovertarget works correctly\n      if (this.currentTarget) {\n        this.currentTarget.focus();\n        this.currentTarget = null;\n      }\n    }\n  }\n\n  // Fix for firefox to prevent the following lines from triggering\n  // https://github.com/oddbird/popover-polyfill/blob/main/src/popover.ts#L338\n  private stopImmediatePropagation(e: PointerEvent) {\n    e.stopImmediatePropagation();\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <post-popovercontainer\n          arrow={this.arrow}\n          placement={this.placement}\n          ref={e => (this.popoverRef = e)}\n          onPostPopoverToggled={e => this.onToggle(e)}\n        >\n          <div\n            class=\"popover-container\"\n            onPointerDown={e => this.stopImmediatePropagation(e)}\n            onPointerUp={e => this.stopImmediatePropagation(e)}\n          >\n            <div class=\"popover-content\">\n              <slot></slot>\n            </div>\n            <button class=\"btn-close\" onClick={() => this.hide()}>\n              <span class=\"visually-hidden\">{this.closeButtonCaption}</span>\n            </button>\n          </div>\n        </post-popovercontainer>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-popovercontainer/post-popovercontainer.css

@@ -0,0 +1 @@
+@layer polyfill{[popover]{position:fixed;z-index:2147483647;inset:0;padding:.25em;width:fit-content;height:fit-content;border-width:initial;border-color:initial;border-image:initial;border-style:solid;background-color:canvas;color:canvastext;overflow:auto;margin:auto}[popover]:not(.\:popover-open){display:none}[popover]:is(dialog[open]){display:revert}[anchor].\:popover-open{inset:auto}@supports selector([popover]:popover-open){[popover]:not(.\:popover-open,dialog[open]){display:revert}[anchor]:is(:popover-open){inset:auto}}@supports not (background-color: canvas){[popover]{background-color:white;color:black}}@supports(width: -moz-fit-content){[popover]{width:-moz-fit-content;height:-moz-fit-content}}@supports not (inset: 0){[popover]{top:0;left:0;right:0;bottom:0}}}.popover{box-shadow:.5px 3px 4px rgba(0,0,0,.1),2px 4px 10px 4px rgba(0,0,0,.12);position:fixed;z-index:1060;width:max-content;margin:0;padding:0;box-sizing:border-box;color:var(--post-contrast-color);background-color:rgb(var(--post-bg-rgb));border:1px solid rgba(0,0,0,0);border-radius:4px;overflow:visible}.arrow{position:absolute;width:.7071067812rem;height:.7071067812rem;background-color:inherit;rotate:45deg;pointer-events:none;z-index:-1;border-right:2px solid rgba(0,0,0,0);border-bottom:2px solid rgba(0,0,0,0)}

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -0,0 +1,288 @@
+import { h, Host } from "@stencil/core";
+import { arrow, autoUpdate, computePosition, flip, inline, offset, shift, limitShift, size, } from "@floating-ui/dom";
+// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green
+import "@oddbird/popover-polyfill";
+import { version } from "../../../package.json";
+const SIDE_MAP = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+};
+export class PostPopovercontainer {
+    constructor() {
+        this.placement = 'top';
+        this.arrow = false;
+    }
+    componentDidLoad() {
+        this.popoverRef.setAttribute('popover', '');
+        this.popoverRef.addEventListener('beforetoggle', this.handleToggle.bind(this));
+    }
+    disconnectedCallback() {
+        if (this.popoverRef)
+            this.popoverRef.removeEventListener('beforetoggle', e => this.toggle(e.target));
+        if (typeof this.clearAutoUpdate === 'function')
+            this.clearAutoUpdate();
+    }
+    /**
+     * Programmatically display the tooltip
+     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     */
+    async show(target) {
+        this.eventTarget = target;
+        this.popoverRef.showPopover();
+    }
+    /**
+     * Programmatically hide this tooltip
+     */
+    async hide() {
+        this.eventTarget = null;
+        this.popoverRef.hidePopover();
+    }
+    /**
+     * Toggle tooltip display
+     * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+     * @param force Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.eventTarget = target;
+        this.popoverRef.togglePopover(force);
+        return this.popoverRef.matches(':popover-open');
+    }
+    /**
+     * Start or stop auto updates based on tooltip events.
+     * Tooltips can be closed or opened with other methods than class members,
+     * therefore listening to the toggle event is safer for cleaning up.
+     * @param e ToggleEvent
+     */
+    handleToggle(e) {
+        const isOpen = e.newState === 'open';
+        if (isOpen) {
+            this.startAutoupdates();
+        }
+        else {
+            if (typeof this.clearAutoUpdate === 'function')
+                this.clearAutoUpdate();
+        }
+        this.postPopoverToggled.emit(isOpen);
+    }
+    /**
+     * Start listening for DOM updates, scroll events etc. that have
+     * an influence on tooltip positioning
+     */
+    startAutoupdates() {
+        this.clearAutoUpdate = autoUpdate(this.eventTarget, this.popoverRef, this.calculatePosition.bind(this));
+    }
+    async calculatePosition() {
+        const middleware = [
+            flip(),
+            inline(),
+            shift({
+                padding: 8,
+                // Prevents shifting away from the anchor too far, while shifting as far as possible
+                // https://floating-ui.com/docs/shift#limiter
+                limiter: limitShift({
+                    offset: 32,
+                }),
+            }),
+            size({
+                apply({ availableWidth, elements }) {
+                    Object.assign(elements.floating.style, {
+                        maxWidth: `${availableWidth - 16}px`,
+                    });
+                },
+            }),
+            offset(this.arrow ? 12 : 8), // 4px outside of element to account for focus outline + ~arrow size
+        ];
+        if (this.arrow) {
+            middleware.push(arrow({ element: this.arrowRef, padding: 8 }));
+        }
+        const { x, y, middlewareData, placement: currentPlacement, } = await computePosition(this.eventTarget, this.popoverRef, {
+            placement: this.placement || 'top',
+            strategy: 'fixed',
+            middleware,
+        });
+        // Tooltip
+        this.popoverRef.style.left = `${x}px`;
+        this.popoverRef.style.top = `${y}px`;
+        // Arrow
+        if (this.arrow) {
+            // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js
+            const side = currentPlacement.split('-')[0];
+            const { x: arrowX, y: arrowY } = middlewareData.arrow;
+            const staticSide = SIDE_MAP[side];
+            Object.assign(this.arrowRef.style, {
+                top: arrowY ? `${arrowY}px` : '',
+                left: arrowX ? `${arrowX}px` : '',
+                [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,
+            });
+        }
+    }
+    render() {
+        return (h(Host, { "data-version": version }, h("div", { class: "popover", part: "popover", ref: (el) => (this.popoverRef = el) }, this.arrow && (h("span", { class: "arrow", ref: el => {
+                this.arrowRef = el;
+            } })), h("slot", null))));
+    }
+    static get is() { return "post-popovercontainer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["post-popovercontainer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["post-popovercontainer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/.pnpm/@floating-ui+dom@1.5.4/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
+                },
+                "attribute": "placement",
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "arrow": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Wheter or not to display a little pointer arrow"
+                },
+                "attribute": "arrow",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "postPopoverToggled",
+                "name": "postPopoverToggled",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "(target: HTMLElement) => Promise<void>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically display the tooltip",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }]
+                }
+            },
+            "hide": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically hide this tooltip",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "(target: HTMLElement, force?: boolean) => Promise<boolean>",
+                    "parameters": [{
+                            "name": "target",
+                            "type": "HTMLElement",
+                            "docs": "An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }, {
+                            "name": "force",
+                            "type": "boolean",
+                            "docs": "Pass true to always show or false to always hide"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "Toggle tooltip display",
+                    "tags": [{
+                            "name": "param",
+                            "text": "target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown"
+                        }, {
+                            "name": "param",
+                            "text": "force Pass true to always show or false to always hide"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=post-popovercontainer.js.map

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"post-popovercontainer.js","sourceRoot":"","sources":["../../../../src/components/post-popovercontainer/post-popovercontainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport {\n  arrow,\n  autoUpdate,\n  computePosition,\n  flip,\n  inline,\n  offset,\n  Placement,\n  shift,\n  limitShift,\n  size,\n} from '@floating-ui/dom';\n\n// Polyfill for popovers, can be removed when https://caniuse.com/?search=popover is green\nimport '@oddbird/popover-polyfill';\n\nimport { version } from '../../../package.json';\n\nconst SIDE_MAP = {\n  top: 'bottom',\n  right: 'left',\n  bottom: 'top',\n  left: 'right',\n};\n\ninterface PopoverElement {\n  showPopover: () => void;\n  hidePopover: () => void;\n  togglePopover: (force?: boolean) => boolean;\n}\n\nexport type PostPopoverElement = HTMLElement & PopoverElement;\n\n@Component({\n  tag: 'post-popovercontainer',\n  styleUrl: 'post-popovercontainer.scss',\n  shadow: true,\n})\nexport class PostPopovercontainer {\n  @Element() host: HTMLPostPopovercontainerElement;\n  private popoverRef: PostPopoverElement;\n  private arrowRef: HTMLElement;\n  private eventTarget: Element;\n  private clearAutoUpdate: () => void;\n\n  /**\n   * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean\n   */\n  @Event() postPopoverToggled: EventEmitter<boolean>;\n\n  /**\n   * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\n   * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\n   * towards the viewport if they would overlap edge boundaries.\n   */\n  @Prop() readonly placement?: Placement = 'top';\n\n  /**\n   * Wheter or not to display a little pointer arrow\n   */\n  @Prop() readonly arrow?: boolean = false;\n\n  componentDidLoad() {\n    this.popoverRef.setAttribute('popover', '');\n    this.popoverRef.addEventListener('beforetoggle', this.handleToggle.bind(this));\n  }\n\n  disconnectedCallback() {\n    if (this.popoverRef)\n      this.popoverRef.removeEventListener('beforetoggle', e =>\n        this.toggle(e.target as HTMLPostPopovercontainerElement),\n      );\n\n    if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n  }\n\n  /**\n   * Programmatically display the tooltip\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   */\n  @Method()\n  async show(target: HTMLElement) {\n    this.eventTarget = target;\n    this.popoverRef.showPopover();\n  }\n\n  /**\n   * Programmatically hide this tooltip\n   */\n  @Method()\n  async hide() {\n    this.eventTarget = null;\n    this.popoverRef.hidePopover();\n  }\n\n  /**\n   * Toggle tooltip display\n   * @param target An element with [data-tooltip-target=\"id\"] where the tooltip should be shown\n   * @param force Pass true to always show or false to always hide\n   */\n  @Method()\n  async toggle(target: HTMLElement, force?: boolean): Promise<boolean> {\n    this.eventTarget = target;\n    this.popoverRef.togglePopover(force);\n    return this.popoverRef.matches(':popover-open');\n  }\n\n  /**\n   * Start or stop auto updates based on tooltip events.\n   * Tooltips can be closed or opened with other methods than class members,\n   * therefore listening to the toggle event is safer for cleaning up.\n   * @param e ToggleEvent\n   */\n  private handleToggle(e: ToggleEvent) {\n    const isOpen = e.newState === 'open';\n    if (isOpen) {\n      this.startAutoupdates();\n    } else {\n      if (typeof this.clearAutoUpdate === 'function') this.clearAutoUpdate();\n    }\n    this.postPopoverToggled.emit(isOpen);\n  }\n\n  /**\n   * Start listening for DOM updates, scroll events etc. that have\n   * an influence on tooltip positioning\n   */\n  private startAutoupdates() {\n    this.clearAutoUpdate = autoUpdate(\n      this.eventTarget,\n      this.popoverRef,\n      this.calculatePosition.bind(this),\n    );\n  }\n\n  private async calculatePosition() {\n    const middleware = [\n      flip(),\n      inline(),\n      shift({\n        padding: 8,\n\n        // Prevents shifting away from the anchor too far, while shifting as far as possible\n        // https://floating-ui.com/docs/shift#limiter\n        limiter: limitShift({\n          offset: 32,\n        }),\n      }),\n      size({\n        apply({ availableWidth, elements }) {\n          Object.assign(elements.floating.style, {\n            maxWidth: `${availableWidth - 16}px`,\n          });\n        },\n      }),\n      offset(this.arrow ? 12 : 8), // 4px outside of element to account for focus outline + ~arrow size\n    ];\n\n    if (this.arrow) {\n      middleware.push(arrow({ element: this.arrowRef, padding: 8 }));\n    }\n\n    const {\n      x,\n      y,\n      middlewareData,\n      placement: currentPlacement,\n    } = await computePosition(this.eventTarget, this.popoverRef, {\n      placement: this.placement || 'top',\n      strategy: 'fixed',\n      middleware,\n    });\n\n    // Tooltip\n    this.popoverRef.style.left = `${x}px`;\n    this.popoverRef.style.top = `${y}px`;\n\n    // Arrow\n    if (this.arrow) {\n      // Tutorial: https://codesandbox.io/s/mystifying-kare-ee3hmh?file=/src/index.js\n      const side = currentPlacement.split('-')[0];\n      const { x: arrowX, y: arrowY } = middlewareData.arrow;\n      const staticSide = SIDE_MAP[side];\n\n      Object.assign(this.arrowRef.style, {\n        top: arrowY ? `${arrowY}px` : '',\n        left: arrowX ? `${arrowX}px` : '',\n        [staticSide]: `${-this.arrowRef.offsetWidth / 2}px`,\n      });\n    }\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"popover\"\n          part=\"popover\"\n          ref={(el: HTMLDivElement & PostPopoverElement) => (this.popoverRef = el)}\n        >\n          {this.arrow && (\n            <span\n              class=\"arrow\"\n              ref={el => {\n                this.arrowRef = el;\n              }}\n            ></span>\n          )}\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/post-tab-header/post-tab-header.css

@@ -1,3 +1,3 @@
-.tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
+.tab-title[role=tab]{display:inline-block;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:var(--post-contrast-color);text-decoration:none}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:#fff;color:var(--post-contrast-color)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:#fff;color:var(--post-contrast-color);box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:"";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:"";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-error-red) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-success,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-error-red) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}.bg-success-green .tab-title{background-color:#2c871d}.bg-success-green .tab-title.active{background-color:#2c871d}.bg-success-green .nav-item{background-color:#2c871d}.bg-error-red .tab-title{background-color:#a51728}.bg-error-red .tab-title.active{background-color:#a51728}.bg-error-red .nav-item{background-color:#a51728}.bg-warning-orange .tab-title{background-color:#f49e00}.bg-warning-orange .tab-title.active{background-color:#f49e00}.bg-warning-orange .nav-item{background-color:#f49e00}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!
  * Copyright 2021 by Swiss Post, Information Technology
  */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;-webkit-appearance:button;appearance:button}