@swisspost/design-system-components 10.0.0-next.46 → 10.0.0-next.48

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

@@ -3,24 +3,13 @@ import { BannerType } from './banner-types';
 /**
  * @slot heading - Slot for placing custom content within the banner's heading.
  * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the banner.
+ * @slot close-button - Slot for placing a `post-closebutton` component to make the banner dismissible.
  * @slot default - Slot for placing the main content/message of the banner.
  */
 export declare class PostBanner {
+    private mutationObserver;
     host: HTMLPostBannerElement;
-    bannerId: string;
-    classes: string;
     hasActions: boolean;
-    hasHeading: boolean;
-    onDismissButtonClick: () => Promise<void>;
-    /**
-     * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-     */
-    readonly dismissible: boolean;
-    checkDismissible(): void;
-    /**
-     * The label to use for the close button of a dismissible banner.
-     */
-    readonly dismissLabel?: string;
     /**
      * The type of the banner.
      */
@@ -31,11 +20,14 @@ export declare class PostBanner {
      * It has no payload and only relevant for dismissible banners.
      */
     postDismissed: EventEmitter<void>;
+    connectedCallback(): void;
     componentDidLoad(): void;
-    componentWillRender(): void;
+    disconnectedCallback(): void;
     /**
      * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
      */
     dismiss(): Promise<void>;
+    onCloseButtonClick(): void;
+    private checkContent;
     render(): any;
 }

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

@@ -2,8 +2,8 @@ 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">block content</a>.<p className="banner banner-sm banner-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">inline content</a>.<p className="banner banner-sm banner-info">It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p>
+ * @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">block content</a>.<post-banner type="warning" data-size="sm"><p>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></post-banner>
+ * @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">inline content</a>.<post-banner data-size="sm"><p>It is only meant for <code>img</code> or <code>svg</code> elements and overrides the `icon` property.</p></post-banner>
  */
 export declare class PostCardControl {
     private readonly EVENT_MAP;
@@ -30,12 +30,12 @@ export declare class PostCardControl {
     readonly type: 'checkbox' | 'radio';
     /**
      * Defines the `name` attribute of the control.
-     * <span className="mb-4 banner banner-sm banner-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="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+     * <post-banner data-size="sm"><p>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.</p></post-banner>
+     * <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
      */
     readonly name?: string;
     /**
-     * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+     * Defines the `value` attribute of the control. <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
      */
     readonly value?: string;
     /**
@@ -53,7 +53,7 @@ export declare class PostCardControl {
     validity?: boolean;
     /**
      * Defines the icon `name` inside the card.
-     * <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+     * <post-banner data-size="sm"><p>If not set the icon will not show up.</p></post-banner>
      */
     readonly icon?: string;
     /**
@@ -67,7 +67,7 @@ export declare class PostCardControl {
     /**
      * 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="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+     * <post-banner data-size="sm"><p>If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</p></post-banner>
      */
     postChange: EventEmitter<{
         state: boolean;

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

@@ -3,5 +3,7 @@
  */
 export declare class PostClosebutton {
     host: HTMLPostClosebuttonElement;
+    componentDidLoad(): void;
+    private checkHiddenLabel;
     render(): any;
 }

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

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { Placement } from '@floating-ui/dom';
+/**
+ * @part menu - The container element that holds the list of menu items.
+*/
 export declare class PostMenu {
     private popoverRef;
     private lastFocusedElement;

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

@@ -2,8 +2,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * @slot tabs - Slot for placing tab headers. Each tab header should be a <post-tab-header> element.
  * @slot default - Slot for placing tab panels. Each tab panel should be a <post-tab-panel> element.
- * @part tabs - Add custom styles for the tab header container.
- * @part content - Add custom styles for the tab panel container.
+ * @part tabs - The container element that holds the set of tabs.
+ * @part content - The container element that displays the content of the currently active tab.
  */
 export declare class PostTabs {
     private activeTab;

package/dist/types/components.d.ts

@@ -67,7 +67,7 @@ export namespace Components {
          */
         "lastname"?: string;
         /**
-          * Defines the company internal userId.<div className="mb-4 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+          * Defines the company internal userId.<post-banner type="warning" data-size="sm"><p>Can only be used on post.ch domains!</p></post-banner>
          */
         "userid"?: string;
     }
@@ -82,15 +82,6 @@ export namespace Components {
           * Triggers banner dismissal programmatically (same as clicking on the close button (×)).
          */
         "dismiss": () => Promise<void>;
-        /**
-          * The label to use for the close button of a dismissible banner.
-         */
-        "dismissLabel"?: string;
-        /**
-          * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-          * @default false
-         */
-        "dismissible": boolean;
         /**
           * The type of the banner.
           * @default 'info'
@@ -137,7 +128,7 @@ export namespace Components {
          */
         "groupReset": () => Promise<void>;
         /**
-          * Defines the icon `name` inside the card. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+          * Defines the icon `name` inside the card. <post-banner data-size="sm"><p>If not set the icon will not show up.</p></post-banner>
          */
         "icon"?: string;
         /**
@@ -145,7 +136,7 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Defines the `name` attribute of the control. <span className="mb-4 banner banner-sm banner-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="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `name` attribute of the control. <post-banner data-size="sm"><p>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.</p></post-banner> <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
          */
         "name"?: string;
         /**
@@ -161,7 +152,7 @@ export namespace Components {
          */
         "validity"?: boolean;
         /**
-          * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `value` attribute of the control. <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
          */
         "value"?: string;
     }
@@ -964,7 +955,7 @@ declare namespace LocalJSX {
          */
         "lastname"?: string;
         /**
-          * Defines the company internal userId.<div className="mb-4 banner banner-warning banner-sm">Can only be used on post.ch domains!</div>
+          * Defines the company internal userId.<post-banner type="warning" data-size="sm"><p>Can only be used on post.ch domains!</p></post-banner>
          */
         "userid"?: string;
     }
@@ -975,15 +966,6 @@ declare namespace LocalJSX {
         "label": string;
     }
     interface PostBanner {
-        /**
-          * The label to use for the close button of a dismissible banner.
-         */
-        "dismissLabel"?: string;
-        /**
-          * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
-          * @default false
-         */
-        "dismissible"?: boolean;
         /**
           * An event emitted when the banner element is dismissed, after the transition. It has no payload and only relevant for dismissible banners.
          */
@@ -1030,7 +1012,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Defines the icon `name` inside the card. <span className="banner banner-sm banner-info">If not set the icon will not show up.</span>
+          * Defines the icon `name` inside the card. <post-banner data-size="sm"><p>If not set the icon will not show up.</p></post-banner>
          */
         "icon"?: string;
         /**
@@ -1038,11 +1020,11 @@ declare namespace LocalJSX {
          */
         "label": string;
         /**
-          * Defines the `name` attribute of the control. <span className="mb-4 banner banner-sm banner-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="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `name` attribute of the control. <post-banner data-size="sm"><p>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.</p></post-banner> <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
          */
         "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="banner banner-sm banner-info">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>
+          * 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. <post-banner data-size="sm"><p>If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</p></post-banner>
          */
         "onPostChange"?: (event: PostCardControlCustomEvent<{ state: boolean; value: string }>) => void;
         /**
@@ -1058,7 +1040,7 @@ declare namespace LocalJSX {
          */
         "validity"?: boolean;
         /**
-          * Defines the `value` attribute of the control. <span className="banner banner-sm banner-info">This is a required property, when the control is used with type `radio`.</span>
+          * Defines the `value` attribute of the control. <post-banner data-size="sm"><p>This is a required property, when the control is used with type `radio`.</p></post-banner>
          */
         "value"?: string;
     }

package/dist/types/utils/component-on-ready.d.ts

@@ -1,6 +1,6 @@
-import { HostElement } from '../stencil-public-runtime';
+import type { HTMLStencilElement } from '../stencil-public-runtime';
 /**
  * Invoke the `componentOnReady` method if it is available, simulate it otherwise
  * @see https://stenciljs.com/docs/api#componentonready
  */
-export declare function componentOnReady<T extends HostElement>(el: T): Promise<T>;
+export declare function componentOnReady<T extends HTMLStencilElement>(el: T): Promise<T>;