@customviews-js/customviews 1.4.1-beta.4 → 1.4.1-beta.5

package/dist/custom-views.esm.js

@@ -1,5 +1,5 @@
 /*!
- * @customviews-js/customviews v1.4.1-beta.4
+ * @customviews-js/customviews v1.4.1-beta.5
  * (c) 2026 Chan Ger Teck
  * Released under the MIT License.
  */
@@ -9409,7 +9409,7 @@ var root$a = from_html(`<div><div role="alert"><button class="close-btn svelte-1
 
 const $$css$e = {
 	hash: 'svelte-1jgbyi0',
-	code: '\n  /* Animation */\n  @keyframes svelte-1jgbyi0-popIn {\n    0% { opacity: 0; transform: scale(0.9) translateY(-50%); }\n    100% { opacity: 1; transform: scale(1) translateY(-50%); }\n  }\n\n  /* Reset transform for top/bottom positions */\n  @keyframes svelte-1jgbyi0-popInVertical {\n    0% { opacity: 0; transform: scale(0.9); }\n    100% { opacity: 1; transform: scale(1); }\n  }\n\n  /* Simplified Pulse Animation - Shadow Only */\n  @keyframes svelte-1jgbyi0-pulse {\n    0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0.7); }\n    50% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(62, 132, 244, 0); }\n    100% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0); }\n  }\n\n  /* Wrapper handles Positioning & Entry Animation */.callout-wrapper.svelte-1jgbyi0 {position:fixed;z-index:9999;\n    \n    /* Default animation (centered ones) */\n    animation: svelte-1jgbyi0-popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}\n\n  /* Inner handles Visuals & Pulse Animation */.callout.svelte-1jgbyi0 {background:var(--cv-callout-bg, white);padding:1rem 1.25rem;border-radius:0.5rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);max-width:250px;font-size:0.9rem;line-height:1.5;color:var(--cv-callout-text, #1a1a1a);display:flex;align-items:flex-start;gap:0.75rem;font-family:inherit;border:2px solid rgba(0,0,0,0.1); /* Subtle border */}\n\n  /* Apply pulse to inner callout if enabled */.callout.cv-pulse.svelte-1jgbyi0 {\n    animation: svelte-1jgbyi0-pulse 2s infinite 0.5s;}\n\n  /* Arrow Base */.callout.svelte-1jgbyi0::before {content:\'\';position:absolute;width:1rem;height:1rem;background:var(--cv-callout-bg, white);transform:rotate(45deg);border:2px solid rgba(0,0,0,0.1);z-index:-1;}.close-btn.svelte-1jgbyi0 {background:transparent;border:none;color:currentColor;opacity:0.7;font-size:1.25rem;line-height:1;cursor:pointer;padding:0;margin:-0.25rem -0.5rem 0 0;transition:opacity 0.15s;flex-shrink:0;}.close-btn.svelte-1jgbyi0:hover {color:currentColor;opacity:1;}.text.svelte-1jgbyi0 {margin:0;flex:1;font-weight:500;}\n\n  /* \n     Position Specifics (Applied to Wrapper)\n  */\n\n  /* Right-side positions (Icon on Right -> Callout on Left) */.pos-top-right.svelte-1jgbyi0, .pos-middle-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {right:80px;}.pos-top-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n  \n  /* X Button Spacing Adjustments */.pos-top-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {margin-right:0;margin-left:-0.5rem;}\n\n  /* Left-side positions (Icon on Left -> Callout on Right) */.pos-top-left.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {left:80px;}.pos-top-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {order:2; /* Move to end */margin-right:-0.5rem;margin-left:0;}.pos-top-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n\n  /* Vertical Alignment */.pos-middle-right.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0 {top:50%;\n    /* transform handled by popIn animation (translateY -50%) */}.pos-top-right.svelte-1jgbyi0, .pos-top-left.svelte-1jgbyi0 {top:20px;}.pos-bottom-right.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {bottom:20px;}\n\n\n  /* Arrow Positioning (Child of .callout, dependent on Wrapper .pos-*) */\n  \n  /* Pointing Right */.pos-top-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {right:-0.5rem;border-left:none;border-bottom:none;}\n\n  /* Pointing Left */.pos-top-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {left:-0.5rem;border-right:none;border-top:none;}\n\n  /* Vertical placement of arrow */.pos-middle-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-middle-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {top:50%;margin-top:-0.5rem;}.pos-top-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-top-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {top:1.25rem;}.pos-bottom-right.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before, .pos-bottom-left.svelte-1jgbyi0 .callout:where(.svelte-1jgbyi0)::before {bottom:1.25rem;}\n\n\n  /* Dark Theme */.cv-settings-theme-dark .callout.svelte-1jgbyi0 {background:#1f2937;color:#e5e7eb;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .callout.svelte-1jgbyi0::before {background:#1f2937;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0 {color:#9ca3af;}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0:hover {color:#f3f4f6;}'
+	code: '\n  /* Animation */\n  @keyframes svelte-1jgbyi0-popIn {\n    0% { opacity: 0; transform: scale(0.9) translateY(-50%); }\n    100% { opacity: 1; transform: scale(1) translateY(-50%); }\n  }\n\n  /* Reset transform for top/bottom positions */\n  @keyframes svelte-1jgbyi0-popInVertical {\n    0% { opacity: 0; transform: scale(0.9); }\n    100% { opacity: 1; transform: scale(1); }\n  }\n\n  /* Simplified Pulse Animation - Shadow Only */\n  @keyframes svelte-1jgbyi0-pulse {\n    0% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0.7); }\n    50% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 10px rgba(62, 132, 244, 0); }\n    100% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(62, 132, 244, 0); }\n  }\n\n  /* Wrapper handles Positioning & Entry Animation */.cv-callout-wrapper.svelte-1jgbyi0 {position:fixed;z-index:9999;\n    \n    /* Default animation (centered ones) */\n    animation: svelte-1jgbyi0-popIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;}\n\n  /* Inner handles Visuals & Pulse Animation */.cv-callout.svelte-1jgbyi0 {background:var(--cv-callout-bg, white);padding:1rem 1.25rem;border-radius:0.5rem;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);max-width:250px;font-size:0.9rem;line-height:1.5;color:var(--cv-callout-text, #1a1a1a);display:flex;align-items:flex-start;gap:0.75rem;font-family:inherit;border:2px solid rgba(0,0,0,0.1); /* Subtle border */}\n\n  /* Apply pulse to inner callout if enabled */.cv-callout.cv-pulse.svelte-1jgbyi0 {\n    animation: svelte-1jgbyi0-pulse 2s infinite 0.5s;}\n\n  /* Arrow Base */.cv-callout.svelte-1jgbyi0::before {content:\'\';position:absolute;width:1rem;height:1rem;background:var(--cv-callout-bg, white);transform:rotate(45deg);border:2px solid rgba(0,0,0,0.1);z-index:-1;}.close-btn.svelte-1jgbyi0 {background:transparent;border:none;color:currentColor;opacity:0.7;font-size:1.25rem;line-height:1;cursor:pointer;padding:0;margin:-0.25rem -0.5rem 0 0;transition:opacity 0.15s;flex-shrink:0;}.close-btn.svelte-1jgbyi0:hover {color:currentColor;opacity:1;}.text.svelte-1jgbyi0 {margin:0;flex:1;font-weight:500;}\n\n  /* \n     Position Specifics (Applied to Wrapper)\n  */\n\n  /* Right-side positions (Icon on Right -> Callout on Left) */.pos-top-right.svelte-1jgbyi0, .pos-middle-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {right:80px;}.pos-top-right.svelte-1jgbyi0, .pos-bottom-right.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n  \n  /* X Button Spacing Adjustments */.pos-top-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-right.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {margin-right:0;margin-left:-0.5rem;}\n\n  /* Left-side positions (Icon on Left -> Callout on Right) */.pos-top-left.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {left:80px;}.pos-top-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-middle-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0), \n  .pos-bottom-left.svelte-1jgbyi0 .close-btn:where(.svelte-1jgbyi0) {order:2; /* Move to end */margin-right:-0.5rem;margin-left:0;}.pos-top-left.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {\n     animation-name: svelte-1jgbyi0-popInVertical;}\n\n  /* Vertical Alignment */.pos-middle-right.svelte-1jgbyi0, .pos-middle-left.svelte-1jgbyi0 {top:50%;\n    /* transform handled by popIn animation (translateY -50%) */}.pos-top-right.svelte-1jgbyi0, .pos-top-left.svelte-1jgbyi0 {top:20px;}.pos-bottom-right.svelte-1jgbyi0, .pos-bottom-left.svelte-1jgbyi0 {bottom:20px;}\n\n\n  /* Arrow Positioning (Child of .callout, dependent on Wrapper .pos-*) */\n  \n  /* Pointing Right */.pos-top-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before {right:-0.5rem;border-left:none;border-bottom:none;}\n\n  /* Pointing Left */.pos-top-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, \n  .pos-middle-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, \n  .pos-bottom-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before {left:-0.5rem;border-right:none;border-top:none;}\n\n  /* Vertical placement of arrow */.pos-middle-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, .pos-middle-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before {top:50%;margin-top:-0.5rem;}.pos-top-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, .pos-top-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before {top:1.25rem;}.pos-bottom-right.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before, .pos-bottom-left.svelte-1jgbyi0 .cv-callout:where(.svelte-1jgbyi0)::before {bottom:1.25rem;}\n\n\n  /* Dark Theme */.cv-settings-theme-dark .cv-callout.svelte-1jgbyi0 {background:#1f2937;color:#e5e7eb;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .cv-callout.svelte-1jgbyi0::before {background:#1f2937;border-color:rgba(255,255,255,0.2);}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0 {color:#9ca3af;}.cv-settings-theme-dark .close-btn.svelte-1jgbyi0:hover {color:#f3f4f6;}'
 };
 
 function IntroCallout($$anchor, $$props) {
@@ -9448,8 +9448,8 @@ function IntroCallout($$anchor, $$props) {
 	reset(div);
 
 	template_effect(() => {
-		set_class(div, 1, `callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
-		set_class(div_1, 1, `callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
+		set_class(div, 1, `cv-callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
+		set_class(div_1, 1, `cv-callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
 
 		styles = set_style(div_1, '', styles, {
 			'--cv-callout-bg': backgroundColor(),