@semcore/pills 5.44.0-prerelease.0 → 5.44.0-prerelease.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.
- package/lib/cjs/Pills.js +93 -63
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.d.js +2 -0
- package/lib/cjs/index.d.js.map +1 -0
- package/lib/cjs/index.js +5 -14
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +20 -14
- package/lib/es6/Pills.js +81 -55
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.d.js +2 -0
- package/lib/es6/index.d.js.map +1 -0
- package/lib/es6/index.js +2 -2
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +20 -14
- package/lib/esm/Pills.mjs +88 -61
- package/lib/esm/index.mjs +0 -1
- package/lib/esm/style/pills.shadow.css +20 -14
- package/lib/types/index.d.ts +105 -2
- package/package.json +5 -5
- package/lib/cjs/Pills.type.js +0 -2
- package/lib/cjs/Pills.type.js.map +0 -1
- package/lib/es6/Pills.type.js +0 -2
- package/lib/es6/Pills.type.js.map +0 -1
- package/lib/esm/Pills.type.mjs +0 -1
- package/lib/types/Pills.d.ts +0 -6
- package/lib/types/Pills.type.d.ts +0 -74
package/lib/cjs/Pills.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
@@ -8,62 +9,98 @@ exports.wrapPills = exports["default"] = void 0;
|
|
|
8
9
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
10
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
11
|
-
var
|
|
12
|
+
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
12
13
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
|
13
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var _addonTextChildren = _interopRequireDefault(require("@semcore/core/lib/utils/addonTextChildren"));
|
|
17
|
-
var _a11yEnhance = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/a11yEnhance"));
|
|
16
|
+
var _index = require("@semcore/utils/lib/core/index");
|
|
17
|
+
var _core = _interopRequireWildcard(require("@semcore/core"));
|
|
18
18
|
var _react = _interopRequireDefault(require("react"));
|
|
19
|
+
var _flexBox = require("@semcore/flex-box");
|
|
20
|
+
var _neighborLocation = _interopRequireWildcard(require("@semcore/neighbor-location"));
|
|
21
|
+
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
22
|
+
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
23
|
+
var _a11yEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/a11yEnhance"));
|
|
24
|
+
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
|
|
19
25
|
/*!__reshadow-styles__:"./style/pills.shadow.css"*/
|
|
20
|
-
var style = (/*__reshadow_css_start__*/
|
|
26
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SPills_wno1z_gg_{display:inline-flex;align-items:center;justify-content:center;isolation:isolate;outline:0}.___SPills_wno1z_gg_.__keyboardFocused_wno1z_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPills_wno1z_gg_.__keyboardFocused_wno1z_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SPills_wno1z_gg_.__keyboardFocused_wno1z_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SPill_wno1z_gg_{display:inline-flex;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;padding:0;margin:0;box-shadow:none;-webkit-text-decoration:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:var(--intergalactic-bg-primary-neutral, rgb(255, 255, 255));border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161));border-radius:var(--intergalactic-control-rounded, 6px)}@supports (color:color(display-p3 0 0 0)){.___SPill_wno1z_gg_{border:1px solid var(--intergalactic-border-primary, rgba(0, 12, 8, 0.161))}@media (color-gamut:p3){.___SPill_wno1z_gg_{border:1px solid var(--intergalactic-border-primary, color(display-p3 0.00798 0.04498 0.03219 / 0.161))}}}.___SPill_wno1z_gg_::-moz-focus-inner{border:0;padding:0}.___SPill_wno1z_gg_:active,.___SPill_wno1z_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SPill_wno1z_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none;background:var(--intergalactic-bg-primary-neutral-hover, rgb(248, 249, 248))}}.___SPill_wno1z_gg_.__selected_wno1z_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039));border-color:var(--intergalactic-border-info-active, rgba(0, 40, 230, 0.419));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPill_wno1z_gg_.__selected_wno1z_gg_{background:var(--intergalactic-control-secondary-info, rgba(0, 81, 255, 0.039))}@media (color-gamut:p3){.___SPill_wno1z_gg_.__selected_wno1z_gg_{background:var(--intergalactic-control-secondary-info, color(display-p3 0.12567 0.31308 0.96324 / 0.039))}}}.___SPill_wno1z_gg_.__disabled_wno1z_gg_{cursor:default;pointer-events:none}.___SPill_wno1z_gg_.__disabled_wno1z_gg_>*{opacity:var(--intergalactic-disabled-opacity, 0.4)}.___SPill_wno1z_gg_.__keyboardFocused_wno1z_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469));z-index:1}@supports (color:color(display-p3 0 0 0)){.___SPill_wno1z_gg_.__keyboardFocused_wno1z_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 33, 220, 0.469))}@media (color-gamut:p3){.___SPill_wno1z_gg_.__keyboardFocused_wno1z_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px color(display-p3 0.03256 0.12227 0.83249 / 0.469))}}}.___SText_wno1z_gg_{color:var(--intergalactic-text-primary, rgba(1, 5, 0, 0.899));display:inline-flex}.___SAddon_wno1z_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583));display:inline-flex;align-items:center;justify-content:center}@supports (color:color(display-p3 0 0 0)){.___SAddon_wno1z_gg_{color:var(--intergalactic-text-secondary, rgba(0, 3, 0, 0.583))}@media (color-gamut:p3){.___SAddon_wno1z_gg_{color:var(--intergalactic-text-secondary, color(display-p3 0.00228 0.01289 0.00252 / 0.583))}}}.___SPill_wno1z_gg_._size_m_wno1z_gg_{height:var(--intergalactic-form-control-m, 28px);min-width:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px)}.___SPill_wno1z_gg_._size_l_wno1z_gg_ .___SText_wno1z_gg_,.___SPill_wno1z_gg_._size_m_wno1z_gg_ .___SText_wno1z_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wno1z_gg_._size_m_wno1z_gg_ .___SAddon_wno1z_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-2x, 8px)}.___SPill_wno1z_gg_._size_m_wno1z_gg_ .___SAddon_wno1z_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wno1z_gg_._size_m_wno1z_gg_ .___SAddon_wno1z_gg_:only-child{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SPill_wno1z_gg_._size_l_wno1z_gg_{height:var(--intergalactic-form-control-l, 40px);min-width:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px)}.___SPill_wno1z_gg_._size_l_wno1z_gg_ .___SAddon_wno1z_gg_:only-child,.___SPill_wno1z_gg_._size_l_wno1z_gg_ .___SText_wno1z_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_wno1z_gg_._size_l_wno1z_gg_ .___SAddon_wno1z_gg_:not(:only-child):first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SPill_wno1z_gg_._size_l_wno1z_gg_ .___SAddon_wno1z_gg_:not(:only-child):last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SPill_wno1z_gg_._neighborLocation_right_wno1z_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_wno1z_gg_._neighborLocation_both_wno1z_gg_{border-radius:0;margin-left:-1px}.___SPill_wno1z_gg_._neighborLocation_left_wno1z_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}", /*__inner_css_end__*/"wno1z_gg_"),
|
|
21
27
|
/*__reshadow_css_end__*/
|
|
22
28
|
{
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"__SPill": "
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
29
|
+
"__SPills": "___SPills_wno1z_gg_",
|
|
30
|
+
"_keyboardFocused": "__keyboardFocused_wno1z_gg_",
|
|
31
|
+
"__SPill": "___SPill_wno1z_gg_",
|
|
32
|
+
"_selected": "__selected_wno1z_gg_",
|
|
33
|
+
"__SText": "___SText_wno1z_gg_",
|
|
34
|
+
"__SAddon": "___SAddon_wno1z_gg_",
|
|
35
|
+
"_neighborLocation_right": "_neighborLocation_right_wno1z_gg_",
|
|
36
|
+
"_neighborLocation_both": "_neighborLocation_both_wno1z_gg_",
|
|
37
|
+
"_neighborLocation_left": "_neighborLocation_left_wno1z_gg_",
|
|
38
|
+
"_disabled": "__disabled_wno1z_gg_",
|
|
39
|
+
"_size_m": "_size_m_wno1z_gg_",
|
|
40
|
+
"_size_l": "_size_l_wno1z_gg_"
|
|
34
41
|
});
|
|
42
|
+
var optionsA11yEnhance = {
|
|
43
|
+
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
44
|
+
if (neighborElement) {
|
|
45
|
+
neighborElement.focus();
|
|
46
|
+
if (props.behavior === 'auto' || props.behavior === 'radio') {
|
|
47
|
+
neighborElement.click();
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
childSelector: function childSelector(props) {
|
|
52
|
+
return props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'];
|
|
53
|
+
}
|
|
54
|
+
};
|
|
35
55
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
56
|
+
(0, _inherits2["default"])(RootPills, _Component);
|
|
57
|
+
var _super = (0, _createSuper2["default"])(RootPills);
|
|
36
58
|
function RootPills() {
|
|
37
59
|
var _this;
|
|
38
60
|
(0, _classCallCheck2["default"])(this, RootPills);
|
|
39
61
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
40
62
|
args[_key] = arguments[_key];
|
|
41
63
|
}
|
|
42
|
-
_this = (
|
|
43
|
-
(0, _defineProperty2["default"])(_this, "itemValues", []);
|
|
44
|
-
(0, _defineProperty2["default"])(_this, "bindHandlerClick", function (value) {
|
|
64
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
65
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "itemValues", []);
|
|
66
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandlerClick", function (value) {
|
|
45
67
|
return function (e) {
|
|
46
68
|
_this.handlers.value(value, e);
|
|
47
69
|
};
|
|
48
70
|
});
|
|
49
|
-
(0, _defineProperty2["default"])(_this, "bindHandleKeyDown", function (value) {
|
|
50
|
-
return function (
|
|
51
|
-
if (
|
|
52
|
-
|
|
53
|
-
_this.handlers.value(value,
|
|
71
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "bindHandleKeyDown", function (value) {
|
|
72
|
+
return function (event) {
|
|
73
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
74
|
+
event.preventDefault();
|
|
75
|
+
_this.handlers.value(value, event);
|
|
54
76
|
}
|
|
55
77
|
};
|
|
56
78
|
});
|
|
79
|
+
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeIndex", function (startIndex, type) {
|
|
80
|
+
var selectable = false;
|
|
81
|
+
while (!selectable && startIndex >= 0 && startIndex < _this.itemValues.length) {
|
|
82
|
+
if (type === 'increment') startIndex++;
|
|
83
|
+
if (type === 'decrement') startIndex--;
|
|
84
|
+
var element = _this.itemRefs[startIndex];
|
|
85
|
+
if ((element === null || element === void 0 ? void 0 : element.disabled) === false) {
|
|
86
|
+
selectable = true;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return startIndex >= 0 && startIndex < _this.itemValues.length ? startIndex : undefined;
|
|
90
|
+
});
|
|
57
91
|
return _this;
|
|
58
92
|
}
|
|
59
|
-
(0,
|
|
60
|
-
|
|
93
|
+
(0, _createClass2["default"])(RootPills, [{
|
|
94
|
+
key: "componentDidMount",
|
|
95
|
+
value: function componentDidMount() {
|
|
96
|
+
_logger["default"].warn(this.asProps.behavior === 'tabs', 'Use behavior `manual` instead of `tabs`. \n`tabs` is deprecated and will be removed in the next major release.', 'Pills');
|
|
97
|
+
_logger["default"].warn(this.asProps.behavior === 'radio', 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \n`radio` is deprecated and will be removed in the next major release.', 'Pills');
|
|
98
|
+
}
|
|
99
|
+
}, {
|
|
61
100
|
key: "uncontrolledProps",
|
|
62
101
|
value: function uncontrolledProps() {
|
|
63
102
|
return {
|
|
64
|
-
value:
|
|
65
|
-
return _value;
|
|
66
|
-
}
|
|
103
|
+
value: null
|
|
67
104
|
};
|
|
68
105
|
}
|
|
69
106
|
}, {
|
|
@@ -92,7 +129,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
92
129
|
value: function render() {
|
|
93
130
|
var _ref = this.asProps,
|
|
94
131
|
_ref5;
|
|
95
|
-
var SPills =
|
|
132
|
+
var SPills = _flexBox.Box;
|
|
96
133
|
var _this$asProps2 = this.asProps,
|
|
97
134
|
Children = _this$asProps2.Children,
|
|
98
135
|
styles = _this$asProps2.styles,
|
|
@@ -101,14 +138,15 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
101
138
|
behavior = _this$asProps2.behavior,
|
|
102
139
|
value = _this$asProps2.value;
|
|
103
140
|
return _ref5 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPills, _ref5.cn("SPills", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
104
|
-
"role": behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
141
|
+
"role": behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist',
|
|
105
142
|
"aria-disabled": disabled,
|
|
106
143
|
"use:tabIndex": value !== null ? -1 : 0
|
|
107
|
-
}, _ref))), /*#__PURE__*/_react["default"].createElement(
|
|
144
|
+
}, _ref))), /*#__PURE__*/_react["default"].createElement(_neighborLocation["default"], _ref5.cn("NeighborLocation", {
|
|
108
145
|
"controlsLength": controlsLength
|
|
109
146
|
}), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {}))));
|
|
110
147
|
}
|
|
111
148
|
}]);
|
|
149
|
+
return RootPills;
|
|
112
150
|
}(_core.Component);
|
|
113
151
|
(0, _defineProperty2["default"])(RootPills, "displayName", 'Pills');
|
|
114
152
|
(0, _defineProperty2["default"])(RootPills, "style", style);
|
|
@@ -120,24 +158,11 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
120
158
|
behavior: behavior !== null && behavior !== void 0 ? behavior : 'auto'
|
|
121
159
|
};
|
|
122
160
|
});
|
|
123
|
-
(0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])(
|
|
124
|
-
onNeighborChange: function onNeighborChange(neighborElement, props) {
|
|
125
|
-
if (neighborElement) {
|
|
126
|
-
neighborElement.focus();
|
|
127
|
-
if (props.behavior === 'auto') {
|
|
128
|
-
neighborElement.click();
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
childSelector: function childSelector(props) {
|
|
133
|
-
var selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];
|
|
134
|
-
return selector;
|
|
135
|
-
}
|
|
136
|
-
})]);
|
|
161
|
+
(0, _defineProperty2["default"])(RootPills, "enhance", [(0, _a11yEnhance["default"])(optionsA11yEnhance), (0, _keyboardFocusEnhance["default"])()]);
|
|
137
162
|
function Pill(props) {
|
|
138
163
|
var _ref2 = arguments[0],
|
|
139
164
|
_ref6;
|
|
140
|
-
var SPill =
|
|
165
|
+
var SPill = _flexBox.Box;
|
|
141
166
|
var Children = props.Children,
|
|
142
167
|
styles = props.styles,
|
|
143
168
|
addonLeft = props.addonLeft,
|
|
@@ -146,16 +171,18 @@ function Pill(props) {
|
|
|
146
171
|
disabled = props.disabled,
|
|
147
172
|
index = props.index,
|
|
148
173
|
behavior = props.behavior;
|
|
149
|
-
var neighborLocation = (0,
|
|
150
|
-
var roleAreaProps = {
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
'aria-
|
|
154
|
-
}
|
|
174
|
+
var neighborLocation = (0, _neighborLocation.useNeighborLocationDetect)(index);
|
|
175
|
+
var roleAreaProps = {};
|
|
176
|
+
if (behavior === 'radio' || behavior === 'auto') {
|
|
177
|
+
roleAreaProps.role = 'radio';
|
|
178
|
+
roleAreaProps['aria-checked'] = selected;
|
|
179
|
+
} else {
|
|
180
|
+
roleAreaProps.role = 'tab';
|
|
181
|
+
roleAreaProps['aria-selected'] = selected;
|
|
182
|
+
}
|
|
155
183
|
return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SPill, _ref6.cn("SPill", (0, _objectSpread2["default"])({}, (0, _core.assignProps)((0, _objectSpread2["default"])({
|
|
156
184
|
"tag": 'button',
|
|
157
185
|
"type": 'button',
|
|
158
|
-
"tabIndex": 0,
|
|
159
186
|
"neighborLocation": neighborLocation,
|
|
160
187
|
"aria-disabled": disabled
|
|
161
188
|
}, roleAreaProps), _ref2))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Pills.Item.Addon, {
|
|
@@ -164,10 +191,11 @@ function Pill(props) {
|
|
|
164
191
|
tag: addonRight
|
|
165
192
|
}) : null);
|
|
166
193
|
}
|
|
194
|
+
Pill.enhance = [(0, _keyboardFocusEnhance["default"])()];
|
|
167
195
|
function Text(props) {
|
|
168
196
|
var _ref3 = arguments[0],
|
|
169
197
|
_ref7;
|
|
170
|
-
var SText =
|
|
198
|
+
var SText = _flexBox.Box;
|
|
171
199
|
return _ref7 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SText, _ref7.cn("SText", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
172
200
|
"tag": 'span'
|
|
173
201
|
}, _ref3))));
|
|
@@ -175,19 +203,21 @@ function Text(props) {
|
|
|
175
203
|
function Addon(props) {
|
|
176
204
|
var _ref4 = arguments[0],
|
|
177
205
|
_ref8;
|
|
178
|
-
var SAddon =
|
|
206
|
+
var SAddon = _flexBox.Box;
|
|
179
207
|
return _ref8 = (0, _core.sstyled)(props.styles), /*#__PURE__*/_react["default"].createElement(SAddon, _ref8.cn("SAddon", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
|
|
180
208
|
"tag": 'span'
|
|
181
209
|
}, _ref4))));
|
|
182
210
|
}
|
|
183
|
-
var
|
|
184
|
-
return wrapper;
|
|
185
|
-
};
|
|
186
|
-
var Pills = (0, _core.createComponent)(RootPills, {
|
|
211
|
+
var Pills = (0, _core["default"])(RootPills, {
|
|
187
212
|
Item: [Pill, {
|
|
188
213
|
Text: Text,
|
|
189
214
|
Addon: Addon
|
|
190
215
|
}]
|
|
191
216
|
});
|
|
192
|
-
var
|
|
217
|
+
var wrapPills = function wrapPills(wrapper) {
|
|
218
|
+
return wrapper;
|
|
219
|
+
};
|
|
220
|
+
exports.wrapPills = wrapPills;
|
|
221
|
+
var _default = Pills;
|
|
222
|
+
exports["default"] = _default;
|
|
193
223
|
//# sourceMappingURL=Pills.js.map
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pills.js","names":["_core","require","_baseComponents","_addonTextChildren","_interopRequireDefault","_a11yEnhance","_react","style","sstyled","insert","RootPills","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","value","e","handlers","key","preventDefault","_inherits2","_createClass2","uncontrolledProps","getItemProps","props","index","_this$asProps","asProps","size","disabled","behavior","isSelected","itemValues","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread2","assignProps","NeighborLocation","Component","_ref9","defaultValue","a11yEnhance","onNeighborChange","neighborElement","focus","click","childSelector","selector","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","undefined","Pills","Item","Addon","tag","addonTextChildren","Text","_ref3","_ref7","SText","_ref4","_ref8","SAddon","wrapPills","exports","wrapper","createComponent","_default"],"sources":["../../src/Pills.tsx"],"sourcesContent":["import { NeighborLocation, Box, useNeighborLocationDetect } from '@semcore/base-components';\nimport type { Intergalactic } from '@semcore/core';\nimport { createComponent, Component, sstyled, Root } from '@semcore/core';\nimport addonTextChildren from '@semcore/core/lib/utils/addonTextChildren';\nimport a11yEnhance from '@semcore/core/lib/utils/enhances/a11yEnhance';\nimport React from 'react';\n\nimport type { NSPills } from './Pills.type';\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component<\n Intergalactic.InternalTypings.InferComponentProps<NSPills.Component>,\n typeof RootPills.enhance,\n NSPills.Handlers\n> {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }: NSPills.Props) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n\n itemValues: Array<NSPills.Pill.Props['value']> = [];\n\n static enhance = [a11yEnhance({\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) => {\n const selector = props.behavior === 'auto' ? ['role', 'radio'] : ['role', 'tab'];\n\n return selector as [string, string];\n },\n })] as const;\n\n uncontrolledProps() {\n return {\n value: (value: NSPills.Pill.Props['value'], e: React.SyntheticEvent) => value,\n };\n }\n\n bindHandlerClick = (value: NSPills.Pill.Props['value']) => (e: React.MouseEvent) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value: NSPills.Pill.Props['value']) => (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n this.handlers.value(value, e);\n }\n };\n\n getItemProps(props: NSPills.Pill.Props, index: number) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props: Intergalactic.InternalTypings.InferChildComponentProps<NSPills.Pill.Component, typeof RootPills, 'Item'>) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n\n const roleAreaProps = {\n 'role': behavior === 'auto' ? 'radio' : 'tab',\n 'aria-checked': behavior === 'auto' ? selected : undefined,\n 'aria-selected': behavior !== 'auto' ? selected : undefined,\n };\n\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n tabIndex={0}\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nfunction Text(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Text.Component>) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props: Intergalactic.InternalTypings.InferComponentProps<NSPills.Pill.Addon.Component>) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nexport const wrapPills = <PropsExtending extends {}>(wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<NSPills.WrapComponent>\n > &\n PropsExtending,\n) => React.ReactNode) => wrapper as NSPills.WrapComponent<PropsExtending>;\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n}) as unknown as NSPills.Component;\n\nexport default Pills;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Pills.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_neighborLocation","_keyboardFocusEnhance","_addonTextChildren","_a11yEnhance","_logger","style","_index","sstyled","insert","optionsA11yEnhance","onNeighborChange","neighborElement","props","focus","behavior","click","childSelector","RootPills","_Component","_inherits2","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","value","e","handlers","event","key","preventDefault","startIndex","type","selectable","itemValues","element","itemRefs","disabled","undefined","_createClass2","componentDidMount","log","warn","asProps","uncontrolledProps","getItemProps","index","_this$asProps","size","isSelected","selected","tabIndex","onClick","bindHandlerClick","onKeyDown","bindHandleKeyDown","render","_ref","_ref5","SPills","Box","_this$asProps2","Children","styles","controlsLength","createElement","cn","_objectSpread2","assignProps","Component","_ref9","defaultValue","a11yEnhance","keyboardFocusEnhance","Pill","_ref2","arguments[0]","_ref6","SPill","addonLeft","addonRight","neighborLocation","useNeighborLocationDetect","roleAreaProps","role","Pills","Item","Addon","tag","addonTextChildren","Text","enhance","_ref3","_ref7","SText","_ref4","_ref8","SAddon","createComponent","wrapPills","wrapper","exports","_default"],"sources":["../../src/Pills.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation, { useNeighborLocationDetect } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport a11yEnhance from '@semcore/utils/lib/enhances/a11yEnhance';\nimport log from '@semcore/utils/lib/logger';\n\nimport style from './style/pills.shadow.css';\n\nconst optionsA11yEnhance = {\n onNeighborChange: (neighborElement, props) => {\n if (neighborElement) {\n neighborElement.focus();\n if (props.behavior === 'auto' || props.behavior === 'radio') {\n neighborElement.click();\n }\n }\n },\n childSelector: (props) =>\n props.behavior === 'auto' || props.behavior === 'radio' ? ['role', 'radio'] : ['role', 'tab'],\n};\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = ({ behavior }) => ({\n size: 'm',\n defaultValue: null,\n behavior: behavior ?? 'auto',\n });\n itemValues = [];\n static enhance = [a11yEnhance(optionsA11yEnhance), keyboardFocusEnhance()];\n\n componentDidMount() {\n log.warn(\n this.asProps.behavior === 'tabs',\n 'Use behavior `manual` instead of `tabs`. \\n`tabs` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n\n log.warn(\n this.asProps.behavior === 'radio',\n 'Use behavior `auto` (or nothing, it is default value) instead of `radio`. \\n`radio` is deprecated and will be removed in the next major release.',\n 'Pills',\n );\n }\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n bindHandleKeyDown = (value) => (event) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.handlers.value(value, event);\n }\n };\n\n getItemProps(props, index) {\n const { value, size, disabled, behavior } = this.asProps;\n const isSelected = value === props.value;\n\n this.itemValues[index] = props.value;\n return {\n index: index,\n size,\n disabled,\n selected: isSelected,\n behavior,\n tabIndex: isSelected ? 0 : -1,\n onClick: this.bindHandlerClick(props.value),\n onKeyDown: this.bindHandleKeyDown(props.value),\n };\n }\n\n changeIndex = (startIndex, type) => {\n let selectable = false;\n\n while (!selectable && startIndex >= 0 && startIndex < this.itemValues.length) {\n if (type === 'increment') startIndex++;\n if (type === 'decrement') startIndex--;\n\n const element = this.itemRefs[startIndex];\n\n if (element?.disabled === false) {\n selectable = true;\n }\n }\n\n return startIndex >= 0 && startIndex < this.itemValues.length ? startIndex : undefined;\n };\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength, disabled, behavior, value } = this.asProps;\n\n return sstyled(styles)(\n <SPills\n render={Box}\n role={behavior === 'radio' || behavior === 'auto' ? 'radiogroup' : 'tablist'}\n aria-disabled={disabled}\n use:tabIndex={value !== null ? -1 : 0}\n >\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight, selected, disabled, index, behavior } = props;\n const neighborLocation = useNeighborLocationDetect(index);\n const roleAreaProps = {};\n if (behavior === 'radio' || behavior === 'auto') {\n roleAreaProps.role = 'radio';\n roleAreaProps['aria-checked'] = selected;\n } else {\n roleAreaProps.role = 'tab';\n roleAreaProps['aria-selected'] = selected;\n }\n return sstyled(styles)(\n <SPill\n render={Box}\n tag='button'\n type='button'\n neighborLocation={neighborLocation}\n aria-disabled={disabled}\n {...roleAreaProps}\n >\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag='span' />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport const wrapPills = (wrapper) => wrapper;\n\nexport default Pills;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { Box, BoxProps } from '@semcore/flex-box';\nimport { NeighborItemProps, NeighborLocationProps } from '@semcore/neighbor-location';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type PillsValue = string | number | boolean | null;\n\n/** @deprecated */\nexport interface IPillsProps<T extends PillsValue = PillsValue>\n extends PillsProps<T>,\n UnknownProperties {}\nexport type PillsProps<T extends PillsValue = PillsValue> = NeighborLocationProps &\n KeyboardFocusProps &\n BoxProps & {\n /** Pills size */\n size?: 'l' | 'm';\n /** Disabled state */\n disabled?: boolean;\n /** Called when the selection is changed */\n onChange?:\n | ((value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void)\n | React.Dispatch<React.SetStateAction<T>>;\n /** Value for the selected pill */\n value?: T;\n /** Default value for the selected pill */\n defaultValue?: T;\n /** Sets semantic role for corresponding behavior,\n * when set to `auto` pressing left and right arrows\n * selects corresponding sibling pill.\n *\n * It's recommended to use `auto` behavior in forms\n * while `manual` behavior for navigation and layout.\n * @default tabs\n */\n behavior?: /** @deprecated use `manual` */\n | 'tabs'\n /** @deprecated use `auto` */\n | 'radio'\n | 'auto'\n | 'manual';\n };\n\n/** @deprecated */\nexport interface IPillProps extends PillProps, UnknownProperties {}\nexport type PillProps = BoxProps &\n NeighborItemProps &\n KeyboardFocusProps & {\n /** Pill value */\n value?: PillsValue;\n /** Disabled state */\n disabled?: boolean;\n /** Selected state */\n selected?: boolean;\n /** Left addon text */\n addonLeft?: React.ElementType;\n /** Right addon tag */\n addonRight?: React.ElementType;\n };\n\n/** @deprecated */\nexport interface IPillsContext extends PillsContext, UnknownProperties {}\nexport type PillsContext = {\n getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IPillsHandlers extends PillsHandlers, UnknownProperties {}\nexport type PillsHandlers = {\n value: (value: PillsValue) => void;\n};\n\ntype IntergalacticPillsComponent<PropsExtending = {}> = (<\n Value extends PillsValue,\n Tag extends Intergalactic.Tag = 'div',\n>(\n props: Intergalactic.InternalTypings.ComponentProps<\n Tag,\n 'div',\n PillsProps<Value>,\n PillsContext,\n [handlers: PillsHandlers]\n > &\n PropsExtending,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', PillsProps>;\n\ndeclare const Pills: IntergalacticPillsComponent & {\n Item: Intergalactic.Component<'button', PillProps, [handlers: PillsHandlers]> & {\n Text: typeof Box;\n Addon: typeof Box;\n };\n};\n\ndeclare const wrapPills: <PropsExtending extends {}>(\n wrapper: (\n props: Intergalactic.InternalTypings.UntypeRefAndTag<\n Intergalactic.InternalTypings.ComponentPropsNesting<IntergalacticPillsComponent>\n > &\n PropsExtending,\n ) => React.ReactNode,\n) => IntergalacticPillsComponent<PropsExtending>;\nexport { wrapPills };\n\nexport default Pills;\n"],"mappings":""}
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,34 +1,25 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
var _exportNames = {
|
|
8
|
-
wrapPills: true
|
|
9
|
-
};
|
|
7
|
+
var _exportNames = {};
|
|
10
8
|
Object.defineProperty(exports, "default", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function get() {
|
|
13
11
|
return _Pills["default"];
|
|
14
12
|
}
|
|
15
13
|
});
|
|
16
|
-
Object.defineProperty(exports, "wrapPills", {
|
|
17
|
-
enumerable: true,
|
|
18
|
-
get: function get() {
|
|
19
|
-
return _Pills.wrapPills;
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
14
|
var _Pills = _interopRequireWildcard(require("./Pills"));
|
|
23
|
-
|
|
24
|
-
Object.keys(_Pills2).forEach(function (key) {
|
|
15
|
+
Object.keys(_Pills).forEach(function (key) {
|
|
25
16
|
if (key === "default" || key === "__esModule") return;
|
|
26
17
|
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
27
|
-
if (key in exports && exports[key] ===
|
|
18
|
+
if (key in exports && exports[key] === _Pills[key]) return;
|
|
28
19
|
Object.defineProperty(exports, key, {
|
|
29
20
|
enumerable: true,
|
|
30
21
|
get: function get() {
|
|
31
|
-
return
|
|
22
|
+
return _Pills[key];
|
|
32
23
|
}
|
|
33
24
|
});
|
|
34
25
|
});
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Pills","_interopRequireWildcard","require","
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Pills","_interopRequireWildcard","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Pills';\nexport * from './Pills';\n"],"mappings":";;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACAC,MAAA,CAAAC,IAAA,CAAAJ,MAAA,EAAAK,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAN,MAAA,CAAAM,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAd,MAAA,CAAAM,GAAA;IAAA;EAAA;AAAA"}
|
|
@@ -3,20 +3,12 @@ SPills {
|
|
|
3
3
|
align-items: center;
|
|
4
4
|
justify-content: center;
|
|
5
5
|
isolation: isolate;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
SPill[selected] {
|
|
9
|
-
background: var(--intergalactic-control-secondary-info, oklch(0.41 0.258 264.2 / 0.031));
|
|
10
|
-
border-color: var(--intergalactic-border-info-active, oklch(0.382 0.248 264.2 / 0.386));
|
|
11
|
-
z-index: 3;
|
|
12
|
-
}
|
|
13
|
-
SPill:focus-visible, SPill[selected] {
|
|
14
|
-
z-index: 3;
|
|
15
|
-
}
|
|
6
|
+
outline: none;
|
|
7
|
+
}
|
|
16
8
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
9
|
+
SPills[keyboardFocused]:focus {
|
|
10
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
11
|
+
z-index: 1;
|
|
20
12
|
}
|
|
21
13
|
|
|
22
14
|
SPill {
|
|
@@ -35,6 +27,7 @@ SPill {
|
|
|
35
27
|
text-decoration: none;
|
|
36
28
|
-webkit-tap-highlight-color: transparent;
|
|
37
29
|
overflow: visible;
|
|
30
|
+
outline: 0;
|
|
38
31
|
text-align: center;
|
|
39
32
|
vertical-align: middle;
|
|
40
33
|
font-family: inherit;
|
|
@@ -48,7 +41,9 @@ SPill {
|
|
|
48
41
|
padding: 0;
|
|
49
42
|
}
|
|
50
43
|
|
|
51
|
-
&:active
|
|
44
|
+
&:active,
|
|
45
|
+
&:hover,
|
|
46
|
+
&:focus {
|
|
52
47
|
outline: 0;
|
|
53
48
|
text-decoration: none;
|
|
54
49
|
}
|
|
@@ -58,6 +53,12 @@ SPill {
|
|
|
58
53
|
}
|
|
59
54
|
}
|
|
60
55
|
|
|
56
|
+
SPill[selected] {
|
|
57
|
+
background: var(--intergalactic-control-secondary-info, oklch(0.527 0.264 262.9 / 0.039));
|
|
58
|
+
border-color: var(--intergalactic-border-info-active, oklch(0.443 0.273 264.2 / 0.419));
|
|
59
|
+
z-index: 1;
|
|
60
|
+
}
|
|
61
|
+
|
|
61
62
|
SPill[disabled] {
|
|
62
63
|
cursor: default;
|
|
63
64
|
/* Disable link interactions */
|
|
@@ -68,6 +69,11 @@ SPill[disabled] {
|
|
|
68
69
|
}
|
|
69
70
|
}
|
|
70
71
|
|
|
72
|
+
SPill[keyboardFocused] {
|
|
73
|
+
box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.424 0.269 264.2 / 0.469));
|
|
74
|
+
z-index: 1;
|
|
75
|
+
}
|
|
76
|
+
|
|
71
77
|
SText {
|
|
72
78
|
color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
|
|
73
79
|
display: inline-flex;
|