wcs-core 7.0.0 → 7.2.0

package/dist/collection/components/form-field/form-field.css

@@ -7,8 +7,14 @@
   display: flex;
   flex-direction: column;
   gap: var(--wcs-form-field-gap);
+  /* Components in the prefix slot */
+  /* Components in the suffix slot */
+}
+:host .input-container {
+  display: flex;
 }
 :host ::slotted([slot=prefix]) {
+  /* Select */
   --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);
   --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);
   --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);
@@ -17,6 +23,7 @@
   --wcs-select-control-border-width-default: 0;
   --wcs-select-control-border-style-focus: dashed;
   --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);
+  /* Native select */
   --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);
   --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);
   --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);
@@ -26,11 +33,20 @@
   --wcs-native-select-border-style-focus: dashed;
   --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
   --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);
+  /* Button */
+  --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
+}
+:host ::slotted([slot=suffix]) {
+  --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
+  --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
+  --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
 }
-:host ::slotted([slot=prefix][disabled]),
-:host ::slotted([slot=prefix]:disabled),
-:host ::slotted([slot=prefix][aria-disabled=true]),
-:host ::slotted([slot=prefix][data-disabled]) {
+
+/* Disabled components in the prefix slot */
+::slotted([slot=prefix][disabled]),
+::slotted([slot=prefix]:disabled),
+::slotted([slot=prefix][aria-disabled=true]),
+::slotted([slot=prefix][data-disabled]) {
   --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
   --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);
   --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);
@@ -40,11 +56,14 @@
   --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);
   --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);
 }
-:host ::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {
+
+/* Hover and press states */
+::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {
   --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);
   --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);
 }
-:host ::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {
+
+::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {
   --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);
   --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);
 }
@@ -61,16 +80,24 @@
   width: 100%;
 }
 
-:host(.has-prefix) ::slotted(wcs-input) {
+/* Components in the center that are prefixed */
+:host(.has-prefix) ::slotted(:not([slot=prefix])) {
   --wcs-input-border-radius-left: 0;
+  --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
+  --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
 }
 
-:host(.has-suffix) ::slotted(wcs-input) {
+/* Components in the center that are suffixed */
+:host(.has-suffix) ::slotted(:not([slot=suffix])) {
   --wcs-input-border-radius-right: 0;
+  --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
+  --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
 }
 
-::slotted([slot=suffix]) {
-  --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
-  --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0 ;
-  --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
+/* Components in the center that are prefixed AND suffixed */
+:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])) {
+  --wcs-input-border-radius-left: 0;
+  --wcs-input-border-radius-right: 0;
+  --wcs-select-control-border-radius: 0;
+  --wcs-native-select-border-radius: 0;
 }

package/dist/collection/components/form-field/form-field.e2e.js

@@ -0,0 +1,122 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { setWcsContent } from "../../utils/tests";
+describe('Form field component', () => {
+    describe('Global', () => {
+        describe('Accessibility', () => {
+            it('Should put form-field label to aria-label of the spied element when non empty', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = await page.find('wcs-input >>> input');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = input.getAttribute('aria-label');
+                expect(ariaLabel).toBe('Label form field');
+            });
+            it('Should not put form-field label to aria-label of the spied element when empty', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-input/>
+                    </wcs-form-field>
+                `);
+                // When
+                const input = await page.find('wcs-input >>> input');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = input.getAttribute('aria-label');
+                expect(ariaLabel).toBe(null);
+            });
+            it('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label></wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = await page.find('wcs-switch >>> input');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = switchInput.getAttribute('aria-label');
+                expect(ariaLabel).toBe('Label switch');
+            });
+        });
+    });
+    describe('With switch', () => {
+        describe('Accessibility', () => {
+            it('Should concatenate form-field label with switch label', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-switch>Label switch</wcs-switch>
+                    </wcs-form-field>
+                `);
+                // When
+                const switchInput = await page.find('wcs-switch >>> input');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = switchInput.getAttribute('aria-label');
+                expect(ariaLabel).toBe('Label form field Label switch');
+            });
+        });
+    });
+    describe('With checkbox', () => {
+        describe('Accessibility', () => {
+            it('Should concatenate form-field label with checkbox label', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-checkbox>Label checkbox</wcs-checkbox>
+                    </wcs-form-field>
+                `);
+                // When
+                const checkboxInput = await page.find('wcs-checkbox >>> input');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = checkboxInput.getAttribute('aria-label');
+                expect(ariaLabel).toBe('Label form field Label checkbox');
+            });
+        });
+    });
+    describe('With radio-group', () => {
+        describe('Accessibility', () => {
+            it('Should set aria-label on radio-group element', async () => {
+                // Given
+                const page = await newE2EPage();
+                await setWcsContent(page, `
+                    <wcs-form-field>
+                        <wcs-label>Label form field</wcs-label>
+                        <wcs-radio-group>
+                            <wcs-radio name="SA" label="SNCF" value="1"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Réseau" value="2"></wcs-radio>
+                            <wcs-radio name="SA" label="SNCF Voyageurs" value="3"></wcs-radio>
+                        </wcs-radio>
+                        </wcs-radio-group>
+                    </wcs-form-field>
+                `);
+                // When
+                const radioGroup = await page.find('wcs-radio-group');
+                await page.waitForChanges();
+                // Then
+                const ariaLabel = radioGroup.getAttribute('aria-label');
+                expect(ariaLabel).toBe('Label form field');
+            });
+        });
+    });
+});
+//# sourceMappingURL=form-field.e2e.js.map

package/dist/collection/components/form-field/form-field.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field.e2e.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\nimport { setWcsContent } from \"../../utils/tests\";\n\ndescribe('Form field component', () => {\n    describe('Global', () => {\n        describe('Accessibility', () => {\n            it('Should put form-field label to aria-label of the spied element when non empty', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = await page.find('wcs-input >>> input');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = input.getAttribute('aria-label');\n                expect(ariaLabel).toBe('Label form field');\n            });\n            it('Should not put form-field label to aria-label of the spied element when empty', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-input/>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const input = await page.find('wcs-input >>> input');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = input.getAttribute('aria-label');\n                expect(ariaLabel).toBe(null);\n            });\n            it('Should not concatenate form-field label with form control (switch, checkbox label when form-field label is empty', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label></wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = await page.find('wcs-switch >>> input');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = switchInput.getAttribute('aria-label');\n                expect(ariaLabel).toBe('Label switch');\n            });\n        });\n    });\n    describe('With switch', () => {\n        describe('Accessibility', () => {\n            it('Should concatenate form-field label with switch label', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-switch>Label switch</wcs-switch>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const switchInput = await page.find('wcs-switch >>> input');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = switchInput.getAttribute('aria-label');\n                expect(ariaLabel).toBe('Label form field Label switch');\n            });\n        });\n    });\n\n    describe('With checkbox', () => {\n        describe('Accessibility', () => {\n            it('Should concatenate form-field label with checkbox label', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-checkbox>Label checkbox</wcs-checkbox>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const checkboxInput = await page.find('wcs-checkbox >>> input');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = checkboxInput.getAttribute('aria-label');\n                expect(ariaLabel).toBe('Label form field Label checkbox');\n            });\n        });\n    });\n    describe('With radio-group', () => {\n        describe('Accessibility', () => {\n            it('Should set aria-label on radio-group element', async () => {\n                // Given\n                const page = await newE2EPage();\n                await setWcsContent(page, `\n                    <wcs-form-field>\n                        <wcs-label>Label form field</wcs-label>\n                        <wcs-radio-group>\n                            <wcs-radio name=\"SA\" label=\"SNCF\" value=\"1\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Réseau\" value=\"2\"></wcs-radio>\n                            <wcs-radio name=\"SA\" label=\"SNCF Voyageurs\" value=\"3\"></wcs-radio>\n                        </wcs-radio>\n                        </wcs-radio-group>\n                    </wcs-form-field>\n                `);\n\n                // When\n                const radioGroup = await page.find('wcs-radio-group');\n                await page.waitForChanges();\n\n                // Then\n                const ariaLabel = radioGroup.getAttribute('aria-label');\n                expect(ariaLabel).toBe('Label form field');\n            });\n        });\n    });\n});\n"]}

package/dist/collection/components/form-field/form-field.js

@@ -1,5 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { isMutableAriaAttribute } from "../../utils/mutable-aria-attribute";
+import { normalizeWhitespace } from "../../utils/helpers";
+import { isControlComponentWithLabel } from "../../utils/control-component-interface";
 /**
  * Form field component wraps the native input element and add some more functionality on top of it.
  *
@@ -54,8 +56,8 @@ export class FormField {
         this.spiedElement = undefined;
     }
     componentWillLoad() {
-        this.hasSuffix = this.el.querySelector('wcs-button') !== null;
-        this.hasPrefix = this.el.querySelector('wcs-select') !== null;
+        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;
+        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;
     }
     componentDidLoad() {
         this.initSpiedElement();
@@ -122,33 +124,48 @@ export class FormField {
             return;
         }
     }
-    updateAriaAttributes() {
+    async updateAriaAttributes() {
         if (isMutableAriaAttribute(this.spiedElement)) {
-            this.spiedElement.setAriaAttribute('aria-label', this.label);
+            const ariaLabelParts = [];
+            if (isControlComponentWithLabel(this.spiedElement)) {
+                const innerLabel = await this.spiedElement.getLabel();
+                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();
+                if (combinedLabel) {
+                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));
+                }
+            }
+            else {
+                if (this.label) {
+                    ariaLabelParts.push(normalizeWhitespace(this.label));
+                }
+            }
+            if (this.description) {
+                ariaLabelParts.push(normalizeWhitespace(this.description));
+            }
             // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description
             if (this.isError) {
-                if (this.error)
-                    this.spiedElement.setAriaAttribute('aria-description', this.error);
                 this.spiedElement.setAriaAttribute('aria-invalid', 'true');
+                if (this.error) {
+                    ariaLabelParts.push(normalizeWhitespace(this.error));
+                }
             }
             else {
-                if (this.description)
-                    this.spiedElement.setAriaAttribute('aria-description', this.description);
                 this.spiedElement.setAriaAttribute('aria-invalid', 'false');
             }
+            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);
         }
     }
     get label() {
         var _a;
-        return (_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-label')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     get description() {
         var _a;
-        return (_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-hint')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     get error() {
         var _a;
-        return (_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent;
+        return ((_a = this.el.querySelector('wcs-error')) === null || _a === void 0 ? void 0 : _a.textContent) || null;
     }
     updateLabelRequiredFlag(isRequired, label) {
         if (isRequired && label) {
@@ -171,7 +188,7 @@ export class FormField {
         if (this.hasPrefix) {
             classes += ' has-prefix';
         }
-        return (h(Host, { key: 'c9f7040c27e964d32f5d39befad34fd2500ad89b', class: classes }, h("slot", { key: '580960c53f66356e3e8a67436603f3d5d0828409', name: "label" }), h("div", { key: '9f942bf24140c7c3718d4e56b5c356e4471c246b', class: "input-container" }, h("slot", { key: '03ac6862d220be32e3c62d6fa6b49d745f77f1f8', name: "prefix" }), h("slot", { key: '476c0419a0269dde5d3b89b025f475c54fa7a1f4', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '63e76f50c004442ad27dbdf87c59fdb574a24352', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'd6dd0c622edbaf25c38844f62e46efefb462d616', name: "messages" })));
+        return (h(Host, { key: 'd8a5d2023add393b0a31173351a3d16d9fa0b1a6', class: classes }, h("slot", { key: '3f347f4dce239c0106fbbe52bdc217fa37c05d01', name: "label" }), h("div", { key: 'd6cb92104d72530059ecb9a383ff832afb0c2141', class: "input-container" }, h("slot", { key: '8be28f721ff351d41dced80c97c0e34337703d0e', name: "prefix" }), h("slot", { key: 'cc58d463877a1e8513736a987286e965870e096d', onSlotchange: () => this.onFormInputSlotChange() }), h("slot", { key: '898709cfcf0ae1cd43dabd55547d62199d6230c9', name: "suffix" })), isError ? (h("slot", { name: "error" })) : '', h("slot", { key: 'aaf2d35dfbdfda47b440f96d7f9aa22cb09f6a06', name: "messages" })));
     }
     onFormInputSlotChange() {
         this.initSpiedElement();

package/dist/collection/components/form-field/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError = false;\n\n    @State() private hasPrefix = false;\n    @State() private hasSuffix = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('wcs-button') !== null;\n        this.hasPrefix = this.el.querySelector('wcs-select') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private updateAriaAttributes(): void {\n        if(isMutableAriaAttribute(this.spiedElement)) {\n            this.spiedElement.setAriaAttribute('aria-label', this.label);\n\n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                if(this.error) this.spiedElement.setAriaAttribute('aria-description', this.error);\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n            } else {\n                if(this.description) this.spiedElement.setAriaAttribute('aria-description', this.description);\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n        }\n    }\n    \n    private get label() {\n        return this.el.querySelector('wcs-label')?.textContent;\n    }\n    \n    private get description() {\n        return this.el.querySelector('wcs-hint')?.textContent;\n    }\n    \n    private get error() {\n        return this.el.querySelector('wcs-error')?.textContent;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"]}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/components/form-field/form-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { isMutableAriaAttribute } from \"../../utils/mutable-aria-attribute\";\nimport { normalizeWhitespace } from '../../utils/helpers';\nimport { isControlComponentWithLabel } from \"../../utils/control-component-interface\";\n\n/**\n * Form field component wraps the native input element and add some more functionality on top of it.\n *\n * You can use the `wcs-form-field` to wrap any of these components :\n * - `wcs-input`\n * - `wcs-textarea`\n * - `wcs-radio-group`\n * - `wcs-switch`\n * - `wcs-checkbox`\n * - `wcs-native-select`\n * - `wcs-select`\n * - `wcs-counter`\n *\n * For non-supported slotted component, you can use the `required` attribute on the wrapped component to tell the\n * form-field that it is required. It will add a red star after the label of the form field.\n * \n * ## Accessibility guidelines 💡\n * - Each form control should be identified with a unique `wcs-label`\n * - Don't forget to add form validation to make sure the data is correctly formatted\n * - If the `wcs-label` is required, the form control must have the `required` HTML attribute and vice-versa (this is normally automatically set)\n * - The form should not be submittable if at least one required form control is not filled\n * - Hints are optional and should only be used to add extra information\n * - Additional aria attributes put on `<wcs-form-field>` won't inherit onto the native component : you must use the `setAriaAttribute` method.\n * \n * @slot label - Automatically filled when a `wcs-label` is provided\n * @slot <no-name> - The main slot containing the wrapped component\n * @slot prefix - (Optional) Display a component as prefix. See \"Prefix Suffix Group\" story for more info.\n * @slot suffix - (Optional) Display a component as suffix. See \"Prefix Suffix Group\" story for more info.\n * @slot error - Automatically filled when a `wcs-error` is provided\n * @slot messages - Automatically filled when a `wcs-hint` is provided\n *\n * @cssprop --wcs-form-field-gap - Defines the spacing between the label, input control, and hint messages.\n * @cssprop --wcs-form-field-prefix-suffix-border-radius - Sets the border radius for both prefix and suffix elements.\n * \n * @cssprop --wcs-form-field-prefix-background-color-default - Background color default for prefix elements\n * @cssprop --wcs-form-field-prefix-background-color-disabled - Background color for prefix elements when disabled\n * @cssprop --wcs-form-field-prefix-background-color-hover - Background color for prefix elements when hovered\n * @cssprop --wcs-form-field-prefix-border-color-default - Defines the default border color for prefix\n * @cssprop --wcs-form-field-prefix-border-color-focus - Sets the border color for prefix elements when focused.\n * @cssprop --wcs-form-field-prefix-border-color-disabled - Determines the border color for prefix elements when disabled.\n * \n * @cssprop --wcs-form-field-prefix-icon-color - Specifies the color of icons within prefix elements.\n * @cssprop --wcs-form-field-prefix-value-color - Sets the color of values within prefix elements.\n * @cssprop --wcs-form-field-prefix-placeholder-color - Defines the placeholder text color within prefix elements.\n * @cssprop --wcs-form-field-prefix-color-disabled - Determines the text color for prefix elements when disabled.\n */\n@Component({\n    tag: 'wcs-form-field',\n    styleUrl: 'form-field.scss',\n    shadow: true,\n})\nexport class FormField implements ComponentInterface {\n    @Element() private el!: HTMLWcsFormFieldElement;\n\n    /**\n     * Specifies whether the form field is in an error state. Displays the field border in red and the message contained in the wcs-error component\n     */\n    @Prop({mutable: true, reflect: true}) isError: boolean = false;\n\n    @State() private hasPrefix: boolean = false;\n    @State() private hasSuffix: boolean = false;\n    @State() private spiedElement: Element;\n\n    private observer: MutationObserver;\n\n    componentWillLoad() {\n        this.hasSuffix = this.el.querySelector('[slot=suffix]') !== null;\n        this.hasPrefix = this.el.querySelector('[slot=prefix]') !== null;\n    }\n\n    componentDidLoad() {\n        this.initSpiedElement();\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n\n    @Watch('isError')\n    // @ts-ignore\n    private isErrorChange(newValue: boolean) {\n        this.updateErrorStateOnInput(newValue);\n        this.updateAriaAttributes();\n    }\n\n    private updateErrorStateOnInput(newValue: boolean) {\n        if (this.spiedElementIsOfType('wcs-input', 'wcs-textarea')) {\n            if (newValue) {\n                this.spiedElement.setAttribute('state', 'error');\n            } else {\n                this.spiedElement.setAttribute('state', 'initial');\n            }\n        }\n    }\n\n    /**\n     * This function return true if the form field contains an element with tagName matches a value of the types param\n     * @param types\n     * @private\n     */\n    private spiedElementIsOfType(...types: string[]): boolean {\n        for (const type of types) {\n            if (this.spiedElement?.tagName === type.toUpperCase()) return true;\n        }\n        return false\n    }\n\n\n    private addRequiredMarkerToLabel() {\n        // TODO: deprecate this in favor of the 'required' component attribute\n        const label = this.el.querySelector('wcs-label');\n        this.observer = new MutationObserver(mutations => {\n            const requiredAttMutation = mutations.filter(m => m.attributeName === 'required')[0];\n            if (requiredAttMutation) {\n                this.updateLabelRequiredFlag(this.spiedElement?.hasAttribute('required'), label);\n            }\n        });\n        if (this.spiedElement) {\n            this.observer.observe(this.spiedElement, {attributes: true});\n        }\n\n        const isRequired = this.spiedElement?.hasAttribute('required');\n        this.updateLabelRequiredFlag(isRequired, label);\n    }\n\n\n    private initSpiedElement() {\n        const SUPPORTED_COMPONENTS = ['wcs-input', 'wcs-select', 'wcs-native-select', 'wcs-textarea', 'wcs-radio-group', 'wcs-switch', 'wcs-checkbox', 'wcs-native-select', 'wcs-counter'];\n\n        this.spiedElement = (this.el.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement)\n            ?.assignedElements()\n            .filter(n => [...SUPPORTED_COMPONENTS, 'SLOT'].map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0];\n\n        // If the component is used in another web component\n        if (this.spiedElement?.tagName === 'SLOT') {\n            this.spiedElement = ((this.spiedElement as HTMLSlotElement)\n                .assignedElements()\n                .filter(n => SUPPORTED_COMPONENTS.map(x => x.toUpperCase()).indexOf(n.nodeName) !== -1)[0]) as HTMLElement;\n        }\n\n        if (!this.spiedElement) {\n            // tslint:disable-next-line:no-console\n            console.warn('Form-field component support only ' + SUPPORTED_COMPONENTS.toString() + '. Some features may not work with the provided component.');\n            return;\n        }\n    }\n    \n    private async updateAriaAttributes(): Promise<void> {\n        if (isMutableAriaAttribute(this.spiedElement)) {\n            const ariaLabelParts: string[] = [];\n            if (isControlComponentWithLabel(this.spiedElement)) {\n                const innerLabel = await this.spiedElement.getLabel();\n                const combinedLabel = `${this.label || ''} ${innerLabel || ''}`.trim();\n                if(combinedLabel) {\n                    ariaLabelParts.push(normalizeWhitespace(combinedLabel));\n                }\n            } else {\n                if(this.label) {\n                    ariaLabelParts.push(normalizeWhitespace(this.label));\n                }\n            }\n\n            if(this.description) {\n                ariaLabelParts.push(normalizeWhitespace(this.description));\n            }\n            \n            // Sur les autres DS, généralement seul l'erreur est affichée et pas avec la description\n            if(this.isError) {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'true');\n                if(this.error) {\n                    ariaLabelParts.push(normalizeWhitespace(this.error));\n                }\n            } else {\n                this.spiedElement.setAriaAttribute('aria-invalid', 'false');\n            }\n\n            this.spiedElement.setAriaAttribute('aria-label', ariaLabelParts.length > 0 ? ariaLabelParts.join(' ') : null);\n        }\n    }\n    \n    private get label(): string | null {\n        return this.el.querySelector('wcs-label')?.textContent || null;\n    }\n    \n    private get description(): string | null {\n        return this.el.querySelector('wcs-hint')?.textContent || null;\n    }\n    \n    private get error(): string | null {\n        return this.el.querySelector('wcs-error')?.textContent || null;\n    }\n\n    private updateLabelRequiredFlag(isRequired: boolean, label: Element) {\n        if (isRequired && label) {\n            label.setAttribute('required', 'true');\n        } else if (!isRequired && label) {\n            label.removeAttribute('required');\n        }\n    }\n\n    disconnectedCallback() {\n        this.observer?.disconnect();\n    }\n\n    render() {\n        let classes = '';\n        const isError = this.isError;\n\n        if (this.hasSuffix) {\n            classes += ' has-suffix';\n        }\n        if (this.hasPrefix) {\n            classes += ' has-prefix';\n        }\n        return (\n            <Host class={classes}>\n                <slot name=\"label\"/>\n                <div class=\"input-container\">\n                    <slot name=\"prefix\"/>\n                    <slot onSlotchange={() => this.onFormInputSlotChange()}/>\n                    <slot name=\"suffix\"/>\n                </div>\n                {\n                    isError ? (<slot name=\"error\"/>) : ''\n                }\n                <slot name=\"messages\"/>\n            </Host>\n        );\n    }\n\n    private onFormInputSlotChange() {\n        this.initSpiedElement();\n        this.updateAriaAttributes()\n        this.addRequiredMarkerToLabel();\n        this.updateErrorStateOnInput(this.isError);\n    }\n}\n"]}

package/dist/collection/components/galactic/galactic.js

@@ -21,7 +21,7 @@ export class Galactic {
         this.show = false;
     }
     render() {
-        return (h(Host, { key: 'ccf6b6d2122201e49058bbda7d5c374b47f9b3db' }, h("div", { key: 'b4bb7ecd4e2bb70b845492370724bee2de253838', class: "container" }, h("div", { key: 'c2d2cfcc98d545536e53bf3e734f79fc9509f155', class: "logo-container" }, h("img", { key: '861c9ae4c2ab344d3c20f4a8fd86580d08b6fa11', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: 'a56d1f48689b7a45262fa1941d7aa0b3c9ab5013' }, this.text)), h("div", { key: 'b007ba5ae702d1932413564ba690207ecad8f09b', class: "actions-container" }, h("slot", { key: 'f05d6a51edb4013fcc26a4102da99ab0dc72688f' })))));
+        return (h(Host, { key: 'bcede9aa03d2014887eeaa4d5728d57c32a69de2' }, h("div", { key: '2d031655b20b592b77e2227a195f15535071c069', class: "container" }, h("div", { key: '1d3a345c56925946f5b39ad9edaad7ee927343cc', class: "logo-container" }, h("img", { key: '3f7e9a0a7df3a954d21e328da562189771baf8a8', src: SNCF_BASE64_SVG_LOGO, id: "sncf-logo", alt: "SNCF" }), h("span", { key: '68c00801e7f2564930d6a5f77fc6f45511a321cf' }, this.text)), h("div", { key: '3724b08dca457a9be21ecb84925ed3fea4e49f95', class: "actions-container" }, h("slot", { key: '572f4ca9036c737a579f2c58ec113cada4dd421c' })))));
     }
     static get is() { return "wcs-galactic"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/galactic-menu/galactic-menu.css

@@ -25,6 +25,7 @@
   background-color: var(--wcs-galactic-menu-overlay-background-color);
   color: var(--wcs-galactic-menu-overlay-color);
   padding: var(--wcs-galactic-menu-overlay-padding);
+  --wcs-semantic-color-border-focus-base: var(--wcs-semantic-color-text-inverse, white);
 }
 
 #menu[data-show] {

package/dist/collection/components/galactic-menu/galactic-menu.js

@@ -71,9 +71,9 @@ export class Galactic {
         }
     }
     render() {
-        return (h(Host, { key: '99bff08532f4d0bdd20c44781ab7f1e10bd4fad8' }, h("span", { key: 'c4827722002c9d558a9a412556be08ff36718a53' }, this.text), h("button", Object.assign({ key: 'fb4eb7c33068169949918b6bd6cc9c96cdde8608', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
+        return (h(Host, { key: 'bc460c17b222723b8cc037042cc758f8ca0e50ec' }, h("span", { key: 'd324ff624a9e5c9f6984134d4091986cac11f18b' }, this.text), h("button", Object.assign({ key: '7b0160174a249b30e082b9b2a77aca334ee6256a', "aria-haspopup": "true", "aria-controls": "menu", ref: el => {
                 this.menuButton = el;
-            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '72b08ab8670569c8911ef041a71782cb14427e84', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: 'd0491419b48c7fbe0d773f14c541bb5af7912684', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '7f2ba9b81f9041c421f21b9da6c83f0096155161', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c5acecba63143c61982bceca50eea5656130f908' }))));
+            }, "aria-expanded": this.showPopoverMenu ? "true" : "false" }, this.inheritedAttributes, { onClick: _ => this.toggleMenu() }), h("wcs-mat-icon", { key: '96b20053845f5490791ea278c2444392ba630600', id: "toggle-menu-icon", icon: "more_horiz", size: "m" })), h("span", { key: '6f959f220edbf293fe6922f7aaeaab0f213bf736', id: "menu", role: "menu", "data-show": this.showPopoverMenu }, h("div", { key: '6a05e468d65252ecbb57b421a53be0a0a1974f98', id: "arrow", "data-popper-arrow": true }), h("slot", { key: 'c9398cbb856d836820ac1cddf3113710eeaff5fb' }))));
     }
     static get is() { return "wcs-galactic-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/grid/grid.js

@@ -89,6 +89,14 @@ export class Grid {
     onBlur(event) {
         this.wcsBlur.emit(event);
     }
+    /**
+     * Set focus on the first cell of the grid
+     */
+    async focusFirstCell() {
+        var _a;
+        this.cursorPosition = { col: this.selectionConfig === 'none' ? 0 : 1, row: 1 };
+        (_a = this.getElementToFocusAtCursorPosition()) === null || _a === void 0 ? void 0 : _a.focus();
+    }
     /**
      * If selectionConfig is different from `none`, that means that an extra column for radio or checkbox is rendered
      * in the table.
@@ -497,12 +505,12 @@ export class Grid {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: '2012464f20c249873192549e34ff7ac4c82e8526' }, h("table", Object.assign({ key: 'a0a4a42e52bf623b34db145571045437ac6f4a60', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '3bf24c0462be2bd52754d44a3d9c5f84a7662bd6' }, h("tr", { key: '4169baa4ce95078d40e328d0c76577b8a58e3489', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
+        return (h(Host, { key: '98d13e7497ec9d9ecd3e149b3f6986e16bc5cc2a' }, h("table", Object.assign({ key: 'a44825cf71ff284a5204e9d922c0eba2c2ca23f4', role: "grid", ref: (el) => (this.nativeTable = el), "aria-rowcount": !this.loading && ((_a = this.rows) === null || _a === void 0 ? void 0 : _a.length), "aria-colcount": !this.loading && this.totalDisplayedColumnCount() }, this.inheritedAttributes), h("thead", { key: '336578d350ae8082a19fa6798af35f2fdd015ff9' }, h("tr", { key: 'fdb38402ea5c58dd77dad7df2ef97d54c521123c', "aria-rowindex": "1" }, this.selectionConfig === 'none' ? ''
             : h("th", { class: "wcs-grid-selection-column" }, this.selectionConfig === 'single' ? '' :
                 h("wcs-checkbox", { tabIndex: ((_b = this.cursorPosition) === null || _b === void 0 ? void 0 : _b.col) === 0
-                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '743ee6266300d4ad05f70b7e2a42a159be7a1700', name: "grid-column" }))), h("tbody", { key: 'c20964de1625e8fef9d98f9b7aa6f5c8cf2b186c' }, this.loading
+                        && ((_c = this.cursorPosition) === null || _c === void 0 ? void 0 : _c.row) === 0 ? 0 : -1, part: "all-rows-checkbox", checked: this.allRowsAreSelected(), onWcsChange: this.selectAllRows.bind(this) })), h("slot", { key: '2d68b72fac0251dab9f519cf84c25c96262c193b', name: "grid-column" }))), h("tbody", { key: '4156e796ac5a81170b5dba011159f8e6bb7a7e60' }, this.loading
             ? h("tr", { "aria-busy": "true" }, h("td", { colSpan: this.totalColumnCount(), class: "loading" }, h("wcs-spinner", null)))
-            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: '1cac800a642d68c9ae7e6f958c74d6b3069e75a1', name: "grid-pagination" })));
+            : (_d = this.rows) === null || _d === void 0 ? void 0 : _d.filter(row => this.serverMode || !this.paginationEl || row.page === this.paginationEl.currentPage).map((row, index) => this.renderRow(row, index)))), h("slot", { key: 'c683eb883707ffbd1fed22d86ececb595f70c2c0', name: "grid-pagination" })));
     }
     /**
      * Returns the row with all mapped cells inside.
@@ -560,7 +568,7 @@ export class Grid {
                     "text": "Manage sort and pagination with a backend server when set to `true`"
                 },
                 "attribute": "server-mode",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "false"
             },
             "data": {
@@ -593,7 +601,7 @@ export class Grid {
                     "text": "Flag to display a spinner during data loading"
                 },
                 "attribute": "loading",
-                "reflect": false
+                "reflect": true
             },
             "selectionConfig": {
                 "type": "string",
@@ -790,6 +798,23 @@ export class Grid {
     }
     static get methods() {
         return {
+            "focusFirstCell": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set focus on the first cell of the grid",
+                    "tags": []
+                }
+            },
             "setAriaAttribute": {
                 "complexType": {
                     "signature": "(attr: AriaAttributeName, value: string | null | undefined) => Promise<void>",