@ds-autonomie/web-components 2.1.0 → 2.3.0

package/dist/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,37 @@ 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;
+    --dsa-wc-input-otp-single-field-width-large: 2.375rem;
+    --dsa-wc-input-otp-caret-height: 1.125rem;
+    --dsa-wc-input-otp-single-field-value-width: 0.8rem;
+    --dsa-wc-input-otp-single-field-active-value-background: var(
+      --dsa-color-primitive-colors-identity-purple-500
+    );
+    --dsa-wc-input-otp-single-field-active-value-color: var(
+      --dsa-color-primitive-colors-neutral-100
+    );
+    --dsa-wc-input-otp-single-field-active-value-border-radius: 2px;
+    --dsa-wc-input-otp-single-field-active-value-padding: 0.2rem;
     --dsa-wc-error-text-gap: 0.19rem;
     --dsa-wc-error-text-margin: var(--dsa-spacing-8);
     --dsa-wc-error-text-icon-padding: 1.5px;

package/dist/translations/en-gb.js

@@ -1,7 +1,7 @@
 import {
   en_default,
   registerTranslation
-} from "../chunks/chunk.QLA2JXR7.js";
+} from "../chunks/chunk.U7ZMMMJ3.js";
 import {
   __spreadProps,
   __spreadValues

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.QLA2JXR7.js";
+} from "../chunks/chunk.U7ZMMMJ3.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   en_default as default

package/dist/translations/fr.js

@@ -1,6 +1,6 @@
 import {
   fr_default
-} from "../chunks/chunk.QLA2JXR7.js";
+} from "../chunks/chunk.U7ZMMMJ3.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   fr_default as default

package/dist/utilities/date.js

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

package/dist/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.S3NI7NKU.js";
 export {

package/dist/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/dist/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.QLA2JXR7.js";
+} from "../chunks/chunk.U7ZMMMJ3.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   LocalizeController,

package/dist/utilities/storybook.js

@@ -9,7 +9,7 @@ import {
   withBackgroundDecorator,
   withOnFloatingMenuOnBaseDecorator,
   withOnLayerOnBaseDecorator
-} from "../chunks/chunk.AF5WMYR2.js";
+} from "../chunks/chunk.MYSJOWY5.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   errorArgTypes,