@swisspost/design-system-components 10.0.0-next.47 → 10.0.0-next.48

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

@@ -0,0 +1,189 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { d as defineCustomElement$2, a as PLACEMENT_TYPES } from './p-Ce7jgYmK.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { I as IS_BROWSER } from './p-CJ80BZ06.js';
+import { d as checkEmptyOrOneOf, c as checkRequiredAndType } from './p-CV7fm1rW.js';
+
+function getAttributeObserver(attribute, handler) {
+    /**
+     * Handle attribute changes and childList changes from the observer
+     * @param {MutationRecord[]} mutationList
+     */
+    function observerHandler(mutationList) {
+        mutationList.forEach(mutation => {
+            if (mutation.type === 'attributes' && mutation.attributeName === attribute) {
+                handler(mutation.target);
+            }
+            if (mutation.type === 'childList') {
+                mutation.addedNodes.forEach(node => {
+                    if (node.nodeType === Node.ELEMENT_NODE &&
+                        node.hasAttribute(attribute)) {
+                        handler(node);
+                    }
+                });
+            }
+        });
+    }
+    // Initialize a mutation observer for patching accessibility features
+    return IS_BROWSER ? new MutationObserver(observerHandler) : null;
+}
+
+const postPopoverCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}.btn-close{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button;border-radius:var(--post-device-border-radius-round);color:#000;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;cursor:pointer}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{background-color:ButtonFace !important}.btn-close:hover{background-color:Highlight !important}}.btn-close{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}.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important;border-radius:4px}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.btn-close::before{mask-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m16.267 16.667 6.667-6.533-.933-1.067-6.667 6.667-6.667-6.667-.933 1.067 6.667 6.533-6.667 6.667 1.067.933 6.533-6.667 6.667 6.667.933-1.067z'/%3E%3C/svg%3E\");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;content:\"\";display:block;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24)}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:#000}.btn-close:disabled{color:#999}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close{color:CanvasText;forced-color-adjust:none}.btn-close:focus,.btn-close:not(:disabled):hover,.pretend-hover.btn-close{color:Highlight}}.btn-close-white{color:#e6e6e6}.btn-close-white:focus,.btn-close-white:not(:disabled):hover,.btn-close-white.pretend-hover{color:#fff}.btn-close-white:disabled{color:#999}*{box-sizing:border-box}:host{display:block}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}.popover-container{color:var(--post-current-fg);background-color:var(--post-current-bg);display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:min(var(--post-popover-max-width, 280px),100vw)}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:var(--post-current-fg)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn-close:hover{color:HighlightText !important}}";
+
+/**
+ * @slot default - Slot for placing content inside the popover.
+ */
+let popoverInstances = 0;
+const popoverTargetAttribute = 'data-popover-target';
+const globalToggleHandler = (e) => {
+    let currentElement = e.target;
+    // Traverse up the DOM tree to find if any parent has the popover target attribute
+    while (currentElement && !currentElement.getAttribute(popoverTargetAttribute)) {
+        if (currentElement === document.body || !currentElement.parentElement)
+            break;
+        currentElement = currentElement.parentElement;
+    }
+    const popoverTarget = currentElement?.getAttribute(popoverTargetAttribute);
+    if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
+        return;
+    const popover = document.getElementById(popoverTarget);
+    popover?.toggle(currentElement);
+};
+const PostPopover$1 = /*@__PURE__*/ proxyCustomElement(class PostPopover extends H {
+    validatePlacement() {
+        checkEmptyOrOneOf(this, 'placement', PLACEMENT_TYPES);
+    }
+    validateCloseButtonCaption() {
+        checkRequiredAndType(this, 'closeButtonCaption', 'string');
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Initialize a mutation observer for patching accessibility features
+        this.triggerObserver = IS_BROWSER
+            ? getAttributeObserver(popoverTargetAttribute, this.patchAccessibilityFeatures)
+            : null;
+        /**
+         * Defines the position of the popover relative to its trigger.
+         * Popovers 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';
+        /**
+         * Show a little indicator arrow
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.arrow = true;
+        this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
+    }
+    connectedCallback() {
+        // Set up accessibility patcher and event listeners for the first component
+        if (popoverInstances === 0) {
+            window.addEventListener('pointerup', globalToggleHandler);
+            window.addEventListener('keydown', globalToggleHandler);
+            this.triggerObserver?.observe(document.body, {
+                subtree: true,
+                childList: true,
+                attributeFilter: [popoverTargetAttribute],
+            });
+        }
+        popoverInstances++;
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    componentDidLoad() {
+        this.validatePlacement();
+        this.validateCloseButtonCaption();
+        this.popoverRef.addEventListener('beforetoggle', this.localBeforeToggleHandler);
+    }
+    disconnectedCallback() {
+        popoverInstances--;
+        // Remove listeners and observer after the last popover has been destructed
+        if (popoverInstances === 0) {
+            window.removeEventListener('click', globalToggleHandler);
+            window.removeEventListener('keydown', globalToggleHandler);
+            this.triggerObserver?.disconnect();
+        }
+        this.popoverRef.removeEventListener('beforetoggle', this.localBeforeToggleHandler);
+        this.triggers.forEach(trigger => 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.popoverRef.show(target);
+        console.log(this.popoverRef);
+        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) {
+        const newState = await this.popoverRef.toggle(target, force);
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+        target.setAttribute('aria-expanded', `${newState}`);
+    }
+    get triggers() {
+        return document.querySelectorAll(`[${popoverTargetAttribute}="${this.host.id}"]`);
+    }
+    beforeToggleHandler() {
+        this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
+    }
+    patchAccessibilityFeatures(trigger) {
+        const force = trigger.hasAttribute(popoverTargetAttribute);
+        trigger.setAttribute('aria-expanded', force ? 'false' : null);
+    }
+    render() {
+        return (h(Host, { key: 'fe756429b10af594a621b5769f129ee82b1aa6eb', "data-version": version }, h("post-popovercontainer", { key: '437b8c75fc878b3edb916887cfab3933ed08c7b2', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '082e00cb11a042cad036252743261395874b0a86', class: "popover-container" }, h("div", { key: 'be2e39304472bf351a524dc4f6eeb3ec9da8fc58', class: "popover-content" }, h("slot", { key: 'e1cd722828d3b136ad96553d81334b31de3289f9' })), h("button", { key: 'b6fa750860d95bf223da9224d6fa8531e577b3a5', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd3fb8e0e0e15c58df5b1aacfe5d4a6b90ec3843', class: "visually-hidden" }, this.closeButtonCaption))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
+    }; }
+    static get style() { return postPopoverCss; }
+}, [1, "post-popover", {
+        "placement": [1],
+        "closeButtonCaption": [1, "close-button-caption"],
+        "arrow": [4],
+        "show": [64],
+        "hide": [64],
+        "toggle": [64]
+    }, undefined, {
+        "placement": ["validatePlacement"],
+        "closeButtonCaption": ["validateCloseButtonCaption"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-popover", "post-popovercontainer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-popover":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostPopover$1);
+            }
+            break;
+        case "post-popovercontainer":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostPopover = PostPopover$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostPopover, defineCustomElement };

package/dist/components/react/post-popovercontainer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostPopovercontainer extends Components.PostPopovercontainer, HTMLElement {}
+export const PostPopovercontainer: {
+    prototype: PostPopovercontainer;
+    new (): PostPopovercontainer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,6 @@
+import { P as PostPopovercontainer$1, d as defineCustomElement$1 } from './p-Ce7jgYmK.js';
+
+const PostPopovercontainer = PostPopovercontainer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostPopovercontainer, defineCustomElement };

package/dist/components/react/post-rating.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostRating extends Components.PostRating, HTMLElement {}
+export const PostRating: {
+    prototype: PostRating;
+    new (): PostRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-rating.js

@@ -0,0 +1,153 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { d as defineCustomElement$2 } from './p-Da5wbVP8.js';
+
+const postRatingCss = "@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
+
+const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H {
+    validateLabel() {
+        checkRequiredAndType(this, 'label', 'string');
+    }
+    validateStars() {
+        checkRequiredAndType(this, 'stars', 'number');
+    }
+    validateCurrentRating() {
+        checkRequiredAndType(this, 'currentRating', 'number');
+    }
+    componentWillLoad() {
+        this.validateLabel();
+        this.validateStars();
+        this.validateCurrentRating();
+    }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.postInput = createEvent(this, "postInput");
+        this.postChange = createEvent(this, "postChange");
+        this.hasChanged = false;
+        /**
+         * Defines a hidden label for the component.
+         */
+        this.label = 'Rating';
+        /**
+         * Defines the total amount of stars rendered in the component.
+         */
+        this.stars = 5;
+        /**
+         * Defines the rating that the component should show.
+         */
+        this.currentRating = 0;
+        /**
+         * Defines if the component is readonly or not.
+         * This usually should be used together with the `currentRating` property.
+         */
+        this.readonly = false;
+        this.keydownHandler = this.keydownHandler.bind(this);
+        this.blurHandler = this.blurHandler.bind(this);
+        this.hoverHandler = this.hoverHandler.bind(this);
+    }
+    update(value) {
+        if (this.readonly || value < 0 || value > this.stars)
+            return;
+        this.currentRating = this.currentRating !== value ? value : 0; // If a star is clicked the second time, the rating gets set to 0.
+        this.postInput.emit({ value: this.currentRating });
+        this.hasChanged = true;
+    }
+    keydownHandler(e) {
+        switch (e.key) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.update(this.currentRating - 1);
+                break;
+            case 'ArrowUp':
+            case 'ArrowRight':
+                e.preventDefault();
+                this.update(this.currentRating + 1);
+                break;
+            case 'Home':
+                e.preventDefault();
+                this.update(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                this.update(this.stars);
+                break;
+            case 'Enter':
+            case ' ':
+                this.blurHandler();
+                break;
+            default:
+                return;
+        }
+    }
+    blurHandler() {
+        if (this.hasChanged) {
+            this.postChange.emit({ value: this.currentRating });
+            this.hasChanged = false;
+        }
+    }
+    hoverHandler(index, e) {
+        if (this.readonly)
+            return;
+        if (e.type === 'mouseenter') {
+            this.hoveredIndex = index;
+        }
+        else if (e.type === 'mouseleave') {
+            this.hoveredIndex = undefined;
+        }
+    }
+    render() {
+        return (h(Host, { key: '588c5d3c4600faa939cab4b673e27d08182323da', "data-version": version }, h("div", { key: '8fced4724505cdc2f3fb3160cf276ed1280b5431', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+                'star': true,
+                'before-hover': i < this.hoveredIndex,
+                'active': i < Math.round(this.currentRating),
+                'hover': i === this.hoveredIndex,
+                'after-active': i > this.hoveredIndex && i < this.currentRating,
+            }, onClick: () => this.update(i + 1), onMouseEnter: e => this.hoverHandler(i, e), onMouseLeave: e => this.hoverHandler(i, e) }, h("post-icon", { name: "2062", class: "stroke" }), h("post-icon", { name: "2574", class: "fill" })))))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "label": ["validateLabel"],
+        "stars": ["validateStars"],
+        "currentRating": ["validateCurrentRating"]
+    }; }
+    static get style() { return postRatingCss; }
+}, [1, "post-rating", {
+        "label": [1],
+        "stars": [2],
+        "currentRating": [1026, "current-rating"],
+        "readonly": [4],
+        "hoveredIndex": [32]
+    }, undefined, {
+        "label": ["validateLabel"],
+        "stars": ["validateStars"],
+        "currentRating": ["validateCurrentRating"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-rating", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostRating$1);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostRating = PostRating$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostRating, defineCustomElement };

package/dist/components/react/post-tab-header.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostTabHeader extends Components.PostTabHeader, HTMLElement {}
+export const PostTabHeader: {
+    prototype: PostTabHeader;
+    new (): PostTabHeader;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-tab-header.js

@@ -0,0 +1,53 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+
+const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;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:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;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:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .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:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}@keyframes popIn{from{transform:scale(0.9);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--post-transition-duration, 0.35s);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}to{opacity:1;transform:scale(1)}}:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:var(--post-scheme-color-interactive-button-secondary-enabled-fg);font:inherit;-webkit-user-select:none;user-select:none;appearance:button}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title{background-color:ButtonFace !important}.tab-title:hover{background-color:Highlight !important}}";
+
+const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    validateFor() {
+        checkRequiredAndType(this, 'panel', 'string');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || nanoid(6)}`;
+    }
+    render() {
+        return (h(Host, { key: 'd5f6cd0ceb819b475ec49f8ea66e6b4b25f04f8e', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: '8a87fef31572674981dab80e56e6b20163b448ae' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+    static get style() { return postTabHeaderCss; }
+}, [1, "post-tab-header", {
+        "panel": [513],
+        "tabId": [32]
+    }, undefined, {
+        "panel": ["validateFor"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tab-header"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tab-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabHeader$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostTabHeader = PostTabHeader$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTabHeader, defineCustomElement };

package/dist/components/react/post-tab-panel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostTabPanel extends Components.PostTabPanel, HTMLElement {}
+export const PostTabPanel: {
+    prototype: PostTabPanel;
+    new (): PostTabPanel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/react/post-tab-panel.js

@@ -0,0 +1,55 @@
+import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { v as version } from './p-0Ltezq5O.js';
+import { n as nanoid } from './p-BLchVpF6.js';
+import { c as checkRequiredAndType } from './p-CV7fm1rW.js';
+import './p-CJ80BZ06.js';
+
+const postTabPanelCss = ":host{display:none}";
+
+const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+    }
+    validateName() {
+        checkRequiredAndType(this, 'name', 'string');
+    }
+    componentWillLoad() {
+        this.validateName();
+        // get the id set on the host element or use a random id by default
+        this.panelId = `panel-${this.host.id || nanoid(6)}`;
+    }
+    render() {
+        return (h(Host, { key: '609dd2b8bf26e58e92a1dbc827e4479ac416d95b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '121538878e0298f1f16f6e20eeb15d5da8a5ba9c' })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "name": ["validateName"]
+    }; }
+    static get style() { return postTabPanelCss; }
+}, [1, "post-tab-panel", {
+        "name": [513],
+        "panelId": [32]
+    }, undefined, {
+        "name": ["validateName"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tab-panel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tab-panel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTabPanel$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const PostTabPanel = PostTabPanel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTabPanel, defineCustomElement };

package/dist/components/react/post-tabs.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../types/components";
+
+interface PostTabs extends Components.PostTabs, HTMLElement {}
+export const PostTabs: {
+    prototype: PostTabs;
+    new (): PostTabs;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;