diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 68d4f03e98e..8e093960068 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -7104,7 +7104,7 @@ declare global { new (): HTMLCalciteListItemElement; }; interface HTMLCalciteListItemGroupElementEventMap { - "calciteInternalListItemGroupDefaultSlotChange": DragEvent; + "calciteInternalListItemGroupDefaultSlotChange": void; } interface HTMLCalciteListItemGroupElement extends Components.CalciteListItemGroup, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteListItemGroupElement, ev: CalciteListItemGroupCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -7850,7 +7850,7 @@ declare global { new (): HTMLCalciteTileSelectGroupElement; }; interface HTMLCalciteTimePickerElementEventMap { - "calciteInternalTimePickerChange": string; + "calciteInternalTimePickerChange": void; } interface HTMLCalciteTimePickerElement extends Components.CalciteTimePicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLCalciteTimePickerElement, ev: CalciteTimePickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -11461,7 +11461,7 @@ declare namespace LocalJSX { /** * Fires when changes occur in the default slot, notifying parent lists of the changes. */ - "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; + "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; } interface CalciteLoader { /** @@ -13813,7 +13813,7 @@ declare namespace LocalJSX { * Specifies the Unicode numeral system used by the component for localization. */ "numberingSystem"?: NumberingSystem; - "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; + "onCalciteInternalTimePickerChange"?: (event: CalciteTimePickerCustomEvent) => void; /** * Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/popover/popover.e2e.ts b/packages/calcite-components/src/components/popover/popover.e2e.ts index 9a078854371..29e8a2b11c2 100644 --- a/packages/calcite-components/src/components/popover/popover.e2e.ts +++ b/packages/calcite-components/src/components/popover/popover.e2e.ts @@ -11,6 +11,7 @@ import { t9n, themed, } from "../../tests/commonTests"; +import { FloatingCSS } from "../../utils/floating-ui"; import { CSS } from "./resources"; describe("calcite-popover", () => { @@ -710,10 +711,16 @@ describe("calcite-popover", () => { `, { - "--calcite-popover-background-color": { - shadowSelector: `.${CSS.container}`, - targetProp: "backgroundColor", - }, + "--calcite-popover-background-color": [ + { + shadowSelector: `.${CSS.container}`, + targetProp: "backgroundColor", + }, + { + shadowSelector: `.${FloatingCSS.arrow}`, + targetProp: "fill", + }, + ], "--calcite-popover-border-color": [ { shadowSelector: `.${CSS.container}`, @@ -723,6 +730,10 @@ describe("calcite-popover", () => { shadowSelector: `.${CSS.header}`, targetProp: "borderBlockEndColor", }, + { + shadowSelector: `.${FloatingCSS.arrowStroke}`, + targetProp: "stroke", + }, ], "--calcite-popover-corner-radius": { shadowSelector: `.${CSS.container}`, diff --git a/packages/calcite-components/src/components/popover/popover.scss b/packages/calcite-components/src/components/popover/popover.scss index 1314105f7dd..ca6e5392b1d 100644 --- a/packages/calcite-components/src/components/popover/popover.scss +++ b/packages/calcite-components/src/components/popover/popover.scss @@ -58,6 +58,14 @@ border-radius: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round)); } +.calcite-floating-ui-arrow { + fill: var(--calcite-popover-background-color, var(--calcite-color-foreground-1)); +} + +.calcite-floating-ui-arrow__stroke { + stroke: var(--calcite-popover-border-color, var(--calcite-color-border-3)); +} + .header { @apply flex flex-auto diff --git a/packages/calcite-components/src/utils/floating-ui.ts b/packages/calcite-components/src/utils/floating-ui.ts index ad5faedea05..7b5b3e2cd9a 100644 --- a/packages/calcite-components/src/utils/floating-ui.ts +++ b/packages/calcite-components/src/utils/floating-ui.ts @@ -319,6 +319,8 @@ export type FloatingLayout = Extract; export const FloatingCSS = { animation: "calcite-floating-ui-anim", animationActive: "calcite-floating-ui-anim--active", + arrow: "calcite-floating-ui-arrow", + arrowStroke: "calcite-floating-ui-arrow__stroke", }; function getMiddleware({