@helsenorge/designsystem-react 16.0.0 → 16.2.0

package/lib/UNSAFE_TableRow.js

@@ -0,0 +1,130 @@
+import { usePseudoClasses } from "./hooks/usePseudoClasses.js";
+import { t as Icon_default } from "./Icon.js";
+import { t as Button_default } from "./Button.js";
+import ChevronDown from "./components/Icons/ChevronDown.js";
+import ChevronUp from "./components/Icons/ChevronUp.js";
+import { i as TableSizes, r as TableColors, t as ResponsiveTableVariant } from "./constants3.js";
+import { n as TableContext, t as CellHeadingContext } from "./TableContext.js";
+import { t as UNSAFE_TableCell } from "./UNSAFE_TableCell.js";
+import { t as UNSAFE_TableDetail } from "./UNSAFE_TableDetail.js";
+import { t as UNSAFE_TableExpandedRow } from "./UNSAFE_TableExpandedRow.js";
+import classNames from "classnames";
+import React, { useContext } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styles from "./components/UNSAFE_Table/styles.module.scss";
+//#region src/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.tsx
+var UNSAFE_TableExpanderCellMobile = ({ expanded, onClick, expandableRowId }) => {
+	const { size, resources } = useContext(TableContext);
+	const cellClass = classNames(styles.table__cell, styles["table__expander-cell-mobile"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	return /* @__PURE__ */ jsx("td", {
+		className: cellClass,
+		children: /* @__PURE__ */ jsxs(Button_default, {
+			"aria-expanded": expanded,
+			"aria-controls": expandableRowId,
+			variant: "borderless",
+			onClick,
+			wrapperClassName: styles["table__expander-trigger"],
+			className: styles["table__expander-trigger__content"],
+			children: [
+				/* @__PURE__ */ jsx(Icon_default, { svgIcon: expanded ? ChevronUp : ChevronDown }),
+				" ",
+				expanded ? resources.collapseRowButton : resources.expandRowButton
+			]
+		})
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.tsx
+var UNSAFE_TablePopMenuCell = ({ children }) => {
+	const { variant, size } = useContext(TableContext);
+	const cellClass = classNames(styles["table__cell"], styles["table__cell-pop-menu"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	const { labelText, openButtonAriaLabel, closeButtonAriaLabel } = children.props;
+	const hideLabelText = labelText !== void 0 && variant !== ResponsiveTableVariant.stack;
+	return /* @__PURE__ */ jsx("td", {
+		className: cellClass,
+		children: React.cloneElement(children, {
+			popMenuClassName: classNames(styles["table__pop-menu"], children.props.popMenuClassName),
+			triggerClassName: classNames(styles["table__pop-menu__trigger"], children.props.triggerClassName),
+			triggerContentClassName: classNames(styles["table__pop-menu__content"], children.props.triggerContentClassName),
+			...hideLabelText && {
+				labelText: void 0,
+				openButtonAriaLabel: openButtonAriaLabel ?? labelText,
+				closeButtonAriaLabel: closeButtonAriaLabel ?? labelText
+			}
+		})
+	});
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.tsx
+var UNSAFE_TableRow = ({ expandedContent, expanded, expandableRowId, onClick, className, children, popMenu, ...rest }) => {
+	const { color, size, hiddenColumns, headingTexts, variant, resources } = useContext(TableContext);
+	const expandable = expandedContent ? true : hiddenColumns.length > 0 ? "stack" : void 0;
+	const isExpandedVisible = !!expanded && (expandable !== "stack" || variant === ResponsiveTableVariant.stack);
+	const { refObject, isHovered, isActive } = usePseudoClasses();
+	const tableRowClass = classNames(styles["table__row"], {
+		[styles["table__row--transparent"]]: color === TableColors.transparent,
+		[styles["table__row--expandable"]]: expandable,
+		[styles["table__row--expanded"]]: isExpandedVisible
+	}, className);
+	const expanderCellClass = classNames(styles["table__cell"], styles["table__cell-expander"], { [styles["table__cell--compact"]]: size === TableSizes.compact });
+	const indexOffset = expandable === true ? 1 : 0;
+	const isHidden = (index) => hiddenColumns.includes(index + indexOffset);
+	const withHeading = (child, index) => React.isValidElement(child) && child.type === UNSAFE_TableCell ? /* @__PURE__ */ jsx(CellHeadingContext.Provider, {
+		value: headingTexts[index + indexOffset] ?? "",
+		children: child
+	}, child.key) : child;
+	const childArray = React.Children.toArray(children);
+	const cells = childArray.map((child, index) => withHeading(React.isValidElement(child) && isHidden(index) ? React.cloneElement(child, { className: classNames(child.props.className, styles["table__cell--behind-expander"]) }) : child, index));
+	const hiddenCells = childArray.flatMap((child, index) => React.isValidElement(child) && isHidden(index) ? [{
+		cell: child,
+		heading: headingTexts[index + indexOffset] ?? ""
+	}] : []);
+	const row = /* @__PURE__ */ jsxs("tr", {
+		className: tableRowClass,
+		...rest,
+		ref: refObject,
+		children: [
+			expandable === true && /* @__PURE__ */ jsx("td", {
+				className: expanderCellClass,
+				children: /* @__PURE__ */ jsx(Button_default, {
+					variant: "borderless",
+					wrapperClassName: styles["table__expander-button"],
+					className: styles["table__expander-button__content"],
+					"aria-expanded": expanded,
+					"aria-controls": expandableRowId,
+					ariaLabel: expanded ? resources.collapseRowButton : resources.expandRowButton,
+					onClick,
+					children: /* @__PURE__ */ jsx(Icon_default, {
+						color: isActive ? "var(--color-action-graphics-dark-active)" : isHovered ? "var(--color-action-graphics-dark-hover)" : "var(--color-action-graphics-dark-normal)",
+						svgIcon: expanded ? ChevronUp : ChevronDown
+					})
+				})
+			}),
+			cells,
+			popMenu && /* @__PURE__ */ jsx(UNSAFE_TablePopMenuCell, { children: popMenu }),
+			expandable && /* @__PURE__ */ jsx(UNSAFE_TableExpanderCellMobile, {
+				expanded,
+				onClick,
+				expandableRowId
+			})
+		]
+	}, "row");
+	if (!(!!expandable && (!!expandedContent || hiddenCells.length > 0))) return row;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [row, /* @__PURE__ */ jsxs(UNSAFE_TableExpandedRow, {
+		stackOnly: !expandedContent,
+		id: expandableRowId,
+		expanded: !!expanded,
+		toggleClick: () => onClick?.(),
+		children: [hiddenCells.map(({ cell, heading }, index) => /* @__PURE__ */ jsx(UNSAFE_TableDetail, {
+			headingText: heading,
+			children: cell.props.children
+		}, cell.key ?? index)), expandedContent]
+	}, "expanded-row")] });
+};
+//#endregion
+//#region src/components/UNSAFE_Table/UNSAFE_TableRow/index.ts
+var UNSAFE_TableRow_default = UNSAFE_TableRow;
+//#endregion
+export { UNSAFE_TableRow as n, UNSAFE_TableRow_default as t };
+
+//# sourceMappingURL=UNSAFE_TableRow.js.map

package/lib/UNSAFE_TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_TableRow.js","names":[],"sources":["../src/components/UNSAFE_Table/UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile.tsx","../src/components/UNSAFE_Table/UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell.tsx","../src/components/UNSAFE_Table/UNSAFE_TableRow/UNSAFE_TableRow.tsx","../src/components/UNSAFE_Table/UNSAFE_TableRow/index.ts"],"sourcesContent":["import { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { Props } from '../UNSAFE_TableRow/UNSAFE_TableRow';\n\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\ntype UNSAFE_TableExpanderCellMobileProps = Pick<Props, 'expanded' | 'onClick' | 'expandableRowId'>;\n\nconst UNSAFE_TableExpanderCellMobile: React.FC<UNSAFE_TableExpanderCellMobileProps> = ({ expanded, onClick, expandableRowId }) => {\n  const { size, resources } = useContext(TableContext);\n  const cellClass = classNames(styles.table__cell, styles['table__expander-cell-mobile'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        variant=\"borderless\"\n        onClick={onClick}\n        wrapperClassName={styles['table__expander-trigger']}\n        className={styles['table__expander-trigger__content']}\n      >\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? resources.collapseRowButton : resources.expandRowButton}\n      </Button>\n    </td>\n  );\n};\n\nexport default UNSAFE_TableExpanderCellMobile;\n","import React, { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PopMenuProps } from '../../PopMenu';\n\nimport { ResponsiveTableVariant, TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { TableContext } from '../TableContext';\n\nexport interface UNSAFE_TablePopMenuCellProps {\n  /** PopMenu shown inside the cell. Fills the entire cell. */\n  children: React.ReactElement<PopMenuProps>;\n}\n\nconst UNSAFE_TablePopMenuCell: React.FC<UNSAFE_TablePopMenuCellProps> = ({ children }) => {\n  const { variant, size } = useContext(TableContext);\n  const cellClass = classNames(styles['table__cell'], styles['table__cell-pop-menu'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  const { labelText, openButtonAriaLabel, closeButtonAriaLabel } = children.props;\n  // Kun stack-varianten har plass til synlig ledetekst; ellers blir den skjult tekst for skjermlesere\n  const hideLabelText = labelText !== undefined && variant !== ResponsiveTableVariant.stack;\n\n  return (\n    <td className={cellClass}>\n      {React.cloneElement(children, {\n        popMenuClassName: classNames(styles['table__pop-menu'], children.props.popMenuClassName),\n        triggerClassName: classNames(styles['table__pop-menu__trigger'], children.props.triggerClassName),\n        triggerContentClassName: classNames(styles['table__pop-menu__content'], children.props.triggerContentClassName),\n        ...(hideLabelText && {\n          labelText: undefined,\n          openButtonAriaLabel: openButtonAriaLabel ?? labelText,\n          closeButtonAriaLabel: closeButtonAriaLabel ?? labelText,\n        }),\n      })}\n    </td>\n  );\n};\n\nexport default UNSAFE_TablePopMenuCell;\n","import React, { useContext } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PopMenuProps } from '../../PopMenu';\nimport type { Props as TableCellProps } from '../UNSAFE_TableCell/UNSAFE_TableCell';\n\nimport { usePseudoClasses } from '../../../hooks/usePseudoClasses';\nimport Button from '../../Button';\nimport Icon from '../../Icon';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { ResponsiveTableVariant, TableColors, TableSizes } from '../constants';\nimport styles from '../styles.module.scss';\nimport { CellHeadingContext, TableContext } from '../TableContext';\nimport UNSAFE_TableCell from '../UNSAFE_TableCell/UNSAFE_TableCell';\nimport UNSAFE_TableDetail from '../UNSAFE_TableDetail/UNSAFE_TableDetail';\nimport UNSAFE_TableExpandedRow from '../UNSAFE_TableExpandedRow/UNSAFE_TableExpandedRow';\nimport UNSAFE_TableExpanderCellMobile from '../UNSAFE_TableExpanderCell/UNSAFE_TableExpanderCellMobile';\nimport UNSAFE_TablePopMenuCell from '../UNSAFE_TablePopMenuCell/UNSAFE_TablePopMenuCell';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Content to be rendered in an expandable row. Make sure to add an empty TableHeadCell to the beginning of the Table. This content renders below the column content with hideBehindExpander set in the stack variant. */\n  expandedContent?: React.ReactNode;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** Id of the expanded row this row controls. For use with aria-controls on the expander button. */\n  expandableRowId?: string;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** PopMenu rendered in an extra cell as the last cell in the row. Fills the entire cell. Outside the stack variant labelText is hidden and used as aria-label instead. */\n  popMenu?: React.ReactElement<PopMenuProps>;\n}\n\nexport const UNSAFE_TableRow: React.FC<Props> = ({\n  expandedContent,\n  expanded,\n  expandableRowId,\n  onClick,\n  className,\n  children,\n  popMenu,\n  ...rest\n}) => {\n  const { color, size, hiddenColumns, headingTexts, variant, resources } = useContext(TableContext);\n  const expandable = expandedContent ? true : hiddenColumns.length > 0 ? 'stack' : undefined;\n  const isExpandedVisible = !!expanded && (expandable !== 'stack' || variant === ResponsiveTableVariant.stack);\n  const { refObject, isHovered, isActive } = usePseudoClasses<HTMLTableRowElement>();\n  const tableRowClass = classNames(\n    styles['table__row'],\n    {\n      [styles['table__row--transparent']]: color === TableColors.transparent,\n      [styles['table__row--expandable']]: expandable,\n      [styles['table__row--expanded']]: isExpandedVisible,\n    },\n    className\n  );\n\n  const expanderCellClass = classNames(styles['table__cell'], styles['table__cell-expander'], {\n    [styles['table__cell--compact']]: size === TableSizes.compact,\n  });\n\n  // Tar hensyn til en hidden expander cell for visning i normal variant\n  const indexOffset = expandable === true ? 1 : 0;\n  const isHidden = (index: number): boolean => hiddenColumns.includes(index + indexOffset);\n\n  // Gir hver celle teksten fra kolonnens headText, som vises foran innholdet i stack-varianten\n  const withHeading = (child: React.ReactNode, index: number): React.ReactNode =>\n    React.isValidElement(child) && child.type === UNSAFE_TableCell ? (\n      <CellHeadingContext.Provider key={child.key} value={headingTexts[index + indexOffset] ?? ''}>\n        {child}\n      </CellHeadingContext.Provider>\n    ) : (\n      child\n    );\n\n  const childArray = React.Children.toArray(children);\n  const cells = childArray.map((child, index) =>\n    withHeading(\n      React.isValidElement<TableCellProps>(child) && isHidden(index)\n        ? React.cloneElement(child, { className: classNames(child.props.className, styles['table__cell--behind-expander']) })\n        : child,\n      index\n    )\n  );\n  const hiddenCells = childArray.flatMap((child, index) =>\n    React.isValidElement<TableCellProps>(child) && isHidden(index)\n      ? [{ cell: child, heading: headingTexts[index + indexOffset] ?? '' }]\n      : []\n  );\n\n  const row = (\n    <tr key=\"row\" className={tableRowClass} {...rest} ref={refObject}>\n      {expandable === true && (\n        <td className={expanderCellClass}>\n          <Button\n            variant=\"borderless\"\n            wrapperClassName={styles['table__expander-button']}\n            className={styles['table__expander-button__content']}\n            aria-expanded={expanded}\n            aria-controls={expandableRowId}\n            ariaLabel={expanded ? resources.collapseRowButton : resources.expandRowButton}\n            onClick={onClick}\n          >\n            <Icon\n              color={\n                isActive\n                  ? 'var(--color-action-graphics-dark-active)'\n                  : isHovered\n                    ? 'var(--color-action-graphics-dark-hover)'\n                    : 'var(--color-action-graphics-dark-normal)'\n              }\n              svgIcon={expanded ? ChevronUp : ChevronDown}\n            />\n          </Button>\n        </td>\n      )}\n      {cells}\n      {popMenu && <UNSAFE_TablePopMenuCell>{popMenu}</UNSAFE_TablePopMenuCell>}\n      {expandable && <UNSAFE_TableExpanderCellMobile expanded={expanded} onClick={onClick} expandableRowId={expandableRowId} />}\n    </tr>\n  );\n\n  const hasAutomaticExpandedRow = !!expandable && (!!expandedContent || hiddenCells.length > 0);\n  if (!hasAutomaticExpandedRow) {\n    return row;\n  }\n\n  return (\n    <>\n      {row}\n      <UNSAFE_TableExpandedRow\n        key=\"expanded-row\"\n        stackOnly={!expandedContent}\n        id={expandableRowId}\n        expanded={!!expanded}\n        toggleClick={(): void => onClick?.()}\n      >\n        {hiddenCells.map(({ cell, heading }, index) => (\n          <UNSAFE_TableDetail key={cell.key ?? index} headingText={heading}>\n            {cell.props.children}\n          </UNSAFE_TableDetail>\n        ))}\n        {expandedContent}\n      </UNSAFE_TableExpandedRow>\n    </>\n  );\n};\n\nexport default UNSAFE_TableRow;\n","import UNSAFE_TableRow from './UNSAFE_TableRow';\nexport * from './UNSAFE_TableRow';\nexport default UNSAFE_TableRow;\n"],"mappings":"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"}

package/lib/__mocks__/ResizeObserver.js

@@ -4,7 +4,10 @@ var ResizeObserver = class {
 	unobserve() {}
 	disconnect() {}
 };
-Object.defineProperty(window, "ResizeObserver", { value: ResizeObserver });
+Object.defineProperty(window, "ResizeObserver", {
+	value: ResizeObserver,
+	configurable: true
+});
 //#endregion
 export { ResizeObserver as default };
 

package/lib/__mocks__/ResizeObserver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResizeObserver.js","names":[],"sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n});\n\nexport default ResizeObserver;\n"],"mappings":";AAAA,IAAM,iBAAN,MAAqB;CACnB,UAAgB,CAEhB;CACA,YAAkB,CAElB;CACA,aAAmB,CAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,kBAAkB,EAC9C,OAAO,eACT,CAAC"}
+{"version":3,"file":"ResizeObserver.js","names":[],"sources":["../../src/__mocks__/ResizeObserver.ts"],"sourcesContent":["class ResizeObserver {\n  observe(): void {\n    // do nothing\n  }\n  unobserve(): void {\n    // do nothing\n  }\n  disconnect(): void {\n    // do nothing\n  }\n}\n\nObject.defineProperty(window, 'ResizeObserver', {\n  value: ResizeObserver,\n  configurable: true,\n});\n\nexport default ResizeObserver;\n"],"mappings":";AAAA,IAAM,iBAAN,MAAqB;CACnB,UAAgB,CAEhB;CACA,YAAkB,CAElB;CACA,aAAmB,CAEnB;AACF;AAEA,OAAO,eAAe,QAAQ,kBAAkB;CAC9C,OAAO;CACP,cAAc;AAChB,CAAC"}

package/lib/components/Button/Button.d.ts

@@ -5,7 +5,7 @@ export type ButtonVariant = 'fill' | 'outline' | 'borderless';
 export type ButtonSize = 'normal' | 'large';
 export type ButtonOnColor = 'onlight' | 'ondark';
 export type ButtonTags = 'button' | 'a';
-export type ButtonArrows = 'icon' | 'accessibility-character';
+export type ButtonArrows = 'icon' | 'inline-accessible-right' | 'inline-accessible-up' | 'inline-accessible-down' | 'accessibility-character';
 export type ButtonTextPosition = 'left' | 'centered';
 export interface ButtonProps extends Omit<HTMLButtonProps, 'onClick' | 'type'>, Omit<HTMLAnchorProps, 'onClick'>, AriaAttributes {
     /** Sets the aria-label of the button, use when the button only includes an icon */

package/lib/components/Button/styles.module.scss

@@ -463,10 +463,6 @@ $with-icons: // icon-class, size-class, padding-left, padding-right, padding-lef
     }
   }
 
-  &__right-unicode-arrow {
-    white-space: pre;
-  }
-
   /* stylelint-disable-next-line */
   &--outline &__text,
   &--borderless &__text {

package/lib/components/Button/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/Checkbox/styles.module.scss

@@ -4,6 +4,7 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/screen-reader' as *;
 @use '../../scss/breakpoints' as breakpoints;
+@use '../Label/styles.module' as label;
 
 $padding-clickable-area-top-bottom: 7px;
 $padding-clickable-area-left: 8px;
@@ -131,6 +132,10 @@ $padding-clickable-area-left: 8px;
       }
     }
 
+    &--checked:not(#{&}--on-invalid, #{&}--disabled) {
+      @include label.on-dark-tokens;
+    }
+
     &--checked#{&}--focus {
       color: palette.$blueberry900;
       background-color: palette.$blueberry500;
@@ -194,11 +199,6 @@ $padding-clickable-area-left: 8px;
   }
 }
 
-.checkbox-sublabel-wrapper {
-  margin-top: -$padding-clickable-area-top-bottom;
-  padding-left: calc(2.8rem + $padding-clickable-area-left);
-}
-
 .checkbox-afterlabelchildren-wrapper {
   padding-top: $padding-clickable-area-top-bottom;
 }

package/lib/components/Checkbox/styles.module.scss.d.ts

@@ -1,4 +1,5 @@
 export type Styles = {
+  'after-label-children': string;
   checkbox: string;
   'checkbox__marker-wrapper': string;
   'checkbox-afterlabelchildren-wrapper': string;
@@ -21,9 +22,19 @@ export type Styles = {
   'checkbox-label--disabled': string;
   'checkbox-label--large': string;
   'checkbox-label--on-dark': string;
-  'checkbox-sublabel-wrapper': string;
   'checkbox-wrapper': string;
   'checkbox-wrapper--large': string;
+  label: string;
+  label__texts: string;
+  'label--on-dark': string;
+  'label--subdued': string;
+  'label-content-wrapper': string;
+  'label-wrapper': string;
+  'label-wrapper--after-label-children': string;
+  'label-wrapper--no-bottom-margin': string;
+  sublabel: string;
+  'sublabel--on-dark': string;
+  'sublabel--subdued': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Drawer/DrawerHeaderContent.module.scss

@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
 
 .header-content {
@@ -18,7 +19,15 @@
     align-self: flex-start;
     align-items: center;
     justify-content: flex-start;
-    margin-top: 0.5rem;
+    margin: var(--core-space-2xs) 0 0 var(--core-space-3xs);
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+      margin-left: var(--core-space-2xs);
+    }
+
+    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+      margin-left: var(--core-space-xs);
+    }
 
     &--centered {
       position: relative;

package/lib/components/Drawer/styles.module.scss

@@ -81,10 +81,14 @@
     }
 
     &--padding-extra {
-      padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-xs) var(--core-space-s);
+      padding: var(--core-space-xs) var(--core-space-4xs) var(--core-space-xs) var(--core-space-4xs);
+
+      @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+        padding: var(--core-space-2xs);
+      }
 
       @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
-        padding: var(--core-space-xs) var(--core-space-xs) var(--core-space-xs) var(--core-space-m);
+        padding: var(--core-space-xs);
       }
     }
 

package/lib/components/Duolist/styles.module.scss

@@ -117,13 +117,9 @@
     }
   }
 
-  &--no-padding#{&}--collapsed,
-  &--no-padding#{&}--not-collapsed {
-    dt,
-    dd {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
+  &--no-padding {
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   &--non-formatted {

package/lib/components/Expander/styles.module.scss.d.ts

@@ -6,7 +6,6 @@ export type Styles = {
   'button__left-icon': string;
   'button__only-icon': string;
   'button__right-icon': string;
-  'button__right-unicode-arrow': string;
   button__text: string;
   'button__text--centered': string;
   'button__text--ellipsis': string;

package/lib/components/ExpanderHierarchy/index.js

@@ -69,6 +69,7 @@ var Expander = ({ title, htmlMarkup = "h2", level = 1, print, expanded = false,
 			children: title
 		}), /* @__PURE__ */ jsx("div", {
 			className: contentClasses,
+			"data-overflow-boundary": true,
 			children: React.Children.map(children, (child) => isComponent(child, ExpanderHierarchy) ? React.cloneElement(child, {
 				htmlMarkup: getHeadingTag(htmlMarkup),
 				level: level + 1,

package/lib/components/ExpanderHierarchy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement | null>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses}>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,iBAAoC;CACrE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAEhE,MAAM,oBAA0B;EAC9B,cAAc,CAAC,UAAU;CAC3B;CAEA,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,0BAClB;CAEA,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,yBAClB;CAEA,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,8BACtB;CAEA,OACE,oBAAC,WAAD;EAAW,WAAW;EACpB,UAAA,qBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;GAPhC,UAAA,CASG,UACD,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;GAAS,CAAA,CACrH;;CACC,CAAA;AAEf;;;AChEA,IAAa,iBAAiB,eAA0C;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;ACeA,IAAM,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,iCACtB;CAEA,OACE,qBAAC,MAAD;EAAI,WAAW,WAAW,OAAO,UAAU,SAAS;EAAQ;EAA5D,UAAA,CACE,oBAAC,gBAAD;GAA4B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;GACjH,UAAA;EACa,CAAA,GAChB,oBAAC,OAAD;GAAK,WAAW;GACb,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,iBAAiB,IACxD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,UAAU;IAAG,OAAO,QAAQ;IAAG;GAAM,CAAC,IAC5F,KACN;EACG,CAAA,CACH;;AAER;;;AChCA,IAAM,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;CAC5B,MAAM,cAAc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,iCACtB;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EAC5E,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,QAAQ,IAAI,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;EAAM,CAAC,IAAI,KAC1G;CACE,CAAA;AAER;AAEA,kBAAkB,WAAW;;;ACnD7B,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderHierarchy/ExpanderButton.tsx","../../../src/components/ExpanderHierarchy/utils.ts","../../../src/components/ExpanderHierarchy/Expander.tsx","../../../src/components/ExpanderHierarchy/ExpanderHierarchy.tsx","../../../src/components/ExpanderHierarchy/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps } from '../ExpanderHierarchy';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport Icon, { IconSize } from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\n\nimport styles from './expander.module.scss';\n\ninterface ExpanderButtonProps extends ExpanderHierarchyCommonProps {\n  expanded: boolean;\n  onExpand?: (isExpanded: boolean) => void;\n  children: string;\n  testId?: string;\n}\n\nconst ExpanderButton: React.FC<ExpanderButtonProps> = ({ htmlMarkup = 'h2', level = 1, print, expanded, onExpand, children, testId }) => {\n  const { refObject, isHovered } = usePseudoClasses<HTMLButtonElement>();\n  const [isExpanded, setIsExpanded] = useExpand(expanded, onExpand);\n\n  const handleClick = (): void => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const CustomTag = htmlMarkup;\n\n  const buttonClasses = classNames(\n    styles.expander__button,\n    level > 1 && styles[`expander__button--2-and-lower`],\n    print && styles['expander__button--print']\n  );\n\n  const titleClasses = classNames(\n    styles.expander__title,\n    (level === 1 || level === 2 || level === 3) && styles[`expander__title--${level}`],\n    level > 3 && styles[`expander__title--4-and-lower`],\n    isExpanded && styles['expander__title--expanded'],\n    print && styles['expander__title--print']\n  );\n\n  const iconClasses = classNames(\n    styles.expander__icon,\n    level > 1 && styles[`expander__icon--2-and-lower`],\n    level > 2 && styles[`expander__icon--3-and-lower`]\n  );\n\n  return (\n    <CustomTag className={titleClasses}>\n      <button\n        type=\"button\"\n        onClick={handleClick}\n        className={buttonClasses}\n        aria-expanded={isExpanded}\n        ref={refObject}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.ExpanderHierarchyExpander}\n      >\n        {children}\n        <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} isHovered={isHovered} className={iconClasses} size={IconSize.XSmall} />\n      </button>\n    </CustomTag>\n  );\n};\n\nexport default ExpanderButton;\n","export type HeadingTags = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport const getHeadingTag = (htmlMarkup?: HeadingTags): HeadingTags => {\n  switch (htmlMarkup) {\n    case 'h2':\n      return 'h3';\n    case 'h3':\n      return 'h4';\n    case 'h4':\n      return 'h5';\n    case 'h5':\n      return 'h6';\n    case 'h6':\n      return 'h6';\n    default:\n      return 'h2';\n  }\n};\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderHierarchyCommonProps, ExpanderHierarchyProps } from './ExpanderHierarchy';\n\nimport ExpanderButton from './ExpanderButton';\nimport ExpanderHierarchy from './ExpanderHierarchy';\nimport { getHeadingTag } from './utils';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './expander.module.scss';\n\nexport interface ExpanderProps extends ExpanderHierarchyCommonProps {\n  /** Sets the trigger title */\n  title: string;\n  /** Opens or closes the expander */\n  expanded?: boolean;\n  /** Called when expander is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Sets the expanded content */\n  children?: React.ReactNode;\n  /** Sets the data-testid attribute on the expander button. */\n  testId?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** ref that is placed on the li element */\n  ref?: React.RefObject<HTMLLIElement | null>;\n}\n\nexport type ExpanderType = typeof Expander;\n\nconst Expander: React.FC<ExpanderProps> = ({\n  title,\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  expanded = false,\n  onExpand,\n  children,\n  testId,\n  className,\n  ref,\n}: ExpanderProps) => {\n  const contentClasses = classNames(\n    styles.expander__content,\n    (level === 1 || level === 2) && styles[`expander__content--${level}`],\n    level > 2 && styles[`expander__content--3-and-lower`]\n  );\n\n  return (\n    <li className={classNames(styles.expander, className)} ref={ref}>\n      <ExpanderButton htmlMarkup={htmlMarkup} level={level} print={print} expanded={expanded} onExpand={onExpand} testId={testId}>\n        {title}\n      </ExpanderButton>\n      <div className={contentClasses} data-overflow-boundary>\n        {React.Children.map(children, child =>\n          isComponent<ExpanderHierarchyProps>(child, ExpanderHierarchy)\n            ? React.cloneElement(child, { htmlMarkup: getHeadingTag(htmlMarkup), level: level + 1, print })\n            : child\n        )}\n      </div>\n    </li>\n  );\n};\n\nexport default Expander;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport type { ExpanderProps, ExpanderType } from './Expander';\nimport type { HeadingTags } from './utils';\n\nimport Expander from './Expander';\nimport { AnalyticsId } from '../../constants';\nimport { isComponent } from '../../utils/component';\n\nimport styles from './styles.module.scss';\n\nexport interface ExpanderHierarchyCommonProps {\n  /** Changes the underlying element of the expander title. Default: h2. */\n  htmlMarkup?: HeadingTags;\n  /** Expand all children when printing. */\n  print?: boolean;\n  /** Expander nesting level. Should not be set manually. */\n  level?: number;\n}\n\nexport interface ExpanderHierarchyProps extends ExpanderHierarchyCommonProps {\n  children: React.ReactNode;\n  /** Sets the data-testid attribute on the expander list. */\n  testId?: string;\n}\n\nexport interface ExpanderHierarchyCompound extends React.FC<ExpanderHierarchyProps> {\n  Expander: ExpanderType;\n}\n\nconst ExpanderHierarchy: ExpanderHierarchyCompound = ({\n  htmlMarkup = 'h2',\n  level = 1,\n  print,\n  children,\n  testId,\n}: ExpanderHierarchyProps) => {\n  const listClasses = classNames(\n    styles.expanderhierarchy,\n    level === 2 && styles[`expanderhierarchy--${level}`],\n    level > 2 && styles[`expanderhierarchy--3-and-lower`]\n  );\n\n  return (\n    <ul className={listClasses} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderHierarchy}>\n      {React.Children.map(children, child =>\n        isComponent<ExpanderProps>(child, Expander) ? React.cloneElement(child, { htmlMarkup, level, print }) : child\n      )}\n    </ul>\n  );\n};\n\nExpanderHierarchy.Expander = Expander;\n\nexport default ExpanderHierarchy;\n","import ExpanderHierarchy from './ExpanderHierarchy';\nexport * from './ExpanderHierarchy';\nexport * from './utils';\nexport default ExpanderHierarchy;\n"],"mappings":";;;;;;;;;;;;;AAoBA,IAAM,kBAAiD,EAAE,aAAa,MAAM,QAAQ,GAAG,OAAO,UAAU,UAAU,UAAU,aAAa;CACvI,MAAM,EAAE,WAAW,cAAc,iBAAoC;CACrE,MAAM,CAAC,YAAY,iBAAiB,UAAU,UAAU,QAAQ;CAEhE,MAAM,oBAA0B;EAC9B,cAAc,CAAC,UAAU;CAC3B;CAEA,MAAM,YAAY;CAElB,MAAM,gBAAgB,WACpB,OAAO,kBACP,QAAQ,KAAK,OAAO,kCACpB,SAAS,OAAO,0BAClB;CAEA,MAAM,eAAe,WACnB,OAAO,kBACN,UAAU,KAAK,UAAU,KAAK,UAAU,MAAM,OAAO,oBAAoB,UAC1E,QAAQ,KAAK,OAAO,iCACpB,cAAc,OAAO,8BACrB,SAAS,OAAO,yBAClB;CAEA,MAAM,cAAc,WAClB,OAAO,gBACP,QAAQ,KAAK,OAAO,gCACpB,QAAQ,KAAK,OAAO,8BACtB;CAEA,OACE,oBAAC,WAAD;EAAW,WAAW;EACpB,UAAA,qBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW;GACX,iBAAe;GACf,KAAK;GACL,eAAa;GACb,oBAAkB,YAAY;GAPhC,UAAA,CASG,UACD,oBAAC,cAAD;IAAM,SAAS,aAAa,YAAY;IAAwB;IAAW,WAAW;IAAa,MAAM,SAAS;GAAS,CAAA,CACrH;;CACC,CAAA;AAEf;;;AChEA,IAAa,iBAAiB,eAA0C;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,SACE,OAAO;CACX;AACF;;;ACeA,IAAM,YAAqC,EACzC,OACA,aAAa,MACb,QAAQ,GACR,OACA,WAAW,OACX,UACA,UACA,QACA,WACA,UACmB;CACnB,MAAM,iBAAiB,WACrB,OAAO,oBACN,UAAU,KAAK,UAAU,MAAM,OAAO,sBAAsB,UAC7D,QAAQ,KAAK,OAAO,iCACtB;CAEA,OACE,qBAAC,MAAD;EAAI,WAAW,WAAW,OAAO,UAAU,SAAS;EAAQ;EAA5D,UAAA,CACE,oBAAC,gBAAD;GAA4B;GAAmB;GAAc;GAAiB;GAAoB;GAAkB;GACjH,UAAA;EACa,CAAA,GAChB,oBAAC,OAAD;GAAK,WAAW;GAAgB,0BAAA;GAC7B,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAAoC,OAAO,iBAAiB,IACxD,MAAM,aAAa,OAAO;IAAE,YAAY,cAAc,UAAU;IAAG,OAAO,QAAQ;IAAG;GAAM,CAAC,IAC5F,KACN;EACG,CAAA,CACH;;AAER;;;AChCA,IAAM,qBAAgD,EACpD,aAAa,MACb,QAAQ,GACR,OACA,UACA,aAC4B;CAC5B,MAAM,cAAc,WAClB,SAAO,mBACP,UAAU,KAAK,SAAO,sBAAsB,UAC5C,QAAQ,KAAK,SAAO,iCACtB;CAEA,OACE,oBAAC,MAAD;EAAI,WAAW;EAAa,eAAa;EAAQ,oBAAkB,YAAY;EAC5E,UAAA,MAAM,SAAS,IAAI,WAAU,UAC5B,YAA2B,OAAO,QAAQ,IAAI,MAAM,aAAa,OAAO;GAAE;GAAY;GAAO;EAAM,CAAC,IAAI,KAC1G;CACE,CAAA;AAER;AAEA,kBAAkB,WAAW;;;ACnD7B,IAAA,4BAAe"}

package/lib/components/ExpanderList/index.js

@@ -56,6 +56,7 @@ var Expander = (props) => {
 		return /* @__PURE__ */ jsx("div", {
 			className: mainContentClasses,
 			"data-state": isExpanded ? "open" : "closed",
+			"data-overflow-boundary": true,
 			children: /* @__PURE__ */ jsx(Highlighter_default, {
 				searchText: highlightText,
 				children

package/lib/components/ExpanderList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderList/ExpanderList.tsx","../../../src/components/ExpanderList/index.ts"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.FC<ExpanderProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.FC<ExpanderListProps> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport type ExpanderListStatus = 'none' | 'new';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: React.ReactElement | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n    /** Ref passed to the li element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Expander: ExpanderType = (props: ExpanderProps) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n    highlightText,\n    status = 'none',\n    editMode = false,\n    ref,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'}>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <>\n      {editMode ? (\n        <div className={itemClasses}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\n          <div id={id} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderListExpander} className={expanderClasses}>\n            {renderElementHeader(title, {\n              titleHtmlMarkup,\n              isHovered: false,\n              size: large ? 'large' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: undefined,\n              icon,\n              highlightText,\n            })}\n          </div>\n        </div>\n      ) : (\n        <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\n          <button\n            type=\"button\"\n            id={id}\n            onClick={handleExpanderClick}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.ExpanderListExpander}\n            className={expanderClasses}\n            ref={triggerRef}\n            aria-expanded={isExpanded}\n            style={{\n              zIndex: isFocused ? zIndex + 1 : zIndex,\n            }}\n          >\n            {renderElementHeader(title, {\n              titleHtmlMarkup,\n              isHovered: isHovered || isFocused,\n              size: large ? 'large' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n              icon,\n              highlightText,\n            })}\n          </button>\n          {renderContent()}\n        </li>\n      )}\n    </>\n  );\n};\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nconst ExpanderListComponent: React.FC<ExpanderListProps> = (props: ExpanderListProps) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n    editMode = false,\n    ref,\n  } = props;\n  const [prevChildren, setPrevChildren] = useState(children);\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const expanderIdBase = useId();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${expanderIdBase}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  const getExpanderStateFromChildren = (): ActiveExpander | undefined => {\n    return React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n  };\n\n  if (children !== prevChildren) {\n    setPrevChildren(children);\n    const newActiveExpander = getExpanderStateFromChildren();\n    if (newActiveExpander) {\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }\n\n  if (activeExpander === undefined) {\n    const initialState = getExpanderStateFromChildren();\n    if (initialState && Object.keys(initialState).length > 0) {\n      setActiveExpander(initialState);\n    }\n  }\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n          const childProps = child.props;\n          const sharedProps = {\n            padding: childProps.padding ?? childPadding,\n            color: childProps.color ?? color,\n            large: childProps.large ?? large,\n            className: classNames(expanderListStyles['expander-list__item'], childProps.className),\n            variant: childProps.variant ?? variant,\n            zIndex: childProps.zIndex ?? zIndex,\n            highlightText: highlightTextChild,\n          };\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={childProps.onDelete}>\n                {React.cloneElement(child, {\n                  ...sharedProps,\n                  id,\n                  key: index,\n                  expanded,\n                  'aria-expanded': false,\n                  renderChildrenWhenClosed: false,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n              ...sharedProps,\n              id,\n              key: index,\n              expanded,\n              'aria-expanded': expanded,\n              handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => {\n                childProps.handleExpanderClick?.(event);\n                handleExpanderClick(event, id);\n              },\n              renderChildrenWhenClosed: childProps.renderChildrenWhenClosed ?? renderChildrenWhenClosed,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n};\n\nconst ExpanderList = ExpanderListComponent as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n","import ExpanderList from './ExpanderList';\nexport * from './ExpanderList';\nexport default ExpanderList;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/ExpanderList/ExpanderList.tsx","../../../src/components/ExpanderList/index.ts"],"sourcesContent":["import React, { useEffect, useId, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport type { PaletteNames } from '../../theme/palette';\nimport type { ElementHeaderType } from '../ElementHeader/ElementHeader';\nimport type { ListEditModeItemProps } from '../ListEditMode';\nimport type { TitleTags } from '../Title';\n\nimport { AnalyticsId } from '../../constants';\nimport { useExpand } from '../../hooks/useExpand';\nimport { usePseudoClasses } from '../../hooks/usePseudoClasses';\nimport { mergeRefs } from '../../utils/refs';\nimport { isElementInViewport } from '../../utils/viewport';\nimport { renderElementHeader } from '../ElementHeader/utils';\nimport Highlighter from '../Highlighter';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ListEditModeItem from '../ListEditMode';\nimport { listEditModeWrapperClassnames } from '../ListEditMode/constants';\n\nimport expanderListStyles from './styles.module.scss';\n\nexport type ExpanderListColors = Extract<PaletteNames, 'white' | 'blueberry' | 'cherry' | 'neutral'>;\nexport interface ExpanderType extends React.FC<ExpanderProps> {\n  ElementHeader?: ElementHeaderType;\n}\n\nexport interface ExpanderListCompound extends React.FC<ExpanderListProps> {\n  Expander: ExpanderType;\n}\n\nexport type ExpanderListVariant = 'line' | 'outline' | 'fill' | 'fill-negative';\n\nexport type ExpanderListStatus = 'none' | 'new';\n\ninterface ExpanderListProps {\n  /** Toggles accordion functionality for the expanders. */\n  accordion?: boolean;\n  /** Items in the ExpanderList */\n  children: React.ReactNode;\n  /** Toggles padding of child elements */\n  childPadding?: boolean;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Changes the colors of the list. */\n  color?: ExpanderListColors;\n  /** Changes the font size. */\n  large?: boolean;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets visual priority */\n  variant?: ExpanderListVariant;\n  /** Overrides the default z-index of the expander header */\n  zIndex?: number;\n  /** Highlights text in title and content. Used for search results */\n  highlightText?: string;\n  /**\n   * @experimental This prop is experimental and may change in the future.\n   * Enables ListEditMode\n   */\n  editMode?: boolean;\n  /** Ref passed to the ul element */\n  ref?: React.Ref<HTMLUListElement | null>;\n}\n\ntype Modify<T, R> = Omit<T, keyof R> & R;\n\ntype ExpanderProps = Modify<\n  React.HTMLAttributes<HTMLButtonElement>,\n  {\n    id?: string;\n    title: React.ReactElement | string;\n    /** Changes the underlying element of the title. Default: span*/\n    titleHtmlMarkup?: TitleTags;\n    children: React.ReactNode;\n    className?: string;\n    color?: ExpanderListColors;\n    icon?: React.ReactElement;\n    padding?: boolean;\n    expanded?: boolean;\n    large?: boolean;\n    testId?: string;\n    handleExpanderClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;\n    /** Called when expander is open/closed. */\n    onExpand?: (isExpanded: boolean) => void;\n    /** Overrides the default z-index of the expander header */\n    zIndex?: number;\n    /** Highlights text in title and content. Override if different from list. */\n    highlightText?: string;\n    /** Displays a status on the left side: default none */\n    status?: ExpanderListStatus;\n    /** Ref passed to the li element */\n    ref?: React.Ref<HTMLLIElement | null>;\n  }\n> &\n  Pick<ExpanderListProps, 'renderChildrenWhenClosed' | 'variant'> &\n  ListEditModeItemProps;\n\nexport const Expander: ExpanderType = (props: ExpanderProps) => {\n  const {\n    id,\n    children,\n    padding = true,\n    color = 'neutral',\n    className = '',\n    icon,\n    large = false,\n    title,\n    titleHtmlMarkup = 'span',\n    expanded = false,\n    testId,\n    handleExpanderClick,\n    onExpand,\n    renderChildrenWhenClosed,\n    variant = 'line',\n    zIndex = 0,\n    highlightText,\n    status = 'none',\n    editMode = false,\n    ref,\n  } = props;\n  const [isExpanded] = useExpand(expanded, onExpand);\n  const expanderRef = useRef<HTMLLIElement>(null);\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const { isHovered, isFocused } = usePseudoClasses(triggerRef);\n\n  const isFill = variant === 'fill';\n  const isFillNegative = variant === 'fill-negative';\n  const isOutline = variant === 'outline';\n  const isLine = variant === 'line';\n\n  const itemClasses = classNames(className, expanderListStyles['expander-list__item'], {\n    [expanderListStyles[`expander-list__item--fill`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list__item--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list__item--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list__item--outline']]: isOutline,\n    [expanderListStyles[`expander-list__item--outline--${color}`]]: isOutline,\n    [expanderListStyles['expander-list__item--line']]: isLine,\n    [expanderListStyles[`expander-list__item--line--${color}`]]: isLine,\n    [expanderListStyles[`expander-list__item--new`]]: status === 'new',\n  });\n\n  const expanderClasses = classNames(expanderListStyles['expander-list-link'], expanderListStyles[`expander-list-link--${color}`], {\n    [expanderListStyles[`expander-list-link--fill--${color}`]]: isFill,\n    [expanderListStyles[`expander-list-link--fill-negative`]]: isFillNegative,\n    [expanderListStyles[`expander-list-link--fill-negative--${color}`]]: isFillNegative,\n    [expanderListStyles['expander-list-link--outline']]: isOutline,\n    [expanderListStyles[`expander-list-link--outline--${color}`]]: isOutline,\n    [expanderListStyles[`expander-list-link--line--${color}`]]: isLine,\n    [expanderListStyles['expander-list-link--open']]: isExpanded,\n    [expanderListStyles['expander-list-link--large']]: large,\n    [expanderListStyles[`expander-list-link--new`]]: status === 'new',\n  });\n\n  const renderContent = (): React.ReactNode => {\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const mainContentClasses = classNames(expanderListStyles['expander-list-link__main-content'], {\n      [expanderListStyles['expander-list-link__main-content--expanded']]: isExpanded,\n      [expanderListStyles['expander-list-link__main-content--padding']]: padding,\n      [expanderListStyles[`expander-list-link__main-content--outline--${color}`]]: isOutline,\n      [expanderListStyles[`expander-list-link__main-content--new`]]: status === 'new',\n    });\n\n    return (\n      <div className={mainContentClasses} data-state={isExpanded ? 'open' : 'closed'} data-overflow-boundary>\n        <Highlighter searchText={highlightText}>{children}</Highlighter>\n      </div>\n    );\n  };\n\n  const statusMarkerClasses = classNames(expanderListStyles['expander-list__item__status-marker'], {\n    [expanderListStyles['expander-list__item__status-marker--new']]: status === 'new',\n  });\n\n  return (\n    <>\n      {editMode ? (\n        <div className={itemClasses}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\n          <div id={id} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderListExpander} className={expanderClasses}>\n            {renderElementHeader(title, {\n              titleHtmlMarkup,\n              isHovered: false,\n              size: large ? 'large' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: undefined,\n              icon,\n              highlightText,\n            })}\n          </div>\n        </div>\n      ) : (\n        <li className={itemClasses} ref={mergeRefs([ref, expanderRef])}>\n          {status !== 'none' && <div className={statusMarkerClasses}></div>}\n          <button\n            type=\"button\"\n            id={id}\n            onClick={handleExpanderClick}\n            data-testid={testId}\n            data-analyticsid={AnalyticsId.ExpanderListExpander}\n            className={expanderClasses}\n            ref={triggerRef}\n            aria-expanded={isExpanded}\n            style={{\n              zIndex: isFocused ? zIndex + 1 : zIndex,\n            }}\n          >\n            {renderElementHeader(title, {\n              titleHtmlMarkup,\n              isHovered: isHovered || isFocused,\n              size: large ? 'large' : 'normal',\n              parentType: 'expanderlist',\n              chevronIcon: isExpanded ? ChevronUp : ChevronDown,\n              icon,\n              highlightText,\n            })}\n          </button>\n          {renderContent()}\n        </li>\n      )}\n    </>\n  );\n};\n\ntype ActiveExpander = Record<string, boolean>;\n\nconst isExpanderComponent = (element: unknown | null | undefined): element is React.ReactElement<ExpanderProps> =>\n  React.isValidElement<ExpanderProps>(element) && (element as React.ReactElement).type === Expander;\n\nconst ExpanderListComponent: React.FC<ExpanderListProps> = (props: ExpanderListProps) => {\n  const {\n    children,\n    childPadding = true,\n    large,\n    renderChildrenWhenClosed = false,\n    color = 'white',\n    className = '',\n    accordion = false,\n    testId,\n    variant,\n    zIndex,\n    highlightText,\n    editMode = false,\n    ref,\n  } = props;\n  const [prevChildren, setPrevChildren] = useState(children);\n  const [activeExpander, setActiveExpander] = useState<ActiveExpander>();\n  const [latestExpander, setLatestExpander] = useState<HTMLElement>();\n  const expanderIdBase = useId();\n  const expanderListClasses = classNames(expanderListStyles['expander-list'], className, {\n    [expanderListStyles[`expander-list--outline--${color}`]]: variant === 'outline',\n    [expanderListStyles[`expander-list--fill`]]: variant === 'fill' || variant === 'fill-negative',\n    [listEditModeWrapperClassnames]: editMode,\n  });\n\n  function handleExpanderClick(event: React.MouseEvent<HTMLElement, MouseEvent>, id: string): void {\n    setActiveExpander(prevState => (accordion ? { [id]: !prevState?.[id] } : { ...prevState, [id]: !prevState?.[id] }));\n    setLatestExpander(event.currentTarget);\n  }\n\n  const getExpanderId = (index: number): string => `${expanderIdBase}-${index}`;\n\n  useEffect(() => {\n    if (accordion && latestExpander && !isElementInViewport(latestExpander)) {\n      latestExpander.scrollIntoView();\n    }\n  }, [accordion, latestExpander]);\n\n  const getExpanderStateFromChildren = (): ActiveExpander | undefined => {\n    return React.Children.map(children, child => {\n      if (isExpanderComponent(child)) {\n        return child;\n      }\n    })?.reduce((acc, child, index) => {\n      // Expanded-status skal bare settes dersom prop er satt av den som bruker komponenten\n      if (typeof child.props.expanded !== 'undefined') {\n        acc[getExpanderId(index)] = child.props.expanded;\n      }\n      return acc;\n    }, {} as ActiveExpander);\n  };\n\n  if (children !== prevChildren) {\n    setPrevChildren(children);\n    const newActiveExpander = getExpanderStateFromChildren();\n    if (newActiveExpander) {\n      setActiveExpander({ ...activeExpander, ...newActiveExpander });\n    }\n  }\n\n  if (activeExpander === undefined) {\n    const initialState = getExpanderStateFromChildren();\n    if (initialState && Object.keys(initialState).length > 0) {\n      setActiveExpander(initialState);\n    }\n  }\n\n  return (\n    <ul className={expanderListClasses} ref={ref} data-testid={testId} data-analyticsid={AnalyticsId.ExpanderList}>\n      {React.Children.map(children, (child, index) => {\n        if (isExpanderComponent(child)) {\n          const id = getExpanderId(index);\n          const expanded = activeExpander?.[id];\n          const highlightTextChild: string | undefined = child.props.highlightText || highlightText;\n          const childProps = child.props;\n          const sharedProps = {\n            padding: childProps.padding ?? childPadding,\n            color: childProps.color ?? color,\n            large: childProps.large ?? large,\n            className: classNames(expanderListStyles['expander-list__item'], childProps.className),\n            variant: childProps.variant ?? variant,\n            zIndex: childProps.zIndex ?? zIndex,\n            highlightText: highlightTextChild,\n          };\n\n          if (editMode) {\n            return (\n              <ListEditModeItem color={color} variant={variant} onDelete={childProps.onDelete}>\n                {React.cloneElement(child, {\n                  ...sharedProps,\n                  id,\n                  key: index,\n                  expanded,\n                  'aria-expanded': false,\n                  renderChildrenWhenClosed: false,\n                  editMode: true,\n                })}\n              </ListEditModeItem>\n            );\n          } else {\n            return React.cloneElement(child as React.ReactElement<ExpanderProps>, {\n              ...sharedProps,\n              id,\n              key: index,\n              expanded,\n              'aria-expanded': expanded,\n              handleExpanderClick: (event: React.MouseEvent<HTMLElement>) => {\n                childProps.handleExpanderClick?.(event);\n                handleExpanderClick(event, id);\n              },\n              renderChildrenWhenClosed: childProps.renderChildrenWhenClosed ?? renderChildrenWhenClosed,\n            });\n          }\n        }\n        return child;\n      })}\n    </ul>\n  );\n};\n\nconst ExpanderList = ExpanderListComponent as ExpanderListCompound;\n\nExpanderList.displayName = 'ExpanderList';\nExpanderList.Expander = Expander;\nExpander.displayName = 'ExpanderList.Expander';\n\nexport default ExpanderList;\n","import ExpanderList from './ExpanderList';\nexport * from './ExpanderList';\nexport default ExpanderList;\n"],"mappings":"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"}

package/lib/components/ExpanderList/styles.module.scss

@@ -456,6 +456,7 @@
     padding: 0;
     display: none;
     grid-area: content;
+    min-width: 0;
     padding-left: var(--statusmarker-left-space);
 
     @media print {

package/lib/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -1,10 +1,6 @@
 import { AriaLabelAttributes } from '../../utils/accessibility';
 interface HorizontalScrollProps {
     children?: React.ReactNode;
-    /**
-     * Bredden på elementet som potensielt vil scrolle horisontalt i px
-     */
-    childWidth: number;
     /** Sets the data-testid attribute. */
     testId?: string;
 }

package/lib/components/HorizontalScroll/styles.module.scss

@@ -14,15 +14,12 @@ $gradient:
 
   &__viewport {
     display: flex;
+    overflow: auto hidden;
 
     &:focus-visible {
       outline: spacers.getSpacer(4xs) solid palette.$black;
       outline-offset: -1px;
     }
-
-    &--overflow {
-      overflow: auto hidden;
-    }
   }
 
   &__indicator {

package/lib/components/HorizontalScroll/styles.module.scss.d.ts

@@ -5,7 +5,6 @@ export type Styles = {
   'horizontalscroll__indicator--right': string;
   'horizontalscroll__indicator--visible': string;
   horizontalscroll__viewport: string;
-  'horizontalscroll__viewport--overflow': string;
 };
 
 export type ClassNames = keyof Styles;

package/lib/components/Label/Label.d.ts

@@ -39,6 +39,8 @@ export interface LabelProps {
     testId?: string;
     /** Gives a custom classname to the afterLabelChildren wrapper. Used in checkbox and radiobutton */
     afterLabelChildrenClassName?: string;
+    /** Renders formFieldTag, sublabel and statusDot inside the label element, underneath the label texts. Used by Checkbox and Radio. */
+    sublabelInsideLabel?: boolean;
 }
 declare const Label: FunctionComponent<LabelProps>;
 export default Label;

package/lib/components/Label/styles.module.scss

@@ -5,6 +5,16 @@
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/breakpoints' as breakpoints;
 
+// Re-maps text and status dot tokens so sublabel and statusDot stay readable on the dark background of a checked large Radio/Checkbox.
+@mixin on-dark-tokens {
+  --color-base-subdued-text-dark: var(--color-base-text-ondark);
+  --component-statusdot-graphics-kiwi-onlight: var(--component-statusdot-graphics-kiwi-ondark);
+  --component-statusdot-graphics-banana-onlight: var(--component-statusdot-graphics-banana-ondark);
+  --component-statusdot-graphics-cherry-onlight: var(--component-statusdot-graphics-cherry-ondark);
+  --component-statusdot-graphics-blueberry-onlight: var(--component-statusdot-graphics-blueberry-ondark);
+  --component-statusdot-graphics-neutral-onlight: var(--component-statusdot-graphics-neutral-ondark);
+}
+
 .label-wrapper {
   margin-bottom: spacers.getSpacer(2xs);
   line-height: font-settings.$lineheight-size-xs;
@@ -44,6 +54,7 @@
   }
 
   &__texts {
+    display: block;
     min-width: 0;
   }
 }
@@ -51,8 +62,13 @@
 .sublabel {
   @include fonts.sublabel;
 
+  display: block;
   color: var(--color-base-subdued-text-dark);
 
+  & + & {
+    margin-top: var(--core-space-3xs);
+  }
+
   &--subdued {
     @include fonts.sublabel-subdued;
   }

package/lib/components/Label/utils.d.ts

@@ -18,7 +18,6 @@ interface RenderLabelAsParentProps {
     labelClassName?: string;
     labelTextClassName?: string;
     sublabelWrapperClassName?: string;
-    large?: boolean;
     markup?: LabelTags;
     afterLabelChildrenClassName?: string;
 }