@momentum-design/components 0.127.7 → 0.127.9

package/dist/custom-elements.json

@@ -2102,7 +2102,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
               "default": "1000",
               "attribute": "z-index",
               "reflects": true,
@@ -4846,77 +4846,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/brandvisual/brandvisual.component.js",
@@ -5093,6 +5022,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -11906,13 +11906,12 @@
             {
               "kind": "field",
               "name": "zIndex",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "attribute": "z-index",
+              "reflects": true,
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -13567,11 +13566,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -27281,13 +27276,12 @@
             {
               "kind": "field",
               "name": "zIndex",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
+              "attribute": "z-index",
+              "reflects": true,
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
-              "default": "1000",
-              "attribute": "z-index",
-              "reflects": true,
               "inheritedFrom": {
                 "name": "Popover",
                 "module": "components/popover/popover.component.js"
@@ -28932,11 +28926,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -33412,7 +33402,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Popover is genric overlay which can be trigered by any actinable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopoers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n   </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <div>\n       <Popover append-to=\"some-element-id\">...</mdc-popover>\n     <div>}\n   </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
+          "description": "Popover is generic overlay which can be triggered by any actionable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopovers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n   </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n   const [isOpen, setIsOpen] = useState(false);\n   return (<div>\n     {isOpen && <div>\n       <Popover append-to=\"some-element-id\">...</mdc-popover>\n     <div>}\n   </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
           "name": "Popover",
           "cssProperties": [
             {
@@ -33778,8 +33768,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -34835,11 +34824,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "fieldName": "zIndex"
             },
             {
@@ -34955,7 +34940,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-popover",
-          "jsDoc": "/**\n * Popover is genric overlay which can be trigered by any actinable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popoers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n *    </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <div>\n *        <Popover append-to=\"some-element-id\">...</mdc-popover>\n *      <div>}\n *    </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
+          "jsDoc": "/**\n * Popover is generic overlay which can be triggered by any actionable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popovers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n *    </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n *    const [isOpen, setIsOpen] = useState(false);\n *    return (<div>\n *      {isOpen && <div>\n *        <Popover append-to=\"some-element-id\">...</mdc-popover>\n *      <div>}\n *    </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
           "customElement": true
         }
       ],
@@ -44291,145 +44276,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
-          "name": "Spinner",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default spinner color.",
-              "name": "--mdc-spinner-default-color"
-            },
-            {
-              "description": "Allows customization of the inverted spinner color.",
-              "name": "--mdc-spinner-inverted-color"
-            },
-            {
-              "description": "Allows customization of the spinner Button variant color.",
-              "name": "--mdc-spinner-button-variant-color"
-            },
-            {
-              "description": "Allows customization of the spinner size.",
-              "name": "--mdc-spinner-size"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
-            },
-            {
-              "description": "The circle of the spinner.",
-              "name": "circle"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "SpinnerSize | undefined"
-              },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "SpinnerVariant"
-              },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "SpinnerSize | undefined"
-              },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
-              "fieldName": "size"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "SpinnerVariant"
-              },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-spinner",
-          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Spinner",
-            "module": "components/spinner/spinner.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/staticcheckbox/staticcheckbox.component.js",
@@ -44903,6 +44749,145 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/spinner/spinner.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
+            },
+            {
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
+            },
+            {
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
+            },
+            {
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
+            },
+            {
+              "description": "The circle of the spinner.",
+              "name": "circle"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SpinnerSize | undefined"
+              },
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/statictoggle/statictoggle.component.js",
@@ -46498,106 +46483,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
-            {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The tablist container.",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeTabId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",
@@ -48034,6 +47919,106 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tablist/tablist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
+          "cssProperties": [
+            {
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
+            },
+            {
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The tablist container.",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "activeTabId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active-tab-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-tablist",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toast/toast.component.js",
@@ -49553,8 +49538,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
-              "default": "1000",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -51251,11 +51235,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -51619,8 +51599,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`.",
-              "default": "1000",
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable.",
               "attribute": "z-index",
               "reflects": true,
               "inheritedFrom": {
@@ -53333,11 +53312,7 @@
             },
             {
               "name": "z-index",
-              "type": {
-                "text": "number"
-              },
-              "description": "The z-index of the popover.",
-              "default": "1000",
+              "description": "The effective z-index of the popover.\n\nIf no explicit `z-index` value is provided, then we calculate\nz-index based on the popover’s nesting depth (`popoverDepth`)\nto ensure proper stacking order among multiple popovers.\n\nThe formula used is: `DEFAULTS.Z_INDEX + (popoverDepth * 3)`.\nThis approach guarantees that each nested popover appears above its parent.\nEx: A root-level popover has a z-index of 1000,\n   its first-level child popover will have a z-index of 1003,\n   and a second-level child popover will have a z-index of 1006, and so on.\n\nWhen a value is explicitly set, it overrides the internally computed value.",
               "fieldName": "zIndex",
               "inheritedFrom": {
                 "name": "Popover",
@@ -54760,7 +54735,7 @@
               "type": {
                 "text": "number"
               },
-              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\nThe backdrop itself will have a z-index of `zIndex - 1`."
+              "description": "IMPLEMENT THIS IN YOUR COMPONENT.\n\nThe z-index of the component where the backdrop will be attached to.\n\nThe backdrop itself will have a z-index of `zIndex - 2`.\nThe trigger element of the backdrop will have a z-index of `zIndex - 1`,\nto make sure that it is above the backdrop and clickable."
             }
           ],
           "parameters": [