@carbon/ibm-products-web-components 0.31.0 → 0.32.0-rc.0

package/es-custom/components/page-header/utils.js

@@ -20,12 +20,24 @@
  */
 const getHeaderOffset = (el) => {
     const scrollableContainer = scrollableAncestor(el);
-    const scrollableContainerTop = scrollableContainer
-        ? scrollableContainer.getBoundingClientRect().top
-        : 0;
+    // Get the element's position relative to the viewport
     const offsetMeasuringTop = el ? el.getBoundingClientRect().top : 0;
-    const totalHeaderOffset = offsetMeasuringTop !== 0 ? offsetMeasuringTop - scrollableContainerTop : 0;
-    return totalHeaderOffset;
+    if (scrollableContainer === document.scrollingElement) {
+        // If scrolling on the document level, return the current viewport position
+        // This ensures the breadcrumb bar stays correctly positioned regardless of scroll
+        return offsetMeasuringTop >= 0 ? offsetMeasuringTop : 0;
+    }
+    else {
+        // If there's a scrollable parent container
+        const scrollableContainerTop = scrollableContainer
+            ? scrollableContainer.getBoundingClientRect().top
+            : 0;
+        // Calculate offset relative to the scrollable container
+        const totalHeaderOffset = offsetMeasuringTop !== 0
+            ? offsetMeasuringTop - scrollableContainerTop
+            : 0;
+        return totalHeaderOffset >= 0 ? totalHeaderOffset : 0;
+    }
 };
 const windowExists = typeof window !== `undefined`;
 /**

package/es-custom/components/page-header/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/page-header/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;AAIG;AAEU,MAAA,eAAe,GAAG,CAAC,EAAe,KAAY;AACzD,IAAA,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,EAAE,CAAC;IAClD,MAAM,sBAAsB,GAAG;AAC7B,UAAG,mBAAmC,CAAC,qBAAqB,EAAE,CAAC;UAC7D,CAAC;AACL,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;AAClE,IAAA,MAAM,iBAAiB,GACrB,kBAAkB,KAAK,CAAC,GAAG,kBAAkB,GAAG,sBAAsB,GAAG,CAAC;AAC5E,IAAA,OAAO,iBAAiB;AAC1B;AAEA,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW;AAElD;;;;;AAKG;AACU,MAAA,UAAU,GAAG,CAAC,MAAmB,KAAa;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;IAC7C,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpD;AAEA;;AAEG;AACU,MAAA,uBAAuB,GAAG,CAAC,MAAmB,KAAI;IAC7D,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvD,QAAA,IAAI,UAAU,CAAC,MAAM,CAAC,UAAyB,CAAC,EAAE;YAChD,OAAO,MAAM,CAAC,UAAU;;aACnB;AACL,YAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC,UAAyB,CAAC;;;SAE7D;QACL,OAAO,QAAQ,CAAC,gBAAgB;;AAEpC;AAEA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAG,CAAC,MAAmB,KAAI;AACxD,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,IAAI;;;IAIb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAE7C,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE;QACnD,OAAO,QAAQ,CAAC,gBAAgB;;AAElC,IAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC;AACxC;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/page-header/utils.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;;;;;;;AAOG;AAEH;;;;AAIG;AAEU,MAAA,eAAe,GAAG,CAAC,EAAe,KAAY;AACzD,IAAA,MAAM,mBAAmB,GAAG,kBAAkB,CAAC,EAAE,CAAC;;AAGlD,IAAA,MAAM,kBAAkB,GAAG,EAAE,GAAG,EAAE,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,CAAC;AAElE,IAAA,IAAI,mBAAmB,KAAK,QAAQ,CAAC,gBAAgB,EAAE;;;QAGrD,OAAO,kBAAkB,IAAI,CAAC,GAAG,kBAAkB,GAAG,CAAC;;SAClD;;QAEL,MAAM,sBAAsB,GAAG;AAC7B,cAAG,mBAAmC,CAAC,qBAAqB,EAAE,CAAC;cAC7D,CAAC;;AAGL,QAAA,MAAM,iBAAiB,GACrB,kBAAkB,KAAK;cACnB,kBAAkB,GAAG;cACrB,CAAC;QACP,OAAO,iBAAiB,IAAI,CAAC,GAAG,iBAAiB,GAAG,CAAC;;AAEzD;AAEA,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW;AAElD;;;;;AAKG;AACU,MAAA,UAAU,GAAG,CAAC,MAAmB,KAAa;IACzD,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;IAC7C,OAAO,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;AACpD;AAEA;;AAEG;AACU,MAAA,uBAAuB,GAAG,CAAC,MAAmB,KAAI;IAC7D,IAAI,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,KAAK,QAAQ,EAAE;AACvD,QAAA,IAAI,UAAU,CAAC,MAAM,CAAC,UAAyB,CAAC,EAAE;YAChD,OAAO,MAAM,CAAC,UAAU;;aACnB;AACL,YAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC,UAAyB,CAAC;;;SAE7D;QACL,OAAO,QAAQ,CAAC,gBAAgB;;AAEpC;AAEA;;;;;AAKG;AACU,MAAA,kBAAkB,GAAG,CAAC,MAAmB,KAAI;AACxD,IAAA,IAAI,CAAC,YAAY,IAAI,CAAC,MAAM,EAAE;AAC5B,QAAA,OAAO,IAAI;;;IAIb,MAAM,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,MAAM,CAAC;AAE7C,IAAA,IAAI,CAAC,MAAM,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,QAAQ,KAAK,OAAO,EAAE;QACnD,OAAO,QAAQ,CAAC,gBAAgB;;AAElC,IAAA,OAAO,uBAAuB,CAAC,MAAM,CAAC;AACxC;;;;"}

package/es-custom/components/side-panel/side-panel.figma.js

@@ -0,0 +1,229 @@
+/**
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './side-panel.js';
+import figma, { html } from '@figma/code-connect/html';
+
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+
+figma.connect(
+  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=8858%3A390246',
+  {
+    props: {
+      size: figma.enum('Size', {
+        'X-Small (256)': 'xs',
+        'Small (320)': 'sm',
+        'Medium (480)': 'md',
+        'Large (640)': 'lg',
+        'X-Large (<75%)': 'xl',
+      }),
+      children: figma.children('Slot'),
+      title: figma.nestedProps('Header', {
+        text: figma.boolean('Title', {
+          true: figma.string('Title text'),
+          false: undefined,
+        }),
+      }),
+      subtitle: figma.nestedProps('Header', {
+        text: figma.string('Description text'),
+      }),
+      labelText: figma.nestedProps('Header', {
+        text: figma.boolean('Eyebrow', {
+          true: figma.string('Eyebrow text'),
+          false: undefined,
+        }),
+      }),
+      slideIn: figma.boolean('Slide over', {
+        true: true,
+        false: undefined,
+      }),
+      placement: figma.boolean('Slide over', {
+        true: undefined,
+        false: 'right',
+      }),
+      selectorPageContent: figma.boolean('Slide over', {
+        true: undefined,
+        false: '#page-content',
+      }),
+      actions: figma.boolean('Primary actions', {
+        false: { actionElements: undefined },
+        true: figma.nestedProps('Footer', {
+          actionElements: figma.enum('Buttons', {
+            '1': html`<cds-custom-button key="p" slot="actions" kind="primary"
+              >Primary</cds-custom-button
+            >`,
+            '2': html`<cds-custom-button slot="actions" kind="secondary"
+                >Secondary</cds-custom-button
+              >
+              <cds-custom-button key="p" slot="actions" kind="primary"
+                >Primary</cds-custom-button
+              >`,
+
+            '3': html`<cds-custom-button slot="actions" kind="secondary"
+                >Secondary</cds-custom-button
+              >
+              <cds-custom-button slot="actions" kind="secondary"
+                >Secondary 2</cds-custom-button
+              >
+              <cds-custom-button key="p" slot="actions" kind="primary"
+                >Primary</cds-custom-button
+              >`,
+            '1 + Ghost': html`<cds-custom-button slot="actions" kind="ghost"
+                >Ghost</cds-custom-button
+              >
+              <cds-custom-button key="p" slot="actions" kind="primary"
+                >Primary</cds-custom-button
+              >`,
+            '2 + Ghost': html`<cds-custom-button slot="actions" kind="ghost"
+                >Ghost</cds-custom-button
+              >
+              <cds-custom-button slot="actions" kind="secondary">Secondary</cds-custom-button>
+              <cds-custom-button slot="actions" kind="primary">Primary</cds-custom-button>`,
+          }),
+        }),
+      }),
+      toolbar: figma.nestedProps('Header', {
+        items: figma.boolean('Action toolbar', {
+          false: { actionsElements: undefined },
+          true: figma.nestedProps('Action toolbar', {
+            actionsElements: figma.boolean('Button', {
+              true: html`<cds-custom-button slot="action-toolbar">Copy</cds-custom-button>
+                <cds-custom-button
+                  slot="action-toolbar"
+                  aria-label="Settings"
+                  has-icon-only="true"
+                  size="sm"
+                  tooltip-text="Settings"
+                  kind="ghost"
+                >
+                  <svg
+                    focusable="false"
+                    preserveAspectRatio="xMidYMid meet"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    slot="icon"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
+                    ></path>
+                    <path
+                      d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
+                    ></path>
+                  </svg>
+                </cds-custom-button>
+                <cds-custom-button
+                  slot="action-toolbar"
+                  aria-label="Delete"
+                  has-icon-only="true"
+                  size="sm"
+                  tooltip-text="Delete"
+                  kind="ghost"
+                >
+                  <svg
+                    focusable="false"
+                    preserveAspectRatio="xMidYMid meet"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    slot="icon"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    aria-hidden="true"
+                  >
+                    <path d="M12 12H14V24H12zM18 12H20V24H18z"></path>
+                    <path
+                      d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"
+                    ></path>
+                  </svg>
+                </cds-custom-button>`,
+              false: html`<cds-custom-button
+                  slot="action-toolbar"
+                  aria-label="Settings"
+                  has-icon-only="true"
+                  size="sm"
+                  tooltip-text="Settings"
+                  kind="ghost"
+                >
+                  <svg
+                    focusable="false"
+                    preserveAspectRatio="xMidYMid meet"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    slot="icon"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"
+                    ></path>
+                    <path
+                      d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
+                    ></path>
+                  </svg>
+                </cds-custom-button>
+                <cds-custom-button
+                  slot="action-toolbar"
+                  aria-label="Delete"
+                  has-icon-only="true"
+                  size="sm"
+                  tooltip-text="Delete"
+                  kind="ghost"
+                >
+                  <svg
+                    focusable="false"
+                    preserveAspectRatio="xMidYMid meet"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="currentColor"
+                    slot="icon"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 32 32"
+                    aria-hidden="true"
+                  >
+                    <path d="M12 12H14V24H12zM18 12H20V24H18z"></path>
+                    <path
+                      d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"
+                    ></path>
+                  </svg>
+                </cds-custom-button>`,
+            }),
+          }),
+        }),
+      }),
+    },
+    example: (props) => html`
+      <c4p-side-panel
+        open
+        label-text="${props.labelText.text}"
+        slide-in="${props.slideIn}"
+        size="${props.size}"
+        placement=${props.placement}
+        selector-page-content=${props.selectorPageContent}
+        .title="${props.title.text}"
+      >
+        ${props.subtitle.text} ${props.toolbar.items.actionsElements}
+        ${props.actions.actionElements} ${props.children}
+      </c4p-side-panel>
+    `,
+    imports: [
+      "import '@carbon/ibm-products-web-components/es/components/side-panel/index';",
+    ],
+  }
+);
+//# sourceMappingURL=side-panel.figma.js.map

package/es-custom/components/side-panel/side-panel.figma.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-panel.figma.js","sources":["../../../src/components/side-panel/side-panel.figma.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport './side-panel';\nimport figma, { html } from '@figma/code-connect/html';\n\nfigma.connect(\n  'https://www.figma.com/design/0F9dKH2abAd7gSfvnacfWf/-v11--IBM-Products-%E2%80%93-Carbon-Design-System?node-id=8858%3A390246',\n  {\n    props: {\n      size: figma.enum('Size', {\n        'X-Small (256)': 'xs',\n        'Small (320)': 'sm',\n        'Medium (480)': 'md',\n        'Large (640)': 'lg',\n        'X-Large (<75%)': 'xl',\n      }),\n      children: figma.children('Slot'),\n      title: figma.nestedProps('Header', {\n        text: figma.boolean('Title', {\n          true: figma.string('Title text'),\n          false: undefined,\n        }),\n      }),\n      subtitle: figma.nestedProps('Header', {\n        text: figma.string('Description text'),\n      }),\n      labelText: figma.nestedProps('Header', {\n        text: figma.boolean('Eyebrow', {\n          true: figma.string('Eyebrow text'),\n          false: undefined,\n        }),\n      }),\n      slideIn: figma.boolean('Slide over', {\n        true: true,\n        false: undefined,\n      }),\n      placement: figma.boolean('Slide over', {\n        true: undefined,\n        false: 'right',\n      }),\n      selectorPageContent: figma.boolean('Slide over', {\n        true: undefined,\n        false: '#page-content',\n      }),\n      actions: figma.boolean('Primary actions', {\n        false: { actionElements: undefined },\n        true: figma.nestedProps('Footer', {\n          actionElements: figma.enum('Buttons', {\n            '1': html`<cds-custom-button key=\"p\" slot=\"actions\" kind=\"primary\"\n              >Primary</cds-custom-button\n            >`,\n            '2': html`<cds-custom-button slot=\"actions\" kind=\"secondary\"\n                >Secondary</cds-custom-button\n              >\n              <cds-custom-button key=\"p\" slot=\"actions\" kind=\"primary\"\n                >Primary</cds-custom-button\n              >`,\n\n            '3': html`<cds-custom-button slot=\"actions\" kind=\"secondary\"\n                >Secondary</cds-custom-button\n              >\n              <cds-custom-button slot=\"actions\" kind=\"secondary\"\n                >Secondary 2</cds-custom-button\n              >\n              <cds-custom-button key=\"p\" slot=\"actions\" kind=\"primary\"\n                >Primary</cds-custom-button\n              >`,\n            '1 + Ghost': html`<cds-custom-button slot=\"actions\" kind=\"ghost\"\n                >Ghost</cds-custom-button\n              >\n              <cds-custom-button key=\"p\" slot=\"actions\" kind=\"primary\"\n                >Primary</cds-custom-button\n              >`,\n            '2 + Ghost': html`<cds-custom-button slot=\"actions\" kind=\"ghost\"\n                >Ghost</cds-custom-button\n              >\n              <cds-custom-button slot=\"actions\" kind=\"secondary\">Secondary</cds-custom-button>\n              <cds-custom-button slot=\"actions\" kind=\"primary\">Primary</cds-custom-button>`,\n          }),\n        }),\n      }),\n      toolbar: figma.nestedProps('Header', {\n        items: figma.boolean('Action toolbar', {\n          false: { actionsElements: undefined },\n          true: figma.nestedProps('Action toolbar', {\n            actionsElements: figma.boolean('Button', {\n              true: html`<cds-custom-button slot=\"action-toolbar\">Copy</cds-custom-button>\n                <cds-custom-button\n                  slot=\"action-toolbar\"\n                  aria-label=\"Settings\"\n                  has-icon-only=\"true\"\n                  size=\"sm\"\n                  tooltip-text=\"Settings\"\n                  kind=\"ghost\"\n                >\n                  <svg\n                    focusable=\"false\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"currentColor\"\n                    slot=\"icon\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      d=\"M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3\tc-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1\tC5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4\tc0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4\tc0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4\tc0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8\tL9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6\tC5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z\"\n                    ></path>\n                    <path\n                      d=\"M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8\tc0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z\"\n                    ></path>\n                  </svg>\n                </cds-custom-button>\n                <cds-custom-button\n                  slot=\"action-toolbar\"\n                  aria-label=\"Delete\"\n                  has-icon-only=\"true\"\n                  size=\"sm\"\n                  tooltip-text=\"Delete\"\n                  kind=\"ghost\"\n                >\n                  <svg\n                    focusable=\"false\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"currentColor\"\n                    slot=\"icon\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 32 32\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M12 12H14V24H12zM18 12H20V24H18z\"></path>\n                    <path\n                      d=\"M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z\"\n                    ></path>\n                  </svg>\n                </cds-custom-button>`,\n              false: html`<cds-custom-button\n                  slot=\"action-toolbar\"\n                  aria-label=\"Settings\"\n                  has-icon-only=\"true\"\n                  size=\"sm\"\n                  tooltip-text=\"Settings\"\n                  kind=\"ghost\"\n                >\n                  <svg\n                    focusable=\"false\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"currentColor\"\n                    slot=\"icon\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 16 16\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      d=\"M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3\tc-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1\tC5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4\tc0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4\tc0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4\tc0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8\tL9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6\tC5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z\"\n                    ></path>\n                    <path\n                      d=\"M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8\tc0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z\"\n                    ></path>\n                  </svg>\n                </cds-custom-button>\n                <cds-custom-button\n                  slot=\"action-toolbar\"\n                  aria-label=\"Delete\"\n                  has-icon-only=\"true\"\n                  size=\"sm\"\n                  tooltip-text=\"Delete\"\n                  kind=\"ghost\"\n                >\n                  <svg\n                    focusable=\"false\"\n                    preserveAspectRatio=\"xMidYMid meet\"\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    fill=\"currentColor\"\n                    slot=\"icon\"\n                    width=\"16\"\n                    height=\"16\"\n                    viewBox=\"0 0 32 32\"\n                    aria-hidden=\"true\"\n                  >\n                    <path d=\"M12 12H14V24H12zM18 12H20V24H18z\"></path>\n                    <path\n                      d=\"M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z\"\n                    ></path>\n                  </svg>\n                </cds-custom-button>`,\n            }),\n          }),\n        }),\n      }),\n    },\n    example: (props) => html`\n      <c4p-side-panel\n        open\n        label-text=\"${props.labelText.text}\"\n        slide-in=\"${props.slideIn}\"\n        size=\"${props.size}\"\n        placement=${props.placement}\n        selector-page-content=${props.selectorPageContent}\n        .title=\"${props.title.text}\"\n      >\n        ${props.subtitle.text} ${props.toolbar.items.actionsElements}\n        ${props.actions.actionElements} ${props.children}\n      </c4p-side-panel>\n    `,\n    imports: [\n      \"import '@carbon/ibm-products-web-components/es/components/side-panel/index';\",\n    ],\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;;;AAKA,KAAK,CAAC,OAAO;AACb,EAAE,6HAA6H;AAC/H,EAAE;AACF,IAAI,KAAK,EAAE;AACX,MAAM,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE;AAC/B,QAAQ,eAAe,EAAE,IAAI;AAC7B,QAAQ,aAAa,EAAE,IAAI;AAC3B,QAAQ,cAAc,EAAE,IAAI;AAC5B,QAAQ,aAAa,EAAE,IAAI;AAC3B,QAAQ,gBAAgB,EAAE,IAAI;AAC9B,OAAO,CAAC;AACR,MAAM,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC;AACtC,MAAM,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AACzC,QAAQ,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,OAAO,EAAE;AACrC,UAAU,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC;AAC1C,UAAU,KAAK,EAAE,SAAS;AAC1B,SAAS,CAAC;AACV,OAAO,CAAC;AACR,MAAM,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC5C,QAAQ,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,kBAAkB,CAAC;AAC9C,OAAO,CAAC;AACR,MAAM,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC7C,QAAQ,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE;AACvC,UAAU,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,cAAc,CAAC;AAC5C,UAAU,KAAK,EAAE,SAAS;AAC1B,SAAS,CAAC;AACV,OAAO,CAAC;AACR,MAAM,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;AAC3C,QAAQ,IAAI,EAAE,IAAI;AAClB,QAAQ,KAAK,EAAE,SAAS;AACxB,OAAO,CAAC;AACR,MAAM,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;AAC7C,QAAQ,IAAI,EAAE,SAAS;AACvB,QAAQ,KAAK,EAAE,OAAO;AACtB,OAAO,CAAC;AACR,MAAM,mBAAmB,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,EAAE;AACvD,QAAQ,IAAI,EAAE,SAAS;AACvB,QAAQ,KAAK,EAAE,eAAe;AAC9B,OAAO,CAAC;AACR,MAAM,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,iBAAiB,EAAE;AAChD,QAAQ,KAAK,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE;AAC5C,QAAQ,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC1C,UAAU,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE;AAChD,YAAY,GAAG,EAAE,IAAI,CAAC;AACtB;AACA,aAAa,CAAC;AACd,YAAY,GAAG,EAAE,IAAI,CAAC;AACtB;AACA;AACA;AACA;AACA,eAAe,CAAC;;AAEhB,YAAY,GAAG,EAAE,IAAI,CAAC;AACtB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,CAAC;AAChB,YAAY,WAAW,EAAE,IAAI,CAAC;AAC9B;AACA;AACA;AACA;AACA,eAAe,CAAC;AAChB,YAAY,WAAW,EAAE,IAAI,CAAC;AAC9B;AACA;AACA;AACA,4EAA4E,CAAC;AAC7E,WAAW,CAAC;AACZ,SAAS,CAAC;AACV,OAAO,CAAC;AACR,MAAM,OAAO,EAAE,KAAK,CAAC,WAAW,CAAC,QAAQ,EAAE;AAC3C,QAAQ,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,gBAAgB,EAAE;AAC/C,UAAU,KAAK,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE;AAC/C,UAAU,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,EAAE;AACpD,YAAY,eAAe,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE;AACrD,cAAc,IAAI,EAAE,IAAI,CAAC;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;AAC9B,cAAc,KAAK,EAAE,IAAI,CAAC;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,CAAC;AAC9B,aAAa,CAAC;AACd,WAAW,CAAC;AACZ,SAAS,CAAC;AACV,OAAO,CAAC;AACR,KAAK;AACL,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI;AAC5B;AACA;AACA,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC;AAC3C,kBAAkB,EAAE,KAAK,CAAC,OAAO,CAAC;AAClC,cAAc,EAAE,KAAK,CAAC,IAAI,CAAC;AAC3B,kBAAkB,EAAE,KAAK,CAAC,SAAS;AACnC,8BAA8B,EAAE,KAAK,CAAC,mBAAmB;AACzD,gBAAgB,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC;AACnC;AACA,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,eAAe;AACpE,QAAQ,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,EAAE,KAAK,CAAC,QAAQ;AACxD;AACA,IAAI,CAAC;AACL,IAAI,OAAO,EAAE;AACb,MAAM,8EAA8E;AACpF,KAAK;AACL;AACA,CAAC"}

package/es-custom/components/tearsheet/tearsheet.d.ts

@@ -44,7 +44,27 @@ declare const CDSTearsheet_base: {
         hidePopover(): void;
         showPopover(): void;
         togglePopover(options?: boolean): boolean;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options
+        /**
+         * Tearsheet.
+         *
+         * @element c4p-tearsheet
+         * @csspart dialog The dialog.
+         * @fires c4p-tearsheet-beingclosed
+         *   The custom event fired before this tearsheet is being closed upon a user gesture.
+         *   Cancellation of this event stops the user-initiated action of closing this tearsheet.
+         * @fires c4p-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.
+         */
+        ? /**
+         * Tearsheet.
+         *
+         * @element c4p-tearsheet
+         * @csspart dialog The dialog.
+         * @fires c4p-tearsheet-beingclosed
+         *   The custom event fired before this tearsheet is being closed upon a user gesture.
+         *   Cancellation of this event stops the user-initiated action of closing this tearsheet.
+         * @fires c4p-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.
+         */: boolean | AddEventListenerOptions): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
         removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
         removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
@@ -392,14 +412,6 @@ declare class CDSTearsheet extends CDSTearsheet_base {
      * The element that had focus before this tearsheet gets open.
      */
     private _launcher;
-    /**
-     * Node to track focus going outside of tearsheet content.
-     */
-    private _startSentinelNode;
-    /**
-     * Node to track focus going outside of tearsheet content.
-     */
-    private _endSentinelNode;
     /**
      * Node to track tearsheet.
      */
@@ -424,14 +436,21 @@ declare class CDSTearsheet extends CDSTearsheet_base {
      */
     private _handleClick;
     /**
-     * Handles `blur` event on this element.
+     * Get focusable elements.
      *
-     * @param event The event.
-     * @param event.target The event target.
-     * @param event.relatedTarget The event relatedTarget.
+     * Querying all tabbable items.
+     *
+     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
      */
-    private _handleBlur;
+    private getFocusable;
     private _handleKeydown;
+    /**
+     * Handle the keydown event.
+     * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
+     *
+     * @param {KeyboardEvent} event The keyboard event object.
+     */
+    protected _handleHostKeydown: (event: KeyboardEvent) => void;
     private _checkSetHasSlot;
     /**
      * Handles `click` event on the modal container.

package/es-custom/components/tearsheet/tearsheet.js

@@ -8,10 +8,11 @@
 import { __decorate } from 'tslib';
 import { LitElement, html } from 'lit';
 import { query, queryAssignedElements, state, property } from 'lit/decorators.js';
-import { prefix, carbonPrefix, selectorTabbable } from '../../globals/settings.js';
+import { carbonPrefix, prefix } from '../../globals/settings.js';
 import HostListener from '@carbon/web-components/es/globals/decorators/host-listener.js';
 import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-listener.js';
 import styles from './tearsheet.scss.js';
+import { selectorTabbable } from '@carbon/web-components/es/globals/settings.js';
 import pconsole from '../../globals/internal/pconsole.js';
 import { carbonElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
 import '@carbon/web-components/es-custom/components/button/index.js';
@@ -30,34 +31,9 @@ import { TEARSHEET_INFLUENCER_PLACEMENT, TEARSHEET_INFLUENCER_WIDTH, TEARSHEET_W
  */
 var CDSTearsheet_1;
 const maxStackDepth = 3;
-const PRECEDING = 
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
-const FOLLOWING = 
-// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
-Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;
 const blockClass = `${prefix}--tearsheet`;
 const blockClassModalHeader = `${carbonPrefix}--modal-header`;
 const blockClassActionSet = `${prefix}--action-set`;
-/**
- * Tries to focus on the given elements and bails out if one of them is successful.
- *
- * @param elements The elements.
- * @param reverse `true` to go through the list in reverse order.
- * @returns `true` if one of the attempts is successful, `false` otherwise.
- */
-function tryFocusElements(elements, reverse) {
-    {
-        for (let i = elements.length - 1; i >= 0; --i) {
-            const elem = elements[i];
-            elem.focus();
-            if (elem.ownerDocument.activeElement === elem) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
 /**
  * Tearsheet.
  *
@@ -98,56 +74,33 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
                 this._handleUserInitiatedClose(event.target);
             }
         };
+        this._handleKeydown = ({ key, target }) => {
+            if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {
+                this._handleUserInitiatedClose(target);
+            }
+        };
         /**
-         * Handles `blur` event on this element.
+         * Handle the keydown event.
+         * Trap the focus inside the side-panel by tracking keydown.key == `Tab`
          *
-         * @param event The event.
-         * @param event.target The event target.
-         * @param event.relatedTarget The event relatedTarget.
+         * @param {KeyboardEvent} event The keyboard event object.
          */
-        this._handleBlur = async ({ target, relatedTarget }) => {
+        this._handleHostKeydown = (event) => {
             var _a;
-            if (!this._topOfStack()) {
-                return;
-            }
-            const { 
-            // condensedActions,
-            open, _startSentinelNode: startSentinelNode, _endSentinelNode: endSentinelNode, } = this;
-            const oldContains = target !== this && this.contains(target);
-            const currentContains = relatedTarget !== this &&
-                (this.contains(relatedTarget) ||
-                    (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) &&
-                        relatedTarget !== startSentinelNode &&
-                        relatedTarget !== endSentinelNode));
-            // Performs focus wrapping if _all_ of the following is met:
-            // * This tearsheet is open
-            // * The viewport still has focus
-            // * Tearsheet body used to have focus but no longer has focus
-            const { selectorTabbable: selectorTabbableForTearsheet } = this
-                .constructor;
-            if (open && relatedTarget && oldContains && !currentContains) {
-                const comparisonResult = target.compareDocumentPosition(relatedTarget);
-                if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {
-                    await this.constructor._delay();
-                    if (!tryFocusElements(this.querySelectorAll(selectorTabbableForTearsheet)) &&
-                        relatedTarget !== this) {
-                        this.focus();
-                    }
+            if (event.key === 'Tab') {
+                const { first: _firstElement, last: _lastElement } = this.getFocusable();
+                if (event.shiftKey &&
+                    (((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === _firstElement ||
+                        document.activeElement === _firstElement)) {
+                    event.preventDefault();
+                    _lastElement === null || _lastElement === void 0 ? void 0 : _lastElement.focus();
                 }
-                else if (relatedTarget === endSentinelNode ||
-                    comparisonResult & FOLLOWING) {
-                    await this.constructor._delay();
-                    if (!tryFocusElements(this.querySelectorAll(selectorTabbableForTearsheet))) {
-                        this.focus();
-                    }
+                else if (!event.shiftKey && document.activeElement === _lastElement) {
+                    event.preventDefault();
+                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
                 }
             }
         };
-        this._handleKeydown = ({ key, target }) => {
-            if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {
-                this._handleUserInitiatedClose(target);
-            }
-        };
         /**
          * Optional aria label for the tearsheet
          */
@@ -250,6 +203,40 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
             }
         };
     }
+    /**
+     * Get focusable elements.
+     *
+     * Querying all tabbable items.
+     *
+     * @returns {{first: HTMLElement, last: HTMLElement, all: HTMLElement[]}} Returns an object with various elements.
+     */
+    getFocusable() {
+        var _a, _b;
+        const elements = [];
+        // Add slug elements if present
+        if (this._hasSlug) {
+            elements.push(this.querySelectorAll(`${carbonPrefix}-slug`));
+        }
+        // Add close button if not hidden
+        if (this.hasCloseIcon) {
+            const closeButtons = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`${carbonPrefix}-modal-close-button`);
+            if (closeButtons) {
+                elements.push(closeButtons);
+            }
+        }
+        // Add tabbable elements inside light DOM
+        const _tabbableItems = this.querySelectorAll(selectorTabbable);
+        if (_tabbableItems) {
+            elements.push(_tabbableItems);
+        }
+        // Flatten NodeList arrays and filter for focusable items
+        const all = (_b = elements === null || elements === void 0 ? void 0 : elements.flatMap((nodeList) => Array.from(nodeList))) === null || _b === void 0 ? void 0 : _b.filter((el) => typeof (el === null || el === void 0 ? void 0 : el.focus) === 'function');
+        return {
+            first: all[0],
+            last: all[all.length - 1],
+            all,
+        };
+    }
     _checkSetHasSlot(e) {
         var _a, _b;
         const t = e.target;
@@ -426,12 +413,6 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
     </cds-custom-modal-header>`;
         if (this._stackPosition <= this._stackDepth) {
             return html `
-        <a
-          id="start-sentinel"
-          class="${prefix}--visually-hidden"
-          href="javascript:void 0"
-          role="navigation"
-        ></a>
         <div
           aria-label=${this.ariaLabel}
           class=${`${blockClass}__container ${carbonPrefix}--modal-container ${carbonPrefix}--modal-container--sm`}
@@ -507,12 +488,6 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
             </div>
           </cds-custom-modal-body>
         </div>
-        <a
-          id="end-sentinel"
-          class="${prefix}--visually-hidden"
-          href="javascript:void 0"
-          role="navigation"
-        ></a>
       `;
         }
         else {
@@ -521,6 +496,7 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
         }
     }
     async updated(changedProperties) {
+        var _a, _b;
         if (changedProperties.has('width')) {
             this._checkUpdateActionSizes();
         }
@@ -547,16 +523,14 @@ let CDSTearsheet = CDSTearsheet_1 = class CDSTearsheet extends HostListenerMixin
             this._checkSetOpen();
             if (this.open) {
                 this._launcher = this.ownerDocument.activeElement;
-                const focusNode = this.selectorInitialFocus &&
-                    this.querySelector(this.selectorInitialFocus);
                 await this.constructor._delay();
-                if (focusNode) {
-                    // For cases where a `carbon-web-components` component (e.g. `<cds-custom-button>`) being `primaryFocusNode`,
-                    // where its first update/render cycle that makes it focusable happens after `<c4p-tearsheet>`'s first update/render cycle
-                    focusNode.focus();
+                if ((_b = (_a = this.selectorInitialFocus) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.length) {
+                    const focusNode = this.querySelector(this.selectorInitialFocus);
+                    focusNode === null || focusNode === void 0 ? void 0 : focusNode.focus();
                 }
-                else if (!tryFocusElements(this.querySelectorAll(this.constructor.selectorTabbable))) {
-                    this.focus();
+                else {
+                    const { first: _firstElement } = this.getFocusable();
+                    _firstElement === null || _firstElement === void 0 ? void 0 : _firstElement.focus();
                 }
             }
             else if (this._launcher &&
@@ -612,12 +586,6 @@ CDSTearsheet._stack = {
     all: [],
 };
 CDSTearsheet.styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-__decorate([
-    query('#start-sentinel')
-], CDSTearsheet.prototype, "_startSentinelNode", void 0);
-__decorate([
-    query('#end-sentinel')
-], CDSTearsheet.prototype, "_endSentinelNode", void 0);
 __decorate([
     query(`.${blockClass}__container`)
 ], CDSTearsheet.prototype, "_tearsheet", void 0);
@@ -667,14 +635,13 @@ __decorate([
     HostListener('click')
     // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
 ], CDSTearsheet.prototype, "_handleClick", void 0);
-__decorate([
-    HostListener('shadowRoot:focusout')
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSTearsheet.prototype, "_handleBlur", void 0);
 __decorate([
     HostListener('document:keydown')
     // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
 ], CDSTearsheet.prototype, "_handleKeydown", void 0);
+__decorate([
+    HostListener('keydown')
+], CDSTearsheet.prototype, "_handleHostKeydown", void 0);
 __decorate([
     property({ reflect: true, attribute: 'aria-label' })
 ], CDSTearsheet.prototype, "ariaLabel", void 0);