From 1b74c774c05e7e17a953ddead9a72f797155e6cb Mon Sep 17 00:00:00 2001
From: iCrawl <buechler.noel@outlook.com>
Date: Sun, 16 Apr 2023 11:22:16 +0200
Subject: [PATCH] fix(website): cutoff ring outline in breadcrumbs

---
 apps/guide/contentlayer.config.ts                |  2 +-
 apps/guide/src/app/not-found.tsx                 |  2 +-
 apps/guide/src/app/page.tsx                      |  2 +-
 apps/guide/src/components/Footer.tsx             | 12 ++++++------
 apps/guide/src/components/Header.tsx             |  6 +++---
 apps/guide/src/components/Outline.tsx            |  2 +-
 apps/guide/src/components/PageButton.tsx         |  2 +-
 apps/guide/src/components/Sidebar.tsx            |  4 ++--
 apps/guide/src/components/ThemeSwitcher.tsx      |  2 +-
 .../[package]/[version]/[item]/not-found.tsx     |  2 +-
 .../src/app/docs/packages/[package]/page.tsx     |  4 ++--
 apps/website/src/app/docs/packages/page.tsx      | 10 +++++-----
 apps/website/src/app/not-found.tsx               |  2 +-
 apps/website/src/app/page.tsx                    |  8 ++++----
 apps/website/src/components/Anchor.tsx           |  2 +-
 apps/website/src/components/CmdK.tsx             |  4 ++--
 apps/website/src/components/Footer.tsx           | 12 ++++++------
 apps/website/src/components/Header.tsx           | 16 ++++++++--------
 apps/website/src/components/InheritanceText.tsx  |  2 +-
 apps/website/src/components/OverloadSwitcher.tsx |  6 +++---
 apps/website/src/components/PackageSelect.tsx    |  8 ++++----
 apps/website/src/components/Sidebar.tsx          |  4 ++--
 .../src/components/TableOfContentItems.tsx       |  4 ++--
 apps/website/src/components/ThemeSwitcher.tsx    |  2 +-
 apps/website/src/components/VersionSelect.tsx    |  6 +++---
 .../src/components/documentation/tsdoc/TSDoc.tsx |  4 ++--
 packages/ui/src/lib/components/Section.tsx       |  2 +-
 27 files changed, 66 insertions(+), 66 deletions(-)

diff --git a/apps/guide/contentlayer.config.ts b/apps/guide/contentlayer.config.ts
index 0d3672c04..93862f06a 100644
--- a/apps/guide/contentlayer.config.ts
+++ b/apps/guide/contentlayer.config.ts
@@ -76,7 +76,7 @@ export default makeSource({
 			// 	{
 			// 		properties: {
 			// 			class:
-			// 				'relative inline-flex w-6 h-6 place-items-center place-content-center outline-0 text-black dark:text-white ml-2',
+			// 				'relative inline-flex w-6 h-6 place-items-center place-content-center outline-none text-black dark:text-white ml-2',
 			// 		},
 			// 		behavior: 'after',
 			// 		group: async ({ tagName }: { tagName: string }) =>
diff --git a/apps/guide/src/app/not-found.tsx b/apps/guide/src/app/not-found.tsx
index a1e630af1..99d4d49c8 100644
--- a/apps/guide/src/app/not-found.tsx
+++ b/apps/guide/src/app/not-found.tsx
@@ -6,7 +6,7 @@ export default function NotFound() {
 			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href="/guide"
 			>
 				Take me back
diff --git a/apps/guide/src/app/page.tsx b/apps/guide/src/app/page.tsx
index 6de17cd1c..cae556aa3 100644
--- a/apps/guide/src/app/page.tsx
+++ b/apps/guide/src/app/page.tsx
@@ -6,7 +6,7 @@ export default function Page() {
 		<div className="mx-auto max-w-6xl min-h-screen flex flex-col place-items-center gap-12 px-8 py-16 lg:place-content-center lg:px-8 lg:py-0">
 			<div className="flex flex-row place-content-center">
 				<a
-					className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+					className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 					href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
 					rel="external noopener noreferrer"
 					target="_blank"
diff --git a/apps/guide/src/components/Footer.tsx b/apps/guide/src/components/Footer.tsx
index f6091b181..b9ec32b1e 100644
--- a/apps/guide/src/components/Footer.tsx
+++ b/apps/guide/src/components/Footer.tsx
@@ -7,7 +7,7 @@ export default function Footer() {
 			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
 				<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
 					<a
-						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
 						rel="external noopener noreferrer"
 						target="_blank"
@@ -27,7 +27,7 @@ export default function Footer() {
 							<div className="text-lg font-semibold">Community</div>
 							<div className="flex flex-col gap-1">
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord.gg/djs"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -35,7 +35,7 @@ export default function Footer() {
 									Discord
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js/discussions"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -48,7 +48,7 @@ export default function Footer() {
 							<div className="text-lg font-semibold">Project</div>
 							<div className="flex flex-col gap-1">
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -56,7 +56,7 @@ export default function Footer() {
 									discord.js
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord.js.org/docs"
 									rel="noopener noreferrer"
 									target="_blank"
@@ -64,7 +64,7 @@ export default function Footer() {
 									discord.js documentation
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord-api-types.dev"
 									rel="external noopener noreferrer"
 									target="_blank"
diff --git a/apps/guide/src/components/Header.tsx b/apps/guide/src/components/Header.tsx
index 0f889454b..0314e262d 100644
--- a/apps/guide/src/components/Header.tsx
+++ b/apps/guide/src/components/Header.tsx
@@ -22,7 +22,7 @@ export default function Header() {
 				.slice(1)
 				.map((path, idx, original) => (
 					<Link
-						className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="rounded outline-none hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
 						href={`/${original.slice(0, idx + 1).join('/')}`}
 						key={`${path}-${idx}`}
 					>
@@ -65,7 +65,7 @@ export default function Header() {
 				<div className="h-full flex flex-row place-content-between place-items-center gap-8">
 					<Button
 						aria-label="Menu"
-						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 						onClick={() => setOpened((open) => !open)}
 					>
 						<VscMenu size={24} />
@@ -75,7 +75,7 @@ export default function Header() {
 						<Button
 							aria-label="GitHub"
 							as="a"
-							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 							href="https://github.com/discordjs/discord.js"
 							rel="external noopener noreferrer"
 							target="_blank"
diff --git a/apps/guide/src/components/Outline.tsx b/apps/guide/src/components/Outline.tsx
index ab5889d7f..3700d3176 100644
--- a/apps/guide/src/components/Outline.tsx
+++ b/apps/guide/src/components/Outline.tsx
@@ -13,7 +13,7 @@ export function Outline({ headings }: { headings: any[] }) {
 		() =>
 			headings.map((heading, idx) => (
 				<a
-					className={`dark:border-dark-100 border-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-0 focus:rounded focus:border-0 focus:ring ${
+					className={`dark:border-dark-100 border-light-800 pl-6.5 focus:ring-width-2 focus:ring-blurple ml-[10px] border-l p-[5px] text-sm outline-none focus:rounded focus:border-0 focus:ring ${
 						idx === active
 							? 'bg-blurple text-white'
 							: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
diff --git a/apps/guide/src/components/PageButton.tsx b/apps/guide/src/components/PageButton.tsx
index aab628944..3cf1dae20 100644
--- a/apps/guide/src/components/PageButton.tsx
+++ b/apps/guide/src/components/PageButton.tsx
@@ -1,7 +1,7 @@
 export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
 	return (
 		<a
-			className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-0 active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+			className="flex flex-row flex-col transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 rounded bg-light-600 px-4 py-3 leading-none no-underline outline-none active:translate-y-px active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 			href={url}
 		>
 			<h3 className="text-md font-semibold">{title}</h3>
diff --git a/apps/guide/src/components/Sidebar.tsx b/apps/guide/src/components/Sidebar.tsx
index 5a89165e2..131ca71db 100644
--- a/apps/guide/src/components/Sidebar.tsx
+++ b/apps/guide/src/components/Sidebar.tsx
@@ -34,13 +34,13 @@ export function Sidebar() {
 		<div className="flex flex-col gap-3 p-3">
 			{Object.keys(itemsByCategory).map((category, idx) => (
 				<Section
-					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+					buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
 					key={`${category}-${idx}`}
 					title={category}
 				>
 					{itemsByCategory[category]?.map((member, index) => (
 						<Link
-							className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
+							className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-none focus:rounded focus:border-0 focus:ring ${
 								decodeURIComponent(pathname ?? '') === member.href
 									? 'bg-blurple text-white'
 									: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
diff --git a/apps/guide/src/components/ThemeSwitcher.tsx b/apps/guide/src/components/ThemeSwitcher.tsx
index ef015eabc..38acea068 100644
--- a/apps/guide/src/components/ThemeSwitcher.tsx
+++ b/apps/guide/src/components/ThemeSwitcher.tsx
@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
 	return (
 		<Button
 			aria-label="Toggle theme"
-			className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+			className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 			onClick={() => toggleTheme()}
 		>
 			<VscColorMode size={24} />
diff --git a/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx b/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
index 5c1807243..c6ffd4589 100644
--- a/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
+++ b/apps/website/src/app/docs/packages/[package]/[version]/[item]/not-found.tsx
@@ -12,7 +12,7 @@ export default function NotFound() {
 			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href={href}
 			>
 				Take me back
diff --git a/apps/website/src/app/docs/packages/[package]/page.tsx b/apps/website/src/app/docs/packages/[package]/page.tsx
index 7b32c4a72..2a876902e 100644
--- a/apps/website/src/app/docs/packages/[package]/page.tsx
+++ b/apps/website/src/app/docs/packages/[package]/page.tsx
@@ -31,7 +31,7 @@ export default async function Page({ params }: { params: { package: string } })
 			<div className="flex flex-col gap-4">
 				{data.map((version, idx) => (
 					<Link
-						className="h-11 flex flex-col transform-gpu cursor-pointer select-none appearance-none place-content-center border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+						className="h-11 flex flex-col transform-gpu cursor-pointer select-none appearance-none place-content-center border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 						href={`/docs/packages/${params.package}/${version}`}
 						key={`${version}-${idx}`}
 					>
@@ -46,7 +46,7 @@ export default async function Page({ params }: { params: { package: string } })
 				)) ?? null}
 			</div>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href="/docs/packages"
 			>
 				<VscArrowLeft size={20} /> Go back
diff --git a/apps/website/src/app/docs/packages/page.tsx b/apps/website/src/app/docs/packages/page.tsx
index 6b355b0dc..0e6c56f2f 100644
--- a/apps/website/src/app/docs/packages/page.tsx
+++ b/apps/website/src/app/docs/packages/page.tsx
@@ -13,7 +13,7 @@ export default function Page() {
 			<h1 className="text-2xl font-semibold">Select a package:</h1>
 			<div className="flex flex-col gap-4">
 				<a
-					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 					href="https://old.discordjs.dev/#/docs/discord.js"
 				>
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -28,7 +28,7 @@ export default function Page() {
 				</a>
 				{PACKAGES.map((pkg, idx) => (
 					<Link
-						className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+						className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 						href={`/docs/packages/${pkg}`}
 						key={`${pkg}-${idx}`}
 					>
@@ -40,7 +40,7 @@ export default function Page() {
 								</div>
 								{/* <Link href={`/docs/packages/${pkg}`}>
 									<div
-										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-0 focus:ring focus:ring-white active:translate-y-px"
+										className="bg-blurple focus:ring-width-2 flex h-6 transform-gpu cursor-pointer select-none appearance-none flex-row place-content-center place-items-center rounded border-0 px-2 text-xs font-semibold leading-none text-white outline-none focus:ring focus:ring-white active:translate-y-px"
 										role="link"
 									>
 										Select version
@@ -52,7 +52,7 @@ export default function Page() {
 					</Link>
 				))}
 				<a
-					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+					className="h-11 flex transform-gpu cursor-pointer select-none appearance-none place-content-between border border-neutral-300 rounded bg-white p-4 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 dark:bg-dark-400 hover:bg-neutral-100 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 					href="https://discord-api-types.dev/"
 				>
 					<div className="flex grow flex-row place-content-between place-items-center gap-4">
@@ -67,7 +67,7 @@ export default function Page() {
 				</a>
 			</div>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center place-self-center gap-2 border-0 rounded bg-blurple px-4 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href="/"
 			>
 				<VscArrowLeft size={20} /> Go back
diff --git a/apps/website/src/app/not-found.tsx b/apps/website/src/app/not-found.tsx
index ebb20b81b..6d0b6b9de 100644
--- a/apps/website/src/app/not-found.tsx
+++ b/apps/website/src/app/not-found.tsx
@@ -6,7 +6,7 @@ export default function NotFound() {
 			<h1 className="text-[9rem] font-black leading-none md:text-[12rem]">404</h1>
 			<h2 className="text-[2rem] md:text-[3rem]">Not found.</h2>
 			<Link
-				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+				className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 				href="/docs"
 			>
 				Take me back
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 03ffc639e..cb3f30398 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -20,13 +20,13 @@ export default function Page() {
 						<p className="my-6 leading-normal text-neutral-700 dark:text-neutral-300">{DESCRIPTION}</p>
 						<div className="flex flex-row gap-4">
 							<Link
-								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-blurple px-6 text-base font-semibold leading-none text-white no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-white"
 								href="/docs"
 							>
 								Docs
 							</Link>
 							<a
-								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 								href="https://discordjs.guide"
 								rel="noopener noreferrer"
 								target="_blank"
@@ -34,7 +34,7 @@ export default function Page() {
 								Guide <FiExternalLink />
 							</a>
 							<a
-								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-0 active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+								className="h-11 flex flex-row transform-gpu cursor-pointer select-none appearance-none appearance-none place-items-center gap-2 border border-light-900 rounded bg-white px-4 text-base font-semibold leading-none text-black no-underline outline-none active:translate-y-px dark:border-dark-100 active:bg-light-300 dark:bg-dark-400 hover:bg-light-200 dark:text-white focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 								href="https://github.com/discordjs/discord.js"
 								rel="external noopener noreferrer"
 								target="_blank"
@@ -50,7 +50,7 @@ export default function Page() {
 				</div>
 				<div className="flex flex-row place-content-center">
 					<a
-						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
 						rel="external noopener noreferrer"
 						target="_blank"
diff --git a/apps/website/src/components/Anchor.tsx b/apps/website/src/components/Anchor.tsx
index 6b0b64d14..450f192a5 100644
--- a/apps/website/src/components/Anchor.tsx
+++ b/apps/website/src/components/Anchor.tsx
@@ -2,7 +2,7 @@ import { FiLink } from '@react-icons/all-files/fi/FiLink';
 
 export function Anchor({ href }: { href: string }) {
 	return (
-		<a className="mr-1 inline-block rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple" href={href}>
+		<a className="mr-1 inline-block rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple" href={href}>
 			<FiLink size={20} />
 		</a>
 	);
diff --git a/apps/website/src/components/CmdK.tsx b/apps/website/src/components/CmdK.tsx
index 18a6a6a90..80134e9c8 100644
--- a/apps/website/src/components/CmdK.tsx
+++ b/apps/website/src/components/CmdK.tsx
@@ -50,7 +50,7 @@ export function CmdKDialog() {
 		() =>
 			searchResults?.map((item, idx) => (
 				<Command.Item
-					className="my-1 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-0 active:translate-y-px dark:border-dark-100 active:bg-neutral-200 hover:bg-neutral-100 dark:text-white [&[aria-selected]]:ring [&[aria-selected]]:ring-width-2 [&[aria-selected]]:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
+					className="my-1 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-content-center rounded bg-transparent px-4 py-2 text-base font-semibold leading-none text-black outline-none active:translate-y-px dark:border-dark-100 active:bg-neutral-200 hover:bg-neutral-100 dark:text-white [&[aria-selected]]:ring [&[aria-selected]]:ring-width-2 [&[aria-selected]]:ring-blurple dark:active:bg-dark-200 dark:hover:bg-dark-300"
 					key={`${item.id}-${idx}`}
 					onSelect={() => {
 						router.push(item.path);
@@ -119,7 +119,7 @@ export function CmdKDialog() {
 				shouldFilter={false}
 			>
 				<Command.Input
-					className="w-full border-0 border-b border-light-900 rounded rounded-b-0 bg-white/50 p-4 text-lg caret-blurple outline-0 dark:border-dark-100 dark:bg-dark/50 placeholder:text-dark-300/75 dark:placeholder:text-white/75"
+					className="w-full border-0 border-b border-light-900 rounded rounded-b-0 bg-white/50 p-4 text-lg caret-blurple outline-none dark:border-dark-100 dark:bg-dark/50 placeholder:text-dark-300/75 dark:placeholder:text-white/75"
 					onValueChange={setSearch}
 					placeholder="Quick search..."
 					value={search}
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
index 5848c287a..8048326fe 100644
--- a/apps/website/src/components/Footer.tsx
+++ b/apps/website/src/components/Footer.tsx
@@ -7,7 +7,7 @@ export default function Footer() {
 			<div className="mx-auto max-w-6xl flex flex-col place-items-center gap-12 pt-12 lg:place-content-center">
 				<div className="w-full flex flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
 					<a
-						className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 						href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss"
 						rel="external noopener noreferrer"
 						target="_blank"
@@ -27,7 +27,7 @@ export default function Footer() {
 							<div className="text-lg font-semibold">Community</div>
 							<div className="flex flex-col gap-1">
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord.gg/djs"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -35,7 +35,7 @@ export default function Footer() {
 									Discord
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js/discussions"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -48,7 +48,7 @@ export default function Footer() {
 							<div className="text-lg font-semibold">Project</div>
 							<div className="flex flex-col gap-1">
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://github.com/discordjs/discord.js"
 									rel="external noopener noreferrer"
 									target="_blank"
@@ -56,7 +56,7 @@ export default function Footer() {
 									discord.js
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discordjs.guide"
 									rel="noopener noreferrer"
 									target="_blank"
@@ -64,7 +64,7 @@ export default function Footer() {
 									discord.js guide
 								</a>
 								<a
-									className="rounded outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+									className="rounded outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 									href="https://discord-api-types.dev"
 									rel="external noopener noreferrer"
 									target="_blank"
diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index 1dff7f498..d90864cea 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -26,7 +26,7 @@ export default function Header() {
 				.slice(1)
 				.map((path, idx, original) => (
 					<Link
-						className="rounded outline-0 hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="rounded outline-none hover:underline focus:ring focus:ring-width-2 focus:ring-blurple"
 						href={`/${original.slice(0, idx + 1).join('/')}`}
 						key={`${path}-${idx}`}
 					>
@@ -43,7 +43,7 @@ export default function Header() {
 					return (
 						<Fragment key={`${el.key}-${idx}`}>
 							<div className="mx-2">/</div>
-							{el}
+							<div>{el}</div>
 							<div className="mx-2">/</div>
 						</Fragment>
 					);
@@ -52,13 +52,13 @@ export default function Header() {
 				if (idx !== array.length - 1) {
 					return (
 						<Fragment key={`${el.key}-${idx}`}>
-							{el}
+							<div>{el}</div>
 							<div className="mx-2">/</div>
 						</Fragment>
 					);
 				}
 
-				return <Fragment key={`${el.key}-${idx}`}>{el}</Fragment>;
+				return <div key={`${el.key}-${idx}`}>{el}</div>;
 			}),
 		[pathElements],
 	);
@@ -69,7 +69,7 @@ export default function Header() {
 				<div className="h-full flex flex-row place-content-between place-items-center gap-8">
 					<Button
 						aria-label="Menu"
-						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none lg:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 						onClick={() => setOpened((open) => !open)}
 					>
 						<VscMenu size={24} />
@@ -77,7 +77,7 @@ export default function Header() {
 					<div className="hidden lg:flex lg:grow lg:flex-row lg:overflow-hidden">{breadcrumbs}</div>
 					<Button
 						as="div"
-						className="hidden w-56 grow rounded bg-white px-4 py-2.5 outline-0 md:block sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
+						className="hidden w-56 grow rounded bg-white px-4 py-2.5 outline-none md:block sm:grow-0 dark:bg-dark-800 focus:ring focus:ring-width-2 focus:ring-blurple"
 						onClick={() => dialog?.toggle()}
 					>
 						<div className="flex flex-row place-items-center gap-4 md:justify-between">
@@ -91,7 +91,7 @@ export default function Header() {
 					<div className="flex flex-row place-items-center gap-4">
 						<Button
 							as="div"
-							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 md:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none md:hidden active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 							onClick={() => dialog?.toggle()}
 						>
 							<VscSearch size={24} />
@@ -99,7 +99,7 @@ export default function Header() {
 						<Button
 							aria-label="GitHub"
 							as="a"
-							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+							className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 							href="https://github.com/discordjs/discord.js"
 							rel="external noopener noreferrer"
 							target="_blank"
diff --git a/apps/website/src/components/InheritanceText.tsx b/apps/website/src/components/InheritanceText.tsx
index 6cd001aab..b13bb2ed8 100644
--- a/apps/website/src/components/InheritanceText.tsx
+++ b/apps/website/src/components/InheritanceText.tsx
@@ -7,7 +7,7 @@ export function InheritanceText({ parent }: { parent: ApiDeclaredItem }) {
 		<span className="font-semibold">
 			Inherited from{' '}
 			<ItemLink
-				className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+				className="rounded font-mono text-blurple outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 				itemURI={resolveItemURI(parent)}
 			>
 				{parent.displayName}
diff --git a/apps/website/src/components/OverloadSwitcher.tsx b/apps/website/src/components/OverloadSwitcher.tsx
index cff7a3b53..34bd125b1 100644
--- a/apps/website/src/components/OverloadSwitcher.tsx
+++ b/apps/website/src/components/OverloadSwitcher.tsx
@@ -19,7 +19,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
 		() =>
 			overloads.map((_, idx) => (
 				<MenuItem
-					className="my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+					className="my-0.5 cursor-pointer rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 					key={idx}
 					onClick={() => setOverloadIndex(idx + 1)}
 				>
@@ -32,7 +32,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
 	return (
 		<div className="flex flex-col place-items-start gap-2">
 			<MenuButton
-				className="mb-2 rounded bg-white p-3 outline-0 active:bg-light-900 dark:bg-dark-400 hover:bg-light-800 focus:ring focus:ring-width-2 focus:ring-blurple md:-ml-2 dark:active:bg-dark-200 dark:hover:bg-dark-300"
+				className="mb-2 rounded bg-white p-3 outline-none active:bg-light-900 dark:bg-dark-400 hover:bg-light-800 focus:ring focus:ring-width-2 focus:ring-blurple md:-ml-2 dark:active:bg-dark-200 dark:hover:bg-dark-300"
 				state={menu}
 			>
 				<div className="flex flex-row place-content-between place-items-center gap-2">
@@ -48,7 +48,7 @@ export default function OverloadSwitcher({ overloads, children }: PropsWithChild
 				</div>
 			</MenuButton>
 			<Menu
-				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
+				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-none dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
 				state={menu}
 			>
 				{menuItems}
diff --git a/apps/website/src/components/PackageSelect.tsx b/apps/website/src/components/PackageSelect.tsx
index 593ca746f..d9987af18 100644
--- a/apps/website/src/components/PackageSelect.tsx
+++ b/apps/website/src/components/PackageSelect.tsx
@@ -18,7 +18,7 @@ export default function PackageSelect() {
 		() => [
 			<a href="https://old.discordjs.dev/#/docs/discord.js" key="discord.js">
 				<MenuItem
-					className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+					className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 					id="discord-js"
 					onClick={() => packageMenu.setOpen(false)}
 					state={packageMenu}
@@ -29,7 +29,7 @@ export default function PackageSelect() {
 			...PACKAGES.map((pkg, idx) => (
 				<Link href={`/docs/packages/${pkg}/main`} key={`${pkg}-${idx}`}>
 					<MenuItem
-						className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+						className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 						id={pkg}
 						onClick={() => packageMenu.setOpen(false)}
 						state={packageMenu}
@@ -45,7 +45,7 @@ export default function PackageSelect() {
 	return (
 		<>
 			<MenuButton
-				className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
+				className="rounded bg-light-600 p-3 outline-none active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
 				state={packageMenu}
 			>
 				<div className="flex flex-row place-content-between place-items-center">
@@ -60,7 +60,7 @@ export default function PackageSelect() {
 				</div>
 			</MenuButton>
 			<Menu
-				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
+				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-none dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
 				state={packageMenu}
 			>
 				{packageMenuItems}
diff --git a/apps/website/src/components/Sidebar.tsx b/apps/website/src/components/Sidebar.tsx
index 96a4c7b09..25a519af4 100644
--- a/apps/website/src/components/Sidebar.tsx
+++ b/apps/website/src/components/Sidebar.tsx
@@ -94,14 +94,14 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
 				.filter((group) => groupItems[group].length)
 				.map((group, idx) => (
 					<Section
-						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
+						buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-none focus:ring"
 						icon={resolveIcon(group)}
 						key={`${group}-${idx}`}
 						title={group}
 					>
 						{groupItems[group].map((member, index) => (
 							<ItemLink
-								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${
+								className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-none focus:rounded focus:border-0 focus:ring ${
 									decodeURIComponent(segment ?? '') === member.href
 										? 'bg-blurple text-white'
 										: 'dark:hover:bg-dark-200 dark:active:bg-dark-100 hover:bg-light-700 active:bg-light-800'
diff --git a/apps/website/src/components/TableOfContentItems.tsx b/apps/website/src/components/TableOfContentItems.tsx
index 165d99b72..4980f252f 100644
--- a/apps/website/src/components/TableOfContentItems.tsx
+++ b/apps/website/src/components/TableOfContentItems.tsx
@@ -25,7 +25,7 @@ export interface TableOfContentsItemProps {
 export function TableOfContentsPropertyItem({ property }: { property: TableOfContentsSerializedProperty }) {
 	return (
 		<a
-			className="ml-[10px] border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
+			className="ml-[10px] border-l border-light-800 p-[5px] pl-6.5 text-sm outline-none focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
 			href={`#${property.name}`}
 			key={`${property.name}-${property.kind}`}
 			title={property.name}
@@ -44,7 +44,7 @@ export function TableOfContentsMethodItem({ method }: { method: TableOfContentsS
 
 	return (
 		<a
-			className="ml-[10px] flex flex-row place-items-center gap-2 border-l border-light-800 p-[5px] pl-6.5 text-sm outline-0 focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
+			className="ml-[10px] flex flex-row place-items-center gap-2 border-l border-light-800 p-[5px] pl-6.5 text-sm outline-none focus:border-0 dark:border-dark-100 focus:rounded active:bg-light-800 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-100 dark:hover:bg-dark-200"
 			href={`#${key}`}
 			key={key}
 			title={method.name}
diff --git a/apps/website/src/components/ThemeSwitcher.tsx b/apps/website/src/components/ThemeSwitcher.tsx
index ef015eabc..38acea068 100644
--- a/apps/website/src/components/ThemeSwitcher.tsx
+++ b/apps/website/src/components/ThemeSwitcher.tsx
@@ -11,7 +11,7 @@ export default function ThemeSwitcher() {
 	return (
 		<Button
 			aria-label="Toggle theme"
-			className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-0 active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
+			className="h-6 w-6 flex flex-row transform-gpu cursor-pointer select-none appearance-none place-items-center border-0 rounded rounded-full bg-transparent p-0 text-sm font-semibold leading-none no-underline outline-none active:translate-y-px focus:ring focus:ring-width-2 focus:ring-blurple"
 			onClick={() => toggleTheme()}
 		>
 			<VscColorMode size={24} />
diff --git a/apps/website/src/components/VersionSelect.tsx b/apps/website/src/components/VersionSelect.tsx
index 869261ce1..cc2d2bd43 100644
--- a/apps/website/src/components/VersionSelect.tsx
+++ b/apps/website/src/components/VersionSelect.tsx
@@ -23,7 +23,7 @@ export default function VersionSelect() {
 				?.map((item, idx) => (
 					<Link href={`/docs/packages/${packageName}/${item}`} key={`${item}-${idx}`}>
 						<MenuItem
-							className="my-0.5 rounded bg-white p-3 text-sm outline-0 active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
+							className="my-0.5 rounded bg-white p-3 text-sm outline-none active:bg-light-800 dark:bg-dark-600 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-500"
 							onClick={() => versionMenu.setOpen(false)}
 							state={versionMenu}
 						>
@@ -38,7 +38,7 @@ export default function VersionSelect() {
 	return (
 		<>
 			<MenuButton
-				className="rounded bg-light-600 p-3 outline-0 active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
+				className="rounded bg-light-600 p-3 outline-none active:bg-light-800 dark:bg-dark-400 hover:bg-light-700 focus:ring focus:ring-width-2 focus:ring-blurple dark:active:bg-dark-400 dark:hover:bg-dark-300"
 				state={versionMenu}
 			>
 				<div className="flex flex-row place-content-between place-items-center">
@@ -53,7 +53,7 @@ export default function VersionSelect() {
 				</div>
 			</MenuButton>
 			<Menu
-				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-0 dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
+				className="z-20 flex flex-col border border-light-800 rounded bg-white p-1 outline-none dark:border-dark-100 dark:bg-dark-600 focus:ring focus:ring-width-2 focus:ring-blurple"
 				state={versionMenu}
 			>
 				{versionMenuItems}
diff --git a/apps/website/src/components/documentation/tsdoc/TSDoc.tsx b/apps/website/src/components/documentation/tsdoc/TSDoc.tsx
index 38a481045..33d40cd82 100644
--- a/apps/website/src/components/documentation/tsdoc/TSDoc.tsx
+++ b/apps/website/src/components/documentation/tsdoc/TSDoc.tsx
@@ -39,7 +39,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
 
 						return (
 							<ItemLink
-								className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+								className="rounded font-mono text-blurple outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 								itemURI={resolveItemURI(foundItem)}
 								key={idx}
 							>
@@ -51,7 +51,7 @@ export function TSDoc({ item, tsdoc }: { item: ApiItem; tsdoc: DocNode }): JSX.E
 					if (urlDestination) {
 						return (
 							<Link
-								className="rounded font-mono text-blurple outline-0 focus:ring focus:ring-width-2 focus:ring-blurple"
+								className="rounded font-mono text-blurple outline-none focus:ring focus:ring-width-2 focus:ring-blurple"
 								href={urlDestination}
 								key={idx}
 							>
diff --git a/packages/ui/src/lib/components/Section.tsx b/packages/ui/src/lib/components/Section.tsx
index 44adbf5ff..8d90f00d9 100644
--- a/packages/ui/src/lib/components/Section.tsx
+++ b/packages/ui/src/lib/components/Section.tsx
@@ -34,7 +34,7 @@ export function Section({
 				className={
 					buttonClassName
 						? buttonClassName
-						: 'hover:bg-light-800 active:bg-light-900 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple rounded bg-white p-3 outline-0 focus:ring'
+						: 'hover:bg-light-800 active:bg-light-900 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-200 focus:ring-width-2 focus:ring-blurple rounded bg-white p-3 outline-none focus:ring'
 				}
 				state={disclosure}
 			>