From 8d1e0031a6efd025988c59b5cb9292aff3194b6b Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 28 Jan 2025 14:03:21 +0800
Subject: [PATCH 1/5] Improved styles.

---
 src/ui.button-toggle-item/UToggleItem.vue | 31 ++++++++++++-----------
 src/ui.button-toggle-item/config.ts       | 22 +++++++++++++++-
 src/ui.button-toggle/config.ts            | 12 +++++++--
 3 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/src/ui.button-toggle-item/UToggleItem.vue b/src/ui.button-toggle-item/UToggleItem.vue
index 4d7e93f0..ded5ed69 100644
--- a/src/ui.button-toggle-item/UToggleItem.vue
+++ b/src/ui.button-toggle-item/UToggleItem.vue
@@ -17,27 +17,13 @@ type ButtonSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  modelValue: "",
-  label: "",
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when new value is set.
-   * @property {string} modelValue
-   */
-  "update:modelValue",
-]);
-
 const getToggleName = inject<() => string>("getToggleName", () => "toggle");
 const getToggleType = inject<() => string>("getToggleType", () => TYPE_RADIO);
 const getToggleSize = inject<() => ButtonSize>("getToggleSize", () => "md" as ButtonSize);
 const getToggleRound = inject<() => boolean>("getToggleRound", () => false);
 const getToggleBlock = inject<() => boolean>("getToggleBlock", () => false);
 const getToggleSquare = inject<() => boolean>("getToggleSquare", () => false);
-const getToggleSplit = inject<() => boolean>("getToggleSplit", () => true);
+const getToggleSplit = inject<() => boolean>("getToggleSplit", () => false);
 
 const getToggleDisabled = inject<() => boolean>(
   "getToggleDisabled",
@@ -49,6 +35,20 @@ const { selectedValue, updateSelectedValue } = inject<ToggleContextType>("toggle
   updateSelectedValue: () => {},
 });
 
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: "",
+  label: "",
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when new value is set.
+   * @property {string} modelValue
+   */
+  "update:modelValue",
+]);
+
 const elementId = props.id || useId();
 
 const selectedItem = ref<string | boolean>("");
@@ -86,6 +86,7 @@ function onClickSetValue() {
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
 const mutatedProps = computed(() => ({
+  split: getToggleSplit(),
   /* component state, not a props */
   selected: isSelected.value,
 }));
diff --git a/src/ui.button-toggle-item/config.ts b/src/ui.button-toggle-item/config.ts
index b9f38f09..aed65803 100644
--- a/src/ui.button-toggle-item/config.ts
+++ b/src/ui.button-toggle-item/config.ts
@@ -5,9 +5,29 @@ export default /*tw*/ {
       variant: "thirdary",
     },
   },
-  toggleButtonInactive: "{>toggleButton}",
+  toggleButtonInactive: {
+    base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-gray-300 hover:border-gray-400
+          hover:bg-transparent dark:hover:bg-transparent
+          active:bg-transparent dark:active:bg-transparent
+        `,
+      },
+    },
+  },
   toggleButtonActive: {
     base: "{>toggleButton}",
+    variants: {
+      split: {
+        false: "border-0",
+        true: `
+          border border-brand-600
+        `,
+      },
+    },
     defaults: {
       color: "brand",
       filled: true,
diff --git a/src/ui.button-toggle/config.ts b/src/ui.button-toggle/config.ts
index e2da0cc9..9d9e605c 100644
--- a/src/ui.button-toggle/config.ts
+++ b/src/ui.button-toggle/config.ts
@@ -18,11 +18,19 @@ export default /*tw*/ {
     },
   },
   items: {
-    base: "flex gap-1",
+    base: "flex",
     variants: {
+      size: {
+        "2xs": "gap-1.5",
+        xs: "gap-1.5",
+        sm: "gap-2",
+        md: "gap-2",
+        lg: "gap-2.5",
+        xl: "gap-2.5",
+      },
       split: {
         true: "flex-wrap",
-        false: "flex-nowrap p-1 w-fit border rounded-dynamic border-gray-300",
+        false: "flex-nowrap gap-1 p-1 w-fit border rounded-dynamic border-gray-300",
       },
       disabled: {
         true: "pointer-events-none",

From 8a70d66d4137f59612c8dcab99beefd139db96fc Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 28 Jan 2025 06:06:05 +0000
Subject: [PATCH 2/5] Release v0.0.710 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a4b23fe9..6f40a6b9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "0.0.709",
+  "version": "0.0.710",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "0.0.709",
+      "version": "0.0.710",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/forms": "^0.5.9",
diff --git a/package.json b/package.json
index 366500a5..96e3272f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.709",
+  "version": "0.0.710",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

From e535a252f4c0949ffaea98ce6adf2230a0f40f00 Mon Sep 17 00:00:00 2001
From: Admin User <ilevel.ws@gmail.com>
Date: Tue, 28 Jan 2025 06:38:36 +0000
Subject: [PATCH 3/5] GITBOOK-68: No subject

---
 docs/global-customization/general.md  |  2 ++
 docs/global-customization/ring.md     | 16 +++++++++++++++-
 docs/global-customization/rounding.md | 22 +++++++++++-----------
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/docs/global-customization/general.md b/docs/global-customization/general.md
index 63e01096..a1408edc 100644
--- a/docs/global-customization/general.md
+++ b/docs/global-customization/general.md
@@ -23,7 +23,9 @@ Vueless uses Tailwind CSS under the hood, so you can use any of the [Tailwind CS
 You can set the ring width globally for all Vueless components.
 
 <pre class="language-js" data-title="vueless.config.{js,ts}"><code class="lang-js">export default {
+  ringSm: 2, /* px */
   ring: 4, /* px */
+  ringLg: 6, /* px */
 }<a data-footnote-ref href="#user-content-fn-2">;</a>
 </code></pre>
 
diff --git a/docs/global-customization/ring.md b/docs/global-customization/ring.md
index 0a99d4ff..7fbca7c0 100644
--- a/docs/global-customization/ring.md
+++ b/docs/global-customization/ring.md
@@ -3,7 +3,9 @@
 You can set the ring width, ring offset width and ring offset dark and light colors globally for all Vueless components.
 
 <pre class="language-js" data-title="vueless.config.{js,ts}"><code class="lang-js">export default {
+  ringSm: 2,
   ring: 4, /* default -> 2 (pixels) */
+  ringLg: 6,
   ringOffsetColorLight: "#ffffff", /* default -> white */
   ringOffsetColorDark: "#111827",  /* default -> gray-900 */
 }<a data-footnote-ref href="#user-content-fn-1">;</a>
@@ -11,8 +13,20 @@ You can set the ring width, ring offset width and ring offset dark and light col
 
 For `ring`, you can use any value in pixels; however, we highly recommend sticking to the predefined Tailwind CSS [ring width](https://tailwindcss.com/docs/ring-width) values for consistency.
 
+If you define only the `ring` value, `ringSm` and `ringLg` will be automatically calculated. The expected values are listed in the table below:
+
+| ringSm | ring | ringLg |
+| ------ | ---- | ------ |
+| 0      | 0    | 0      |
+| 0      | 1    | 2      |
+| 1      | 2    | 3      |
+| 2      | 3    | 4      |
+| 3      | 4    | 5      |
+| 4      | 5    | 6      |
+| 5      | 6    | 7      |
+
 ## Custom tailwind classes
 
-To implement global ring styling, Vueless provides custom Tailwind CSS classes: `ring-dynamic`,  and `ring-offset-color-dynamic`. Feel free to use these classes in your components whenever you need consistent ring styling throughout your project.
+To implement global ring styling, Vueless provides custom Tailwind CSS classes: `ring-dynamic`, `ring-dynamic-sm, ring-dynamic-lg` and `ring-offset-color-dynamic`. Feel free to use these classes in your components whenever you need consistent ring styling throughout your project.
 
 [^1]: 
diff --git a/docs/global-customization/rounding.md b/docs/global-customization/rounding.md
index 277c001e..10a9497d 100644
--- a/docs/global-customization/rounding.md
+++ b/docs/global-customization/rounding.md
@@ -13,17 +13,17 @@ You can set any border-radius value in pixels, but we highly recommend adhering
 
 If you define only the `rounding` value, `roundingSm` and `roundingLg` will be automatically calculated. The expected values are listed in the table below:
 
-| rounding (md) | roundingSm | roundingLg |
-| ------------- | ---------- | ---------- |
-| 0             | 0          | 2          |
-| 2             | 0          | 8          |
-| 4             | 2          | 10         |
-| 6             | 4          | 12         |
-| 8             | 4          | 14         |
-| 10            | 6          | 16         |
-| 12            | 8          | 18         |
-| 14            | 10         | 20         |
-| 16            | 12         | 22         |
+| roundingSm | rounding | roundingLg |
+| ---------- | -------- | ---------- |
+| 0          | 0        | 2          |
+| 0          | 2        | 8          |
+| 2          | 4        | 10         |
+| 4          | 6        | 12         |
+| 4          | 8        | 14         |
+| 6          | 10       | 16         |
+| 8          | 12       | 18         |
+| 10         | 14       | 20         |
+| 12         | 16       | 22         |
 
 {% hint style="info" %}
 In the config, values are specified in `pixels` for simplicity, but they are automatically converted into `rem` under the hood.

From 701777af3b76df4e4230f824a17faa8e9b9bf400 Mon Sep 17 00:00:00 2001
From: Johnny Grid <ilevel.ws@gmail.com>
Date: Tue, 28 Jan 2025 14:39:16 +0800
Subject: [PATCH 4/5] Added small and large ring settings.

---
 src/constants.js                 |  4 +++-
 src/preset-tailwind.js           | 17 +++++++++-----
 src/types.ts                     | 16 ++++++++++++--
 src/ui.form-input-file/config.ts |  2 +-
 src/ui.form-input/config.ts      |  2 +-
 src/ui.form-select/config.ts     |  2 +-
 src/ui.form-textarea/config.ts   |  2 +-
 src/utils/theme.ts               | 38 ++++++++++++++++++++++++++++----
 8 files changed, 67 insertions(+), 16 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 1525c37c..805a3e20 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -18,6 +18,8 @@ export const COLOR_MODE_KEY = "vl-color-mode";
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
 export const DEFAULT_GRAY_COLOR = COOL_COLOR;
 export const DEFAULT_RING = 2; /* pixels */
+export const RING_DECREMENT = 1; /* pixels */
+export const RING_INCREMENT = 1; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
@@ -171,7 +173,7 @@ export const TAILWIND_MERGE_EXTENSION = {
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "ring-w": [{ ring: ["dynamic", "dynamic-1"] }],
+      "ring-w": [{ ring: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
       "ring-offset-color": [{ "ring-offset": ["color-dynamic"] }],
       "font-size": [{ text: ["2xs"] }],
       rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
diff --git a/src/preset-tailwind.js b/src/preset-tailwind.js
index f59ca0a1..39aa33ab 100644
--- a/src/preset-tailwind.js
+++ b/src/preset-tailwind.js
@@ -17,6 +17,10 @@ import {
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   GRAYSCALE_COLOR,
+  ROUNDING_DECREMENT,
+  ROUNDING_INCREMENT,
+  RING_INCREMENT,
+  RING_DECREMENT,
 } from "./constants.js";
 
 const globalSettings = process.env.VUELESS_GLOBAL_SETTINGS || {};
@@ -92,8 +96,9 @@ export const vuelessTailwindConfig = {
         "dynamic-lg": "var(--vl-rounding-lg)",
       },
       ringWidth: {
+        "dynamic-sm": "var(--vl-ring-sm)",
         dynamic: "var(--vl-ring)",
-        "dynamic-1": "calc(var(--vl-ring) - 1px)",
+        "dynamic-lg": "var(--vl-ring-lg)",
       },
       ringOffsetColor: {
         dynamic: twColorWithOpacity("--vl-ring-offset-color"),
@@ -101,15 +106,17 @@ export const vuelessTailwindConfig = {
     },
     configViewer: {
       themeReplacements: {
-        /* eslint-disable prettier/prettier */
+        /* eslint-disable prettier/prettier, vue/max-len */
+        "var(--vl-ring-sm)": globalSettings.ringSm || Math.max(0, (globalSettings.ring || DEFAULT_RING) - RING_DECREMENT),
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
+        "var(--vl-ring-lg)": globalSettings.ringLg || Math.max(0, (globalSettings.ring || DEFAULT_RING) + RING_INCREMENT),
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_DECREMENT),
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": globalSettings.roundingLg || (globalSettings.ring || DEFAULT_ROUNDING) * 2,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || Math.max(0, (globalSettings.rounding || DEFAULT_ROUNDING) - ROUNDING_INCREMENT),
         ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
-        /* eslint-enable prettier/prettier */
+        /* eslint-enable prettier/prettier, vue/max-len */
       },
     },
   },
diff --git a/src/types.ts b/src/types.ts
index a8b76b3f..ad7ec035 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -81,7 +81,7 @@ export interface ThemeConfig {
   gray?: GrayColors;
 
   /**
-   * Default components "sm" size rounding (border-radius).
+   * Default components small size rounding (border-radius).
    */
   roundingSm?: number;
 
@@ -91,15 +91,25 @@ export interface ThemeConfig {
   rounding?: number;
 
   /**
-   * Default components "lg" size rounding (border-radius).
+   * Default components large size rounding (border-radius).
    */
   roundingLg?: number;
 
+  /**
+   * Default components small size ring width.
+   */
+  ringSm?: number;
+
   /**
    * Default components ring width.
    */
   ring?: number;
 
+  /**
+   * Default components large size ring width.
+   */
+  ringLg?: number;
+
   /**
    * Default components ring color for light theme.
    */
@@ -339,7 +349,9 @@ export interface TailwindColorShades {
 }
 
 export interface VuelessCssVariables {
+  "--vl-ring-sm": string;
   "--vl-ring": string;
+  "--vl-ring-lg": string;
   "--vl-ring-offset-color": string;
   "--vl-rounding-sm": string;
   "--vl-rounding": string;
diff --git a/src/ui.form-input-file/config.ts b/src/ui.form-input-file/config.ts
index 1f7ab7ca..f5aabb6a 100644
--- a/src/ui.form-input-file/config.ts
+++ b/src/ui.form-input-file/config.ts
@@ -5,7 +5,7 @@ export default /*tw*/ {
       p-3 size-auto w-full bg-white transition
       rounded-dynamic border border-solid border-gray-300
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
     `,
     variants: {
       error: {
diff --git a/src/ui.form-input/config.ts b/src/ui.form-input/config.ts
index 46660a11..9d7c7f27 100644
--- a/src/ui.form-input/config.ts
+++ b/src/ui.form-input/config.ts
@@ -4,7 +4,7 @@ export default /*tw*/ {
     base: `
       border rounded-dynamic border-gray-300 relative flex w-full bg-white transition
       hover:border-gray-400 hover:focus-within:border-brand-600 focus-within:border-brand-600
-      focus-within:ring-dynamic-1 focus-within:ring-brand-600
+      focus-within:ring-dynamic-sm focus-within:ring-brand-600
     `,
     variants: {
       error: {
diff --git a/src/ui.form-select/config.ts b/src/ui.form-select/config.ts
index 8852406c..82441b54 100644
--- a/src/ui.form-select/config.ts
+++ b/src/ui.form-select/config.ts
@@ -5,7 +5,7 @@ export default /*tw*/ {
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
       rounded-dynamic border border-gray-300 bg-white
       hover:border-gray-400 hover:transition hover:focus-within:border-brand-600
-      focus-within:ring-brand-600 focus-within:ring-dynamic-1
+      focus-within:ring-brand-600 focus-within:ring-dynamic-sm
       focus-within:border-brand-600 focus-within:outline-none
     `,
     variants: {
diff --git a/src/ui.form-textarea/config.ts b/src/ui.form-textarea/config.ts
index 04ad381f..78906e93 100644
--- a/src/ui.form-textarea/config.ts
+++ b/src/ui.form-textarea/config.ts
@@ -7,7 +7,7 @@ export default /*tw*/ {
     base: `
       flex bg-white transition w-full
       rounded-dynamic border border-gray-300 hover:border-gray-400 hover:focus-within:border-brand-600
-      focus-within:border-brand-600 focus-within:ring-dynamic-1
+      focus-within:border-brand-600 focus-within:ring-dynamic-sm
       focus-within:ring-brand-600 focus-within:outline-none
     `,
     variants: {
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
index 4466279f..c2b494cf 100644
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -10,12 +10,14 @@ import {
   DARK_MODE_SELECTOR,
   GRAYSCALE_COLOR,
   TAILWIND_COLORS,
-  DEFAULT_RING,
-  DEFAULT_ROUNDING,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
+  DEFAULT_RING,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_RING_OFFSET_COLOR_DARK,
+  RING_DECREMENT,
+  RING_INCREMENT,
+  DEFAULT_ROUNDING,
   ROUNDING_DECREMENT,
   ROUNDING_INCREMENT,
 } from "../constants.js";
@@ -40,7 +42,9 @@ declare interface RootCSSVariableOptions {
   colors: Colors;
   brand: string;
   gray: string;
+  ringSm: number;
   ring: number;
+  ringLg: number;
   ringOffsetColorDark: string;
   ringOffsetColorLight: string;
   roundingSm: number;
@@ -155,7 +159,11 @@ export function setTheme(config: Config = {}) {
   let gray: GrayColors =
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
-  const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
+  const { ringSm, ring, ringLg } = getRings(
+    config.ringSm ?? vuelessConfig.ringSm,
+    config.ring ?? vuelessConfig.ring,
+    config.ringLg ?? vuelessConfig.ringLg,
+  );
 
   const ringOffsetColorDark =
     config.ringOffsetColorDark ??
@@ -198,7 +206,9 @@ export function setTheme(config: Config = {}) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -207,6 +217,22 @@ export function setTheme(config: Config = {}) {
   });
 }
 
+function getRings(sm?: number, md?: number, lg?: number) {
+  const ring = Math.max(0, md ?? DEFAULT_RING);
+  const ringSm = Math.max(0, ring - RING_DECREMENT);
+  let ringLg = Math.max(0, ring + RING_INCREMENT);
+
+  if (ring === 0) {
+    ringLg = 0;
+  }
+
+  return {
+    ring,
+    ringSm: sm === undefined ? ringSm : Math.max(0, sm),
+    ringLg: lg === undefined ? ringLg : Math.max(0, lg),
+  };
+}
+
 function getRoundings(sm?: number, md?: number, lg?: number) {
   const rounding = Math.max(0, md ?? DEFAULT_ROUNDING);
   let roundingSm = Math.max(0, rounding - ROUNDING_DECREMENT);
@@ -240,7 +266,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     colors,
     brand,
     gray,
+    ringSm,
     ring,
+    ringLg,
     ringOffsetColorDark,
     ringOffsetColorLight,
     roundingSm,
@@ -257,7 +285,9 @@ function setRootCSSVariables(options: RootCSSVariableOptions) {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
-    "--vl-ring": `${Math.max(0, ring)}px`,
+    "--vl-ring-sm": `${ringSm}px`,
+    "--vl-ring": `${ring}px`,
+    "--vl-ring-lg": `${ringLg}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),

From 0c8bd22ca11672457300a830e71f44505a3e7790 Mon Sep 17 00:00:00 2001
From: itsJohnnyGrid <itsJohnnyGrid@users.noreply.github.com>
Date: Tue, 28 Jan 2025 06:43:12 +0000
Subject: [PATCH 5/5] Release v0.0.711 / [no ci]

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 6f40a6b9..1926687d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vueless",
-  "version": "0.0.710",
+  "version": "0.0.711",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vueless",
-      "version": "0.0.710",
+      "version": "0.0.711",
       "license": "MIT",
       "dependencies": {
         "@tailwindcss/forms": "^0.5.9",
diff --git a/package.json b/package.json
index 96e3272f..e37bf57c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.710",
+  "version": "0.0.711",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [