chore(icons): centralize rtl handling for icons in swc-ui-icon

Author: cdransf

2nd-gen/packages/swc/components/accordion/accordion-item.css

@@ -111,25 +111,22 @@
 /* ── Disclosure indicator (chevron) ─────────────────────────────────── */
 
 /* swc-ui-icon maps the item size to the correct optical step and sizes its own box
- * from the ui-icon-* token scale, so the accordion only passes size. Rotation and RTL
- * mirroring remain here as accordion-specific behavior. */
+ * from the ui-icon-* token scale, so the accordion only passes size. swc-ui-icon also
+ * owns RTL mirroring for the chevron itself; rotation on open remains here as
+ * accordion-specific behavior. */
 .swc-AccordionItem-indicator {
   flex-shrink: 0;
   rotate: 0deg;
   transition: rotate token("animation-duration-100") token("animation-ease-in-out");
 }
 
-/* Mirror for RTL so the chevron points left. The UI icon element does not yet mirror
- * directional icons itself, so the accordion handles RTL mirroring for now. */
-:dir(rtl) .swc-AccordionItem-indicator {
-  scale: -1 1;
-}
-
 :host([open]) .swc-AccordionItem-indicator {
   rotate: 90deg;
 }
 
-/* RTL + open: rotate the opposite direction */
+/* RTL + open: swc-ui-icon has already mirrored the chevron horizontally, so rotating
+ * the same direction as LTR would point the wrong way; rotate the opposite direction
+ * to still land on "pointing down" once open. */
 :host([open]):dir(rtl) .swc-AccordionItem-indicator {
   rotate: -90deg;
 }

2nd-gen/packages/swc/components/ui-icons/UiIcon.ts

@@ -18,14 +18,17 @@ import { UI_ICONS, UiIconName } from './icon-set/index.js';
 import { resolveUiIconArt } from './ui-icons.types.js';
 
 import iconBaseStyles from '../../stylesheets/_lit-styles/icon-base.css';
+import uiIconDirectionStyles from './ui-icon-direction.css';
 import uiIconSizeStyles from './ui-icon-sizes.css';
 
 /**
  * An internal icon renderer for Spectrum UI icons (chevrons, checkmarks, arrows, and
  * other control internals). The `icon` attribute selects the icon-set, and the
  * element renders the optically-tuned step that matches its `size`. Extends
- * `IconBase` for size and host-owned accessibility. Not published for consumers;
- * used by other swc components.
+ * `IconBase` for size and host-owned accessibility. A curated set of directional
+ * icons (chevrons, arrows) mirror automatically in RTL; consuming components do not
+ * need their own mirror rule for these icons. Not published for consumers; used by
+ * other swc components.
  *
  * @element swc-ui-icon
  * @status internal
@@ -41,13 +44,15 @@ import uiIconSizeStyles from './ui-icon-sizes.css';
 export class UiIcon extends IconBase {
   /**
    * The logical UI icon to render, matching a key in the icon-set registry (for
-   * example `chevron` or `corner-triangle`).
+   * example `chevron` or `corner-triangle`). Reflected so RTL mirroring can key off
+   * the host attribute regardless of whether a consumer sets `icon` via markup or a
+   * property binding.
    */
-  @property({ type: String })
+  @property({ type: String, reflect: true })
   public icon!: UiIconName;
 
   public static override get styles(): CSSResultArray {
-    return [iconBaseStyles, uiIconSizeStyles];
+    return [iconBaseStyles, uiIconSizeStyles, uiIconDirectionStyles];
   }
 
   protected override willUpdate(changed: PropertyValues<this>): void {

2nd-gen/packages/swc/components/ui-icons/test/ui-icons.test.ts

@@ -185,6 +185,137 @@ export const LabelTogglingTest: Story = {
   },
 };
 
+// ──────────────────────────────────────────────────────────────
+// TEST: RTL mirroring
+// ──────────────────────────────────────────────────────────────
+
+export const DirectionalIconMirrorsInRtlTest: Story = {
+  render: () => html`
+    <swc-ui-icon
+      icon="chevron"
+      dir="rtl"
+      accessible-label="Expand"
+    ></swc-ui-icon>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const icon = await getComponent<UiIcon>(canvasElement, 'swc-ui-icon');
+
+    await step('mirrors a curated directional icon under RTL', async () => {
+      expect(
+        getComputedStyle(icon).scale,
+        'chevron is horizontally mirrored in RTL'
+      ).toBe('-1 1');
+    });
+  },
+};
+
+// chevron and arrow are two independent :host() selector clauses in
+// ui-icon-direction.css, not one dynamically-generated rule, so each is
+// tested explicitly; a typo in one clause wouldn't be caught by testing
+// only the other.
+export const SecondDirectionalIconMirrorsInRtlTest: Story = {
+  render: () => html`
+    <swc-ui-icon icon="arrow" dir="rtl" accessible-label="Go"></swc-ui-icon>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const icon = await getComponent<UiIcon>(canvasElement, 'swc-ui-icon');
+
+    await step(
+      'mirrors the other curated directional icon under RTL',
+      async () => {
+        expect(
+          getComputedStyle(icon).scale,
+          'arrow is horizontally mirrored in RTL'
+        ).toBe('-1 1');
+      }
+    );
+  },
+};
+
+// Mirrors tabs.test.ts's SelectionIndicatorDirectionChangeTest pattern: real
+// consumers (AccordionItem, MessageSources, ResponseStatus) never set `dir`
+// directly on their <swc-ui-icon>; they rely on it inheriting from an
+// ancestor. Verified separately from the direct-attribute tests above since
+// :host(:dir(rtl)[icon="..."])'s selector-matching quirk (see
+// ui-icon-direction.css) makes it worth confirming inherited directionality
+// resolves the same way, not assuming it from spec compliance alone.
+export const DirectionalIconMirrorsWithInheritedRtlTest: Story = {
+  render: () => html`
+    <div id="direction-wrapper" dir="ltr">
+      <swc-ui-icon icon="chevron" accessible-label="Expand"></swc-ui-icon>
+    </div>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const icon = await getComponent<UiIcon>(canvasElement, 'swc-ui-icon');
+    const wrapper = canvasElement.querySelector(
+      '#direction-wrapper'
+    ) as HTMLElement;
+
+    await step('does not mirror while the ancestor is LTR', async () => {
+      expect(
+        getComputedStyle(icon).scale,
+        'chevron is unmirrored while the ancestor is LTR'
+      ).toBe('none');
+    });
+
+    await step(
+      'mirrors once an ancestor dir attribute flips to RTL at runtime',
+      async () => {
+        wrapper.setAttribute('dir', 'rtl');
+        await icon.updateComplete;
+        expect(
+          getComputedStyle(icon).scale,
+          'chevron mirrors once the ancestor is RTL, with no dir attribute of its own'
+        ).toBe('-1 1');
+      }
+    );
+
+    wrapper.setAttribute('dir', 'ltr');
+  },
+};
+
+export const DirectionalIconUnmirroredInLtrTest: Story = {
+  render: () => html`
+    <swc-ui-icon
+      icon="chevron"
+      dir="ltr"
+      accessible-label="Expand"
+    ></swc-ui-icon>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const icon = await getComponent<UiIcon>(canvasElement, 'swc-ui-icon');
+
+    await step('does not mirror under LTR', async () => {
+      expect(getComputedStyle(icon).scale, 'chevron is unmirrored in LTR').toBe(
+        'none'
+      );
+    });
+  },
+};
+
+export const NonDirectionalIconUnaffectedInRtlTest: Story = {
+  render: () => html`
+    <swc-ui-icon
+      icon="checkmark"
+      dir="rtl"
+      accessible-label="Done"
+    ></swc-ui-icon>
+  `,
+  play: async ({ canvasElement, step }) => {
+    const icon = await getComponent<UiIcon>(canvasElement, 'swc-ui-icon');
+
+    await step(
+      'leaves a non-directional icon unmirrored under RTL',
+      async () => {
+        expect(
+          getComputedStyle(icon).scale,
+          'checkmark is not in the curated directional list, so it never flips'
+        ).toBe('none');
+      }
+    );
+  },
+};
+
 // ──────────────────────────────────────────────────────────────
 // TEST: Edge cases
 // ──────────────────────────────────────────────────────────────

2nd-gen/packages/swc/components/ui-icons/ui-icon-direction.css

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+
+/*
+ * A4U exposes no per-icon mirror flag, so directional icons are mirrored in RTL via
+ * this curated, hand-maintained list rather than per-icon metadata (icon-rfc.md,
+ * section 11). First pass: chevrons and arrows. Icons not listed here (checkmarks,
+ * crosses, and similar non-directional art) never flip. Consuming components no
+ * longer need their own RTL mirror rule for these icons; this is the single place
+ * that owns the decision.
+ *
+ * Both conditions must live inside :host()'s own argument as one compound selector
+ * (:host(:dir(rtl)[icon="..."])). Chaining an attribute selector after a closing
+ * :host(:dir(...)) instead (:host(:dir(rtl))[icon="..."]) parses without error but
+ * never matches, verified against Chromium 138.0.7204.23 (this repo's pinned
+ * Playwright 1.53.1); keep new entries in this same form rather than "simplifying"
+ * back to the chained one.
+ */
+:host(:dir(rtl)[icon="chevron"]),
+:host(:dir(rtl)[icon="arrow"]) {
+  scale: -1 1;
+}