@ndla/ui 56.0.39-alpha.0 → 56.0.41-alpha.0

package/dist/panda.buildinfo.json

@@ -297,6 +297,7 @@
       "outlineColor]___[value:stroke.default]___[cond:_focusVisible<___>_after",
       "outlineOffset]___[value:3px]___[cond:_focusVisible<___>_after",
       "outlineStyle]___[value:solid]___[cond:_focusVisible<___>_after",
+      "paddingInlineStart]___[value:4xsmall",
       "textAlign]___[value:center",
       "color]___[value:text.strong]___[cond:& a",
       "marginTop]___[value:0]___[cond:& h1",
@@ -375,6 +376,7 @@
       "borderColor]___[value:surface.brand.2",
       "top]___[value:var(--masthead-height, 0px)]___[cond:& > div",
       "position]___[value:sticky]___[cond:& > div",
+      "paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
       "width]___[value:surface.3xsmall",
       "textStyle]___[value:heading.large",
       "textStyle]___[value:title.medium",

package/dist/styles.css

@@ -546,6 +546,10 @@
     padding-inline: var(--spacing-4xsmall);
 }
 
+  .ps_4xsmall {
+    padding-inline-start: var(--spacing-4xsmall);
+}
+
   .ta_center {
     text-align: center;
 }
@@ -1179,6 +1183,10 @@
     position: sticky;
 }
 
+  .\[\&\:not\(\:has\(\>_img\)\)\]\:py_xxlarge:not(:has(> img)) {
+    padding-block: var(--spacing-xxlarge);
+}
+
   .after\:d_block\!::after {
     display: block !important;
 }

package/es/Article/Article.js

@@ -109,6 +109,7 @@ export const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/_jsxs(ArticleHeader, {
@@ -119,7 +120,8 @@ export const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/_jsx(ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/_jsx(Heading, {
         textStyle: "heading.medium",
@@ -146,6 +148,7 @@ export const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -167,7 +170,8 @@ export const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/_jsx(ArticleContent, {
       children: content
     }), /*#__PURE__*/_jsxs(ArticleFooter, {

package/es/AudioPlayer/Controls.js

@@ -8,6 +8,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line } from "@ndla/icons/action";
 import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
@@ -115,7 +116,9 @@ const formatTime = seconds => {
   const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
   return `${minutes}:${formattedSeconds}`;
 };
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = createListCollection({
+  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+});
 const Controls = _ref => {
   let {
     src,
@@ -253,7 +256,7 @@ const Controls = _ref => {
           })
         })]
       }), /*#__PURE__*/_jsxs(StyledSelectRoot, {
-        items: speedValues,
+        collection: speedValues,
         value: [speedValue.toString()],
         onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
         positioning: {
@@ -276,7 +279,7 @@ const Controls = _ref => {
           })
         }), /*#__PURE__*/_jsx(SelectPositioner, {
           children: /*#__PURE__*/_jsx(SelectContent, {
-            children: speedValues.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
+            children: speedValues.items.map(speed => /*#__PURE__*/_jsxs(SelectItem, {
               item: speed,
               children: [/*#__PURE__*/_jsxs(SelectItemText, {
                 children: [speed, "x"]

package/es/Embed/UuDisclaimerEmbed.js

@@ -6,12 +6,11 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const StyledMessageBox = styled(MessageBox, {
   base: {
     display: "flex",
@@ -24,14 +23,16 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = useTranslation();
   if (embed.status === "error") {
     return null;
   }
@@ -39,13 +40,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsxs(_Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/_jsx(SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/_jsx(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/_jsxs("div", {
     role: "region",

package/es/KeyFigure/KeyFigure.js

@@ -14,7 +14,11 @@ const ContentWrapper = styled("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = styled("img", {

package/es/locale/messages-en.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nb.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-nn.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/es/locale/messages-se.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/es/locale/messages-sma.js

@@ -1404,9 +1404,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/Article/Article.d.ts

@@ -28,22 +28,24 @@ export declare const ArticleFooter: import("@ndla/styled-system/types").StyledCo
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
     title?: ReactNode;
     introduction?: ReactNode;
 }
-export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArticleTitle: ({ contentType, heartButton, title, lang, id, introduction, contentTypeLabel, competenceGoals, }: ArticleTitleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props {
     heartButton?: ReactNode;
     article: ArticleType;
     licenseBox?: ReactNode;
     contentType?: ContentType;
+    contentTypeLabel?: ReactNode;
     children?: ReactNode;
     competenceGoals?: ReactNode;
     id: string;
     lang?: string;
 }
-export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Article: ({ article, contentType, licenseBox, children, competenceGoals, contentTypeLabel, id, heartButton, lang, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Article/Article.js

@@ -115,6 +115,7 @@ const ArticleTitle = _ref2 => {
     lang,
     id,
     introduction,
+    contentTypeLabel,
     competenceGoals
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleHeader, {
@@ -125,7 +126,8 @@ const ArticleTitle = _ref2 => {
         direction: "row",
         gap: "small",
         children: [!!contentType && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ContentTypeBadgeNew, {
-          contentType: contentType
+          contentType: contentType,
+          children: contentTypeLabel
         }), heartButton]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
         textStyle: "heading.medium",
@@ -153,6 +155,7 @@ const Article = _ref3 => {
     licenseBox,
     children,
     competenceGoals,
+    contentTypeLabel,
     id,
     heartButton,
     lang
@@ -174,7 +177,8 @@ const Article = _ref3 => {
       title: title,
       introduction: introduction,
       competenceGoals: competenceGoals,
-      lang: lang
+      lang: lang,
+      contentTypeLabel: contentTypeLabel
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ArticleContent, {
       children: content
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ArticleFooter, {

package/lib/AudioPlayer/Controls.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _reactI18next = require("react-i18next");
+var _react2 = require("@ark-ui/react");
 var _action = require("@ndla/icons/action");
 var _common = require("@ndla/icons/common");
 var _editor = require("@ndla/icons/editor");
@@ -121,7 +122,9 @@ const formatTime = seconds => {
   const formattedSeconds = currentSeconds < 10 ? `0${currentSeconds}` : currentSeconds;
   return `${minutes}:${formattedSeconds}`;
 };
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = (0, _react2.createListCollection)({
+  items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"]
+});
 const Controls = _ref => {
   let {
     src,
@@ -259,7 +262,7 @@ const Controls = _ref => {
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSelectRoot, {
-        items: speedValues,
+        collection: speedValues,
         value: [speedValue.toString()],
         onValueChange: details => setSpeedValue(parseFloat(details.value[0])),
         positioning: {
@@ -282,7 +285,7 @@ const Controls = _ref => {
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectPositioner, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectContent, {
-            children: speedValues.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
+            children: speedValues.items.map(speed => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItem, {
               item: speed,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SelectItemText, {
                 children: [speed, "x"]

package/lib/Embed/UuDisclaimerEmbed.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactI18next = require("react-i18next");
 var _common = require("@ndla/icons/common");
 var _primitives = require("@ndla/primitives");
 var _safelink = require("@ndla/safelink");
@@ -30,14 +29,16 @@ const Disclaimer = (0, _jsx2.styled)("div", {
     textStyle: "body.medium"
   }
 });
+const StyledSafeLink = (0, _jsx2.styled)(_safelink.SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall"
+  }
+});
 const UuDisclaimerEmbed = _ref => {
   let {
     embed,
     children
   } = _ref;
-  const {
-    t
-  } = (0, _reactI18next.useTranslation)();
   if (embed.status === "error") {
     return null;
   }
@@ -45,13 +46,11 @@ const UuDisclaimerEmbed = _ref => {
     embedData,
     data
   } = embed;
-  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [` ${t("uuDisclaimer.alternative")} `, /*#__PURE__*/(0, _jsxRuntime.jsx)(_safelink.SafeLink, {
-      to: data.disclaimerLink.href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      children: data.disclaimerLink.text
-    })]
+  const disclaimerLink = data?.disclaimerLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSafeLink, {
+    to: data.disclaimerLink.href,
+    target: "_blank",
+    rel: "noopener noreferrer",
+    children: data.disclaimerLink.text
   }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     role: "region",

package/lib/KeyFigure/KeyFigure.js

@@ -21,7 +21,11 @@ const ContentWrapper = (0, _jsx2.styled)("div", {
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    gap: "xsmall",
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge"
+    }
   }
 });
 const StyledImage = (0, _jsx2.styled)("img", {

package/lib/TagSelector/TagSelector.d.ts

@@ -6,10 +6,10 @@
  *
  */
 /// <reference types="react" />
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import { ComboboxControlProps, ComboboxInputProps, ComboboxRootProps, TagsInputControlProps, TagsInputInputProps, TagsInputRootProps } from "@ndla/primitives";
-export type TagSelectorRootProps<T extends ComboboxCollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
-export declare const TagSelectorRoot: <T extends ComboboxCollectionItem>({ allowCustomValue, multiple, selectionBehavior, editable, addOnPaste, onValueChange, children, value, translations, ...rest }: TagSelectorRootProps<T>) => import("react/jsx-runtime").JSX.Element;
+export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
+export declare const TagSelectorRoot: <T extends unknown>({ allowCustomValue, multiple, selectionBehavior, editable, addOnPaste, onValueChange, children, value, translations, ...rest }: TagSelectorRootProps<T>) => import("react/jsx-runtime").JSX.Element;
 export type TagSelectorControlProps = ComboboxControlProps & TagsInputControlProps;
 export declare const TagSelectorLabel: ({ textStyle, fontWeight, ...props }: import("@ndla/primitives").ComboboxLabelProps) => import("react/jsx-runtime").JSX.Element;
 export declare const TagSelectorItemInput: import("react").ForwardRefExoticComponent<import("@ark-ui/react").TagsInputItemInputProps & {

package/lib/i18n/useComponentTranslations.d.ts

@@ -5,15 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { ComboboxCollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
 import { TagSelectorRootProps } from "../TagSelector/TagSelector";
 type DeepPartial<T> = {
     [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
 };
 export declare const useTagsInputTranslations: (translations?: Partial<TagsInputRootProps["translations"]>) => TagsInputRootProps["translations"];
-export declare const useComboboxTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<ComboboxRootProps<T>["translations"]>) => ComboboxRootProps<T>["translations"];
-export declare const useTagSelectorTranslations: <T extends ComboboxCollectionItem>(translations?: Partial<TagSelectorRootProps<T>["translations"]>) => TagSelectorRootProps<T>["translations"];
+export declare const useComboboxTranslations: <T extends unknown>(translations?: Partial<ComboboxRootProps<T>["translations"]>) => ComboboxRootProps<T>["translations"];
+export declare const useTagSelectorTranslations: <T extends unknown>(translations?: Partial<TagSelectorRootProps<T>["translations"]>) => TagSelectorRootProps<T>["translations"];
 export declare const usePaginationTranslations: (translations?: Partial<PaginationRootProps["translations"]>) => PaginationRootProps["translations"];
 interface AudioSearchTranslations {
     searchPlaceholder: string;

package/lib/index.d.ts

@@ -48,7 +48,7 @@ export { Grid, GridParallaxItem } from "./Grid";
 export type { GridType } from "./Grid";
 export { Gloss, GlossExample } from "./Gloss";
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
-export type { Article as ArticleType } from "./types";
+export type { Article as ArticleType, HeadingLevel } from "./types";
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
 export { ZendeskButton } from "./ZendeskButton/ZendeskButton";
 export type { ZendeskButtonProps } from "./ZendeskButton/ZendeskButton";

package/lib/locale/messages-en.d.ts

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-en.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/locale/messages-nb.d.ts

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nb.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/locale/messages-nn.d.ts

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-nn.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/lib/locale/messages-se.d.ts

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-se.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/lib/locale/messages-sma.d.ts

@@ -1394,9 +1394,6 @@ declare const messages: {
             pinyin: string;
         };
     };
-    uuDisclaimer: {
-        alternative: string;
-    };
     wordClass: {
         [x: string]: string;
     };

package/lib/locale/messages-sma.js

@@ -1411,9 +1411,6 @@ const messages = {
       pinyin: "Pinyin"
     }
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen"
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.39-alpha.0",
+  "version": "56.0.41-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -35,8 +35,8 @@
     "@ndla/core": "^5.0.2",
     "@ndla/icons": "^8.0.27-alpha.0",
     "@ndla/licenses": "^8.0.3-alpha.0",
-    "@ndla/primitives": "^1.0.36-alpha.0",
-    "@ndla/safelink": "^7.0.36-alpha.0",
+    "@ndla/primitives": "^1.0.37-alpha.0",
+    "@ndla/safelink": "^7.0.37-alpha.0",
     "@ndla/styled-system": "^0.0.23",
     "@ndla/util": "^5.0.0-alpha.0",
     "html-react-parser": "^5.1.8",
@@ -58,5 +58,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84234a46743d9d044f220e90e6710e2da307d65d"
+  "gitHead": "29f766c461881909c892102640cd09944f64d694"
 }

package/src/Article/Article.tsx

@@ -113,6 +113,7 @@ const StyledStack = styled(Stack, {
 interface ArticleTitleProps {
   heartButton?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
   lang?: string;
@@ -127,6 +128,7 @@ export const ArticleTitle = ({
   lang,
   id,
   introduction,
+  contentTypeLabel,
   competenceGoals,
 }: ArticleTitleProps) => {
   return (
@@ -134,7 +136,7 @@ export const ArticleTitle = ({
       <ArticleHGroup>
         {(!!contentType || !!heartButton) && (
           <StyledStack justify="space-between" align="center" direction="row" gap="small">
-            {!!contentType && <ContentTypeBadgeNew contentType={contentType} />}
+            {!!contentType && <ContentTypeBadgeNew contentType={contentType}>{contentTypeLabel}</ContentTypeBadgeNew>}
             {heartButton}
           </StyledStack>
         )}
@@ -157,6 +159,7 @@ interface Props {
   article: ArticleType;
   licenseBox?: ReactNode;
   contentType?: ContentType;
+  contentTypeLabel?: ReactNode;
   children?: ReactNode;
   competenceGoals?: ReactNode;
   id: string;
@@ -169,6 +172,7 @@ export const Article = ({
   licenseBox,
   children,
   competenceGoals,
+  contentTypeLabel,
   id,
   heartButton,
   lang,
@@ -188,6 +192,7 @@ export const Article = ({
         introduction={introduction}
         competenceGoals={competenceGoals}
         lang={lang}
+        contentTypeLabel={contentTypeLabel}
       />
       <ArticleContent>{content}</ArticleContent>
       <ArticleFooter>

package/src/AudioPlayer/Controls.tsx

@@ -8,7 +8,7 @@
 
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { SliderValueChangeDetails } from "@ark-ui/react";
+import { type SliderValueChangeDetails, createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line } from "@ndla/icons/action";
 import { PlayFill, PauseLine, VolumeUpFill } from "@ndla/icons/common";
 import { CheckLine } from "@ndla/icons/editor";
@@ -152,7 +152,7 @@ const formatTime = (seconds: number) => {
   return `${minutes}:${formattedSeconds}`;
 };
 
-const speedValues = ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"];
+const speedValues = createListCollection({ items: ["0.5", "0.75", "1", "1.25", "1.5", "1.75", "2"] });
 
 interface Props {
   src: string;
@@ -291,7 +291,7 @@ const Controls = ({ src, title }: Props) => {
           </StyledText>
         </ProgressWrapper>
         <StyledSelectRoot
-          items={speedValues}
+          collection={speedValues}
           value={[speedValue.toString()]}
           onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
           positioning={{ placement: "top" }}
@@ -310,7 +310,7 @@ const Controls = ({ src, title }: Props) => {
           </SelectControl>
           <SelectPositioner>
             <SelectContent>
-              {speedValues.map((speed) => (
+              {speedValues.items.map((speed) => (
                 <SelectItem key={speed} item={speed}>
                   <SelectItemText>{speed}x</SelectItemText>
                   <SelectItemIndicator>

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -7,7 +7,6 @@
  */
 
 import { ReactNode } from "react";
-import { useTranslation } from "react-i18next";
 import { InformationLine } from "@ndla/icons/common";
 import { MessageBox } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
@@ -31,10 +30,13 @@ const Disclaimer = styled("div", {
     textStyle: "body.medium",
   },
 });
+const StyledSafeLink = styled(SafeLink, {
+  base: {
+    paddingInlineStart: "4xsmall",
+  },
+});
 
 const UuDisclaimerEmbed = ({ embed, children }: Props) => {
-  const { t } = useTranslation();
-
   if (embed.status === "error") {
     return null;
   }
@@ -42,12 +44,9 @@ const UuDisclaimerEmbed = ({ embed, children }: Props) => {
   const { embedData, data } = embed;
 
   const disclaimerLink = data?.disclaimerLink ? (
-    <>
-      {` ${t("uuDisclaimer.alternative")} `}
-      <SafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
-        {data.disclaimerLink.text}
-      </SafeLink>
-    </>
+    <StyledSafeLink to={data.disclaimerLink.href} target="_blank" rel="noopener noreferrer">
+      {data.disclaimerLink.text}
+    </StyledSafeLink>
   ) : null;
 
   return (

package/src/Grid/Grid.stories.tsx

@@ -50,7 +50,11 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(0).map((_, idx) => {
     const args = keyFigureArgs[idx % keyFigureArgs.length];
-    return <Plain key={idx} {...args} />;
+    return (
+      <div key={idx} data-type="grid-cell" data-parallax-cell="false">
+        <Plain key={idx} {...args} />
+      </div>
+    );
   });
   return <Grid {...args}>{items}</Grid>;
 };
@@ -58,14 +62,16 @@ export const GridKeyPerformanceStory: StoryFn<typeof Grid> = ({ ...args }) => {
 export const GridBlogPostStory: StoryFn<typeof Grid> = ({ ...args }) => {
   const columns = args.columns === "2x2" ? 4 : parseInt(args.columns);
   const items = new Array(columns).fill(
-    <BlogPostStory
-      metaImage={BlogPostStory.args?.metaImage!}
-      title={BlogPostStory.args?.title!}
-      size={"normal"}
-      headingLevel={BlogPostStory.args?.headingLevel}
-      url={BlogPostStory.args?.url!}
-      author={BlogPostStory.args?.author}
-    />,
+    <div data-type="grid-cell" data-parallax-cell="false">
+      <BlogPostStory
+        metaImage={BlogPostStory.args?.metaImage!}
+        title={BlogPostStory.args?.title!}
+        size={"normal"}
+        headingLevel={BlogPostStory.args?.headingLevel}
+        url={BlogPostStory.args?.url!}
+        author={BlogPostStory.args?.author}
+      />
+    </div>,
   );
   return <Grid {...args}>{items}</Grid>;
 };

package/src/KeyFigure/KeyFigure.tsx

@@ -15,6 +15,11 @@ const ContentWrapper = styled("div", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
+    gap: "xsmall",
+
+    "&:not(:has(> img))": {
+      paddingBlock: "xxlarge",
+    },
   },
 });
 

package/src/TagSelector/TagSelector.stories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useState } from "react";
-import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
+import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
 
 import { Meta, StoryFn } from "@storybook/react";
 import { CloseLine } from "@ndla/icons/action";
@@ -63,11 +63,13 @@ export const Default: StoryFn<typeof TagSelectorRoot> = ({ translations, ...args
     setOptions(filtered);
   };
 
+  const collection = createListCollection({ items: options });
+
   return (
     <TagSelectorRoot
       {...args}
       value={value}
-      items={options}
+      collection={collection}
       onInputValueChange={handleChange}
       onValueChange={(details) => setValue(details.value)}
       translations={componentTranslations}

package/src/TagSelector/TagSelector.tsx

@@ -7,7 +7,7 @@
  */
 
 import { forwardRef, useEffect, useId, useRef } from "react";
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import { ComboboxContext, useTagsInputContext } from "@ark-ui/react";
 import { CloseLine } from "@ndla/icons/action";
 import {
@@ -34,9 +34,9 @@ import {
 } from "@ndla/primitives";
 import { contains } from "@ndla/util";
 
-export type TagSelectorRootProps<T extends ComboboxCollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
+export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
 
-export const TagSelectorRoot = <T extends ComboboxCollectionItem>({
+export const TagSelectorRoot = <T extends CollectionItem>({
   allowCustomValue = true,
   multiple = true,
   selectionBehavior = "clear",

package/src/i18n/useComponentTranslations.ts

@@ -7,7 +7,7 @@
  */
 
 import { useTranslation } from "react-i18next";
-import type { ComboboxCollectionItem } from "@ark-ui/react";
+import type { CollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps } from "@ndla/primitives";
 import { TagSelectorRootProps } from "../TagSelector/TagSelector";
 
@@ -33,7 +33,7 @@ export const useTagsInputTranslations = (
   };
 };
 
-export const useComboboxTranslations = <T extends ComboboxCollectionItem>(
+export const useComboboxTranslations = <T extends CollectionItem>(
   translations?: Partial<ComboboxRootProps<T>["translations"]>,
 ): ComboboxRootProps<T>["translations"] => {
   const { t } = useTranslation("translation", { keyPrefix: "component.combobox" });
@@ -45,7 +45,7 @@ export const useComboboxTranslations = <T extends ComboboxCollectionItem>(
   };
 };
 
-export const useTagSelectorTranslations = <T extends ComboboxCollectionItem>(
+export const useTagSelectorTranslations = <T extends CollectionItem>(
   translations?: Partial<TagSelectorRootProps<T>["translations"]>,
 ): TagSelectorRootProps<T>["translations"] => {
   const tagsInputTranslations = useTagsInputTranslations();

package/src/index.ts

@@ -142,7 +142,7 @@ export { Gloss, GlossExample } from "./Gloss";
 
 export { LinkBlock, LinkBlockSection } from "./LinkBlock";
 
-export type { Article as ArticleType } from "./types";
+export type { Article as ArticleType, HeadingLevel } from "./types";
 
 export { CodeBlock, codeLanguageOptions } from "./CodeBlock";
 

package/src/locale/messages-en.ts

@@ -1437,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "You can find alternative content in the article",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjective",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nb.ts

@@ -1437,9 +1437,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-nn.ts

@@ -1436,9 +1436,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhald i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",

package/src/locale/messages-se.ts

@@ -1439,9 +1439,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiivvat",
     [wordClass.wordClass.adverb]: "Advearba",

package/src/locale/messages-sma.ts

@@ -1441,9 +1441,6 @@ const messages = {
       pinyin: "Pinyin",
     },
   },
-  uuDisclaimer: {
-    alternative: "Du kan finne alternativt innhold i artikkelen",
-  },
   wordClass: {
     [wordClass.wordClass.adjective]: "Adjektiv",
     [wordClass.wordClass.adverb]: "Adverb",