origam 2.3.0 → 2.6.1

package/dist/src/composables/Clipboard/clipboard.composable.cjs

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClipboard = useClipboard;
+var _vue = require("vue");
+var _clipboard = require("../../consts/Clipboard/clipboard.const.cjs");
+async function writeToClipboard(text) {
+  if (typeof navigator === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    textarea.style.pointerEvents = "none";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+function useClipboard(options = {}) {
+  const feedbackDuration = options.feedbackDuration ?? _clipboard.CLIPBOARD_DEFAULT_FEEDBACK_DURATION_MS;
+  const copied = (0, _vue.ref)(false);
+  const error = (0, _vue.ref)(null);
+  const isSupported = (0, _vue.ref)(typeof navigator !== "undefined" && Boolean(navigator.clipboard?.writeText));
+  let resetTimer = null;
+  const clearTimer = () => {
+    if (resetTimer !== null) {
+      clearTimeout(resetTimer);
+      resetTimer = null;
+    }
+  };
+  const copy = async text => {
+    clearTimer();
+    error.value = null;
+    try {
+      const ok = await writeToClipboard(text);
+      if (!ok) {
+        error.value = new Error("Clipboard write failed: the platform did not accept the request.");
+        copied.value = false;
+        return false;
+      }
+      copied.value = true;
+      resetTimer = setTimeout(() => {
+        copied.value = false;
+        resetTimer = null;
+      }, feedbackDuration);
+      return true;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      copied.value = false;
+      return false;
+    }
+  };
+  if ((0, _vue.getCurrentScope)()) {
+    (0, _vue.onScopeDispose)(clearTimer);
+  }
+  return {
+    copy,
+    copied,
+    error,
+    isSupported
+  };
+}

package/dist/src/composables/Clipboard/clipboard.composable.d.ts

@@ -0,0 +1,21 @@
+import { type Ref } from 'vue';
+import type { IUseClipboardOptions } from '../../interfaces';
+/**
+ * Headless clipboard composable. Wraps the modern Clipboard API + a
+ * legacy execCommand fallback and exposes a self-resetting `copied`
+ * flag so consumers don't have to wire the timeout themselves.
+ *
+ * @example
+ * ```ts
+ * const { copy, copied, error, isSupported } = useClipboard({ feedbackDuration: 2000 })
+ *
+ * await copy('hello world')
+ * // copied.value === true for 2000ms, then auto-resets to false
+ * ```
+ */
+export declare function useClipboard(options?: IUseClipboardOptions): {
+    copy: (text: string) => Promise<boolean>;
+    copied: Ref<boolean, boolean>;
+    error: Ref<Error | null, Error | null>;
+    isSupported: Ref<boolean, boolean>;
+};

package/dist/src/composables/Clipboard/clipboard.composable.js

@@ -0,0 +1,79 @@
+import {
+  getCurrentScope,
+  onScopeDispose,
+  ref
+} from "vue";
+import { CLIPBOARD_DEFAULT_FEEDBACK_DURATION_MS as DEFAULT_FEEDBACK_DURATION_MS } from "../../consts/Clipboard/clipboard.const.js";
+async function writeToClipboard(text) {
+  if (typeof navigator === "undefined" || typeof document === "undefined") {
+    return false;
+  }
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+    }
+  }
+  try {
+    const textarea = document.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.opacity = "0";
+    textarea.style.pointerEvents = "none";
+    document.body.appendChild(textarea);
+    textarea.select();
+    const ok = document.execCommand("copy");
+    document.body.removeChild(textarea);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+export function useClipboard(options = {}) {
+  const feedbackDuration = options.feedbackDuration ?? DEFAULT_FEEDBACK_DURATION_MS;
+  const copied = ref(false);
+  const error = ref(null);
+  const isSupported = ref(
+    typeof navigator !== "undefined" && Boolean(navigator.clipboard?.writeText)
+  );
+  let resetTimer = null;
+  const clearTimer = () => {
+    if (resetTimer !== null) {
+      clearTimeout(resetTimer);
+      resetTimer = null;
+    }
+  };
+  const copy = async (text) => {
+    clearTimer();
+    error.value = null;
+    try {
+      const ok = await writeToClipboard(text);
+      if (!ok) {
+        error.value = new Error("Clipboard write failed: the platform did not accept the request.");
+        copied.value = false;
+        return false;
+      }
+      copied.value = true;
+      resetTimer = setTimeout(() => {
+        copied.value = false;
+        resetTimer = null;
+      }, feedbackDuration);
+      return true;
+    } catch (err) {
+      error.value = err instanceof Error ? err : new Error(String(err));
+      copied.value = false;
+      return false;
+    }
+  };
+  if (getCurrentScope()) {
+    onScopeDispose(clearTimer);
+  }
+  return {
+    copy,
+    copied,
+    error,
+    isSupported
+  };
+}

package/dist/src/composables/Code/code.composable.cjs

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.resetCodeHighlighterForTesting = resetCodeHighlighterForTesting;
 exports.useCode = useCode;
-var _consts = require("../../consts/index.cjs");
+var _code = require("../../consts/Code/code.const.cjs");
 var _enums = require("../../enums/index.cjs");
 let _highlighterPromise = null;
 let _highlighterReady = false;
 const _cache = /* @__PURE__ */new Map();
 let _unsupportedLangWarned = /* @__PURE__ */new Set();
-function makeCacheKey(code, lang, theme) {
-  return `${theme}::${lang}::${code}`;
+function makeCacheKey(code, lang) {
+  return `${lang}::${code}`;
 }
 function lruGet(key) {
   const hit = _cache.get(key);
@@ -22,7 +22,7 @@ function lruGet(key) {
   return hit;
 }
 function lruSet(key, value) {
-  if (_cache.size >= _consts.CODE_CACHE_MAX_ENTRIES) {
+  if (_cache.size >= _code.CODE_CACHE_MAX_ENTRIES) {
     const oldest = _cache.keys().next().value;
     if (oldest !== void 0) _cache.delete(oldest);
   }
@@ -33,8 +33,8 @@ async function loadHighlighter() {
   _highlighterPromise = (async () => {
     const shiki = await Promise.resolve().then(() => require("shiki"));
     const highlighter = await shiki.createHighlighter({
-      themes: [_consts.CODE_SHIKI_THEMES.light, _consts.CODE_SHIKI_THEMES.dark],
-      langs: [..._consts.SUPPORTED_LANGS]
+      themes: [_code.CODE_LIGHT_THEME, _code.CODE_DARK_THEME],
+      langs: [..._code.SUPPORTED_LANGS]
     });
     _highlighterReady = true;
     return highlighter;
@@ -42,32 +42,36 @@ async function loadHighlighter() {
   return _highlighterPromise;
 }
 function resolveLang(lang) {
-  if (_consts.SUPPORTED_LANGS.includes(lang)) return lang;
+  if (_code.SUPPORTED_LANGS.includes(lang)) return lang;
   if (!_unsupportedLangWarned.has(lang)) {
     _unsupportedLangWarned.add(lang);
-    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_consts.SUPPORTED_LANGS.join(", ")}.`);
+    console.warn(`[origam] OrigamCode: lang="${lang}" is not in the bundled grammar set. Falling back to "${_enums.CODE_LANG.PLAINTEXT}". Supported: ${_code.SUPPORTED_LANGS.join(", ")}.`);
   }
   return _enums.CODE_LANG.PLAINTEXT;
 }
 function useCode() {
-  async function highlight(code, lang, themeName) {
+  async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
-    const shikiTheme = themeName === "dark" ? _consts.CODE_SHIKI_THEMES.dark : _consts.CODE_SHIKI_THEMES.light;
-    const key = makeCacheKey(code, resolvedLang, shikiTheme);
+    const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
     const highlighter = await loadHighlighter();
+    const opts = {
+      lang: resolvedLang,
+      themes: {
+        light: _code.CODE_LIGHT_THEME,
+        dark: _code.CODE_DARK_THEME
+      },
+      defaultColor: false
+    };
     let html;
     try {
-      html = highlighter.codeToHtml(code, {
-        lang: resolvedLang,
-        theme: shikiTheme
-      });
+      html = highlighter.codeToHtml(code, opts);
     } catch (err) {
       console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
       html = highlighter.codeToHtml(code, {
-        lang: _enums.CODE_LANG.PLAINTEXT,
-        theme: shikiTheme
+        ...opts,
+        lang: _enums.CODE_LANG.PLAINTEXT
       });
     }
     lruSet(key, html);

package/dist/src/composables/Code/code.composable.js

@@ -1,11 +1,11 @@
-import { CODE_CACHE_MAX_ENTRIES, CODE_SHIKI_THEMES, SUPPORTED_LANGS } from "../../consts/index.js";
+import { CODE_CACHE_MAX_ENTRIES, CODE_DARK_THEME as DARK_THEME, CODE_LIGHT_THEME as LIGHT_THEME, SUPPORTED_LANGS } from "../../consts/Code/code.const.js";
 import { CODE_LANG } from "../../enums/index.js";
 let _highlighterPromise = null;
 let _highlighterReady = false;
 const _cache = /* @__PURE__ */ new Map();
 let _unsupportedLangWarned = /* @__PURE__ */ new Set();
-function makeCacheKey(code, lang, theme) {
-  return `${theme}::${lang}::${code}`;
+function makeCacheKey(code, lang) {
+  return `${lang}::${code}`;
 }
 function lruGet(key) {
   const hit = _cache.get(key);
@@ -24,9 +24,12 @@ function lruSet(key, value) {
 async function loadHighlighter() {
   if (_highlighterPromise) return _highlighterPromise;
   _highlighterPromise = (async () => {
-    const shiki = await import("shiki");
+    const shiki = await import(
+      /* @vite-ignore */
+      "shiki"
+    );
     const highlighter = await shiki.createHighlighter({
-      themes: [CODE_SHIKI_THEMES.light, CODE_SHIKI_THEMES.dark],
+      themes: [LIGHT_THEME, DARK_THEME],
       langs: [...SUPPORTED_LANGS]
     });
     _highlighterReady = true;
@@ -45,19 +48,23 @@ function resolveLang(lang) {
   return CODE_LANG.PLAINTEXT;
 }
 export function useCode() {
-  async function highlight(code, lang, themeName) {
+  async function highlight(code, lang) {
     const resolvedLang = resolveLang(lang);
-    const shikiTheme = themeName === "dark" ? CODE_SHIKI_THEMES.dark : CODE_SHIKI_THEMES.light;
-    const key = makeCacheKey(code, resolvedLang, shikiTheme);
+    const key = makeCacheKey(code, resolvedLang);
     const cached = lruGet(key);
     if (cached !== void 0) return cached;
     const highlighter = await loadHighlighter();
+    const opts = {
+      lang: resolvedLang,
+      themes: { light: LIGHT_THEME, dark: DARK_THEME },
+      defaultColor: false
+    };
     let html;
     try {
-      html = highlighter.codeToHtml(code, { lang: resolvedLang, theme: shikiTheme });
+      html = highlighter.codeToHtml(code, opts);
     } catch (err) {
       console.warn("[origam] OrigamCode: shiki failed to tokenise, falling back to plaintext.", err);
-      html = highlighter.codeToHtml(code, { lang: CODE_LANG.PLAINTEXT, theme: shikiTheme });
+      html = highlighter.codeToHtml(code, { ...opts, lang: CODE_LANG.PLAINTEXT });
     }
     lruSet(key, html);
     return html;

package/dist/src/composables/Commons/audio.composable.d.ts

@@ -1,19 +1,19 @@
-import type { IAudioProps } from '../../interfaces';
+import type { IUseAudioProps } from '../../interfaces';
 /*********************************************************
  * useAudio
  ********************************************************/
-export declare function useAudio(props: IAudioProps): {
-    audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
+export declare function useAudio(props: IUseAudioProps): {
+    audioData: import("vue").ShallowRef<Uint8Array<ArrayBuffer> | null, Uint8Array<ArrayBuffer> | null>;
     analyser: import("vue").Ref<{
         fftSize: number;
         readonly frequencyBinCount: number;
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;
@@ -233,10 +233,10 @@ export declare function useAudio(props: IAudioProps): {
         maxDecibels: number;
         minDecibels: number;
         smoothingTimeConstant: number;
-        getByteFrequencyData: (array: Uint8Array) => void;
-        getByteTimeDomainData: (array: Uint8Array) => void;
-        getFloatFrequencyData: (array: Float32Array) => void;
-        getFloatTimeDomainData: (array: Float32Array) => void;
+        getByteFrequencyData: (array: Uint8Array<ArrayBuffer>) => void;
+        getByteTimeDomainData: (array: Uint8Array<ArrayBuffer>) => void;
+        getFloatFrequencyData: (array: Float32Array<ArrayBuffer>) => void;
+        getFloatTimeDomainData: (array: Float32Array<ArrayBuffer>) => void;
         channelCount: number;
         channelCountMode: ChannelCountMode;
         channelInterpretation: ChannelInterpretation;

package/dist/src/composables/Commons/border.composable.cjs

@@ -43,6 +43,16 @@ function useBorder(props, name = (0, _utils.getCurrentInstanceName)()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${(0, _utils.convertToUnit)(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!(0, _vue.isRef)(props)) {
+      const {
+        borderColor,
+        borderStyle
+      } = props;
+      if (!(0, _utils.isEmpty)(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!(0, _utils.isEmpty)(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });

package/dist/src/composables/Commons/border.composable.js

@@ -41,6 +41,13 @@ export function useBorder(props, name = getCurrentInstanceName()) {
       }
     } else if (typeof border === "number") {
       styles.push(`border-width: ${convertToUnit(border)}`);
+      styles.push("border-style: solid");
+      styles.push("border-color: currentColor");
+    }
+    if (!isRef(props)) {
+      const { borderColor, borderStyle } = props;
+      if (!isEmpty(borderColor)) styles.push(`border-color: ${borderColor}`);
+      if (!isEmpty(borderStyle)) styles.push(`border-style: ${borderStyle}`);
     }
     return styles;
   });

package/dist/src/composables/Commons/color.composable.cjs

@@ -9,14 +9,15 @@ exports.useColor = useColor;
 exports.useColorEffect = useColorEffect;
 exports.useTextColor = useTextColor;
 var _vue = require("vue");
-var _colorUtil = require("../../utils/Commons/color.util.ts");
+var _color = require("../../utils/Commons/color.util.cjs");
+var _gradient = require("../../utils/Commons/gradient.util.cjs");
 function useColor(colors) {
   const colorClasses = (0, _vue.computed)(() => {
     const classes = [];
-    if (colors.value.background && (0, _colorUtil.isUtilityIntent)(colors.value.background)) {
+    if (colors.value.background && !(0, _gradient.isGradient)(colors.value.background) && (0, _color.isUtilityIntent)(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
+    if (colors.value.text && !(0, _gradient.isGradient)(colors.value.text) && (0, _color.isUtilityIntent)(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -25,34 +26,49 @@ function useColor(colors) {
     const styles = [];
     let bgIntentFg = null;
     let bgDecl = null;
+    let bgIsGradient = false;
     if (colors.value.background) {
-      if ((0, _colorUtil.isIntent)(colors.value.background)) {
-        const m = (0, _colorUtil.tokenStylesForIntent)(colors.value.background, "default");
+      if ((0, _gradient.isGradient)(colors.value.background)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.background);
+        if (grad) {
+          bgDecl = `background-image: ${grad}`;
+          bgIsGradient = true;
+        }
+      } else if ((0, _color.isIntent)(colors.value.background)) {
+        const m = (0, _color.tokenStylesForIntent)(colors.value.background, "default");
         bgDecl = `background-color: ${m["background-color"]}`;
         bgIntentFg = m.color;
       } else if (colors.value.background === "transparent") {
         bgDecl = `background-color: ${colors.value.background}`;
-      } else if ((0, _colorUtil.isCssColor)(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && (0, _color.isCssColor)(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if ((0, _colorUtil.isIntent)(colors.value.text)) {
-        if (bgIntentFg && (0, _colorUtil.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
+      if ((0, _gradient.isGradient)(colors.value.text)) {
+        const grad = (0, _gradient.resolveGradient)(colors.value.text);
+        if (grad) {
+          fgDecl = "color: transparent";
+          styles.push(`background-image: ${grad}`);
+          styles.push("background-clip: text");
+          styles.push("-webkit-background-clip: text");
+        }
+      } else if ((0, _color.isIntent)(colors.value.text)) {
+        if (bgIntentFg && (0, _color.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
-          fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(colors.value.text)}`;
+          fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(colors.value.text)}`;
         }
-      } else if ((0, _colorUtil.isCssColor)(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && (0, _color.isCssColor)(colors.value.text)) {
         fgDecl = `color: ${colors.value.text}`;
       }
-    } else if (bgIntentFg) {
+    } else if (bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (bgDecl && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _colorUtil.isParsableColor)(colors.value.background)) {
-      const parsed = (0, _colorUtil.parseColor)(colors.value.background);
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && (0, _color.isParsableColor)(colors.value.background)) {
+      const parsed = (0, _color.parseColor)(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     if (bgDecl) styles.push(bgDecl);
@@ -115,21 +131,21 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     const classes = [];
     const bgVal = bgColor.value;
     const fgVal = color.value;
-    if (bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {
+    if (bgVal && (0, _color.isUtilityIntent)(bgVal)) {
       classes.push(`origam--bg-${bgVal}`);
     }
-    if (fgVal && (0, _colorUtil.isUtilityIntent)(fgVal)) {
+    if (fgVal && (0, _color.isUtilityIntent)(fgVal)) {
       classes.push(`origam--color-${fgVal}`);
-    } else if (!fgVal && bgVal && (0, _colorUtil.isUtilityIntent)(bgVal)) {}
+    } else if (!fgVal && bgVal && (0, _color.isUtilityIntent)(bgVal)) {}
     return classes;
   });
   const colorStyles = (0, _vue.computed)(() => {
     void isDisabled.value;
     const sameIntentBg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const sameIntentFg = (a, b) => {
-      return !!a && !!b && a === b && (0, _colorUtil.isIntent)(a);
+      return !!a && !!b && a === b && (0, _color.isIntent)(a);
     };
     const bgRole = isHover.value && (!props.hoverBgColor || sameIntentBg(props.hoverBgColor, props.bgColor)) ? "hover" : isActive.value && (!props.activeBgColor || sameIntentBg(props.activeBgColor, props.bgColor)) ? "active" : "default";
     const _fgRole = isHover.value && (!props.hoverColor || sameIntentFg(props.hoverColor, props.color)) ? "hover" : isActive.value && (!props.activeColor || sameIntentFg(props.activeColor, props.color)) ? "active" : "default";
@@ -137,36 +153,55 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
-      const m = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, bgRole);
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && (0, _gradient.isGradient)(bgColor.value)) {
+      const grad = (0, _gradient.resolveGradient)(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && (0, _color.isIntent)(bgColor.value)) {
+      const m = (0, _color.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
-      bgIntentFg = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, "default").color;
+      bgIntentFg = (0, _color.tokenStylesForIntent)(bgColor.value, "default").color;
     } else if (bgColor.value === "transparent") {
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)("transparent", bgRole)}`;
-    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _colorUtil.isCssColor)(bgColor.value)) {
-      (0, _colorUtil.warnLegacyColor)("bgColor", bgColor.value);
-      bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)(bgColor.value, bgRole)}`;
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)("transparent", bgRole)}`;
+    } else if (bgColor.value && typeof bgColor.value === "string" && (0, _color.isCssColor)(bgColor.value)) {
+      (0, _color.warnLegacyColor)("bgColor", bgColor.value);
+      bgDecl = `background-color: ${(0, _color.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _colorUtil.isIntent)(color.value)) {
-      if (bgIntentFg && bgColor.value && (0, _colorUtil.isIntent)(bgColor.value) && color.value === bgColor.value) {
+    if (color.value && (0, _gradient.isGradient)(color.value)) {
+      const grad = (0, _gradient.resolveGradient)(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && (0, _color.isIntent)(color.value)) {
+      if (bgIntentFg && bgColor.value && (0, _color.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
-        fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(color.value)}`;
+        fgDecl = `color: ${(0, _color.tokenForegroundForIntent)(color.value)}`;
       }
-    } else if (color.value && typeof color.value === "string" && (0, _colorUtil.isCssColor)(color.value)) {
-      if (color.value !== "transparent") (0, _colorUtil.warnLegacyColor)("color", color.value);
+    } else if (color.value && typeof color.value === "string" && (0, _color.isCssColor)(color.value)) {
+      if (color.value !== "transparent") (0, _color.warnLegacyColor)("color", color.value);
       fgDecl = `color: ${color.value}`;
-    } else if (!color.value && bgIntentFg) {
+    } else if (!color.value && bgIntentFg && !bgIsGradient) {
       fgDecl = `color: ${bgIntentFg}`;
-    } else if (!color.value && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
-      const parsed = (0, _colorUtil.parseColor)(bgColor.value);
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _color.isParsableColor)(bgColor.value)) {
+      const parsed = (0, _color.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
-        fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
+        fgDecl = `color: ${(0, _color.getForeground)(parsed)}`;
       }
     }
     const styles = [];
     if (bgDecl) styles.push(bgDecl);
     if (fgDecl) styles.push(fgDecl);
+    if (clipText) {
+      styles.push("background-clip: text");
+      styles.push("-webkit-background-clip: text");
+    }
     return styles;
   });
   return {

package/dist/src/composables/Commons/color.composable.d.ts

@@ -35,9 +35,14 @@ export declare function useBackgroundColor<T extends Record<K, TColor>, K extend
 /*********************************************************
  * useColorEffect
  ********************************************************/
-export declare function useColorEffect(props: IColorProps & IBgColorProps, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
+export declare function useColorEffect(props: IColorProps & IBgColorProps & {
+    hoverColor?: TColor;
+    activeColor?: TColor;
+    hoverBgColor?: TColor;
+    activeBgColor?: TColor;
+}, isHover?: Ref<boolean> | ComputedRef<boolean>, isActive?: Ref<boolean> | ComputedRef<boolean>, isDisabled?: Ref<boolean> | ComputedRef<boolean>): {
     colorClasses: ComputedRef<string[]>;
     colorStyles: ComputedRef<string[]>;
-    color: ComputedRef<any>;
-    bgColor: ComputedRef<any>;
+    color: ComputedRef<TColor>;
+    bgColor: ComputedRef<TColor>;
 };