@ds-autonomie/web-components 2.12.0 → 2.14.0

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

@@ -105,7 +105,8 @@ export default css`
     --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);
-    --dsa-wc-dialog-panel-color: var(--dsa-color-background-base);
+    --dsa-wc-dialog-panel-color: var(--dsa-color-dialog-background);
+    --dsa-wc-dialog-panel-text-color: var(--dsa-color-dialog-on-background);
     --dsa-wc-dialog-panel-border-radius: var(--dsa-radius-8);
     --dsa-wc-dialog-panel-gutter: var(--dsa-spacing-40);
     --dsa-wc-dialog-panel-box-shadow: var(--dsa-wc-shadow-x-large);
@@ -403,6 +404,7 @@ export default css`
     --dsa-wc-tab-group-indicator-track-width: 2px;
     --dsa-wc-tab-group-track-color: var(--dsa-color-divider-background);
     --dsa-wc-tab-group-track-width: 1px;
+    --dsa-wc-tab-group-background-color: var(--dsa-color-background-base);
     --dsa-wc-icon-button-color: var(
       --dsa-color-button-on-base-primary-on-background-default
     );
@@ -2186,6 +2188,22 @@ export default css`
     --dsa-wc-header-baseline-color: var(--dsa-color-text-on-base-primary);
     --dsa-wc-header-baseline-font-mobile: var(--dsa-font-x-small-normal);
     --dsa-wc-header-baseline-font-desktop: var(--dsa-font-small-normal);
+    --dsa-wc-header-search-max-width: 800px;
+    --dsa-wc-header-modern-cnsa-logo-width-mobile: 68px;
+    --dsa-wc-header-modern-cnsa-logo-width-desktop: 84px;
+    --dsa-wc-header-modern-cnsa-logo-height-desktop: 50px;
+    --dsa-wc-header-modern-cnsa-logo-padding-bottom-desktop: 18px;
+    --dsa-wc-header-modern-site-name-color: var(--dsa-color-text-base);
+    --dsa-wc-header-modern-site-name-font-weight: 400;
+    --dsa-wc-header-modern-site-name-font-family: Montserrat, sans-serif;
+    --dsa-wc-header-modern-site-name-font-size-desktop: 1.31rem;
+    --dsa-wc-header-modern-site-name-font-size-mobile: 1.0625rem;
+    --dsa-wc-header-modern-site-name-line-height-desktop: 76%;
+    --dsa-wc-header-modern-cnsa-site-name-padding-left-desktop: var(
+      --dsa-spacing-16
+    );
+    --dsa-wc-header-modern-cnsa-site-name-border-desktop: 1.5px solid
+      var(--dsa-color-primitive-colors-identity-green-300);
     --dsa-wc-page-header-background: var(--dsa-color-surface-layer);
     --dsa-wc-page-header-color: var(--dsa-color-text-on-base-primary);
     --dsa-wc-page-header-padding-x-mobile: var(--dsa-spacing-16);
@@ -2563,6 +2581,7 @@ export default css`
     );
     --dsa-wc-search-helptext-color: var(--dsa-color-search-helper-helper);
     --dsa-wc-search-error-message-color: var(--dsa-color-search-helper-error);
+    --dsa-wc-sidenav-background-color: var(--dsa-color-background-base);
     --dsa-wc-sidenav-collapsed-width: 3.5rem;
     --dsa-wc-sidenav-default-expanded-width: 15rem;
     --dsa-wc-z-index-drawer: 700;
@@ -2713,11 +2732,29 @@ export default css`
   }
   .dsa-link:focus-visible {
     outline: var(--dsa-wc-focus-ring);
+    outline-offset: var(--dsa-wc-focus-ring-offset);
     border-radius: var(--dsa-wc-focus-ring-radius);
   }
   .no-animations {
     --dsa-wc-no-animations-duration: 0s;
   }
+  .dsa-link--skip-content:not(:focus) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0;
+  }
+  .dsa-link--skip-content:focus {
+    position: relative;
+    width: auto;
+    height: auto;
+    clip: unset;
+    clip-path: unset;
+    overflow: unset;
+    white-space: unset;
+    padding: unset;
+  }
 
   .dsa-grid-container {
     --dsa-grid-gap: 16px;
@@ -2781,8 +2818,11 @@ export default css`
   }
   .dsa-sidebar-container {
     display: grid;
-    width: 360px;
+    width: 328px;
     grid-template-columns: repeat(4, 1fr);
+    gap: 16px;
+    margin-left: 16px;
+    margin-right: 16px;
   }
 
   .dsa-table {

package/dist/translations/en-gb.js

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

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.7BLYNLBH.js";
+} from "../chunks/chunk.QY3AIGLE.js";
 import "../chunks/chunk.5GB6F3WA.js";
 export {
   en_default as default

package/dist/translations/fr.js

@@ -1,6 +1,6 @@
 import {
   fr_default
-} from "../chunks/chunk.7BLYNLBH.js";
+} from "../chunks/chunk.QY3AIGLE.js";
 import "../chunks/chunk.5GB6F3WA.js";
 export {
   fr_default as default

package/dist/utilities/localize.d.ts

@@ -53,8 +53,10 @@ export interface Translation extends DefaultTranslation {
     previousPage: string;
     nextPage: string;
     results: string;
+    cnsa: string;
+    spa: string;
     cnsaGoToHomepage: string;
-    dsaGoToHomepage: string;
+    spaGoToHomepage: string;
     search: string;
     cancel: string;
     showTableActionsAnnouncement: string;
@@ -122,6 +124,10 @@ export interface Translation extends DefaultTranslation {
     toggleSidenav: string;
     copied: string;
     copyError: string;
+    info: string;
+    warning: string;
+    error: string;
+    success: 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.7BLYNLBH.js";
+} from "../chunks/chunk.QY3AIGLE.js";
 import "../chunks/chunk.5GB6F3WA.js";
 export {
   LocalizeController,

package/dist/utilities/storybook.js

@@ -1,4 +1,4 @@
-import "../chunks/chunk.KYZD4HDJ.js";
+import "../chunks/chunk.2IQGSC6O.js";
 import "../chunks/chunk.UVGAHM33.js";
 import "../chunks/chunk.IQCD6SDT.js";
 import "../chunks/chunk.WYUQG5BJ.js";
@@ -6,7 +6,7 @@ import "../chunks/chunk.B4BZKR24.js";
 import "../chunks/chunk.QBV4OLYE.js";
 import "../chunks/chunk.LRTTUCZP.js";
 import "../chunks/chunk.PWL7QCVG.js";
-import "../chunks/chunk.7BLYNLBH.js";
+import "../chunks/chunk.QY3AIGLE.js";
 import "../chunks/chunk.7627FYPL.js";
 import "../chunks/chunk.KPJCYT4S.js";
 import "../chunks/chunk.TUVJKY7S.js";

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

@@ -828,6 +828,12 @@
       "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), [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.",
@@ -900,12 +906,6 @@
       ],
       "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-combobox",
       "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### **Events:**\n - **dsa-after-hide** - Emitted after the combobox's menu closes and all animations are complete.\n- **dsa-after-show** - Emitted after the combobox's menu opens and all animations are complete.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-change** - Emitted when the control's value changes.\n- **dsa-clear** - Emitted when the control's value is cleared.\n- **dsa-focus** - Emitted when the control gains focus.\n- **dsa-hide** - Emitted when the combobox's menu closes.\n- **dsa-input** - Emitted when the control receives input. Debounced according to `debounce-timeout` value.\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 combobox's menu opens.\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",
@@ -1890,6 +1890,28 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "dsa-header-modern",
+      "description": "The header offers elements of information on the site (logos, title, etc.), a search field and a set of links and actions for the user.\n---\n\n\n### **Slots:**\n - **external-links** - External links that will be displayed in the very top on desktop.\n- **second-logo** - Optional second logo.\n- **site-name** - Website / service name.\n- **search** - Search component (dsa-header-search).\n- _default_ - Right section of the header, used for action buttons.\n- **navbar** - Navigation bar.\n\n### **CSS Properties:**\n - **--header-max-width** - Custom value for the header content maximum width _(default: undefined)_\n- **--header-padding-inline** - Custom value for the header inline padding _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "first-logo",
+          "description": "Choice between public or pro for the first logo",
+          "values": [{ "name": "" }, { "name": "public" }, { "name": "pro" }]
+        },
+        {
+          "name": "search-expanded",
+          "description": "Expands the search",
+          "values": []
+        },
+        {
+          "name": "mobile",
+          "description": "Controls whether the header is rendered in its mobile version or in its desktop version",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-header-search",
       "description": "The header-search adds a collapsible search interface inside the header.\n---\n\n\n### **Events:**\n - **dsa-expand** - Emitted when the expand button is activated.\n- **dsa-change** - Emitted when an alteration to the search input control's value is committed by the user.\n- **dsa-input** - Emitted when the search input control receives input.\n- **dsa-clear** - Emitted when the clear button is activated.\n- **dsa-focus** - Emitted when the search input control gains focus.\n- **dsa-blur** - Emitted when the search input control loses focus.\n- **dsa-submit** - Emitted when the submit button is activated, or when the user presses 'Enter' on the input.\n- **dsa-collapse** - Emitted when the cancel button is activated.",
@@ -2113,18 +2135,6 @@
       "attributes": [],
       "references": []
     },
-    {
-      "name": "dsa-input-otp",
-      "description": "The OTP input is used for MFA procedure of authenticating users by a one-time password.\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### **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.",
-      "attributes": [
-        {
-          "name": "length",
-          "description": "The length of input that will be considered valid.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "dsa-input-phone",
       "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### **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.",
@@ -2147,6 +2157,18 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-input-otp",
+      "description": "The OTP input is used for MFA procedure of authenticating users by a one-time password.\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### **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.",
+      "attributes": [
+        {
+          "name": "length",
+          "description": "The length of input that will be considered valid.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-input-time",
       "description": "Custom input for time, with a custom dropdown component for selecting times and restriction capabilities.\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 - **showTimePicker()** - Displays the time picker for an input element.\n- **hideTimePicker()** - Hides the time picker\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.",
@@ -3828,7 +3850,17 @@
           "description": "Makes the tag removable and shows a remove button.",
           "values": []
         },
-        { "name": "label", "values": [] }
+        { "name": "label", "values": [] },
+        {
+          "name": "accessible-name",
+          "description": "(Optional) An accessible name for the tag",
+          "values": []
+        },
+        {
+          "name": "tooltip",
+          "description": "Display the tag label in a tooltip",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -4063,7 +4095,8 @@
           "values": [
             { "name": "single" },
             { "name": "multiple" },
-            { "name": "leaf" }
+            { "name": "leaf" },
+            { "name": "parent" }
           ]
         }
       ],