@swisspost/design-system-components 7.0.0 → 7.1.0

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

@@ -2,15 +2,17 @@ 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>
+ * @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="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">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 EVENT_MAP;
     private readonly KEYCODES;
     private group;
     private control;
     private controlId;
     private initialChecked;
+    private hasIcon;
     host: HTMLPostCardControlElement;
     focused: boolean;
     private internals;
@@ -99,6 +101,7 @@ export declare class PostCardControl {
     private hostContext;
     private setHostContext;
     connectedCallback(): void;
+    componentWillRender(): void;
     render(): any;
     componentDidRender(): void;
     componentDidLoad(): void;

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

@@ -1,5 +1,5 @@
 /**
- * @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>
+ * @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">inline content</a>.</p>
  */
 export declare class PostTag {
     host: HTMLPostTagElement;
@@ -15,7 +15,7 @@ export declare class 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>.
+     * To learn which icons are available, please visit our <a href="/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs">icon library</a>.
      */
     readonly icon: null | string;
     constructor();

package/dist/types/components.d.ts

@@ -5,10 +5,10 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { HeadingLevel } from "./components/post-accordion-item/heading-levels";
+import { HeadingLevel } from "./types/index";
 import { AlertType } from "./components/post-alert/alert-types";
 import { Placement } from "@floating-ui/dom";
-export { HeadingLevel } from "./components/post-accordion-item/heading-levels";
+export { HeadingLevel } from "./types/index";
 export { AlertType } from "./components/post-alert/alert-types";
 export { Placement } from "@floating-ui/dom";
 export namespace Components {
@@ -18,9 +18,13 @@ export namespace Components {
          */
         "collapseAll": () => Promise<void>;
         /**
-          * Expands all `post-accordion-item`.  If `close-others` is `true` and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
+          * Expands all `post-accordion-item`.  If `multiple="true"` is not set and all items are closed, it will open the first one. Otherwise, it will keep the opened one.
          */
         "expandAll": () => Promise<void>;
+        /**
+          * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
@@ -37,6 +41,7 @@ export namespace Components {
         "collapsed"?: boolean;
         /**
           * Defines the hierarchical level of the accordion item header within the headings structure.
+          * @deprecated set the `heading-level` property on the parent `post-accordion` instead.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -258,7 +263,7 @@ export namespace Components {
     }
     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>.
+          * 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">icon library</a>.
          */
         "icon": null | string;
         /**
@@ -498,6 +503,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface PostAccordion {
+        /**
+          * Defines the hierarchical level of the `post-accordion-item` headers within the headings structure.
+         */
+        "headingLevel"?: HeadingLevel;
         /**
           * If `true`, multiple `post-accordion-item` can be open at the same time.
          */
@@ -510,6 +519,7 @@ declare namespace LocalJSX {
         "collapsed"?: boolean;
         /**
           * Defines the hierarchical level of the accordion item header within the headings structure.
+          * @deprecated set the `heading-level` property on the parent `post-accordion` instead.
          */
         "headingLevel"?: HeadingLevel;
     }
@@ -709,7 +719,7 @@ declare namespace LocalJSX {
     }
     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>.
+          * 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">icon library</a>.
          */
         "icon"?: null | string;
         /**

package/dist/types/types/heading-levels.d.ts

@@ -0,0 +1,2 @@
+export declare const HEADING_LEVELS: readonly [1, 2, 3, 4, 5, 6];
+export type HeadingLevel = typeof HEADING_LEVELS[number];

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

@@ -0,0 +1 @@
+export * from './heading-levels';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -23,33 +23,33 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@floating-ui/dom": "1.6.3",
+    "@floating-ui/dom": "1.6.5",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-styles": "7.0.0",
+    "@swisspost/design-system-styles": "7.1.0",
     "ally.js": "1.4.1",
-    "long-press-event": "2.4.6"
+    "long-press-event": "2.5.0"
   },
   "devDependencies": {
-    "@percy/cli": "1.28.2",
+    "@percy/cli": "1.28.6",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.2",
     "@stencil/angular-output-target": "0.8.4",
-    "@stencil/core": "4.14.0",
+    "@stencil/core": "4.18.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.11",
+    "@stencil/sass": "3.0.12",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.16",
+    "@types/node": "20.12.7",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "bootstrap": "5.3.2",
-    "cypress": "13.7.2",
+    "bootstrap": "5.3.3",
+    "cypress": "13.9.0",
     "cypress-axe": "1.5.0",
     "cypress-storybook": "0.5.1",
     "eslint": "8.57.0",
     "eslint-plugin-react": "7.34.1",
-    "rimraf": "5.0.5",
+    "rimraf": "5.0.7",
     "rollup-plugin-postcss": "4.0.2",
-    "sass": "1.74.1",
+    "sass": "1.77.1",
     "ts-jest": "29.1.2",
     "typescript": "5.3.3"
   },
@@ -62,8 +62,8 @@
     "frontend"
   ],
   "scripts": {
-    "dev": "stencil build --port 9200 --serve --watch --docs-readme",
-    "start": "stencil build --watch --docs-readme",
+    "dev": "stencil build --dev --port 9200 --serve --watch --docs --docs-readme",
+    "start": "stencil build --dev --watch --docs --docs-readme",
     "build": "stencil build --docs-readme",
     "clean": "rimraf www dist loader",
     "test": "pnpm run unit",