aeico-components 0.1.1 → 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/dropdown-item.css CHANGED
@@ -1,91 +1,91 @@
1
- :host {
2
- display: block;
3
-
4
- --dropdown-item-padding: 0.5rem 0.875rem;
5
- --dropdown-item-bg: transparent;
6
- --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
7
- --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
8
- --dropdown-item-color: var(--color-text-main, inherit);
9
- --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
10
- --dropdown-item-font-size: 0.9375rem;
11
- --dropdown-item-gap: 0.5rem;
12
- --dropdown-item-transition: background 0.1s;
13
- --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
14
- }
15
-
16
- .item {
17
- display: flex;
18
- align-items: center;
19
- gap: var(--dropdown-item-gap);
20
- width: 100%;
21
- padding: var(--dropdown-item-padding);
22
- font-size: var(--dropdown-item-font-size);
23
- font-family: inherit;
24
- color: var(--dropdown-item-color);
25
- background: var(--dropdown-item-bg);
26
- border: none;
27
- border-radius: var(--dropdown-item-border-radius);
28
- text-align: left;
29
- text-decoration: none;
30
- cursor: pointer;
31
- user-select: none;
32
- white-space: nowrap;
33
- box-sizing: border-box;
34
- transition: var(--dropdown-item-transition);
35
- outline: none;
36
- }
37
-
38
- .item:hover:not(:disabled):not([aria-disabled="true"]) {
39
- background: var(--dropdown-item-bg-hover);
40
- }
41
-
42
- .item:active:not(:disabled):not([aria-disabled="true"]) {
43
- background: var(--dropdown-item-bg-active);
44
- }
45
-
46
- .item:focus-visible {
47
- background: var(--dropdown-item-bg-hover);
48
- outline: 2px solid var(--color-primary, #0e639c);
49
- outline-offset: -2px;
50
- }
51
-
52
- /* disabled */
53
- :host([disabled]) .item,
54
- .item:disabled {
55
- color: var(--dropdown-item-color-disabled);
56
- cursor: default;
57
- pointer-events: none;
58
- }
59
-
60
- /* Active item — current selection, current route, etc. */
61
- :host([active]) .item {
62
- background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
63
- color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
64
- font-weight: 500;
65
- }
66
-
67
- /* Checkbox mode — fixed-width indicator column */
68
- .check-indicator {
69
- display: inline-flex;
70
- align-items: center;
71
- justify-content: center;
72
- width: 1em;
73
- flex-shrink: 0;
74
- }
75
-
76
- /* CSS-drawn checkmark (border trick) */
77
- .check-indicator::after {
78
- content: '';
79
- display: block;
80
- width: 0.3em;
81
- height: 0.55em;
82
- border-right: 0.125em solid currentColor;
83
- border-bottom: 0.125em solid currentColor;
84
- transform: rotate(45deg) translateY(-0.1em);
85
- opacity: 0;
86
- transition: opacity 0.1s;
87
- }
88
-
89
- :host([checked]) .check-indicator::after {
90
- opacity: 1;
91
- }
1
+ :host {
2
+ display: block;
3
+
4
+ --dropdown-item-padding: 0.5rem 0.875rem;
5
+ --dropdown-item-bg: transparent;
6
+ --dropdown-item-bg-hover: var(--surface-raised, rgba(0, 0, 0, 0.05));
7
+ --dropdown-item-bg-active: var(--surface-raised-active, rgba(0, 0, 0, 0.1));
8
+ --dropdown-item-color: var(--color-text-main, inherit);
9
+ --dropdown-item-color-disabled: var(--color-text-disabled, rgba(0, 0, 0, 0.35));
10
+ --dropdown-item-font-size: 0.9375rem;
11
+ --dropdown-item-gap: 0.5rem;
12
+ --dropdown-item-transition: background 0.1s;
13
+ --dropdown-item-border-radius: var(--ae-radius-sm, 4px);
14
+ }
15
+
16
+ .item {
17
+ display: flex;
18
+ align-items: center;
19
+ gap: var(--dropdown-item-gap);
20
+ width: 100%;
21
+ padding: var(--dropdown-item-padding);
22
+ font-size: var(--dropdown-item-font-size);
23
+ font-family: inherit;
24
+ color: var(--dropdown-item-color);
25
+ background: var(--dropdown-item-bg);
26
+ border: none;
27
+ border-radius: var(--dropdown-item-border-radius);
28
+ text-align: left;
29
+ text-decoration: none;
30
+ cursor: pointer;
31
+ user-select: none;
32
+ white-space: nowrap;
33
+ box-sizing: border-box;
34
+ transition: var(--dropdown-item-transition);
35
+ outline: none;
36
+ }
37
+
38
+ .item:hover:not(:disabled):not([aria-disabled="true"]) {
39
+ background: var(--dropdown-item-bg-hover);
40
+ }
41
+
42
+ .item:active:not(:disabled):not([aria-disabled="true"]) {
43
+ background: var(--dropdown-item-bg-active);
44
+ }
45
+
46
+ .item:focus-visible {
47
+ background: var(--dropdown-item-bg-hover);
48
+ outline: 2px solid var(--color-primary, #0e639c);
49
+ outline-offset: -2px;
50
+ }
51
+
52
+ /* disabled */
53
+ :host([disabled]) .item,
54
+ .item:disabled {
55
+ color: var(--dropdown-item-color-disabled);
56
+ cursor: default;
57
+ pointer-events: none;
58
+ }
59
+
60
+ /* Active item — current selection, current route, etc. */
61
+ :host([active]) .item {
62
+ background: var(--dropdown-item-bg-selected, rgba(0, 0, 0, 0.06));
63
+ color: var(--dropdown-item-color-active, var(--color-primary, #0e639c));
64
+ font-weight: 500;
65
+ }
66
+
67
+ /* Checkbox mode — fixed-width indicator column */
68
+ .check-indicator {
69
+ display: inline-flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ width: 1em;
73
+ flex-shrink: 0;
74
+ }
75
+
76
+ /* CSS-drawn checkmark (border trick) */
77
+ .check-indicator::after {
78
+ content: '';
79
+ display: block;
80
+ width: 0.3em;
81
+ height: 0.55em;
82
+ border-right: 0.125em solid currentColor;
83
+ border-bottom: 0.125em solid currentColor;
84
+ transform: rotate(45deg) translateY(-0.1em);
85
+ opacity: 0;
86
+ transition: opacity 0.1s;
87
+ }
88
+
89
+ :host([checked]) .check-indicator::after {
90
+ opacity: 1;
91
+ }
package/src/styles/components/dropdown.css CHANGED
@@ -1,179 +1,179 @@
1
- :host {
2
- display: inline-block;
3
- position: relative;
4
-
5
- --dropdown-z-index: 1000;
6
- --dropdown-bg: var(--surface-overlay, #fff);
7
- --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
8
- --dropdown-border-radius: var(--ae-radius-md, 6px);
9
- --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
10
- --dropdown-min-width: 10rem;
11
- --dropdown-padding: 0.25rem 0;
12
- }
13
-
14
- .trigger-wrapper {
15
- display: flex;
16
- align-items: stretch;
17
- height: 100%;
18
- }
19
-
20
- /* Internal trigger rendered when `label` prop is set.
21
- Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)
22
- map their own tokens to these variables via ::slotted(ae-dropdown). */
23
- .trigger-label {
24
- display: inline-flex;
25
- align-items: center;
26
- height: var(--dropdown-trigger-height, auto);
27
- padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);
28
- color: var(--dropdown-trigger-color, inherit);
29
- background: var(--dropdown-trigger-bg, none);
30
- border: none;
31
- border-radius: var(--dropdown-trigger-radius, 0);
32
- -webkit-appearance: none;
33
- appearance: none;
34
- cursor: pointer;
35
- font: inherit;
36
- font-size: var(--dropdown-trigger-font-size, inherit);
37
- white-space: nowrap;
38
- transition: color 0.15s ease, background-color 0.15s ease;
39
- outline-offset: 2px;
40
- }
41
-
42
- .trigger-label:hover {
43
- color: var(--dropdown-trigger-hover-color, inherit);
44
- background-color: var(--dropdown-trigger-hover-bg, transparent);
45
- }
46
-
47
- :host([disabled]) .trigger-label {
48
- opacity: 0.5;
49
- cursor: not-allowed;
50
- pointer-events: none;
51
- }
52
-
53
- /* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */
54
- .ae-dropdown-arrow {
55
- display: inline-block;
56
- width: 0;
57
- height: 0;
58
- margin-left: 0.3em;
59
- vertical-align: 0.2em;
60
- flex-shrink: 0;
61
- }
62
- .ae-dropdown-arrow--bottom {
63
- border-top: 0.35em solid;
64
- border-right: 0.35em solid transparent;
65
- border-left: 0.35em solid transparent;
66
- }
67
- .ae-dropdown-arrow--top {
68
- border-bottom: 0.35em solid;
69
- border-right: 0.35em solid transparent;
70
- border-left: 0.35em solid transparent;
71
- }
72
- .ae-dropdown-arrow--right {
73
- border-left: 0.35em solid;
74
- border-top: 0.35em solid transparent;
75
- border-bottom: 0.35em solid transparent;
76
- }
77
- .ae-dropdown-arrow--left {
78
- border-right: 0.35em solid;
79
- border-top: 0.35em solid transparent;
80
- border-bottom: 0.35em solid transparent;
81
- }
82
-
83
- .panel {
84
- display: none;
85
- position: absolute;
86
- z-index: var(--dropdown-z-index);
87
- background: var(--dropdown-bg);
88
- border: var(--dropdown-border);
89
- border-radius: var(--dropdown-border-radius);
90
- box-shadow: var(--dropdown-shadow);
91
- min-width: var(--dropdown-min-width);
92
- padding: var(--dropdown-padding);
93
- box-sizing: border-box;
94
- /* Prevent panel from being wider than viewport */
95
- max-width: calc(100vw - 16px);
96
- }
97
-
98
- .panel.open {
99
- display: block;
100
- }
101
-
102
- /* placement variants */
103
- .panel.placement-bottom-start {
104
- top: 100%;
105
- left: 0;
106
- margin-top: 4px;
107
- }
108
-
109
- .panel.placement-bottom-end {
110
- top: 100%;
111
- right: 0;
112
- margin-top: 4px;
113
- }
114
-
115
- .panel.placement-bottom {
116
- top: 100%;
117
- left: 50%;
118
- transform: translateX(-50%);
119
- margin-top: 4px;
120
- }
121
-
122
- .panel.placement-top-start {
123
- bottom: 100%;
124
- left: 0;
125
- margin-bottom: 4px;
126
- }
127
-
128
- .panel.placement-top-end {
129
- bottom: 100%;
130
- right: 0;
131
- margin-bottom: 4px;
132
- }
133
-
134
- .panel.placement-top {
135
- bottom: 100%;
136
- left: 50%;
137
- transform: translateX(-50%);
138
- margin-bottom: 4px;
139
- }
140
-
141
- /* right placements */
142
- .panel.placement-right-start {
143
- top: 0;
144
- left: 100%;
145
- margin-left: 4px;
146
- }
147
-
148
- .panel.placement-right-end {
149
- bottom: 0;
150
- left: 100%;
151
- margin-left: 4px;
152
- }
153
-
154
- .panel.placement-right {
155
- top: 50%;
156
- left: 100%;
157
- transform: translateY(-50%);
158
- margin-left: 4px;
159
- }
160
-
161
- /* left placements */
162
- .panel.placement-left-start {
163
- top: 0;
164
- right: 100%;
165
- margin-right: 4px;
166
- }
167
-
168
- .panel.placement-left-end {
169
- bottom: 0;
170
- right: 100%;
171
- margin-right: 4px;
172
- }
173
-
174
- .panel.placement-left {
175
- top: 50%;
176
- right: 100%;
177
- transform: translateY(-50%);
178
- margin-right: 4px;
179
- }
1
+ :host {
2
+ display: inline-block;
3
+ position: relative;
4
+
5
+ --dropdown-z-index: 1000;
6
+ --dropdown-bg: var(--surface-overlay, #fff);
7
+ --dropdown-border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
8
+ --dropdown-border-radius: var(--ae-radius-md, 6px);
9
+ --dropdown-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
10
+ --dropdown-min-width: 10rem;
11
+ --dropdown-padding: 0.25rem 0;
12
+ }
13
+
14
+ .trigger-wrapper {
15
+ display: flex;
16
+ align-items: stretch;
17
+ height: 100%;
18
+ }
19
+
20
+ /* Internal trigger rendered when `label` prop is set.
21
+ Uses --dropdown-trigger-* variables. Context components (e.g. ae-navbar)
22
+ map their own tokens to these variables via ::slotted(ae-dropdown). */
23
+ .trigger-label {
24
+ display: inline-flex;
25
+ align-items: center;
26
+ height: var(--dropdown-trigger-height, auto);
27
+ padding: 0 var(--dropdown-trigger-padding-x, 0.75rem);
28
+ color: var(--dropdown-trigger-color, inherit);
29
+ background: var(--dropdown-trigger-bg, none);
30
+ border: none;
31
+ border-radius: var(--dropdown-trigger-radius, 0);
32
+ -webkit-appearance: none;
33
+ appearance: none;
34
+ cursor: pointer;
35
+ font: inherit;
36
+ font-size: var(--dropdown-trigger-font-size, inherit);
37
+ white-space: nowrap;
38
+ transition: color 0.15s ease, background-color 0.15s ease;
39
+ outline-offset: 2px;
40
+ }
41
+
42
+ .trigger-label:hover {
43
+ color: var(--dropdown-trigger-hover-color, inherit);
44
+ background-color: var(--dropdown-trigger-hover-bg, transparent);
45
+ }
46
+
47
+ :host([disabled]) .trigger-label {
48
+ opacity: 0.5;
49
+ cursor: not-allowed;
50
+ pointer-events: none;
51
+ }
52
+
53
+ /* Bootstrap-style CSS border caret — shadow DOM only, no global injection needed */
54
+ .ae-dropdown-arrow {
55
+ display: inline-block;
56
+ width: 0;
57
+ height: 0;
58
+ margin-left: 0.3em;
59
+ vertical-align: 0.2em;
60
+ flex-shrink: 0;
61
+ }
62
+ .ae-dropdown-arrow--bottom {
63
+ border-top: 0.35em solid;
64
+ border-right: 0.35em solid transparent;
65
+ border-left: 0.35em solid transparent;
66
+ }
67
+ .ae-dropdown-arrow--top {
68
+ border-bottom: 0.35em solid;
69
+ border-right: 0.35em solid transparent;
70
+ border-left: 0.35em solid transparent;
71
+ }
72
+ .ae-dropdown-arrow--right {
73
+ border-left: 0.35em solid;
74
+ border-top: 0.35em solid transparent;
75
+ border-bottom: 0.35em solid transparent;
76
+ }
77
+ .ae-dropdown-arrow--left {
78
+ border-right: 0.35em solid;
79
+ border-top: 0.35em solid transparent;
80
+ border-bottom: 0.35em solid transparent;
81
+ }
82
+
83
+ .panel {
84
+ display: none;
85
+ position: absolute;
86
+ z-index: var(--dropdown-z-index);
87
+ background: var(--dropdown-bg);
88
+ border: var(--dropdown-border);
89
+ border-radius: var(--dropdown-border-radius);
90
+ box-shadow: var(--dropdown-shadow);
91
+ min-width: var(--dropdown-min-width);
92
+ padding: var(--dropdown-padding);
93
+ box-sizing: border-box;
94
+ /* Prevent panel from being wider than viewport */
95
+ max-width: calc(100vw - 16px);
96
+ }
97
+
98
+ .panel.open {
99
+ display: block;
100
+ }
101
+
102
+ /* placement variants */
103
+ .panel.placement-bottom-start {
104
+ top: 100%;
105
+ left: 0;
106
+ margin-top: 4px;
107
+ }
108
+
109
+ .panel.placement-bottom-end {
110
+ top: 100%;
111
+ right: 0;
112
+ margin-top: 4px;
113
+ }
114
+
115
+ .panel.placement-bottom {
116
+ top: 100%;
117
+ left: 50%;
118
+ transform: translateX(-50%);
119
+ margin-top: 4px;
120
+ }
121
+
122
+ .panel.placement-top-start {
123
+ bottom: 100%;
124
+ left: 0;
125
+ margin-bottom: 4px;
126
+ }
127
+
128
+ .panel.placement-top-end {
129
+ bottom: 100%;
130
+ right: 0;
131
+ margin-bottom: 4px;
132
+ }
133
+
134
+ .panel.placement-top {
135
+ bottom: 100%;
136
+ left: 50%;
137
+ transform: translateX(-50%);
138
+ margin-bottom: 4px;
139
+ }
140
+
141
+ /* right placements */
142
+ .panel.placement-right-start {
143
+ top: 0;
144
+ left: 100%;
145
+ margin-left: 4px;
146
+ }
147
+
148
+ .panel.placement-right-end {
149
+ bottom: 0;
150
+ left: 100%;
151
+ margin-left: 4px;
152
+ }
153
+
154
+ .panel.placement-right {
155
+ top: 50%;
156
+ left: 100%;
157
+ transform: translateY(-50%);
158
+ margin-left: 4px;
159
+ }
160
+
161
+ /* left placements */
162
+ .panel.placement-left-start {
163
+ top: 0;
164
+ right: 100%;
165
+ margin-right: 4px;
166
+ }
167
+
168
+ .panel.placement-left-end {
169
+ bottom: 0;
170
+ right: 100%;
171
+ margin-right: 4px;
172
+ }
173
+
174
+ .panel.placement-left {
175
+ top: 50%;
176
+ right: 100%;
177
+ transform: translateY(-50%);
178
+ margin-right: 4px;
179
+ }