lutra 0.1.37 → 0.1.39

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.
@@ -12,6 +12,8 @@
12
12
  position = "block-end",
13
13
  align = "start",
14
14
  fallbacks = ["flip-block", "flip-inline"],
15
+ visibility = "anchors-visible",
16
+ tryOrder = "most-block-size",
15
17
  mode = "auto",
16
18
  offset,
17
19
  width,
@@ -34,6 +36,10 @@
34
36
  align?: "start" | "center" | "end";
35
37
  /** CSS position-try-fallbacks values */
36
38
  fallbacks?: string[];
39
+ /** When to hide: "always" (never hide), "anchors-visible" (hide when anchor hidden), "no-overflow" (hide if overflows) */
40
+ visibility?: "always" | "anchors-visible" | "no-overflow";
41
+ /** Order for trying fallback positions */
42
+ tryOrder?: "normal" | "most-block-size" | "most-inline-size";
37
43
  /** Popover mode: "auto" (light dismiss) or "manual" */
38
44
  mode?: "auto" | "manual";
39
45
  /** Gap between anchor and popover (CSS margin value) */
@@ -151,7 +157,8 @@
151
157
  const popoverStyle = $derived([
152
158
  `position-anchor: ${anchorName}`,
153
159
  `position-area: ${positionArea}`,
154
- `position-try-order: most-block-size`,
160
+ `position-visibility: ${visibility}`,
161
+ `position-try-order: ${tryOrder}`,
155
162
  fallbacks.length ? `position-try-fallbacks: ${fallbacks.join(", ")}` : "",
156
163
  offset ? `--popover-offset: ${offset}` : "",
157
164
  width ? `--popover-width: ${width}` : "",
@@ -177,9 +184,19 @@
177
184
 
178
185
  <style>
179
186
  .Popover {
180
- /* Reset browser popover defaults */
181
- padding: 0;
187
+ /*
188
+ * Anchor positioning requires explicit position: fixed or absolute
189
+ * See: https://developer.chrome.com/docs/css-ui/anchor-positioning-api
190
+ */
191
+ position: fixed;
192
+
193
+ /* Reset UA popover centering styles */
194
+ inset: auto;
182
195
  margin: 0;
196
+ padding: 0;
197
+
198
+ /* Offset from anchor */
199
+ margin-block: var(--popover-offset, 0.25rem);
183
200
 
184
201
  /* Default surface styling */
185
202
  background: var(--popover-background, var(--surface-background, var(--background-body)));
@@ -192,12 +209,6 @@
192
209
  max-width: var(--popover-max-width, calc(100vw - 2rem));
193
210
  max-height: var(--popover-max-height, calc(100vh - 2rem));
194
211
  overflow: auto;
195
-
196
- /* Offset from anchor - applied as margin */
197
- margin-block: var(--popover-offset, 0.25rem);
198
-
199
- /* Let anchor positioning handle inset */
200
- inset: auto;
201
212
  }
202
213
 
203
214
  .Popover.unstyled {
@@ -10,6 +10,10 @@ type $$ComponentProps = {
10
10
  align?: "start" | "center" | "end";
11
11
  /** CSS position-try-fallbacks values */
12
12
  fallbacks?: string[];
13
+ /** When to hide: "always" (never hide), "anchors-visible" (hide when anchor hidden), "no-overflow" (hide if overflows) */
14
+ visibility?: "always" | "anchors-visible" | "no-overflow";
15
+ /** Order for trying fallback positions */
16
+ tryOrder?: "normal" | "most-block-size" | "most-inline-size";
13
17
  /** Popover mode: "auto" (light dismiss) or "manual" */
14
18
  mode?: "auto" | "manual";
15
19
  /** Gap between anchor and popover (CSS margin value) */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lutra",
3
- "version": "0.1.37",
3
+ "version": "0.1.39",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",