Rename --arrow-border-width to --popup-border-width

It's actually nothing to do with the width of the arrows border, but rather the width of any border applied to the popup body itself.

Author: TCWORLD

packages/webawesome/docs/docs/components/popup.md

@@ -333,9 +333,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 
 ### Arrows
 
-Add an arrow to your popup with the `arrow` attribute. It's usually a good idea to set a `distance` to make room for the arrow. To adjust the arrow's color and size, use the `--arrow-color` and `--arrow-size` custom properties, respectively. 
-
-You can also target the `arrow` part to add additional styles such as shadows and borders to match styles applied to rest of the popup element. When adding borders to the popup arrow, make sure to set the `--arrow-border-width` custom property to match the width of the border to so that the size calculations can take account for this.
+Add an arrow to your popup with the `arrow` attribute. It's usually a good idea to set a `distance` to make room for the arrow. To adjust the arrow's color and size, use the `--arrow-color` and `--arrow-size` custom properties, respectively. You can also target the `arrow` part to add additional styles such as shadows and borders to match styles applied to rest of the popup element. 
 
 By default, the arrow will be aligned as close to the center of the _anchor_ as possible, considering available space and `arrow-padding`. You can use the `arrow-placement` attribute to force the arrow to align to the start, end, or center of the _popup_ instead.
 

packages/webawesome/docs/docs/resources/changelog.md

@@ -19,7 +19,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug that caused `<wa-dropdown>` elements to scroll the document in Chrome 145
 - Updated `<wa-icon>` to use [Font Awesome 7.2.0](https://fontawesome.com/changelog#v7-2-0) [pr:2059]
 - Updated `<wa-popup>` arrow styling to prevent larger sized arrow from overlapping the contents of the popup [pr:2070]
-- Added `--arrow-border-width` parameter to `<wa-popup>`. This must be set to match the width of any border added to the popup element [pr:2070]
+- Added `--popup-border-width` parameter to `<wa-popup>`. This must be set to match the width of any border added to the popup element [pr:2070]
 - Modified native styles so that `border-radius` does not apply to `svg` elements by default [pr:2078]
 
 ## 3.2.1

packages/webawesome/src/components/popover/popover.styles.ts

@@ -42,7 +42,7 @@ export default css`
   /* The <wa-popup> element */
   .popover {
     --arrow-size: inherit;
-    --arrow-border-width: var(--wa-panel-border-width);
+    --popup-border-width: var(--wa-panel-border-width);
     --show-duration: inherit;
     --hide-duration: inherit;
 

packages/webawesome/src/components/popup/popup.styles.ts

@@ -4,7 +4,7 @@ export default css`
   :host {
     --arrow-color: black;
     --arrow-size: var(--wa-tooltip-arrow-size);
-    --arrow-border-width: 0px;
+    --popup-border-width: 0px;
     --show-duration: 100ms;
     --hide-duration: 100ms;
 
@@ -17,8 +17,8 @@ export default css`
      * to keep it central.
      */
 
-    --arrow-base-offset: calc(var(--arrow-border-width) + 0.5px);
-    --arrow-size-diagonal: calc((var(--arrow-size) + var(--arrow-border-width)) * 0.7071);
+    --arrow-base-offset: calc(var(--popup-border-width) + 0.5px);
+    --arrow-size-diagonal: calc((var(--arrow-size) + var(--popup-border-width)) * 0.7071);
     --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
 
     display: contents;

packages/webawesome/src/components/popup/popup.ts

@@ -56,7 +56,8 @@ const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popo
  *
  * @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-border-width] - The width of any custom border applied to the arrow.
+ * @cssproperty [--popup-border-width] - The width of any custom border applied to the popup. This is used to reposition
+ *  the arrow to overlap to the inside edge of the popup border.
  * @cssproperty [--arrow-color=black] - The color of the arrow.
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
  *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only

packages/webawesome/src/components/tooltip/tooltip.styles.ts

@@ -54,7 +54,7 @@ export default css`
   }
 
   .tooltip {
-    --arrow-border-width: var(--wa-tooltip-border-width);
+    --popup-border-width: var(--wa-tooltip-border-width);
 
     &::part(arrow) {
       border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);