@capgo/capacitor-sheets 8.0.9 → 8.0.10
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/angular/index.js +2 -2
- package/dist/angular/index.js.map +1 -1
- package/dist/angular/index.mjs +2 -2
- package/dist/angular/index.mjs.map +1 -1
- package/dist/{chunk-KKL5P5OQ.mjs → chunk-FHGK4I6L.mjs} +2 -2
- package/dist/{chunk-HC63VDD5.mjs → chunk-LY2DKBXN.mjs} +3 -3
- package/dist/chunk-LY2DKBXN.mjs.map +1 -0
- package/dist/{components-B6E2A52J.mjs → components-YSGBN2YD.mjs} +3 -3
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4 -4
- package/dist/react/index.js +2 -2
- package/dist/react/index.js.map +1 -1
- package/dist/react/index.mjs +2 -2
- package/dist/react/index.mjs.map +1 -1
- package/dist/solid/index.js +2 -2
- package/dist/solid/index.js.map +1 -1
- package/dist/solid/index.mjs +2 -2
- package/dist/solid/index.mjs.map +1 -1
- package/dist/{styles-7RPEV7K2.mjs → styles-VAFNQKVC.mjs} +2 -2
- package/dist/svelte/index.js +2 -2
- package/dist/svelte/index.js.map +1 -1
- package/dist/svelte/index.mjs +2 -2
- package/dist/svelte/index.mjs.map +1 -1
- package/dist/vue/index.js +2 -2
- package/dist/vue/index.js.map +1 -1
- package/dist/vue/index.mjs +2 -2
- package/dist/vue/index.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-HC63VDD5.mjs.map +0 -1
- /package/dist/{chunk-KKL5P5OQ.mjs.map → chunk-FHGK4I6L.mjs.map} +0 -0
- /package/dist/{components-B6E2A52J.mjs.map → components-YSGBN2YD.mjs.map} +0 -0
- /package/dist/{styles-7RPEV7K2.mjs.map → styles-VAFNQKVC.mjs.map} +0 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
injectCapSheetStyles
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-LY2DKBXN.mjs";
|
|
4
4
|
|
|
5
5
|
// src/core/utils.ts
|
|
6
6
|
var focusableSelector = [
|
|
@@ -1679,4 +1679,4 @@ export {
|
|
|
1679
1679
|
CapAutoFocusTarget,
|
|
1680
1680
|
CapSheetPortal
|
|
1681
1681
|
};
|
|
1682
|
-
//# sourceMappingURL=chunk-
|
|
1682
|
+
//# sourceMappingURL=chunk-FHGK4I6L.mjs.map
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
var STYLE_ID = "capgo-capacitor-sheets-styles";
|
|
3
3
|
var CSS = `
|
|
4
4
|
:root {
|
|
5
|
-
--cap-sheet-100-lvh-dvh-pct:
|
|
5
|
+
--cap-sheet-100-lvh-dvh-pct: 100%;
|
|
6
6
|
--cap-sheet-backdrop-color: rgb(0 0 0);
|
|
7
7
|
--cap-sheet-backdrop-opacity: 0.44;
|
|
8
8
|
--cap-sheet-radius: 1.5em;
|
|
@@ -22,7 +22,7 @@ var CSS = `
|
|
|
22
22
|
|
|
23
23
|
@supports (height: 1dvh) {
|
|
24
24
|
:root {
|
|
25
|
-
--cap-sheet-100-lvh-dvh-pct:
|
|
25
|
+
--cap-sheet-100-lvh-dvh-pct: 100dvh;
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
@@ -252,4 +252,4 @@ export {
|
|
|
252
252
|
CSS,
|
|
253
253
|
injectCapSheetStyles
|
|
254
254
|
};
|
|
255
|
-
//# sourceMappingURL=chunk-
|
|
255
|
+
//# sourceMappingURL=chunk-LY2DKBXN.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/core/styles.ts"],"sourcesContent":["const STYLE_ID = 'capgo-capacitor-sheets-styles';\n\nconst CSS = `\n:root {\n --cap-sheet-100-lvh-dvh-pct: 100%;\n --cap-sheet-backdrop-color: rgb(0 0 0);\n --cap-sheet-backdrop-opacity: 0.44;\n --cap-sheet-radius: 1.5em;\n --cap-sheet-handle-color: rgb(115 115 115);\n --cap-sheet-surface: Canvas;\n --cap-sheet-shadow: 0 0.5em 2.5em rgb(0 0 0 / 0.18);\n --cap-sheet-z-index: 1000;\n --cap-sheet-safe-area-top: max(env(safe-area-inset-top, 0em), var(--safe-area-inset-top, 0em));\n --cap-sheet-safe-area-bottom: max(env(safe-area-inset-bottom, 0em), var(--safe-area-inset-bottom, 0em));\n --cap-sheet-safe-area-left: max(env(safe-area-inset-left, 0em), var(--safe-area-inset-left, 0em));\n --cap-sheet-safe-area-right: max(env(safe-area-inset-right, 0em), var(--safe-area-inset-right, 0em));\n --cap-sheet-applied-safe-area-top: var(--cap-sheet-safe-area-top);\n --cap-sheet-applied-safe-area-bottom: var(--cap-sheet-safe-area-bottom);\n --cap-sheet-applied-safe-area-left: var(--cap-sheet-safe-area-left);\n --cap-sheet-applied-safe-area-right: var(--cap-sheet-safe-area-right);\n}\n\n@supports (height: 1dvh) {\n :root {\n --cap-sheet-100-lvh-dvh-pct: 100dvh;\n }\n}\n\ncap-sheet,\ncap-sheet-portal,\ncap-sheet-special-wrapper,\ncap-sheet-special-wrapper-content,\ncap-sheet-stack {\n display: contents;\n}\n\ncap-sheet-view {\n position: fixed;\n inset: 0;\n display: grid;\n width: 100%;\n height: var(--cap-sheet-100-lvh-dvh-pct);\n z-index: var(--cap-sheet-z-index);\n pointer-events: none;\n touch-action: none;\n overscroll-behavior: none;\n contain: layout style;\n box-sizing: border-box;\n padding-block-start: var(--cap-sheet-applied-safe-area-top, 0em);\n padding-block-end: calc(var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-keyboard-offset, 0em));\n padding-inline-start: var(--cap-sheet-applied-safe-area-left, 0em);\n padding-inline-end: var(--cap-sheet-applied-safe-area-right, 0em);\n}\n\ncap-sheet-view[hidden] {\n display: none !important;\n}\n\ncap-sheet-view[content-placement=\"top\"] {\n align-items: start;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"bottom\"],\ncap-sheet-view:not([content-placement]) {\n align-items: end;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"left\"] {\n align-items: center;\n justify-items: start;\n}\n\ncap-sheet-view[content-placement=\"right\"] {\n align-items: center;\n justify-items: end;\n}\n\ncap-sheet-view[content-placement=\"center\"] {\n align-items: center;\n justify-items: center;\n}\n\ncap-sheet-backdrop {\n position: absolute;\n inset: 0;\n display: block;\n background: var(--cap-sheet-backdrop-color);\n opacity: 0;\n pointer-events: none;\n touch-action: none;\n will-change: opacity;\n}\n\ncap-sheet-content {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: min(100%, 34em);\n max-height: 100%;\n color: CanvasText;\n background: var(--cap-sheet-surface);\n border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;\n box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);\n overflow: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n touch-action: pan-x pan-y;\n will-change: transform, opacity;\n -webkit-overflow-scrolling: touch;\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content {\n border-radius: 0 0 var(--cap-sheet-radius) var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: 0 var(--cap-sheet-radius) var(--cap-sheet-radius) 0;\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: var(--cap-sheet-radius) 0 0 var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"center\"] cap-sheet-content {\n width: min(90%, 30em);\n max-height: min(90%, 42em);\n border-radius: var(--cap-sheet-radius);\n}\n\ncap-sheet-bleeding-background {\n display: none;\n}\n\ncap-sheet-view[content-placement=\"bottom\"] cap-sheet-content[data-cap-sheet-bleeds],\ncap-sheet-view:not([content-placement]) cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 -8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: -8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-handle {\n box-sizing: border-box;\n display: grid;\n place-items: center;\n width: 100%;\n height: 2.25em;\n cursor: grab;\n touch-action: none;\n}\n\ncap-sheet-handle::before {\n content: \"\";\n display: block;\n width: 2.75em;\n height: 0.3125em;\n border-radius: 999em;\n background: var(--cap-sheet-handle-color);\n opacity: 0.65;\n}\n\ncap-sheet-handle:active {\n cursor: grabbing;\n}\n\ncap-sheet-title,\ncap-sheet-description {\n display: block;\n}\n\ncap-sheet-outlet {\n display: block;\n transform-origin: center;\n will-change: transform, opacity, filter;\n}\n\ncap-scroll {\n display: block;\n overflow: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n scroll-behavior: smooth;\n}\n\ncap-scroll[axis=\"x\"] {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncap-scroll[axis=\"y\"],\ncap-scroll:not([axis]) {\n overflow-x: hidden;\n overflow-y: auto;\n}\n\ncap-scroll-content {\n display: block;\n min-width: 100%;\n min-height: 100%;\n}\n\ncap-fixed {\n position: fixed;\n inset-inline: 0;\n z-index: calc(var(--cap-sheet-z-index) + 1);\n}\n\ncap-island,\ncap-external-overlay {\n display: contents;\n}\n\ncap-visually-hidden,\ncap-auto-focus-target[hidden-target] {\n position: absolute;\n width: 0.0625em;\n height: 0.0625em;\n margin: -0.0625em;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n padding: 0;\n}\n`;\n\n/** Injects the structural styles required by the sheet web components. */\nexport function injectCapSheetStyles(root: Document = document): void {\n if (root.getElementById(STYLE_ID)) return;\n\n const style = root.createElement('style');\n style.id = STYLE_ID;\n style.textContent = CSS;\n root.head.appendChild(style);\n}\n\nexport { CSS as CAP_SHEETS_CSS };\n"],"mappings":";AAAA,IAAM,WAAW;AAEjB,IAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkPL,SAAS,qBAAqB,OAAiB,UAAgB;AACpE,MAAI,KAAK,eAAe,QAAQ,EAAG;AAEnC,QAAM,QAAQ,KAAK,cAAc,OAAO;AACxC,QAAM,KAAK;AACX,QAAM,cAAc;AACpB,OAAK,KAAK,YAAY,KAAK;AAC7B;","names":[]}
|
|
@@ -20,8 +20,8 @@ import {
|
|
|
20
20
|
CapSheetTrigger,
|
|
21
21
|
CapSheetView,
|
|
22
22
|
CapVisuallyHidden
|
|
23
|
-
} from "./chunk-
|
|
24
|
-
import "./chunk-
|
|
23
|
+
} from "./chunk-FHGK4I6L.mjs";
|
|
24
|
+
import "./chunk-LY2DKBXN.mjs";
|
|
25
25
|
export {
|
|
26
26
|
CapAutoFocusTarget,
|
|
27
27
|
CapExternalOverlay,
|
|
@@ -45,4 +45,4 @@ export {
|
|
|
45
45
|
CapSheetView,
|
|
46
46
|
CapVisuallyHidden
|
|
47
47
|
};
|
|
48
|
-
//# sourceMappingURL=components-
|
|
48
|
+
//# sourceMappingURL=components-YSGBN2YD.mjs.map
|
package/dist/index.d.mts
CHANGED
|
@@ -470,7 +470,7 @@ declare class CapSheetPortal extends HTMLElement {
|
|
|
470
470
|
disconnectedCallback(): void;
|
|
471
471
|
}
|
|
472
472
|
|
|
473
|
-
declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct:
|
|
473
|
+
declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: 100%;\n --cap-sheet-backdrop-color: rgb(0 0 0);\n --cap-sheet-backdrop-opacity: 0.44;\n --cap-sheet-radius: 1.5em;\n --cap-sheet-handle-color: rgb(115 115 115);\n --cap-sheet-surface: Canvas;\n --cap-sheet-shadow: 0 0.5em 2.5em rgb(0 0 0 / 0.18);\n --cap-sheet-z-index: 1000;\n --cap-sheet-safe-area-top: max(env(safe-area-inset-top, 0em), var(--safe-area-inset-top, 0em));\n --cap-sheet-safe-area-bottom: max(env(safe-area-inset-bottom, 0em), var(--safe-area-inset-bottom, 0em));\n --cap-sheet-safe-area-left: max(env(safe-area-inset-left, 0em), var(--safe-area-inset-left, 0em));\n --cap-sheet-safe-area-right: max(env(safe-area-inset-right, 0em), var(--safe-area-inset-right, 0em));\n --cap-sheet-applied-safe-area-top: var(--cap-sheet-safe-area-top);\n --cap-sheet-applied-safe-area-bottom: var(--cap-sheet-safe-area-bottom);\n --cap-sheet-applied-safe-area-left: var(--cap-sheet-safe-area-left);\n --cap-sheet-applied-safe-area-right: var(--cap-sheet-safe-area-right);\n}\n\n@supports (height: 1dvh) {\n :root {\n --cap-sheet-100-lvh-dvh-pct: 100dvh;\n }\n}\n\ncap-sheet,\ncap-sheet-portal,\ncap-sheet-special-wrapper,\ncap-sheet-special-wrapper-content,\ncap-sheet-stack {\n display: contents;\n}\n\ncap-sheet-view {\n position: fixed;\n inset: 0;\n display: grid;\n width: 100%;\n height: var(--cap-sheet-100-lvh-dvh-pct);\n z-index: var(--cap-sheet-z-index);\n pointer-events: none;\n touch-action: none;\n overscroll-behavior: none;\n contain: layout style;\n box-sizing: border-box;\n padding-block-start: var(--cap-sheet-applied-safe-area-top, 0em);\n padding-block-end: calc(var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-keyboard-offset, 0em));\n padding-inline-start: var(--cap-sheet-applied-safe-area-left, 0em);\n padding-inline-end: var(--cap-sheet-applied-safe-area-right, 0em);\n}\n\ncap-sheet-view[hidden] {\n display: none !important;\n}\n\ncap-sheet-view[content-placement=\"top\"] {\n align-items: start;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"bottom\"],\ncap-sheet-view:not([content-placement]) {\n align-items: end;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"left\"] {\n align-items: center;\n justify-items: start;\n}\n\ncap-sheet-view[content-placement=\"right\"] {\n align-items: center;\n justify-items: end;\n}\n\ncap-sheet-view[content-placement=\"center\"] {\n align-items: center;\n justify-items: center;\n}\n\ncap-sheet-backdrop {\n position: absolute;\n inset: 0;\n display: block;\n background: var(--cap-sheet-backdrop-color);\n opacity: 0;\n pointer-events: none;\n touch-action: none;\n will-change: opacity;\n}\n\ncap-sheet-content {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: min(100%, 34em);\n max-height: 100%;\n color: CanvasText;\n background: var(--cap-sheet-surface);\n border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;\n box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);\n overflow: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n touch-action: pan-x pan-y;\n will-change: transform, opacity;\n -webkit-overflow-scrolling: touch;\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content {\n border-radius: 0 0 var(--cap-sheet-radius) var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: 0 var(--cap-sheet-radius) var(--cap-sheet-radius) 0;\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: var(--cap-sheet-radius) 0 0 var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"center\"] cap-sheet-content {\n width: min(90%, 30em);\n max-height: min(90%, 42em);\n border-radius: var(--cap-sheet-radius);\n}\n\ncap-sheet-bleeding-background {\n display: none;\n}\n\ncap-sheet-view[content-placement=\"bottom\"] cap-sheet-content[data-cap-sheet-bleeds],\ncap-sheet-view:not([content-placement]) cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 -8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: -8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-handle {\n box-sizing: border-box;\n display: grid;\n place-items: center;\n width: 100%;\n height: 2.25em;\n cursor: grab;\n touch-action: none;\n}\n\ncap-sheet-handle::before {\n content: \"\";\n display: block;\n width: 2.75em;\n height: 0.3125em;\n border-radius: 999em;\n background: var(--cap-sheet-handle-color);\n opacity: 0.65;\n}\n\ncap-sheet-handle:active {\n cursor: grabbing;\n}\n\ncap-sheet-title,\ncap-sheet-description {\n display: block;\n}\n\ncap-sheet-outlet {\n display: block;\n transform-origin: center;\n will-change: transform, opacity, filter;\n}\n\ncap-scroll {\n display: block;\n overflow: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n scroll-behavior: smooth;\n}\n\ncap-scroll[axis=\"x\"] {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncap-scroll[axis=\"y\"],\ncap-scroll:not([axis]) {\n overflow-x: hidden;\n overflow-y: auto;\n}\n\ncap-scroll-content {\n display: block;\n min-width: 100%;\n min-height: 100%;\n}\n\ncap-fixed {\n position: fixed;\n inset-inline: 0;\n z-index: calc(var(--cap-sheet-z-index) + 1);\n}\n\ncap-island,\ncap-external-overlay {\n display: contents;\n}\n\ncap-visually-hidden,\ncap-auto-focus-target[hidden-target] {\n position: absolute;\n width: 0.0625em;\n height: 0.0625em;\n margin: -0.0625em;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n padding: 0;\n}\n";
|
|
474
474
|
/** Injects the structural styles required by the sheet web components. */
|
|
475
475
|
declare function injectCapSheetStyles(root?: Document): void;
|
|
476
476
|
|
package/dist/index.d.ts
CHANGED
|
@@ -470,7 +470,7 @@ declare class CapSheetPortal extends HTMLElement {
|
|
|
470
470
|
disconnectedCallback(): void;
|
|
471
471
|
}
|
|
472
472
|
|
|
473
|
-
declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct:
|
|
473
|
+
declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: 100%;\n --cap-sheet-backdrop-color: rgb(0 0 0);\n --cap-sheet-backdrop-opacity: 0.44;\n --cap-sheet-radius: 1.5em;\n --cap-sheet-handle-color: rgb(115 115 115);\n --cap-sheet-surface: Canvas;\n --cap-sheet-shadow: 0 0.5em 2.5em rgb(0 0 0 / 0.18);\n --cap-sheet-z-index: 1000;\n --cap-sheet-safe-area-top: max(env(safe-area-inset-top, 0em), var(--safe-area-inset-top, 0em));\n --cap-sheet-safe-area-bottom: max(env(safe-area-inset-bottom, 0em), var(--safe-area-inset-bottom, 0em));\n --cap-sheet-safe-area-left: max(env(safe-area-inset-left, 0em), var(--safe-area-inset-left, 0em));\n --cap-sheet-safe-area-right: max(env(safe-area-inset-right, 0em), var(--safe-area-inset-right, 0em));\n --cap-sheet-applied-safe-area-top: var(--cap-sheet-safe-area-top);\n --cap-sheet-applied-safe-area-bottom: var(--cap-sheet-safe-area-bottom);\n --cap-sheet-applied-safe-area-left: var(--cap-sheet-safe-area-left);\n --cap-sheet-applied-safe-area-right: var(--cap-sheet-safe-area-right);\n}\n\n@supports (height: 1dvh) {\n :root {\n --cap-sheet-100-lvh-dvh-pct: 100dvh;\n }\n}\n\ncap-sheet,\ncap-sheet-portal,\ncap-sheet-special-wrapper,\ncap-sheet-special-wrapper-content,\ncap-sheet-stack {\n display: contents;\n}\n\ncap-sheet-view {\n position: fixed;\n inset: 0;\n display: grid;\n width: 100%;\n height: var(--cap-sheet-100-lvh-dvh-pct);\n z-index: var(--cap-sheet-z-index);\n pointer-events: none;\n touch-action: none;\n overscroll-behavior: none;\n contain: layout style;\n box-sizing: border-box;\n padding-block-start: var(--cap-sheet-applied-safe-area-top, 0em);\n padding-block-end: calc(var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-keyboard-offset, 0em));\n padding-inline-start: var(--cap-sheet-applied-safe-area-left, 0em);\n padding-inline-end: var(--cap-sheet-applied-safe-area-right, 0em);\n}\n\ncap-sheet-view[hidden] {\n display: none !important;\n}\n\ncap-sheet-view[content-placement=\"top\"] {\n align-items: start;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"bottom\"],\ncap-sheet-view:not([content-placement]) {\n align-items: end;\n justify-items: center;\n}\n\ncap-sheet-view[content-placement=\"left\"] {\n align-items: center;\n justify-items: start;\n}\n\ncap-sheet-view[content-placement=\"right\"] {\n align-items: center;\n justify-items: end;\n}\n\ncap-sheet-view[content-placement=\"center\"] {\n align-items: center;\n justify-items: center;\n}\n\ncap-sheet-backdrop {\n position: absolute;\n inset: 0;\n display: block;\n background: var(--cap-sheet-backdrop-color);\n opacity: 0;\n pointer-events: none;\n touch-action: none;\n will-change: opacity;\n}\n\ncap-sheet-content {\n box-sizing: border-box;\n position: relative;\n display: block;\n width: min(100%, 34em);\n max-height: 100%;\n color: CanvasText;\n background: var(--cap-sheet-surface);\n border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;\n box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);\n overflow: auto;\n overscroll-behavior: contain;\n pointer-events: auto;\n touch-action: pan-x pan-y;\n will-change: transform, opacity;\n -webkit-overflow-scrolling: touch;\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content {\n border-radius: 0 0 var(--cap-sheet-radius) var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: 0 var(--cap-sheet-radius) var(--cap-sheet-radius) 0;\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content {\n width: min(88%, 28em);\n height: 100%;\n max-height: 100%;\n border-radius: var(--cap-sheet-radius) 0 0 var(--cap-sheet-radius);\n}\n\ncap-sheet-view[content-placement=\"center\"] cap-sheet-content {\n width: min(90%, 30em);\n max-height: min(90%, 42em);\n border-radius: var(--cap-sheet-radius);\n}\n\ncap-sheet-bleeding-background {\n display: none;\n}\n\ncap-sheet-view[content-placement=\"bottom\"] cap-sheet-content[data-cap-sheet-bleeds],\ncap-sheet-view:not([content-placement]) cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 0 -8em 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: -8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-content[data-cap-sheet-bleeds] {\n --cap-sheet-edge-bleed-shadow: 8em 0 0 0 var(--cap-sheet-surface);\n}\n\ncap-sheet-handle {\n box-sizing: border-box;\n display: grid;\n place-items: center;\n width: 100%;\n height: 2.25em;\n cursor: grab;\n touch-action: none;\n}\n\ncap-sheet-handle::before {\n content: \"\";\n display: block;\n width: 2.75em;\n height: 0.3125em;\n border-radius: 999em;\n background: var(--cap-sheet-handle-color);\n opacity: 0.65;\n}\n\ncap-sheet-handle:active {\n cursor: grabbing;\n}\n\ncap-sheet-title,\ncap-sheet-description {\n display: block;\n}\n\ncap-sheet-outlet {\n display: block;\n transform-origin: center;\n will-change: transform, opacity, filter;\n}\n\ncap-scroll {\n display: block;\n overflow: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n scroll-behavior: smooth;\n}\n\ncap-scroll[axis=\"x\"] {\n overflow-x: auto;\n overflow-y: hidden;\n}\n\ncap-scroll[axis=\"y\"],\ncap-scroll:not([axis]) {\n overflow-x: hidden;\n overflow-y: auto;\n}\n\ncap-scroll-content {\n display: block;\n min-width: 100%;\n min-height: 100%;\n}\n\ncap-fixed {\n position: fixed;\n inset-inline: 0;\n z-index: calc(var(--cap-sheet-z-index) + 1);\n}\n\ncap-island,\ncap-external-overlay {\n display: contents;\n}\n\ncap-visually-hidden,\ncap-auto-focus-target[hidden-target] {\n position: absolute;\n width: 0.0625em;\n height: 0.0625em;\n margin: -0.0625em;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n padding: 0;\n}\n";
|
|
474
474
|
/** Injects the structural styles required by the sheet web components. */
|
|
475
475
|
declare function injectCapSheetStyles(root?: Document): void;
|
|
476
476
|
|
package/dist/index.js
CHANGED
|
@@ -149,7 +149,7 @@ var init_styles = __esm({
|
|
|
149
149
|
STYLE_ID = "capgo-capacitor-sheets-styles";
|
|
150
150
|
CSS = `
|
|
151
151
|
:root {
|
|
152
|
-
--cap-sheet-100-lvh-dvh-pct:
|
|
152
|
+
--cap-sheet-100-lvh-dvh-pct: 100%;
|
|
153
153
|
--cap-sheet-backdrop-color: rgb(0 0 0);
|
|
154
154
|
--cap-sheet-backdrop-opacity: 0.44;
|
|
155
155
|
--cap-sheet-radius: 1.5em;
|
|
@@ -169,7 +169,7 @@ var init_styles = __esm({
|
|
|
169
169
|
|
|
170
170
|
@supports (height: 1dvh) {
|
|
171
171
|
:root {
|
|
172
|
-
--cap-sheet-100-lvh-dvh-pct:
|
|
172
|
+
--cap-sheet-100-lvh-dvh-pct: 100dvh;
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
175
|
|