From 27fe8a6971affc5b8660476f821253fdacbe5a60 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 27 Jul 2025 18:24:53 +0800
Subject: [PATCH] fix(theme): focus ring styles

---
 .changeset/chatty-balloons-brush.md                      | 9 +++++++++
 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 +-
 .../checkbox-group/custom-implementation.raw.jsx         | 2 +-
 .../components/checkbox/custom-implementation.raw.jsx    | 2 +-
 .../components/dropdown/custom-items-styles.raw.jsx      | 2 +-
 apps/docs/content/components/input/password.raw.jsx      | 2 +-
 .../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/package.json                   | 2 +-
 packages/components/input/stories/input.stories.tsx      | 2 +-
 packages/components/number-input/package.json            | 2 +-
 .../number-input/stories/number-input.stories.tsx        | 2 +-
 packages/components/slider/package.json                  | 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        | 2 +-
 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 +++---
 55 files changed, 72 insertions(+), 63 deletions(-)
 create mode 100644 .changeset/chatty-balloons-brush.md

diff --git a/.changeset/chatty-balloons-brush.md b/.changeset/chatty-balloons-brush.md
new file mode 100644
index 0000000000..0fdf2266a7
--- /dev/null
+++ b/.changeset/chatty-balloons-brush.md
@@ -0,0 +1,9 @@
+---
+"@heroui/number-input": patch
+"@heroui/slider": patch
+"@heroui/input": patch
+"@heroui/system-rsc": patch
+"@heroui/theme": patch
+---
+
+use outline-solid outline-transparent to perverse focus ring styles (#5530)
diff --git a/apps/docs/app/examples/table/custom-styles/page.tsx b/apps/docs/app/examples/table/custom-styles/page.tsx
index ebef213315..fc15988a13 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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 02c54d3f4a..a1ddf0a2af 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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 38ca2a6a66..fd3ae95404 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-hidden",
+      "outline-solid outline-transparent",
       "rounded-none",
       "bg-transparent",
       "text-default-700",
diff --git a/apps/docs/components/docs/sidebar.tsx b/apps/docs/components/docs/sidebar.tsx
index 2481e0f4a1..fc463f2d1c 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-hidden w-full tap-highlight-transparent",
+        "flex flex-col outline-solid outline-transparent 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 556635984f..8484d7af99 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-hidden transition-transform group-data-[hover=true]:translate-y-0.5 [&>path]:stroke-[2.5px]"
+          className="absolute right-[-10px] top-0 outline-solid outline-transparent 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 2170272f2b..543e9263c3 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent 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 8e57cd5115..6ae05fbd74 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-hidden",
+      "group-data-[focus-visible=true]:outline-solid outline-transparent",
       "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 9e34fc156f..26b6f5cdf4 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-hidden transition-transform"
+                className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
                 strokeWidth={2}
               />
             }
diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
index 39f267a6cc..a003fb7b25 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-hidden transition-transform"
+                  className="group-data-[hover=true]:translate-x-0.5 outline-solid outline-transparent transition-transform"
                   strokeWidth={2}
                 />
               }
diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
index 11bff1f3b0..c0f156f2b2 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-hidden">
+                        <button className="flex items-center gap-1 sm:hidden outline-solid outline-transparent">
                           <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 d4a3e4e7f9..98d728ce4c 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-hidden",
+              "transition-opacity p-1 hover:opacity-80 rounded-full cursor-pointer outline-solid outline-transparent",
               // focus ring
               ...dataFocusVisibleClasses,
             )}
diff --git a/apps/docs/components/ph-banner.tsx b/apps/docs/components/ph-banner.tsx
index c1196d57d7..337cb479e2 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent 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 bb110062db..6c02716939 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-hidden transition-transform group-hover:translate-x-0.5 [&>path]:stroke-[2px]"
+              className="outline-solid outline-transparent 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 d294550848..41142d5321 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-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-solid outline-transparent 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 030ff669ed..f348c26196 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-hidden ring-2 ring-focus ring-offset-2 ring-offset-background",
+          base: "outline-solid outline-transparent 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 f986debcca..56743b4a62 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-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"
+                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"
                 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 d41c63e1a7..a64c81a0a7 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-hidden"
+          className="focus:outline-solid outline-transparent"
           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 0eeb06b97b..6561c2c9a7 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-hidden border-0 bg-transparent text-default-400 text-small"
+                className="outline-solid outline-transparent 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 d3334ca08b..b9abe31a9d 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-hidden border-0 bg-transparent text-default-400 text-small"
+                className="outline-solid outline-transparent 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 7b796b30e1..ddc4513697 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-hidden 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-solid outline-transparent 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 27f3291b12..a57b7a7100 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-hidden 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-solid outline-transparent 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 99131d2dfc..15bc34e31a 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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 2730fd74fc..8617c729c2 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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 1e8ea1a324..58d4c3f681 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent 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 e4acc09e13..ef62c3d9af 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-hidden text-default-400 text-small"
+              className="bg-transparent outline-solid outline-transparent text-default-400 text-small"
               onChange={onRowsPerPageChange}
             >
               <option value="5">5</option>
diff --git a/packages/components/input/package.json b/packages/components/input/package.json
index df47085e51..fac402fc84 100644
--- a/packages/components/input/package.json
+++ b/packages/components/input/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.19",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {
diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
index 641998d569..0047e36197 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-hidden border-0 bg-transparent text-default-400 text-sm"
+            className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
             id="currency"
             name="currency"
           >
diff --git a/packages/components/number-input/package.json b/packages/components/number-input/package.json
index 8892348a98..26257ab071 100644
--- a/packages/components/number-input/package.json
+++ b/packages/components/number-input/package.json
@@ -39,7 +39,7 @@
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
     "@heroui/system": ">=2.4.18",
-    "@heroui/theme": ">=2.4.17"
+    "@heroui/theme": ">=2.4.19"
   },
   "dependencies": {
     "@heroui/form": "workspace:*",
diff --git a/packages/components/number-input/stories/number-input.stories.tsx b/packages/components/number-input/stories/number-input.stories.tsx
index fc4d9b7cd4..2f7f9d8b6d 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-hidden border-0 bg-transparent text-default-400 text-sm"
+          className="outline-solid outline-transparent border-0 bg-transparent text-default-400 text-sm"
           id="currency"
           name="currency"
         >
diff --git a/packages/components/slider/package.json b/packages/components/slider/package.json
index 62899a6ef5..4385c5f28b 100644
--- a/packages/components/slider/package.json
+++ b/packages/components/slider/package.json
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.17",
+    "@heroui/theme": ">=2.4.19",
     "@heroui/system": ">=2.4.18"
   },
   "dependencies": {
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index 62738c3421..2109deecde 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-hidden 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-solid outline-transparent 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 2a9dd7dc79..57223550c1 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-hidden",
+      "outline-solid outline-transparent",
       "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 90fd55921e..57643976e8 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-hidden items-center tap-highlight-transparent",
+      "flex py-4 w-full h-full gap-3 outline-solid outline-transparent 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 7ec73d0b4c..d9d56a4e50 100644
--- a/packages/core/theme/src/components/breadcrumbs.ts
+++ b/packages/core/theme/src/components/breadcrumbs.ts
@@ -17,7 +17,7 @@ const breadcrumbItem = tv({
       "flex gap-1 items-center",
       "cursor-pointer",
       "whitespace-nowrap",
-      "outline-hidden",
+      "outline-solid outline-transparent",
       "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 4479b4da3d..039ce8e691 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-hidden",
+    "outline-solid outline-transparent",
     "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 fc63f79c68..8341f58750 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-hidden",
+      "outline-solid outline-transparent",
       "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 5a104de4c4..2c74a69406 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-hidden",
+      "outline-solid outline-transparent",
       "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 fe32c0b265..c0a80e84b6 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-hidden focus:shadow-xs rounded-md",
+      "inline-block outline-solid outline-transparent 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 5612e6ca43..4d0bba9f13 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-hidden",
+      "outline-solid outline-transparent",
       "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 789691c15b..a7931f1244 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-hidden",
+      "outline-solid outline-transparent",
       "bg-transparent",
       "text-transparent",
     ],
diff --git a/packages/core/theme/src/components/input.ts b/packages/core/theme/src/components/input.ts
index c59c8b7b42..654efce64e 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-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
+      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
       "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-hidden",
+      "outline-solid outline-transparent",
       "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 4cdc1c2729..d971ae1283 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-hidden tap-highlight-transparent",
+    "relative inline-flex items-center outline-solid outline-transparent 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 3baf9524ec..be2ec604e0 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-hidden",
+    list: "w-full flex flex-col gap-0.5 outline-solid outline-transparent",
     emptyContent: [
       "h-10",
       "px-2",
@@ -63,7 +63,7 @@ const menuItem = tv({
       "box-border",
       "rounded-small",
       "subpixel-antialiased",
-      "outline-hidden",
+      "outline-solid outline-transparent",
       "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 049fe26cc7..0e1f520710 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-hidden",
+      "outline-solid outline-transparent",
       "mx-1",
       "my-1",
       "sm:mx-6",
@@ -56,7 +56,7 @@ const modal = tv({
     closeButton: [
       "absolute",
       "appearance-none",
-      "outline-hidden",
+      "outline-solid outline-transparent",
       "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 6f56addc5f..d350bef48e 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-hidden",
+      "outline-solid outline-transparent",
       "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 7cf82ea9a1..42299b12d5 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-hidden placeholder:text-foreground-500 focus-visible:outline-hidden",
+      "w-full font-normal bg-transparent !outline-solid outline-transparent placeholder:text-foreground-500 focus-visible:outline-solid outline-transparent",
       "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-hidden",
+      "outline-solid outline-transparent",
       "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 575c47fb32..58ee289a7e 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-hidden",
+        "outline-solid outline-transparent",
         "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 4242ea2ca0..a2c486778d 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-hidden",
+      "outline-solid outline-transparent",
       "box-border",
     ],
     trigger: ["z-10"],
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index f328ab1dda..8fba4e53d2 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-hidden tap-highlight-transparent",
+      "relative px-3 gap-3 w-full inline-flex flex-row items-center shadow-xs outline-solid outline-transparent 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 41c9f2e7b8..5e4dd256b0 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-hidden", ...dataFocusVisibleClasses],
+    tr: ["group/tr", "outline-solid outline-transparent", ...dataFocusVisibleClasses],
     th: [
       "group/th",
       "px-3",
@@ -70,7 +70,7 @@ const table = tv({
       "font-semibold",
       "first:rounded-s-lg",
       "last:rounded-e-lg",
-      "outline-hidden",
+      "outline-solid outline-transparent",
       "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-hidden",
+      "outline-solid outline-transparent",
       "[&>*]:z-1",
       "[&>*]:relative",
       ...dataFocusVisibleClasses,
diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts
index 3f713bc8a2..065b0091ff 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-hidden",
+      "outline-solid outline-transparent",
       "cursor-pointer",
       "transition-opacity",
       "tap-highlight-transparent",
@@ -67,7 +67,7 @@ const tabs = tv({
     panel: [
       "py-3",
       "px-1",
-      "outline-hidden",
+      "outline-solid outline-transparent",
       "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 6483245ee1..243c2f8b94 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-hidden",
+      "outline-solid outline-transparent",
       "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 9e7d648154..b9f622a2e5 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-hidden",
+      "inline-flex items-center justify-center gap-2 rounded-small outline-solid outline-transparent",
       // focus ring
       ...dataFocusVisibleClasses,
     ],
diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
index 7d7223380c..7df76142a5 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-hidden",
+  "outline-solid outline-transparent",
   "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-hidden",
+  "outline-solid outline-transparent",
   "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-hidden",
+  "outline-solid outline-transparent",
   "ring-2",
   "ring-focus",
   "ring-offset-2",