npm - @dnanpm/styleguide - Versions diffs - 3.9.8 → 3.9.9 - Mend

@dnanpm/styleguide 3.9.8 → 3.9.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/build/cjs/components/Carousel/Carousel.d.ts CHANGED Viewed

@@ -54,8 +54,196 @@ interface Props {
      * If not provided, visibleItems property will be used
      */
     responsive?: Partial<Responsive>;
+    /**
+     * Allows to pass a screen reader label for the pagination item next to the current slide number
+     */
+    paginationAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the next arrow button
+     */
+    nextAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the previous arrow button
+     */
+    previousAriaLabel?: string;
+    /**
+     * Number of items to move when navigating the carousel
+     *
+     * @default 1
+     */
+    swipeStep?: number;
 }
+declare const SlideItem: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        active: {
+            pink: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, Required<Pick<Props, "visibleItems">> & {
+    itemWidthCorrection: number;
+    isSwiping: boolean;
+}, never>;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Carousel;
+export { SlideItem };

package/build/cjs/components/Carousel/Carousel.js CHANGED Viewed

@@ -146,6 +146,7 @@ const Counter = styled.default.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
+    var _b;
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
     const slidesWrapperRef = React.useRef(null);
     const scrollbarRef = React.useRef(null);
@@ -175,9 +176,18 @@ const Carousel = (_a) => {
         }, 100);
         return () => clearTimeout(timeoutId);
     }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const getStep = (step, visibleItems) => {
+        if (step > visibleItems) {
+            return Math.floor(visibleItems);
+        }
+        return Math.floor(step);
+    };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = React.Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const currentStepIndex = Math.ceil(currentIndex / step);
+    const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
         ? (visibleItems - 1) / visibleItems
         : Math.floor(visibleItems) / visibleItems;
@@ -224,14 +234,15 @@ const Carousel = (_a) => {
         }
     };
     const handleNavigationButtonPreviousClick = () => {
-        handleSetCurrentIndex(currentIndex - 1);
+        handleSetCurrentIndex(currentIndex - step);
     };
     const handleNavigationButtonNextClick = () => {
-        handleSetCurrentIndex(currentIndex + 1);
+        handleSetCurrentIndex(currentIndex + step);
     };
     const handlePaginationItemClick = (e) => {
         if (e.currentTarget.parentElement) {
-            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+            const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
+            handleSetCurrentIndex(index * step);
         }
     };
     const handlePointerMove = (e) => {
@@ -272,14 +283,14 @@ const Carousel = (_a) => {
         if (endTime - data.startTime > 300) {
             const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
             if (swipeRatio >= 0.5) {
-                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
             }
             else {
                 handleSetCurrentIndex(currentIndex);
             }
         }
         else {
-            handleSetCurrentIndex(currentIndex + data.direction);
+            handleSetCurrentIndex(currentIndex + data.direction * step);
         }
         if (data.scrollbarNavigation && data.direction === 0) {
             if (knobRef.current) {
@@ -341,19 +352,21 @@ const Carousel = (_a) => {
             props.title && React__default.default.createElement(Title, null, props.title),
             React__default.default.createElement(Navigation, null,
                 props.hasCounter && (React__default.default.createElement(Counter, null,
-                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    slideScreensCount === 0 ? 0 : currentStepIndex + 1,
                     "/",
-                    slideScreensCount)),
-                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
-                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children) }))),
+                    totalSwipeSteps)),
+                React__default.default.createElement(ButtonArrow.default, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
+                React__default.default.createElement(ButtonArrow.default, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= React.Children.count(props.children), type: "button" }))),
         React__default.default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
             React__default.default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, React.Children.map(props.children, child => (React__default.default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React__default.default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
+                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, isActive: Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
             React__default.default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
                 React__default.default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
             props.footerButton && (React__default.default.createElement(FooterButton, null,
                 React__default.default.createElement(ButtonIcon.default, { icon: icons.ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };
+exports.SlideItem = SlideItem;
 exports.default = Carousel;

package/build/cjs/components/Divider/Divider.d.ts CHANGED Viewed

@@ -29,6 +29,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * An aria-label to the focusable separator should be included if there is more than one focusable separator
+     */
+    ariaLabelFocusableSeparator?: string;
 }
 declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/cjs/components/Divider/Divider.js CHANGED Viewed

@@ -26,7 +26,8 @@ const DividerWrapper = styled__default.default.div `
 `;
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ['data-testid']);
-    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    const isFocusableSeparator = Boolean(props.children);
+    return (React__default.default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
 };
 exports.default = Divider;

package/build/cjs/components/InfoDialog/InfoDialog.d.ts CHANGED Viewed

@@ -37,6 +37,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label to the component
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Info Dialog */
 declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/InfoDialog/InfoDialog.js CHANGED Viewed

@@ -62,7 +62,7 @@ const InfoDialogContainer = styled.default.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+    return (React__default.default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 exports.default = InfoDialog;

package/build/cjs/components/Input/Input.js CHANGED Viewed

@@ -166,8 +166,7 @@ const Input = (_a) => {
     return (React__default.default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.default.createElement(LabelText.default, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: props.readonly ? 'hidden' : type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
-            props.readonly && React__default.default.createElement("div", null, props.value),
+            React__default.default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||

package/build/cjs/components/LabelText/LabelText.d.ts CHANGED Viewed

@@ -18,10 +18,12 @@ interface Props {
      * Styling of `label` element changes depending on the passed status
      *
      * @param {LabelTextStatus} undefined Default styling
-     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
-     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
-     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
+     * @param {LabelTextStatus} info Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} success Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} warning Changes color to default color (this type will be deprecated in the future)
      * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
+     *
+     * @deprecated info, success and warning are deprecated, please switch to default or error status
      */
     status?: LabelTextStatus;
     /**

package/build/cjs/components/LabelText/LabelText.js CHANGED Viewed

@@ -14,7 +14,7 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 const Label = styled.default.label `
     display: block;
-    color: ${({ status }) => (status ? theme.default.color.notification[status] : theme.default.color.text.gray)};
+    color: ${({ status }) => status === 'error' ? theme.default.color.notification.error : theme.default.color.text.gray};
     font-weight: ${theme.default.fontWeight.medium};
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};

package/build/cjs/components/ProgressIndicator/ProgressIndicator.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, KeyboardEvent } from 'react';
 import React from 'react';
 type ProgressIndicatorStatus = 'error';
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
      * On Progress Indicator Item label or number click callback
      * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
      */
-    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */

package/build/cjs/components/ProgressIndicator/ProgressIndicator.js CHANGED Viewed

@@ -126,14 +126,21 @@ const ProgressIndicator = (_a) => {
                 props.onStepClick(index, e);
             }
         };
-        return (React__default.default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+        const handleKeyDown = (e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && props.onStepClick) {
+                e.preventDefault();
+                props.onStepClick(index, e);
+            }
+        };
+        const isClickable = isCompleted && Boolean(props.onStepClick);
+        return (React__default.default.createElement(ProgressIndicatorItem, { key: id, small: props.small },
             index > 0 && (React__default.default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.default.createElement(React__default.default.Fragment, null,
-                isCompleted && props.completedStepLabel && (React__default.default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
-                React__default.default.createElement(Icon.default, { icon: isError ? icons.Warning : icons.Check, color: isError ? theme.default.color.text.white : theme.default.color.text.pink, size: "1rem" }))) : (stepNumber)),
-            label && (React__default.default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
+            React__default.default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, isClickable: isClickable, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
+                    ? `${label}, ${props.completedStepLabel}`
+                    : label }, isCompleted || isError ? (React__default.default.createElement(Icon.default, { icon: isError ? icons.Warning : icons.Check, color: isError ? theme.default.color.text.white : theme.default.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
+            label && (React__default.default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
+    return (React__default.default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
 };
 exports.default = ProgressIndicator;

package/build/cjs/components/ReadMore/ReadMore.d.ts CHANGED Viewed

@@ -68,6 +68,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass an accessible label for the component, enhancing screen reader support.
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Read More */
 declare const ReadMore: ({ collapsedSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/cjs/components/ReadMore/ReadMore.js CHANGED Viewed

@@ -45,6 +45,9 @@ const StyledButtonIcon = styled.default(ButtonIcon.default) `
 const ReadMore = (_a) => {
     var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["collapsedSize", 'data-testid']);
     const [expanded, setExpanded] = React.useState(props.seoInitExpanded === true || false);
+    const contentRef = React.useRef(null);
+    const buttonRef = React.useRef(null);
+    const userInteractedRef = React.useRef(false);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
     const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
     const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
@@ -56,16 +59,40 @@ const ReadMore = (_a) => {
         if (!temporaryIsStatelessFlag) {
             setExpanded(!expanded);
         }
+        userInteractedRef.current = true;
     };
     React.useEffect(() => {
         if (props.seoInitExpanded) {
             setExpanded(false);
         }
     }, [props.seoInitExpanded]);
-    return (React__default.default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.default.createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+    React.useEffect(() => {
+        var _a, _b;
+        if (userInteractedRef.current) {
+            if (temporaryStateManagement) {
+                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [temporaryStateManagement]);
+    // Function to apply tabIndex to all links elements of children (since we don't control what is passed as children)
+    const forceTabIndexOnTextLinks = (child) => {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+        if (child.type === 'a') {
+            return React.cloneElement(child, {
+                tabIndex: temporaryStateManagement ? 0 : -1,
+            });
+        }
+        return child;
+    };
+    return (React__default.default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
+        React__default.default.createElement(Content, { ref: contentRef, isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, React.Children.map(props.children, forceTabIndexOnTextLinks)),
         React__default.default.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
-            React__default.default.createElement(StyledButtonIcon, { icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
+            React__default.default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? icons.ChevronUp : icons.ChevronDown, onClick: handleOnClick, ariaHidden: true, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
 };
 exports.default = ReadMore;

package/build/es/components/Carousel/Carousel.d.ts CHANGED Viewed

@@ -54,8 +54,196 @@ interface Props {
      * If not provided, visibleItems property will be used
      */
     responsive?: Partial<Responsive>;
+    /**
+     * Allows to pass a screen reader label for the pagination item next to the current slide number
+     */
+    paginationAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the next arrow button
+     */
+    nextAriaLabel?: string;
+    /**
+     * Allows to pass a screen reader label for the previous arrow button
+     */
+    previousAriaLabel?: string;
+    /**
+     * Number of items to move when navigating the carousel
+     *
+     * @default 1
+     */
+    swipeStep?: number;
 }
+declare const SlideItem: import("styled-components").StyledComponent<"div", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        active: {
+            pink: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, Required<Pick<Props, "visibleItems">> & {
+    itemWidthCorrection: number;
+    isSwiping: boolean;
+}, never>;
 /** @visibleName Carousel */
 declare const Carousel: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */
 export default Carousel;
+export { SlideItem };

package/build/es/components/Carousel/Carousel.js CHANGED Viewed

@@ -138,6 +138,7 @@ const Counter = styled.span `
 `;
 /** @visibleName Carousel */
 const Carousel = (_a) => {
+    var _b;
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     const slidesWrapperRef = useRef(null);
     const scrollbarRef = useRef(null);
@@ -167,9 +168,18 @@ const Carousel = (_a) => {
         }, 100);
         return () => clearTimeout(timeoutId);
     }, [width, isMobile, props.responsive, props.visibleItems, props.children]);
+    const getStep = (step, visibleItems) => {
+        if (step > visibleItems) {
+            return Math.floor(visibleItems);
+        }
+        return Math.floor(step);
+    };
     const visibleItems = props.visibleItems || calculatedItems;
     const slidesWrapperGapSizePx = 20;
     const slideScreensCount = Children.count(props.children) - Math.floor(visibleItems) + 1;
+    const step = getStep((_b = props.swipeStep) !== null && _b !== void 0 ? _b : 1, visibleItems);
+    const currentStepIndex = Math.ceil(currentIndex / step);
+    const totalSwipeSteps = Math.ceil(slideScreensCount / step + ((slideScreensCount - 1) % step !== 0 ? 1 : 0));
     const itemWidthCorrectionRatio = (slidesWrapperGapSizePx * visibleItems) % Math.floor(visibleItems) === 0
         ? (visibleItems - 1) / visibleItems
         : Math.floor(visibleItems) / visibleItems;
@@ -216,14 +226,15 @@ const Carousel = (_a) => {
         }
     };
     const handleNavigationButtonPreviousClick = () => {
-        handleSetCurrentIndex(currentIndex - 1);
+        handleSetCurrentIndex(currentIndex - step);
     };
     const handleNavigationButtonNextClick = () => {
-        handleSetCurrentIndex(currentIndex + 1);
+        handleSetCurrentIndex(currentIndex + step);
     };
     const handlePaginationItemClick = (e) => {
         if (e.currentTarget.parentElement) {
-            handleSetCurrentIndex([...e.currentTarget.parentElement.children].indexOf(e.currentTarget));
+            const index = [...e.currentTarget.parentElement.children].indexOf(e.currentTarget);
+            handleSetCurrentIndex(index * step);
         }
     };
     const handlePointerMove = (e) => {
@@ -264,14 +275,14 @@ const Carousel = (_a) => {
         if (endTime - data.startTime > 300) {
             const swipeRatio = Math.abs(data.currentTransform - data.startTransform) / data.itemWidth;
             if (swipeRatio >= 0.5) {
-                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio));
+                handleSetCurrentIndex(currentIndex + Math.round(data.direction > 0 ? swipeRatio : -swipeRatio) * step);
             }
             else {
                 handleSetCurrentIndex(currentIndex);
             }
         }
         else {
-            handleSetCurrentIndex(currentIndex + data.direction);
+            handleSetCurrentIndex(currentIndex + data.direction * step);
         }
         if (data.scrollbarNavigation && data.direction === 0) {
             if (knobRef.current) {
@@ -333,19 +344,20 @@ const Carousel = (_a) => {
             props.title && React__default.createElement(Title, null, props.title),
             React__default.createElement(Navigation, null,
                 props.hasCounter && (React__default.createElement(Counter, null,
-                    slideScreensCount === 0 ? 0 : currentIndex + 1,
+                    slideScreensCount === 0 ? 0 : currentStepIndex + 1,
                     "/",
-                    slideScreensCount)),
-                React__default.createElement(ButtonArrow, { direction: "left", "aria-label": "Previous", onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0 }),
-                React__default.createElement(ButtonArrow, { direction: "right", "aria-label": "Next", onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children) }))),
+                    totalSwipeSteps)),
+                React__default.createElement(ButtonArrow, { direction: "left", "aria-label": props.previousAriaLabel, onClick: handleNavigationButtonPreviousClick, disabled: currentIndex <= 0, type: "button" }),
+                React__default.createElement(ButtonArrow, { direction: "right", "aria-label": props.nextAriaLabel, onClick: handleNavigationButtonNextClick, disabled: currentIndex + visibleItems >= Children.count(props.children), type: "button" }))),
         React__default.createElement(Content, { "data-testid": dataTestId && `${dataTestId}-content` },
             React__default.createElement(SlidesWrapper, { ref: slidesWrapperRef, onPointerDown: handleSlidesPointerDown, gap: slidesWrapperGapSizePx / 16 }, Children.map(props.children, child => (React__default.createElement(SlideItem, { visibleItems: visibleItems, itemWidthCorrection: itemWidthCorrection, isSwiping: isSwiping, onPointerDown: handlePointerDown }, child))))),
         React__default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` },
-            React__default.createElement(Pagination, null, [...Array(slideScreensCount).keys()].map((value, index) => (React__default.createElement(PaginationItem, { key: value, "aria-label": `Move to step ${index + 1}`, "aria-current": index === currentIndex, isActive: index === currentIndex, onClick: handlePaginationItemClick })))),
+            React__default.createElement(Pagination, null, [...Array(totalSwipeSteps).keys()].map((value, index) => (React__default.createElement(PaginationItem, { key: value, "aria-label": props.paginationAriaLabel &&
+                    `${props.paginationAriaLabel} ${index + 1}`, "aria-current": Math.ceil(currentIndex / step) === index, isActive: Math.ceil(currentIndex / step) === index, onClick: handlePaginationItemClick, type: "button" })))),
             React__default.createElement(Scrollbar, { ref: scrollbarRef, onPointerDown: handleScrollbarPointerDown },
                 React__default.createElement(Knob, { ref: knobRef, knobSize: slideScreensCount })),
             props.footerButton && (React__default.createElement(FooterButton, null,
                 React__default.createElement(ButtonIcon, { icon: ArrowRight, onClick: props.onFooterButtonClick }, props.footerButton))))));
 };
-export { Carousel as default };
+export { SlideItem, Carousel as default };

package/build/es/components/Divider/Divider.d.ts CHANGED Viewed

@@ -29,6 +29,10 @@ interface Props {
      * Allows to pass a custom className
      */
     className?: string;
+    /**
+     * An aria-label to the focusable separator should be included if there is more than one focusable separator
+     */
+    ariaLabelFocusableSeparator?: string;
 }
 declare const Divider: ({ "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;
 /** @component */

package/build/es/components/Divider/Divider.js CHANGED Viewed

@@ -17,7 +17,8 @@ const DividerWrapper = styled__default.div `
 `;
 const Divider = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
-    return (React__default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId }, props.children));
+    const isFocusableSeparator = Boolean(props.children);
+    return (React__default.createElement(DividerWrapper, { id: props.id, margin: props.margin, padding: props.padding, className: props.className, "data-testid": dataTestId, as: isFocusableSeparator ? 'div' : 'hr', role: isFocusableSeparator ? 'separator' : undefined, "aria-orientation": "horizontal", "aria-label": props.ariaLabelFocusableSeparator, "aria-hidden": !isFocusableSeparator, tabIndex: isFocusableSeparator ? 0 : -1 }, props.children));
 };
 export { Divider as default };

package/build/es/components/InfoDialog/InfoDialog.d.ts CHANGED Viewed

@@ -37,6 +37,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass a screen reader label to the component
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Info Dialog */
 declare const InfoDialog: ({ position, type, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/InfoDialog/InfoDialog.js CHANGED Viewed

@@ -54,7 +54,7 @@ const InfoDialogContainer = styled.div `
 /** @visibleName Info Dialog */
 const InfoDialog = (_a) => {
     var { position = 'middle', type = 'default', 'data-testid': dataTestId } = _a, props = __rest(_a, ["position", "type", 'data-testid']);
-    return (React__default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type }, props.children));
+    return (React__default.createElement(InfoDialogContainer, { id: props.id, "data-testid": dataTestId, className: props.className, position: position, type: type, role: "region", "aria-label": props.ariaLabel }, props.children));
 };
 export { InfoDialog as default };

package/build/es/components/Input/Input.js CHANGED Viewed

@@ -158,8 +158,7 @@ const Input = (_a) => {
     return (React__default.createElement(FieldContainer, { className: props.className },
         props.label && (React__default.createElement(LabelText, { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label`, status: props.status === 'error' ? props.status : undefined, isMandatory: props.required }, props.label)),
         React__default.createElement(FieldWrapper, { status: props.status, "$type": type, "$disabled": props.disabled },
-            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: props.readonly ? 'hidden' : type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
-            props.readonly && React__default.createElement("div", null, props.value),
+            React__default.createElement(StyledInput, { id: props.id, name: props.name, type: type, value: props.value, placeholder: props.placeholder, onChange: handleChange, onBlur: handleOnBlur, onFocus: props.onFocus, onClick: onClick, onKeyDown: props.onKeyDown, onKeyPress: props.onKeyPress, required: props.required, disabled: props.disabled, autoComplete: props.autocomplete, "aria-disabled": props.disabled, "aria-label": !props.label ? (_b = props.ariaLabel) !== null && _b !== void 0 ? _b : props.id : undefined, ref: inputRef, tabIndex: props.tabIndex, "aria-describedby": getDescribedBy(), "data-testid": dataTestId, readOnly: props.readonly }),
             ((props.status && props.status !== 'comment') ||
                 props.showPasswordToggle ||
                 props.disabled ||

package/build/es/components/LabelText/LabelText.d.ts CHANGED Viewed

@@ -18,10 +18,12 @@ interface Props {
      * Styling of `label` element changes depending on the passed status
      *
      * @param {LabelTextStatus} undefined Default styling
-     * @param {LabelTextStatus} info Changes color to `theme.color.notification.info`
-     * @param {LabelTextStatus} success Changes color to `theme.color.notification.success`
-     * @param {LabelTextStatus} warning Changes color to `theme.color.notification.warning`
+     * @param {LabelTextStatus} info Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} success Changes color to default color (this type will be deprecated in the future)
+     * @param {LabelTextStatus} warning Changes color to default color (this type will be deprecated in the future)
      * @param {LabelTextStatus} error Changes color to `theme.color.notification.error`
+     *
+     * @deprecated info, success and warning are deprecated, please switch to default or error status
      */
     status?: LabelTextStatus;
     /**

package/build/es/components/LabelText/LabelText.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { getDividedSize } from '../../utils/styledUtils.js';
 const Label = styled.label `
     display: block;
-    color: ${({ status }) => (status ? theme.color.notification[status] : theme.color.text.gray)};
+    color: ${({ status }) => status === 'error' ? theme.color.notification.error : theme.color.text.gray};
     font-weight: ${theme.fontWeight.medium};
     font-size: ${theme.fontSize.default};
     line-height: ${theme.lineHeight.default};

package/build/es/components/ProgressIndicator/ProgressIndicator.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, KeyboardEvent } from 'react';
 import React from 'react';
 type ProgressIndicatorStatus = 'error';
 interface Props {
@@ -15,7 +15,7 @@ interface Props {
      * On Progress Indicator Item label or number click callback
      * Use `e.currentTarget.parentElement` to get Progress Indicator Item element
      */
-    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement>) => void;
+    onStepClick?: (stepIndex: number, e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
     /**
      * Allows to change version of component to small
      */

package/build/es/components/ProgressIndicator/ProgressIndicator.js CHANGED Viewed

@@ -118,14 +118,21 @@ const ProgressIndicator = (_a) => {
                 props.onStepClick(index, e);
             }
         };
-        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small, "aria-current": isActive ? 'step' : 'false' },
+        const handleKeyDown = (e) => {
+            if ((e.key === 'Enter' || e.key === ' ') && props.onStepClick) {
+                e.preventDefault();
+                props.onStepClick(index, e);
+            }
+        };
+        const isClickable = isCompleted && Boolean(props.onStepClick);
+        return (React__default.createElement(ProgressIndicatorItem, { key: id, small: props.small },
             index > 0 && (React__default.createElement(ProgressIndicatorItemConnector, { small: props.small, isActive: isActive, isCompleted: isCompleted })),
-            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, isClickable: isCompleted && Boolean(props.onStepClick) }, isCompleted || isError ? (React__default.createElement(React__default.Fragment, null,
-                isCompleted && props.completedStepLabel && (React__default.createElement("span", { className: "visually-hidden" }, props.completedStepLabel)),
-                React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem" }))) : (stepNumber)),
-            label && (React__default.createElement(ProgressIndicatorItemLabel, { small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
+            React__default.createElement(ProgressIndicatorItemNumber, { small: props.small, onClick: handleClick, isActive: isActive, isCompleted: isCompleted, isError: isError, onKeyDown: handleKeyDown, tabIndex: isClickable || isActive ? 0 : -1, isClickable: isClickable, role: "tab", "aria-current": isActive ? 'step' : 'false', "aria-label": isCompleted && props.completedStepLabel
+                    ? `${label}, ${props.completedStepLabel}`
+                    : label }, isCompleted || isError ? (React__default.createElement(Icon, { icon: isError ? Warning : Check, color: isError ? theme.color.text.white : theme.color.text.pink, size: "1rem", "aria-hidden": true })) : (stepNumber)),
+            label && (React__default.createElement(ProgressIndicatorItemLabel, { "aria-hidden": true, small: props.small, onClick: handleClick, isActive: isActive, className: "visually-hidden" }, label))));
     });
-    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "list" }, progressIndicatorItems));
+    return (React__default.createElement(ProgressIndicatorWrapper, { className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "tablist" }, progressIndicatorItems));
 };
 export { ProgressIndicator as default };

package/build/es/components/ReadMore/ReadMore.d.ts CHANGED Viewed

@@ -68,6 +68,10 @@ interface Props {
      * Allows to pass testid string for testing purposes
      */
     'data-testid'?: string;
+    /**
+     * Allows to pass an accessible label for the component, enhancing screen reader support.
+     */
+    ariaLabel?: string;
 }
 /** @visibleName Read More */
 declare const ReadMore: ({ collapsedSize, "data-testid": dataTestId, ...props }: Props) => React.JSX.Element;

package/build/es/components/ReadMore/ReadMore.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { __rest } from 'tslib';
 import { ChevronUp, ChevronDown } from '@dnanpm/icons';
-import React__default, { useState, useEffect } from 'react';
+import React__default, { useState, useRef, useEffect, Children, isValidElement, cloneElement } from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import ButtonIcon from '../ButtonIcon/ButtonIcon.js';
@@ -37,6 +37,9 @@ const StyledButtonIcon = styled(ButtonIcon) `
 const ReadMore = (_a) => {
     var { collapsedSize = '10rem', 'data-testid': dataTestId } = _a, props = __rest(_a, ["collapsedSize", 'data-testid']);
     const [expanded, setExpanded] = useState(props.seoInitExpanded === true || false);
+    const contentRef = useRef(null);
+    const buttonRef = useRef(null);
+    const userInteractedRef = useRef(false);
     // TODO: Remove once https://jira.dna.fi/browse/STYLE-662 is done
     const temporaryIsStatelessFlag = typeof props.isExpanded !== 'undefined';
     const temporaryStateManagement = temporaryIsStatelessFlag ? props.isExpanded : expanded;
@@ -48,16 +51,40 @@ const ReadMore = (_a) => {
         if (!temporaryIsStatelessFlag) {
             setExpanded(!expanded);
         }
+        userInteractedRef.current = true;
     };
     useEffect(() => {
         if (props.seoInitExpanded) {
             setExpanded(false);
         }
     }, [props.seoInitExpanded]);
-    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Content, { isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content` }, props.children),
+    useEffect(() => {
+        var _a, _b;
+        if (userInteractedRef.current) {
+            if (temporaryStateManagement) {
+                (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+    }, [temporaryStateManagement]);
+    // Function to apply tabIndex to all links elements of children (since we don't control what is passed as children)
+    const forceTabIndexOnTextLinks = (child) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+        if (child.type === 'a') {
+            return cloneElement(child, {
+                tabIndex: temporaryStateManagement ? 0 : -1,
+            });
+        }
+        return child;
+    };
+    return (React__default.createElement(Container, { id: props.id, className: props.className, "data-testid": dataTestId, "aria-label": props.ariaLabel, role: "region" },
+        React__default.createElement(Content, { ref: contentRef, isExpanded: temporaryStateManagement, collapsedSize: collapsedSize, "data-testid": dataTestId && `${dataTestId}-content`, "aria-hidden": temporaryStateManagement ? 'false' : 'true', tabIndex: temporaryStateManagement ? 0 : -1 }, Children.map(props.children, forceTabIndexOnTextLinks)),
         React__default.createElement(ButtonWrapper, { buttonPosition: props.buttonPosition },
-            React__default.createElement(StyledButtonIcon, { icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick }, temporaryButtonLabel || props.buttonLabel))));
+            React__default.createElement(StyledButtonIcon, { ref: buttonRef, icon: temporaryStateManagement ? ChevronUp : ChevronDown, onClick: handleOnClick, ariaHidden: true, "aria-expanded": temporaryStateManagement }, temporaryButtonLabel || props.buttonLabel))));
 };
 export { ReadMore as default };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
     "name": "@dnanpm/styleguide",
     "sideEffects": false,
-    "version": "v3.9.8",
+    "version": "v3.9.9",
     "main": "build/cjs/index.js",
     "module": "build/es/index.js",
     "jsnext:main": "build/es/index.js",
@@ -41,14 +41,14 @@
         "not op_mini all"
     ],
     "devDependencies": {
-        "@babel/core": "^7.26.0",
+        "@babel/core": "^7.26.10",
         "@babel/preset-env": "^7.26.0",
         "@babel/preset-react": "^7.26.3",
         "@babel/preset-typescript": "^7.27.0",
         "@dnanpm/icons": "2.0.7",
-        "@rollup/plugin-commonjs": "^28.0.1",
+        "@rollup/plugin-commonjs": "^28.0.3",
         "@rollup/plugin-node-resolve": "^15.3.0",
-        "@rollup/plugin-typescript": "^12.1.1",
+        "@rollup/plugin-typescript": "^12.1.2",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^14.3.1",
         "@testing-library/user-event": "^14.5.2",
@@ -94,7 +94,7 @@
         "ts-node": "^10.9.2",
         "tslib": "^2.8.1",
         "typescript": "^5.1.6",
-        "webpack": "^5.95.0"
+        "webpack": "^5.99.6"
     },
     "dependencies": {
         "ramda": "^0.27.1",