vueless 0.0.317 → 0.0.319

package/package.json

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

package/ui.button/composables/attrs.composable.js

@@ -1,6 +1,8 @@
 import { computed, useSlots } from "vue";
+
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
+
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {

package/ui.button/configs/default.config.js

@@ -49,7 +49,7 @@ export default /*tw*/ {
         true: "!ring-0 !ring-offset-0",
       },
       loading: {
-        true: "pointer-events-none gap-0 !ring-0",
+        true: "pointer-events-none gap-0",
       },
       block: {
         true: "w-full",

package/ui.button/index.vue

@@ -11,7 +11,7 @@
     <template v-if="loading">
       <!-- Label is needed to prevent changing button height -->
       <div tabindex="-1" class="invisible w-0" v-text="label" />
-      <ULoader :loading="loading" :size="loaderSize" :color="componentColor" v-bind="loaderAttrs" />
+      <ULoader :loading="loading" :size="loaderSize" :color="iconColor" v-bind="loaderAttrs" />
     </template>
 
     <template v-else>
@@ -21,13 +21,13 @@
         @binding {string} icon-size
         @binding {string} icon-color
       -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="componentColor">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="leftIcon"
           internal
           :name="leftIcon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="leftIconAttrs"
         />
       </slot>
@@ -44,14 +44,14 @@
         :label="label"
         :icon-name="icon"
         :icon-size="iconSize"
-        :icon-color="componentColor"
+        :icon-color="iconColor"
       >
         <UIcon
           v-if="icon"
           internal
           :name="icon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="centerIconAttrs"
         />
         <template v-else>
@@ -65,13 +65,13 @@
         @binding {string} icon-size
         @binding {string} icon-color
       -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="componentColor">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="rightIcon"
           internal
           :name="rightIcon"
           :size="iconSize"
-          :color="componentColor"
+          :color="iconColor"
           v-bind="rightIconAttrs"
         />
       </slot>
@@ -80,7 +80,7 @@
 </template>
 
 <script setup>
-import { computed, ref } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 import { getRandomId, getDefault } from "../service.ui";
 import ULoader from "../ui.loader";
@@ -284,7 +284,11 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-const componentColor = computed(() => {
+const iconColor = computed(() => {
   return props.variant === "primary" ? "white" : props.color;
 });
+
+watchEffect(() => {
+  props.loading && buttonRef.value.blur();
+});
 </script>

package/ui.dropdown-badge/composables/attrs.composable.js

@@ -28,12 +28,15 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "badge") {
+    if (key === "dropdownBadge") {
       const badgeAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...badgeAttrs.value,
-        class: cx([badgeAttrs.value.class, isShownOptions.value && config.value.badgeActive]),
+        class: cx([
+          badgeAttrs.value.class,
+          isShownOptions.value && config.value.dropdownBadgeActive,
+        ]),
       }));
     }
   }

package/ui.dropdown-badge/configs/default.config.js

@@ -1,20 +1,11 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  dropdownBadge: {
-    component: "{UBadge}",
-    base: "cursor-pointer",
-    variants: {
-      size: {
-        sm: "pr-1",
-        md: "pr-1.5",
-        lg: "pr-1.5",
-      },
-    },
-  },
+  dropdownBadge: "{UBadge}",
   dropdownBadgeActive: "group",
   dropdownIcon: "{UIcon} transition duration-300 group-[]:rotate-180",
   dropdownList: {
-    base: "{UDropdownList} w-fit",
+    component: "{UDropdownList}",
+    base: "w-fit",
     variants: {
       listYPosition: {
         top: "bottom-6 mb-6",
@@ -29,12 +20,12 @@ export default /*tw*/ {
   defaults: {
     color: "brand",
     size: "md",
-    weight: "medium",
     variant: "primary",
     labelKey: "label",
     valueKey: "id",
     listYPosition: "bottom",
     listXPosition: "left",
+    round: false,
     noIcon: false,
     /* icons */
     dropdownIcon: "keyboard_arrow_down",

package/ui.dropdown-badge/index.vue

@@ -5,11 +5,13 @@
       :label="label"
       :size="size"
       :color="color"
-      :weight="weight"
       :variant="variant"
       v-bind="dropdownBadgeAttrs"
-      :data-test="`${dataTest}-badge`"
+      tabindex="0"
+      :data-test="dataTest"
       @click="onClickBadge"
+      @keydown.enter="onClickBadge"
+      @keydown.space.prevent="onClickBadge"
     >
       <template #left>
         <!--
@@ -28,7 +30,7 @@
         <slot :label="label" :opened="isShownOptions" />
       </template>
 
-      <template #right>
+      <template #right="{ iconColor, iconSize }">
         <!--
           @slot Use it to add something after the label.
           @binding {boolean} isOpened
@@ -37,11 +39,11 @@
           <UIcon
             v-if="!noIcon"
             internal
-            :color="color"
+            :color="iconColor"
             :size="iconSize"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-caret`"
+            :data-test="`${dataTest}-dropdown`"
           />
         </slot>
       </template>
@@ -62,7 +64,7 @@
 </template>
 
 <script setup>
-import { computed, provide, ref, watch } from "vue";
+import { provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UBadge from "../ui.text-badge";
@@ -88,6 +90,30 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownBadge).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownBadge).valueKey,
+  },
+
   /**
    * Badge variant.
    * @values primary, secondary, thirdary
@@ -116,12 +142,11 @@ const props = defineProps({
   },
 
   /**
-   * Badge font weight.
-   * @values regular, medium, bold
+   * Set badge corners rounded.
    */
-  weight: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).weight,
+  round: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UDropdownBadge).round,
   },
 
   /**
@@ -132,30 +157,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownBadge).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownBadge).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom
@@ -220,16 +221,6 @@ const { config, wrapperAttrs, dropdownBadgeAttrs, dropdownListAttrs, dropdownIco
   },
 );
 
-const iconSize = computed(() => {
-  const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
-  };
-
-  return sizes[props.size];
-});
-
 watch(selectedItem, () => {
   emit("select", selectedItem.value);
 });

package/ui.dropdown-button/index.vue

@@ -11,7 +11,7 @@
       :disabled="disabled"
       :filled="filled || isShownOptions"
       v-bind="dropdownButtonAttrs"
-      :data-test="`${dataTest}-button`"
+      :data-test="dataTest"
       @click="onClickButton"
     >
       <template #left>
@@ -44,7 +44,7 @@
             :color="iconColor"
             :name="config.defaults.dropdownIcon"
             v-bind="dropdownIconAttrs"
-            :data-test="`${dataTest}-caret`"
+            :data-test="`${dataTest}-dropdown`"
           />
         </slot>
       </template>
@@ -85,19 +85,35 @@ defineOptions({ name: "UDropdownButton", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Selected value.
+   * Button label.
    */
-  modelValue: {
-    type: [String, Number],
+  label: {
+    type: String,
     default: "",
   },
 
   /**
-   * Button label.
+   * Options list.
    */
-  label: {
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
     type: String,
-    default: "",
+    default: getDefault(defaultConfig, UDropdownButton).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownButton).valueKey,
   },
 
   /**
@@ -167,30 +183,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownButton).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom

package/ui.dropdown-link/composables/attrs.composable.js

@@ -28,12 +28,12 @@ export default function useAttrs(props, { isShownOptions }) {
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
 
-    if (key === "link") {
+    if (key === "dropdownLink") {
       const linkAttrs = attrs[`${key}Attrs`];
 
       attrs[`${key}Attrs`] = computed(() => ({
         ...linkAttrs.value,
-        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.linkActive]),
+        class: cx([linkAttrs.value.class, isShownOptions.value && config.value.dropdownLinkActive]),
       }));
     }
   }

package/ui.dropdown-link/configs/default.config.js

@@ -1,6 +1,5 @@
 export default /*tw*/ {
   wrapper: "relative inline-block",
-  trigger: "flex items-center relative space-x-0.5",
   dropdownLink: "{ULink}",
   dropdownLinkActive: "group",
   dropdownIcon: "{UIcon} block transition duration-300 group-[]:rotate-180",

package/ui.dropdown-link/index.vue

@@ -1,57 +1,57 @@
 <template>
   <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
-    <div v-bind="triggerAttrs">
-      <ULink
-        :id="id"
-        :size="size"
-        :label="label"
-        :color="color"
-        :dashed="dashed"
-        :no-ring="noRing"
-        :disabled="disabled"
-        :underlined="underlined"
-        :data-test="`${dataTest}-link`"
-        v-bind="dropdownLinkAttrs"
-        @click="onClickLink"
-      >
-        <template #left>
-          <!--
+    <ULink
+      :id="id"
+      :size="size"
+      :label="label"
+      :color="color"
+      :dashed="dashed"
+      :no-ring="noRing"
+      :disabled="disabled"
+      :underlined="underlined"
+      v-bind="dropdownLinkAttrs"
+      :data-test="dataTest"
+      @click="onClickLink"
+      @keydown.enter="onClickLink"
+      @keydown.space.prevent="onClickLink"
+    >
+      <template #left>
+        <!--
           @slot Use it to add something before the label.
           @binding {boolean} isOpened
         -->
-          <slot name="left" :opened="isShownOptions" />
-        </template>
+        <slot name="left" :opened="isShownOptions" />
+      </template>
 
-        <template #default>
-          <!--
+      <template #default>
+        <!--
             @slot Use it to add something instead of the default label.
             @binding {string} label
             @binding {boolean} isOpened
           -->
-          <slot :label="label" />
-        </template>
+        <slot :label="label" />
+      </template>
 
-        <template #right>
-          <!--
+      <template #right>
+        <!--
             @slot Use it to add something after the label.
             @binding {boolean} isOpened
           -->
-          <slot name="right" :opened="isShownOptions">
-            <UIcon
-              v-if="!noIcon"
-              internal
-              interactive
-              :color="color"
-              :size="iconSize"
-              :name="config.defaults.dropdownIcon"
-              :data-test="`${dataTest}-caret`"
-              v-bind="dropdownIconAttrs"
-              @click="onClickLink"
-            />
-          </slot>
-        </template>
-      </ULink>
-    </div>
+        <slot name="right" :opened="isShownOptions">
+          <UIcon
+            v-if="!noIcon"
+            internal
+            interactive
+            :color="color"
+            :size="iconSize"
+            :name="config.defaults.dropdownIcon"
+            v-bind="dropdownIconAttrs"
+            :data-test="`${dataTest}-dropdown`"
+            @click="onClickLink"
+          />
+        </slot>
+      </template>
+    </ULink>
 
     <UDropdownList
       v-if="isShownOptions"
@@ -81,7 +81,6 @@ import vClickOutside from "../directive.clickOutside";
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
 import useAttrs from "./composables/attrs.composable";
-import { UDropdownButton } from "../ui.dropdown-button/constants/index.js";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UDropdownLink", inheritAttrs: false });
@@ -95,6 +94,30 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Options list.
+   */
+  options: {
+    type: Array,
+    default: () => [],
+  },
+
+  /**
+   * Label key in the item object of options.
+   */
+  labelKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownLink).labelKey,
+  },
+
+  /**
+   * Value key in the item object of options.
+   */
+  valueKey: {
+    type: String,
+    default: getDefault(defaultConfig, UDropdownLink).valueKey,
+  },
+
   /**
    * Link color.
    * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
@@ -153,30 +176,6 @@ const props = defineProps({
     default: getDefault(defaultConfig, UDropdownLink).noIcon,
   },
 
-  /**
-   * Options list.
-   */
-  options: {
-    type: Array,
-    default: () => [],
-  },
-
-  /**
-   * Label key in the item object of options.
-   */
-  labelKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).labelKey,
-  },
-
-  /**
-   * Value key in the item object of options.
-   */
-  valueKey: {
-    type: String,
-    default: getDefault(defaultConfig, UDropdownButton).valueKey,
-  },
-
   /**
    * The position of dropdown list on the y-axis.
    * @values top, bottom
@@ -234,21 +233,16 @@ provide("hideDropdownOptions", hideOptions);
 const isShownOptions = ref(false);
 const selectedItem = ref("");
 
-const {
-  config,
-  wrapperAttrs,
-  dropdownLinkAttrs,
-  dropdownListAttrs,
-  dropdownIconAttrs,
-  triggerAttrs,
-} = useAttrs(props, { isShownOptions });
+const { config, wrapperAttrs, dropdownLinkAttrs, dropdownListAttrs, dropdownIconAttrs } = useAttrs(
+  props,
+  { isShownOptions },
+);
 
 const iconSize = computed(() => {
   const sizes = {
-    xs: "2xs",
-    sm: "xs",
-    md: "sm",
-    lg: "md",
+    sm: "2xs",
+    md: "xs",
+    lg: "sm",
   };
 
   return sizes[props.size];

package/ui.text-alert/configs/default.config.js

@@ -1,11 +1,11 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 flex flex-col rounded-dynamic",
+    base: "border p-4 flex flex-col rounded-dynamic",
     variants: {
       variant: {
-        primary: "bg-{color}-600 text-white",
-        secondary: "bg-transparent border border-{color}-600 text-{color}-600",
-        thirdary: "bg-{color}-50 text-{color}-600",
+        primary: "bg-{color}-600 text-white border-transparent",
+        secondary: "border-{color}-600 text-{color}-600",
+        thirdary: "bg-{color}-50 text-{color}-600 border-transparent",
       },
       size: {
         xs: "text-2xs",
@@ -15,7 +15,7 @@ export default /*tw*/ {
       },
     },
     compoundVariants: [
-      { variant: "thirdary", bordered: true, class: "border border-{color}-100" },
+      { variant: "thirdary", bordered: true, class: "border-{color}-100" },
       { color: "white", variant: "primary", class: "text-gray-900 bg-white" },
       { color: "white", variant: "secondary", class: "text-gray-900 border-gray-200" },
       { color: "white", variant: "thirdary", class: "text-gray-900 bg-white" },

package/ui.text-alert/index.vue

@@ -136,7 +136,7 @@ const props = defineProps({
   },
 
   /**
-   * Show Alert with a border.
+   * Add border to the `thirdary` variant.
    */
   bordered: {
     type: Boolean,

package/ui.text-badge/composables/attrs.composable.js

@@ -1,10 +1,12 @@
+import { computed, useSlots } from "vue";
+
 import useUI from "../../composable.ui";
 import { cva } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { computed } from "vue";
 
 export default function useAttrs(props) {
+  const slots = useSlots();
   const { config, getAttrs, hasSlotContent, getColor, setColor, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
@@ -21,6 +23,9 @@ export default function useAttrs(props) {
         value = cva(value)({
           ...props,
           color: getColor(props.color),
+          tabindex: Boolean(~props.tabindex),
+          leftIcon: Boolean(props.leftIcon) || hasSlotContent(slots["left"]),
+          rightIcon: Boolean(props.rightIcon) || hasSlotContent(slots["right"]),
         });
       }
 

package/ui.text-badge/configs/default.config.js

@@ -1,30 +1,42 @@
 export default /*tw*/ {
-  wrapper: {
-    base: "border rounded-full inline-block py-1 !leading-none",
+  badge: {
+    base: "border rounded-dynamic inline-block py-1 !leading-none outline-none",
     variants: {
       variant: {
-        primary: "bg-{color}-50 text-{color}-600 border-transparent",
+        primary: "bg-{color}-600 text-white border-transparent",
         secondary: "border-{color}-600 text-{color}-600",
-        thirdary: "text-{color}-600 border-transparent",
+        thirdary: "bg-{color}-50 text-{color}-600 border-transparent",
       },
       size: {
         sm: "px-2 text-2xs",
         md: "px-2.5 text-xs",
         lg: "px-3 text-sm",
       },
-      weight: {
-        regular: "font-normal",
-        medium: "font-medium",
-        bold: "font-bold",
+      round: {
+        true: "rounded-full",
+      },
+      tabindex: {
+        true: "cursor-pointer 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",
       },
     },
     compoundVariants: [
-      { color: "grayscale", variant: "primary", class: "bg-gray-100 text-gray-900" },
+      { variant: "thirdary", bordered: true, class: "border-{color}-100" },
+      { color: "grayscale", variant: "primary", class: "bg-gray-900" },
       { color: "grayscale", variant: "secondary", class: "border-gray-900 text-gray-900" },
-      { color: "grayscale", variant: "thirdary", class: "text-gray-900" },
+      { color: "grayscale", variant: "thirdary", class: "bg-gray-100 text-gray-900" },
       { color: "white", variant: "primary", class: "bg-white text-gray-900" },
       { color: "white", variant: "secondary", class: "border-white text-white" },
-      { color: "white", variant: "thirdary", class: "text-white" },
+      { color: "white", variant: "thirdary", class: "text-white bg-white/15" },
+      { leftIcon: true, size: "sm", class: "pl-1.5" },
+      { leftIcon: true, size: "md", class: "pl-1.5" },
+      { leftIcon: true, size: "lg", class: "pl-2" },
+      { rightIcon: true, size: "sm", class: "pr-1.5" },
+      { rightIcon: true, size: "md", class: "pr-1.5" },
+      { rightIcon: true, size: "lg", class: "pr-2" },
     ],
   },
   body: {
@@ -32,22 +44,28 @@ export default /*tw*/ {
     variants: {
       size: {
         sm: "gap-0.5",
-        md: "gap-x-0.5",
-        lg: "gap-x-0.5",
+        md: "gap-0.5",
+        lg: "gap-0.5",
       },
     },
   },
   leftIcon: "{UIcon}",
+  centerIcon: "{UIcon}",
   rightIcon: "{UIcon}",
   defaults: {
     color: "brand",
     size: "md",
-    weight: "medium",
     variant: "primary",
+    tabindex: "-1",
+    round: false,
+    bordered: false,
   },
   safelist: (colors) => [
     { pattern: `bg-(${colors})-50` },
+    { pattern: `bg-(${colors})-600` },
+    { pattern: `border-(${colors})-100` },
     { pattern: `border-(${colors})-600` },
     { pattern: `text-(${colors})-600` },
+    { pattern: `ring-(${colors})-700`, variants: ["focus"] },
   ],
 };

package/ui.text-badge/index.stories.js

@@ -90,9 +90,6 @@ Variants.args = { enum: "variant" };
 export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
-export const Weight = EnumVariantTemplate.bind({});
-Weight.args = { enum: "weight" };
-
 export const Colors = ColorsTemplate.bind({});
 Colors.args = {};
 

package/ui.text-badge/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     ref="wrapperRef"
-    tabindex="1"
     :data-test="dataTest"
-    v-bind="wrapperAttrs"
+    v-bind="badgeAttrs"
+    :tabindex="tabindex"
     @blur="onBlur"
     @focus="onFocus"
     @keydown="onKeydown"
@@ -16,20 +16,42 @@
           @binding {string} icon-size
           @binding {string} icon-color
         -->
-      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="color">
+      <slot name="left" :icon-name="leftIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="leftIcon"
+          internal
           :name="leftIcon"
           :size="iconSize"
-          :color="color"
-          internal
+          :color="iconColor"
           v-bind="leftIconAttrs"
         />
       </slot>
 
-      <!-- @slot Use it to add something instead of text. -->
-      <slot>
-        {{ label }}
+      <!--
+        @slot Use it to add something instead of the label.
+        @binding {string} label
+        @binding {string} icon-name
+        @binding {string} icon-size
+        @binding {string} icon-color
+      -->
+      <slot
+        name="default"
+        :label="label"
+        :icon-name="icon"
+        :icon-size="iconSize"
+        :icon-color="iconColor"
+      >
+        <UIcon
+          v-if="icon"
+          internal
+          :name="icon"
+          :size="iconSize"
+          :color="iconColor"
+          v-bind="centerIconAttrs"
+        />
+        <template v-else>
+          {{ label }}
+        </template>
       </slot>
 
       <!--
@@ -38,12 +60,12 @@
           @binding {string} icon-size
           @binding {string} icon-color
         -->
-      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="color">
+      <slot name="right" :icon-name="rightIcon" :icon-size="iconSize" :icon-color="iconColor">
         <UIcon
           v-if="rightIcon"
           :name="rightIcon"
           :size="iconSize"
-          :color="color"
+          :color="iconColor"
           internal
           v-bind="rightIconAttrs"
         />
@@ -71,7 +93,6 @@ const props = defineProps({
    */
   label: {
     type: String,
-    required: true,
     default: "",
   },
 
@@ -84,6 +105,14 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).variant,
   },
 
+  /**
+   * Add border to the `thirdary` variant.
+   */
+  bordered: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UBadge).bordered,
+  },
+
   /**
    * Badge size.
    * @values sm, md, lg
@@ -93,6 +122,23 @@ const props = defineProps({
     default: getDefault(defaultConfig, UBadge).size,
   },
 
+  /**
+   * Badge color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   */
+  color: {
+    type: String,
+    default: getDefault(defaultConfig, UBadge).color,
+  },
+
+  /**
+   * Icon name (appears instead of label).
+   */
+  icon: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Left side icon name.
    */
@@ -110,21 +156,19 @@ const props = defineProps({
   },
 
   /**
-   * Badge font weight.
-   * @values regular, medium, bold
+   * Controls the keyboard “Tab” focus order of elements.
    */
-  weight: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).weight,
+  tabindex: {
+    type: [String, Number],
+    default: getDefault(defaultConfig, UBadge).tabindex,
   },
 
   /**
-   * Badge color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white
+   * Set badge corners rounded.
    */
-  color: {
-    type: String,
-    default: getDefault(defaultConfig, UBadge).color,
+  round: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UBadge).round,
   },
 
   /**
@@ -166,7 +210,7 @@ const emit = defineEmits([
   "click",
 ]);
 
-const { bodyAttrs, wrapperAttrs, leftIconAttrs, rightIconAttrs } = useAttrs(props);
+const { badgeAttrs, bodyAttrs, leftIconAttrs, centerIconAttrs, rightIconAttrs } = useAttrs(props);
 
 const wrapperRef = ref(null);
 
@@ -174,14 +218,18 @@ defineExpose({ wrapperRef });
 
 const iconSize = computed(() => {
   const sizes = {
-    sm: "2xs",
-    md: "xs",
-    lg: "sm",
+    sm: "3xs",
+    md: "2xs",
+    lg: "xs",
   };
 
   return sizes[props.size];
 });
 
+const iconColor = computed(() => {
+  return props.variant === "primary" ? "white" : props.color;
+});
+
 function onFocus() {
   emit("focus");
 }

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.317",
+  "version": "0.0.319",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -479,7 +479,7 @@
             },
             {
               "name": "bordered",
-              "description": "Show Alert with a border.",
+              "description": "Add border to the `thirdary` variant.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -718,7 +718,6 @@
           "attributes": [
             {
               "name": "label",
-              "required": true,
               "description": "Badge label.",
               "value": {
                 "kind": "expression",
@@ -735,6 +734,15 @@
               },
               "default": "primary"
             },
+            {
+              "name": "bordered",
+              "description": "Add border to the `thirdary` variant.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
             {
               "name": "size",
               "description": "Badge size.",
@@ -744,6 +752,24 @@
               },
               "default": "md"
             },
+            {
+              "name": "color",
+              "description": "Badge color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+              },
+              "default": "brand"
+            },
+            {
+              "name": "icon",
+              "description": "Icon name (appears instead of label).",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "leftIcon",
               "description": "Left side icon name.",
@@ -763,22 +789,22 @@
               "default": "\"\""
             },
             {
-              "name": "weight",
-              "description": "Badge font weight.",
+              "name": "tabindex",
+              "description": "Controls the keyboard “Tab” focus order of elements.",
               "value": {
                 "kind": "expression",
-                "type": "'regular' | 'medium' | 'bold'"
+                "type": "string|number"
               },
-              "default": "medium"
+              "default": "-1"
             },
             {
-              "name": "color",
-              "description": "Badge color.",
+              "name": "round",
+              "description": "Set badge corners rounded.",
               "value": {
                 "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'white'"
+                "type": "boolean"
               },
-              "default": "brand"
+              "default": "false"
             },
             {
               "name": "config",
@@ -839,7 +865,26 @@
             },
             {
               "name": "default",
-              "description": "Use it to add something instead of text."
+              "scoped": true,
+              "description": "Use it to add something instead of the label.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "label"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-size"
+                },
+                {
+                  "type": "string",
+                  "name": "icon-color"
+                }
+              ]
             },
             {
               "name": "right",
@@ -2868,6 +2913,33 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
+            },
             {
               "name": "variant",
               "description": "Badge variant.",
@@ -2896,13 +2968,13 @@
               "default": "md"
             },
             {
-              "name": "weight",
-              "description": "Badge font weight.",
+              "name": "round",
+              "description": "Set badge corners rounded.",
               "value": {
                 "kind": "expression",
-                "type": "'regular' | 'medium' | 'bold'"
+                "type": "boolean"
               },
-              "default": "medium"
+              "default": "false"
             },
             {
               "name": "noIcon",
@@ -2913,33 +2985,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",
@@ -3049,22 +3094,40 @@
           "description": "",
           "attributes": [
             {
-              "name": "modelValue",
-              "description": "Selected value.",
+              "name": "label",
+              "description": "Button label.",
               "value": {
                 "kind": "expression",
-                "type": "string|number"
+                "type": "string"
               },
               "default": "\"\""
             },
             {
-              "name": "label",
-              "description": "Button label.",
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
-              "default": "\"\""
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
             },
             {
               "name": "variant",
@@ -3138,33 +3201,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",
@@ -3279,6 +3315,33 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "options",
+              "description": "Options list.",
+              "value": {
+                "kind": "expression",
+                "type": "array"
+              },
+              "default": "[]"
+            },
+            {
+              "name": "labelKey",
+              "description": "Label key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "label"
+            },
+            {
+              "name": "valueKey",
+              "description": "Value key in the item object of options.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "id"
+            },
             {
               "name": "color",
               "description": "Link color.",
@@ -3341,33 +3404,6 @@
               },
               "default": "false"
             },
-            {
-              "name": "options",
-              "description": "Options list.",
-              "value": {
-                "kind": "expression",
-                "type": "array"
-              },
-              "default": "[]"
-            },
-            {
-              "name": "labelKey",
-              "description": "Label key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "label"
-            },
-            {
-              "name": "valueKey",
-              "description": "Value key in the item object of options.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "id"
-            },
             {
               "name": "listYPosition",
               "description": "The position of dropdown list on the y-axis.",