ngx-strata 0.4.3-beta.2 → 0.4.4

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 (9) hide show
  1. package/assets/styles/components/input-field.scss +84 -5
  2. package/assets/styles/components/item.scss +13 -2
  3. package/assets/styles/components/modal.scss +5 -3
  4. package/dist/strata/strata.css +1 -1
  5. package/fesm2022/ngx-strata.mjs +100 -8
  6. package/fesm2022/ngx-strata.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/skills/ngx-strata/components/input-field.md +9 -2
  9. package/types/ngx-strata.d.ts +18 -4
package/assets/styles/components/input-field.scss CHANGED
@@ -1,11 +1,19 @@
1
1
  st-input-field {
2
2
  --st-input-field-bg-color: var(--st-color-bg-raised);
3
3
  --st-input-field-bg-hover-color: var(--st-color-bg-raised);
4
+ --st-input-field-bg-disabled-color: var(--st-color-bg-disabled);
4
5
  --st-input-field-text-color: var(--st-color-text-primary);
6
+ --st-input-field-text-disabled-color: var(--st-color-text-disabled);
7
+ --st-input-field-border-color: var(--st-border-muted);
8
+ --st-input-field-border-disabled-color: var(--st-border-faded);
9
+ --st-input-field-opacity-disabled: 0.6;
5
10
  --st-input-field-height: var(--st-interactive-element-height-md);
6
- --st-input-field-font-size: 14px;
11
+ --st-input-field-font-size: var(--st-font-md);
7
12
  --st-input-field-padding-x: var(--st-size-xs);
8
13
  --st-input-field-border-radius: var(--st-border-radius-md);
14
+ --st-input-field-counter-font-size: var(--st-font-sm);
15
+ --st-input-field-counter-color: var(--st-color-text-tertiary);
16
+ --st-input-field-counter-disabled-color: var(--st-color-text-disabled);
9
17
 
10
18
  display: flex;
11
19
  flex-direction: column;
@@ -13,21 +21,24 @@ st-input-field {
13
21
 
14
22
  &.st-size-sm {
15
23
  --st-input-field-height: var(--st-interactive-element-height-sm);
16
- --st-input-field-font-size: 12px;
24
+ --st-input-field-font-size: var(--st-font-sm);
17
25
  --st-input-field-padding-x: var(--st-size-xxs);
18
26
  --st-input-field-border-radius: var(--st-border-radius-sm);
27
+ --st-input-field-counter-font-size: var(--st-font-xs);
19
28
  }
20
29
 
21
30
  &.st-size-md {
22
31
  --st-input-field-height: var(--st-interactive-element-height-md);
23
- --st-input-field-font-size: 14px;
32
+ --st-input-field-font-size: var(--st-font-md);
24
33
  --st-input-field-padding-x: var(--st-size-xs);
34
+ --st-input-field-counter-font-size: var(--st-font-sm);
25
35
  }
26
36
 
27
37
  &.st-size-lg {
28
38
  --st-input-field-height: var(--st-interactive-element-height-lg);
29
- --st-input-field-font-size: 16px;
39
+ --st-input-field-font-size: var(--st-font-md);
30
40
  --st-input-field-padding-x: var(--st-size-xs);
41
+ --st-input-field-counter-font-size: var(--st-font-sm);
31
42
  }
32
43
 
33
44
  .st-input-wrapper {
@@ -39,7 +50,7 @@ st-input-field {
39
50
  height: var(--st-input-field-height);
40
51
  min-height: var(--st-input-field-height);
41
52
  background-color: var(--st-input-field-bg-color);
42
- border: 1px solid var(--st-border-muted);
53
+ border: 1px solid var(--st-input-field-border-color);
43
54
  border-radius: var(--st-input-field-border-radius);
44
55
  overflow: hidden;
45
56
  transition:
@@ -107,5 +118,73 @@ st-input-field {
107
118
  outline: none;
108
119
  }
109
120
  }
121
+
122
+ .st-input-field-footer {
123
+ display: flex;
124
+ justify-content: flex-end;
125
+ align-items: center;
126
+ margin-top: var(--st-space-1);
127
+ line-height: 1.25;
128
+ }
129
+
130
+ .st-input-field-counter {
131
+ font-size: var(--st-input-field-counter-font-size);
132
+ color: var(--st-input-field-counter-color);
133
+ font-variant-numeric: tabular-nums;
134
+ user-select: none;
135
+ }
136
+
137
+ &.st-disabled,
138
+ &[disabled],
139
+ &[data-disabled='true'],
140
+ &:has(input:disabled),
141
+ &:has(textarea:disabled),
142
+ &:has([aria-disabled='true']) {
143
+ cursor: not-allowed;
144
+
145
+ label {
146
+ cursor: not-allowed;
147
+ color: var(--st-input-field-text-disabled-color);
148
+ }
149
+
150
+ .st-input-wrapper {
151
+ background-color: var(--st-input-field-bg-disabled-color);
152
+ border-color: var(--st-input-field-border-disabled-color);
153
+ cursor: not-allowed;
154
+ opacity: var(--st-input-field-opacity-disabled);
155
+
156
+ &:hover {
157
+ background-color: var(--st-input-field-bg-disabled-color);
158
+ }
159
+
160
+ &:focus-within {
161
+ outline: none;
162
+ }
163
+ }
164
+
165
+ input,
166
+ textarea {
167
+ cursor: not-allowed;
168
+ color: var(--st-input-field-text-disabled-color);
169
+
170
+ &::placeholder {
171
+ color: var(--st-input-field-text-disabled-color);
172
+ }
173
+ }
174
+
175
+ .affix {
176
+ cursor: not-allowed;
177
+ color: var(--st-input-field-text-disabled-color);
178
+
179
+ button,
180
+ [stButton] {
181
+ pointer-events: none;
182
+ }
183
+ }
184
+
185
+ .st-input-field-counter {
186
+ color: var(--st-input-field-counter-disabled-color);
187
+ }
188
+ }
110
189
  }
111
190
 
package/assets/styles/components/item.scss CHANGED
@@ -4,6 +4,7 @@ st-item {
4
4
  --st-item-gap: var(--st-size-xs);
5
5
  width: 100%;
6
6
  display: flex;
7
+ position: relative;
7
8
  padding-bottom: var(--st-size-xxs);
8
9
  padding-top: var(--st-size-xxs);
9
10
  min-height: 32px;
@@ -72,11 +73,21 @@ st-item .item-default {
72
73
  }
73
74
 
74
75
  st-item-list {
76
+ --st-item-list-divider-color: var(--st-border);
77
+
75
78
  width: 100%;
79
+ display: block;
76
80
 
77
81
  &.with-dividers {
78
- st-item:not(:last-child) {
79
- border-bottom: 1px solid var(--st-border);
82
+ st-item:not(:last-child)::after {
83
+ content: '';
84
+ position: absolute;
85
+ left: 0;
86
+ right: 0;
87
+ bottom: 0;
88
+ height: 1px;
89
+ background-color: var(--st-item-list-divider-color);
90
+ pointer-events: none;
80
91
  }
81
92
  }
82
93
  }
package/assets/styles/components/modal.scss CHANGED
@@ -32,19 +32,21 @@ st-alert-content {
32
32
  }
33
33
 
34
34
  st-modal-header {
35
+ --st-modal-header-padding: var(--st-size-xs) var(--st-size-sm);
36
+ --st-modal-header-border-color: var(--st-border);
37
+
35
38
  display: flex;
36
39
  flex-direction: row;
37
40
  justify-content: space-between;
38
41
  align-items: center;
39
- border-bottom: 1px solid var(--st-border);
40
- padding: var(--st-size-xs);
42
+ border-bottom: 1px solid var(--st-modal-header-border-color);
43
+ padding: var(--st-modal-header-padding);
41
44
  border-top-left-radius: var(--st-modal-border-radius);
42
45
  border-top-right-radius: var(--st-modal-border-radius);
43
46
 
44
47
  st-button {
45
48
  margin-left: auto;
46
49
  }
47
-
48
50
  }
49
51
 
50
52
  st-modal-footer {