@ds-autonomie/web-components 2.0.1 → 2.2.0

package/dist/utilities/icon-library.js

@@ -2,9 +2,9 @@ import "../chunks/chunk.HAL7R4WT.js";
 import {
   registerIconLibrary,
   unregisterIconLibrary
-} from "../chunks/chunk.3E6XVTWL.js";
+} from "../chunks/chunk.P45DWAWT.js";
 import "../chunks/chunk.C2W7WMBY.js";
-import "../chunks/chunk.QTUCYPM5.js";
+import "../chunks/chunk.3TUFAITJ.js";
 import "../chunks/chunk.L633QVVV.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {

package/dist/utilities/storybook.d.ts

@@ -47,3 +47,4 @@ export declare const withOnLayerOnBaseDecorator: Decorator;
 export declare const withOnFloatingMenuOnBaseDecorator: Decorator;
 export declare const withBackgroundDecorator: Decorator;
 export declare const filtersDrawerDecorator: Decorator;
+export declare const fullScreenDecorator: Decorator;

package/dist/utilities/storybook.js

@@ -4,11 +4,12 @@ import {
   excludeArgsByPrefix,
   extractArgsByPrefix,
   filtersDrawerDecorator,
+  fullScreenDecorator,
   updateCompleteArgTypes,
   withBackgroundDecorator,
   withOnFloatingMenuOnBaseDecorator,
   withOnLayerOnBaseDecorator
-} from "../chunks/chunk.IAL72I44.js";
+} from "../chunks/chunk.MYSJOWY5.js";
 import "../chunks/chunk.S3NI7NKU.js";
 export {
   errorArgTypes,
@@ -16,6 +17,7 @@ export {
   excludeArgsByPrefix,
   extractArgsByPrefix,
   filtersDrawerDecorator,
+  fullScreenDecorator,
   updateCompleteArgTypes,
   withBackgroundDecorator,
   withOnFloatingMenuOnBaseDecorator,

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

@@ -330,7 +330,11 @@
       "name": "dsa-button",
       "description": "Buttons represent actions that are available to the user.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the button loses focus.\n- **dsa-focus** - Emitted when the button gains focus.\n- **dsa-invalid** - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n- **dsa-change** - Emitted when a toggle button changes its pressed state.\n\n### **Methods:**\n - **click()** - Simulates a click on the button.\n- **focus(options: _FocusOptions_)** - Sets focus on the button.\n- **blur()** - Removes focus from the button.\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 button's label.\n- **prefix** - A presentational prefix icon or similar element.\n- **suffix** - A presentational suffix icon or similar element.",
       "attributes": [
-        { "name": "title", "values": [] },
+        {
+          "name": "title",
+          "description": "(deprecated) The use of this attribute will lead to a duplicated reading by screen readers. You can use the accessible-name attribute instead.",
+          "values": []
+        },
         {
           "name": "variant",
           "description": "The button's theme variant.",
@@ -475,6 +479,11 @@
         },
         {
           "name": "aria-label",
+          "description": "(deprecated) The use of this attribute will lead to a duplicated reading by screen readers. You can use the accessible-name attribute instead.",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
           "description": "Provides an accessible label for the button element",
           "values": []
         },
@@ -502,6 +511,11 @@
       "attributes": [
         {
           "name": "title",
+          "description": "(deprecated) The use of this attribute will lead to a duplicated reading by screen readers. You can use the callout-title attribute instead.",
+          "values": []
+        },
+        {
+          "name": "callout-title",
           "description": "The callout's title.",
           "values": []
         },
@@ -556,7 +570,11 @@
       "name": "dsa-checkbox",
       "description": "Checkboxes allow the user to toggle an option on or off.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when the checkbox loses focus.\n- **dsa-change** - Emitted when the checked state changes.\n- **dsa-focus** - Emitted when the checkbox gains focus.\n- **dsa-input** - Emitted when the checkbox 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 - **click()** - Simulates a click on the checkbox.\n- **focus(options: _FocusOptions_)** - Sets focus on the checkbox.\n- **blur()** - Removes focus from the checkbox.\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. The value provided will be shown to the user when the form is submitted. To clear\nthe custom validation message, call this method with an empty string.\n\n### **Slots:**\n - _default_ - The checkbox's label.",
       "attributes": [
-        { "name": "title", "values": [] },
+        {
+          "name": "title",
+          "description": "(deprecated) The use of this attribute will lead to a duplicated reading by screen readers. You can use the accessible-name attribute instead.",
+          "values": []
+        },
         {
           "name": "name",
           "description": "The name of the checkbox, submitted as a name/value pair with form data.",
@@ -618,7 +636,12 @@
         },
         {
           "name": "aria-label",
-          "description": "Provides an accessible label for the button element",
+          "description": "(deprecated) The use of this attribute will lead to a duplicated reading by screen readers. You can use the accessible-name attribute instead.",
+          "values": []
+        },
+        {
+          "name": "accessible-name",
+          "description": "Provides an accessible label for the checkbox element (used by dsa-table-row and dsa-table-header-row)",
           "values": []
         }
       ],
@@ -651,7 +674,7 @@
         },
         {
           "name": "value",
-          "description": "The current value of the checkbox group, submitted as a name/value pair with form data. The value is a comma-delimited list of values based on the checked checkboxes.",
+          "description": "The current value of the checkbox group, representing a list of the checked children checkbox items (designated\nby their “value” and separated by a comma). It can be used as a way to define which items are checked by default,\nand is submitted as name/value pairs with form data.",
           "values": [{ "name": "string[]" }]
         },
         {
@@ -688,6 +711,11 @@
           "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[]" }]
+        },
+        {
+          "name": "hide-label",
+          "description": "Hides the label to avoid duplication. Please make sure there is another visible label for the group. You still need to provide a `label` via attribute or slot.",
+          "values": []
         }
       ],
       "references": []
@@ -703,7 +731,7 @@
         },
         {
           "name": "value",
-          "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.",
+          "description": "The current value of the combobox, representing a list of the selected options (or single option if “multiple” is\ndisabled). Selected options are designated by their value, and separated by a space. It can be used as a way to\ndefine which options are selected by default, and will be sent as name/value pairs with form data.",
           "values": [{ "name": "string[]" }]
         },
         {
@@ -781,9 +809,14 @@
           "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.",
           "values": []
         },
+        {
+          "name": "hide-title",
+          "description": "Hides the title part of the header, allowing users to still use the close button to dismiss the dialog.",
+          "values": []
+        },
         {
           "name": "no-header",
-          "description": "Disables the header. 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 provide an easy,\naccessible way for users to dismiss the dialog.",
           "values": []
         },
         {
@@ -1063,7 +1096,7 @@
         },
         {
           "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\"",
+          "description": "The error message or messages that are shown when “error” is set to “true”. To display several\nmessages, they must be separated by a pipe character, e.g. \"Error 1|Error 2|Error 3”.",
           "values": [{ "name": "string[]" }]
         }
       ],
@@ -1282,7 +1315,7 @@
       "attributes": [
         {
           "name": "value",
-          "description": "The current value of the filter. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.",
+          "description": "The current value of the filter, representing a list of the selected options (or single option if “multiple”\nis disabled). It can be used as a way to define which options are selected by default. Selected options are\ndesignated by their value, and separated by a space.",
           "values": [{ "name": "string[]" }]
         },
         {
@@ -1292,7 +1325,7 @@
         },
         {
           "name": "max-visible-list-length",
-          "description": "The maximum number of options that will be displayed by default. The user will then have to press \"See All\" to display the complete list. Set to 0 to remove the limit.",
+          "description": "The maximum number of options that will be displayed by default. The user will then have to press \"See All\" to\ndisplay the complete list. Set to 0 to remove the limit.",
           "values": []
         },
         {
@@ -1551,11 +1584,11 @@
     },
     {
       "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- **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)_",
+      "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)_",
       "attributes": [
         {
           "name": "first-logo",
-          "description": "Choice bewteen public or pro for the first logo",
+          "description": "Choice between public or pro for the first logo",
           "values": [{ "name": "" }, { "name": "public" }, { "name": "pro" }]
         },
         {
@@ -1563,6 +1596,11 @@
           "description": "The url of the first logo link",
           "values": []
         },
+        {
+          "name": "logo-size",
+          "description": "Renders the logo with larger dimensions",
+          "values": [{ "name": "default" }, { "name": "large" }]
+        },
         {
           "name": "search-expanded",
           "description": "Expands the search",
@@ -1595,6 +1633,16 @@
           "name": "expanded",
           "description": "Expands the search and displays the input",
           "values": []
+        },
+        {
+          "name": "always-open",
+          "description": "Renders the search in an always opened state",
+          "values": []
+        },
+        {
+          "name": "mobile",
+          "description": "Controls whether the header search is rendered in its mobile version or in its desktop version",
+          "values": []
         }
       ],
       "references": []
@@ -1991,6 +2039,75 @@
       ],
       "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### **Methods:**\n - **blur()** - Removes focus from the input.\n- **checkValidity()** - Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.\n- **focus(options: _FocusOptions_)** - Sets focus on the input.\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- **select()** - Selects all the text in the input.\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- **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": "pattern",
+          "description": "A regular expression pattern to validate input against.",
+          "values": []
+        },
+        {
+          "name": "length",
+          "description": "The length of input that will be considered valid.",
+          "values": []
+        },
+        {
+          "name": "autocapitalize",
+          "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+          "values": [
+            { "name": "" },
+            { "name": "off" },
+            { "name": "none" },
+            { "name": "on" },
+            { "name": "sentences" },
+            { "name": "words" },
+            { "name": "characters" }
+          ]
+        },
+        {
+          "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" }
+          ]
+        },
+        {
+          "name": "inputmode",
+          "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+          "values": [
+            { "name": "" },
+            { "name": "none" },
+            { "name": "text" },
+            { "name": "decimal" },
+            { "name": "numeric" },
+            { "name": "tel" },
+            { "name": "search" },
+            { "name": "email" },
+            { "name": "url" }
+          ]
+        }
+      ],
+      "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### **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- **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- **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.",
@@ -2728,8 +2845,13 @@
         },
         {
           "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\"",
+          "description": "The error message or messages that are shown when “error” is set to “true”. To display several messages,\nthey must be separated by a pipe character, e.g. \"Error 1|Error 2|Error 3”",
           "values": [{ "name": "string[]" }]
+        },
+        {
+          "name": "hide-label",
+          "description": "Hides the label to avoid duplication. Please make sure there is another visible label for the group. You still need to provide a `label` via attribute or slot.",
+          "values": []
         }
       ],
       "references": []
@@ -2738,11 +2860,6 @@
       "name": "dsa-range-slider",
       "description": "Range slider allows users to select a value within a predefined range by sliding a handle along a track.\n---\n\n\n### **Events:**\n - **dsa-blur** - Emitted when one of the thumb controls loses focus.\n- **dsa-focus** - Emitted when one of the thumb controls gains focus.\n- **dsa-slider-from-value-change** - Emitted when the lower value of the range slider changes.\n- **dsa-slider-to-value-change** - Emitted when the higher value of the range slider changes.\n\n### **Methods:**\n - **focusSliderLeftThumb(options: _FocusOptions_)** - Sets focus on the left thumb.\n- **blurSliderLeftThumb()** - Removes focus from the left thumb.\n- **focusSliderRightThumb(options: _FocusOptions_)** - Sets focus on the right thumb.\n- **blurSliderRightThumb()** - Removes focus from the right thumb.",
       "attributes": [
-        {
-          "name": "title",
-          "description": "The title contains a text representing advisory information related to the element it belongs to.",
-          "values": []
-        },
         {
           "name": "label-from",
           "description": "Provides an accessible label for the left cursor of the slider element",
@@ -2830,7 +2947,7 @@
       "attributes": [
         {
           "name": "value",
-          "description": "The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\nvalue will be a space-delimited list of values based on the options selected.",
+          "description": "The current value of the select component, representing a list of the selected options (or single option if\n“multiple” is disabled). It can be used to define which options are selected by default. Selected options\nare designated by their value and separated by a space, and will\nbe submitted as name/value pairs with form data.",
           "values": [{ "name": "string[]" }]
         },
         {
@@ -3074,6 +3191,11 @@
           "description": "Makes the tab closable and shows a close button.",
           "values": []
         },
+        {
+          "name": "close-button-label",
+          "description": "Provide a custom label for the tab close button.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "Disables the tab and prevents selection.",