@warp-ds/elements 2.2.0-next.20 → 2.2.0-next.21
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/dist/api.js.map +1 -1
- package/dist/custom-elements.json +1219 -1078
- package/dist/index.d.ts +194 -173
- package/dist/packages/affix/affix.react.stories.d.ts +9 -0
- package/dist/packages/affix/affix.react.stories.js +10 -0
- package/dist/packages/affix/affix.stories.js +1 -1
- package/dist/packages/affix/index.js +1 -1
- package/dist/packages/affix/index.js.map +4 -4
- package/dist/packages/affix/react.d.ts +1 -1
- package/dist/packages/affix/react.js +10 -3
- package/dist/packages/alert/alert.react.stories.d.ts +13 -0
- package/dist/packages/alert/alert.react.stories.js +44 -0
- package/dist/packages/alert/alert.stories.js +1 -1
- package/dist/packages/alert/alert.test.js +3 -1
- package/dist/packages/alert/index.d.ts +1 -1
- package/dist/packages/alert/index.js +1 -1
- package/dist/packages/alert/index.js.map +4 -4
- package/dist/packages/alert/react.d.ts +1 -1
- package/dist/packages/alert/react.js +6 -3
- package/dist/packages/attention/attention.react.stories.d.ts +15 -0
- package/dist/packages/attention/attention.react.stories.js +92 -0
- package/dist/packages/attention/attention.stories.js +17 -32
- package/dist/packages/attention/attention.test.js +1 -1
- package/dist/packages/attention/index.d.ts +3 -2
- package/dist/packages/attention/index.js +238 -17
- package/dist/packages/attention/index.js.map +4 -4
- package/dist/packages/attention/react.d.ts +15 -1
- package/dist/packages/attention/react.js +13 -5
- package/dist/packages/badge/badge.react.stories.d.ts +18 -0
- package/dist/packages/badge/badge.react.stories.js +60 -0
- package/dist/packages/badge/badge.stories.js +1 -1
- package/dist/packages/badge/index.js +1 -1
- package/dist/packages/badge/index.js.map +4 -4
- package/dist/packages/badge/react.d.ts +1 -1
- package/dist/packages/badge/react.js +6 -3
- package/dist/packages/box/box.react.stories.d.ts +15 -0
- package/dist/packages/box/box.react.stories.js +45 -0
- package/dist/packages/box/box.stories.js +1 -1
- package/dist/packages/box/index.js +3 -3
- package/dist/packages/box/index.js.map +4 -4
- package/dist/packages/box/react.d.ts +1 -1
- package/dist/packages/box/react.js +6 -3
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.d.ts +13 -0
- package/dist/packages/breadcrumbs/breadcrumbs.react.stories.js +40 -0
- package/dist/packages/breadcrumbs/breadcrumbs.stories.js +1 -1
- package/dist/packages/breadcrumbs/index.js +6 -6
- package/dist/packages/breadcrumbs/index.js.map +4 -4
- package/dist/packages/breadcrumbs/react.d.ts +1 -1
- package/dist/packages/breadcrumbs/react.js +6 -3
- package/dist/packages/button/button.react.stories.d.ts +22 -0
- package/dist/packages/button/button.react.stories.js +102 -0
- package/dist/packages/button/button.stories.js +1 -1
- package/dist/packages/button/index.js +2 -2
- package/dist/packages/button/index.js.map +4 -4
- package/dist/packages/button/react.d.ts +1 -1
- package/dist/packages/button/react.js +6 -3
- package/dist/packages/card/card.react.stories.d.ts +16 -0
- package/dist/packages/card/card.react.stories.js +63 -0
- package/dist/packages/card/card.stories.js +2 -2
- package/dist/packages/card/index.d.ts +1 -1
- package/dist/packages/card/index.js +2 -2
- package/dist/packages/card/index.js.map +4 -4
- package/dist/packages/card/react.d.ts +1 -1
- package/dist/packages/card/react.js +6 -3
- package/dist/packages/combobox/combobox.react.stories.d.ts +28 -0
- package/dist/packages/combobox/combobox.react.stories.js +90 -0
- package/dist/packages/combobox/combobox.stories.d.ts +5 -1
- package/dist/packages/combobox/combobox.stories.js +47 -25
- package/dist/packages/combobox/index.d.ts +1 -1
- package/dist/packages/combobox/index.js +4 -4
- package/dist/packages/combobox/index.js.map +4 -4
- package/dist/packages/combobox/react.d.ts +7 -0
- package/dist/packages/combobox/react.js +17 -0
- package/dist/packages/datepicker/DatePicker.test.d.ts +1 -0
- package/dist/packages/datepicker/DatePicker.test.js +3 -2
- package/dist/packages/datepicker/datepicker.d.ts +1 -1
- package/dist/packages/datepicker/datepicker.js +105 -105
- package/dist/packages/datepicker/datepicker.js.map +4 -4
- package/dist/packages/datepicker/datepicker.react.stories.d.ts +18 -0
- package/dist/packages/datepicker/datepicker.react.stories.js +26 -0
- package/dist/packages/datepicker/datepicker.stories.js +1 -1
- package/dist/packages/datepicker/datepicker.test.js +1 -1
- package/dist/packages/datepicker/index.js +105 -105
- package/dist/packages/datepicker/index.js.map +4 -4
- package/dist/packages/datepicker/react.d.ts +5 -2
- package/dist/packages/datepicker/react.js +10 -3
- package/dist/packages/dead-toggle/dead-toggle.react.stories.d.ts +15 -0
- package/dist/packages/dead-toggle/dead-toggle.react.stories.js +34 -0
- package/dist/packages/dead-toggle/dead-toggle.stories.d.ts +5 -1
- package/dist/packages/dead-toggle/dead-toggle.stories.js +25 -3
- package/dist/packages/dead-toggle/index.js +1 -1
- package/dist/packages/dead-toggle/index.js.map +2 -2
- package/dist/packages/dead-toggle/react.d.ts +1 -1
- package/dist/packages/dead-toggle/react.js +6 -3
- package/dist/packages/expandable/expandable.react.stories.d.ts +18 -0
- package/dist/packages/expandable/expandable.react.stories.js +103 -0
- package/dist/packages/expandable/expandable.stories.js +1 -1
- package/dist/packages/expandable/index.js +2 -2
- package/dist/packages/expandable/index.js.map +4 -4
- package/dist/packages/expandable/react.d.ts +1 -1
- package/dist/packages/expandable/react.js +6 -3
- package/dist/packages/i18n.js +2 -1
- package/dist/packages/link/index.js +1 -1
- package/dist/packages/link/index.js.map +4 -4
- package/dist/packages/link/link.react.stories.d.ts +21 -0
- package/dist/packages/link/link.react.stories.js +96 -0
- package/dist/packages/link/link.stories.js +1 -12
- package/dist/packages/link/link.test.js +1 -1
- package/dist/packages/link/react.d.ts +1 -1
- package/dist/packages/link/react.js +6 -3
- package/dist/packages/modal/index.js +8 -8
- package/dist/packages/modal/index.js.map +4 -4
- package/dist/packages/modal/modal-footer.js +3 -3
- package/dist/packages/modal/modal-footer.js.map +3 -3
- package/dist/packages/modal/modal-header.js +4 -4
- package/dist/packages/modal/modal-header.js.map +4 -4
- package/dist/packages/modal/modal-main.js.map +1 -1
- package/dist/packages/modal/modal.react.stories.d.ts +14 -0
- package/dist/packages/modal/modal.react.stories.js +27 -0
- package/dist/packages/modal/modal.stories.d.ts +1 -1
- package/dist/packages/modal/modal.stories.js +1 -1
- package/dist/packages/modal/react.d.ts +11 -3
- package/dist/packages/modal/react.js +19 -6
- package/dist/packages/pageindicator/pageindicator.react.stories.d.ts +19 -0
- package/dist/packages/pageindicator/pageindicator.react.stories.js +20 -0
- package/dist/packages/pageindicator/pageindicator.stories.d.ts +1 -1
- package/dist/packages/pageindicator/pageindicator.stories.js +1 -1
- package/dist/packages/pageindicator/react.d.ts +1 -1
- package/dist/packages/pageindicator/react.js +6 -3
- package/dist/packages/pagination/index.js +9 -3
- package/dist/packages/pagination/index.js.map +3 -3
- package/dist/packages/pagination/pagination.react.stories.d.ts +21 -0
- package/dist/packages/pagination/pagination.react.stories.js +45 -0
- package/dist/packages/pagination/pagination.stories.js +6 -6
- package/dist/packages/pagination/pagination.test.js +1 -1
- package/dist/packages/pagination/react.d.ts +5 -2
- package/dist/packages/pagination/react.js +10 -3
- package/dist/packages/pill/index.js.map +2 -2
- package/dist/packages/pill/pill.react.stories.d.ts +23 -0
- package/dist/packages/pill/pill.react.stories.js +22 -0
- package/dist/packages/pill/pill.stories.js +1 -1
- package/dist/packages/pill/pill.test.js +3 -1
- package/dist/packages/pill/react.d.ts +7 -0
- package/dist/packages/pill/react.js +17 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox.js +5 -5
- package/dist/packages/rip-and-tear-checkbox/checkbox.js.map +3 -3
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.d.ts +8 -0
- package/dist/packages/rip-and-tear-checkbox/checkbox.stories.js +11 -0
- package/dist/packages/rip-and-tear-checkbox/index.js +5 -5
- package/dist/packages/rip-and-tear-checkbox/index.js.map +3 -3
- package/dist/packages/rip-and-tear-checkbox/react.d.ts +5 -0
- package/dist/packages/rip-and-tear-checkbox/react.js +15 -0
- package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.d.ts +12 -0
- package/dist/packages/rip-and-tear-checkbox/rip-and-tear-checkbox.react.stories.js +10 -0
- package/dist/packages/rip-and-tear-radio/index.js +8 -8
- package/dist/packages/rip-and-tear-radio/index.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/radio-group.js +8 -8
- package/dist/packages/rip-and-tear-radio/radio-group.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/radio.js.map +2 -2
- package/dist/packages/rip-and-tear-radio/radio.stories.js +9 -9
- package/dist/packages/rip-and-tear-radio/radio.stories.js.map +3 -3
- package/dist/packages/rip-and-tear-radio/react.d.ts +9 -0
- package/dist/packages/rip-and-tear-radio/react.js +22 -0
- package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.d.ts +9 -0
- package/dist/packages/rip-and-tear-radio/rip-and-tear-radio.react.stories.js +10 -0
- package/dist/packages/rip-and-tear-radio/slot.js +3 -3
- package/dist/packages/select/index.d.ts +4 -4
- package/dist/packages/select/index.js +12 -12
- package/dist/packages/select/index.js.map +3 -3
- package/dist/packages/select/react.d.ts +6 -2
- package/dist/packages/select/react.js +15 -3
- package/dist/packages/select/select.react.stories.d.ts +18 -0
- package/dist/packages/select/select.react.stories.js +28 -0
- package/dist/packages/select/select.stories.js +2 -2
- package/dist/packages/select/select.test.js +1 -1
- package/dist/packages/slider/Slider.js +1 -1
- package/dist/packages/slider/SliderThumb.js +1 -1
- package/dist/packages/slider/index.js +6 -6
- package/dist/packages/slider/index.js.map +4 -4
- package/dist/packages/slider/react.d.ts +8 -0
- package/dist/packages/slider/react.js +20 -0
- package/dist/packages/slider/slider-thumb.js +2 -2
- package/dist/packages/slider/slider-thumb.js.map +4 -4
- package/dist/packages/slider/slider.js +2 -2
- package/dist/packages/slider/slider.js.map +4 -4
- package/dist/packages/slider/slider.react.stories.d.ts +18 -0
- package/dist/packages/slider/slider.react.stories.js +119 -0
- package/dist/packages/slider/slider.stories.js +2 -2
- package/dist/packages/slider/slider.test.js +1 -1
- package/dist/packages/steps/index.js +2 -2
- package/dist/packages/steps/index.js.map +4 -4
- package/dist/packages/steps/react.d.ts +1 -1
- package/dist/packages/steps/react.js +7 -4
- package/dist/packages/steps/steps.react.stories.d.ts +15 -0
- package/dist/packages/steps/steps.react.stories.js +112 -0
- package/dist/packages/switch/index.js +1 -1
- package/dist/packages/switch/index.js.map +4 -4
- package/dist/packages/switch/react.d.ts +5 -2
- package/dist/packages/switch/react.js +10 -3
- package/dist/packages/switch/switch.react.stories.d.ts +15 -0
- package/dist/packages/switch/switch.react.stories.js +29 -0
- package/dist/packages/tabs/index.d.ts +1 -1
- package/dist/packages/tabs/index.js +12 -12
- package/dist/packages/tabs/index.js.map +4 -4
- package/dist/packages/tabs/react.d.ts +11 -3
- package/dist/packages/tabs/react.js +18 -5
- package/dist/packages/tabs/tab-panel.js.map +2 -2
- package/dist/packages/tabs/tab.js +1 -1
- package/dist/packages/tabs/tab.js.map +4 -4
- package/dist/packages/tabs/tabs.d.ts +2 -0
- package/dist/packages/tabs/tabs.js +4 -4
- package/dist/packages/tabs/tabs.js.map +4 -4
- package/dist/packages/tabs/tabs.react.stories.d.ts +15 -0
- package/dist/packages/tabs/tabs.react.stories.js +51 -0
- package/dist/packages/tabs/tabs.stories.js +12 -12
- package/dist/packages/tabs/tabs.stories.js.map +4 -4
- package/dist/packages/textfield/index.js +1 -1
- package/dist/packages/textfield/index.js.map +4 -4
- package/dist/packages/textfield/react.d.ts +11 -2
- package/dist/packages/textfield/react.js +16 -3
- package/dist/packages/textfield/textfield.react.stories.d.ts +37 -0
- package/dist/packages/textfield/textfield.react.stories.js +88 -0
- package/dist/packages/textfield/textfield.stories.js +1 -1
- package/dist/packages/textfield/textfield.test.js +1 -1
- package/dist/packages/toast/api.d.ts +1 -1
- package/dist/packages/toast/index.d.ts +1 -1
- package/dist/packages/toast/index.js +14 -14
- package/dist/packages/toast/index.js.map +4 -4
- package/dist/packages/toast/toast-container.d.ts +1 -1
- package/dist/packages/toast/toast-container.js +2454 -149
- package/dist/packages/toast/toast-container.js.map +7 -0
- package/dist/packages/toast/toast.js +2459 -193
- package/dist/packages/toast/toast.js.map +7 -0
- package/dist/packages/toast/toast.stories.js +1 -1
- package/dist/packages/utils/expand-transition.js +1 -1
- package/dist/vscode.html-custom-data.json +90 -85
- package/dist/web-types.json +147 -139
- package/package.json +22 -21
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
|
|
2
|
-
import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
|
|
3
2
|
import type { WarpAlert } from "./packages/alert/index.ts";
|
|
3
|
+
import type { ccSuffix, ccPrefix, WarpAffix } from "./packages/affix/index.ts";
|
|
4
|
+
import type { WarpLink } from "./packages/link/index.ts";
|
|
5
|
+
import type { ccButton, WarpButton } from "./packages/button/index.ts";
|
|
4
6
|
import type { ccAttention, WarpAttention } from "./packages/attention/index.ts";
|
|
5
7
|
import type { WarpBadge } from "./packages/badge/index.ts";
|
|
6
8
|
import type { WarpBox } from "./packages/box/index.ts";
|
|
7
9
|
import type { ccBreadcrumbs, WarpBreadcrumbs } from "./packages/breadcrumbs/index.ts";
|
|
8
|
-
import type { WarpLink } from "./packages/link/index.ts";
|
|
9
|
-
import type { ccButton, WarpButton } from "./packages/button/index.ts";
|
|
10
10
|
import type { ccCard, WarpCard } from "./packages/card/index.ts";
|
|
11
11
|
import type { ccCombobox, WarpCombobox } from "./packages/combobox/index.ts";
|
|
12
12
|
import type { WarpDatepicker } from "./packages/datepicker/datepicker.ts";
|
|
@@ -27,9 +27,10 @@ import type { WarpSliderThumb } from "./packages/slider/slider-thumb.ts";
|
|
|
27
27
|
import type { WarpSlider } from "./packages/slider/slider.ts";
|
|
28
28
|
import type { WarpSteps, WarpStep } from "./packages/steps/index.ts";
|
|
29
29
|
import type { WarpSwitch } from "./packages/switch/index.ts";
|
|
30
|
-
import type { WarpTabs } from "./packages/tabs/tabs.ts";
|
|
31
30
|
import type { WarpTab } from "./packages/tabs/tab.ts";
|
|
32
31
|
import type { WarpTabPanel } from "./packages/tabs/tab-panel.ts";
|
|
32
|
+
import type { WarpTabs } from "./packages/tabs/tabs.ts";
|
|
33
|
+
import type { WarpToastContainer } from "./packages/toast/toast-container.ts";
|
|
33
34
|
|
|
34
35
|
/**
|
|
35
36
|
* This type can be used to create scoped tags for your components.
|
|
@@ -110,6 +111,18 @@ type BaseEvents = {
|
|
|
110
111
|
|
|
111
112
|
|
|
112
113
|
|
|
114
|
+
export type WarpAlertProps = {
|
|
115
|
+
/** */
|
|
116
|
+
"variant"?: WarpAlert['variant'];
|
|
117
|
+
/** */
|
|
118
|
+
"show"?: WarpAlert['show'];
|
|
119
|
+
/** */
|
|
120
|
+
"role"?: WarpAlert['role'];
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
113
126
|
export type WarpAffixProps = {
|
|
114
127
|
/** */
|
|
115
128
|
"aria-label"?: WarpAffix['ariaLabel'];
|
|
@@ -130,13 +143,73 @@ Set an `aria-label` that explains the action when using this. */
|
|
|
130
143
|
}
|
|
131
144
|
|
|
132
145
|
|
|
133
|
-
export type
|
|
146
|
+
export type WarpLinkProps = {
|
|
134
147
|
/** */
|
|
135
|
-
"
|
|
148
|
+
"autofocus"?: WarpLink['autofocus'];
|
|
136
149
|
/** */
|
|
137
|
-
"
|
|
150
|
+
"variant"?: WarpLink['variant'];
|
|
138
151
|
/** */
|
|
139
|
-
"
|
|
152
|
+
"quiet"?: WarpLink['quiet'];
|
|
153
|
+
/** */
|
|
154
|
+
"small"?: WarpLink['small'];
|
|
155
|
+
/** */
|
|
156
|
+
"href"?: WarpLink['href'];
|
|
157
|
+
/** */
|
|
158
|
+
"disabled"?: WarpLink['disabled'];
|
|
159
|
+
/** */
|
|
160
|
+
"target"?: WarpLink['target'];
|
|
161
|
+
/** */
|
|
162
|
+
"rel"?: WarpLink['rel'];
|
|
163
|
+
/** */
|
|
164
|
+
"full-width"?: WarpLink['fullWidth'];
|
|
165
|
+
/** */
|
|
166
|
+
"fullWidth"?: WarpLink['fullWidth'];
|
|
167
|
+
/** */
|
|
168
|
+
"button-class"?: WarpLink['buttonClass'];
|
|
169
|
+
/** */
|
|
170
|
+
"buttonClass"?: WarpLink['buttonClass'];
|
|
171
|
+
/** */
|
|
172
|
+
"name"?: WarpLink['name'];
|
|
173
|
+
/** */
|
|
174
|
+
"classes"?: WarpLink['classes'];
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
export type WarpButtonProps = {
|
|
181
|
+
/** */
|
|
182
|
+
"type"?: WarpButton['type'];
|
|
183
|
+
/** */
|
|
184
|
+
"autofocus"?: WarpButton['autofocus'];
|
|
185
|
+
/** */
|
|
186
|
+
"variant"?: WarpButton['variant'];
|
|
187
|
+
/** */
|
|
188
|
+
"quiet"?: WarpButton['quiet'];
|
|
189
|
+
/** */
|
|
190
|
+
"small"?: WarpButton['small'];
|
|
191
|
+
/** */
|
|
192
|
+
"loading"?: WarpButton['loading'];
|
|
193
|
+
/** */
|
|
194
|
+
"href"?: WarpButton['href'];
|
|
195
|
+
/** */
|
|
196
|
+
"target"?: WarpButton['target'];
|
|
197
|
+
/** */
|
|
198
|
+
"rel"?: WarpButton['rel'];
|
|
199
|
+
/** */
|
|
200
|
+
"full-width"?: WarpButton['fullWidth'];
|
|
201
|
+
/** */
|
|
202
|
+
"fullWidth"?: WarpButton['fullWidth'];
|
|
203
|
+
/** */
|
|
204
|
+
"button-class"?: WarpButton['buttonClass'];
|
|
205
|
+
/** */
|
|
206
|
+
"buttonClass"?: WarpButton['buttonClass'];
|
|
207
|
+
/** */
|
|
208
|
+
"name"?: WarpButton['name'];
|
|
209
|
+
/** */
|
|
210
|
+
"value"?: WarpButton['value'];
|
|
211
|
+
/** */
|
|
212
|
+
"ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
|
|
140
213
|
|
|
141
214
|
|
|
142
215
|
}
|
|
@@ -222,78 +295,6 @@ export type WarpBreadcrumbsProps = {
|
|
|
222
295
|
}
|
|
223
296
|
|
|
224
297
|
|
|
225
|
-
export type WarpLinkProps = {
|
|
226
|
-
/** */
|
|
227
|
-
"autofocus"?: WarpLink['autofocus'];
|
|
228
|
-
/** */
|
|
229
|
-
"variant"?: WarpLink['variant'];
|
|
230
|
-
/** */
|
|
231
|
-
"quiet"?: WarpLink['quiet'];
|
|
232
|
-
/** */
|
|
233
|
-
"small"?: WarpLink['small'];
|
|
234
|
-
/** */
|
|
235
|
-
"href"?: WarpLink['href'];
|
|
236
|
-
/** */
|
|
237
|
-
"disabled"?: WarpLink['disabled'];
|
|
238
|
-
/** */
|
|
239
|
-
"target"?: WarpLink['target'];
|
|
240
|
-
/** */
|
|
241
|
-
"rel"?: WarpLink['rel'];
|
|
242
|
-
/** */
|
|
243
|
-
"full-width"?: WarpLink['fullWidth'];
|
|
244
|
-
/** */
|
|
245
|
-
"fullWidth"?: WarpLink['fullWidth'];
|
|
246
|
-
/** */
|
|
247
|
-
"button-class"?: WarpLink['buttonClass'];
|
|
248
|
-
/** */
|
|
249
|
-
"buttonClass"?: WarpLink['buttonClass'];
|
|
250
|
-
/** */
|
|
251
|
-
"name"?: WarpLink['name'];
|
|
252
|
-
/** */
|
|
253
|
-
"classes"?: WarpLink['classes'];
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
export type WarpButtonProps = {
|
|
260
|
-
/** */
|
|
261
|
-
"type"?: WarpButton['type'];
|
|
262
|
-
/** */
|
|
263
|
-
"autofocus"?: WarpButton['autofocus'];
|
|
264
|
-
/** */
|
|
265
|
-
"variant"?: WarpButton['variant'];
|
|
266
|
-
/** */
|
|
267
|
-
"quiet"?: WarpButton['quiet'];
|
|
268
|
-
/** */
|
|
269
|
-
"small"?: WarpButton['small'];
|
|
270
|
-
/** */
|
|
271
|
-
"loading"?: WarpButton['loading'];
|
|
272
|
-
/** */
|
|
273
|
-
"href"?: WarpButton['href'];
|
|
274
|
-
/** */
|
|
275
|
-
"target"?: WarpButton['target'];
|
|
276
|
-
/** */
|
|
277
|
-
"rel"?: WarpButton['rel'];
|
|
278
|
-
/** */
|
|
279
|
-
"full-width"?: WarpButton['fullWidth'];
|
|
280
|
-
/** */
|
|
281
|
-
"fullWidth"?: WarpButton['fullWidth'];
|
|
282
|
-
/** */
|
|
283
|
-
"button-class"?: WarpButton['buttonClass'];
|
|
284
|
-
/** */
|
|
285
|
-
"buttonClass"?: WarpButton['buttonClass'];
|
|
286
|
-
/** */
|
|
287
|
-
"name"?: WarpButton['name'];
|
|
288
|
-
/** */
|
|
289
|
-
"value"?: WarpButton['value'];
|
|
290
|
-
/** */
|
|
291
|
-
"ariaValueTextLoading"?: WarpButton['ariaValueTextLoading'];
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
|
|
297
298
|
export type WarpCardProps = {
|
|
298
299
|
/** */
|
|
299
300
|
"selected"?: WarpCard['selected'];
|
|
@@ -707,8 +708,6 @@ export type WarpSelectProps = {
|
|
|
707
708
|
/** Renders the field in a readonly state. */
|
|
708
709
|
"readOnly"?: WarpSelect['readOnly'];
|
|
709
710
|
/** */
|
|
710
|
-
"_options"?: WarpSelect['_options'];
|
|
711
|
-
/** */
|
|
712
711
|
"name"?: WarpSelect['name'];
|
|
713
712
|
/** */
|
|
714
713
|
"value"?: WarpSelect['value'];
|
|
@@ -873,19 +872,6 @@ export type WarpSwitchProps = {
|
|
|
873
872
|
}
|
|
874
873
|
|
|
875
874
|
|
|
876
|
-
export type WarpTabsProps = {
|
|
877
|
-
/** */
|
|
878
|
-
"active"?: WarpTabs['active'];
|
|
879
|
-
/** */
|
|
880
|
-
"tab-class"?: WarpTabs['tabClass'];
|
|
881
|
-
/** */
|
|
882
|
-
"tabClass"?: WarpTabs['tabClass'];
|
|
883
|
-
|
|
884
|
-
/** */
|
|
885
|
-
"onchange"?: (e: CustomEvent<CustomEvent>) => void;
|
|
886
|
-
}
|
|
887
|
-
|
|
888
|
-
|
|
889
875
|
export type WarpTabProps = {
|
|
890
876
|
/** */
|
|
891
877
|
"name"?: WarpTab['name'];
|
|
@@ -911,11 +897,48 @@ export type WarpTabPanelProps = {
|
|
|
911
897
|
"hidden"?: WarpTabPanel['hidden'];
|
|
912
898
|
|
|
913
899
|
|
|
900
|
+
}
|
|
901
|
+
|
|
902
|
+
|
|
903
|
+
export type WarpTabsProps = {
|
|
904
|
+
/** */
|
|
905
|
+
"active"?: WarpTabs['active'];
|
|
906
|
+
/** */
|
|
907
|
+
"tab-class"?: WarpTabs['tabClass'];
|
|
908
|
+
/** */
|
|
909
|
+
"tabClass"?: WarpTabs['tabClass'];
|
|
910
|
+
|
|
911
|
+
/** */
|
|
912
|
+
"onchange"?: (e: CustomEvent<CustomEvent>) => void;
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
|
|
916
|
+
export type WarpToastContainerProps = {
|
|
917
|
+
|
|
918
|
+
|
|
914
919
|
}
|
|
915
920
|
|
|
916
921
|
export type CustomElements = {
|
|
917
922
|
|
|
918
923
|
|
|
924
|
+
/**
|
|
925
|
+
* Alert is an inline component used for displaying different types of messages.
|
|
926
|
+
*
|
|
927
|
+
* For accessibility reasons, alert should appear close to the element that triggered it.
|
|
928
|
+
*
|
|
929
|
+
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/feedback-alert--docs)
|
|
930
|
+
*
|
|
931
|
+
* ## Attributes & Properties
|
|
932
|
+
*
|
|
933
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
934
|
+
*
|
|
935
|
+
* - `variant`: undefined
|
|
936
|
+
* - `show`: undefined
|
|
937
|
+
* - `role`: undefined
|
|
938
|
+
*/
|
|
939
|
+
"w-alert": Partial<WarpAlertProps & BaseProps<WarpAlert> & BaseEvents>;
|
|
940
|
+
|
|
941
|
+
|
|
919
942
|
/**
|
|
920
943
|
* This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
|
|
921
944
|
*
|
|
@@ -938,21 +961,55 @@ export type WarpTabPanelProps = {
|
|
|
938
961
|
|
|
939
962
|
|
|
940
963
|
/**
|
|
941
|
-
*
|
|
964
|
+
* Buttons are used to perform actions, with different visuals for different needs.
|
|
942
965
|
*
|
|
943
|
-
*
|
|
966
|
+
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
|
|
944
967
|
*
|
|
945
|
-
*
|
|
968
|
+
* ## Attributes & Properties
|
|
969
|
+
*
|
|
970
|
+
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
971
|
+
*
|
|
972
|
+
* - `autofocus`: undefined
|
|
973
|
+
* - `variant`: undefined
|
|
974
|
+
* - `quiet`: undefined
|
|
975
|
+
* - `small`: undefined
|
|
976
|
+
* - `href`: undefined
|
|
977
|
+
* - `disabled`: undefined
|
|
978
|
+
* - `target`: undefined
|
|
979
|
+
* - `rel`: undefined
|
|
980
|
+
* - `full-width`/`fullWidth`: undefined
|
|
981
|
+
* - `button-class`/`buttonClass`: undefined
|
|
982
|
+
* - `name`: undefined
|
|
983
|
+
* - `classes`: undefined (property only)
|
|
984
|
+
*/
|
|
985
|
+
"w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
|
|
986
|
+
|
|
987
|
+
|
|
988
|
+
/**
|
|
989
|
+
* Buttons are used to perform actions, widh different visuals for different needs.
|
|
990
|
+
*
|
|
991
|
+
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
|
|
946
992
|
*
|
|
947
993
|
* ## Attributes & Properties
|
|
948
994
|
*
|
|
949
995
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
950
996
|
*
|
|
997
|
+
* - `type`: undefined
|
|
998
|
+
* - `autofocus`: undefined
|
|
951
999
|
* - `variant`: undefined
|
|
952
|
-
* - `
|
|
953
|
-
* - `
|
|
1000
|
+
* - `quiet`: undefined
|
|
1001
|
+
* - `small`: undefined
|
|
1002
|
+
* - `loading`: undefined
|
|
1003
|
+
* - `href`: undefined
|
|
1004
|
+
* - `target`: undefined
|
|
1005
|
+
* - `rel`: undefined
|
|
1006
|
+
* - `full-width`/`fullWidth`: undefined
|
|
1007
|
+
* - `button-class`/`buttonClass`: undefined
|
|
1008
|
+
* - `name`: undefined
|
|
1009
|
+
* - `value`: undefined
|
|
1010
|
+
* - `ariaValueTextLoading`: undefined (property only)
|
|
954
1011
|
*/
|
|
955
|
-
"w-
|
|
1012
|
+
"w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
|
|
956
1013
|
|
|
957
1014
|
|
|
958
1015
|
/**
|
|
@@ -1040,58 +1097,6 @@ export type WarpTabPanelProps = {
|
|
|
1040
1097
|
"w-breadcrumbs": Partial<WarpBreadcrumbsProps & BaseProps<WarpBreadcrumbs> & BaseEvents>;
|
|
1041
1098
|
|
|
1042
1099
|
|
|
1043
|
-
/**
|
|
1044
|
-
* Buttons are used to perform actions, with different visuals for different needs.
|
|
1045
|
-
*
|
|
1046
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-link--docs)
|
|
1047
|
-
*
|
|
1048
|
-
* ## Attributes & Properties
|
|
1049
|
-
*
|
|
1050
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1051
|
-
*
|
|
1052
|
-
* - `autofocus`: undefined
|
|
1053
|
-
* - `variant`: undefined
|
|
1054
|
-
* - `quiet`: undefined
|
|
1055
|
-
* - `small`: undefined
|
|
1056
|
-
* - `href`: undefined
|
|
1057
|
-
* - `disabled`: undefined
|
|
1058
|
-
* - `target`: undefined
|
|
1059
|
-
* - `rel`: undefined
|
|
1060
|
-
* - `full-width`/`fullWidth`: undefined
|
|
1061
|
-
* - `button-class`/`buttonClass`: undefined
|
|
1062
|
-
* - `name`: undefined
|
|
1063
|
-
* - `classes`: undefined (property only)
|
|
1064
|
-
*/
|
|
1065
|
-
"w-link": Partial<WarpLinkProps & BaseProps<WarpLink> & BaseEvents>;
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
/**
|
|
1069
|
-
* Buttons are used to perform actions, widh different visuals for different needs.
|
|
1070
|
-
*
|
|
1071
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/buttons-button--docs)
|
|
1072
|
-
*
|
|
1073
|
-
* ## Attributes & Properties
|
|
1074
|
-
*
|
|
1075
|
-
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1076
|
-
*
|
|
1077
|
-
* - `type`: undefined
|
|
1078
|
-
* - `autofocus`: undefined
|
|
1079
|
-
* - `variant`: undefined
|
|
1080
|
-
* - `quiet`: undefined
|
|
1081
|
-
* - `small`: undefined
|
|
1082
|
-
* - `loading`: undefined
|
|
1083
|
-
* - `href`: undefined
|
|
1084
|
-
* - `target`: undefined
|
|
1085
|
-
* - `rel`: undefined
|
|
1086
|
-
* - `full-width`/`fullWidth`: undefined
|
|
1087
|
-
* - `button-class`/`buttonClass`: undefined
|
|
1088
|
-
* - `name`: undefined
|
|
1089
|
-
* - `value`: undefined
|
|
1090
|
-
* - `ariaValueTextLoading`: undefined (property only)
|
|
1091
|
-
*/
|
|
1092
|
-
"w-button": Partial<WarpButtonProps & BaseProps<WarpButton> & BaseEvents>;
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
1100
|
/**
|
|
1096
1101
|
* Card is a layout component used for separating content areas on a page.
|
|
1097
1102
|
*
|
|
@@ -1528,7 +1533,6 @@ export type WarpTabPanelProps = {
|
|
|
1528
1533
|
* - `optional`: Whether to show optional text
|
|
1529
1534
|
* - `disabled`: Renders the field in a disabled state.
|
|
1530
1535
|
* - `read-only`/`readOnly`: Renders the field in a readonly state.
|
|
1531
|
-
* - `_options`: undefined
|
|
1532
1536
|
* - `name`: undefined
|
|
1533
1537
|
* - `value`: undefined
|
|
1534
1538
|
*
|
|
@@ -1717,7 +1721,7 @@ export type WarpTabPanelProps = {
|
|
|
1717
1721
|
|
|
1718
1722
|
|
|
1719
1723
|
/**
|
|
1720
|
-
*
|
|
1724
|
+
* Individual tab component used within w-tabs container.
|
|
1721
1725
|
*
|
|
1722
1726
|
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
|
|
1723
1727
|
*
|
|
@@ -1725,20 +1729,18 @@ export type WarpTabPanelProps = {
|
|
|
1725
1729
|
*
|
|
1726
1730
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1727
1731
|
*
|
|
1732
|
+
* - `name`: undefined
|
|
1733
|
+
* - `label`: undefined
|
|
1728
1734
|
* - `active`: undefined
|
|
1735
|
+
* - `over`: undefined
|
|
1729
1736
|
* - `tab-class`/`tabClass`: undefined
|
|
1730
|
-
*
|
|
1731
|
-
* ## Events
|
|
1732
|
-
*
|
|
1733
|
-
* Events that will be emitted by the component.
|
|
1734
|
-
*
|
|
1735
|
-
* - `change`: undefined
|
|
1736
1737
|
*/
|
|
1737
|
-
"w-
|
|
1738
|
+
"w-tab": Partial<WarpTabProps & BaseProps<WarpTab> & BaseEvents>;
|
|
1738
1739
|
|
|
1739
1740
|
|
|
1740
1741
|
/**
|
|
1741
|
-
*
|
|
1742
|
+
* Tab panel component that holds content for individual tabs.
|
|
1743
|
+
* Each tab panel should have a name that matches a corresponding tab.
|
|
1742
1744
|
*
|
|
1743
1745
|
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
|
|
1744
1746
|
*
|
|
@@ -1747,17 +1749,13 @@ export type WarpTabPanelProps = {
|
|
|
1747
1749
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1748
1750
|
*
|
|
1749
1751
|
* - `name`: undefined
|
|
1750
|
-
* - `
|
|
1751
|
-
* - `active`: undefined
|
|
1752
|
-
* - `over`: undefined
|
|
1753
|
-
* - `tab-class`/`tabClass`: undefined
|
|
1752
|
+
* - `hidden`: undefined
|
|
1754
1753
|
*/
|
|
1755
|
-
"w-tab": Partial<
|
|
1754
|
+
"w-tab-panel": Partial<WarpTabPanelProps & BaseProps<WarpTabPanel> & BaseEvents>;
|
|
1756
1755
|
|
|
1757
1756
|
|
|
1758
1757
|
/**
|
|
1759
|
-
*
|
|
1760
|
-
* Each tab panel should have a name that matches a corresponding tab.
|
|
1758
|
+
* Tabs are used to organize content by grouping similar information on the same page.
|
|
1761
1759
|
*
|
|
1762
1760
|
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/tabs--docs)
|
|
1763
1761
|
*
|
|
@@ -1765,10 +1763,33 @@ export type WarpTabPanelProps = {
|
|
|
1765
1763
|
*
|
|
1766
1764
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
1767
1765
|
*
|
|
1768
|
-
* - `
|
|
1769
|
-
* - `
|
|
1766
|
+
* - `active`: undefined
|
|
1767
|
+
* - `tab-class`/`tabClass`: undefined
|
|
1768
|
+
* - `tabs`: undefined (property only) (readonly)
|
|
1769
|
+
* - `activeTab`: undefined (property only) (readonly)
|
|
1770
|
+
*
|
|
1771
|
+
* ## Events
|
|
1772
|
+
*
|
|
1773
|
+
* Events that will be emitted by the component.
|
|
1774
|
+
*
|
|
1775
|
+
* - `change`: undefined
|
|
1770
1776
|
*/
|
|
1771
|
-
"w-
|
|
1777
|
+
"w-tabs": Partial<WarpTabsProps & BaseProps<WarpTabs> & BaseEvents>;
|
|
1778
|
+
|
|
1779
|
+
|
|
1780
|
+
/**
|
|
1781
|
+
*
|
|
1782
|
+
*
|
|
1783
|
+
* ## Methods
|
|
1784
|
+
*
|
|
1785
|
+
* Methods that can be called to access component functionality.
|
|
1786
|
+
*
|
|
1787
|
+
* - `init() => void`: undefined
|
|
1788
|
+
* - `get(id: string | number) => ToastInternal | undefined`: undefined
|
|
1789
|
+
* - `set(toast: ToastOptions) => Map<string | number, ToastInternal>`: undefined
|
|
1790
|
+
* - `del(id: string | number) => Promise<boolean>`: undefined
|
|
1791
|
+
*/
|
|
1792
|
+
"w-toast-container": Partial<WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents>;
|
|
1772
1793
|
}
|
|
1773
1794
|
|
|
1774
1795
|
export type CustomCssProperties = {
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Affix } from './react';
|
|
3
|
+
declare const _default: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("@lit/react").ReactWebComponent<import(".").WarpAffix, {}>;
|
|
6
|
+
};
|
|
7
|
+
export default _default;
|
|
8
|
+
export type Story = StoryObj<typeof Affix>;
|
|
9
|
+
export declare const Default: Story;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
1
|
import { spread } from '@open-wc/lit-helpers';
|
|
3
2
|
import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
|
|
3
|
+
import { html } from 'lit';
|
|
4
4
|
import { prespread } from '../../.storybook/utilities.js';
|
|
5
5
|
import './index.js';
|
|
6
6
|
const { events, args, argTypes } = getStorybookHelpers('w-affix');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var be=Object.create;var S=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var pe=Object.getOwnPropertyNames;var ue=Object.getPrototypeOf,ge=Object.prototype.hasOwnProperty;var R=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var he=(r,e,o,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of pe(e))!ge.call(r,a)&&a!==o&&S(r,a,{get:()=>e[a],enumerable:!(t=A(e,a))||t.enumerable});return r};var me=(r,e,o)=>(o=r!=null?be(ue(r)):{},he(e||!r||!r.__esModule?S(o,"default",{value:r,enumerable:!0}):o,r));var x=(r,e,o,t)=>{for(var a=t>1?void 0:t?A(e,o):e,s=r.length-1,i;s>=0;s--)(i=r[s])&&(a=(t?i(e,o,a):i(a))||a);return t&&a&&S(e,o,a),a};var H=R(v=>{"use strict";Object.defineProperty(v,"__esModule",{value:!0});v.errorMessages=v.ErrorType=void 0;var w;(function(r){r.MalformedUnicode="MALFORMED_UNICODE",r.MalformedHexadecimal="MALFORMED_HEXADECIMAL",r.CodePointLimit="CODE_POINT_LIMIT",r.OctalDeprecation="OCTAL_DEPRECATION",r.EndOfString="END_OF_STRING"})(w=v.ErrorType||(v.ErrorType={}));v.errorMessages=new Map([[w.MalformedUnicode,"malformed Unicode character escape sequence"],[w.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[w.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[w.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[w.EndOfString,"malformed escape sequence at end of string"]])});var K=R(p=>{"use strict";Object.defineProperty(p,"__esModule",{value:!0});p.unraw=p.errorMessages=p.ErrorType=void 0;var c=H();Object.defineProperty(p,"ErrorType",{enumerable:!0,get:function(){return c.ErrorType}});Object.defineProperty(p,"errorMessages",{enumerable:!0,get:function(){return c.errorMessages}});function fe(r){return!r.match(/[^a-f0-9]/i)?parseInt(r,16):NaN}function _(r,e,o){let t=fe(r);if(Number.isNaN(t)||o!==void 0&&o!==r.length)throw new SyntaxError(c.errorMessages.get(e));return t}function we(r){let e=_(r,c.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function J(r,e){let o=_(r,c.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=_(e,c.ErrorType.MalformedUnicode,4);return String.fromCharCode(o,t)}return String.fromCharCode(o)}function xe(r){return r.charAt(0)==="{"&&r.charAt(r.length-1)==="}"}function ke(r){if(!xe(r))throw new SyntaxError(c.errorMessages.get(c.ErrorType.MalformedUnicode));let e=r.slice(1,-1),o=_(e,c.ErrorType.MalformedUnicode);try{return String.fromCodePoint(o)}catch(t){throw t instanceof RangeError?new SyntaxError(c.errorMessages.get(c.ErrorType.CodePointLimit)):t}}function ye(r,e=!1){if(e)throw new SyntaxError(c.errorMessages.get(c.ErrorType.OctalDeprecation));let o=parseInt(r,8);return String.fromCharCode(o)}var _e=new Map([["b","\b"],["f","\f"],["n",`
|
|
2
|
-
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});
|
|
2
|
+
`],["r","\r"],["t"," "],["v","\v"],["0","\0"]]);function ze(r){return _e.get(r)||r}var Ee=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function q(r,e=!1){return r.replace(Ee,function(o,t,a,s,i,n,l,d,h){if(t!==void 0)return"\\";if(a!==void 0)return we(a);if(s!==void 0)return ke(s);if(i!==void 0)return J(i,n);if(l!==void 0)return J(l);if(d==="0")return"\0";if(d!==void 0)return ye(d,!e);if(h!==void 0)return ze(h);throw new SyntaxError(c.errorMessages.get(c.ErrorType.EndOfString))})}p.unraw=q;p.default=q});var N=function(){for(var r=[],e=arguments.length;e--;)r[e]=arguments[e];return r.reduce(function(o,t){return o.concat(typeof t=="string"?t:Array.isArray(t)?N.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};import{html as L,LitElement as cr}from"lit";import{property as C}from"lit/decorators.js";import{ifDefined as le}from"lit/directives/if-defined.js";import{css as U}from"lit";var X=U`
|
|
3
3
|
*,
|
|
4
4
|
:before,
|
|
5
5
|
:after {
|