lutra 0.1.45 → 0.1.47

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.
Files changed (7) hide show
  1. package/dist/components/Dialog.svelte +9 -2
  2. package/dist/components/Modal.svelte +9 -2
  3. package/dist/components/ModalContent.svelte +8 -2
  4. package/dist/components/Popover.svelte +0 -1
  5. package/dist/components/ToastContainer.svelte +6 -6
  6. package/dist/css/2-base.css +1 -0
  7. package/package.json +1 -1
package/dist/components/Dialog.svelte CHANGED
@@ -59,13 +59,20 @@
59
59
 
60
60
  <style>
61
61
  .Dialog {
62
+ margin: auto;
62
63
  padding: 0;
63
64
  border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
64
65
  border-radius: var(--modal-border-radius, var(--surface-border-radius));
65
66
  background: var(--modal-background, var(--surface-background));
66
67
  color: var(--text-color-p);
67
- max-width: min(calc(100vw - 2rem), 32rem);
68
- max-height: min(calc(100vh - 2rem), 80vh);
68
+ max-width: min(
69
+ var(--modal-max-width, 40rem),
70
+ calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
71
+ );
72
+ max-height: min(
73
+ var(--modal-max-height, 80vh),
74
+ calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
75
+ );
69
76
  box-shadow: var(--modal-shadow, var(--surface-shadow));
70
77
  }
71
78
 
package/dist/components/Modal.svelte CHANGED
@@ -212,14 +212,21 @@
212
212
  }
213
213
 
214
214
  dialog.Modal {
215
+ margin: auto;
215
216
  border: none;
216
217
  padding: 0;
217
218
  background: var(--modal-background, var(--surface-background));
218
219
  border-radius: var(--modal-border-radius, var(--surface-border-radius));
219
220
  box-shadow: var(--modal-shadow, var(--surface-shadow));
220
221
  width: var(--modal-width, fit-content);
221
- max-width: min(var(--modal-max-width, 40rem), calc(100vw - 2rem));
222
- max-height: min(var(--modal-max-height, 80vh), calc(100vh - 2rem));
222
+ max-width: min(
223
+ var(--modal-max-width, 40rem),
224
+ calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
225
+ );
226
+ max-height: min(
227
+ var(--modal-max-height, 80vh),
228
+ calc(100vh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
229
+ );
223
230
  overflow: hidden;
224
231
  gap: var(--modal-gap);
225
232
  }
package/dist/components/ModalContent.svelte CHANGED
@@ -112,8 +112,14 @@
112
112
  grid-template-rows: 1fr auto;
113
113
  gap: var(--modal-gap);
114
114
  width: var(--modal-width, fit-content);
115
- max-width: min(var(--modal-max-width, 40rem), calc(100svw - 2rem));
116
- max-height: min(var(--modal-max-height, 80svh), calc(100svh - 2rem));
115
+ max-width: min(
116
+ var(--modal-max-width, 40rem),
117
+ calc(100svw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))
118
+ );
119
+ max-height: min(
120
+ var(--modal-max-height, 80svh),
121
+ calc(100svh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))
122
+ );
117
123
  background: var(--modal-background, var(--surface-background));
118
124
  border: var(--modal-border-size) var(--modal-border-style) var(--modal-border-color);
119
125
  border-radius: var(--modal-border-radius, var(--surface-border-radius));
package/dist/components/Popover.svelte CHANGED
@@ -66,7 +66,6 @@
66
66
  const anchorName = `--anchor-${id}`;
67
67
 
68
68
  let popoverEl: HTMLDivElement | null = $state(null);
69
- let triggerWrapperEl: HTMLElement | null = $state(null);
70
69
 
71
70
  // Handle external anchor (not using trigger snippet)
72
71
  $effect(() => {
package/dist/components/ToastContainer.svelte CHANGED
@@ -81,26 +81,26 @@
81
81
  }
82
82
 
83
83
  .top-left {
84
- inset: var(--toast-offset, 1rem) auto auto var(--toast-offset, 1rem);
84
+ inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-left, 0px));
85
85
  }
86
86
  .top-center {
87
- inset: var(--toast-offset, 1rem) auto auto 50%;
87
+ inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) auto auto 50%;
88
88
  translate: -50% 0;
89
89
  }
90
90
  .top-right {
91
- inset: var(--toast-offset, 1rem) var(--toast-offset, 1rem) auto auto;
91
+ inset: calc(var(--toast-offset, 1rem) + env(safe-area-inset-top, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-right, 0px)) auto auto;
92
92
  }
93
93
  .bottom-left {
94
- inset: auto auto var(--toast-offset, 1rem) var(--toast-offset, 1rem);
94
+ inset: auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-left, 0px));
95
95
  flex-direction: column-reverse;
96
96
  }
97
97
  .bottom-center {
98
- inset: auto auto var(--toast-offset, 1rem) 50%;
98
+ inset: auto auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) 50%;
99
99
  translate: -50% 0;
100
100
  flex-direction: column-reverse;
101
101
  }
102
102
  .bottom-right {
103
- inset: auto var(--toast-offset, 1rem) var(--toast-offset, 1rem) auto;
103
+ inset: auto calc(var(--toast-offset, 1rem) + env(safe-area-inset-right, 0px)) calc(var(--toast-offset, 1rem) + env(safe-area-inset-bottom, 0px)) auto;
104
104
  flex-direction: column-reverse;
105
105
  }
106
106
 
package/dist/css/2-base.css CHANGED
@@ -363,6 +363,7 @@ input:disabled, textarea:disabled, select:disabled {
363
363
  * Uses native <dialog> element
364
364
  */
365
365
  dialog.ProgrammaticModal {
366
+ margin: auto;
366
367
  border: none;
367
368
  padding: 0;
368
369
  background: transparent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lutra",
3
- "version": "0.1.45",
3
+ "version": "0.1.47",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "bump-and-publish:patch": "pnpm version:patch && pnpm build && npm publish",