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

package/dist/cjs/{post-rating-28904e91.js → post-rating-c402c294.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-60e57542.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;
@@ -9,6 +9,24 @@ const PostRatingStyle0 = postRatingCss;
 const PostRating = class {
     hasChanged = false;
     get host() { return index.getElement(this); }
+    hoveredIndex;
+    /**
+     * Defines a hidden label for the component.
+     */
+    label = 'Rating';
+    /**
+     * Defines the total amount of stars rendered in the component.
+     */
+    stars = 5;
+    /**
+     * Defines the rating that the component should show.
+     */
+    currentRating = 0;
+    /**
+     * Defines if the component is readonly or not.
+     * This usually should be used together with the `currentRating` property.
+     */
+    readonly = false;
     /**
      * An event emitted whenever the component's value has changed (on input).
      * The event payload can be used like so: `event.detail.value`.
@@ -23,11 +41,6 @@ const PostRating = class {
         index.registerInstance(this, hostRef);
         this.postInput = index.createEvent(this, "postInput", 7);
         this.postChange = index.createEvent(this, "postChange", 7);
-        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);
@@ -84,7 +97,7 @@ const PostRating = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'bb4ab7c2ae609e8e288c62516be93f0b96926eff', "data-version": _package.version }, index.h("div", { key: '0176474611f998938aef0b267c118478d6623fbc', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
+        return (index.h(index.Host, { key: '64891ff9f0ef8f7bc2be5df9e989577830b35ffc', "data-version": _package.version }, index.h("div", { key: 'b4e7050864265e33e08b88fc3d5c8eea3cf6ab0e', role: "slider", class: "rating", tabindex: "0", "aria-label": this.label, "aria-valuemin": "0", "aria-valuemax": this.stars, "aria-valuenow": this.currentRating, "aria-valuetext": `${this.currentRating} out of ${this.stars}`, "aria-readonly": this.readonly ? 'true' : 'false', onKeyDown: this.keydownHandler, onBlur: this.blurHandler }, Array.from({ length: this.stars }).map((v, i) => (index.h("div", { key: `star-${v}`, "aria-hidden": "true", class: {
                 'star': true,
                 'before-hover': i < this.hoveredIndex,
                 'active': i < Math.round(this.currentRating),

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postRating = require('./post-rating-28904e91.js');
-require('./index-f1b08cdb.js');
-require('./package-60e57542.js');
+const postRating = require('./post-rating-c402c294.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');
 
 
 

package/dist/cjs/{post-tab-header-86b129ab.js → post-tab-header-c819517d.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-60e57542.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
 const checkNonEmpty = require('./check-non-empty-eeaa8f77.js');
 const index_browser = require('./index.browser-2f65f583.js');
 
@@ -11,10 +11,13 @@ const PostTabHeaderStyle0 = postTabHeaderCss;
 const PostTabHeader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.tabId = undefined;
-        this.panel = undefined;
     }
     get host() { return index.getElement(this); }
+    tabId;
+    /**
+     * The name of the panel controlled by the tab header.
+     */
+    panel;
     validateFor(newValue) {
         checkNonEmpty.checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
     }
@@ -22,7 +25,7 @@ const PostTabHeader = class {
         this.tabId = `tab-${this.host.id || index_browser.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '9b12878498f63da83113c081f81a749b4ee47ef4', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: '3a2e7f3657110d707b49af911e9dd3a4ef323e36' })));
+        return (index.h(index.Host, { key: 'f7383136476f3d32a79c39f7cadef8bcde0630f7', id: this.tabId, role: "tab", "data-version": _package.version, "aria-selected": "false", tabindex: "-1", class: "tab-title", slot: "tabs" }, index.h("slot", { key: 'b88f3ce360da891793e31b84c4bfd4f59511d88a' })));
     }
     static get watchers() { return {
         "panel": ["validateFor"]

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-86b129ab.js');
-require('./index-f1b08cdb.js');
-require('./package-60e57542.js');
+const postTabHeader = require('./post-tab-header-c819517d.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');
 require('./check-non-empty-eeaa8f77.js');
 require('./constants-238701d3.js');
 require('./index.browser-2f65f583.js');

package/dist/cjs/{post-tab-panel-94333a7e.js → post-tab-panel-3cb207f3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-60e57542.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
 const index_browser = require('./index.browser-2f65f583.js');
 
 const postTabPanelCss = ":host{display:none}";
@@ -10,16 +10,19 @@ const PostTabPanelStyle0 = postTabPanelCss;
 const PostTabPanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.panelId = undefined;
-        this.name = undefined;
     }
     get host() { return index.getElement(this); }
+    panelId;
+    /**
+     * The name of the panel, used to associate it with a tab header.
+     */
+    name;
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || index_browser.nanoid(6)}`;
     }
     render() {
-        return (index.h(index.Host, { key: '9e8f9c5dc0c1c3d1b7e63cbb9e9cbb0cf116da9b', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '3ece42346845324cfa0fb9af5721efab2b71e2f1' })));
+        return (index.h(index.Host, { key: '9d35c9ceec54f1c2983600342e5e63a49ca93aef', "data-version": _package.version, id: this.panelId, role: "tabpanel" }, index.h("slot", { key: '8db185ca7a2030343df512962126a91f64840a64' })));
     }
 };
 PostTabPanel.style = PostTabPanelStyle0;

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-94333a7e.js');
-require('./index-f1b08cdb.js');
-require('./package-60e57542.js');
+const postTabPanel = require('./post-tab-panel-3cb207f3.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');
 require('./index.browser-2f65f583.js');
 
 

package/dist/cjs/{post-tabs-f8581050.js → post-tabs-b6fa39c3.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-60e57542.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.js');
 const fade = require('./fade-72d5ef55.js');
 
 /**
@@ -32,7 +32,6 @@ const PostTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.postChange = index.createEvent(this, "postChange", 7);
-        this.activePanel = undefined;
     }
     activeTab;
     showing;
@@ -42,6 +41,13 @@ const PostTabs = class {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     get host() { return index.getElement(this); }
+    /**
+     * The name of the panel that is initially shown.
+     * If not specified, it defaults to the panel associated with the first tab.
+     *
+     * **Changing this value after initialization has no effect.**
+     */
+    activePanel;
     /**
      * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.
      * The payload is the name of the newly shown panel.
@@ -172,7 +178,7 @@ const PostTabs = class {
         nextTab.focus();
     }
     render() {
-        return (index.h(index.Host, { key: '697174a68f4eedabd9170bcad93e60539f0dc778', "data-version": _package.version }, index.h("div", { key: 'ae39c8fd62edd28113dea0f013ffdd3a76bea739', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'a638044b8b6ab2d3c2d6e6b59a2e9a02fd137e0d', class: "tabs", role: "tablist" }, index.h("slot", { key: '2ea6eb60f7d1edcc59eea994cc2fde91c900c286', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: '6900fd1914df01fbe5901378611ed0a359bc13f6', class: "tab-content", part: "content" }, index.h("slot", { key: '464bb9fa7450ddd22517a0e41f692876d6e8bf5b', onSlotchange: () => this.moveMisplacedTabs() }))));
+        return (index.h(index.Host, { key: '7c81cd091603a01d960ecc2aed9653d0031dd16e', "data-version": _package.version }, index.h("div", { key: '716a9f1e05a7ffeca8459e6a88ce4b56364b50ec', class: "tabs-wrapper", part: "tabs" }, index.h("div", { key: 'b41b35b26e0e1ef1e285719975841aefbdc4a8e1', class: "tabs", role: "tablist" }, index.h("slot", { key: '065b3a6ecfba2710a344b44cc6d5e73beb0655df', name: "tabs", onSlotchange: () => this.enableTabs() }))), index.h("div", { key: 'f30ce2c568071c8f144ba50e62b48a1294207c63', class: "tab-content", part: "content" }, index.h("slot", { key: 'c71155abdf95343990b2ee85592e7a995f58d05e', onSlotchange: () => this.moveMisplacedTabs() }))));
     }
 };
 PostTabs.style = PostTabsStyle0;

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTabs = require('./post-tabs-f8581050.js');
-require('./index-f1b08cdb.js');
-require('./package-60e57542.js');
+const postTabs = require('./post-tabs-b6fa39c3.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');
 require('./fade-72d5ef55.js');
 
 

package/dist/cjs/{post-tag-3a24c574.js → post-tag-9c366519.js}

@@ -1,19 +1,30 @@
 'use strict';
 
-const index = require('./index-f1b08cdb.js');
-const _package = require('./package-60e57542.js');
+const index = require('./index-0ee3ab4a.js');
+const _package = require('./package-7d11b6ea.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); }
+    classes;
+    /**
+     * Defines the color variant of the component.
+     */
+    variant;
+    /**
+     * Defines the size of the component.
+     */
+    size = null;
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
+     */
+    icon = null;
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.classes = undefined;
-        this.variant = undefined;
-        this.size = null;
-        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -35,7 +46,7 @@ const PostTag = class {
         this.setClasses();
     }
     render() {
-        return (index.h(index.Host, { key: 'cda93c397ec81e289c843eaae7694bbba6f3c297', "data-version": _package.version }, index.h("div", { key: '7fa71d9c0ca5393bc188e5e09107ec931943ed66', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: '8d36933c00910e9f36759d101f43b628c0fbf185', class: "tag-text" }, index.h("slot", { key: '49e2e9dd66cb85df4615c512d8dc0d7cad6606b8' })))));
+        return (index.h(index.Host, { key: 'fd03781bfdcfaa3776677f8d95e8b1a74de24c1e', "data-version": _package.version }, index.h("div", { key: '0a22b98ea9c75d4a09680e2abe980bd0e4935172', class: this.classes }, this.icon ? index.h("post-icon", { name: this.icon }) : null, index.h("div", { key: 'ddda0c15ce644e311b8061283d83619667264ec4', class: "tag-text" }, index.h("slot", { key: '30fb04c5e80f46e7cb560f9489791d8bcd7b45b0' })))));
     }
     static get watchers() { return {
         "variant": ["variantChanged"],

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const postTag = require('./post-tag-3a24c574.js');
-require('./index-f1b08cdb.js');
-require('./package-60e57542.js');
+const postTag = require('./post-tag-9c366519.js');
+require('./index-0ee3ab4a.js');
+require('./package-7d11b6ea.js');