@warp-ds/elements 2.9.1-next.6 → 2.9.2-next.1
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/custom-elements.json +72 -226
- package/dist/docs/radio/accessibility.md +1 -0
- package/dist/docs/radio/api.md +57 -0
- package/dist/docs/radio/examples.md +1 -0
- package/dist/docs/radio/radio.md +69 -0
- package/dist/docs/radio/usage.md +1 -0
- package/dist/docs/radio-group/accessibility.md +1 -0
- package/dist/docs/radio-group/api.md +69 -0
- package/dist/docs/radio-group/examples.md +68 -0
- package/dist/docs/radio-group/radio-group.md +311 -0
- package/dist/docs/radio-group/styling.md +118 -0
- package/dist/docs/radio-group/usage.md +44 -0
- package/dist/docs/select/accessibility.md +2 -0
- package/dist/docs/select/api.md +20 -16
- package/dist/docs/select/examples.md +116 -0
- package/dist/docs/select/select.md +168 -18
- package/dist/docs/select/usage.md +30 -0
- package/dist/index.d.ts +136 -185
- package/dist/packages/radio/radio.d.ts +51 -13
- package/dist/packages/radio/radio.js +3 -3
- package/dist/packages/radio/radio.js.map +3 -3
- package/dist/packages/radio/radio.react.stories.d.ts +1 -1
- package/dist/packages/radio/radio.stories.d.ts +2 -2
- package/dist/packages/radio/react.d.ts +2 -2
- package/dist/packages/radio-group/radio-group.d.ts +43 -5
- package/dist/packages/radio-group/radio-group.js +7 -7
- package/dist/packages/radio-group/radio-group.js.map +3 -3
- package/dist/packages/radio-group/react.d.ts +4 -4
- package/dist/packages/select/select.d.ts +32 -48
- package/dist/packages/select/select.js.map +2 -2
- package/dist/web-types.json +78 -46
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -20,8 +20,11 @@ import type { ModalHeader } from "./packages/modal-header/modal-header.ts";
|
|
|
20
20
|
import type { WarpPageIndicator } from "./packages/page-indicator/page-indicator.ts";
|
|
21
21
|
import type { WarpPagination } from "./packages/pagination/pagination.ts";
|
|
22
22
|
import type { WarpPill } from "./packages/pill/pill.ts";
|
|
23
|
-
import type { WRadio } from "./packages/radio/radio.ts";
|
|
24
|
-
import type {
|
|
23
|
+
import type { WarpRadio, WRadio } from "./packages/radio/radio.ts";
|
|
24
|
+
import type {
|
|
25
|
+
WarpRadioGroup,
|
|
26
|
+
WRadioGroup,
|
|
27
|
+
} from "./packages/radio-group/radio-group.ts";
|
|
25
28
|
import type { WarpSelect } from "./packages/select/select.ts";
|
|
26
29
|
import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
|
|
27
30
|
import type { WarpSlider } from "./packages/slider/slider.ts";
|
|
@@ -1316,46 +1319,34 @@ export type WarpPillSolidJsProps = {
|
|
|
1316
1319
|
textContent?: string | number;
|
|
1317
1320
|
};
|
|
1318
1321
|
|
|
1319
|
-
export type
|
|
1322
|
+
export type WarpRadioProps = {
|
|
1320
1323
|
/** The name of the radio, submitted as a name/value pair with form data. */
|
|
1321
|
-
name?:
|
|
1324
|
+
name?: WarpRadio["name"];
|
|
1322
1325
|
/** The radio's value. When selected, the radio group will receive this value. */
|
|
1323
|
-
value?:
|
|
1326
|
+
value?: WarpRadio["value"];
|
|
1324
1327
|
/** Draws the radio in a checked state (reflected to attribute). */
|
|
1325
|
-
checked?:
|
|
1328
|
+
checked?: WarpRadio["checked"];
|
|
1326
1329
|
/** Disables the radio. */
|
|
1327
|
-
disabled?:
|
|
1330
|
+
disabled?: WarpRadio["disabled"];
|
|
1328
1331
|
/** Makes the radio a required field. */
|
|
1329
|
-
required?:
|
|
1332
|
+
required?: WarpRadio["required"];
|
|
1330
1333
|
/** Draws the radio in an invalid state. */
|
|
1331
|
-
invalid?:
|
|
1332
|
-
/** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
|
|
1333
|
-
Radio-group should use _groupTabIndex directly for clarity. */
|
|
1334
|
-
tabIndex?: WRadio["tabIndex"];
|
|
1335
|
-
/** Internal tabindex for standalone radios (not in a group).
|
|
1336
|
-
Non-reflecting to avoid DOM changes during hydration. */
|
|
1337
|
-
_standaloneTabIndex?: WRadio["_standaloneTabIndex"];
|
|
1334
|
+
invalid?: WarpRadio["invalid"];
|
|
1338
1335
|
};
|
|
1339
1336
|
|
|
1340
|
-
export type
|
|
1337
|
+
export type WarpRadioSolidJsProps = {
|
|
1341
1338
|
/** The name of the radio, submitted as a name/value pair with form data. */
|
|
1342
|
-
"prop:name"?:
|
|
1339
|
+
"prop:name"?: WarpRadio["name"];
|
|
1343
1340
|
/** The radio's value. When selected, the radio group will receive this value. */
|
|
1344
|
-
"prop:value"?:
|
|
1341
|
+
"prop:value"?: WarpRadio["value"];
|
|
1345
1342
|
/** Draws the radio in a checked state (reflected to attribute). */
|
|
1346
|
-
"prop:checked"?:
|
|
1343
|
+
"prop:checked"?: WarpRadio["checked"];
|
|
1347
1344
|
/** Disables the radio. */
|
|
1348
|
-
"prop:disabled"?:
|
|
1345
|
+
"prop:disabled"?: WarpRadio["disabled"];
|
|
1349
1346
|
/** Makes the radio a required field. */
|
|
1350
|
-
"prop:required"?:
|
|
1347
|
+
"prop:required"?: WarpRadio["required"];
|
|
1351
1348
|
/** Draws the radio in an invalid state. */
|
|
1352
|
-
"prop:invalid"?:
|
|
1353
|
-
/** Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
|
|
1354
|
-
Radio-group should use _groupTabIndex directly for clarity. */
|
|
1355
|
-
"prop:tabIndex"?: WRadio["tabIndex"];
|
|
1356
|
-
/** Internal tabindex for standalone radios (not in a group).
|
|
1357
|
-
Non-reflecting to avoid DOM changes during hydration. */
|
|
1358
|
-
"prop:_standaloneTabIndex"?: WRadio["_standaloneTabIndex"];
|
|
1349
|
+
"prop:invalid"?: WarpRadio["invalid"];
|
|
1359
1350
|
|
|
1360
1351
|
/** Set the innerHTML of the element */
|
|
1361
1352
|
innerHTML?: string;
|
|
@@ -1363,46 +1354,50 @@ Non-reflecting to avoid DOM changes during hydration. */
|
|
|
1363
1354
|
textContent?: string | number;
|
|
1364
1355
|
};
|
|
1365
1356
|
|
|
1366
|
-
export type
|
|
1367
|
-
/**
|
|
1368
|
-
label?:
|
|
1369
|
-
/**
|
|
1370
|
-
"help-text"?: WRadioGroup["helpText"];
|
|
1371
|
-
/** */
|
|
1372
|
-
helpText?: WRadioGroup["helpText"];
|
|
1373
|
-
/** */
|
|
1374
|
-
optional?: WRadioGroup["optional"];
|
|
1375
|
-
/** */
|
|
1376
|
-
invalid?: WRadioGroup["invalid"];
|
|
1377
|
-
/** */
|
|
1378
|
-
name?: WRadioGroup["name"];
|
|
1379
|
-
/** */
|
|
1380
|
-
disabled?: WRadioGroup["disabled"];
|
|
1381
|
-
/** */
|
|
1382
|
-
required?: WRadioGroup["required"];
|
|
1383
|
-
/** */
|
|
1384
|
-
hasInteracted?: WRadioGroup["hasInteracted"];
|
|
1385
|
-
};
|
|
1357
|
+
export type WarpRadioGroupProps = {
|
|
1358
|
+
/** Label for the radio group. */
|
|
1359
|
+
label?: WarpRadioGroup["label"];
|
|
1360
|
+
/** Help text for the radio group.
|
|
1386
1361
|
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1362
|
+
If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
|
|
1363
|
+
"help-text"?: WarpRadioGroup["helpText"];
|
|
1364
|
+
/** Help text for the radio group.
|
|
1365
|
+
|
|
1366
|
+
If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
|
|
1367
|
+
helpText?: WarpRadioGroup["helpText"];
|
|
1368
|
+
/** Whether to show optional text next to the label. */
|
|
1369
|
+
optional?: WarpRadioGroup["optional"];
|
|
1370
|
+
/** Marks the radio group as invalid. */
|
|
1371
|
+
invalid?: WarpRadioGroup["invalid"];
|
|
1372
|
+
/** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
|
|
1373
|
+
name?: WarpRadioGroup["name"];
|
|
1374
|
+
/** Disables the radio group and all child radios. */
|
|
1375
|
+
disabled?: WarpRadioGroup["disabled"];
|
|
1376
|
+
/** Makes selecting a radio in the the group required. */
|
|
1377
|
+
required?: WarpRadioGroup["required"];
|
|
1378
|
+
};
|
|
1379
|
+
|
|
1380
|
+
export type WarpRadioGroupSolidJsProps = {
|
|
1381
|
+
/** Label for the radio group. */
|
|
1382
|
+
"prop:label"?: WarpRadioGroup["label"];
|
|
1383
|
+
/** Help text for the radio group.
|
|
1384
|
+
|
|
1385
|
+
If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
|
|
1386
|
+
"attr:help-text"?: WarpRadioGroup["helpText"];
|
|
1387
|
+
/** Help text for the radio group.
|
|
1388
|
+
|
|
1389
|
+
If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute. */
|
|
1390
|
+
"prop:helpText"?: WarpRadioGroup["helpText"];
|
|
1391
|
+
/** Whether to show optional text next to the label. */
|
|
1392
|
+
"prop:optional"?: WarpRadioGroup["optional"];
|
|
1393
|
+
/** Marks the radio group as invalid. */
|
|
1394
|
+
"prop:invalid"?: WarpRadioGroup["invalid"];
|
|
1395
|
+
/** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
|
|
1396
|
+
"prop:name"?: WarpRadioGroup["name"];
|
|
1397
|
+
/** Disables the radio group and all child radios. */
|
|
1398
|
+
"prop:disabled"?: WarpRadioGroup["disabled"];
|
|
1399
|
+
/** Makes selecting a radio in the the group required. */
|
|
1400
|
+
"prop:required"?: WarpRadioGroup["required"];
|
|
1406
1401
|
|
|
1407
1402
|
/** Set the innerHTML of the element */
|
|
1408
1403
|
innerHTML?: string;
|
|
@@ -1417,19 +1412,25 @@ export type WarpSelectProps = {
|
|
|
1417
1412
|
autoFocus?: WarpSelect["autoFocus"];
|
|
1418
1413
|
/** Whether the element should receive focus on render */
|
|
1419
1414
|
autofocus?: WarpSelect["autofocus"];
|
|
1420
|
-
/** The content displayed as the help text.
|
|
1415
|
+
/** The content displayed as the help text.
|
|
1416
|
+
|
|
1417
|
+
Paired with `invalid` to show the text as a validation error. */
|
|
1421
1418
|
"help-text"?: WarpSelect["helpText"];
|
|
1422
|
-
/** The content displayed as the help text.
|
|
1419
|
+
/** The content displayed as the help text.
|
|
1420
|
+
|
|
1421
|
+
Paired with `invalid` to show the text as a validation error. */
|
|
1423
1422
|
helpText?: WarpSelect["helpText"];
|
|
1424
|
-
/** Renders the field in an invalid state.
|
|
1423
|
+
/** Renders the field in an invalid state.
|
|
1424
|
+
|
|
1425
|
+
Paired with `help-text` to provide feedback about the error. */
|
|
1425
1426
|
invalid?: WarpSelect["invalid"];
|
|
1426
1427
|
/** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
|
|
1427
1428
|
always?: WarpSelect["always"];
|
|
1428
1429
|
/** @deprecated Use `help-text` instead. - The content displayed as the help text. */
|
|
1429
1430
|
hint?: WarpSelect["hint"];
|
|
1430
|
-
/** The content to
|
|
1431
|
+
/** The content to display as the label. */
|
|
1431
1432
|
label?: WarpSelect["label"];
|
|
1432
|
-
/** Whether to show optional
|
|
1433
|
+
/** Whether to show the optional indicator after the label. */
|
|
1433
1434
|
optional?: WarpSelect["optional"];
|
|
1434
1435
|
/** Renders the field in a disabled state. */
|
|
1435
1436
|
disabled?: WarpSelect["disabled"];
|
|
@@ -1439,9 +1440,9 @@ export type WarpSelectProps = {
|
|
|
1439
1440
|
readOnly?: WarpSelect["readOnly"];
|
|
1440
1441
|
/** Renders the field in a readonly state. */
|
|
1441
1442
|
readonly?: WarpSelect["readonly"];
|
|
1442
|
-
/**
|
|
1443
|
+
/** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
|
|
1443
1444
|
name?: WarpSelect["name"];
|
|
1444
|
-
/**
|
|
1445
|
+
/** Lets you set the current value. */
|
|
1445
1446
|
value?: WarpSelect["value"];
|
|
1446
1447
|
|
|
1447
1448
|
/** */
|
|
@@ -1455,19 +1456,25 @@ export type WarpSelectSolidJsProps = {
|
|
|
1455
1456
|
"prop:autoFocus"?: WarpSelect["autoFocus"];
|
|
1456
1457
|
/** Whether the element should receive focus on render */
|
|
1457
1458
|
"prop:autofocus"?: WarpSelect["autofocus"];
|
|
1458
|
-
/** The content displayed as the help text.
|
|
1459
|
+
/** The content displayed as the help text.
|
|
1460
|
+
|
|
1461
|
+
Paired with `invalid` to show the text as a validation error. */
|
|
1459
1462
|
"attr:help-text"?: WarpSelect["helpText"];
|
|
1460
|
-
/** The content displayed as the help text.
|
|
1463
|
+
/** The content displayed as the help text.
|
|
1464
|
+
|
|
1465
|
+
Paired with `invalid` to show the text as a validation error. */
|
|
1461
1466
|
"prop:helpText"?: WarpSelect["helpText"];
|
|
1462
|
-
/** Renders the field in an invalid state.
|
|
1467
|
+
/** Renders the field in an invalid state.
|
|
1468
|
+
|
|
1469
|
+
Paired with `help-text` to provide feedback about the error. */
|
|
1463
1470
|
"prop:invalid"?: WarpSelect["invalid"];
|
|
1464
1471
|
/** @deprecated Use `help-text` instead and only set it if you want to display the help text. - Whether to always show a hint. */
|
|
1465
1472
|
"prop:always"?: WarpSelect["always"];
|
|
1466
1473
|
/** @deprecated Use `help-text` instead. - The content displayed as the help text. */
|
|
1467
1474
|
"prop:hint"?: WarpSelect["hint"];
|
|
1468
|
-
/** The content to
|
|
1475
|
+
/** The content to display as the label. */
|
|
1469
1476
|
"prop:label"?: WarpSelect["label"];
|
|
1470
|
-
/** Whether to show optional
|
|
1477
|
+
/** Whether to show the optional indicator after the label. */
|
|
1471
1478
|
"prop:optional"?: WarpSelect["optional"];
|
|
1472
1479
|
/** Renders the field in a disabled state. */
|
|
1473
1480
|
"prop:disabled"?: WarpSelect["disabled"];
|
|
@@ -1477,9 +1484,9 @@ export type WarpSelectSolidJsProps = {
|
|
|
1477
1484
|
"prop:readOnly"?: WarpSelect["readOnly"];
|
|
1478
1485
|
/** Renders the field in a readonly state. */
|
|
1479
1486
|
"prop:readonly"?: WarpSelect["readonly"];
|
|
1480
|
-
/**
|
|
1487
|
+
/** The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form. */
|
|
1481
1488
|
"prop:name"?: WarpSelect["name"];
|
|
1482
|
-
/**
|
|
1489
|
+
/** Lets you set the current value. */
|
|
1483
1490
|
"prop:value"?: WarpSelect["value"];
|
|
1484
1491
|
/** */
|
|
1485
1492
|
"on:change"?: (e: CustomEvent) => void;
|
|
@@ -2531,39 +2538,27 @@ export type CustomElements = {
|
|
|
2531
2538
|
* - `disabled`: Disables the radio.
|
|
2532
2539
|
* - `required`: Makes the radio a required field.
|
|
2533
2540
|
* - `invalid`: Draws the radio in an invalid state.
|
|
2534
|
-
* - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
|
|
2535
|
-
* Radio-group should use _groupTabIndex directly for clarity. (property only)
|
|
2536
|
-
* - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
|
|
2537
|
-
* - `validity`: Returns the validity state of the radio (property only) (readonly)
|
|
2538
|
-
* - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
|
|
2539
|
-
* Non-reflecting to avoid DOM changes during hydration. (property only)
|
|
2540
|
-
*
|
|
2541
|
-
* ## Methods
|
|
2542
|
-
*
|
|
2543
|
-
* Methods that can be called to access component functionality.
|
|
2544
|
-
*
|
|
2545
|
-
* - `resetFormControl() => void`: undefined
|
|
2546
|
-
* - `checkValidity() => boolean`: Checks whether the radio passes constraint validation
|
|
2547
|
-
* - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
|
|
2548
2541
|
*/
|
|
2549
|
-
"w-radio": Partial<
|
|
2542
|
+
"w-radio": Partial<WarpRadioProps & BaseProps<WarpRadio> & BaseEvents>;
|
|
2550
2543
|
|
|
2551
2544
|
/**
|
|
2545
|
+
* Radios allow users to select a single option from a list of choices.
|
|
2552
2546
|
*
|
|
2547
|
+
* Use with `w-radio`.
|
|
2553
2548
|
*
|
|
2554
2549
|
* ## Attributes & Properties
|
|
2555
2550
|
*
|
|
2556
2551
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
2557
2552
|
*
|
|
2558
|
-
* - `label`:
|
|
2559
|
-
* - `help-text`/`helpText`:
|
|
2560
|
-
*
|
|
2561
|
-
*
|
|
2562
|
-
* - `
|
|
2563
|
-
* - `
|
|
2564
|
-
* - `
|
|
2565
|
-
* - `
|
|
2566
|
-
* - `
|
|
2553
|
+
* - `label`: Label for the radio group.
|
|
2554
|
+
* - `help-text`/`helpText`: Help text for the radio group.
|
|
2555
|
+
*
|
|
2556
|
+
* If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.
|
|
2557
|
+
* - `optional`: Whether to show optional text next to the label.
|
|
2558
|
+
* - `invalid`: Marks the radio group as invalid.
|
|
2559
|
+
* - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
2560
|
+
* - `disabled`: Disables the radio group and all child radios.
|
|
2561
|
+
* - `required`: Makes selecting a radio in the the group required.
|
|
2567
2562
|
*
|
|
2568
2563
|
* ## Slots
|
|
2569
2564
|
*
|
|
@@ -2571,57 +2566,41 @@ export type CustomElements = {
|
|
|
2571
2566
|
*
|
|
2572
2567
|
* - `label`: Alternative to the `label` attribute should you need custom HTML.
|
|
2573
2568
|
* - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
|
|
2574
|
-
*
|
|
2575
|
-
* ## Methods
|
|
2576
|
-
*
|
|
2577
|
-
* Methods that can be called to access component functionality.
|
|
2578
|
-
*
|
|
2579
|
-
* - `resetFormControl() => void`: undefined
|
|
2580
|
-
* - `focus(options?: FocusOptions) => void`: undefined
|
|
2581
|
-
* - `checkValidity() => void`: undefined
|
|
2582
|
-
* - `reportValidity() => void`: undefined
|
|
2583
2569
|
*/
|
|
2584
2570
|
"w-radio-group": Partial<
|
|
2585
|
-
|
|
2571
|
+
WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
|
|
2586
2572
|
>;
|
|
2587
2573
|
|
|
2588
2574
|
/**
|
|
2589
2575
|
* A dropdown component for selecting a single value.
|
|
2590
2576
|
*
|
|
2591
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
|
|
2592
|
-
*
|
|
2593
2577
|
* ## Attributes & Properties
|
|
2594
2578
|
*
|
|
2595
2579
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
2596
2580
|
*
|
|
2597
2581
|
* - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
|
|
2598
2582
|
* - `autofocus`: Whether the element should receive focus on render
|
|
2599
|
-
* - `help-text`/`helpText`: The content displayed as the help text.
|
|
2600
|
-
*
|
|
2583
|
+
* - `help-text`/`helpText`: The content displayed as the help text.
|
|
2584
|
+
*
|
|
2585
|
+
* Paired with `invalid` to show the text as a validation error.
|
|
2586
|
+
* - `invalid`: Renders the field in an invalid state.
|
|
2587
|
+
*
|
|
2588
|
+
* Paired with `help-text` to provide feedback about the error.
|
|
2601
2589
|
* - `always`: Whether to always show a hint.
|
|
2602
2590
|
* - `hint`: The content displayed as the help text.
|
|
2603
|
-
* - `label`: The content to
|
|
2604
|
-
* - `optional`: Whether to show optional
|
|
2591
|
+
* - `label`: The content to display as the label.
|
|
2592
|
+
* - `optional`: Whether to show the optional indicator after the label.
|
|
2605
2593
|
* - `disabled`: Renders the field in a disabled state.
|
|
2606
2594
|
* - `read-only`/`readOnly`: Renders the field in a readonly state.
|
|
2607
2595
|
* - `readonly`: Renders the field in a readonly state.
|
|
2608
|
-
* - `name`:
|
|
2609
|
-
* - `value`:
|
|
2596
|
+
* - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
2597
|
+
* - `value`: Lets you set the current value.
|
|
2610
2598
|
*
|
|
2611
2599
|
* ## Events
|
|
2612
2600
|
*
|
|
2613
2601
|
* Events that will be emitted by the component.
|
|
2614
2602
|
*
|
|
2615
2603
|
* - `change`: undefined
|
|
2616
|
-
*
|
|
2617
|
-
* ## Methods
|
|
2618
|
-
*
|
|
2619
|
-
* Methods that can be called to access component functionality.
|
|
2620
|
-
*
|
|
2621
|
-
* - `resetFormControl() => void`: undefined
|
|
2622
|
-
* - `formStateRestoreCallback(state: string | File | FormData | null, _reason: 'autocomplete' | 'restore') => void`: undefined
|
|
2623
|
-
* - `handleKeyDown(event: KeyboardEvent) => void`: undefined
|
|
2624
|
-
* - `onChange(event: Event) => void`: undefined
|
|
2625
2604
|
*/
|
|
2626
2605
|
"w-select": Partial<WarpSelectProps & BaseProps<WarpSelect> & BaseEvents>;
|
|
2627
2606
|
|
|
@@ -3578,41 +3557,29 @@ export type CustomElementsSolidJs = {
|
|
|
3578
3557
|
* - `disabled`: Disables the radio.
|
|
3579
3558
|
* - `required`: Makes the radio a required field.
|
|
3580
3559
|
* - `invalid`: Draws the radio in an invalid state.
|
|
3581
|
-
* - `tabIndex`: Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
|
|
3582
|
-
* Radio-group should use _groupTabIndex directly for clarity. (property only)
|
|
3583
|
-
* - `validationMessage`: Returns the validation message if the radio is invalid, otherwise an empty string (property only) (readonly)
|
|
3584
|
-
* - `validity`: Returns the validity state of the radio (property only) (readonly)
|
|
3585
|
-
* - `_standaloneTabIndex`: Internal tabindex for standalone radios (not in a group).
|
|
3586
|
-
* Non-reflecting to avoid DOM changes during hydration. (property only)
|
|
3587
|
-
*
|
|
3588
|
-
* ## Methods
|
|
3589
|
-
*
|
|
3590
|
-
* Methods that can be called to access component functionality.
|
|
3591
|
-
*
|
|
3592
|
-
* - `resetFormControl() => void`: undefined
|
|
3593
|
-
* - `checkValidity() => boolean`: Checks whether the radio passes constraint validation
|
|
3594
|
-
* - `reportValidity() => boolean`: Checks validity and shows the browser's validation message if invalid
|
|
3595
3560
|
*/
|
|
3596
3561
|
"w-radio": Partial<
|
|
3597
|
-
|
|
3562
|
+
WarpRadioProps & WarpRadioSolidJsProps & BaseProps<WarpRadio> & BaseEvents
|
|
3598
3563
|
>;
|
|
3599
3564
|
|
|
3600
3565
|
/**
|
|
3566
|
+
* Radios allow users to select a single option from a list of choices.
|
|
3601
3567
|
*
|
|
3568
|
+
* Use with `w-radio`.
|
|
3602
3569
|
*
|
|
3603
3570
|
* ## Attributes & Properties
|
|
3604
3571
|
*
|
|
3605
3572
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
3606
3573
|
*
|
|
3607
|
-
* - `label`:
|
|
3608
|
-
* - `help-text`/`helpText`:
|
|
3609
|
-
*
|
|
3610
|
-
*
|
|
3611
|
-
* - `
|
|
3612
|
-
* - `
|
|
3613
|
-
* - `
|
|
3614
|
-
* - `
|
|
3615
|
-
* - `
|
|
3574
|
+
* - `label`: Label for the radio group.
|
|
3575
|
+
* - `help-text`/`helpText`: Help text for the radio group.
|
|
3576
|
+
*
|
|
3577
|
+
* If you set `required` and `invalid` the group gets a default error message, but you can override it with this attribute.
|
|
3578
|
+
* - `optional`: Whether to show optional text next to the label.
|
|
3579
|
+
* - `invalid`: Marks the radio group as invalid.
|
|
3580
|
+
* - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
3581
|
+
* - `disabled`: Disables the radio group and all child radios.
|
|
3582
|
+
* - `required`: Makes selecting a radio in the the group required.
|
|
3616
3583
|
*
|
|
3617
3584
|
* ## Slots
|
|
3618
3585
|
*
|
|
@@ -3620,60 +3587,44 @@ export type CustomElementsSolidJs = {
|
|
|
3620
3587
|
*
|
|
3621
3588
|
* - `label`: Alternative to the `label` attribute should you need custom HTML.
|
|
3622
3589
|
* - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
|
|
3623
|
-
*
|
|
3624
|
-
* ## Methods
|
|
3625
|
-
*
|
|
3626
|
-
* Methods that can be called to access component functionality.
|
|
3627
|
-
*
|
|
3628
|
-
* - `resetFormControl() => void`: undefined
|
|
3629
|
-
* - `focus(options?: FocusOptions) => void`: undefined
|
|
3630
|
-
* - `checkValidity() => void`: undefined
|
|
3631
|
-
* - `reportValidity() => void`: undefined
|
|
3632
3590
|
*/
|
|
3633
3591
|
"w-radio-group": Partial<
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
BaseProps<
|
|
3592
|
+
WarpRadioGroupProps &
|
|
3593
|
+
WarpRadioGroupSolidJsProps &
|
|
3594
|
+
BaseProps<WarpRadioGroup> &
|
|
3637
3595
|
BaseEvents
|
|
3638
3596
|
>;
|
|
3639
3597
|
|
|
3640
3598
|
/**
|
|
3641
3599
|
* A dropdown component for selecting a single value.
|
|
3642
3600
|
*
|
|
3643
|
-
* [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-select--docs)
|
|
3644
|
-
*
|
|
3645
3601
|
* ## Attributes & Properties
|
|
3646
3602
|
*
|
|
3647
3603
|
* Component attributes and properties that can be applied to the element or by using JavaScript.
|
|
3648
3604
|
*
|
|
3649
3605
|
* - `auto-focus`/`autoFocus`: Whether the element should receive focus on render.
|
|
3650
3606
|
* - `autofocus`: Whether the element should receive focus on render
|
|
3651
|
-
* - `help-text`/`helpText`: The content displayed as the help text.
|
|
3652
|
-
*
|
|
3607
|
+
* - `help-text`/`helpText`: The content displayed as the help text.
|
|
3608
|
+
*
|
|
3609
|
+
* Paired with `invalid` to show the text as a validation error.
|
|
3610
|
+
* - `invalid`: Renders the field in an invalid state.
|
|
3611
|
+
*
|
|
3612
|
+
* Paired with `help-text` to provide feedback about the error.
|
|
3653
3613
|
* - `always`: Whether to always show a hint.
|
|
3654
3614
|
* - `hint`: The content displayed as the help text.
|
|
3655
|
-
* - `label`: The content to
|
|
3656
|
-
* - `optional`: Whether to show optional
|
|
3615
|
+
* - `label`: The content to display as the label.
|
|
3616
|
+
* - `optional`: Whether to show the optional indicator after the label.
|
|
3657
3617
|
* - `disabled`: Renders the field in a disabled state.
|
|
3658
3618
|
* - `read-only`/`readOnly`: Renders the field in a readonly state.
|
|
3659
3619
|
* - `readonly`: Renders the field in a readonly state.
|
|
3660
|
-
* - `name`:
|
|
3661
|
-
* - `value`:
|
|
3620
|
+
* - `name`: The [name](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#name) of the select when submitting the form.
|
|
3621
|
+
* - `value`: Lets you set the current value.
|
|
3662
3622
|
*
|
|
3663
3623
|
* ## Events
|
|
3664
3624
|
*
|
|
3665
3625
|
* Events that will be emitted by the component.
|
|
3666
3626
|
*
|
|
3667
3627
|
* - `change`: undefined
|
|
3668
|
-
*
|
|
3669
|
-
* ## Methods
|
|
3670
|
-
*
|
|
3671
|
-
* Methods that can be called to access component functionality.
|
|
3672
|
-
*
|
|
3673
|
-
* - `resetFormControl() => void`: undefined
|
|
3674
|
-
* - `formStateRestoreCallback(state: string | File | FormData | null, _reason: 'autocomplete' | 'restore') => void`: undefined
|
|
3675
|
-
* - `handleKeyDown(event: KeyboardEvent) => void`: undefined
|
|
3676
|
-
* - `onChange(event: Event) => void`: undefined
|
|
3677
3628
|
*/
|
|
3678
3629
|
"w-select": Partial<
|
|
3679
3630
|
WarpSelectProps &
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import type { PropertyValues } from 'lit';
|
|
2
2
|
import { LitElement } from 'lit';
|
|
3
|
-
declare const
|
|
4
|
-
|
|
3
|
+
declare const WarpRadio_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
|
|
4
|
+
/**
|
|
5
|
+
* @parent w-radio-group
|
|
6
|
+
*/
|
|
7
|
+
export declare class WarpRadio extends WarpRadio_base {
|
|
5
8
|
#private;
|
|
6
9
|
static styles: import("lit").CSSResult[];
|
|
10
|
+
/** @internal */
|
|
7
11
|
static shadowRootOptions: {
|
|
8
12
|
delegatesFocus: boolean;
|
|
9
13
|
clonable?: boolean;
|
|
@@ -12,17 +16,29 @@ export declare class WRadio extends WRadio_base {
|
|
|
12
16
|
serializable?: boolean;
|
|
13
17
|
slotAssignment?: SlotAssignmentMode;
|
|
14
18
|
};
|
|
15
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* The name of the radio, submitted as a name/value pair with form data.
|
|
21
|
+
*/
|
|
16
22
|
name: string;
|
|
17
|
-
/**
|
|
23
|
+
/**
|
|
24
|
+
* The radio's value. When selected, the radio group will receive this value.
|
|
25
|
+
*/
|
|
18
26
|
value: string | null;
|
|
19
|
-
/**
|
|
27
|
+
/**
|
|
28
|
+
* Draws the radio in a checked state (reflected to attribute).
|
|
29
|
+
*/
|
|
20
30
|
checked: boolean;
|
|
21
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Disables the radio.
|
|
33
|
+
*/
|
|
22
34
|
disabled: boolean;
|
|
23
|
-
/**
|
|
35
|
+
/**
|
|
36
|
+
* Makes the radio a required field.
|
|
37
|
+
*/
|
|
24
38
|
required: boolean;
|
|
25
|
-
/**
|
|
39
|
+
/**
|
|
40
|
+
* Draws the radio in an invalid state.
|
|
41
|
+
*/
|
|
26
42
|
invalid: boolean;
|
|
27
43
|
/**
|
|
28
44
|
* Internal tabindex managed by parent radio-group.
|
|
@@ -33,11 +49,14 @@ export declare class WRadio extends WRadio_base {
|
|
|
33
49
|
/**
|
|
34
50
|
* Override tabIndex getter to return the computed internal tabIndex.
|
|
35
51
|
* This allows external code to check if the radio is focusable.
|
|
52
|
+
* @internal
|
|
36
53
|
*/
|
|
37
54
|
get tabIndex(): number;
|
|
38
55
|
/**
|
|
39
56
|
* Override tabIndex setter to set _groupTabIndex (for backwards compatibility).
|
|
40
57
|
* Radio-group should use _groupTabIndex directly for clarity.
|
|
58
|
+
*
|
|
59
|
+
* @internal
|
|
41
60
|
*/
|
|
42
61
|
set tabIndex(value: number);
|
|
43
62
|
constructor();
|
|
@@ -49,14 +68,27 @@ export declare class WRadio extends WRadio_base {
|
|
|
49
68
|
private handleClick;
|
|
50
69
|
private handleInvalid;
|
|
51
70
|
private handleKeyDown;
|
|
71
|
+
/** @internal */
|
|
52
72
|
resetFormControl(): void;
|
|
53
|
-
/**
|
|
73
|
+
/**
|
|
74
|
+
* Returns the validation message if the radio is invalid, otherwise an empty string
|
|
75
|
+
* @internal
|
|
76
|
+
*/
|
|
54
77
|
get validationMessage(): string;
|
|
55
|
-
/**
|
|
78
|
+
/**
|
|
79
|
+
* Returns the validity state of the radio
|
|
80
|
+
* @internal
|
|
81
|
+
*/
|
|
56
82
|
get validity(): ValidityState;
|
|
57
|
-
/**
|
|
83
|
+
/**
|
|
84
|
+
* Checks whether the radio passes constraint validation
|
|
85
|
+
* @internal
|
|
86
|
+
*/
|
|
58
87
|
checkValidity(): boolean;
|
|
59
|
-
/**
|
|
88
|
+
/**
|
|
89
|
+
* Checks validity and shows the browser's validation message if invalid
|
|
90
|
+
* @internal
|
|
91
|
+
*/
|
|
60
92
|
reportValidity(): boolean;
|
|
61
93
|
private isInGroup;
|
|
62
94
|
private getRadioScope;
|
|
@@ -70,6 +102,8 @@ export declare class WRadio extends WRadio_base {
|
|
|
70
102
|
/**
|
|
71
103
|
* Internal tabindex for standalone radios (not in a group).
|
|
72
104
|
* Non-reflecting to avoid DOM changes during hydration.
|
|
105
|
+
*
|
|
106
|
+
* @internal
|
|
73
107
|
*/
|
|
74
108
|
_standaloneTabIndex: number | undefined;
|
|
75
109
|
protected firstUpdated(): void;
|
|
@@ -79,9 +113,13 @@ export declare class WRadio extends WRadio_base {
|
|
|
79
113
|
private shouldSyncFormState;
|
|
80
114
|
render(): import("lit").TemplateResult<1>;
|
|
81
115
|
}
|
|
116
|
+
/**
|
|
117
|
+
* @deprecated Exported for backwards compatibility only, use `WarpRadio`
|
|
118
|
+
*/
|
|
119
|
+
export declare const WRadio: typeof WarpRadio;
|
|
82
120
|
declare global {
|
|
83
121
|
interface HTMLElementTagNameMap {
|
|
84
|
-
'w-radio':
|
|
122
|
+
'w-radio': WarpRadio;
|
|
85
123
|
}
|
|
86
124
|
}
|
|
87
125
|
export {};
|