@swisspost/design-system-components 2.0.0 → 2.0.2

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

@@ -1,3 +1,6 @@
+/**
+ * @slot default - Slot for placing post-accordion-item components.
+ */
 export declare class PostAccordion {
     private accordionItems;
     private expandedItems;

package/dist/types/components/post-accordion-item/post-accordion-item.d.ts

@@ -1,4 +1,8 @@
 import { HeadingLevel } from './heading-levels';
+/**
+ * @slot header - Slot for placing custom content within the accordion item's header.
+ * @slot default - Slot for placing content within the accordion item's body.
+ */
 export declare class PostAccordionItem {
     private collapsible;
     host: HTMLPostAccordionItemElement;

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

@@ -1,5 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { AlertType } from './alert-types';
+/**
+ * @slot heading - Slot for placing custom content within the alert's heading.
+ * @slot actions - Slot for placing custom actions (buttons, links, etc.) within the alert.
+ * @slot default - Slot for placing the main content/message of the alert.
+ */
 export declare class PostAlert {
     host: HTMLPostAlertElement;
     alertId: `${string}-${string}-${string}-${string}-${string}`;

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

@@ -1,4 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot default - Slot for placing content within the collapsible element.
+ */
 export declare class PostCollapsible {
     private isLoaded;
     private collapsible;

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

@@ -1,4 +1,7 @@
 import { Placement } from '@floating-ui/dom';
+/**
+ * @slot default - Slot for placing content inside the popover.
+ */
 export declare class PostPopover {
     private popoverRef;
     private localTogglePopover;

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

@@ -7,6 +7,9 @@ interface PopoverElement {
     togglePopover: (force?: boolean) => boolean;
 }
 export type PostPopoverElement = HTMLElement & PopoverElement;
+/**
+ * @slot - Default slot for placing content inside the popovercontainer.
+ */
 export declare class PostPopovercontainer {
     host: HTMLPostPopovercontainerElement;
     private popoverRef;

package/dist/types/components/post-tab-header/post-tab-header.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @slot default - Slot for the content of the tab header.
+ */
 export declare class PostTabHeader {
     host: HTMLPostTabHeaderElement;
     tabId: string;

package/dist/types/components/post-tab-panel/post-tab-panel.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @slot default - Slot for placing the content of the tab panel.
+ */
 export declare class PostTabPanel {
     host: HTMLPostTabPanelElement;
     panelId: string;

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

@@ -1,4 +1,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.
+ */
 export declare class PostTabs {
     private activeTab;
     private showing;

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

@@ -2,8 +2,6 @@ import { Placement } from '@floating-ui/dom';
 import 'long-press-event';
 export declare class PostTooltip {
     private popoverRef;
-    private readonly localShowTooltip;
-    private readonly localHideTooltip;
     host: HTMLPostTooltipElement;
     /**
      * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
@@ -15,13 +13,17 @@ export declare class PostTooltip {
      * Wheter or not to display a little pointer arrow
      */
     readonly arrow?: boolean;
-    constructor();
     connectedCallback(): void;
+    /**
+     * Add interest event listeners, but only once, and start
+     * the accessibility patcher
+     */
+    componentWillLoad(): void;
     /**
      * Remove a bunch of event listeners if the tooltip gets removed from the DOM
+     * and disconnect the accessibility patcher
      */
     disconnectedCallback(): void;
-    componentWillLoad(): void;
     /**
      * Programmatically display the tooltip
      * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
@@ -37,7 +39,13 @@ export declare class PostTooltip {
      * @param force Pass true to always show or false to always hide
      */
     toggle(target: HTMLElement, force?: boolean): Promise<void>;
-    private get triggers();
-    private patchPopoverTargetActionInterest;
+    /**
+     * Pointer or focus is on the tooltip, stop the tooltip from disappearing
+     */
+    private handleInterest;
+    /**
+     * Pointer or focus left the tooltip, initiate the hiding process
+     */
+    private handleInterestLost;
     render(): any;
 }

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 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 { PostCollapsible } from './components/post-collapsible/post-collapsible';
 export { PostIcon } from './components/post-icon/post-icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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",
@@ -24,9 +24,9 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@floating-ui/dom": "1.5.4",
-    "@oddbird/popover-polyfill": "0.2.3",
-    "@swisspost/design-system-styles": "6.6.0",
+    "@floating-ui/dom": "1.6.1",
+    "@oddbird/popover-polyfill": "0.3.7",
+    "@swisspost/design-system-styles": "6.6.2",
     "ally.js": "1.4.1",
     "long-press-event": "2.4.6"
   },
@@ -34,24 +34,22 @@
     "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
     "@stencil-community/eslint-plugin": "0.7.1",
-    "@stencil/core": "4.10.0",
+    "@stencil/angular-output-target": "0.8.4",
+    "@stencil/core": "4.12.0",
     "@stencil/react-output-target": "0.5.3",
-    "@stencil/sass": "3.0.8",
-    "@types/jest": "29.5.11",
+    "@stencil/sass": "3.0.9",
+    "@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.2",
+    "cypress": "13.6.4",
     "cypress-storybook": "0.5.1",
     "eslint": "8.56.0",
     "eslint-plugin-react": "7.33.2",
-    "jest": "29.7.0",
-    "jest-cli": "29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "npm-run-all": "4.1.5",
     "rimraf": "5.0.5",
-    "sass": "1.69.7",
-    "ts-jest": "29.1.1",
+    "sass": "1.70.0",
+    "ts-jest": "29.1.2",
     "typescript": "4.9.5"
   },
   "keywords": [
@@ -71,6 +69,7 @@
     "unit": "stencil test --spec",
     "unit:watch": "stencil test --spec --watchAll --silent",
     "e2e": "cypress run",
+    "e2e:ci": "xvfb-run -a cypress run",
     "e2e:watch": "cypress open",
     "generate": "stencil generate",
     "lint": "eslint src/**/*{.ts,.tsx}"

package/dist/cjs/check-non-empty-eeaa8f77.js.map

@@ -1 +0,0 @@
-{"file":"check-non-empty-eeaa8f77.js","mappings":";;;;SAEgB,aAAa,CAAC,KAAc,EAAE,KAAa;IACzD,IAAIA,sBAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;QACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;KACxB;AACH;;;;","names":["EMPTY_VALUES"],"sources":["src/utils/property-checkers/check-non-empty.ts"],"sourcesContent":["import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n  if (EMPTY_VALUES.some(v => v === value)) {\n    throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/cjs/constants-238701d3.js.map

@@ -1 +0,0 @@
-{"file":"constants-238701d3.js","mappings":";;MAAa,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;;;;","names":[],"sources":["src/utils/property-checkers/constants.ts"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n"],"version":3}

package/dist/cjs/fade-35a3633a.js.map

@@ -1 +0,0 @@
-{"file":"fade-35a3633a.js","mappings":";;AAAA,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,gBAAgB,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;AAClD,MAAM,eAAe,GAAa,EAAC,OAAO,EAAE,GAAG,EAAC,CAAC;MAEpC,MAAM,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC1D,CAAE,gBAAgB,EAAE,eAAe,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAC1B;MAEW,OAAO,GAAG,CAAC,EAAW,KAAgB,EAAE,CAAC,OAAO,CAC3D,CAAE,eAAe,EAAE,gBAAgB,CAAE,EACrC,EAAE,QAAQ,EAAE,YAAY,EAAE;;;;;","names":[],"sources":["src/animations/fade.ts"],"sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyframe: Keyframe = {opacity: '0'};\nconst fadedInKeyframe: Keyframe = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyframe, fadedInKeyframe ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyframe, fadedOutKeyframe ],\n  { duration: fadeDuration }\n);\n"],"version":3}