@helsenorge/designsystem-react 15.7.2 → 16.1.0

package/lib/components/DictionaryTrigger/index.js

@@ -1,2 +1,27 @@
-import { t as DictionaryTrigger_default } from "../../DictionaryTrigger.js";
+import { AnalyticsId } from "../../constants.js";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+import styles from "./styles.module.scss";
+//#region src/components/DictionaryTrigger/DictionaryTrigger.tsx
+var DictionaryTrigger = (props) => {
+	const { children, selected = false, className, testId, ref, ...rest } = props;
+	const triggerClasses = classNames(styles.dictionarytrigger, className);
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-testid": testId,
+		"data-analyticsid": AnalyticsId.DictionaryTrigger,
+		className: triggerClasses,
+		"aria-expanded": selected,
+		ref,
+		...rest,
+		children
+	});
+};
+DictionaryTrigger.displayName = "DictionaryTrigger";
+//#endregion
+//#region src/components/DictionaryTrigger/index.ts
+var DictionaryTrigger_default = DictionaryTrigger;
+//#endregion
 export { DictionaryTrigger_default as default };
+
+//# sourceMappingURL=index.js.map

package/lib/{DictionaryTrigger.js.map → components/DictionaryTrigger/index.js.map}

@@ -1 +1 @@
-{"version":3,"file":"DictionaryTrigger.js","names":[],"sources":["../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA6BA,IAAM,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;CAErE,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,kBAAkB,cAAc;;;AC9ChC,IAAA,4BAAe"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DictionaryTrigger/DictionaryTrigger.tsx","../../../src/components/DictionaryTrigger/index.ts"],"sourcesContent":["import classNames from 'classnames';\n\nimport { AnalyticsId } from '../../constants';\n\nimport styles from './styles.module.scss';\n\nexport interface DictionaryTriggerProps extends Pick<React.InputHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onFocus' | 'onBlur'> {\n  /**\n   * Sets the content of the trigger.\n   */\n  children: React.ReactNode;\n  /**\n   * Indicates that the trigger is in use.\n   */\n  selected?: boolean;\n  /**\n   * Classname will be applied to the button element.\n   */\n  className?: string;\n  /**\n   * Sets the data-testid attribute.\n   */\n  testId?: string;\n  /**\n   * ref that is passed to the component\n   */\n  ref?: React.Ref<HTMLButtonElement | null>;\n}\n\nconst DictionaryTrigger: React.FC<DictionaryTriggerProps> = (props: DictionaryTriggerProps) => {\n  const { children, selected = false, className, testId, ref, ...rest } = props;\n  const triggerClasses = classNames(styles.dictionarytrigger, className);\n\n  return (\n    <button\n      type=\"button\"\n      data-testid={testId}\n      data-analyticsid={AnalyticsId.DictionaryTrigger}\n      className={triggerClasses}\n      aria-expanded={selected}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n};\n\nDictionaryTrigger.displayName = 'DictionaryTrigger';\n\nexport default DictionaryTrigger;\n","import DictionaryTrigger from './DictionaryTrigger';\nexport * from './DictionaryTrigger';\nexport default DictionaryTrigger;\n"],"mappings":";;;;;AA6BA,IAAM,qBAAuD,UAAkC;CAC7F,MAAM,EAAE,UAAU,WAAW,OAAO,WAAW,QAAQ,KAAK,GAAG,SAAS;CACxE,MAAM,iBAAiB,WAAW,OAAO,mBAAmB,SAAS;CAErE,OACE,oBAAC,UAAD;EACE,MAAK;EACL,eAAa;EACb,oBAAkB,YAAY;EAC9B,WAAW;EACX,iBAAe;EACV;EACL,GAAI;EAEH;CACK,CAAA;AAEZ;AAEA,kBAAkB,cAAc;;;AC9ChC,IAAA,4BAAe"}

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

@@ -1,6 +1,4 @@
 @use '../../scss/palette' as palette;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .dictionarytrigger {
   all: unset;
@@ -10,7 +8,7 @@
   padding: 0 var(--core-space-4xs);
   background-color: transparent;
 
-  --dot-color: var(--color-help-border-normal);
+  --dot-color: var(--color-help-border);
 
   // The radial-gradient consists of a circle with empty space to the right, making up a dotted pattern when repeated horizontally
   background-image: radial-gradient(circle at 1.5px 1.5px, var(--dot-color) 1.5px, transparent 1.5px);
@@ -21,7 +19,7 @@
   &:hover {
     background-color: var(--color-help-background-transparent-onlight-hover);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
   }
 
   &:focus-visible {
@@ -32,11 +30,11 @@
   &[aria-expanded='true'] {
     background-color: var(--color-help-background-transparent-onlight-hover);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
 
     &:hover,
     &:focus-visible {
-      background-color: var(--color-help-background-transparent-onlight-hover-selected);
+      background-color: var(--color-help-background-transparent-onlight-hoverselected);
     }
 
     &:focus-visible {
@@ -45,8 +43,8 @@
   }
 
   &:active {
-    background-color: var(--color-help-background-transparent-onlight-hover-selected);
+    background-color: var(--color-help-background-transparent-onlight-hoverselected);
 
-    --dot-color: var(--color-help-border-dark);
+    --dot-color: var(--color-help-border-plus1);
   }
 }

package/lib/components/Drawer/Drawer.d.ts

@@ -48,10 +48,6 @@ export interface InnerDrawerProps {
     resources?: Partial<HNDesignsystemDrawer>;
     /** Sets mobile styling and animation from outer level Drawer */
     isMobile?: boolean;
-    /** Shows a back button to the left of title */
-    withBackButton?: boolean;
-    /** Callback for the back button */
-    onRequestBack?: () => void;
     /** Sets classname for content part in Drawer */
     contentClassName?: string;
     /** Sets the content padding of the Drawer */

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

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 $desktop-size: 3rem;
 $mobile-inner-size: 2.375rem;
@@ -44,7 +43,7 @@ $mobile-outer-size: 2.75rem;
     }
 
     :focus-visible > & {
-      outline: 3px solid var(--color-action-border-onlight-focus);
+      outline: 3px solid var(--color-action-border-dark-focus);
       border-radius: 0;
       border: 0;
     }

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

@@ -2,8 +2,6 @@
 @use '../../scss/palette' as palette;
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .drawer {
   position: fixed;
@@ -115,7 +113,12 @@
       }
 
       &--padding-extra {
-        padding: var(--core-space-xs) var(--core-space-s);
+        padding-top: var(--core-space-xs);
+        padding-bottom: var(--core-space-xs);
+
+        @media (min-width: map.get(breakpoints.$grid-breakpoints, xs)) {
+          padding: var(--core-space-xs) var(--core-space-s);
+        }
 
         @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
           padding: var(--core-space-xs) var(--core-space-m);

package/lib/components/Dropdown/SingleSelect/styles.module.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
-@import '../../../scss/supernova/styles/colors.css';
-@import '../../../scss/supernova/styles/spacers.css';
 
 .single-select-item {
   cursor: pointer;

package/lib/components/Dropdown/index.js

@@ -9,9 +9,9 @@ import { useIsMobileBreakpoint } from "../../hooks/useIsMobileBreakpoint.js";
 import { t as Button_default } from "../../Button.js";
 import { useToggle } from "../../hooks/useToggle.js";
 import { useKeyboardEvent } from "../../hooks/useKeyboardEvent.js";
-import { useOutsideEvent } from "../../hooks/useOutsideEvent.js";
+import { useDismissablePopover } from "../../hooks/useDismissablePopover.js";
 import Checkbox_default from "../Checkbox/index.js";
-import { _ as autoUpdate, f as flip, g as size, h as shift, m as offset, o as useFloating } from "../../floating-ui.react.js";
+import { a as useFloating, d as offset, f as shift, l as flip, m as autoUpdate, p as size } from "../../floating-ui.react.js";
 import { n as HN_Designsystem_Dropdown_en_GB_default, t as HN_Designsystem_Dropdown_nb_NO_default } from "../../HN.Designsystem.Dropdown.nb-NO.js";
 import { n as SingleSelectContext, t as SingleSelectItem } from "../../SingleSelectItem.js";
 import ChevronDown from "../Icons/ChevronDown.js";
@@ -126,11 +126,12 @@ var DropdownBase = (props) => {
 		openedByKeyboard.current = isKeyboard;
 		toggleIsOpen();
 	};
-	const handleClose = () => {
-		if (!isOpen) return;
-		toggleIsOpen();
-		buttonRef.current?.focus();
-	};
+	const handleClose = useDismissablePopover({
+		popoverRef: dropdownRef,
+		triggerRef: buttonRef,
+		isOpen,
+		onClose: toggleIsOpen
+	});
 	useEffect(() => {
 		if (isOpen && openedByKeyboard.current) {
 			(childrenRefList.current?.find((r) => r.current && !r.current.hasAttribute("disabled")))?.current?.focus();
@@ -144,13 +145,6 @@ var DropdownBase = (props) => {
 	const handleKeyboardNavigation = (event) => {
 		if (!childrenRefList.current) return;
 		const key = event.key;
-		if (key === KeyboardEventKey.Escape) {
-			if (isOpen) {
-				event.preventDefault();
-				handleClose();
-			}
-			return;
-		}
 		if (!isOpen) {
 			if (isListNavKey(key)) {
 				event.preventDefault();
@@ -175,11 +169,9 @@ var DropdownBase = (props) => {
 		KeyboardEventKey.ArrowUp,
 		KeyboardEventKey.End,
 		KeyboardEventKey.Enter,
-		KeyboardEventKey.Escape,
 		KeyboardEventKey.Home,
 		KeyboardEventKey.Space
 	]);
-	useOutsideEvent(dropdownRef, () => isOpen && handleClose());
 	const renderChildren = React.Children.map(children, (child, index) => {
 		const element = child;
 		return /* @__PURE__ */ jsx("li", {
@@ -258,7 +250,7 @@ var DropdownBase = (props) => {
 			}), !isSingleSelect && !noCloseButton && /* @__PURE__ */ jsx("div", {
 				className: styles.dropdown__close,
 				children: /* @__PURE__ */ jsx(Button_default, {
-					onClick: handleClose,
+					onClick: () => handleClose(),
 					children: mergedResources.closeText
 				})
 			})]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  usePseudoClasses,\n  useKeyboardEvent,\n  useOutsideEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const dropdownFloatingPadding = 15;\n  const maxWidth = isMobile ? 384 : 400;\n  const maxHeight = isMobile ? 384 : 464;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    middleware: [\n      offset(8),\n      // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n      flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n      // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n      shift({ padding: dropdownFloatingPadding }),\n      // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n      size({\n        padding: dropdownFloatingPadding,\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(targetW, availableWidth)}px`,\n            maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: isOpen ? autoUpdate : undefined,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = (): void => {\n    if (!isOpen) return;\n\n    toggleIsOpen();\n    buttonRef.current?.focus();\n  };\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (key === KeyboardEventKey.Escape) {\n      if (isOpen) {\n        event.preventDefault();\n        handleClose();\n      }\n      return;\n    }\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Escape,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  useOutsideEvent(dropdownRef, () => isOpen && handleClose());\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n                const label = element.props.label;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(element, {\n                    ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n              });\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={handleClose}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Dropdown/resourceHelper.ts","../../../src/components/Dropdown/SingleSelect/SingleSelect.tsx","../../../src/components/Dropdown/Dropdown.tsx","../../../src/components/Dropdown/index.ts"],"sourcesContent":["import type { HNDesignsystemDropdown } from '../../resources/Resources';\n\nimport { LanguageLocales } from '../../constants';\nimport enGB from '../../resources/HN.Designsystem.Dropdown.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.Dropdown.nb-NO.json';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDropdown => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React from 'react';\n\nimport { SingleSelectContext } from './utils';\n\nexport type SingleSelectContextType = {\n  name?: string;\n  disabled?: boolean;\n  required?: boolean;\n  value?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n};\n\nexport interface SingleSelectProps {\n  name?: string;\n  disabled?: boolean;\n  defaultValue?: string;\n  onValueChange?: (newValue: string, e?: React.SyntheticEvent) => void;\n  children: React.ReactNode;\n}\n\nexport const SingleSelect: React.FC<SingleSelectProps> = ({ name, disabled, defaultValue, onValueChange, children }) => {\n  const [selected, setSelected] = React.useState<string | undefined>(defaultValue);\n\n  const context = React.useMemo<SingleSelectContextType>(\n    () => ({\n      name,\n      disabled,\n      value: selected,\n      onValueChange: (v, e): void => {\n        setSelected(v);\n        onValueChange?.(v, e);\n      },\n    }),\n    [name, disabled, selected, onValueChange]\n  );\n\n  return <SingleSelectContext.Provider value={context}>{children}</SingleSelectContext.Provider>;\n};\n","import type { ComponentType } from 'react';\nimport React, { useEffect, useRef, useId } from 'react';\n\nimport { autoUpdate, offset, shift, size, useFloating, flip } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { clamp } from 'motion/react';\n\nimport type { SingleSelectItemProps } from './SingleSelect/SingleSelectItem';\nimport type { HNDesignsystemDropdown } from '../../resources/Resources';\nimport type { CheckboxProps } from '../Checkbox';\nimport type { SvgIcon } from '../Icon';\nimport type { IconName } from '../Icons/IconNames';\nimport type { LabelProps } from '../Label';\n\nimport {\n  AnalyticsId,\n  IconSize,\n  KeyboardEventKey,\n  LanguageLocales,\n  ZIndex,\n  usePseudoClasses,\n  useDismissablePopover,\n  useKeyboardEvent,\n  useToggle,\n} from '../..';\nimport { getResources } from './resourceHelper';\nimport { SingleSelectItem } from './SingleSelect/SingleSelectItem';\nimport { useIsMobileBreakpoint } from '../../hooks/useIsMobileBreakpoint';\nimport { useLanguage } from '../../hooks/useLanguage';\nimport { isComponent } from '../../utils/component';\nimport { mergeRefs } from '../../utils/refs';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport Icon from '../Icon';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport PlusSmall from '../Icons/PlusSmall';\nimport Label from '../Label';\nimport LazyIcon from '../LazyIcon';\nimport { SingleSelect } from './SingleSelect/SingleSelect';\n\nimport styles from './styles.module.scss';\n\ntype DropdownVariants = 'fill' | 'transparent' | 'borderless';\n\nexport interface DropdownProps {\n  /** Text on the trigger button that opens the dropdown */\n  triggerText: string;\n  /** Sets the dropdown content */\n  children: React.ReactNode;\n  /** Minimum width for the dropdown in pixels. Does not affect trigger button. */\n  dropdownMinWidth?: number;\n  /** Minimum width for the trigger in pixels. Does not apply for borderless variant */\n  triggerMinWidth?: number;\n  /** Disables rendring of the close button in the list */\n  noCloseButton?: boolean;\n  /** Called when dropdown is open/closed */\n  onToggle?: (isOpen: boolean) => void;\n  /** Whether the dropdown is open or not */\n  open?: boolean;\n  /** Makes the dropdown disabled */\n  disabled?: boolean;\n  /** Sets the data-testid attribute on the dropdown button */\n  testId?: string;\n  /** Overrides the default z-index of the DropDownContent */\n  zIndex?: number;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDropdown>;\n  /** Adds an icon to the trigger */\n  svgIcon?: SvgIcon | IconName;\n  /** Sets the visual variant of the Dropdown */\n  variant?: DropdownVariants;\n}\n\nexport const DropdownBase: React.FC<DropdownProps> = props => {\n  const {\n    triggerText,\n    noCloseButton = false,\n    onToggle,\n    dropdownMinWidth,\n    triggerMinWidth,\n    open = false,\n    children,\n    testId,\n    disabled,\n    zIndex = ZIndex.PopOver,\n    resources,\n    svgIcon,\n    variant = 'fill',\n  } = props;\n\n  const dropdownRef = useRef<HTMLDivElement>(null);\n  const optionsRef = useRef<HTMLUListElement>(null);\n  const childrenRefList = useRef(React.Children.map(children, () => React.createRef<HTMLElement>()));\n  const buttonRef = React.useRef<HTMLButtonElement>(null);\n  const { isHovered } = usePseudoClasses<HTMLButtonElement | null>(buttonRef);\n  const openedByKeyboard = useRef<boolean>(false);\n  const { value: isOpen, toggleValue: toggleIsOpen } = useToggle(!disabled && open, onToggle);\n  const isMobile = useIsMobileBreakpoint();\n  const triggerActualMinWidth = variant !== 'borderless' && typeof triggerMinWidth != 'undefined' ? `${triggerMinWidth}px` : 'auto';\n  const triggerMinWidthLimit = isMobile ? 96 : 112;\n  const dropdownFloatingPadding = 15;\n  const maxWidth = isMobile ? 384 : 400;\n  const maxHeight = isMobile ? 384 : 464;\n  const toggleTextId = useId();\n  const optionIdPrefix = useId();\n  const contentId = useId();\n  const leftIconProps = {\n    className: styles['dropdown__left-icon'],\n    size: IconSize.XSmall,\n    isHovered: !disabled && isHovered,\n  };\n\n  const isSingleSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<SingleSelectItemProps>(child, SingleSelectItem)\n  );\n  const isMultiSelect = React.Children.toArray(children).every(\n    child => React.isValidElement(child) && isComponent<CheckboxProps>(child, Checkbox)\n  );\n\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n  const mergedResources: HNDesignsystemDropdown = {\n    ...defaultResources,\n    ...resources,\n  };\n\n  const toggleClasses = classNames(styles.dropdown__toggle, {\n    [styles['dropdown__toggle--open']]: isOpen && !disabled,\n    [styles['dropdown__toggle--with-icon']]: typeof svgIcon !== 'undefined',\n    [styles['dropdown__toggle--transparent']]: variant === 'transparent',\n    [styles['dropdown__toggle--borderless']]: variant === 'borderless',\n  });\n  const contentClasses = classNames(styles.dropdown__content, isOpen && styles['dropdown__content--open']);\n  const listItemClasses = classNames(styles['dropdown__list-item'], { [styles['dropdown__list-item--single-select']]: isSingleSelect });\n\n  const { refs, floatingStyles } = useFloating({\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    middleware: [\n      offset(8),\n      // Hvis det ikke er plass på høyre side flipper vi dropdownlisten fra bottom-start til bottom-end\n      flip({ mainAxis: false, fallbackPlacements: ['bottom-end'], padding: dropdownFloatingPadding }),\n      // Shift fungerer som en fallback for flip og unngår at availableWidth ikke oppdaterer seg ved skjermbreddeendring\n      shift({ padding: dropdownFloatingPadding }),\n      // Hvis det ikke er plass på noen av sidene krymper vi bredden på listen med size\n      size({\n        padding: dropdownFloatingPadding,\n        apply({ availableWidth, availableHeight, elements, rects }) {\n          const triggerW = rects.reference.width;\n          const minProp = typeof dropdownMinWidth !== 'undefined' ? clamp(0, maxWidth, dropdownMinWidth) : 0;\n          const targetW = Math.max(triggerW, minProp);\n\n          Object.assign(elements.floating.style, {\n            maxWidth: `${Math.min(targetW, availableWidth)}px`,\n            maxHeight: `${Math.min(maxHeight, availableHeight)}px`,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: isOpen ? autoUpdate : undefined,\n  });\n\n  const handleOpen = (isKeyboard: boolean): void => {\n    openedByKeyboard.current = isKeyboard;\n    toggleIsOpen();\n  };\n\n  const handleClose = useDismissablePopover({ popoverRef: dropdownRef, triggerRef: buttonRef, isOpen, onClose: toggleIsOpen });\n\n  useEffect(() => {\n    if (isOpen && openedByKeyboard.current) {\n      const firstEnabled = childrenRefList.current?.find(r => r.current && !r.current.hasAttribute('disabled'));\n      firstEnabled?.current?.focus();\n      openedByKeyboard.current = false;\n    }\n  }, [isOpen]);\n\n  const focusByIndex = (nextIndex: number): void => {\n    childrenRefList.current?.[nextIndex]?.current?.focus();\n  };\n\n  const isListNavKey = (key: string): boolean =>\n    key === KeyboardEventKey.ArrowDown || key === KeyboardEventKey.ArrowUp || key === KeyboardEventKey.Home || key === KeyboardEventKey.End;\n\n  const handleKeyboardNavigation = (event: KeyboardEvent): void => {\n    if (!childrenRefList.current) return;\n\n    const key = event.key as KeyboardEventKey;\n\n    if (!isOpen) {\n      if (isListNavKey(key)) {\n        event.preventDefault();\n        handleOpen(true);\n      }\n      return;\n    }\n\n    if (!isListNavKey(key)) {\n      return;\n    }\n\n    const index = childrenRefList.current.findIndex(x => x.current === (event.target as HTMLElement));\n    let nextIndex = index;\n\n    if (key === KeyboardEventKey.Home) {\n      nextIndex = 0;\n    } else if (key === KeyboardEventKey.End) {\n      nextIndex = childrenRefList.current.length - 1;\n    } else if (key === KeyboardEventKey.ArrowDown && index < childrenRefList.current.length - 1) {\n      nextIndex = index + 1;\n    } else if (key === KeyboardEventKey.ArrowUp && index > 0) {\n      nextIndex = index - 1;\n    }\n\n    if (nextIndex !== -1) {\n      event.preventDefault();\n      focusByIndex(nextIndex);\n    }\n  };\n\n  useKeyboardEvent(dropdownRef, handleKeyboardNavigation, [\n    KeyboardEventKey.ArrowDown,\n    KeyboardEventKey.ArrowUp,\n    KeyboardEventKey.End,\n    KeyboardEventKey.Enter,\n    KeyboardEventKey.Home,\n    KeyboardEventKey.Space,\n  ]);\n\n  const renderChildren = React.Children.map(children, (child, index) => {\n    const element = child as React.ReactElement<{ ref?: React.Ref<HTMLElement | null> }>;\n\n    return (\n      <li className={listItemClasses} id={`${optionIdPrefix}-${index}`}>\n        {React.isValidElement(element) && childrenRefList.current && childrenRefList.current[index]\n          ? ((): React.ReactElement => {\n              if (isMultiSelect && isComponent<CheckboxProps>(element, Checkbox)) {\n                const label = element.props.label;\n                if (React.isValidElement(label) && isComponent<LabelProps>(label, Label)) {\n                  return React.cloneElement(element, {\n                    ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n                    label: React.cloneElement(label, {\n                      labelClassName: classNames((label.props as LabelProps)?.labelClassName, styles['dropdown__multiselect-item']),\n                    }),\n                  });\n                }\n              }\n\n              return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n                ref: mergeRefs([element.props.ref, childrenRefList.current[index]]),\n              });\n            })()\n          : child}\n      </li>\n    );\n  });\n\n  return (\n    <div className={styles.dropdown} ref={dropdownRef}>\n      <button\n        type=\"button\"\n        onClick={(): false | void => handleOpen(false)}\n        className={toggleClasses}\n        ref={mergeRefs([buttonRef, refs.setReference])}\n        data-testid={testId}\n        data-analyticsid={AnalyticsId.Dropdown}\n        disabled={disabled}\n        aria-labelledby={toggleTextId}\n        aria-haspopup={true}\n        aria-controls={contentId}\n        aria-expanded={isOpen}\n        style={{\n          width: triggerActualMinWidth,\n          maxWidth: '100%',\n          minWidth: `${triggerMinWidthLimit}px`,\n        }}\n      >\n        {svgIcon && (\n          <>\n            {typeof svgIcon === 'string' ? (\n              <LazyIcon {...leftIconProps} iconName={svgIcon} />\n            ) : (\n              <Icon {...leftIconProps} svgIcon={svgIcon} />\n            )}\n          </>\n        )}\n        <span id={toggleTextId} className={styles.dropdown__toggle__text}>\n          {triggerText}\n        </span>\n        <Icon\n          svgIcon={!isSingleSelect ? PlusSmall : isOpen ? ChevronUp : ChevronDown}\n          className={styles['dropdown__right-icon']}\n          isHovered={!disabled && isHovered}\n          size={IconSize.XSmall}\n        />\n      </button>\n      <div\n        key={dropdownMinWidth ?? 'auto'}\n        id={contentId}\n        className={contentClasses}\n        ref={refs.setFloating}\n        style={{\n          ...floatingStyles,\n          zIndex: zIndex,\n        }}\n      >\n        <ul className={styles.dropdown__options} role=\"group\" aria-labelledby={toggleTextId} tabIndex={-1} ref={optionsRef}>\n          {isSingleSelect && <SingleSelect onValueChange={() => handleClose()}>{renderChildren}</SingleSelect>}\n          {isMultiSelect && renderChildren}\n        </ul>\n        {!isSingleSelect && !noCloseButton && (\n          <div className={styles.dropdown__close}>\n            <Button onClick={(): void => handleClose()}>{mergedResources.closeText}</Button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport interface DropdownCompound extends React.FC<DropdownProps> {\n  SingleSelectItem: ComponentType<SingleSelectItemProps>;\n}\nconst Dropdown = DropdownBase as DropdownCompound;\nDropdown.SingleSelectItem = SingleSelectItem;\nDropdownBase.displayName = 'Dropdown';\n\nexport default Dropdown;\n","import Dropdown from './Dropdown';\nexport * from './Dropdown';\nexport default Dropdown;\n"],"mappings":"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"}

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

@@ -1,8 +1,6 @@
 @use 'sass:map';
 @use '../../scss/font-settings' as font-settings;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .dropdown {
   position: relative;
@@ -21,11 +19,11 @@
     font-family: inherit;
     font-size: font-settings.$font-size-sm;
     line-height: 1.3rem; // Custom fordi teksten skal henge bedre sammen om den går over to linjer
-    border-color: var(--color-base-border-onlight-emphasized);
+    border-color: var(--color-base-emphasized-border-dark);
     background-color: var(--core-color-white);
 
     &:hover:not(:disabled) {
-      background-color: var(--color-base-background-neutral);
+      background-color: var(--color-base-neutral-background-light);
     }
 
     &:active:not(:disabled) {
@@ -40,15 +38,15 @@
 
     &:focus-visible {
       outline: none;
-      border-color: var(--color-action-border-onlight-focus);
-      box-shadow: 0 0 0 1px var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-dark-focus);
+      box-shadow: 0 0 0 1px var(--color-action-border-dark-focus);
     }
 
     &:disabled {
       cursor: initial;
       color: var(--color-disabled-text);
       background-color: transparent;
-      border-color: var(--color-disabled-border);
+      border-color: var(--color-disabled-border-dark);
       border-style: dashed;
     }
 
@@ -79,7 +77,7 @@
     }
 
     &--borderless#{&}--open {
-      border-color: var(--color-base-border-onlight-emphasized);
+      border-color: var(--color-base-emphasized-border-dark);
     }
 
     &__text {
@@ -104,14 +102,14 @@
 
   &__left-icon,
   &__right-icon {
-    fill: var(--color-action-graphics-onlight);
+    fill: var(--color-action-graphics-dark-normal);
 
     :hover > & {
-      fill: var(--color-action-graphics-onlight-hover);
+      fill: var(--color-action-graphics-dark-hover);
     }
 
     :disabled > & {
-      fill: var(--color-disabled-graphics);
+      fill: var(--color-disabled-graphics-dark);
     }
   }
 
@@ -144,7 +142,7 @@
 
   &__list-item {
     min-height: 44px;
-    border-bottom: 1px solid var(--color-base-border-neutral-emphasized);
+    border-bottom: 1px solid var(--color-base-neutral-border-light-plus1);
 
     &:last-child {
       border-bottom: none;
@@ -172,8 +170,8 @@
     }
 
     &--single-select:has(:focus-visible) {
-      border-color: var(--color-action-border-onlight-focus);
-      outline: 4px solid var(--color-action-border-onlight-focus);
+      border-color: var(--color-action-border-dark-focus);
+      outline: 4px solid var(--color-action-border-dark-focus);
       outline-offset: -4px;
     }
   }

package/lib/components/Duolist/Duolist.d.ts

@@ -2,13 +2,20 @@ import { default as React } from 'react';
 import { TitleProps } from '../Title';
 import { Breakpoint } from '../../hooks/useBreakpoint';
 export type DuolistVariants = 'normal' | 'line';
-export type BoldColumn = 'first' | 'second' | 'none';
 export type Border = 'no-border' | 'border';
+export type HideLines = 'top' | 'bottom' | 'both';
+export interface ResponsiveHideLines {
+    /** Hides lines on desktop (when the list is not collapsed) */
+    desktop?: HideLines;
+    /** Hides lines on mobile (when the list is collapsed, see useCollapsedFromAndBelowBreakpoint) */
+    mobile?: HideLines;
+}
+export type BoldColumn = 'first' | 'second' | 'none';
 export type Formats = 'formatted' | 'non-formatted';
 export interface DuolistProps {
     /** Determines which column is bold */
     boldColumn?: BoldColumn;
-    /** Label of the Duolist */
+    /**@deprecated Border around the Duolist */
     border?: Border;
     /** Label of the Duolist */
     label?: React.ReactElement<TitleProps>;
@@ -16,8 +23,13 @@ export interface DuolistProps {
     format?: Formats;
     /** Character separator for non-formatted format */
     separator?: string;
+    /** Turns the built-in padding of the list on/off. Default: true */
+    padding?: boolean;
     /** Sets the visual variant of the Duolist. */
     variant?: DuolistVariants;
+    /** Hides the top line, bottom line or both. Only applies to the 'line' variant.
+     * Accepts a single value for all screen sizes, or an object to configure desktop and mobile (collapsed) separately. */
+    hideLines?: HideLines | ResponsiveHideLines;
     /** Sets the content of the Duolist. */
     children: React.ReactNode;
     /** Adds custom classes to the element. */

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

@@ -78,30 +78,50 @@
     dt {
       padding-top: spacers.getSpacer(3xs);
       padding-top: spacers.getSpacer(2xs);
+
+      &:first-of-type {
+        border-top: 1px solid var(--color-base-border-dark);
+      }
     }
 
     dd {
       padding-bottom: spacers.getSpacer(2xs);
-      border-bottom: 1px solid var(--color-base-border-onlight);
-
-      &:last-of-type {
-        border-bottom: 0;
-      }
+      border-bottom: 1px solid var(--color-base-border-dark);
     }
   }
 
   &--line#{&}--not-collapsed {
     dt,
     dd {
-      border-top: 1px solid var(--color-base-border-onlight);
+      border-bottom: 1px solid var(--color-base-border-dark);
       padding-top: spacers.getSpacer(2xs);
 
-      &:last-of-type {
-        border-bottom: 0.062rem solid var(--color-base-border-onlight);
+      &:first-of-type {
+        border-top: 1px solid var(--color-base-border-dark);
       }
     }
   }
 
+  &--line#{&}--hide-top-line {
+    dt:first-of-type,
+    dd:first-of-type {
+      border-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  &--line#{&}--hide-bottom-line {
+    dt:last-of-type,
+    dd:last-of-type {
+      border-bottom: 0;
+    }
+  }
+
+  &--no-padding {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
   &--non-formatted {
     display: unset;
   }

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

@@ -7,7 +7,10 @@ export type Styles = {
   'duolist__dt--bold': string;
   'duolist__dt--non-formatted': string;
   'duolist--collapsed': string;
+  'duolist--hide-bottom-line': string;
+  'duolist--hide-top-line': string;
   'duolist--line': string;
+  'duolist--no-padding': string;
   'duolist--non-formatted': string;
   'duolist--not-collapsed': string;
   'duolist-wrapper--border': string;

package/lib/components/ElementHeader/ElementHeader.d.ts

@@ -6,7 +6,7 @@ import { StatusDotProps, StatusDotType } from '../StatusDot';
 import { TitleTags } from '../Title';
 import { ElementHeaderTextProps, ElementHeaderTextType } from './ElementHeaderText/ElementHeaderText';
 import { StatusDotListProps, StatusDotListType } from './StatusDotList/StatusDotList';
-export type ElementHeaderSize = 'compact' | 'small' | 'medium' | 'large';
+export type ElementHeaderSize = 'compact' | 'small' | 'normal' | 'large';
 export type ParentType = 'linklist' | 'expanderlist';
 export interface ElementHeaderType extends React.FC<ElementHeaderProps> {
     Avatar?: AvatarType;

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

@@ -127,7 +127,7 @@
     grid-area: chevron;
 
     svg {
-      fill: var(--color-action-graphics-onlight);
+      fill: var(--color-action-graphics-dark-normal);
       height: 100%;
     }
 

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

@@ -2,7 +2,6 @@
 @use '../../scss/font-mixins' as fonts;
 @use '../../scss/spacers' as spacers;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
 
 .emptystate {
   display: flex;
@@ -20,7 +19,7 @@
     border-radius: 16px;
     border-style: dashed;
     border-width: 1px;
-    border-color: var(--color-base-border-onlight-emphasized);
+    border-color: var(--color-base-emphasized-border-dark);
   }
 
   &--blank {

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

@@ -6,9 +6,9 @@
 .error-wrapper {
   &--with-error {
     padding: spacers.getSpacer(s) spacers.getSpacer(xs) spacers.getSpacer(m) spacers.getSpacer(2xs);
-    background-color: var(--color-notification-background-error);
+    background-color: var(--color-notification-error-background);
     border: 1px solid var(--core-color-cherry-400);
-    border-left: 4px solid var(--color-notification-border-error);
+    border-left: 4px solid var(--color-notification-error-border);
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
       padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(m);
@@ -17,7 +17,7 @@
 
   &__errors {
     margin-top: 0;
-    color: var(--color-notification-border-error);
+    color: var(--color-notification-error-border);
 
     @include fonts.label;
   }

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

@@ -4,8 +4,6 @@
 @use '../../scss/font-settings' as font-settings;
 @use '../Button/styles.module' as button;
 @use '../../scss/breakpoints' as breakpoints;
-@import '../../scss/supernova/styles/colors.css';
-@import '../../scss/supernova/styles/spacers.css';
 
 .expander {
   position: initial;

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

@@ -18,7 +18,7 @@ export type Styles = {
   'button--large-borderless': string;
   'button--large-non-borderless': string;
   'button--left-icon': string;
-  'button--medium': string;
+  'button--normal': string;
   'button--on-dark': string;
   'button--only-icon': string;
   'button--outline': 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,