@scania/tegel 1.25.0 → 1.26.0-onTdsChange-gets-triggered-unexpectedly-beta.0

package/dist/types/components.d.ts

@@ -67,6 +67,10 @@ export namespace Components {
           * Sets component size.
          */
         "size": 'lg' | 'sm';
+        /**
+          * Defines aria-live attribute
+         */
+        "tdsAriaLive": 'off' | 'polite' | 'assertive';
         /**
           * Value shown in Badge
          */
@@ -93,6 +97,10 @@ export namespace Components {
           * Name of the icon for the component. For error and information variant, the icon is predefined.
          */
         "icon": IconNames;
+        /**
+          * Defines the ARIA role of the banner. Defaults to "banner" for global use, but can be set to "region" or "alert" if used differently.
+         */
+        "roleType": 'banner' | 'region' | 'alert';
         /**
           * Shows the Banner
          */
@@ -106,7 +114,23 @@ export namespace Components {
          */
         "variant": 'error' | 'information' | 'default';
     }
+    /**
+     * @example <tds-block>
+     *   <section>Semantic section content</section>
+     * </tds-block>
+     */
     interface TdsBlock {
+        /**
+          * Specifies the HTML tag to be used for the component wrapper.
+         */
+        "componentTag": | 'section'
+    | 'div'
+    | 'article'
+    | 'aside'
+    | 'header'
+    | 'footer'
+    | 'nav'
+    | 'main';
         /**
           * Mode variant of the component, based on current mode.
          */
@@ -137,6 +161,10 @@ export namespace Components {
         "current": boolean;
     }
     interface TdsBreadcrumbs {
+        /**
+          * The value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel": string;
     }
     interface TdsButton {
         /**
@@ -159,6 +187,10 @@ export namespace Components {
           * Size of a Button
          */
         "size": 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * The value to be used for the aria-label attribute if onlyIcon is set to true
+         */
+        "tdsAriaLabel": string;
         /**
           * Text displayed inside the Button
          */
@@ -236,6 +268,14 @@ export namespace Components {
           * Make the Checkbox required
          */
         "required": boolean;
+        /**
+          * Value to be used for the aria-describedby attribute
+         */
+        "tdsAriaDescribedby": string;
+        /**
+          * Value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel": string;
         /**
           * Toggles the checked value of the component.
          */
@@ -266,6 +306,10 @@ export namespace Components {
           * Size of the Chip component
          */
         "size": 'sm' | 'lg';
+        /**
+          * Value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel": string;
         /**
           * Type of Chip, depends on usage
          */
@@ -283,7 +327,7 @@ export namespace Components {
          */
         "autofocus": boolean;
         /**
-          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM
+          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM
          */
         "defaultValue": string | 'none';
         /**
@@ -337,7 +381,7 @@ export namespace Components {
         /**
           * Sets an input type
          */
-        "type": 'datetime-local' | 'date' | 'time';
+        "type": 'datetime-local' | 'date' | 'month' | 'week' | 'time';
         /**
           * Value of the input text
          */
@@ -353,13 +397,13 @@ export namespace Components {
         "animation": 'none' | 'slide';
         "appendValue": (value: string) => Promise<void>;
         /**
-          * Method for closing the Dropdown.
+          * Method for setting the value of the Dropdown.  Single selection example:  <code> dropdown.setValue('option-1', 'Option 1'); </code>  Multiselect example:  <code> dropdown.setValue(['option-1', 'option-2']); </code>
          */
         "close": () => Promise<void>;
         /**
           * Default value selected in the Dropdown.
          */
-        "defaultValue": string;
+        "defaultValue": string | number;
         /**
           * Sets the Dropdown in a disabled state
          */
@@ -416,22 +460,17 @@ export namespace Components {
           * Placeholder text for the Dropdown.
          */
         "placeholder": string;
-        /**
-          * Method for removing a selected value in the Dropdown.
-         */
-        "removeValue": (oldValue: string) => Promise<{ value: string; label: string; }[]>;
-        /**
-          * Method that resets the Dropdown, marks all children as non-selected and resets the value to null.
-         */
+        "removeValue": (oldValue: string) => Promise<void>;
         "reset": () => Promise<void>;
-        /**
-          * Method for setting the value of the Dropdown.  Single selection example:  <code> dropdown.setValue('option-1', 'Option 1'); </code>  Multiselect example:  <code> dropdown.setValue(['option-1', 'option-2']); </code>
-         */
-        "setValue": (value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>;
+        "setValue": (value: string | number | string[] | number[]) => Promise<{ value: string | number; label: string; }[]>;
         /**
           * The size of the Dropdown.
          */
         "size": 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number.
+         */
+        "value": string | number | (string | number)[];
     }
     interface TdsDropdownOption {
         /**
@@ -443,9 +482,9 @@ export namespace Components {
          */
         "setSelected": (selected: boolean) => Promise<void>;
         /**
-          * Value for the Dropdown option.
+          * Value of the dropdown option
          */
-        "value": string;
+        "value": string | number;
     }
     interface TdsFolderTab {
         /**
@@ -476,6 +515,14 @@ export namespace Components {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex": number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel": string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel": string;
     }
     interface TdsFooter {
         /**
@@ -653,6 +700,14 @@ export namespace Components {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex": number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel": string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel": string;
     }
     interface TdsLink {
         /**
@@ -772,6 +827,14 @@ export namespace Components {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex": number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel": string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel": string;
     }
     interface TdsPopoverCanvas {
         /**
@@ -1507,6 +1570,10 @@ export namespace Components {
           * Size of the Toggle
          */
         "size": 'sm' | 'lg';
+        /**
+          * Defines aria-label attribute for input
+         */
+        "tdsAriaLabel": string;
         /**
           * Toggles the Toggle.
          */
@@ -1726,6 +1793,11 @@ declare global {
         prototype: HTMLTdsBannerElement;
         new (): HTMLTdsBannerElement;
     };
+    /**
+     * @example <tds-block>
+     *   <section>Semantic section content</section>
+     * </tds-block>
+     */
     interface HTMLTdsBlockElement extends Components.TdsBlock, HTMLStencilElement {
     }
     var HTMLTdsBlockElement: {
@@ -1808,7 +1880,7 @@ declare global {
         "internalRadioOnChange": {
     chipId: string;
     checked: boolean;
-    groupName: string
+    groupName: string;
   };
         "tdsClick": {
     chipId: string;
@@ -2730,6 +2802,10 @@ declare namespace LocalJSX {
           * Sets component size.
          */
         "size"?: 'lg' | 'sm';
+        /**
+          * Defines aria-live attribute
+         */
+        "tdsAriaLive"?: 'off' | 'polite' | 'assertive';
         /**
           * Value shown in Badge
          */
@@ -2758,6 +2834,10 @@ declare namespace LocalJSX {
         "onTdsClose"?: (event: TdsBannerCustomEvent<{
     bannerId: string;
   }>) => void;
+        /**
+          * Defines the ARIA role of the banner. Defaults to "banner" for global use, but can be set to "region" or "alert" if used differently.
+         */
+        "roleType"?: 'banner' | 'region' | 'alert';
         /**
           * Subheader text.
          */
@@ -2767,7 +2847,23 @@ declare namespace LocalJSX {
          */
         "variant"?: 'error' | 'information' | 'default';
     }
+    /**
+     * @example <tds-block>
+     *   <section>Semantic section content</section>
+     * </tds-block>
+     */
     interface TdsBlock {
+        /**
+          * Specifies the HTML tag to be used for the component wrapper.
+         */
+        "componentTag"?: | 'section'
+    | 'div'
+    | 'article'
+    | 'aside'
+    | 'header'
+    | 'footer'
+    | 'nav'
+    | 'main';
         /**
           * Mode variant of the component, based on current mode.
          */
@@ -2798,6 +2894,10 @@ declare namespace LocalJSX {
         "current"?: boolean;
     }
     interface TdsBreadcrumbs {
+        /**
+          * The value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
     }
     interface TdsButton {
         /**
@@ -2820,6 +2920,10 @@ declare namespace LocalJSX {
           * Size of a Button
          */
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * The value to be used for the aria-label attribute if onlyIcon is set to true
+         */
+        "tdsAriaLabel"?: string;
         /**
           * Text displayed inside the Button
          */
@@ -2920,6 +3024,14 @@ declare namespace LocalJSX {
           * Make the Checkbox required
          */
         "required"?: boolean;
+        /**
+          * Value to be used for the aria-describedby attribute
+         */
+        "tdsAriaDescribedby"?: string;
+        /**
+          * Value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
         /**
           * Value for the Checkbox
          */
@@ -2960,6 +3072,10 @@ declare namespace LocalJSX {
           * Size of the Chip component
          */
         "size"?: 'sm' | 'lg';
+        /**
+          * Value to be used for the aria-label attribute
+         */
+        "tdsAriaLabel"?: string;
         /**
           * Type of Chip, depends on usage
          */
@@ -2977,7 +3093,7 @@ declare namespace LocalJSX {
          */
         "autofocus"?: boolean;
         /**
-          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM
+          * Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM
          */
         "defaultValue"?: string | 'none';
         /**
@@ -3039,7 +3155,7 @@ declare namespace LocalJSX {
         /**
           * Sets an input type
          */
-        "type"?: 'datetime-local' | 'date' | 'time';
+        "type"?: 'datetime-local' | 'date' | 'month' | 'week' | 'time';
         /**
           * Value of the input text
          */
@@ -3056,7 +3172,7 @@ declare namespace LocalJSX {
         /**
           * Default value selected in the Dropdown.
          */
-        "defaultValue"?: string;
+        "defaultValue"?: string | number;
         /**
           * Sets the Dropdown in a disabled state
          */
@@ -3132,6 +3248,10 @@ declare namespace LocalJSX {
           * The size of the Dropdown.
          */
         "size"?: 'xs' | 'sm' | 'md' | 'lg';
+        /**
+          * Value of the dropdown. For multiselect, provide array of strings/numbers. For single select, provide a string/number.
+         */
+        "value"?: string | number | (string | number)[];
     }
     interface TdsDropdownOption {
         /**
@@ -3154,9 +3274,9 @@ declare namespace LocalJSX {
     value: string;
   }>) => void;
         /**
-          * Value for the Dropdown option.
+          * Value of the dropdown option
          */
-        "value"?: string;
+        "value"?: string | number;
     }
     interface TdsFolderTab {
         /**
@@ -3183,6 +3303,14 @@ declare namespace LocalJSX {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex"?: number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel"?: string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel"?: string;
     }
     interface TdsFooter {
         /**
@@ -3365,6 +3493,14 @@ declare namespace LocalJSX {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex"?: number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel"?: string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel"?: string;
     }
     interface TdsLink {
         /**
@@ -3469,6 +3605,14 @@ declare namespace LocalJSX {
           * Sets the selected Tab. If this is set, all Tab changes need to be handled by the user.
          */
         "selectedIndex"?: number;
+        /**
+          * Defines aria-label on left scroll button
+         */
+        "tdsScrollLeftAriaLabel"?: string;
+        /**
+          * Defines aria-label on right scroll button
+         */
+        "tdsScrollRightAriaLabel"?: string;
     }
     interface TdsPopoverCanvas {
         /**
@@ -4283,6 +4427,10 @@ declare namespace LocalJSX {
           * Size of the Toggle
          */
         "size"?: 'sm' | 'lg';
+        /**
+          * Defines aria-label attribute for input
+         */
+        "tdsAriaLabel"?: string;
         /**
           * ID of the Toggle's input element, if not specified, it's randomly generated
          */
@@ -4423,6 +4571,11 @@ declare module "@stencil/core" {
             "tds-accordion-item": LocalJSX.TdsAccordionItem & JSXBase.HTMLAttributes<HTMLTdsAccordionItemElement>;
             "tds-badge": LocalJSX.TdsBadge & JSXBase.HTMLAttributes<HTMLTdsBadgeElement>;
             "tds-banner": LocalJSX.TdsBanner & JSXBase.HTMLAttributes<HTMLTdsBannerElement>;
+            /**
+             * @example <tds-block>
+             *   <section>Semantic section content</section>
+             * </tds-block>
+             */
             "tds-block": LocalJSX.TdsBlock & JSXBase.HTMLAttributes<HTMLTdsBlockElement>;
             "tds-body-cell": LocalJSX.TdsBodyCell & JSXBase.HTMLAttributes<HTMLTdsBodyCellElement>;
             "tds-breadcrumb": LocalJSX.TdsBreadcrumb & JSXBase.HTMLAttributes<HTMLTdsBreadcrumbElement>;

package/dist/types/types/Icons.d.ts

@@ -1 +1 @@
-export type IconNames = '24v_battery_inactive' | '24v_battery' | 'arrow_diagonal' | 'arrow_down' | 'arrow_left' | 'arrow_right' | 'arrow_up' | 'audio_inactive' | 'back' | 'backward_inactive' | 'backward' | 'bento' | 'burger' | 'calendar_inactive' | 'calendar' | 'card' | 'cart' | 'charging_speed_inactive' | 'charging_speed' | 'charging_stopped' | 'chevron_down' | 'chevron_left' | 'chevron_right' | 'chevron_up' | 'clock_inactive' | 'clock' | 'contact_inactive' | 'contact' | 'copy' | 'cross' | 'dashboard' | 'document_check' | 'document_doc' | 'document_eye' | 'document_pdf' | 'document_ppt' | 'document_tool' | 'document_wrong' | 'document_xls' | 'document' | 'dollar' | 'doner' | 'double_kebab' | 'download' | 'edit_inactive' | 'edit' | 'email' | 'error' | 'expand' | 'export_inactive' | 'export' | 'eye_inactive' | 'eye' | 'face_dissatisfied' | 'face_neutral' | 'face_satisfied' | 'filters_inactive' | 'filters' | 'flash' | 'folder' | 'forward_inactive' | 'fuel_gauge_inactive' | 'fuel_gauge' | 'global' | 'hatch_open_inactive' | 'heart_inactive' | 'heart' | 'heating_inactive_screen' | 'history_inactive' | 'history' | 'home_inactive' | 'home' | 'image_add' | 'image_inactive' | 'image_set' | 'image' | 'info' | 'insights' | 'kebab' | 'link_broken' | 'link' | 'lock_inactive' | 'lock' | 'maximize_fullscreen' | 'meatballs' | 'message_inactive' | 'message' | 'mileage_inactive' | 'mileage' | 'minimize_fullscreen' | 'minus' | 'notification_inactive' | 'notification' | 'pause_inactive' | 'pause' | 'phone_inactive' | 'phone' | 'pie_chart' | 'pin_inactive' | 'pin' | 'plus' | 'print_inactive' | 'print' | 'profile_inactive' | 'profile' | 'proportions_inactive' | 'proportions' | 'range_inactive' | 'range' | 'redirect' | 'refresh_inactive' | 'refresh' | 'reload_inactive' | 'reload' | 'report_inactive' | 'report' | 'save_inactive' | 'save' | 'search' | 'send_inactive' | 'send' | 'settings' | 'share' | 'skip_backwards' | 'skip_forward' | 'smartphone_inactive' | 'smartphone' | 'sorting' | 'speedometer_inactive' | 'speedometer' | 'star' | 'support' | 'target_inactive' | 'target' | 'text_inactive' | 'tick' | 'timer' | 'tool_inactive' | 'tool' | 'trailer' | 'trash_inactive' | 'trash' | 'truck' | 'upload' | 'wallet' | 'warning' | 'wifi_inactive' | 'wifi';
+export type IconNames = '24v_battery_inactive' | '24v_battery' | 'acceleration_inactive' | 'acceleration' | 'adblue_inactive' | 'adblue' | 'arrow_diagonal' | 'arrow_down' | 'arrow_left' | 'arrow_right' | 'arrow_up' | 'audio_inactive' | 'audio' | 'award' | 'back' | 'backward_inactive' | 'backward' | 'bento' | 'bug_inactive' | 'bug' | 'burger' | 'bus_inactive' | 'bus' | 'calendar_inactive' | 'calendar' | 'camera_inactive' | 'camera' | 'card' | 'cart' | 'charging_complete' | 'charging_failed' | 'charging_speed_inactive' | 'charging_speed' | 'charging_stopped' | 'chevron_down' | 'chevron_left' | 'chevron_right' | 'chevron_up' | 'clock_inactive' | 'clock' | 'contact_inactive' | 'contact' | 'cookie_inactive' | 'cookie' | 'coolant_level_inactive' | 'coolant_level' | 'copy' | 'cross' | 'cup_inactive' | 'cup' | 'dashboard' | 'department_inactive' | 'department' | 'departure_scheduling_inactive' | 'departure_scheduling' | 'diamond_inactive' | 'diamond' | 'document_check' | 'document_doc' | 'document_eye' | 'document_pdf' | 'document_plus_inactive' | 'document_plus' | 'document_ppt' | 'document_tool' | 'document_wrong' | 'document_xls' | 'document' | 'dollar' | 'doner' | 'double_kebab' | 'download' | 'driving_licence_inactive' | 'driving_licence' | 'drop_inactive' | 'drop' | 'edit_inactive' | 'edit' | 'email' | 'engine_inactive' | 'engine' | 'environment_inactive' | 'environment' | 'error' | 'exit' | 'expand_inactive' | 'expand' | 'export_inactive' | 'export' | 'eye_inactive' | 'eye' | 'face_dissatisfied' | 'face_neutral' | 'face_satisfied' | 'factory_inactive' | 'factory' | 'ferry_inactive' | 'ferry' | 'filters_inactive' | 'filters' | 'flash_inactive' | 'flash' | 'folder' | 'forward_inactive' | 'forward' | 'fuel_gauge_inactive' | 'fuel_gauge' | 'fuel_inactive' | 'fuel' | 'gift inactive' | 'gift' | 'global' | 'guided_tour_inactive' | 'guided_tour' | 'hatch_open_1' | 'hatch_open_2' | 'hatch_open_inactive' | 'hatch_open' | 'heart_inactive' | 'heart' | 'heating_inactive_screen' | 'history_inactive' | 'history' | 'home_inactive' | 'home' | 'idea_inactive' | 'idea' | 'image_add' | 'image_inactive' | 'image_set' | 'image' | 'info' | 'insights' | 'kebab' | 'key_inactive' | 'key' | 'layer_inactive' | 'layer' | 'link_broken' | 'link' | 'list_inactive' | 'list' | 'lock_inactive' | 'lock' | 'map_cursor_inactive' | 'map_cursor' | 'maximize_fullscreen' | 'meatballs' | 'merge_inactive' | 'merge' | 'message_inactive' | 'message' | 'mileage_inactive' | 'mileage' | 'minimize_fullscreen' | 'minus' | 'navigate_inactive' | 'navigate' | 'notification_inactive' | 'notification' | 'oil_level_inactive' | 'oil_level' | 'pause_inactive' | 'pause' | 'phone_inactive' | 'phone' | 'pie_chart' | 'pin_inactive' | 'pin' | 'placeholder' | 'play_inactive' | 'play' | 'plus' | 'powerplug_inactive' | 'powerplug' | 'print_inactive' | 'print' | 'privacy_inactive' | 'privacy' | 'profile_inactive' | 'profile' | 'proportions_inactive' | 'proportions' | 'range_inactive' | 'range' | 'redirect' | 'refresh_inactive' | 'refresh' | 'reload_inactive' | 'reload' | 'repeat' | 'report_inactive' | 'report' | 'route_inactive' | 'route' | 'save_inactive' | 'save' | 'search' | 'send_inactive' | 'send' | 'settings' | 'share' | 'skip_backwards' | 'skip_forward' | 'smartphone_inactive' | 'smartphone' | 'sorting' | 'speedometer_inactive' | 'speedometer' | 'star' | 'support' | 'target_inactive' | 'target' | 'temperature_inactive' | 'temperature' | 'text_inactive' | 'text' | 'thumbs_down' | 'thumbs_up' | 'tick' | 'timer' | 'tool_inactive' | 'tool' | 'trailer_inactive' | 'trailer' | 'trash_inactive' | 'trash' | 'truck_inactive' | 'truck' | 'undo_inactive' | 'undo' | 'unlock' | 'upload' | 'video_inactive' | 'video' | 'wallet' | 'warning' | 'weight_inactive' | 'weight' | 'wifi_inactive' | 'wifi' | 'windscreen_heating_inactive' | 'windscreen_heating';

package/dist/types/utils/axeHelpers.d.ts

@@ -1,2 +1 @@
-import type { Page } from '@playwright/test';
-export declare const tegelAnalyze: (page: Page) => Promise<import("axe-core").AxeResults>;
+export declare const tegelAnalyze: (page: any) => Promise<import("axe-core").AxeResults>;

package/dist/types/utils/convertToString.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Converts a value (string or number) to string
+ * @param value - The value to convert
+ * @returns The string representation of the value, or empty string if null/undefined
+ */
+export declare const convertToString: (value: string | number | null | undefined) => string;
+export declare const convertArrayToStrings: (values: (string | number)[]) => string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.25.0",
+  "version": "1.26.0-onTdsChange-gets-triggered-unexpectedly-beta.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [