fix: updates after feedback from design

Author: castastrophe

components/accordion/dist/metadata.json

@@ -33,9 +33,7 @@
     ".spectrum-Accordion-itemTitle",
     ".spectrum-Accordion.spectrum-Accordion--noInlinePadding",
     ".spectrum-Accordion:dir(rtl)",
-    ".spectrum-Accordion:lang(ja)",
-    ".spectrum-Accordion:lang(ko)",
-    ".spectrum-Accordion:lang(zh)"
+    ".spectrum-Accordion:lang(ja, zh, ko)"
   ],
   "modifiers": [
     "--mod-accordion-animation-duration",

components/accordion/index.css

@@ -84,9 +84,7 @@
 	}
 
 	/* CJK (Chinese, Japanese, and Korean) language support */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
+	&:lang(ja, zh, ko) {
 		--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
 		--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
 	}

components/actionbar/dist/metadata.json

@@ -5,17 +5,13 @@
     ".spectrum-ActionBar .spectrum-ActionBar-popover",
     ".spectrum-ActionBar .spectrum-ActionGroup",
     ".spectrum-ActionBar .spectrum-FieldLabel",
-    ".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)",
-    ".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)",
-    ".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)",
+    ".spectrum-ActionBar .spectrum-FieldLabel:lang(ja, zh, ko)",
     ".spectrum-ActionBar--fixed",
     ".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
     ".spectrum-ActionBar--sticky",
     ".spectrum-ActionBar.is-open",
     ".spectrum-ActionBar.spectrum-ActionBar--emphasized",
-    ".spectrum-ActionBar:lang(ja)",
-    ".spectrum-ActionBar:lang(ko)",
-    ".spectrum-ActionBar:lang(zh)"
+    ".spectrum-ActionBar:lang(ja, zh, ko)"
   ],
   "modifiers": [
     "--mod-actionbar-close-button-to-counter",

components/actionbar/index.css

@@ -44,9 +44,7 @@
 	}
 
 	/* cjk language support for item counter */
-	&:lang(ja),
-	&:lang(zh),
-	&:lang(ko) {
+	&:lang(ja, zh, ko) {
 		--spectrum-actionbar-item-counter-line-height-cjk: var(--spectrum-cjk-line-height-100);
 	}
 }
@@ -110,9 +108,7 @@
 		padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter));
 
 		/* cjk language support */
-		&:lang(ja),
-		&:lang(zh),
-		&:lang(ko) {
+		&:lang(ja, zh, ko) {
 			line-height: var(--mod-actionbar-item-counter-line-height-cjk, var(--spectrum-actionbar-item-counter-line-height-cjk));
 		}
 	}

components/actionbutton/dist/metadata.json

@@ -14,16 +14,16 @@
     ".spectrum-ActionButton-label",
     ".spectrum-ActionButton-label:empty",
     ".spectrum-ActionButton.is-disabled",
-    ".spectrum-ActionButton.spectrum-ActionButton--emphasized:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--emphasized:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:has([aria-pressed=\"true\"]))",
-    ".spectrum-ActionButton.spectrum-ActionButton--quiet:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(:is([aria-pressed=\"true\"]))",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
     ".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
-    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:has([aria-pressed=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -33,8 +33,8 @@
     ".spectrum-ActionButton:focus-visible",
     ".spectrum-ActionButton:focus-visible:after",
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
-    ".spectrum-ActionButton:has([aria-pressed=\"true\"])",
     ".spectrum-ActionButton:hover",
+    ".spectrum-ActionButton:is([aria-pressed=\"true\"])",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
     "a.spectrum-ActionButton"
   ],

components/actionbutton/index.css

@@ -47,7 +47,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-line-height: var(--spectrum-actionbutton-height);
 
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-100);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-medium);
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-medium));
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-100);
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-100);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-100);
@@ -66,7 +66,7 @@ governing permissions and limitations under the License.
 		--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
 		--spectrum-actionbutton-background-color-disabled: transparent;
 
-		&:has([aria-pressed="true"]) {
+		&:is([aria-pressed="true"]) {
 			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 		}
 	}
@@ -119,7 +119,7 @@ governing permissions and limitations under the License.
 		}
 	}
 
-	&:has([aria-pressed="true"]) {
+	&:is([aria-pressed="true"]) {
 		--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
 		--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
 		--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
@@ -179,7 +179,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-50);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-50);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-50);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-small);
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-small));
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-50);
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-50);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-50);
@@ -196,7 +196,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-75);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-75);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-75);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-small);
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-small));
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-75);
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-75);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-75);
@@ -213,7 +213,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-200);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-200);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-200);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-large);
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-large));
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-200);
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-200);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-200);
@@ -228,7 +228,7 @@ governing permissions and limitations under the License.
 	--spectrum-actionbutton-icon-size: var(--spectrum-workflow-icon-size-300);
 	--spectrum-actionbutton-font-size: var(--spectrum-font-size-300);
 	--spectrum-actionbutton-text-to-visual: var(--spectrum-text-to-visual-300);
-	--spectrum-actionbutton-edge-to-hold-icon: var(--spectrum-action-button-edge-to-hold-icon-extra-large);
+	--spectrum-actionbutton-edge-to-hold-icon: var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-action-button-edge-to-hold-icon-extra-large));
 	--spectrum-actionbutton-edge-to-visual: var(--spectrum-component-edge-to-visual-300);
 	--spectrum-actionbutton-edge-to-text: var(--spectrum-component-edge-to-text-300);
 	--spectrum-actionbutton-edge-to-visual-only: var(--spectrum-component-edge-to-visual-only-300);
@@ -314,10 +314,22 @@ a.spectrum-ActionButton {
 
 .spectrum-ActionButton-hold {
 	position: absolute;
-	inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
-	inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
+	inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+	inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
+	display: block;
 	color: inherit;
+	background-color: currentColor;
 	transform: var(--spectrum-logical-rotation);
+
+	inline-size: 5px;
+	block-size: 5px;
+
+	/**
+	 * A few things to note here:
+	 * - cw = clockwise, ccw = counter-clockwise
+	 */
+	aspect-ratio: 1;
+	clip-path: shape(from 2.96% 82.89%, line to 82.92% 2.91%, arc to 100% 9.98% of 9.89% 9.84% small cw, vline to 84.97%, arc by -15.02% 15.03% of 15.02% 15.03% small cw, hline to 10.03%, arc by -7.09% -17.11% of 10.01% 10.02% small cw);
 }
 
 /* Focus indicator */
@@ -389,7 +401,7 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-background-color-disabled: Canvas;
 			--highcontrast-actionbutton-content-color-default: CanvasText;
 
-			&:disabled:not(:has([aria-pressed="true"])) {
+			&:disabled:not(:is([aria-pressed="true"])) {
 				--highcontrast-actionbutton-border-color: Canvas;
 			}
 		}
@@ -402,7 +414,7 @@ a.spectrum-ActionButton {
 		}
 
 		/* Selected always shows as a solid highlighted color. */
-		&:has([aria-pressed="true"]) {
+		&:is([aria-pressed="true"]) {
 			--highcontrast-actionbutton-border-color: Highlight;
 			--highcontrast-actionbutton-background-color-default: Highlight;
 			--highcontrast-actionbutton-content-color-default: HighlightText;

components/actionbutton/stories/actionbutton.stories.js

@@ -68,6 +68,17 @@ export default {
 			control: "select",
 			options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
 		},
+		showPopup: {
+			name: "Show popup",
+			description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Accessibility",
+			},
+			control: "boolean",
+			if: { arg: "hasPopup", truthy: true },
+		},
 		isOpen: {
 			...isOpen,
 			if: { arg: "hasPopup", truthy: true },
@@ -83,6 +94,7 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: "false",
+		showPopup: false,
 		isActive: false,
 		isFocused: false,
 		isHovered: false,

components/actionbutton/stories/template.js

@@ -74,7 +74,7 @@ export const Template = ({
 			aria-label=${ifDefined(hideLabel ? label : undefined)}
 			aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
 			aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
-			aria-pressed=${isSelected ? "true" : "false"}
+			aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
 			aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
 			class=${classMap({
 				[rootClass]: true,
@@ -107,20 +107,7 @@ export const Template = ({
 				updateArgs({ isFocused: false });
 			}}
 		>
-			${when(showPopup && hasPopup && hasPopup !== "false", () =>
-				Icon({
-					size,
-					iconName: "CornerTriangle" + ({
-						xs: "75",
-						s: "75",
-						m: "100",
-						l: "200",
-						xl: "300",
-					}[size] || "100"),
-					setName: "ui",
-					customClasses: [`${rootClass}-hold`],
-				}, context)
-			)}
+			${when(showPopup && hasPopup && hasPopup !== "false", () => html`<span class=${classMap({ [`${rootClass}-hold`]: true })}></span>`)}
 			${when(iconName, () =>
 				Icon({
 					size,