@ds-autonomie/web-components 1.0.1 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/dist/chunks/{chunk.K6WCEYZI.js → chunk.2CCKS3CP.js} +1 -1
- package/dist/chunks/{chunk.HH63FIEF.js → chunk.2DGAEK66.js} +12 -3
- package/dist/chunks/{chunk.O73OYTYJ.js → chunk.2HV2U4RQ.js} +2 -4
- package/dist/chunks/{chunk.EHVJT7BH.js → chunk.2R6P5TGQ.js} +1 -1
- package/dist/chunks/{chunk.KOH5V4C6.js → chunk.4MC32HP7.js} +21 -17
- package/dist/chunks/{chunk.BLPP3Q5H.js → chunk.5324JGM4.js} +11 -4
- package/dist/chunks/{chunk.WIEJJS3W.js → chunk.6BJBVSW4.js} +1 -1
- package/dist/chunks/{chunk.D7CATJYB.js → chunk.6IH66JBY.js} +1 -1
- package/dist/chunks/{chunk.YS7MY5CH.js → chunk.7EWUWW3E.js} +18 -24
- package/dist/chunks/chunk.7HGZSZJK.js +409 -0
- package/dist/chunks/{chunk.ODSCDJDO.js → chunk.ARVWTY56.js} +5 -4
- package/dist/chunks/{chunk.KDAK2GXX.js → chunk.AYXPVAYS.js} +1 -1
- package/dist/chunks/{chunk.WSVP75MH.js → chunk.CBMFAOZI.js} +1 -1
- package/dist/chunks/chunk.CMJ2SRTL.js +26 -0
- package/dist/chunks/{chunk.DURVPB6M.js → chunk.D6DEGG4H.js} +25 -6
- package/dist/chunks/{chunk.MY434P47.js → chunk.DFTZEFHF.js} +2 -2
- package/dist/chunks/{chunk.4XT2OJD2.js → chunk.DZWH4V6H.js} +8 -4
- package/dist/chunks/{chunk.NDEZEB3Z.js → chunk.EDRQ2QWB.js} +10 -5
- package/dist/chunks/{chunk.XSCX6TC5.js → chunk.EXIGM5NV.js} +4 -1
- package/dist/chunks/{chunk.OVK7QCA7.js → chunk.F4XMSVNF.js} +13 -9
- package/dist/chunks/{chunk.4A3WMGMZ.js → chunk.FHDPJN6L.js} +1 -1
- package/dist/chunks/{chunk.ABGBXXKA.js → chunk.FTWZNCEH.js} +1 -1
- package/dist/chunks/{chunk.6FAUBLR3.js → chunk.G3ESG6Q5.js} +1 -1
- package/dist/chunks/{chunk.PWWER3ZK.js → chunk.GJCVGGCP.js} +48 -24
- package/dist/chunks/{chunk.WHK7EFIM.js → chunk.GP5Z27QB.js} +7 -4
- package/dist/chunks/{chunk.UA32LJYW.js → chunk.HEOTAAPU.js} +2 -2
- package/dist/chunks/{chunk.JETXIC4F.js → chunk.HPK6C7NJ.js} +1 -1
- package/dist/chunks/{chunk.A2PAK6VF.js → chunk.ILUHEJYG.js} +2 -2
- package/dist/chunks/{chunk.5XL2LZLC.js → chunk.IQ7SDYSC.js} +4 -0
- package/dist/chunks/{chunk.GYTA2LJC.js → chunk.J6XP4AFN.js} +1 -1
- package/dist/chunks/{chunk.UZLQVFDR.js → chunk.L6LQN6AI.js} +2 -2
- package/dist/chunks/{chunk.BEB47LM2.js → chunk.LSKBY2HF.js} +2 -2
- package/dist/chunks/{chunk.WNHQYL5W.js → chunk.MTZZV3NB.js} +4 -20
- package/dist/chunks/{chunk.7ZCCXTFG.js → chunk.NBQ3AEK6.js} +2 -2
- package/dist/chunks/{chunk.HC5BO5YV.js → chunk.NHYFVEGM.js} +5 -16
- package/dist/chunks/{chunk.QKNNLZ2M.js → chunk.NKPNQBLW.js} +5 -5
- package/dist/chunks/{chunk.MOWTZFON.js → chunk.NKVYNBAI.js} +1 -1
- package/dist/chunks/{chunk.7NWAYDYI.js → chunk.NOEQVLAW.js} +3 -3
- package/dist/chunks/{chunk.INCGVIAQ.js → chunk.QSPKKO3T.js} +1 -1
- package/dist/chunks/chunk.R37CT3PN.js +865 -0
- package/dist/chunks/{chunk.IRQOFNJE.js → chunk.RSJYKNXT.js} +8 -3
- package/dist/chunks/{chunk.5XUV3SRW.js → chunk.ST2QYN4S.js} +11 -6
- package/dist/chunks/{chunk.LT7JMZ3T.js → chunk.T7JSALXE.js} +2 -2
- package/dist/chunks/{chunk.N6VVY6XD.js → chunk.U5KRBVRP.js} +6 -3
- package/dist/chunks/{chunk.5LT3B7MI.js → chunk.UQYPPFBJ.js} +1 -1
- package/dist/chunks/{chunk.2HUORR44.js → chunk.V6V7AGDB.js} +1 -1
- package/dist/chunks/{chunk.UV53JTE3.js → chunk.VIULAG23.js} +1 -1
- package/dist/chunks/{chunk.42W4S2HN.js → chunk.VM355VAS.js} +1 -1
- package/dist/chunks/{chunk.G7AELPSO.js → chunk.VRU3XH45.js} +4 -4
- package/dist/chunks/{chunk.HLYGKGDG.js → chunk.W74UQSZJ.js} +8 -5
- package/dist/chunks/{chunk.AR5HJD7F.js → chunk.X6RQ2SQC.js} +1 -1
- package/dist/chunks/chunk.ZQJVCRB2.js +10 -0
- package/dist/chunks/{chunk.RIJQGADY.js → chunk.ZW4JE66G.js} +11 -4
- package/dist/components/accordion/accordion.js +7 -7
- package/dist/components/alert/alert.js +9 -8
- package/dist/components/animation/animation.js +2 -2
- package/dist/components/avatar/avatar.d.ts +1 -1
- package/dist/components/avatar/avatar.js +7 -6
- package/dist/components/avatar-group/avatar-group.d.ts +1 -1
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +7 -7
- package/dist/components/breadcrumb-item/breadcrumb-item.js +2 -2
- package/dist/components/button/button.js +9 -8
- package/dist/components/checkbox/checkbox.js +8 -7
- package/dist/components/checkbox-button/checkbox-button.js +6 -6
- package/dist/components/checkbox-group/checkbox-group.d.ts +1 -0
- package/dist/components/checkbox-group/checkbox-group.js +3 -3
- package/dist/components/combobox/combobox.d.ts +175 -0
- package/dist/components/combobox/combobox.js +37 -0
- package/dist/components/combobox/combobox.styles.d.ts +2 -0
- package/dist/components/combobox/combobox.styles.js +9 -0
- package/dist/components/dialog/dialog.js +9 -8
- package/dist/components/divider/divider.d.ts +1 -1
- package/dist/components/drawer/drawer.js +10 -9
- package/dist/components/dropdown/dropdown.js +3 -3
- package/dist/components/format-bytes/format-bytes.js +2 -2
- package/dist/components/format-date/format-date.js +2 -2
- package/dist/components/format-number/format-number.js +2 -2
- package/dist/components/icon/icon.js +5 -5
- package/dist/components/icon-button/icon-button.d.ts +1 -1
- package/dist/components/icon-button/icon-button.js +7 -6
- package/dist/components/include/include.js +2 -2
- package/dist/components/input/input.d.ts +1 -1
- package/dist/components/input/input.js +10 -9
- package/dist/components/input/input.styles.js +1 -1
- package/dist/components/input-mask/input-mask.d.ts +1 -0
- package/dist/components/input-mask/input-mask.js +6 -5
- package/dist/components/input-mask/input-mask.styles.js +1 -1
- package/dist/components/input-phone/input-phone.d.ts +1 -1
- package/dist/components/input-phone/input-phone.js +24 -23
- package/dist/components/input-phone/input-phone.styles.js +1 -1
- package/dist/components/menu/menu.d.ts +1 -1
- package/dist/components/menu-item/menu-item.d.ts +1 -1
- package/dist/components/menu-item/menu-item.js +6 -6
- package/dist/components/menu-label/menu-label.d.ts +1 -1
- package/dist/components/mutation-observer/mutation-observer.js +2 -2
- package/dist/components/option/option.js +8 -8
- package/dist/components/option/option.styles.js +1 -1
- package/dist/components/progress-bar/progress-bar.d.ts +1 -1
- package/dist/components/progress-bar/progress-bar.js +3 -2
- package/dist/components/progress-ring/progress-ring.d.ts +1 -2
- package/dist/components/progress-ring/progress-ring.js +2 -2
- package/dist/components/radio/radio.js +6 -6
- package/dist/components/radio-button/radio-button.js +2 -2
- package/dist/components/radio-group/radio-group.js +2 -2
- package/dist/components/relative-time/relative-time.js +2 -2
- package/dist/components/resize-observer/resize-observer.js +2 -2
- package/dist/components/select/select.d.ts +4 -0
- package/dist/components/select/select.js +13 -12
- package/dist/components/select/select.styles.js +1 -1
- package/dist/components/skeleton/skeleton.d.ts +1 -1
- package/dist/components/spinner/spinner.js +2 -2
- package/dist/components/tab/tab.d.ts +1 -1
- package/dist/components/tab/tab.js +3 -3
- package/dist/components/tab-group/tab-group.d.ts +1 -1
- package/dist/components/tab-group/tab-group.js +3 -3
- package/dist/components/tab-panel/tab-panel.d.ts +1 -1
- package/dist/components/tab-panel/tab-panel.js +2 -2
- package/dist/components/tag/tag.js +9 -8
- package/dist/components/textarea/textarea.d.ts +1 -0
- package/dist/components/textarea/textarea.js +4 -3
- package/dist/components/tooltip/tooltip.js +3 -3
- package/dist/components/tree/tree.d.ts +2 -1
- package/dist/components/tree/tree.js +12 -11
- package/dist/components/tree-item/tree-item.d.ts +1 -1
- package/dist/components/tree-item/tree-item.js +11 -10
- package/dist/custom-elements.json +1104 -74
- package/dist/design-system.d.ts +1 -0
- package/dist/design-system.js +96 -90
- package/dist/internal/debounce.d.ts +1 -1
- package/dist/internal/debounce.js +3 -3
- package/dist/internal/default-value.d.ts +1 -1
- package/dist/internal/default-value.js +24 -21
- package/dist/internal/watch.js +1 -1
- package/dist/themes/dsa-wc-theme.css +37 -6
- package/dist/themes/dsa-wc-theme.min.css +1 -1
- package/dist/themes/dsa-wc-theme.styles.js +43 -6
- package/dist/translations/en-gb.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/utilities/directives.d.ts +1 -0
- package/dist/utilities/directives.js +7 -0
- package/dist/utilities/localize.d.ts +2 -0
- package/dist/utilities/localize.js +1 -1
- package/dist/vscode.html-custom-data.json +130 -6
- package/dist/web-types.json +618 -9
- package/package.json +1 -1
- package/dist/chunks/chunk.GI7VDIWX.js +0 -24
|
@@ -460,7 +460,7 @@
|
|
|
460
460
|
},
|
|
461
461
|
{
|
|
462
462
|
"name": "dsa-checkbox-group",
|
|
463
|
-
"description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox) or [checkbox buttons](/components/checkbox-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the checkbox group's selected value changes.\n- **dsa-input** - Emitted when the checkbox group receives user input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<dsa-checkbox>` or `<dsa-checkbox-button>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
463
|
+
"description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox) or [checkbox buttons](/components/checkbox-button) so they function as a single form control.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the checkbox group's selected value changes.\n- **dsa-input** - Emitted when the checkbox group receives user input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity(): _boolean_** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - _default_ - The default slot where `<dsa-checkbox>` or `<dsa-checkbox-button>` elements are placed.\n- **label** - The checkbox group's label. Required for proper accessibility. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
464
464
|
"attributes": [
|
|
465
465
|
{
|
|
466
466
|
"name": "label",
|
|
@@ -510,6 +510,125 @@
|
|
|
510
510
|
],
|
|
511
511
|
"references": []
|
|
512
512
|
},
|
|
513
|
+
{
|
|
514
|
+
"name": "dsa-combobox",
|
|
515
|
+
"description": "Comboboxes allow you to type a value directly or select a value from a menu of predefined options. Values are filtered by checking the presence of the search term.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the control's value changes.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-show** - Emitted when the combobox's menu opens.\n- **dsa-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **dsa-hide** - Emitted when the combobox's menu closes.\n- **dsa-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<dsa-option>` elements. Alternatively, you can use the `items` property.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label",
|
|
516
|
+
"attributes": [
|
|
517
|
+
{
|
|
518
|
+
"name": "name",
|
|
519
|
+
"description": "The name of the combobox, submitted as a name/value pair with form data.",
|
|
520
|
+
"values": []
|
|
521
|
+
},
|
|
522
|
+
{
|
|
523
|
+
"name": "title",
|
|
524
|
+
"description": "The title contains a text representing advisory information related to the element it belongs to.",
|
|
525
|
+
"values": []
|
|
526
|
+
},
|
|
527
|
+
{
|
|
528
|
+
"name": "open",
|
|
529
|
+
"description": "Indicates whether or not the combobox is open. You can toggle this attribute to show and hide the menu, or you can\nuse the `show()` and `hide()` methods and this attribute will reflect the combobox's open state.",
|
|
530
|
+
"values": []
|
|
531
|
+
},
|
|
532
|
+
{
|
|
533
|
+
"name": "value",
|
|
534
|
+
"description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.",
|
|
535
|
+
"values": [{ "name": "string[]" }]
|
|
536
|
+
},
|
|
537
|
+
{
|
|
538
|
+
"name": "size",
|
|
539
|
+
"description": "The combobox's size.",
|
|
540
|
+
"values": [
|
|
541
|
+
{ "name": "small" },
|
|
542
|
+
{ "name": "medium" },
|
|
543
|
+
{ "name": "large" }
|
|
544
|
+
]
|
|
545
|
+
},
|
|
546
|
+
{
|
|
547
|
+
"name": "placeholder",
|
|
548
|
+
"description": "Placeholder text to show as a hint when the combobox is empty.",
|
|
549
|
+
"values": []
|
|
550
|
+
},
|
|
551
|
+
{
|
|
552
|
+
"name": "label",
|
|
553
|
+
"description": "The combobox's label. If you need to display HTML, use the `label` slot instead.",
|
|
554
|
+
"values": []
|
|
555
|
+
},
|
|
556
|
+
{
|
|
557
|
+
"name": "variant",
|
|
558
|
+
"description": "The combobox's variant.",
|
|
559
|
+
"values": [{ "name": "base" }, { "name": "layer" }]
|
|
560
|
+
},
|
|
561
|
+
{
|
|
562
|
+
"name": "hoist",
|
|
563
|
+
"description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
|
|
564
|
+
"values": []
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"name": "placement",
|
|
568
|
+
"description": "The preferred placement of the combobox's menu. Note that the actual placement may vary as needed to keep the listbox\ninside of the viewport.",
|
|
569
|
+
"values": [
|
|
570
|
+
{ "name": "" },
|
|
571
|
+
{ "name": "top" },
|
|
572
|
+
{ "name": "top-start" },
|
|
573
|
+
{ "name": "top-end" },
|
|
574
|
+
{ "name": "bottom" },
|
|
575
|
+
{ "name": "bottom-start" },
|
|
576
|
+
{ "name": "bottom-end" }
|
|
577
|
+
]
|
|
578
|
+
},
|
|
579
|
+
{
|
|
580
|
+
"name": "help-text",
|
|
581
|
+
"description": "The combobox's help text. If you need to display HTML, use the `help-text` slot instead.",
|
|
582
|
+
"values": []
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"name": "disabled",
|
|
586
|
+
"description": "Disables the combobox control.",
|
|
587
|
+
"values": []
|
|
588
|
+
},
|
|
589
|
+
{
|
|
590
|
+
"name": "clearable",
|
|
591
|
+
"description": "Adds a clear button when the select is not empty.",
|
|
592
|
+
"values": []
|
|
593
|
+
},
|
|
594
|
+
{
|
|
595
|
+
"name": "form",
|
|
596
|
+
"description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
|
|
597
|
+
"values": []
|
|
598
|
+
},
|
|
599
|
+
{
|
|
600
|
+
"name": "required",
|
|
601
|
+
"description": "The combobox's required attribute.",
|
|
602
|
+
"values": []
|
|
603
|
+
},
|
|
604
|
+
{
|
|
605
|
+
"name": "error",
|
|
606
|
+
"description": "Indicates whether the input should be in error state",
|
|
607
|
+
"values": []
|
|
608
|
+
},
|
|
609
|
+
{
|
|
610
|
+
"name": "error-message",
|
|
611
|
+
"description": "An error message that is shown when `error` is set to true",
|
|
612
|
+
"values": []
|
|
613
|
+
},
|
|
614
|
+
{
|
|
615
|
+
"name": "no-sync-width",
|
|
616
|
+
"description": "When set to true, the Popup's width is no longer equal to its anchor's width",
|
|
617
|
+
"values": []
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"name": "multiple",
|
|
621
|
+
"description": "Allows more than one option to be selected.",
|
|
622
|
+
"values": []
|
|
623
|
+
},
|
|
624
|
+
{
|
|
625
|
+
"name": "max-options-visible",
|
|
626
|
+
"description": "The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\nindicate the number of additional items that are selected. Set to 0 to remove the limit.",
|
|
627
|
+
"values": []
|
|
628
|
+
}
|
|
629
|
+
],
|
|
630
|
+
"references": []
|
|
631
|
+
},
|
|
513
632
|
{
|
|
514
633
|
"name": "dsa-dialog",
|
|
515
634
|
"description": "Dialogs, sometimes called \"modals\", appear above the page and require the user's immediate attention.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-show** - Emitted when the dialog opens.\n- **dsa-after-show** - Emitted after the dialog opens and all animations are complete.\n- **dsa-hide** - Emitted when the dialog closes.\n- **dsa-after-hide** - Emitted after the dialog closes and all animations are complete.\n- **dsa-initial-focus** - Emitted when the dialog opens and is ready to receive focus. Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.\n- **dsa-request-close** - {{ source: 'close-button' | 'keyboard' | 'overlay' }} - Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in destructive behavior such as data loss.\n\n### **Methods:**\n - **show()** - Shows the dialog.\n- **hide()** - Hides the dialog\n\n### **Slots:**\n - _default_ - The dialog's main content.\n- **label** - The dialog's label. Alternatively, you can use the `label` attribute.\n- **header-actions** - Optional actions to add to the header. Works best with `<dsa-icon-button>`.\n- **footer** - The dialog's footer, usually one or more buttons representing various options.",
|
|
@@ -928,7 +1047,7 @@
|
|
|
928
1047
|
},
|
|
929
1048
|
{
|
|
930
1049
|
"name": "dsa-input",
|
|
931
|
-
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
1050
|
+
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **showPicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **stepUp()** - Increments the value of a numeric input type by the value of the step attribute.\n- **stepDown()** - Decrements the value of a numeric input type by the value of the step attribute.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
932
1051
|
"attributes": [
|
|
933
1052
|
{
|
|
934
1053
|
"name": "title",
|
|
@@ -1116,7 +1235,7 @@
|
|
|
1116
1235
|
},
|
|
1117
1236
|
{
|
|
1118
1237
|
"name": "dsa-input-mask",
|
|
1119
|
-
"description": "Input Masks collect data from the user in a masked fashion.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
1238
|
+
"description": "Input Masks collect data from the user in a masked fashion.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the input.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
1120
1239
|
"attributes": [
|
|
1121
1240
|
{
|
|
1122
1241
|
"name": "title",
|
|
@@ -1257,7 +1376,7 @@
|
|
|
1257
1376
|
},
|
|
1258
1377
|
{
|
|
1259
1378
|
"name": "dsa-input-phone",
|
|
1260
|
-
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **
|
|
1379
|
+
"description": "Inputs collect data from the user.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **select()** - Selects all the text in the input.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
1261
1380
|
"attributes": [
|
|
1262
1381
|
{
|
|
1263
1382
|
"name": "title",
|
|
@@ -1844,7 +1963,7 @@
|
|
|
1844
1963
|
},
|
|
1845
1964
|
{
|
|
1846
1965
|
"name": "dsa-select",
|
|
1847
|
-
"description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the control's value changes.\n- **dsa-clear** - Emitted when the control's value is cleared.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-show** - Emitted when the select's menu opens.\n- **dsa-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **dsa-hide** - Emitted when the select's menu closes.\n- **dsa-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<dsa-option>` elements. You can use `<dsa-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
1966
|
+
"description": "Selects allow you to choose items from a menu of predefined options.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-change** - Emitted when the control's value changes.\n- **dsa-clear** - Emitted when the control's value is cleared.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-show** - Emitted when the select's menu opens.\n- **dsa-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **dsa-hide** - Emitted when the select's menu closes.\n- **dsa-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **show()** - Shows the listbox.\n- **hide()** - Hides the listbox.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The listbox options. Must be `<dsa-option>` elements. You can use `<dsa-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
1848
1967
|
"attributes": [
|
|
1849
1968
|
{
|
|
1850
1969
|
"name": "name",
|
|
@@ -1895,6 +2014,11 @@
|
|
|
1895
2014
|
"description": "Disables the select control.",
|
|
1896
2015
|
"values": []
|
|
1897
2016
|
},
|
|
2017
|
+
{
|
|
2018
|
+
"name": "readonly",
|
|
2019
|
+
"description": "Makes the select readonly",
|
|
2020
|
+
"values": []
|
|
2021
|
+
},
|
|
1898
2022
|
{
|
|
1899
2023
|
"name": "clearable",
|
|
1900
2024
|
"description": "Adds a clear button when the select is not empty.",
|
|
@@ -2117,7 +2241,7 @@
|
|
|
2117
2241
|
},
|
|
2118
2242
|
{
|
|
2119
2243
|
"name": "dsa-textarea",
|
|
2120
|
-
"description": "Textareas collect data from the user and allow multiple lines of text.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{\n top?: number;\n left?: number;\n }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
|
|
2244
|
+
"description": "Textareas collect data from the user and allow multiple lines of text.\n\n\n---\n\n\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when an alteration to the control's value is committed by the user.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the textarea.\n- **blur()** - Removes focus from the textarea.\n- **select()** - Selects all the text in the textarea.\n- **scrollPosition(position: _{\n top?: number;\n left?: number;\n }_): _{ top: number; left: number } | undefined_** - Gets or sets the textarea's scroll position.\n- **setSelectionRange(selectionStart: _number_, selectionEnd: _number_, selectionDirection: _'forward' | 'backward' | 'none'_)** - Sets the start and end positions of the text selection (0-based).\n- **setRangeText(replacement: _string_, start: _number_, end: _number_, selectMode: _'select' | 'start' | 'end' | 'preserve'_)** - Replaces a range of text with a new string.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **getForm(): _HTMLFormElement | null_** - Gets the associated form, if one exists.\n- **reportValidity()** - Checks for validity and shows the browser's validation message if the control is invalid.\n- **setCustomValidity(message: _string_)** - Sets a custom validation message. Pass an empty string to restore validity.\n\n### **Slots:**\n - **label** - The textarea's label. Alternatively, you can use the `label` attribute.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
|
|
2121
2245
|
"attributes": [
|
|
2122
2246
|
{ "name": "title", "values": [] },
|
|
2123
2247
|
{
|