@capgo/capacitor-sheets 8.0.11 → 8.0.12

package/dist/{chunk-LY2DKBXN.mjs → chunk-7DYTSFX3.mjs}

@@ -18,6 +18,11 @@ var CSS = `
   --cap-sheet-applied-safe-area-bottom: var(--cap-sheet-safe-area-bottom);
   --cap-sheet-applied-safe-area-left: var(--cap-sheet-safe-area-left);
   --cap-sheet-applied-safe-area-right: var(--cap-sheet-safe-area-right);
+  --cap-sheet-container-offset-top: 0em;
+  --cap-sheet-container-offset-bottom: 0em;
+  --cap-sheet-container-offset-left: 0em;
+  --cap-sheet-container-offset-right: 0em;
+  --cap-sheet-keyboard-offset: 0em;
 }
 
 @supports (height: 1dvh) {
@@ -46,10 +51,13 @@ cap-sheet-view {
   overscroll-behavior: none;
   contain: layout style;
   box-sizing: border-box;
-  padding-block-start: var(--cap-sheet-applied-safe-area-top, 0em);
-  padding-block-end: calc(var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-keyboard-offset, 0em));
-  padding-inline-start: var(--cap-sheet-applied-safe-area-left, 0em);
-  padding-inline-end: var(--cap-sheet-applied-safe-area-right, 0em);
+  padding-top: calc(var(--cap-sheet-applied-safe-area-top, 0em) + var(--cap-sheet-container-offset-top, 0em));
+  padding-bottom: calc(
+    var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-container-offset-bottom, 0em) +
+      var(--cap-sheet-keyboard-offset, 0em)
+  );
+  padding-left: calc(var(--cap-sheet-applied-safe-area-left, 0em) + var(--cap-sheet-container-offset-left, 0em));
+  padding-right: calc(var(--cap-sheet-applied-safe-area-right, 0em) + var(--cap-sheet-container-offset-right, 0em));
 }
 
 cap-sheet-view[hidden] {
@@ -94,6 +102,7 @@ cap-sheet-backdrop {
 }
 
 cap-sheet-content {
+  --cap-sheet-content-border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;
   box-sizing: border-box;
   position: relative;
   display: block;
@@ -101,7 +110,7 @@ cap-sheet-content {
   max-height: 100%;
   color: CanvasText;
   background: var(--cap-sheet-surface);
-  border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;
+  border-radius: var(--cap-sheet-content-border-radius);
   box-shadow: var(--cap-sheet-shadow), var(--cap-sheet-edge-bleed-shadow, 0 0 0 0 transparent);
   overflow: auto;
   overscroll-behavior: contain;
@@ -112,27 +121,35 @@ cap-sheet-content {
 }
 
 cap-sheet-view[content-placement="top"] cap-sheet-content {
-  border-radius: 0 0 var(--cap-sheet-radius) var(--cap-sheet-radius);
+  --cap-sheet-content-border-radius: 0 0 var(--cap-sheet-radius) var(--cap-sheet-radius);
 }
 
 cap-sheet-view[content-placement="left"] cap-sheet-content {
   width: min(88%, 28em);
   height: 100%;
   max-height: 100%;
-  border-radius: 0 var(--cap-sheet-radius) var(--cap-sheet-radius) 0;
+  --cap-sheet-content-border-radius: 0 var(--cap-sheet-radius) var(--cap-sheet-radius) 0;
 }
 
 cap-sheet-view[content-placement="right"] cap-sheet-content {
   width: min(88%, 28em);
   height: 100%;
   max-height: 100%;
-  border-radius: var(--cap-sheet-radius) 0 0 var(--cap-sheet-radius);
+  --cap-sheet-content-border-radius: var(--cap-sheet-radius) 0 0 var(--cap-sheet-radius);
 }
 
 cap-sheet-view[content-placement="center"] cap-sheet-content {
   width: min(90%, 30em);
   max-height: min(90%, 42em);
-  border-radius: var(--cap-sheet-radius);
+  --cap-sheet-content-border-radius: var(--cap-sheet-radius);
+}
+
+cap-sheet-view[data-detached="true"] cap-sheet-content {
+  --cap-sheet-content-border-radius: var(--cap-sheet-detached-radius, var(--cap-sheet-radius));
+}
+
+cap-sheet-view[data-detached="true"] cap-sheet-content[data-cap-sheet-bleeds] {
+  --cap-sheet-edge-bleed-shadow: 0 0 0 0 transparent;
 }
 
 cap-sheet-bleeding-background {
@@ -252,4 +269,4 @@ export {
   CSS,
   injectCapSheetStyles
 };
-//# sourceMappingURL=chunk-LY2DKBXN.mjs.map
+//# sourceMappingURL=chunk-7DYTSFX3.mjs.map

package/dist/chunk-7DYTSFX3.mjs.map

@@ -0,0 +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  --cap-sheet-container-offset-top: 0em;\n  --cap-sheet-container-offset-bottom: 0em;\n  --cap-sheet-container-offset-left: 0em;\n  --cap-sheet-container-offset-right: 0em;\n  --cap-sheet-keyboard-offset: 0em;\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-top: calc(var(--cap-sheet-applied-safe-area-top, 0em) + var(--cap-sheet-container-offset-top, 0em));\n  padding-bottom: calc(\n    var(--cap-sheet-applied-safe-area-bottom, 0em) + var(--cap-sheet-container-offset-bottom, 0em) +\n      var(--cap-sheet-keyboard-offset, 0em)\n  );\n  padding-left: calc(var(--cap-sheet-applied-safe-area-left, 0em) + var(--cap-sheet-container-offset-left, 0em));\n  padding-right: calc(var(--cap-sheet-applied-safe-area-right, 0em) + var(--cap-sheet-container-offset-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  --cap-sheet-content-border-radius: var(--cap-sheet-radius) var(--cap-sheet-radius) 0 0;\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-content-border-radius);\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  --cap-sheet-content-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  --cap-sheet-content-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  --cap-sheet-content-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  --cap-sheet-content-border-radius: var(--cap-sheet-radius);\n}\n\ncap-sheet-view[data-detached=\"true\"] cap-sheet-content {\n  --cap-sheet-content-border-radius: var(--cap-sheet-detached-radius, var(--cap-sheet-radius));\n}\n\ncap-sheet-view[data-detached=\"true\"] cap-sheet-content[data-cap-sheet-bleeds] {\n  --cap-sheet-edge-bleed-shadow: 0 0 0 0 transparent;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmQL,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":[]}

package/dist/{chunk-FHGK4I6L.mjs → chunk-AXGC7BLW.mjs}

@@ -1,6 +1,6 @@
 import {
   injectCapSheetStyles
-} from "./chunk-LY2DKBXN.mjs";
+} from "./chunk-7DYTSFX3.mjs";
 
 // src/core/utils.ts
 var focusableSelector = [
@@ -252,6 +252,7 @@ function releaseThemeColorDimmer(documentRef) {
 var defaultOptions = {
   contentPlacement: "bottom",
   sheetRole: "dialog",
+  detached: false,
   safeArea: "auto",
   swipe: true,
   swipeDismissal: true,
@@ -282,21 +283,74 @@ function normalizeDetents(value) {
   if (Array.isArray(value)) return value.filter(Boolean);
   return parseList(value || null);
 }
+var unitlessInsetPattern = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
+function normalizeInsetValue(value) {
+  return unitlessInsetPattern.test(value) ? `${value}px` : value;
+}
+function parseInset(value) {
+  const normalized = value?.trim();
+  return normalized ? normalizeInsetValue(normalized) : void 0;
+}
+function formatInsetValue(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : "0em";
+  const normalized = value?.trim();
+  return normalized ? normalizeInsetValue(normalized) : "0em";
+}
+function explicitInsetForEdge(options, edge) {
+  switch (edge) {
+    case "top":
+      return options.topInset;
+    case "bottom":
+      return options.bottomInset;
+    case "left":
+      return options.leftInset;
+    case "right":
+      return options.rightInset;
+  }
+}
+function containerInsetForEdge(options, edge) {
+  const values = [options.containerOffset?.[edge], explicitInsetForEdge(options, edge)].map(formatInsetValue).filter((value) => value !== "0em");
+  if (values.length === 0) return "0em";
+  if (values.length === 1) return values[0];
+  return `calc(${values.join(" + ")})`;
+}
+function hasOwnOption(options, key) {
+  return Object.prototype.hasOwnProperty.call(options, key);
+}
+function affectsDismissedOffset(options) {
+  return hasOwnOption(options, "contentPlacement") || hasOwnOption(options, "tracks") || hasOwnOption(options, "detents") || hasOwnOption(options, "safeArea") || hasOwnOption(options, "topInset") || hasOwnOption(options, "bottomInset") || hasOwnOption(options, "leftInset") || hasOwnOption(options, "rightInset") || hasOwnOption(options, "containerOffset");
+}
 var safeAreaEdges = ["top", "bottom", "left", "right"];
 function parseSafeArea(value) {
   if (value === null) return void 0;
   const normalized = value.trim().toLowerCase();
-  if (!normalized || normalized === "true" || normalized === "auto" || normalized === "all") return "auto";
+  if (!normalized || normalized === "auto") return "auto";
+  if (normalized === "true" || normalized === "all") return "all";
   if (normalized === "false" || normalized === "none" || normalized === "off") return "none";
   const edges = parseList(normalized).filter(
     (edge) => safeAreaEdges.includes(edge)
   );
   return edges.length > 0 ? edges : "auto";
 }
-function resolveSafeAreaEdges(value) {
+function resolveAutoSafeAreaEdges(placement) {
+  switch (placement) {
+    case "bottom":
+      return ["bottom", "left", "right"];
+    case "top":
+      return ["top", "left", "right"];
+    case "left":
+      return ["top", "bottom", "left"];
+    case "right":
+      return ["top", "bottom", "right"];
+    case "center":
+      return safeAreaEdges;
+  }
+}
+function resolveSafeAreaEdges(value, placement) {
   if (value === false || value === "none") return [];
+  if (value === true || value === "all") return safeAreaEdges;
   if (Array.isArray(value)) return value.filter((edge) => safeAreaEdges.includes(edge));
-  return safeAreaEdges;
+  return resolveAutoSafeAreaEdges(placement);
 }
 function readOptionsFromElement(root) {
   const placement = parsePlacement(root.getAttribute("content-placement"));
@@ -313,6 +367,11 @@ function readOptionsFromElement(root) {
     sheetRole: root.getAttribute("sheet-role") || defaultOptions.sheetRole,
     contentPlacement: placement,
     safeArea: parseSafeArea(root.getAttribute("safe-area")),
+    detached: parseBoolean(root.getAttribute("detached"), defaultOptions.detached),
+    topInset: parseInset(root.getAttribute("top-inset")),
+    bottomInset: parseInset(root.getAttribute("bottom-inset")),
+    leftInset: parseInset(root.getAttribute("left-inset")),
+    rightInset: parseInset(root.getAttribute("right-inset")),
     tracks: parseTracks(root.getAttribute("tracks"), placement === "center" ? "bottom" : placement),
     swipe: parseBoolean(root.getAttribute("swipe"), defaultOptions.swipe),
     swipeDismissal: parseBoolean(root.getAttribute("swipe-dismissal"), defaultOptions.swipeDismissal),
@@ -549,6 +608,11 @@ var SheetController = class {
       this.parts.content.setAttribute("aria-modal", attributeBoolean(this.options.inertOutside !== false));
     }
     this.linkAccessibleNames();
+    if (this.connected && !this.presented && this.parts.content && affectsDismissedOffset(options)) {
+      this.remeasure();
+      this.applyOffset(this.detentOffsetsPx[0] || this.hiddenOffsetPx, this.status);
+      this.updateDomState(false);
+    }
     this.registerStack();
   }
   /** Register a view, backdrop, content, or semantic part. */
@@ -703,12 +767,29 @@ var SheetController = class {
       const sign = trackSign(track);
       const axis = isVerticalTrack(track) ? "y" : "x";
       const rect = content.getBoundingClientRect();
+      const viewRect = view?.getBoundingClientRect();
       const size = axis === "y" ? rect.height : rect.width;
-      this.hiddenOffsetPx = Math.max(size, 1) * sign;
+      const transformedX = axis === "x" ? this.currentOffsetPx : 0;
+      const transformedY = axis === "y" ? this.currentOffsetPx : 0;
+      const contentRect = {
+        top: rect.top - transformedY,
+        right: rect.right - transformedX,
+        bottom: rect.bottom - transformedY,
+        left: rect.left - transformedX
+      };
+      let hiddenOffsetPx = Math.max(size, 1) * sign;
+      if (viewRect) {
+        if (track === "top") hiddenOffsetPx = viewRect.top - contentRect.bottom;
+        if (track === "bottom") hiddenOffsetPx = viewRect.bottom - contentRect.top;
+        if (track === "left") hiddenOffsetPx = viewRect.left - contentRect.right;
+        if (track === "right") hiddenOffsetPx = viewRect.right - contentRect.left;
+      }
+      this.hiddenOffsetPx = Math.abs(hiddenOffsetPx) > 1 ? hiddenOffsetPx : sign;
       const detents = normalizeDetents(this.options.detents);
       const offsets = [this.hiddenOffsetPx];
+      const measureContext = content;
       for (const detent of detents) {
-        const visible = measureCssLength(detent, content, axis);
+        const visible = measureCssLength(detent, measureContext, axis);
         const offset = Math.max(Math.abs(this.hiddenOffsetPx) - visible, 0) * sign;
         offsets.push(offset);
       }
@@ -878,13 +959,17 @@ var SheetController = class {
   applySafeArea() {
     const view = this.parts.view;
     if (!view) return;
-    const edges = new Set(resolveSafeAreaEdges(this.options.safeArea));
+    const edges = new Set(
+      resolveSafeAreaEdges(this.options.safeArea, this.options.contentPlacement || defaultOptions.contentPlacement)
+    );
     view.dataset.safeArea = edges.size > 0 ? Array.from(edges).join(" ") : "none";
+    view.dataset.detached = this.options.detached ? "true" : "false";
     for (const edge of safeAreaEdges) {
       view.style.setProperty(
         `--cap-sheet-applied-safe-area-${edge}`,
         edges.has(edge) ? `var(--cap-sheet-safe-area-${edge})` : "0em"
       );
+      view.style.setProperty(`--cap-sheet-container-offset-${edge}`, containerInsetForEdge(this.options, edge));
     }
   }
   addGlobalListeners() {
@@ -1182,12 +1267,17 @@ var observed = [
   "default-active-detent",
   "default-presented",
   "detents",
+  "detached",
   "focus-trap",
   "inert-outside",
   "native-edge-swipe-prevention",
   "native-focus-scroll-prevention",
   "presented",
   "restore-focus",
+  "top-inset",
+  "bottom-inset",
+  "left-inset",
+  "right-inset",
   "safe-area",
   "sheet-role",
   "stack",
@@ -1302,12 +1392,17 @@ function readChangedOptionsFromElement(element, name) {
     "default-active-detent": ["defaultActiveDetent"],
     "default-presented": ["defaultPresented"],
     detents: ["detents"],
+    detached: ["detached"],
     "focus-trap": ["focusTrap"],
     "inert-outside": ["inertOutside"],
     "native-edge-swipe-prevention": ["nativeEdgeSwipePrevention"],
     "native-focus-scroll-prevention": ["nativeFocusScrollPrevention"],
     presented: ["presented"],
     "restore-focus": ["restoreFocus"],
+    "top-inset": ["topInset"],
+    "bottom-inset": ["bottomInset"],
+    "left-inset": ["leftInset"],
+    "right-inset": ["rightInset"],
     "safe-area": ["safeArea"],
     "sheet-role": ["sheetRole"],
     stack: ["stack"],
@@ -1324,6 +1419,19 @@ function readChangedOptionsFromElement(element, name) {
   }
   return changed;
 }
+function formatInsetAttribute(value) {
+  if (typeof value === "number") return Number.isFinite(value) ? `${value}px` : void 0;
+  const normalized = value.trim();
+  return normalized || void 0;
+}
+function combineInsetAttributes(...values) {
+  const parts = values.flatMap((value) => {
+    const attributeValue = value === void 0 ? void 0 : formatInsetAttribute(value);
+    return attributeValue ? [attributeValue] : [];
+  });
+  if (parts.length === 0) return void 0;
+  return parts.length === 1 ? parts[0] : `calc(${parts.join(" + ")})`;
+}
 function applySheetOptions(element, options) {
   if (options.contentPlacement) element.setAttribute("content-placement", options.contentPlacement);
   if (options.detents !== void 0) {
@@ -1335,7 +1443,6 @@ function applySheetOptions(element, options) {
   }
   if (options.defaultPresented !== void 0)
     element.setAttribute("default-presented", String(options.defaultPresented));
-  if (options.presented !== void 0) element.toggleAttribute("presented", options.presented);
   if (options.sheetRole) element.setAttribute("sheet-role", options.sheetRole);
   if (options.safeArea !== void 0) {
     element.setAttribute(
@@ -1346,7 +1453,23 @@ function applySheetOptions(element, options) {
   if (options.stack) element.setAttribute("stack", options.stack);
   if (options.tracks)
     element.setAttribute("tracks", Array.isArray(options.tracks) ? options.tracks.join(" ") : options.tracks);
+  for (const [key, attr, edge] of [
+    ["topInset", "top-inset", "top"],
+    ["bottomInset", "bottom-inset", "bottom"],
+    ["leftInset", "left-inset", "left"],
+    ["rightInset", "right-inset", "right"]
+  ]) {
+    const hasEdgeInset = Object.prototype.hasOwnProperty.call(options, key);
+    const hasContainerOffset = Object.prototype.hasOwnProperty.call(options, "containerOffset");
+    const attributeValue = combineInsetAttributes(options[key], options.containerOffset?.[edge]);
+    if (attributeValue !== void 0) {
+      element.setAttribute(attr, attributeValue);
+    } else if (hasEdgeInset || hasContainerOffset) {
+      element.removeAttribute(attr);
+    }
+  }
   for (const [key, attr] of [
+    ["detached", "detached"],
     ["swipe", "swipe"],
     ["swipeDismissal", "swipe-dismissal"],
     ["swipeOvershoot", "swipe-overshoot"],
@@ -1365,6 +1488,7 @@ function applySheetOptions(element, options) {
   if (options.themeColorDimming !== void 0) {
     element.setAttribute("theme-color-dimming", options.themeColorDimming === false ? "false" : "auto");
   }
+  if (options.presented !== void 0) element.toggleAttribute("presented", options.presented);
 }
 
 // src/components/sheet-actions.ts
@@ -1679,4 +1803,4 @@ export {
   CapAutoFocusTarget,
   CapSheetPortal
 };
-//# sourceMappingURL=chunk-FHGK4I6L.mjs.map
+//# sourceMappingURL=chunk-AXGC7BLW.mjs.map