@capgo/capacitor-sheets 8.0.6 → 8.0.8

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.
Files changed (34) hide show
  1. package/dist/angular/index.js +26 -17
  2. package/dist/angular/index.js.map +1 -1
  3. package/dist/angular/index.mjs +26 -17
  4. package/dist/angular/index.mjs.map +1 -1
  5. package/dist/{chunk-LAUTMWR7.mjs → chunk-HC63VDD5.mjs} +12 -18
  6. package/dist/{chunk-LAUTMWR7.mjs.map → chunk-HC63VDD5.mjs.map} +1 -1
  7. package/dist/{chunk-EYNTXD52.mjs → chunk-KKL5P5OQ.mjs} +17 -2
  8. package/dist/{chunk-EYNTXD52.mjs.map → chunk-KKL5P5OQ.mjs.map} +1 -1
  9. package/dist/{components-BH36ITEV.mjs → components-B6E2A52J.mjs} +3 -3
  10. package/dist/index.d.mts +4 -1
  11. package/dist/index.d.ts +4 -1
  12. package/dist/index.js +26 -17
  13. package/dist/index.js.map +1 -1
  14. package/dist/index.mjs +4 -4
  15. package/dist/react/index.js +26 -17
  16. package/dist/react/index.js.map +1 -1
  17. package/dist/react/index.mjs +26 -17
  18. package/dist/react/index.mjs.map +1 -1
  19. package/dist/solid/index.js +26 -17
  20. package/dist/solid/index.js.map +1 -1
  21. package/dist/solid/index.mjs +26 -17
  22. package/dist/solid/index.mjs.map +1 -1
  23. package/dist/{styles-ZKNWSPZR.mjs → styles-7RPEV7K2.mjs} +2 -2
  24. package/dist/svelte/index.js +26 -17
  25. package/dist/svelte/index.js.map +1 -1
  26. package/dist/svelte/index.mjs +26 -17
  27. package/dist/svelte/index.mjs.map +1 -1
  28. package/dist/vue/index.js +26 -17
  29. package/dist/vue/index.js.map +1 -1
  30. package/dist/vue/index.mjs +26 -17
  31. package/dist/vue/index.mjs.map +1 -1
  32. package/package.json +2 -2
  33. /package/dist/{components-BH36ITEV.mjs.map → components-B6E2A52J.mjs.map} +0 -0
  34. /package/dist/{styles-ZKNWSPZR.mjs.map → styles-7RPEV7K2.mjs.map} +0 -0
package/dist/{components-BH36ITEV.mjs → components-B6E2A52J.mjs} RENAMED
@@ -20,8 +20,8 @@ import {
20
20
  CapSheetTrigger,
21
21
  CapSheetView,
22
22
  CapVisuallyHidden
23
- } from "./chunk-EYNTXD52.mjs";
24
- import "./chunk-LAUTMWR7.mjs";
23
+ } from "./chunk-KKL5P5OQ.mjs";
24
+ import "./chunk-HC63VDD5.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-BH36ITEV.mjs.map
48
+ //# sourceMappingURL=components-B6E2A52J.mjs.map
package/dist/index.d.mts CHANGED
@@ -442,7 +442,10 @@ declare class CapSheetContent extends SheetPartElement {
442
442
  }
443
443
  /** Decorative background that can extend beyond rounded sheet corners. */
444
444
  declare class CapSheetBleedingBackground extends HTMLElement {
445
+ private bleedingParent;
445
446
  connectedCallback(): void;
447
+ disconnectedCallback(): void;
448
+ private updateParentBleedAttribute;
446
449
  }
447
450
  /** Accessible title used for `aria-labelledby`. */
448
451
  declare class CapSheetTitle extends SheetPartElement {
@@ -467,7 +470,7 @@ declare class CapSheetPortal extends HTMLElement {
467
470
  disconnectedCallback(): void;
468
471
  }
469
472
 
470
- declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: max(100%, 100vh);\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: max(100dvh, 100lvh);\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);\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 position: absolute;\n inset: 0;\n z-index: -1;\n display: block;\n background: var(--cap-sheet-surface);\n border-radius: inherit;\n pointer-events: none;\n}\n\ncap-sheet-view[content-placement=\"bottom\"] cap-sheet-bleeding-background,\ncap-sheet-view:not([content-placement]) cap-sheet-bleeding-background {\n inset-block-end: -8em;\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-bleeding-background {\n inset-block-start: -8em;\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-bleeding-background {\n inset-inline-start: -8em;\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-bleeding-background {\n inset-inline-end: -8em;\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";
473
+ declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: max(100%, 100vh);\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: max(100dvh, 100lvh);\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";
471
474
  /** Injects the structural styles required by the sheet web components. */
472
475
  declare function injectCapSheetStyles(root?: Document): void;
473
476
 
package/dist/index.d.ts CHANGED
@@ -442,7 +442,10 @@ declare class CapSheetContent extends SheetPartElement {
442
442
  }
443
443
  /** Decorative background that can extend beyond rounded sheet corners. */
444
444
  declare class CapSheetBleedingBackground extends HTMLElement {
445
+ private bleedingParent;
445
446
  connectedCallback(): void;
447
+ disconnectedCallback(): void;
448
+ private updateParentBleedAttribute;
446
449
  }
447
450
  /** Accessible title used for `aria-labelledby`. */
448
451
  declare class CapSheetTitle extends SheetPartElement {
@@ -467,7 +470,7 @@ declare class CapSheetPortal extends HTMLElement {
467
470
  disconnectedCallback(): void;
468
471
  }
469
472
 
470
- declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: max(100%, 100vh);\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: max(100dvh, 100lvh);\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);\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 position: absolute;\n inset: 0;\n z-index: -1;\n display: block;\n background: var(--cap-sheet-surface);\n border-radius: inherit;\n pointer-events: none;\n}\n\ncap-sheet-view[content-placement=\"bottom\"] cap-sheet-bleeding-background,\ncap-sheet-view:not([content-placement]) cap-sheet-bleeding-background {\n inset-block-end: -8em;\n}\n\ncap-sheet-view[content-placement=\"top\"] cap-sheet-bleeding-background {\n inset-block-start: -8em;\n}\n\ncap-sheet-view[content-placement=\"left\"] cap-sheet-bleeding-background {\n inset-inline-start: -8em;\n}\n\ncap-sheet-view[content-placement=\"right\"] cap-sheet-bleeding-background {\n inset-inline-end: -8em;\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";
473
+ declare const CSS = "\n:root {\n --cap-sheet-100-lvh-dvh-pct: max(100%, 100vh);\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: max(100dvh, 100lvh);\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";
471
474
  /** Injects the structural styles required by the sheet web components. */
472
475
  declare function injectCapSheetStyles(root?: Document): void;
473
476
 
package/dist/index.js CHANGED
@@ -249,7 +249,7 @@ cap-sheet-content {
249
249
  color: CanvasText;
250
250
  background: var(--cap-sheet-surface);
251
251
  border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;
252
- box-shadow: var(--cap-sheet-shadow);
252
+ box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);
253
253
  overflow: auto;
254
254
  overscroll-behavior: contain;
255
255
  pointer-events: auto;
@@ -283,30 +283,24 @@ cap-sheet-view[content-placement="center"] cap-sheet-content {
283
283
  }
284
284
 
285
285
  cap-sheet-bleeding-background {
286
- position: absolute;
287
- inset: 0;
288
- z-index: -1;
289
- display: block;
290
- background: var(--cap-sheet-surface);
291
- border-radius: inherit;
292
- pointer-events: none;
286
+ display: none;
293
287
  }
294
288
 
295
- cap-sheet-view[content-placement="bottom"] cap-sheet-bleeding-background,
296
- cap-sheet-view:not([content-placement]) cap-sheet-bleeding-background {
297
- inset-block-end: -8em;
289
+ cap-sheet-view[content-placement="bottom"] cap-sheet-content[data-cap-sheet-bleeds],
290
+ cap-sheet-view:not([content-placement]) cap-sheet-content[data-cap-sheet-bleeds] {
291
+ --cap-sheet-edge-bleed-shadow: 0 8em 0 0 var(--cap-sheet-surface);
298
292
  }
299
293
 
300
- cap-sheet-view[content-placement="top"] cap-sheet-bleeding-background {
301
- inset-block-start: -8em;
294
+ cap-sheet-view[content-placement="top"] cap-sheet-content[data-cap-sheet-bleeds] {
295
+ --cap-sheet-edge-bleed-shadow: 0 -8em 0 0 var(--cap-sheet-surface);
302
296
  }
303
297
 
304
- cap-sheet-view[content-placement="left"] cap-sheet-bleeding-background {
305
- inset-inline-start: -8em;
298
+ cap-sheet-view[content-placement="left"] cap-sheet-content[data-cap-sheet-bleeds] {
299
+ --cap-sheet-edge-bleed-shadow: -8em 0 0 0 var(--cap-sheet-surface);
306
300
  }
307
301
 
308
- cap-sheet-view[content-placement="right"] cap-sheet-bleeding-background {
309
- inset-inline-end: -8em;
302
+ cap-sheet-view[content-placement="right"] cap-sheet-content[data-cap-sheet-bleeds] {
303
+ --cap-sheet-edge-bleed-shadow: 8em 0 0 0 var(--cap-sheet-surface);
310
304
  }
311
305
 
312
306
  cap-sheet-handle {
@@ -1895,8 +1889,23 @@ var init_sheet_parts = __esm({
1895
1889
  }
1896
1890
  };
1897
1891
  CapSheetBleedingBackground = class extends HTMLElement {
1892
+ bleedingParent = null;
1898
1893
  connectedCallback() {
1899
1894
  injectCapSheetStyles(this.ownerDocument);
1895
+ this.setAttribute("aria-hidden", "true");
1896
+ this.bleedingParent = this.parentElement instanceof HTMLElement ? this.parentElement : null;
1897
+ this.updateParentBleedAttribute(this.bleedingParent);
1898
+ }
1899
+ disconnectedCallback() {
1900
+ this.updateParentBleedAttribute(this.bleedingParent);
1901
+ this.bleedingParent = null;
1902
+ }
1903
+ updateParentBleedAttribute(parent) {
1904
+ if (!parent) return;
1905
+ parent.toggleAttribute(
1906
+ "data-cap-sheet-bleeds",
1907
+ Boolean(parent.querySelector(":scope > cap-sheet-bleeding-background"))
1908
+ );
1900
1909
  }
1901
1910
  };
1902
1911
  CapSheetTitle = class extends SheetPartElement {