@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.esm.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
|
*/
|
|
@@ -9409,7 +9409,7 @@ var root$a = from_html(`<div><div role="alert"><button class="close-btn svelte-1
|
|
|
9409
9409
|
|
|
9410
9410
|
const $$css$e = {
|
|
9411
9411
|
hash: 'svelte-1jgbyi0',
|
|
9412
|
-
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;}'
|
|
9412
|
+
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;}'
|
|
9413
9413
|
};
|
|
9414
9414
|
|
|
9415
9415
|
function IntroCallout($$anchor, $$props) {
|
|
@@ -9448,8 +9448,8 @@ function IntroCallout($$anchor, $$props) {
|
|
|
9448
9448
|
reset(div);
|
|
9449
9449
|
|
|
9450
9450
|
template_effect(() => {
|
|
9451
|
-
set_class(div, 1, `callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
|
|
9452
|
-
set_class(div_1, 1, `callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
|
|
9451
|
+
set_class(div, 1, `cv-callout-wrapper pos-${position() ?? ''}`, 'svelte-1jgbyi0');
|
|
9452
|
+
set_class(div_1, 1, `cv-callout ${enablePulse() ? 'cv-pulse' : ''}`, 'svelte-1jgbyi0');
|
|
9453
9453
|
|
|
9454
9454
|
styles = set_style(div_1, '', styles, {
|
|
9455
9455
|
'--cv-callout-bg': backgroundColor(),
|
|
@@ -10171,7 +10171,7 @@ function TabGroupItem($$anchor, $$props) {
|
|
|
10171
10171
|
delegate(['change']);
|
|
10172
10172
|
|
|
10173
10173
|
var root_2$3 = from_html(`<p class="description svelte-1tduk3b"> </p>`);
|
|
10174
|
-
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>`);
|
|
10174
|
+
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>`);
|
|
10175
10175
|
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>`);
|
|
10176
10176
|
var root_1$6 = from_html(`<div class="tab-content active svelte-1tduk3b"><!> <!> <!></div>`);
|
|
10177
10177
|
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>`);
|
|
@@ -10339,7 +10339,7 @@ function Modal($$anchor, $$props) {
|
|
|
10339
10339
|
|
|
10340
10340
|
{
|
|
10341
10341
|
var consequent_1 = ($$anchor) => {
|
|
10342
|
-
var div_7 = root_3();
|
|
10342
|
+
var div_7 = root_3$1();
|
|
10343
10343
|
var div_8 = sibling(child(div_7), 2);
|
|
10344
10344
|
|
|
10345
10345
|
each(div_8, 5, toggles, (toggle) => toggle.toggleId, ($$anchor, toggle) => {
|
|
@@ -11860,11 +11860,11 @@ function renderAssetInto(el, assetId, assetsManager) {
|
|
|
11860
11860
|
|
|
11861
11861
|
var root_1$1 = from_html(`<div class="cv-toggle-label svelte-1x95rqi"> </div>`);
|
|
11862
11862
|
var root_2$1 = from_html(`<button class="cv-expand-btn svelte-1x95rqi"><!></button>`);
|
|
11863
|
-
var root$2 = from_html(`<div><!> <div class="cv-toggle-content svelte-1x95rqi"><!></div> <!></div>`);
|
|
11863
|
+
var root$2 = from_html(`<div><!> <div class="cv-toggle-content svelte-1x95rqi"><div class="cv-toggle-inner svelte-1x95rqi"><!></div></div> <!></div>`);
|
|
11864
11864
|
|
|
11865
11865
|
const $$css$4 = {
|
|
11866
11866
|
hash: 'svelte-1x95rqi',
|
|
11867
|
-
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
|
|
11867
|
+
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;}'
|
|
11868
11868
|
};
|
|
11869
11869
|
|
|
11870
11870
|
function Toggle($$anchor, $$props) {
|
|
@@ -11894,8 +11894,10 @@ function Toggle($$anchor, $$props) {
|
|
|
11894
11894
|
});
|
|
11895
11895
|
|
|
11896
11896
|
let localExpanded = state(false);
|
|
11897
|
+
let isUnconstrained = state(false /* New state to track if we can release max-height */);
|
|
11897
11898
|
let hasRendered = state(false);
|
|
11898
11899
|
let contentEl;
|
|
11900
|
+
let innerEl;
|
|
11899
11901
|
let scrollHeight = state(0);
|
|
11900
11902
|
|
|
11901
11903
|
// Derive visibility from store state
|
|
@@ -11920,25 +11922,46 @@ function Toggle($$anchor, $$props) {
|
|
|
11920
11922
|
if (!contentEl) return;
|
|
11921
11923
|
|
|
11922
11924
|
const observer = new ResizeObserver(() => {
|
|
11923
|
-
|
|
11924
|
-
|
|
11925
|
-
|
|
11926
|
-
|
|
11927
|
-
|
|
11925
|
+
// We measure the inner element's height
|
|
11926
|
+
// contentEl is the window, innerEl is the content
|
|
11927
|
+
if (innerEl) {
|
|
11928
|
+
set(scrollHeight, innerEl.offsetHeight, true);
|
|
11929
|
+
}
|
|
11930
|
+
|
|
11931
|
+
// Always track small content state to avoid race conditions/stale state
|
|
11932
|
+
if (get$1(scrollHeight) > 0) {
|
|
11933
|
+
if (get$1(scrollHeight) <= PEEK_HEIGHT) {
|
|
11934
|
+
set(isSmallContent, true);
|
|
11935
|
+
} else if (!get$1(isSmallContent)) {
|
|
11936
|
+
// Only set to false if it wasn't already true (latch behavior)
|
|
11937
|
+
// This ensures if it STARTS small, growing won't add the button.
|
|
11938
|
+
set(isSmallContent, false);
|
|
11939
|
+
}
|
|
11928
11940
|
}
|
|
11929
11941
|
});
|
|
11930
11942
|
|
|
11931
|
-
|
|
11932
|
-
|
|
11933
|
-
|
|
11934
|
-
|
|
11943
|
+
if (innerEl) {
|
|
11944
|
+
observer.observe(innerEl);
|
|
11945
|
+
set(scrollHeight, innerEl.offsetHeight, true);
|
|
11946
|
+
}
|
|
11935
11947
|
|
|
11936
11948
|
return () => {
|
|
11937
11949
|
observer.disconnect();
|
|
11938
11950
|
};
|
|
11939
11951
|
});
|
|
11940
11952
|
|
|
11941
|
-
let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded));
|
|
11953
|
+
let showFullContent = user_derived(() => get$1(showState) || get$1(peekState) && get$1(localExpanded) || get$1(peekState) && get$1(isSmallContent));
|
|
11954
|
+
|
|
11955
|
+
// Reset unconstrained state when toggling
|
|
11956
|
+
user_effect(() => {
|
|
11957
|
+
if (get$1(showFullContent)) {
|
|
11958
|
+
// Expanding: start constrained (to animate), will unlock on transitionend
|
|
11959
|
+
set(isUnconstrained, false);
|
|
11960
|
+
} else {
|
|
11961
|
+
// Collapsing: must recapture height immediately (snap) or stay constrained
|
|
11962
|
+
set(isUnconstrained, false);
|
|
11963
|
+
}
|
|
11964
|
+
});
|
|
11942
11965
|
|
|
11943
11966
|
// Only show peek styling (mask) if it's peeking, not expanded locally, AND content is actually taller than peek height
|
|
11944
11967
|
let showPeekContent = user_derived(() => !get$1(showState) && get$1(peekState) && !get$1(localExpanded) && !get$1(isSmallContent));
|
|
@@ -11948,12 +11971,23 @@ function Toggle($$anchor, $$props) {
|
|
|
11948
11971
|
// Calculate dynamic max-height for animation
|
|
11949
11972
|
let currentMaxHeight = user_derived(() => {
|
|
11950
11973
|
if (get$1(isHidden)) return '0px';
|
|
11974
|
+
if (get$1(isUnconstrained) && get$1(showFullContent)) return 'none'; /* Release constraint when stable */
|
|
11951
11975
|
if (get$1(showPeekContent)) return `${PEEK_HEIGHT}px`;
|
|
11952
11976
|
if (get$1(showFullContent)) return get$1(scrollHeight) > 0 ? `${get$1(scrollHeight)}px` : '9999px';
|
|
11953
11977
|
|
|
11954
11978
|
return '0px';
|
|
11955
11979
|
});
|
|
11956
11980
|
|
|
11981
|
+
function handleTransitionEnd(e) {
|
|
11982
|
+
// Only care about max-height transitions on the content element
|
|
11983
|
+
if (e.propertyName !== 'max-height' || e.target !== contentEl) return;
|
|
11984
|
+
|
|
11985
|
+
// If we finished expanding, release the height constraint
|
|
11986
|
+
if (get$1(showFullContent)) {
|
|
11987
|
+
set(isUnconstrained, true);
|
|
11988
|
+
}
|
|
11989
|
+
}
|
|
11990
|
+
|
|
11957
11991
|
function toggleExpand(e) {
|
|
11958
11992
|
e.stopPropagation();
|
|
11959
11993
|
set(localExpanded, !get$1(localExpanded));
|
|
@@ -12026,9 +12060,12 @@ function Toggle($$anchor, $$props) {
|
|
|
12026
12060
|
|
|
12027
12061
|
var div_2 = sibling(node, 2);
|
|
12028
12062
|
let styles;
|
|
12029
|
-
var
|
|
12063
|
+
var div_3 = child(div_2);
|
|
12064
|
+
var node_1 = child(div_3);
|
|
12030
12065
|
|
|
12031
12066
|
slot(node_1, $$props, 'default', {});
|
|
12067
|
+
reset(div_3);
|
|
12068
|
+
bind_this(div_3, ($$value) => innerEl = $$value, () => innerEl);
|
|
12032
12069
|
reset(div_2);
|
|
12033
12070
|
bind_this(div_2, ($$value) => contentEl = $$value, () => contentEl);
|
|
12034
12071
|
|
|
@@ -12067,6 +12104,7 @@ function Toggle($$anchor, $$props) {
|
|
|
12067
12104
|
styles = set_style(div_2, '', styles, { 'max-height': get$1(currentMaxHeight) });
|
|
12068
12105
|
});
|
|
12069
12106
|
|
|
12107
|
+
event('transitionend', div_2, handleTransitionEnd);
|
|
12070
12108
|
append($$anchor, div);
|
|
12071
12109
|
|
|
12072
12110
|
return pop($$exports);
|
|
@@ -12097,7 +12135,7 @@ var root$1 = from_html(`<div><!></div>`);
|
|
|
12097
12135
|
|
|
12098
12136
|
const $$css$3 = {
|
|
12099
12137
|
hash: 'svelte-17fgzpj',
|
|
12100
|
-
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
|
|
12138
|
+
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 }'
|
|
12101
12139
|
};
|
|
12102
12140
|
|
|
12103
12141
|
function Tab($$anchor, $$props) {
|
|
@@ -12146,7 +12184,8 @@ customElements.define('cv-tab', create_custom_element(
|
|
|
12146
12184
|
|
|
12147
12185
|
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>`);
|
|
12148
12186
|
var root_1 = from_html(`<ul class="cv-tabs-nav nav-tabs svelte-1630cmg" role="tablist"></ul>`);
|
|
12149
|
-
var
|
|
12187
|
+
var root_3 = from_html(`<link rel="stylesheet"/>`);
|
|
12188
|
+
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>`);
|
|
12150
12189
|
|
|
12151
12190
|
const $$css$2 = {
|
|
12152
12191
|
hash: 'svelte-1630cmg',
|
|
@@ -12400,10 +12439,19 @@ function TabGroup($$anchor, $$props) {
|
|
|
12400
12439
|
});
|
|
12401
12440
|
}
|
|
12402
12441
|
|
|
12403
|
-
var
|
|
12404
|
-
|
|
12442
|
+
var node_3 = sibling(node, 2);
|
|
12443
|
+
|
|
12444
|
+
each(node_3, 16, () => Array.from(document.querySelectorAll('link[rel="stylesheet"]')), index, ($$anchor, link) => {
|
|
12445
|
+
var link_1 = root_3();
|
|
12446
|
+
|
|
12447
|
+
template_effect(() => set_attribute(link_1, 'href', link.href));
|
|
12448
|
+
append($$anchor, link_1);
|
|
12449
|
+
});
|
|
12450
|
+
|
|
12451
|
+
var div_1 = sibling(node_3, 2);
|
|
12452
|
+
var node_4 = child(div_1);
|
|
12405
12453
|
|
|
12406
|
-
slot(
|
|
12454
|
+
slot(node_4, $$props, 'default', {});
|
|
12407
12455
|
reset(div_1);
|
|
12408
12456
|
bind_this(div_1, ($$value) => set(contentWrapper, $$value), () => get$1(contentWrapper));
|
|
12409
12457
|
next(2);
|