elements-kit 0.26.3 → 0.26.5

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 (6) hide show
  1. package/dist/ui/select/select.css +8 -0
  2. package/dist/ui/styles/index.css +19 -16
  3. package/dist/ui/styles/radius.css +1 -1
  4. package/dist/ui/styles/space.css +1 -1
  5. package/dist/ui/styles/typography.css +17 -14
  6. package/package.json +6 -2
package/dist/ui/select/select.css CHANGED
@@ -26,6 +26,14 @@
26
26
  --select-chevron-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%23eeeeee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
27
27
  }
28
28
 
29
+ .x-select:where(:disabled) {
30
+ --select-chevron-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%23646464' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
31
+ }
32
+
33
+ :where(.dark, .dark-theme) .x-select:where(:disabled), .x-select:where(.dark, .dark-theme):where(:disabled) {
34
+ --select-chevron-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='none' stroke='%23b4b4b4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 5l3 3 3-3'/></svg>");
35
+ }
36
+
29
37
  .x-select:where(:focus-visible) {
30
38
  outline: 2px solid var(--focus-8);
31
39
  outline-offset: -1px;
package/dist/ui/styles/index.css CHANGED
@@ -165,7 +165,7 @@
165
165
  --scaling: 1.1;
166
166
  }
167
167
 
168
- :where(:root) {
168
+ :where(:root), [data-scaling] {
169
169
  --space-1: calc(4px * var(--scaling));
170
170
  --space-2: calc(8px * var(--scaling));
171
171
  --space-3: calc(12px * var(--scaling));
@@ -177,7 +177,7 @@
177
177
  --space-9: calc(64px * var(--scaling));
178
178
  }
179
179
 
180
- :where(:root), [data-radius] {
180
+ :where(:root), [data-radius], [data-scaling] {
181
181
  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
182
182
  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
183
183
  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
@@ -216,7 +216,7 @@
216
216
  --radius-thumb: 9999px;
217
217
  }
218
218
 
219
- :where(:root) {
219
+ :where(:root), [data-scaling] {
220
220
  --font-size-1: calc(12px * var(--scaling));
221
221
  --font-size-2: calc(14px * var(--scaling));
222
222
  --font-size-3: calc(16px * var(--scaling));
@@ -226,10 +226,6 @@
226
226
  --font-size-7: calc(28px * var(--scaling));
227
227
  --font-size-8: calc(35px * var(--scaling));
228
228
  --font-size-9: calc(60px * var(--scaling));
229
- --font-weight-light: 300;
230
- --font-weight-regular: 400;
231
- --font-weight-medium: 500;
232
- --font-weight-bold: 700;
233
229
  --line-height-1: calc(16px * var(--scaling));
234
230
  --line-height-2: calc(20px * var(--scaling));
235
231
  --line-height-3: calc(24px * var(--scaling));
@@ -239,6 +235,22 @@
239
235
  --line-height-7: calc(36px * var(--scaling));
240
236
  --line-height-8: calc(40px * var(--scaling));
241
237
  --line-height-9: calc(60px * var(--scaling));
238
+ --heading-line-height-1: calc(16px * var(--scaling));
239
+ --heading-line-height-2: calc(18px * var(--scaling));
240
+ --heading-line-height-3: calc(22px * var(--scaling));
241
+ --heading-line-height-4: calc(24px * var(--scaling));
242
+ --heading-line-height-5: calc(26px * var(--scaling));
243
+ --heading-line-height-6: calc(30px * var(--scaling));
244
+ --heading-line-height-7: calc(36px * var(--scaling));
245
+ --heading-line-height-8: calc(40px * var(--scaling));
246
+ --heading-line-height-9: calc(60px * var(--scaling));
247
+ }
248
+
249
+ :where(:root) {
250
+ --font-weight-light: 300;
251
+ --font-weight-regular: 400;
252
+ --font-weight-medium: 500;
253
+ --font-weight-bold: 700;
242
254
  --letter-spacing-1: .0025em;
243
255
  --letter-spacing-2: 0em;
244
256
  --letter-spacing-3: 0em;
@@ -263,15 +275,6 @@
263
275
  --heading-leading-trim-start: var(--default-leading-trim-start);
264
276
  --heading-leading-trim-end: var(--default-leading-trim-end);
265
277
  --heading-letter-spacing: 0em;
266
- --heading-line-height-1: calc(16px * var(--scaling));
267
- --heading-line-height-2: calc(18px * var(--scaling));
268
- --heading-line-height-3: calc(22px * var(--scaling));
269
- --heading-line-height-4: calc(24px * var(--scaling));
270
- --heading-line-height-5: calc(26px * var(--scaling));
271
- --heading-line-height-6: calc(30px * var(--scaling));
272
- --heading-line-height-7: calc(36px * var(--scaling));
273
- --heading-line-height-8: calc(40px * var(--scaling));
274
- --heading-line-height-9: calc(60px * var(--scaling));
275
278
  --code-font-family: "Menlo", "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
276
279
  "Segoe UI Emoji";
277
280
  --code-font-size-adjust: .95;
package/dist/ui/styles/radius.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(:root), [data-radius] {
1
+ :where(:root), [data-radius], [data-scaling] {
2
2
  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
3
3
  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
4
4
  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
package/dist/ui/styles/space.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(:root) {
1
+ :where(:root), [data-scaling] {
2
2
  --space-1: calc(4px * var(--scaling));
3
3
  --space-2: calc(8px * var(--scaling));
4
4
  --space-3: calc(12px * var(--scaling));
package/dist/ui/styles/typography.css CHANGED
@@ -1,4 +1,4 @@
1
- :where(:root) {
1
+ :where(:root), [data-scaling] {
2
2
  --font-size-1: calc(12px * var(--scaling));
3
3
  --font-size-2: calc(14px * var(--scaling));
4
4
  --font-size-3: calc(16px * var(--scaling));
@@ -8,10 +8,6 @@
8
8
  --font-size-7: calc(28px * var(--scaling));
9
9
  --font-size-8: calc(35px * var(--scaling));
10
10
  --font-size-9: calc(60px * var(--scaling));
11
- --font-weight-light: 300;
12
- --font-weight-regular: 400;
13
- --font-weight-medium: 500;
14
- --font-weight-bold: 700;
15
11
  --line-height-1: calc(16px * var(--scaling));
16
12
  --line-height-2: calc(20px * var(--scaling));
17
13
  --line-height-3: calc(24px * var(--scaling));
@@ -21,6 +17,22 @@
21
17
  --line-height-7: calc(36px * var(--scaling));
22
18
  --line-height-8: calc(40px * var(--scaling));
23
19
  --line-height-9: calc(60px * var(--scaling));
20
+ --heading-line-height-1: calc(16px * var(--scaling));
21
+ --heading-line-height-2: calc(18px * var(--scaling));
22
+ --heading-line-height-3: calc(22px * var(--scaling));
23
+ --heading-line-height-4: calc(24px * var(--scaling));
24
+ --heading-line-height-5: calc(26px * var(--scaling));
25
+ --heading-line-height-6: calc(30px * var(--scaling));
26
+ --heading-line-height-7: calc(36px * var(--scaling));
27
+ --heading-line-height-8: calc(40px * var(--scaling));
28
+ --heading-line-height-9: calc(60px * var(--scaling));
29
+ }
30
+
31
+ :where(:root) {
32
+ --font-weight-light: 300;
33
+ --font-weight-regular: 400;
34
+ --font-weight-medium: 500;
35
+ --font-weight-bold: 700;
24
36
  --letter-spacing-1: .0025em;
25
37
  --letter-spacing-2: 0em;
26
38
  --letter-spacing-3: 0em;
@@ -45,15 +57,6 @@
45
57
  --heading-leading-trim-start: var(--default-leading-trim-start);
46
58
  --heading-leading-trim-end: var(--default-leading-trim-end);
47
59
  --heading-letter-spacing: 0em;
48
- --heading-line-height-1: calc(16px * var(--scaling));
49
- --heading-line-height-2: calc(18px * var(--scaling));
50
- --heading-line-height-3: calc(22px * var(--scaling));
51
- --heading-line-height-4: calc(24px * var(--scaling));
52
- --heading-line-height-5: calc(26px * var(--scaling));
53
- --heading-line-height-6: calc(30px * var(--scaling));
54
- --heading-line-height-7: calc(36px * var(--scaling));
55
- --heading-line-height-8: calc(40px * var(--scaling));
56
- --heading-line-height-9: calc(60px * var(--scaling));
57
60
  --code-font-family: "Menlo", "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
58
61
  "Segoe UI Emoji";
59
62
  --code-font-size-adjust: .95;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "elements-kit",
3
3
  "type": "module",
4
- "version": "0.26.3",
4
+ "version": "0.26.5",
5
5
  "description": "A lightweight reactive UI library that transforms native HTMLElements into reactive components with signals. Ideal for framework-agnostic applications and web components.",
6
6
  "keywords": [
7
7
  "webcomponents",
@@ -31,7 +31,8 @@
31
31
  "main": "./dist/index.mjs",
32
32
  "types": "./dist/index.d.mts",
33
33
  "files": [
34
- "dist"
34
+ "dist",
35
+ "client.d.ts"
35
36
  ],
36
37
  "exports": {
37
38
  ".": {
@@ -39,6 +40,9 @@
39
40
  "import": "./dist/index.mjs",
40
41
  "types": "./dist/index.d.mts"
41
42
  },
43
+ "./client": {
44
+ "types": "./client.d.ts"
45
+ },
42
46
  "./signals": {
43
47
  "source": "./src/signals/index.ts",
44
48
  "import": "./dist/signals/index.mjs",