From cf8d0597a64b95a4e71b99ee9d2eeccb3ac37d1b Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 16 Jul 2025 00:31:01 +0800
Subject: [PATCH 1/2] fix: use `outline-hidden` which is equivalent to
 `outline-none` in v3

---
 apps/docs/app/examples/table/custom-styles/page.tsx         | 2 +-
 apps/docs/app/examples/table/use-case/page.tsx              | 2 +-
 apps/docs/components/cmdk.tsx                               | 2 +-
 apps/docs/components/docs/sidebar.tsx                       | 2 +-
 apps/docs/components/featurebase/fb-roadmap-link.tsx        | 2 +-
 apps/docs/components/heroui-chat-banner.tsx                 | 2 +-
 apps/docs/components/marketing/custom-themes/styles.ts      | 2 +-
 apps/docs/components/marketing/hero/hero.tsx                | 2 +-
 apps/docs/components/marketing/install-banner.tsx           | 2 +-
 apps/docs/components/mdx-components.tsx                     | 2 +-
 apps/docs/components/navbar.tsx                             | 2 +-
 apps/docs/components/ph-banner.tsx                          | 2 +-
 apps/docs/components/pro-banner.tsx                         | 2 +-
 .../components/checkbox-group/custom-implementation.raw.jsx | 2 +-
 .../components/checkbox/custom-implementation.raw.jsx       | 2 +-
 .../content/components/dropdown/custom-items-styles.raw.jsx | 2 +-
 apps/docs/content/components/input/password.raw.jsx         | 2 +-
 .../docs/content/components/input/start-end-content.raw.jsx | 2 +-
 .../components/number-input/start-end-content.raw.jsx       | 2 +-
 apps/docs/content/components/slider/render-value.raw.jsx    | 2 +-
 apps/docs/content/components/slider/render-value.raw.tsx    | 2 +-
 apps/docs/content/components/table/custom-styles.raw.jsx    | 2 +-
 apps/docs/content/components/table/custom-styles.raw.tsx    | 2 +-
 apps/docs/content/components/table/use-case.raw.jsx         | 2 +-
 apps/docs/content/components/table/use-case.raw.tsx         | 2 +-
 packages/components/input/stories/input.stories.tsx         | 2 +-
 .../number-input/stories/number-input.stories.tsx           | 2 +-
 packages/components/slider/stories/slider.stories.tsx       | 2 +-
 packages/core/system-rsc/test-utils/slots-component.tsx     | 2 +-
 packages/core/theme/src/components/accordion.ts             | 2 +-
 packages/core/theme/src/components/breadcrumbs.ts           | 3 +--
 packages/core/theme/src/components/button.ts                | 2 +-
 packages/core/theme/src/components/card.ts                  | 2 +-
 packages/core/theme/src/components/chip.ts                  | 2 +-
 packages/core/theme/src/components/date-input.ts            | 2 +-
 packages/core/theme/src/components/dropdown.ts              | 2 +-
 packages/core/theme/src/components/input-otp.ts             | 2 +-
 packages/core/theme/src/components/input.ts                 | 4 ++--
 packages/core/theme/src/components/link.ts                  | 2 +-
 packages/core/theme/src/components/menu.ts                  | 4 ++--
 packages/core/theme/src/components/modal.ts                 | 4 ++--
 packages/core/theme/src/components/navbar.ts                | 2 +-
 packages/core/theme/src/components/number-input.ts          | 4 ++--
 packages/core/theme/src/components/pagination.ts            | 2 +-
 packages/core/theme/src/components/popover.ts               | 2 +-
 packages/core/theme/src/components/select.ts                | 2 +-
 packages/core/theme/src/components/table.ts                 | 6 +++---
 packages/core/theme/src/components/tabs.ts                  | 4 ++--
 packages/core/theme/src/components/toast.ts                 | 2 +-
 packages/core/theme/src/components/user.ts                  | 2 +-
 packages/core/theme/src/utils/classes.ts                    | 6 +++---
 51 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx
index fc15988a13..ebef213315 100644
--- a/apps/docs/app/examples/table/custom-styles/page.tsx
+++ b/apps/docs/app/examples/table/custom-styles/page.tsx
@@ -467,7 +467,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/app/examples/table/use-case/page.tsx b/apps/docs/app/examples/table/use-case/page.tsx
index a1ddf0a2af..02c54d3f4a 100644
--- a/apps/docs/app/examples/table/use-case/page.tsx
+++ b/apps/docs/app/examples/table/use-case/page.tsx
@@ -459,7 +459,7 @@ export default function Page() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/components/cmdk.tsx b/apps/docs/components/cmdk.tsx
index fd3ae95404..38ca2a6a66 100644
--- a/apps/docs/components/cmdk.tsx
+++ b/apps/docs/components/cmdk.tsx
@@ -63,7 +63,7 @@ const cmdk = tv({
       "h-14",
       "font-sans",
       "text-lg",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx
index fc463f2d1c..2481e0f4a1 100644
--- a/apps/docs/components/docs/sidebar.tsx
+++ b/apps/docs/components/docs/sidebar.tsx
@@ -196,7 +196,7 @@ function TreeItem<T>(props: TreeItemProps<T>) {
       aria-expanded={dataAttr(hasChildNodes ? isExpanded : undefined)}
       aria-selected={dataAttr(isSelected)}
       className={clsx(
-        "flex flex-col outline-solid outline-transparent w-full tap-highlight-transparent",
+        "flex flex-col outline-hidden w-full tap-highlight-transparent",
         hasChildNodes ? "mb-4" : "first:mt-4",
         // focus ring
         ...dataFocusVisibleClasses,
diff --git a/apps/docs/components/featurebase/fb-roadmap-link.tsx b/apps/docs/components/featurebase/fb-roadmap-link.tsx
index 8484d7af99..556635984f 100644
--- a/apps/docs/components/featurebase/fb-roadmap-link.tsx
+++ b/apps/docs/components/featurebase/fb-roadmap-link.tsx
@@ -33,7 +33,7 @@ export const FbRoadmapLink = ({className, innerClassName}: Props) => {
       <div className={clsx("relative", innerClassName)}>
         Roadmap
         <Icon
-          className="absolute right-[-10px] top-0 outline-solid outline-transparent transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
           icon={arrowRightUpIcon}
           width={10}
         />
diff --git a/apps/docs/components/heroui-chat-banner.tsx b/apps/docs/components/heroui-chat-banner.tsx
index 543e9263c3..2170272f2b 100644
--- a/apps/docs/components/heroui-chat-banner.tsx
+++ b/apps/docs/components/heroui-chat-banner.tsx
@@ -80,7 +80,7 @@ export const HeroUIChatBanner = () => {
             HeroUI Chat
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/components/marketing/custom-themes/styles.ts b/apps/docs/components/marketing/custom-themes/styles.ts
index 6ae05fbd74..8e57cd5115 100644
--- a/apps/docs/components/marketing/custom-themes/styles.ts
+++ b/apps/docs/components/marketing/custom-themes/styles.ts
@@ -59,7 +59,7 @@ export const shopCartStyles = tv({
       "text-sm",
       "rounded-full",
       // focus ring
-      "group-data-[focus-visible=true]:outline-solid outline-transparent",
+      "group-data-[focus-visible=true]:outline-hidden",
       "group-data-[focus-visible=true]:ring-2",
       "group-data-[focus-visible=true]:ring-focus",
       "group-data-[focus-visible=true]:ring-offset-2",
diff --git a/apps/docs/components/marketing/hero/hero.tsx b/apps/docs/components/marketing/hero/hero.tsx
index 26b6f5cdf4..9e34fc156f 100644
--- a/apps/docs/components/marketing/hero/hero.tsx
+++ b/apps/docs/components/marketing/hero/hero.tsx
@@ -67,7 +67,7 @@ export const Hero = () => {
             color="primary"
             endContent={
               <ArrowRightIcon
-                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                 strokeWidth={2}
               />
             }
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index a003fb7b25..39f267a6cc 100644
--- a/apps/docs/components/marketing/install-banner.tsx
+++ b/apps/docs/components/marketing/install-banner.tsx
@@ -66,7 +66,7 @@ export const InstallBanner = () => {
               color="secondary"
               endContent={
                 <ArrowRightIcon
-                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-hidden transition-transform"
                   strokeWidth={2}
                 />
               }
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index c0f156f2b2..11bff1f3b0 100644
--- a/apps/docs/components/mdx-components.tsx
+++ b/apps/docs/components/mdx-components.tsx
@@ -275,7 +275,7 @@ export const APITable: React.FC<APITableProps> = ({data}) => {
                     {/* Mobile popover */}
                     <Components.Popover placement="top">
                       <Components.PopoverTrigger>
-                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
+                        <button className="flex items-center gap-1 sm:hidden outline-hidden">
                           <InfoCircle className="text-default-400" size={16} />
                         </button>
                       </Components.PopoverTrigger>
diff --git a/apps/docs/components/navbar.tsx b/apps/docs/components/navbar.tsx
index 98d728ce4c..d4a3e4e7f9 100644
--- a/apps/docs/components/navbar.tsx
+++ b/apps/docs/components/navbar.tsx
@@ -227,7 +227,7 @@ export const Navbar: FC<NavbarProps> = ({children, routes, mobileRoutes = [], sl
         <NavbarItem className="flex h-full items-center">
           <button
             className={clsx(
-              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-hidden",
               // focus ring
               ...dataFocusVisibleClasses,
             )}
diff --git a/apps/docs/components/ph-banner.tsx b/apps/docs/components/ph-banner.tsx
index 337cb479e2..c1196d57d7 100644
--- a/apps/docs/components/ph-banner.tsx
+++ b/apps/docs/components/ph-banner.tsx
@@ -97,7 +97,7 @@ export const PhBanner = () => {
             Get 30% off
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/components/pro-banner.tsx b/apps/docs/components/pro-banner.tsx
index 6c02716939..bb110062db 100644
--- a/apps/docs/components/pro-banner.tsx
+++ b/apps/docs/components/pro-banner.tsx
@@ -105,7 +105,7 @@ export const ProBanner = () => {
             HeroUI Pro
             <Icon
               aria-hidden="true"
-              className="outline-solid outline-transparent transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
               icon={arrowRightIcon}
               width={16}
             />
diff --git a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
index 41142d5321..d294550848 100644
--- a/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
+++ b/apps/docs/content/components/checkbox-group/custom-implementation.raw.jsx
@@ -15,7 +15,7 @@ export const CustomCheckbox = (props) => {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },
diff --git a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
index f348c26196..030ff669ed 100644
--- a/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
+++ b/apps/docs/content/components/checkbox/custom-implementation.raw.jsx
@@ -40,7 +40,7 @@ export default function App() {
       },
       isFocusVisible: {
         true: {
-          base: "outline-solid outline-transparent ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
         },
       },
     },
diff --git a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
index 56743b4a62..f986debcca 100644
--- a/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
+++ b/apps/docs/content/components/dropdown/custom-items-styles.raw.jsx
@@ -99,7 +99,7 @@ export default function App() {
             className="cursor-default"
             endContent={
               <select
-                className="z-10 outline-solid outline-transparent w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
+                className="z-10 outline-hidden w-16 py-0.5 rounded-md text-tiny group-data-[hover=true]:border-default-500 border-small border-default-300 dark:border-default-200 bg-transparent text-default-500"
                 id="theme"
                 name="theme"
               >
diff --git a/apps/docs/content/components/input/password.raw.jsx b/apps/docs/content/components/input/password.raw.jsx
index a64c81a0a7..d41c63e1a7 100644
--- a/apps/docs/content/components/input/password.raw.jsx
+++ b/apps/docs/content/components/input/password.raw.jsx
@@ -71,7 +71,7 @@ export default function App() {
       endContent={
         <button
           aria-label="toggle password visibility"
-          className="focus:outline-solid outline-transparent"
+          className="focus:outline-hidden"
           type="button"
           onClick={toggleVisibility}
         >
diff --git a/apps/docs/content/components/input/start-end-content.raw.jsx b/apps/docs/content/components/input/start-end-content.raw.jsx
index 6561c2c9a7..0eeb06b97b 100644
--- a/apps/docs/content/components/input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/input/start-end-content.raw.jsx
@@ -110,7 +110,7 @@ export default function App() {
                 Currency
               </label>
               <select
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 id="currency"
                 name="currency"
               >
diff --git a/apps/docs/content/components/number-input/start-end-content.raw.jsx b/apps/docs/content/components/number-input/start-end-content.raw.jsx
index b9abe31a9d..d3334ca08b 100644
--- a/apps/docs/content/components/number-input/start-end-content.raw.jsx
+++ b/apps/docs/content/components/number-input/start-end-content.raw.jsx
@@ -21,7 +21,7 @@ export default function App() {
               </label>
               <select
                 aria-label="Select currency"
-                className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-small"
+                className="outline-hidden border-0 bg-transparent text-default-400 text-small"
                 defaultValue="USD"
                 id="currency"
                 name="currency"
diff --git a/apps/docs/content/components/slider/render-value.raw.jsx b/apps/docs/content/components/slider/render-value.raw.jsx
index ddc4513697..7b796b30e1 100644
--- a/apps/docs/content/components/slider/render-value.raw.jsx
+++ b/apps/docs/content/components/slider/render-value.raw.jsx
@@ -31,7 +31,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e) => {
diff --git a/apps/docs/content/components/slider/render-value.raw.tsx b/apps/docs/content/components/slider/render-value.raw.tsx
index a57b7a7100..27f3291b12 100644
--- a/apps/docs/content/components/slider/render-value.raw.tsx
+++ b/apps/docs/content/components/slider/render-value.raw.tsx
@@ -34,7 +34,7 @@ export default function App() {
           >
             <input
               aria-label="Temperature value"
-              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+              className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
               type="text"
               value={inputValue}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/apps/docs/content/components/table/custom-styles.raw.jsx b/apps/docs/content/components/table/custom-styles.raw.jsx
index 15bc34e31a..99131d2dfc 100644
--- a/apps/docs/content/components/table/custom-styles.raw.jsx
+++ b/apps/docs/content/components/table/custom-styles.raw.jsx
@@ -554,7 +554,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/custom-styles.raw.tsx b/apps/docs/content/components/table/custom-styles.raw.tsx
index 8617c729c2..2730fd74fc 100644
--- a/apps/docs/content/components/table/custom-styles.raw.tsx
+++ b/apps/docs/content/components/table/custom-styles.raw.tsx
@@ -566,7 +566,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/use-case.raw.jsx b/apps/docs/content/components/table/use-case.raw.jsx
index 58d4c3f681..1e8ea1a324 100644
--- a/apps/docs/content/components/table/use-case.raw.jsx
+++ b/apps/docs/content/components/table/use-case.raw.jsx
@@ -550,7 +550,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/apps/docs/content/components/table/use-case.raw.tsx b/apps/docs/content/components/table/use-case.raw.tsx
index ef62c3d9af..e4acc09e13 100644
--- a/apps/docs/content/components/table/use-case.raw.tsx
+++ b/apps/docs/content/components/table/use-case.raw.tsx
@@ -563,7 +563,7 @@ export default function App() {
           <label className="flex items-center text-default-400 text-small">
             Rows per page:
             <select
-              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
+              className="bg-transparent outline-hidden text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 0047e36197..641998d569 100644
--- a/packages/components/input/stories/input.stories.tsx
+++ b/packages/components/input/stories/input.stories.tsx
@@ -300,7 +300,7 @@ const StartAndEndContentTemplate = (args) => (
             Currency
           </label>
           <select
-            className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
+            className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
             id="currency"
             name="currency"
           >
diff --git a/packages/components/number-input/stories/number-input.stories.tsx b/packages/components/number-input/stories/number-input.stories.tsx
index 2f7f9d8b6d..fc4d9b7cd4 100644
--- a/packages/components/number-input/stories/number-input.stories.tsx
+++ b/packages/components/number-input/stories/number-input.stories.tsx
@@ -372,7 +372,7 @@ export const StartAndEndContent = {
           Currency
         </label>
         <select
-          className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
+          className="outline-hidden border-0 bg-transparent text-default-400 text-sm"
           id="currency"
           name="currency"
         >
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index 2109deecde..62738c3421 100644
--- a/packages/components/slider/stories/slider.stories.tsx
+++ b/packages/components/slider/stories/slider.stories.tsx
@@ -165,7 +165,7 @@ const CustomValueTemplate = (args: SliderProps) => {
             >
               <input
                 aria-label="Temperature"
-                className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-solid outline-transparent transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
+                className="px-1 py-0.5 w-12 text-right text-small text-default-700 font-medium bg-default-100 outline-hidden transition-colors rounded-small border-medium border-transparent hover:border-primary focus:border-primary"
                 type="text"
                 value={inputValue}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/core/system-rsc/test-utils/slots-component.tsx b/packages/core/system-rsc/test-utils/slots-component.tsx
index 57223550c1..2a9dd7dc79 100644
--- a/packages/core/system-rsc/test-utils/slots-component.tsx
+++ b/packages/core/system-rsc/test-utils/slots-component.tsx
@@ -19,7 +19,7 @@ const card = tv({
       "relative",
       "overflow-hidden",
       "h-auto",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/src/components/accordion.ts b/packages/core/theme/src/components/accordion.ts
index 57643976e8..90fd55921e 100644
--- a/packages/core/theme/src/components/accordion.ts
+++ b/packages/core/theme/src/components/accordion.ts
@@ -59,7 +59,7 @@ const accordionItem = tv({
     base: "",
     heading: "",
     trigger: [
-      "flex py-4 w-full h-full gap-3 outline-solid outline-transparent items-center tap-highlight-transparent",
+      "flex py-4 w-full h-full gap-3 outline-hidden items-center tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/components/breadcrumbs.ts b/packages/core/theme/src/components/breadcrumbs.ts
index a768b88d7a..7ec73d0b4c 100644
--- a/packages/core/theme/src/components/breadcrumbs.ts
+++ b/packages/core/theme/src/components/breadcrumbs.ts
@@ -17,8 +17,7 @@ const breadcrumbItem = tv({
       "flex gap-1 items-center",
       "cursor-pointer",
       "whitespace-nowrap",
-      "line-clamp-1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "tap-highlight-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
index 039ce8e691..4479b4da3d 100644
--- a/packages/core/theme/src/components/button.ts
+++ b/packages/core/theme/src/components/button.ts
@@ -29,7 +29,7 @@ const button = tv({
     "justify-center",
     "box-border",
     "appearance-none",
-    "outline-solid outline-transparent",
+    "outline-hidden",
     "select-none",
     "whitespace-nowrap",
     "min-w-max",
diff --git a/packages/core/theme/src/components/card.ts b/packages/core/theme/src/components/card.ts
index 8341f58750..fc63f79c68 100644
--- a/packages/core/theme/src/components/card.ts
+++ b/packages/core/theme/src/components/card.ts
@@ -25,7 +25,7 @@ const card = tv({
       "relative",
       "overflow-hidden",
       "h-auto",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "text-foreground",
       "box-border",
       "bg-content1",
diff --git a/packages/core/theme/src/components/chip.ts b/packages/core/theme/src/components/chip.ts
index 2c74a69406..5a104de4c4 100644
--- a/packages/core/theme/src/components/chip.ts
+++ b/packages/core/theme/src/components/chip.ts
@@ -38,7 +38,7 @@ const chip = tv({
     closeButton: [
       "z-10",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "transition-opacity",
       "opacity-70",
diff --git a/packages/core/theme/src/components/date-input.ts b/packages/core/theme/src/components/date-input.ts
index c0a80e84b6..fe32c0b265 100644
--- a/packages/core/theme/src/components/date-input.ts
+++ b/packages/core/theme/src/components/date-input.ts
@@ -29,7 +29,7 @@ const dateInput = tv({
     ], // this wraps the input and the start/end content
     segment: [
       "group first:-ml-0.5 [&:not(:first-child)]:-ml-1 px-0.5 my-auto box-content tabular-nums text-start",
-      "inline-block outline-solid outline-transparent focus:shadow-xs rounded-md",
+      "inline-block outline-hidden focus:shadow-xs rounded-md",
       "text-foreground-500 data-[editable=true]:text-foreground",
       "data-[editable=true]:data-[placeholder=true]:text-foreground-500",
       // isInvalid=true
diff --git a/packages/core/theme/src/components/dropdown.ts b/packages/core/theme/src/components/dropdown.ts
index 4d0bba9f13..5612e6ca43 100644
--- a/packages/core/theme/src/components/dropdown.ts
+++ b/packages/core/theme/src/components/dropdown.ts
@@ -58,7 +58,7 @@ const dropdownItem = tv({
       "h-full",
       "box-border",
       "rounded-small",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       "data-[pressed=true]:opacity-70",
diff --git a/packages/core/theme/src/components/input-otp.ts b/packages/core/theme/src/components/input-otp.ts
index a7931f1244..789691c15b 100644
--- a/packages/core/theme/src/components/input-otp.ts
+++ b/packages/core/theme/src/components/input-otp.ts
@@ -11,7 +11,7 @@ const inputOtp = tv({
       "absolute",
       "inset-0",
       "border-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "bg-transparent",
       "text-transparent",
     ],
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index 654efce64e..c59c8b7b42 100644
--- a/packages/core/theme/src/components/input.ts
+++ b/packages/core/theme/src/components/input.ts
@@ -42,7 +42,7 @@ const input = tv({
       "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-xs px-3 gap-3",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
-      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
+      "w-full font-normal bg-transparent !outline-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
       "data-[type=color]:rounded-none",
@@ -58,7 +58,7 @@ const input = tv({
       "start-auto",
       "pointer-events-none",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "opacity-0",
       "cursor-pointer",
diff --git a/packages/core/theme/src/components/link.ts b/packages/core/theme/src/components/link.ts
index d971ae1283..4cdc1c2729 100644
--- a/packages/core/theme/src/components/link.ts
+++ b/packages/core/theme/src/components/link.ts
@@ -11,7 +11,7 @@ import {dataFocusVisibleClasses} from "../utils";
  */
 const link = tv({
   base: [
-    "relative inline-flex items-center outline-solid outline-transparent tap-highlight-transparent",
+    "relative inline-flex items-center outline-hidden tap-highlight-transparent",
     // focus ring
     ...dataFocusVisibleClasses,
   ],
diff --git a/packages/core/theme/src/components/menu.ts b/packages/core/theme/src/components/menu.ts
index be2ec604e0..3baf9524ec 100644
--- a/packages/core/theme/src/components/menu.ts
+++ b/packages/core/theme/src/components/menu.ts
@@ -12,7 +12,7 @@ import {dataFocusVisibleClasses} from "../utils";
 const menu = tv({
   slots: {
     base: "w-full relative flex flex-col gap-1 p-1 overflow-clip",
-    list: "w-full flex flex-col gap-0.5 outline-solid outline-transparent",
+    list: "w-full flex flex-col gap-0.5 outline-hidden",
     emptyContent: [
       "h-10",
       "px-2",
@@ -63,7 +63,7 @@ const menuItem = tv({
       "box-border",
       "rounded-small",
       "subpixel-antialiased",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "tap-highlight-transparent",
       // focus ring
diff --git a/packages/core/theme/src/components/modal.ts b/packages/core/theme/src/components/modal.ts
index 0e1f520710..049fe26cc7 100644
--- a/packages/core/theme/src/components/modal.ts
+++ b/packages/core/theme/src/components/modal.ts
@@ -43,7 +43,7 @@ const modal = tv({
       "w-full",
       "box-border",
       "bg-content1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "mx-1",
       "my-1",
       "sm:mx-6",
@@ -56,7 +56,7 @@ const modal = tv({
     closeButton: [
       "absolute",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "top-1",
       "end-1",
diff --git a/packages/core/theme/src/components/navbar.ts b/packages/core/theme/src/components/navbar.ts
index d350bef48e..6f56addc5f 100644
--- a/packages/core/theme/src/components/navbar.ts
+++ b/packages/core/theme/src/components/navbar.ts
@@ -77,7 +77,7 @@ const navbar = tv({
       "justify-center",
       "w-6",
       "h-full",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "rounded-small",
       "tap-highlight-transparent",
       // focus ring
diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts
index 42299b12d5..7cf82ea9a1 100644
--- a/packages/core/theme/src/components/number-input.ts
+++ b/packages/core/theme/src/components/number-input.ts
@@ -42,7 +42,7 @@ const numberInput = tv({
       "relative w-full inline-flex tap-highlight-transparent flex-row items-center shadow-sm px-3 gap-3",
     innerWrapper: "inline-flex w-full items-center h-full box-border",
     input: [
-      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
+      "w-full font-normal bg-transparent !outline-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
       "data-[has-start-content=true]:ps-1.5",
       "data-[has-end-content=true]:pe-1.5",
       "autofill:bg-transparent bg-clip-text",
@@ -55,7 +55,7 @@ const numberInput = tv({
       "start-auto",
       "pointer-events-none",
       "appearance-none",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "select-none",
       "opacity-0",
       "hover:!opacity-100",
diff --git a/packages/core/theme/src/components/pagination.ts b/packages/core/theme/src/components/pagination.ts
index 58ee289a7e..575c47fb32 100644
--- a/packages/core/theme/src/components/pagination.ts
+++ b/packages/core/theme/src/components/pagination.ts
@@ -344,7 +344,7 @@ const pagination = tv({
         "flex-wrap",
         "truncate",
         "box-border",
-        "outline-solid outline-transparent",
+        "outline-hidden",
         "items-center",
         "justify-center",
         "text-default-foreground",
diff --git a/packages/core/theme/src/components/popover.ts b/packages/core/theme/src/components/popover.ts
index a2c486778d..4242ea2ca0 100644
--- a/packages/core/theme/src/components/popover.ts
+++ b/packages/core/theme/src/components/popover.ts
@@ -81,7 +81,7 @@ const popover = tv({
       "justify-center",
       "box-border",
       "subpixel-antialiased",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "box-border",
     ],
     trigger: ["z-10"],
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 8fba4e53d2..f328ab1dda 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -22,7 +22,7 @@ const select = tv({
     ],
     mainWrapper: "w-full flex flex-col",
     trigger:
-      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-xs outline-solid outline-transparent tap-highlight-transparent",
+      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-xs outline-hidden tap-highlight-transparent",
     innerWrapper:
       "inline-flex h-fit w-[calc(100%_-theme(spacing.6))] min-h-4 items-center gap-1.5 box-border",
     selectorIcon: "absolute end-3 w-4 h-4",
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 5e4dd256b0..41c9f2e7b8 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -56,7 +56,7 @@ const table = tv({
     table: "min-w-full h-auto",
     thead: "[&>tr]:first:rounded-lg",
     tbody: "after:block",
-    tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-hidden", ...dataFocusVisibleClasses],
     th: [
       "group/th",
       "px-3",
@@ -70,7 +70,7 @@ const table = tv({
       "font-semibold",
       "first:rounded-s-lg",
       "last:rounded-e-lg",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "data-[sortable=true]:cursor-pointer",
       "data-[hover=true]:text-foreground-400",
       ...dataFocusVisibleClasses,
@@ -83,7 +83,7 @@ const table = tv({
       "whitespace-normal",
       "text-small",
       "font-normal",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "[&>*]:z-1",
       "[&>*]:relative",
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts
index 065b0091ff..3f713bc8a2 100644
--- a/packages/core/theme/src/components/tabs.ts
+++ b/packages/core/theme/src/components/tabs.ts
@@ -44,7 +44,7 @@ const tabs = tv({
       "relative",
       "justify-center",
       "items-center",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "cursor-pointer",
       "transition-opacity",
       "tap-highlight-transparent",
@@ -67,7 +67,7 @@ const tabs = tv({
     panel: [
       "py-3",
       "px-1",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "data-[inert=true]:hidden",
       // focus ring
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/toast.ts b/packages/core/theme/src/components/toast.ts
index 243c2f8b94..6483245ee1 100644
--- a/packages/core/theme/src/components/toast.ts
+++ b/packages/core/theme/src/components/toast.ts
@@ -38,7 +38,7 @@ const toast = tv({
       "relative",
       "z-50",
       "box-border",
-      "outline-solid outline-transparent",
+      "outline-hidden",
       "p-3 sm:mx-1",
       "my-1",
       "w-full sm:w-[356px]",
diff --git a/packages/core/theme/src/components/user.ts b/packages/core/theme/src/components/user.ts
index b9f622a2e5..9e7d648154 100644
--- a/packages/core/theme/src/components/user.ts
+++ b/packages/core/theme/src/components/user.ts
@@ -18,7 +18,7 @@ import {dataFocusVisibleClasses} from "../utils";
 const user = tv({
   slots: {
     base: [
-      "inline-flex items-center justify-center gap-2 rounded-small outline-solid outline-transparent",
+      "inline-flex items-center justify-center gap-2 rounded-small outline-hidden",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 7df76142a5..7d7223380c 100644
--- a/packages/core/theme/src/utils/classes.ts
+++ b/packages/core/theme/src/utils/classes.ts
@@ -18,7 +18,7 @@ export const focusVisibleClasses = [
 ];
 
 export const dataFocusVisibleClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "data-[focus-visible=true]:z-10",
   "data-[focus-visible=true]:outline-2",
   "data-[focus-visible=true]:outline-focus",
@@ -26,7 +26,7 @@ export const dataFocusVisibleClasses = [
 ];
 
 export const groupDataFocusVisibleClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "group-data-[focus-visible=true]:z-10",
   "group-data-[focus-visible=true]:ring-2",
   "group-data-[focus-visible=true]:ring-focus",
@@ -35,7 +35,7 @@ export const groupDataFocusVisibleClasses = [
 ];
 
 export const ringClasses = [
-  "outline-solid outline-transparent",
+  "outline-hidden",
   "ring-2",
   "ring-focus",
   "ring-offset-2",

From d2ad50890c9aebccdeed52dd1f82be5b67f1ccf2 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Wed, 16 Jul 2025 00:32:18 +0800
Subject: [PATCH 2/2] chore: add changeset

---
 .changeset/calm-seas-listen.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/calm-seas-listen.md

diff --git a/.changeset/calm-seas-listen.md b/.changeset/calm-seas-listen.md
new file mode 100644
index 0000000000..40ce5700a6
--- /dev/null
+++ b/.changeset/calm-seas-listen.md
@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+use `outline-hidden` which is equivalent to `outline-none` in v3 (#5485)