@ds-autonomie/web-components 2.14.1 → 2.16.0

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

@@ -13,7 +13,7 @@ export default css`
     --dsa-wc-opacity-50: 0.5;
     --dsa-wc-opacity-100: 1;
     --dsa-wc-alert-padding: var(--dsa-spacing-16);
-    --dsa-wc-alert-icon-size: 1.8em;
+    --dsa-wc-alert-icon-size: 1.5rem;
     --dsa-wc-alert-icon-margin-inline: 1rem;
     --dsa-wc-alert-border-radius: var(--dsa-spacing-4);
     --dsa-wc-alert-border-color: var(--dsa-color-border-default);
@@ -23,7 +23,6 @@ export default css`
     --dsa-wc-alert-title-color: var(--dsa-color-alert-on-background-title);
     --dsa-wc-alert-title-padding-top: 0.125rem;
     --dsa-wc-alert-message-font: var(--dsa-font-medium-normal);
-    --dsa-wc-alert-message-padding: 1.25rem;
     --dsa-wc-alert-primary-icon-color: var(
       --dsa-color-alert-on-background-info
     );
@@ -69,6 +68,13 @@ export default css`
     --dsa-wc-alert-neutral-background-color: var(
       --dsa-color-alert-background-neutral
     );
+    --dsa-wc-alert-small-padding: var(--dsa-spacing-12);
+    --dsa-wc-alert-small-icon-size: 1.25rem;
+    --dsa-wc-alert-small-icon-margin-inline: 0.75rem;
+    --dsa-wc-alert-small-text-gap: 0.25rem;
+    --dsa-wc-alert-small-title-font: var(--dsa-font-small-bold);
+    --dsa-wc-alert-small-title-padding-top: 0.125rem;
+    --dsa-wc-alert-small-message-font: var(--dsa-font-small-normal);
     --dsa-wc-callout-padding: var(--dsa-spacing-16) var(--dsa-spacing-24);
     --dsa-wc-callout-border-radius: 0px 3px 3px 0px;
     --dsa-wc-callout-text-gap: var(--dsa-spacing-8);
@@ -1807,8 +1813,7 @@ export default css`
     );
     --dsa-wc-accordion-border-radius: var(--dsa-spacing-4);
     --dsa-wc-accordion-header-border-radius: 3px;
-    --dsa-wc-accordion-closed-header-hover-border-radius: 3px;
-    --dsa-wc-accordion-header-hover-border-radius: 3px 3px 0px 0px;
+    --dsa-wc-accordion-header-open-border-radius: 3px 3px 0px 0px;
     --dsa-wc-accordion-padding: 1rem;
     --dsa-wc-accordion-font: var(--dsa-font-medium-normal);
     --dsa-wc-accordion-color: var(--dsa-color-text-on-base-primary);
@@ -1832,8 +1837,6 @@ export default css`
     --dsa-wc-accordion-summary-font: var(--dsa-font-large-bold);
     --dsa-wc-accordion-small-summary-font: var(--dsa-font-medium-bold);
     --dsa-wc-accordion-hover-border-color: var(--dsa-color-border-hover);
-    --dsa-wc-accordion-focus-border: 3px solid
-      var(--dsa-color-primitive-colors-system-focus-500);
     --dsa-wc-accordion-header-hover-background-color: var(
       --dsa-color-accordion-hover-background
     );
@@ -1890,7 +1893,6 @@ export default css`
       --dsa-color-text-on-base-secondary
     );
     --dsa-wc-combobox-empty-label-font: var(--dsa-font-small-normal);
-    --dsa-wc-combobox-listbox-padding-inline: 1.75rem;
     --dsa-wc-combobox-icon-margin: 0.75rem;
     --dsa-wc-combobox-expand-icon-error-color: var(
       --dsa-color-icon-on-base-error
@@ -2193,7 +2195,9 @@ export default css`
     --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-color: var(
+      --dsa-color-text-on-base-primary
+    );
     --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;
@@ -2604,9 +2608,6 @@ export default css`
     padding-right: var(--dsa-wc-scroll-lock-size) !important;
     overflow: hidden !important;
   }
-  .dialog__body::-webkit-scrollbar-track-piece {
-    background-color: var(--dsa-wc-dialog-scrollbar-color) !important;
-  }
   .dsa-toast-stack {
     position: fixed;
     top: 0;
@@ -2735,11 +2736,7 @@ export default css`
     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;
@@ -2749,12 +2746,14 @@ export default css`
     position: relative;
     width: auto;
     height: auto;
-    clip: unset;
     clip-path: unset;
     overflow: unset;
     white-space: unset;
     padding: unset;
   }
+  .no-animations {
+    --dsa-wc-no-animations-duration: 0s;
+  }
 
   .dsa-grid-container {
     --dsa-grid-gap: 16px;

package/dist/translations/en-gb.js

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

package/dist/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.QY3AIGLE.js";
+} from "../chunks/chunk.TYAQGRNJ.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   en_default as default

package/dist/translations/fr.js

@@ -1,6 +1,6 @@
 import {
   fr_default
-} from "../chunks/chunk.QY3AIGLE.js";
+} from "../chunks/chunk.TYAQGRNJ.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   fr_default as default

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.2FH4CXEK.js";
+} from "../chunks/chunk.GBZY2OWL.js";
+import "../chunks/chunk.AG4HZDJV.js";
 import "../chunks/chunk.C2W7WMBY.js";
-import "../chunks/chunk.RIKQNF2V.js";
 import "../chunks/chunk.L633QVVV.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {

package/dist/utilities/localize.d.ts

@@ -42,6 +42,8 @@ export interface Translation extends DefaultTranslation {
     skipLinksAriaLabel: string;
     errorMessagePanelCodePrefix: string;
     fileSelect: (directory: boolean, multiple: boolean) => string;
+    fileDropHere: (multiple: boolean) => string;
+    onlySingleFileAllowed: string;
     clearFile: (fileName: string) => string;
     uploadFileProgressBar: string;
     pagination: string;

package/dist/utilities/localize.js

@@ -1,7 +1,7 @@
 import {
   LocalizeController,
   registerTranslation
-} from "../chunks/chunk.QY3AIGLE.js";
+} from "../chunks/chunk.TYAQGRNJ.js";
 import "../chunks/chunk.N3L4GIUO.js";
 export {
   LocalizeController,

package/dist/utilities/storybook.js

@@ -1,14 +1,14 @@
-import "../chunks/chunk.KPSGU7NH.js";
+import "../chunks/chunk.5C436DB4.js";
 import "../chunks/chunk.UVGAHM33.js";
-import "../chunks/chunk.VINWQYG4.js";
-import "../chunks/chunk.WYUQG5BJ.js";
+import "../chunks/chunk.GYWU4AAB.js";
+import "../chunks/chunk.WOMQVTNZ.js";
 import "../chunks/chunk.B4BZKR24.js";
 import "../chunks/chunk.D6XRV35U.js";
 import "../chunks/chunk.HPDCOGLH.js";
 import "../chunks/chunk.PWL7QCVG.js";
-import "../chunks/chunk.QY3AIGLE.js";
+import "../chunks/chunk.TYAQGRNJ.js";
 import "../chunks/chunk.QB2NJE2Y.js";
-import "../chunks/chunk.SL3DN4BD.js";
+import "../chunks/chunk.SVWU6JW4.js";
 import "../chunks/chunk.TUVJKY7S.js";
 import "../chunks/chunk.N3L4GIUO.js";
 

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

@@ -116,6 +116,11 @@
             { "name": "danger" }
           ]
         },
+        {
+          "name": "size",
+          "description": "The alert's size.",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        },
         {
           "name": "duration",
           "description": "(deprecated) The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\nthe alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\nthe alert will not close on its own.",
@@ -1344,7 +1349,7 @@
     },
     {
       "name": "dsa-file-upload",
-      "description": "File upload allows users to select and send one or more files.\n---\n\n\n### **Events:**\n - **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-file-upload** - Emitted when a file is selected. It can be multiple files if multiple or directory are set to `true`.\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()** - 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- **handleValueChange()** - Synchronizes the native input if the element gets reset\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The files options. Must be `<dsa-file-upload-item>` elements.\n- **label** - The file-upload's label. Alternatively, you can use the `label` attribute.\n- **button-label** - The file-upload's button label. Alternatively, you can use the `button-label` attribute. If both are left empty, a predefined label will be displayed.\n- **description** - The file-upload's description. Alternatively, you can use the `description` attribute.\n- **help-text** - Text that describes how to use the file-upload. Alternatively, you can use the `help-text` attribute.",
+      "description": "File upload allows users to select and send one or more files.\n---\n\n\n### **Events:**\n - **dsa-focus** - Emitted when the control gains focus.\n- **dsa-blur** - Emitted when the control loses focus.\n- **dsa-file-upload** - Emitted when a file is selected. It can be multiple files if multiple or directory are set to `true`.\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()** - 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- **removeFile(index: _number_)** - Remove a previously selected file\n- **handleValueChange()** - Synchronizes the native input if the element gets reset\n- **focus(options: _FocusOptions_)** - Sets focus on the control.\n- **blur()** - Removes focus from the control.\n\n### **Slots:**\n - _default_ - The files options. Must be `<dsa-file-upload-item>` elements.\n- **label** - The file-upload's label. Alternatively, you can use the `label` attribute.\n- **button-label** - The file-upload's button label. Alternatively, you can use the `button-label` attribute. If both are left empty, a predefined label will be displayed.\n- **description** - The file-upload's description. Alternatively, you can use the `description` attribute.\n- **help-text** - Text that describes how to use the file-upload. Alternatively, you can use the `help-text` attribute.",
       "attributes": [
         {
           "name": "size",
@@ -1360,6 +1365,11 @@
           "description": "The file-upload's label. If you need to display HTML, use the `label` slot instead.",
           "values": []
         },
+        {
+          "name": "type",
+          "description": "Type of interface : button only or additional drop zone",
+          "values": [{ "name": "button" }, { "name": "drop" }]
+        },
         {
           "name": "button-label",
           "description": "The file-upload's button label. If you need to display HTML, use the `button-label` slot instead. If both are left empty, a predefined label will be displayed.",
@@ -1852,6 +1862,29 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-graphic-element",
+      "description": "Graphic elements can be used  as decorative icons.\n---\n\n\n### **Events:**\n - **dsa-load** - Emitted when the graphic element has loaded.\n- **dsa-error** - Emitted when the graphic element fails to load due to an error.",
+      "attributes": [
+        {
+          "name": "name",
+          "description": "The name of the icon to draw. Available names depend on the icon library being used.",
+          "values": [{ "name": "GraphicElementName" }, { "name": "''" }]
+        },
+        {
+          "name": "variant",
+          "description": "The graphic element's theme variant.",
+          "values": [
+            { "name": "" },
+            { "name": "on-base" },
+            { "name": "on-light-brand" },
+            { "name": "on-contrasted-brand" },
+            { "name": "on-purple-background" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-header",
       "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- **first-logo** - Change the first logo (for exemple if you need to use Angular routerLink).\n- **second-logo** - Optional second logo.\n- **site-name** - Website / service name.\n- **baseline** - Baseline / precisions on the service.\n- **search** - Search component (dsa-header-search).\n- _default_ - Right section of the header, used for action buttons.\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)_",