diff --git a/packages/popover/src/vaadin-popover-overlay.js b/packages/popover/src/vaadin-popover-overlay.js index 4fb9a41413..2efb21dff1 100644 --- a/packages/popover/src/vaadin-popover-overlay.js +++ b/packages/popover/src/vaadin-popover-overlay.js @@ -90,7 +90,7 @@ class PopoverOverlay extends PopoverOverlayMixin(DirMixin(ThemableMixin(PolylitM width: 0; } - :host([theme~='pointer-arrow']) [part='arrow'] { + :host([theme~='arrow']) [part='arrow'] { display: block; } `, diff --git a/packages/popover/src/vaadin-popover.d.ts b/packages/popover/src/vaadin-popover.d.ts index 1787fd17de..845e6357de 100644 --- a/packages/popover/src/vaadin-popover.d.ts +++ b/packages/popover/src/vaadin-popover.d.ts @@ -47,7 +47,7 @@ export type PopoverEventMap = HTMLElementEventMap & PopoverCustomEventMap; * * Part name | Description * -----------------|------------------------------------------- - * `arrow` | Optional arrow pointing to the target when using `theme="pointer-arrow"` + * `arrow` | Optional arrow pointing to the target when using `theme="arrow"` * * The following state attributes are available for styling: * diff --git a/packages/popover/src/vaadin-popover.js b/packages/popover/src/vaadin-popover.js index cf1d6ef7ff..dcb17a8e56 100644 --- a/packages/popover/src/vaadin-popover.js +++ b/packages/popover/src/vaadin-popover.js @@ -143,7 +143,7 @@ class PopoverOpenedStateController { * * Part name | Description * -----------------|------------------------------------------- - * `arrow` | Optional arrow pointing to the target when using `theme="pointer-arrow"` + * `arrow` | Optional arrow pointing to the target when using `theme="arrow"` * * The following state attributes are available for styling: * diff --git a/packages/popover/test/visual/lumo/popover.test.js b/packages/popover/test/visual/lumo/popover.test.js index e4328fe85c..cf8b2153f5 100644 --- a/packages/popover/test/visual/lumo/popover.test.js +++ b/packages/popover/test/visual/lumo/popover.test.js @@ -44,13 +44,13 @@ describe('popover', () => { await visualDiff(div, position); }); - it(`${position} pointer arrow`, async () => { - element.setAttribute('theme', 'pointer-arrow'); + it(`${position} arrow`, async () => { + element.setAttribute('theme', 'arrow'); element.position = position; await nextUpdate(element); target.click(); await nextRender(); - await visualDiff(div, `${position}-pointer-arrow`); + await visualDiff(div, `${position}-arrow`); }); }); }); diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-end-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/bottom-start-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/end-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/end-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/end-bottom-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/end-top-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/start-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/start-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/start-bottom-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/start-top-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/top-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/top-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/top-end-arrow.png diff --git a/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start-pointer-arrow.png b/packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start-arrow.png similarity index 100% rename from packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start-pointer-arrow.png rename to packages/popover/test/visual/lumo/screenshots/popover/baseline/top-start-arrow.png diff --git a/packages/popover/test/visual/material/popover.test.js b/packages/popover/test/visual/material/popover.test.js index 0093f00043..c42850449c 100644 --- a/packages/popover/test/visual/material/popover.test.js +++ b/packages/popover/test/visual/material/popover.test.js @@ -45,12 +45,12 @@ describe('popover', () => { }); it(`${position} pointer arrow`, async () => { - element.setAttribute('theme', 'pointer-arrow'); + element.setAttribute('theme', 'arrow'); element.position = position; await nextUpdate(element); target.click(); await nextRender(); - await visualDiff(div, `${position}-pointer-arrow`); + await visualDiff(div, `${position}-arrow`); }); }); }); diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/bottom-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/bottom-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/bottom-end-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/bottom-start-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/end-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/end-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/end-bottom-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/end-top-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/end-top-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/end-top-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/end-top-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/start-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/start-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/start-bottom-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/start-top-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/start-top-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/start-top-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/start-top-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/top-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/top-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-end-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-end-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/top-end-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/top-end-arrow.png diff --git a/packages/popover/test/visual/material/screenshots/popover/baseline/top-start-pointer-arrow.png b/packages/popover/test/visual/material/screenshots/popover/baseline/top-start-arrow.png similarity index 100% rename from packages/popover/test/visual/material/screenshots/popover/baseline/top-start-pointer-arrow.png rename to packages/popover/test/visual/material/screenshots/popover/baseline/top-start-arrow.png diff --git a/packages/popover/theme/lumo/vaadin-popover-styles.js b/packages/popover/theme/lumo/vaadin-popover-styles.js index 0e8cae024d..518ad1e1c7 100644 --- a/packages/popover/theme/lumo/vaadin-popover-styles.js +++ b/packages/popover/theme/lumo/vaadin-popover-styles.js @@ -19,83 +19,83 @@ const popoverOverlay = css` padding: var(--lumo-space-xs) var(--lumo-space-s); } - :host([theme~='pointer-arrow']) { + :host([theme~='arrow']) { --_vaadin-popover-default-offset: calc(var(--lumo-space-s) + var(--vaadin-popover-arrow-size) / 2); } /* top / bottom position */ - :host([theme~='pointer-arrow'][position^='top']) [part='arrow'], - :host([theme~='pointer-arrow'][position^='bottom']) [part='arrow'] { + :host([theme~='arrow'][position^='top']) [part='arrow'], + :host([theme~='arrow'][position^='bottom']) [part='arrow'] { border-left: var(--vaadin-popover-arrow-size) solid transparent; border-right: var(--vaadin-popover-arrow-size) solid transparent; } - :host([theme~='pointer-arrow'][position^='bottom'][bottom-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][bottom-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] { bottom: calc(var(--vaadin-popover-arrow-size) * -1); border-top: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color); filter: drop-shadow(0 2px 1px var(--lumo-shade-10pct)); } - :host([theme~='pointer-arrow'][position^='bottom'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] { top: calc(var(--vaadin-popover-arrow-size) * -1); border-bottom: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color); filter: drop-shadow(0 -2px 1px var(--lumo-shade-10pct)); } - :host([theme~='pointer-arrow'][position^='bottom'][start-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][start-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] { transform: translateX(-50%); inset-inline-start: 1.5rem; } - :host([theme~='pointer-arrow'][position^='bottom'][end-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][end-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] { transform: translateX(50%); inset-inline-end: 1.5rem; } - :host([theme~='pointer-arrow'][position^='bottom'][arrow-centered]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][arrow-centered]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'], + :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] { transform: translateX(-50%); inset-inline-start: 50%; } /* start / end position */ - :host([theme~='pointer-arrow'][position^='start']) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end']) [part='arrow'] { + :host([theme~='arrow'][position^='start']) [part='arrow'], + :host([theme~='arrow'][position^='end']) [part='arrow'] { border-top: var(--vaadin-popover-arrow-size) solid transparent; border-bottom: var(--vaadin-popover-arrow-size) solid transparent; } - :host([theme~='pointer-arrow'][position^='start'][start-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][start-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] { inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1); border-right: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color); filter: drop-shadow(-2px 0 1px var(--lumo-shade-10pct)); } - :host([theme~='pointer-arrow'][position^='start'][end-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][end-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] { inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1); border-left: var(--vaadin-popover-arrow-size) solid var(--lumo-base-color); filter: drop-shadow(2px 0 1px var(--lumo-shade-10pct)); } - :host([theme~='pointer-arrow'][position^='start'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] { top: 0.5rem; } - :host([theme~='pointer-arrow'][position='start'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position='end'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] { top: 50%; transform: translateY(-50%); } - :host([theme~='pointer-arrow'][position^='start'][bottom-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][bottom-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] { bottom: 0.5rem; } `; diff --git a/packages/popover/theme/material/vaadin-popover-styles.js b/packages/popover/theme/material/vaadin-popover-styles.js index 6e9000a3d1..82ecf36cc7 100644 --- a/packages/popover/theme/material/vaadin-popover-styles.js +++ b/packages/popover/theme/material/vaadin-popover-styles.js @@ -16,83 +16,83 @@ const popoverOverlay = css` padding: 0.25rem 0.5rem; } - :host([theme~='pointer-arrow']) { + :host([theme~='arrow']) { --_vaadin-popover-default-offset: calc(0.25rem + var(--vaadin-popover-arrow-size) / 1.25); } /* top / bottom position */ - :host([theme~='pointer-arrow'][position^='top']) [part='arrow'], - :host([theme~='pointer-arrow'][position^='bottom']) [part='arrow'] { + :host([theme~='arrow'][position^='top']) [part='arrow'], + :host([theme~='arrow'][position^='bottom']) [part='arrow'] { border-left: var(--vaadin-popover-arrow-size) solid transparent; border-right: var(--vaadin-popover-arrow-size) solid transparent; } - :host([theme~='pointer-arrow'][position^='bottom'][bottom-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][bottom-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][bottom-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][bottom-aligned]) [part='arrow'] { bottom: calc(var(--vaadin-popover-arrow-size) * -1); border-top: var(--vaadin-popover-arrow-size) solid var(--material-background-color); filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.14)); } - :host([theme~='pointer-arrow'][position^='bottom'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][top-aligned]) [part='arrow'] { top: calc(var(--vaadin-popover-arrow-size) * -1); border-bottom: var(--vaadin-popover-arrow-size) solid var(--material-background-color); filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.14)); } - :host([theme~='pointer-arrow'][position^='bottom'][start-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][start-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][start-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][start-aligned]) [part='arrow'] { transform: translateX(-50%); inset-inline-start: 1.5rem; } - :host([theme~='pointer-arrow'][position^='bottom'][end-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][end-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][end-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='top'][end-aligned]) [part='arrow'] { transform: translateX(50%); inset-inline-end: 1.5rem; } - :host([theme~='pointer-arrow'][position^='bottom'][arrow-centered]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='top'][arrow-centered]) [part='arrow'] { + :host([theme~='arrow'][position^='bottom'][arrow-centered]) [part='arrow'], + :host([theme~='arrow'][position^='top'][arrow-centered]) [part='arrow'] { transform: translateX(-50%); inset-inline-start: 50%; } /* start / end position */ - :host([theme~='pointer-arrow'][position^='start']) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end']) [part='arrow'] { + :host([theme~='arrow'][position^='start']) [part='arrow'], + :host([theme~='arrow'][position^='end']) [part='arrow'] { border-top: var(--vaadin-popover-arrow-size) solid transparent; border-bottom: var(--vaadin-popover-arrow-size) solid transparent; } - :host([theme~='pointer-arrow'][position^='start'][start-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][start-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][start-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][start-aligned]) [part='arrow'] { inset-inline-start: calc(var(--vaadin-popover-arrow-size) * -1); border-right: var(--vaadin-popover-arrow-size) solid var(--material-background-color); filter: drop-shadow(-2px 0 1px rgba(0, 0, 0, 0.14)); } - :host([theme~='pointer-arrow'][position^='start'][end-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][end-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][end-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][end-aligned]) [part='arrow'] { inset-inline-end: calc(var(--vaadin-popover-arrow-size) * -1); border-left: var(--vaadin-popover-arrow-size) solid var(--material-background-color); filter: drop-shadow(2px 0 1px rgba(0, 0, 0, 0.14)); } - :host([theme~='pointer-arrow'][position^='start'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][top-aligned]) [part='arrow'] { top: 0.5rem; } - :host([theme~='pointer-arrow'][position='start'][top-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position='end'][top-aligned]) [part='arrow'] { + :host([theme~='arrow'][position='start'][top-aligned]) [part='arrow'], + :host([theme~='arrow'][position='end'][top-aligned]) [part='arrow'] { top: 50%; transform: translateY(-50%); } - :host([theme~='pointer-arrow'][position^='start'][bottom-aligned]) [part='arrow'], - :host([theme~='pointer-arrow'][position^='end'][bottom-aligned]) [part='arrow'] { + :host([theme~='arrow'][position^='start'][bottom-aligned]) [part='arrow'], + :host([theme~='arrow'][position^='end'][bottom-aligned]) [part='arrow'] { bottom: 0.5rem; } `;