fix(tag): expand clear button target area

- puts clear button spacing tokens into calc for clear button size in
order to expand target area
- removes older clear button calcs, modified calcs serve to cancel out
unneeded spacing from item label

Author: rise-erpelding

components/tag/dist/metadata.json

@@ -245,6 +245,7 @@
     "--mod-clear-button-icon-color-hover",
     "--mod-clear-button-icon-color-key-focus",
     "--mod-clear-button-width",
+    "--mod-icon-size",
     "--mod-thumbnail-opacity-disabled",
     "--mod-thumbnail-size"
   ],

components/tag/index.css

@@ -97,12 +97,25 @@
 	--mod-avatar-inline-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size));
 	--mod-avatar-block-size: var(--mod-tag-avatar-size, var(--spectrum-tag-avatar-size));
 	--mod-thumbnail-size: var(--mod-tag-thumbnail-size, var(--spectrum-tag-thumbnail-size));
-	--mod-clear-button-width: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size));
-	--mod-clear-button-height: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size));
 	--mod-clear-button-background-color: transparent;
 	--mod-clear-button-icon-color: currentColor;
 	--mod-clear-button-icon-color-hover: currentColor;
 	--mod-clear-button-icon-color-key-focus: currentColor;
+
+	--mod-icon-size: var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size));
+
+	/* clear icon inline spacing + icon size */
+	--mod-clear-button-width: calc(
+		var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) +
+		var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) +
+		var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))
+	);
+
+	/* clear icon block spacing + icon size */
+	--mod-clear-button-height: calc(
+		2 * var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) +
+		var(--mod-tag-clear-button-size, var(--spectrum-tag-clear-button-size))
+	);
 	/* @passthrough end */
 
 	&:lang(ja),
@@ -228,12 +241,11 @@
 	.spectrum-Tag-clearButton {
 		box-sizing: border-box;
 
-		padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-		padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+		/* remove label inline-end spacing with negative margin */
+		margin-inline-start: calc((var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width))) * -1);
 
-		/* move button negative calc to cancel label end margin, then add button start margin, add border width because it's being subtracted from the label spacing inline */
-		margin-inline-start: calc(var(--mod-tag-label-to-clear-icon, var(--spectrum-tag-label-to-clear-icon)) - (var(--mod-tag-label-spacing-inline, var(--spectrum-tag-label-spacing-inline))) + var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
-		margin-inline-end: calc(var(--mod-tag-edge-to-clear-icon, var(--spectrum-tag-edge-to-clear-icon)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
+		/* remove border width from clear button */
+		margin-inline-end: calc(var(--mod-tag-border-width, var(--spectrum-tag-border-width)) * -1);
 	}
 
 	.spectrum-Tag-itemLabel {