@innovaccer/design-system 4.15.0 → 4.16.0

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.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,39 @@
1
+ ## 4.16.0 (2025-11-03)
2
+
3
+ ### Highlights
4
+
5
+ - feat(select): add outlined styleType in select (b88c025d)
6
+
7
+ ### Breaking changes
8
+
9
+ NA
10
+
11
+ ### Migration guide
12
+
13
+ NA
14
+
15
+ ### Deprecations
16
+
17
+ NA
18
+
19
+ ### Features
20
+
21
+ - feat(select): add outlined styleType in select (b88c025d)
22
+
23
+ ### Fixes
24
+
25
+ NA
26
+
27
+ ### Improvements
28
+
29
+ NA
30
+
31
+ ### Documentation
32
+
33
+ NA
34
+
35
+ ---
36
+
1
37
  ## 4.15.0 (2025-10-21)
2
38
 
3
39
  ### Highlights
@@ -7027,33 +7027,71 @@ body {
7027
7027
  justify-content: space-between;
7028
7028
  padding-top: unset;
7029
7029
  padding-bottom: unset;
7030
+ transition: var(--duration--fast-01) var(--standard-productive-curve);
7031
+ }
7032
+
7033
+ .Select-trigger--filled {
7030
7034
  background: var(--secondary-light);
7031
7035
  color: var(--text);
7032
- transition: var(--duration--fast-01) var(--standard-productive-curve);
7033
7036
  }
7034
7037
 
7035
- .Select-trigger:disabled {
7038
+ .Select-trigger--filled:disabled {
7036
7039
  background: var(--secondary-lighter);
7037
7040
  color: var(--text-disabled);
7038
7041
  pointer-events: none;
7039
7042
  }
7040
7043
 
7041
- .Select-trigger:active,
7042
- .Select-trigger--open {
7044
+ .Select-trigger--filled:active,
7045
+ .Select-trigger--filledOpen {
7043
7046
  background-color: var(--secondary-dark) !important;
7044
7047
  color: var(--text) !important;
7045
7048
  animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
7046
7049
  animation-duration: 120ms;
7047
7050
  }
7048
7051
 
7049
- .Select-trigger:hover {
7052
+ .Select-trigger--filled:hover {
7050
7053
  background: var(--secondary);
7051
7054
  color: var(--text);
7052
7055
  }
7053
7056
 
7054
- .Select-trigger:focus {
7057
+ .Select-trigger--filled:focus {
7058
+ border: var(--border-width-2-5) solid var(--primary);
7055
7059
  background-color: var(--secondary-light);
7056
- box-shadow: var(--shadow-spread) var(--secondary-shadow);
7060
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
7061
+ }
7062
+
7063
+ /* styleType Outlined */
7064
+
7065
+ .Select-trigger--outlined {
7066
+ background: var(--white);
7067
+ color: var(--text);
7068
+ border: var(--border);
7069
+ }
7070
+
7071
+ .Select-trigger--outlined:hover {
7072
+ background: var(--secondary-lighter);
7073
+ color: var(--inverse);
7074
+ border: var(--border-width-2-5) solid var(--secondary-dark);
7075
+ }
7076
+
7077
+ .Select-trigger--outlined:focus {
7078
+ border: var(--border-width-2-5) solid var(--primary);
7079
+ box-shadow: var(--shadow-spread) var(--primary-shadow);
7080
+ }
7081
+
7082
+ .Select-trigger--outlined:active,
7083
+ .Select-trigger--outlinedOpen {
7084
+ color: var(--inverse) !important;
7085
+ background: var(--secondary) !important;
7086
+ border: var(--border-width-2-5) solid var(--inverse-lightest) !important;
7087
+ animation-timing-function: var(--entrance-productive-curve);
7088
+ animation-duration: var(--duration--fast-02);
7089
+ }
7090
+
7091
+ .Select-trigger--outlined:disabled {
7092
+ color: var(--inverse-lightest) !important;
7093
+ background: var(--secondary-lightest) !important;
7094
+ border: var(--border-width-2-5) solid var(--secondary-lighter) !important;
7057
7095
  }
7058
7096
 
7059
7097
  .Select-inputWrapper {
@@ -7097,10 +7135,14 @@ body {
7097
7135
  padding-left: var(--spacing-30);
7098
7136
  }
7099
7137
 
7100
- .Select-trigger--placeholder {
7138
+ .Select-trigger--filledPlaceholder {
7101
7139
  color: var(--text);
7102
7140
  }
7103
7141
 
7142
+ .Select-trigger--outlinedPlaceholder {
7143
+ color: var(--inverse-lighter);
7144
+ }
7145
+
7104
7146
  .Select-trigger--icon {
7105
7147
  padding-left: var(--spacing-20);
7106
7148
  }
@@ -7166,6 +7208,11 @@ body {
7166
7208
  font-weight: var(--font-weight-medium);
7167
7209
  }
7168
7210
 
7211
+ .Select-trigger--error {
7212
+ border: var(--border-width-2-5) solid var(--alert) !important;
7213
+ box-shadow: var(--shadow-spread) var(--alert-shadow);
7214
+ }
7215
+
7169
7216
  .Selection-card {
7170
7217
  border-radius: var(--border-radius-10);
7171
7218
  position: relative;