@swisspost/design-system-components 10.0.0-next.39 → 10.0.0-next.41

package/dist/types/components.d.ts

@@ -29,6 +29,7 @@ export namespace Components {
         "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
+          * @default false
          */
         "multiple": boolean;
         /**
@@ -39,6 +40,7 @@ export namespace Components {
     interface PostAccordionItem {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
+          * @default false
          */
         "collapsed"?: boolean;
         /**
@@ -86,6 +88,7 @@ export namespace Components {
         "dismissLabel"?: string;
         /**
           * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
+          * @default false
          */
         "dismissible": boolean;
         /**
@@ -94,6 +97,7 @@ export namespace Components {
         "icon"?: string;
         /**
           * The type of the banner.
+          * @default 'neutral'
          */
         "type": BannerType;
     }
@@ -106,6 +110,7 @@ export namespace Components {
     interface PostBreadcrumbs {
         /**
           * The text label for the home breadcrumb item.
+          * @default 'Home'
          */
         "homeText": string;
         /**
@@ -119,6 +124,7 @@ export namespace Components {
     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.
+          * @default false
          */
         "checked": boolean;
         /**
@@ -127,6 +133,7 @@ export namespace Components {
         "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.
+          * @default false
          */
         "disabled": boolean;
         /**
@@ -167,6 +174,7 @@ export namespace Components {
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
+          * @default false
          */
         "collapsed"?: boolean;
         /**
@@ -210,10 +218,12 @@ export namespace Components {
         "base"?: string;
         /**
           * When set to `true`, the icon will be flipped horizontally.
+          * @default false
          */
         "flipH"?: boolean;
         /**
           * When set to `true`, the icon will be flipped vertically.
+          * @default false
          */
         "flipV"?: boolean;
         /**
@@ -266,6 +276,7 @@ export namespace Components {
         "description": string;
         /**
           * Whether the component is rendered as a list or a menu
+          * @default 'list'
          */
         "variant": SwitchVariant;
     }
@@ -274,10 +285,12 @@ export namespace Components {
     interface PostList {
         /**
           * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+          * @default false
          */
         "horizontal": boolean;
         /**
           * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+          * @default false
          */
         "titleHidden": boolean;
     }
@@ -322,6 +335,7 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Defines the position of the menu relative to its trigger. Menus 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'bottom'
          */
         "placement"?: Placement;
         /**
@@ -345,6 +359,7 @@ export namespace Components {
     interface PostPopover {
         /**
           * Show a little indicator arrow
+          * @default true
          */
         "arrow"?: boolean;
         /**
@@ -357,6 +372,7 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Defines the position of the popover relative to its trigger. Popovers 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'top'
          */
         "placement"?: Placement;
         /**
@@ -374,14 +390,17 @@ export namespace Components {
     interface PostPopovercontainer {
         /**
           * Animation style
+          * @default null
          */
         "animation"?: 'pop-in' | null;
         /**
           * Whether or not to display a little pointer arrow
+          * @default false
          */
         "arrow"?: boolean;
         /**
           * Gap between the edge of the page and the popovercontainer
+          * @default 8
          */
         "edgeGap"?: number;
         /**
@@ -390,10 +409,12 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Whether or not the popovercontainer should close when user clicks outside of it
+          * @default false
          */
         "manualClose": boolean;
         /**
           * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers 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.
+          * @default 'top'
          */
         "placement"?: Placement;
         /**
@@ -415,18 +436,22 @@ export namespace Components {
     interface PostRating {
         /**
           * Defines the rating that the component should show.
+          * @default 0
          */
         "currentRating": number;
         /**
           * Defines a hidden label for the component.
+          * @default 'Rating'
          */
         "label": string;
         /**
           * Defines if the component is readonly or not. This usually should be used together with the `currentRating` property.
+          * @default false
          */
         "readonly": boolean;
         /**
           * Defines the total amount of stars rendered in the component.
+          * @default 5
          */
         "stars": number;
     }
@@ -456,7 +481,7 @@ export namespace Components {
         /**
           * 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/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs">icon library</a>.
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Defines the size of the component.
          */
@@ -469,6 +494,7 @@ export namespace Components {
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+          * @default false
          */
         "toggled": boolean;
     }
@@ -479,6 +505,7 @@ export namespace Components {
         "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
+          * @default false
          */
         "arrow"?: boolean;
         /**
@@ -487,10 +514,12 @@ export namespace Components {
         "hide": () => Promise<void>;
         /**
           * Indicates the open state of the tooltip
+          * @default false
          */
         "open": boolean;
         /**
           * Defines the position of the tooltip relative to its trigger. 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'top'
          */
         "placement"?: Placement;
         /**
@@ -508,6 +537,7 @@ export namespace Components {
     interface PostTooltipTrigger {
         /**
           * Delay (in milliseconds) before the tooltip is shown.
+          * @default 0
          */
         "delay": number;
         /**
@@ -924,12 +954,14 @@ declare namespace LocalJSX {
         "headingLevel": HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
+          * @default false
          */
         "multiple"?: boolean;
     }
     interface PostAccordionItem {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
+          * @default false
          */
         "collapsed"?: boolean;
         /**
@@ -969,6 +1001,7 @@ declare namespace LocalJSX {
         "dismissLabel"?: string;
         /**
           * If `true`, a close button (×) is displayed and the banner can be dismissed by the user.
+          * @default false
          */
         "dismissible"?: boolean;
         /**
@@ -981,6 +1014,7 @@ declare namespace LocalJSX {
         "onPostDismissed"?: (event: PostBannerCustomEvent<void>) => void;
         /**
           * The type of the banner.
+          * @default 'neutral'
          */
         "type"?: BannerType;
     }
@@ -993,6 +1027,7 @@ declare namespace LocalJSX {
     interface PostBreadcrumbs {
         /**
           * The text label for the home breadcrumb item.
+          * @default 'Home'
          */
         "homeText"?: string;
         /**
@@ -1006,6 +1041,7 @@ declare namespace LocalJSX {
     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.
+          * @default false
          */
         "checked"?: boolean;
         /**
@@ -1014,6 +1050,7 @@ declare namespace LocalJSX {
         "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.
+          * @default false
          */
         "disabled"?: boolean;
         /**
@@ -1054,6 +1091,7 @@ declare namespace LocalJSX {
     interface PostCollapsible {
         /**
           * If `true`, the element is collapsed otherwise it is displayed.
+          * @default false
          */
         "collapsed"?: boolean;
         /**
@@ -1089,10 +1127,12 @@ declare namespace LocalJSX {
         "base"?: string;
         /**
           * When set to `true`, the icon will be flipped horizontally.
+          * @default false
          */
         "flipH"?: boolean;
         /**
           * When set to `true`, the icon will be flipped vertically.
+          * @default false
          */
         "flipV"?: boolean;
         /**
@@ -1149,6 +1189,7 @@ declare namespace LocalJSX {
         "description": string;
         /**
           * Whether the component is rendered as a list or a menu
+          * @default 'list'
          */
         "variant"?: SwitchVariant;
     }
@@ -1157,10 +1198,12 @@ declare namespace LocalJSX {
     interface PostList {
         /**
           * The list can become horizontal by setting `horizontal="true"` or just `horizontal`
+          * @default false
          */
         "horizontal"?: boolean;
         /**
           * If `true`, the list title will be hidden. Otherwise, it will be displayed.`
+          * @default false
          */
         "titleHidden"?: boolean;
     }
@@ -1193,6 +1236,7 @@ declare namespace LocalJSX {
         "onToggleMenu"?: (event: PostMenuCustomEvent<boolean>) => void;
         /**
           * Defines the position of the menu relative to its trigger. Menus 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'bottom'
          */
         "placement"?: Placement;
     }
@@ -1207,6 +1251,7 @@ declare namespace LocalJSX {
     interface PostPopover {
         /**
           * Show a little indicator arrow
+          * @default true
          */
         "arrow"?: boolean;
         /**
@@ -1215,24 +1260,29 @@ declare namespace LocalJSX {
         "closeButtonCaption": string;
         /**
           * Defines the position of the popover relative to its trigger. Popovers 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'top'
          */
         "placement"?: Placement;
     }
     interface PostPopovercontainer {
         /**
           * Animation style
+          * @default null
          */
         "animation"?: 'pop-in' | null;
         /**
           * Whether or not to display a little pointer arrow
+          * @default false
          */
         "arrow"?: boolean;
         /**
           * Gap between the edge of the page and the popovercontainer
+          * @default 8
          */
         "edgeGap"?: number;
         /**
           * Whether or not the popovercontainer should close when user clicks outside of it
+          * @default false
          */
         "manualClose"?: boolean;
         /**
@@ -1241,6 +1291,7 @@ declare namespace LocalJSX {
         "onPostToggle"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
         /**
           * Defines the placement of the popovercontainer according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popovercontainers 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.
+          * @default 'top'
          */
         "placement"?: Placement;
         /**
@@ -1251,10 +1302,12 @@ declare namespace LocalJSX {
     interface PostRating {
         /**
           * Defines the rating that the component should show.
+          * @default 0
          */
         "currentRating"?: number;
         /**
           * Defines a hidden label for the component.
+          * @default 'Rating'
          */
         "label"?: string;
         /**
@@ -1267,10 +1320,12 @@ declare namespace LocalJSX {
         "onPostInput"?: (event: PostRatingCustomEvent<{ value: number }>) => void;
         /**
           * Defines if the component is readonly or not. This usually should be used together with the `currentRating` property.
+          * @default false
          */
         "readonly"?: boolean;
         /**
           * Defines the total amount of stars rendered in the component.
+          * @default 5
          */
         "stars"?: number;
     }
@@ -1313,6 +1368,7 @@ declare namespace LocalJSX {
     interface PostTogglebutton {
         /**
           * If `true`, the button is in the "on" state, otherwise it is in the "off" state.
+          * @default false
          */
         "toggled"?: boolean;
     }
@@ -1323,20 +1379,24 @@ declare namespace LocalJSX {
         "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
+          * @default false
          */
         "arrow"?: boolean;
         /**
           * Indicates the open state of the tooltip
+          * @default false
          */
         "open"?: boolean;
         /**
           * Defines the position of the tooltip relative to its trigger. 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. For supported values and behavior details, see the [Floating UI placement documentation](https://floating-ui.com/docs/computePosition#placement).
+          * @default 'top'
          */
         "placement"?: Placement;
     }
     interface PostTooltipTrigger {
         /**
           * Delay (in milliseconds) before the tooltip is shown.
+          * @default 0
          */
         "delay"?: number;
         /**

package/dist/types/index.d.ts

@@ -1,37 +1,10 @@
-export { Components, JSX } from './components';
-export { PostAccordion } from './components/post-accordion/post-accordion';
-export { PostAccordionItem } from './components/post-accordion-item/post-accordion-item';
-export { PostAvatar } from './components/post-avatar/post-avatar';
-export { PostBackToTop } from './components/post-back-to-top/post-back-to-top';
-export { PostBanner } from './components/post-banner/post-banner';
-export { PostBreadcrumbs } from './components/post-breadcrumbs/post-breadcrumbs';
-export { PostBreadcrumbItem } from './components/post-breadcrumb-item/post-breadcrumb-item';
-export { PostCardControl } from './components/post-card-control/post-card-control';
-export { PostClosebutton } from './components/post-closebutton/post-closebutton';
-export { PostCollapsible } from './components/post-collapsible/post-collapsible';
-export { PostCollapsibleTrigger } from './components/post-collapsible-trigger/post-collapsible-trigger';
-export { PostFooter } from './components/post-footer/post-footer';
-export { PostHeader } from './components/post-header/post-header';
-export { PostIcon } from './components/post-icon/post-icon';
-export { PostLanguageOption } from './components/post-language-option/post-language-option';
-export { PostLanguageSwitch } from './components/post-language-switch/post-language-switch';
-export { PostLinkarea } from './components/post-linkarea/post-linkarea';
-export { PostList } from './components/post-list/post-list';
-export { PostListItem } from './components/post-list-item/post-list-item';
-export { PostLogo } from './components/post-logo/post-logo';
-export { PostMainnavigation } from './components/post-mainnavigation/post-mainnavigation';
-export { PostMegadropdown } from './components/post-megadropdown/post-megadropdown';
-export { PostMegadropdownTrigger } from './components/post-megadropdown-trigger/post-megadropdown-trigger';
-export { PostMenu } from './components/post-menu/post-menu';
-export { PostMenuItem } from './components/post-menu-item/post-menu-item';
-export { PostMenuTrigger } from './components/post-menu-trigger/post-menu-trigger';
-export { PostPopover } from './components/post-popover/post-popover';
-export { PostPopovercontainer } from './components/post-popovercontainer/post-popovercontainer';
-export { PostRating } from './components/post-rating/post-rating';
-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 { PostTag } from './components/post-tag/post-tag';
-export { PostTogglebutton } from './components/post-togglebutton/post-togglebutton';
-export { PostTooltip } from './components/post-tooltip/post-tooltip';
-export { PostTooltipTrigger } from './components/post-tooltip-trigger/post-tooltip-trigger';
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export type * from './components.d.ts';

package/dist/types/stencil-public-runtime.d.ts

@@ -260,6 +260,25 @@ export declare function setPlatformHelpers(helpers: {
  * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
+/**
+ * Method to render a virtual DOM tree to a container element.
+ *
+ * @example
+ * ```tsx
+ * import { render } from '@stencil/core';
+ *
+ * const vnode = (
+ *   <div>
+ *     <h1>Hello, world!</h1>
+ *   </div>
+ * );
+ * render(vnode, document.body);
+ * ```
+ *
+ * @param vnode - The virtual DOM tree to render
+ * @param container - The container element to render the virtual DOM tree to
+ */
+export declare function render(vnode: VNode, container: Element): void;
 /**
  * Used to manually set the base path where assets can be found. For lazy-loaded
  * builds the asset path is automatically set and assets copied to the correct
@@ -826,6 +845,7 @@ export declare namespace JSXBase {
     }
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
+        name?: string;
         onToggle?: (event: Event) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
@@ -1015,6 +1035,8 @@ export declare namespace JSXBase {
         autoPlay?: boolean;
         autoplay?: boolean | string;
         controls?: boolean;
+        controlslist?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
+        controlsList?: 'nodownload' | 'nofullscreen' | 'noremoteplayback';
         crossOrigin?: string;
         crossorigin?: string;
         loop?: boolean;
@@ -1564,6 +1586,10 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
+        onBeforeToggle?: (event: Event) => void;
+        onBeforeToggleCapture?: (event: Event) => void;
+        onToggle?: (event: Event) => void;
+        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;
@@ -1575,7 +1601,7 @@ export declare namespace JSXBase {
         onKeyUp?: (event: KeyboardEvent) => void;
         onKeyUpCapture?: (event: KeyboardEvent) => void;
         onAuxClick?: (event: MouseEvent) => void;
-        onClick?: (event: MouseEvent) => void;
+        onClick?: (event: PointerEvent) => void;
         onClickCapture?: (event: MouseEvent) => void;
         onContextMenu?: (event: MouseEvent) => void;
         onContextMenuCapture?: (event: MouseEvent) => void;
@@ -1655,6 +1681,8 @@ export declare namespace JSXBase {
         onTransitionRunCapture?: (event: TransitionEvent) => void;
         onTransitionStart?: (event: TransitionEvent) => void;
         onTransitionStartCapture?: (event: TransitionEvent) => void;
+        [key: `aria-${string}`]: string | boolean | undefined;
+        [key: `aria${string}`]: string | boolean | undefined;
     }
 }
 export interface JSXAttributes<T = Element> {

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

@@ -1,12 +1,17 @@
-type ListenerType = 'key' | 'name';
-export declare class Breakpoint {
-    private readonly breakpointMap;
-    private readonly current;
+interface BreakpointDefinition {
+    key: string;
+    device: string;
+    minWidth: number;
+}
+type BreakpointProperty = keyof BreakpointDefinition;
+declare class Breakpoint {
+    private readonly breakpoints;
+    private currentBreakpoint;
     constructor();
-    private getStyles;
-    private updateHandler;
+    private getValues;
+    private updateCurrentBreakpoint;
     private dispatchEvent;
-    get(type: ListenerType): string;
+    get<T extends BreakpointProperty>(property: T): BreakpointDefinition[T];
 }
 export declare const breakpoint: Breakpoint;
 export {};

package/dist/types/utils/event-from.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Decorator that guards event handlers to only execute when the event meets certain criteria.
+ * @param tag - The local name of the element that should be the target of the event
+ * @param option - Configuration options for the event guard
+ * @param option.ignoreNestedComponents - Whether to ignore events from nested components
+ */
+export declare function EventFrom(tag: string, option?: {
+    ignoreNestedComponents: boolean;
+}): (target: object, propertyKey: string, descriptor?: PropertyDescriptor) => void;

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

@@ -4,7 +4,7 @@ export * from './component-on-ready';
 export * from './property-checkers';
 export * from './breakpoints';
 export * from './debounce';
-export * from './event-guard';
+export * from './event-from';
 export * from './get-root';
 export * from './is-motion-reduced';
 export * from './sass-export';