vueless 0.0.654 → 0.0.656

package/constants.js

@@ -21,9 +21,7 @@ export const DEFAULT_RING = 4; /* pixels */
 export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
-export const DEFAULT_ROUNDING_SM = 4; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
-export const DEFAULT_ROUNDING_LG = 16; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.654",
+  "version": "0.0.656",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/preset-tailwind.js

@@ -11,9 +11,7 @@ import {
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
-  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
-  DEFAULT_ROUNDING_LG,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -109,9 +107,9 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring)": globalSettings.ring || DEFAULT_RING,
         "var(--vl-ring-offset)": globalSettings.ringOffset || DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": globalSettings.ringOffsetColorLight || DEFAULT_RING_OFFSET_COLOR_LIGHT,
-        "var(--vl-rounding-sm)": globalSettings.roundingSm || DEFAULT_ROUNDING_SM,
+        "var(--vl-rounding-sm)": globalSettings.roundingSm || (globalSettings.ring || DEFAULT_ROUNDING) / 2,
         "var(--vl-rounding)": globalSettings.ring || DEFAULT_ROUNDING,
-        "var(--vl-rounding-lg)": globalSettings.roundingLg || DEFAULT_ROUNDING_LG,
+        "var(--vl-rounding-lg)": globalSettings.roundingLg || (globalSettings.ring || DEFAULT_ROUNDING) * 2,
         ...getReplacementColors(GRAY_COLOR, globalSettings.gray || DEFAULT_GRAY_COLOR),
         ...getReplacementColors(BRAND_COLOR, globalSettings.brand || DEFAULT_BRAND_COLOR),
         /* eslint-enable prettier/prettier */

package/ui.form-label/ULabel.vue

@@ -3,6 +3,7 @@ import { computed, ref } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import defaultConfig from "./config.ts";
 import { COMPONENT_NAME, PLACEMENT } from "./constants.ts";
@@ -87,8 +88,14 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
     </div>
 
     <!-- `v-bind` isn't assigned, because the div is system -->
-    <div v-if="label || error || description">
-      <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+    <div v-if="label || hasSlotContent($slots['label']) || error || description">
+      <label
+        v-if="label || hasSlotContent($slots['label'])"
+        ref="labelRef"
+        :for="props.for"
+        v-bind="labelAttrs"
+        :data-test="`${dataTest}-label`"
+      >
         <!--
           @slot Use this to add custom content instead of the label.
           @binding {string} label
@@ -113,7 +120,13 @@ const { wrapperAttrs, contentAttrs, labelAttrs, descriptionAttrs } = useUI<Confi
   </div>
 
   <div v-else v-bind="wrapperAttrs">
-    <label v-if="label" :for="props.for" v-bind="labelAttrs" :data-test="`${dataTest}-label`">
+    <label
+      v-if="label || hasSlotContent($slots['label'])"
+      v-bind="labelAttrs"
+      ref="labelRef"
+      :for="props.for"
+      :data-test="`${dataTest}-label`"
+    >
       <!--
         @slot Use this to add custom content instead of the label.
         @binding {string} label

package/ui.form-textarea/UTextarea.vue

@@ -61,7 +61,7 @@ const slots = useSlots();
 const elementId = props.id || useId();
 
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
-const labelComponentRef = ref<{ labelElement: HTMLElement | null } | null>(null);
+const labelComponentRef = ref<InstanceType<typeof ULabel> | null>(null);
 const leftSlotWrapperRef = ref<HTMLElement | null>(null);
 const wrapperRef = ref<HTMLElement | null>(null);
 

package/utils/theme.ts

@@ -9,9 +9,7 @@ import {
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
-  DEFAULT_ROUNDING_SM,
   DEFAULT_ROUNDING,
-  DEFAULT_ROUNDING_LG,
   DEFAULT_BRAND_COLOR,
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
@@ -102,9 +100,9 @@ export function setColorMode(colorMode: `${ColorMode}`) {
 export function setTheme(config: Config = {}) {
   setColorMode(vuelessConfig?.colorMode || config?.colorMode || ColorMode.Light);
 
-  const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? DEFAULT_ROUNDING_SM;
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? DEFAULT_ROUNDING_LG;
+  const roundingSm = config?.roundingSm ?? vuelessConfig?.roundingSm ?? rounding / 2;
+  const roundingLg = config?.roundingLg ?? vuelessConfig?.roundingLg ?? rounding * 2;
   const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =