From 691c8fa7df037a0d3b3a320faed4ba17df79c1d3 Mon Sep 17 00:00:00 2001
From: Francisco Diaz <franciscod@empathy.co>
Date: Fri, 20 Feb 2026 11:16:27 +0100
Subject: [PATCH] feat(x-design-system): highlight component

---
 packages/x-design-system/demo/src/app.vue        |  2 ++
 .../demo/src/components/highlight.vue            | 16 ++++++++++++++++
 .../demo/src/components/wrapper.vue              |  2 +-
 .../x-design-system/lib/components/highlight.css |  9 +++++++++
 .../x-design-system/lib/components/index.css     |  1 +
 5 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 packages/x-design-system/demo/src/components/highlight.vue
 create mode 100644 packages/x-design-system/lib/components/highlight.css

diff --git a/packages/x-design-system/demo/src/app.vue b/packages/x-design-system/demo/src/app.vue
index 6ba0b09ba1..d0b0ef867e 100644
--- a/packages/x-design-system/demo/src/app.vue
+++ b/packages/x-design-system/demo/src/app.vue
@@ -2,6 +2,7 @@
   <Badge />
   <Button />
   <ButtonGroup />
+  <Highlight />
   <Integration />
 </template>
 
@@ -9,5 +10,6 @@
 import Badge from './components/badge.vue'
 import ButtonGroup from './components/button-group.vue'
 import Button from './components/button.vue'
+import Highlight from './components/highlight.vue'
 import Integration from './components/integration.vue'
 </script>
diff --git a/packages/x-design-system/demo/src/components/highlight.vue b/packages/x-design-system/demo/src/components/highlight.vue
new file mode 100644
index 0000000000..990ba61ccb
--- /dev/null
+++ b/packages/x-design-system/demo/src/components/highlight.vue
@@ -0,0 +1,16 @@
+<template>
+  <Wrapper feature="Highlight" :rows="rows">
+    <template #default>
+      <div class="xds:highlight-text">
+        <span>Def</span>
+        <span class="xds:highlight-text-match">ault</span>
+      </div>
+    </template>
+  </Wrapper>
+</template>
+
+<script setup lang="ts">
+import Wrapper from './wrapper.vue'
+
+const rows = ['default']
+</script>
diff --git a/packages/x-design-system/demo/src/components/wrapper.vue b/packages/x-design-system/demo/src/components/wrapper.vue
index 2bbb00a5bb..47704f1c8a 100644
--- a/packages/x-design-system/demo/src/components/wrapper.vue
+++ b/packages/x-design-system/demo/src/components/wrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <table class="xds:min-w-full">
+  <table class="xds:min-w-full xds:mb-16">
     <thead class="xds:bg-neutral-25">
       <tr>
         <th colspan="2" class="xds:p-8">{{ feature }}</th>
diff --git a/packages/x-design-system/lib/components/highlight.css b/packages/x-design-system/lib/components/highlight.css
new file mode 100644
index 0000000000..cf986aca20
--- /dev/null
+++ b/packages/x-design-system/lib/components/highlight.css
@@ -0,0 +1,9 @@
+/* Base */
+@utility highlight-text {
+  @apply xds:font-bold;
+}
+
+/* Match */
+@utility highlight-text-match {
+  @apply xds:font-regular;
+}
diff --git a/packages/x-design-system/lib/components/index.css b/packages/x-design-system/lib/components/index.css
index 70d5e5a434..e8c20deef9 100644
--- a/packages/x-design-system/lib/components/index.css
+++ b/packages/x-design-system/lib/components/index.css
@@ -1,3 +1,4 @@
 @import './badge.css';
 @import './button.css';
 @import './button-group.css';
+@import './highlight.css';