vueless 0.0.342 → 0.0.343

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.342",
+  "version": "0.0.343",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.dropdown-badge/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownBadge: "{UBadge}",
-  dropdownBadgeActive: "group",
+  dropdownBadgeActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     component: "{UDropdownList}",

package/ui.dropdown-button/UDropdownButton.vue

@@ -52,13 +52,13 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
-      tabindex="-1"
       :data-test="`${dataTest}-list`"
       @click="onClickList"
     />
@@ -66,7 +66,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UButton from "../ui.button/UButton.vue";
@@ -237,6 +237,7 @@ provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
 
@@ -266,6 +267,10 @@ watch(selectedItem, () => {
 
 function onClickButton() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {

package/ui.dropdown-button/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownButton: "{UButton}",
-  dropdownButtonActive: "group",
+  dropdownButtonActive: "group ring-dynamic ring-offset-dynamic ring-brand-700/15 border-brand-500 hover:border-brand-500",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",

package/ui.dropdown-link/UDropdownLink.vue

@@ -55,6 +55,7 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
@@ -68,7 +69,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch, useId } from "vue";
+import { nextTick, computed, provide, ref, watch, useId } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import ULink from "../ui.button-link/ULink.vue";
@@ -230,6 +231,7 @@ provide("hideDropdownOptions", hideOptions);
 
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const elementId = props.id || useId();
 
@@ -254,6 +256,10 @@ watch(selectedItem, () => {
 
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {

package/ui.dropdown-link/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
   dropdownLink: "{ULink}",
-  dropdownLinkActive: "group",
+  dropdownLinkActive: "group ring-dynamic ring-offset-4 ring-brand-700/15",
   dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",
   dropdownList: {
     base: "{UDropdownList} w-fit",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.342",
+  "version": "0.0.343",
   "contributions": {
     "html": {
       "description-markup": "markdown",