aeico-components 0.1.2 → 0.1.3

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 (33) hide show
  1. package/dist/index.cjs +1182 -1182
  2. package/dist/index.js +1182 -1182
  3. package/package.json +63 -63
  4. package/src/styles/color.css +117 -117
  5. package/src/styles/components/alert.css +104 -104
  6. package/src/styles/components/badge.css +67 -67
  7. package/src/styles/components/breadcrumb-item.css +59 -59
  8. package/src/styles/components/breadcrumb.css +19 -19
  9. package/src/styles/components/button-group.css +25 -25
  10. package/src/styles/components/button.css +213 -213
  11. package/src/styles/components/card.css +64 -64
  12. package/src/styles/components/checkbox.css +78 -78
  13. package/src/styles/components/detail.css +127 -127
  14. package/src/styles/components/dialog.css +103 -103
  15. package/src/styles/components/divider.css +18 -18
  16. package/src/styles/components/dropdown-item.css +91 -91
  17. package/src/styles/components/dropdown.css +179 -179
  18. package/src/styles/components/icon-button.css +116 -116
  19. package/src/styles/components/icon.css +29 -29
  20. package/src/styles/components/navbar.css +250 -250
  21. package/src/styles/components/radio-group.css +360 -360
  22. package/src/styles/components/select-option.css +43 -43
  23. package/src/styles/components/select.css +222 -222
  24. package/src/styles/components/slider.css +326 -326
  25. package/src/styles/components/switch.css +117 -117
  26. package/src/styles/components/tab-panel.css +8 -8
  27. package/src/styles/components/tab.css +44 -44
  28. package/src/styles/components/tabs.css +16 -16
  29. package/src/styles/components/tag.css +107 -107
  30. package/src/styles/components/text-input.css +110 -110
  31. package/src/styles/layout.css +43 -43
  32. package/src/styles/size.css +7 -7
  33. package/src/styles/variables.css +368 -368
package/src/styles/components/icon-button.css CHANGED
@@ -1,116 +1,116 @@
1
- /* @deprecated – Use <ae-button> with <ae-icon> slot instead. */
2
-
3
- :host {
4
- display: inline-flex;
5
- font-size: var(--size-m);
6
- --btn-solid-bg: var(--color-solid);
7
- --btn-solid-bg-hover: var(--color-solid-hover);
8
- --btn-solid-bg-active: var(--color-solid-active);
9
- --btn-solid-color: var(--color-on-solid);
10
- --btn-solid-color-hover: var(--color-on-solid-hover);
11
- --btn-border: var(--color-border);
12
- --btn-border-hover: var(--color-border-hover);
13
- --btn-accent: var(--color-accent);
14
- --btn-accent-hover: var(--color-accent-hover);
15
- --btn-subtle-bg: var(--color-subtle);
16
- --btn-subtle-bg-hover: var(--color-subtle-hover);
17
- }
18
-
19
- button {
20
- display: inline-flex;
21
- align-items: center;
22
- justify-content: center;
23
- padding: 0;
24
- font-size: 1em;
25
- cursor: pointer;
26
- border-radius: 4px;
27
- transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
28
- outline: none;
29
- user-select: none;
30
- flex-shrink: 0;
31
- width: 2.286em;
32
- height: 2.286em;
33
- --ib-icon-size: 1.286em;
34
- background: var(--btn-solid-bg);
35
- border: 1px solid var(--btn-border);
36
- color: var(--btn-solid-color);
37
- }
38
-
39
- button:focus { outline: none; }
40
- button:active { transform: translateY(1px); }
41
-
42
- button:hover:not(:disabled) {
43
- background: var(--btn-solid-bg-hover);
44
- border-color: var(--btn-border-hover);
45
- color: var(--btn-solid-color-hover, var(--btn-solid-color));
46
- }
47
-
48
- button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
49
-
50
- button:disabled {
51
- opacity: 0.5;
52
- cursor: not-allowed;
53
- }
54
-
55
- :host([size="xs"]) button,
56
- :host([size="sm"]) button { border-radius: 3px; }
57
-
58
- :host([variant="outlined"]) button {
59
- background: transparent;
60
- border-color: var(--btn-border);
61
- color: var(--btn-accent);
62
- }
63
-
64
- :host([variant="outlined"]) button:hover:not(:disabled) {
65
- background: var(--btn-subtle-bg);
66
- border-color: var(--btn-border-hover);
67
- color: var(--btn-accent-hover);
68
- }
69
-
70
- :host([variant="outlined"]) button:active:not(:disabled) {
71
- background: var(--btn-subtle-bg-hover);
72
- }
73
-
74
- :host([variant="subtle"]) button {
75
- background: var(--btn-subtle-bg);
76
- border-color: transparent;
77
- color: var(--btn-accent);
78
- }
79
-
80
- :host([variant="subtle"]) button:hover:not(:disabled) {
81
- background: var(--btn-subtle-bg-hover);
82
- color: var(--btn-accent-hover);
83
- }
84
-
85
- :host([variant="subtle"]) button:active:not(:disabled) {
86
- background: var(--btn-subtle-bg-hover);
87
- }
88
-
89
- :host([variant="text"]) button {
90
- background: transparent;
91
- border-color: transparent;
92
- color: var(--btn-accent);
93
- }
94
-
95
- :host([variant="text"]) button:hover:not(:disabled) {
96
- background: var(--btn-subtle-bg);
97
- color: var(--btn-accent-hover);
98
- }
99
-
100
- :host([variant="text"]) button:active:not(:disabled) {
101
- background: var(--btn-subtle-bg-hover);
102
- }
103
-
104
- .icon-svg {
105
- display: block;
106
- width: var(--ib-icon-size);
107
- height: var(--ib-icon-size);
108
- fill: var(--icon-fill, currentColor);
109
- stroke: var(--icon-stroke, none);
110
- stroke-width: var(--icon-stroke-width, 2);
111
- stroke-linecap: var(--icon-stroke-linecap, round);
112
- stroke-linejoin: var(--icon-stroke-linejoin, round);
113
- pointer-events: none;
114
- overflow: visible;
115
- flex-shrink: 0;
116
- }
1
+ /* @deprecated – Use <ae-button> with <ae-icon> slot instead. */
2
+
3
+ :host {
4
+ display: inline-flex;
5
+ font-size: var(--size-m);
6
+ --btn-solid-bg: var(--color-solid);
7
+ --btn-solid-bg-hover: var(--color-solid-hover);
8
+ --btn-solid-bg-active: var(--color-solid-active);
9
+ --btn-solid-color: var(--color-on-solid);
10
+ --btn-solid-color-hover: var(--color-on-solid-hover);
11
+ --btn-border: var(--color-border);
12
+ --btn-border-hover: var(--color-border-hover);
13
+ --btn-accent: var(--color-accent);
14
+ --btn-accent-hover: var(--color-accent-hover);
15
+ --btn-subtle-bg: var(--color-subtle);
16
+ --btn-subtle-bg-hover: var(--color-subtle-hover);
17
+ }
18
+
19
+ button {
20
+ display: inline-flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ padding: 0;
24
+ font-size: 1em;
25
+ cursor: pointer;
26
+ border-radius: 4px;
27
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
28
+ outline: none;
29
+ user-select: none;
30
+ flex-shrink: 0;
31
+ width: 2.286em;
32
+ height: 2.286em;
33
+ --ib-icon-size: 1.286em;
34
+ background: var(--btn-solid-bg);
35
+ border: 1px solid var(--btn-border);
36
+ color: var(--btn-solid-color);
37
+ }
38
+
39
+ button:focus { outline: none; }
40
+ button:active { transform: translateY(1px); }
41
+
42
+ button:hover:not(:disabled) {
43
+ background: var(--btn-solid-bg-hover);
44
+ border-color: var(--btn-border-hover);
45
+ color: var(--btn-solid-color-hover, var(--btn-solid-color));
46
+ }
47
+
48
+ button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
49
+
50
+ button:disabled {
51
+ opacity: 0.5;
52
+ cursor: not-allowed;
53
+ }
54
+
55
+ :host([size="xs"]) button,
56
+ :host([size="sm"]) button { border-radius: 3px; }
57
+
58
+ :host([variant="outlined"]) button {
59
+ background: transparent;
60
+ border-color: var(--btn-border);
61
+ color: var(--btn-accent);
62
+ }
63
+
64
+ :host([variant="outlined"]) button:hover:not(:disabled) {
65
+ background: var(--btn-subtle-bg);
66
+ border-color: var(--btn-border-hover);
67
+ color: var(--btn-accent-hover);
68
+ }
69
+
70
+ :host([variant="outlined"]) button:active:not(:disabled) {
71
+ background: var(--btn-subtle-bg-hover);
72
+ }
73
+
74
+ :host([variant="subtle"]) button {
75
+ background: var(--btn-subtle-bg);
76
+ border-color: transparent;
77
+ color: var(--btn-accent);
78
+ }
79
+
80
+ :host([variant="subtle"]) button:hover:not(:disabled) {
81
+ background: var(--btn-subtle-bg-hover);
82
+ color: var(--btn-accent-hover);
83
+ }
84
+
85
+ :host([variant="subtle"]) button:active:not(:disabled) {
86
+ background: var(--btn-subtle-bg-hover);
87
+ }
88
+
89
+ :host([variant="text"]) button {
90
+ background: transparent;
91
+ border-color: transparent;
92
+ color: var(--btn-accent);
93
+ }
94
+
95
+ :host([variant="text"]) button:hover:not(:disabled) {
96
+ background: var(--btn-subtle-bg);
97
+ color: var(--btn-accent-hover);
98
+ }
99
+
100
+ :host([variant="text"]) button:active:not(:disabled) {
101
+ background: var(--btn-subtle-bg-hover);
102
+ }
103
+
104
+ .icon-svg {
105
+ display: block;
106
+ width: var(--ib-icon-size);
107
+ height: var(--ib-icon-size);
108
+ fill: var(--icon-fill, currentColor);
109
+ stroke: var(--icon-stroke, none);
110
+ stroke-width: var(--icon-stroke-width, 2);
111
+ stroke-linecap: var(--icon-stroke-linecap, round);
112
+ stroke-linejoin: var(--icon-stroke-linejoin, round);
113
+ pointer-events: none;
114
+ overflow: visible;
115
+ flex-shrink: 0;
116
+ }
package/src/styles/components/icon.css CHANGED
@@ -1,29 +1,29 @@
1
- :host {
2
- display: inline-flex;
3
- align-items: center;
4
- justify-content: center;
5
- font-size: 20px;
6
- width: 1em;
7
- height: 1em;
8
- color: inherit;
9
- flex-shrink: 0;
10
- line-height: 0;
11
- vertical-align: middle;
12
- }
13
-
14
- :host([color]) {
15
- color: var(--color-solid);
16
- }
17
-
18
- .icon-svg {
19
- display: block;
20
- width: 100%;
21
- height: 100%;
22
- fill: var(--icon-fill, currentColor);
23
- stroke: var(--icon-stroke, none);
24
- stroke-width: var(--icon-stroke-width, 2);
25
- stroke-linecap: var(--icon-stroke-linecap, round);
26
- stroke-linejoin: var(--icon-stroke-linejoin, round);
27
- pointer-events: none;
28
- overflow: visible;
29
- }
1
+ :host {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ font-size: 20px;
6
+ width: 1em;
7
+ height: 1em;
8
+ color: inherit;
9
+ flex-shrink: 0;
10
+ line-height: 0;
11
+ vertical-align: middle;
12
+ }
13
+
14
+ :host([color]) {
15
+ color: var(--color-solid);
16
+ }
17
+
18
+ .icon-svg {
19
+ display: block;
20
+ width: 100%;
21
+ height: 100%;
22
+ fill: var(--icon-fill, currentColor);
23
+ stroke: var(--icon-stroke, none);
24
+ stroke-width: var(--icon-stroke-width, 2);
25
+ stroke-linecap: var(--icon-stroke-linecap, round);
26
+ stroke-linejoin: var(--icon-stroke-linejoin, round);
27
+ pointer-events: none;
28
+ overflow: visible;
29
+ }