@semcore/base-trigger 17.2.1-prerelease.9 → 18.0.0-prerelease.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 +6 -0
- package/lib/cjs/BaseTrigger.js +16 -17
- package/lib/cjs/BaseTrigger.js.map +1 -1
- package/lib/cjs/ButtonTrigger.js +4 -5
- package/lib/cjs/ButtonTrigger.js.map +1 -1
- package/lib/cjs/FilterTrigger.js +15 -10
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/style/base-trigger.shadow.css +24 -54
- package/lib/cjs/style/button-trigger.shadow.css +6 -3
- package/lib/cjs/style/filter-trigger.shadow.css +87 -9
- package/lib/es6/BaseTrigger.js +16 -17
- package/lib/es6/BaseTrigger.js.map +1 -1
- package/lib/es6/ButtonTrigger.js +4 -5
- package/lib/es6/ButtonTrigger.js.map +1 -1
- package/lib/es6/FilterTrigger.js +16 -11
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/style/base-trigger.shadow.css +24 -54
- package/lib/es6/style/button-trigger.shadow.css +6 -3
- package/lib/es6/style/filter-trigger.shadow.css +87 -9
- package/lib/esm/BaseTrigger.mjs +17 -18
- package/lib/esm/ButtonTrigger.mjs +5 -6
- package/lib/esm/FilterTrigger.mjs +17 -12
- package/lib/esm/style/base-trigger.shadow.css +24 -54
- package/lib/esm/style/button-trigger.shadow.css +6 -3
- package/lib/esm/style/filter-trigger.shadow.css +87 -9
- package/package.json +12 -12
package/lib/esm/BaseTrigger.mjs
CHANGED
|
@@ -11,27 +11,26 @@ const style = (
|
|
|
11
11
|
/*__reshadow_css_start__*/
|
|
12
12
|
(sstyled.insert(
|
|
13
13
|
/*__inner_css_start__*/
|
|
14
|
-
".
|
|
14
|
+
".___SBaseTrigger_1hynq_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-sizing:border-box;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-control-select-trigger-normal,oklch(1 0 0));font-weight:var(--intergalactic-regular,400);border:1px solid var(--intergalactic-border-primary,#000c0829);color:var(--intergalactic-text-primary,oklch(.1 .03 137/.899));border-radius:var(--intergalactic-control-rounded,6px);padding:0 var(--intergalactic-spacing-content-padding-medium,12px)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_{border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SBaseTrigger_1hynq_gg_::-moz-focus-inner{border:none;padding:0}.___SBaseTrigger_1hynq_gg_:active{-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SBaseTrigger_1hynq_gg_:hover{-webkit-text-decoration:none;text-decoration:none}}.___SBaseTrigger_1hynq_gg_:focus-visible{border:1px solid var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}@media (hover:hover){.___SBaseTrigger_1hynq_gg_:hover{background-color:var(--intergalactic-control-select-trigger-hover,oklch(.97 .001 180))}}.___SBaseTrigger_1hynq_gg_.__active_1hynq_gg_,.___SBaseTrigger_1hynq_gg_:active{border-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}@media (hover:hover){.___SBaseTrigger_1hynq_gg_.__active_1hynq_gg_:hover,.___SBaseTrigger_1hynq_gg_:active:hover{background:var(--intergalactic-control-select-trigger-normal,oklch(1 0 0))}}.___SBaseTrigger_1hynq_gg_.__disabled_1hynq_gg_{opacity:var(--intergalactic-disabled-opacity,.4);cursor:default;pointer-events:none}.___SInner_1hynq_gg_{display:inline-flex;align-items:center;justify-content:center;gap:var(--intergalactic-spacing-content-gap-medium,6px);height:100%;width:100%}.___SText_1hynq_gg_{display:inline;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex-grow:1;text-align:left}.___SAddon_1hynq_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;pointer-events:none}.___SAddon_1hynq_gg_:only-child{margin-left:calc(var(--intergalactic-spacing-content-gap-small, 4px)*-1);margin-right:calc(var(--intergalactic-spacing-content-gap-small, 4px)*-1)}.___SBaseTrigger_1hynq_gg_._size_m_1hynq_gg_{min-width:var(--intergalactic-form-control-m,32px);height:var(--intergalactic-form-control-m,32px);font-size:var(--intergalactic-fs-200,14px);line-height:var(--intergalactic-lh-200,1.4286)}.___SBaseTrigger_1hynq_gg_._size_l_1hynq_gg_{min-width:var(--intergalactic-form-control-l,44px);height:var(--intergalactic-form-control-l,44px);font-size:var(--intergalactic-fs-300,16px);line-height:var(--intergalactic-lh-300,1.5)}.___SBaseTrigger_1hynq_gg_._neighborLocation_right_1hynq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_1hynq_gg_._neighborLocation_both_1hynq_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_1hynq_gg_._neighborLocation_left_1hynq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SBaseTrigger_1hynq_gg_._neighborLocation_left_1hynq_gg_.__disabled_1hynq_gg_{border-left:none;margin-left:0}.___SText_1hynq_gg_.__display-placeholder_1hynq_gg_{color:var(--intergalactic-text-placeholder,#00060356)}@media (color-gamut:p3){.___SText_1hynq_gg_.__display-placeholder_1hynq_gg_{color:var(--intergalactic-text-placeholder,oklch(.109 .023 165.5/.337))}}.___SBaseTrigger_1hynq_gg_._state_valid_1hynq_gg_{border-color:var(--intergalactic-border-success-active,#00b991)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_._state_valid_1hynq_gg_{border-color:var(--intergalactic-border-success-active,oklch(.7 .166 170))}}.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_{border-color:var(--intergalactic-border-critical-active,#ff6364)}@media (color-gamut:p3){.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_{border-color:var(--intergalactic-border-critical-active,oklch(.7 .21 23))}}.___SBaseTrigger_1hynq_gg_._state_invalid_1hynq_gg_:focus-visible{outline-color:var(--intergalactic-keyboard-focus-invalid-outline,oklch(.628 .257 28.9/.652))}.___SInvalidPattern_1hynq_gg_._size_l_1hynq_gg_,.___SInvalidPattern_1hynq_gg_._size_m_1hynq_gg_{margin-left:calc(var(--intergalactic-spacing-content-padding-medium, 12px)*-1)}",
|
|
15
15
|
/*__inner_css_end__*/
|
|
16
|
-
"
|
|
16
|
+
"1hynq_gg_"
|
|
17
17
|
), /*__reshadow_css_end__*/
|
|
18
18
|
{
|
|
19
|
-
"__SBaseTrigger": "
|
|
20
|
-
"_disabled": "
|
|
21
|
-
"__SInner": "
|
|
22
|
-
"__SText": "
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"_neighborLocation_right": "
|
|
26
|
-
"_neighborLocation_both": "
|
|
27
|
-
"_display-placeholder": "__display-
|
|
28
|
-
"_state_valid": "
|
|
29
|
-
"__SInvalidPattern": "
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"_state_invalid": "_state_invalid_9qkze_gg_"
|
|
19
|
+
"__SBaseTrigger": "___SBaseTrigger_1hynq_gg_",
|
|
20
|
+
"_disabled": "__disabled_1hynq_gg_",
|
|
21
|
+
"__SInner": "___SInner_1hynq_gg_",
|
|
22
|
+
"__SText": "___SText_1hynq_gg_",
|
|
23
|
+
"_size_m": "_size_m_1hynq_gg_",
|
|
24
|
+
"_size_l": "_size_l_1hynq_gg_",
|
|
25
|
+
"_neighborLocation_right": "_neighborLocation_right_1hynq_gg_",
|
|
26
|
+
"_neighborLocation_both": "_neighborLocation_both_1hynq_gg_",
|
|
27
|
+
"_display-placeholder": "__display-placeholder_1hynq_gg_",
|
|
28
|
+
"_state_valid": "_state_valid_1hynq_gg_",
|
|
29
|
+
"__SInvalidPattern": "___SInvalidPattern_1hynq_gg_",
|
|
30
|
+
"_active": "__active_1hynq_gg_",
|
|
31
|
+
"__SAddon": "___SAddon_1hynq_gg_",
|
|
32
|
+
"_neighborLocation_left": "_neighborLocation_left_1hynq_gg_",
|
|
33
|
+
"_state_invalid": "_state_invalid_1hynq_gg_"
|
|
35
34
|
})
|
|
36
35
|
);
|
|
37
36
|
class RootBaseTrigger extends Component {
|
|
@@ -12,13 +12,13 @@ const style = (
|
|
|
12
12
|
/*__reshadow_css_start__*/
|
|
13
13
|
(sstyled.insert(
|
|
14
14
|
/*__inner_css_start__*/
|
|
15
|
-
".
|
|
15
|
+
".___SButtonAddon_1qcck_gg_{width:var(--intergalactic-spacing-3x,12px);height:var(--intergalactic-spacing-3x,12px);color:var(--intergalactic-icon-non-interactive,#00040180);position:relative;left:var(--intergalactic-spacing-05x,2px)}@media (color-gamut:p3){.___SButtonAddon_1qcck_gg_{color:var(--intergalactic-icon-non-interactive,oklch(.094 .024 153.9/.503))}}.___SButtonTriggerSpin_1qcck_gg_{fill:var(--intergalactic-icon-non-interactive,#00040180)}@media (color-gamut:p3){.___SButtonTriggerSpin_1qcck_gg_{fill:var(--intergalactic-icon-non-interactive,oklch(.094 .024 153.9/.503))}}",
|
|
16
16
|
/*__inner_css_end__*/
|
|
17
|
-
"
|
|
17
|
+
"1qcck_gg_"
|
|
18
18
|
), /*__reshadow_css_end__*/
|
|
19
19
|
{
|
|
20
|
-
"__SButtonAddon": "
|
|
21
|
-
"__SButtonTriggerSpin": "
|
|
20
|
+
"__SButtonAddon": "___SButtonAddon_1qcck_gg_",
|
|
21
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1qcck_gg_"
|
|
22
22
|
})
|
|
23
23
|
);
|
|
24
24
|
class RootButtonTrigger extends Component {
|
|
@@ -47,8 +47,7 @@ class RootButtonTrigger extends Component {
|
|
|
47
47
|
return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(BaseTrigger, assignProps({
|
|
48
48
|
"use:disabled": disabled || loading
|
|
49
49
|
}, _ref), addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon, empty), (chevron || loading) && /* @__PURE__ */ React.createElement(SButtonAddon, _ref2.cn("SButtonAddon", {}), loading ? /* @__PURE__ */ React.createElement(SButtonTriggerSpin, _ref2.cn("SButtonTriggerSpin", {
|
|
50
|
-
"size": "xs"
|
|
51
|
-
"theme": false
|
|
50
|
+
"size": "xs"
|
|
52
51
|
})) : /* @__PURE__ */ React.createElement(ChevronDown, _ref2.cn("ChevronDown", {}))));
|
|
53
52
|
}
|
|
54
53
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import { sstyled, Component, assignProps, createComponent } from "@semcore/core";
|
|
3
|
-
import { Box,
|
|
3
|
+
import { Box, Hint, ScreenReaderOnly } from "@semcore/base-components";
|
|
4
4
|
import addonTextChildren from "@semcore/core/lib/utils/addonTextChildren";
|
|
5
5
|
import { callAllEventHandlers } from "@semcore/core/lib/utils/assignProps";
|
|
6
6
|
import animatedSizeEnhance from "@semcore/core/lib/utils/enhances/animatedSizeEnhance";
|
|
@@ -21,15 +21,20 @@ const style = (
|
|
|
21
21
|
/*__reshadow_css_start__*/
|
|
22
22
|
(sstyled.insert(
|
|
23
23
|
/*__inner_css_start__*/
|
|
24
|
-
|
|
24
|
+
'.___STrigger_3xqvi_gg_{position:relative}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_){border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);width:1px;background-color:var(--intergalactic-border-primary,#000c0829);transition:height calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-out}@media (color-gamut:p3){.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{background-color:var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_m_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:16px}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_l_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:24px}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_.__active_3xqvi_gg_:not(.__empty_3xqvi_gg_):before,.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_:not(.__empty_3xqvi_gg_):active:before{height:calc(100% - 2px)}.___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_.__disabled_3xqvi_gg_:not(.__empty_3xqvi_gg_){opacity:1}.___SClear_3xqvi_gg_{border-top-left-radius:0;border-bottom-left-radius:0}.___SClear_3xqvi_gg_.__disabled_3xqvi_gg_{opacity:1}@media (hover:hover){.___SWrapper_3xqvi_gg_:hover:not(:has(.__disabled_3xqvi_gg_)) .___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_l_3xqvi_gg_:not(.__empty_3xqvi_gg_):before,.___SWrapper_3xqvi_gg_:hover:not(:has(.__disabled_3xqvi_gg_)) .___STrigger_3xqvi_gg_._role_combobox_3xqvi_gg_._size_m_3xqvi_gg_:not(.__empty_3xqvi_gg_):before{height:calc(100% - 2px)}}.___SWrapper_3xqvi_gg_{display:inline-flex;position:relative;border-radius:var(--intergalactic-control-rounded,6px)}.___SWrapper_3xqvi_gg_:after{content:"";position:absolute;border:1px solid var(--intergalactic-border-primary,#000c0829);border-radius:var(--intergalactic-control-rounded,6px);top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none}@media (color-gamut:p3){.___SWrapper_3xqvi_gg_:after{border:1px solid var(--intergalactic-border-primary,oklch(.137 .026 175.7/.161))}}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible){background-color:var(--intergalactic-control-select-trigger-active,oklch(.96 .001 180))}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_ .___STrigger_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active .___STrigger_3xqvi_gg_,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible) .___STrigger_3xqvi_gg_{background:var(--intergalactic-control-select-trigger-normal,oklch(1 0 0))}.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_.__active_3xqvi_gg_:after,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:active:after,.___SWrapper_3xqvi_gg_.__empty_3xqvi_gg_:has(.___STrigger_3xqvi_gg_:focus-visible):after{border-color:var(--intergalactic-border-info-active,oklch(.7 .131 275.2))}.___SWrapper_3xqvi_gg_:focus{outline:none}.___SWrapper_3xqvi_gg_.__disabled_3xqvi_gg_{opacity:var(--intergalactic-disabled-opacity,.4)}.___SWrapper_3xqvi_gg_ :is(.___SClear_3xqvi_gg_,.___STrigger_3xqvi_gg_){border:none}.___SWrapper_3xqvi_gg_ :is(.___SClear_3xqvi_gg_.__active_3xqvi_gg_,.___SClear_3xqvi_gg_:active,.___STrigger_3xqvi_gg_.__active_3xqvi_gg_,.___STrigger_3xqvi_gg_:active){background-color:var(--intergalactic-control-select-trigger-active,oklch(.96 .001 180))}',
|
|
25
25
|
/*__inner_css_end__*/
|
|
26
|
-
"
|
|
26
|
+
"3xqvi_gg_"
|
|
27
27
|
), /*__reshadow_css_end__*/
|
|
28
28
|
{
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
29
|
+
"__STrigger": "___STrigger_3xqvi_gg_",
|
|
30
|
+
"_role_combobox": "_role_combobox_3xqvi_gg_",
|
|
31
|
+
"_empty": "__empty_3xqvi_gg_",
|
|
32
|
+
"_size_m": "_size_m_3xqvi_gg_",
|
|
33
|
+
"_size_l": "_size_l_3xqvi_gg_",
|
|
34
|
+
"_active": "__active_3xqvi_gg_",
|
|
35
|
+
"_disabled": "__disabled_3xqvi_gg_",
|
|
36
|
+
"__SClear": "___SClear_3xqvi_gg_",
|
|
37
|
+
"__SWrapper": "___SWrapper_3xqvi_gg_"
|
|
33
38
|
})
|
|
34
39
|
);
|
|
35
40
|
const filterTriggerInputProps = [...inputProps, "aria-controls", "aria-haspopup", "aria-expanded", "aria-disabled", "aria-activedescendant", "aria-label", "aria-labelledby", "role"];
|
|
@@ -122,7 +127,7 @@ class RootFilterTrigger extends Component {
|
|
|
122
127
|
"use:aria-label": void 0,
|
|
123
128
|
"use:aria-labelledby": void 0
|
|
124
129
|
}, _ref)
|
|
125
|
-
}),
|
|
130
|
+
}), advancedMode ? /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {})) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FilterTrigger.TriggerButton, null, /* @__PURE__ */ React.createElement(Children, _ref5.cn("Children", {}))), !empty && /* @__PURE__ */ React.createElement(FilterTrigger.ClearButton, null)));
|
|
126
131
|
}
|
|
127
132
|
}
|
|
128
133
|
_defineProperty(RootFilterTrigger, "displayName", "FilterTrigger");
|
|
@@ -146,14 +151,14 @@ _defineProperty(RootFilterTrigger, "defaultProps", () => ({
|
|
|
146
151
|
class TriggerButton extends Component {
|
|
147
152
|
render() {
|
|
148
153
|
var _ref2 = this.asProps, _ref6;
|
|
149
|
-
const
|
|
154
|
+
const STrigger = BaseTrigger;
|
|
150
155
|
const {
|
|
151
156
|
Children,
|
|
152
157
|
styles,
|
|
153
158
|
empty,
|
|
154
159
|
triggerRef
|
|
155
160
|
} = this.asProps;
|
|
156
|
-
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(
|
|
161
|
+
return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(STrigger, _ref6.cn("STrigger", {
|
|
157
162
|
...assignProps({
|
|
158
163
|
"use:role": "combobox",
|
|
159
164
|
"w": "100%",
|
|
@@ -176,7 +181,7 @@ class ClearButton extends Component {
|
|
|
176
181
|
}
|
|
177
182
|
render() {
|
|
178
183
|
var _ref3 = this.asProps, _ref7;
|
|
179
|
-
const
|
|
184
|
+
const SClear = BaseTrigger;
|
|
180
185
|
const {
|
|
181
186
|
styles,
|
|
182
187
|
empty,
|
|
@@ -187,7 +192,7 @@ class ClearButton extends Component {
|
|
|
187
192
|
title
|
|
188
193
|
} = this.asProps;
|
|
189
194
|
if (empty) return null;
|
|
190
|
-
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
195
|
+
return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SClear, _ref7.cn("SClear", {
|
|
191
196
|
...assignProps({
|
|
192
197
|
"ref": this.triggerRef,
|
|
193
198
|
"size": size,
|
|
@@ -8,7 +8,6 @@ SBaseTrigger {
|
|
|
8
8
|
white-space: nowrap;
|
|
9
9
|
user-select: none;
|
|
10
10
|
box-sizing: border-box;
|
|
11
|
-
padding: 0;
|
|
12
11
|
margin: 0;
|
|
13
12
|
box-shadow: none;
|
|
14
13
|
text-decoration: none;
|
|
@@ -19,12 +18,15 @@ SBaseTrigger {
|
|
|
19
18
|
font-family: inherit;
|
|
20
19
|
cursor: pointer;
|
|
21
20
|
|
|
22
|
-
background: var(--intergalactic-
|
|
21
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
23
22
|
|
|
24
23
|
font-weight: var(--intergalactic-regular, 400);
|
|
25
24
|
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
26
25
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
27
26
|
|
|
27
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
28
|
+
padding: 0 var(--intergalactic-spacing-content-padding-medium, 12px);
|
|
29
|
+
|
|
28
30
|
&::-moz-focus-inner {
|
|
29
31
|
border: none;
|
|
30
32
|
padding: 0;
|
|
@@ -40,13 +42,17 @@ SBaseTrigger {
|
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&:hover {
|
|
43
|
-
background-color: var(--intergalactic-
|
|
45
|
+
background-color: var(--intergalactic-control-select-trigger-hover, oklch(0.97 0.001 180));
|
|
44
46
|
}
|
|
45
47
|
|
|
46
48
|
&:active,
|
|
47
49
|
&[active] {
|
|
48
50
|
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
49
|
-
|
|
51
|
+
|
|
52
|
+
&:hover {
|
|
53
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
54
|
+
}
|
|
55
|
+
/*background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));*/
|
|
50
56
|
}
|
|
51
57
|
}
|
|
52
58
|
|
|
@@ -61,6 +67,7 @@ SInner {
|
|
|
61
67
|
display: inline-flex;
|
|
62
68
|
align-items: center;
|
|
63
69
|
justify-content: center;
|
|
70
|
+
gap: var(--intergalactic-spacing-content-gap-medium, 6px);
|
|
64
71
|
height: 100%;
|
|
65
72
|
width: 100%;
|
|
66
73
|
}
|
|
@@ -68,11 +75,9 @@ SInner {
|
|
|
68
75
|
SText {
|
|
69
76
|
display: inline;
|
|
70
77
|
/* disable-tokens-validator */
|
|
71
|
-
padding: 1px 0;
|
|
72
78
|
overflow: hidden;
|
|
73
79
|
white-space: nowrap;
|
|
74
80
|
text-overflow: ellipsis;
|
|
75
|
-
line-height: var(--intergalactic-lh-200, 142%);
|
|
76
81
|
flex-grow: 1;
|
|
77
82
|
text-align: left;
|
|
78
83
|
}
|
|
@@ -83,57 +88,25 @@ SAddon {
|
|
|
83
88
|
justify-content: center;
|
|
84
89
|
flex-shrink: 0;
|
|
85
90
|
pointer-events: none;
|
|
86
|
-
}
|
|
87
91
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
92
|
+
&:only-child {
|
|
93
|
+
margin-left: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
|
|
94
|
+
margin-right: calc(-1 * var(--intergalactic-spacing-content-gap-small, 4px));
|
|
95
|
+
}
|
|
91
96
|
}
|
|
92
97
|
|
|
93
98
|
SBaseTrigger[size='m'] {
|
|
94
|
-
min-width:
|
|
95
|
-
height:
|
|
96
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
97
|
-
padding: 0 var(--intergalactic-spacing-2x, 8px);
|
|
99
|
+
min-width: var(--intergalactic-form-control-m, 32px);
|
|
100
|
+
height: var(--intergalactic-form-control-m, 32px);
|
|
98
101
|
font-size: var(--intergalactic-fs-200, 14px);
|
|
99
|
-
|
|
100
|
-
& SAddon {
|
|
101
|
-
&:not(:only-child):first-child {
|
|
102
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:not(:only-child):last-child {
|
|
106
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:only-child {
|
|
110
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
111
|
-
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
112
|
-
}
|
|
113
|
-
}
|
|
102
|
+
line-height: var(--intergalactic-lh-200, 1.4286);
|
|
114
103
|
}
|
|
115
104
|
|
|
116
105
|
SBaseTrigger[size='l'] {
|
|
117
|
-
min-width:
|
|
118
|
-
height:
|
|
119
|
-
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
120
|
-
padding: 0 var(--intergalactic-spacing-3x, 12px);
|
|
106
|
+
min-width: var(--intergalactic-form-control-l, 44px);
|
|
107
|
+
height: var(--intergalactic-form-control-l, 44px);
|
|
121
108
|
font-size: var(--intergalactic-fs-300, 16px);
|
|
122
|
-
|
|
123
|
-
& SAddon {
|
|
124
|
-
&:not(:only-child):first-child {
|
|
125
|
-
margin-right: var(--intergalactic-spacing-2x, 8px);
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&:not(:only-child):last-child {
|
|
129
|
-
margin-left: var(--intergalactic-spacing-2x, 8px);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
&:only-child {
|
|
133
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
134
|
-
margin-right: calc(-1 * var(--intergalactic-spacing-1x, 4px));
|
|
135
|
-
}
|
|
136
|
-
}
|
|
109
|
+
line-height: var(--intergalactic-lh-300, 1.5);
|
|
137
110
|
}
|
|
138
111
|
|
|
139
112
|
SBaseTrigger[neighborLocation='right'] {
|
|
@@ -160,7 +133,7 @@ SBaseTrigger[neighborLocation='left'] {
|
|
|
160
133
|
}
|
|
161
134
|
|
|
162
135
|
SText[display-placeholder] {
|
|
163
|
-
color: var(--intergalactic-text-placeholder, oklch(0.
|
|
136
|
+
color: var(--intergalactic-text-placeholder, oklch(0.109 0.023 165.5 / 0.337));
|
|
164
137
|
}
|
|
165
138
|
|
|
166
139
|
SBaseTrigger[state='valid'] {
|
|
@@ -175,10 +148,7 @@ SBaseTrigger[state='invalid'] {
|
|
|
175
148
|
}
|
|
176
149
|
}
|
|
177
150
|
|
|
178
|
-
SInvalidPattern[size='m']
|
|
179
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-2x, 8px));
|
|
180
|
-
}
|
|
181
|
-
|
|
151
|
+
SInvalidPattern[size='m'],
|
|
182
152
|
SInvalidPattern[size='l'] {
|
|
183
|
-
margin-left: calc(-1 * var(--intergalactic-spacing-
|
|
153
|
+
margin-left: calc(-1 * var(--intergalactic-spacing-content-padding-medium, 12px));
|
|
184
154
|
}
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
SButtonAddon {
|
|
2
|
-
width: 12px;
|
|
3
|
-
height: 12px;
|
|
2
|
+
width: var(--intergalactic-spacing-3x, 12px);
|
|
3
|
+
height: var(--intergalactic-spacing-3x, 12px);
|
|
4
|
+
color: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
|
|
5
|
+
position: relative;
|
|
6
|
+
left: var(--intergalactic-spacing-05x, 2px);
|
|
4
7
|
}
|
|
5
8
|
|
|
6
9
|
SButtonTriggerSpin {
|
|
7
|
-
fill: var(--intergalactic-icon-
|
|
10
|
+
fill: var(--intergalactic-icon-non-interactive, oklch(0.094 0.024 153.9 / 0.503));
|
|
8
11
|
}
|
|
@@ -1,22 +1,100 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
background-color: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
4
|
-
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
1
|
+
STrigger {
|
|
2
|
+
position: relative;
|
|
5
3
|
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
&[role="combobox"]:not([empty]) {
|
|
5
|
+
border-right: none;
|
|
6
|
+
border-top-right-radius: 0;
|
|
7
|
+
border-bottom-right-radius: 0;
|
|
8
|
+
|
|
9
|
+
&::before {
|
|
10
|
+
content: '';
|
|
11
|
+
position: absolute;
|
|
12
|
+
right: 0;
|
|
13
|
+
top: 50%;
|
|
14
|
+
transform: translateY(-50%);
|
|
15
|
+
width: 1px;
|
|
16
|
+
background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
17
|
+
transition: height calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-out;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&[size='m']::before {
|
|
21
|
+
height: 16px;
|
|
22
|
+
}
|
|
23
|
+
&[size='l']::before {
|
|
24
|
+
height: 24px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&[active], &:active {
|
|
28
|
+
&::before {
|
|
29
|
+
height: calc(100% - 2px);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
&[disabled] {
|
|
34
|
+
opacity: 1;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
SClear {
|
|
40
|
+
border-top-left-radius: 0;
|
|
41
|
+
border-bottom-left-radius: 0;
|
|
42
|
+
|
|
43
|
+
&[disabled] {
|
|
44
|
+
opacity: 1;
|
|
8
45
|
}
|
|
46
|
+
}
|
|
9
47
|
|
|
10
|
-
|
|
11
|
-
&[
|
|
12
|
-
|
|
48
|
+
SWrapper:hover:not(:has([disabled])) STrigger[role="combobox"]:not([empty]) {
|
|
49
|
+
&[size='m']::before,
|
|
50
|
+
&[size='l']::before {
|
|
51
|
+
height: calc(100% - 2px);
|
|
13
52
|
}
|
|
14
53
|
}
|
|
15
54
|
|
|
16
55
|
SWrapper {
|
|
17
56
|
display: inline-flex;
|
|
57
|
+
position: relative;
|
|
58
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
59
|
+
|
|
60
|
+
&::after {
|
|
61
|
+
content: '';
|
|
62
|
+
position: absolute;
|
|
63
|
+
border: 1px solid var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161));
|
|
64
|
+
border-radius: var(--intergalactic-control-rounded, 6px);
|
|
65
|
+
inset: 0;
|
|
66
|
+
z-index: 1;
|
|
67
|
+
pointer-events: none;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&[empty]:active,
|
|
71
|
+
&[empty][active],
|
|
72
|
+
&[empty]:has(STrigger:focus-visible) {
|
|
73
|
+
background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));
|
|
74
|
+
|
|
75
|
+
STrigger {
|
|
76
|
+
background: var(--intergalactic-control-select-trigger-normal, oklch(1 0 0));
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&::after {
|
|
80
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2));
|
|
81
|
+
}
|
|
82
|
+
}
|
|
18
83
|
|
|
19
84
|
&:focus {
|
|
20
85
|
outline: none;
|
|
21
86
|
}
|
|
87
|
+
|
|
88
|
+
&[disabled] {
|
|
89
|
+
opacity: var(--intergalactic-disabled-opacity, 0.4);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
STrigger,
|
|
93
|
+
SClear {
|
|
94
|
+
border: none;
|
|
95
|
+
|
|
96
|
+
&[active], &:active {
|
|
97
|
+
background-color: var(--intergalactic-control-select-trigger-active, oklch(0.96 0.001 180));
|
|
98
|
+
}
|
|
99
|
+
}
|
|
22
100
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/base-trigger",
|
|
3
3
|
"description": "Semrush BaseTrigger Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "18.0.0-prerelease.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,15 +14,15 @@
|
|
|
14
14
|
"require": "./lib/cjs/index.js"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@semcore/counter": "^
|
|
18
|
-
"@semcore/spin": "^
|
|
19
|
-
"@semcore/tooltip": "^
|
|
20
|
-
"@semcore/typography": "^
|
|
21
|
-
"@semcore/button": "^
|
|
17
|
+
"@semcore/counter": "^18.0.0-prerelease.0",
|
|
18
|
+
"@semcore/spin": "^18.0.0-prerelease.0",
|
|
19
|
+
"@semcore/tooltip": "^18.0.0-prerelease.0",
|
|
20
|
+
"@semcore/typography": "^18.0.0-prerelease.0",
|
|
21
|
+
"@semcore/button": "^18.0.0-prerelease.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@semcore/base-components": "^
|
|
25
|
-
"@semcore/icon": "^
|
|
24
|
+
"@semcore/base-components": "^18.0.0-prerelease.0",
|
|
25
|
+
"@semcore/icon": "^18.0.0-prerelease.0"
|
|
26
26
|
},
|
|
27
27
|
"repository": {
|
|
28
28
|
"type": "git",
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"directory": "semcore/base-trigger"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
|
-
"@semcore/core": "
|
|
34
|
-
"@semcore/
|
|
35
|
-
"@semcore/base-components": "17.2.2-prerelease.9",
|
|
33
|
+
"@semcore/core": "18.0.0-prerelease.0",
|
|
34
|
+
"@semcore/base-components": "18.0.0-prerelease.0",
|
|
36
35
|
"@semcore/testing-utils": "1.0.0",
|
|
37
|
-
"@semcore/
|
|
36
|
+
"@semcore/tooltip": "18.0.0-prerelease.0",
|
|
37
|
+
"@semcore/icon": "18.0.0-prerelease.0"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
40
40
|
"build": "pnpm semcore-builder --source=js && pnpm vite build"
|