@usefillo/dom 0.5.3 → 0.5.4
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/index.d.ts +8 -1
- package/dist/index.js +291 -21
- package/dist/standalone.global.js +1 -65
- package/dist/styles.css +11 -2
- package/package.json +2 -2
package/dist/styles.css
CHANGED
|
@@ -126,12 +126,18 @@
|
|
|
126
126
|
.fillo-field--error .fillo-phone-flag { border-color: var(--fillo-error); }
|
|
127
127
|
.fillo-phone-popover {
|
|
128
128
|
position: absolute; z-index: 30; top: calc(100% + 0.3rem); left: 0;
|
|
129
|
-
width: 18rem
|
|
129
|
+
width: min(18rem, calc(100vw - 1rem));
|
|
130
|
+
max-width: var(--fillo-phone-popover-max-width, 84vw);
|
|
131
|
+
max-height: min(var(--fillo-phone-popover-max-height, 20rem), calc(100vh - 1rem));
|
|
132
|
+
padding: 0.4rem;
|
|
133
|
+
box-sizing: border-box; overflow: hidden;
|
|
134
|
+
transform: translateX(var(--fillo-phone-popover-offset-x, 0px));
|
|
130
135
|
display: flex; flex-direction: column; gap: 0.35rem;
|
|
131
136
|
background: var(--fillo-control-bg);
|
|
132
137
|
border: 1px solid var(--fillo-border); border-radius: var(--fillo-radius);
|
|
133
138
|
box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.35);
|
|
134
139
|
}
|
|
140
|
+
.fillo-phone-popover--above { top: auto; bottom: calc(100% + 0.3rem); }
|
|
135
141
|
.fillo-phone-search {
|
|
136
142
|
appearance: none; font: inherit; width: 100%; box-sizing: border-box;
|
|
137
143
|
color: var(--fillo-text); background: var(--fillo-bg);
|
|
@@ -139,7 +145,10 @@
|
|
|
139
145
|
border-radius: calc(var(--fillo-radius) - 3px); padding: 0.45rem 0.6rem;
|
|
140
146
|
}
|
|
141
147
|
.fillo-phone-search:focus-visible { outline: none; border-color: var(--fillo-primary); }
|
|
142
|
-
.fillo-phone-list {
|
|
148
|
+
.fillo-phone-list {
|
|
149
|
+
flex: 1 1 auto; min-height: 0;
|
|
150
|
+
list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto;
|
|
151
|
+
}
|
|
143
152
|
.fillo-phone-option {
|
|
144
153
|
display: flex; align-items: center; gap: 0.5rem;
|
|
145
154
|
padding: 0.45rem 0.5rem; border-radius: calc(var(--fillo-radius) - 3px);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@usefillo/dom",
|
|
3
|
-
"version": "0.5.
|
|
3
|
+
"version": "0.5.4",
|
|
4
4
|
"description": "Framework-agnostic DOM renderer and web component for embedding Fillo forms.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"keywords": [
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"access": "public"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@usefillo/core": "^0.5.
|
|
37
|
+
"@usefillo/core": "^0.5.1"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"jsdom": "^25.0.1",
|