@customviews-js/customviews 1.4.1-beta.3 → 1.4.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/custom-views.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* @customviews-js/customviews v1.4.1-beta.
|
|
2
|
+
* @customviews-js/customviews v1.4.1-beta.5
|
|
3
3
|
* (c) 2026 Chan Ger Teck
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -9411,7 +9411,7 @@ var root$a = from_html(`<div><div role="alert"><button class="close-btn svelte-1
|
|
|
9411
9411
|
|
|
9412
9412
|
const $$css$e = {
|
|
9413
9413
|
hash: 'svelte-1jgbyi0',
|
|
9414
|
-
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;}'
|
|
9414
|
+
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;}'
|
|
9415
9415
|
};
|
|
9416
9416
|
|
|
9417
9417
|
function IntroCallout($$anchor, $$props) {
|
|
@@ -9450,8 +9450,8 @@ function IntroCallout($$anchor, $$props) {
|
|
|
9450
9450
|
reset(div);
|
|
9451
9451
|
|
|
9452
9452
|
template_effect(() => {
|
|
9453
|
-
set_class(div, 1, `callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
|
|
9454
|
-
set_class(div_1, 1, `callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
|
|
9453
|
+
set_class(div, 1, `cv-callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
|
|
9454
|
+
set_class(div_1, 1, `cv-callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
|
|
9455
9455
|
|
|
9456
9456
|
styles = set_style(div_1, '', styles, {
|
|
9457
9457
|
'--cv-callout-bg': backgroundColor(),
|
|
@@ -10173,7 +10173,7 @@ function TabGroupItem($$anchor, $$props) {
|
|
|
10173
10173
|
delegate(['change']);
|
|
10174
10174
|
|
|
10175
10175
|
var root_2$3 = from_html(`<p class="description svelte-1tduk3b"> </p>`);
|
|
10176
|
-
var root_3 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Toggles</div> <div class="toggles-container svelte-1tduk3b"></div></div>`);
|
|
10176
|
+
var root_3$1 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Toggles</div> <div class="toggles-container svelte-1tduk3b"></div></div>`);
|
|
10177
10177
|
var root_5 = from_html(`<div class="section svelte-1tduk3b"><div class="section-heading svelte-1tduk3b">Tab Groups</div> <div class="tabgroups-container svelte-1tduk3b"><div class="tabgroup-card header-card svelte-1tduk3b" role="group"><div class="tabgroup-row svelte-1tduk3b"><div class="logo-box svelte-1tduk3b" id="cv-nav-icon-box"><div class="nav-icon svelte-1tduk3b"><!></div></div> <div class="tabgroup-info svelte-1tduk3b"><div class="tabgroup-title-container"><p class="tabgroup-title svelte-1tduk3b">Show only the selected tab</p></div> <p class="tabgroup-description svelte-1tduk3b">Hide the navigation headers</p></div> <label class="toggle-switch nav-toggle svelte-1tduk3b"><input class="nav-pref-input svelte-1tduk3b" type="checkbox" aria-label="Show only the selected tab"/> <span class="switch-bg svelte-1tduk3b"></span> <span class="switch-knob svelte-1tduk3b"></span></label></div></div> <div class="tab-groups-list svelte-1tduk3b"></div></div></div>`);
|
|
10178
10178
|
var root_1$6 = from_html(`<div class="tab-content active svelte-1tduk3b"><!> <!> <!></div>`);
|
|
10179
10179
|
var root_7 = from_html(`<div class="tab-content active svelte-1tduk3b"><div class="share-content svelte-1tduk3b"><div class="share-instruction svelte-1tduk3b">Create a shareable link for your current customization, or select specific parts of the page to share.</div> <button class="share-action-btn primary start-share-btn svelte-1tduk3b"><span class="btn-icon svelte-1tduk3b"><!></span> <span>Select elements to share</span></button> <button class="share-action-btn copy-url-btn svelte-1tduk3b"><span class="btn-icon svelte-1tduk3b"><!></span> <span><!></span></button></div></div>`);
|
|
@@ -10341,7 +10341,7 @@ function Modal($$anchor, $$props) {
|
|
|
10341
10341
|
|
|
10342
10342
|
{
|
|
10343
10343
|
var consequent_1 = ($$anchor) => {
|
|
10344
|
-
var div_7 = root_3();
|
|
10344
|
+
var div_7 = root_3$1();
|
|
10345
10345
|
var div_8 = sibling(child(div_7), 2);
|
|
10346
10346
|
|
|
10347
10347
|
each(div_8, 5, toggles, (toggle) => toggle.toggleId, ($$anchor, toggle) => {
|
|
@@ -11862,11 +11862,11 @@ function renderAssetInto(el, assetId, assetsManager) {
|
|
|
11862
11862
|
|
|
11863
11863
|
var root_1$1 = from_html(`<div class="cv-toggle-label svelte-1x95rqi"> </div>`);
|
|
11864
11864
|
var root_2$1 = from_html(`<button class="cv-expand-btn svelte-1x95rqi"><!></button>`);
|
|
11865
|
-
var root$2 = from_html(`<div><!> <div class="cv-toggle-content svelte-1x95rqi"><!></div> <!></div>`);
|
|
11865
|
+
var root$2 = from_html(`<div><!> <div class="cv-toggle-content svelte-1x95rqi"><div class="cv-toggle-inner svelte-1x95rqi"><!></div></div> <!></div>`);
|
|
11866
11866
|
|
|
11867
11867
|
const $$css$4 = {
|
|
11868
11868
|
hash: 'svelte-1x95rqi',
|
|
11869
|
-
code: ':host {display:block;position:relative;z-index:1;overflow:visible;}\n\n /* Host visibility control */:host([hidden]) {display:none;}.cv-toggle-wrapper.svelte-1x95rqi {position:relative;width:100%;transition:all 0.3s ease;margin-bottom:4px;}.cv-toggle-wrapper.hidden.svelte-1x95rqi {margin-bottom:0;}.cv-toggle-wrapper.peek-mode.svelte-1x95rqi {margin-bottom:24px;}.cv-toggle-content.svelte-1x95rqi {overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease;\n /* CSS max-height defaults are handled by inline styles now */}\n\n /* Hidden State */.hidden.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:0;pointer-events:none;}\n\n /* Bordered State */.has-border.svelte-1x95rqi {box-sizing:border-box; /* Ensure padding/border doesn\'t increase width */\n \n /* Dashed border */border:2px dashed rgba(0, 0, 0, 0.15);border-bottom:none;\n \n /* Inner shadow to look like it\'s going into something + outer shadow */box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), /* Subtle outer */\n inset 0 -15px 10px -10px rgba(0, 0, 0, 0.1); /* Inner bottom shadow */border-radius:8px 8px 0 0;padding:12px
|
|
11869
|
+
code: ':host {display:block;position:relative;z-index:1;overflow:visible;}\n\n /* Host visibility control */:host([hidden]) {display:none;}.cv-toggle-wrapper.svelte-1x95rqi {position:relative;width:100%;transition:all 0.3s ease;margin-bottom:4px;}.cv-toggle-wrapper.hidden.svelte-1x95rqi {margin-bottom:0;}.cv-toggle-wrapper.peek-mode.svelte-1x95rqi {margin-bottom:24px;}.cv-toggle-content.svelte-1x95rqi {overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0s;\n /* CSS max-height defaults are handled by inline styles now */}.cv-toggle-inner.svelte-1x95rqi {display:flow-root; /* Ensures margins of children are contained */}\n\n /* Hidden State */.hidden.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:0;pointer-events:none;}\n\n /* Bordered State */.has-border.svelte-1x95rqi {box-sizing:border-box; /* Ensure padding/border doesn\'t increase width */\n \n /* Dashed border */border:2px dashed rgba(0, 0, 0, 0.15);border-bottom:none;\n \n /* Inner shadow to look like it\'s going into something + outer shadow */box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), /* Subtle outer */\n inset 0 -15px 10px -10px rgba(0, 0, 0, 0.1); /* Inner bottom shadow */border-radius:8px 8px 0 0;padding:12px 0 0 0; /* bottom 0 px until expanded */margin-top:4px;}\n \n /* Visible / Expanded State */.expanded.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:1;transform:translateY(0);overflow:visible;transition:max-height 0.3s ease, opacity 0.3s ease, overflow 0s 0.3s;}\n\n /* When expanded, complete the border */.has-border.expanded.svelte-1x95rqi {border-bottom:2px dashed rgba(0, 0, 0, 0.15);border-radius:8px; /* Round all corners */padding-bottom:12px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.05); /* Remove inner shadow when expanded */}\n\n /* Peek State */.peeking.svelte-1x95rqi .cv-toggle-content:where(.svelte-1x95rqi) {opacity:1;\n /* Mask for fade out effect */mask-image:linear-gradient(to bottom, black 50%, transparent 100%);-webkit-mask-image:linear-gradient(to bottom, black 50%, transparent 100%);}\n \n /* Label Style */.cv-toggle-label.svelte-1x95rqi {position:absolute;top:-12px;left:0;background:#e0e0e0;color:#333;font-size:0.75rem;font-weight:600;padding:2px 8px;border-radius:4px;z-index:10;pointer-events:auto;box-shadow:0 1px 2px rgba(0,0,0,0.1);}\n\n /* Adjust label position if bordered */.has-border.svelte-1x95rqi .cv-toggle-label:where(.svelte-1x95rqi) {top:-10px;left:0;}\n\n /* Expand Button */.cv-expand-btn.svelte-1x95rqi {position:absolute;bottom:-24px;left:50%;transform:translateX(-50%);display:flex;background:transparent;border:none;border-radius:50%;padding:4px;width:32px;height:32px;cursor:pointer;z-index:100;align-items:center;justify-content:center;color:#888;transition:all 0.2s ease;}.cv-expand-btn.svelte-1x95rqi:hover {background:rgba(0, 0, 0, 0.05);color:#000;transform:translateX(-50%) scale(1.1);}\n\n /* Accessing SVG inside button - might need :global if SVG is injected as HTML or just plain styles since it adheres to current scope */.cv-expand-btn.svelte-1x95rqi svg {display:block;opacity:0.6;width:24px;height:24px;transition:opacity 0.2s;}.cv-expand-btn.svelte-1x95rqi:hover svg {opacity:1;}'
|
|
11870
11870
|
};
|
|
11871
11871
|
|
|
11872
11872
|
function Toggle($$anchor, $$props) {
|
|
@@ -11896,8 +11896,10 @@ function Toggle($$anchor, $$props) {
|
|
|
11896
11896
|
});
|
|
11897
11897
|
|
|
11898
11898
|
let localExpanded = state(false);
|
|
11899
|
+
let isUnconstrained = state(false /* New state to track if we can release max-height */);
|
|
11899
11900
|
let hasRendered = state(false);
|
|
11900
11901
|
let contentEl;
|
|
11902
|
+
let innerEl;
|
|
11901
11903
|
let scrollHeight = state(0);
|
|
11902
11904
|
|
|
11903
11905
|
// Derive visibility from store state
|
|
@@ -11922,25 +11924,46 @@ function Toggle($$anchor, $$props) {
|
|
|
11922
11924
|
if (!contentEl) return;
|
|
11923
11925
|
|
|
11924
11926
|
const observer = new ResizeObserver(() => {
|
|
11925
|
-
|
|
11926
|
-
|
|
11927
|
-
|
|
11928
|
-
|
|
11929
|
-
|
|
11927
|
+
// We measure the inner element's height
|
|
11928
|
+
// contentEl is the window, innerEl is the content
|
|
11929
|
+
if (innerEl) {
|
|
11930
|
+
set(scrollHeight, innerEl.offsetHeight, true);
|
|
11931
|
+
}
|
|
11932
|
+
|
|
11933
|
+
// Always track small content state to avoid race conditions/stale state
|
|
11934
|
+
if (get$1(scrollHeight) > 0) {
|
|
11935
|
+
if (get$1(scrollHeight) <= PEEK_HEIGHT) {
|
|
11936
|
+
set(isSmallContent, true);
|
|
11937
|
+
} else if (!get$1(isSmallContent)) {
|
|
11938
|
+
// Only set to false if it wasn't already true (latch behavior)
|
|
11939
|
+
// This ensures if it STARTS small, growing won't add the button.
|
|
11940
|
+
set(isSmallContent, false);
|
|
11941
|
+
}
|
|
11930
11942
|
}
|
|
11931
11943
|
});
|
|
11932
11944
|
|
|
11933
|
-
|
|
11934
|
-
|
|
11935
|
-
|
|
11936
|
-
|
|
11945
|
+
if (innerEl) {
|
|
11946
|
+
observer.observe(innerEl);
|
|
11947
|
+
set(scrollHeight, innerEl.offsetHeight, true);
|
|
11948
|
+
}
|
|
11937
11949
|
|
|
11938
11950
|
return () => {
|
|
11939
11951
|
observer.disconnect();
|
|
11940
11952
|
};
|
|
11941
11953
|
});
|
|
11942
11954
|
|
|
11943
|
-
let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded));
|
|
11955
|
+
let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded) || get$1(peekState) && get$1(isSmallContent));
|
|
11956
|
+
|
|
11957
|
+
// Reset unconstrained state when toggling
|
|
11958
|
+
user_effect(() => {
|
|
11959
|
+
if (get$1(showFullContent)) {
|
|
11960
|
+
// Expanding: start constrained (to animate), will unlock on transitionend
|
|
11961
|
+
set(isUnconstrained, false);
|
|
11962
|
+
} else {
|
|
11963
|
+
// Collapsing: must recapture height immediately (snap) or stay constrained
|
|
11964
|
+
set(isUnconstrained, false);
|
|
11965
|
+
}
|
|
11966
|
+
});
|
|
11944
11967
|
|
|
11945
11968
|
// Only show peek styling (mask) if it's peeking, not expanded locally, AND content is actually taller than peek height
|
|
11946
11969
|
let showPeekContent = user_derived(() => !get$1(showState) && get$1(peekState) && !get$1(localExpanded) && !get$1(isSmallContent));
|
|
@@ -11950,12 +11973,23 @@ function Toggle($$anchor, $$props) {
|
|
|
11950
11973
|
// Calculate dynamic max-height for animation
|
|
11951
11974
|
let currentMaxHeight = user_derived(() => {
|
|
11952
11975
|
if (get$1(isHidden)) return '0px';
|
|
11976
|
+
if (get$1(isUnconstrained) && get$1(showFullContent)) return 'none'; /* Release constraint when stable */
|
|
11953
11977
|
if (get$1(showPeekContent)) return `${PEEK_HEIGHT}px`;
|
|
11954
11978
|
if (get$1(showFullContent)) return get$1(scrollHeight) > 0 ? `${get$1(scrollHeight)}px` : '9999px';
|
|
11955
11979
|
|
|
11956
11980
|
return '0px';
|
|
11957
11981
|
});
|
|
11958
11982
|
|
|
11983
|
+
function handleTransitionEnd(e) {
|
|
11984
|
+
// Only care about max-height transitions on the content element
|
|
11985
|
+
if (e.propertyName !== 'max-height' || e.target !== contentEl) return;
|
|
11986
|
+
|
|
11987
|
+
// If we finished expanding, release the height constraint
|
|
11988
|
+
if (get$1(showFullContent)) {
|
|
11989
|
+
set(isUnconstrained, true);
|
|
11990
|
+
}
|
|
11991
|
+
}
|
|
11992
|
+
|
|
11959
11993
|
function toggleExpand(e) {
|
|
11960
11994
|
e.stopPropagation();
|
|
11961
11995
|
set(localExpanded, !get$1(localExpanded));
|
|
@@ -12028,9 +12062,12 @@ function Toggle($$anchor, $$props) {
|
|
|
12028
12062
|
|
|
12029
12063
|
var div_2 = sibling(node, 2);
|
|
12030
12064
|
let styles;
|
|
12031
|
-
var
|
|
12065
|
+
var div_3 = child(div_2);
|
|
12066
|
+
var node_1 = child(div_3);
|
|
12032
12067
|
|
|
12033
12068
|
slot(node_1, $$props, 'default', {});
|
|
12069
|
+
reset(div_3);
|
|
12070
|
+
bind_this(div_3, ($$value) => innerEl = $$value, () => innerEl);
|
|
12034
12071
|
reset(div_2);
|
|
12035
12072
|
bind_this(div_2, ($$value) => contentEl = $$value, () => contentEl);
|
|
12036
12073
|
|
|
@@ -12069,6 +12106,7 @@ function Toggle($$anchor, $$props) {
|
|
|
12069
12106
|
styles = set_style(div_2, '', styles, { 'max-height': get$1(currentMaxHeight) });
|
|
12070
12107
|
});
|
|
12071
12108
|
|
|
12109
|
+
event('transitionend', div_2, handleTransitionEnd);
|
|
12072
12110
|
append($$anchor, div);
|
|
12073
12111
|
|
|
12074
12112
|
return pop($$exports);
|
|
@@ -12099,7 +12137,7 @@ var root$1 = from_html(`<div><!></div>`);
|
|
|
12099
12137
|
|
|
12100
12138
|
const $$css$3 = {
|
|
12101
12139
|
hash: 'svelte-17fgzpj',
|
|
12102
|
-
code: ':host {display:block;}:host(.cv-hidden) {display:none !important;}:host(.cv-visible) {display:block !important;}:host([active="true"]) {display:block;}.cv-tab-content.svelte-17fgzpj {display:none;\n animation: svelte-17fgzpj-fade-in 0.2s ease-in-out;padding:1rem
|
|
12140
|
+
code: ':host {display:block;}:host(.cv-hidden) {display:none !important;}:host(.cv-visible) {display:block !important;}:host([active="true"]) {display:block;}.cv-tab-content.svelte-17fgzpj {display:none;\n animation: svelte-17fgzpj-fade-in 0.2s ease-in-out;padding-top:1rem;padding-bottom:0.5rem;padding-left:0;padding-right:0;}.cv-tab-content.active.svelte-17fgzpj {display:block;}\n\n /* Hide cv-tab-header source element; content is extracted to nav link */.svelte-17fgzpj::slotted(cv-tab-header) {display:none !important;}\n\n /* Allow cv-tab-body to flow naturally */.svelte-17fgzpj::slotted(cv-tab-body) {display:block;}\n\n @keyframes svelte-17fgzpj-fade-in {\n from { opacity: 0; }\n to { opacity: 1; }\n }'
|
|
12103
12141
|
};
|
|
12104
12142
|
|
|
12105
12143
|
function Tab($$anchor, $$props) {
|
|
@@ -12148,7 +12186,8 @@ customElements.define('cv-tab', create_custom_element(
|
|
|
12148
12186
|
|
|
12149
12187
|
var root_2 = from_html(`<li class="nav-item svelte-1630cmg"><a role="tab" title="Double-click a tab to 'pin' it in all similar tab groups."><span class="cv-tab-header-container svelte-1630cmg"><span class="cv-tab-header-text svelte-1630cmg"><!></span> <span class="cv-tab-pin-icon svelte-1630cmg"><!></span></span></a></li>`);
|
|
12150
12188
|
var root_1 = from_html(`<ul class="cv-tabs-nav nav-tabs svelte-1630cmg" role="tablist"></ul>`);
|
|
12151
|
-
var
|
|
12189
|
+
var root_3 = from_html(`<link rel="stylesheet"/>`);
|
|
12190
|
+
var root = from_html(`<div class="cv-tabgroup-container"><!> <!> <div class="cv-tabgroup-content"><!></div> <div class="cv-tabgroup-bottom-border svelte-1630cmg"></div></div>`);
|
|
12152
12191
|
|
|
12153
12192
|
const $$css$2 = {
|
|
12154
12193
|
hash: 'svelte-1630cmg',
|
|
@@ -12402,10 +12441,19 @@ function TabGroup($$anchor, $$props) {
|
|
|
12402
12441
|
});
|
|
12403
12442
|
}
|
|
12404
12443
|
|
|
12405
|
-
var
|
|
12406
|
-
|
|
12444
|
+
var node_3 = sibling(node, 2);
|
|
12445
|
+
|
|
12446
|
+
each(node_3, 16, () => Array.from(document.querySelectorAll('link[rel="stylesheet"]')), index, ($$anchor, link) => {
|
|
12447
|
+
var link_1 = root_3();
|
|
12448
|
+
|
|
12449
|
+
template_effect(() => set_attribute(link_1, 'href', link.href));
|
|
12450
|
+
append($$anchor, link_1);
|
|
12451
|
+
});
|
|
12452
|
+
|
|
12453
|
+
var div_1 = sibling(node_3, 2);
|
|
12454
|
+
var node_4 = child(div_1);
|
|
12407
12455
|
|
|
12408
|
-
slot(
|
|
12456
|
+
slot(node_4, $$props, 'default', {});
|
|
12409
12457
|
reset(div_1);
|
|
12410
12458
|
bind_this(div_1, ($$value) => set(contentWrapper, $$value), () => get$1(contentWrapper));
|
|
12411
12459
|
next(2);
|