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

package/loaders/post-rating.js

@@ -1,31 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { d as defineCustomElement$2 } from './p-f7177e26.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$2 } from './post-icon2.js';
 
 const postRatingCss = "/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:inline-block}.rating{display:flex;flex-wrap:wrap;overflow:hidden;margin:0 calc(var(--post-core-dimension-4)*-1);border-radius:4px}.rating .star{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fff;position:relative;width:2rem;height:2rem;cursor:pointer}.rating .star .stroke,.rating .star .fill{display:block;width:100%;height:100%;transition:all ease 100ms}.rating .star .stroke{position:absolute;inset:auto;z-index:1;color:var(--post-rating-star-stroke)}.rating .star .fill{margin:1px;width:calc(100% - 2px);height:calc(100% - 2px);color:var(--post-rating-star-fill)}.rating .star.before-hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.active{--post-rating-star-stroke:hsl(0, 0%, 20%);--post-rating-star-fill:#fc0}.rating .star.hover{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:#fc0}.rating .star.after-active{--post-rating-star-stroke:hsl(0, 0%, 40%);--post-rating-star-fill:hsl(0, 0%, 80%)}.rating :focus{outline:none}.rating:focus-visible{outline-offset:var(--post-core-dimension-2);outline:var(--post-core-dimension-2) solid #1976c8}.rating[aria-readonly=true] .star,.rating[aria-disabled=true] .star{cursor:default}.rating[aria-disabled=true] .star{--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:#fff}.rating[aria-disabled=true] .star.active{cursor:default;--post-rating-star-stroke:hsl(0, 0%, 60%);--post-rating-star-fill:hsl(0, 0%, 90%)}";
 const PostRatingStyle0 = postRatingCss;
 
-const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H {
+const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends HTMLElement {
     hasChanged = false;
     get host() { return 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`.
@@ -42,6 +24,11 @@ const PostRating$1 = /*@__PURE__*/ proxyCustomElement(class PostRating extends H
         this.__attachShadow();
         this.postInput = createEvent(this, "postInput", 7);
         this.postChange = 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);

package/loaders/post-tab-header.js

@@ -1,23 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { c as checkNonEmpty } from './p-b095519d.js';
-import { n as nanoid } from './p-5959f2bd.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkNonEmpty } from './check-non-empty.js';
+import { n as nanoid } from './index.browser.js';
 
 const postTabHeaderCss = ".tab-title[role=tab]{display:inline-block;cursor:pointer;position:relative;box-sizing:border-box;padding:1rem;transition:background-color 100ms;border-right:1px solid rgba(0,0,0,0);border-left:1px solid rgba(0,0,0,0);outline-color:currentColor;opacity:.7;color:#000;text-decoration:none;background-color:rgba(0,0,0,0)}.tab-title[role=tab]:focus{background-color:unset;color:#000}.tab-title[role=tab]:hover{opacity:1;background-color:rgba(0,0,0,.6);color:#fff}.tab-title[role=tab]:focus-visible{outline:rgba(0,0,0,0);opacity:1;background-color:rgba(0,0,0,.6);color:#fff;box-shadow:none}.tab-title[role=tab]:focus-visible::after{content:\"\";display:block;position:absolute;top:2px;right:1px;bottom:0;left:1px;box-shadow:0 0 0 1px #fff,0 0 0 2px #333}.tab-title[role=tab].active{z-index:1;border-right-color:#ccc;border-left-color:#ccc;opacity:1;background-color:#fff;color:#000;font-weight:700}.tab-title[role=tab].active::before{content:\"\";display:block;position:absolute;top:0;right:-1px;left:-1px;height:var(--post-core-dimension-4);background-color:#fc0}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:hover{background-color:rgba(255,255,255,.2)}:where(.bg-dark,.bg-black,.bg-primary,.bg-secondary,.bg-success,.bg-error) .tab-title[role=tab]:focus-visible{background-color:rgba(255,255,255,.2)}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tab-title[role=tab]{opacity:1;border-left-color:Canvas;border-right-color:Canvas;color:LinkText}.tab-title[role=tab]:hover,.tab-title[role=tab]:focus,.tab-title[role=tab]:focus-within,.tab-title[role=tab]:focus-visible{outline:var(--post-core-dimension-2) solid Highlight;outline-offset:calc(var(--post-core-dimension-4)*-1)}.tab-title[role=tab].active{border-left-color:ButtonText;border-right-color:ButtonText;color:Highlight}.tab-title[role=tab].active::before{background-color:Highlight}}/*!\n * Copyright 2021 by Swiss Post, Information Technology\n */:host{display:block}.tab-title{padding:0;overflow:visible;border:0;background:none;color:inherit;font:inherit;-webkit-user-select:none;user-select:none;appearance:button}";
 const PostTabHeaderStyle0 = postTabHeaderCss;
 
-const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends H {
+const PostTabHeader$1 = /*@__PURE__*/ proxyCustomElement(class PostTabHeader extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.tabId = undefined;
+        this.panel = undefined;
     }
     get host() { return this; }
-    tabId;
-    /**
-     * The name of the panel controlled by the tab header.
-     */
-    panel;
     validateFor(newValue) {
         checkNonEmpty(newValue, 'The "panel" prop is required for the post-tab-header.');
     }

package/loaders/post-tab-panel.js

@@ -1,22 +1,19 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { n as nanoid } from './p-5959f2bd.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { n as nanoid } from './index.browser.js';
 
 const postTabPanelCss = ":host{display:none}";
 const PostTabPanelStyle0 = postTabPanelCss;
 
-const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends H {
+const PostTabPanel$1 = /*@__PURE__*/ proxyCustomElement(class PostTabPanel extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.panelId = undefined;
+        this.name = undefined;
     }
     get host() { return this; }
-    panelId;
-    /**
-     * The name of the panel, used to associate it with a tab header.
-     */
-    name;
     componentWillLoad() {
         // get the id set on the host element or use a random id by default
         this.panelId = `panel-${this.host.id || nanoid(6)}`;

package/loaders/post-tabs.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, d as createEvent, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { f as fadeOut, a as fadeIn } from './p-64e3de38.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { f as fadeOut, a as fadeIn } from './fade.js';
 
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
@@ -26,12 +26,13 @@ function customOnReady(callback) {
 const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:rgba(0,0,0,.02)}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:#ccc}.tabs-wrapper .tabs{background-color:rgba(0,0,0,0) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap;margin-block:0;padding-inline-start:0;list-style:none}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem}:host{display:block}";
 const PostTabsStyle0 = postTabsCss;
 
-const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
+const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.postChange = createEvent(this, "postChange", 7);
+        this.activePanel = undefined;
     }
     activeTab;
     showing;
@@ -41,13 +42,6 @@ const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends H {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     get host() { return 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.

package/loaders/post-tag.js

@@ -1,31 +1,20 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { d as defineCustomElement$2 } from './p-f7177e26.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { d as defineCustomElement$2 } from './post-icon2.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$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends H {
+const PostTag$1 = /*@__PURE__*/ proxyCustomElement(class PostTag extends HTMLElement {
     get host() { return 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() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.classes = undefined;
+        this.variant = undefined;
+        this.size = null;
+        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {

package/loaders/post-togglebutton.js

@@ -1,21 +1,18 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
-import { v as version } from './p-2083ae2c.js';
-import { c as checkType } from './p-8562c7dc.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+import { c as checkType } from './check-type.js';
 
 const postTogglebuttonCss = ":host{cursor:pointer;outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}:host(:focus-visible){outline-style:var(--post-core-border-style-solid) !important}@media (forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){:host(:focus-visible){outline-color:Highlight !important}}:host([aria-pressed=true]) ::slotted([data-showwhen=untoggled]){display:none}:host([aria-pressed=false]) ::slotted([data-showwhen=toggled]){display:none}";
 const PostTogglebuttonStyle0 = postTogglebuttonCss;
 
-const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends H {
+const PostTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class PostTogglebutton extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.toggled = false;
     }
     get host() { return this; }
-    /**
-     * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
-     */
-    toggled = false;
     validateToggled(value = this.toggled) {
         checkType(value, 'boolean', 'The "toggled" property of the post-togglebutton must be a boolean.');
     }

package/loaders/post-tooltip.js

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, h, c as Host } from './p-3e8554e7.js';
-import { v as version$1 } from './p-2083ae2c.js';
-import { g as getAttributeObserver } from './p-9748a355.js';
-import { c as checkEmptyOrType } from './p-56ad4838.js';
-import { d as defineCustomElement$2 } from './p-60cf53cc.js';
+import { proxyCustomElement, HTMLElement as HTMLElement$1, h, Host } from '@stencil/core/internal/client';
+import { v as version$1 } from './package.js';
+import { g as getAttributeObserver } from './attribute-observer.js';
+import { c as checkEmptyOrType } from './index2.js';
+import { d as defineCustomElement$2 } from './post-popovercontainer2.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -4864,29 +4864,18 @@ const patchAccessibilityFeatures = (trigger) => {
 };
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
-const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends H {
+const PostTooltip$1 = /*@__PURE__*/ proxyCustomElement(class PostTooltip extends HTMLElement$1 {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.placement = 'top';
+        this.arrow = true;
+        this.delayed = false;
     }
     popoverRef;
     wasOpenedByFocus = false;
     get host() { return this; }
-    /**
-     * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
-     * towards the viewport if they would overlap edge boundaries.
-     */
-    placement = 'top';
-    /**
-     * Wheter or not to display a little pointer arrow
-     */
-    arrow = true;
-    /**
-     * If `true`, the tooltip is displayed a few milliseconds after it is triggered
-     */
-    delayed = false;
     validateDelayed() {
         checkEmptyOrType(this.delayed, 'boolean', 'The post-tooltip "delayed" property should be a boolean.');
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.14",
+  "version": "9.0.0-next.16",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -26,8 +26,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.13",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "9.0.0-next.14",
-    "@swisspost/design-system-styles": "9.0.0-next.14",
+    "@swisspost/design-system-icons": "9.0.0-next.16",
+    "@swisspost/design-system-styles": "9.0.0-next.16",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"
@@ -38,9 +38,9 @@
     "@percy/cli": "1.30.6",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.9.0",
-    "@stencil/angular-output-target": "0.10.2",
-    "@stencil/core": "4.25.1",
-    "@stencil/react-output-target": "0.8.2",
+    "@stencil/angular-output-target": "0.8.4",
+    "@stencil/core": "4.19.2",
+    "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.14",
     "@types/node": "22.10.5",

package/dist/components/p-2083ae2c.js

@@ -1,3 +0,0 @@
-const version = "9.0.0-next.14";
-
-export { version as v };