@swisspost/design-system-components 9.0.0-next.2 → 9.0.0-next.4

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-10-14T18:09:02",
+  "timestamp": "2024-11-11T15:45:35",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.19.2",
@@ -584,6 +584,185 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-avatar/post-avatar.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-avatar",
+      "readme": "# post-avatar\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for inserting a custom image as avatar."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "email",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "email",
+          "reflectToAttr": false,
+          "docs": "Defines the users email address associated with a gravatar profile picture.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "firstname",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "firstname",
+          "reflectToAttr": false,
+          "docs": "Defines the users firstname.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "name": "lastname",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "lastname",
+          "reflectToAttr": false,
+          "docs": "Defines the users lastname.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
+        {
+          "name": "userid",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "userid",
+          "reflectToAttr": false,
+          "docs": "Defines the company internal userId.<div className=\"mb-1 alert alert-warning alert-sm\">Can only be used on post.ch domains!</div>",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for inserting a custom image as avatar."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/post-breadcrumb-item/post-breadcrumb-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-breadcrumb-item",
+      "readme": "# post-breadcrumb-item\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for placing the text inside the breadcrumb item."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "url",
+          "type": "URL | string",
+          "complexType": {
+            "original": "string | URL",
+            "resolved": "URL | string",
+            "references": {
+              "URL": {
+                "location": "global",
+                "id": "global::URL"
+              }
+            }
+          },
+          "mutable": false,
+          "attr": "url",
+          "reflectToAttr": false,
+          "docs": "The optional URL to which the breadcrumb item will link.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "URL"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": true,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for placing the text inside the breadcrumb item."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-icon"
+      ],
+      "dependencyGraph": {
+        "post-breadcrumb-item": [
+          "post-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/post-card-control/post-card-control.tsx",
       "encapsulation": "shadow",
@@ -912,6 +1091,41 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-closebutton/post-closebutton.tsx",
+      "encapsulation": "none",
+      "tag": "post-closebutton",
+      "readme": "# post-closebutton\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for placing visually hidden label in the close button."
+        }
+      ],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for placing visually hidden label in the close button."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [
+        "post-icon"
+      ],
+      "dependencyGraph": {
+        "post-closebutton": [
+          "post-icon"
+        ]
+      }
+    },
     {
       "filePath": "src/components/post-collapsible/post-collapsible.tsx",
       "encapsulation": "shadow",
@@ -1292,7 +1506,9 @@
       "parts": [],
       "dependents": [
         "post-alert",
+        "post-breadcrumb-item",
         "post-card-control",
+        "post-closebutton",
         "post-rating",
         "post-tag"
       ],
@@ -1301,9 +1517,15 @@
         "post-alert": [
           "post-icon"
         ],
+        "post-breadcrumb-item": [
+          "post-icon"
+        ],
         "post-card-control": [
           "post-icon"
         ],
+        "post-closebutton": [
+          "post-icon"
+        ],
         "post-rating": [
           "post-icon"
         ],
@@ -1312,6 +1534,269 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-language-option/post-language-option.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-language-option",
+      "readme": "# post-language-option\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for placing the content inside the anchor or button."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "active",
+          "reflectToAttr": true,
+          "docs": "If set to `true`, the language option is considered the current language for the page.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "code",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "code",
+          "reflectToAttr": false,
+          "docs": "The ISO 639 language code, formatted according to [RFC 5646 (also known as BCP 47)](https://datatracker.ietf.org/doc/html/rfc5646). For example, \"de\".",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": true
+        },
+        {
+          "name": "name",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "The full name of the language. For example, \"Deutsch\".",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "url",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "url",
+          "reflectToAttr": false,
+          "docs": "The URL used for the href attribute of the internal anchor.\nThis field is optional; if not provided, a button will be used internally instead of an anchor.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "select",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "select() => Promise<void>",
+          "parameters": [],
+          "docs": "Selects the language option programmatically.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "postChange",
+          "detail": "string",
+          "bubbles": true,
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "An event emitted when the language option is clicked. The payload is the ISO 639 code of the language.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for placing the content inside the anchor or button."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/post-list/post-list.tsx",
+      "encapsulation": "none",
+      "tag": "post-list",
+      "readme": "# post-list\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default - Slot for placing the list title."
+        },
+        {
+          "name": "slot",
+          "text": "post-list-item - Slot for placing post-list-item components."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "horizontal",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "horizontal",
+          "reflectToAttr": false,
+          "docs": "The list can become horizontal by setting `horizontal=\"true\"` or just `horizontal`",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "titleHidden",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "title-hidden",
+          "reflectToAttr": false,
+          "docs": "If `true`, the list title will be hidden. Otherwise, it will be displayed.`",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default",
+          "docs": "Slot for placing the list title."
+        },
+        {
+          "name": "post-list-item",
+          "docs": "Slot for placing post-list-item components."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "src/components/post-list-item/post-list-item.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-list-item",
+      "readme": "# post-list-item\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "default- Slot for placing the content of the list item."
+        }
+      ],
+      "usage": {},
+      "props": [],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "default- Slot for placing the content of the list item.",
+          "docs": ""
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/post-logo/post-logo.tsx",
       "encapsulation": "shadow",
@@ -1672,6 +2157,28 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "edgeGap",
+          "type": "number",
+          "complexType": {
+            "original": "number",
+            "resolved": "number",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "edge-gap",
+          "reflectToAttr": false,
+          "docs": "Gap between the edge of the page and the popover",
+          "docsTags": [],
+          "default": "8",
+          "values": [
+            {
+              "type": "number"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "placement",
           "type": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",

package/dist/esm/{index-f41b763f.js → index-642cd1f2.js}

@@ -43,4 +43,4 @@ const checkEmptyOrPattern = emptyOr(checkPattern);
 const checkEmptyOrType = emptyOr(checkType);
 const checkEmptyOrUrl = emptyOr(checkUrl);
 
-export { checkType as a, checkEmptyOrPattern as b, checkEmptyOrOneOf as c, checkEmptyOrType as d, checkEmptyOrUrl as e };
+export { checkType as a, checkEmptyOrPattern as b, checkEmptyOrOneOf as c, checkEmptyOrUrl as d, checkEmptyOrType as e };

package/dist/esm/{index-0b56fc28.js → index-e1b64755.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'post-components';
-const BUILD = /* post-components */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* post-components */ { allRenderFn: false, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: true, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: true, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: true, hydratedClass: false, hydratedSelectorName: "data-hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: true, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -64,10 +64,34 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './post-alert.entry.js').then(processMod, consoleError);
+                case 'post-avatar':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-avatar.entry.js').then(processMod, consoleError);
+                case 'post-breadcrumb-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-breadcrumb-item.entry.js').then(processMod, consoleError);
                 case 'post-card-control':
                     return import(
                       /* webpackMode: "lazy" */
                       './post-card-control.entry.js').then(processMod, consoleError);
+                case 'post-closebutton':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-closebutton.entry.js').then(processMod, consoleError);
+                case 'post-language-option':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-language-option.entry.js').then(processMod, consoleError);
+                case 'post-list':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-list.entry.js').then(processMod, consoleError);
+                case 'post-list-item':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-list-item.entry.js').then(processMod, consoleError);
                 case 'post-logo':
                     return import(
                       /* webpackMode: "lazy" */
@@ -130,7 +154,7 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
 
 // src/client/client-style.ts
 var styles = /* @__PURE__ */ new Map();
-var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
+var HYDRATED_CSS = "{visibility:hidden}[data-hydrated]{visibility:inherit}";
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 var FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [
@@ -1029,6 +1053,12 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
   const oldVNode = hostRef.$vnode$ || newVNode(null, null);
   const rootVnode = isHost(renderFnResults) ? renderFnResults : h(null, null, renderFnResults);
   hostTagName = hostElm.tagName;
+  if (cmpMeta.$attrsToReflect$) {
+    rootVnode.$attrs$ = rootVnode.$attrs$ || {};
+    cmpMeta.$attrsToReflect$.map(
+      ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName]
+    );
+  }
   if (isInitialLoad && rootVnode.$attrs$) {
     for (const key of Object.keys(rootVnode.$attrs$)) {
       if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) {
@@ -1275,8 +1305,8 @@ var safeCall = (instance, method, arg) => {
   return void 0;
 };
 var addHydratedFlag = (elm) => {
-  var _a;
-  return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ;
+  var _b;
+  return elm.setAttribute((_b = BUILD.hydratedSelectorName) != null ? _b : "hydrated", "") ;
 };
 
 // src/runtime/set-value.ts
@@ -1402,8 +1432,12 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
         /* @__PURE__ */ new Set([
           ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}),
           ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => {
+            var _a2;
             const attrName = m[1] || propName;
             attrNameToPropName.set(attrName, propName);
+            if (m[0] & 512 /* ReflectAttr */) {
+              (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]);
+            }
             return attrName;
           })
         ])
@@ -1596,6 +1630,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$listeners$ = compactMeta[3];
       }
+      {
+        cmpMeta.$attrsToReflect$ = [];
+      }
       {
         cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
       }