vueless 0.0.336 → 0.0.338

package/package.json

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

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -51,6 +51,7 @@
 
     <UDropdownList
       v-if="isShownOptions"
+      ref="dropdownListRef"
       v-model="selectedItem"
       :size="size"
       :options="options"
@@ -58,13 +59,12 @@
       :label-key="labelKey"
       v-bind="dropdownListAttrs"
       :data-test="`${dataTest}-list`"
-      @click="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { provide, ref, watch } from "vue";
+import { nextTick, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UBadge from "../ui.text-badge/UBadge.vue";
@@ -208,10 +208,9 @@ const emit = defineEmits([
   "select",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 const isShownOptions = ref(false);
 const selectedItem = ref("");
+const dropdownListRef = ref(null);
 
 const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
   props,
@@ -222,17 +221,19 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
 
 watch(selectedItem, () => {
   emit("select", selectedItem.value);
+
+  hideOptions();
 });
 
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
+
+  if (isShownOptions.value) {
+    nextTick(() => dropdownListRef.value.wrapperRef.focus());
+  }
 }
 
 function hideOptions() {
   isShownOptions.value = false;
 }
-
-function onClickList() {
-  hideOptions();
-}
 </script>

package/ui.dropdown-badge/storybook/stories.js

@@ -14,9 +14,9 @@ export default {
   args: {
     label: "Dropdown",
     options: [
-      { label: "option 1", value: "1" },
-      { label: "option 2", value: "2" },
-      { label: "option 3", value: "3" },
+      { label: "option 1", id: "1" },
+      { label: "option 2", id: "2" },
+      { label: "option 3", id: "3" },
     ],
   },
   argTypes: {

package/ui.dropdown-list/UDropdownList.vue

@@ -6,7 +6,7 @@
     v-bind="wrapperAttrs"
     @keydown.self.down.prevent="pointerForward"
     @keydown.self.up.prevent="pointerBackward"
-    @keydown.enter.tab.stop.self="addPointerElement"
+    @keydown.enter.stop.self="addPointerElement"
   >
     <ul :id="`listbox-${id}`" v-bind="listAttrs" role="listbox">
       <li

package/ui.text-badge/config.js

@@ -16,11 +16,14 @@ export default /*tw*/ {
         true: "rounded-full",
       },
       tabindex: {
-        true: "cursor-pointer focus:ring-dynamic focus:ring-offset-dynamic focus:ring-{color}-700/15",
+        true: `
+          cursor-pointer focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-{color}-700/15
+          focus:ring-dynamic focus:ring-offset-dynamic focus:ring-{color}-700/15
+        `,
       },
       color: {
-        grayscale: "focus:ring-gray-700/15",
-        white: "focus:ring-gray-700/15",
+        grayscale: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
+        white: "focus:ring-gray-700/15 focus-within:ring-gray-700/15",
       },
     },
     compoundVariants: [
@@ -66,6 +69,6 @@ export default /*tw*/ {
     { pattern: `border-(${colors})-100` },
     { pattern: `border-(${colors})-600` },
     { pattern: `text-(${colors})-600` },
-    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
+    { pattern: `ring-(${colors})-700`, variants: ["focus", "focus-within"] },
   ],
 };

package/web-types.json

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