aeico-components 0.1.6 → 0.1.7

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 (161) hide show
  1. package/README.md +0 -0
  2. package/dist/chunks/action-button.cjs +2 -2
  3. package/dist/chunks/action-button.js +2 -2
  4. package/dist/chunks/alert.cjs +22 -28
  5. package/dist/chunks/alert.cjs.map +1 -1
  6. package/dist/chunks/alert.js +22 -28
  7. package/dist/chunks/alert.js.map +1 -1
  8. package/dist/chunks/badge.cjs +1 -1
  9. package/dist/chunks/badge.js +1 -1
  10. package/dist/chunks/breadcrumb-item.cjs +7 -7
  11. package/dist/chunks/breadcrumb-item.js +7 -7
  12. package/dist/chunks/button.cjs +39 -50
  13. package/dist/chunks/button.cjs.map +1 -1
  14. package/dist/chunks/button.js +39 -50
  15. package/dist/chunks/button.js.map +1 -1
  16. package/dist/chunks/card.cjs +1 -1
  17. package/dist/chunks/card.js +1 -1
  18. package/dist/chunks/checkbox.cjs +1 -1
  19. package/dist/chunks/checkbox.js +1 -1
  20. package/dist/chunks/color.cjs +1 -1
  21. package/dist/chunks/color.js +1 -1
  22. package/dist/chunks/copy-button.cjs +7 -4
  23. package/dist/chunks/copy-button.cjs.map +1 -1
  24. package/dist/chunks/copy-button.js +7 -4
  25. package/dist/chunks/copy-button.js.map +1 -1
  26. package/dist/chunks/detail-group.cjs +65 -0
  27. package/dist/chunks/detail-group.cjs.map +1 -0
  28. package/dist/chunks/detail-group.js +66 -0
  29. package/dist/chunks/detail-group.js.map +1 -0
  30. package/dist/chunks/detail.cjs +1 -1
  31. package/dist/chunks/detail.js +1 -1
  32. package/dist/chunks/dialog.cjs +1 -1
  33. package/dist/chunks/dialog.js +1 -1
  34. package/dist/chunks/divider.cjs +1 -1
  35. package/dist/chunks/divider.js +1 -1
  36. package/dist/chunks/drawer.cjs +1 -1
  37. package/dist/chunks/drawer.js +1 -1
  38. package/dist/chunks/dropdown-button.cjs +8 -9
  39. package/dist/chunks/dropdown-button.cjs.map +1 -1
  40. package/dist/chunks/dropdown-button.js +11 -12
  41. package/dist/chunks/dropdown-button.js.map +1 -1
  42. package/dist/chunks/icon.cjs +27 -11
  43. package/dist/chunks/icon.cjs.map +1 -1
  44. package/dist/chunks/icon.js +27 -11
  45. package/dist/chunks/icon.js.map +1 -1
  46. package/dist/chunks/menu.cjs +1 -1
  47. package/dist/chunks/menu.js +1 -1
  48. package/dist/chunks/navbar.cjs +1 -1
  49. package/dist/chunks/navbar.js +1 -1
  50. package/dist/chunks/number-input.cjs +110 -0
  51. package/dist/chunks/number-input.cjs.map +1 -0
  52. package/dist/chunks/number-input.js +111 -0
  53. package/dist/chunks/number-input.js.map +1 -0
  54. package/dist/chunks/pagination.cjs +31 -31
  55. package/dist/chunks/pagination.js +31 -31
  56. package/dist/chunks/progress-bar.cjs +1 -1
  57. package/dist/chunks/progress-bar.js +1 -1
  58. package/dist/chunks/radio.cjs +1 -1
  59. package/dist/chunks/radio.js +1 -1
  60. package/dist/chunks/select.cjs +1 -1
  61. package/dist/chunks/select.js +1 -1
  62. package/dist/chunks/size.cjs +1 -1
  63. package/dist/chunks/size.js +1 -1
  64. package/dist/chunks/slider.cjs +26 -29
  65. package/dist/chunks/slider.cjs.map +1 -1
  66. package/dist/chunks/slider.js +26 -29
  67. package/dist/chunks/slider.js.map +1 -1
  68. package/dist/chunks/spinner.cjs +1 -1
  69. package/dist/chunks/spinner.js +1 -1
  70. package/dist/chunks/switch.cjs +1 -1
  71. package/dist/chunks/switch.js +1 -1
  72. package/dist/chunks/tab-panel.cjs +12 -3
  73. package/dist/chunks/tab-panel.cjs.map +1 -1
  74. package/dist/chunks/tab-panel.js +12 -3
  75. package/dist/chunks/tab-panel.js.map +1 -1
  76. package/dist/chunks/tag.cjs +1 -1
  77. package/dist/chunks/tag.js +1 -1
  78. package/dist/chunks/text-input.cjs +1 -1
  79. package/dist/chunks/text-input.js +1 -1
  80. package/dist/chunks/textarea.cjs +1 -1
  81. package/dist/chunks/textarea.js +1 -1
  82. package/dist/chunks/tooltip.cjs +4 -5
  83. package/dist/chunks/tooltip.cjs.map +1 -1
  84. package/dist/chunks/tooltip.js +4 -5
  85. package/dist/chunks/tooltip.js.map +1 -1
  86. package/dist/chunks/tree.cjs +1 -1
  87. package/dist/chunks/tree.js +1 -1
  88. package/dist/chunks/variables.cjs +271 -247
  89. package/dist/chunks/variables.cjs.map +1 -1
  90. package/dist/chunks/variables.js +271 -247
  91. package/dist/chunks/variables.js.map +1 -1
  92. package/dist/detail-group.cjs +6 -0
  93. package/dist/detail-group.cjs.map +1 -0
  94. package/dist/detail-group.js +6 -0
  95. package/dist/detail-group.js.map +1 -0
  96. package/dist/dropdown.js +4 -4
  97. package/dist/index.cjs +4 -166
  98. package/dist/index.cjs.map +1 -1
  99. package/dist/index.js +10 -172
  100. package/dist/index.js.map +1 -1
  101. package/dist/number-input.cjs +6 -0
  102. package/dist/number-input.cjs.map +1 -0
  103. package/dist/number-input.js +6 -0
  104. package/dist/number-input.js.map +1 -0
  105. package/dist/select.cjs +1 -1
  106. package/dist/select.js +1 -1
  107. package/dist/types/card/defines.d.ts +1 -1
  108. package/dist/types/detail/defines.d.ts +1 -1
  109. package/dist/types/icon/defines.d.ts +5 -1
  110. package/dist/types/icon/index.d.ts +1 -1
  111. package/dist/types/tabs/defines.d.ts +1 -0
  112. package/dist/types/tabs/tabs.d.ts +3 -0
  113. package/package.json +1 -1
  114. package/src/card/defines.ts +1 -1
  115. package/src/copy-button/copy-button.ts +9 -5
  116. package/src/detail/defines.ts +1 -1
  117. package/src/icon/defines.ts +6 -1
  118. package/src/icon/icon.ts +28 -10
  119. package/src/icon/index.ts +1 -1
  120. package/src/icon/registry.ts +2 -2
  121. package/src/styles/color.css +91 -91
  122. package/src/styles/components/action-button.css +12 -12
  123. package/src/styles/components/alert.css +22 -28
  124. package/src/styles/components/badge.css +13 -20
  125. package/src/styles/components/breadcrumb-item.css +7 -7
  126. package/src/styles/components/button.css +39 -50
  127. package/src/styles/components/card.css +45 -30
  128. package/src/styles/components/checkbox.css +6 -11
  129. package/src/styles/components/copy-button.css +22 -33
  130. package/src/styles/components/detail.css +51 -39
  131. package/src/styles/components/dialog.css +11 -11
  132. package/src/styles/components/divider.css +3 -3
  133. package/src/styles/components/drawer.css +14 -23
  134. package/src/styles/components/dropdown-item.css +7 -8
  135. package/src/styles/components/dropdown.css +3 -4
  136. package/src/styles/components/field-label.css +12 -12
  137. package/src/styles/components/icon-button.css +25 -36
  138. package/src/styles/components/icon.css +1 -1
  139. package/src/styles/components/menu-item.css +7 -8
  140. package/src/styles/components/navbar.css +16 -16
  141. package/src/styles/components/number-input.css +27 -36
  142. package/src/styles/components/pagination.css +31 -31
  143. package/src/styles/components/progress-bar.css +2 -3
  144. package/src/styles/components/radio-group.css +69 -83
  145. package/src/styles/components/select-option.css +5 -5
  146. package/src/styles/components/select.css +21 -33
  147. package/src/styles/components/slider.css +26 -29
  148. package/src/styles/components/spinner.css +7 -9
  149. package/src/styles/components/switch.css +5 -17
  150. package/src/styles/components/tab.css +4 -5
  151. package/src/styles/components/tabs.css +48 -1
  152. package/src/styles/components/tag.css +14 -21
  153. package/src/styles/components/text-input.css +13 -22
  154. package/src/styles/components/textarea.css +12 -21
  155. package/src/styles/components/tooltip.css +4 -5
  156. package/src/styles/components/tree-item.css +12 -12
  157. package/src/styles/radius.css +10 -0
  158. package/src/styles/size.css +7 -7
  159. package/src/styles/variables.css +271 -247
  160. package/src/tabs/defines.ts +1 -0
  161. package/src/tabs/tabs.ts +12 -0
package/src/styles/components/text-input.css CHANGED
@@ -2,20 +2,11 @@
2
2
  display: block;
3
3
  flex: 1;
4
4
  min-width: 0;
5
- font-size: var(--size-base);
5
+ font-size: var(--ae-size-base);
6
6
  --input-field-gap: 4px;
7
7
  --input-font-size: 1em;
8
8
  --input-padding: 0.333em 0.583em;
9
9
  --input-border-width: 1px;
10
- --input-border-radius: 2px;
11
- --input-border-color: var(--border-subtle);
12
- --input-border-color-hover: var(--border-default);
13
- --input-border-color-focus: var(--border-focus);
14
- --input-bg: var(--surface-base);
15
- --input-bg-hover: var(--surface-raised);
16
- --input-bg-focus: var(--surface-raised);
17
- --input-color: var(--color-text-muted);
18
- --input-placeholder-color: var(--color-text-disabled);
19
10
  --input-transition: border-color 0.12s, background 0.12s;
20
11
  }
21
12
 
@@ -31,26 +22,26 @@ input {
31
22
  min-width: 0;
32
23
  font-size: var(--input-font-size);
33
24
  padding: var(--input-padding);
34
- border: var(--input-border-width) solid var(--input-border-color);
35
- border-radius: var(--input-border-radius);
36
- background: var(--input-bg);
37
- color: var(--input-color);
25
+ border: var(--input-border-width) solid var(--ae-border-subtle);
26
+ border-radius: var(--ae-border-radius, var(--ae-radius-xs));
27
+ background: var(--ae-surface-base);
28
+ color: var(--ae-color-text-muted);
38
29
  transition: var(--input-transition);
39
30
  }
40
31
 
41
32
  input::placeholder {
42
- color: var(--input-placeholder-color);
33
+ color: var(--ae-color-text-disabled);
43
34
  }
44
35
 
45
36
  input:focus {
46
37
  outline: none;
47
- border-color: var(--input-border-color-focus);
48
- background: var(--input-bg-focus);
38
+ border-color: var(--ae-border-focus);
39
+ background: var(--ae-surface-raised);
49
40
  }
50
41
 
51
42
  input:hover:not(:focus) {
52
- border-color: var(--input-border-color-hover);
53
- background: var(--input-bg-hover);
43
+ border-color: var(--ae-border-default);
44
+ background: var(--ae-surface-raised);
54
45
  }
55
46
 
56
47
  input:disabled {
@@ -59,14 +50,14 @@ input:disabled {
59
50
  }
60
51
 
61
52
  :host([error]) input {
62
- border-color: var(--field-error-color, var(--red));
53
+ border-color: var(--field-error-color, var(--ae-red));
63
54
  }
64
55
 
65
56
  :host([error]) input:hover:not(:focus),
66
57
  :host([error]) input:focus {
67
- border-color: var(--field-error-color, var(--red));
58
+ border-color: var(--field-error-color, var(--ae-red));
68
59
  }
69
60
 
70
61
  .input-container:has(.action-controls) input {
71
- border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
62
+ border-radius: var(--ae-border-radius, var(--ae-radius-xs)) 0 0 var(--ae-border-radius, var(--ae-radius-xs));
72
63
  }
package/src/styles/components/textarea.css CHANGED
@@ -2,20 +2,11 @@
2
2
  display: block;
3
3
  flex: 1;
4
4
  min-width: 0;
5
- font-size: var(--size-base);
5
+ font-size: var(--ae-size-base);
6
6
 
7
7
  --textarea-font-size: 1em;
8
8
  --textarea-padding: 0.333em 0.583em;
9
9
  --textarea-border-width: 1px;
10
- --textarea-border-radius: 2px;
11
- --textarea-border-color: var(--border-subtle);
12
- --textarea-border-color-hover: var(--border-default);
13
- --textarea-border-color-focus: var(--border-focus);
14
- --textarea-bg: var(--surface-base);
15
- --textarea-bg-hover: var(--surface-raised);
16
- --textarea-bg-focus: var(--surface-raised);
17
- --textarea-color: var(--color-text-muted);
18
- --textarea-placeholder-color: var(--color-text-disabled);
19
10
  --textarea-transition: border-color 0.12s, background 0.12s;
20
11
  }
21
12
 
@@ -35,27 +26,27 @@ textarea {
35
26
  font-family: inherit;
36
27
  line-height: 1.5;
37
28
  padding: var(--textarea-padding);
38
- border: var(--textarea-border-width) solid var(--textarea-border-color);
39
- border-radius: var(--textarea-border-radius);
40
- background: var(--textarea-bg);
41
- color: var(--textarea-color);
29
+ border: var(--textarea-border-width) solid var(--ae-border-subtle);
30
+ border-radius: var(--ae-border-radius, var(--ae-radius-xs));
31
+ background: var(--ae-surface-base);
32
+ color: var(--ae-color-text-muted);
42
33
  transition: var(--textarea-transition);
43
34
  resize: vertical;
44
35
  }
45
36
 
46
37
  textarea::placeholder {
47
- color: var(--textarea-placeholder-color);
38
+ color: var(--ae-color-text-disabled);
48
39
  }
49
40
 
50
41
  textarea:focus {
51
42
  outline: none;
52
- border-color: var(--textarea-border-color-focus);
53
- background: var(--textarea-bg-focus);
43
+ border-color: var(--ae-border-focus);
44
+ background: var(--ae-surface-raised);
54
45
  }
55
46
 
56
47
  textarea:hover:not(:focus) {
57
- border-color: var(--textarea-border-color-hover);
58
- background: var(--textarea-bg-hover);
48
+ border-color: var(--ae-border-default);
49
+ background: var(--ae-surface-raised);
59
50
  }
60
51
 
61
52
  textarea:disabled {
@@ -66,10 +57,10 @@ textarea:disabled {
66
57
 
67
58
  /* Error state */
68
59
  :host([error]) textarea {
69
- border-color: var(--field-error-color, var(--red));
60
+ border-color: var(--field-error-color, var(--ae-red));
70
61
  }
71
62
 
72
63
  :host([error]) textarea:hover:not(:focus),
73
64
  :host([error]) textarea:focus {
74
- border-color: var(--field-error-color, var(--red));
65
+ border-color: var(--field-error-color, var(--ae-red));
75
66
  }
package/src/styles/components/tooltip.css CHANGED
@@ -4,19 +4,18 @@
4
4
  vertical-align: middle;
5
5
 
6
6
  --ae-tooltip-z-index: 1000;
7
- --ae-tooltip-bg: var(--dark, #343a40);
7
+ --ae-tooltip-bg: var(--ae-dark, #343a40);
8
8
  --ae-tooltip-color: #fff;
9
9
  --ae-tooltip-padding: 0.3125rem 0.625rem;
10
10
  --ae-tooltip-font-size: 0.8125rem;
11
- --ae-tooltip-border-radius: 4px;
12
11
  --ae-tooltip-arrow-size: 5px;
13
12
  --ae-tooltip-gap: 6px;
14
13
  --ae-tooltip-max-width: 20rem;
15
14
  }
16
15
 
17
16
  :host-context([theme="dark"]) {
18
- --ae-tooltip-bg: var(--light, #f8f9fa);
19
- --ae-tooltip-color: var(--dark, #343a40);
17
+ --ae-tooltip-bg: var(--ae-light, #f8f9fa);
18
+ --ae-tooltip-color: var(--ae-dark, #343a40);
20
19
  }
21
20
 
22
21
  .tooltip-panel {
@@ -28,7 +27,7 @@
28
27
  padding: var(--ae-tooltip-padding);
29
28
  font-size: var(--ae-tooltip-font-size);
30
29
  font-family: inherit;
31
- border-radius: var(--ae-tooltip-border-radius);
30
+ border-radius: var(--ae-border-radius, var(--ae-radius-sm));
32
31
  line-height: 1.4;
33
32
  white-space: nowrap;
34
33
  max-width: var(--ae-tooltip-max-width);
package/src/styles/components/tree-item.css CHANGED
@@ -3,12 +3,12 @@
3
3
  --ae-tree-indent: 1.25rem;
4
4
  --tree-item-height: 2rem;
5
5
  --tree-item-font-size: 0.9375rem;
6
- --tree-item-color: var(--color-text-main, #343a40);
7
- --tree-item-color-disabled: var(--color-text-disabled, #bbb);
8
- --tree-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.04));
9
- --tree-item-bg-selected: var(--color-primary-bg-subtle, rgba(14, 99, 156, 0.08));
10
- --tree-item-color-selected: var(--color-primary, #0e639c);
11
- --tree-item-line-color: var(--border-default, rgba(0, 0, 0, 0.15));
6
+ --tree-item-color: var(--ae-color-text-main, #343a40);
7
+ --tree-item-color-disabled: var(--ae-color-text-disabled, #bbb);
8
+ --tree-item-bg-hover: var(--ae-surface-raised, rgba(0, 0, 0, 0.04));
9
+ --tree-item-bg-selected: var(--ae-color-primary-bg-subtle, rgba(14, 99, 156, 0.08));
10
+ --tree-item-color-selected: var(--ae-color-primary, #0e639c);
11
+ --tree-item-line-color: var(--ae-border-default, rgba(0, 0, 0, 0.15));
12
12
  --tree-item-expand-size: 1rem;
13
13
  }
14
14
 
@@ -23,7 +23,7 @@
23
23
  color: var(--tree-item-color);
24
24
  cursor: pointer;
25
25
  user-select: none;
26
- border-radius: var(--ae-radius-sm, 4px);
26
+ border-radius: var(--ae-border-radius, var(--ae-radius-sm));
27
27
  transition: background 0.1s, color 0.1s;
28
28
  box-sizing: border-box;
29
29
  }
@@ -44,7 +44,7 @@
44
44
  background: transparent;
45
45
  color: inherit;
46
46
  cursor: pointer;
47
- border-radius: var(--ae-radius-sm, 4px);
47
+ border-radius: var(--ae-border-radius, var(--ae-radius-sm));
48
48
  transition: transform 0.18s;
49
49
  outline: none;
50
50
  -webkit-appearance: none;
@@ -52,7 +52,7 @@
52
52
  }
53
53
 
54
54
  .expand-btn:focus-visible {
55
- outline: 2px solid var(--color-primary, #0e639c);
55
+ outline: 2px solid var(--ae-color-primary, #0e639c);
56
56
  outline-offset: 1px;
57
57
  }
58
58
 
@@ -92,7 +92,7 @@
92
92
  height: 0.875rem;
93
93
  margin: 0;
94
94
  cursor: pointer;
95
- accent-color: var(--color-primary, #0e639c);
95
+ accent-color: var(--ae-color-primary, #0e639c);
96
96
  }
97
97
 
98
98
  .tree-item-label {
@@ -118,9 +118,9 @@
118
118
  }
119
119
 
120
120
  .tree-item-label:focus-visible {
121
- outline: 2px solid var(--color-primary, #0e639c);
121
+ outline: 2px solid var(--ae-color-primary, #0e639c);
122
122
  outline-offset: -2px;
123
- border-radius: var(--ae-radius-sm, 4px);
123
+ border-radius: var(--ae-border-radius, var(--ae-radius-sm));
124
124
  }
125
125
 
126
126
  :host([selected]) .tree-item-content {
package/src/styles/radius.css ADDED
@@ -0,0 +1,10 @@
1
+ @layer aeico-radius {
2
+ .ae-radius-square { border-radius: var(--ae-radius-square); }
3
+ .ae-radius-xs { border-radius: var(--ae-radius-xs); }
4
+ .ae-radius-sm { border-radius: var(--ae-radius-sm); }
5
+ .ae-radius-md { border-radius: var(--ae-radius-md); }
6
+ .ae-radius-lg { border-radius: var(--ae-radius-lg); }
7
+ .ae-radius-xl { border-radius: var(--ae-radius-xl); }
8
+ .ae-radius-pill { border-radius: var(--ae-radius-pill); }
9
+ .ae-radius-circle { border-radius: var(--ae-radius-circle); }
10
+ }
package/src/styles/size.css CHANGED
@@ -1,7 +1,7 @@
1
- :host([size="xs"]) { font-size: var(--size-xs); }
2
- :host([size="sm"]) { font-size: var(--size-s); }
3
- :host([size="md"]) { font-size: var(--size-m); }
4
- :host([size="lg"]) { font-size: var(--size-l); }
5
- :host([size="xl"]) { font-size: var(--size-xl); }
6
- :host([size="3xs"]) { font-size: var(--size-3xs); }
7
- :host([size="2xs"]) { font-size: var(--size-2xs); }
1
+ :host([size="xs"]) { font-size: var(--ae-size-xs); }
2
+ :host([size="sm"]) { font-size: var(--ae-size-s); }
3
+ :host([size="md"]) { font-size: var(--ae-size-m); }
4
+ :host([size="lg"]) { font-size: var(--ae-size-l); }
5
+ :host([size="xl"]) { font-size: var(--ae-size-xl); }
6
+ :host([size="3xs"]) { font-size: var(--ae-size-3xs); }
7
+ :host([size="2xs"]) { font-size: var(--ae-size-2xs); }