@swisspost/design-system-components 9.0.0-next.5 → 9.0.0-next.7

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-11-18T17:06:56",
+  "timestamp": "2024-12-04T07:44:23",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.19.2",
@@ -360,29 +360,21 @@
       }
     },
     {
-      "filePath": "src/components/post-alert/post-alert.tsx",
+      "filePath": "src/components/post-avatar/post-avatar.tsx",
       "encapsulation": "shadow",
-      "tag": "post-alert",
-      "readme": "# post-alert\n\n\n",
+      "tag": "post-avatar",
+      "readme": "# post-avatar\n\n\n",
       "docs": "",
       "docsTags": [
         {
           "name": "slot",
-          "text": "heading - Slot for placing custom content within the alert's heading."
-        },
-        {
-          "name": "slot",
-          "text": "actions - Slot for placing custom actions (buttons, links, etc.) within the alert."
-        },
-        {
-          "name": "slot",
-          "text": "default - Slot for placing the main content/message of the alert."
+          "text": "default - Slot for inserting a custom image as avatar."
         }
       ],
       "usage": {},
       "props": [
         {
-          "name": "dismissLabel",
+          "name": "email",
           "type": "string",
           "complexType": {
             "original": "string",
@@ -390,9 +382,30 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "dismiss-label",
+          "attr": "email",
           "reflectToAttr": false,
-          "docs": "The label to use for the close button of a dismissible alert.",
+          "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": [
             {
@@ -400,32 +413,111 @@
             }
           ],
           "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": "dismissible",
-          "type": "boolean",
+          "name": "userid",
+          "type": "string",
           "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
+            "original": "string",
+            "resolved": "string",
             "references": {}
           },
           "mutable": false,
-          "attr": "dismissible",
+          "attr": "userid",
           "reflectToAttr": false,
-          "docs": "If `true`, a close button (×) is displayed and the alert can be dismissed by the user.",
+          "docs": "Defines the company internal userId.<div className=\"mb-1 banner banner-warning banner-sm\">Can only be used on post.ch domains!</div>",
           "docsTags": [],
-          "default": "false",
           "values": [
             {
-              "type": "boolean"
+              "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-banner/post-banner.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-banner",
+      "readme": "# post-alert\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "heading - Slot for placing custom content within the banner's heading."
+        },
+        {
+          "name": "slot",
+          "text": "actions - Slot for placing custom actions (buttons, links, etc.) within the banner."
+        },
+        {
+          "name": "slot",
+          "text": "default - Slot for placing the main content/message of the banner."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "dismissLabel",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "dismiss-label",
+          "reflectToAttr": false,
+          "docs": "The label to use for the close button of a dismissible banner.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
             }
           ],
           "optional": false,
           "required": false
         },
         {
-          "name": "fixed",
+          "name": "dismissible",
           "type": "boolean",
           "complexType": {
             "original": "boolean",
@@ -433,9 +525,9 @@
             "references": {}
           },
           "mutable": false,
-          "attr": "fixed",
+          "attr": "dismissible",
           "reflectToAttr": false,
-          "docs": "If `true`, the alert is positioned at the bottom of the window, from edge to edge.",
+          "docs": "If `true`, a close button (×) is displayed and the banner can be dismissed by the user.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -457,7 +549,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "The icon to display in the alert. By default, the icon depends on the alert type.\n\nIf `none`, no icon is displayed.",
+          "docs": "The icon to display in the banner. By default, the icon depends on the banner type.\n\nIf `none`, no icon is displayed.",
           "docsTags": [],
           "values": [
             {
@@ -469,39 +561,35 @@
         },
         {
           "name": "type",
-          "type": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "\"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
           "complexType": {
-            "original": "AlertType",
-            "resolved": "\"danger\" | \"gray\" | \"info\" | \"primary\" | \"success\" | \"warning\"",
+            "original": "BannerType",
+            "resolved": "\"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
             "references": {
-              "AlertType": {
+              "BannerType": {
                 "location": "import",
-                "path": "./alert-types",
-                "id": "src/components/post-alert/alert-types.ts::AlertType"
+                "path": "./banner-types",
+                "id": "src/components/post-banner/banner-types.ts::BannerType"
               }
             }
           },
           "mutable": false,
           "attr": "type",
           "reflectToAttr": false,
-          "docs": "The type of the alert.",
+          "docs": "The type of the banner.",
           "docsTags": [],
-          "default": "'primary'",
+          "default": "'neutral'",
           "values": [
             {
               "value": "danger",
               "type": "string"
             },
-            {
-              "value": "gray",
-              "type": "string"
-            },
             {
               "value": "info",
               "type": "string"
             },
             {
-              "value": "primary",
+              "value": "neutral",
               "type": "string"
             },
             {
@@ -537,7 +625,7 @@
           },
           "signature": "dismiss() => Promise<void>",
           "parameters": [],
-          "docs": "Triggers alert dismissal programmatically (same as clicking on the close button (×)).",
+          "docs": "Triggers banner dismissal programmatically (same as clicking on the close button (×)).",
           "docsTags": []
         }
       ],
@@ -553,7 +641,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "An event emitted when the alert element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible alerts.",
+          "docs": "An event emitted when the banner element is dismissed, after the transition.\nIt has no payload and only relevant for dismissible banners.",
           "docsTags": []
         }
       ],
@@ -562,15 +650,15 @@
       "slots": [
         {
           "name": "actions",
-          "docs": "Slot for placing custom actions (buttons, links, etc.) within the alert."
+          "docs": "Slot for placing custom actions (buttons, links, etc.) within the banner."
         },
         {
           "name": "default",
-          "docs": "Slot for placing the main content/message of the alert."
+          "docs": "Slot for placing the main content/message of the banner."
         },
         {
           "name": "heading",
-          "docs": "Slot for placing custom content within the alert's heading."
+          "docs": "Slot for placing custom content within the banner's heading."
         }
       ],
       "parts": [],
@@ -579,125 +667,11 @@
         "post-icon"
       ],
       "dependencyGraph": {
-        "post-alert": [
+        "post-banner": [
           "post-icon"
         ]
       }
     },
-    {
-      "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",
@@ -776,11 +750,11 @@
         },
         {
           "name": "slot",
-          "text": "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>"
+          "text": "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>"
         },
         {
           "name": "slot",
-          "text": "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>"
+          "text": "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>"
         }
       ],
       "usage": {},
@@ -862,7 +836,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "Defines the icon `name` inside the card.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>",
+          "docs": "Defines the icon `name` inside the card.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -905,7 +879,7 @@
           "mutable": false,
           "attr": "name",
           "reflectToAttr": false,
-          "docs": "Defines the `name` attribute of the control.\n<span className=\"alert alert-sm alert-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>\n<span className=\"alert alert-sm alert-info\">This is a required property, when the control is used with type `radio`.</span>",
+          "docs": "Defines the `name` attribute of the control.\n<span className=\"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>\n<span className=\"banner banner-sm banner-info\">This is a required property, when the control is used with type `radio`.</span>",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -980,7 +954,7 @@
           "mutable": false,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "Defines the `value` attribute of the control. <span className=\"alert alert-sm alert-info\">This is a required property, when the control is used with type `radio`.</span>",
+          "docs": "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>",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -1050,7 +1024,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<span className=\"alert alert-sm alert-info\">If the component is used with type `radio`, it will only emit this event, when the checked state is changing to `true`.</span>",
+          "docs": "An event emitted whenever the components checked state is toggled.\nThe event payload (emitted under `event.detail.state`) is a boolean: `true` if the component is checked, `false` if it is unchecked.\n<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>",
           "docsTags": []
         },
         {
@@ -1073,11 +1047,11 @@
       "slots": [
         {
           "name": "default",
-          "docs": "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>"
+          "docs": "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>"
         },
         {
           "name": "icon",
-          "docs": "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>"
+          "docs": "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>"
         }
       ],
       "parts": [],
@@ -1530,7 +1504,7 @@
       "slots": [],
       "parts": [],
       "dependents": [
-        "post-alert",
+        "post-banner",
         "post-breadcrumb-item",
         "post-card-control",
         "post-closebutton",
@@ -1539,7 +1513,7 @@
       ],
       "dependencies": [],
       "dependencyGraph": {
-        "post-alert": [
+        "post-banner": [
           "post-icon"
         ],
         "post-breadcrumb-item": [
@@ -3377,7 +3351,7 @@
           "mutable": false,
           "attr": "icon",
           "reflectToAttr": false,
-          "docs": "Defines the icon `name` inside of the component.\n<span className=\"alert alert-sm alert-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>.",
+          "docs": "Defines the icon `name` inside of the component.\n<span className=\"banner banner-sm banner-info\">If not set the icon will not show up.</span>\nTo learn which icons are available, please visit our <a href=\"/?path=/docs/5704bdc4-c5b5-45e6-b123-c54d01fce2f1--docs\">icon library</a>.",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -3475,6 +3449,66 @@
         ]
       }
     },
+    {
+      "filePath": "src/components/post-togglebutton/post-togglebutton.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-togglebutton",
+      "readme": "# post-togglebutton\n\n\n",
+      "docs": "",
+      "docsTags": [
+        {
+          "name": "slot",
+          "text": "toggled - Slot for content displayed when the button is in the \"on\" state."
+        },
+        {
+          "name": "slot",
+          "text": "untoggled - Slot for content displayed when the button is in the \"off\" state."
+        }
+      ],
+      "usage": {},
+      "props": [
+        {
+          "name": "toggled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "toggled",
+          "reflectToAttr": true,
+          "docs": "If `true`, the button is in the \"on\" state, otherwise it is in the \"off\" state.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [
+        {
+          "name": "toggled",
+          "docs": "Slot for content displayed when the button is in the \"on\" state."
+        },
+        {
+          "name": "untoggled",
+          "docs": "Slot for content displayed when the button is in the \"off\" state."
+        }
+      ],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
     {
       "filePath": "src/components/post-tooltip/post-tooltip.tsx",
       "encapsulation": "shadow",
@@ -3762,10 +3796,10 @@
       "docstring": "",
       "path": "src/types/index.ts"
     },
-    "src/components/post-alert/alert-types.ts::AlertType": {
-      "declaration": "\"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\" | \"gray\"",
+    "src/components/post-banner/banner-types.ts::BannerType": {
+      "declaration": "\"neutral\" | \"success\" | \"warning\" | \"danger\" | \"info\"",
       "docstring": "",
-      "path": "src/components/post-alert/alert-types.ts"
+      "path": "src/components/post-banner/banner-types.ts"
     },
     "../../node_modules/.pnpm/@floating-ui+dom@1.6.8/node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement": {
       "declaration": "any",

package/dist/esm/get-root-7af2e0d1.js

@@ -0,0 +1,9 @@
+function getRoot(element) {
+    const root = element.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+        return root;
+    }
+    throw new Error('Attempting to access root node before the element is attached to the document or shadow tree.');
+}
+
+export { getRoot as g };

package/dist/esm/index-e1b64755.js

@@ -64,14 +64,14 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './post-accordion-item.entry.js').then(processMod, consoleError);
-                case 'post-alert':
-                    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-banner':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-banner.entry.js').then(processMod, consoleError);
                 case 'post-breadcrumb-item':
                     return import(
                       /* webpackMode: "lazy" */
@@ -120,6 +120,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
                     return import(
                       /* webpackMode: "lazy" */
                       './post-tag.entry.js').then(processMod, consoleError);
+                case 'post-togglebutton':
+                    return import(
+                      /* webpackMode: "lazy" */
+                      './post-togglebutton.entry.js').then(processMod, consoleError);
                 case 'post-tooltip':
                     return import(
                       /* webpackMode: "lazy" */