@swisspost/design-system-components 2.1.0 → 7.0.0

package/dist/types/components/post-card-control/post-card-control.d.ts

@@ -0,0 +1,109 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @class PostCardControl - representing a stencil component
+ *
+ * @slot default - Content to place into the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Block-level_contentt" target="_blank">block content</a>.<p className="alert alert-sm alert-warning">Even if it is generally possible, we do not recommend using interactive elements in this slot because the background of the card control is clickable.<br/>This can lead to confusion when the hit box of nested interactive controls is not clearly separated from the background, is invalid HTML and click events bubbling up to the card control will unexpectedly toggle it if they're not captured.<br/>More info: <a href="https://accessibilityinsights.io/info-examples/web/nested-interactive/">https://accessibilityinsights.io/info-examples/web/nested-interactive/</a></p>
+ * @slot icon - To insert a custom icon into the named `icon` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.<p className="alert alert-sm alert-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ */
+export declare class PostCardControl {
+    private readonly KEYCODES;
+    private group;
+    private control;
+    private controlId;
+    private initialChecked;
+    host: HTMLPostCardControlElement;
+    focused: boolean;
+    private internals;
+    /**
+     * Defines the text in the control-label.
+     */
+    readonly label: string;
+    /**
+     * Defines the description in the control-label.
+     */
+    readonly description: string;
+    /**
+     * Defines the `type` attribute of the control.
+     */
+    readonly type: 'checkbox' | 'radio';
+    /**
+     * Defines the `name` attribute of the control.
+     * <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span>
+     * <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+     */
+    readonly name: string;
+    /**
+     * Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+     */
+    readonly value: string;
+    /**
+     * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
+     */
+    checked: boolean;
+    /**
+     * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
+     */
+    disabled: boolean;
+    /**
+     * Defines the validation `validity` of the control.
+     * To reset validity to an undefiend state, simply remove the attribute from the control.
+     */
+    validity: null | 'true' | 'false';
+    /**
+     * Defines the icon `name` inside of the card.
+     * <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+     */
+    readonly icon: string;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     */
+    postInput: EventEmitter<{
+        state: boolean;
+        value: string;
+    }>;
+    /**
+     * An event emitted whenever the components checked state is toggled.
+     * The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+     * <span className="alert alert-sm alert-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+     */
+    postChange: EventEmitter<{
+        state: boolean;
+        value: string;
+    }>;
+    /**
+     * A public method to reset the controls `checked` and `validity` state.
+     * The validity state is set to `null`, so it's neither valid nor invalid.
+     */
+    reset(): Promise<void>;
+    /**
+     * A hidden public method to reset the group controls `checked` state to `false`.
+     */
+    groupReset(): Promise<void>;
+    validateControlLabel(label?: string): void;
+    validateControlType(type?: "checkbox" | "radio"): void;
+    updateControlChecked(checked?: boolean): void;
+    updateControlDisbled(): void;
+    constructor();
+    private cardClickHandler;
+    private controlClickHandler;
+    private controlChangeHandler;
+    private controlFocusHandler;
+    private controlKeyDownHandler;
+    private controlSetChecked;
+    private groupCollectMembers;
+    private groupGetPrev;
+    private groupGetNext;
+    private groupSetChecked;
+    private readonly HOST_CONTEXT_FILTERS;
+    private hostContext;
+    private setHostContext;
+    connectedCallback(): void;
+    render(): any;
+    componentDidRender(): void;
+    componentDidLoad(): void;
+    formAssociatedCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(checked: any): void;
+    formResetCallback(): void;
+}

package/dist/types/components/post-collapsible/post-collapsible.d.ts

@@ -18,7 +18,7 @@ export declare class PostCollapsible {
      *
      * The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
      */
-    collapseChange: EventEmitter<boolean>;
+    postToggle: EventEmitter<boolean>;
     connectedCallback(): void;
     componentWillRender(): void;
     componentDidLoad(): void;

package/dist/types/components/post-popovercontainer/post-popovercontainer.d.ts

@@ -20,7 +20,7 @@ export declare class PostPopovercontainer {
     /**
      * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
      */
-    postPopoverToggled: EventEmitter<boolean>;
+    postToggle: EventEmitter<boolean>;
     /**
      * 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

package/dist/types/components/post-rating/post-rating.d.ts

@@ -24,14 +24,14 @@ export declare class PostRating {
      * An event emitted whenever the component's value has changed (on input).
      * The event payload can be used like so: `event.detail.value`.
      */
-    input: EventEmitter<{
+    postInput: EventEmitter<{
         value: number;
     }>;
     /**
      * An event emitted whenever the component's value has changed (on blur).
      * The event payload can be used like so: `event.detail.value`.
      */
-    change: EventEmitter<{
+    postChange: EventEmitter<{
         value: number;
     }>;
     constructor();

package/dist/types/components/post-tabs/post-tabs.d.ts

@@ -21,7 +21,7 @@ export declare class PostTabs {
      * 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.
      */
-    tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;
+    postChange: EventEmitter<HTMLPostTabPanelElement['name']>;
     componentDidLoad(): void;
     /**
      * Shows the panel with the given name and selects its associated tab.

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

@@ -0,0 +1,27 @@
+/**
+ * @slot default - Content to place in the `default` slot.<p>Markup accepted: <a href="https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content" target="_blank">inline content</a>.</p>
+ */
+export declare class PostTag {
+    host: HTMLPostTagElement;
+    classes: string;
+    /**
+     * Defines the color variant of the component.
+     */
+    readonly variant: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+    /**
+     * Defines the size of the component.
+     */
+    readonly size: null | 'sm';
+    /**
+     * Defines the icon `name` inside of the component.
+     * <span className="alert alert-sm alert-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" target="_blank">icon library</a>.
+     */
+    readonly icon: null | string;
+    constructor();
+    variantChanged(): void;
+    sizeChanged(): void;
+    private setClasses;
+    connectedCallback(): void;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -70,6 +70,55 @@ export namespace Components {
          */
         "type": AlertType;
     }
+    /**
+     * @class PostCardControl - representing a stencil component
+     */
+    interface PostCardControl {
+        /**
+          * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
+         */
+        "checked": boolean;
+        /**
+          * Defines the description in the control-label.
+         */
+        "description": string;
+        /**
+          * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
+         */
+        "disabled": boolean;
+        /**
+          * A hidden public method to reset the group controls `checked` state to `false`.
+         */
+        "groupReset": () => Promise<void>;
+        /**
+          * Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+         */
+        "icon": string;
+        /**
+          * Defines the text in the control-label.
+         */
+        "label": string;
+        /**
+          * Defines the `name` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+         */
+        "name": string;
+        /**
+          * A public method to reset the controls `checked` and `validity` state. The validity state is set to `null`, so it's neither valid nor invalid.
+         */
+        "reset": () => Promise<void>;
+        /**
+          * Defines the `type` attribute of the control.
+         */
+        "type": 'checkbox' | 'radio';
+        /**
+          * Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
+         */
+        "validity": null | 'true' | 'false';
+        /**
+          * Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+         */
+        "value": string;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -207,6 +256,20 @@ export namespace Components {
          */
         "show": (panelName: string) => Promise<void>;
     }
+    interface PostTag {
+        /**
+          * Defines the icon `name` inside of the component. <span className="alert alert-sm alert-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" target="_blank">icon library</a>.
+         */
+        "icon": null | string;
+        /**
+          * Defines the size of the component.
+         */
+        "size": null | 'sm';
+        /**
+          * Defines the color variant of the component.
+         */
+        "variant": 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
+    }
     interface PostTooltip {
         /**
           * Wheter or not to display a little pointer arrow
@@ -237,6 +300,10 @@ export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostAlertElement;
 }
+export interface PostCardControlCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPostCardControlElement;
+}
 export interface PostCollapsibleCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPostCollapsibleElement;
@@ -267,7 +334,7 @@ declare global {
         new (): HTMLPostAccordionItemElement;
     };
     interface HTMLPostAlertElementEventMap {
-        "dismissed": void;
+        "postDismissed": void;
     }
     interface HTMLPostAlertElement extends Components.PostAlert, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostAlertElementEventMap>(type: K, listener: (this: HTMLPostAlertElement, ev: PostAlertCustomEvent<HTMLPostAlertElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -283,8 +350,29 @@ declare global {
         prototype: HTMLPostAlertElement;
         new (): HTMLPostAlertElement;
     };
+    interface HTMLPostCardControlElementEventMap {
+        "postInput": { state: boolean; value: string };
+        "postChange": { state: boolean; value: string };
+    }
+    /**
+     * @class PostCardControl - representing a stencil component
+     */
+    interface HTMLPostCardControlElement extends Components.PostCardControl, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPostCardControlElementEventMap>(type: K, listener: (this: HTMLPostCardControlElement, ev: PostCardControlCustomEvent<HTMLPostCardControlElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPostCardControlElementEventMap>(type: K, listener: (this: HTMLPostCardControlElement, ev: PostCardControlCustomEvent<HTMLPostCardControlElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPostCardControlElement: {
+        prototype: HTMLPostCardControlElement;
+        new (): HTMLPostCardControlElement;
+    };
     interface HTMLPostCollapsibleElementEventMap {
-        "collapseChange": boolean;
+        "postToggle": boolean;
     }
     interface HTMLPostCollapsibleElement extends Components.PostCollapsible, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostCollapsibleElementEventMap>(type: K, listener: (this: HTMLPostCollapsibleElement, ev: PostCollapsibleCustomEvent<HTMLPostCollapsibleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -316,7 +404,7 @@ declare global {
         new (): HTMLPostPopoverElement;
     };
     interface HTMLPostPopovercontainerElementEventMap {
-        "postPopoverToggled": boolean;
+        "postToggle": boolean;
     }
     interface HTMLPostPopovercontainerElement extends Components.PostPopovercontainer, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostPopovercontainerElementEventMap>(type: K, listener: (this: HTMLPostPopovercontainerElement, ev: PostPopovercontainerCustomEvent<HTMLPostPopovercontainerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -333,8 +421,8 @@ declare global {
         new (): HTMLPostPopovercontainerElement;
     };
     interface HTMLPostRatingElementEventMap {
-        "input": { value: number };
-        "change": { value: number };
+        "postInput": { value: number };
+        "postChange": { value: number };
     }
     interface HTMLPostRatingElement extends Components.PostRating, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostRatingElementEventMap>(type: K, listener: (this: HTMLPostRatingElement, ev: PostRatingCustomEvent<HTMLPostRatingElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -363,7 +451,7 @@ declare global {
         new (): HTMLPostTabPanelElement;
     };
     interface HTMLPostTabsElementEventMap {
-        "tabChange": HTMLPostTabPanelElement['name'];
+        "postChange": HTMLPostTabPanelElement['name'];
     }
     interface HTMLPostTabsElement extends Components.PostTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPostTabsElementEventMap>(type: K, listener: (this: HTMLPostTabsElement, ev: PostTabsCustomEvent<HTMLPostTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -379,6 +467,12 @@ declare global {
         prototype: HTMLPostTabsElement;
         new (): HTMLPostTabsElement;
     };
+    interface HTMLPostTagElement extends Components.PostTag, HTMLStencilElement {
+    }
+    var HTMLPostTagElement: {
+        prototype: HTMLPostTagElement;
+        new (): HTMLPostTagElement;
+    };
     interface HTMLPostTooltipElement extends Components.PostTooltip, HTMLStencilElement {
     }
     var HTMLPostTooltipElement: {
@@ -389,6 +483,7 @@ declare global {
         "post-accordion": HTMLPostAccordionElement;
         "post-accordion-item": HTMLPostAccordionItemElement;
         "post-alert": HTMLPostAlertElement;
+        "post-card-control": HTMLPostCardControlElement;
         "post-collapsible": HTMLPostCollapsibleElement;
         "post-icon": HTMLPostIconElement;
         "post-popover": HTMLPostPopoverElement;
@@ -397,6 +492,7 @@ declare global {
         "post-tab-header": HTMLPostTabHeaderElement;
         "post-tab-panel": HTMLPostTabPanelElement;
         "post-tabs": HTMLPostTabsElement;
+        "post-tag": HTMLPostTagElement;
         "post-tooltip": HTMLPostTooltipElement;
     }
 }
@@ -437,12 +533,61 @@ declare namespace LocalJSX {
         /**
           * An event emitted when the alert element is dismissed, after the transition. It has no payload and only relevant for dismissible alerts.
          */
-        "onDismissed"?: (event: PostAlertCustomEvent<void>) => void;
+        "onPostDismissed"?: (event: PostAlertCustomEvent<void>) => void;
         /**
           * The type of the alert.
          */
         "type"?: AlertType;
     }
+    /**
+     * @class PostCardControl - representing a stencil component
+     */
+    interface PostCardControl {
+        /**
+          * Defines the `checked` attribute of the control. If `true`, the control is selected at its value will be included in the forms data.
+         */
+        "checked"?: boolean;
+        /**
+          * Defines the description in the control-label.
+         */
+        "description"?: string;
+        /**
+          * Defines the `disabled` attribute of the control. If `true`, the user can not interact with the control and the controls value will not be included in the forms data.
+         */
+        "disabled"?: boolean;
+        /**
+          * Defines the icon `name` inside of the card. <span className="alert alert-sm alert-info">If not set the icon will not show up.</span>
+         */
+        "icon"?: string;
+        /**
+          * Defines the text in the control-label.
+         */
+        "label": string;
+        /**
+          * Defines the `name` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control should participate in a native `form`. If not specified, a native `form` will never contain this controls value.</span> <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+         */
+        "name"?: string;
+        /**
+          * An event emitted whenever the components checked state is toggled. The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked. <span className="alert alert-sm alert-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+         */
+        "onPostChange"?: (event: PostCardControlCustomEvent<{ state: boolean; value: string }>) => void;
+        /**
+          * An event emitted whenever the components checked state is toggled. The event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.
+         */
+        "onPostInput"?: (event: PostCardControlCustomEvent<{ state: boolean; value: string }>) => void;
+        /**
+          * Defines the `type` attribute of the control.
+         */
+        "type": 'checkbox' | 'radio';
+        /**
+          * Defines the validation `validity` of the control. To reset validity to an undefiend state, simply remove the attribute from the control.
+         */
+        "validity"?: null | 'true' | 'false';
+        /**
+          * Defines the `value` attribute of the control. <span className="alert alert-sm alert-info">This is a required property, when the control is used with type `radio`.</span>
+         */
+        "value"?: string;
+    }
     interface PostCollapsible {
         /**
           * If `true`, the element is initially collapsed otherwise it is displayed.
@@ -451,7 +596,7 @@ declare namespace LocalJSX {
         /**
           * An event emitted when the collapse element is shown or hidden, before the transition.  The event payload is a boolean: `true` if the collapsible was opened, `false` if it was closed.
          */
-        "onCollapseChange"?: (event: PostCollapsibleCustomEvent<boolean>) => void;
+        "onPostToggle"?: (event: PostCollapsibleCustomEvent<boolean>) => void;
     }
     /**
      * @class PostIcon - representing a stencil component
@@ -508,7 +653,7 @@ declare namespace LocalJSX {
         /**
           * Fires whenever the popover gets shown or hidden, passing the new state in event.details as a boolean
          */
-        "onPostPopoverToggled"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
+        "onPostToggle"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
         /**
           * 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.
          */
@@ -526,11 +671,11 @@ declare namespace LocalJSX {
         /**
           * An event emitted whenever the component's value has changed (on blur). The event payload can be used like so: `event.detail.value`.
          */
-        "onChange"?: (event: PostRatingCustomEvent<{ value: number }>) => void;
+        "onPostChange"?: (event: PostRatingCustomEvent<{ value: number }>) => void;
         /**
           * An event emitted whenever the component's value has changed (on input). The event payload can be used like so: `event.detail.value`.
          */
-        "onInput"?: (event: PostRatingCustomEvent<{ value: number }>) => void;
+        "onPostInput"?: (event: PostRatingCustomEvent<{ value: number }>) => void;
         /**
           * Defines if the component is readonly or not. This usually should be used together with the `currentRating` property.
          */
@@ -560,7 +705,21 @@ declare namespace LocalJSX {
         /**
           * 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.
          */
-        "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
+        "onPostChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
+    }
+    interface PostTag {
+        /**
+          * Defines the icon `name` inside of the component. <span className="alert alert-sm alert-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" target="_blank">icon library</a>.
+         */
+        "icon"?: null | string;
+        /**
+          * Defines the size of the component.
+         */
+        "size"?: null | 'sm';
+        /**
+          * Defines the color variant of the component.
+         */
+        "variant"?: 'white' | 'info' | 'success' | 'error' | 'warning' | 'yellow';
     }
     interface PostTooltip {
         /**
@@ -576,6 +735,7 @@ declare namespace LocalJSX {
         "post-accordion": PostAccordion;
         "post-accordion-item": PostAccordionItem;
         "post-alert": PostAlert;
+        "post-card-control": PostCardControl;
         "post-collapsible": PostCollapsible;
         "post-icon": PostIcon;
         "post-popover": PostPopover;
@@ -584,6 +744,7 @@ declare namespace LocalJSX {
         "post-tab-header": PostTabHeader;
         "post-tab-panel": PostTabPanel;
         "post-tabs": PostTabs;
+        "post-tag": PostTag;
         "post-tooltip": PostTooltip;
     }
 }
@@ -594,6 +755,10 @@ declare module "@stencil/core" {
             "post-accordion": LocalJSX.PostAccordion & JSXBase.HTMLAttributes<HTMLPostAccordionElement>;
             "post-accordion-item": LocalJSX.PostAccordionItem & JSXBase.HTMLAttributes<HTMLPostAccordionItemElement>;
             "post-alert": LocalJSX.PostAlert & JSXBase.HTMLAttributes<HTMLPostAlertElement>;
+            /**
+             * @class PostCardControl - representing a stencil component
+             */
+            "post-card-control": LocalJSX.PostCardControl & JSXBase.HTMLAttributes<HTMLPostCardControlElement>;
             "post-collapsible": LocalJSX.PostCollapsible & JSXBase.HTMLAttributes<HTMLPostCollapsibleElement>;
             /**
              * @class PostIcon - representing a stencil component
@@ -605,6 +770,7 @@ declare module "@stencil/core" {
             "post-tab-header": LocalJSX.PostTabHeader & JSXBase.HTMLAttributes<HTMLPostTabHeaderElement>;
             "post-tab-panel": LocalJSX.PostTabPanel & JSXBase.HTMLAttributes<HTMLPostTabPanelElement>;
             "post-tabs": LocalJSX.PostTabs & JSXBase.HTMLAttributes<HTMLPostTabsElement>;
+            "post-tag": LocalJSX.PostTag & JSXBase.HTMLAttributes<HTMLPostTagElement>;
             "post-tooltip": LocalJSX.PostTooltip & JSXBase.HTMLAttributes<HTMLPostTooltipElement>;
         }
     }

package/dist/types/home/runner/work/design-system/design-system/packages/components/.stencil/types/css-modules.d.ts

@@ -0,0 +1,6 @@
+declare module '*.scss' {
+    const content: {
+        [key: string]: string;
+    };
+    export default content;
+}

package/dist/types/index.d.ts

@@ -2,6 +2,7 @@ export { Components, JSX } from './components';
 export { PostAccordion } from './components/post-accordion/post-accordion';
 export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
 export { PostAlert } from './components/post-alert/post-alert';
+export { PostCardControl } from './components/post-card-control/post-card-control';
 export { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';
 export { PostPopover } from './components/post-popover/post-popover';
@@ -11,3 +12,4 @@ export { PostTabs } from './components/post-tabs/post-tabs';
 export { PostTabHeader } from './components/post-tab-header/post-tab-header';
 export { PostTabPanel } from './components/post-tab-panel/post-tab-panel';
 export { PostTooltip } from './components/post-tooltip/post-tooltip';
+export { PostTag } from './components/post-tag/post-tag';

package/dist/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './property-checkers';
 export * from './is-motion-reduced';
+export * from './sass-export';

package/dist/types/utils/sass-export.d.ts

@@ -0,0 +1,2 @@
+export declare function parse(scss: object): {};
+export declare function formatAsMap(obj: object): string;

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "2.1.0",
+  "version": "7.0.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
-  "main": "loader/index.cjs.js",
-  "module": "loader/index.js",
-  "es2017": "loader/index.2017.js",
-  "types": "loader/index.d.ts",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
   "unpkg": "dist/post-components/post-components.esm.js",
@@ -24,34 +23,35 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@floating-ui/dom": "1.6.1",
+    "@floating-ui/dom": "1.6.3",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "6.6.4",
+    "@swisspost/design-system-styles": "7.0.0",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },
   "devDependencies": {
-    "@percy/cli": "1.27.7",
+    "@percy/cli": "1.28.2",
     "@percy/cypress": "3.1.2",
-    "@stencil-community/eslint-plugin": "0.7.1",
+    "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.12.0",
+    "@stencil/core": "4.14.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.9",
+    "@stencil/sass": "3.0.11",
     "@types/jest": "29.5.12",
     "@types/node": "20.11.16",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
     "bootstrap": "5.3.2",
-    "cypress": "13.6.4",
+    "cypress": "13.7.2",
     "cypress-axe": "1.5.0",
     "cypress-storybook": "0.5.1",
-    "eslint": "8.56.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint": "8.57.0",
+    "eslint-plugin-react": "7.34.1",
     "rimraf": "5.0.5",
-    "sass": "1.70.0",
+    "rollup-plugin-postcss": "4.0.2",
+    "sass": "1.74.1",
     "ts-jest": "29.1.2",
-    "typescript": "4.9.5"
+    "typescript": "5.3.3"
   },
   "keywords": [
     "components",
@@ -62,7 +62,7 @@
     "frontend"
   ],
   "scripts": {
-    "dev": "stencil build --serve --port 9200 --watch --docs-readme",
+    "dev": "stencil build --port 9200 --serve --watch --docs-readme",
     "start": "stencil build --watch --docs-readme",
     "build": "stencil build --docs-readme",
     "clean": "rimraf www dist loader",