@surdeddd/bottom-sheet 0.4.0 → 0.4.1
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/element.cjs +11 -3
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +11 -3
- package/dist/index.cjs +6 -0
- package/dist/index.js +6 -0
- package/dist/qwik.cjs +6 -0
- package/dist/qwik.js +6 -0
- package/dist/react.cjs +24 -2
- package/dist/react.js +24 -2
- package/dist/solid.cjs +6 -0
- package/dist/solid.js +6 -0
- package/dist/solid.source.jsx +6 -0
- package/dist/styles.css +17 -5
- package/dist/svelte-core.cjs +6 -0
- package/dist/svelte-core.js +6 -0
- package/dist/svelte-src/BottomSheet.svelte +10 -10
- package/dist/svelte.cjs +53 -45
- package/dist/svelte.js +53 -45
- package/dist/vue.cjs +30 -22
- package/dist/vue.js +30 -22
- package/package.json +3 -3
package/dist/element.js
CHANGED
|
@@ -3511,6 +3511,9 @@ var init_BottomSheetEngine = __esm({
|
|
|
3511
3511
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3512
3512
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3513
3513
|
}
|
|
3514
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3515
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3516
|
+
}
|
|
3514
3517
|
}
|
|
3515
3518
|
const progress = this.computeProgress(size);
|
|
3516
3519
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3522,6 +3525,9 @@ var init_BottomSheetEngine = __esm({
|
|
|
3522
3525
|
if (this.anchorHost) {
|
|
3523
3526
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3524
3527
|
}
|
|
3528
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3529
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3530
|
+
}
|
|
3525
3531
|
}
|
|
3526
3532
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3527
3533
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
@@ -3584,7 +3590,7 @@ var init_BottomSheetEngine = __esm({
|
|
|
3584
3590
|
var baseStyles;
|
|
3585
3591
|
var init_baseStyles = __esm({
|
|
3586
3592
|
"src/web-component/baseStyles.ts"() {
|
|
3587
|
-
baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:8px 16px 4px;cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:0 16px 16px}.bs-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:
|
|
3593
|
+
baseStyles = `:where(.bs-root){--bs-surface-d:#ffffff;--bs-surface-border-d:rgba(225,227,237,1);--bs-radius-d:20px;--bs-handle-color-d:rgba(26,22,20,0.3);--bs-handle-width:40px;--bs-handle-height:5px;--bs-z-backdrop:90;--bs-z-sheet:100;--bs-header-min-height:80px;--bs-backdrop-color-d:rgba(0,0,0,0.5);--bs-scrim-color-d:transparent;--bs-scrim-blur:0px;--bs-z-scrim:calc(var(--bs-z-sheet) - 1);--bs-size:0px;--bs-progress:0}.bs-backdrop{position:fixed;inset:0;background:var(--bs-backdrop-color,var(--bs-backdrop-color-d));opacity:0;pointer-events:none;z-index:var(--bs-z-backdrop);transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-backdrop,.bs-root[data-animating="true"] .bs-backdrop{transition:none}.bs-sheet{position:fixed;background:var(--bs-surface,var(--bs-surface-d));box-shadow:var(--bs-shadow,var(--bs-shadow-auto,none));z-index:var(--bs-z-sheet);pointer-events:auto;overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;user-select:none;overscroll-behavior:contain}.bs-sheet[data-mode="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));padding-bottom:env(safe-area-inset-bottom);--bs-shadow-auto:0 calc(var(--bs-progress,0) * -2px - 3px) calc(var(--bs-progress,0) * 18px + 12px) rgba(0,0,0,calc(var(--bs-progress,0) * 0.15 + 0.12))}.bs-sheet[data-mode="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom:1px solid var(--bs-surface-border,var(--bs-surface-border-d));flex-direction:column-reverse;--bs-shadow-auto:0 3px 12px rgba(0,0,0,0.12);padding-top:env(safe-area-inset-top)}.bs-sheet[data-mode="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-right-radius:var(--bs-radius,var(--bs-radius-d));border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--bs-radius,var(--bs-radius-d));border-bottom-left-radius:var(--bs-radius,var(--bs-radius-d));border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d));--bs-shadow-auto:-3px 0 12px rgba(0,0,0,0.12)}.bs-sheet[data-mode="left"] .bs-content{padding-right:36px}.bs-sheet[data-mode="right"] .bs-content{padding-left:36px}.bs-handle{flex-shrink:0;min-height:44px;display:flex;flex-direction:column;justify-content:center;padding:8px 16px 4px;cursor:grab;touch-action:none;user-select:none;background:var(--bs-surface,var(--bs-surface-d));-webkit-tap-highlight-color:transparent;outline:none;position:relative}.bs-handle:active{cursor:grabbing}.bs-handle:focus-visible{outline:2px solid currentColor;outline-offset:-2px;border-radius:var(--bs-radius,var(--bs-radius-d))}.bs-handle::before{content:"";display:block;width:var(--bs-handle-width);height:var(--bs-handle-height);background:var(--bs-handle-color,var(--bs-handle-color-d));border-radius:calc(var(--bs-handle-height) / 2);margin:0 auto 8px;transition:width 0.15s ease,background 0.15s ease,transform 0.15s ease;pointer-events:none}.bs-sheet[data-mode="left"] .bs-handle,.bs-sheet[data-mode="right"] .bs-handle{position:absolute;top:0;bottom:0;width:28px;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bs-surface,var(--bs-surface-d));z-index:1;overflow:hidden}.bs-sheet[data-mode="left"] .bs-handle>*,.bs-sheet[data-mode="right"] .bs-handle>*{display:none}.bs-sheet[data-mode="left"] .bs-handle{right:0;border-left:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="right"] .bs-handle{left:0;border-right:1px solid var(--bs-surface-border,var(--bs-surface-border-d))}.bs-sheet[data-mode="left"] .bs-handle::before,.bs-sheet[data-mode="right"] .bs-handle::before{width:var(--bs-handle-height);height:var(--bs-handle-width);margin:0}.bs-sheet:hover .bs-handle::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 15%)}.bs-handle:active::before{background:color-mix(in oklab,var(--bs-handle-color,var(--bs-handle-color-d)),#000 35%);transform:scaleX(1.15)}.bs-handle.bs-handle--ticks::after{content:"";display:block;position:absolute;left:50%;bottom:6px;transform:translateX(-50%);width:calc(var(--bs-handle-width) * 2);height:3px;background-image:radial-gradient( circle,var(--bs-handle-color,var(--bs-handle-color-d)) 0 1.5px,transparent 1.6px );background-size:8px 3px;background-repeat:repeat-x;background-position:center;opacity:0;transition:opacity 0.18s ease-out;pointer-events:none}.bs-root[data-dragging="true"] .bs-handle.bs-handle--ticks::after{opacity:0.4}.bs-sheet[data-mode="top"] .bs-handle.bs-handle--ticks::after{bottom:auto;top:6px}.bs-sheet[data-mode="left"] .bs-handle.bs-handle--ticks::after,.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:3px;height:calc(var(--bs-handle-width) * 2);background-size:3px 8px;background-repeat:repeat-y;margin-left:calc(var(--bs-handle-height) + 6px)}.bs-sheet[data-mode="right"] .bs-handle.bs-handle--ticks::after{margin-left:calc(-1 * (var(--bs-handle-height) + 6px))}.bs-content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;user-select:text;padding:0 16px 16px}.bs-footer{flex:0 0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--bs-surface-border,var(--bs-surface-border-d));background:var(--bs-surface,var(--bs-surface-d))}.bs-screen{position:absolute;inset:0;pointer-events:none;z-index:var(--bs-z-scrim);background:var(--bs-scrim-color,var(--bs-scrim-color-d));transition:opacity 0.24s cubic-bezier(0.22,1,0.36,1);will-change:opacity}.bs-root[data-dragging="true"] .bs-screen,.bs-root[data-animating="true"] .bs-screen{transition:none}.bs-scrim-overlay{z-index:calc(var(--bs-z-sheet) + 1);pointer-events:none}.bs-button-slot{position:fixed;z-index:calc(var(--bs-z-sheet) + 1);pointer-events:auto}.bs-button-slot[data-side="left"]{left:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-side="right"]{right:16px;bottom:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="top"]{bottom:auto;top:calc(var(--bs-size,0px) + 12px)}.bs-button-slot[data-mode="left"]{left:calc(var(--bs-size,0px) + 12px);right:auto;bottom:auto;top:16px}.bs-button-slot[data-mode="right"]{right:calc(var(--bs-size,0px) + 12px);left:auto;bottom:auto;top:16px}@media (prefers-reduced-motion:reduce){.bs-backdrop,.bs-handle::before,.bs-button-slot[data-side="left"],.bs-button-slot[data-side="right"]{transition:none !important}}@media (prefers-color-scheme:dark){:where(.bs-root){--bs-surface-d:#1a1a1d;--bs-surface-border-d:rgba(255,255,255,0.08);--bs-handle-color-d:rgba(255,255,255,0.45);--bs-shadow-auto:0 -3px 16px rgba(0,0,0,0.5)}}.bs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:where(.ovl-root){--ovl-surface:var(--bs-surface,var(--bs-surface-d,#ffffff));--ovl-surface-border:var(--bs-surface-border,var(--bs-surface-border-d,rgba(0,0,0,0.08)));--ovl-shadow:0 -8px 40px rgba(0,0,0,0.35);--ovl-radius:var(--bs-radius,var(--bs-radius-d,20px));--ovl-backdrop-color:rgba(0,0,0,0.5);--ovl-z-backdrop:200;--ovl-z-panel:201}.ovl-backdrop{position:fixed;inset:0;background:var(--ovl-backdrop-color);opacity:0;pointer-events:none;z-index:var(--ovl-z-backdrop)}.ovl-panel{position:fixed;background:var(--ovl-surface);box-shadow:var(--ovl-shadow);z-index:var(--ovl-z-panel);-webkit-tap-highlight-color:transparent;outline:none;transition:transform 0.32s cubic-bezier(0.29,1.24,0.84,0.99),opacity 0.32s ease-out}.ovl-panel[data-state="open"]{transform:translate3d(0,0,0);opacity:1}@starting-style{.ovl-panel[data-edge="bottom"][data-state="open"]{transform:translate3d(0,100%,0);opacity:0}.ovl-panel[data-edge="top"][data-state="open"]{transform:translate3d(0,-100%,0);opacity:0}.ovl-panel[data-edge="left"][data-state="open"]{transform:translate3d(-100%,0,0);opacity:0}.ovl-panel[data-edge="right"][data-state="open"]{transform:translate3d(100%,0,0);opacity:0}}.ovl-panel[data-edge="bottom"]{left:0;right:0;bottom:0;width:100%;border-top-left-radius:var(--ovl-radius);border-top-right-radius:var(--ovl-radius);border-top:1px solid var(--ovl-surface-border);padding-bottom:env(safe-area-inset-bottom)}.ovl-panel[data-edge="top"]{left:0;right:0;top:0;width:100%;border-bottom-left-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-bottom:1px solid var(--ovl-surface-border);padding-top:env(safe-area-inset-top)}.ovl-panel[data-edge="left"]{top:0;bottom:0;left:0;height:100%;border-top-right-radius:var(--ovl-radius);border-bottom-right-radius:var(--ovl-radius);border-right:1px solid var(--ovl-surface-border)}.ovl-panel[data-edge="right"]{top:0;bottom:0;right:0;height:100%;border-top-left-radius:var(--ovl-radius);border-bottom-left-radius:var(--ovl-radius);border-left:1px solid var(--ovl-surface-border)}@media (prefers-reduced-motion:reduce){.ovl-panel,.ovl-backdrop{transition:none !important}}`;
|
|
3588
3594
|
}
|
|
3589
3595
|
});
|
|
3590
3596
|
|
|
@@ -3751,8 +3757,8 @@ var init_BottomSheetElement = __esm({
|
|
|
3751
3757
|
announcer.setAttribute("aria-live", "polite");
|
|
3752
3758
|
announcer.setAttribute("aria-atomic", "true");
|
|
3753
3759
|
announcer.style.cssText = "position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);";
|
|
3754
|
-
sheet.append(
|
|
3755
|
-
root.append(backdrop, screen, sheet, announcer);
|
|
3760
|
+
sheet.append(handle, content);
|
|
3761
|
+
root.append(backdrop, screen, sheet, leftButton, rightButton, announcer);
|
|
3756
3762
|
const fragment = document.createDocumentFragment();
|
|
3757
3763
|
fragment.appendChild(root);
|
|
3758
3764
|
return {
|
|
@@ -3897,6 +3903,8 @@ var init_BottomSheetElement = __esm({
|
|
|
3897
3903
|
const { sheet, handle, content, backdrop, announcer } = this.refs;
|
|
3898
3904
|
const mode = parseMode(this.getAttribute(ATTR_MODE));
|
|
3899
3905
|
sheet.setAttribute("data-mode", mode);
|
|
3906
|
+
this.refs.leftButton.setAttribute("data-mode", mode);
|
|
3907
|
+
this.refs.rightButton.setAttribute("data-mode", mode);
|
|
3900
3908
|
const focusTrap = this.getAttribute(ATTR_FOCUS_TRAP) === "true";
|
|
3901
3909
|
if (focusTrap) {
|
|
3902
3910
|
sheet.setAttribute("aria-modal", "true");
|
package/dist/index.cjs
CHANGED
|
@@ -3278,6 +3278,9 @@ var BottomSheetEngine = class {
|
|
|
3278
3278
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3279
3279
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3280
3280
|
}
|
|
3281
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3282
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3283
|
+
}
|
|
3281
3284
|
}
|
|
3282
3285
|
const progress = this.computeProgress(size);
|
|
3283
3286
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3289,6 +3292,9 @@ var BottomSheetEngine = class {
|
|
|
3289
3292
|
if (this.anchorHost) {
|
|
3290
3293
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3291
3294
|
}
|
|
3295
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3296
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3297
|
+
}
|
|
3292
3298
|
}
|
|
3293
3299
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3294
3300
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/index.js
CHANGED
|
@@ -3276,6 +3276,9 @@ var BottomSheetEngine = class {
|
|
|
3276
3276
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3277
3277
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3278
3278
|
}
|
|
3279
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3280
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3281
|
+
}
|
|
3279
3282
|
}
|
|
3280
3283
|
const progress = this.computeProgress(size);
|
|
3281
3284
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3287,6 +3290,9 @@ var BottomSheetEngine = class {
|
|
|
3287
3290
|
if (this.anchorHost) {
|
|
3288
3291
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3289
3292
|
}
|
|
3293
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3294
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3295
|
+
}
|
|
3290
3296
|
}
|
|
3291
3297
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3292
3298
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/qwik.cjs
CHANGED
|
@@ -3274,6 +3274,9 @@ var BottomSheetEngine = class {
|
|
|
3274
3274
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3275
3275
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3276
3276
|
}
|
|
3277
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3278
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3279
|
+
}
|
|
3277
3280
|
}
|
|
3278
3281
|
const progress = this.computeProgress(size);
|
|
3279
3282
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3285,6 +3288,9 @@ var BottomSheetEngine = class {
|
|
|
3285
3288
|
if (this.anchorHost) {
|
|
3286
3289
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3287
3290
|
}
|
|
3291
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3292
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3293
|
+
}
|
|
3288
3294
|
}
|
|
3289
3295
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3290
3296
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/qwik.js
CHANGED
|
@@ -3272,6 +3272,9 @@ var BottomSheetEngine = class {
|
|
|
3272
3272
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3273
3273
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3274
3274
|
}
|
|
3275
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3276
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3277
|
+
}
|
|
3275
3278
|
}
|
|
3276
3279
|
const progress = this.computeProgress(size);
|
|
3277
3280
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3283,6 +3286,9 @@ var BottomSheetEngine = class {
|
|
|
3283
3286
|
if (this.anchorHost) {
|
|
3284
3287
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3285
3288
|
}
|
|
3289
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3290
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3291
|
+
}
|
|
3286
3292
|
}
|
|
3287
3293
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3288
3294
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/react.cjs
CHANGED
|
@@ -3281,6 +3281,9 @@ var BottomSheetEngine = class {
|
|
|
3281
3281
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3282
3282
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3283
3283
|
}
|
|
3284
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3285
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3286
|
+
}
|
|
3284
3287
|
}
|
|
3285
3288
|
const progress = this.computeProgress(size);
|
|
3286
3289
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3292,6 +3295,9 @@ var BottomSheetEngine = class {
|
|
|
3292
3295
|
if (this.anchorHost) {
|
|
3293
3296
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3294
3297
|
}
|
|
3298
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3299
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3300
|
+
}
|
|
3295
3301
|
}
|
|
3296
3302
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3297
3303
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
@@ -3706,8 +3712,6 @@ var BottomSheet = react.forwardRef(
|
|
|
3706
3712
|
"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
|
|
3707
3713
|
"aria-labelledby": ariaLabelledBy,
|
|
3708
3714
|
children: [
|
|
3709
|
-
leftButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-button-slot", "data-side": "left", children: leftButton }),
|
|
3710
|
-
rightButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bs-button-slot", "data-side": "right", children: rightButton }),
|
|
3711
3715
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3712
3716
|
"div",
|
|
3713
3717
|
{
|
|
@@ -3734,6 +3738,24 @@ var BottomSheet = react.forwardRef(
|
|
|
3734
3738
|
]
|
|
3735
3739
|
}
|
|
3736
3740
|
),
|
|
3741
|
+
leftButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3742
|
+
"div",
|
|
3743
|
+
{
|
|
3744
|
+
className: "bs-button-slot",
|
|
3745
|
+
"data-side": "left",
|
|
3746
|
+
"data-mode": engineOpts.mode ?? "bottom",
|
|
3747
|
+
children: leftButton
|
|
3748
|
+
}
|
|
3749
|
+
),
|
|
3750
|
+
rightButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3751
|
+
"div",
|
|
3752
|
+
{
|
|
3753
|
+
className: "bs-button-slot",
|
|
3754
|
+
"data-side": "right",
|
|
3755
|
+
"data-mode": engineOpts.mode ?? "bottom",
|
|
3756
|
+
children: rightButton
|
|
3757
|
+
}
|
|
3758
|
+
),
|
|
3737
3759
|
anchorHosts.map(
|
|
3738
3760
|
(host, i) => anchors?.[i] ? reactDom.createPortal(anchors[i].node, host) : null
|
|
3739
3761
|
),
|
package/dist/react.js
CHANGED
|
@@ -3279,6 +3279,9 @@ var BottomSheetEngine = class {
|
|
|
3279
3279
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3280
3280
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3281
3281
|
}
|
|
3282
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3283
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3284
|
+
}
|
|
3282
3285
|
}
|
|
3283
3286
|
const progress = this.computeProgress(size);
|
|
3284
3287
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3290,6 +3293,9 @@ var BottomSheetEngine = class {
|
|
|
3290
3293
|
if (this.anchorHost) {
|
|
3291
3294
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3292
3295
|
}
|
|
3296
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3297
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3298
|
+
}
|
|
3293
3299
|
}
|
|
3294
3300
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3295
3301
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
@@ -3704,8 +3710,6 @@ var BottomSheet = forwardRef(
|
|
|
3704
3710
|
"aria-label": ariaLabelledBy ? void 0 : ariaLabel,
|
|
3705
3711
|
"aria-labelledby": ariaLabelledBy,
|
|
3706
3712
|
children: [
|
|
3707
|
-
leftButton && /* @__PURE__ */ jsx("div", { className: "bs-button-slot", "data-side": "left", children: leftButton }),
|
|
3708
|
-
rightButton && /* @__PURE__ */ jsx("div", { className: "bs-button-slot", "data-side": "right", children: rightButton }),
|
|
3709
3713
|
/* @__PURE__ */ jsx(
|
|
3710
3714
|
"div",
|
|
3711
3715
|
{
|
|
@@ -3732,6 +3736,24 @@ var BottomSheet = forwardRef(
|
|
|
3732
3736
|
]
|
|
3733
3737
|
}
|
|
3734
3738
|
),
|
|
3739
|
+
leftButton && /* @__PURE__ */ jsx(
|
|
3740
|
+
"div",
|
|
3741
|
+
{
|
|
3742
|
+
className: "bs-button-slot",
|
|
3743
|
+
"data-side": "left",
|
|
3744
|
+
"data-mode": engineOpts.mode ?? "bottom",
|
|
3745
|
+
children: leftButton
|
|
3746
|
+
}
|
|
3747
|
+
),
|
|
3748
|
+
rightButton && /* @__PURE__ */ jsx(
|
|
3749
|
+
"div",
|
|
3750
|
+
{
|
|
3751
|
+
className: "bs-button-slot",
|
|
3752
|
+
"data-side": "right",
|
|
3753
|
+
"data-mode": engineOpts.mode ?? "bottom",
|
|
3754
|
+
children: rightButton
|
|
3755
|
+
}
|
|
3756
|
+
),
|
|
3735
3757
|
anchorHosts.map(
|
|
3736
3758
|
(host, i) => anchors?.[i] ? createPortal(anchors[i].node, host) : null
|
|
3737
3759
|
),
|
package/dist/solid.cjs
CHANGED
|
@@ -3274,6 +3274,9 @@ var BottomSheetEngine = class {
|
|
|
3274
3274
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3275
3275
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3276
3276
|
}
|
|
3277
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3278
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3279
|
+
}
|
|
3277
3280
|
}
|
|
3278
3281
|
const progress = this.computeProgress(size);
|
|
3279
3282
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3285,6 +3288,9 @@ var BottomSheetEngine = class {
|
|
|
3285
3288
|
if (this.anchorHost) {
|
|
3286
3289
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3287
3290
|
}
|
|
3291
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3292
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3293
|
+
}
|
|
3288
3294
|
}
|
|
3289
3295
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3290
3296
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/solid.js
CHANGED
|
@@ -3272,6 +3272,9 @@ var BottomSheetEngine = class {
|
|
|
3272
3272
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3273
3273
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3274
3274
|
}
|
|
3275
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3276
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3277
|
+
}
|
|
3275
3278
|
}
|
|
3276
3279
|
const progress = this.computeProgress(size);
|
|
3277
3280
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3283,6 +3286,9 @@ var BottomSheetEngine = class {
|
|
|
3283
3286
|
if (this.anchorHost) {
|
|
3284
3287
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3285
3288
|
}
|
|
3289
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3290
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3291
|
+
}
|
|
3286
3292
|
}
|
|
3287
3293
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3288
3294
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/solid.source.jsx
CHANGED
|
@@ -3273,6 +3273,9 @@ var BottomSheetEngine = class {
|
|
|
3273
3273
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3274
3274
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3275
3275
|
}
|
|
3276
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3277
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3278
|
+
}
|
|
3276
3279
|
}
|
|
3277
3280
|
const progress = this.computeProgress(size);
|
|
3278
3281
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3284,6 +3287,9 @@ var BottomSheetEngine = class {
|
|
|
3284
3287
|
if (this.anchorHost) {
|
|
3285
3288
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3286
3289
|
}
|
|
3290
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3291
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3292
|
+
}
|
|
3287
3293
|
}
|
|
3288
3294
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3289
3295
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/styles.css
CHANGED
|
@@ -282,21 +282,33 @@
|
|
|
282
282
|
}
|
|
283
283
|
|
|
284
284
|
.bs-button-slot {
|
|
285
|
-
position:
|
|
285
|
+
position: fixed;
|
|
286
286
|
z-index: calc(var(--bs-z-sheet) + 1);
|
|
287
287
|
pointer-events: auto;
|
|
288
288
|
}
|
|
289
289
|
.bs-button-slot[data-side="left"] {
|
|
290
290
|
left: 16px;
|
|
291
|
-
bottom: calc(
|
|
291
|
+
bottom: calc(var(--bs-size, 0px) + 12px);
|
|
292
292
|
}
|
|
293
293
|
.bs-button-slot[data-side="right"] {
|
|
294
294
|
right: 16px;
|
|
295
|
-
bottom: calc(
|
|
295
|
+
bottom: calc(var(--bs-size, 0px) + 12px);
|
|
296
|
+
}
|
|
297
|
+
.bs-button-slot[data-mode="top"] {
|
|
298
|
+
bottom: auto;
|
|
299
|
+
top: calc(var(--bs-size, 0px) + 12px);
|
|
300
|
+
}
|
|
301
|
+
.bs-button-slot[data-mode="left"] {
|
|
302
|
+
left: calc(var(--bs-size, 0px) + 12px);
|
|
303
|
+
right: auto;
|
|
304
|
+
bottom: auto;
|
|
305
|
+
top: 16px;
|
|
296
306
|
}
|
|
297
|
-
.bs-
|
|
307
|
+
.bs-button-slot[data-mode="right"] {
|
|
308
|
+
right: calc(var(--bs-size, 0px) + 12px);
|
|
309
|
+
left: auto;
|
|
298
310
|
bottom: auto;
|
|
299
|
-
top:
|
|
311
|
+
top: 16px;
|
|
300
312
|
}
|
|
301
313
|
|
|
302
314
|
@media (prefers-reduced-motion: reduce) {
|
package/dist/svelte-core.cjs
CHANGED
|
@@ -3273,6 +3273,9 @@ var BottomSheetEngine = class {
|
|
|
3273
3273
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3274
3274
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3275
3275
|
}
|
|
3276
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3277
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3278
|
+
}
|
|
3276
3279
|
}
|
|
3277
3280
|
const progress = this.computeProgress(size);
|
|
3278
3281
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3284,6 +3287,9 @@ var BottomSheetEngine = class {
|
|
|
3284
3287
|
if (this.anchorHost) {
|
|
3285
3288
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3286
3289
|
}
|
|
3290
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3291
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3292
|
+
}
|
|
3287
3293
|
}
|
|
3288
3294
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3289
3295
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
package/dist/svelte-core.js
CHANGED
|
@@ -3271,6 +3271,9 @@ var BottomSheetEngine = class {
|
|
|
3271
3271
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3272
3272
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3273
3273
|
}
|
|
3274
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3275
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3276
|
+
}
|
|
3274
3277
|
}
|
|
3275
3278
|
const progress = this.computeProgress(size);
|
|
3276
3279
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3282,6 +3285,9 @@ var BottomSheetEngine = class {
|
|
|
3282
3285
|
if (this.anchorHost) {
|
|
3283
3286
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3284
3287
|
}
|
|
3288
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3289
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3290
|
+
}
|
|
3285
3291
|
}
|
|
3286
3292
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3287
3293
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
@@ -273,16 +273,6 @@
|
|
|
273
273
|
aria-modal={focusTrap ? "true" : undefined}
|
|
274
274
|
aria-label={ariaLabel}
|
|
275
275
|
>
|
|
276
|
-
{#if leftButton}
|
|
277
|
-
<div class="bs-button-slot" data-side="left">
|
|
278
|
-
{@render leftButton()}
|
|
279
|
-
</div>
|
|
280
|
-
{/if}
|
|
281
|
-
{#if rightButton}
|
|
282
|
-
<div class="bs-button-slot" data-side="right">
|
|
283
|
-
{@render rightButton()}
|
|
284
|
-
</div>
|
|
285
|
-
{/if}
|
|
286
276
|
<div
|
|
287
277
|
class="bs-handle"
|
|
288
278
|
bind:this={handleEl}
|
|
@@ -305,4 +295,14 @@
|
|
|
305
295
|
{viewState.activeId}
|
|
306
296
|
</span>
|
|
307
297
|
</section>
|
|
298
|
+
{#if leftButton}
|
|
299
|
+
<div class="bs-button-slot" data-side="left" data-mode={mode}>
|
|
300
|
+
{@render leftButton()}
|
|
301
|
+
</div>
|
|
302
|
+
{/if}
|
|
303
|
+
{#if rightButton}
|
|
304
|
+
<div class="bs-button-slot" data-side="right" data-mode={mode}>
|
|
305
|
+
{@render rightButton()}
|
|
306
|
+
</div>
|
|
307
|
+
{/if}
|
|
308
308
|
</div>
|
package/dist/svelte.cjs
CHANGED
|
@@ -3295,6 +3295,9 @@ var BottomSheetEngine = class {
|
|
|
3295
3295
|
if (this.anchorHost && this.anchorHost !== this.scrimParent) {
|
|
3296
3296
|
this.anchorHost.style.setProperty("--bs-size", `${size}px`);
|
|
3297
3297
|
}
|
|
3298
|
+
if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
|
|
3299
|
+
this.rootEl.style.setProperty("--bs-size", `${size}px`);
|
|
3300
|
+
}
|
|
3298
3301
|
}
|
|
3299
3302
|
const progress = this.computeProgress(size);
|
|
3300
3303
|
const progressChanged = this.progressWriteSentinel.shouldWrite(
|
|
@@ -3306,6 +3309,9 @@ var BottomSheetEngine = class {
|
|
|
3306
3309
|
if (this.anchorHost) {
|
|
3307
3310
|
this.anchorHost.style.setProperty("--bs-progress", String(progress));
|
|
3308
3311
|
}
|
|
3312
|
+
if (this.rootEl && this.rootEl !== this.anchorHost) {
|
|
3313
|
+
this.rootEl.style.setProperty("--bs-progress", String(progress));
|
|
3314
|
+
}
|
|
3309
3315
|
}
|
|
3310
3316
|
this.scrim.applyOpacity(progress, progressChanged);
|
|
3311
3317
|
if (progressChanged && this.bus.listenerCount("progress") > 0) {
|
|
@@ -3432,9 +3438,9 @@ function createBottomSheet(opts) {
|
|
|
3432
3438
|
};
|
|
3433
3439
|
}
|
|
3434
3440
|
var root_1 = $2__namespace.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
|
|
3435
|
-
var
|
|
3436
|
-
var
|
|
3437
|
-
var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"
|
|
3441
|
+
var root_5 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
|
|
3442
|
+
var root_6 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
|
|
3443
|
+
var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet"><!></div> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
|
|
3438
3444
|
function BottomSheet($$anchor, $$props) {
|
|
3439
3445
|
$2__namespace.push($$props, true);
|
|
3440
3446
|
let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), persistent = $2__namespace.prop($$props, "persistent", 3, false), disableClose = $2__namespace.prop($$props, "disableClose", 3, false), disableDrag = $2__namespace.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2__namespace.prop($$props, "closeOnRouteChange", 3, false), openProp = $2__namespace.prop($$props, "open", 15), snap = $2__namespace.prop($$props, "snap", 15), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
|
|
@@ -3613,68 +3619,70 @@ function BottomSheet($$anchor, $$props) {
|
|
|
3613
3619
|
$2__namespace.reset(div_2);
|
|
3614
3620
|
$2__namespace.bind_this(div_2, ($$value) => $2__namespace.set(screenEl, $$value), () => $2__namespace.get(screenEl));
|
|
3615
3621
|
var section = $2__namespace.sibling(div_2, 2);
|
|
3616
|
-
var
|
|
3622
|
+
var div_3 = $2__namespace.child(section);
|
|
3623
|
+
$2__namespace.set_attribute(div_3, "aria-valuemin", 0);
|
|
3624
|
+
var node_3 = $2__namespace.child(div_3);
|
|
3617
3625
|
{
|
|
3618
3626
|
var consequent_2 = ($$anchor2) => {
|
|
3619
|
-
var
|
|
3620
|
-
var node_4 = $2__namespace.
|
|
3621
|
-
$2__namespace.snippet(node_4, () => $$props.
|
|
3622
|
-
$2__namespace.
|
|
3623
|
-
$2__namespace.append($$anchor2, div_3);
|
|
3627
|
+
var fragment_1 = $2__namespace.comment();
|
|
3628
|
+
var node_4 = $2__namespace.first_child(fragment_1);
|
|
3629
|
+
$2__namespace.snippet(node_4, () => $$props.header, () => $2__namespace.get(viewState));
|
|
3630
|
+
$2__namespace.append($$anchor2, fragment_1);
|
|
3624
3631
|
};
|
|
3625
3632
|
$2__namespace.if(node_3, ($$render) => {
|
|
3626
|
-
if ($$props.
|
|
3633
|
+
if ($$props.header) $$render(consequent_2);
|
|
3627
3634
|
});
|
|
3628
3635
|
}
|
|
3629
|
-
|
|
3636
|
+
$2__namespace.reset(div_3);
|
|
3637
|
+
$2__namespace.bind_this(div_3, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
|
|
3638
|
+
var div_4 = $2__namespace.sibling(div_3, 2);
|
|
3639
|
+
var node_5 = $2__namespace.child(div_4);
|
|
3630
3640
|
{
|
|
3631
3641
|
var consequent_3 = ($$anchor2) => {
|
|
3632
|
-
var
|
|
3633
|
-
var node_6 = $2__namespace.
|
|
3634
|
-
$2__namespace.snippet(node_6, () => $$props.
|
|
3635
|
-
$2__namespace.
|
|
3636
|
-
$2__namespace.append($$anchor2, div_4);
|
|
3642
|
+
var fragment_2 = $2__namespace.comment();
|
|
3643
|
+
var node_6 = $2__namespace.first_child(fragment_2);
|
|
3644
|
+
$2__namespace.snippet(node_6, () => $$props.children);
|
|
3645
|
+
$2__namespace.append($$anchor2, fragment_2);
|
|
3637
3646
|
};
|
|
3638
3647
|
$2__namespace.if(node_5, ($$render) => {
|
|
3639
|
-
if ($$props.
|
|
3648
|
+
if ($$props.children) $$render(consequent_3);
|
|
3640
3649
|
});
|
|
3641
3650
|
}
|
|
3642
|
-
|
|
3643
|
-
$2__namespace.
|
|
3644
|
-
var
|
|
3651
|
+
$2__namespace.reset(div_4);
|
|
3652
|
+
$2__namespace.bind_this(div_4, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
|
|
3653
|
+
var span = $2__namespace.sibling(div_4, 2);
|
|
3654
|
+
var text = $2__namespace.child(span, true);
|
|
3655
|
+
$2__namespace.reset(span);
|
|
3656
|
+
$2__namespace.reset(section);
|
|
3657
|
+
$2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
|
|
3658
|
+
var node_7 = $2__namespace.sibling(section, 2);
|
|
3645
3659
|
{
|
|
3646
3660
|
var consequent_4 = ($$anchor2) => {
|
|
3647
|
-
var
|
|
3648
|
-
var node_8 = $2__namespace.
|
|
3649
|
-
$2__namespace.snippet(node_8, () => $$props.
|
|
3650
|
-
$2__namespace.
|
|
3661
|
+
var div_5 = root_5();
|
|
3662
|
+
var node_8 = $2__namespace.child(div_5);
|
|
3663
|
+
$2__namespace.snippet(node_8, () => $$props.leftButton);
|
|
3664
|
+
$2__namespace.reset(div_5);
|
|
3665
|
+
$2__namespace.template_effect(() => $2__namespace.set_attribute(div_5, "data-mode", mode()));
|
|
3666
|
+
$2__namespace.append($$anchor2, div_5);
|
|
3651
3667
|
};
|
|
3652
3668
|
$2__namespace.if(node_7, ($$render) => {
|
|
3653
|
-
if ($$props.
|
|
3669
|
+
if ($$props.leftButton) $$render(consequent_4);
|
|
3654
3670
|
});
|
|
3655
3671
|
}
|
|
3656
|
-
$2__namespace.
|
|
3657
|
-
$2__namespace.bind_this(div_5, ($$value) => $2__namespace.set(handleEl, $$value), () => $2__namespace.get(handleEl));
|
|
3658
|
-
var div_6 = $2__namespace.sibling(div_5, 2);
|
|
3659
|
-
var node_9 = $2__namespace.child(div_6);
|
|
3672
|
+
var node_9 = $2__namespace.sibling(node_7, 2);
|
|
3660
3673
|
{
|
|
3661
3674
|
var consequent_5 = ($$anchor2) => {
|
|
3662
|
-
var
|
|
3663
|
-
var node_10 = $2__namespace.
|
|
3664
|
-
$2__namespace.snippet(node_10, () => $$props.
|
|
3665
|
-
$2__namespace.
|
|
3675
|
+
var div_6 = root_6();
|
|
3676
|
+
var node_10 = $2__namespace.child(div_6);
|
|
3677
|
+
$2__namespace.snippet(node_10, () => $$props.rightButton);
|
|
3678
|
+
$2__namespace.reset(div_6);
|
|
3679
|
+
$2__namespace.template_effect(() => $2__namespace.set_attribute(div_6, "data-mode", mode()));
|
|
3680
|
+
$2__namespace.append($$anchor2, div_6);
|
|
3666
3681
|
};
|
|
3667
3682
|
$2__namespace.if(node_9, ($$render) => {
|
|
3668
|
-
if ($$props.
|
|
3683
|
+
if ($$props.rightButton) $$render(consequent_5);
|
|
3669
3684
|
});
|
|
3670
3685
|
}
|
|
3671
|
-
$2__namespace.reset(div_6);
|
|
3672
|
-
$2__namespace.bind_this(div_6, ($$value) => $2__namespace.set(contentEl, $$value), () => $2__namespace.get(contentEl));
|
|
3673
|
-
var span = $2__namespace.sibling(div_6, 2);
|
|
3674
|
-
var text = $2__namespace.child(span, true);
|
|
3675
|
-
$2__namespace.reset(span);
|
|
3676
|
-
$2__namespace.reset(section);
|
|
3677
|
-
$2__namespace.bind_this(section, ($$value) => $2__namespace.set(sheetEl, $$value), () => $2__namespace.get(sheetEl));
|
|
3678
3686
|
$2__namespace.reset(div);
|
|
3679
3687
|
$2__namespace.template_effect(
|
|
3680
3688
|
($0, $1) => {
|
|
@@ -3682,10 +3690,10 @@ function BottomSheet($$anchor, $$props) {
|
|
|
3682
3690
|
$2__namespace.set_attribute(section, "data-active", $2__namespace.get(viewState).activeId);
|
|
3683
3691
|
$2__namespace.set_attribute(section, "aria-modal", focusTrap() ? "true" : void 0);
|
|
3684
3692
|
$2__namespace.set_attribute(section, "aria-label", ariaLabel());
|
|
3685
|
-
$2__namespace.set_attribute(
|
|
3686
|
-
$2__namespace.set_attribute(
|
|
3687
|
-
$2__namespace.set_attribute(
|
|
3688
|
-
$2__namespace.set_attribute(
|
|
3693
|
+
$2__namespace.set_attribute(div_3, "aria-orientation", $2__namespace.get(isVerticalAxis) ? "vertical" : "horizontal");
|
|
3694
|
+
$2__namespace.set_attribute(div_3, "aria-valuemax", $0);
|
|
3695
|
+
$2__namespace.set_attribute(div_3, "aria-valuenow", $1);
|
|
3696
|
+
$2__namespace.set_attribute(div_3, "aria-valuetext", $2__namespace.get(viewState).activeId);
|
|
3689
3697
|
$2__namespace.set_text(text, $2__namespace.get(viewState).activeId);
|
|
3690
3698
|
},
|
|
3691
3699
|
[
|