@festo-ui/web-essentials 9.0.1 → 10.0.0-dev.826

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 (27) hide show
  1. package/dist/css/festo-web-essentials.css +187 -48
  2. package/dist/css/festo-web-essentials.css.map +1 -1
  3. package/dist/css/festo-web-essentials.min.css +14 -14
  4. package/dist/css/festo-web-essentials.min.css.map +1 -1
  5. package/dist/css/light/festo-web-essentials-light.css +178 -39
  6. package/dist/css/light/festo-web-essentials-light.css.map +1 -1
  7. package/dist/css/organisms/festo-web-essentials-organisms.css.map +1 -1
  8. package/dist/css/themes/flatpickr/festo.css +1 -1
  9. package/dist/css/themes/flatpickr/festo.css.map +1 -1
  10. package/dist/css/themes/flatpickr/festo.min.css +1 -1
  11. package/dist/scss/_breadcrumb.scss +74 -24
  12. package/dist/scss/_popover.scss +10 -12
  13. package/dist/scss/_search-input.scss +1 -0
  14. package/dist/scss/_select.scss +84 -4
  15. package/dist/scss/_table.scss +6 -6
  16. package/dist/scss/_text-input.scss +60 -0
  17. package/dist/scss/_variables.scss +1 -0
  18. package/dist/scss/festo-web-essentials.scss +1 -1
  19. package/dist/scss/themes/flatpickr/festo.scss +1 -1
  20. package/package.json +9 -18
  21. package/scss/_breadcrumb.scss +74 -24
  22. package/scss/_popover.scss +10 -12
  23. package/scss/_search-input.scss +1 -0
  24. package/scss/_select.scss +84 -4
  25. package/scss/_table.scss +6 -6
  26. package/scss/_text-input.scss +60 -0
  27. package/scss/_variables.scss +1 -0
package/dist/scss/_table.scss CHANGED
@@ -35,27 +35,27 @@ table.fwe-table {
35
35
  &::before {
36
36
  content: "";
37
37
  display: inline-block;
38
- width: 9px;
39
- height: 14px;
38
+ width: 16px;
39
+ height: 16px;
40
40
  background-size: cover;
41
41
  position: relative;
42
42
  top: 2px;
43
- left: variables.$spacer-xs;
43
+ left: variables.$spacer-xxs;
44
44
  }
45
45
 
46
46
  &::before {
47
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
47
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzMzMzMzMyIvPjwvc3ZnPg==");
48
48
  }
49
49
 
50
50
  &.fwe-table-order-ascending {
51
51
  &::before {
52
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0MC4zNTQgMTUyLjcwNykgcm90YXRlKDE4MCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyOCAxNDIpIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQ0IDE0OS42NDYpIHJvdGF0ZSgxODApIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiNhM2IyYmMiLz48L2c+PC9nPjwvc3ZnPg==");
52
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNjQ2IDkuMzUzOTdMOCA1LjcwNjk3TDQuMzU0IDkuMzUzOTdMMy42NDYgOC42NDU5N0w4IDQuMjkyOTdMMTIuMzU0IDguNjQ1OTdMMTEuNjQ2IDkuMzUzOTdaIiBmaWxsPSIjMDA5MWRjIi8+PC9zdmc+");
53
53
  }
54
54
  }
55
55
 
56
56
  &.fwe-table-order-descending {
57
57
  &::before {
58
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iIzAwOTFkYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
58
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzAwOTFkYyIvPjwvc3ZnPg==");
59
59
  }
60
60
  }
61
61
  }
package/dist/scss/_text-input.scss CHANGED
@@ -166,6 +166,66 @@ label.fwe-input-text {
166
166
  }
167
167
  }
168
168
 
169
+ // Invalid state: red border + show error text
170
+ &:has(input:user-invalid:not(:disabled)),
171
+ &.fwe-input-text--invalid {
172
+ .fwe-input-text-info {
173
+ display: none;
174
+ }
175
+
176
+ .fwe-input-text-invalid {
177
+ display: block;
178
+ }
179
+ }
180
+
181
+ // Validation icons: opt-in via .fwe-input-text--with-validation-icons
182
+ // Icons are suppressed when a custom icon is already present (.fwe-input-text-icon)
183
+ &.fwe-input-text--with-validation-icons {
184
+ &:has(input:user-valid:not(:disabled)),
185
+ &:has(input:user-invalid:not(:disabled)),
186
+ &.fwe-input-text--valid,
187
+ &.fwe-input-text--invalid {
188
+ &:not(.fwe-input-text-icon) {
189
+ input[type="text"],
190
+ input[type="email"],
191
+ input[type="password"],
192
+ input[type="number"],
193
+ input[type="date"],
194
+ input[type="time"],
195
+ input[type="datetime-local"] {
196
+ padding-right: 24px;
197
+ }
198
+
199
+ &::after {
200
+ content: "";
201
+ position: absolute;
202
+ bottom: 27px;
203
+ right: 0px;
204
+ width: 16px;
205
+ height: 16px;
206
+ background-repeat: no-repeat;
207
+ background-position: center center;
208
+ }
209
+ }
210
+ }
211
+
212
+ &:has(input:user-valid:not(:disabled)),
213
+ &.fwe-input-text--valid {
214
+ &:not(.fwe-input-text-icon)::after {
215
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path d='M4.207 9.621L0 5.414L1.414 4L4.207 6.793L11 0L12.414 1.414L4.207 9.621Z' fill='%230091DC'/></svg>");
216
+ background-size: 13px 13px;
217
+ }
218
+ }
219
+
220
+ &:has(input:user-invalid:not(:disabled)),
221
+ &.fwe-input-text--invalid {
222
+ &:not(.fwe-input-text-icon)::after {
223
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.95 8.46405L15.536 7.05005L12 10.586L8.46405 7.05005L7.05005 8.46405L10.586 12L7.05005 15.536L8.46405 16.95L12 13.414L15.536 16.95L16.95 15.536L13.414 12L16.95 8.46405Z' fill='%23D50000'/></svg>");
224
+ background-size: 24px 24px;
225
+ }
226
+ }
227
+ }
228
+
169
229
  &.fwe-input-text-icon {
170
230
  .fwe-svg-icon,
171
231
  i {
package/dist/scss/_variables.scss CHANGED
@@ -105,6 +105,7 @@ $badge-colors: () !default;
105
105
  $badge-colors: map.merge(
106
106
  (
107
107
  "caerul": $caerul,
108
+ "dark": $text,
108
109
  "green": $green,
109
110
  "yellow": $yellow,
110
111
  "orange": $orange,
package/dist/scss/festo-web-essentials.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.0-dev.826 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
package/dist/scss/themes/flatpickr/festo.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Festo UI - Web Essentials v9.0.1 (https://storybook.festo.design/)
2
+ * Festo UI - Web Essentials v10.0.0-dev.826 (https://storybook.festo.design/)
3
3
  * Copyright 2022 Festo SE & Co. KG
4
4
  * Licensed under Apache-2.0
5
5
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@festo-ui/web-essentials",
3
- "version": "9.0.1",
3
+ "version": "10.0.0-dev.826",
4
4
  "description": "CSS framework and utils to build FESTO web applications",
5
5
  "keywords": [
6
6
  "css",
@@ -22,7 +22,7 @@
22
22
  "scss"
23
23
  ],
24
24
  "scripts": {
25
- "storybook": "storybook dev -p 6006",
25
+ "storybook": "storybook dev -p 6005",
26
26
  "build-storybook": "storybook build",
27
27
  "fwe:build": "npm-run-all fwe:css fwe:copy",
28
28
  "fwe:css:version": "node build/change-version.js",
@@ -40,23 +40,18 @@
40
40
  "fwe:build-storybook": "storybook build -c .storybook -o storybook-static",
41
41
  "fwe:version": "npm version"
42
42
  },
43
- "peerDependencies": {
44
- "@festo-ui/icon-font": "*"
45
- },
46
43
  "devDependencies": {
47
44
  "@babel/core": "^7.20.12",
48
45
  "@babel/preset-env": "^7.22.14",
49
46
  "@babel/preset-typescript": "^7.22.11",
50
- "@cyclonedx/cyclonedx-npm": "^1.19.3",
51
47
  "@festo-ui/icon-font": "*",
52
- "@storybook/addon-docs": "^9.1.10",
53
- "@storybook/addon-links": "^9.1.10",
54
- "@storybook/cli": "^9.1.10",
55
- "@storybook/html": "^9.1.10",
56
- "@storybook/html-vite": "^9.1.10",
48
+ "@storybook/addon-docs": "^10.2.9",
49
+ "@storybook/cli": "^10.2.9",
50
+ "@storybook/html": "^10.2.9",
51
+ "@storybook/html-vite": "^10.2.9",
57
52
  "@storybook/preset-scss": "^1.0.3",
58
- "@storybook/react": "9.1.10",
59
- "@storybook/testing-library": "^0.2.0",
53
+ "@storybook/react": "10.2.9",
54
+ "@storybook/testing-library": "^0.2.2",
60
55
  "autoprefixer": "10.4.8",
61
56
  "babel-jest": "27.5.1",
62
57
  "babel-loader": "^8.3.0",
@@ -64,24 +59,20 @@
64
59
  "copyfiles": "^2.4.1",
65
60
  "cors": "^2.8.5",
66
61
  "css-loader": "^5.0.1",
67
- "@biomejs/biome": "2.3.2",
68
62
  "globby": "^13.1.3",
69
63
  "html-webpack-plugin": "^5.3.2",
70
- "ng-packagr": "14.1.0",
71
64
  "npm-run-all": "^4.1.5",
72
65
  "postcss": "^8.4.21",
73
66
  "postcss-cli": "^10.1.0",
74
67
  "postcss-import": "14.1.0",
75
68
  "postcss-preset-env": "7.5.0",
76
- "postcss-url": "10.1.3",
77
69
  "prettier": "2.6.2",
78
70
  "react": "^18.2.0",
79
71
  "react-dom": "^18.2.0",
80
- "rollup": "^1.32.1",
81
72
  "sass": "^1.82.0",
82
73
  "sass-loader": "^16.0.4",
83
74
  "sort-package-json": "^2.1.0",
84
- "storybook": "^9.1.10",
75
+ "storybook": "^10.2.3",
85
76
  "style-loader": "^3.2.1",
86
77
  "stylelint": "^14.16.1",
87
78
  "stylelint-config-prettier": "^9.0.4",
package/scss/_breadcrumb.scss CHANGED
@@ -1,45 +1,95 @@
1
1
  @use "variables";
2
2
 
3
3
  .fwe-breadcrumb {
4
- display: flex;
5
- flex-wrap: wrap;
6
- justify-items: center;
7
- align-items: center;
8
- .fwe-breadcrumb-item,
9
- a {
4
+ overflow: hidden;
5
+
6
+ ol {
7
+ overflow: hidden;
8
+ display: flex;
9
+ flex-wrap: nowrap;
10
+ white-space: nowrap;
11
+ align-items: center;
12
+ list-style: none;
13
+ margin: 0;
14
+ padding: 0;
15
+ }
16
+
17
+ li {
10
18
  display: flex;
19
+ overflow: hidden;
20
+ flex-shrink: 0;
11
21
  align-items: center;
12
22
  min-height: 24px;
13
23
  color: variables.$text;
14
- text-decoration: none;
15
- -webkit-user-select: none;
16
- user-select: none;
17
24
  font-size: variables.$font-size-md;
18
25
  line-height: calc(#{variables.$font-size-md} + 2px);
26
+
27
+ &:last-child {
28
+ flex-shrink: 1;
29
+ min-width: 36px;
30
+
31
+ a {
32
+ overflow: hidden;
33
+ text-overflow: ellipsis;
34
+ }
35
+ }
36
+ }
37
+
38
+ a {
39
+ display: block;
40
+ align-items: center;
41
+ color: variables.$text;
42
+ text-decoration: none;
43
+ user-select: none;
44
+
19
45
  &:focus {
20
46
  outline: none;
21
47
  }
22
- &:not(:last-child) {
23
- &:hover {
24
- color: variables.$hero;
25
- }
26
- &:active {
27
- color: variables.$hero-active;
28
- }
29
- cursor: pointer;
30
- &::after {
48
+
49
+ &:hover {
50
+ color: variables.$hero;
51
+ }
52
+
53
+ &:active {
54
+ color: variables.$hero-active;
55
+ }
56
+
57
+ &[aria-current="page"] {
58
+ font-weight: bold;
59
+ cursor: default;
60
+ pointer-events: none;
61
+ }
62
+ }
63
+
64
+ li:not(:last-child) {
65
+ &::after {
66
+ content: "";
67
+ margin-left: 4px;
68
+ margin-right: 4px;
69
+ height: 16px;
70
+ width: 16px;
71
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
72
+ }
73
+ }
74
+
75
+ &--mobile {
76
+ li {
77
+ display: none;
78
+ }
79
+
80
+ li:nth-last-child(-n + 2) {
81
+ display: flex;
82
+ }
83
+
84
+ li:nth-last-child(2) {
85
+ &::before {
31
86
  content: "";
32
- margin-left: 4px;
87
+ margin-left: 0px;
33
88
  margin-right: 4px;
34
89
  height: 16px;
35
90
  width: 16px;
36
91
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0id2hpdGUgYmFja2dyb3VuZCIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJub25lIiBkPSJNMCAxNlYwaDE2djE2eiIvPjxwYXRoIGZpbGw9IiMzMzMiIGQ9Im0xMC43MDcgOC00LjM1MyA0LjM1NC0uNzA4LS43MDhMOS4yOTMgOCA1LjY0NiA0LjM1NGwuNzA4LS43MDhMMTAuNzA3IDh6Ii8+PC9zdmc+");
37
92
  }
38
93
  }
39
- &:last-child {
40
- font-weight: bold;
41
- cursor: default;
42
- pointer-events: none;
43
- }
44
94
  }
45
95
  }
package/scss/_popover.scss CHANGED
@@ -221,17 +221,15 @@
221
221
  }
222
222
 
223
223
  .fwe-popover-menu-trigger {
224
- .fwe-popover-menu-trigger-button {
225
- background: none;
226
- border: none;
227
- padding: 0;
228
- margin: 0;
229
- line-height: 0;
230
- display: block;
231
- cursor: pointer;
232
-
233
- &:hover {
234
- color: variables.$hero;
235
- }
224
+ background: none;
225
+ border: none;
226
+ padding: 0;
227
+ margin: 0;
228
+ line-height: 0;
229
+ display: block;
230
+ cursor: pointer;
231
+
232
+ &:hover {
233
+ color: variables.$hero;
236
234
  }
237
235
  }
package/scss/_search-input.scss CHANGED
@@ -84,6 +84,7 @@ input[type="search"]::-webkit-search-cancel-button {
84
84
 
85
85
  .fwe-search-suggestions {
86
86
  position: absolute;
87
+ z-index: variables.$zindex-dropdown;
87
88
  top: 38px;
88
89
  left: 0px;
89
90
  right: 0px;
package/scss/_select.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  display: flex;
16
16
  flex-direction: column;
17
17
  padding-bottom: 18px;
18
+
18
19
  &::before {
19
20
  pointer-events: none;
20
21
  position: absolute;
@@ -23,7 +24,16 @@
23
24
  content: "";
24
25
  height: 24px;
25
26
  width: 24px;
26
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==");
27
+
28
+ -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==")
29
+ center/24px 24px no-repeat;
30
+ mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZGF0YS1uYW1lPSJ3aGl0ZSBiYWNrZ3JvdW5kIi8+PHBhdGggZmlsbD0iIzMzMyIgZD0iTTUuNjM2IDkuMTcyIDEyIDE1LjUzNmw2LjM2NC02LjM2NC0uNzA3LS43MDhMMTIgMTQuMTIxIDYuMzQzIDguNDY0bC0uNzA3LjcwOHoiIGRhdGEtbmFtZT0iY29udGVudCIvPjwvc3ZnPg==")
31
+ center/24px 24px no-repeat;
32
+ background-color: variables.$text;
33
+ }
34
+
35
+ &:has(.fwe-select:disabled)::before {
36
+ background-color: variables.$text-disabled;
27
37
  }
28
38
 
29
39
  .fwe-select-label {
@@ -36,11 +46,15 @@
36
46
  }
37
47
 
38
48
  .fwe-select {
49
+ text-align: left;
50
+ overflow: hidden;
51
+ white-space: nowrap;
52
+ text-overflow: ellipsis;
39
53
  cursor: pointer;
40
54
  order: 2;
41
55
  height: 33px;
42
- padding-bottom: 4px;
43
- padding-top: 4px;
56
+ padding-inline: unset;
57
+ padding: 4px 24px 4px 0px;
44
58
  width: 100%;
45
59
  font-size: variables.$font-size-base;
46
60
  appearance: none;
@@ -50,14 +64,19 @@
50
64
  border: none;
51
65
  border-bottom: 1px solid variables.$control-border;
52
66
 
53
- &:hover {
67
+ &:hover,
68
+ &:focus {
54
69
  &:not(:disabled) {
55
70
  color: variables.$hero;
71
+
56
72
  option {
57
73
  color: variables.$text;
58
74
  }
75
+
59
76
  border-color: variables.$hero;
60
77
  }
78
+
79
+ &.fwe-invalid,
61
80
  &:user-invalid {
62
81
  border-color: variables.$red;
63
82
  }
@@ -65,9 +84,11 @@
65
84
 
66
85
  &:disabled {
67
86
  cursor: default;
87
+
68
88
  ~ .fwe-select-label {
69
89
  color: variables.$text-disabled;
70
90
  }
91
+
71
92
  border-color: variables.$control-disabled;
72
93
  }
73
94
 
@@ -75,6 +96,7 @@
75
96
  display: none;
76
97
  }
77
98
 
99
+ &.fwe-invalid,
78
100
  &:user-invalid {
79
101
  box-shadow: none;
80
102
  border-color: variables.$red;
@@ -82,6 +104,7 @@
82
104
  ~ .fwe-select-invalid {
83
105
  display: block;
84
106
  }
107
+
85
108
  ~ .fwe-select-description {
86
109
  display: none;
87
110
  }
@@ -98,3 +121,60 @@
98
121
  color: variables.$red;
99
122
  }
100
123
  }
124
+
125
+ .fwe-options-container {
126
+ max-width: 100%;
127
+ background-color: variables.$white;
128
+ padding: 16px 0px;
129
+ margin: 0;
130
+ box-shadow: 0 1px 8px 1px rgba(0, 0, 0, 0.2);
131
+ list-style: none;
132
+
133
+ &:focus {
134
+ outline: none;
135
+ }
136
+
137
+ &--multi-select {
138
+ display: flex;
139
+ flex-direction: column;
140
+ gap: 12px;
141
+ padding: 20px 12px;
142
+ }
143
+ }
144
+
145
+ .fwe-combobox-option {
146
+ padding: 8px 16px;
147
+ cursor: pointer;
148
+ position: relative;
149
+
150
+ &:hover,
151
+ &:focus,
152
+ &.fwe-focus {
153
+ background-color: variables.$background;
154
+ color: variables.$hero;
155
+ }
156
+
157
+ &.fwe-selected {
158
+ color: variables.$hero;
159
+
160
+ &::before {
161
+ content: "";
162
+ width: 4px;
163
+ height: 100%;
164
+ background-color: variables.$hero;
165
+ position: absolute;
166
+ left: 0;
167
+ top: 0;
168
+ }
169
+ }
170
+
171
+ &.fwe-disabled {
172
+ color: variables.$text-disabled;
173
+ cursor: default;
174
+
175
+ &:hover {
176
+ background-color: transparent;
177
+ color: variables.$text-disabled;
178
+ }
179
+ }
180
+ }
package/scss/_table.scss CHANGED
@@ -35,27 +35,27 @@ table.fwe-table {
35
35
  &::before {
36
36
  content: "";
37
37
  display: inline-block;
38
- width: 9px;
39
- height: 14px;
38
+ width: 16px;
39
+ height: 16px;
40
40
  background-size: cover;
41
41
  position: relative;
42
42
  top: 2px;
43
- left: variables.$spacer-xs;
43
+ left: variables.$spacer-xxs;
44
44
  }
45
45
 
46
46
  &::before {
47
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
47
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzMzMzMzMyIvPjwvc3ZnPg==");
48
48
  }
49
49
 
50
50
  &.fwe-table-order-ascending {
51
51
  &::before {
52
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM0MC4zNTQgMTUyLjcwNykgcm90YXRlKDE4MCkiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyOCAxNDIpIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiMwMDkxZGMiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQ0IDE0OS42NDYpIHJvdGF0ZSgxODApIj48cGF0aCBkPSJNOCwxMC43MDcsMy42NDYsNi4zNTRsLjcwOC0uNzA4TDgsOS4yOTNsMy42NDYtMy42NDcuNzA4LjcwOFoiIGZpbGw9IiNhM2IyYmMiLz48L2c+PC9nPjwvc3ZnPg==");
52
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMTEuNjQ2IDkuMzUzOTdMOCA1LjcwNjk3TDQuMzU0IDkuMzUzOTdMMy42NDYgOC42NDU5N0w4IDQuMjkyOTdMMTIuMzU0IDguNjQ1OTdMMTEuNjQ2IDkuMzUzOTdaIiBmaWxsPSIjMDA5MWRjIi8+PC9zdmc+");
53
53
  }
54
54
  }
55
55
 
56
56
  &.fwe-table-order-descending {
57
57
  &::before {
58
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4LjcwOCIgaGVpZ2h0PSIxMy43NjgiIHZpZXdCb3g9IjAgMCA4LjcwOCAxMy43NjgiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMzEuNjQ2IC0xMzguOTM5KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzI4IDE0MikiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iIzAwOTFkYyIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzNDQgMTQ5LjY0Nikgcm90YXRlKDE4MCkiPjxwYXRoIGQ9Ik04LDEwLjcwNywzLjY0Niw2LjM1NGwuNzA4LS43MDhMOCw5LjI5M2wzLjY0Ni0zLjY0Ny43MDguNzA4WiIgZmlsbD0iI2EzYjJiYyIvPjwvZz48L2c+PC9zdmc+");
58
+ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2IiBmaWxsPSJub25lIj48cGF0aCBkPSJNOCAxMC43MDdMMy42NDYgNi4zNTRMNC4zNTQgNS42NDZMOCA5LjI5M0wxMS42NDYgNS42NDZMMTIuMzU0IDYuMzU0TDggMTAuNzA3WiIgZmlsbD0iIzAwOTFkYyIvPjwvc3ZnPg==");
59
59
  }
60
60
  }
61
61
  }
package/scss/_text-input.scss CHANGED
@@ -166,6 +166,66 @@ label.fwe-input-text {
166
166
  }
167
167
  }
168
168
 
169
+ // Invalid state: red border + show error text
170
+ &:has(input:user-invalid:not(:disabled)),
171
+ &.fwe-input-text--invalid {
172
+ .fwe-input-text-info {
173
+ display: none;
174
+ }
175
+
176
+ .fwe-input-text-invalid {
177
+ display: block;
178
+ }
179
+ }
180
+
181
+ // Validation icons: opt-in via .fwe-input-text--with-validation-icons
182
+ // Icons are suppressed when a custom icon is already present (.fwe-input-text-icon)
183
+ &.fwe-input-text--with-validation-icons {
184
+ &:has(input:user-valid:not(:disabled)),
185
+ &:has(input:user-invalid:not(:disabled)),
186
+ &.fwe-input-text--valid,
187
+ &.fwe-input-text--invalid {
188
+ &:not(.fwe-input-text-icon) {
189
+ input[type="text"],
190
+ input[type="email"],
191
+ input[type="password"],
192
+ input[type="number"],
193
+ input[type="date"],
194
+ input[type="time"],
195
+ input[type="datetime-local"] {
196
+ padding-right: 24px;
197
+ }
198
+
199
+ &::after {
200
+ content: "";
201
+ position: absolute;
202
+ bottom: 27px;
203
+ right: 0px;
204
+ width: 16px;
205
+ height: 16px;
206
+ background-repeat: no-repeat;
207
+ background-position: center center;
208
+ }
209
+ }
210
+ }
211
+
212
+ &:has(input:user-valid:not(:disabled)),
213
+ &.fwe-input-text--valid {
214
+ &:not(.fwe-input-text-icon)::after {
215
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='10' viewBox='0 0 13 10' fill='none'><path d='M4.207 9.621L0 5.414L1.414 4L4.207 6.793L11 0L12.414 1.414L4.207 9.621Z' fill='%230091DC'/></svg>");
216
+ background-size: 13px 13px;
217
+ }
218
+ }
219
+
220
+ &:has(input:user-invalid:not(:disabled)),
221
+ &.fwe-input-text--invalid {
222
+ &:not(.fwe-input-text-icon)::after {
223
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'><path d='M16.95 8.46405L15.536 7.05005L12 10.586L8.46405 7.05005L7.05005 8.46405L10.586 12L7.05005 15.536L8.46405 16.95L12 13.414L15.536 16.95L16.95 15.536L13.414 12L16.95 8.46405Z' fill='%23D50000'/></svg>");
224
+ background-size: 24px 24px;
225
+ }
226
+ }
227
+ }
228
+
169
229
  &.fwe-input-text-icon {
170
230
  .fwe-svg-icon,
171
231
  i {
package/scss/_variables.scss CHANGED
@@ -105,6 +105,7 @@ $badge-colors: () !default;
105
105
  $badge-colors: map.merge(
106
106
  (
107
107
  "caerul": $caerul,
108
+ "dark": $text,
108
109
  "green": $green,
109
110
  "yellow": $yellow,
110
111
  "orange": $orange,