Buttons for docs (#23)

Author: d0rich

app.vue

@@ -34,8 +34,18 @@ const fanItems = ref<ActionFanItem<CharacterPose>[]>([
           <DBtn href="https://d0rich.me" target="_blank">Link Button</DBtn>
           <DBtn highlight="negative-tile">Default highlight</DBtn>
           <DBtn highlight="list-item">List highlight</DBtn>
-          <DBtn highlight="list-item" color-class="bg-blue-600">Custom color</DBtn>
+          <DBtn highlight="list-item" color-class="bg-blue-600"
+            >Custom color</DBtn
+          >
           <DBtn highlight="negative-list-item">List highlight (negative)</DBtn>
+          <DBtn no-rotate class="router-link-active">Active Link</DBtn>
+          <DBtn
+            no-rotate
+            class="router-link-active"
+            highlight="negative-list-item"
+            >Active List Link</DBtn
+          >
+          <DBtn text-transform="none">No Text transform</DBtn>
         </div>
       </section>
       <section class="my-7">

components/d/Btn.vue

@@ -27,7 +27,11 @@ const props = defineProps({
     type: String as () => HighlightVariant,
     default: undefined
   },
-  colorClass: [String, Object as () => Record<string, boolean>]
+  colorClass: [String, Object as () => Record<string, boolean>],
+  textTransform: {
+    type: String as () => 'uppercase' | 'capitalize' | 'lowercase' | 'none',
+    default: 'uppercase'
+  }
 })
 
 const currentComponent = computed(() => {
@@ -41,7 +45,10 @@ const currentComponent = computed(() => {
     :is="currentComponent"
     class="d-btn"
     :class="{
-      '-rotate-6': !noRotate
+      '-rotate-6': !noRotate,
+      uppercase: textTransform === 'uppercase',
+      capitalize: textTransform === 'capitalize',
+      lowercase: textTransform === 'lowercase'
     }"
     v-bind="props"
   >
@@ -58,6 +65,6 @@ const currentComponent = computed(() => {
 
 <style>
 .d-btn {
-  @apply font-extrabold uppercase select-none relative inline-block;
+  @apply font-extrabold select-none relative inline-block;
 }
 </style>

components/d/wrap/FocusHighlight.vue

@@ -235,10 +235,10 @@ const currentComponent = computed(() => {
   .d-focus-hl--exact:not(.d-focus-hl--no-passive-link)
   .d-focus-hl__hl--negative-list-item {
   opacity: 1;
-  width: 220% !important;
-  height: 200% !important;
-  top: -50% !important;
-  left: -5% !important;
+  width: 200%;
+  height: 130%;
+  top: -15%;
+  left: -5%;
 }
 
 @keyframes hl--negative-list-item-animation {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@d0rich/nuxt-design-system",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "main": "./nuxt.config.ts",
   "description": "🖼️ Design system for d0rich's projects based on Nuxt 3 and Tailwind CSS",
   "keywords": [