@carbon/web-components 2.41.0-rc.0 → 2.41.1

package/lib/components/popover/defs.d.ts

@@ -105,3 +105,16 @@ export declare enum POPOVER_ALIGNMENT {
      */
     RIGHT_END = "right-end"
 }
+/**
+ * The background token options for popover.
+ */
+export declare enum POPOVER_BACKGROUND_TOKEN {
+    /**
+     * Use the layer token for the background.
+     */
+    LAYER = "layer",
+    /**
+     * Use the background token for the background.
+     */
+    BACKGROUND = "background"
+}

package/lib/components/popover/defs.js

@@ -115,4 +115,18 @@ exports.POPOVER_ALIGNMENT = void 0;
      */
     POPOVER_ALIGNMENT["RIGHT_END"] = "right-end";
 })(exports.POPOVER_ALIGNMENT || (exports.POPOVER_ALIGNMENT = {}));
+/**
+ * The background token options for popover.
+ */
+exports.POPOVER_BACKGROUND_TOKEN = void 0;
+(function (POPOVER_BACKGROUND_TOKEN) {
+    /**
+     * Use the layer token for the background.
+     */
+    POPOVER_BACKGROUND_TOKEN["LAYER"] = "layer";
+    /**
+     * Use the background token for the background.
+     */
+    POPOVER_BACKGROUND_TOKEN["BACKGROUND"] = "background";
+})(exports.POPOVER_BACKGROUND_TOKEN || (exports.POPOVER_BACKGROUND_TOKEN = {}));
 //# sourceMappingURL=defs.js.map

package/lib/components/popover/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../src/components/popover/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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/**\n * The alignment choices of popover.\n */\nexport enum POPOVER_ALIGNMENT {\n  /**\n   * Align the top position for the popover content.\n   */\n  TOP = 'top',\n\n  /**\n   * Align the top-left position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_LEFT = 'top-left',\n\n  /**\n   * Align the top right position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_RIGHT = 'top-right',\n\n  /**\n   * Align the top-start position for the popover content.\n   */\n  TOP_START = 'top-start',\n\n  /**\n   * Align the top end position for the popover content.\n   */\n  TOP_END = 'top-end',\n\n  /**\n   * Align the bottom position for the popover content.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Align the bottom left position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_LEFT = 'bottom-left',\n\n  /**\n   * Align the bottom right position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_RIGHT = 'bottom-right',\n\n  /**\n   * Align the bottom start position for the popover content.\n   */\n  BOTTOM_START = 'bottom-start',\n\n  /**\n   * Align the bottom end position for the popover content.\n   */\n  BOTTOM_END = 'bottom-end',\n\n  /**\n   * Align the left position for the popover content.\n   */\n  LEFT = 'left',\n\n  /**\n   * Align the left bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_BOTTOM = 'left-bottom',\n\n  /**\n   * Align the left top position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_TOP = 'left-top',\n\n  /**\n   * Align the left start position for the popover content.\n   */\n  LEFT_START = 'left-start',\n\n  /**\n   * Align the left end position for the popover content.\n   */\n  LEFT_END = 'left-end',\n\n  /**\n   * Align the right position for the popover content.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Align the right bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_BOTTOM = 'right-bottom',\n\n  /**\n   * Align the right top position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_TOP = 'right-top',\n\n  /**\n   * Align the right start position for the popover content.\n   */\n  RIGHT_START = 'right-start',\n\n  /**\n   * Align the right end position for the popover content.\n   */\n  RIGHT_END = 'right-end',\n}\n"],"names":["POPOVER_ALIGNMENT"],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AACH;;AAEG;AACSA;AAAZ,CAAA,UAAY,iBAAiB,EAAA;AAC3B;;AAEG;AACH,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;;;AAIG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;;;AAIG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AAEnB;;AAEG;AACH,IAAA,iBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AAEjB;;;;AAIG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;AAEG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;AAEG;AACH,IAAA,iBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAEzB;;AAEG;AACH,IAAA,iBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAEb;;;;AAIG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;AAEG;AACH,IAAA,iBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAEzB;;AAEG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;AAEG;AACH,IAAA,iBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AAEf;;;;AAIG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;AAEG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EApHWA,yBAAiB,KAAjBA,yBAAiB,GAoH5B,EAAA,CAAA,CAAA;;"}
+{"version":3,"file":"defs.js","sources":["../../../src/components/popover/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2024\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/**\n * The alignment choices of popover.\n */\nexport enum POPOVER_ALIGNMENT {\n  /**\n   * Align the top position for the popover content.\n   */\n  TOP = 'top',\n\n  /**\n   * Align the top-left position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_LEFT = 'top-left',\n\n  /**\n   * Align the top right position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_RIGHT = 'top-right',\n\n  /**\n   * Align the top-start position for the popover content.\n   */\n  TOP_START = 'top-start',\n\n  /**\n   * Align the top end position for the popover content.\n   */\n  TOP_END = 'top-end',\n\n  /**\n   * Align the bottom position for the popover content.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Align the bottom left position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_LEFT = 'bottom-left',\n\n  /**\n   * Align the bottom right position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_RIGHT = 'bottom-right',\n\n  /**\n   * Align the bottom start position for the popover content.\n   */\n  BOTTOM_START = 'bottom-start',\n\n  /**\n   * Align the bottom end position for the popover content.\n   */\n  BOTTOM_END = 'bottom-end',\n\n  /**\n   * Align the left position for the popover content.\n   */\n  LEFT = 'left',\n\n  /**\n   * Align the left bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_BOTTOM = 'left-bottom',\n\n  /**\n   * Align the left top position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_TOP = 'left-top',\n\n  /**\n   * Align the left start position for the popover content.\n   */\n  LEFT_START = 'left-start',\n\n  /**\n   * Align the left end position for the popover content.\n   */\n  LEFT_END = 'left-end',\n\n  /**\n   * Align the right position for the popover content.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Align the right bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_BOTTOM = 'right-bottom',\n\n  /**\n   * Align the right top position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_TOP = 'right-top',\n\n  /**\n   * Align the right start position for the popover content.\n   */\n  RIGHT_START = 'right-start',\n\n  /**\n   * Align the right end position for the popover content.\n   */\n  RIGHT_END = 'right-end',\n}\n\n/**\n * The background token options for popover.\n */\nexport enum POPOVER_BACKGROUND_TOKEN {\n  /**\n   * Use the layer token for the background.\n   */\n  LAYER = 'layer',\n\n  /**\n   * Use the background token for the background.\n   */\n  BACKGROUND = 'background',\n}\n"],"names":["POPOVER_ALIGNMENT","POPOVER_BACKGROUND_TOKEN"],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AACH;;AAEG;AACSA;AAAZ,CAAA,UAAY,iBAAiB,EAAA;AAC3B;;AAEG;AACH,IAAA,iBAAA,CAAA,KAAA,CAAA,GAAA,KAAW;AAEX;;;;AAIG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;;;AAIG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,SAAA,CAAA,GAAA,SAAmB;AAEnB;;AAEG;AACH,IAAA,iBAAA,CAAA,QAAA,CAAA,GAAA,QAAiB;AAEjB;;;;AAIG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;AAEG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;AAEG;AACH,IAAA,iBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAEzB;;AAEG;AACH,IAAA,iBAAA,CAAA,MAAA,CAAA,GAAA,MAAa;AAEb;;;;AAIG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;AAEG;AACH,IAAA,iBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAEzB;;AAEG;AACH,IAAA,iBAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AAErB;;AAEG;AACH,IAAA,iBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AAEf;;;;AAIG;AACH,IAAA,iBAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAE7B;;;;AAIG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AAEvB;;AAEG;AACH,IAAA,iBAAA,CAAA,aAAA,CAAA,GAAA,aAA2B;AAE3B;;AAEG;AACH,IAAA,iBAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EApHWA,yBAAiB,KAAjBA,yBAAiB,GAoH5B,EAAA,CAAA,CAAA;AAED;;AAEG;AACSC;AAAZ,CAAA,UAAY,wBAAwB,EAAA;AAClC;;AAEG;AACH,IAAA,wBAAA,CAAA,OAAA,CAAA,GAAA,OAAe;AAEf;;AAEG;AACH,IAAA,wBAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAVWA,gCAAwB,KAAxBA,gCAAwB,GAUnC,EAAA,CAAA,CAAA;;"}

package/lib/components/popover/popover-content.d.ts

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
+import { POPOVER_BACKGROUND_TOKEN } from './defs';
 /**
  * Popover.
  *
@@ -27,6 +28,14 @@ declare class CDSPopoverContent extends LitElement {
      * Specify whether a dropShadow should be rendered
      */
     dropShadow: boolean;
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border: boolean;
+    /**
+     * Render the component using the high-contrast variant
+     */
+    highContrast: boolean;
     /**
      * Specify whether the component is currently open or closed
      */
@@ -35,6 +44,10 @@ declare class CDSPopoverContent extends LitElement {
      * Render the component using the tab tip variant
      */
     tabTip: boolean;
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken: POPOVER_BACKGROUND_TOKEN;
     /**
      * The shadow slot this popover content should be in.
      */

package/lib/components/popover/popover.d.ts

@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 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.
  */
 import { LitElement } from 'lit';
+import { POPOVER_BACKGROUND_TOKEN } from './defs';
 declare const CDSPopover_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
@@ -403,6 +404,10 @@ declare class CDSPopover extends CDSPopover_base {
      * Specify whether a dropShadow should be rendered
      */
     dropShadow: boolean;
+    /**
+     * Specify whether a border should be rendered on the popover
+     */
+    border: boolean;
     /**
      * Render the component using the high-contrast variant
      */
@@ -415,6 +420,10 @@ declare class CDSPopover extends CDSPopover_base {
      * Render the component using the tab tip variant
      */
     tabTip: boolean;
+    /**
+     * Specify the background token to use. Default is 'layer'.
+     */
+    backgroundToken: POPOVER_BACKGROUND_TOKEN;
     /**
      * Handles `slotchange` event.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.41.0-rc.0",
+  "version": "2.41.1",
   "license": "Apache-2.0",
   "main": "es/index.js",
   "module": "es/index.js",
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@carbon/icon-helpers": "10.47.0",
-    "@carbon/styles": "^1.93.0-rc.0",
+    "@carbon/styles": "^1.93.1",
     "@floating-ui/dom": "^1.6.3",
     "@ibm/telemetry-js": "^1.10.2",
     "@lit/context": "^1.1.3",
@@ -77,7 +77,7 @@
     "tslib": "^2.6.3"
   },
   "devDependencies": {
-    "@carbon/icons": "^11.70.0-rc.0",
+    "@carbon/icons": "^11.70.0",
     "@carbon/layout": "^11.43.0",
     "@carbon/motion": "^11.37.0",
     "@juggle/resize-observer": "^3.4.0",
@@ -130,5 +130,5 @@
       }
     ]
   },
-  "gitHead": "dff507858b43de91b300a98fa1bec24d38aaeb48"
+  "gitHead": "a932119dba9a4fe9c73dbb88058e9e21c42f8486"
 }

package/scss/components/popover/popover.scss

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 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.
@@ -30,6 +30,18 @@ $popover-caret-height: custom-property.get-var(
   rem(6px)
 );
 
+// The drop shadow value used for the popover container
+$popover-drop-shadow: custom-property.get-var(
+  'popover-drop-shadow',
+  drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2))
+);
+
+// The border value used for the popover container
+$popover-border-color: custom-property.get-var(
+  'popover-border-color',
+  theme.$border-subtle
+);
+
 :host(#{$prefix}-tooltip),
 :host(#{$prefix}-popover) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
@@ -45,6 +57,26 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+:host(
+    #{$prefix}-popover-content[backgroundToken='background']:not([highContrast])
+  ) {
+  .#{$prefix}--popover-content {
+    background: theme.$background;
+  }
+}
+
+:host(
+    #{$prefix}-popover-content[open][caret][backgroundToken='background']:not(
+        [highContrast]
+      )
+  ) {
+  .#{$prefix}--popover-caret {
+    &::after {
+      background: theme.$background;
+    }
+  }
+}
+
 :host(#{$prefix}-popover[tabTip][open]) {
   ::slotted(.#{$prefix}--popover--tab-tip__button) {
     background: theme.$layer !important; /* stylelint-disable-line declaration-no-important */
@@ -82,16 +114,63 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-slug[open]) {
   .#{$prefix}--popover-caret {
     display: block;
+
+    // caret background
+    &::after {
+      position: absolute;
+      display: block;
+      background: theme.$layer;
+      content: '';
+    }
+
+    // caret border
+    &::before {
+      position: absolute;
+      display: none;
+      background-color: $popover-border-color;
+      content: '';
+    }
+  }
+}
+
+:host(#{$prefix}-tooltip-content[open][caret][highContrast]),
+:host(#{$prefix}-popover-content[open][caret][highContrast]) {
+  .#{$prefix}--popover-caret {
+    &::after {
+      background: theme.$background-inverse;
+    }
   }
 }
 
+:host(#{$prefix}-tooltip-content[border]),
+:host(#{$prefix}-popover-content[border]) {
+  .#{$prefix}--popover-content {
+    outline: 1px solid $popover-border-color;
+    outline-offset: -1px;
+  }
+}
+
+:host(#{$prefix}-tooltip-content[dropShadow]),
 :host(#{$prefix}-popover-content[dropShadow]) {
-  @include custom-property.declaration(
-    'popover-drop-shadow',
-    drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2))
-  );
+  .#{$prefix}--popover-content {
+    filter: $popover-drop-shadow;
+  }
+}
+
+:host(#{$prefix}-tooltip-content[open][caret][border]),
+:host(#{$prefix}-popover-content[open][caret][border]) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      display: block;
+    }
+  }
 }
 
+//-----------------------------------------------------------------------------
+// Bottom
+//-----------------------------------------------------------------------------
+
+// bottom caret
 :host(#{$prefix}-tooltip-content[align^='bottom']:not([autoalign])),
 :host(#{$prefix}-popover-content[align^='bottom']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment^='bottom']:not([autoalign])),
@@ -99,11 +178,37 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-slug[alignment^='bottom']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
-    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
     inline-size: $popover-caret-width;
     inset-block-end: 0;
     inset-inline-start: 50%;
     transform: translate(-50%, $popover-offset);
+
+    &::after {
+      block-size: $popover-caret-height;
+      clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+      inline-size: $popover-caret-width;
+    }
+  }
+}
+
+// bottom caret border
+:host(#{$prefix}-tooltip-content[align^='bottom'][border]:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='bottom'][border]:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='bottom'][border]:not([autoalign])),
+:host(#{$prefix}-ai-label[alignment^='bottom'][border]:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='bottom'][border]:not([autoalign])) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      block-size: $popover-caret-height;
+      clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+      inline-size: $popover-caret-width;
+    }
+
+    &::after {
+      inline-size: calc($popover-caret-width - 1px);
+      inset-block-start: 1px;
+      inset-inline-start: 0.5px;
+    }
   }
 }
 
@@ -206,6 +311,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Left
+//-----------------------------------------------------------------------------
+
 :host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
 :host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
@@ -213,11 +322,35 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-slug[alignment^='left']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
-    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
     inline-size: $popover-caret-height;
     inset-block-start: 50%;
     inset-inline-end: 100%;
     transform: translate(calc(-1 * $popover-offset + 100%), -50%);
+
+    &::after {
+      block-size: $popover-caret-width;
+      clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+      inline-size: $popover-caret-height;
+    }
+  }
+}
+
+// left caret border
+:host(#{$prefix}-tooltip-content[align^='left'][border]:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='left'][border]:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='left'][border]:not([autoalign])),
+:host(#{$prefix}-ai-label[alignment^='left'][border]:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='left'][border]:not([autoalign])) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      block-size: $popover-caret-width;
+      clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+      inline-size: $popover-caret-height;
+    }
+
+    &::after {
+      inset-inline-start: -1px;
+    }
   }
 }
 
@@ -230,6 +363,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover-caret {
     inset-inline-end: initial;
     inset-inline-start: 100%;
+
+    &::after {
+      inset-inline-start: 1px;
+    }
   }
 }
 
@@ -293,6 +430,11 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Right
+//-----------------------------------------------------------------------------
+
+// right caret
 :host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
 :host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
@@ -300,11 +442,35 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-slug[alignment^='right']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
-    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
     inline-size: $popover-caret-height;
     inset-block-start: 50%;
     inset-inline-start: 100%;
     transform: translate(calc($popover-offset - 100%), -50%);
+
+    &::after {
+      block-size: $popover-caret-width;
+      clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+      inline-size: $popover-caret-height;
+    }
+  }
+}
+
+// right caret border
+:host(#{$prefix}-tooltip-content[align^='right'][border]:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='right'][border]:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='right'][border]:not([autoalign])),
+:host(#{$prefix}-ai-label[alignment^='right'][border]:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='right'][border]:not([autoalign])) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      block-size: $popover-caret-width;
+      clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+      inline-size: $popover-caret-height;
+    }
+
+    &::after {
+      inset-inline-start: 1px;
+    }
   }
 }
 
@@ -317,6 +483,10 @@ $popover-caret-height: custom-property.get-var(
   .#{$prefix}--popover-caret {
     inset-inline-end: 100%;
     inset-inline-start: initial;
+
+    &::after {
+      inset-inline-start: -1px;
+    }
   }
 }
 
@@ -373,6 +543,11 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
+//-----------------------------------------------------------------------------
+// Top
+//-----------------------------------------------------------------------------
+
+// top caret
 :host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
 :host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
 :host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
@@ -380,11 +555,37 @@ $popover-caret-height: custom-property.get-var(
 :host(#{$prefix}-slug[alignment^='top']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
-    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
     inline-size: $popover-caret-width;
     inset-block-start: 0;
     inset-inline-start: 50%;
     transform: translate(-50%, calc(-1 * $popover-offset));
+
+    &::after {
+      block-size: $popover-caret-height;
+      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+      inline-size: $popover-caret-width;
+    }
+  }
+}
+
+// top caret border
+:host(#{$prefix}-tooltip-content[align^='top'][border]:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='top'][border]:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='top'][border]:not([autoalign])),
+:host(#{$prefix}-ai-label[alignment^='top'][border]:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='top'][border]:not([autoalign])) {
+  .#{$prefix}--popover-caret {
+    &::before {
+      block-size: $popover-caret-height;
+      clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+      inline-size: $popover-caret-width;
+    }
+
+    &::after {
+      inline-size: calc($popover-caret-width - 1px);
+      inset-block-start: -1px;
+      inset-inline-start: 0.5px;
+    }
   }
 }
 

package/telemetry.yml

@@ -24,8 +24,10 @@ collect:
         - autoalign
         - autocomplete
         - autofocus
+        - backgroundToken
         - batch-action
         - batch-expansion
+        - border
         - breadcrumb
         - button-class-name
         - button-label
@@ -369,7 +371,6 @@ collect:
         - divider
         - oncds-overflow-menu-item-clicked
         # cds-page-header-breadcrumb
-        - border
         - content-actions-flush
         - page-actions-flush
         # cds-pagination
@@ -584,6 +585,9 @@ collect:
         - top-left
         - top-right
         - top-start
+        # General - backgroundToken
+        - background
+        - layer
         # General - collapse-mode
         - fixed
         - rail