luxen-ui 0.1.2 → 0.2.0

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 (37) hide show
  1. package/cdn/custom-elements.json +293 -224
  2. package/cdn/elements/dialog/dialog.d.ts +1 -0
  3. package/cdn/elements/dialog/dialog.d.ts.map +1 -1
  4. package/cdn/elements/dialog/dialog.js.map +1 -1
  5. package/cdn/elements/dialog/dialog.styles.js +1 -1
  6. package/cdn/elements/dialog/dialog.styles.js.map +1 -1
  7. package/cdn/elements/input-stepper/input-stepper.d.ts +3 -0
  8. package/cdn/elements/input-stepper/input-stepper.d.ts.map +1 -1
  9. package/cdn/elements/input-stepper/input-stepper.js.map +1 -1
  10. package/cdn/elements/popover/popover.d.ts +3 -1
  11. package/cdn/elements/popover/popover.d.ts.map +1 -1
  12. package/cdn/elements/popover/popover.js +2 -2
  13. package/cdn/elements/popover/popover.js.map +1 -1
  14. package/cdn/shared/controllers/popover.d.ts +1 -0
  15. package/cdn/shared/controllers/popover.d.ts.map +1 -1
  16. package/cdn/shared/controllers/popover.js +1 -1
  17. package/cdn/shared/controllers/popover.js.map +1 -1
  18. package/cdn/styles/elements/input-stepper/default.css +19 -16
  19. package/cdn/styles/elements/input-stepper/rounded.css +14 -11
  20. package/dist/css/elements/input-stepper/default.css +19 -16
  21. package/dist/css/elements/input-stepper/rounded.css +14 -11
  22. package/dist/custom-elements.json +293 -224
  23. package/dist/elements/dialog/dialog.css +4 -3
  24. package/dist/elements/dialog/dialog.d.ts +1 -0
  25. package/dist/elements/dialog/dialog.d.ts.map +1 -1
  26. package/dist/elements/dialog/dialog.js +1 -0
  27. package/dist/elements/input-stepper/input-stepper.d.ts +3 -0
  28. package/dist/elements/input-stepper/input-stepper.d.ts.map +1 -1
  29. package/dist/elements/input-stepper/input-stepper.js +3 -0
  30. package/dist/elements/popover/popover.css +7 -2
  31. package/dist/elements/popover/popover.d.ts +3 -1
  32. package/dist/elements/popover/popover.d.ts.map +1 -1
  33. package/dist/elements/popover/popover.js +15 -4
  34. package/dist/shared/controllers/popover.d.ts +1 -0
  35. package/dist/shared/controllers/popover.d.ts.map +1 -1
  36. package/dist/shared/controllers/popover.js +2 -1
  37. package/package.json +3 -2
package/cdn/styles/elements/input-stepper/default.css CHANGED
@@ -30,8 +30,8 @@
30
30
 
31
31
  :scope {
32
32
  --_button-size: var(--l-size-control-md);
33
- --_border-color: var(--l-color-border);
34
- --_border-radius: var(--border-radius, var(--radius-md));
33
+ --border-color: var(--l-color-border);
34
+ --border-radius: var(--radius-md);
35
35
  --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
36
36
  --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
37
37
 
@@ -45,7 +45,7 @@
45
45
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
46
46
  🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
47
47
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
48
- Reserve button space before JS loads. Native spin buttons remain as fallback.
48
+ Reserve button space before JS loads to avoid layout shift when buttons mount.
49
49
  */
50
50
 
51
51
  :scope:not(:defined) {
@@ -56,12 +56,6 @@
56
56
  padding-inline: 0;
57
57
  }
58
58
 
59
- input::-webkit-inner-spin-button,
60
- input::-webkit-outer-spin-button {
61
- appearance: none;
62
- margin: 0;
63
- }
64
-
65
59
  /*
66
60
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
67
61
  🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
132
126
  */
133
127
 
134
128
  input {
135
- appearance: none;
129
+ appearance: textfield;
136
130
  box-sizing: border-box;
137
131
  font-family: inherit;
138
132
  font-size: inherit;
@@ -205,23 +199,32 @@
205
199
  color: var(--l-color-text-disabled);
206
200
  }
207
201
  }
202
+
203
+ /* Hide native spinners — kept outside @scope because Safari ignores
204
+ ::-webkit-*-spin-button rules nested inside @scope blocks. */
205
+ l-input-stepper input::-webkit-inner-spin-button,
206
+ l-input-stepper input::-webkit-outer-spin-button {
207
+ appearance: none;
208
+ display: none;
209
+ margin: 0;
210
+ }
208
211
  }
209
212
 
210
213
  @layer components {
211
214
  @scope (l-input-stepper:not([appearance]), l-input-stepper[appearance='default']) {
212
215
  :scope {
213
- border: 1px solid var(--_border-color);
214
- border-radius: var(--_border-radius);
216
+ border: 1px solid var(--border-color);
217
+ border-radius: var(--border-radius);
215
218
  background-color: var(--l-color-surface);
216
219
  min-height: var(--_button-size);
217
220
  }
218
221
 
219
222
  button:first-of-type {
220
- border-radius: var(--_border-radius) 0 0 var(--_border-radius);
223
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
221
224
  }
222
225
 
223
226
  button:last-of-type {
224
- border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
227
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
225
228
  }
226
229
 
227
230
  :scope:has(input:disabled) {
@@ -236,8 +239,8 @@
236
239
  since no buttons exist to push the content area beyond min-height. */
237
240
  @scope (l-input-stepper:not(:defined):not([appearance]), l-input-stepper:not(:defined)[appearance='default']) {
238
241
  :scope {
239
- border: 1px solid var(--_border-color);
240
- border-radius: var(--_border-radius);
242
+ border: 1px solid var(--border-color);
243
+ border-radius: var(--border-radius);
241
244
  background-color: var(--l-color-surface);
242
245
  min-height: calc(var(--_button-size) + 2px);
243
246
  }
package/cdn/styles/elements/input-stepper/rounded.css CHANGED
@@ -30,8 +30,8 @@
30
30
 
31
31
  :scope {
32
32
  --_button-size: var(--l-size-control-md);
33
- --_border-color: var(--l-color-border);
34
- --_border-radius: var(--border-radius, var(--radius-md));
33
+ --border-color: var(--l-color-border);
34
+ --border-radius: var(--radius-md);
35
35
  --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
36
36
  --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
37
37
 
@@ -45,7 +45,7 @@
45
45
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
46
46
  🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
47
47
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
48
- Reserve button space before JS loads. Native spin buttons remain as fallback.
48
+ Reserve button space before JS loads to avoid layout shift when buttons mount.
49
49
  */
50
50
 
51
51
  :scope:not(:defined) {
@@ -56,12 +56,6 @@
56
56
  padding-inline: 0;
57
57
  }
58
58
 
59
- input::-webkit-inner-spin-button,
60
- input::-webkit-outer-spin-button {
61
- appearance: none;
62
- margin: 0;
63
- }
64
-
65
59
  /*
66
60
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
67
61
  🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
132
126
  */
133
127
 
134
128
  input {
135
- appearance: none;
129
+ appearance: textfield;
136
130
  box-sizing: border-box;
137
131
  font-family: inherit;
138
132
  font-size: inherit;
@@ -205,6 +199,15 @@
205
199
  color: var(--l-color-text-disabled);
206
200
  }
207
201
  }
202
+
203
+ /* Hide native spinners — kept outside @scope because Safari ignores
204
+ ::-webkit-*-spin-button rules nested inside @scope blocks. */
205
+ l-input-stepper input::-webkit-inner-spin-button,
206
+ l-input-stepper input::-webkit-outer-spin-button {
207
+ appearance: none;
208
+ display: none;
209
+ margin: 0;
210
+ }
208
211
  }
209
212
 
210
213
  @layer components {
@@ -214,7 +217,7 @@
214
217
  }
215
218
 
216
219
  button {
217
- border: 1px solid var(--_border-color);
220
+ border: 1px solid var(--border-color);
218
221
  border-radius: var(--radius-full);
219
222
  background-color: var(--l-color-surface);
220
223
  }
package/dist/css/elements/input-stepper/default.css CHANGED
@@ -30,8 +30,8 @@
30
30
 
31
31
  :scope {
32
32
  --_button-size: var(--l-size-control-md);
33
- --_border-color: var(--l-color-border);
34
- --_border-radius: var(--border-radius, var(--radius-md));
33
+ --border-color: var(--l-color-border);
34
+ --border-radius: var(--radius-md);
35
35
  --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
36
36
  --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
37
37
 
@@ -45,7 +45,7 @@
45
45
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
46
46
  🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
47
47
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
48
- Reserve button space before JS loads. Native spin buttons remain as fallback.
48
+ Reserve button space before JS loads to avoid layout shift when buttons mount.
49
49
  */
50
50
 
51
51
  :scope:not(:defined) {
@@ -56,12 +56,6 @@
56
56
  padding-inline: 0;
57
57
  }
58
58
 
59
- input::-webkit-inner-spin-button,
60
- input::-webkit-outer-spin-button {
61
- appearance: none;
62
- margin: 0;
63
- }
64
-
65
59
  /*
66
60
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
67
61
  🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
132
126
  */
133
127
 
134
128
  input {
135
- appearance: none;
129
+ appearance: textfield;
136
130
  box-sizing: border-box;
137
131
  font-family: inherit;
138
132
  font-size: inherit;
@@ -205,23 +199,32 @@
205
199
  color: var(--l-color-text-disabled);
206
200
  }
207
201
  }
202
+
203
+ /* Hide native spinners — kept outside @scope because Safari ignores
204
+ ::-webkit-*-spin-button rules nested inside @scope blocks. */
205
+ l-input-stepper input::-webkit-inner-spin-button,
206
+ l-input-stepper input::-webkit-outer-spin-button {
207
+ appearance: none;
208
+ display: none;
209
+ margin: 0;
210
+ }
208
211
  }
209
212
 
210
213
  @layer components {
211
214
  @scope (l-input-stepper:not([appearance]), l-input-stepper[appearance='default']) {
212
215
  :scope {
213
- border: 1px solid var(--_border-color);
214
- border-radius: var(--_border-radius);
216
+ border: 1px solid var(--border-color);
217
+ border-radius: var(--border-radius);
215
218
  background-color: var(--l-color-surface);
216
219
  min-height: var(--_button-size);
217
220
  }
218
221
 
219
222
  button:first-of-type {
220
- border-radius: var(--_border-radius) 0 0 var(--_border-radius);
223
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
221
224
  }
222
225
 
223
226
  button:last-of-type {
224
- border-radius: 0 var(--_border-radius) var(--_border-radius) 0;
227
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
225
228
  }
226
229
 
227
230
  :scope:has(input:disabled) {
@@ -236,8 +239,8 @@
236
239
  since no buttons exist to push the content area beyond min-height. */
237
240
  @scope (l-input-stepper:not(:defined):not([appearance]), l-input-stepper:not(:defined)[appearance='default']) {
238
241
  :scope {
239
- border: 1px solid var(--_border-color);
240
- border-radius: var(--_border-radius);
242
+ border: 1px solid var(--border-color);
243
+ border-radius: var(--border-radius);
241
244
  background-color: var(--l-color-surface);
242
245
  min-height: calc(var(--_button-size) + 2px);
243
246
  }
package/dist/css/elements/input-stepper/rounded.css CHANGED
@@ -30,8 +30,8 @@
30
30
 
31
31
  :scope {
32
32
  --_button-size: var(--l-size-control-md);
33
- --_border-color: var(--l-color-border);
34
- --_border-radius: var(--border-radius, var(--radius-md));
33
+ --border-color: var(--l-color-border);
34
+ --border-radius: var(--radius-md);
35
35
  --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
36
36
  --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);
37
37
 
@@ -45,7 +45,7 @@
45
45
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
46
46
  🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
47
47
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
48
- Reserve button space before JS loads. Native spin buttons remain as fallback.
48
+ Reserve button space before JS loads to avoid layout shift when buttons mount.
49
49
  */
50
50
 
51
51
  :scope:not(:defined) {
@@ -56,12 +56,6 @@
56
56
  padding-inline: 0;
57
57
  }
58
58
 
59
- input::-webkit-inner-spin-button,
60
- input::-webkit-outer-spin-button {
61
- appearance: none;
62
- margin: 0;
63
- }
64
-
65
59
  /*
66
60
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
67
61
  🆂🅸🆉🅴🆂
@@ -132,7 +126,7 @@
132
126
  */
133
127
 
134
128
  input {
135
- appearance: none;
129
+ appearance: textfield;
136
130
  box-sizing: border-box;
137
131
  font-family: inherit;
138
132
  font-size: inherit;
@@ -205,6 +199,15 @@
205
199
  color: var(--l-color-text-disabled);
206
200
  }
207
201
  }
202
+
203
+ /* Hide native spinners — kept outside @scope because Safari ignores
204
+ ::-webkit-*-spin-button rules nested inside @scope blocks. */
205
+ l-input-stepper input::-webkit-inner-spin-button,
206
+ l-input-stepper input::-webkit-outer-spin-button {
207
+ appearance: none;
208
+ display: none;
209
+ margin: 0;
210
+ }
208
211
  }
209
212
 
210
213
  @layer components {
@@ -214,7 +217,7 @@
214
217
  }
215
218
 
216
219
  button {
217
- border: 1px solid var(--_border-color);
220
+ border: 1px solid var(--border-color);
218
221
  border-radius: var(--radius-full);
219
222
  background-color: var(--l-color-surface);
220
223
  }