vueless 1.2.8-beta.9 → 1.2.9

package/constants.d.ts

@@ -131,6 +131,7 @@ export namespace SYSTEM_CONFIG_KEY {
     let unstyled: string;
     let transition: string;
     let colors: string;
+    let props: string;
 }
 export const ICON_NON_PROPS_DEFAULTS: string[];
 export namespace DIRECTIVES {

package/constants.js

@@ -225,6 +225,7 @@ export const SYSTEM_CONFIG_KEY = {
   unstyled: "unstyled",
   transition: "transition",
   colors: "colors",
+  props: "props",
   ...CVA_CONFIG_KEY,
 };
 

package/index.d.ts

@@ -17,7 +17,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -140,6 +140,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/index.ts

@@ -23,7 +23,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -146,6 +146,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8-beta.9",
+  "version": "1.2.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -18,10 +18,10 @@
     "release:icons": "npx node .scripts/icons",
     "release:types": "rm -f ./node_modules/.tmp/tsconfig.app.tsbuildinfo && npx tsc --project tsconfig.build.json",
     "release:prepare": "npm run release:icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales && npm run release:types",
-    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
-    "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
-    "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
+    "release:beta": "release-it --increment=prerelease --preRelease=beta --ci --no-git.tag --no-github.release",
+    "release:patch": "release-it patch --ci",
+    "release:minor": "release-it minor --ci",
+    "release:major": "release-it major --ci",
     "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
@@ -47,6 +47,7 @@
   "devDependencies": {
     "@material-symbols/svg-500": "^0.35.0",
     "@release-it/bumper": "^7.0.5",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@tsconfig/node20": "^20.1.6",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.1.0",
@@ -106,6 +107,9 @@
       "types": "./modules.d.ts"
     }
   },
+  "overrides": {
+    "conventional-changelog-conventionalcommits": "8.0.0"
+  },
   "resolutions": {
     "jackspeak": "2.3.6"
   },

package/plugin-vite.js

@@ -129,9 +129,14 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs({ vuelessSrcDir, basePath });
       }
 
-      await buildWebTypes({ vuelessSrcDir, basePath });
+      /* set custom prop types */
       await setCustomPropTypes({ vuelessSrcDir, basePath });
 
+      /* build web-types.json with delay for right custom props behavior */
+      setTimeout(async () => {
+        await buildWebTypes({ vuelessSrcDir, basePath });
+      }, 2000);
+
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
 

package/types.ts

@@ -198,7 +198,7 @@ export type MergedThemeConfig = Omit<ThemeConfig, "text | outline | rounding"> &
 
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
-export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
+export type UnknownType = string | number | boolean | UnknownObject | undefined | null | unknown;
 
 export type ComponentNames = keyof Components & string; // keys union
 
@@ -325,7 +325,19 @@ export interface NestedComponent {
 
 export type ComponentDefaults = {
   color?: string;
-  [key: string]: unknown | UnknownObject;
+  [key: string]: UnknownType;
+};
+
+export type ComponentCustomProps = {
+  [key: string]: ComponentCustomProp;
+};
+
+export type ComponentCustomProp = {
+  required?: boolean;
+  ignore?: boolean;
+  values?: string[];
+  default?: UnknownType;
+  description?: string;
 };
 
 export interface CVA {

package/ui.button/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
-      border border-transparent transition cursor-pointer
+      border border-solid transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,
@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
       variant: {
         solid: `
-          text-inverted bg-{color}
+          bg-{color} border-transparent text-inverted
           hover:bg-{color}-lifted
           active:bg-{color}-accented
           disabled:!bg-{color}/(--vl-disabled-opacity)
@@ -35,13 +35,13 @@ export default /*tw*/ {
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/10
         `,
         soft: `
-          text-{color} bg-{color}/5
+          text-{color} bg-{color}/5 border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5
         `,
         ghost: `
-          text-{color} bg-transparent
+          text-{color} bg-transparent border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-transparent

package/ui.button/tests/UButton.test.ts

@@ -12,11 +12,11 @@ describe("UButton.vue", () => {
     it("Variant – applies the correct variant class", async () => {
       const color = "primary";
       const variants = {
-        solid: "text-inverted bg-primary",
+        solid: "bg-primary border-transparent text-inverted",
         outlined: "text-primary border-primary",
         subtle: "text-primary bg-primary/5 border-primary/15",
-        soft: "text-primary bg-primary/5",
-        ghost: "text-primary bg-transparent",
+        soft: "text-primary bg-primary/5 border-transparent",
+        ghost: "text-primary bg-transparent border-transparent",
       };
 
       Object.entries(variants).forEach(([variant, classes]) => {

package/ui.button-toggle/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
       },
       split: {
         true: "flex-wrap",
-        false: "flex-nowrap gap-px p-1 w-fit border rounded-medium border-default",
+        false: "flex-nowrap gap-px p-1 w-fit border border-solid rounded-medium border-default",
       },
       disabled: {
         true: "bg-lifted cursor-not-allowed",
@@ -26,7 +26,7 @@ export default /*tw*/ {
     },
   },
   divider: {
-    base: "my-1 border-r border-muted last:hidden",
+    base: "my-1 border-r border-solid border-muted last:hidden",
     variants: {
       split: {
         true: "hidden",

package/ui.container-card/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 md:p-6 border rounded-large w-full text-medium",
+    base: "p-4 md:p-6 border border-solid rounded-large w-full text-medium",
     variants: {
       variant: {
         solid: "bg-default border-transparent",

package/ui.data-table/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-medium",
   stickyHeader: {
-    base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
+    base: "fixed top-0 flex items-center z-30 overflow-hidden border border-solid rounded-none",
     variants: {
       stickedHeader: {
         false: "absolute",
@@ -29,12 +29,12 @@ export default /*tw*/ {
   stickyHeaderLoader: "{ULoaderProgress} absolute top-auto bottom-0",
   headerActionsCheckbox: "{UCheckbox}",
   headerActionsCounter: "{>headerCounterBase} -ml-1.5",
-  tableWrapper: "border border-muted rounded-medium bg-default overflow-x-auto",
+  tableWrapper: "border border-solid border-muted rounded-medium bg-default overflow-x-auto",
   table: "min-w-full border-none text-medium w-full table-auto",
   header:
     "border-b border-muted [&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",
   headerRow: "",
-  beforeHeaderRow: "border border-muted",
+  beforeHeaderRow: "border border-solid border-muted",
   beforeHeaderCell: "{>headerCellBase}",
   headerCellBase: {
     base: "p-4 text-medium font-normal text-lifted text-left text-nowrap",
@@ -100,7 +100,7 @@ export default /*tw*/ {
     },
   },
   stickyFooterRow: `
-    fixed bottom-0 -ml-px border border-b border-muted bg-default
+    fixed bottom-0 -ml-px border-b border-solid border-muted bg-default
     collapse group-[*]/footer-fixed:[visibility:inherit]
   `,
   i18n: {

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -66,6 +66,7 @@ const emit = defineEmits([
 type UListboxRef = InstanceType<typeof UListbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -157,14 +158,29 @@ function onClickBadge() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 defineExpose({
@@ -197,7 +213,7 @@ const { getDataTest, config, wrapperAttrs, dropdownBadgeAttrs, listboxAttrs, tog
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"
   >

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
+import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -63,11 +63,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 type UListboxRef = InstanceType<typeof UListbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<UListboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -148,9 +147,23 @@ function getFullOptionLabels(value: Option | Option[]) {
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 function onClickButton() {
@@ -165,6 +178,7 @@ function onClickButton() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
@@ -199,7 +213,7 @@ const { getDataTest, config, dropdownButtonAttrs, listboxAttrs, toggleIconAttrs,
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"
   >

package/ui.dropdown-link/UDropdownLink.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick, computed, provide, ref, useId, useTemplateRef } from "vue";
+import { nextTick, computed, ref, useId, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import useUI from "../composables/useUI";
@@ -63,11 +63,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-provide("hideDropdownOptions", hideOptions);
-
 type ULisboxRef = InstanceType<typeof ULisbox>;
 
 const isShownOptions = ref(false);
+const isClickingOption = ref(false);
 const listboxRef = useTemplateRef<ULisboxRef>("dropdown-list");
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
@@ -161,14 +160,29 @@ function onClickLink() {
 
 function hideOptions() {
   isShownOptions.value = false;
+  dropdownSearch.value = "";
 
   emit("close");
 }
 
 function onClickOption(option: Option) {
+  isClickingOption.value = true;
+
   emit("clickOption", option);
 
   if (!props.multiple && props.closeOnSelect) hideOptions();
+
+  nextTick(() => {
+    setTimeout(() => {
+      isClickingOption.value = false;
+    }, 10);
+  });
+}
+
+function handleClickOutside() {
+  if (isClickingOption.value) return;
+
+  hideOptions();
 }
 
 defineExpose({
@@ -201,7 +215,7 @@ const { config, getDataTest, wrapperAttrs, dropdownLinkAttrs, listboxAttrs, togg
 <template>
   <div
     ref="wrapper"
-    v-click-outside="hideOptions"
+    v-click-outside="handleClickOutside"
     tabindex="1"
     v-bind="wrapperAttrs"
     :data-test="getDataTest('wrapper')"

package/ui.form-calendar/config.ts

@@ -1,5 +1,7 @@
 export default /*tw*/ {
-  wrapper: "p-3 w-[19rem] border border-default rounded-medium bg-default shadow-sm overflow-hidden focus:outline-hidden",
+  wrapper: `
+    p-3 w-[19rem] bg-default shadow-sm overflow-hidden focus:outline-hidden
+    border border-solid border-default rounded-medium`,
   navigation: "mb-2 pb-2 border-b border-muted flex items-center justify-between",
   viewSwitchButton: {
     base: "{UButton}",
@@ -54,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-default
+    flex items-center rounded-medium border border-solid border-default
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   checkbox: {
     base: `
       bg-default cursor-pointer transition
-      border border-default rounded-small outline-transparent
+      border border-solid border-default rounded-small outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

package/ui.form-date-picker-range/config.ts

@@ -31,7 +31,7 @@ export default /*tw*/ {
   menu: {
     base: `
       absolute z-40 mb-3 w-80 overflow-hidden rounded-medium
-      border border-default bg-default p-2 shadow-sm focus:outline-hidden
+      border border-solid border-default bg-default p-2 shadow-sm focus:outline-hidden
     `,
     variants: {
       openDirectionX: {

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border rounded-medium border-default outline-transparent
+      border border-solid rounded-medium border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-input-counter/UInputCounter.vue

@@ -170,7 +170,7 @@ const {
   subtractIconAttrs,
   addButtonAttrs,
   addIconAttrs,
-} = useUI<Config>(defaultConfig, undefined, "counterInput");
+} = useUI<Config>(defaultConfig);
 </script>
 
 <template>

package/ui.form-input-counter/config.ts

@@ -10,7 +10,7 @@ export default /*tw*/ {
     },
   },
   counterInput: {
-    base: "{UInputNumber} w-fit",
+    base: "{UInputNumber} w-inherit",
     numberInput: {
       base: "{UInput}",
       input: "text-center",

package/ui.form-listbox/UListbox.vue

@@ -103,11 +103,7 @@ const selectedValue = computed({
 
     return props.modelValue;
   },
-  set: (value) => {
-    if (searchModel.value) searchModel.value = "";
-
-    emit("update:modelValue", value);
-  },
+  set: (value) => emit("update:modelValue", value),
 });
 
 const addOptionKeyCombination = computed(() => {

package/ui.form-listbox/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       my-2 p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
-      rounded-medium border border-default bg-default
+      rounded-medium border border-solid border-default bg-default
       overflow-auto [-webkit-overflow-scrolling:touch]
       focus:outline-hidden
     `,

package/ui.form-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-default rounded-full outline-transparent
+      border border-solid border-default rounded-full outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15

package/ui.form-select/USelect.vue

@@ -266,6 +266,7 @@ function deactivate() {
   wrapperRef.value?.blur();
 
   isOpen.value = false;
+  dropdownSearch.value = "";
 
   nextTick(() => emit("close", localValue.value, elementId));
 }

package/ui.form-select/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-default bg-default outline-transparent
+      rounded-medium border border-solid border-default bg-default outline-transparent
       hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.form-textarea/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex px-3 py-2 gap-3 w-full bg-default transition
-      rounded-medium border border-default outline-transparent
+      rounded-medium border border-solid border-default outline-transparent
       hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
       focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
     `,

package/ui.text-alert/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 border-box flex flex-col border rounded-medium w-full",
+    base: "p-4 border-box flex flex-col border border-solid rounded-medium w-full",
     variants: {
       variant: {
         solid: "text-inverted bg-{color} border-transparent",

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border rounded-medium !leading-none outline-hidden
+      border border-solid rounded-medium !leading-none outline-hidden
     `,
     variants: {
       variant: {

package/utils/helper.ts

@@ -196,6 +196,10 @@ export function toNumber(value: unknown): number | undefined {
     return value;
   }
 
+  if (typeof value === "boolean") {
+    return Number(value);
+  }
+
   if (typeof value === "string" && value.trim() !== "") {
     const number = Number(value);
 

package/utils/node/dynamicProps.d.ts

@@ -1,2 +1,5 @@
-export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function removeCustomPropTypes(srcDir: any): Promise<void>;
+export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function removeCustomPropTypes(srcDir: string): Promise<void>;

package/utils/node/dynamicProps.js

@@ -1,6 +1,6 @@
+import path from "node:path";
 import fs from "node:fs/promises";
 import { existsSync } from "node:fs";
-import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
 import { getVuelessConfig } from "./vuelessConfig.js";
@@ -8,86 +8,97 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 import {
   CACHE_DIR,
   COMPONENTS,
-  GRAYSCALE_COLOR,
+  TEXT_COLOR,
   INHERIT_COLOR,
   PRIMARY_COLOR,
-  TEXT_COLOR,
+  GRAYSCALE_COLOR,
+  VUELESS_CACHE_DIR,
 } from "../../constants.js";
+import { buildWebTypes } from "./webTypes.js";
 
+/* local constants */
+const SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 const OPTIONAL_MARK = "?";
 const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
 
+/* regular expressions */
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props(?:<[^>]+>)?\s*{([^}]*)}/s;
 const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
 const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
-const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
-
+/**
+ * Updates custom PropTypes for components based on provided configuration and colors.
+ *
+ * @param {Object} options Configuration options.
+ * @param {string} options.vuelessSrcDir The source directory for Vueless components.
+ * @param {string} options.basePath The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} Resolves when custom PropTypes for all components are updated successfully.
+ */
 export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
 
+  const hasCustomColors = vuelessConfig.colors?.length;
+  const hasCustomColorProp = !!Object.values(vuelessConfig.components || {}).find(
+    (component) => component.props?.color,
+  );
+
+  let componentsWithColorProp = [];
+
+  /* Build web-types.json to get list of components with color prop */
+  if (hasCustomColors || hasCustomColorProp) {
+    await buildWebTypes({ vuelessSrcDir, basePath });
+
+    componentsWithColorProp = await getComponentsWithColors();
+  }
+
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const hasDefaultColorProp = componentsWithColorProp.some((item) => item.name === componentName);
+
+    /* Skip components without props and without global colors in config */
+    if (!componentGlobalConfig?.props && !(hasCustomColors && hasDefaultColorProp)) {
+      continue;
+    }
 
-    if (vuelessConfig.colors && vuelessConfig.colors.length && componentGlobalConfig) {
-      const customProps = componentGlobalConfig.props || [];
-      const colorPropsIndex = customProps.findIndex((prop) => prop.name === "color");
-      const isCustomColorProp = colorPropsIndex !== -1;
+    /* Add colors to the default or custom color prop */
+    if (componentGlobalConfig?.props?.color || (hasCustomColors && hasDefaultColorProp)) {
+      // eslint-disable-next-line prettier/prettier
+      const defaultColors = componentsWithColorProp.find((component) => component.name === componentName)?.colors || [];
+      const safelistedColors = defaultColors.filter((color) => SAFE_COLORS.includes(color));
 
-      const modifiedCustomColorProp = isCustomColorProp
-        ? customProps.with(colorPropsIndex, {
-            ...customProps[colorPropsIndex],
-            name: "color",
+      componentGlobalConfig = {
+        ...(componentGlobalConfig || {}),
+        props: {
+          ...(componentGlobalConfig?.props || {}),
+          color: {
+            ...(componentGlobalConfig?.props?.color || {}),
             values: [
               ...new Set([
-                ...(customProps[colorPropsIndex]?.values || []),
-                ...vuelessConfig.colors,
-                ...DEFAULT_SAFE_COLORS,
+                ...(componentGlobalConfig?.props?.color?.values || []),
+                ...(vuelessConfig.colors || []),
+                ...safelistedColors,
               ]),
             ],
-          })
-        : undefined;
-
-      const customPropsWithColor = [
-        ...customProps,
-        {
-          name: "color",
-          values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-          required: false,
-        },
-      ];
-
-      componentGlobalConfig = {
-        ...componentGlobalConfig,
-        props: isCustomColorProp ? modifiedCustomColorProp : customPropsWithColor,
-      };
-    }
-
-    if (vuelessConfig.colors && vuelessConfig.colors.length && !componentGlobalConfig) {
-      componentGlobalConfig = {
-        props: [
-          {
-            name: "color",
-            values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-            required: false,
           },
-        ],
+        },
       };
     }
 
-    const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
+    const cachePath = path.join(vuelessSrcDir, componentDir);
 
-    if (isCustomProps) {
-      const cachePath = path.join(vuelessSrcDir, componentDir);
-
-      await cacheComponentTypes(cachePath);
-      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
-    }
+    await cacheComponentTypes(cachePath);
+    await modifyComponentTypes(cachePath, componentGlobalConfig.props);
   }
 }
 
+/**
+ * Removes custom prop types definitions for components.
+ *
+ * @param {string} srcDir - The source directory containing the component directories.
+ * @return {Promise<void>} - A promise that resolves when custom prop types have been removed.
+ */
 export async function removeCustomPropTypes(srcDir) {
   for await (const componentDir of Object.values(COMPONENTS)) {
     await restoreComponentTypes(path.join(srcDir, componentDir));
@@ -95,6 +106,39 @@ export async function removeCustomPropTypes(srcDir) {
   }
 }
 
+/**
+ * Retrieves a list of components that have a "color" prop from the `web-types.json` file.
+ *
+ * @return {Promise<Array<string>>} A promise that resolves with an array of component names.
+ */
+async function getComponentsWithColors() {
+  const webTypesPath = path.join(VUELESS_CACHE_DIR, "web-types.json");
+
+  if (!existsSync(webTypesPath)) {
+    return [];
+  }
+
+  const webTypesContent = await fs.readFile(webTypesPath, "utf8");
+  const webTypes = JSON.parse(webTypesContent);
+
+  if (!webTypes.contributions?.html?.tags) {
+    return [];
+  }
+
+  return webTypes.contributions.html.tags
+    .filter((component) => component?.attributes.some((attribute) => attribute.name === "color"))
+    .map((component) => ({
+      name: component.name,
+      colors: component.attributes.find((attribute) => attribute.name === "color")?.enum,
+    }));
+}
+
+/**
+ * Caches the component types by copying a source file to a specified cache directory.
+ *
+ * @param {string} filePath - The directory path where the source file is located and the cache directory will be created.
+ * @return {Promise<void>} A promise that resolves when the file has been successfully copied, or immediately if no action is taken.
+ */
 async function cacheComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(filePath, "types.ts");
@@ -111,6 +155,13 @@ async function cacheComponentTypes(filePath) {
   await fs.cp(sourceFile, destFile);
 }
 
+/**
+ * Clears the cached component types by removing the specified cache file
+ * and deleting the corresponding folder if it is empty.
+ *
+ * @param {string} filePath - The base file path where the cache directory resides.
+ * @return {Promise<void>} A promise that resolves when the cache has been cleared.
+ */
 async function clearComponentTypesCache(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -122,6 +173,13 @@ async function clearComponentTypesCache(filePath) {
   await removeFolderIfEmpty(cacheDir);
 }
 
+/**
+ * Restores the component type definitions by copying a cached file to the destination.
+ *
+ * @param {string} filePath - The directory path where the component types should be restored.
+ * This path serves as the base for locating the cached file and the destination file.
+ * @return {Promise<void>} A promise that resolves when the component types have been successfully restored.
+ */
 async function restoreComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -132,6 +190,14 @@ async function restoreComponentTypes(filePath) {
   }
 }
 
+/**
+ * Extracts and processes the values from multiple lines based on the given indices.
+ *
+ * @param {Array<string>} lines - The array of lines to process.
+ * @param {number} propIndex - The index from which to start slicing the lines.
+ * @param {number} propEndIndex - The index until which to slice the lines (inclusive).
+ * @return {Array<string>} An array of strings with processed values, trimmed of unnecessary symbols.
+ */
 function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
   return lines
     .slice(propIndex)
@@ -139,6 +205,15 @@ function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
     .map((item) => item.replace(UNION_SYMBOLS_REG_EXP, "").trim());
 }
 
+/**
+ * Extracts and returns inline union values from the specified lines of text,
+ * based on provided property indices.
+ *
+ * @param {string[]} lines - The array of string lines to extract union values from.
+ * @param {number} propIndex - The starting index in the lines array from where extraction begins.
+ * @param {number} propEndIndex - The ending index in the lines array up to which extraction is performed.
+ * @return {string[]} An array of extracted union values, or an empty array if no matches are found.
+ */
 function getInlineUnionValues(lines, propIndex, propEndIndex) {
   const types = lines
     .slice(propIndex)
@@ -167,10 +242,8 @@ async function modifyComponentTypes(filePath, props) {
 
     const lines = propsInterface.split("\n");
 
-    for (const prop of props) {
-      const { name, type, values = [], description, required, ignore } = prop;
-
-      if (!name) return;
+    for (const name in props) {
+      const { type = "string", values = [], description, required, ignore } = props[name];
 
       /* Find line with prop. */
       const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);

package/utils/node/helper.d.ts

@@ -1,15 +1,18 @@
-export function getDirFiles(dirPath: any, ext: any, { recursive, exclude }?: {
+export function getDirFiles(dirPath: string, ext: string, { recursive, exclude }?: {
     recursive?: boolean | undefined;
-    exclude?: never[] | undefined;
+    exclude?: string[] | undefined;
 }): Promise<string[]>;
 export function getNuxtDirs(): string[];
 export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
-export function getMergedComponentConfig(name: any): Promise<any>;
-export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
-export function removeFolderIfEmpty(dirPath: any): Promise<void>;
+export function getMergedComponentConfig(name: string): Promise<Object>;
+export function getDefaultComponentConfig(name: string, configDir: string): Promise<Object>;
+export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
+export function removeFolderIfEmpty(dirPath: string): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -20,6 +20,16 @@ import {
   CONFIG_INDEX_FILE_NAME,
 } from "../../constants.js";
 
+/**
+ * Retrieves a list of file names in a specified directory that match the given extension and filtering criteria.
+ *
+ * @param {string} dirPath - The path of the directory to search for files.
+ * @param {string} ext - The extension of the files to include in the result.
+ * @param {Object} [options] - Optional settings to customize the file search.
+ * @param {boolean} [options.recursive=true] - Whether to search directories recursively.
+ * @param {string[]} [options.exclude=[]] - A list of file or directory names to exclude from the result.
+ * @return {Promise<string[]>} - A promise that resolves to an array of file paths that match the specified criteria.
+ */
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
@@ -65,6 +75,10 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
     .filter((filePath) => !statSync(filePath).isDirectory());
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Nuxt.js project.
+ * @return {string[]}.
+ */
 export function getNuxtDirs() {
   return [
     path.join(cwd(), "app"),
@@ -82,14 +96,28 @@ export function getNuxtDirs() {
   ];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vue.js project.
+ * @return {string[]}.
+ */
 export function getVueDirs() {
   return [path.join(cwd(), "src")];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vueless project.
+ * @return {string[]}.
+ */
 export function getVuelessConfigDirs() {
   return [path.join(cwd(), VUELESS_CONFIG_DIR)];
 }
 
+/**
+ * Retrieves the merged config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @return {Promise<Object>} A promise that resolves to the merged configuration object for the specified component.
+ */
 export async function getMergedComponentConfig(name) {
   const configOutPath = path.join(cwd(), `${VUELESS_MERGED_CONFIGS_CACHED_DIR}/${name}.json`);
 
@@ -100,6 +128,13 @@ export async function getMergedComponentConfig(name) {
   }
 }
 
+/**
+ * Retrieves the default config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @param {string} configDir - The directory path where the component's configuration file is located.
+ * @return {Promise<Object>} A promise that resolves to the default configuration object for the specified component.
+ */
 export async function getDefaultComponentConfig(name, configDir) {
   const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
   let config = {};
@@ -117,6 +152,14 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
+/**
+ * Caches merged configs for all components.
+ *
+ * @param {Object} options - Configuration options.
+ * @param {string} options.vuelessSrcDir - The source directory for Vueless components.
+ * @param {string} options.basePath - The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} A promise that resolves when all merged configs have been cached.
+ */
 export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
@@ -146,6 +189,13 @@ export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   }
 }
 
+/**
+ * Builds a TypeScript file into a JavaScript file using esbuild.
+ *
+ * @param {string} entryPath - The path to the TypeScript file to be built.
+ * @param {string} configOutFile - The output path for the resulting JavaScript file.
+ * @return {Promise<void>} A promise that resolves when the build is complete.
+ */
 export async function buildTSFile(entryPath, configOutFile) {
   await esbuild.build({
     entryPoints: [entryPath],
@@ -158,13 +208,20 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
+/**
+ * Removes a folder if it is empty.
+ * @param {string} dirPath - The path to the directory to be removed.
+ * @return {Promise<void>} A promise that resolves when the directory has been removed.
+ */
 export async function removeFolderIfEmpty(dirPath) {
-  if (existsSync(dirPath)) {
+  try {
     const files = await readdir(dirPath);
 
     if (!files.length) {
-      await rmdir(dirPath);
+      await rmdir(dirPath, { recursive: false, force: true });
     }
+  } catch {
+    // suppress errors
   }
 }
 

package/utils/node/tailwindSafelist.js

@@ -233,7 +233,14 @@ function getClassesToSafelist(config) {
   const safelistItems = [];
 
   for (const key in config) {
-    if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+    const nonClassKeys = [
+      SYSTEM_CONFIG_KEY.defaults,
+      SYSTEM_CONFIG_KEY.props,
+      SYSTEM_CONFIG_KEY.i18n,
+      SYSTEM_CONFIG_KEY.colors,
+    ];
+
+    if (nonClassKeys.some((item) => key === item)) continue;
 
     if (Object.hasOwn(config, key)) {
       const classes = config[key];
@@ -267,7 +274,7 @@ function getClassesToSafelist(config) {
  */
 function getSafelistClasses(config, colors) {
   const classes = new Set();
-  const defaultColor = config.defaults?.color || "";
+  const defaultColor = config.defaults?.color || config.props?.color?.default || "";
 
   getClassesToSafelist(config).map((safelistClass) => {
     [...colors, defaultColor].forEach((color) => {

package/utils/theme.ts

@@ -51,18 +51,6 @@ import type {
 } from "../types";
 import { ColorMode } from "../types";
 
-declare interface RootCSSVariableOptions {
-  primary: PrimaryColors | string;
-  neutral: NeutralColors | string;
-  text: ThemeConfigText;
-  rounding: ThemeConfigRounding;
-  outline: ThemeConfigOutline;
-  letterSpacing: number;
-  disabledOpacity: number;
-  lightTheme: Partial<VuelessCssVariables>;
-  darkTheme: Partial<VuelessCssVariables>;
-}
-
 declare interface SetColorMode {
   colorMode: `${ColorMode}`;
   isColorModeAuto: boolean;
@@ -334,10 +322,10 @@ export function setTheme(config: ThemeConfig = {}) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function normalizeThemeConfig(theme: any): MergedThemeConfig {
   return {
-    colorMode: theme.colorMode,
-    isColorModeAuto: theme.isColorModeAuto,
-    primary: theme.primary,
-    neutral: theme.neutral,
+    colorMode: String(theme.colorMode ?? "") as ColorMode,
+    isColorModeAuto: !!toNumber(theme.isColorModeAuto),
+    primary: String(theme.primary ?? ""),
+    neutral: String(theme.neutral ?? ""),
     text: {
       xs: toNumber(theme.text?.xs),
       sm: toNumber(theme.text?.sm),
@@ -696,20 +684,20 @@ function getDarkTheme(darkTheme?: Partial<VuelessCssVariables>) {
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.
  */
-function setRootCSSVariables(vars: RootCSSVariableOptions) {
+export function setRootCSSVariables(vars: MergedThemeConfig) {
   let darkVariables: Partial<VuelessCssVariables> = {};
 
   let variables: Partial<VuelessCssVariables> = {
-    "--vl-text-xs": `${vars.text.xs / PX_IN_REM}rem`,
-    "--vl-text-sm": `${vars.text.sm / PX_IN_REM}rem`,
-    "--vl-text-md": `${vars.text.md / PX_IN_REM}rem`,
-    "--vl-text-lg": `${vars.text.lg / PX_IN_REM}rem`,
+    "--vl-text-xs": `${Number(vars.text?.xs ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-sm": `${Number(vars.text?.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-md": `${Number(vars.text?.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-lg": `${Number(vars.text?.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-outline-sm": `${vars.outline.sm}px`,
     "--vl-outline-md": `${vars.outline.md}px`,
     "--vl-outline-lg": `${vars.outline.lg}px`,
-    "--vl-rounding-sm": `${vars.rounding.sm / PX_IN_REM}rem`,
-    "--vl-rounding-md": `${vars.rounding.md / PX_IN_REM}rem`,
-    "--vl-rounding-lg": `${vars.rounding.lg / PX_IN_REM}rem`,
+    "--vl-rounding-sm": `${Number(vars.rounding.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-md": `${Number(vars.rounding.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(vars.rounding.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
@@ -724,7 +712,7 @@ function setRootCSSVariables(vars: RootCSSVariableOptions) {
       `var(--color-${vars.neutral}-${shade})`;
   }
 
-  const [light, dark] = generateCSSColorVariables(vars.lightTheme, vars.darkTheme);
+  const [light, dark] = generateCSSColorVariables(vars.lightTheme ?? {}, vars.darkTheme ?? {});
 
   variables = { ...variables, ...light };
   darkVariables = { ...darkVariables, ...dark };
@@ -775,7 +763,7 @@ function setCSSVariables(
     .join(" ");
 
   const rootVariables = `
-    :root {${variablesString}}
+    :host, :root {${variablesString}}
     .${DARK_MODE_CLASS} {${darkVariablesString}}
   `;
 

package/utils/ui.ts

@@ -7,7 +7,13 @@ import { createGetMergedConfig } from "./node/mergeConfigs";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants";
 import { ICON_NON_PROPS_DEFAULTS, TAILWIND_MERGE_EXTENSION } from "../constants";
 
-import type { Config, ComponentDefaults, UnknownObject, ComponentNames } from "../types";
+import type {
+  Config,
+  UnknownObject,
+  ComponentNames,
+  ComponentDefaults,
+  ComponentCustomProps,
+} from "../types";
 
 interface MergedConfigOptions {
   defaultConfig: unknown;
@@ -87,10 +93,14 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
  * Return default values for component props, icons, etc..
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
-  const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
+  const componentDefaults = (defaultConfig as Config & UnknownObject).defaults || {};
   const globalDefaults = vuelessConfig.components?.[name]?.defaults || {};
 
-  const defaults = merge({}, componentDefaults, globalDefaults) as Props & ComponentDefaults;
+  const customProps = vuelessConfig.components?.[name]?.props as ComponentCustomProps;
+  const customPropsDefaults = getCustomPropsDefaults(customProps) || {};
+
+  const defaults = merge({}, componentDefaults, globalDefaults, customPropsDefaults) as Props &
+    ComponentDefaults;
 
   /* Remove non a props defaults. */
   for (const key in defaults) {
@@ -116,3 +126,22 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
 export function setColor(classes: string, color: string) {
   return classes?.replace(/{color}/g, color);
 }
+
+/**
+ * Retrieves the default values from the provided component custom properties.
+ */
+export function getCustomPropsDefaults(props: ComponentCustomProps) {
+  const customPropsDefaults: ComponentDefaults = {};
+
+  if (!props) {
+    return customPropsDefaults;
+  }
+
+  for (const [key, value] of Object.entries(props)) {
+    if (value.default) {
+      customPropsDefaults[key] = value.default;
+    }
+  }
+
+  return customPropsDefaults;
+}