@carbon/web-components 2.40.1 → 2.41.0

package/lib/globals/mixins/host-listener.d.ts

@@ -22,6 +22,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
+        autocorrect: boolean;
         dir: string;
         draggable: boolean;
         hidden: boolean;
@@ -43,13 +44,14 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean): boolean;
+        togglePopover(options?: boolean): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: 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;
         readonly attributes: NamedNodeMap;
-        readonly classList: DOMTokenList;
+        get classList(): DOMTokenList;
+        set classList(value: string);
         className: string;
         readonly clientHeight: number;
         readonly clientLeft: number;
@@ -64,7 +66,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onfullscreenerror: ((this: Element, ev: Event) => any) | null;
         outerHTML: string;
         readonly ownerDocument: Document;
-        readonly part: DOMTokenList;
+        get part(): DOMTokenList;
+        set part(value: string);
         readonly prefix: string | null;
         readonly scrollHeight: number;
         scrollLeft: number;
@@ -127,6 +130,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         setPointerCapture(pointerId: number): void;
         toggleAttribute(qualifiedName: string, force?: boolean): boolean;
         webkitMatchesSelector(selectors: string): boolean;
+        get textContent(): string;
+        set textContent(value: string | null);
         readonly baseURI: string;
         readonly childNodes: NodeListOf<ChildNode>;
         readonly firstChild: ChildNode | null;
@@ -139,9 +144,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         readonly parentElement: HTMLElement | null;
         readonly parentNode: ParentNode | null;
         readonly previousSibling: ChildNode | null;
-        textContent: string | null;
         appendChild<T_1 extends Node>(node: T_1): T_1;
-        cloneNode(deep?: boolean): Node;
+        cloneNode(subtree?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
         getRootNode(options?: GetRootNodeOptions): Node;
@@ -174,6 +178,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
         readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
         dispatchEvent(event: Event): boolean;
+        ariaActiveDescendantElement: Element | null;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;
         ariaBrailleLabel: string | null;
@@ -184,25 +189,33 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         ariaColIndex: string | null;
         ariaColIndexText: string | null;
         ariaColSpan: string | null;
+        ariaControlsElements: ReadonlyArray<Element> | null;
         ariaCurrent: string | null;
+        ariaDescribedByElements: ReadonlyArray<Element> | null;
         ariaDescription: string | null;
+        ariaDetailsElements: ReadonlyArray<Element> | null;
         ariaDisabled: string | null;
+        ariaErrorMessageElements: ReadonlyArray<Element> | null;
         ariaExpanded: string | null;
+        ariaFlowToElements: ReadonlyArray<Element> | null;
         ariaHasPopup: string | null;
         ariaHidden: string | null;
         ariaInvalid: string | null;
         ariaKeyShortcuts: string | null;
         ariaLabel: string | null;
+        ariaLabelledByElements: ReadonlyArray<Element> | null;
         ariaLevel: string | null;
         ariaLive: string | null;
         ariaModal: string | null;
         ariaMultiLine: string | null;
         ariaMultiSelectable: string | null;
         ariaOrientation: string | null;
+        ariaOwnsElements: ReadonlyArray<Element> | null;
         ariaPlaceholder: string | null;
         ariaPosInSet: string | null;
         ariaPressed: string | null;
         ariaReadOnly: string | null;
+        ariaRelevant: string | null;
         ariaRequired: string | null;
         ariaRoleDescription: string | null;
         ariaRowCount: string | null;
@@ -244,7 +257,8 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         replaceChildren(...nodes: (Node | string)[]): void;
         readonly assignedSlot: HTMLSlotElement | null;
         readonly attributeStyleMap: StylePropertyMap;
-        readonly style: CSSStyleDeclaration;
+        get style(): CSSStyleDeclaration;
+        set style(cssText: string);
         contentEditable: string;
         enterKeyHint: string;
         inputMode: string;
@@ -254,18 +268,19 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-        onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+        oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
         oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -313,6 +328,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+        onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
         onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
         onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -331,7 +347,7 @@ declare const HostListenerMixin: <T extends Constructor<HTMLElement>>(Base: T) =
         onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
         onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-        ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+        ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
         ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
         ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
         ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;

package/lib/globals/mixins/validity.d.ts

@@ -71,6 +71,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
+    autocorrect: boolean;
     dir: string;
     draggable: boolean;
     hidden: boolean;
@@ -92,13 +93,14 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     click(): void;
     hidePopover(): void;
     showPopover(): void;
-    togglePopover(force?: boolean): boolean;
+    togglePopover(options?: boolean): boolean;
     addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: 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;
     readonly attributes: NamedNodeMap;
-    readonly classList: DOMTokenList;
+    get classList(): DOMTokenList;
+    set classList(value: string);
     className: string;
     readonly clientHeight: number;
     readonly clientLeft: number;
@@ -113,7 +115,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onfullscreenerror: ((this: Element, ev: Event) => any) | null;
     outerHTML: string;
     readonly ownerDocument: Document;
-    readonly part: DOMTokenList;
+    get part(): DOMTokenList;
+    set part(value: string);
     readonly prefix: string | null;
     readonly scrollHeight: number;
     scrollLeft: number;
@@ -176,6 +179,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     setPointerCapture(pointerId: number): void;
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
     webkitMatchesSelector(selectors: string): boolean;
+    get textContent(): string;
+    set textContent(value: string | null);
     readonly baseURI: string;
     readonly childNodes: NodeListOf<ChildNode>;
     readonly firstChild: ChildNode | null;
@@ -188,9 +193,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly parentElement: HTMLElement | null;
     readonly parentNode: ParentNode | null;
     readonly previousSibling: ChildNode | null;
-    textContent: string | null;
     appendChild<T_1 extends Node>(node: T_1): T_1;
-    cloneNode(deep?: boolean): Node;
+    cloneNode(subtree?: boolean): Node;
     compareDocumentPosition(other: Node): number;
     contains(other: Node | null): boolean;
     getRootNode(options?: GetRootNodeOptions): Node;
@@ -223,6 +227,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
     readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
     dispatchEvent(event: Event): boolean;
+    ariaActiveDescendantElement: Element | null;
     ariaAtomic: string | null;
     ariaAutoComplete: string | null;
     ariaBrailleLabel: string | null;
@@ -233,25 +238,33 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     ariaColIndex: string | null;
     ariaColIndexText: string | null;
     ariaColSpan: string | null;
+    ariaControlsElements: ReadonlyArray<Element> | null;
     ariaCurrent: string | null;
+    ariaDescribedByElements: ReadonlyArray<Element> | null;
     ariaDescription: string | null;
+    ariaDetailsElements: ReadonlyArray<Element> | null;
     ariaDisabled: string | null;
+    ariaErrorMessageElements: ReadonlyArray<Element> | null;
     ariaExpanded: string | null;
+    ariaFlowToElements: ReadonlyArray<Element> | null;
     ariaHasPopup: string | null;
     ariaHidden: string | null;
     ariaInvalid: string | null;
     ariaKeyShortcuts: string | null;
     ariaLabel: string | null;
+    ariaLabelledByElements: ReadonlyArray<Element> | null;
     ariaLevel: string | null;
     ariaLive: string | null;
     ariaModal: string | null;
     ariaMultiLine: string | null;
     ariaMultiSelectable: string | null;
     ariaOrientation: string | null;
+    ariaOwnsElements: ReadonlyArray<Element> | null;
     ariaPlaceholder: string | null;
     ariaPosInSet: string | null;
     ariaPressed: string | null;
     ariaReadOnly: string | null;
+    ariaRelevant: string | null;
     ariaRequired: string | null;
     ariaRoleDescription: string | null;
     ariaRowCount: string | null;
@@ -293,7 +306,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     replaceChildren(...nodes: (Node | string)[]): void;
     readonly assignedSlot: HTMLSlotElement | null;
     readonly attributeStyleMap: StylePropertyMap;
-    readonly style: CSSStyleDeclaration;
+    get style(): CSSStyleDeclaration;
+    set style(cssText: string);
     contentEditable: string;
     enterKeyHint: string;
     inputMode: string;
@@ -303,18 +317,19 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
     oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -362,6 +377,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
     onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -380,7 +396,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
     onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/web-components",
   "description": "Web components for the Carbon Design System",
-  "version": "2.40.1",
+  "version": "2.41.0",
   "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.92.0",
+    "@carbon/styles": "^1.93.0",
     "@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.69.0",
+    "@carbon/icons": "^11.70.0",
     "@carbon/layout": "^11.43.0",
     "@carbon/motion": "^11.37.0",
     "@juggle/resize-observer": "^3.4.0",
@@ -102,7 +102,7 @@
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "autoprefixer": "^10.4.0",
     "cssnano": "^7.1.0",
-    "globby": "^14.0.2",
+    "globby": "^15.0.0",
     "read-package-up": "^11.0.0",
     "remark-gfm": "^4.0.0",
     "rimraf": "^6.0.1",
@@ -130,5 +130,5 @@
       }
     ]
   },
-  "gitHead": "e39cfbc6c3bd04254504ef6a370f5459c1599ac0"
+  "gitHead": "44f7fd230585f66d32c839d1c11d2992d5929294"
 }

package/scss/components/modal/modal.scss

@@ -38,6 +38,12 @@
 
 :host(#{$prefix}-modal) {
   @extend .#{$prefix}--modal;
+
+  opacity: 0;
+  transition:
+    opacity $duration-moderate-02 motion(exit, expressive),
+    visibility 0ms linear $duration-moderate-02;
+  visibility: hidden;
 }
 
 :host(#{$prefix}-modal[full-width]) {

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;
+    }
   }
 }