@carbon/web-components 2.40.1 → 2.41.0

package/es-custom/components/popover/popover-content.js

@@ -11,6 +11,7 @@ import { property } from 'lit/decorators.js';
 import { carbonElement } from '../../globals/decorators/carbon-element.js';
 import { prefix } from '../../globals/settings.js';
 import styles from './popover.scss.js';
+import { POPOVER_BACKGROUND_TOKEN } from './defs.js';
 
 /**
  * Copyright IBM Corp. 2019, 2024
@@ -38,6 +39,14 @@ let CDSPopoverContent = class CDSPopoverContent extends LitElement {
          * Specify whether a dropShadow should be rendered
          */
         this.dropShadow = true;
+        /**
+         * Specify whether a border should be rendered on the popover
+         */
+        this.border = false;
+        /**
+         * Render the component using the high-contrast variant
+         */
+        this.highContrast = false;
         /**
          * Specify whether the component is currently open or closed
          */
@@ -46,6 +55,10 @@ let CDSPopoverContent = class CDSPopoverContent extends LitElement {
          * Render the component using the tab tip variant
          */
         this.tabTip = false;
+        /**
+         * Specify the background token to use. Default is 'layer'.
+         */
+        this.backgroundToken = POPOVER_BACKGROUND_TOKEN.LAYER;
         /**
          * The shadow slot this popover content should be in.
          */
@@ -83,12 +96,21 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopoverContent.prototype, "dropShadow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CDSPopoverContent.prototype, "border", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CDSPopoverContent.prototype, "highContrast", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopoverContent.prototype, "open", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopoverContent.prototype, "tabTip", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], CDSPopoverContent.prototype, "backgroundToken", void 0);
 __decorate([
     property({ reflect: true })
 ], CDSPopoverContent.prototype, "slot", void 0);

package/es-custom/components/popover/popover-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-content.js","sources":["../../../src/components/popover/popover-content.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './popover.scss?lit';\n\n/**\n * Popover.\n *\n * @element cds-custom-popover-content\n */\n@customElement(`${prefix}-popover-content`)\nclass CDSPopoverContent extends LitElement {\n  /**\n   * Specify the popover alignment\n   */\n  @property({ reflect: true, type: String })\n  align = '';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * Specify whether a caret should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  caret;\n\n  /**\n   * Specify whether a dropShadow should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  dropShadow = true;\n\n  /**\n   * Specify whether the component is currently open or closed\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Render the component using the tab tip variant\n   */\n  @property({ type: Boolean, reflect: true })\n  tabTip = false;\n\n  /**\n   * The shadow slot this popover content should be in.\n   */\n  @property({ reflect: true })\n  slot = 'content';\n\n  render() {\n    if (this.autoalign) {\n      return html`\n        <span class=\"${prefix}--popover-content\" part=\"content\">\n          <slot> </slot>\n          <span class=\"${prefix}--popover-caret\"></span>\n        </span>\n      `;\n    } else {\n      return html`\n        <span class=\"${prefix}--popover-content\" part=\"content\">\n          <slot> </slot>\n        </span>\n        <span class=\"${prefix}--popover-caret\"></span>\n      `;\n    }\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPopoverContent;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;;AAAA;;;;;AAKG;AAQH;;;;AAIG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;AAA1C,IAAA,WAAA,GAAA;;AACE;;AAEG;QAEH,IAAK,CAAA,KAAA,GAAG,EAAE;AAEV;;AAEG;QAEH,IAAS,CAAA,SAAA,GAAG,KAAK;AAQjB;;AAEG;QAEH,IAAU,CAAA,UAAA,GAAG,IAAI;AAEjB;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,KAAK;AAEZ;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;QAEH,IAAI,CAAA,IAAA,GAAG,SAAS;;IAEhB,MAAM,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,OAAO,IAAI,CAAA;uBACM,MAAM,CAAA;;yBAEJ,MAAM,CAAA;;OAExB;;aACI;AACL,YAAA,OAAO,IAAI,CAAA;uBACM,MAAM,CAAA;;;uBAGN,MAAM,CAAA;OACtB;;;;AAIE,iBAAM,CAAA,MAAA,GAAG,MAAH;AAxDb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE;AAC9B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMX,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAMlB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACpC,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMN,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACxB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAMlB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC7B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMb,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAC3B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAMf,UAAA,CAAA;AADC,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AACV,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAzCb,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB;AACpC,CAAA,EAAA,iBAAiB,CA8DtB;AAED,0BAAe,iBAAiB;;;;"}
+{"version":3,"file":"popover-content.js","sources":["../../../src/components/popover/popover-content.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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\nimport { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './popover.scss?lit';\nimport { POPOVER_BACKGROUND_TOKEN } from './defs';\n\n/**\n * Popover.\n *\n * @element cds-custom-popover-content\n */\n@customElement(`${prefix}-popover-content`)\nclass CDSPopoverContent extends LitElement {\n  /**\n   * Specify the popover alignment\n   */\n  @property({ reflect: true, type: String })\n  align = '';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * Specify whether a caret should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  caret;\n\n  /**\n   * Specify whether a dropShadow should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  dropShadow = true;\n\n  /**\n   * Specify whether a border should be rendered on the popover\n   */\n  @property({ type: Boolean, reflect: true })\n  border = false;\n\n  /**\n   * Render the component using the high-contrast variant\n   */\n  @property({ type: Boolean, reflect: true })\n  highContrast = false;\n\n  /**\n   * Specify whether the component is currently open or closed\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Render the component using the tab tip variant\n   */\n  @property({ type: Boolean, reflect: true })\n  tabTip = false;\n\n  /**\n   * Specify the background token to use. Default is 'layer'.\n   */\n  @property({ reflect: true, type: String })\n  backgroundToken = POPOVER_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * The shadow slot this popover content should be in.\n   */\n  @property({ reflect: true })\n  slot = 'content';\n\n  render() {\n    if (this.autoalign) {\n      return html`\n        <span class=\"${prefix}--popover-content\" part=\"content\">\n          <slot> </slot>\n          <span class=\"${prefix}--popover-caret\"></span>\n        </span>\n      `;\n    } else {\n      return html`\n        <span class=\"${prefix}--popover-content\" part=\"content\">\n          <slot> </slot>\n        </span>\n        <span class=\"${prefix}--popover-caret\"></span>\n      `;\n    }\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPopoverContent;\n"],"names":["customElement"],"mappings":"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"}

package/es-custom/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>;
@@ -13,6 +14,7 @@ declare const CDSPopover_base: {
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
+        autocorrect: boolean;
         dir: string;
         draggable: boolean;
         hidden: boolean;
@@ -34,13 +36,14 @@ declare const CDSPopover_base: {
         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;
@@ -55,7 +58,8 @@ declare const CDSPopover_base: {
         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;
@@ -118,6 +122,8 @@ declare const CDSPopover_base: {
         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;
@@ -130,9 +136,8 @@ declare const CDSPopover_base: {
         readonly parentElement: HTMLElement | null;
         readonly parentNode: ParentNode | null;
         readonly previousSibling: ChildNode | null;
-        textContent: string | null;
         appendChild<T extends Node>(node: T): T;
-        cloneNode(deep?: boolean): Node;
+        cloneNode(subtree?: boolean): Node;
         compareDocumentPosition(other: Node): number;
         contains(other: Node | null): boolean;
         getRootNode(options?: GetRootNodeOptions): Node;
@@ -165,6 +170,7 @@ declare const CDSPopover_base: {
         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;
@@ -175,25 +181,33 @@ declare const CDSPopover_base: {
         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;
@@ -235,7 +249,8 @@ declare const CDSPopover_base: {
         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;
@@ -245,18 +260,19 @@ declare const CDSPopover_base: {
         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;
@@ -304,6 +320,7 @@ declare const CDSPopover_base: {
         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;
@@ -322,7 +339,7 @@ declare const CDSPopover_base: {
         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;
@@ -387,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
      */
@@ -399,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/es-custom/components/popover/popover.js

@@ -15,9 +15,10 @@ import styles from './popover.scss.js';
 import HostListener from '../../globals/decorators/host-listener.js';
 import HostListenerMixin from '../../globals/mixins/host-listener.js';
 import FloatingController from '../../globals/controllers/floating-controller.js';
+import { POPOVER_BACKGROUND_TOKEN } from './defs.js';
 
 /**
- * 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.
@@ -75,6 +76,10 @@ let CDSPopover = CDSPopover_1 = class CDSPopover extends HostListenerMixin(LitEl
          * Specify whether a dropShadow should be rendered
          */
         this.dropShadow = true;
+        /**
+         * Specify whether a border should be rendered on the popover
+         */
+        this.border = false;
         /**
          * Render the component using the high-contrast variant
          */
@@ -87,6 +92,10 @@ let CDSPopover = CDSPopover_1 = class CDSPopover extends HostListenerMixin(LitEl
          * Render the component using the tab tip variant
          */
         this.tabTip = false;
+        /**
+         * Specify the background token to use. Default is 'layer'.
+         */
+        this.backgroundToken = POPOVER_BACKGROUND_TOKEN.LAYER;
         this._handleOutsideClick = this._handleOutsideClick.bind(this);
     }
     connectedCallback() {
@@ -99,7 +108,17 @@ let CDSPopover = CDSPopover_1 = class CDSPopover extends HostListenerMixin(LitEl
     updated(changedProperties) {
         var _a, _b, _c;
         const { selectorPopoverContent } = this.constructor;
-        ['open', 'align', 'autoalign', 'caret', 'dropShadow', 'tabTip'].forEach((name) => {
+        [
+            'open',
+            'align',
+            'autoalign',
+            'caret',
+            'dropShadow',
+            'border',
+            'tabTip',
+            'highContrast',
+            'backgroundToken',
+        ].forEach((name) => {
             if (changedProperties.has(name)) {
                 const { [name]: value } = this;
                 if (this.querySelector(selectorPopoverContent)) {
@@ -129,7 +148,7 @@ let CDSPopover = CDSPopover_1 = class CDSPopover extends HostListenerMixin(LitEl
         }
     }
     render() {
-        const { dropShadow, highContrast, open, tabTip, _handleSlotChange: handleSlotChange, } = this;
+        const { dropShadow, border, highContrast, open, tabTip, _handleSlotChange: handleSlotChange, } = this;
         if (tabTip) {
             this.caret = tabTip ? false : true;
         }
@@ -138,10 +157,13 @@ let CDSPopover = CDSPopover_1 = class CDSPopover extends HostListenerMixin(LitEl
             [`${prefix}--popover-container`]: true,
             [`${prefix}--popover--caret`]: this.caret,
             [`${prefix}--popover--drop-shadow`]: dropShadow,
+            [`${prefix}--popover--border`]: border,
             [`${prefix}--popover--high-contrast`]: highContrast,
             [`${prefix}--popover--open`]: open,
             [`${prefix}--popover--${this.align}`]: true,
             [`${prefix}--popover--tab-tip`]: tabTip,
+            [`${prefix}--popover--background-token__background`]: this.backgroundToken === POPOVER_BACKGROUND_TOKEN.BACKGROUND &&
+                !highContrast,
         });
         return html `
       <span class="${classes}" part="popover-container">
@@ -190,6 +212,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopover.prototype, "dropShadow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], CDSPopover.prototype, "border", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopover.prototype, "highContrast", void 0);
@@ -199,6 +224,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], CDSPopover.prototype, "tabTip", void 0);
+__decorate([
+    property({ reflect: true, type: String })
+], CDSPopover.prototype, "backgroundToken", void 0);
 __decorate([
     HostListener('focusout')
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452

package/es-custom/components/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './popover.scss?lit';\nimport CDSPopoverContent from './popover-content';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FloatingUIContoller from '../../globals/controllers/floating-controller';\n\n/**\n * Popover.\n *\n * @element cds-custom-popover\n */\n@customElement(`${prefix}-popover`)\nclass CDSPopover extends HostListenerMixin(LitElement) {\n  /**\n   * Create popover controller instance\n   */\n  private popoverController = new FloatingUIContoller(this);\n\n  /**\n   * The `<slot>` element in the shadow DOM.\n   */\n  @query('slot')\n  private _triggerSlotNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element in the shadow DOM.\n   */\n  @query('slot[name=\"content\"]')\n  private _contentSlotNode!: HTMLSlotElement;\n\n  /**\n   * Specify direction of alignment\n   */\n  @property({ reflect: true, type: String })\n  align = '';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * Specify whether a caret should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  caret = true;\n\n  /**\n   * Specify whether a dropShadow should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  dropShadow = true;\n\n  /**\n   * Render the component using the high-contrast variant\n   */\n  @property({ type: Boolean, reflect: true })\n  highContrast = false;\n\n  /**\n   * Specify whether the component is currently open or closed\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Render the component using the tab tip variant\n   */\n  @property({ type: Boolean, reflect: true })\n  tabTip = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    if (this.tabTip) {\n      const component = (target as HTMLSlotElement).assignedNodes().filter(\n        (node) =>\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n      (component[0] as HTMLElement).classList.add(\n        `${prefix}--popover--tab-tip__button`\n      );\n    }\n    this.requestUpdate();\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleFocusOut(event: Event) {\n    const relatedTarget = (event as FocusEvent).relatedTarget as Node | null;\n    if (!this.contains(relatedTarget)) {\n      this.open = false;\n    }\n  }\n\n  private _handleOutsideClick(event: Event) {\n    const target = event.target as Node | null;\n    if (this.open && target && !this.contains(target)) {\n      this.open = false;\n    }\n  }\n\n  constructor() {\n    super();\n    this._handleOutsideClick = this._handleOutsideClick.bind(this);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  updated(changedProperties) {\n    const { selectorPopoverContent } = this.constructor as typeof CDSPopover;\n    ['open', 'align', 'autoalign', 'caret', 'dropShadow', 'tabTip'].forEach(\n      (name) => {\n        if (changedProperties.has(name)) {\n          const { [name as keyof CDSPopover]: value } = this;\n          if (this.querySelector(selectorPopoverContent) as CDSPopoverContent) {\n            (this.querySelector(selectorPopoverContent) as CDSPopoverContent)[\n              name\n            ] = value;\n          }\n        }\n      }\n    );\n\n    if (this.autoalign && this.open) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this._triggerSlotNode.assignedElements()[0];\n      const content = this._contentSlotNode.assignedElements()[0];\n\n      const tooltip = content?.shadowRoot?.querySelector(\n        CDSPopover.selectorPopoverContentClass\n      );\n      const arrowElement = content?.shadowRoot?.querySelector(\n        CDSPopover.selectorPopoverCaret\n      );\n\n      if (button && tooltip) {\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement:\n            this.caret && arrowElement\n              ? (arrowElement as HTMLElement)\n              : undefined,\n          caret: this.caret,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.align,\n          open: this.open,\n        });\n      }\n    }\n  }\n\n  render() {\n    const {\n      dropShadow,\n      highContrast,\n      open,\n      tabTip,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n    if (tabTip) {\n      this.caret = tabTip ? false : true;\n    }\n    this.align = this.align ? this.align : tabTip ? 'bottom-left' : 'bottom';\n\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: this.caret,\n      [`${prefix}--popover--drop-shadow`]: dropShadow,\n      [`${prefix}--popover--high-contrast`]: highContrast,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${this.align}`]: true,\n      [`${prefix}--popover--tab-tip`]: tabTip,\n    });\n    return html`\n      <span class=\"${classes}\" part=\"popover-container\">\n        <slot @slotchange=\"${handleSlotChange}\"></slot>\n        <slot name=\"content\"></slot>\n      </span>\n    `;\n  }\n\n  /**\n   * A selector that will return popover content element within\n   * CDSPopoverContent's shadowRoot.\n   */\n  static get selectorPopoverContentClass() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return popover caret element within\n   * CDSPopoverContent's shadowRoot.\n   */\n  static get selectorPopoverCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the CDSPopoverContent.\n   */\n  static get selectorPopoverContent() {\n    return `${prefix}-popover-content`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPopover;\n"],"names":["FloatingUIContoller","customElement"],"mappings":"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"}
+{"version":3,"file":"popover.js","sources":["../../../src/components/popover/popover.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './popover.scss?lit';\nimport CDSPopoverContent from './popover-content';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FloatingUIContoller from '../../globals/controllers/floating-controller';\nimport { POPOVER_BACKGROUND_TOKEN } from './defs';\n\n/**\n * Popover.\n *\n * @element cds-custom-popover\n */\n@customElement(`${prefix}-popover`)\nclass CDSPopover extends HostListenerMixin(LitElement) {\n  /**\n   * Create popover controller instance\n   */\n  private popoverController = new FloatingUIContoller(this);\n\n  /**\n   * The `<slot>` element in the shadow DOM.\n   */\n  @query('slot')\n  private _triggerSlotNode!: HTMLSlotElement;\n\n  /**\n   * The `<slot>` element in the shadow DOM.\n   */\n  @query('slot[name=\"content\"]')\n  private _contentSlotNode!: HTMLSlotElement;\n\n  /**\n   * Specify direction of alignment\n   */\n  @property({ reflect: true, type: String })\n  align = '';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * Specify whether a caret should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  caret = true;\n\n  /**\n   * Specify whether a dropShadow should be rendered\n   */\n  @property({ type: Boolean, reflect: true })\n  dropShadow = true;\n\n  /**\n   * Specify whether a border should be rendered on the popover\n   */\n  @property({ type: Boolean, reflect: true })\n  border = false;\n\n  /**\n   * Render the component using the high-contrast variant\n   */\n  @property({ type: Boolean, reflect: true })\n  highContrast = false;\n\n  /**\n   * Specify whether the component is currently open or closed\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Render the component using the tab tip variant\n   */\n  @property({ type: Boolean, reflect: true })\n  tabTip = false;\n\n  /**\n   * Specify the background token to use. Default is 'layer'.\n   */\n  @property({ reflect: true, type: String })\n  backgroundToken = POPOVER_BACKGROUND_TOKEN.LAYER;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    if (this.tabTip) {\n      const component = (target as HTMLSlotElement).assignedNodes().filter(\n        (node) =>\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n      (component[0] as HTMLElement).classList.add(\n        `${prefix}--popover--tab-tip__button`\n      );\n    }\n    this.requestUpdate();\n  }\n\n  @HostListener('focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore\n  private _handleFocusOut(event: Event) {\n    const relatedTarget = (event as FocusEvent).relatedTarget as Node | null;\n    if (!this.contains(relatedTarget)) {\n      this.open = false;\n    }\n  }\n\n  private _handleOutsideClick(event: Event) {\n    const target = event.target as Node | null;\n    if (this.open && target && !this.contains(target)) {\n      this.open = false;\n    }\n  }\n\n  constructor() {\n    super();\n    this._handleOutsideClick = this._handleOutsideClick.bind(this);\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('click', this._handleOutsideClick);\n  }\n\n  disconnectedCallback() {\n    document.removeEventListener('click', this._handleOutsideClick);\n  }\n\n  updated(changedProperties) {\n    const { selectorPopoverContent } = this.constructor as typeof CDSPopover;\n    [\n      'open',\n      'align',\n      'autoalign',\n      'caret',\n      'dropShadow',\n      'border',\n      'tabTip',\n      'highContrast',\n      'backgroundToken',\n    ].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSPopover]: value } = this;\n        if (this.querySelector(selectorPopoverContent) as CDSPopoverContent) {\n          (this.querySelector(selectorPopoverContent) as CDSPopoverContent)[\n            name\n          ] = value;\n        }\n      }\n    });\n\n    if (this.autoalign && this.open) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this._triggerSlotNode.assignedElements()[0];\n      const content = this._contentSlotNode.assignedElements()[0];\n\n      const tooltip = content?.shadowRoot?.querySelector(\n        CDSPopover.selectorPopoverContentClass\n      );\n      const arrowElement = content?.shadowRoot?.querySelector(\n        CDSPopover.selectorPopoverCaret\n      );\n\n      if (button && tooltip) {\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement:\n            this.caret && arrowElement\n              ? (arrowElement as HTMLElement)\n              : undefined,\n          caret: this.caret,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.align,\n          open: this.open,\n        });\n      }\n    }\n  }\n\n  render() {\n    const {\n      dropShadow,\n      border,\n      highContrast,\n      open,\n      tabTip,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n    if (tabTip) {\n      this.caret = tabTip ? false : true;\n    }\n    this.align = this.align ? this.align : tabTip ? 'bottom-left' : 'bottom';\n\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: this.caret,\n      [`${prefix}--popover--drop-shadow`]: dropShadow,\n      [`${prefix}--popover--border`]: border,\n      [`${prefix}--popover--high-contrast`]: highContrast,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${this.align}`]: true,\n      [`${prefix}--popover--tab-tip`]: tabTip,\n      [`${prefix}--popover--background-token__background`]:\n        this.backgroundToken === POPOVER_BACKGROUND_TOKEN.BACKGROUND &&\n        !highContrast,\n    });\n    return html`\n      <span class=\"${classes}\" part=\"popover-container\">\n        <slot @slotchange=\"${handleSlotChange}\"></slot>\n        <slot name=\"content\"></slot>\n      </span>\n    `;\n  }\n\n  /**\n   * A selector that will return popover content element within\n   * CDSPopoverContent's shadowRoot.\n   */\n  static get selectorPopoverContentClass() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return popover caret element within\n   * CDSPopoverContent's shadowRoot.\n   */\n  static get selectorPopoverCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the CDSPopoverContent.\n   */\n  static get selectorPopoverContent() {\n    return `${prefix}-popover-content`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSPopover;\n"],"names":["FloatingUIContoller","customElement"],"mappings":"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"}