@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.21

package/dist/cjs/{post-rating-db5a397a.js → post-rating-d12fa214.js}

@@ -1,17 +1,28 @@
 'use strict';
 
-const index = require('./index-c15bd800.js');
-const _package = require('./package-a7150f64.js');
+const index = require('./index-5acef487.js');
+const _package = require('./package-c6bc9e82.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 -0.25rem;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:2px;outline:2px 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 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 index.getElement(this); }
+    /**
+     * 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) {
         index.registerInstance(this, hostRef);
         this.postInput = index.createEvent(this, "postInput", 7);
         this.postChange = index.createEvent(this, "postChange", 7);
-        this.hasChanged = false;
         this.hoveredIndex = undefined;
         this.label = 'Rating';
         this.stars = 5;
@@ -73,7 +84,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '0a4972eeedcda4d4f772db0407ba2a6279f5d797', "data-version": _package.version }, index.h("div", { key: 'a9ab9daaa3f9e1e421f28267057b99a1a2e235ee', 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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '4ccdf384b9a4cfc462d5d3f4a7caab659b6ba2b0', "data-version": _package.version }, index.h("div", { key: '7ab53083bcdff6586b1de7f1c9e5fa546728fc6f', 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) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),
@@ -81,7 +92,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) }, index.h("post-icon", { name: "2062", class: "stroke" }), index.h("post-icon", { name: "2574", class: "fill" })))))));
     }
-    get host() { return index.getElement(this); }
 };
 PostRating.style = PostRatingStyle0;
 

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-db5a397a.js');
-require('./index-c15bd800.js');
-require('./package-a7150f64.js');
+const postRating = require('./post-rating-d12fa214.js');
+require('./index-5acef487.js');
+require('./package-c6bc9e82.js');
 
 
 

package/dist/cjs/post-tab-header-89dca04b.js

@@ -0,0 +1,33 @@
+'use strict';
+
+const index = require('./index-5acef487.js');
+const _package = require('./package-c6bc9e82.js');
+const checkNonEmpty = require('./check-non-empty-bd99d236.js');
+const index_browser = require('./index.browser-2f65f583.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: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 PostTabHeaderStyle0 = postTabHeaderCss;
+
+const PostTabHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tabId = undefined;
+        this.panel = undefined;
+    }
+    get host() { return index.getElement(this); }
+    validateFor() {
+        checkNonEmpty.checkNonEmpty(this, 'panel');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || index_browser.nanoid(6)}`;
+    }
+    render() {
+        return (index.h(index.Host, { key: '336824660de90bf5c570e9739947927a32612fbd', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '8bfe0b57fa96044692e2db3fd983ccde427558e7' })));
+    }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+};
+PostTabHeader.style = PostTabHeaderStyle0;
+
+exports.PostTabHeader = PostTabHeader;

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

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabHeader = require('./post-tab-header-29b8d4e1.js');
-require('./index-c15bd800.js');
-require('./package-a7150f64.js');
-require('./check-non-empty-eeaa8f77.js');
+const postTabHeader = require('./post-tab-header-89dca04b.js');
+require('./index-5acef487.js');
+require('./package-c6bc9e82.js');
+require('./check-non-empty-bd99d236.js');
 require('./constants-238701d3.js');
+require('./index.browser-2f65f583.js');
 
 
 

package/dist/cjs/{post-tab-panel-d59cf1ec.js → post-tab-panel-ad1ab180.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-const index = require('./index-c15bd800.js');
-const _package = require('./package-a7150f64.js');
+const index = require('./index-5acef487.js');
+const _package = require('./package-c6bc9e82.js');
+const index_browser = require('./index.browser-2f65f583.js');
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -12,14 +13,14 @@ const PostTabPanel = class {
         this.panelId = undefined;
         this.name = undefined;
     }
+    get host() { return index.getElement(this); }
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
-        this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
+        this.panelId = `panel-${this.host.id || index_browser.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '2d01a8e7f06e45b4750e63584a3c52232dee4dd5', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: 'b51e2f112791ac22df43ebb537208c65aebe3d03' })));
+        return (index.h(index.Host, { key: '8331ab54bda793a120dc467d8406cc0a02a5c480', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '7da6d67b69150a70ee290ad8ef9b95684ea3f83d' })));
     }
-    get host() { return index.getElement(this); }
 };
 PostTabPanel.style = PostTabPanelStyle0;
 

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

@@ -2,9 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-d59cf1ec.js');
-require('./index-c15bd800.js');
-require('./package-a7150f64.js');
+const postTabPanel = require('./post-tab-panel-ad1ab180.js');
+require('./index-5acef487.js');
+require('./package-c6bc9e82.js');
+require('./index.browser-2f65f583.js');
 
 
 

package/dist/cjs/{post-tabs-7afae61a.js → post-tabs-0db75745.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-const index = require('./index-c15bd800.js');
-const _package = require('./package-a7150f64.js');
-const fade = require('./fade-35a3633a.js');
+const index = require('./index-5acef487.js');
+const _package = require('./package-c6bc9e82.js');
+const fade = require('./fade-72d5ef55.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();
     }
@@ -17,31 +17,40 @@ 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{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-white .tabs-wrapper{background-color:#fff}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-black .tabs-wrapper{background-color:#000}.bg-primary .tabs-wrapper{background-color:#333}.bg-secondary .tabs-wrapper{background-color:#666}.bg-success .tabs-wrapper{background-color:#2c871d}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-error .tabs-wrapper{background-color:#a51728}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}: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) {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange", 7);
-        this.isLoaded = false;
         this.activePanel = undefined;
     }
+    activeTab;
+    showing;
+    hiding;
+    isLoaded = false;
     get tabs() {
-        return this.host.querySelectorAll('post-tab-header');
+        return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
+    get host() { return index.getElement(this); }
+    /**
+     * 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() {
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        const initiallyActivePanel = this.activePanel || this.tabs[0]?.panel;
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -50,9 +59,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;
@@ -112,7 +120,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(this.tabs.item(0).panel);
+            void this.show(this.tabs[0]?.panel);
         }
     }
     activateTab(tab) {
@@ -164,9 +172,8 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '6a3e84a92b03d462dbff1b8fc638f7ebf8ea9d23', "data-version": _package.version }, index.h("div", { key: 'e73b58f1524e70401089830b1b9b47a2c85b828a', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: '9da5ce2d30d37c74dee92f2e871e56e96d07d429', class: "tabs", role: "tablist" }, index.h("slot", { key: '944e209f2f23b9a3469bc6b5167a0939da4c9631', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '93caabfd1a0be19df3e8be64f0965de488159526', class: "tab-content", part: "content" }, index.h("slot", { key: '92465fa749afad52130631cb3957fefeb40b8e9a', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: 'dae24eee55a75f9b825f590883a9c1e896c1e9fc', "data-version": _package.version }, index.h("div", { key: '0a26de80b8267ddc30455b0b5afbf10ae521232b', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: '826cb0a4355eeb5ddc07288e1e68fc72785c095f', class: "tabs", role: "tablist" }, index.h("slot", { key: '94ce90bc3dc8ff4b5012fcfa3c0039b188c14002', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '462f80f3368431344910cc317f1c0f42112dc99a', class: "tab-content", part: "content" }, index.h("slot", { key: '57a80ac790ca75f3b62382994c21a3a3c78004cc', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
-    get host() { return index.getElement(this); }
 };
 PostTabs.style = PostTabsStyle0;
 

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-7afae61a.js');
-require('./index-c15bd800.js');
-require('./package-a7150f64.js');
-require('./fade-35a3633a.js');
+const postTabs = require('./post-tabs-0db75745.js');
+require('./index-5acef487.js');
+require('./package-c6bc9e82.js');
+require('./fade-72d5ef55.js');
 
 
 

package/dist/cjs/post-tag-396a46c9.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const index = require('./index-5acef487.js');
+const _package = require('./package-c6bc9e82.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:#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 index.getElement(this); }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.classes = undefined;
+        this.variant = undefined;
+        this.size = null;
+        this.icon = null;
+        this.setClasses = this.setClasses.bind(this);
+    }
+    variantChanged() {
+        this.setClasses();
+    }
+    sizeChanged() {
+        this.setClasses();
+    }
+    setClasses() {
+        this.classes = [
+            'tag',
+            this.size ? `tag-${this.size}` : null,
+            this.variant ? `tag-${this.variant}` : null,
+        ]
+            .filter(c => c !== null)
+            .join(' ');
+    }
+    connectedCallback() {
+        this.setClasses();
+    }
+    render() {
+        return (index.h(index.Host, { key: '4ca273166b81099dd8fc0f69d3d38215e3d7ccbc', "data-version": _package.version }, index.h("div", { key: 'b6c4eb6a3bf8cbaad18cf6277dab79bd6e350f0a', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '4f9e8cf6b2c723e31d60e30464c1106a9f72b5b4', class: "tag-text" }, index.h("slot", { key: '819a4e6ff743386f8d5d6b1d94dea9ee4a612784' })))));
+    }
+    static get watchers() { return {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"]
+    }; }
+};
+PostTag.style = PostTagStyle0;
+
+exports.PostTag = PostTag;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-b7d0bbff.js');
-require('./index-c15bd800.js');
-require('./package-a7150f64.js');
+const postTag = require('./post-tag-396a46c9.js');
+require('./index-5acef487.js');
+require('./package-c6bc9e82.js');