@semcore/bulk-textarea 16.5.2-prerelease.0 → 16.6.0-prerelease.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 (15) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/lib/cjs/BulkTextarea.js +2 -5
  3. package/lib/cjs/BulkTextarea.js.map +1 -1
  4. package/lib/cjs/components/InputField/InputField.js +14 -17
  5. package/lib/cjs/components/InputField/InputField.js.map +1 -1
  6. package/lib/cjs/components/InputField/inputField.shadow.css +39 -19
  7. package/lib/es6/BulkTextarea.js +1 -4
  8. package/lib/es6/BulkTextarea.js.map +1 -1
  9. package/lib/es6/components/InputField/InputField.js +13 -16
  10. package/lib/es6/components/InputField/InputField.js.map +1 -1
  11. package/lib/es6/components/InputField/inputField.shadow.css +39 -19
  12. package/lib/esm/BulkTextarea.mjs +1 -6
  13. package/lib/esm/components/InputField/InputField.mjs +14 -19
  14. package/lib/esm/components/InputField/inputField.shadow.css +39 -19
  15. package/package.json +10 -10
package/lib/es6/components/InputField/inputField.shadow.css CHANGED
@@ -1,4 +1,4 @@
1
- SInputField > div {
1
+ SInputField>div {
2
2
  box-sizing: content-box;
3
3
  outline: none;
4
4
  border-radius: var(--intergalactic-control-rounded, 6px);
@@ -37,7 +37,7 @@ SInputField > div {
37
37
  }
38
38
  }
39
39
 
40
- > p {
40
+ >p {
41
41
  counter-increment: row;
42
42
  /*display: inline-block;*/
43
43
  margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
@@ -68,25 +68,29 @@ SInputField > div {
68
68
  }
69
69
 
70
70
  &:has(p:nth-child(n + 10)) {
71
- > p {
71
+ >p {
72
72
  padding-left: var(--intergalactic-spacing-6x, 24px);
73
73
  }
74
- > p:nth-child(-n + 9)::before {
74
+
75
+ >p:nth-child(-n + 9)::before {
75
76
  padding-left: var(--intergalactic-spacing-2x, 8px);
76
77
  }
77
78
  }
78
79
 
79
80
  &:has(p:nth-child(n + 100)) {
80
- > p {
81
+ >p {
81
82
  padding-left: var(--intergalactic-spacing-8x, 32px);
82
83
  }
83
- > p:nth-child(-n + 9)::before {
84
+
85
+ >p:nth-child(-n + 9)::before {
84
86
  padding-left: var(--intergalactic-spacing-4x, 16px);
85
87
  }
86
- > p:nth-child(n + 10)::before {
88
+
89
+ >p:nth-child(n + 10)::before {
87
90
  padding-left: var(--intergalactic-spacing-2x, 8px);
88
91
  }
89
- > p:nth-child(n + 100)::before {
92
+
93
+ >p:nth-child(n + 100)::before {
90
94
  padding-left: 0;
91
95
  }
92
96
  }
@@ -110,14 +114,14 @@ SInputField > div {
110
114
  }
111
115
  }
112
116
 
113
- SInputField[showErrors] > div[aria-invalid] > p[aria-invalid]:after {
117
+ SInputField[showErrors]>div[aria-invalid]>p[aria-invalid]:after {
114
118
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo= ");
115
119
  position: absolute;
116
120
  right: 0;
117
121
  top: var(--intergalactic-spacing-05x, 2px);
118
122
  }
119
123
 
120
- SInputField[size='m'] > div {
124
+ SInputField[size='m']>div {
121
125
  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
122
126
  font-size: var(--intergalactic-fs-200, 14px);
123
127
  line-height: var(--intergalactic-lh-200, 142%);
@@ -128,13 +132,14 @@ SInputField[size='m'] > div {
128
132
 
129
133
  &:empty {
130
134
  padding-left: var(--intergalactic-spacing-8x, 32px);
135
+
131
136
  &::before {
132
137
  left: var(--intergalactic-spacing-4x, 16px);
133
138
  }
134
139
  }
135
140
  }
136
141
 
137
- SInputField[size='l'] > div {
142
+ SInputField[size='l']>div {
138
143
  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
139
144
  font-size: var(--intergalactic-fs-300, 16px);
140
145
  line-height: var(--intergalactic-lh-300, 150%);
@@ -144,6 +149,7 @@ SInputField[size='l'] > div {
144
149
 
145
150
  &:empty {
146
151
  padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
152
+
147
153
  &::before {
148
154
  left: var(--intergalactic-spacing-4x, 16px);
149
155
  }
@@ -151,26 +157,39 @@ SInputField[size='l'] > div {
151
157
  }
152
158
 
153
159
 
154
- SInputField[state='normal']:not([disabled]) > div:focus {
160
+ SInputField[state='normal']:not([disabled])>div {
155
161
  &:focus {
156
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
157
162
  border-color: var(--intergalactic-border-info-active, #006dca);
163
+ @mixin focus-outline-mixin {
164
+ outline-offset: 0;
165
+ transition-property: outline-color, outline-width;
166
+ }
158
167
  }
159
168
  }
160
169
 
161
- SInputField[state='valid'] > div {
170
+ SInputField[state='valid']>div {
162
171
  border-color: var(--intergalactic-border-success-active, #007c65);
163
172
 
164
173
  &:focus {
165
- box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5));
174
+ border-color: var(--intergalactic-border-success-active, #007c65);
175
+ @mixin focus-outline-mixin {
176
+ outline-offset: 0;
177
+ transition-property: outline-color, outline-width;
178
+ }
179
+ outline-color: var(--intergalactic-keyboard-focus-valid-outline, #009f81);
166
180
  }
167
181
  }
168
182
 
169
- SInputField[state='invalid'] > div {
183
+ SInputField[state='invalid']>div {
170
184
  border-color: var(--intergalactic-border-critical-active, #d1002f);
171
185
 
172
186
  &:focus {
173
- box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
187
+ border-color: var(--intergalactic-border-critical-active, #d1002f);
188
+ @mixin focus-outline-mixin {
189
+ outline-offset: 0;
190
+ transition-property: outline-color, outline-width;
191
+ }
192
+ outline-color: var(--intergalactic-keyboard-focus-invalid-outline, #ff4953);
174
193
  }
175
194
 
176
195
  background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));
@@ -181,9 +200,10 @@ SInputField[state='invalid'] > div {
181
200
  background-repeat: repeat-y;
182
201
  }
183
202
 
184
- SInputField[readonly] > div {
203
+ SInputField[readonly]>div {
185
204
  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
186
205
  }
187
- SInputField[disabled] > div {
206
+
207
+ SInputField[disabled]>div {
188
208
  opacity: var(--intergalactic-disabled-opacity, 0.3);
189
209
  }
package/lib/esm/BulkTextarea.mjs CHANGED
@@ -1,8 +1,6 @@
1
1
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
2
2
  import _createClass from "@babel/runtime/helpers/esm/createClass";
3
- import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
4
- import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
5
- import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
3
+ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
6
4
  import _inherits from "@babel/runtime/helpers/esm/inherits";
7
5
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
8
6
  import { createComponent, lastInteraction, assignProps, Component } from "@semcore/core";
@@ -15,9 +13,6 @@ import { Counter } from "./components/Counter.mjs";
15
13
  import { ErrorsNavigation } from "./components/ErrorsNavigation.mjs";
16
14
  import { InputField } from "./components/InputField/InputField.mjs";
17
15
  import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
18
- function _callSuper(t, o, e) {
19
- return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
20
- }
21
16
  var BulkTextareaRoot = /* @__PURE__ */ function(_Component) {
22
17
  function BulkTextareaRoot2() {
23
18
  var _this;
package/lib/esm/components/InputField/InputField.mjs CHANGED
@@ -3,9 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
3
3
  import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
4
4
  import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
5
5
  import _createClass from "@babel/runtime/helpers/esm/createClass";
6
- import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
7
- import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
8
- import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
6
+ import _callSuper from "@babel/runtime/helpers/esm/callSuper";
9
7
  import _inherits from "@babel/runtime/helpers/esm/inherits";
10
8
  import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
11
9
  import { sstyled, assignProps, Component } from "@semcore/core";
@@ -15,30 +13,27 @@ import { Box } from "@semcore/flex-box";
15
13
  import Tooltip from "@semcore/tooltip";
16
14
  import DOMPurify from "dompurify";
17
15
  import React from "react";
18
- function _callSuper(t, o, e) {
19
- return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
20
- }
21
16
  /*!__reshadow-styles__:"./inputField.shadow.css"*/
22
17
  var style = (
23
18
  /*__reshadow_css_start__*/
24
19
  (sstyled.insert(
25
20
  /*__inner_css_start__*/
26
- '.___SInputField_130fp_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, #c4c7cf);border-style:solid;border-width:1px;overflow:auto;position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_130fp_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_130fp_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_130fp_gg_>div:nth-child(even)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_130fp_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_130fp_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_130fp_gg_>div>p:not(:empty)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px);position:absolute;left:0}.___SInputField_130fp_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_130fp_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_130fp_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_130fp_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_130fp_gg_.__showErrors_130fp_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_130fp_gg_._size_m_130fp_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_130fp)*20px);max-height:calc((var(--maxRows_130fp) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_130fp_gg_._size_m_130fp_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_130fp_gg_._size_l_130fp_gg_>div:empty::before,.___SInputField_130fp_gg_._size_m_130fp_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_130fp_gg_._size_l_130fp_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_130fp)*24px);max-height:calc((var(--maxRows_130fp) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_130fp_gg_._size_l_130fp_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_130fp_gg_._state_normal_130fp_gg_:not(.__disabled_130fp_gg_)>div:focus:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));border-color:var(--intergalactic-border-info-active, #006dca)}.___SInputField_130fp_gg_._state_valid_130fp_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_130fp_gg_._state_valid_130fp_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5))}.___SInputField_130fp_gg_._state_invalid_130fp_gg_>div{border-color:var(--intergalactic-border-critical-active, #d1002f);background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}.___SInputField_130fp_gg_._state_invalid_130fp_gg_>div:focus{box-shadow:var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5))}.___SInputField_130fp_gg_.__readonly_130fp_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_130fp_gg_.__disabled_130fp_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
21
+ '.___SInputField_12olf_gg_>div{box-sizing:content-box;outline:0;border-radius:var(--intergalactic-control-rounded, 6px);border-color:var(--intergalactic-border-primary, #c4c7cf);border-style:solid;border-width:1px;overflow:auto;position:relative;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);color:var(--intergalactic-text-primary, #191b23);word-wrap:break-word;word-break:break-word;font-family:inherit}.___SInputField_12olf_gg_>div:empty::before{content:"1. "attr(placeholder);color:var(--intergalactic-text-placeholder, #8a8e9b);position:absolute}.___SInputField_12olf_gg_>div:nth-child(even){color:red;counter-increment:row;margin-bottom:var(--intergalactic-spacing-1x, 4px);position:relative;word-break:break-all}.___SInputField_12olf_gg_>div:nth-child(even)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px)}.___SInputField_12olf_gg_>div>p{counter-increment:row;margin:0 0 var(--intergalactic-spacing-1x, 4px)0;position:relative;word-break:break-all;white-space:pre-wrap;padding:0 var(--intergalactic-spacing-5x, 20px)0 var(--intergalactic-spacing-4x, 16px)}.___SInputField_12olf_gg_>div>p:last-of-type{margin-bottom:0}.___SInputField_12olf_gg_>div>p:not(:empty)::before{content:counter(row)".";display:inline-block;white-space:nowrap;text-align:right;color:var(--intergalactic-text-secondary, #6c6e79);margin-right:var(--intergalactic-spacing-1x, 4px);position:absolute;left:0}.___SInputField_12olf_gg_>div>p[data-over-max-rows=true]{background-color:var(--intergalactic-bg-secondary-critical, #fff0f7)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+10))>p{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+10))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+100))>p{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+100))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+100))>p:nth-child(n+100)::before{padding-left:0}.___SInputField_12olf_gg_>div:has(p:nth-child(n+1000))>p{padding-left:calc(var(--intergalactic-spacing-10x, 40px) + var(--intergalactic-spacing-1x, 4px))}.___SInputField_12olf_gg_>div:has(p:nth-child(n+1000))>p:nth-child(-n+9)::before{padding-left:var(--intergalactic-spacing-6x, 24px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+10)::before{padding-left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+100)::before{padding-left:var(--intergalactic-spacing-2x, 8px)}.___SInputField_12olf_gg_>div:has(p:nth-child(n+1000))>p:nth-child(n+1000)::before{padding-left:0}.___SInputField_12olf_gg_.__showErrors_12olf_gg_>div[aria-invalid]>p[aria-invalid]:after{content:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo=\\ );position:absolute;right:0;top:var(--intergalactic-spacing-05x, 2px)}.___SInputField_12olf_gg_._size_m_12olf_gg_>div{padding:var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);min-height:calc(var(--minRows_12olf)*20px);max-height:calc((var(--maxRows_12olf) - 1)*(20px + var(--intergalactic-spacing-1x, 4px)) + 18px)}.___SInputField_12olf_gg_._size_m_12olf_gg_>div:empty{padding-left:var(--intergalactic-spacing-8x, 32px)}.___SInputField_12olf_gg_._size_l_12olf_gg_>div:empty::before,.___SInputField_12olf_gg_._size_m_12olf_gg_>div:empty::before{left:var(--intergalactic-spacing-4x, 16px)}.___SInputField_12olf_gg_._size_l_12olf_gg_>div{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%);min-height:calc(var(--minRows_12olf)*24px);max-height:calc((var(--maxRows_12olf) - 1)*(24px + var(--intergalactic-spacing-1x, 4px)) + 20px)}.___SInputField_12olf_gg_._size_l_12olf_gg_>div:empty{padding-left:calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px))}.___SInputField_12olf_gg_._state_normal_12olf_gg_:not(.__disabled_12olf_gg_)>div:focus{border-color:var(--intergalactic-border-info-active, #006dca);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width}.___SInputField_12olf_gg_._state_valid_12olf_gg_>div{border-color:var(--intergalactic-border-success-active, #007c65)}.___SInputField_12olf_gg_._state_valid_12olf_gg_>div:focus{border-color:var(--intergalactic-border-success-active, #007c65);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;outline-color:var(--intergalactic-keyboard-focus-valid-outline, #009f81)}.___SInputField_12olf_gg_._state_invalid_12olf_gg_>div{border-color:var(--intergalactic-border-critical-active, #d1002f);background-image:var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));background-size:6px 6px;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-bottom-left-radius:var(--intergalactic-control-rounded, 6px);border-top-left-radius:var(--intergalactic-control-rounded, 6px);background-repeat:repeat-y}.___SInputField_12olf_gg_._state_invalid_12olf_gg_>div:focus{border-color:var(--intergalactic-border-critical-active, #d1002f);outline-color:var(--intergalactic-keyboard-focus-outline, #008ff8);outline-style:solid;outline-width:2px;transition-duration:calc(var(--intergalactic-duration-extra-fast, 100)*1ms);transition-timing-function:ease-in-out;outline-offset:0;transition-property:outline-color,outline-width;outline-color:var(--intergalactic-keyboard-focus-invalid-outline, #ff4953)}.___SInputField_12olf_gg_.__readonly_12olf_gg_>div{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SInputField_12olf_gg_.__disabled_12olf_gg_>div{opacity:var(--intergalactic-disabled-opacity, 0.3)}',
27
22
  /*__inner_css_end__*/
28
- "130fp_gg_"
23
+ "12olf_gg_"
29
24
  ), /*__reshadow_css_end__*/
30
25
  {
31
- "__SInputField": "___SInputField_130fp_gg_",
32
- "_showErrors": "__showErrors_130fp_gg_",
33
- "_readonly": "__readonly_130fp_gg_",
34
- "_disabled": "__disabled_130fp_gg_",
35
- "_size_m": "_size_m_130fp_gg_",
36
- "--minRows": "--minRows_130fp",
37
- "--maxRows": "--maxRows_130fp",
38
- "_size_l": "_size_l_130fp_gg_",
39
- "_state_normal": "_state_normal_130fp_gg_",
40
- "_state_valid": "_state_valid_130fp_gg_",
41
- "_state_invalid": "_state_invalid_130fp_gg_"
26
+ "__SInputField": "___SInputField_12olf_gg_",
27
+ "_showErrors": "__showErrors_12olf_gg_",
28
+ "_readonly": "__readonly_12olf_gg_",
29
+ "_disabled": "__disabled_12olf_gg_",
30
+ "_size_m": "_size_m_12olf_gg_",
31
+ "--minRows": "--minRows_12olf",
32
+ "--maxRows": "--maxRows_12olf",
33
+ "_size_l": "_size_l_12olf_gg_",
34
+ "_state_normal": "_state_normal_12olf_gg_",
35
+ "_state_valid": "_state_valid_12olf_gg_",
36
+ "_state_invalid": "_state_invalid_12olf_gg_"
42
37
  })
43
38
  );
44
39
  var InputField = /* @__PURE__ */ function(_Component) {
package/lib/esm/components/InputField/inputField.shadow.css CHANGED
@@ -1,4 +1,4 @@
1
- SInputField > div {
1
+ SInputField>div {
2
2
  box-sizing: content-box;
3
3
  outline: none;
4
4
  border-radius: var(--intergalactic-control-rounded, 6px);
@@ -37,7 +37,7 @@ SInputField > div {
37
37
  }
38
38
  }
39
39
 
40
- > p {
40
+ >p {
41
41
  counter-increment: row;
42
42
  /*display: inline-block;*/
43
43
  margin: 0 0 var(--intergalactic-spacing-1x, 4px) 0;
@@ -68,25 +68,29 @@ SInputField > div {
68
68
  }
69
69
 
70
70
  &:has(p:nth-child(n + 10)) {
71
- > p {
71
+ >p {
72
72
  padding-left: var(--intergalactic-spacing-6x, 24px);
73
73
  }
74
- > p:nth-child(-n + 9)::before {
74
+
75
+ >p:nth-child(-n + 9)::before {
75
76
  padding-left: var(--intergalactic-spacing-2x, 8px);
76
77
  }
77
78
  }
78
79
 
79
80
  &:has(p:nth-child(n + 100)) {
80
- > p {
81
+ >p {
81
82
  padding-left: var(--intergalactic-spacing-8x, 32px);
82
83
  }
83
- > p:nth-child(-n + 9)::before {
84
+
85
+ >p:nth-child(-n + 9)::before {
84
86
  padding-left: var(--intergalactic-spacing-4x, 16px);
85
87
  }
86
- > p:nth-child(n + 10)::before {
88
+
89
+ >p:nth-child(n + 10)::before {
87
90
  padding-left: var(--intergalactic-spacing-2x, 8px);
88
91
  }
89
- > p:nth-child(n + 100)::before {
92
+
93
+ >p:nth-child(n + 100)::before {
90
94
  padding-left: 0;
91
95
  }
92
96
  }
@@ -110,14 +114,14 @@ SInputField > div {
110
114
  }
111
115
  }
112
116
 
113
- SInputField[showErrors] > div[aria-invalid] > p[aria-invalid]:after {
117
+ SInputField[showErrors]>div[aria-invalid]>p[aria-invalid]:after {
114
118
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZDEwMDJmIj48cGF0aCBkPSJNNyA2aDJ2NEg3VjZabTIgN3YtMkg3djJoMloiLz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTYuMTUyIDEuMTcyYy43MTktMS41NjMgMi45NzctMS41NjMgMy42OTYgMGw2LjA0MyAxMy4xNDFjLjM2My43OTEtLjIyNSAxLjY4Ny0xLjEwOSAxLjY4N0gxLjIxOGMtLjg4NCAwLTEuNDcyLS44OTYtMS4xMDktMS42ODdMNi4xNTIgMS4xNzJabTcuMzc0IDEyLjgzN0w4IDEuOTkgMi40NzQgMTQuMDFoMTEuMDUyWiIvPjwvc3ZnPgo= ");
115
119
  position: absolute;
116
120
  right: 0;
117
121
  top: var(--intergalactic-spacing-05x, 2px);
118
122
  }
119
123
 
120
- SInputField[size='m'] > div {
124
+ SInputField[size='m']>div {
121
125
  padding: var(--intergalactic-spacing-2x, 8px) var(--intergalactic-spacing-4x, 16px);
122
126
  font-size: var(--intergalactic-fs-200, 14px);
123
127
  line-height: var(--intergalactic-lh-200, 142%);
@@ -128,13 +132,14 @@ SInputField[size='m'] > div {
128
132
 
129
133
  &:empty {
130
134
  padding-left: var(--intergalactic-spacing-8x, 32px);
135
+
131
136
  &::before {
132
137
  left: var(--intergalactic-spacing-4x, 16px);
133
138
  }
134
139
  }
135
140
  }
136
141
 
137
- SInputField[size='l'] > div {
142
+ SInputField[size='l']>div {
138
143
  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-4x, 16px);
139
144
  font-size: var(--intergalactic-fs-300, 16px);
140
145
  line-height: var(--intergalactic-lh-300, 150%);
@@ -144,6 +149,7 @@ SInputField[size='l'] > div {
144
149
 
145
150
  &:empty {
146
151
  padding-left: calc(var(--intergalactic-spacing-8x, 32px) + var(--intergalactic-spacing-05x, 2px));
152
+
147
153
  &::before {
148
154
  left: var(--intergalactic-spacing-4x, 16px);
149
155
  }
@@ -151,26 +157,39 @@ SInputField[size='l'] > div {
151
157
  }
152
158
 
153
159
 
154
- SInputField[state='normal']:not([disabled]) > div:focus {
160
+ SInputField[state='normal']:not([disabled])>div {
155
161
  &:focus {
156
- box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
157
162
  border-color: var(--intergalactic-border-info-active, #006dca);
163
+ @mixin focus-outline-mixin {
164
+ outline-offset: 0;
165
+ transition-property: outline-color, outline-width;
166
+ }
158
167
  }
159
168
  }
160
169
 
161
- SInputField[state='valid'] > div {
170
+ SInputField[state='valid']>div {
162
171
  border-color: var(--intergalactic-border-success-active, #007c65);
163
172
 
164
173
  &:focus {
165
- box-shadow: var(--intergalactic-keyboard-focus-valid, 0px 0px 0px 3px rgba(0, 159, 129, 0.5));
174
+ border-color: var(--intergalactic-border-success-active, #007c65);
175
+ @mixin focus-outline-mixin {
176
+ outline-offset: 0;
177
+ transition-property: outline-color, outline-width;
178
+ }
179
+ outline-color: var(--intergalactic-keyboard-focus-valid-outline, #009f81);
166
180
  }
167
181
  }
168
182
 
169
- SInputField[state='invalid'] > div {
183
+ SInputField[state='invalid']>div {
170
184
  border-color: var(--intergalactic-border-critical-active, #d1002f);
171
185
 
172
186
  &:focus {
173
- box-shadow: var(--intergalactic-keyboard-focus-invalid, 0px 0px 0px 3px rgba(255, 73, 83, 0.5));
187
+ border-color: var(--intergalactic-border-critical-active, #d1002f);
188
+ @mixin focus-outline-mixin {
189
+ outline-offset: 0;
190
+ transition-property: outline-color, outline-width;
191
+ }
192
+ outline-color: var(--intergalactic-keyboard-focus-invalid-outline, #ff4953);
174
193
  }
175
194
 
176
195
  background-image: var(--intergalactic-border-critical-pattern, repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%));
@@ -181,9 +200,10 @@ SInputField[state='invalid'] > div {
181
200
  background-repeat: repeat-y;
182
201
  }
183
202
 
184
- SInputField[readonly] > div {
203
+ SInputField[readonly]>div {
185
204
  background-color: var(--intergalactic-bg-secondary-neutral, #f4f5f9);
186
205
  }
187
- SInputField[disabled] > div {
206
+
207
+ SInputField[disabled]>div {
188
208
  opacity: var(--intergalactic-disabled-opacity, 0.3);
189
209
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/bulk-textarea",
3
3
  "description": "Semrush BulkTextarea Component",
4
- "version": "16.5.2-prerelease.0",
4
+ "version": "16.6.0-prerelease.3",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,17 +14,17 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "16.0.10-prerelease.0",
18
- "@semcore/button": "16.0.10-prerelease.0",
19
- "@semcore/typography": "16.2.4-prerelease.0",
20
- "@semcore/counter": "16.0.10-prerelease.0",
21
- "@semcore/icon": "16.7.2-prerelease.0",
22
- "@semcore/popper": "16.0.10-prerelease.0",
23
- "@semcore/tooltip": "16.0.10-prerelease.0",
17
+ "@semcore/flex-box": "16.0.10-prerelease.3",
18
+ "@semcore/button": "16.0.10-prerelease.3",
19
+ "@semcore/typography": "16.3.0-prerelease.3",
20
+ "@semcore/counter": "16.0.10-prerelease.3",
21
+ "@semcore/icon": "16.5.1-prerelease.3",
22
+ "@semcore/popper": "16.0.10-prerelease.3",
23
+ "@semcore/tooltip": "16.0.10-prerelease.3",
24
24
  "dompurify": "3.2.3"
25
25
  },
26
26
  "peerDependencies": {
27
- "@semcore/base-components": "^16.3.0-prerelease.0"
27
+ "@semcore/base-components": "^16.4.0-prerelease.3"
28
28
  },
29
29
  "repository": {
30
30
  "type": "git",
@@ -33,7 +33,7 @@
33
33
  },
34
34
  "devDependencies": {
35
35
  "@types/dompurify": "3.2.0",
36
- "@semcore/core": "16.4.0-prerelease.0",
36
+ "@semcore/core": "16.5.0-prerelease.3",
37
37
  "@semcore/testing-utils": "1.0.0"
38
38
  },
39
39
  "scripts": {