tera-system-ui 0.2.1 → 0.2.3
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.
- package/dist/components/bottom-sheet/BottomSheet.recipe.d.ts +20 -0
- package/dist/components/bottom-sheet/BottomSheet.recipe.js +1 -1
- package/dist/components/bottom-sheet/BottomSheet.svelte +570 -208
- package/dist/llms/bottom-sheet.md +2 -0
- package/package.json +1 -1
- package/registry/bottom-sheet.json +2 -2
|
@@ -110,6 +110,26 @@ export interface BottomSheetProps {
|
|
|
110
110
|
closeOnBackdrop?: boolean;
|
|
111
111
|
/** Show a close (X) button in the header (requires the `header` snippet). */
|
|
112
112
|
showCloseButton?: boolean;
|
|
113
|
+
/**
|
|
114
|
+
* Keep the browser UI tint (iOS Safari status bar / Android address bar) matching the page
|
|
115
|
+
* while the sheet is open. The full-screen backdrop darkens the area behind the status bar;
|
|
116
|
+
* iOS Safari, when the page declares no `<meta name="theme-color">`, re-samples that area and
|
|
117
|
+
* flips the status bar dark — losing the immersive look. When true (the default) the sheet,
|
|
118
|
+
* only if the page has no `theme-color` of its own, adds one pinned to the page background for
|
|
119
|
+
* its open lifetime and removes it on close. A page that sets its own tint is left untouched.
|
|
120
|
+
*/
|
|
121
|
+
syncThemeColor?: boolean;
|
|
122
|
+
/**
|
|
123
|
+
* Prevent the browser's native pull-to-refresh / overscroll-reload from hijacking a downward
|
|
124
|
+
* drag that starts on an interactive element inside the sheet. The two-phase gesture only
|
|
125
|
+
* claims the touch (`preventDefault`) once the drag commits past its activation threshold, so a
|
|
126
|
+
* *slow* pull can let the browser start pull-to-refresh first (a quick flick clears the
|
|
127
|
+
* threshold immediately and does not). When true (the default) the sheet pins
|
|
128
|
+
* `overscroll-behavior-y: contain` on the document root for its open lifetime — reference-counted
|
|
129
|
+
* across stacked sheets, the page's original value restored on close. Reliable on Android and
|
|
130
|
+
* iOS 16+. Set false if the host app manages page overscroll itself.
|
|
131
|
+
*/
|
|
132
|
+
preventPullToRefresh?: boolean;
|
|
113
133
|
/** Called after the sheet finishes closing. */
|
|
114
134
|
onClose?: () => void;
|
|
115
135
|
/** Called whenever the open state changes. */
|
|
@@ -21,7 +21,7 @@ import { tv } from "tailwind-variants";
|
|
|
21
21
|
export const bottomSheetRecipe = tv({
|
|
22
22
|
slots: {
|
|
23
23
|
backdrop: 'fixed inset-0 bg-black opacity-0 touch-none [will-change:opacity] [-webkit-tap-highlight-color:transparent] transition-opacity duration-[var(--transition-duration,0.35s)] ease-out',
|
|
24
|
-
sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)]
|
|
24
|
+
sheet: 'fixed bottom-0 left-0 right-0 flex flex-col overflow-visible bg-surface-raised rounded-t-[var(--tera-bottom-sheet-radius,12px)] [will-change:translate] [translate:0_100%] [transform:translateZ(0)] [backface-visibility:hidden] transition-[translate] duration-[var(--transition-duration,0.35s)] ease-[cubic-bezier(0.2,0.9,0.36,1)]',
|
|
25
25
|
handle: 'flex shrink-0 items-center justify-center px-4 pt-2 pb-1 cursor-grab touch-none active:cursor-grabbing',
|
|
26
26
|
handleBar: 'h-[5px] w-9 rounded-[2.5px] bg-text-tertiary',
|
|
27
27
|
header: 'relative shrink-0 cursor-grab touch-none select-none border-b border-border-default px-4 pt-1 pb-3 active:cursor-grabbing',
|