@swisspost/design-system-components 9.0.0-next.15 → 9.0.0-next.17

package/dist/collection/components/post-popover/post-popover.js

@@ -25,22 +25,10 @@ export class PostPopover {
     popoverRef;
     localBeforeToggleHandler;
     host;
-    /**
-     * Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
-     * Popoverss 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';
-    /**
-     * Define the caption of the close button for assistive technology
-     */
-    closeButtonCaption;
-    /**
-     * Show a little indicator arrow
-     */
-    // eslint-disable-next-line @stencil-community/ban-default-true
-    arrow = true;
     constructor() {
+        this.placement = 'top';
+        this.closeButtonCaption = undefined;
+        this.arrow = true;
         this.localBeforeToggleHandler = this.beforeToggleHandler.bind(this);
     }
     connectedCallback() {
@@ -139,8 +127,6 @@ export class PostPopover {
                     "tags": [],
                     "text": "Defines the placement of the popover according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nPopoverss are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -159,8 +145,6 @@ export class PostPopover {
                     "tags": [],
                     "text": "Define the caption of the close button for assistive technology"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "close-button-caption",
                 "reflect": false
             },
@@ -178,8 +162,6 @@ export class PostPopover {
                     "tags": [],
                     "text": "Show a little indicator arrow"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "true"

package/dist/collection/components/post-popovercontainer/post-popovercontainer.js

@@ -13,6 +13,12 @@ const SIDE_MAP = {
  * @slot - Default slot for placing content inside the popovercontainer.
  */
 export class PostPopovercontainer {
+    constructor() {
+        this.manualClose = false;
+        this.placement = 'top';
+        this.edgeGap = 8;
+        this.arrow = false;
+    }
     host;
     arrowRef;
     eventTarget;
@@ -22,24 +28,6 @@ export class PostPopovercontainer {
      * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
      */
     postToggle;
-    /**
-     * Whether or not the popover should close when user clicks outside of it
-     */
-    manualClose = false;
-    /**
-     * 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';
-    /**
-     * Gap between the edge of the page and the popover
-     */
-    edgeGap = 8;
-    /**
-     * Wheter or not to display a little pointer arrow
-     */
-    arrow = false;
     componentDidLoad() {
         this.host.addEventListener('beforetoggle', this.handleToggle.bind(this));
     }
@@ -189,8 +177,6 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Whether or not the popover should close when user clicks outside of it"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "manual-close",
                 "reflect": false,
                 "defaultValue": "false"
@@ -215,8 +201,6 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -235,8 +219,6 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Gap between the edge of the page and the popover"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "edge-gap",
                 "reflect": false,
                 "defaultValue": "8"
@@ -255,8 +237,6 @@ export class PostPopovercontainer {
                     "tags": [],
                     "text": "Wheter or not to display a little pointer arrow"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/post-rating/post-rating.js

@@ -3,24 +3,6 @@ import { version } from "../../../../package";
 export class PostRating {
     hasChanged = false;
     host;
-    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`.
@@ -32,6 +14,11 @@ export class PostRating {
      */
     postChange;
     constructor() {
+        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);
@@ -124,8 +111,6 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines a hidden label for the component."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "'Rating'"
@@ -144,8 +129,6 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the total amount of stars rendered in the component."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "stars",
                 "reflect": false,
                 "defaultValue": "5"
@@ -164,8 +147,6 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines the rating that the component should show."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "current-rating",
                 "reflect": false,
                 "defaultValue": "0"
@@ -184,8 +165,6 @@ export class PostRating {
                     "tags": [],
                     "text": "Defines if the component is readonly or not.\nThis usually should be used together with the `currentRating` property."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "readonly",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/post-tab-header/post-tab-header.js

@@ -6,12 +6,11 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for the content of the tab header.
  */
 export class PostTabHeader {
+    constructor() {
+        this.tabId = undefined;
+        this.panel = undefined;
+    }
     host;
-    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.');
     }
@@ -54,8 +53,6 @@ export class PostTabHeader {
                     "tags": [],
                     "text": "The name of the panel controlled by the tab header."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "panel",
                 "reflect": false
             }

package/dist/collection/components/post-tab-panel/post-tab-panel.js

@@ -5,12 +5,11 @@ import { nanoid } from "nanoid";
  * @slot default - Slot for placing the content of the tab panel.
  */
 export class PostTabPanel {
+    constructor() {
+        this.panelId = undefined;
+        this.name = undefined;
+    }
     host;
-    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)}`;
@@ -46,8 +45,6 @@ export class PostTabPanel {
                     "tags": [],
                     "text": "The name of the panel, used to associate it with a tab header."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "name",
                 "reflect": false
             }

package/dist/collection/components/post-tabs/post-tabs.js

@@ -9,6 +9,9 @@ import { componentOnReady } from "../../utils/index";
  * @part content - Add custom styles for the tab panel container.
  */
 export class PostTabs {
+    constructor() {
+        this.activePanel = undefined;
+    }
     activeTab;
     showing;
     hiding;
@@ -17,13 +20,6 @@ export class PostTabs {
         return Array.from(this.host.querySelectorAll('post-tab-header')).filter(tab => tab.closest('post-tabs') === this.host);
     }
     host;
-    /**
-     * 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.
@@ -189,8 +185,6 @@ export class PostTabs {
                     "tags": [],
                     "text": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "active-panel",
                 "reflect": false
             }

package/dist/collection/components/post-tag/post-tag.js

@@ -5,22 +5,11 @@ import { version } from "../../../../package";
  */
 export class PostTag {
     host;
-    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() {
+        this.classes = undefined;
+        this.variant = undefined;
+        this.size = null;
+        this.icon = null;
         this.setClasses = this.setClasses.bind(this);
     }
     variantChanged() {
@@ -72,8 +61,6 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the color variant of the component."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "variant",
                 "reflect": false
             },
@@ -91,8 +78,6 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the size of the component."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "null"
@@ -111,8 +96,6 @@ export class PostTag {
                     "tags": [],
                     "text": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "null"

package/dist/collection/components/post-togglebutton/post-togglebutton.js

@@ -5,11 +5,10 @@ import { checkType } from "../../utils/index";
  * @slot default - Slot for the content of the button.
  */
 export class PostTogglebutton {
+    constructor() {
+        this.toggled = false;
+    }
     host;
-    /**
-     * 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.');
     }
@@ -60,8 +59,6 @@ export class PostTogglebutton {
                     "tags": [],
                     "text": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "toggled",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/components/post-tooltip/post-tooltip.js

@@ -93,23 +93,14 @@ const patchAccessibilityFeatures = (trigger) => {
 // Initialize a mutation observer for patching accessibility features
 const triggerObserver = getAttributeObserver(tooltipTargetAttribute, patchAccessibilityFeatures);
 export class PostTooltip {
+    constructor() {
+        this.placement = 'top';
+        this.arrow = true;
+        this.delayed = false;
+    }
     popoverRef;
     wasOpenedByFocus = false;
     host;
-    /**
-     * 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.');
     }
@@ -261,8 +252,6 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.\nTooltips are automatically flipped to the opposite side if there is not enough available space and are shifted\ntowards the viewport if they would overlap edge boundaries."
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "placement",
                 "reflect": false,
                 "defaultValue": "'top'"
@@ -281,8 +270,6 @@ export class PostTooltip {
                     "tags": [],
                     "text": "Wheter or not to display a little pointer arrow"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "arrow",
                 "reflect": false,
                 "defaultValue": "true"
@@ -301,8 +288,6 @@ export class PostTooltip {
                     "tags": [],
                     "text": "If `true`, the tooltip is displayed a few milliseconds after it is triggered"
                 },
-                "getter": false,
-                "setter": false,
                 "attribute": "delayed",
                 "reflect": false,
                 "defaultValue": "false"

package/dist/collection/utils/get-focusable-children.js

@@ -21,7 +21,13 @@ const focusDisablingSelector = `:where(${[
     'details:not([open]) > *:not(details > summary:first-of-type)',
     'details:not([open]) > *:not(details > summary:first-of-type) *',
     '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
 ].join(',')})`;
 export function getFocusableChildren(element) {
-    return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
 }

package/dist/collection/utils/property-checkers/check-url.js

@@ -3,9 +3,9 @@ export function checkUrl(value, error) {
         throw new Error(error);
     }
     try {
-        new URL(value);
+        new URL(value, window.location.href);
     }
-    catch (e) {
+    catch {
         throw new Error(error);
     }
 }

package/{loaders/p-b095519d.js → dist/components/check-non-empty.js}

@@ -1,4 +1,4 @@
-import { E as EMPTY_VALUES } from './p-440193f4.js';
+import { E as EMPTY_VALUES } from './constants.js';
 
 function checkNonEmpty(value, error) {
     if (EMPTY_VALUES.some(v => v === value)) {

package/{loaders/p-3aba7629.js → dist/components/get-focusable-children.js}

@@ -21,9 +21,15 @@ const focusDisablingSelector = `:where(${[
     'details:not([open]) > *:not(details > summary:first-of-type)',
     'details:not([open]) > *:not(details > summary:first-of-type) *',
     '[tabindex^="-"]',
+    '[hidden]:not([hidden="false"])',
 ].join(',')})`;
 function getFocusableChildren(element) {
-    return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
+    const focusableChildren = element.querySelectorAll(`${focusableSelector}:not(${focusDisablingSelector})`);
+    const visibleFocusableChildren = Array.from(focusableChildren).filter(child => {
+        const style = window.getComputedStyle(child.parentElement);
+        return style.display !== 'none' && style.visibility !== 'hidden';
+    });
+    return visibleFocusableChildren;
 }
 
 export { getFocusableChildren as g };

package/dist/components/index.js

@@ -1,36 +1,36 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-3e8554e7.js';
-export { P as PostAccordion } from './p-cf4cb17f.js';
-export { P as PostAccordionItem } from './p-f60c925d.js';
-export { P as PostAvatar } from './p-4f60823b.js';
-export { P as PostBackToTop } from './p-8b750ccb.js';
-export { P as PostBanner } from './p-f566dbe4.js';
-export { P as PostBreadcrumb } from './p-23b12eda.js';
-export { P as PostBreadcrumbItem } from './p-80478535.js';
-export { P as PostCardControl } from './p-6d591e1c.js';
-export { P as PostClosebutton } from './p-f5433ff7.js';
-export { P as PostCollapsible } from './p-10c1a15a.js';
-export { P as PostCollapsibleTrigger } from './p-5366ff92.js';
-export { P as PostFooter } from './p-d428a69c.js';
-export { P as PostHeader } from './p-54e097c7.js';
-export { P as PostIcon } from './p-fcec301c.js';
-export { P as PostLanguageOption } from './p-a07e1562.js';
-export { P as PostLanguageSwitch } from './p-61419ecc.js';
-export { P as PostLinkarea } from './p-9a726750.js';
-export { P as PostList } from './p-a3711af3.js';
-export { P as PostListItem } from './p-9e4b1f10.js';
-export { P as PostLogo } from './p-70e8b74f.js';
-export { P as PostMainnavigation } from './p-2e509a60.js';
-export { P as PostMegadropdown } from './p-46a6c5ec.js';
-export { P as PostMegadropdownTrigger } from './p-4b60e5f8.js';
-export { P as PostMenu } from './p-7202d5d4.js';
-export { P as PostMenuItem } from './p-4bbdde2b.js';
-export { P as PostMenuTrigger } from './p-15877641.js';
-export { P as PostPopover } from './p-621f6dce.js';
-export { P as PostPopovercontainer } from './p-f59c8544.js';
-export { P as PostRating } from './p-d343757a.js';
-export { P as PostTabs } from './p-efc1bc9c.js';
-export { P as PostTabHeader } from './p-32b7a0a8.js';
-export { P as PostTabPanel } from './p-db9fa77d.js';
-export { P as PostTag } from './p-e482b539.js';
-export { P as PostTogglebutton } from './p-3385af29.js';
-export { P as PostTooltip } from './p-477784a7.js';
+export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
+export { P as PostAccordion } from './post-accordion2.js';
+export { P as PostAccordionItem } from './post-accordion-item2.js';
+export { P as PostAvatar } from './post-avatar2.js';
+export { P as PostBackToTop } from './post-back-to-top2.js';
+export { P as PostBanner } from './post-banner2.js';
+export { P as PostBreadcrumb } from './post-breadcrumb2.js';
+export { P as PostBreadcrumbItem } from './post-breadcrumb-item2.js';
+export { P as PostCardControl } from './post-card-control2.js';
+export { P as PostClosebutton } from './post-closebutton2.js';
+export { P as PostCollapsible } from './post-collapsible2.js';
+export { P as PostCollapsibleTrigger } from './post-collapsible-trigger2.js';
+export { P as PostFooter } from './post-footer2.js';
+export { P as PostHeader } from './post-header2.js';
+export { P as PostIcon } from './post-icon2.js';
+export { P as PostLanguageOption } from './post-language-option2.js';
+export { P as PostLanguageSwitch } from './post-language-switch2.js';
+export { P as PostLinkarea } from './post-linkarea2.js';
+export { P as PostList } from './post-list2.js';
+export { P as PostListItem } from './post-list-item2.js';
+export { P as PostLogo } from './post-logo2.js';
+export { P as PostMainnavigation } from './post-mainnavigation2.js';
+export { P as PostMegadropdown } from './post-megadropdown2.js';
+export { P as PostMegadropdownTrigger } from './post-megadropdown-trigger2.js';
+export { P as PostMenu } from './post-menu2.js';
+export { P as PostMenuItem } from './post-menu-item2.js';
+export { P as PostMenuTrigger } from './post-menu-trigger2.js';
+export { P as PostPopover } from './post-popover2.js';
+export { P as PostPopovercontainer } from './post-popovercontainer2.js';
+export { P as PostRating } from './post-rating2.js';
+export { P as PostTabs } from './post-tabs2.js';
+export { P as PostTabHeader } from './post-tab-header2.js';
+export { P as PostTabPanel } from './post-tab-panel2.js';
+export { P as PostTag } from './post-tag2.js';
+export { P as PostTogglebutton } from './post-togglebutton2.js';
+export { P as PostTooltip } from './post-tooltip2.js';

package/dist/components/{p-eabb09ad.js → index2.js}

@@ -1,6 +1,6 @@
-import { E as EMPTY_VALUES } from './p-440193f4.js';
-import { c as checkOneOf } from './p-bacd3e2c.js';
-import { c as checkType } from './p-8562c7dc.js';
+import { E as EMPTY_VALUES } from './constants.js';
+import { c as checkOneOf } from './check-one-of.js';
+import { c as checkType } from './check-type.js';
 
 function emptyOr(check) {
     return (...args) => {
@@ -22,9 +22,9 @@ function checkUrl(value, error) {
         throw new Error(error);
     }
     try {
-        new URL(value);
+        new URL(value, window.location.href);
     }
-    catch (e) {
+    catch {
         throw new Error(error);
     }
 }

package/dist/components/package.js

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

package/dist/components/post-accordion-item.js

@@ -1,4 +1,4 @@
-import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './p-f60c925d.js';
+import { P as PostAccordionItem$1, d as defineCustomElement$1 } from './post-accordion-item2.js';
 
 const PostAccordionItem = PostAccordionItem$1;
 const defineCustomElement = defineCustomElement$1;