origam 2.3.0 → 2.5.0

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);
@@ -26,7 +26,7 @@ async function loadHighlighter() {
   _highlighterPromise = (async () => {
     const shiki = await import("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 +45,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,8 +1,8 @@
-import type { IAudioProps } from '../../interfaces';
+import type { IUseAudioProps } from '../../interfaces';
 /*********************************************************
  * useAudio
  ********************************************************/
-export declare function useAudio(props: IAudioProps): {
+export declare function useAudio(props: IUseAudioProps): {
     audioData: import("vue").ShallowRef<Uint8Array<ArrayBufferLike> | null, Uint8Array<ArrayBufferLike> | null>;
     analyser: import("vue").Ref<{
         fftSize: number;

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

@@ -10,13 +10,14 @@ exports.useColorEffect = useColorEffect;
 exports.useTextColor = useTextColor;
 var _vue = require("vue");
 var _colorUtil = require("../../utils/Commons/color.util.ts");
+var _gradientUtil = require("../../utils/Commons/gradient.util.ts");
 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, _gradientUtil.isGradient)(colors.value.background) && (0, _colorUtil.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, _gradientUtil.isGradient)(colors.value.text) && (0, _colorUtil.isUtilityIntent)(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -25,31 +26,46 @@ 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)) {
+      if ((0, _gradientUtil.isGradient)(colors.value.background)) {
+        const grad = (0, _gradientUtil.resolveGradient)(colors.value.background);
+        if (grad) {
+          bgDecl = `background-image: ${grad}`;
+          bgIsGradient = true;
+        }
+      } else if ((0, _colorUtil.isIntent)(colors.value.background)) {
         const m = (0, _colorUtil.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, _colorUtil.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 ((0, _gradientUtil.isGradient)(colors.value.text)) {
+        const grad = (0, _gradientUtil.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, _colorUtil.isIntent)(colors.value.text)) {
         if (bgIntentFg && (0, _colorUtil.isIntent)(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
           fgDecl = `color: ${(0, _colorUtil.tokenForegroundForIntent)(colors.value.text)}`;
         }
-      } else if ((0, _colorUtil.isCssColor)(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && (0, _colorUtil.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)) {
+    } else if (bgDecl && !bgIsGradient && 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);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
@@ -137,7 +153,15 @@ 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)) {
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && (0, _gradientUtil.isGradient)(bgColor.value)) {
+      const grad = (0, _gradientUtil.resolveGradient)(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && (0, _colorUtil.isIntent)(bgColor.value)) {
       const m = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
       bgIntentFg = (0, _colorUtil.tokenStylesForIntent)(bgColor.value, "default").color;
@@ -147,7 +171,14 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
       (0, _colorUtil.warnLegacyColor)("bgColor", bgColor.value);
       bgDecl = `background-color: ${(0, _colorUtil.rawBgExprWithState)(bgColor.value, bgRole)}`;
     }
-    if (color.value && (0, _colorUtil.isIntent)(color.value)) {
+    if (color.value && (0, _gradientUtil.isGradient)(color.value)) {
+      const grad = (0, _gradientUtil.resolveGradient)(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && (0, _colorUtil.isIntent)(color.value)) {
       if (bgIntentFg && bgColor.value && (0, _colorUtil.isIntent)(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
@@ -156,9 +187,9 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     } else if (color.value && typeof color.value === "string" && (0, _colorUtil.isCssColor)(color.value)) {
       if (color.value !== "transparent") (0, _colorUtil.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)) {
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && (0, _colorUtil.isParsableColor)(bgColor.value)) {
       const parsed = (0, _colorUtil.parseColor)(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${(0, _colorUtil.getForeground)(parsed)}`;
@@ -167,6 +198,10 @@ function useColorEffect(props, isHover = (0, _vue.ref)(false), isActive = (0, _v
     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.js

@@ -11,13 +11,14 @@ import {
   tokenStylesForIntent,
   warnLegacyColor
 } from "../../utils/Commons/color.util.ts";
+import { isGradient, resolveGradient } from "../../utils/Commons/gradient.util.ts";
 export function useColor(colors) {
   const colorClasses = computed(() => {
     const classes = [];
-    if (colors.value.background && isUtilityIntent(colors.value.background)) {
+    if (colors.value.background && !isGradient(colors.value.background) && isUtilityIntent(colors.value.background)) {
       classes.push(`origam--bg-${colors.value.background}`);
     }
-    if (colors.value.text && isUtilityIntent(colors.value.text)) {
+    if (colors.value.text && !isGradient(colors.value.text) && isUtilityIntent(colors.value.text)) {
       classes.push(`origam--color-${colors.value.text}`);
     }
     return classes;
@@ -26,31 +27,46 @@ export function useColor(colors) {
     const styles = [];
     let bgIntentFg = null;
     let bgDecl = null;
+    let bgIsGradient = false;
     if (colors.value.background) {
-      if (isIntent(colors.value.background)) {
+      if (isGradient(colors.value.background)) {
+        const grad = resolveGradient(colors.value.background);
+        if (grad) {
+          bgDecl = `background-image: ${grad}`;
+          bgIsGradient = true;
+        }
+      } else if (isIntent(colors.value.background)) {
         const m = 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 (isCssColor(colors.value.background)) {
+      } else if (typeof colors.value.background === "string" && isCssColor(colors.value.background)) {
         bgDecl = `background-color: ${colors.value.background}`;
       }
     }
     let fgDecl = null;
     if (colors.value.text) {
-      if (isIntent(colors.value.text)) {
+      if (isGradient(colors.value.text)) {
+        const grad = 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 (isIntent(colors.value.text)) {
         if (bgIntentFg && isIntent(colors.value.background) && colors.value.text === colors.value.background) {
           fgDecl = `color: ${bgIntentFg}`;
         } else {
           fgDecl = `color: ${tokenForegroundForIntent(colors.value.text)}`;
         }
-      } else if (isCssColor(colors.value.text)) {
+      } else if (typeof colors.value.text === "string" && 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" && isParsableColor(colors.value.background)) {
+    } else if (bgDecl && !bgIsGradient && colors.value.background && typeof colors.value.background === "string" && colors.value.background !== "transparent" && isParsableColor(colors.value.background)) {
       const parsed = parseColor(colors.value.background);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${getForeground(parsed)}`;
@@ -124,7 +140,15 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     let bgDecl = null;
     let fgDecl = null;
     let bgIntentFg = null;
-    if (bgColor.value && isIntent(bgColor.value)) {
+    let bgIsGradient = false;
+    let clipText = false;
+    if (bgColor.value && isGradient(bgColor.value)) {
+      const grad = resolveGradient(bgColor.value);
+      if (grad) {
+        bgDecl = `background-image: ${grad}`;
+        bgIsGradient = true;
+      }
+    } else if (bgColor.value && isIntent(bgColor.value)) {
       const m = tokenStylesForIntent(bgColor.value, bgRole);
       bgDecl = `background-color: ${m["background-color"]}`;
       bgIntentFg = tokenStylesForIntent(bgColor.value, "default").color;
@@ -134,7 +158,14 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
       warnLegacyColor("bgColor", bgColor.value);
       bgDecl = `background-color: ${rawBgExprWithState(bgColor.value, bgRole)}`;
     }
-    if (color.value && isIntent(color.value)) {
+    if (color.value && isGradient(color.value)) {
+      const grad = resolveGradient(color.value);
+      if (grad) {
+        fgDecl = "color: transparent";
+        bgDecl = `background-image: ${grad}`;
+        clipText = true;
+      }
+    } else if (color.value && isIntent(color.value)) {
       if (bgIntentFg && bgColor.value && isIntent(bgColor.value) && color.value === bgColor.value) {
         fgDecl = `color: ${bgIntentFg}`;
       } else {
@@ -143,9 +174,9 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     } else if (color.value && typeof color.value === "string" && isCssColor(color.value)) {
       if (color.value !== "transparent") 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" && isParsableColor(bgColor.value)) {
+    } else if (!color.value && !bgIsGradient && bgColor.value && typeof bgColor.value === "string" && bgColor.value !== "transparent" && isParsableColor(bgColor.value)) {
       const parsed = parseColor(bgColor.value);
       if (parsed.a == null || parsed.a === 1) {
         fgDecl = `color: ${getForeground(parsed)}`;
@@ -154,6 +185,10 @@ export function useColorEffect(props, isHover = ref(false), isActive = ref(false
     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 { colorClasses, colorStyles, color, bgColor };

package/dist/src/composables/Commons/{calendar.composable.cjs → date-picker-calendar.composable.cjs}

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCalendar = useCalendar;
+exports.useDatePickerCalendar = useDatePickerCalendar;
 var _vue = require("vue");
 var _composables = require("../../composables/index.cjs");
 var _utils = require("../../utils/index.cjs");
-function useCalendar(props) {
+function useDatePickerCalendar(props) {
   const adapter = (0, _composables.useDate)();
   const model = (0, _composables.useVModel)(props, "date", [], v => (0, _utils.wrapInArray)(v));
   const year = (0, _composables.useVModel)(props, "year", void 0, v => {

package/dist/src/composables/Commons/{calendar.composable.d.ts → date-picker-calendar.composable.d.ts}

@@ -1,8 +1,8 @@
 import type { ICalendarProps, IDay } from "../../interfaces";
 /*********************************************************
- * useCalendar
+ * useDatePickerCalendar
  ********************************************************/
-export declare function useCalendar(props: ICalendarProps): {
+export declare function useDatePickerCalendar(props: ICalendarProps): {
     displayValue: import("vue").ComputedRef<unknown>;
     daysInMonth: import("vue").ComputedRef<IDay[]>;
     daysInWeek: import("vue").ComputedRef<IDay[]>;

package/dist/src/composables/Commons/{calendar.composable.js → date-picker-calendar.composable.js}

@@ -1,7 +1,7 @@
 import { computed } from "vue";
 import { useDate, useVModel } from "../../composables/index.js";
 import { getWeek, wrapInArray } from "../../utils/index.js";
-export function useCalendar(props) {
+export function useDatePickerCalendar(props) {
   const adapter = useDate();
   const model = useVModel(
     props,

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useElevation = useElevation;
 var _vue = require("vue");
+var _elevation = require("../../consts/Commons/elevation.const.cjs");
 var _utils = require("../../utils/index.cjs");
 function elevationToToken(level) {
   if (level <= 0) return "none";
@@ -14,13 +15,11 @@ function elevationToToken(level) {
   if (level <= 16) return "lg";
   return "xl";
 }
-const ORIGAM_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"]);
 function isOrigamRung(value) {
-  return typeof value === "string" && ORIGAM_SHADOW_RUNGS.has(value);
+  return typeof value === "string" && _elevation.ORIGAM_SHADOW_RUNGS.has(value);
 }
-const UTILITY_SHADOW_RUNGS = /* @__PURE__ */new Set(["none", "xs", "sm", "md", "lg", "xl"]);
 function isUtilityRung(value) {
-  return typeof value === "string" && UTILITY_SHADOW_RUNGS.has(value);
+  return typeof value === "string" && _elevation.UTILITY_SHADOW_RUNGS.has(value);
 }
 const _bgWarned = /* @__PURE__ */new WeakSet();
 function warnBgColorUsage(bgColor) {
@@ -47,7 +46,7 @@ function useElevation(props, flat = (0, _vue.ref)(false), bgColor = (0, _vue.ref
       const numeric = typeof elevation === "string" ? parseInt(elevation, 10) : elevation;
       if (typeof numeric === "number" && !Number.isNaN(numeric)) {
         const tokenName = elevationToToken(numeric);
-        if (UTILITY_SHADOW_RUNGS.has(tokenName)) {
+        if (_elevation.UTILITY_SHADOW_RUNGS.has(tokenName)) {
           classes.push(`origam--shadow-${tokenName}`);
         }
       }