diff --git a/.changeset/dark-rivers-live.md b/.changeset/dark-rivers-live.md
new file mode 100644
index 00000000000..2182ea635b8
--- /dev/null
+++ b/.changeset/dark-rivers-live.md
@@ -0,0 +1,6 @@
+---
+'@spectrum-web-components/menu': patch
+---
+
+**Fixes**: Icons in menu stories weren't properly responding to theme changes when used in functional story components.
+Switching to class-based LitElement components ensures proper component lifecycle hooks and shadow DOM context for icon initialization and theme integration.
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 240b5f738c2..70f90123698 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -14,7 +14,7 @@ parameters:
# 3. Commit this change to the PR branch where the changes exist.
current_golden_images_hash:
type: string
- default: b3342a5f378ee473443510bcbd28f80c10e29460
+ default: a6fdd13f78f7931bbf15af5aef3c79f0423df3b5
wireit_cache_name:
type: string
default: wireit
diff --git a/packages/menu/stories/menu.stories.ts b/packages/menu/stories/menu.stories.ts
index f57d70d93b4..f589ee73dbd 100644
--- a/packages/menu/stories/menu.stories.ts
+++ b/packages/menu/stories/menu.stories.ts
@@ -9,7 +9,11 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
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 '@spectrum-web-components/base';
+import {
+ html,
+ LitElement,
+ TemplateResult,
+} from '@spectrum-web-components/base';
import type { Menu, MenuItem } from '@spectrum-web-components/menu';
import '@spectrum-web-components/menu/sp-menu.js';
@@ -160,105 +164,133 @@ controlled.parameters = {
chromatic: { disableSnapshot: true },
};
-export const menuItemWithDescription = (): TemplateResult => {
- return html`
-
-
-
- Quick export
- Share a snapshot
-
-
-
- Open a copy
- Illustrator for iPad
-
-
-
- Share link
- Enable comments and download
-
-
-
-
-
- Deselect
-
- Select Inverse
- Enable inverse selection
-
- Feather...
- Select and Mask...
-
- Save Selection
-
- Make Work Path
- Create a reusable work path
-
-
-
- `;
-};
-
-export const selectsWithIcons = (): TemplateResult => {
- return html`
-
-
+class MenuItemWithDescription extends LitElement {
+ public overriderender(): TemplateResult {
+ return html`
+
Quick export
+ Share a snapshot
-
+
Open a copy
+ Illustrator for iPad
-
+
Share link
Enable comments and download
-
- `;
-};
-export const headersAndIcons = (): TemplateResult => {
- return html`
-
-
-
- Section Heading
- Action 1
- Action 2
- Action 3
-
-
-
- Section Heading
-
-
- Save
+
+
+ Deselect
+
+ Select Inverse
+ Enable inverse selection
+ Feather...
+ Select and Mask...
+
+ Save Selection
-
- Download
+ Make Work Path
+
+ Create a reusable work path
+
-
-
+
+
+ `;
+ }
+}
+
+customElements.define('menu-item-with-description', MenuItemWithDescription);
+
+export const menuItemWithDescription = (): TemplateResult => html`
+
+`;
+
+class WithIcons extends LitElement {
+ public override render(): TemplateResult {
+ return html`
+
+
+
+
+ Quick export
+
+
+
+ Open a copy
+
+
+
Share link
- Enable comments
+
+ Enable comments and download
+
-
-
-
- `;
-};
+
+
+ `;
+ }
+}
+
+customElements.define('menu-with-icons', WithIcons);
+
+export const SelectsWithIcons = (): TemplateResult => html`
+
+`;
+
+class HeadersAndIcons extends LitElement {
+ public override render(): TemplateResult {
+ return html`
+
+
+
+ Section Heading
+ Action 1
+ Action 2
+ Action 3
+
+
+
+ Section Heading
+
+
+ Save
+
+
+
+ Download
+
+
+
+ Share link
+ Enable comments
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('headers-and-icons', HeadersAndIcons);
+
+export const headersAndIcons = (): TemplateResult => html`
+
+`;
headersAndIcons.storyName = 'Headers and Icons';