@capgo/capacitor-sheets 8.0.5 → 8.0.7

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 (35) hide show
  1. package/README.md +1 -0
  2. package/dist/angular/index.js +26 -17
  3. package/dist/angular/index.js.map +1 -1
  4. package/dist/angular/index.mjs +26 -17
  5. package/dist/angular/index.mjs.map +1 -1
  6. package/dist/{chunk-LAUTMWR7.mjs → chunk-HC63VDD5.mjs} +12 -18
  7. package/dist/{chunk-LAUTMWR7.mjs.map → chunk-HC63VDD5.mjs.map} +1 -1
  8. package/dist/{chunk-EYNTXD52.mjs → chunk-KKL5P5OQ.mjs} +17 -2
  9. package/dist/{chunk-EYNTXD52.mjs.map → chunk-KKL5P5OQ.mjs.map} +1 -1
  10. package/dist/{components-BH36ITEV.mjs → components-B6E2A52J.mjs} +3 -3
  11. package/dist/index.d.mts +4 -1
  12. package/dist/index.d.ts +4 -1
  13. package/dist/index.js +26 -17
  14. package/dist/index.js.map +1 -1
  15. package/dist/index.mjs +4 -4
  16. package/dist/react/index.js +26 -17
  17. package/dist/react/index.js.map +1 -1
  18. package/dist/react/index.mjs +26 -17
  19. package/dist/react/index.mjs.map +1 -1
  20. package/dist/solid/index.js +26 -17
  21. package/dist/solid/index.js.map +1 -1
  22. package/dist/solid/index.mjs +26 -17
  23. package/dist/solid/index.mjs.map +1 -1
  24. package/dist/{styles-ZKNWSPZR.mjs → styles-7RPEV7K2.mjs} +2 -2
  25. package/dist/svelte/index.js +26 -17
  26. package/dist/svelte/index.js.map +1 -1
  27. package/dist/svelte/index.mjs +26 -17
  28. package/dist/svelte/index.mjs.map +1 -1
  29. package/dist/vue/index.js +26 -17
  30. package/dist/vue/index.js.map +1 -1
  31. package/dist/vue/index.mjs +26 -17
  32. package/dist/vue/index.mjs.map +1 -1
  33. package/package.json +4 -1
  34. /package/dist/{components-BH36ITEV.mjs.map → components-B6E2A52J.mjs.map} +0 -0
  35. /package/dist/{styles-ZKNWSPZR.mjs.map → styles-7RPEV7K2.mjs.map} +0 -0
package/README.md CHANGED
@@ -127,6 +127,7 @@ Each framework example opens the same 16-usecase gallery, so StackBlitz is usefu
127
127
  ## Mobile Test App
128
128
 
129
129
  The repo includes a Capacitor app that wraps the React gallery so the sheets can be tested on real iOS and Android devices. The app id is `app.capgo.capacitor.sheets`.
130
+ Capacitor 8 requires Node.js 22 or newer for local mobile commands.
130
131
 
131
132
  ```bash
132
133
  npm run build:mobile
package/dist/angular/index.js CHANGED
@@ -231,7 +231,7 @@ cap-sheet-content {
231
231
  color: CanvasText;
232
232
  background: var(--cap-sheet-surface);
233
233
  border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;
234
- box-shadow: var(--cap-sheet-shadow);
234
+ box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);
235
235
  overflow: auto;
236
236
  overscroll-behavior: contain;
237
237
  pointer-events: auto;
@@ -265,30 +265,24 @@ cap-sheet-view[content-placement="center"] cap-sheet-content {
265
265
  }
266
266
 
267
267
  cap-sheet-bleeding-background {
268
- position: absolute;
269
- inset: 0;
270
- z-index: -1;
271
- display: block;
272
- background: var(--cap-sheet-surface);
273
- border-radius: inherit;
274
- pointer-events: none;
268
+ display: none;
275
269
  }
276
270
 
277
- cap-sheet-view[content-placement="bottom"] cap-sheet-bleeding-background,
278
- cap-sheet-view:not([content-placement]) cap-sheet-bleeding-background {
279
- inset-block-end: -8em;
271
+ cap-sheet-view[content-placement="bottom"] cap-sheet-content[data-cap-sheet-bleeds],
272
+ cap-sheet-view:not([content-placement]) cap-sheet-content[data-cap-sheet-bleeds] {
273
+ --cap-sheet-edge-bleed-shadow: 0 8em 0 0 var(--cap-sheet-surface);
280
274
  }
281
275
 
282
- cap-sheet-view[content-placement="top"] cap-sheet-bleeding-background {
283
- inset-block-start: -8em;
276
+ cap-sheet-view[content-placement="top"] cap-sheet-content[data-cap-sheet-bleeds] {
277
+ --cap-sheet-edge-bleed-shadow: 0 -8em 0 0 var(--cap-sheet-surface);
284
278
  }
285
279
 
286
- cap-sheet-view[content-placement="left"] cap-sheet-bleeding-background {
287
- inset-inline-start: -8em;
280
+ cap-sheet-view[content-placement="left"] cap-sheet-content[data-cap-sheet-bleeds] {
281
+ --cap-sheet-edge-bleed-shadow: -8em 0 0 0 var(--cap-sheet-surface);
288
282
  }
289
283
 
290
- cap-sheet-view[content-placement="right"] cap-sheet-bleeding-background {
291
- inset-inline-end: -8em;
284
+ cap-sheet-view[content-placement="right"] cap-sheet-content[data-cap-sheet-bleeds] {
285
+ --cap-sheet-edge-bleed-shadow: 8em 0 0 0 var(--cap-sheet-surface);
292
286
  }
293
287
 
294
288
  cap-sheet-handle {
@@ -1819,8 +1813,23 @@ var CapSheetContent = class extends SheetPartElement {
1819
1813
  }
1820
1814
  };
1821
1815
  var CapSheetBleedingBackground = class extends HTMLElement {
1816
+ bleedingParent = null;
1822
1817
  connectedCallback() {
1823
1818
  injectCapSheetStyles(this.ownerDocument);
1819
+ this.setAttribute("aria-hidden", "true");
1820
+ this.bleedingParent = this.parentElement instanceof HTMLElement ? this.parentElement : null;
1821
+ this.updateParentBleedAttribute(this.bleedingParent);
1822
+ }
1823
+ disconnectedCallback() {
1824
+ this.updateParentBleedAttribute(this.bleedingParent);
1825
+ this.bleedingParent = null;
1826
+ }
1827
+ updateParentBleedAttribute(parent) {
1828
+ if (!parent) return;
1829
+ parent.toggleAttribute(
1830
+ "data-cap-sheet-bleeds",
1831
+ Boolean(parent.querySelector(":scope > cap-sheet-bleeding-background"))
1832
+ );
1824
1833
  }
1825
1834
  };
1826
1835
  var CapSheetTitle = class extends SheetPartElement {