@ndla/ui 56.0.77-alpha.0 → 56.0.79-alpha.0

package/dist/panda.buildinfo.json

@@ -99,7 +99,6 @@
       "height]___[value:surface.3xsmall",
       "minWidth]___[value:small",
       "paddingInline]___[value:small",
-      "srOnly]___[value:true",
       "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-start]___[cond:mobileDown",
       "justifyContent]___[value:center]___[cond:mobileDown",

package/dist/styles.css

@@ -321,18 +321,6 @@
     padding-inline: var(--spacing-small);
 }
 
-  .sr_true {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
   .c_inherit {
     color: inherit;
 }

package/es/Article/ArticleByline.js

@@ -160,19 +160,19 @@ export const ArticleBylineAccordionItem = /*#__PURE__*/forwardRef((_ref2, ref) =
     value: value,
     ref: ref,
     ...props,
-    children: [/*#__PURE__*/_jsxs(AccordionItemTrigger, {
-      children: [/*#__PURE__*/_jsx(Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "label.medium",
-        fontWeight: "bold",
-        children: /*#__PURE__*/_jsx("h2", {
-          children: accordionTitle
+    children: [/*#__PURE__*/_jsx(Heading, {
+      asChild: true,
+      consumeCss: true,
+      textStyle: "label.medium",
+      fontWeight: "bold",
+      children: /*#__PURE__*/_jsx("h2", {
+        children: /*#__PURE__*/_jsxs(AccordionItemTrigger, {
+          children: [accordionTitle, /*#__PURE__*/_jsx(AccordionItemIndicator, {
+            asChild: true,
+            children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
+          })]
         })
-      }), /*#__PURE__*/_jsx(AccordionItemIndicator, {
-        asChild: true,
-        children: /*#__PURE__*/_jsx(ArrowDownShortLine, {})
-      })]
+      })
     }), /*#__PURE__*/_jsx(AccordionItemContent, {
       children: children
     })]

package/es/AudioPlayer/Controls.js

@@ -12,7 +12,6 @@ import { createListCollection } from "@ark-ui/react";
 import { Replay15Line, Forward15Line, PlayFill, PauseLine, VolumeUpFill, CheckLine } from "@ndla/icons";
 import { Button, FieldRoot, IconButton, PopoverContent, PopoverRoot, PopoverTrigger, SelectContent, SelectControl, SelectItem, SelectItemIndicator, SelectItemText, SelectLabel, SelectRoot, SelectTrigger, SliderControl, SliderHiddenInput, SliderLabel, SliderRange, SliderRoot, SliderThumb, SliderTrack, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { visuallyHidden } from "@ndla/styled-system/patterns";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const ControlsWrapper = styled("div", {
   base: {
@@ -230,7 +229,7 @@ const Controls = _ref => {
           children: /*#__PURE__*/_jsx("div", {
             children: formatTime(currentTime)
           })
-        }), /*#__PURE__*/_jsx(SliderRoot, {
+        }), /*#__PURE__*/_jsxs(SliderRoot, {
           value: [audioRef.current?.currentTime ?? 0],
           defaultValue: [0],
           step: 1,
@@ -240,14 +239,17 @@ const Controls = _ref => {
             start: formatTime(Math.round(value.value)),
             end: formatTime(Math.round(audioRef.current?.duration ?? 0))
           }),
-          children: /*#__PURE__*/_jsxs(SliderControl, {
+          children: [/*#__PURE__*/_jsx(SliderLabel, {
+            srOnly: true,
+            children: t("audio.progressBar")
+          }), /*#__PURE__*/_jsxs(SliderControl, {
             children: [/*#__PURE__*/_jsx(SliderTrack, {
               children: /*#__PURE__*/_jsx(SliderRange, {})
             }), /*#__PURE__*/_jsx(SliderThumb, {
               index: 0,
               children: /*#__PURE__*/_jsx(SliderHiddenInput, {})
             })]
-          })
+          })]
         }), /*#__PURE__*/_jsx(StyledText, {
           textStyle: "label.medium",
           asChild: true,
@@ -265,7 +267,7 @@ const Controls = _ref => {
             placement: "top"
           },
           children: [/*#__PURE__*/_jsx(SelectLabel, {
-            css: visuallyHidden.raw(),
+            srOnly: true,
             children: t("audio.controls.selectSpeed")
           }), /*#__PURE__*/_jsx(SelectControl, {
             children: /*#__PURE__*/_jsx(SelectTrigger, {
@@ -311,7 +313,7 @@ const Controls = _ref => {
             step: 1,
             onValueChange: handleVolumeSliderChange,
             children: [/*#__PURE__*/_jsx(SliderLabel, {
-              css: visuallyHidden.raw(),
+              srOnly: true,
               children: t("audio.controls.adjustVolume")
             }), /*#__PURE__*/_jsxs(StyledSliderControl, {
               children: [/*#__PURE__*/_jsx(SliderTrack, {

package/es/Breadcrumb/BreadcrumbItem.js

@@ -34,7 +34,7 @@ const BreadcrumbItem = /*#__PURE__*/forwardRef((_ref, ref) => {
     item,
     totalCount
   } = _ref;
-  const liRef = useRef();
+  const liRef = useRef(null);
   useImperativeHandle(ref, () => ({
     setMaxWidth: maxWidth => {
       liRef.current.children[0].style.maxWidth = maxWidth;

package/es/locale/messages-en.js

@@ -817,6 +817,7 @@ const messages = {
     pause: "Pause",
     download: "Download audio",
     reuse: "Use audio",
+    progressBar: "Progress bar",
     error: {
       url: "Error loading the audio.",
       caption: "Sorry, an error occurred while loading the audio."

package/es/locale/messages-nb.js

@@ -817,6 +817,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Beklager, en feil oppstod ved lasting av lydfil."

package/es/locale/messages-nn.js

@@ -817,6 +817,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Framdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Orsak, ein feil oppstod ved lasting av lydfil."

package/es/locale/messages-se.js

@@ -817,6 +817,7 @@ const messages = {
     pause: "Boatkke",
     download: "Viečča jietnafiilla",
     reuse: "Geavat jietnafiilla",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Boasttuvuohta jietnafiilla viežžamis.",
       caption: "Šállošat, boasttuvuohta čuožžilii jietnafiilla viežžamis."

package/es/locale/messages-sma.js

@@ -817,6 +817,7 @@ const messages = {
     pause: "Pause",
     download: "Veedtjh tjoeje-fijlem",
     reuse: "Nuhtjh tjoeje-fijlem",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Fiejlie tjoeje-veedtjemisnie.",
       caption: "Gaatesjen, fiejlie sjïdti tjoeje-veedtjemisnie."

package/lib/Article/Article.d.ts

@@ -11,20 +11,12 @@ import type { Article as ArticleType } from "../types";
 export declare const ArticleContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
-export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-} & {
+export declare const ArticleWrapper: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss, "ref"> & import("react").RefAttributes<HTMLElement>>;
-export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
-export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleHGroup: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleHeader: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const ArticleFooter: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 interface ArticleTitleProps {
     heartButton?: ReactNode;
     contentType?: ContentType;

package/lib/Article/ArticleByline.js

@@ -167,19 +167,19 @@ const ArticleBylineAccordionItem = exports.ArticleBylineAccordionItem = /*#__PUR
     value: value,
     ref: ref,
     ...props,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.AccordionItemTrigger, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
-        asChild: true,
-        consumeCss: true,
-        textStyle: "label.medium",
-        fontWeight: "bold",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
-          children: accordionTitle
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Heading, {
+      asChild: true,
+      consumeCss: true,
+      textStyle: "label.medium",
+      fontWeight: "bold",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.AccordionItemTrigger, {
+          children: [accordionTitle, /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionItemIndicator, {
+            asChild: true,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {})
+          })]
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionItemIndicator, {
-        asChild: true,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.ArrowDownShortLine, {})
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.AccordionItemContent, {
       children: children
     })]

package/lib/AudioPlayer/Controls.js

@@ -10,7 +10,6 @@ var _react2 = require("@ark-ui/react");
 var _icons = require("@ndla/icons");
 var _primitives = require("@ndla/primitives");
 var _jsx2 = require("@ndla/styled-system/jsx");
-var _patterns = require("@ndla/styled-system/patterns");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Copyright (c) 2021-present, NDLA.
@@ -236,7 +235,7 @@ const Controls = _ref => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             children: formatTime(currentTime)
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRoot, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderRoot, {
           value: [audioRef.current?.currentTime ?? 0],
           defaultValue: [0],
           step: 1,
@@ -246,14 +245,17 @@ const Controls = _ref => {
             start: formatTime(Math.round(value.value)),
             end: formatTime(Math.round(audioRef.current?.duration ?? 0))
           }),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderControl, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
+            srOnly: true,
+            children: t("audio.progressBar")
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_primitives.SliderControl, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderRange, {})
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderThumb, {
               index: 0,
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderHiddenInput, {})
             })]
-          })
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledText, {
           textStyle: "label.medium",
           asChild: true,
@@ -271,7 +273,7 @@ const Controls = _ref => {
             placement: "top"
           },
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectLabel, {
-            css: _patterns.visuallyHidden.raw(),
+            srOnly: true,
             children: t("audio.controls.selectSpeed")
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectControl, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SelectTrigger, {
@@ -317,7 +319,7 @@ const Controls = _ref => {
             step: 1,
             onValueChange: handleVolumeSliderChange,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderLabel, {
-              css: _patterns.visuallyHidden.raw(),
+              srOnly: true,
               children: t("audio.controls.adjustVolume")
             }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledSliderControl, {
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SliderTrack, {

package/lib/Breadcrumb/BreadcrumbItem.js

@@ -40,7 +40,7 @@ const BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     item,
     totalCount
   } = _ref;
-  const liRef = (0, _react.useRef)();
+  const liRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
     setMaxWidth: maxWidth => {
       liRef.current.children[0].style.maxWidth = maxWidth;

package/lib/Concept/Concept.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import { type ComponentPropsWithRef, type ReactNode } from "react";
-import type { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { ConceptVisualElementMeta } from "@ndla/types-embed";
 export interface ConceptProps extends ComponentPropsWithRef<"figure"> {
     copyright?: ConceptCopyright;

package/lib/ContactBlock/ContactBlock.d.ts

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 export type ContactBlockBackground = "strong" | "moderate" | "subtle";
 export declare const contactBlockBackgrounds: ContactBlockBackground[];
 interface Props {
-    image?: IImageMetaInformationV3;
+    image?: IImageMetaInformationV3DTO;
     jobTitle: string;
     description: string;
     backgroundColor?: ContactBlockBackground;

package/lib/Embed/ConceptInlineTriggerButton.d.ts

@@ -5,6 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare const ConceptInlineTriggerButton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>, {}>;
+export declare const ConceptInlineTriggerButton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>, {}>;

package/lib/Embed/InlineTriggerButton.d.ts

@@ -5,6 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-export declare const InlineTriggerButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const InlineTriggerButton: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;

package/lib/Embed/types.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { ElementType } from "react";
-import type { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { EmbedMetaData } from "@ndla/types-embed";
 export type HeartButtonType = ElementType<{
     embed: Extract<EmbedMetaData, {
@@ -18,6 +18,6 @@ export type EmbedParameter<T extends EmbedMetaData["resource"]> = Partial<Extrac
     resource: T;
 }>>;
 export type CanonicalUrlFuncs = {
-    image?: (image: IImageMetaInformationV3) => string;
+    image?: (image: IImageMetaInformationV3DTO) => string;
 };
 export type RenderContext = "article" | "embed";

package/lib/FileList/FileList.d.ts

@@ -9,8 +9,6 @@ import { type ComponentPropsWithoutRef } from "react";
 interface Props extends ComponentPropsWithoutRef<"div"> {
 }
 export declare const FileListWrapper: import("@ndla/styled-system/types").StyledComponent<"div", {}>;
-export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
-    ref?: ((instance: HTMLLIElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLLIElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const FileListItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export declare const FileListEmbed: ({ children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/Gloss/Gloss.d.ts

@@ -6,7 +6,7 @@
  *
  */
 import type { StyledVariantProps } from "@ndla/styled-system/types";
-import type { IGlossData } from "@ndla/types-backend/concept-api";
+import type { IGlossDataDTO } from "@ndla/types-backend/concept-api";
 declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("@ndla/primitives").AccordionItemProps & import("react").RefAttributes<HTMLDivElement>>, {
     variant?: "simple" | "bordered" | undefined;
 }>;
@@ -16,7 +16,7 @@ export interface Props {
         title: string;
         language: string;
     };
-    glossData?: IGlossData;
+    glossData?: IGlossDataDTO;
     audio?: {
         title: string;
         src?: string;

package/lib/Gloss/GlossExample.d.ts

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import type { IGlossExample } from "@ndla/types-backend/concept-api";
+import type { IGlossExampleDTO } from "@ndla/types-backend/concept-api";
 interface Props {
-    examples: IGlossExample[];
+    examples: IGlossExampleDTO[];
     originalLanguage: string | undefined;
 }
 declare const GlossExample: ({ examples, originalLanguage }: Props) => import("react/jsx-runtime").JSX.Element;

package/lib/KeyFigure/KeyFigure.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-interface Props {
+export interface Props {
     image?: {
         src?: string;
         alt?: string;

package/lib/LicenseByline/EmbedByline.d.ts

@@ -6,10 +6,10 @@
  *
  */
 import { type ReactNode } from "react";
-import type { ICopyright as ArticleCopyright } from "@ndla/types-backend/article-api";
-import type { ICopyright as AudioCopyright } from "@ndla/types-backend/audio-api";
-import type { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
-import type { ICopyright as ImageCopyright } from "@ndla/types-backend/image-api";
+import type { ICopyrightDTO as ArticleCopyright } from "@ndla/types-backend/article-api";
+import type { ICopyrightDTO as AudioCopyright } from "@ndla/types-backend/audio-api";
+import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import type { ICopyrightDTO as ImageCopyright } from "@ndla/types-backend/image-api";
 import type { BrightcoveCopyright } from "@ndla/types-embed";
 interface BaseProps {
     description?: ReactNode;

package/lib/RelatedArticleList/RelatedArticleList.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  */
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type ComponentPropsWithoutRef, type ReactElement, type ReactNode } from "react";
 import type { HeadingLevel } from "../types";
 interface RelatedArticleProps {
     title: string;
@@ -17,7 +17,7 @@ interface RelatedArticleProps {
 }
 export declare const RelatedArticle: ({ title, introduction, to, linkInfo, target, type, }: RelatedArticleProps) => import("react/jsx-runtime").JSX.Element;
 interface Props extends ComponentPropsWithoutRef<"section"> {
-    children?: JSX.Element[];
+    children?: ReactElement[];
     articleCount?: number;
     headingLevel?: HeadingLevel;
     headingButtons?: ReactNode;

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

@@ -807,6 +807,7 @@ declare const messages: {
         pause: string;
         download: string;
         reuse: string;
+        progressBar: string;
         error: {
             url: string;
             caption: string;

package/lib/locale/messages-en.js

@@ -824,6 +824,7 @@ const messages = {
     pause: "Pause",
     download: "Download audio",
     reuse: "Use audio",
+    progressBar: "Progress bar",
     error: {
       url: "Error loading the audio.",
       caption: "Sorry, an error occurred while loading the audio."

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

@@ -807,6 +807,7 @@ declare const messages: {
         pause: string;
         download: string;
         reuse: string;
+        progressBar: string;
         error: {
             url: string;
             caption: string;

package/lib/locale/messages-nb.js

@@ -824,6 +824,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Beklager, en feil oppstod ved lasting av lydfil."

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

@@ -807,6 +807,7 @@ declare const messages: {
         pause: string;
         download: string;
         reuse: string;
+        progressBar: string;
         error: {
             url: string;
             caption: string;

package/lib/locale/messages-nn.js

@@ -824,6 +824,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Framdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Orsak, ein feil oppstod ved lasting av lydfil."

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

@@ -807,6 +807,7 @@ declare const messages: {
         pause: string;
         download: string;
         reuse: string;
+        progressBar: string;
         error: {
             url: string;
             caption: string;

package/lib/locale/messages-se.js

@@ -824,6 +824,7 @@ const messages = {
     pause: "Boatkke",
     download: "Viečča jietnafiilla",
     reuse: "Geavat jietnafiilla",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Boasttuvuohta jietnafiilla viežžamis.",
       caption: "Šállošat, boasttuvuohta čuožžilii jietnafiilla viežžamis."

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

@@ -807,6 +807,7 @@ declare const messages: {
         pause: string;
         download: string;
         reuse: string;
+        progressBar: string;
         error: {
             url: string;
             caption: string;

package/lib/locale/messages-sma.js

@@ -824,6 +824,7 @@ const messages = {
     pause: "Pause",
     download: "Veedtjh tjoeje-fijlem",
     reuse: "Nuhtjh tjoeje-fijlem",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Fiejlie tjoeje-veedtjemisnie.",
       caption: "Gaatesjen, fiejlie sjïdti tjoeje-veedtjemisnie."

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/ui",
-  "version": "56.0.77-alpha.0",
+  "version": "56.0.79-alpha.0",
   "description": "UI component library for NDLA",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,13 +33,13 @@
   ],
   "dependencies": {
     "@ndla/core": "^5.0.3",
-    "@ndla/icons": "^8.0.47-alpha.0",
+    "@ndla/icons": "^8.0.48-alpha.0",
     "@ndla/licenses": "^8.0.5-alpha.0",
-    "@ndla/primitives": "^1.0.61-alpha.0",
-    "@ndla/safelink": "^7.0.62-alpha.0",
+    "@ndla/primitives": "^1.0.63-alpha.0",
+    "@ndla/safelink": "^7.0.64-alpha.0",
     "@ndla/styled-system": "^0.0.29",
-    "@ndla/util": "^5.0.2-alpha.0",
-    "html-react-parser": "^5.1.8",
+    "@ndla/util": "^5.0.4-alpha.0",
+    "html-react-parser": "^5.1.19",
     "i18next-browser-languagedetector": "^7.1.0"
   },
   "peerDependencies": {
@@ -51,12 +51,12 @@
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.48",
-    "@ndla/types-backend": "^0.2.86",
-    "@ndla/types-embed": "^5.0.5-alpha.0",
+    "@ndla/types-backend": "^1.0.1",
+    "@ndla/types-embed": "^5.0.6-alpha.0",
     "@pandacss/dev": "^0.48.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb87f73d8b8c67d7a39a3e10cc06ed55325798e4"
+  "gitHead": "e1109fda9f34b6ab504a45ce844b2f7fbfa374a9"
 }

package/src/Article/ArticleByline.tsx

@@ -198,14 +198,16 @@ export const ArticleBylineAccordionItem = forwardRef<HTMLDivElement, ArticleByli
   ({ value, accordionTitle, children, ...props }, ref) => {
     return (
       <AccordionItem value={value} ref={ref} {...props}>
-        <AccordionItemTrigger>
-          <Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">
-            <h2>{accordionTitle}</h2>
-          </Heading>
-          <AccordionItemIndicator asChild>
-            <ArrowDownShortLine />
-          </AccordionItemIndicator>
-        </AccordionItemTrigger>
+        <Heading asChild consumeCss textStyle="label.medium" fontWeight="bold">
+          <h2>
+            <AccordionItemTrigger>
+              {accordionTitle}
+              <AccordionItemIndicator asChild>
+                <ArrowDownShortLine />
+              </AccordionItemIndicator>
+            </AccordionItemTrigger>
+          </h2>
+        </Heading>
         <AccordionItemContent>{children}</AccordionItemContent>
       </AccordionItem>
     );

package/src/AudioPlayer/Controls.tsx

@@ -35,7 +35,6 @@ import {
   Text,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import { visuallyHidden } from "@ndla/styled-system/patterns";
 
 const ControlsWrapper = styled("div", {
   base: {
@@ -278,6 +277,7 @@ const Controls = ({ src, title }: Props) => {
               })
             }
           >
+            <SliderLabel srOnly>{t("audio.progressBar")}</SliderLabel>
             <SliderControl>
               <SliderTrack>
                 <SliderRange />
@@ -298,7 +298,7 @@ const Controls = ({ src, title }: Props) => {
             onValueChange={(details) => setSpeedValue(parseFloat(details.value[0]))}
             positioning={{ placement: "top" }}
           >
-            <SelectLabel css={visuallyHidden.raw()}>{t("audio.controls.selectSpeed")}</SelectLabel>
+            <SelectLabel srOnly>{t("audio.controls.selectSpeed")}</SelectLabel>
             <SelectControl>
               <SelectTrigger asChild>
                 <SpeedButton
@@ -338,7 +338,7 @@ const Controls = ({ src, title }: Props) => {
               step={1}
               onValueChange={handleVolumeSliderChange}
             >
-              <SliderLabel css={visuallyHidden.raw()}>{t("audio.controls.adjustVolume")}</SliderLabel>
+              <SliderLabel srOnly>{t("audio.controls.adjustVolume")}</SliderLabel>
               <StyledSliderControl>
                 <SliderTrack>
                   <SliderRange />

package/src/Breadcrumb/BreadcrumbItem.tsx

@@ -51,7 +51,7 @@ interface Props {
 }
 
 const BreadcrumbItem = forwardRef<any, Props>(({ renderItem, renderSeparator, item, totalCount }, ref) => {
-  const liRef = useRef<any>();
+  const liRef = useRef<any>(null);
 
   useImperativeHandle(ref, () => ({
     setMaxWidth: (maxWidth: number) => {

package/src/Concept/Concept.tsx

@@ -9,7 +9,7 @@
 import { type ComponentPropsWithRef, type ReactNode, forwardRef } from "react";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { ConceptVisualElementMeta } from "@ndla/types-embed";
 import { BrightcoveEmbed, ExternalEmbed, H5pEmbed, IframeEmbed, ImageEmbed } from "../Embed";
 import { EmbedByline } from "../LicenseByline/EmbedByline";

package/src/ContactBlock/ContactBlock.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from "react-i18next";
 import { Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { SystemStyleObject } from "@ndla/styled-system/types";
-import type { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import { LicenseContainerContent } from "../LicenseByline/EmbedByline";
 
 export type ContactBlockBackground = "strong" | "moderate" | "subtle";
@@ -143,7 +143,7 @@ const StyledDescription = styled(Text, {
 });
 
 interface Props {
-  image?: IImageMetaInformationV3;
+  image?: IImageMetaInformationV3DTO;
   jobTitle: string;
   description: string;
   backgroundColor?: ContactBlockBackground;

package/src/Embed/ImageEmbed.stories.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from "react";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { PageContent, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { ImageEmbedData } from "@ndla/types-embed";
 import ImageEmbed from "./ImageEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article";
@@ -27,7 +27,7 @@ const embedData: ImageEmbedData = {
   url: "https://api.test.ndla.no/image-api/v2/images/61181",
 };
 
-const metaData: IImageMetaInformationV3 = {
+const metaData: IImageMetaInformationV3DTO = {
   id: "61181",
   metaUrl: "https://api.test.ndla.no/image-api/v3/images/61181",
   title: {

package/src/Embed/types.ts

@@ -7,7 +7,7 @@
  */
 
 import type { ElementType } from "react";
-import type { IImageMetaInformationV3 } from "@ndla/types-backend/image-api";
+import type { IImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { EmbedMetaData } from "@ndla/types-embed";
 
 export type HeartButtonType = ElementType<{
@@ -19,7 +19,7 @@ export type EmbedParameter<T extends EmbedMetaData["resource"]> = Partial<
 >;
 
 export type CanonicalUrlFuncs = {
-  image?: (image: IImageMetaInformationV3) => string;
+  image?: (image: IImageMetaInformationV3DTO) => string;
 };
 
 export type RenderContext = "article" | "embed";

package/src/FactBox/FactBox.tsx

@@ -129,7 +129,7 @@ const FactBox = forwardRef<HTMLElement, Props>(
     // TODO: Remove this hack when we upgrade to React 19.
     const inertAttribute = useMemo(() => {
       return state === "closed" ? { inert: "" } : {};
-    }, [state]);
+    }, [state]) as { inert?: boolean };
 
     useEffect(() => {
       if (open !== undefined) {

package/src/Gloss/Gloss.tsx

@@ -20,7 +20,7 @@ import {
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
 import type { StyledVariantProps } from "@ndla/styled-system/types";
-import type { IGlossData, IGlossExample } from "@ndla/types-backend/concept-api";
+import type { IGlossDataDTO, IGlossExampleDTO } from "@ndla/types-backend/concept-api";
 import GlossExample from "./GlossExample";
 import SpeechControl from "../AudioPlayer/SpeechControl";
 
@@ -29,10 +29,10 @@ import SpeechControl from "../AudioPlayer/SpeechControl";
 // When a gloss is bordered there's way too much padding.
 
 const getFilteredExamples = (
-  glossData: IGlossData | undefined,
+  glossData: IGlossDataDTO | undefined,
   exampleIds: string | undefined,
   exampleLangs: string | undefined,
-): IGlossExample[][] => {
+): IGlossExampleDTO[][] => {
   if (exampleIds !== undefined || exampleLangs !== undefined) {
     const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
     const exampleLangsList = exampleLangs?.split(",") ?? [];
@@ -104,7 +104,7 @@ export interface Props {
     title: string;
     language: string;
   };
-  glossData?: IGlossData;
+  glossData?: IGlossDataDTO;
   audio?: {
     title: string;
     src?: string;

package/src/Gloss/GlossExample.tsx

@@ -9,10 +9,10 @@
 import { Fragment } from "react";
 import { Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { IGlossExample } from "@ndla/types-backend/concept-api";
+import type { IGlossExampleDTO } from "@ndla/types-backend/concept-api";
 
 interface Props {
-  examples: IGlossExample[];
+  examples: IGlossExampleDTO[];
   originalLanguage: string | undefined;
 }
 

package/src/KeyFigure/KeyFigure.stories.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
-import KeyFigure from "./KeyFigure";
+import type { Meta, StoryObj } from "@storybook/react";
+import KeyFigure, { type Props } from "./KeyFigure";
 
 const args = {
   title: "22 000+",
@@ -24,7 +24,7 @@ export default {
   args,
 } as Meta<typeof KeyFigure>;
 
-export const Plain: StoryFn<typeof KeyFigure> = ({ ...args }) => {
+export const Plain = ({ ...args }: Props) => {
   return <KeyFigure {...args} />;
 };
 

package/src/KeyFigure/KeyFigure.tsx

@@ -45,7 +45,7 @@ const SubTitleWrapper = styled("div", {
   },
 });
 
-interface Props {
+export interface Props {
   image?: {
     src?: string;
     alt?: string;

package/src/LicenseByline/EmbedByline.tsx

@@ -12,10 +12,10 @@ import { AlertLine } from "@ndla/icons";
 import { getLicenseByAbbreviation, getLicenseCredits } from "@ndla/licenses";
 import { Button, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { ICopyright as ArticleCopyright } from "@ndla/types-backend/article-api";
-import type { ICopyright as AudioCopyright } from "@ndla/types-backend/audio-api";
-import type { IDraftCopyright as ConceptCopyright } from "@ndla/types-backend/concept-api";
-import type { ICopyright as ImageCopyright } from "@ndla/types-backend/image-api";
+import type { ICopyrightDTO as ArticleCopyright } from "@ndla/types-backend/article-api";
+import type { ICopyrightDTO as AudioCopyright } from "@ndla/types-backend/audio-api";
+import type { IDraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
+import type { ICopyrightDTO as ImageCopyright } from "@ndla/types-backend/image-api";
 import type { BrightcoveCopyright } from "@ndla/types-embed";
 import { LicenseLink } from "./LicenseLink";
 

package/src/Pitch/Pitch.stories.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import type { Meta, StoryFn } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import { Pitch, type Props } from "./Pitch";
 import { ArticleContent, ArticleWrapper } from "../Article";
@@ -41,7 +41,7 @@ export default {
   ],
 } as Meta<typeof Pitch>;
 
-export const Default: StoryFn<typeof Pitch> = ({ ...args }) => {
+export const Default = ({ ...args }: Props) => {
   return (
     <Grid columns="2" background="transparent">
       <div data-type="grid-cell" data-parallax-cell="false">

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { Children, type ComponentPropsWithoutRef, type ReactNode, useMemo, useState } from "react";
+import { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ExternalLinkLine } from "@ndla/icons";
 import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
@@ -108,7 +108,7 @@ const StyledButton = styled(Button, {
 });
 
 interface Props extends ComponentPropsWithoutRef<"section"> {
-  children?: JSX.Element[];
+  children?: ReactElement[];
   articleCount?: number;
   headingLevel?: HeadingLevel;
   headingButtons?: ReactNode;

package/src/locale/messages-en.ts

@@ -827,6 +827,7 @@ const messages = {
     pause: "Pause",
     download: "Download audio",
     reuse: "Use audio",
+    progressBar: "Progress bar",
     error: {
       url: "Error loading the audio.",
       caption: "Sorry, an error occurred while loading the audio.",

package/src/locale/messages-nb.ts

@@ -828,6 +828,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Beklager, en feil oppstod ved lasting av lydfil.",

package/src/locale/messages-nn.ts

@@ -828,6 +828,7 @@ const messages = {
     pause: "Pause",
     download: "Last ned lydfil",
     reuse: "Bruk lydfil",
+    progressBar: "Framdriftsindikator",
     error: {
       url: "Feil ved lasting av lydfil.",
       caption: "Orsak, ein feil oppstod ved lasting av lydfil.",

package/src/locale/messages-se.ts

@@ -829,6 +829,7 @@ const messages = {
     pause: "Boatkke",
     download: "Viečča jietnafiilla",
     reuse: "Geavat jietnafiilla",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Boasttuvuohta jietnafiilla viežžamis.",
       caption: "Šállošat, boasttuvuohta čuožžilii jietnafiilla viežžamis.",

package/src/locale/messages-sma.ts

@@ -831,6 +831,7 @@ const messages = {
     pause: "Pause",
     download: "Veedtjh tjoeje-fijlem",
     reuse: "Nuhtjh tjoeje-fijlem",
+    progressBar: "Fremdriftsindikator",
     error: {
       url: "Fiejlie tjoeje-veedtjemisnie.",
       caption: "Gaatesjen, fiejlie sjïdti tjoeje-veedtjemisnie.",