@breadstone/mosaik-elements-foundation 0.1.50 → 0.1.52

package/Controls/Components/Overlays/Sheet/SheetTypes.d.ts

@@ -0,0 +1,117 @@
+import type { IEventDetail } from '@breadstone/mosaik-elements';
+import type { CssLength } from '@breadstone/mosaik-themes';
+import type { DrawerPosition } from '../../../Types/DrawerPosition';
+/**
+ * The viewport edge from which a sheet enters.
+ *
+ * @public
+ */
+export type SheetPosition = Extract<DrawerPosition, 'top' | 'bottom'>;
+/**
+ * A visible sheet extent at which a released gesture can settle.
+ * The `content` value resolves to the measured sheet content height.
+ *
+ * @public
+ */
+export type SheetSnap = Exclude<CssLength, 'auto'> | 'content';
+/**
+ * The area from which a sheet gesture may start.
+ * `sheet` permits non-interactive areas of the complete sheet surface;
+ * `handle` restricts gesture starts to the built-in handle.
+ *
+ * @public
+ */
+export type SheetDragMode = 'sheet' | 'handle';
+/**
+ * Resolved snap information exposed in sheet events.
+ *
+ * @public
+ */
+export interface ISheetResolvedSnap {
+    /**
+     * The index of the snap in the originally configured `snaps` array.
+     */
+    readonly index: number;
+    /**
+     * The originally configured snap value.
+     */
+    readonly snap: SheetSnap;
+    /**
+     * The resolved and clamped visible extent in CSS pixels.
+     */
+    readonly value: number;
+}
+/**
+ * Event detail emitted after the active snap changes.
+ *
+ * @public
+ */
+export interface IActiveSnapChangedEventDetail extends IEventDetail {
+    /**
+     * The previous index in the resolved snap list.
+     */
+    readonly previousIndex: number;
+    /**
+     * The current index in the resolved snap list.
+     */
+    readonly currentIndex: number;
+    /**
+     * The configured snap value selected by the sheet.
+     */
+    readonly snap: SheetSnap;
+    /**
+     * The resolved visible extent in CSS pixels.
+     */
+    readonly value: number;
+}
+/**
+ * Gesture data emitted by sheet drag events.
+ *
+ * @public
+ */
+export interface ISheetDragEventDetail extends IEventDetail {
+    /**
+     * The horizontal pointer position in viewport coordinates.
+     */
+    readonly x: number;
+    /**
+     * The vertical pointer position in viewport coordinates.
+     */
+    readonly y: number;
+    /**
+     * The signed gesture distance in CSS pixels.
+     * Positive values increase the visible extent and negative values decrease it.
+     */
+    readonly delta: number;
+    /**
+     * The current visible sheet extent in CSS pixels.
+     */
+    readonly position: number;
+    /**
+     * The signed release velocity in CSS pixels per millisecond.
+     * Positive values open the sheet and negative values close it.
+     */
+    readonly velocity: number;
+    /**
+     * The viewport edge from which the sheet opens.
+     */
+    readonly direction: SheetPosition;
+}
+/**
+ * Event fired after the active sheet snap changes.
+ *
+ * @public
+ */
+export type ActiveSnapChangedEvent = CustomEvent<IActiveSnapChangedEventDetail>;
+/**
+ * Event fired for sheet gesture lifecycle updates.
+ *
+ * @public
+ */
+export type SheetDragEvent = CustomEvent<ISheetDragEventDetail>;
+declare global {
+    interface HTMLElementEventMap {
+        activeSnapChanged: ActiveSnapChangedEvent;
+    }
+}
+//# sourceMappingURL=SheetTypes.d.ts.map

package/Controls/Components/Overlays/Sheet/SheetTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetTypes.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/SheetTypes.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAIpE;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,cAAc,EAAE,KAAK,GAAG,QAAQ,CAAC,CAAC;AAEtE;;;;;GAKG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;AAE/D;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IAI/B;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAI1B;AAED;;;;GAIG;AACH,MAAM,WAAW,6BAA8B,SAAQ,YAAY;IAI/D;;OAEG;IACH,QAAQ,CAAC,aAAa,EAAE,MAAM,CAAC;IAE/B;;OAEG;IACH,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IAEzB;;OAEG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CAI1B;AAED;;;;GAIG;AACH,MAAM,WAAW,qBAAsB,SAAQ,YAAY;IAIvD;;OAEG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEvB;;OAEG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC;CAIrC;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,6BAA6B,CAAC,CAAC;AAEhF;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,WAAW,CAAC,qBAAqB,CAAC,CAAC;AAEhE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,mBAAmB;QACzB,iBAAiB,EAAE,sBAAsB,CAAC;KAC7C;CACJ"}

package/Controls/Components/Overlays/Sheet/SheetTypes.js

@@ -0,0 +1,3 @@
+// #region Imports
+export {};
+//# sourceMappingURL=SheetTypes.js.map

package/Controls/Components/Overlays/Sheet/SheetTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetTypes.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Overlays/Sheet/SheetTypes.ts"],"names":[],"mappings":"AAAA,kBAAkB"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CAyEhE"}
+{"version":3,"file":"SheetContentElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oCAAoC,IAAI,SAAS,CA8EhE"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.js

@@ -66,8 +66,10 @@ export function sheetContentElementCosmopolitanStyle() {
 :host {
   flex-direction: column;
   flex: 1;
+  height: 100%;
+  min-height: 0;
   display: flex;
-  overflow: auto;
+  overflow: hidden;
 }
 
 :host [part="scroll"] {
@@ -75,9 +77,12 @@ export function sheetContentElementCosmopolitanStyle() {
   padding-right: var(--sheet-content-padding-right);
   padding-bottom: var(--sheet-content-padding-bottom);
   padding-left: var(--sheet-content-padding-left);
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
   z-index: 1;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: auto;
 }

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuET,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetContentElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,oCAAoC;IAChD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CAyEvD"}
+{"version":3,"file":"SheetContentElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,SAAS,CA8EvD"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.js

@@ -66,8 +66,10 @@ export function sheetContentElementJoyStyle() {
 :host {
   flex-direction: column;
   flex: 1;
+  height: 100%;
+  min-height: 0;
   display: flex;
-  overflow: auto;
+  overflow: hidden;
 }
 
 :host [part="scroll"] {
@@ -75,9 +77,12 @@ export function sheetContentElementJoyStyle() {
   padding-right: var(--sheet-content-padding-right);
   padding-bottom: var(--sheet-content-padding-bottom);
   padding-left: var(--sheet-content-padding-left);
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
   z-index: 1;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: auto;
 }

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuET,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetContentElement.Joy.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Joy.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,2BAA2B;IACvC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CAyE3D"}
+{"version":3,"file":"SheetContentElement.Memphis.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,+BAA+B,IAAI,SAAS,CA8E3D"}

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.js

@@ -66,8 +66,10 @@ export function sheetContentElementMemphisStyle() {
 :host {
   flex-direction: column;
   flex: 1;
+  height: 100%;
+  min-height: 0;
   display: flex;
-  overflow: auto;
+  overflow: hidden;
 }
 
 :host [part="scroll"] {
@@ -75,9 +77,12 @@ export function sheetContentElementMemphisStyle() {
   padding-right: var(--sheet-content-padding-right);
   padding-bottom: var(--sheet-content-padding-bottom);
   padding-left: var(--sheet-content-padding-left);
+  overscroll-behavior-y: contain;
+  -webkit-overflow-scrolling: touch;
   z-index: 1;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
   display: flex;
   overflow: auto;
 }

package/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetContentElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuET,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetContentElement.Memphis.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetContentElement.Memphis.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,+BAA+B;IAC3C,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4ET,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,CAsIzD"}
+{"version":3,"file":"SheetElement.Cosmopolitan.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,SAAS,CA2MzD"}

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.js

@@ -15,7 +15,9 @@ export function sheetElementCosmopolitanStyle() {
 :host {
   --sheet-background-color: unset;
   --sheet-border-color: unset;
+  --sheet-border-radius: 16px;
   --sheet-border-width: unset;
+  --sheet-edge-offset: 0px;
   --sheet-font-family: unset;
   --sheet-font-letter-spacing: unset;
   --sheet-font-line-height: unset;
@@ -25,6 +27,12 @@ export function sheetElementCosmopolitanStyle() {
   --sheet-font-weight: unset;
   --sheet-foreground-color: unset;
   --sheet-gap: var(--cosmopolitan-layout-space);
+  --sheet-handle-background-color: currentColor;
+  --sheet-handle-border-radius: 999px;
+  --sheet-handle-height: 5px;
+  --sheet-handle-margin: 12px;
+  --sheet-handle-width: 44px;
+  --sheet-max-width: 414px;
   --sheet-padding-bottom: unset;
   --sheet-padding-left: unset;
   --sheet-padding-right: unset;
@@ -35,11 +43,17 @@ export function sheetElementCosmopolitanStyle() {
   --sheet-shadow-offset-x: unset;
   --sheet-shadow-offset-y: unset;
   --sheet-shadow-spread: unset;
+  --sheet-snap-indicator-active-background-color: currentColor;
+  --sheet-snap-indicator-background-color: color-mix(in srgb, currentColor 28%, transparent);
+  --sheet-snap-indicator-border-radius: 999px;
+  --sheet-snap-indicator-gap: 4px;
+  --sheet-snap-indicator-size: 6px;
   --sheet-transition-duration: var(--mosaik-duration-short);
   --sheet-transition-mode: ease;
   --sheet-transition-property: transform, opacity, visibility;
   --sheet-translate: none;
   --sheet-translate-y: unset;
+  --sheet-z-index: 2147480000;
 }
 
 @media screen and (prefers-reduced-motion: reduce) {
@@ -68,7 +82,32 @@ export function sheetElementCosmopolitanStyle() {
   display: none !important;
 }
 
+:host {
+  width: 100%;
+  height: 100%;
+  z-index: var(--sheet-z-index);
+  pointer-events: none;
+  position: fixed;
+  inset: 0;
+}
+
+:host [part="backdrop"] {
+  pointer-events: all;
+}
+
 :host [part="root"] {
+  box-sizing: border-box;
+  pointer-events: all;
+  width: 100%;
+  max-width: min(100% - var(--sheet-edge-offset) * 2, var(--sheet-max-width));
+  height: var(--sheet-resolved-height);
+  max-height: calc(100dvh - env(safe-area-inset-top));
+  padding-bottom: env(safe-area-inset-bottom);
+  visibility: hidden;
+  opacity: 0;
+  touch-action: none;
+  will-change: transform;
+  contain: layout paint;
   font-family: var(--sheet-font-family);
   font-size: var(--sheet-font-size);
   line-height: var(--sheet-font-line-height);
@@ -77,70 +116,100 @@ export function sheetElementCosmopolitanStyle() {
   -webkit-text-decoration: var(--sheet-font-text-decoration);
   text-decoration: var(--sheet-font-text-decoration);
   text-transform: var(--sheet-font-text-transform);
-  background-color: var(--sheet-background-color);
-  border-color: var(--sheet-border-color);
   color: var(--sheet-foreground-color);
-  opacity: 0;
-  visibility: hidden;
-  z-index: 2147483001;
-  filter: drop-shadow(0 5px 15px #0000004d);
-  border-radius: 15px 15px 0 0;
-  grid-template-columns: 1fr;
-  width: 100%;
-  max-width: 414px;
-  min-height: 90px;
-  margin: 0 auto;
-  padding-bottom: 35px;
-  font-size: 15px;
-  transition: top .5s ease-in-out, opacity .8s ease-in-out, max-height .35s ease-in-out;
+  background-color: var(--sheet-background-color);
+  border: var(--sheet-border-width) solid var(--sheet-border-color);
+  border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;
+  box-shadow: var(--sheet-shadow);
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  margin-inline: auto;
   display: grid;
-  position: fixed;
-  inset: 0 0 auto;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
   overflow: hidden;
-  transform: translateY(100vh);
+}
+
+:host [part="root"][data-animate] {
+  transition-property: var(--sheet-transition-property);
+  transition-duration: var(--sheet-transition-duration);
+  transition-timing-function: var(--sheet-transition-mode);
 }
 
 :host [part="root"] [part="heading"] {
+  flex: none;
   position: relative;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"] {
-  box-sizing: border-box;
+:host [part="root"] [part="handle"] {
+  box-sizing: content-box;
+  width: var(--sheet-handle-width);
+  height: var(--sheet-handle-height);
+  margin: var(--sheet-handle-margin) auto;
+  border-radius: var(--sheet-handle-border-radius);
+  background: var(--sheet-handle-background-color);
   cursor: grab;
-  width: 100%;
-  height: 30px;
-  padding-top: 8px;
+  touch-action: none;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:active {
+:host [part="root"] [part="handle"]:active {
   cursor: grabbing;
 }
 
-:host [part="root"] [part="heading"] [part="thumb"]:before {
-  background: var(--sheet-border-color);
-  content: "";
-  border-radius: 3px;
-  width: 40px;
-  height: 5px;
-  margin: 0 auto;
-  display: block;
+:host [part="root"] [part="body"] {
+  min-height: 0;
+  overflow: hidden;
 }
 
-:host [part="root"] [part="heading"]:after {
-  content: "";
-  height: calc(var(--sheet-border-width) / 2);
-  background-color: var(--sheet-border-color);
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
+:host [part="root"] [part="body"] slot[name="content"]::slotted(mosaik-sheet-content) {
+  box-sizing: border-box;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+:host [part="root"] [part="snap-indicator"] {
+  justify-content: center;
+  gap: var(--sheet-snap-indicator-gap);
+  padding-bottom: var(--sheet-snap-indicator-gap);
+  display: flex;
+}
+
+:host [part="root"] [part="snap-indicator-item"] {
+  width: var(--sheet-snap-indicator-size);
+  height: var(--sheet-snap-indicator-size);
+  border-radius: var(--sheet-snap-indicator-border-radius);
+  background: var(--sheet-snap-indicator-background-color);
+  transition: background-color var(--sheet-transition-duration) var(--sheet-transition-mode);
+}
+
+:host [part="root"] [part="snap-indicator-item"][data-active="true"] {
+  background: var(--sheet-snap-indicator-active-background-color);
+}
+
+:host([position="top"]) [part="root"] {
+  padding-top: env(safe-area-inset-top);
+  border-radius: 0 0 var(--sheet-border-radius) var(--sheet-border-radius);
+  max-height: calc(100dvh - env(safe-area-inset-bottom));
+  padding-bottom: 0;
+  top: 0;
+  bottom: auto;
 }
 
 :host([is-open]) [part="root"] {
-  opacity: 1;
   visibility: visible;
-  top: 12px;
-  transform: translateY(calc(100vh - 74px));
+  opacity: 1;
+}
+
+:host([data-state="closed"]) [part="root"] {
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [part="root"][data-animate] {
+    transition: none;
+  }
 }
 
     `;

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.js.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoIT,CAAC;AACN,CAAC"}
+{"version":3,"file":"SheetElement.Cosmopolitan.js","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Cosmopolitan.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,mBAAmB;AACnB,yCAAyC;AACzC,qGAAqG;AACrG,oBAAoB;AACpB,iFAAiF;AAEjF,kBAAkB;AAElB,OAAO,EAAE,GAAG,EAAkB,MAAM,wBAAwB,CAAC;AAE7D,aAAa;AAEb;;GAEG;AACH,MAAM,UAAU,6BAA6B;IACzC,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyMT,CAAC;AACN,CAAC"}

package/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SheetElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CAsIhD"}
+{"version":3,"file":"SheetElement.Joy.d.ts","sourceRoot":"","sources":["../../../../../../src/Controls/Components/Overlays/Sheet/Themes/SheetElement.Joy.ts"],"names":[],"mappings":"AASA,OAAO,EAAO,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAI7D;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,SAAS,CA2MhD"}