chore(close-button): add Cross400 and Cross500 icons for l and xl sizes

Wire close-button l/xl to spectrum-css UI icon paths instead of reusing Cross300.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: TarunAdobe

2nd-gen/packages/swc/components/close-button/CloseButton.ts

@@ -19,17 +19,20 @@ import {
   type CloseButtonSize,
 } from '@spectrum-web-components/core/components/close-button';
 
-import { Cross200Icon, Cross300Icon } from '../icon/elements/index.js';
+import {
+  Cross200Icon,
+  Cross300Icon,
+  Cross400Icon,
+  Cross500Icon,
+} from '../icon/elements/index.js';
 
 import styles from './close-button.css';
 
 const crossIconBySize: Record<CloseButtonSize, () => TemplateResult> = {
   s: Cross200Icon,
   m: Cross300Icon,
-  // @todo map to Cross400Icon when added to the 2nd-gen icon set.
-  l: Cross300Icon,
-  // @todo map to Cross500Icon when added to the 2nd-gen icon set.
-  xl: Cross300Icon,
+  l: Cross400Icon,
+  xl: Cross500Icon,
 };
 
 /**

2nd-gen/packages/swc/components/icon/elements/Cross400Icon.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { html, TemplateResult } from 'lit';
+
+export const Cross400Icon = (): TemplateResult => {
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12">
+      <path
+        d="m7.398 6 3.932-3.932A.989.989 0 0 0 9.932.67L6 4.602 2.068.67A.989.989 0 0 0 .67 2.068L4.602 6 .67 9.932a.989.989 0 1 0 1.398 1.398L6 7.398l3.932 3.932a.989.989 0 0 0 1.398-1.398z"
+      />
+    </svg>
+  `;
+};

2nd-gen/packages/swc/components/icon/elements/Cross500Icon.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { html, TemplateResult } from 'lit';
+
+export const Cross500Icon = (): TemplateResult => {
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
+      <path
+        d="m8.457 7 4.54-4.54a1.03 1.03 0 0 0-1.458-1.456L7 5.543l-4.54-4.54a1.03 1.03 0 0 0-1.457 1.458L5.543 7l-4.54 4.54a1.03 1.03 0 1 0 1.457 1.456L7 8.457l4.54 4.54a1.03 1.03 0 0 0 1.456-1.458z"
+      />
+    </svg>
+  `;
+};

2nd-gen/packages/swc/components/icon/elements/index.ts

@@ -25,6 +25,8 @@ export * from './Cross75Icon.js';
 export * from './Cross100Icon.js';
 export * from './Cross200Icon.js';
 export * from './Cross300Icon.js';
+export * from './Cross400Icon.js';
+export * from './Cross500Icon.js';
 export * from './Dash75Icon.js';
 export * from './Dash100Icon.js';
 export * from './Dash200Icon.js';