@ds-autonomie/web-components 2.7.0 → 2.8.0

package/cdn/translations/en-gb.js

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

package/cdn/translations/en.js

@@ -1,6 +1,6 @@
 import {
   en_default
-} from "../chunks/chunk.EM2CIX7W.js";
+} from "../chunks/chunk.57JI3UNH.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.EM2CIX7W.js";
+} from "../chunks/chunk.57JI3UNH.js";
 import "../chunks/chunk.CAMVBH5H.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {

package/cdn/utilities/directives.js

@@ -1,8 +1,8 @@
 import {
   ifDefinedAndNotEmpty
-} from "../chunks/chunk.B6GVVW66.js";
-import "../chunks/chunk.YQLIIKLI.js";
-import "../chunks/chunk.7HUC6BF3.js";
+} from "../chunks/chunk.SUUV7E4I.js";
+import "../chunks/chunk.XED65RH5.js";
+import "../chunks/chunk.JXF4O366.js";
 import "../chunks/chunk.4ZGVANML.js";
 export {
   ifDefinedAndNotEmpty

package/cdn/utilities/localize.d.ts

@@ -118,6 +118,9 @@ export interface Translation extends DefaultTranslation {
     userMenu: string;
     switchOn: string;
     switchOff: string;
+    sidenav: string;
+    expandSidenav: string;
+    collapseSidenav: string;
     fr_FR: string;
     fr_GP: string;
     fr_GF: string;

package/cdn/utilities/localize.js

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

package/cdn/utilities/storybook.js

@@ -1,7 +1,7 @@
-import "../chunks/chunk.R7BJEFEU.js";
+import "../chunks/chunk.UKK3NS3L.js";
 import {
   x
-} from "../chunks/chunk.7HUC6BF3.js";
+} from "../chunks/chunk.JXF4O366.js";
 import "../chunks/chunk.4ZGVANML.js";
 
 // src/utilities/storybook.ts
@@ -60,8 +60,6 @@ var withBackgroundDecorator = (story, context) => {
         return "--dsa-color-surface-layer";
       case "floating":
         return "--dsa-color-surface-floatting-menu";
-      case "contrasted":
-        return "--dsa-color-surface-contrasted";
       case "base":
       default:
         return "--dsa-color-surface-base";

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

@@ -641,7 +641,11 @@
         {
           "name": "size",
           "description": "The card's size.",
-          "values": [{ "name": "small" }, { "name": "large" }]
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
         }
       ],
       "references": []
@@ -1073,7 +1077,7 @@
         },
         {
           "name": "variant",
-          "description": "The link's theme variant.",
+          "description": "The link's theme variant. TODO : remove `contrasted` in the next major release",
           "values": [
             { "name": "base" },
             { "name": "layer" },
@@ -1210,7 +1214,17 @@
     {
       "name": "dsa-error-text",
       "description": "Error Text can be used to display an error message under an input or a fieldset\n---\n\n\n### **Slots:**\n - _default_ - The error-text's main content.",
-      "attributes": [],
+      "attributes": [
+        {
+          "name": "variant",
+          "description": "The error variant.",
+          "values": [
+            { "name": "base" },
+            { "name": "layer" },
+            { "name": "floating" }
+          ]
+        }
+      ],
       "references": []
     },
     {
@@ -1901,6 +1915,11 @@
           "description": "Disables the button.",
           "values": []
         },
+        {
+          "name": "floating",
+          "description": "Draws the button with it's floating menu style. When this is false the default style is on base.",
+          "values": []
+        },
         {
           "name": "toggle",
           "description": "Determines if the button is toggleable (if it can be switched on and off)",
@@ -1968,7 +1987,12 @@
         { "name": "lang", "values": [] },
         { "name": "calendar-start-date", "values": [] },
         { "name": "hide-calendar-button", "values": [] },
-        { "name": "range", "values": [] }
+        { "name": "range", "values": [] },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
+        }
       ],
       "references": []
     },
@@ -2058,13 +2082,18 @@
           "name": "step",
           "description": "Allows the implementation of steps between each possible value, in seconds. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/step) for more information.",
           "values": []
+        },
+        {
+          "name": "hoist",
+          "description": "Enable this option to prevent the listbox from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+          "values": []
         }
       ],
       "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.",
+      "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- **prefix** - The menu-accordion's prefix, usually an icon.\n- **summary** - The menu-accordion's summary. Alternatively, you can use the `summary` attribute.\n- **badge** - The menu-accordion's badge.",
       "attributes": [
         {
           "name": "open",
@@ -2076,6 +2105,15 @@
           "description": "The summary to show in the header. If you need to display HTML, use the `summary` slot instead.",
           "values": []
         },
+        {
+          "name": "size",
+          "description": "The menu accordion's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
         {
           "name": "level",
           "description": "The level of the menu accordion",
@@ -2314,6 +2352,11 @@
           "name": "mobile",
           "description": "Controls whether the page header is rendered in its mobile version or in its desktop version",
           "values": []
+        },
+        {
+          "name": "reduced",
+          "description": "Controls whether the page header is rendered with reduced content",
+          "values": []
         }
       ],
       "references": []
@@ -2887,6 +2930,51 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-search",
+      "description": "The search combines a styled input and a submit button.\n---\n\n\n### **Events:**\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\n### **Slots:**\n - **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The form control's size.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        },
+        {
+          "name": "variant",
+          "description": "The form control's variant.",
+          "values": [
+            { "name": "base" },
+            { "name": "layer" },
+            { "name": "floating" }
+          ]
+        },
+        {
+          "name": "value",
+          "description": "The current value of the input",
+          "values": []
+        },
+        {
+          "name": "help-text",
+          "description": "The form control's help text. If you need to display HTML, use the `help-text` slot instead.",
+          "values": []
+        },
+        {
+          "name": "error",
+          "description": "Indicates whether the form control should be in error state",
+          "values": []
+        },
+        {
+          "name": "error-message",
+          "description": "An error message that is shown when `error` is set to true. If there are several messages, must be a\nstring of messages separated by a pipe, e.g. \"Error 1|Error 2|Error 3\"",
+          "values": [{ "name": "string[]" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-select",
       "description": "Selects allow you to choose items from a menu of predefined options.\n---\n\n\n### **Events:**\n - **dsa-after-hide** - Emitted after the select's menu closes and all animations are complete.\n- **dsa-after-show** - Emitted after the select's menu opens and all animations are complete.\n- **dsa-change** - Emitted when the control's value changes.\n- **dsa-blur** - Emitted when the control loses focus.\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 select's menu closes.\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 select'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. You can use `<dsa-divider>` to group items visually.\n- **label** - The input's label. Alternatively, you can use the `label` attribute.\n- **prefix** - Used to prepend a presentational icon or similar element to the combobox.\n- **help-text** - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n- **tooltip** - The tooltip slot allows additional information to be passed along the label.",
@@ -2952,6 +3040,28 @@
       ],
       "references": []
     },
+    {
+      "name": "dsa-sidenav",
+      "description": "Side navigation provides menus and links for user navigation, and can be expanded or collapsed by the user.\n---\n\n\n### **Events:**\n - **dsa-expand** - Emitted when the sidenac expands.\n- **dsa-collapse** - Emitted when the sidenac closes.\n\n### **Slots:**\n - _default_ - Menu content (in collasped mode, only menu-navigation, menu-accordion, divider, menu-label will be displayed) placed at the top.\n- **bottom** - Menu content (in collasped mode, only menu-navigation, menu-accordion, divider, menu-label will be displayed) placed at the bottom.\n\n### **CSS Properties:**\n - **--sidenav-expanded-width** - The width of the expanded sidenav. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "collapsed",
+          "description": "Whether the sidenav is collapsed",
+          "values": []
+        },
+        {
+          "name": "allow-shortcut",
+          "description": "Whether the sidenav can be toggled with the keyboard.",
+          "values": []
+        },
+        {
+          "name": "nav-label",
+          "description": "Nav element custom label",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "dsa-skeleton",
       "description": "Skeletons are used to provide a visual representation of where content will eventually be drawn.\n---\n\n\n### **CSS Properties:**\n - **--border-radius** - The skeleton's border radius. _(default: undefined)_\n- **--color** - The color of the skeleton. _(default: undefined)_\n- **--sheen-color** - The sheen color when the skeleton is in its loading state. _(default: undefined)_",
@@ -3173,15 +3283,21 @@
           "values": []
         },
         {
-          "name": "on-label",
+          "name": "label-on",
           "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",
+          "name": "on-label",
+          "description": "(Deprecated) Not working on Angular",
+          "values": []
+        },
+        {
+          "name": "label-off",
           "description": "State OFF text equivalent, to make understanding the state of the switch easier for users with visual or cognitive disabilities,",
           "values": []
-        }
+        },
+        { "name": "off-label", "description": "(Deprecated)", "values": [] }
       ],
       "references": []
     },
@@ -3567,42 +3683,8 @@
           "description": "The tag's theme variant.",
           "values": [
             { "name": "" },
-            { "name": "purple-100" },
-            { "name": "purple-200" },
-            { "name": "purple-300" },
-            { "name": "purple-400" },
-            { "name": "purple-500" },
-            { "name": "blue-100" },
-            { "name": "blue-200" },
-            { "name": "blue-300" },
-            { "name": "blue-400" },
-            { "name": "blue-500" },
-            { "name": "blue-600" },
-            { "name": "orange-100" },
-            { "name": "orange-200" },
-            { "name": "orange-300" },
-            { "name": "orange-400" },
-            { "name": "orange-500" },
-            { "name": "orange-600" },
-            { "name": "pink-100" },
-            { "name": "pink-200" },
-            { "name": "pink-300" },
-            { "name": "pink-400" },
-            { "name": "pink-500" },
-            { "name": "yellow-100" },
-            { "name": "yellow-200" },
-            { "name": "yellow-300" },
-            { "name": "yellow-400" },
-            { "name": "yellow-500" },
-            { "name": "yellow-600" },
-            { "name": "yellow-700" },
-            { "name": "green-100" },
-            { "name": "green-200" },
-            { "name": "green-300" },
-            { "name": "green-400" },
-            { "name": "green-500" },
-            { "name": "green-600" },
-            { "name": "green-700" }
+            { "name": "(typeof TAG_VARIANTS)[number]" },
+            { "name": "(typeof DEPRECATED_TAG_VARIANTS)[number]" }
           ]
         },
         {