fix arrow

docs/resources/changelog.md

@@ -8,6 +8,10 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
+## Next
+
+- Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size
+
 ## 2.0.0-beta.82
 
 - Added the `sync` and `arrow-placement` attributes to `<sl-popup>`

src/components/popup/popup.styles.ts

@@ -5,8 +5,15 @@ export default css`
   ${componentStyles}
 
   :host {
-    --arrow-size: 4px;
     --arrow-color: var(--sl-color-neutral-1000);
+    --arrow-size: 6px;
+
+    /*
+     * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
+     * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     */
+    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+    --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
 
     display: contents;
   }
@@ -28,8 +35,8 @@ export default css`
 
   .popup__arrow {
     position: absolute;
-    width: calc(var(--arrow-size) * 2);
-    height: calc(var(--arrow-size) * 2);
+    width: calc(var(--arrow-size-diagonal) * 2);
+    height: calc(var(--arrow-size-diagonal) * 2);
     transform: rotate(45deg);
     background: var(--arrow-color);
     z-index: -1;

src/components/popup/popup.ts

@@ -23,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
  *  maybe a border or box shadow.
  * @csspart popup - The popup's container. Useful for setting a background color, box shadow, etc.
  *
- * @cssproperty [--arrow-size=4px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
+ * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
  *  attribute is used.
  * @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
@@ -388,16 +388,16 @@ export default class SlPopup extends ShoelaceElement {
 
         if (this.arrowPlacement === 'start') {
           // Start
-          left = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';
-          top = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';
+          left = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+          top = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
         } else if (this.arrowPlacement === 'end') {
           // End
-          right = typeof arrowX === 'number' ? `${this.arrowPadding}px` : '';
-          bottom = typeof arrowY === 'number' ? `${this.arrowPadding}px` : '';
+          right = typeof arrowX === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
+          bottom = typeof arrowY === 'number' ? `calc(${this.arrowPadding}px - var(--arrow-padding-offset))` : '';
         } else if (this.arrowPlacement === 'center') {
           // Center
-          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size))` : '';
-          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size))` : '';
+          left = typeof arrowX === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
+          top = typeof arrowY === 'number' ? `calc(50% - var(--arrow-size-diagonal))` : '';
         } else {
           // Anchor (default)
           left = typeof arrowX === 'number' ? `${arrowX}px` : '';
@@ -409,7 +409,7 @@ export default class SlPopup extends ShoelaceElement {
           right,
           bottom,
           left,
-          [staticSide]: 'calc(var(--arrow-size) * -1)'
+          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)'
         });
       }
     });

src/themes/dark.css

@@ -514,7 +514,7 @@
   --sl-tooltip-font-size: var(--sl-font-size-small);
   --sl-tooltip-line-height: var(--sl-line-height-dense);
   --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
-  --sl-tooltip-arrow-size: 4px;
+  --sl-tooltip-arrow-size: 6px;
 
   /*
    * Z-indexes

src/themes/light.css

@@ -514,7 +514,7 @@
   --sl-tooltip-font-size: var(--sl-font-size-small);
   --sl-tooltip-line-height: var(--sl-line-height-dense);
   --sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
-  --sl-tooltip-arrow-size: 4px;
+  --sl-tooltip-arrow-size: 6px;
 
   /*
    * Z-indexes