diff --git a/libs/components/src/lib/combobox/combobox.scss b/libs/components/src/lib/combobox/combobox.scss
index ada7b99777..c4e11f102d 100644
--- a/libs/components/src/lib/combobox/combobox.scss
+++ b/libs/components/src/lib/combobox/combobox.scss
@@ -1,6 +1,7 @@
-@use "../focus/partials/variables" as focus-variables;
 @use "../popup/partials/variables" as popup-variables;
 @use "../text-field/partials/variables" as text-field-variables;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
 	$connotations: accent,
@@ -50,3 +51,28 @@
 ::part(popup-base) {
 	inline-size: 100%;
 }
+
+
+/* focus */
+@supports selector(:has(*)) {
+.fieldset:has(.control:focus-within)::after {
+	#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+	@include focus.focus;
+}
+}
+
+@supports not selector(:has(*)) {
+.fieldset:focus-within::after {
+	@include focus.focus;
+	#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+	position: absolute;
+	z-index: 1;
+	display: block;
+	border-radius: inherit;
+	content: "";
+	inset: 0;
+}
+}
+
diff --git a/libs/components/src/lib/combobox/combobox.template.ts b/libs/components/src/lib/combobox/combobox.template.ts
index 1e04439049..bc8213c217 100644
--- a/libs/components/src/lib/combobox/combobox.template.ts
+++ b/libs/components/src/lib/combobox/combobox.template.ts
@@ -5,7 +5,6 @@ import { affixIconTemplateFactory } from '../../shared/patterns/affix';
 import { Popup } from '../popup/popup';
 import { Listbox } from '../listbox/listbox';
 import type { Combobox } from './combobox';
-import { focusTemplateFactory } from './../../shared/patterns/focus';
 
 /**
  *
@@ -33,7 +32,6 @@ const getStateClasses = ({
  */
 function renderInput(context: ElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<Combobox>`
 		<div class="${getStateClasses}" ${ref('_anchor')}>
@@ -58,7 +56,6 @@ function renderInput(context: ElementDefinitionContext) {
 					${ref('control')}
 				/>
 				${() => affixIconTemplate('chevron-down-line')}
-				${() => focusTemplate}
 			</div>
 		</div>`;
 }
diff --git a/libs/components/src/lib/combobox/definition.ts b/libs/components/src/lib/combobox/definition.ts
index d03375213e..309fa35858 100644
--- a/libs/components/src/lib/combobox/definition.ts
+++ b/libs/components/src/lib/combobox/definition.ts
@@ -2,7 +2,6 @@ import type { ComboboxOptions } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
 import { popupRegistries } from '../popup/definition';
-import { focusRegistries } from '../focus/definition';
 import { listboxOptionRegistries } from '../option/definition';
 import textFieldStyles from '../text-field/text-field.scss?inline';
 import styles from './combobox.scss?inline';
@@ -26,7 +25,7 @@ export const combobox = Combobox.compose<ComboboxOptions>({
 	},
 })();
 
-export const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...focusRegistries, ...listboxOptionRegistries];
+export const comboboxRegistries = [combobox, ...iconRegistries, ...popupRegistries, ...listboxOptionRegistries];
 
 /**
  * Registers the combobox elements with the design system.
diff --git a/libs/components/src/lib/file-picker/definition.ts b/libs/components/src/lib/file-picker/definition.ts
index a745fe8012..4cc5681ffd 100644
--- a/libs/components/src/lib/file-picker/definition.ts
+++ b/libs/components/src/lib/file-picker/definition.ts
@@ -1,7 +1,6 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
 import { iconRegistries } from '../icon/definition';
-import { focusRegistries } from '../focus/definition';
 import { buttonRegistries } from '../button/definition';
 import styles from './file-picker.scss?inline';
 
@@ -21,7 +20,7 @@ export const filePickerDefinition =
 /**
  * @internal
  */
-export const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...focusRegistries, ...buttonRegistries];
+export const filePickerRegistries = [filePickerDefinition(), ...iconRegistries, ...buttonRegistries];
 
 /**
  * Registers the file-picker element with the design system.
diff --git a/libs/components/src/lib/focus/README.md b/libs/components/src/lib/focus/README.md
deleted file mode 100644
index 4bd17fbe82..0000000000
--- a/libs/components/src/lib/focus/README.md
+++ /dev/null
@@ -1 +0,0 @@
-# Focus
diff --git a/libs/components/src/lib/focus/definition.ts b/libs/components/src/lib/focus/definition.ts
deleted file mode 100644
index daa4026469..0000000000
--- a/libs/components/src/lib/focus/definition.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { registerFactory } from '../../shared/design-system';
-import { Focus } from './focus';
-import styles from './focus.scss?inline';
-import { focusTemplate as template } from './focus.template';
-
-
-/**
- * Represents a focus custom element.
- * focus is a label that holds small amounts of information.
- * A focus can be used to display unread notifications, or to label a block of text.
- * Focuss don’t work for navigation because they can't include a hyperlink.
- */
-export const focusDefinition = Focus.compose<FoundationElementDefinition>({
-	baseName: 'focus',
-	template: template as any,
-	styles,
-});
-
-/**
- * @internal
- */
-export const focusRegistries = [focusDefinition()];
-
-/**
- * Registers the focus component
- *
- * @param prefix - the prefix to use for the component name
- */
-export const registerFocus = registerFactory(focusRegistries);
diff --git a/libs/components/src/lib/focus/focus.scss b/libs/components/src/lib/focus/focus.scss
deleted file mode 100644
index 2aa09d1658..0000000000
--- a/libs/components/src/lib/focus/focus.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-@use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
-@use "partials/variables" as variables;
-
-
-:host {
-	display: contents;
-	border-radius: inherit;
-}
-
-.control {
-	$outline-width: 2px;
-
-	position: absolute;
-	z-index: 1;
-	box-sizing: border-box;
-	border-radius: inherit;
-	box-shadow: inset 0 0 0 3px var(#{variables.$focus-stroke-gap-color}, currentColor);
-	inset: var(#{variables.$focus-inset}, 0);
-	outline: $outline-width solid var(#{variables.$focus-stroke-color}, var(#{constants.$vvd-color-canvas-text}));
-	outline-offset: -$outline-width;
-}
diff --git a/libs/components/src/lib/focus/focus.template.ts b/libs/components/src/lib/focus/focus.template.ts
deleted file mode 100644
index b778e070bc..0000000000
--- a/libs/components/src/lib/focus/focus.template.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Focus } from './focus';
-
-/**
- * The template for the Focus component.
- *
- * @param context - element definition context
- * @public
- */
-export const focusTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Focus> = () => html`
-        <span class="control"></span>`;
diff --git a/libs/components/src/lib/focus/focus.ts b/libs/components/src/lib/focus/focus.ts
deleted file mode 100644
index 01f3f937a8..0000000000
--- a/libs/components/src/lib/focus/focus.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-
-/**
- * Base class for focus
- *
- * @public
- */
-export class Focus extends FoundationElement {
-
-}
diff --git a/libs/components/src/lib/focus/index.ts b/libs/components/src/lib/focus/index.ts
deleted file mode 100644
index e3c8f5892c..0000000000
--- a/libs/components/src/lib/focus/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { registerFocus } from './definition';
-
-
-registerFocus();
diff --git a/libs/components/src/lib/focus/partials/variables.scss b/libs/components/src/lib/focus/partials/variables.scss
deleted file mode 100644
index 1c0e23696e..0000000000
--- a/libs/components/src/lib/focus/partials/variables.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$focus-inset: --focus-inset;
-$focus-stroke-color: --focus-stroke-color;
-$focus-stroke-gap-color: --focus-stroke-gap-color;
diff --git a/libs/components/src/lib/number-field/number-field.scss b/libs/components/src/lib/number-field/number-field.scss
index 7d1416052f..d432ab948b 100644
--- a/libs/components/src/lib/number-field/number-field.scss
+++ b/libs/components/src/lib/number-field/number-field.scss
@@ -28,11 +28,3 @@
 		}
 	}
 }
-
-.focus-indicator {
-	.disabled & {
-		display: none;
-		pointer-events: none;
-	}
-}
-
diff --git a/libs/components/src/lib/number-field/number-field.template.ts b/libs/components/src/lib/number-field/number-field.template.ts
index 27658a323f..96f9043d56 100644
--- a/libs/components/src/lib/number-field/number-field.template.ts
+++ b/libs/components/src/lib/number-field/number-field.template.ts
@@ -7,7 +7,6 @@ import type {
 import {classNames} from '@microsoft/fast-web-utilities';
 import {Shape} from '../enums';
 import {getFeedbackTemplate} from '../../shared/patterns';
-import {focusTemplateFactory} from '../../shared/patterns/focus';
 import {Button} from '../button/button';
 import {Divider} from '../divider/divider';
 import type {NumberField} from './number-field';
@@ -88,7 +87,6 @@ export const NumberFieldTemplate: (
 	context: ElementDefinitionContext,
 	definition: FoundationElementDefinition
 ) => ViewTemplate<NumberField> = (context) => {
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<NumberField>`
 	<div class="base ${getStateClasses}">
@@ -132,7 +130,6 @@ export const NumberFieldTemplate: (
 							 aria-roledescription="${x => x.ariaRoledescription}"
 							 ${ref('control')}
 				/>
-				${() => focusTemplate}
 			</div>
 			${() => numberControlButtons(context)}
     </div>
diff --git a/libs/components/src/lib/text-field/definition.ts b/libs/components/src/lib/text-field/definition.ts
index a275a98ccd..a9e126576c 100644
--- a/libs/components/src/lib/text-field/definition.ts
+++ b/libs/components/src/lib/text-field/definition.ts
@@ -1,6 +1,5 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { registerFactory } from '../../shared/design-system';
-import { focusRegistries } from '../focus/definition';
 import { iconRegistries } from '../icon/definition';
 import { TextField } from './text-field';
 import styles from './text-field.scss?inline';
@@ -23,7 +22,7 @@ export const textFieldDefinition = TextField.compose<FoundationElementDefinition
 /**
  * @internal
  */
-export const textFieldRegistries = [textFieldDefinition(), ...iconRegistries, ...focusRegistries];
+export const textFieldRegistries = [textFieldDefinition(), ...iconRegistries];
 
 /**
  * Registers the text-field elements with the design system.
diff --git a/libs/components/src/lib/text-field/text-field.scss b/libs/components/src/lib/text-field/text-field.scss
index e96e03cf23..9e45097bb9 100644
--- a/libs/components/src/lib/text-field/text-field.scss
+++ b/libs/components/src/lib/text-field/text-field.scss
@@ -1,6 +1,7 @@
 @use "partials/variables" as variables;
-@use "../focus/partials/variables" as focus-variables;
 @use "../../../../shared/src/lib/sass/mixins/border-radius" as border-radius-variables;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus;
+@use "../../../../shared/src/lib/sass/mixins/focus" as focus-variables;
 @use "../../../../../dist/libs/tokens/scss/tokens.constants" as constants;
 @use "../../../../shared/src/lib/sass/mixins/connotation/config" with (
 	$connotations: accent,
@@ -118,13 +119,12 @@ $low-ink-color: --_low-ink-color;
 	border-radius: inherit;
 	block-size: 100%;
 	inline-size: 100%;
-
-	&:focus-visible {
-		outline: none;
-	}
 }
 
+
 .control {
+	border-radius: inherit;
+
 	&:not(slot),
 	&::slotted(input) {
 		/* As input is in light dom, use !important and initial to prevent values getting overridden by global CSS resets etc. */
@@ -140,6 +140,7 @@ $low-ink-color: --_low-ink-color;
 		block-size: 100% !important;
 		color: inherit !important;
 		font: inherit;
+		outline: transparent;
 		padding-block: 0 !important;
 		padding-inline: var(#{variables.$text-field-gutter-start}) var(#{variables.$text-field-gutter-end}) !important;
 	}
@@ -157,11 +158,6 @@ $low-ink-color: --_low-ink-color;
 		-webkit-text-fill-color: var(#{$low-ink-color}) !important; /* 1. sets text fill to current `color` for safari */
 	}
 
-	&:not(slot):focus-visible,
-	&::slotted(input:focus-visible) {
-		outline: none;
-	}
-
 	.has-icon &:not(slot),
 	.has-icon &::slotted(input) {
 		padding-inline-start: calc(var(#{variables.$text-field-icon-size}) + var(#{variables.$text-field-gutter-start}) * 2) !important;
@@ -196,16 +192,26 @@ $low-ink-color: --_low-ink-color;
 	}
 }
 
-.focus-indicator {
-	#{focus-variables.$focus-stroke-gap-color}: transparent;
+/* focus */
 
-	pointer-events: none;
+@supports selector(:has(*)) {
+	.fieldset:has(.wrapper .control:focus-within)::after {
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
 
-	// two properties are needed because number-field and combobox inherits the style.
-	// only text-field has wrapper.
+		@include focus.focus;
+	}
+}
 
-	.wrapper:not(:focus-visible, :focus-within) > &,
-	.fieldset:not(:focus-visible, :focus-within) > & {
-		display: none;
+@supports not selector(:has(*)) {
+	.wrapper:focus-within::after {
+		@include focus.focus;
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
+
+		position: absolute;
+		z-index: 1;
+		display: block;
+		border-radius: inherit;
+		content: "";
+		inset: 0;
 	}
 }
diff --git a/libs/components/src/lib/text-field/text-field.template.ts b/libs/components/src/lib/text-field/text-field.template.ts
index c3e64036a6..08f6b17e69 100644
--- a/libs/components/src/lib/text-field/text-field.template.ts
+++ b/libs/components/src/lib/text-field/text-field.template.ts
@@ -6,7 +6,6 @@ import type {
 } from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { affixIconTemplateFactory } from '../../shared/patterns/affix';
-import { focusTemplateFactory } from '../../shared/patterns/focus';
 import { getFeedbackTemplate } from '../../shared/patterns';
 import type { TextField } from './text-field';
 
@@ -60,7 +59,6 @@ export const TextfieldTemplate: (
 	definition: FoundationElementDefinition
 ) => ViewTemplate<TextField> = (context: ElementDefinitionContext) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
-	const focusTemplate = focusTemplateFactory(context);
 
 	return html<TextField>`
 	<div class="base ${getStateClasses}">
@@ -74,7 +72,6 @@ export const TextfieldTemplate: (
 
 			<div class="wrapper">
 				<slot class="control" name="_control"></slot>
-				${() => focusTemplate}
 			</div>
 			<div class="action-items-wrapper">
 				<slot name="action-items"  ${slotted('actionItemsSlottedContent')}></slot>
diff --git a/libs/components/src/shared/patterns/focus.ts b/libs/components/src/shared/patterns/focus.ts
deleted file mode 100644
index f1cb7bd1a9..0000000000
--- a/libs/components/src/shared/patterns/focus.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-
-import { html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
-import { Focus } from '../../lib/focus/focus';
-
-
-/**
- * The template for the focus element.
- *
- * @param context - element definition context
- * @public
- */
-export const focusTemplateFactory: (context: ElementDefinitionContext) =>
-ViewTemplate = (context: ElementDefinitionContext) => {
-	const focusTag = context.tagFor(Focus);
-	return html`<${focusTag} class="focus-indicator"></${focusTag}>`;
-};
diff --git a/libs/components/src/shared/patterns/index.ts b/libs/components/src/shared/patterns/index.ts
index b97bddf4a3..6939da003d 100644
--- a/libs/components/src/shared/patterns/index.ts
+++ b/libs/components/src/shared/patterns/index.ts
@@ -1,5 +1,4 @@
 export * from './affix';
-export * from './focus';
 export * from './form-elements';
 export * from './localized';
 export * from './trapped-focus';