fix(theme): focus ring styles (#5531)

2025-12-08 19:26:11 +00:00 · 2025-07-29 00:54:21 +08:00 · 2025-07-29 00:54:21 +08:00 · 2f414a8926
commit 2f414a8926
parent 60118379f5
55 changed files with 72 additions and 63 deletions
--- a/.changeset/chatty-balloons-brush.md
+++ 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)
--- 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>
--- 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>
--- 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",
--- 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,
--- 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}
        />
--- 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}
            />
--- 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",
--- 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}
              />
            }
--- 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}
                />
              }
--- 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>
--- 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,
            )}
--- 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}
            />
--- 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}
            />
--- 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",
        },
      },
    },
--- 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",
        },
      },
    },
--- 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"
              >
--- 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}
        >
--- 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"
              >
--- 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"
--- 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) => {
--- 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>) => {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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": {
--- 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"
          >
--- 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:*",
--- 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"
        >
--- 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": {
--- 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>) => {
--- 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",
--- 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,
    ],
--- 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,
--- 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",
--- 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",
--- 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",
--- 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
--- 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",
--- 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",
    ],
--- 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",
--- 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,
  ],
--- 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
--- 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",
--- 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
--- 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",
--- 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",
--- 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"],
--- 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",
--- 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,
--- 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,
--- 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]",
--- 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,
    ],
--- 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",