@swisspost/design-system-components 9.0.0-next.12 → 9.0.0-next.14

package/dist/esm/{post-footer-7b0eb067.js → post-footer-cdde2086.js}

@@ -1,12 +1,13 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
 
 class Breakpoint {
+    breakpointMap;
+    current = {
+        key: '',
+        name: '',
+    };
     constructor() {
-        this.current = {
-            key: '',
-            name: '',
-        };
         if (!this.breakpointMap) {
             const styles = getComputedStyle(document.documentElement);
             const keys = styles.getPropertyValue('--post-breakpoint-keys').split(', ');
@@ -29,13 +30,15 @@ class Breakpoint {
         const calculated = this.breakpointMap.find(({ minWidth }) => innerWidth >= minWidth);
         if (this.current.key !== calculated.key) {
             this.current.key = calculated.key;
-            if (emitEvents)
+            if (emitEvents) {
                 this.dispatchEvent('key');
+            }
         }
         if (this.current.name !== calculated.name) {
             this.current.name = calculated.name;
-            if (emitEvents)
+            if (emitEvents) {
                 this.dispatchEvent('name');
+            }
         }
     }
     dispatchEvent(type) {
@@ -54,9 +57,13 @@ const PostFooterStyle0 = postFooterCss;
 const PostFooter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.label = undefined;
-        this.isMobile = breakpoint.get('name') === 'mobile';
     }
+    get host() { return getElement(this); }
+    /**
+     * The label to add to the footer (visually hidden).
+     */
+    label;
+    isMobile = breakpoint.get('name') === 'mobile';
     connectedCallback() {
         window.addEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
     }
@@ -70,12 +77,11 @@ const PostFooter = class {
         return (h("div", { class: "footer-grid" }, h("div", null, h("slot", { name: "grid-1" })), h("div", null, h("slot", { name: "grid-2" })), h("div", null, h("slot", { name: "grid-3" })), h("div", null, h("slot", { name: "grid-4" }))));
     }
     render() {
-        return (h(Host, { key: 'b11ecc741d3d9f4786dca3324dc2172aeaa431cd', "data-version": version }, h("footer", { key: 'a786956b1bdf51cf76fca8e4d45210b42bc54501' }, h("h2", { key: '3661bdd6c95eb515cb6a0aa77cb9df4fda7ea972', class: "visually-hidden" }, this.label), h("div", { key: '8b2a1c63f3a092c355bd882d58e5012dd5680a1b', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '250a48a71a05833a18640432eb72fb96df94c102', class: "footer-column" }, h("div", { key: '0d22f0b49aea22f0bd73421f3c86f5389caebec9', class: "footer-socialmedia" }, h("slot", { key: '8703a25dc982f32a32b4115410fcc6356b5e365b', name: "socialmedia" })), h("div", { key: '992e7ff2e6556139ce0946ae6498329a8d2ff686', class: "footer-app" }, h("slot", { key: '6e561307bf4a1d32d3a985b32bd5ed2be43453d2', name: "app" }))), h("div", { key: 'ebdffcd8431e90752f814a5873cec14e00c15b7f', class: "footer-businesssectors" }, h("slot", { key: 'c745850d3e5ff37a71b12c43897625ca3df5ca34', name: "businesssectors" })), h("div", { key: '3d9decbad0be02737d13c4e3c6e00b8bea8d6c5f', class: "footer-meta" }, h("slot", { key: '2a66e70bb788269fecb5bbbccd2af43e9fba3a1f', name: "meta" })), h("div", { key: '0f1f4ee8f86e5eaf6c5c25b82b868d273757c8be', class: "footer-copyright" }, h("slot", { key: 'b63aab9755132addfe4c20233919513990cdf992', name: "copyright" }))))));
+        return (h(Host, { key: '14370a1cfd730a0b0353c88c95f265aefb57c480', "data-version": version }, h("footer", { key: '7208e9d465eb0b469887e7cfae66674db2092dbd' }, h("h2", { key: 'b392c866326374ae27704baaba0dd28c3001ee62', class: "visually-hidden" }, this.label), h("div", { key: '13411ad6e0b55ee17cf9bf77b155aa1c2810f057', class: "footer-container" }, this.isMobile ? this.renderAccordion() : this.renderGrid(), h("div", { key: '4815ae94cd43eca92482ad3c93f107243b26890e', class: "footer-column" }, h("div", { key: 'edc787dc5fc96169c323f15254b6088024a6f19d', class: "footer-socialmedia" }, h("slot", { key: '0971e342ac6f3913c408a535ce0746080e3f57af', name: "socialmedia" })), h("div", { key: 'da583c9ed819181bf2732277f4e6ee22df2e3022', class: "footer-app" }, h("slot", { key: 'b6dab5cfa1f4dc9c049f24d3e08416ef5a27e0aa', name: "app" }))), h("div", { key: '53a5c04129d24dfb64eedd46e95b5c78142a3fd7', class: "footer-businesssectors" }, h("slot", { key: '470f4294778b8978bf6eb168e2b47ff29ef43d07', name: "businesssectors" })), h("div", { key: '45d734ded794352b951f2891bbdba081e05a99d5', class: "footer-meta" }, h("slot", { key: '4d0da53c2eb79e111f0f05278a0972f046eebfa9', name: "meta" })), h("div", { key: 'f95fb7ed3cc09218a3d4a554c619b6f379d5135d', class: "footer-copyright" }, h("slot", { key: '9cdcec805152413693dced0f0d55ac1b1121c70e', name: "copyright" }))))));
     }
     disconnectedCallback() {
         window.removeEventListener('postBreakpoint:name', this.breakpointChange.bind(this));
     }
-    get host() { return getElement(this); }
 };
 PostFooter.style = PostFooterStyle0;
 

package/dist/esm/post-footer.entry.js

@@ -1,3 +1,3 @@
-export { P as post_footer } from './post-footer-7b0eb067.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
+export { P as post_footer } from './post-footer-cdde2086.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';

package/dist/esm/post-linkarea-cad95623.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+
+const postLinkareaCss = ":host{display:contents;cursor:pointer}";
+const PostLinkareaStyle0 = postLinkareaCss;
+
+const PostLinkarea = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get hostElement() { return getElement(this); }
+    handleClick = () => {
+        const customSlottedLink = this.hostElement.querySelector('a[data-link]');
+        const linkElement = customSlottedLink
+            ? customSlottedLink
+            : this.hostElement.querySelector('a');
+        if (linkElement.href) {
+            window.location.href = linkElement.href;
+        }
+        else {
+            console.error('<post-linkarea> : Your element must contain a child with a `href` property.');
+        }
+    };
+    render() {
+        return (h(Host, { key: 'fd83dca8dca965d14f5a844454e79d7fb449639d', "data-version": version, onClick: this.handleClick, tabindex: "0" }, h("slot", { key: '278537c9aabe710d118cdd6075ab506a8a4dcfe2' })));
+    }
+};
+PostLinkarea.style = PostLinkareaStyle0;
+
+export { PostLinkarea as P };

package/dist/esm/post-linkarea.entry.js

@@ -0,0 +1,3 @@
+export { P as post_linkarea } from './post-linkarea-cad95623.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';

package/dist/esm/{post-menu-item-37f637a3.js → post-menu-item-db732728.js}

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
-import { b as checkEmptyOrUrl } from './index-b49c9904.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+import { b as checkEmptyOrUrl } from './index-d1bbbd88.js';
 
 const postBreadcrumbItemCss = ":host{display:flex;align-items:center;justify-content:start;gap:var(--post-device-spacing-gap-inline-5)}:host post-icon{box-sizing:border-box;height:var(--post-core-dimension-24);width:var(--post-core-dimension-24);padding-block:var(--post-core-dimension-4);padding-inline:var(--post-core-dimension-4)}.breadcrumb-item{white-space:nowrap;line-height:150%;padding-block:var(--post-device-spacing-padding-block-7);color:var(--post-scheme-color-interactive-primary-enabled-fg1);text-decoration:var(--post-core-text-decoration-none)}.breadcrumb-item{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}.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.breadcrumb-item:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1);text-decoration:var(--post-core-text-decoration-underline)}.breadcrumb-item:focus-visible{border-radius:var(--post-device-border-radius-focus)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.breadcrumb-item,.breadcrumb-item:focus,.breadcrumb-item:hover{color:LinkText !important}.breadcrumb-item:visited{color:VisitedText !important}}";
 const PostBreadcrumbItemStyle0 = postBreadcrumbItemCss;
@@ -8,8 +8,13 @@ const PostBreadcrumbItemStyle0 = postBreadcrumbItemCss;
 const PostBreadcrumbItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.url = undefined;
     }
+    get host() { return getElement(this); }
+    /**
+     * The optional URL to which the breadcrumb item will link.
+     */
+    url;
+    validUrl;
     validateUrl() {
         try {
             this.validUrl = this.constructUrl(this.url);
@@ -34,9 +39,8 @@ const PostBreadcrumbItem = class {
         this.validateUrl();
     }
     handleKeyDown(event) {
-        var _a;
         if (event.key === 'Enter' || event.key === ' ') {
-            const linkElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('a');
+            const linkElement = this.host.shadowRoot?.querySelector('a');
             if (linkElement) {
                 event.preventDefault();
                 linkElement.click();
@@ -45,9 +49,8 @@ const PostBreadcrumbItem = class {
     }
     render() {
         const BreadcrumbTag = this.validUrl ? 'a' : 'span';
-        return (h(Host, { key: 'b64295c6b59c2e200fe0eae5483e60b733f5eb8c', "data-version": version }, h("post-icon", { key: '0e8a0712f03b551206e8cfeef51446f318d60f20', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, Object.assign({ key: 'd3e218f0b3b8feab97cbce6a8190dcddc0b92c92', class: "breadcrumb-item" }, (this.validUrl ? { href: this.validUrl } : {}), { onKeyDown: (event) => this.handleKeyDown(event) }), h("slot", { key: 'dea5990614b38fcaab1fae46aafa6c2ed652cf9a' }))));
+        return (h(Host, { key: 'ddd9e35e632f29c7854e03ee989527203b65b153', "data-version": version }, h("post-icon", { key: '713d822e2f32b6f7dfec594f9787c190664fb8d6', name: "2111", class: "breadcrumb-item-icon" }), h(BreadcrumbTag, { key: '80f211d04535691993caa52b1ee97eb71f7fdbc4', class: "breadcrumb-item", ...(this.validUrl ? { href: this.validUrl } : {}), onKeyDown: (event) => this.handleKeyDown(event) }, h("slot", { key: '850f1212db8da0d356b8e3d10ba95cf2b49e896c' }))));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "url": ["validateUrl"]
     }; }
@@ -59,7 +62,7 @@ const PostMenuItem = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '1cd717c2bbc991b33acba0bbfa5d5a2412f6dcc7', role: "menuitem", "data-version": version }, h("slot", { key: 'fe09373b79d299f21ebfdf596bab4d4bc30a9060' })));
+        return (h(Host, { key: '376ce17a520b6cb74c55c009843df878f99ef411', role: "menuitem", "data-version": version }, h("slot", { key: 'e489c5c09f1527e527e052e9f4349c5b26db6ea9' })));
     }
 };
 

package/dist/esm/{post-popover-c24ecd38.js → post-popover-00f427ac.js}

@@ -1,8 +1,8 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
-import { g as getAttributeObserver } from './attribute-observer-37fa950a.js';
+import { g as getElement, r as registerInstance, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+import { g as getAttributeObserver } from './attribute-observer-2f203993.js';
 
-const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;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}.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:var(--post-gray-40)}@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{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
+const postPopoverCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.btn-close{padding:0;overflow:visible;border:0;background:none;color:inherit;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}.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{display:flex;align-items:self-start;padding:.5em;min-width:160px;max-width:280px;max-width:100%}.popover-content{padding:.5em;flex-grow:1}.btn-close{color:inherit}";
 const PostPopoverStyle0 = postPopoverCss;
 
 /**
@@ -18,7 +18,7 @@ const globalToggleHandler = (e) => {
     if (!popoverTarget || ('key' in e && e.key !== 'Enter'))
         return;
     const popover = document.getElementById(popoverTarget);
-    popover === null || popover === void 0 ? void 0 : popover.toggle(target);
+    popover?.toggle(target);
 };
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger => {
@@ -26,11 +26,26 @@ const triggerObserver = getAttributeObserver(popoverTargetAttribute, trigger =>
     trigger.setAttribute('aria-expanded', force ? 'false' : null);
 });
 const PostPopover = class {
+    popoverRef;
+    localBeforeToggleHandler;
+    get host() { return getElement(this); }
+    /**
+     * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+     * Popoverss 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.
+     */
+    placement = 'top';
+    /**
+     * Define the caption of the close button for assistive technology
+     */
+    closeButtonCaption;
+    /**
+     * Show a little indicator arrow
+     */
+    // eslint-disable-next-line @stencil-community/ban-default-true
+    arrow = true;
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.placement = 'top';
-        this.closeButtonCaption = undefined;
-        this.arrow = true;
         this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
     connectedCallback() {
@@ -93,9 +108,8 @@ const PostPopover = class {
         this.triggers.forEach(trigger => trigger.setAttribute('aria-expanded', 'false'));
     }
     render() {
-        return (h(Host, { key: 'c2f53a7ac9d6bbcca8c220d9b8a5ed0dda360cf9', "data-version": version }, h("post-popovercontainer", { key: 'fa5a32cfd4263fcabed5405f2b6bb2ab0ca93c9a', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: '4799da001d006a47d93be1393618744a0b393841', class: "popover-container" }, h("div", { key: '7a28ea59e07591c8b835dd10157bc5e9b85793c6', class: "popover-content" }, h("slot", { key: '1ba6533577817d1fc2b7762654b5639596b16422' })), h("button", { key: 'f1446964325e49b79bc0fe26a05bb4f12a140c61', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'dd056bb988df548e8cae61ba226c1d9e124bc32b', class: "visually-hidden" }, this.closeButtonCaption))))));
+        return (h(Host, { key: 'a7976e6c960015ed9b318c75fc8a74afc2337661', "data-version": version }, h("post-popovercontainer", { key: '1b71f4bce3a6866e19c3900c0e82f814508f8144', arrow: this.arrow, placement: this.placement, ref: e => (this.popoverRef = e) }, h("div", { key: 'b15e45e7fd31edc36fa4c912332984daf0ce9cbc', class: "popover-container" }, h("div", { key: 'adc170a2738c7f88c60e8885d8ee84f10fa1d546', class: "popover-content" }, h("slot", { key: '235dbd1a184353de8d8da038c8c31e3dd7f6dab7' })), h("button", { key: '679fccf088d5589b548ec2186facc6c767aace93', class: "btn-close", onClick: () => this.hide() }, h("span", { key: 'e8f61719cc6e9b6ddf85756005f17b9103406055', class: "visually-hidden" }, this.closeButtonCaption))))));
     }
-    get host() { return getElement(this); }
 };
 PostPopover.style = PostPopoverStyle0;
 

package/dist/esm/post-popover.entry.js

@@ -1,4 +1,4 @@
-export { P as post_popover } from './post-popover-c24ecd38.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
-import './attribute-observer-37fa950a.js';
+export { P as post_popover } from './post-popover-00f427ac.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';
+import './attribute-observer-2f203993.js';

package/dist/esm/{post-rating-e1c66e5c.js → post-rating-cdcb2a1d.js}

@@ -1,20 +1,44 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
+import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */: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 PostRatingStyle0 = postRatingCss;
 
 const PostRating = class {
+    hasChanged = false;
+    get host() { return getElement(this); }
+    hoveredIndex;
+    /**
+     * Defines a hidden label for the component.
+     */
+    label = 'Rating';
+    /**
+     * Defines the total amount of stars rendered in the component.
+     */
+    stars = 5;
+    /**
+     * Defines the rating that the component should show.
+     */
+    currentRating = 0;
+    /**
+     * Defines if the component is readonly or not.
+     * This usually should be used together with the `currentRating` property.
+     */
+    readonly = false;
+    /**
+     * An event emitted whenever the component's value has changed (on input).
+     * The event payload can be used like so: `event.detail.value`.
+     */
+    postInput;
+    /**
+     * An event emitted whenever the component's value has changed (on blur).
+     * The event payload can be used like so: `event.detail.value`.
+     */
+    postChange;
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = createEvent(this, "postChange", 7);
-        this.hasChanged = false;
-        this.hoveredIndex = undefined;
-        this.label = 'Rating';
-        this.stars = 5;
-        this.currentRating = 0;
-        this.readonly = false;
         this.keydownHandler = this.keydownHandler.bind(this);
         this.blurHandler = this.blurHandler.bind(this);
         this.hoverHandler = this.hoverHandler.bind(this);
@@ -71,7 +95,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (h(Host, { key: 'bb4ab7c2ae609e8e288c62516be93f0b96926eff', "data-version": version }, h("div", { key: '0176474611f998938aef0b267c118478d6623fbc', 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: {
+        return (h(Host, { key: '64891ff9f0ef8f7bc2be5df9e989577830b35ffc', "data-version": version }, h("div", { key: 'b4e7050864265e33e08b88fc3d5c8eea3cf6ab0e', 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),
@@ -79,7 +103,6 @@ const PostRating = class {
                 '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 getElement(this); }
 };
 PostRating.style = PostRatingStyle0;
 

package/dist/esm/post-rating.entry.js

@@ -1,3 +1,3 @@
-export { P as post_rating } from './post-rating-e1c66e5c.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
+export { P as post_rating } from './post-rating-cdcb2a1d.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';

package/dist/esm/post-tab-header-1d4113cb.js

@@ -0,0 +1,34 @@
+import { r as registerInstance, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+import { c as checkNonEmpty } from './check-non-empty-58bd6b17.js';
+import { n as nanoid } from './index.browser-51485f85.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}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
+const PostTabHeaderStyle0 = postTabHeaderCss;
+
+const PostTabHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get host() { return getElement(this); }
+    tabId;
+    /**
+     * The name of the panel controlled by the tab header.
+     */
+    panel;
+    validateFor(newValue) {
+        checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || nanoid(6)}`;
+    }
+    render() {
+        return (h(Host, { key: 'f7383136476f3d32a79c39f7cadef8bcde0630f7', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, h("slot", { key: 'b88f3ce360da891793e31b84c4bfd4f59511d88a' })));
+    }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+};
+PostTabHeader.style = PostTabHeaderStyle0;
+
+export { PostTabHeader as P };

package/dist/esm/post-tab-header.entry.js

@@ -1,6 +1,6 @@
-export { P as post_tab_header } from './post-tab-header-6a9b0153.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
+export { P as post_tab_header } from './post-tab-header-1d4113cb.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';
 import './check-non-empty-58bd6b17.js';
 import './constants-8d548297.js';
 import './index.browser-51485f85.js';

package/dist/esm/{post-tab-panel-73b56a16.js → post-tab-panel-7a5c03ef.js}

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
 import { n as nanoid } from './index.browser-51485f85.js';
 
 const postTabPanelCss = ":host{display:none}";
@@ -8,17 +8,20 @@ const PostTabPanelStyle0 = postTabPanelCss;
 const PostTabPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.panelId = undefined;
-        this.name = undefined;
     }
+    get host() { return getElement(this); }
+    panelId;
+    /**
+     * The name of the panel, used to associate it with a tab header.
+     */
+    name;
     componentWillLoad() {
         // 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: '9e8f9c5dc0c1c3d1b7e63cbb9e9cbb0cf116da9b', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '3ece42346845324cfa0fb9af5721efab2b71e2f1' })));
+        return (h(Host, { key: '9d35c9ceec54f1c2983600342e5e63a49ca93aef', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '8db185ca7a2030343df512962126a91f64840a64' })));
     }
-    get host() { return getElement(this); }
 };
 PostTabPanel.style = PostTabPanelStyle0;
 

package/dist/esm/post-tab-panel.entry.js

@@ -1,4 +1,4 @@
-export { P as post_tab_panel } from './post-tab-panel-73b56a16.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
+export { P as post_tab_panel } from './post-tab-panel-7a5c03ef.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';
 import './index.browser-51485f85.js';

package/dist/esm/{post-tabs-02e523b8.js → post-tabs-308190c0.js}

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
-import { f as fadeOut, a as fadeIn } from './fade-7fd71785.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
+import { f as fadeOut, a as fadeIn } from './fade-1f3cacf4.js';
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-const componentOnReady = (el) => {
+function componentOnReady(el) {
     if (typeof el.componentOnReady === 'function') {
         return el.componentOnReady();
     }
@@ -15,32 +15,46 @@ const componentOnReady = (el) => {
             resolve(el);
         }));
     }
-};
-const customOnReady = (callback) => {
+}
+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(var(--post-contrast-color-rgb), 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}";
+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}";
 const PostTabsStyle0 = postTabsCss;
 
 const PostTabs = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.postChange = createEvent(this, "postChange", 7);
-        this.isLoaded = false;
-        this.activePanel = undefined;
     }
+    activeTab;
+    showing;
+    hiding;
+    isLoaded = false;
     get tabs() {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
+    get host() { return getElement(this); }
+    /**
+     * The name of the panel that is initially shown.
+     * If not specified, it defaults to the panel associated with the first tab.
+     *
+     * **Changing this value after initialization has no effect.**
+     */
+    activePanel;
+    /**
+     * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
+     * The payload is the name of the newly shown panel.
+     */
+    postChange;
     componentDidLoad() {
-        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -49,9 +63,8 @@ const PostTabs = class {
      * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
      */
     async show(panelName) {
-        var _a;
         // do nothing if the tab is already active
-        if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+        if (panelName === this.activeTab?.panel) {
             return;
         }
         const previousTab = this.activeTab;
@@ -85,7 +98,6 @@ const PostTabs = class {
         });
     }
     enableTabs() {
-        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -112,7 +124,7 @@ const PostTabs = class {
         });
         // if the currently active tab was removed from the DOM then select the first one
         if (this.activeTab && !this.activeTab.isConnected) {
-            void this.show((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
+            void this.show(this.tabs[0]?.panel);
         }
     }
     activateTab(tab) {
@@ -164,9 +176,8 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '27b5f90f8b6d8f0d3688b3c965fa666df5f8edab', "data-version": version }, h("div", { key: '4d811e26c2bed4abc63e89517dca0f6fd9f701c3', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'd740301189c1335c3d76520d6a5bfe3e75789d4a', class: "tabs", role: "tablist" }, h("slot", { key: '9b3dc7e7d05b8577dfb480d684cf423a8adc2a23', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'fe219c0eaad3c67bea5a47f0690a8bdda0c739aa', class: "tab-content", part: "content" }, h("slot", { key: '80d8eb9fe9292e4c2486fded48928ffc9c5219bf', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '7c81cd091603a01d960ecc2aed9653d0031dd16e', "data-version": version }, h("div", { key: '716a9f1e05a7ffeca8459e6a88ce4b56364b50ec', class: "tabs-wrapper", part: "tabs" }, h("div", { key: 'b41b35b26e0e1ef1e285719975841aefbdc4a8e1', class: "tabs", role: "tablist" }, h("slot", { key: '065b3a6ecfba2710a344b44cc6d5e73beb0655df', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'f30ce2c568071c8f144ba50e62b48a1294207c63', class: "tab-content", part: "content" }, h("slot", { key: 'c71155abdf95343990b2ee85592e7a995f58d05e', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
-    get host() { return getElement(this); }
 };
 PostTabs.style = PostTabsStyle0;
 

package/dist/esm/post-tabs.entry.js

@@ -1,4 +1,4 @@
-export { P as post_tabs } from './post-tabs-02e523b8.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
-import './fade-7fd71785.js';
+export { P as post_tabs } from './post-tabs-308190c0.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';
+import './fade-1f3cacf4.js';

package/dist/esm/{post-tag-43aba068.js → post-tag-aebbda10.js}

@@ -1,16 +1,28 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-6bfe6554.js';
-import { v as version } from './package-f8f7bb40.js';
+import { g as getElement, r as registerInstance, h, H as Host } from './index-2c232bf2.js';
+import { v as version } from './package-8c98af5e.js';
 
-const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:var(--post-contrast-color)}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
+const postTagCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */.tag,.tag:where(:has(:not(pre))){--post-tag-bg:hsl(0, 0%, 90%);--post-tag-fg:#000;display:inline-flex;align-items:center;gap:var(--post-core-dimension-4);padding:0 var(--post-core-dimension-8);max-width:100%;background-color:var(--post-tag-bg);border:var(--post-core-dimension-1) solid rgba(0,0,0,0);border-radius:var(--post-core-dimension-4);font-size:1rem;line-height:calc(var(--post-core-dimension-32) - var(--post-core-dimension-1)*2);white-space:nowrap;color:var(--post-tag-fg)}.tag post-icon,.tag:where(:has(:not(pre))) post-icon{flex:0 0 auto;width:1.25rem;height:1.25rem}.tag .tag-text,.tag:where(:has(:not(pre))) .tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag .tag-text svg,.tag .tag-text img,.tag:where(:has(:not(pre))) .tag-text svg,.tag:where(:has(:not(pre))) .tag-text img{display:inline-block;height:1.25rem !important;vertical-align:text-top}.tag.tag-sm,.tag:where(:has(:not(pre))).tag-sm{line-height:var(--post-core-dimension-24)}.tag.tag-sm .tag-icon,.tag:where(:has(:not(pre))).tag-sm .tag-icon{width:1rem;height:1rem}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{--post-tag-bg:#fff;--post-tag-fg:#000}.tag.tag-yellow,.tag:where(:has(:not(pre))).tag-yellow{--post-tag-bg:#fc0;--post-tag-fg:#000}.tag.tag-success,.tag:where(:has(:not(pre))).tag-success{--post-tag-bg:#2c871d;--post-tag-fg:#fff}.tag.tag-warning,.tag:where(:has(:not(pre))).tag-warning{--post-tag-bg:#f49e00;--post-tag-fg:#000}.tag.tag-danger,.tag:where(:has(:not(pre))).tag-danger{--post-tag-bg:#a51728;--post-tag-fg:#fff}.tag.tag-info,.tag:where(:has(:not(pre))).tag-info{--post-tag-bg:#cce4ee;--post-tag-fg:#000}.tag.tag-white,.tag:where(:has(:not(pre))).tag-white{border-color:#000}pre .tag,pre .tag:where(:has(:not(pre))){display:inline;padding:initial;max-width:initial;background:initial;border:initial;border-radius:initial;font-size:inherit;line-height:inherit;white-space:unset}*,*:before,*:after{box-sizing:border-box}.tag-text ::slotted(svg),.tag-text ::slotted(img){display:inline-block !important;height:1.25rem !important;vertical-align:text-top !important}";
 const PostTagStyle0 = postTagCss;
 
 const PostTag = class {
+    get host() { return getElement(this); }
+    classes;
+    /**
+     * Defines the color variant of the component.
+     */
+    variant;
+    /**
+     * Defines the size of the component.
+     */
+    size = null;
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     */
+    icon = null;
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = null;
-        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -32,9 +44,8 @@ const PostTag = class {
         this.setClasses();
     }
     render() {
-        return (h(Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": version }, h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
+        return (h(Host, { key: 'fd03781bfdcfaa3776677f8d95e8b1a74de24c1e', "data-version": version }, h("div", { key: '0a22b98ea9c75d4a09680e2abe980bd0e4935172', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: 'ddda0c15ce644e311b8061283d83619667264ec4', class: "tag-text" }, h("slot", { key: '30fb04c5e80f46e7cb560f9489791d8bcd7b45b0' })))));
     }
-    get host() { return getElement(this); }
     static get watchers() { return {
         "variant": ["variantChanged"],
         "size": ["sizeChanged"]

package/dist/esm/post-tag.entry.js

@@ -1,3 +1,3 @@
-export { P as post_tag } from './post-tag-43aba068.js';
-import './index-6bfe6554.js';
-import './package-f8f7bb40.js';
+export { P as post_tag } from './post-tag-aebbda10.js';
+import './index-2c232bf2.js';
+import './package-8c98af5e.js';