@helsenorge/designsystem-react 9.5.0 → 9.7.0

package/components/ExpanderList/styles.module.scss

@@ -267,12 +267,7 @@
     }
 
     &--padding {
-      padding: getSpacer(m) 0;
-
-      @media (min-width: map.get($grid-breakpoints, md)) {
-        padding-left: getSpacer(2xs);
-        padding-right: getSpacer(2xs);
-      }
+      padding: getSpacer(xs) getSpacer(s) getSpacer(l);
     }
   }
 }

package/components/Label/Label.d.ts

@@ -24,7 +24,7 @@ export interface LabelProps {
     /** Id som plasseres på <label/> */
     labelId?: string;
     /** Array of main label strings. Can be of type semibold or normal */
-    labelTexts: LabelText[];
+    labelTexts?: LabelText[];
     /** Array of sublabel strings. Can be of type semibold or normal */
     onColor?: keyof typeof FormOnColor;
     /** StatusDot placed underneath the last sublabel */

package/components/ListHeader/styles.module.scss

@@ -51,7 +51,7 @@
     }
 
     &--spacing {
-      margin-left: getSpacer(s);
+      margin-left: getSpacer(2xs);
     }
 
     :focus > &,

package/components/Modal/styles.module.scss

@@ -11,6 +11,7 @@
   justify-content: center;
   position: fixed;
   inset: 0;
+  container-type: inline-size;
 
   @media print {
     position: absolute;
@@ -90,6 +91,10 @@
     @media (min-width: map.get($grid-breakpoints, lg)) {
       width: 696px;
     }
+
+    @container (max-width: 319px) {
+      padding-bottom: getSpacer(2xs);
+    }
   }
 
   &--medium {
@@ -126,6 +131,7 @@
     transition: opacity 0.5s;
     opacity: 0;
     z-index: 2;
+    pointer-events: none;
   }
 
   &__shadow--top {
@@ -169,6 +175,10 @@
       max-height: none;
     }
 
+    @container (max-width: 319px) {
+      max-height: calc(100dvh - 4rem);
+    }
+
     &--image {
       max-height: 100vh;
     }
@@ -180,6 +190,10 @@
         @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(xl) getSpacer(2xs);
         }
+
+        @container (max-width: 319px) {
+          padding: getSpacer(2xs) getSpacer(2xs) getSpacer(4xs);
+        }
       }
 
       &--medium {
@@ -188,6 +202,10 @@
         @media (min-width: map.get($grid-breakpoints, md)) {
           padding: getSpacer(xl) getSpacer(m) getSpacer(2xs);
         }
+
+        @container (max-width: 319px) {
+          padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
+        }
       }
       &--large#{&}--image {
         padding: getSpacer(xl) getSpacer(2xs) getSpacer(l);
@@ -239,10 +257,18 @@
       @media (min-width: map.get($grid-breakpoints, md)) {
         padding: getSpacer(l) getSpacer(xl) 0;
       }
+
+      @container (max-width: 319px) {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      }
     }
 
     &--medium {
       padding: getSpacer(m) getSpacer(m) 0;
+
+      @container (max-width: 319px) {
+        padding: getSpacer(2xs) getSpacer(2xs) 0;
+      }
     }
   }
 

package/components/StickyNote/StickyNote.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Aria label for the delete/close button */
+    arialabelXButton: string;
+    /** Activates the error styling */
+    error?: boolean;
+    /** Error text to show below the note */
+    errorText?: string;
+    /** Error text id */
+    errorTextId?: string;
+    /** Text shown under the textarea  */
+    footerText?: string;
+    /** Function run when clicking the delete/close button */
+    onXButtonClick?: () => void;
+    /** Function run if user clicks the component while it is disabled */
+    onClickWhileDisabled?: () => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+    /** Timestamp shown over the textarea  */
+    timestamp: string;
+    /** Classname for the outer wrapper */
+    wrapperClassName?: string;
+}
+declare const StickyNote: React.FC<StickyNoteProps>;
+export default StickyNote;

package/components/StickyNote/StickyNote.test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/StickyNote/Triangle.d.ts

@@ -0,0 +1,9 @@
+interface TriangleProps {
+    type: 'default' | 'active' | 'error';
+}
+export interface Palette {
+    border: string;
+    background: string;
+}
+declare const Triangle: React.FC<TriangleProps>;
+export default Triangle;

package/components/StickyNote/index.d.ts

@@ -0,0 +1,3 @@
+import { default as StickyNote } from './StickyNote';
+export * from './StickyNote';
+export default StickyNote;

package/components/StickyNote/index.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useHover } from "../../hooks/useHover.js";
+import { usePseudoClasses } from "../../hooks/usePseudoClasses.js";
+import { I as Icon } from "../../Icon.js";
+import { IconSize } from "../../constants.js";
+import { useUuid } from "../../hooks/useUuid.js";
+import { getAriaDescribedBy } from "../../utils/accessibility.js";
+import X from "../Icons/X.js";
+import styles from "./styles.module.scss";
+const Triangle = ({ type }) => {
+  const palette = (() => {
+    switch (type) {
+      case "active":
+        return {
+          border: "#C59302",
+          background: "#F5E080"
+        };
+      case "error":
+        return {
+          border: "#C83521",
+          background: "#EEC0A5"
+        };
+      default:
+        return {
+          border: "#F5E080",
+          background: "#F5E080"
+        };
+    }
+  })();
+  return /* @__PURE__ */ jsxs("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_1_44", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z" }) }),
+    /* @__PURE__ */ jsx("path", { d: "M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z", fill: palette.background }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z",
+        fill: palette.border,
+        mask: "url(#path-1-inside-1_1_44)"
+      }
+    )
+  ] });
+};
+const StickyNote = (props) => {
+  const {
+    wrapperClassName,
+    timestamp,
+    onXButtonClick,
+    arialabelXButton,
+    footerText,
+    error,
+    errorText,
+    errorTextId,
+    onClickWhileDisabled,
+    testId,
+    ...textareaProps
+  } = props;
+  const errorTextUuid = useUuid(errorTextId);
+  const stickynoteRef = useRef(null);
+  const textareaRef = useRef(null);
+  const { isFocused: isTextareaFocused } = usePseudoClasses(textareaRef);
+  const { isHovered } = useHover(stickynoteRef);
+  const triangleType = error ? "error" : isTextareaFocused ? "active" : "default";
+  const handleWrapperClick = (event) => {
+    var _a;
+    if (event.target.closest("button")) {
+      return;
+    }
+    if (textareaProps.disabled) {
+      onClickWhileDisabled && onClickWhileDisabled();
+      return;
+    }
+    (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  };
+  useEffect(() => {
+    textareaRef && textareaRef.current && resizeTextarea(textareaRef.current);
+  }, []);
+  const resizeTextarea = (target) => {
+    target.style.height = "inherit";
+    target.style.height = `${target.scrollHeight}px`;
+  };
+  const handleChange = (e) => {
+    const textarea = e.target;
+    resizeTextarea(textarea);
+    textareaProps.onChange && textareaProps.onChange(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-testid": testId,
+        ref: stickynoteRef,
+        className: classNames(styles["sticky-note"], wrapperClassName, {
+          [styles["sticky-note--focused"]]: isTextareaFocused,
+          [styles["sticky-note--hovered"]]: isHovered && !isTextareaFocused && !textareaProps.disabled,
+          [styles["sticky-note--error"]]: error
+        }),
+        onClick: handleWrapperClick,
+        role: "textbox",
+        tabIndex: -1,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            handleWrapperClick(e);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__header"]), children: timestamp && /* @__PURE__ */ jsx("span", { className: styles["sticky-note__header__timestamp"], children: timestamp }) }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              "data-testid": `${testId}-textarea`,
+              className: classNames(styles["sticky-note__textarea"], textareaProps.className),
+              ...textareaProps,
+              onChange: handleChange,
+              "aria-describedby": getAriaDescribedBy(props, errorTextUuid)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onXButtonClick,
+              "aria-label": arialabelXButton,
+              "data-testid": "closeButton",
+              className: classNames(styles["sticky-note__x-button"]),
+              type: "button",
+              children: /* @__PURE__ */ jsx(Icon, { svgIcon: X, color: "black", size: IconSize.XXSmall })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__footer"]), children: footerText && /* @__PURE__ */ jsx("span", { children: footerText }) }),
+          /* @__PURE__ */ jsx("div", { className: classNames(styles["sticky-note__triangle"]), children: /* @__PURE__ */ jsx(Triangle, { type: triangleType }) })
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { className: styles["sticky-note__error-text"], id: errorTextId, children: errorText })
+  ] });
+};
+export {
+  StickyNote as default
+};
+//# sourceMappingURL=index.js.map

package/components/StickyNote/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/StickyNote/Triangle.tsx","../../../src/components/StickyNote/StickyNote.tsx"],"sourcesContent":["interface TriangleProps {\n  type: 'default' | 'active' | 'error';\n}\n\nexport interface Palette {\n  border: string;\n  background: string;\n}\n\nconst Triangle: React.FC<TriangleProps> = ({ type }) => {\n  const palette = ((): Palette => {\n    switch (type) {\n      case 'active':\n        return {\n          border: '#C59302',\n          background: '#F5E080',\n        };\n      case 'error':\n        return {\n          border: '#C83521',\n          background: '#EEC0A5',\n        };\n      default:\n        return {\n          border: '#F5E080',\n          background: '#F5E080',\n        };\n    }\n  })();\n  return (\n    <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n      <mask id=\"path-1-inside-1_1_44\" fill=\"white\">\n        <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" />\n      </mask>\n      <path d=\"M22 0L1.80043e-06 22L2.83099e-06 -8.97354e-07L22 0Z\" fill={palette.background} />\n      <path\n        d=\"M22 0L22.7071 0.707107L24.4142 -1L22 -1L22 0ZM1.80043e-06 22L-0.999998 22L-0.999998 24.4142L0.707109 22.7071L1.80043e-06 22ZM2.83099e-06 -8.97354e-07L2.87783e-06 -1L-0.999997 -1L-0.999997 -9.38143e-07L2.83099e-06 -8.97354e-07ZM21.2929 -0.707107L-0.707105 21.2929L0.707109 22.7071L22.7071 0.707107L21.2929 -0.707107ZM1 22L1 -8.56565e-07L-0.999997 -9.38143e-07L-0.999998 22L1 22ZM2.78414e-06 0.999999L22 1L22 -1L2.87783e-06 -1L2.78414e-06 0.999999Z\"\n        fill={palette.border}\n        mask=\"url(#path-1-inside-1_1_44)\"\n      />\n    </svg>\n  );\n};\n\nexport default Triangle;\n","import React, { useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useHover } from '../../hooks/useHover';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport Triangle from './Triangle';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getAriaDescribedBy } from '../../utils/accessibility';\nimport X from '../Icons/X';\n\nimport styles from './styles.module.scss';\n\nexport interface StickyNoteProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** Aria label for the delete/close button */\n  arialabelXButton: string;\n  /** Activates the error styling */\n  error?: boolean;\n  /** Error text to show below the note */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Text shown under the textarea  */\n  footerText?: string;\n  /** Function run when clicking the delete/close button */\n  onXButtonClick?: () => void;\n  /** Function run if user clicks the component while it is disabled */\n  onClickWhileDisabled?: () => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Timestamp shown over the textarea  */\n  timestamp: string;\n  /** Classname for the outer wrapper */\n  wrapperClassName?: string;\n}\n\nconst StickyNote: React.FC<StickyNoteProps> = (props: StickyNoteProps) => {\n  const {\n    wrapperClassName,\n    timestamp,\n    onXButtonClick,\n    arialabelXButton,\n    footerText,\n    error,\n    errorText,\n    errorTextId,\n    onClickWhileDisabled,\n    testId,\n    ...textareaProps\n  } = props;\n  const errorTextUuid = useUuid(errorTextId);\n  const stickynoteRef = useRef<HTMLDivElement>(null);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  const { isFocused: isTextareaFocused } = usePseudoClasses<HTMLTextAreaElement>(textareaRef);\n  const { isHovered } = useHover<HTMLDivElement>(stickynoteRef);\n  const triangleType = error ? 'error' : isTextareaFocused ? 'active' : 'default';\n\n  const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void => {\n    if ((event.target as HTMLElement).closest('button')) {\n      return;\n    }\n    if (textareaProps.disabled) {\n      onClickWhileDisabled && onClickWhileDisabled();\n      return;\n    }\n    textareaRef.current?.focus();\n  };\n\n  useEffect(() => {\n    // Resize textarea to fit default value\n    textareaRef && textareaRef.current && resizeTextarea(textareaRef.current);\n  }, []);\n\n  const resizeTextarea = (target: HTMLTextAreaElement): void => {\n    // Reset field height\n    target.style.height = 'inherit';\n    // Set new height\n    target.style.height = `${target.scrollHeight}px`;\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>): void => {\n    const textarea = e.target as HTMLTextAreaElement;\n    resizeTextarea(textarea);\n    textareaProps.onChange && textareaProps.onChange(e);\n  };\n\n  return (\n    <div>\n      <div\n        data-testid={testId}\n        ref={stickynoteRef}\n        className={classNames(styles['sticky-note'], wrapperClassName, {\n          [styles['sticky-note--focused']]: isTextareaFocused,\n          [styles['sticky-note--hovered']]: isHovered && !isTextareaFocused && !textareaProps.disabled,\n          [styles['sticky-note--error']]: error,\n        })}\n        onClick={handleWrapperClick}\n        role=\"textbox\"\n        tabIndex={-1}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            handleWrapperClick(e as React.KeyboardEvent<HTMLDivElement>);\n          }\n        }}\n      >\n        <div className={classNames(styles['sticky-note__header'])}>\n          {timestamp && <span className={styles['sticky-note__header__timestamp']}>{timestamp}</span>}\n        </div>\n        <textarea\n          ref={textareaRef}\n          data-testid={`${testId}-textarea`}\n          className={classNames(styles['sticky-note__textarea'], textareaProps.className)}\n          {...textareaProps}\n          onChange={handleChange}\n          aria-describedby={getAriaDescribedBy(props, errorTextUuid)}\n        />\n        <button\n          onClick={onXButtonClick}\n          aria-label={arialabelXButton}\n          data-testid=\"closeButton\"\n          className={classNames(styles['sticky-note__x-button'])}\n          type=\"button\"\n        >\n          <Icon svgIcon={X} color=\"black\" size={IconSize.XXSmall} />\n        </button>\n        <div className={classNames(styles['sticky-note__footer'])}>{footerText && <span>{footerText}</span>}</div>\n        <div className={classNames(styles['sticky-note__triangle'])}>\n          <Triangle type={triangleType} />\n        </div>\n      </div>\n      {error && (\n        <p className={styles['sticky-note__error-text']} id={errorTextId}>\n          {errorText}\n        </p>\n      )}\n    </div>\n  );\n};\n\nexport default StickyNote;\n"],"names":[],"mappings":"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"}

package/components/StickyNote/styles.module.scss

@@ -0,0 +1,101 @@
+@use '../../scss/supernova/styles/colors' as *;
+@use '../../scss/font-settings' as fonts;
+
+.sticky-note {
+  position: relative;
+  background-color: var(--core-color-banana-50);
+  width: 100%;
+  border: var(--core-color-banana-300) 1px solid;
+  padding: 12px;
+  overflow: hidden;
+  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
+
+  &--focused {
+    background-color: var(--core-color-banana-50);
+    border-color: var(--core-color-banana-600);
+  }
+
+  &--hovered {
+    background-color: var(--core-color-banana-100);
+    border: var(--core-color-banana-100) 1px solid;
+  }
+
+  &--error {
+    background-color: var(--core-color-cherry-50);
+    border: var(--core-color-cherry-300) 1px solid;
+  }
+
+  &__x-button {
+    cursor: pointer;
+    background-color: transparent;
+    color: var(--color-base-text-onlight);
+    border: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 2px;
+    right: 2px;
+
+    &:hover {
+      background-color: var(--core-color-banana-200); // todo: bestem farge her
+      outline: 1px solid var(--core-color-banana-500); // todo: bestem farge her
+    }
+
+    &:focus-visible {
+      background-color: var(--color-action-background-transparent-onlight-hoverselected);
+      outline: 2px solid var(--color-action-border-onlight-focus);
+    }
+  }
+
+  &__header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    &__timestamp {
+      color: var(--color-placeholder-text-onlight);
+      font-size: 1rem;
+    }
+  }
+
+  &__textarea {
+    width: 100%;
+    height: 100%;
+    border: none;
+    resize: none;
+    background: transparent;
+    outline: none;
+    line-height: 28px;
+
+    &:disabled {
+      // Dette er for å unngå at disabled tekst ikke validerer på iOS
+      -webkit-text-fill-color: var(--color-base-text-onlight);
+      opacity: 1;
+    }
+  }
+
+  &__footer {
+    color: var(--color-placeholder-text-onlight);
+    font-size: 0.75rem;
+    font-style: italic;
+  }
+
+  &__triangle {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 22px;
+    height: 22px;
+  }
+
+  &__error-text {
+    color: var(--color-notification-status-error);
+    line-height: 1.875rem;
+    font-size: fonts.$font-size-sm;
+    margin-top: 0.75rem;
+  }
+}

package/components/StickyNote/styles.module.scss.d.ts

@@ -0,0 +1,19 @@
+export type Styles = {
+  'sticky-note': string;
+  'sticky-note__error-text': string;
+  'sticky-note__footer': string;
+  'sticky-note__header': string;
+  'sticky-note__header__timestamp': string;
+  'sticky-note__textarea': string;
+  'sticky-note__triangle': string;
+  'sticky-note__x-button': string;
+  'sticky-note--error': string;
+  'sticky-note--focused': string;
+  'sticky-note--hovered': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/Tabs/TabList/TabChevron.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface TabChevronProps {
+    direction: 'left' | 'right';
+    onClick: () => void;
+    backgroundColor?: string;
+    ariaLabel?: string;
+}
+declare const TabChevron: React.FC<TabChevronProps>;
+export default TabChevron;

package/components/Tabs/TabList/TabList.d.ts

@@ -6,6 +6,8 @@ interface TabListProps {
     selectedTab: number;
     color: TabsColors;
     onColor: TabsOnColor;
+    ariaLabelRightButton?: string;
+    ariaLabelLeftButton?: string;
 }
 declare const TabList: React.FC<TabListProps>;
 export default TabList;

package/components/Tabs/TabList/styles.module.scss

@@ -108,22 +108,46 @@
     }
   }
 
-  &__fade-start,
-  &__fade-end {
+  &__end-wrapper,
+  &__start-wrapper {
+    display: flex;
     position: absolute;
     top: 0;
+    z-index: 10;
+  }
+
+  &__start-wrapper {
+    left: 0;
+  }
+
+  &__end-wrapper {
+    right: 0;
+  }
+
+  &__button {
+    border: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+
+    &:focus-visible {
+      outline: 4px solid var(--color-action-border-onlight-focus);
+      outline-offset: -4px;
+    }
+  }
+
+  &__fade-start,
+  &__fade-end {
     width: 15px;
     height: 47px;
-    z-index: 10;
+    pointer-events: none;
   }
 
   &__fade-start {
-    left: 0;
     mask-image: linear-gradient(to right, #000f, #0000);
   }
 
   &__fade-end {
-    right: 0;
     mask-image: linear-gradient(to left, #000f, #0000);
   }
 

package/components/Tabs/TabList/styles.module.scss.d.ts

@@ -1,8 +1,11 @@
 export type Styles = {
   'tab-list': string;
   'tab-list__border': string;
+  'tab-list__button': string;
+  'tab-list__end-wrapper': string;
   'tab-list__fade-end': string;
   'tab-list__fade-start': string;
+  'tab-list__start-wrapper': string;
   'tab-list__tab': string;
   'tab-list__tab__title-and-icon': string;
   'tab-list__tab--blueberry': string;

package/components/Tabs/TabPanel/styles.module.scss

@@ -9,7 +9,7 @@
   $tab-panel: &;
   $colors: 'blueberry', 'neutral', 'white';
 
-  padding: getSpacer(xl) getSpacer(l) getSpacer(2xl);
+  padding: getSpacer(l) getSpacer(s) getSpacer(xl);
   width: 100%;
   border-bottom: 1px solid var(--color-action-border-onlight-focus);
 
@@ -23,7 +23,7 @@
     border-radius: 0 0 0.5rem 0.5rem;
     border: 1px solid var(--color-action-border-onlight-focus);
     border-top: 0;
-    padding: getSpacer(2xl) getSpacer(l) getSpacer(3xl);
+    padding: getSpacer(xl) getSpacer(m) getSpacer(2xl);
 
     &#{$tab-panel}--first {
       border-radius: 0;

package/components/Tabs/Tabs.d.ts

@@ -23,6 +23,10 @@ export interface TabsProps {
     touchBehaviour?: TabsTouchBehaviour;
     /** Sets the data-testid attribute. */
     testId?: string;
+    /** Sets aria label on the "scroll to the right" button in TabList */
+    ariaLabelRightButton?: string;
+    /** Sets aria label on the "scroll to the left" button in TabList */
+    ariaLabelLeftButton?: string;
 }
 declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {

package/components/Tabs/index.js

@@ -13,7 +13,9 @@ const TabsRoot = ({
   containerBreakout = true,
   onColor = "onwhite",
   sticky = true,
-  testId
+  testId,
+  ariaLabelRightButton,
+  ariaLabelLeftButton
 }) => {
   const isControlled = activeTab !== void 0;
   const [uncontrolledValue, setUncontrolledValue] = useState(0);
@@ -39,7 +41,18 @@ const TabsRoot = ({
           [styles["tab-list-wrapper--sticky"]]: sticky
         }),
         children: [
-          /* @__PURE__ */ jsx(TabList, { onTabListClick: (index) => onValueChange(index), selectedTab: activeTabIndex, color, onColor: onColorUsed, children }),
+          /* @__PURE__ */ jsx(
+            TabList,
+            {
+              onTabListClick: (index) => onValueChange(index),
+              selectedTab: activeTabIndex,
+              color,
+              onColor: onColorUsed,
+              ariaLabelLeftButton,
+              ariaLabelRightButton,
+              children
+            }
+          ),
           /* @__PURE__ */ jsx("div", { className: classNames(styles["panel-wrapper"], styles[`panel-wrapper--${color}`]) })
         ]
       }

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList onTabListClick={(index: number) => onValueChange(index)} selectedTab={activeTabIndex} color={color} onColor={onColorUsed}>\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAqCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA,oBAAC,SAAQ,EAAA,gBAAgB,CAAC,UAAkB,cAAc,KAAK,GAAG,aAAa,gBAAgB,OAAc,SAAS,aACnH,SACH,CAAA;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport designsystemlayout from '../../scss/layout.module.scss';\nimport { PaletteNames } from '../../theme/palette';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets wether the component should use the container-breakout class. Default: true */\n  containerBreakout?: boolean;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets aria label on the \"scroll to the right\" button in TabList */\n  ariaLabelRightButton?: string;\n  /** Sets aria label on the \"scroll to the left\" button in TabList */\n  ariaLabelLeftButton?: string;\n}\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  containerBreakout = true,\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  ariaLabelRightButton,\n  ariaLabelLeftButton,\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n    }\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  return (\n    <div className={classNames(className, containerBreakout && designsystemlayout['container-breakout'])} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n          ariaLabelLeftButton={ariaLabelLeftButton}\n          ariaLabelRightButton={ariaLabelRightButton}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":[],"mappings":";;;;;;;AAyCA,MAAM,WAAgC,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAe,cAAc;AACnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS,CAAC;AACtD,QAAA,UAAU,OAAuB,IAAI;AACrC,QAAA,cAAc,OAAuB,IAAI;AACzC,QAAA,aAAa,OAAuB,IAAI;AAE9C,MAAI,cAA2B;AAC/B,MAAI,UAAU,SAAS;AACP,kBAAA;AAAA,EAAA;AAGV,QAAA,gBAAgB,CAAC,aAA2B;AAChD,QAAI,CAAC,cAAc;AACjB,2BAAqB,QAAQ;AAAA,IAAA;AAAA,EAEjC;AAEM,QAAA,iBAAiB,eAAe,YAAY;AAGhD,SAAA,qBAAC,OAAI,EAAA,WAAW,WAAW,WAAW,qBAAqB,mBAAmB,oBAAoB,CAAC,GAAG,eAAa,QACjH,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAW,WAAW,OAAO,kBAAkB,GAAG;AAAA,UAChD,CAAC,OAAO,0BAA0B,CAAC,GAAG;AAAA,QAAA,CACvC;AAAA,QAED,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,gBAAgB,CAAC,UAAkB,cAAc,KAAK;AAAA,cACtD,aAAa;AAAA,cACb;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cAEC;AAAA,YAAA;AAAA,UACH;AAAA,UACC,oBAAA,OAAA,EAAI,WAAW,WAAW,OAAO,eAAe,GAAG,OAAO,kBAAkB,KAAK,EAAE,CAAC,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1F;AAAA,IACA,oBAAC,OAAI,EAAA,KAAK,SAAS,OAAO,EAAE,WAAW,QAAA,GACrC,UAAA,oBAAC,UAAS,EAAA,KAAK,aAAa,OAAc,SAAS,kBAAkB,GAClE,UAAM,MAAA,SAAS,QAAQ,QAAQ,EAAE,cAAc,EAClD,CAAA,EACF,CAAA;AAAA,EAAA,GACF;AAEJ;AAKA,MAAM,OAAO;AACb,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,IAAI,cAAc;"}

package/components/Validation/index.js

@@ -34,7 +34,8 @@ const ValidationSummary = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "alert",
+      role: "status",
+      "aria-atomic": "true",
       "aria-live": "polite",
       "aria-relevant": "all",
       "aria-labelledby": hasErrors && props.errorTitle ? titleId : void 0,