wcs-core 7.0.0 → 7.2.0

package/dist/types/components/list-item/list-item.d.ts

@@ -5,6 +5,11 @@ import { ComponentInterface } from '../../stencil-public-runtime';
  * Standard lists can be used either with or without icons. Depending on the context, the list can have one or more
  * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
  *
+ * ## Accessibility guidelines 💡
+ * > - You should wrap your list-items inside a container with a `role` attribute set to `list`. On each `wcs-list-item`,
+ *   you should set a `role` attribute to `listitem`. See the code below.
+ * actions (favourite, download, delete, etc.). Use standard lists with a unique action when each line has an action.
+ *
  * @slot title - Slot containing the title of the list item
  * @slot properties - Slot containing the `<wcs-list-item-properties>` element
  * @slot actions - Slot containing the actions of the list item, prefer using some `<wcs-button>` inside

package/dist/types/components/mat-icon/mat-icon.d.ts

@@ -2,7 +2,7 @@ import { ComponentInterface } from '../../stencil-public-runtime';
 import { MaterialIconFamily, MaterialIconSize } from './mat-icon-interface';
 import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
 /**
- * A component used to display a [Material Icon](https://fonts.google.com/icons). Can be useful when used in wcs-grid or in a wcs-button.
+ * A component used to display a [Material Icon](https://fonts.google.com/icons?icon.set=Material+Icons). Can be useful when used in wcs-grid or in a wcs-button.
  */
 export declare class MatIcon implements ComponentInterface, MutableAriaAttribute {
     private el;

package/dist/types/components/modal/modal-interface.d.ts

@@ -1 +1,2 @@
-export type ModalSize = 's' | 'm' | 'l' | 'xl';
+import { WcsSize } from "../../shared-types";
+export type ModalSize = Extract<WcsSize, 's' | 'm' | 'l' | 'xl'>;

package/dist/types/components/modal/modal.d.ts

@@ -10,6 +10,9 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
  * > - Keyboard navigation is trapped inside the modal
  * > - It is mandatory to set the `modal-trigger-controls-id` to the id of the element that opens the dialog, in order
  * > to focus it upon dialog dismissal.
+ * > - On modal opening, the default behaviour is to focus the first focusable element. If you want to change the initial
+ * > behaviour, you have to use `modal-element-id-to-focus-on-opening` attribute to set the id of the inner modal element you
+ * > want to focus. You will see a story as example below
  * > - The modal can be closed at any time by pressing the Escape key.
  * >
  * > - More info : https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
@@ -78,6 +81,26 @@ export declare class Modal implements ComponentInterface, MutableAriaAttribute {
      * @private
      */
     modalTriggerControlsId: string;
+    /**
+     * The ID of the element to automatically focus when the modal opens.
+     *
+     * If this property is not set and `disableAutoFocus` is false, the modal will
+     * automatically focus the first focusable element within its content.
+     * This follows accessibility best practices by ensuring keyboard navigation
+     * starts from a logical point when the modal opens.
+     *
+     * @example
+     * <wcs-modal initial-focus-element="cancel-button"></wcs-modal>
+     */
+    initialFocusElementId?: string;
+    /**
+     * Disables automatic focus behavior when the modal opens.
+     *
+     * When set to true, the modal will not automatically focus any element upon opening.
+     * Use this property with caution, as managing focus is important for accessibility.
+     * Consider providing an alternative focus management strategy if disabling the default behavior.
+     */
+    disableAutoFocus: boolean;
     /**
      * Give an unique id
      * @private

package/dist/types/components/radio-group/radio-group.d.ts

@@ -1,6 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { RadioGroupChangeEventDetail, RadioGroupMode } from './radio-group-interface';
 import { RadioChosedEvent } from '../radio/radio-interface';
+import { AriaAttributeName, MutableAriaAttribute } from '../../utils/mutable-aria-attribute';
 /**
  * @cssprop --wcs-radio-group-gap - Gap between each radio (checkmark + label) in horizontal mode
  *
@@ -14,7 +15,7 @@ import { RadioChosedEvent } from '../radio/radio-interface';
  *
  * @cssprop --wcs-radio-group-option-gap - Gap between each radio option
  */
-export declare class RadioGroup implements ComponentInterface {
+export declare class RadioGroup implements ComponentInterface, MutableAriaAttribute {
     private el;
     /**
      * The value of the radio-group. Automatically reflects which radio button is selected.
@@ -31,6 +32,7 @@ export declare class RadioGroup implements ComponentInterface {
     /** Emitted when the value has changed. */
     wcsChange: EventEmitter<RadioGroupChangeEventDetail>;
     onValueChangeHandler(value: any | undefined): void;
+    setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
     componentDidLoad(): void;
     onSlotChange(): void;
     updateAllRadioState(): void;

package/dist/types/components/select/select.d.ts

@@ -118,6 +118,10 @@ export declare class Select implements ComponentInterface, MutableAriaAttribute
     placeholder?: string | null;
     /** If `true`, the user cannot interact with the select. */
     disabled: boolean;
+    /**
+     * If `true`, the user must fill in a value before submitting a form.
+     */
+    required: boolean;
     /** If `true`, the user can select multiple values at once. */
     multiple: boolean;
     /** If `true`, the select acts as an autocomplete field to filter your results. */
@@ -230,7 +234,13 @@ export declare class Select implements ComponentInterface, MutableAriaAttribute
      */
     private clearHighlightOnLastHighlightedOption;
     private onAutocompleteInputEvent;
-    private handleAutocompleteValueChange;
+    /**
+     * Set the autocomplete value and open the select if needed.
+     * @param filter - The new filter value
+     * @param isReset - If true, the filter is reset and the select is closed
+     * @private
+     */
+    private setAutocompleteValue;
     onFocus(event: FocusEvent): void;
     private focusAutocompleteInput;
     onBlur(event: FocusEvent): void;

package/dist/types/components/switch/switch.d.ts

@@ -1,6 +1,7 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { SwitchChangeEventDetail, SwitchLabelAlignment } from './switch-interface';
 import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-aria-attribute";
+import { ControlComponentWithLabel } from "../../utils/control-component-interface";
 /**
  * The switch component is a control used to switch between on and off state.
  *
@@ -32,7 +33,7 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
  *
  * @cssprop --wcs-switch-gap - Gap between the switch and the text
  */
-export declare class Switch implements ComponentInterface, MutableAriaAttribute {
+export declare class Switch implements ComponentInterface, MutableAriaAttribute, ControlComponentWithLabel {
     private el;
     private switchId;
     private nativeInput;
@@ -70,5 +71,6 @@ export declare class Switch implements ComponentInterface, MutableAriaAttribute
     handleBlur(event: FocusEvent): void;
     componentWillLoad(): Promise<void> | void;
     setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
+    getLabel(): Promise<string>;
     render(): any;
 }

package/dist/types/components/tabs/tabs.d.ts

@@ -4,6 +4,10 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
 /**
  * Tabs component to switch between tab content. Use in conjunction with `wcs-tab`.
  *
+ * ## Accessibility guidelines 💡
+ * > - Mobile display should be used for narrower screens (automatically set by default).
+ * > - The component respects the W3C [tab pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+ *
  * @cssprop --wcs-tabs-indicator-height - Height of the tabs indicator
  * @cssprop --wcs-tabs-indicator-background-color - Background color of the tabs indicator
  * @cssprop --wcs-tabs-indicator-border-radius - Border radius of the tabs indicator
@@ -25,6 +29,24 @@ import { AriaAttributeName, MutableAriaAttribute } from "../../utils/mutable-ari
  * @cssprop --wcs-tabs-padding-left - Padding left of the tabs
  * @cssprop --wcs-tabs-headers-border-bottom - Border bottom (gutter) below the tabs
  * @cssprop --wcs-tabs-transition-duration - Transition duration of the tabs
+ * @cssprop --wcs-tabs-mobile-breakpoint - Breakpoint for mobile display (default: 575px)
+ * @cssprop --wcs-tabs-mobile-overlay-border-width - Border width of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-border-color - Border color of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-background-color - Background color of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-padding - Padding of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-overlay-border-radius - Border radius of the mobile overlay
+ * @cssprop --wcs-tabs-mobile-gap - Gap between the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-padding - Padding of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-height - Height of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-weight-default - Default weight of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-weight-active - Active font weight of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-font-size - Font size of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-color - Text color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-default - Default background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-focus - Focused background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-hover - Hovered background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-background-color-press - Pressed background color of the mobile tabs in the overlay
+ * @cssprop --wcs-tabs-mobile-border-radius - Border radius of the mobile tabs in the overlay
  */
 export declare class Tabs implements ComponentInterface, MutableAriaAttribute {
     private el;
@@ -51,6 +73,25 @@ export declare class Tabs implements ComponentInterface, MutableAriaAttribute {
      * Description is used to provide aria-label for the tabs container which has `role="tablist"`.
      */
     description: string;
+    /**
+     * Mobile display : This div is shown on the user interface when the tabs are expanded
+     * @private
+     */
+    private popoverDiv;
+    private popper;
+    private mobileOverlayExpanded;
+    /**
+     * If true, the tabs will be displayed as a dropdown list containing the tabs. Useful for narrower screens.
+     */
+    private mobile;
+    /**
+     * Mobile display: the selected tab semantically become a button that opens an overlay
+     */
+    private mobileButton;
+    /**
+     * Observe the screen resize to switch between mobile and desktop mode
+     */
+    private resizeObserver;
     /**
      *
      * Emitted when the selected tab change.
@@ -61,20 +102,34 @@ export declare class Tabs implements ComponentInterface, MutableAriaAttribute {
     private tabsId;
     selectedIndexChanged(newValue: number): void;
     selectedTabkeyChanged(newValue: any): void;
+    onMobileChange(newValue: boolean): void;
     private emitActiveTabChange;
     private updateCurrentActiveIndexByTabKey;
     onTabLoaded(): void;
+    onWindowClickEvent(event: MouseEvent): void;
+    /**
+     * Init resize observer for mobile
+     */
+    private tabsDidLoadWithResizeObserver;
+    private initMobileOverlay;
     componentDidLoad(): void;
+    componentDidRender(): void;
     private putTabsInCorrectDivIfTheyAreNot;
     handleKeyDown(ev: KeyboardEvent, tabIndex: number): void;
+    handleKeyDownMobile(ev: KeyboardEvent, tabIndex: number): void;
     private refreshHeaders;
     private get tabs();
     private selectTabAndEmitChangeEvent;
     componentWillUpdate(): void;
     componentWillLoad(): Promise<void> | void;
+    disconnectedCallback(): void;
     setAriaAttribute(attr: AriaAttributeName, value: string | null | undefined): Promise<void>;
     private updateTabVisibility;
     private hideAllTabsContent;
+    onMobileButtonClick(): void;
+    onMobileButtonKeyDown(ev: KeyboardEvent): void;
+    mobileLayout(): any[];
+    desktopLayout(): any[];
     render(): any;
     /**
      * Observe when a new tab panel is added to the slot to let's handle accessibility properties for tabs panel:

package/dist/types/components/tooltip/tooltip.d.ts

@@ -9,16 +9,14 @@ import { WcsTooltipAppendTo, WcsTooltipPosition } from './tooltip-interface';
  *
  * ## Accessibility guidelines 💡
  *
- * The component places necessary aria attribute on your target element (like the `wcs-button`) :
- * - `aria-expanded`: set to true when popover is open, false when it is closed
- *
  * The problem is that impaired users may not be able to see what is the information provided by the tooltip. To solve
  * this problem, the tooltip should be served with some aria attributes to make it accessible.
  *
  * Aria-features `wcs-tooltip` respect:
  * - dismiss when the user presses the `Escape` key
  * - has a `role=tooltip`
- * - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
+ * - when set to `interactive` mode
+ *  - `aria-expanded` on the targeted element: set to true when popover is open, false when it is closed
  *
  * Aria-features `wcs-tooltip` **does not respect with `wcs-button`**:
  * - aria-controls => we cannot do it yet, we need to wait for Cross root ARIA - export ID (https://github.com/WICG/aom/blob/gh-pages/exportid-explainer.md)
@@ -91,7 +89,7 @@ export declare class Tooltip implements ComponentInterface {
     /**
      * Allows you to change the theme used by tippy.
      *
-     * The WCS theme is used by default and uses the WCS CSS variables.
+     * The WCS theme 'dark' is used by default and uses the WCS CSS variables.
      *
      * You can create a theme by following this documentation and choosing a custom name :
      * https://atomiks.github.io/tippyjs/v6/themes/