@capgo/capacitor-sheets 8.0.11 → 8.0.13

package/dist/index.js

@@ -165,6 +165,11 @@ var init_styles = __esm({
   --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) {
@@ -193,10 +198,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] {
@@ -241,6 +249,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;
@@ -248,7 +257,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;
@@ -259,27 +268,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 {
@@ -557,20 +574,72 @@ function normalizeDetents(value) {
   if (Array.isArray(value)) return value.filter(Boolean);
   return parseList(value || null);
 }
+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");
+}
 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"));
@@ -587,6 +656,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),
@@ -637,7 +711,7 @@ function tween(start, end, progress) {
   const next = startValue + (endValue - startValue) * progress;
   return `${next}${unit}`;
 }
-var defaultOptions, defaultAnimation, stackRegistry, safeAreaEdges, SheetController;
+var defaultOptions, defaultAnimation, stackRegistry, unitlessInsetPattern, safeAreaEdges, SheetController;
 var init_sheet_controller = __esm({
   "src/core/sheet-controller.ts"() {
     "use strict";
@@ -646,6 +720,7 @@ var init_sheet_controller = __esm({
     defaultOptions = {
       contentPlacement: "bottom",
       sheetRole: "dialog",
+      detached: false,
       safeArea: "auto",
       swipe: true,
       swipeDismissal: true,
@@ -667,6 +742,7 @@ var init_sheet_controller = __esm({
       contentMove: true
     };
     stackRegistry = /* @__PURE__ */ new Map();
+    unitlessInsetPattern = /^-?(?:\d+(?:\.\d+)?|\.\d+)$/;
     safeAreaEdges = ["top", "bottom", "left", "right"];
     SheetController = class {
       root;
@@ -864,6 +940,11 @@ var init_sheet_controller = __esm({
           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. */
@@ -1018,12 +1099,29 @@ var init_sheet_controller = __esm({
           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);
           }
@@ -1193,13 +1291,17 @@ var init_sheet_controller = __esm({
       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() {
@@ -1505,12 +1607,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"],
@@ -1527,6 +1634,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) {
@@ -1538,7 +1658,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(
@@ -1549,7 +1668,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"],
@@ -1568,6 +1703,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);
 }
 var observed, CapSheet;
 var init_cap_sheet = __esm({
@@ -1584,12 +1720,17 @@ var init_cap_sheet = __esm({
       "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",