@ds-autonomie/web-components 2.2.0 → 2.3.0

package/cdn/themes/dsa-wc-theme.styles.js

@@ -71,7 +71,6 @@ export default css`
     --dsa-wc-callout-default-background-color: var(
       --dsa-color-callout-background-default
     );
-    --dsa-wc-dialog-spacing: var(--dsa-spacing-24);
     --dsa-wc-dialog-overlay: var(--dsa-color-surface-overlay);
     --dsa-wc-dialog-overlay-opacity: 0.4;
     --dsa-wc-dialog-font: var(--dsa-font-medium-normal);
@@ -79,10 +78,16 @@ export default css`
     --dsa-wc-dialog-size-small: 23.125rem;
     --dsa-wc-dialog-size-large: 50rem;
     --dsa-wc-dialog-header-title-font: var(--dsa-font-medium-bold);
+    --dsa-wc-dialog-header-title-padding: 20px 0;
     --dsa-wc-dialog-header-icon-size: 1.5rem;
     --dsa-wc-dialog-header-actions-gap: var(--dsa-spacing-4);
     --dsa-wc-dialog-header-icon-spacing: 0.5rem;
     --dsa-wc-dialog-header-icon-color: var(--dsa-color-icon-on-base-default);
+    --dsa-wc-dialog-header-padding: 16px 20px;
+    --dsa-wc-dialog-header-spacing: 20px;
+    --dsa-wc-dialog-body-padding: 20px;
+    --dsa-wc-dialog-footer-padding: 20px;
+    --dsa-wc-dialog-footer-spacing: 16px;
     --dsa-wc-dialog-scrollbar-width: 0.25rem;
     --dsa-wc-dialog-scrollbar-color: var(--dsa-color-scroll-bar-background);
     --dsa-wc-dialog-scrollbar-radius: var(--dsa-spacing-4);
@@ -91,7 +96,6 @@ export default css`
     --dsa-wc-dialog-panel-gutter: var(--dsa-spacing-40);
     --dsa-wc-dialog-panel-box-shadow: var(--dsa-wc-shadow-x-large);
     --dsa-wc-dialog-footer-border: 1px solid var(--dsa-color-border-default);
-    --dsa-wc-dialog-footer-content-margin: var(--dsa-spacing-8);
     --dsa-wc-form-font: var(--dsa-font-medium-normal);
     --dsa-wc-form-font-small: var(--dsa-font-small-normal);
     --dsa-wc-form-font-large: var(--dsa-font-large-normal);
@@ -161,11 +165,11 @@ export default css`
     --dsa-wc-radio-label-color: var(--dsa-color-text-on-base-primary);
     --dsa-wc-radio-label-color-disabled: var(--dsa-color-text-on-base-disabled);
     --dsa-wc-radio-size: 1.125rem;
+    --dsa-wc-radio-inner-size: 0.625rem;
     --dsa-wc-radio-size-small: 0.875rem;
+    --dsa-wc-radio-inner-size-small: 0.5rem;
     --dsa-wc-radio-size-large: 1.375rem;
-    --dsa-wc-radio-icon-size: 0.875rem;
-    --dsa-wc-radio-icon-size-small: 0.75rem;
-    --dsa-wc-radio-icon-size-large: 1.125rem;
+    --dsa-wc-radio-inner-size-large: 0.875rem;
     --dsa-wc-radio-border-width: 0.125rem;
     --dsa-wc-radio-border-width-small: 0.099rem;
     --dsa-wc-toggle-group-spacing-label-toggles: var(--dsa-spacing-16);
@@ -256,6 +260,108 @@ export default css`
     );
     --dsa-wc-toggle-button-icon-spacing: var(--dsa-spacing-8);
     --dsa-wc-toggle-button-icon-padding-x: var(--dsa-spacing-8);
+    --dsa-wc-switch-label-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-switch-control-background-color: var(--dsa-color-background-base);
+    --dsa-wc-switch-thumb-background-color: var(--dsa-color-background-base);
+    --dsa-wc-switch-control-border-color: var(
+      --dsa-color-primitive-colors-identity-purple-500
+    );
+    --dsa-wc-switch-control-border-width: 2px;
+    --dsa-wc-switch-control-background-color-hover: var(
+      --dsa-color-background-hover
+    );
+    --dsa-wc-switch-control-background-color-active: var(
+      --dsa-color-background-active-default
+    );
+    --dsa-wc-switch-thumb-background-color-active: var(
+      --dsa-color-primitive-colors-identity-purple-100
+    );
+    --dsa-wc-switch-control-background-color-active-hover: var(
+      --dsa-color-background-active-hover
+    );
+    --dsa-wc-switch-control-border-color-disabled: var(
+      --dsa-color-primitive-colors-neutral-500
+    );
+    --dsa-wc-switch-control-background-color-active-disabled: var(
+      --dsa-color-primitive-colors-neutral-200
+    );
+    --dsa-wc-switch-control-border-color-readonly: var(
+      --dsa-color-primitive-colors-neutral-700
+    );
+    --dsa-wc-switch-control-background-color-active-readonly: var(
+      --dsa-color-primitive-colors-neutral-500
+    );
+    --dsa-switch-padding: var(--dsa-spacing-8);
+    --dsa-wc-switch-background-color-hover: var(--dsa-color-background-hover);
+    --dsa-wc-switch-border-color-hover: var(--dsa-color-border-hover);
+    --dsa-wc-switch-font-small: var(--dsa-font-small-normal);
+    --dsa-wc-switch-font-medium: var(--dsa-font-medium-normal);
+    --dsa-wc-switch-font-large: var(--dsa-font-large-normal);
+    --dsa-wc-switch-size-small: 1.75rem;
+    --dsa-wc-switch-size-medium: 2rem;
+    --dsa-wc-switch-size-large: 2.5rem;
+    --dsa-wc-selectable-card-background-color: var(--dsa-color-background-base);
+    --dsa-wc-selectable-card-border-color: var(
+      --dsa-color-primitive-colors-neutral-650
+    );
+    --dsa-wc-selectable-card-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-selectable-card-border-width: 1px;
+    --dsa-wc-selectable-card-border-radius: var(--dsa-radius-8);
+    --dsa-wc-selectable-card-horizontal-padding: var(--dsa-spacing-16)
+      var(--dsa-spacing-16);
+    --dsa-wc-selectable-card-horizontal-gap: var(--dsa-spacing-16);
+    --dsa-wc-selectable-card-vertical-padding: var(--dsa-spacing-16)
+      var(--dsa-spacing-16) var(--dsa-spacing-40);
+    --dsa-wc-selectable-card-vertical-gap: 12.5px;
+    --dsa-wc-selectable-card-content-gap: var(--dsa-spacing-16);
+    --dsa-wc-selectable-card-text-gap: var(--dsa-spacing-4);
+    --dsa-wc-selectable-card-label-font: var(--dsa-font-medium-bold);
+    --dsa-wc-selectable-card-label-color: var(--dsa-color-text-on-base-primary);
+    --dsa-wc-selectable-card-description-font: var(--dsa-font-small-normal);
+    --dsa-wc-selectable-card-description-color: var(
+      --dsa-color-text-on-base-secondary
+    );
+    --dsa-wc-selectable-card-hover-background-color: var(
+      --dsa-color-background-hover
+    );
+    --dsa-wc-selectable-card-hover-border-color: var(--dsa-color-border-hover);
+    --dsa-wc-selectable-card-hover-radio-color: var(--dsa-color-radio-hover);
+    --dsa-wc-selectable-card-checked-background-color: var(
+      --dsa-color-background-selected
+    );
+    --dsa-wc-selectable-card-checked-border-color: var(
+      --dsa-color-border-selected-default
+    );
+    --dsa-wc-selectable-card-checked-radio-color: var(
+      --dsa-color-radio-checked
+    );
+    --dsa-wc-selectable-card-checked-hover-background-color: var(
+      --dsa-color-background-hover
+    );
+    --dsa-wc-selectable-card-checked-hover-border-color: var(
+      --dsa-color-border-selected-hover
+    );
+    --dsa-wc-selectable-card-disabled-background-color: var(
+      --dsa-color-background-disabled
+    );
+    --dsa-wc-selectable-card-disabled-border-color: var(
+      --dsa-color-border-disabled
+    );
+    --dsa-wc-selectable-card-disabled-color: var(
+      --dsa-color-text-on-base-disabled
+    );
+    --dsa-wc-selectable-card-disabled-radio-color: var(
+      --dsa-color-radio-disabled
+    );
+    --dsa-wc-selectable-card-read-only-background-color: var(
+      --dsa-color-background-read-only
+    );
+    --dsa-wc-selectable-card-read-only-border-color: var(
+      --dsa-color-primitive-colors-neutral-650
+    );
+    --dsa-wc-selectable-card-error-border-color: var(
+      --dsa-color-checkbox-button-unchecked-error-border
+    );
     --dsa-wc-tab-font: var(--dsa-font-small-normal);
     --dsa-wc-tab-font-active-tab: var(--dsa-font-small-bold);
     --dsa-wc-tab-border-radius: 0px;
@@ -698,15 +804,27 @@ export default css`
     --dsa-wc-button-tertiary-on-base-font-color: var(
       --dsa-color-button-on-base-tertiary-default
     );
+    --dsa-wc-button-tertiary-on-base-border-color: var(
+      --dsa-color-button-on-base-tertiary-default
+    );
     --dsa-wc-button-tertiary-on-base-hover-color: transparent;
+    --dsa-wc-button-tertiary-on-base-hover-border-color: var(
+      --dsa-color-button-on-base-tertiary-hover
+    );
     --dsa-wc-button-tertiary-on-base-hover-font-color: var(
       --dsa-color-button-on-base-tertiary-hover
     );
     --dsa-wc-button-tertiary-on-base-active-color: transparent;
+    --dsa-wc-button-tertiary-on-base-active-border-color: var(
+      --dsa-color-button-on-base-tertiary-active
+    );
     --dsa-wc-button-tertiary-on-base-active-font-color: var(
       --dsa-color-button-on-base-tertiary-active
     );
     --dsa-wc-button-tertiary-on-base-disabled-color: transparent;
+    --dsa-wc-button-tertiary-on-base-disabled-border-color: var(
+      --dsa-color-button-on-base-tertiary-disabled
+    );
     --dsa-wc-button-tertiary-on-base-disabled-font-color: var(
       --dsa-color-button-on-base-tertiary-disabled
     );
@@ -721,18 +839,30 @@ export default css`
       --dsa-color-spinner-on-base-primary-on-background
     );
     --dsa-wc-button-tertiary-on-floating-menu-color: transparent;
+    --dsa-wc-button-tertiary-on-floating-menu-border-color: var(
+      --dsa-color-button-on-floating-menu-tertiary-default
+    );
     --dsa-wc-button-tertiary-on-floating-menu-font-color: var(
       --dsa-color-button-on-floating-menu-tertiary-default
     );
     --dsa-wc-button-tertiary-on-floating-menu-hover-color: transparent;
+    --dsa-wc-button-tertiary-on-floating-menu-hover-border-color: var(
+      --dsa-color-button-on-floating-menu-tertiary-hover
+    );
     --dsa-wc-button-tertiary-on-floating-menu-hover-font-color: var(
       --dsa-color-button-on-floating-menu-tertiary-hover
     );
     --dsa-wc-button-tertiary-on-floating-menu-active-color: transparent;
+    --dsa-wc-button-tertiary-on-floating-menu-active-border-color: var(
+      --dsa-color-button-on-floating-menu-tertiary-active
+    );
     --dsa-wc-button-tertiary-on-floating-menu-active-font-color: var(
       --dsa-color-button-on-floating-menu-tertiary-active
     );
     --dsa-wc-button-tertiary-on-floating-menu-disabled-color: transparent;
+    --dsa-wc-button-tertiary-on-floating-menu-disabled-border-color: var(
+      --dsa-color-button-on-floating-menu-tertiary-disabled
+    );
     --dsa-wc-button-tertiary-on-floating-menu-disabled-font-color: var(
       --dsa-color-button-on-floating-menu-tertiary-disabled
     );
@@ -747,18 +877,30 @@ export default css`
       --dsa-color-spinner-on-floatting-menu-on-background
     );
     --dsa-wc-button-tertiary-on-contrasted-menu-color: transparent;
+    --dsa-wc-button-tertiary-on-contrasted-menu-border-color: var(
+      --dsa-color-button-on-contrasted-neutral-tertiary-default
+    );
     --dsa-wc-button-tertiary-on-contrasted-menu-font-color: var(
       --dsa-color-button-on-contrasted-neutral-tertiary-default
     );
     --dsa-wc-button-tertiary-on-contrasted-menu-hover-color: transparent;
+    --dsa-wc-button-tertiary-on-contrasted-menu-hover-border-color: var(
+      --dsa-color-button-on-contrasted-neutral-tertiary-hover
+    );
     --dsa-wc-button-tertiary-on-contrasted-menu-hover-font-color: var(
       --dsa-color-button-on-contrasted-neutral-tertiary-hover
     );
     --dsa-wc-button-tertiary-on-contrasted-menu-active-color: transparent;
+    --dsa-wc-button-tertiary-on-contrasted-menu-active-border-color: var(
+      --dsa-color-button-on-contrasted-neutral-tertiary-active
+    );
     --dsa-wc-button-tertiary-on-contrasted-menu-active-font-color: var(
       --dsa-color-button-on-contrasted-neutral-tertiary-active
     );
     --dsa-wc-button-tertiary-on-contrasted-menu-disabled-color: transparent;
+    --dsa-wc-button-tertiary-on-contrasted-menu-disabled-border-color: var(
+      --dsa-color-button-on-contrasted-neutral-tertiary-disabled
+    );
     --dsa-wc-button-tertiary-on-contrasted-menu-disabled-font-color: var(
       --dsa-color-button-on-contrasted-neutral-tertiary-disabled
     );
@@ -1436,6 +1578,23 @@ export default css`
     --dsa-wc-input-phone-small-height: 1.875rem;
     --dsa-wc-input-phone-large-height: 3.125rem;
     --dsa-wc-input-phone-prefix-margin-inline-end: 0.4rem;
+    --dsa-wc-input-time-picker-unit-size: 3rem;
+    --dsa-wc-input-time-panel-border-color: var(--dsa-color-border-default);
+    --dsa-wc-input-time-panel-border-radius: var(--dsa-radius-4);
+    --dsa-wc-input-time-picker-unit-radius: var(--dsa-radius-4);
+    --dsa-wc-input-time-picker-unit-hover-color: var(
+      --dsa-color-primitive-colors-identity-purple-200
+    );
+    --dsa-wc-input-time-picker-unit-current-color: var(
+      --dsa-color-primitive-colors-identity-purple-500
+    );
+    --dsa-wc-input-time-picker-unit-selected-color: var(
+      --dsa-color-primitive-colors-identity-purple-500
+    );
+    --dsa-wc-input-time-picker-unit-font: var(--dsa-font-small-normal);
+    --dsa-wc-input-time-picker-unit-color: var(
+      --dsa-color-text-on-base-primary
+    );
     --dsa-wc-input-otp-single-fields-gap: var(--dsa-spacing-8);
     --dsa-wc-input-otp-single-field-width-small: 1.5rem;
     --dsa-wc-input-otp-single-field-width-medium: 2rem;

package/cdn/translations/en-gb.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.ZLWLHLBC.js";
+} from "../chunks/chunk.LICWCBKN.js";
 import {
   registerTranslation
 } from "../chunks/chunk.CAMVBH5H.js";

package/cdn/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.ZLWLHLBC.js";
+} from "../chunks/chunk.LICWCBKN.js";
 import "../chunks/chunk.CAMVBH5H.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {

package/cdn/translations/fr.js

@@ -1,6 +1,6 @@
 import {
   fr_default
-} from "../chunks/chunk.ZLWLHLBC.js";
+} from "../chunks/chunk.LICWCBKN.js";
 import "../chunks/chunk.CAMVBH5H.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {

package/cdn/utilities/date.js

@@ -6,7 +6,7 @@ import {
   isValidDate,
   monthLength,
   parseDate
-} from "../chunks/chunk.IPZC55RV.js";
+} from "../chunks/chunk.6BXZEG5L.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {
   getDateFromISO,

package/cdn/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.P45DWAWT.js";
+} from "../chunks/chunk.CAYHSQZJ.js";
 import "../chunks/chunk.C2W7WMBY.js";
-import "../chunks/chunk.3TUFAITJ.js";
+import "../chunks/chunk.HJU52GCK.js";
 import "../chunks/chunk.L633QVVV.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {

package/cdn/utilities/localize.d.ts

@@ -82,6 +82,10 @@ export interface Translation extends DefaultTranslation {
     min: string;
     max: string;
     clearButton: string;
+    hours: (value: number | string) => string;
+    minutes: (value: number | string) => string;
+    seconds: (value: number | string) => string;
+    milliseconds: (value: number | string) => string;
     day: string;
     month: string;
     year: string;
@@ -107,6 +111,8 @@ export interface Translation extends DefaultTranslation {
     invalidEndDate: string;
     tableOfContents: string;
     userMenu: string;
+    switchOn: string;
+    switchOff: string;
     fr_FR: string;
     fr_GP: string;
     fr_GF: string;

package/cdn/utilities/localize.js

@@ -1,6 +1,6 @@
 import {
   LocalizeController
-} from "../chunks/chunk.ZLWLHLBC.js";
+} from "../chunks/chunk.LICWCBKN.js";
 import {
   registerTranslation
 } from "../chunks/chunk.CAMVBH5H.js";

package/cdn/vscode.html-custom-data.json

@@ -343,6 +343,7 @@
             { "name": "primary" },
             { "name": "secondary" },
             { "name": "tertiary" },
+            { "name": "tertiary-with-outline" },
             { "name": "neutral" },
             { "name": "danger" },
             { "name": "navigation" }
@@ -594,6 +595,11 @@
             { "name": "large" }
           ]
         },
+        {
+          "name": "parentDisabled",
+          "description": "Disables the checkbox.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Disables the checkbox.",
@@ -609,6 +615,11 @@
           "description": "Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\nall/none\" behavior when associated checkboxes have a mix of checked and unchecked states.",
           "values": []
         },
+        {
+          "name": "parentReadonly",
+          "description": "Disables the checkbox.",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Sets the checkbox in readonly.",
@@ -653,9 +664,15 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-checkbox-card",
+      "description": "Checkbox cards allow the user to select multiple options from a group using a card-like control.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the card loses focus.\n- **dsa-focus** - Emitted when the card gains focus.\n\n### **Slots:**\n - _default_ - The checkbox card's label.\n- **description** - The checkbox card's description.\n- **image** - An optional image to illustrate. Should take 100% of the available height / width in horizontal / vertical layout.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-checkbox-group",
-      "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### **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.",
+      "description": "Checkbox groups are used to group multiple [checkbox](/components/checkbox), [checkbox buttons](/components/checkbox-button) or [checkbox cards](/components/checkbox-card) so they function as a single form control.\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>`, `<dsa-checkbox-button>`, or `<dsa-checkbox-card>` 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.",
       "attributes": [
         {
           "name": "label",
@@ -806,17 +823,22 @@
         },
         {
           "name": "label",
-          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using\n`no-header`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
+          "description": "The dialog's label as displayed in the header. You should always include a relevant label even when using `no-header`\nor `hide-title`, as it is required for proper accessibility. If you need to display HTML, use the `label` slot instead.",
           "values": []
         },
         {
           "name": "hide-title",
-          "description": "Hides the title part of the header, allowing users to still use the close button to dismiss the dialog.",
+          "description": "Hides the title part from the header, which contains its label. When using this attribute, you still need to provide\na relevant label for accessibility.",
+          "values": []
+        },
+        {
+          "name": "no-close-button",
+          "description": "Removes the close button from the header part of the dialog. Please ensure you provide an easy, accessible way for\n users to dismiss the dialog if you use this attribute.",
           "values": []
         },
         {
           "name": "no-header",
-          "description": "Removes the entire header part of the dialog. This will also remove the default close button, so please ensure you provide an easy,\naccessible way for users to dismiss the dialog.",
+          "description": "Removes the entire header part of the dialog. This will also remove the default close button, so please ensure you\nprovide an easy, accessible way for users to dismiss the dialog.",
           "values": []
         },
         {
@@ -1795,7 +1817,7 @@
     },
     {
       "name": "dsa-input",
-      "description": "Inputs collect data from the user.\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- **checkNavigatorCompatibility()** - Checks whether the current navigator is compatible with type=time\n- **showTimePicker()** - Displays the browser picker for an input element (only works if the browser supports it for the input type).\n- **showDatepicker()** - Displays the dsa-calendar picker for an input element.\n- **hideDatepicker()** - Hides dsa-calendar.\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- **suffix** - Used to postpend 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.",
+      "description": "Inputs collect data from the user.\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- **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- **suffix** - Used to postpend 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.",
       "attributes": [
         {
           "name": "type",
@@ -1921,7 +1943,7 @@
     },
     {
       "name": "dsa-input-date",
-      "description": "(Internal) Input-date collect date data from the user.\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- **showDatepicker()** - Displays the dsa-calendar picker for an input element.\n- **hideDatepicker()** - Hides dsa-calendar.\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.",
+      "description": "(Internal) Input-date collect date data from the user.\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- **dsa-show** - Emitted when the picker opens.\n- **dsa-after-show** - Emitted after the picker opens and all animations are complete.\n- **dsa-hide** - Emitted when the picker closes.\n- **dsa-after-hide** - Emitted after the picker closes and all animations are complete.\n\n### **Methods:**\n - **focus(options: _FocusOptions_)** - Sets focus on the input.\n- **blur()** - Removes focus from the input.\n- **showDatepicker()** - Displays the dsa-calendar picker for an input element.\n- **hideDatepicker()** - Hides dsa-calendar.\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.",
       "attributes": [
         {
           "name": "value",
@@ -2154,6 +2176,62 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-input-time",
+      "description": "(Internal) Inputs time collect time data from the user.\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- **dsa-show** - Emitted when the picker opens.\n- **dsa-after-show** - Emitted after the picker opens and all animations are complete.\n- **dsa-hide** - Emitted when the picker closes.\n- **dsa-after-hide** - Emitted after the picker closes and all animations are complete.\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- **showTimePicker()** - Displays the time picker for an input element.\n- **hideTimePicker()** - Hides the time picker\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- **suffix** - Used to postpend 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.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The current value of the input, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "clearable",
+          "description": "Adds a clear button when the input is not empty.",
+          "values": []
+        },
+        {
+          "name": "min",
+          "description": "The input's minimum value.",
+          "values": []
+        },
+        {
+          "name": "max",
+          "description": "The input's maximum value.",
+          "values": []
+        },
+        {
+          "name": "step",
+          "description": "Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\nimplied, allowing any numeric value.",
+          "values": [{ "name": "any" }]
+        },
+        {
+          "name": "autocomplete",
+          "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+          "values": []
+        },
+        {
+          "name": "autofocus",
+          "description": "Indicates that the input should receive focus on page load.",
+          "values": []
+        },
+        {
+          "name": "enterkeyhint",
+          "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+          "values": [
+            { "name": "" },
+            { "name": "enter" },
+            { "name": "done" },
+            { "name": "go" },
+            { "name": "next" },
+            { "name": "previous" },
+            { "name": "search" },
+            { "name": "send" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-menu-accordion",
       "description": "Menus Accordion show a brief summary and expand to show additional content in a menu.\n---\n\n\n### **Events:**\n - **dsa-show** - Emitted when the menu-accordion opens.\n- **dsa-after-show** - Emitted after the menu-accordion opens and all animations are complete.\n- **dsa-hide** - Emitted when the menu-accordion closes.\n- **dsa-after-hide** - Emitted after the menu-accordion closes and all animations are complete.\n\n### **Methods:**\n - **show()** - Shows the accordion.\n- **hide()** - Hides the accordion\n\n### **Slots:**\n - _default_ - The menu-accordion's content, usually a dsa-menu-navigation.\n- **summary** - The menu-accordion's summary. Alternatively, you can use the `summary` attribute.",
@@ -2760,11 +2838,21 @@
             { "name": "large" }
           ]
         },
+        {
+          "name": "parentDisabled",
+          "description": "Indicates whether a parent radio-group has the readonly attribute with the value true",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Disables the radio.",
           "values": []
         },
+        {
+          "name": "parentReadonly",
+          "description": "Indicates whether a parent radio-group has the readonly attribute with the value true",
+          "values": []
+        },
         {
           "name": "readonly",
           "description": "Sets the radio in readonly.",
@@ -2784,9 +2872,15 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-radio-card",
+      "description": "Radios cards allow the user to select a single option from a group using a card-like control.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the card loses focus.\n- **dsa-focus** - Emitted when the card gains focus.\n\n### **Slots:**\n - _default_ - The radio card's label.\n- **description** - The radio card's description.\n- **image** - An optional image to illustrate. Should take 100% of the available height / width in horizontal / vertical layout.",
+      "attributes": [],
+      "references": []
+    },
     {
       "name": "dsa-radio-group",
-      "description": "Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.\n---\n\n\n### **Events:**\n - **dsa-change** - Emitted when the radio group's selected value changes.\n- **dsa-input** - Emitted when the radio 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-radio>` or `<dsa-radio-button>` elements are placed.\n- **label** - The radio 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",
+      "description": "Radio groups are used to group multiple [radios](/components/radio), [radio buttons](/components/radio-button) or [radio cards](/components/radio-card) so they function as a single form control.\n---\n\n\n### **Events:**\n - **dsa-change** - Emitted when the radio group's selected value changes.\n- **dsa-input** - Emitted when the radio 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-radio>`, `<dsa-radio-button>`, or `<dsa-radio-card>` elements are placed.\n- **label** - The radio 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",
       "attributes": [
         {
           "name": "label",
@@ -3172,6 +3266,67 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-switch",
+      "description": "Switches allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when the control's checked state changes.\n- **dsa-input** - Emitted when the control receives input.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n\n### **Methods:**\n - **click()** - Simulates a click on the switch.\n- **focus(options: _FocusOptions_)** - Sets focus on the switch.\n- **blur()** - Removes focus from the switch.\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 - _default_ - The switch's label.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the switch, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "The current value of the switch, submitted as a name/value pair with form data.",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The switch's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the switch.",
+          "values": []
+        },
+        {
+          "name": "readonly",
+          "description": "Sets the switch in readonly.",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "Draws the switch in a checked state.",
+          "values": []
+        },
+        {
+          "name": "form",
+          "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.",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "Makes the switch a required field.",
+          "values": []
+        },
+        {
+          "name": "on-label",
+          "description": "State ON text equivalent, to make understanding the state of the switch easier for users with visual or cognitive disabilities,",
+          "values": []
+        },
+        {
+          "name": "off-label",
+          "description": "State OFF text equivalent, to make understanding the state of the switch easier for users with visual or cognitive disabilities,",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-tab",
       "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).\n---\n\n\n### **Events:**\n - **dsa-close** - Emitted when the tab is closable and the close button is activated.\n\n### **Slots:**\n - _default_ - The tab's label.",