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/switch.css CHANGED
@@ -1,117 +1,117 @@
1
- :host {
2
- display: block;
3
- font-size: var(--size-base);
4
-
5
- --switch-field-gap: 4px;
6
-
7
- --toggle-width: 2.667em;
8
- --toggle-height: 1.333em;
9
- --toggle-slider-size: 1em;
10
- --toggle-gap: calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);
11
- --toggle-border-radius: calc(var(--toggle-height) / 2);
12
- --toggle-bg: var(--color-gray);
13
- --toggle-bg-checked: var(--color-solid);
14
- --toggle-slider-bg: white;
15
- --toggle-transition: 0.2s;
16
-
17
- /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
18
- --color-solid: var(--color-primary);
19
- }
20
-
21
- .switch-container {
22
- display: flex;
23
- align-items: center;
24
- gap: var(--switch-field-gap);
25
- }
26
-
27
- .switch-wrapper {
28
- position: relative;
29
- display: inline-flex;
30
- align-items: center;
31
- width: var(--toggle-width);
32
- height: var(--toggle-height);
33
- flex-shrink: 0;
34
- }
35
-
36
- .field-input {
37
- position: absolute;
38
- opacity: 0;
39
- width: 100%;
40
- height: 100%;
41
- cursor: pointer;
42
- margin: 0;
43
- z-index: 1;
44
- border: none;
45
- border-radius: 0;
46
- background: none;
47
- accent-color: unset;
48
- }
49
-
50
- .field-input:disabled {
51
- cursor: not-allowed;
52
- }
53
-
54
- .toggle-slider {
55
- position: absolute;
56
- top: 0;
57
- left: 0;
58
- right: 0;
59
- bottom: 0;
60
- background: var(--toggle-bg);
61
- border-radius: var(--toggle-border-radius);
62
- transition: var(--toggle-transition);
63
- pointer-events: none;
64
- }
65
-
66
- .toggle-slider::before {
67
- content: '';
68
- position: absolute;
69
- height: var(--toggle-slider-size);
70
- width: var(--toggle-slider-size);
71
- left: var(--toggle-gap);
72
- top: var(--toggle-gap);
73
- background: var(--toggle-slider-bg);
74
- border-radius: 50%;
75
- transition: var(--toggle-transition);
76
- }
77
-
78
- .field-input:checked + .toggle-slider {
79
- background: var(--toggle-bg-checked);
80
- }
81
-
82
- .field-input:checked + .toggle-slider::before {
83
- transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
84
- }
85
-
86
- .field-input:disabled + .toggle-slider {
87
- opacity: 0.5;
88
- pointer-events: auto;
89
- }
90
-
91
- /* action buttons */
92
- .reset-btn,
93
- .clear-btn {
94
- width: 1.333em;
95
- height: 1.333em;
96
- border: none;
97
- border-radius: var(--reset-btn-border-radius);
98
- cursor: pointer;
99
- display: flex;
100
- align-items: center;
101
- justify-content: center;
102
- background: var(--reset-btn-bg);
103
- color: var(--reset-btn-color);
104
- transition: var(--reset-btn-transition);
105
- flex-shrink: 0;
106
- line-height: 1;
107
- }
108
-
109
- .reset-btn:hover {
110
- background: var(--reset-btn-bg-hover);
111
- color: var(--reset-btn-color-hover);
112
- }
113
-
114
- .clear-btn:hover {
115
- background: var(--clear-btn-bg-hover);
116
- color: var(--clear-btn-color-hover);
117
- }
1
+ :host {
2
+ display: block;
3
+ font-size: var(--size-base);
4
+
5
+ --switch-field-gap: 4px;
6
+
7
+ --toggle-width: 2.667em;
8
+ --toggle-height: 1.333em;
9
+ --toggle-slider-size: 1em;
10
+ --toggle-gap: calc((var(--toggle-height) - var(--toggle-slider-size)) / 2);
11
+ --toggle-border-radius: calc(var(--toggle-height) / 2);
12
+ --toggle-bg: var(--color-gray);
13
+ --toggle-bg-checked: var(--color-solid);
14
+ --toggle-slider-bg: white;
15
+ --toggle-transition: 0.2s;
16
+
17
+ /* Default color when no [color] attribute — overridden by color.css :host([color=...]) */
18
+ --color-solid: var(--color-primary);
19
+ }
20
+
21
+ .switch-container {
22
+ display: flex;
23
+ align-items: center;
24
+ gap: var(--switch-field-gap);
25
+ }
26
+
27
+ .switch-wrapper {
28
+ position: relative;
29
+ display: inline-flex;
30
+ align-items: center;
31
+ width: var(--toggle-width);
32
+ height: var(--toggle-height);
33
+ flex-shrink: 0;
34
+ }
35
+
36
+ .field-input {
37
+ position: absolute;
38
+ opacity: 0;
39
+ width: 100%;
40
+ height: 100%;
41
+ cursor: pointer;
42
+ margin: 0;
43
+ z-index: 1;
44
+ border: none;
45
+ border-radius: 0;
46
+ background: none;
47
+ accent-color: unset;
48
+ }
49
+
50
+ .field-input:disabled {
51
+ cursor: not-allowed;
52
+ }
53
+
54
+ .toggle-slider {
55
+ position: absolute;
56
+ top: 0;
57
+ left: 0;
58
+ right: 0;
59
+ bottom: 0;
60
+ background: var(--toggle-bg);
61
+ border-radius: var(--toggle-border-radius);
62
+ transition: var(--toggle-transition);
63
+ pointer-events: none;
64
+ }
65
+
66
+ .toggle-slider::before {
67
+ content: '';
68
+ position: absolute;
69
+ height: var(--toggle-slider-size);
70
+ width: var(--toggle-slider-size);
71
+ left: var(--toggle-gap);
72
+ top: var(--toggle-gap);
73
+ background: var(--toggle-slider-bg);
74
+ border-radius: 50%;
75
+ transition: var(--toggle-transition);
76
+ }
77
+
78
+ .field-input:checked + .toggle-slider {
79
+ background: var(--toggle-bg-checked);
80
+ }
81
+
82
+ .field-input:checked + .toggle-slider::before {
83
+ transform: translateX(calc(var(--toggle-width) - var(--toggle-height)));
84
+ }
85
+
86
+ .field-input:disabled + .toggle-slider {
87
+ opacity: 0.5;
88
+ pointer-events: auto;
89
+ }
90
+
91
+ /* action buttons */
92
+ .reset-btn,
93
+ .clear-btn {
94
+ width: 1.333em;
95
+ height: 1.333em;
96
+ border: none;
97
+ border-radius: var(--reset-btn-border-radius);
98
+ cursor: pointer;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ background: var(--reset-btn-bg);
103
+ color: var(--reset-btn-color);
104
+ transition: var(--reset-btn-transition);
105
+ flex-shrink: 0;
106
+ line-height: 1;
107
+ }
108
+
109
+ .reset-btn:hover {
110
+ background: var(--reset-btn-bg-hover);
111
+ color: var(--reset-btn-color-hover);
112
+ }
113
+
114
+ .clear-btn:hover {
115
+ background: var(--clear-btn-bg-hover);
116
+ color: var(--clear-btn-color-hover);
117
+ }
package/src/styles/components/tab-panel.css CHANGED
@@ -1,8 +1,8 @@
1
- :host {
2
- display: none;
3
- padding: 16px 0;
4
- }
5
-
6
- :host([active]) {
7
- display: block;
8
- }
1
+ :host {
2
+ display: none;
3
+ padding: 16px 0;
4
+ }
5
+
6
+ :host([active]) {
7
+ display: block;
8
+ }
package/src/styles/components/tab.css CHANGED
@@ -1,44 +1,44 @@
1
- :host {
2
- display: inline-flex;
3
- cursor: pointer;
4
- margin-bottom: -1px;
5
- }
6
-
7
- button {
8
- display: inline-flex;
9
- align-items: center;
10
- gap: 6px;
11
- padding: 8px 16px;
12
- background: none;
13
- border: none;
14
- border-bottom: 2px solid transparent;
15
- cursor: pointer;
16
- font-size: inherit;
17
- font-family: inherit;
18
- color: var(--ae-tab-color, #909090);
19
- font-size: var(--ae-tab-font-size, inherit);
20
- transition: color 0.15s, border-color 0.15s;
21
- outline: none;
22
- white-space: nowrap;
23
- user-select: none;
24
- }
25
-
26
- button:hover {
27
- color: var(--ae-tab-hover-color, var(--color-primary));
28
- }
29
-
30
- button:focus-visible {
31
- outline: 2px solid var(--color-primary);
32
- outline-offset: -2px;
33
- }
34
-
35
- :host([active]) button {
36
- color: var(--ae-tab-active-color, var(--color-primary));
37
- border-bottom-color: var(--ae-tab-active-color, var(--color-primary));
38
- }
39
-
40
- :host([disabled]) button {
41
- opacity: 0.4;
42
- cursor: not-allowed;
43
- pointer-events: none;
44
- }
1
+ :host {
2
+ display: inline-flex;
3
+ cursor: pointer;
4
+ margin-bottom: -1px;
5
+ }
6
+
7
+ button {
8
+ display: inline-flex;
9
+ align-items: center;
10
+ gap: 6px;
11
+ padding: 8px 16px;
12
+ background: none;
13
+ border: none;
14
+ border-bottom: 2px solid transparent;
15
+ cursor: pointer;
16
+ font-size: inherit;
17
+ font-family: inherit;
18
+ color: var(--ae-tab-color, #909090);
19
+ font-size: var(--ae-tab-font-size, inherit);
20
+ transition: color 0.15s, border-color 0.15s;
21
+ outline: none;
22
+ white-space: nowrap;
23
+ user-select: none;
24
+ }
25
+
26
+ button:hover {
27
+ color: var(--ae-tab-hover-color, var(--color-primary));
28
+ }
29
+
30
+ button:focus-visible {
31
+ outline: 2px solid var(--color-primary);
32
+ outline-offset: -2px;
33
+ }
34
+
35
+ :host([active]) button {
36
+ color: var(--ae-tab-active-color, var(--color-primary));
37
+ border-bottom-color: var(--ae-tab-active-color, var(--color-primary));
38
+ }
39
+
40
+ :host([disabled]) button {
41
+ opacity: 0.4;
42
+ cursor: not-allowed;
43
+ pointer-events: none;
44
+ }
package/src/styles/components/tabs.css CHANGED
@@ -1,16 +1,16 @@
1
- :host {
2
- display: flex;
3
- flex-direction: column;
4
- overflow: hidden;
5
- }
6
-
7
- [part="tab-nav"] {
8
- display: flex;
9
- flex-shrink: 0;
10
- border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));
11
- }
12
-
13
- [part="panels"] {
14
- flex: 1;
15
- overflow: auto;
16
- }
1
+ :host {
2
+ display: flex;
3
+ flex-direction: column;
4
+ overflow: hidden;
5
+ }
6
+
7
+ [part="tab-nav"] {
8
+ display: flex;
9
+ flex-shrink: 0;
10
+ border-bottom: 1px solid var(--ae-tabs-border-color, var(--border-default));
11
+ }
12
+
13
+ [part="panels"] {
14
+ flex: 1;
15
+ overflow: auto;
16
+ }
package/src/styles/components/tag.css CHANGED
@@ -1,107 +1,107 @@
1
- :host {
2
- display: inline-flex;
3
- align-items: center;
4
- --tag-solid-bg: var(--color-solid);
5
- --tag-solid-color: var(--color-on-solid);
6
- --tag-border: var(--color-border);
7
- --tag-accent: var(--color-accent);
8
- --tag-subtle-bg: var(--color-bg-subtle);
9
- --tag-subtle-color: var(--color-text-subtle);
10
- --tag-subtle-border: var(--color-border-subtle);
11
- }
12
-
13
- .tag {
14
- display: inline-flex;
15
- align-items: center;
16
- gap: 4px;
17
- font-family: inherit;
18
- font-weight: 500;
19
- white-space: nowrap;
20
- vertical-align: middle;
21
- line-height: 1.2;
22
- font-size: 1em;
23
- padding: 0.15em 0.5em 0.15em 0.6em;
24
- border-radius: 4px;
25
- border: 1px solid var(--tag-solid-bg);
26
- background: var(--tag-solid-bg);
27
- color: var(--tag-solid-color);
28
- max-width: 160px;
29
- min-width: 0;
30
- }
31
-
32
- :host([variant="outlined"]) .tag {
33
- background: transparent;
34
- border-color: var(--tag-border);
35
- color: var(--tag-accent);
36
- }
37
-
38
- :host([variant="faint"]) .tag {
39
- background: var(--tag-subtle-bg);
40
- border-color: var(--tag-subtle-border);
41
- color: var(--tag-subtle-color);
42
- }
43
-
44
- :host([variant="subtle"]) .tag {
45
- background: var(--tag-subtle-bg);
46
- border-color: transparent;
47
- color: var(--tag-subtle-color);
48
- }
49
-
50
- :host([variant="text"]) .tag {
51
- background: transparent;
52
- border-color: transparent;
53
- color: var(--tag-accent);
54
- padding-left: 0;
55
- padding-right: 0;
56
- }
57
-
58
-
59
- :host([pill]) .tag { border-radius: 999px; }
60
-
61
- .tag-content {
62
- flex: 1;
63
- min-width: 0;
64
- overflow: hidden;
65
- text-overflow: ellipsis;
66
- white-space: nowrap;
67
- }
68
-
69
- ::slotted(ae-icon) { font-size: 1.1em; }
70
-
71
- .tag-dismiss {
72
- display: none;
73
- flex-shrink: 0;
74
- align-items: center;
75
- justify-content: center;
76
- cursor: pointer;
77
- opacity: 0.55;
78
- line-height: 1;
79
- font-size: 1em;
80
- padding: 0 1px;
81
- border-radius: 2px;
82
- background: transparent;
83
- border: none;
84
- color: inherit;
85
- font-family: inherit;
86
- transition: opacity 0.1s, background 0.1s;
87
- }
88
-
89
- :host([dismissible]) .tag-dismiss {
90
- display: inline-flex;
91
- }
92
-
93
- .tag-dismiss:hover {
94
- opacity: 1;
95
- background: color-mix(in srgb, currentColor 15%, transparent);
96
- }
97
-
98
- /* disabled: button remains visible but is inert */
99
- :host([disabled]) .tag-dismiss {
100
- opacity: 0.4;
101
- pointer-events: none;
102
- cursor: default;
103
- }
104
-
105
- :host([disabled]) .tag {
106
- opacity: 0.6;
107
- }
1
+ :host {
2
+ display: inline-flex;
3
+ align-items: center;
4
+ --tag-solid-bg: var(--color-solid);
5
+ --tag-solid-color: var(--color-on-solid);
6
+ --tag-border: var(--color-border);
7
+ --tag-accent: var(--color-accent);
8
+ --tag-subtle-bg: var(--color-bg-subtle);
9
+ --tag-subtle-color: var(--color-text-subtle);
10
+ --tag-subtle-border: var(--color-border-subtle);
11
+ }
12
+
13
+ .tag {
14
+ display: inline-flex;
15
+ align-items: center;
16
+ gap: 4px;
17
+ font-family: inherit;
18
+ font-weight: 500;
19
+ white-space: nowrap;
20
+ vertical-align: middle;
21
+ line-height: 1.2;
22
+ font-size: 1em;
23
+ padding: 0.15em 0.5em 0.15em 0.6em;
24
+ border-radius: 4px;
25
+ border: 1px solid var(--tag-solid-bg);
26
+ background: var(--tag-solid-bg);
27
+ color: var(--tag-solid-color);
28
+ max-width: 160px;
29
+ min-width: 0;
30
+ }
31
+
32
+ :host([variant="outlined"]) .tag {
33
+ background: transparent;
34
+ border-color: var(--tag-border);
35
+ color: var(--tag-accent);
36
+ }
37
+
38
+ :host([variant="faint"]) .tag {
39
+ background: var(--tag-subtle-bg);
40
+ border-color: var(--tag-subtle-border);
41
+ color: var(--tag-subtle-color);
42
+ }
43
+
44
+ :host([variant="subtle"]) .tag {
45
+ background: var(--tag-subtle-bg);
46
+ border-color: transparent;
47
+ color: var(--tag-subtle-color);
48
+ }
49
+
50
+ :host([variant="text"]) .tag {
51
+ background: transparent;
52
+ border-color: transparent;
53
+ color: var(--tag-accent);
54
+ padding-left: 0;
55
+ padding-right: 0;
56
+ }
57
+
58
+
59
+ :host([pill]) .tag { border-radius: 999px; }
60
+
61
+ .tag-content {
62
+ flex: 1;
63
+ min-width: 0;
64
+ overflow: hidden;
65
+ text-overflow: ellipsis;
66
+ white-space: nowrap;
67
+ }
68
+
69
+ ::slotted(ae-icon) { font-size: 1.1em; }
70
+
71
+ .tag-dismiss {
72
+ display: none;
73
+ flex-shrink: 0;
74
+ align-items: center;
75
+ justify-content: center;
76
+ cursor: pointer;
77
+ opacity: 0.55;
78
+ line-height: 1;
79
+ font-size: 1em;
80
+ padding: 0 1px;
81
+ border-radius: 2px;
82
+ background: transparent;
83
+ border: none;
84
+ color: inherit;
85
+ font-family: inherit;
86
+ transition: opacity 0.1s, background 0.1s;
87
+ }
88
+
89
+ :host([dismissible]) .tag-dismiss {
90
+ display: inline-flex;
91
+ }
92
+
93
+ .tag-dismiss:hover {
94
+ opacity: 1;
95
+ background: color-mix(in srgb, currentColor 15%, transparent);
96
+ }
97
+
98
+ /* disabled: button remains visible but is inert */
99
+ :host([disabled]) .tag-dismiss {
100
+ opacity: 0.4;
101
+ pointer-events: none;
102
+ cursor: default;
103
+ }
104
+
105
+ :host([disabled]) .tag {
106
+ opacity: 0.6;
107
+ }