@swisspost/design-system-components 2.1.0 → 7.1.0

package/dist/components/post-tab-header2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { v as version } from './package.js';
 import { c as checkNonEmpty } from './check-non-empty.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:var(--post-contrast-color-inverted)}.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}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:is(.bg-dark,.bg-primary,.bg-black,.bg-danger,.bg-nightblue,.bg-nightblue-bright,.bg-petrol,.bg-coral,.bg-olive,.bg-purple,.bg-purple-bright,.bg-aubergine,.bg-aubergine-bright,.bg-success-green,.bg-error-red) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:2px solid Highlight;outline-offset:-0.25rem}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}.bg-yellow .tab-title{background-color:#fc0}.bg-yellow .tab-title.active{background-color:#fc0}.bg-yellow .nav-item{background-color:#fc0}.bg-light .tab-title{background-color:#faf9f8}.bg-light .tab-title.active{background-color:#faf9f8}.bg-light .nav-item{background-color:#faf9f8}.bg-gray .tab-title{background-color:#f4f3f1}.bg-gray .tab-title.active{background-color:#f4f3f1}.bg-gray .nav-item{background-color:#f4f3f1}.bg-dark .tab-title{background-color:#333}.bg-dark .tab-title.active{background-color:#333}.bg-dark .nav-item{background-color:#333}.bg-primary .tab-title{background-color:#333}.bg-primary .tab-title.active{background-color:#333}.bg-primary .nav-item{background-color:#333}.bg-white .tab-title{background-color:#fff}.bg-white .tab-title.active{background-color:#fff}.bg-white .nav-item{background-color:#fff}.bg-black .tab-title{background-color:#000}.bg-black .tab-title.active{background-color:#000}.bg-black .nav-item{background-color:#000}.bg-info .tab-title{background-color:#cce4ee}.bg-info .tab-title.active{background-color:#cce4ee}.bg-info .nav-item{background-color:#cce4ee}.bg-success .tab-title{background-color:#2c911c}.bg-success .tab-title.active{background-color:#2c911c}.bg-success .nav-item{background-color:#2c911c}.bg-warning .tab-title{background-color:#f49e00}.bg-warning .tab-title.active{background-color:#f49e00}.bg-warning .nav-item{background-color:#f49e00}.bg-danger .tab-title{background-color:#a51728}.bg-danger .tab-title.active{background-color:#a51728}.bg-danger .nav-item{background-color:#a51728}.bg-nightblue .tab-title{background-color:#004976}.bg-nightblue .tab-title.active{background-color:#004976}.bg-nightblue .nav-item{background-color:#004976}.bg-nightblue-bright .tab-title{background-color:#0076a8}.bg-nightblue-bright .tab-title.active{background-color:#0076a8}.bg-nightblue-bright .nav-item{background-color:#0076a8}.bg-petrol .tab-title{background-color:#006d68}.bg-petrol .tab-title.active{background-color:#006d68}.bg-petrol .nav-item{background-color:#006d68}.bg-petrol-bright .tab-title{background-color:#00968f}.bg-petrol-bright .tab-title.active{background-color:#00968f}.bg-petrol-bright .nav-item{background-color:#00968f}.bg-coral .tab-title{background-color:#9e2a2f}.bg-coral .tab-title.active{background-color:#9e2a2f}.bg-coral .nav-item{background-color:#9e2a2f}.bg-coral-bright .tab-title{background-color:#e03c31}.bg-coral-bright .tab-title.active{background-color:#e03c31}.bg-coral-bright .nav-item{background-color:#e03c31}.bg-olive .tab-title{background-color:#716135}.bg-olive .tab-title.active{background-color:#716135}.bg-olive .nav-item{background-color:#716135}.bg-olive-bright .tab-title{background-color:#aa9d2e}.bg-olive-bright .tab-title.active{background-color:#aa9d2e}.bg-olive-bright .nav-item{background-color:#aa9d2e}.bg-purple .tab-title{background-color:#80276c}.bg-purple .tab-title.active{background-color:#80276c}.bg-purple .nav-item{background-color:#80276c}.bg-purple-bright .tab-title{background-color:#c5299b}.bg-purple-bright .tab-title.active{background-color:#c5299b}.bg-purple-bright .nav-item{background-color:#c5299b}.bg-aubergine .tab-title{background-color:#523178}.bg-aubergine .tab-title.active{background-color:#523178}.bg-aubergine .nav-item{background-color:#523178}.bg-aubergine-bright .tab-title{background-color:#7566a0}.bg-aubergine-bright .tab-title.active{background-color:#7566a0}.bg-aubergine-bright .nav-item{background-color:#7566a0}.bg-success-green .tab-title{background-color:#2c871d}.bg-success-green .tab-title.active{background-color:#2c871d}.bg-success-green .nav-item{background-color:#2c871d}.bg-error-red .tab-title{background-color:#a51728}.bg-error-red .tab-title.active{background-color:#a51728}.bg-error-red .nav-item{background-color:#a51728}.bg-warning-orange .tab-title{background-color:#f49e00}.bg-warning-orange .tab-title.active{background-color:#f49e00}.bg-warning-orange .nav-item{background-color:#f49e00}.bg-success-background .tab-title{background-color:#c0debb}.bg-success-background .tab-title.active{background-color:#c0debb}.bg-success-background .nav-item{background-color:#c0debb}.bg-error-background .tab-title{background-color:#ffdade}.bg-error-background .tab-title.active{background-color:#ffdade}.bg-error-background .nav-item{background-color:#ffdade}.bg-warning-background .tab-title{background-color:#fce2b2}.bg-warning-background .tab-title.active{background-color:#fce2b2}.bg-warning-background .nav-item{background-color:#fce2b2}[class*=bg-] .tab-title.active:focus::after{background-color:rgba(255,255,255,.2)}@supports selector(*:focus-visible){[class*=bg-] .tab-title.active:focus::after{background-color:unset}[class*=bg-] .tab-title.active:focus-visible::after{background-color:rgba(255,255,255,.2)}}/*!\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;-webkit-appearance:button;appearance:button}";
+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:var(--post-contrast-color-inverted)}.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}:is(.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)}:is(.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)}}/*!\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 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
@@ -20,7 +20,7 @@ const PostTabHeader = /*@__PURE__*/ proxyCustomElement(class PostTabHeader exten
         this.tabId = `tab-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '999ab8056178562bbcf615b03787451a946f8929', "data-version": version }, h("button", { key: '9795891344158c294f6d77a2245200108f1fe737', "aria-selected": "false", class: "tab-title", id: this.tabId, role: "tab", tabindex: "-1", type: "button" }, h("slot", { key: 'd62f2894e9bf89c00a9d5673cd47507ef7b26359' }))));
+        return (h(Host, { key: 'eb6ac6a67f4cbf571d38f1de1c8d428a9dea5a53', id: this.tabId, role: "tab", "data-version": version, "aria-selected": "false", tabindex: "-1", class: "tab-title" }, h("slot", { key: 'd6559dbcc76ecc8d253fcd4a115b4bc4f78fd496' })));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/post-tab-panel2.js

@@ -17,7 +17,7 @@ const PostTabPanel = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends
         this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;
     }
     render() {
-        return (h(Host, { key: '08148fe9b221905fbeab99bdb14f4d040deda959', "data-version": version }, h("div", { key: '04ad9fba5b296902fc75e0e36f7cefd91d0b6948', class: "tab-pane", id: this.panelId, role: "tabpanel" }, h("slot", { key: '840a5242e071f47b102340738f31b3f8b3c10052' }))));
+        return (h(Host, { key: 'cd74acf8889af916b9b32b57b483bbd74d5a6e20', "data-version": version, id: this.panelId, role: "tabpanel" }, h("slot", { key: '9d2c3f42b1dd9214aeeee35efc1179372851af13' })));
     }
     get host() { return this; }
     static get style() { return PostTabPanelStyle0; }

package/dist/components/post-tabs2.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { v as version } from './package.js';
 import { f as fadeOut, a as fadeIn } from './fade.js';
 
-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-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:#333}.bg-primary .tabs-wrapper{background-color:#333}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.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}.bg-success-green .tabs-wrapper{background-color:#2c871d}.bg-error-red .tabs-wrapper{background-color:#a51728}.bg-warning-orange .tabs-wrapper{background-color:#f49e00}.bg-success-background .tabs-wrapper{background-color:#c0debb}.bg-error-background .tabs-wrapper{background-color:#ffdade}.bg-warning-background .tabs-wrapper{background-color:#fce2b2}: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 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
@@ -10,7 +10,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.tabChange = createEvent(this, "tabChange", 7);
+        this.postChange = createEvent(this, "postChange", 7);
         this.isLoaded = false;
         this.activePanel = undefined;
     }
@@ -55,7 +55,7 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         if (this.showing) {
             await this.showing.finished;
         }
-        this.tabChange.emit(this.activeTab.panel);
+        this.postChange.emit(this.activeTab.panel);
     }
     moveMisplacedTabs() {
         if (!this.tabs)
@@ -71,16 +71,21 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
             return;
         this.tabs.forEach(async (tab) => {
             await tab.componentOnReady();
-            const tabTitle = tab.shadowRoot.querySelector('.tab-title');
             // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
-            if (tabTitle.getAttribute('aria-controls'))
+            if (tab.getAttribute('aria-controls'))
                 return;
-            const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
-            tabTitle.setAttribute('aria-controls', tabPanel.id);
-            tabPanel.setAttribute('aria-labelledby', tabTitle.id);
+            const tabPanel = this.getPanel(tab.panel);
+            tab.setAttribute('aria-controls', tabPanel.id);
+            tabPanel.setAttribute('aria-labelledby', tab.id);
             tab.addEventListener('click', () => {
                 void this.show(tab.panel);
             });
+            tab.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    void this.show(tab.panel);
+                }
+            });
             tab.addEventListener('keydown', ({ key }) => {
                 if (key === 'ArrowRight' || key === 'ArrowLeft')
                     this.navigateTabs(tab, key);
@@ -93,15 +98,13 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
     }
     activateTab(tab) {
         if (this.activeTab) {
-            const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
-            tabTitle.setAttribute('aria-selected', 'false');
-            tabTitle.setAttribute('tabindex', '-1');
-            tabTitle.classList.remove('active');
+            this.activeTab.setAttribute('aria-selected', 'false');
+            this.activeTab.setAttribute('tabindex', '-1');
+            this.activeTab.classList.remove('active');
         }
-        const tabTitle = tab.shadowRoot.querySelector('.tab-title');
-        tabTitle.setAttribute('aria-selected', 'true');
-        tabTitle.removeAttribute('tabindex');
-        tabTitle.classList.add('active');
+        tab.setAttribute('aria-selected', 'true');
+        tab.setAttribute('tabindex', '0');
+        tab.classList.add('active');
         this.activeTab = tab;
     }
     hidePanel(panelName) {
@@ -139,11 +142,10 @@ const PostTabs = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLEle
         }
         if (!nextTab)
             return;
-        const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title');
-        nextTabTitle.focus();
+        nextTab.focus();
     }
     render() {
-        return (h(Host, { key: '474b7d00c23aec2a44a202c09b8a75a9dc12b4a8', "data-version": version }, h("div", { key: '2fe1b6cad96fd868cbaa7e775d185537a37228fd', class: "tabs-wrapper" }, h("div", { key: 'ef70af3ddd337cefb719d183d603eb93fb033e25', class: "tabs", role: "tablist" }, h("slot", { key: '360909ea07bbbca523cb21b71daa8b4b02f60bed', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'ba44b0e8484e63d9b48f66933f37d854eb648854', class: "tab-content" }, h("slot", { key: 'cd22488448be508393fcb9f9428d3f712c9b659b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (h(Host, { key: '38a0e3f686dab8cc1ea9dc23cc6e275fe0e6b45d', "data-version": version }, h("div", { key: 'c67273069e5d3ba858bd6c5da8684bbd2f8c398b', class: "tabs-wrapper" }, h("div", { key: 'fc3e725607107f3b5d3c969e4107c229ca8f8c66', class: "tabs", role: "tablist" }, h("slot", { key: 'caf8d1a6901327d0b8faebb36ce239d7368e2a22', name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { key: 'f8cf7c8c8cbb3fd308cebc34513b16926f8e5c81', class: "tab-content" }, h("slot", { key: '7f7ff954545f85e6caab71d7265017607e25262b', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
     get host() { return this; }
     static get style() { return PostTabsStyle0; }

package/dist/components/post-tag.d.ts

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

package/dist/components/post-tag.js

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

package/dist/components/post-tag2.js

@@ -0,0 +1,74 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$1 } from './post-icon2.js';
+
+const postTagCss = "/*!\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:18.5rem;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 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 (h(Host, { key: '932992b2aa41e1082bf1617c7f6c74419febb143', "data-version": version }, h("div", { key: '3d5b82975cf95f1439299326347886a8b74e2d3d', class: this.classes }, this.icon ? h("post-icon", { name: this.icon }) : null, h("div", { key: '96dac1715f1ddfe799cb2cb443f57d2a4082d90e', class: "tag-text" }, h("slot", { key: 'bb886b44ae76b71096c9938dacd708d80b602790' })))));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"]
+    }; }
+    static get style() { return PostTagStyle0; }
+}, [1, "post-tag", {
+        "variant": [1],
+        "size": [1],
+        "icon": [1],
+        "classes": [32]
+    }, undefined, {
+        "variant": ["variantChanged"],
+        "size": ["sizeChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["post-tag", "post-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "post-tag":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PostTag);
+            }
+            break;
+        case "post-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { PostTag as P, defineCustomElement as d };

package/dist/components/post-tooltip2.js

@@ -4765,6 +4765,7 @@ const isFocusable = /*@__PURE__*/getDefaultExportFromCjs(focusable.exports);
     document.addEventListener(mouseMove, mouseMoveHandler, true);
     document.addEventListener('wheel', clearLongPressTimer, true);
     document.addEventListener('scroll', clearLongPressTimer, true);
+    document.addEventListener('contextmenu', clearLongPressTimer, true);
 
     // hook events that can trigger a long press event
     document.addEventListener(mouseDown, mouseDownHandler, true); // <- start
@@ -4783,6 +4784,7 @@ const PostTooltipStyle0 = postTooltipCss;
 let tooltipInstances = 0;
 let hideTooltipTimeout = null;
 const tooltipTargetAttribute = 'data-tooltip-target';
+const tooltipTargetAttributeSelector = `[${tooltipTargetAttribute}]`;
 /**
  * Global event listener to show tooltips. This is globalized so that triggers that are rendered
  * async will still work without the need to set listeners on the element itself
@@ -4790,14 +4792,14 @@ const tooltipTargetAttribute = 'data-tooltip-target';
  * @returns
  */
 const globalInterestHandler = (e) => {
-    const target = e.target;
-    if (!target || !('getAttribute' in target))
+    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    if (!targetElement || !('getAttribute' in targetElement))
         return;
-    const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
-    tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(target);
+    void (tooltip === null || tooltip === void 0 ? void 0 : tooltip.show(targetElement));
     if (hideTooltipTimeout) {
         window.clearTimeout(hideTooltipTimeout);
         hideTooltipTimeout = null;
@@ -4810,8 +4812,10 @@ const globalInterestHandler = (e) => {
  * @returns
  */
 const globalInterestLostHandler = (e) => {
-    const target = e.target;
-    const tooltipTarget = target.getAttribute(tooltipTargetAttribute);
+    const targetElement = e.target.closest(tooltipTargetAttributeSelector);
+    if (!targetElement || !('getAttribute' in targetElement))
+        return;
+    const tooltipTarget = targetElement.getAttribute(tooltipTargetAttribute);
     if (!tooltipTarget || tooltipTarget === '')
         return;
     const tooltip = document.getElementById(tooltipTarget);
@@ -4939,7 +4943,7 @@ const PostTooltip = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H
     }
     render() {
         const popoverClass = `${this.arrow ? ' has-arrow' : ''}`;
-        return (h(Host, { key: '63124ebabffbe5fe857bcc61eecf4133f2952e85', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: '42e1b5e0ab8cbb3a1b805ccf5b40232b071cf5ad', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: 'bf414a19c044f3c608ab3141bb93736dd7dea723' }))));
+        return (h(Host, { key: '07eb6b63076ce7803c58dfb6749553b636570b86', "data-version": version$1, role: "tooltip", onPointerOver: this.handleInterest, onPointerOut: this.handleInterestLost, onFocusIn: this.handleInterest, onFocusOut: this.handleInterestLost }, h("post-popovercontainer", { key: 'b0256a56e1814b4f83999f3267d3c39d874f515d', class: popoverClass, arrow: this.arrow, placement: this.placement, ref: (el) => (this.popoverRef = el) }, h("slot", { key: '9432e38bab0d14ea835aee0f7567ee9795067491' }))));
     }
     get host() { return this; }
     static get style() { return PostTooltipStyle0; }

package/dist/docs.d.ts

@@ -347,10 +347,26 @@ export interface JsonDocsEvent {
   deprecation?: string;
   detail: string;
 }
+/**
+ * Type describing a CSS Style, as described by a JSDoc-style comment
+ */
 export interface JsonDocsStyle {
+  /**
+   * The name of the style
+   */
   name: string;
+  /**
+   * The type/description associated with the style
+   */
   docs: string;
+  /**
+   * The annotation used in the JSDoc of the style (e.g. `@prop`)
+   */
   annotation: string;
+  /**
+   * The mode associated with the style
+   */
+  mode: string | undefined;
 }
 export interface JsonDocsListener {
   event: string;
@@ -389,10 +405,28 @@ export interface JsonDocsPart {
    */
   docs: string;
 }
+/**
+ * Represents a parsed block comment in a CSS, Sass, etc. file for a custom property.
+ */
 export interface StyleDoc {
+  /**
+   * The name of the CSS property
+   */
   name: string;
+  /**
+   * The user-defined description of the CSS property
+   */
   docs: string;
+  /**
+   * The JSDoc-style annotation (e.g. `@prop`) that was used in the block comment to detect the comment.
+   * Used to inform Stencil where the start of a new property's description starts (and where the previous description
+   * ends).
+   */
   annotation: "prop";
+  /**
+   * The Stencil style-mode that is associated with this property.
+   */
+  mode: string | undefined;
 }
 
 export {};