@swisspost/design-system-components 9.0.0-next.8 → 9.0.0

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

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const postPopovercontainer = require('./post-popovercontainer-cb4793c1.js');
+require('./index-e1f32cce.js');
+require('./package-3ed88bb9.js');
+
+
+
+exports.post_popovercontainer = postPopovercontainer.PostPopovercontainer;

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

@@ -0,0 +1,88 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-3ed88bb9.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)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\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 PostRatingStyle0 = postRatingCss;
+
+const PostRating = class {
+    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;
+        this.currentRating = 0;
+        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 (index.h(index.Host, { key: '442c936d6e9337d04b16edc62e56996139e86262', "data-version": _package.version }, index.h("div", { key: '280ea877721676ba137c91d9be00007bcc5caf4f', 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),
+                '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) }, 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;
+
+exports.PostRating = PostRating;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-3a87ca46.js');
+const postRating = require('./post-rating-d5073d8d.js');
 require('./index-e1f32cce.js');
-require('./package-a2b895fc.js');
+require('./package-3ed88bb9.js');
 
 
 

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

@@ -0,0 +1,32 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-3ed88bb9.js');
+const checkNonEmpty = require('./check-non-empty-eeaa8f77.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:var(--post-contrast-color);text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:var(--post-contrast-color)}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted)}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(var(--post-contrast-color-rgb), 0.6);color:var(--post-contrast-color-inverted);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:var(--post-contrast-color-inverted);color:var(--post-contrast-color);font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:.25rem;background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=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,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.alert-primary,post-alert[type=primary],.alert-success,post-alert[type=success],.alert-danger,post-alert[type=danger],.alert-notification,post-alert[type=notification],.alert-error,post-alert[type=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:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-secondary .tab-title{background-color:#666}.bg-secondary .tab-title.active{background-color:#666}.bg-secondary .nav-item{background-color:#666}.bg-success .tab-title{background-color:#2c871d}.bg-success .tab-title.active{background-color:#2c871d}.bg-success .nav-item{background-color:#2c871d}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-error .tab-title{background-color:#a51728}.bg-error .tab-title.active{background-color:#a51728}.bg-error .nav-item{background-color:#a51728}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}@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)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\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) {
+        index.registerInstance(this, hostRef);
+        this.tabId = undefined;
+        this.panel = undefined;
+    }
+    validateFor(newValue) {
+        checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
+    }
+    componentWillLoad() {
+        this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
+    }
+    render() {
+        return (index.h(index.Host, { key: '5912b0379fbde496a165cc18bd8025e02858dd20', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '14d7d226e09a018139570ded2acef36ade7ad501' })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "panel": ["validateFor"]
+    }; }
+};
+PostTabHeader.style = PostTabHeaderStyle0;
+
+exports.PostTabHeader = PostTabHeader;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabHeader = require('./post-tab-header-5fdb05a1.js');
+const postTabHeader = require('./post-tab-header-b756d9b1.js');
 require('./index-e1f32cce.js');
-require('./package-a2b895fc.js');
+require('./package-3ed88bb9.js');
 require('./check-non-empty-eeaa8f77.js');
 require('./constants-238701d3.js');
 

package/dist/cjs/{post-tab-panel-34aed8e6.js → post-tab-panel-97b79ecd.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-a2b895fc.js');
+const _package = require('./package-3ed88bb9.js');
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
@@ -17,7 +17,7 @@ const PostTabPanel = class {
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (index.h(index.Host, { key: 'b4d8a6dac8662fc442ba4b75c7f89bb630b1a0ad', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '3253ed0b5efe32b0c49fc97e46de31ee3dbbd813' })));
+        return (index.h(index.Host, { key: 'b3cf3aa9d4a89fc1f561ba7ecd62ff456e3392eb', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '63be1c4ea7c1c57a1438eeb164b446d39613f926' })));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabPanel = require('./post-tab-panel-34aed8e6.js');
+const postTabPanel = require('./post-tab-panel-97b79ecd.js');
 require('./index-e1f32cce.js');
-require('./package-a2b895fc.js');
+require('./package-3ed88bb9.js');
 
 
 

package/dist/cjs/{post-tabs-dd2da5d2.js → post-tabs-834497f2.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index-e1f32cce.js');
-const _package = require('./package-a2b895fc.js');
+const _package = require('./package-3ed88bb9.js');
 const fade = require('./fade-35a3633a.js');
 
 /**
@@ -25,7 +25,7 @@ const customOnReady = (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}.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}:host{display:block}";
+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 PostTabsStyle0 = postTabsCss;
 
 const PostTabs = class {
@@ -36,12 +36,13 @@ const PostTabs = class {
         this.activePanel = undefined;
     }
     get tabs() {
-        return this.host.querySelectorAll('post-tab-header');
+        return Array.from(this.host.querySelectorAll(':scope > post-tab-header'));
     }
     componentDidLoad() {
+        var _a;
         this.moveMisplacedTabs();
         this.enableTabs();
-        const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+        const initiallyActivePanel = this.activePanel || ((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         void this.show(initiallyActivePanel);
         this.isLoaded = true;
     }
@@ -86,6 +87,7 @@ const PostTabs = class {
         });
     }
     enableTabs() {
+        var _a;
         if (!this.tabs)
             return;
         this.tabs.forEach(async (tab) => {
@@ -112,7 +114,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((_a = this.tabs[0]) === null || _a === void 0 ? void 0 : _a.panel);
         }
     }
     activateTab(tab) {
@@ -164,7 +166,7 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '8e6ef1f64dd41d18cbb87d23ae27ed198dba420f', "data-version": _package.version }, index.h("div", { key: '3e08dbfa502935737040e54f71c5cdba55838ac5', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: '57c2c50ec3ca3ee38a69f3c46f0bd6cfb3649178', class: "tabs", role: "tablist" }, index.h("slot", { key: 'c7ce48bec67f02abf47fa2d152a786f2f7f912fe', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'daf2d7e9d51ad3831a68ed8cd6498d9042bc017f', class: "tab-content", part: "content" }, index.h("slot", { key: 'ee2c3619a2c262a416b34b65843f10e4baa62e38', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: 'a9ffdd06a929c2b7fd386059470467521754b3ad', "data-version": _package.version }, index.h("div", { key: 'f0a4c8ed9a053a7644479b99f22f55f8029cf943', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'd90e3450f44a7bb5438395ce3a7bdfd0cb4bc659', class: "tabs", role: "tablist" }, index.h("slot", { key: 'ddeb20ddbf41a6a6ffc0f8244a4b08aeabe7f7ac', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'c0088f37dec20f684d88e3457d2b0631327bf63e', class: "tab-content", part: "content" }, index.h("slot", { key: 'd5528c69592eaff702c000f43c7d59ffde1ae444', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-dd2da5d2.js');
+const postTabs = require('./post-tabs-834497f2.js');
 require('./index-e1f32cce.js');
-require('./package-a2b895fc.js');
+require('./package-3ed88bb9.js');
 require('./fade-35a3633a.js');
 
 

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

@@ -0,0 +1,47 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-3ed88bb9.js');
+
+const postTagCss = "@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)}}/*!\n * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)\n * Copyright 2011-2021 The Bootstrap Authors\n * Copyright 2011-2021 Twitter, Inc.\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n\n * The MIT License (MIT)\n\n * Copyright (c) 2011-2020 Twitter, Inc.\n * Copyright (c) 2011-2020 The Bootstrap Authors\n\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n\n * The above copyright notice and this permission notice shall be included in\n * all copies or substantial portions of the Software.\n\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\n * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\n * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\n * THE SOFTWARE.\n *//*!\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:.25rem;padding:0 .5rem;max-width:100%;background-color:var(--post-tag-bg);border:1px solid rgba(0,0,0,0);border-radius:.25rem;font-size:1rem;line-height:1.875rem;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:1.5rem}.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 PostTagStyle0 = postTagCss;
+
+const PostTag = class {
+    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: '20c4c9dc37c9db3d4372090fb374bf2eea0cdb07', "data-version": _package.version }, index.h("div", { key: '9bef44d17e73969a1fc3cfe580c6347958da89dc', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '2bc158a3bd9981960053ab4ffc9f69419cd38af3', class: "tag-text" }, index.h("slot", { key: 'fabe72ce90e9a6e06fa62c748731de44f1c7f6b7' })))));
+    }
+    get host() { return index.getElement(this); }
+    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-59232922.js');
+const postTag = require('./post-tag-c70fb945.js');
 require('./index-e1f32cce.js');
-require('./package-a2b895fc.js');
+require('./package-3ed88bb9.js');
 
 
 

package/dist/cjs/post-tooltip-20ebe011.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const index = require('./index-e1f32cce.js');
+const _package = require('./package-3ed88bb9.js');
+const checkType = require('./check-type-64af82a9.js');
+
+const postTooltipCss = ":host{display:none;--post-contrast-color:#fff;--post-bg-rgb:51, 51, 51}:host([open]){display:block}post-popovercontainer[arrow]::after{position:absolute;content:\"\";inset:-13px;z-index:-1}post-popovercontainer>div{padding:.25rem .5rem;max-width:200px;min-height:32px}";
+const PostTooltipStyle0 = postTooltipCss;
+
+const PostTooltip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.placement = 'top';
+        this.arrow = false;
+        this.animation = null;
+        this.open = false;
+    }
+    validateOpen() {
+        checkType.checkType(this.open, 'boolean', 'The "open" property of the post-tooltip must be a boolean.');
+    }
+    componentDidLoad() {
+        if (!this.host.id) {
+            console.error(
+            /*prettier-ignore*/
+            'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.');
+        }
+    }
+    /**
+     * Programmatically display the tooltip.
+     * @param target An element where the tooltip should be shown
+     */
+    async show(target) {
+        if (this.open)
+            return;
+        this.popoverRef.show(target);
+    }
+    /**
+     * Programmatically hide this tooltip.
+     */
+    async hide() {
+        this.popoverRef.hide();
+    }
+    /**
+     * Toggle tooltip display.
+     * @param target An element where the tooltip should be shown
+     * @param [force] Pass true to always show or false to always hide
+     */
+    async toggle(target, force) {
+        this.popoverRef.toggle(target, force);
+    }
+    /**
+     * Set the open state based on the toggle event.
+     * @param e Popovercontainer toggle event
+     */
+    handleToggle(e) {
+        this.open = e.detail;
+    }
+    render() {
+        const popoverClass = `${this.arrow ? 'has-arrow' : ''}`;
+        return (index.h(index.Host, { key: '42d4dbfacdfd2aa9d00c8555cfb672e71013d455', "data-version": _package.version, role: "tooltip" }, index.h("post-popovercontainer", { key: '781b9a2a90d6e1d7dc1fe233d68787cdc96d1b2a', safeSpace: 'trapezoid', class: popoverClass, arrow: this.arrow, animation: this.animation, placement: this.placement, onPostToggle: e => this.handleToggle(e), ref: (el) => (this.popoverRef = el) }, index.h("slot", { key: '895559a810d2ec11e5078c0334f4e8f9c73533e5' }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["validateOpen"]
+    }; }
+};
+PostTooltip.style = PostTooltipStyle0;
+
+exports.PostTooltip = PostTooltip;