From a44090d4af28f958cad98c0f8f45c56b74a02b3e Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 10:10:46 -0400
Subject: [PATCH 1/6] update dropdown menu styles

---
 src/components/DropdownMenu.stories.tsx | 30 +++++++++++++++++++++++++
 src/components/DropdownMenu.tsx         | 22 ++++++++++--------
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/src/components/DropdownMenu.stories.tsx b/src/components/DropdownMenu.stories.tsx
index eb4c68183..1b8d1566e 100644
--- a/src/components/DropdownMenu.stories.tsx
+++ b/src/components/DropdownMenu.stories.tsx
@@ -34,6 +34,36 @@ const Menus = (variant: 'light' | 'primary' | 'secondary') => {
         Export grades to .csv
       </DropdownMenuItem>
     </DropdownMenu>
+
+    <br/>
+
+    <DropdownMenu id='links-menu' text='Resources' variant={variant}>
+      <DropdownMenuItem href='https://openstax.org' target='_blank'>
+        Browse subjects
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+        View all textbooks
+      </DropdownMenuItem>
+      <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+        About OpenStax
+      </DropdownMenuItem>
+    </DropdownMenu>
+
+    <br/>
+
+    <div style={{ width: '50rem', maxWidth: '100%' }}>
+      <DropdownMenu id='links-menu' text='Wide Menu' width="100%" variant={variant}>
+        <DropdownMenuItem href='https://openstax.org' target='_blank'>
+          Browse subjects
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/subjects' target='_blank'>
+          View all textbooks
+        </DropdownMenuItem>
+        <DropdownMenuItem href='https://openstax.org/about' target='_blank'>
+          About OpenStax
+        </DropdownMenuItem>
+      </DropdownMenu>
+    </div>
   </>;
 };
 
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index 97374f159..1ddafd546 100644
--- a/src/components/DropdownMenu.tsx
+++ b/src/components/DropdownMenu.tsx
@@ -14,15 +14,15 @@ const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
   flex-direction: row;
   font-size: 1.6rem;
   position: relative;
-  justify-content: center;
+  justify-content: space-between;
   line-height: 2rem;
   min-height: 2.5rem;
-  padding: 0 1.5rem 0 0.5rem;
+  padding: 1rem 2.5rem 1rem 1rem;
   text-align: left;
   text-decoration: none;
   transition: all 0.2s ease-in-out;
   user-select: none;
-  ${(props) => props.width ? `width: ${props.width}` : null}
+  ${(props) => props.width ? `width: ${props.width};` : null}
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 
@@ -40,11 +40,11 @@ const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
     content: ' ';
     display: block;
     position: absolute;
-    height: 0.5rem;
+    height: 0.6rem;
     margin-top: -0.25rem;
-    right: 0.5rem;
+    right: 1rem;
     transform: rotate(135deg);
-    width: 0.5rem;
+    width: 0.6rem;
   }
 `;
 
@@ -52,22 +52,25 @@ const StyledMenu = styled(Menu)`
   margin-top: -0.6rem;
   background-color: ${palette.white};
   border: 0.1rem solid ${palette.pale};
-  padding: 0.3rem 0;
+  padding: 0;
   cursor: pointer;
   color: ${palette.black};
 
   [role="menuitem"] {
+    display: block;
+    color: inherit;
+    text-decoration: none;
     font-size: 1.6rem;
     min-height: 2.5rem;
     line-height: 2rem;
-    padding: 0 0.5rem;
+    padding: 1rem 0.5rem;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
 
     &:hover {
-      background-color: ${palette.pale};
+      background-color: ${palette.neutralLighter};
     }
   }
 `;
@@ -82,6 +85,7 @@ interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps
 export const DropdownMenu = <T extends object>(
   { text, children, variant, width, disabled, ...props }: DropdownMenuButtonProps<T>
 ) => {
+  console.log('width', width);
   return (
     <MenuTrigger {...props}>
       <StyledButton variant={variant} width={width} isDisabled={disabled}>{text}</StyledButton>

From c90dada8d344635548fd4d9389bd7b3fa27ec0ba Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 10:12:10 -0400
Subject: [PATCH 2/6] remove debug

---
 src/components/DropdownMenu.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index 1ddafd546..a81b132d2 100644
--- a/src/components/DropdownMenu.tsx
+++ b/src/components/DropdownMenu.tsx
@@ -85,7 +85,6 @@ interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps
 export const DropdownMenu = <T extends object>(
   { text, children, variant, width, disabled, ...props }: DropdownMenuButtonProps<T>
 ) => {
-  console.log('width', width);
   return (
     <MenuTrigger {...props}>
       <StyledButton variant={variant} width={width} isDisabled={disabled}>{text}</StyledButton>

From ac311368d0c792bd7222cfcdf5e36e88050e6faf Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 10:13:58 -0400
Subject: [PATCH 3/6] bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1708693d2..2bec0f831 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.22.2",
+  "version": "1.22.3",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"

From d45329d99ba852f1d4e2206f49a78645a7e648e2 Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 10:15:19 -0400
Subject: [PATCH 4/6] :camera:

---
 src/components/__snapshots__/DropdownMenu.spec.tsx.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
index dc61d042d..46cc2fd1b 100644
--- a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
+++ b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`DropdownMenu matches snapshots 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ hTVCmA"
+    class="sc-bczRLJ fKigdf"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-1"
@@ -22,7 +22,7 @@ exports[`DropdownMenu matches snapshots 2`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ ga-doNl"
+    class="sc-bczRLJ lgmwux"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-4"

From b2993a71327af2358ebc38dca26c7a9454917278 Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 12:42:56 -0400
Subject: [PATCH 5/6] migrate dropdownmenu to raw css

---
 src/components/DropdownMenu.css               | 88 +++++++++++++++++
 src/components/DropdownMenu.tsx               | 96 ++++---------------
 .../__snapshots__/DropdownMenu.spec.tsx.snap  |  6 +-
 3 files changed, 111 insertions(+), 79 deletions(-)
 create mode 100644 src/components/DropdownMenu.css

diff --git a/src/components/DropdownMenu.css b/src/components/DropdownMenu.css
new file mode 100644
index 000000000..3918dcdf2
--- /dev/null
+++ b/src/components/DropdownMenu.css
@@ -0,0 +1,88 @@
+/* Dropdown menu trigger button */
+.dropdown-menu-button {
+  align-items: center;
+  border: 0;
+  border-radius: 0.5rem;
+  box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 1.6rem;
+  position: relative;
+  justify-content: space-between;
+  line-height: 2rem;
+  min-height: 2.5rem;
+  padding: 1rem 2.5rem 1rem 1rem;
+  text-align: left;
+  text-decoration: none;
+  transition: all 0.2s ease-in-out;
+  user-select: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+
+  /* Variant-specific styles using CSS custom properties (shared with Button.css) */
+  background-color: var(--button-bg, #d4450c);
+  color: var(--button-color, #ffffff);
+  font-weight: var(--button-font-weight, 700);
+}
+
+.dropdown-menu-button:disabled {
+  opacity: 0.4;
+}
+
+.dropdown-menu-button:not([disabled]) {
+  cursor: pointer;
+}
+
+.dropdown-menu-button:not([disabled]):hover {
+  background: var(--button-bg-hover, #be3c08);
+}
+
+.dropdown-menu-button:not([disabled]):active {
+  background: var(--button-bg-active, #b03808);
+}
+
+.dropdown-menu-button:focus {
+  outline: solid var(--button-outline, #ffffff);
+  box-shadow: inset 0 0 0 0.3rem var(--button-shadow, #000000);
+}
+
+.dropdown-menu-button::after {
+  background: var(--dropdown-caret-color, #ffffff);
+  clip-path: polygon(0 0, 100% 100%, 100% 0);
+  content: " ";
+  display: block;
+  position: absolute;
+  height: 0.6rem;
+  margin-top: -0.25rem;
+  right: 1rem;
+  transform: rotate(135deg);
+  width: 0.6rem;
+}
+
+/* Dropdown menu popover */
+.dropdown-menu {
+  margin-top: -0.6rem;
+  background-color: #ffffff;
+  border: 0.1rem solid #d5d5d5;
+  padding: 0;
+  cursor: pointer;
+  color: #000000;
+}
+
+.dropdown-menu [role="menuitem"] {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  font-size: 1.6rem;
+  min-height: 2.5rem;
+  line-height: 2rem;
+  padding: 1rem 0.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.dropdown-menu [role="menuitem"]:hover {
+  background-color: #f1f1f1;
+}
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index a81b132d2..1b262aecc 100644
--- a/src/components/DropdownMenu.tsx
+++ b/src/components/DropdownMenu.tsx
@@ -1,79 +1,8 @@
+import React from 'react';
 import { Button, Menu, MenuItem, MenuProps, MenuTrigger, MenuTriggerProps, Popover } from 'react-aria-components';
-import styled from 'styled-components';
-import { ButtonVariant, applyButtonVariantStyles } from '../theme/buttons';
+import { ButtonVariant, getButtonVariantStyles } from '../theme/buttons';
 import { palette } from '../theme/palette';
-
-const StyledButton = styled(Button)<{ variant: ButtonVariant; width?: string }>`
-  ${(props) => applyButtonVariantStyles(props.variant)}
-
-  align-items: center;
-  border: 0;
-  border-radius: 0.5rem;
-  box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
-  display: inline-flex;
-  flex-direction: row;
-  font-size: 1.6rem;
-  position: relative;
-  justify-content: space-between;
-  line-height: 2rem;
-  min-height: 2.5rem;
-  padding: 1rem 2.5rem 1rem 1rem;
-  text-align: left;
-  text-decoration: none;
-  transition: all 0.2s ease-in-out;
-  user-select: none;
-  ${(props) => props.width ? `width: ${props.width};` : null}
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-
-  &:disabled {
-    opacity: 0.4;
-  }
-
-  &:not([disabled]) {
-    cursor: pointer;
-  }
-
-  :after {
-    background: ${(props) => props.variant === 'light' ? palette.black : palette.white};
-    clip-path: polygon(0 0, 100% 100%, 100% 0);
-    content: ' ';
-    display: block;
-    position: absolute;
-    height: 0.6rem;
-    margin-top: -0.25rem;
-    right: 1rem;
-    transform: rotate(135deg);
-    width: 0.6rem;
-  }
-`;
-
-const StyledMenu = styled(Menu)`
-  margin-top: -0.6rem;
-  background-color: ${palette.white};
-  border: 0.1rem solid ${palette.pale};
-  padding: 0;
-  cursor: pointer;
-  color: ${palette.black};
-
-  [role="menuitem"] {
-    display: block;
-    color: inherit;
-    text-decoration: none;
-    font-size: 1.6rem;
-    min-height: 2.5rem;
-    line-height: 2rem;
-    padding: 1rem 0.5rem;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-
-    &:hover {
-      background-color: ${palette.neutralLighter};
-    }
-  }
-`;
+import './DropdownMenu.css';
 
 interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {
   text?: string;
@@ -85,13 +14,26 @@ interface DropdownMenuButtonProps<T> extends MenuProps<T>, Omit<MenuTriggerProps
 export const DropdownMenu = <T extends object>(
   { text, children, variant, width, disabled, ...props }: DropdownMenuButtonProps<T>
 ) => {
+  const variantStyles = getButtonVariantStyles(variant);
+  const buttonStyle = {
+    '--button-bg': variantStyles.background,
+    '--button-bg-hover': variantStyles.backgroundHover,
+    '--button-bg-active': variantStyles.backgroundActive,
+    '--button-color': variantStyles.color,
+    '--button-outline': variantStyles.outline,
+    '--button-shadow': variantStyles.shadow,
+    '--button-font-weight': variantStyles.fontWeight ?? 700,
+    '--dropdown-caret-color': variant === 'light' ? palette.black : palette.white,
+    ...(width ? { width } : {}),
+  } as React.CSSProperties;
+
   return (
     <MenuTrigger {...props}>
-      <StyledButton variant={variant} width={width} isDisabled={disabled}>{text}</StyledButton>
+      <Button className="dropdown-menu-button" style={buttonStyle} isDisabled={disabled}>{text}</Button>
       <Popover>
-        <StyledMenu {...props}>
+        <Menu {...props} className="dropdown-menu">
           {children}
-        </StyledMenu>
+        </Menu>
       </Popover>
     </MenuTrigger>
   );
diff --git a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
index 46cc2fd1b..0fe8ff0f7 100644
--- a/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
+++ b/src/components/__snapshots__/DropdownMenu.spec.tsx.snap
@@ -5,10 +5,11 @@ exports[`DropdownMenu matches snapshots 1`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ fKigdf"
+    class="dropdown-menu-button"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-1"
+    style="--button-bg: #D4450C; --button-bg-hover: #be3c08; --button-bg-active: #b03808; --button-color: #ffffff; --button-outline: #ffffff; --button-shadow: #000000; --button-font-weight: 700; --dropdown-caret-color: #ffffff;"
     tabindex="0"
     type="button"
   >
@@ -22,10 +23,11 @@ exports[`DropdownMenu matches snapshots 2`] = `
   <button
     aria-expanded="false"
     aria-haspopup="true"
-    class="sc-bczRLJ lgmwux"
+    class="dropdown-menu-button"
     data-rac=""
     data-react-aria-pressable="true"
     id="react-aria-4"
+    style="--button-bg: #ffffff; --button-bg-hover: #ffffff; --button-bg-active: #e5e5e5; --button-color: #424242; --button-outline: #ffffff; --button-shadow: #000000; --button-font-weight: 400; --dropdown-caret-color: #000000; width: 20rem;"
     tabindex="0"
     type="button"
   >

From f7fee52a326fcfecaf2963b9fb19a88ff69ac002 Mon Sep 17 00:00:00 2001
From: tom <tom.g.woodward@gmail.com>
Date: Wed, 24 Jun 2026 12:43:11 -0400
Subject: [PATCH 6/6] bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2bec0f831..2a4fc6330 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@openstax/ui-components",
-  "version": "1.22.3",
+  "version": "1.22.4",
   "license": "MIT",
   "sideEffects": [
     "**/*.css"