diff --git a/.changeset/calm-pears-happen.md b/.changeset/calm-pears-happen.md
new file mode 100644
index 00000000..5fb54ec8
--- /dev/null
+++ b/.changeset/calm-pears-happen.md
@@ -0,0 +1,5 @@
+---
+'@d0rich/esprit-design': patch
+---
+
+More tile highlights options
diff --git a/apps/design.d0rich.me/components/B5Buttons.vue b/apps/design.d0rich.me/components/B5Buttons.vue
index 32de5eb2..430ff4f8 100644
--- a/apps/design.d0rich.me/components/B5Buttons.vue
+++ b/apps/design.d0rich.me/components/B5Buttons.vue
@@ -31,10 +31,40 @@
-
- Button
+ Tile
-
- Active button
+ Active tile
+
+ -
+
+ Custom color
+
+
+ -
+ Negative
+
+ -
+ Active negative
+
+ -
+
+ Composite
+
+
+ -
+
+ Active Composite
+
@@ -48,7 +78,11 @@
- - highlight="list-item" > List highlight
+ -
+
+ Active list highlight
+
+
-
Active list highlight
diff --git a/packages/esprit-design/src/components/buttons/DBtn.vue b/packages/esprit-design/src/components/buttons/DBtn.vue
index d21883f4..ea487946 100644
--- a/packages/esprit-design/src/components/buttons/DBtn.vue
+++ b/packages/esprit-design/src/components/buttons/DBtn.vue
@@ -45,7 +45,7 @@ const props = defineProps({
},
colorClass: {
type: [String, Object as () => Record],
- default: ''
+ default: undefined
},
textTransform: {
type: String as () => 'uppercase' | 'capitalize' | 'lowercase' | 'none',
diff --git a/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue b/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue
index a13b4d44..09aea8a2 100644
--- a/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue
+++ b/packages/esprit-design/src/components/utils/DWrapFocusHighlight.vue
@@ -12,7 +12,9 @@ export default {