rk-designsystem 1.3.4 → 1.4.0

package/README.md

@@ -67,8 +67,8 @@ npm install rk-designsystem
 ```
 
 > Since 1.4.0 the library declares `@digdir/designsystemet-react` and
-> `@digdir/designsystemet-css` as peer dependencies (`~1.13.2`) and requires
-> React `>=18.3.1`. npm 7+ installs peers automatically; with older
+> `@digdir/designsystemet-css` as peer dependencies (`^1.21.0`) and requires
+> React `^18.3.1`. npm 7+ installs peers automatically; with older
 > setups install them alongside the package.
 
 ### 2. Setup Layout with Font
@@ -229,7 +229,13 @@ until it has real production consumers. The breaking changes below landed in
 Button prop removals, mislabeled as a patch — 1.2.5 is deprecated.)
 
 - **Peer dependencies (1.4.0):** `@digdir/designsystemet-react` and
-  `@digdir/designsystemet-css` (`~1.13.2`) are peers; React `>=18.3.1 || ^19`.
+  `@digdir/designsystemet-css` (`^1.21.0`) are peers; React `^18.3.1 || ^19`.
+  The Digdir floor moved from `~1.13.3` to `^1.21.0`, and the library now
+  tracks the newest Digdir 1.x: consumers on 1.13 must upgrade
+  (`npm install @digdir/designsystemet-react@^1.21 @digdir/designsystemet-css@^1.21`)
+  or npm refuses to resolve the peers. Tooltip triggers keep their own
+  accessible name in 1.21 (the tooltip becomes `aria-description`), and
+  `ToggleGroup`'s `data-toggle-group` is deprecated in favour of `aria-label`.
 - **ESM-only (1.4.0):** the CommonJS/UMD entry is removed, so
   `require('rk-designsystem')` now fails explicitly. It never actually worked:
   the UMD file was parsed as ESM (the package is `"type": "module"`), and the

package/dist/components/Carousel/index.js

@@ -1,193 +1,214 @@
 "use client";
-import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { useEffect as p, useState as d, useRef as J, useCallback as h, useMemo as Q } from "react";
-import Y from "embla-carousel-react";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { useEffect as h, useState as d, useRef as se, useCallback as f, useMemo as le } from "react";
+import ne from "embla-carousel-react";
 import a from "./styles.module.css.js";
-import { ChevronLeftIcon as Z, ChevronRightIcon as V, PlayIcon as ee, PauseIcon as te } from "@navikt/aksel-icons";
-import { Button as P } from "../Button/index.js";
-import { Spinner as re } from "../SpinnerLoader/index.js";
-import { useLanguageOptional as oe } from "../../context/LanguageContext.js";
-const ae = ({
+import { ChevronLeftIcon as de, ChevronRightIcon as ce, PlayIcon as ue, PauseIcon as pe } from "@navikt/aksel-icons";
+import { Button as V } from "../Button/index.js";
+import { Spinner as he } from "../SpinnerLoader/index.js";
+import { useLanguageOptional as fe } from "../../context/LanguageContext.js";
+const ge = ({
   images: e,
-  autoPlay: l = !1,
-  autoDelay: b = 5,
-  showArrows: v = !0,
-  showDots: x = !0,
-  variant: B,
-  slidesPerView: y = 1,
-  slideSpacing: $ = 16,
-  cornerRadius: g = 0,
-  "data-color": A,
-  "data-size": F
+  autoPlay: c = !1,
+  autoDelay: z = 5,
+  showArrows: I = !0,
+  showDots: D = !0,
+  variant: G,
+  slidesPerView: C = 1,
+  slideSpacing: N = 16,
+  cornerRadius: v = 0,
+  "aria-label": _,
+  crossOrigin: H,
+  "data-color": K,
+  "data-size": U
 }) => {
-  const { t: s } = oe();
-  p(() => {
+  var T;
+  const { t: l } = fe();
+  h(() => {
     const r = "rk-carousel-inline-styles";
     if (typeof document > "u" || document.getElementById(r)) return;
-    const o = ie(a), i = document.createElement("style");
+    const o = me(a), i = document.createElement("style");
     i.id = r, i.textContent = o, document.head.prepend(i);
   }, []);
-  const R = {
+  const W = {
     loop: !0,
     align: "start",
     containScroll: "trimSnaps",
     slidesToScroll: 1
-  }, [T, t] = Y(R), [M, O] = d(0), [_, w] = d([]), [z, I] = d([]), k = J([]), D = (e ?? []).map((r) => r.src).join(`
+  }, [X, t] = ne(W), [g, q] = d(0), [J, k] = d([]), [S, j] = d([]), [L, P] = d([]), E = se([]), Q = (e ?? []).map((r) => r.src).join(`
 `);
-  p(() => {
-    I(
+  h(() => {
+    P(
       (e ?? []).map((r, o) => {
-        const i = k.current[o];
+        const i = E.current[o];
         return !!(i && i.complete && i.naturalWidth > 0);
       })
     );
-  }, [D]);
-  const N = h((r) => {
-    I((o) => {
+  }, [Q]);
+  const B = f((r) => {
+    P((o) => {
       if (o[r]) return o;
       const i = [...o];
       return i[r] = !0, i;
     });
-  }, []), C = Q(() => b * 1e3, [b]), c = h(() => {
-    t && O(t.selectedScrollSnap());
-  }, [t]), H = h((r) => t && t.scrollTo(r), [t]), K = h(() => t && t.scrollPrev(), [t]), U = h(() => t && t.scrollNext(), [t]);
-  p(() => {
+  }, []), O = le(() => z * 1e3, [z]), n = f(() => {
+    t && (q(t.selectedScrollSnap()), j(t.slidesInView()));
+  }, [t]), Y = f((r) => t && t.scrollTo(r), [t]), Z = f(() => t && t.scrollPrev(), [t]), ee = f(() => t && t.scrollNext(), [t]);
+  h(() => {
     if (t)
-      return t.on("select", c), t.on("reInit", c), w(t.scrollSnapList()), () => {
-        t.off("select", c), t.off("reInit", c);
+      return t.on("select", n), t.on("reInit", n), t.on("slidesInView", n), k(t.scrollSnapList()), j(t.slidesInView()), () => {
+        t.off("select", n), t.off("reInit", n), t.off("slidesInView", n);
       };
-  }, [t, c]), p(() => {
-    t && (t.reInit(), w(t.scrollSnapList()));
-  }, [t, e, y, $]);
-  const [f, W] = d(!1), [X, S] = d(!1), [q, L] = d(!1), j = l && !f && !X && !q;
-  p(() => {
-    if (!j || !t || !e || e.length <= 1) return;
+  }, [t, n]), h(() => {
+    t && (t.reInit(), k(t.scrollSnapList()));
+  }, [t, e, C, N]);
+  const [m, te] = d(!1), [re, A] = d(!1), [oe, F] = d(!1), x = c && !m && !re && !oe;
+  h(() => {
+    if (!x || !t || !e || e.length <= 1) return;
     const r = window.setInterval(() => {
       t.canScrollNext() && t.scrollNext();
-    }, C);
+    }, O);
     return () => {
       window.clearInterval(r);
     };
-  }, [j, C, t, e]);
-  const E = Math.max(1, y), G = `${100 / E}%`, m = $ / 2;
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      className: a.carouselContainer,
-      "data-color": A,
-      "data-size": F,
-      "data-variant": B,
-      onMouseEnter: l ? () => S(!0) : void 0,
-      onMouseLeave: l ? () => S(!1) : void 0,
-      onFocus: l ? () => L(!0) : void 0,
-      onBlur: l ? (r) => {
-        r.currentTarget.contains(r.relatedTarget) || L(!1);
-      } : void 0,
-      children: [
-        /* @__PURE__ */ n("div", { className: a.viewport, ref: T, children: /* @__PURE__ */ n(
-          "div",
-          {
-            className: a.slides,
-            style: {
-              marginLeft: `-${m}px`,
-              marginRight: `-${m}px`
-            },
-            children: e && e.length > 0 ? e.map((r, o) => /* @__PURE__ */ n(
-              "div",
-              {
-                className: a.slide,
-                style: {
-                  flex: `0 0 ${G}`,
-                  paddingLeft: `${m}px`,
-                  paddingRight: `${m}px`,
-                  borderRadius: g > 0 ? `${g}px` : void 0,
-                  overflow: "hidden"
-                  // Ensure radius clips content
-                },
-                children: /* @__PURE__ */ u("div", { className: a.slideInner, style: { borderRadius: `${g}px`, overflow: "hidden", position: "relative", width: "100%", height: "100%" }, children: [
-                  !z[o] && /* @__PURE__ */ n("div", { className: a.loaderOverlay, children: /* @__PURE__ */ n(re, { "aria-label": s("carousel.loading") }) }),
-                  /* @__PURE__ */ n(
-                    "img",
-                    {
-                      ref: (i) => {
-                        k.current[o] = i;
-                      },
-                      className: `${a.image} ${z[o] ? a.loaded : a.loadingImage}`,
-                      src: r.src,
-                      alt: r.alt,
-                      loading: o < E ? "eager" : "lazy",
-                      crossOrigin: "anonymous",
-                      onLoad: () => N(o),
-                      onError: (i) => {
-                        i.target.style.display = "none", N(o);
-                      }
-                    }
-                  )
-                ] })
+  }, [x, O, t, e]);
+  const y = Math.max(1, C), ae = `${100 / y}%`, b = N / 2, ie = (r) => S.length > 0 ? S.includes(r) : r < y, M = (e == null ? void 0 : e.length) ?? 0, R = (r) => l("carousel.slideOf").replace("{index}", String(r + 1)).replace("{total}", String(M)), p = M > 1, $ = c && p, w = D && p;
+  return (
+    // APG carousel pattern: a labelled region with the "carousel" role
+    // description, slides as labelled groups, and a live position status.
+    /* @__PURE__ */ u(
+      "div",
+      {
+        className: a.carouselContainer,
+        role: "region",
+        "aria-roledescription": "carousel",
+        "aria-label": _ ?? l("carousel.label"),
+        "data-color": K,
+        "data-size": U,
+        "data-variant": G,
+        onMouseEnter: c ? () => A(!0) : void 0,
+        onMouseLeave: c ? () => A(!1) : void 0,
+        onFocus: c ? () => F(!0) : void 0,
+        onBlur: c ? (r) => {
+          r.currentTarget.contains(r.relatedTarget) || F(!1);
+        } : void 0,
+        children: [
+          /* @__PURE__ */ s("div", { className: a.viewport, ref: X, children: /* @__PURE__ */ s(
+            "div",
+            {
+              className: a.slides,
+              style: {
+                marginLeft: `-${b}px`,
+                marginRight: `-${b}px`
               },
-              `image-${o}-${r.src}`
-            )) : /* @__PURE__ */ n("div", { className: a.slide, style: { flex: "0 0 100%" }, children: /* @__PURE__ */ n("div", { className: a.empty, children: "Ingen bilder" }) })
-          }
-        ) }),
-        (v || x && e && e.length > 1) && /* @__PURE__ */ u("div", { className: a.controls, "aria-hidden": "false", children: [
-          v && /* @__PURE__ */ u("div", { className: a.arrows, children: [
-            /* @__PURE__ */ n(
-              P,
-              {
-                variant: "primary",
-                icon: !0,
-                "aria-label": s("carousel.previousImage"),
-                onClick: K,
-                disabled: !e || e.length <= 1,
-                children: /* @__PURE__ */ n(Z, { "aria-hidden": !0 })
-              }
-            ),
-            /* @__PURE__ */ n(
-              P,
-              {
-                variant: "primary",
-                icon: !0,
-                "aria-label": s("carousel.nextImage"),
-                onClick: U,
-                disabled: !e || e.length <= 1,
-                children: /* @__PURE__ */ n(V, { "aria-hidden": !0 })
-              }
-            )
+              children: e && e.length > 0 ? e.map((r, o) => /* @__PURE__ */ s(
+                "div",
+                {
+                  className: a.slide,
+                  role: "group",
+                  "aria-roledescription": "slide",
+                  "aria-label": R(o),
+                  "aria-hidden": ie(o) ? void 0 : !0,
+                  style: {
+                    flex: `0 0 ${ae}`,
+                    paddingLeft: `${b}px`,
+                    paddingRight: `${b}px`,
+                    borderRadius: v > 0 ? `${v}px` : void 0,
+                    overflow: "hidden"
+                    // Ensure radius clips content
+                  },
+                  children: /* @__PURE__ */ u("div", { className: a.slideInner, style: { borderRadius: `${v}px`, overflow: "hidden", position: "relative", width: "100%", height: "100%" }, children: [
+                    !L[o] && /* @__PURE__ */ s("div", { className: a.loaderOverlay, children: /* @__PURE__ */ s(he, { "aria-label": l("carousel.loading") }) }),
+                    /* @__PURE__ */ s(
+                      "img",
+                      {
+                        ref: (i) => {
+                          E.current[o] = i;
+                        },
+                        className: `${a.image} ${L[o] ? a.loaded : a.loadingImage}`,
+                        src: r.src,
+                        alt: r.alt,
+                        loading: o < y ? "eager" : "lazy",
+                        crossOrigin: H,
+                        onLoad: () => B(o),
+                        onError: (i) => {
+                          i.target.style.display = "none", B(o);
+                        }
+                      }
+                    )
+                  ] })
+                },
+                `image-${o}-${r.src}`
+              )) : /* @__PURE__ */ s("div", { className: a.slide, style: { flex: "0 0 100%" }, children: /* @__PURE__ */ s("div", { className: a.empty, children: l("carousel.empty") }) })
+            }
+          ) }),
+          p && /* @__PURE__ */ u("div", { role: "status", "aria-live": x ? "off" : "polite", className: a.srOnly, children: [
+            R(g),
+            (T = e[g]) != null && T.alt ? `: ${e[g].alt}` : ""
           ] }),
-          x && e && e.length > 1 && /* @__PURE__ */ u("div", { className: a.dots, role: "group", "aria-label": s("carousel.imagePosition"), children: [
-            l && /* @__PURE__ */ n(
-              "button",
-              {
-                type: "button",
-                className: a.playPause,
-                onClick: () => W((r) => !r),
-                "aria-label": s(f ? "carousel.resumeAutoplay" : "carousel.pauseAutoplay"),
-                "aria-pressed": f,
-                children: f ? /* @__PURE__ */ n(ee, { "aria-hidden": !0 }) : /* @__PURE__ */ n(te, { "aria-hidden": !0 })
-              }
-            ),
-            _.map((r, o) => {
-              const i = o === M;
-              return /* @__PURE__ */ n(
+          (I || w || $) && /* @__PURE__ */ u("div", { className: a.controls, "aria-hidden": "false", children: [
+            I && /* @__PURE__ */ u("div", { className: a.arrows, children: [
+              /* @__PURE__ */ s(
+                V,
+                {
+                  variant: "primary",
+                  icon: !0,
+                  "aria-label": l("carousel.previousImage"),
+                  onClick: Z,
+                  disabled: !p,
+                  children: /* @__PURE__ */ s(de, { "aria-hidden": !0 })
+                }
+              ),
+              /* @__PURE__ */ s(
+                V,
+                {
+                  variant: "primary",
+                  icon: !0,
+                  "aria-label": l("carousel.nextImage"),
+                  onClick: ee,
+                  disabled: !p,
+                  children: /* @__PURE__ */ s(ce, { "aria-hidden": !0 })
+                }
+              )
+            ] }),
+            (w || $) && // One translucent pill holds the pause control and the dots; the
+            // dots alone form the labelled "Bildeposisjon" group so the
+            // pause button is not announced as part of the position picker.
+            /* @__PURE__ */ u("div", { className: a.dots, children: [
+              $ && /* @__PURE__ */ s(
                 "button",
                 {
                   type: "button",
-                  className: `${a.dot} ${i ? a.dotActive : ""}`,
-                  onClick: () => H(o),
-                  "aria-label": `${s("carousel.goToImage")} ${o + 1}`,
-                  "aria-current": i || void 0
-                },
-                `dot-${o}`
-              );
-            })
+                  className: a.playPause,
+                  onClick: () => te((r) => !r),
+                  "aria-label": l(m ? "carousel.resumeAutoplay" : "carousel.pauseAutoplay"),
+                  "aria-pressed": m,
+                  children: m ? /* @__PURE__ */ s(ue, { "aria-hidden": !0 }) : /* @__PURE__ */ s(pe, { "aria-hidden": !0 })
+                }
+              ),
+              w && /* @__PURE__ */ s("div", { className: a.dotGroup, role: "group", "aria-label": l("carousel.imagePosition"), children: J.map((r, o) => {
+                const i = o === g;
+                return /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    className: `${a.dot} ${i ? a.dotActive : ""}`,
+                    onClick: () => Y(o),
+                    "aria-label": `${l("carousel.goToImage")} ${o + 1}`,
+                    "aria-current": i || void 0
+                  },
+                  `dot-${o}`
+                );
+              }) })
+            ] })
           ] })
-        ] })
-      ]
-    }
+        ]
+      }
+    )
   );
 };
-ae.displayName = "Carousel";
-function ie(e) {
+ge.displayName = "Carousel";
+function me(e) {
   return `
 .${e.carouselContainer} {
   position: relative;
@@ -195,8 +216,8 @@ function ie(e) {
   width: 100%;
   height: 100%;
   min-height: 200px;
-  background-color: var(--ds-color-background-default, #fff);
-  color: var(--ds-color-text-default, #2b2b2b);
+  background-color: var(--ds-color-neutral-background-default, #fff);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
   border-radius: var(--ds-border-radius-md, 4px);
   box-sizing: border-box;
   max-width: 100%;
@@ -257,14 +278,25 @@ function ie(e) {
   display: inline-flex;
   align-items: center;
   gap: var(--ds-size-2, 8px);
-  color: var(--ds-color-text-subtle, #5d5d5d);
+  color: var(--ds-color-neutral-text-subtle, #5d5d5d);
   font-size: var(--ds-font-size-2, 14px);
 }
 .${e.empty} {
-  color: var(--ds-color-text-subtle, #5d5d5d);
+  color: var(--ds-color-neutral-text-subtle, #5d5d5d);
   font-size: var(--ds-font-size-2, 14px);
   text-align: center;
 }
+.${e.srOnly} {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .${e.controls} {
   position: absolute;
   inset: 0;
@@ -297,15 +329,32 @@ function ie(e) {
   padding: var(--ds-size-1, 4px) var(--ds-size-2, 8px);
   border-radius: 999px;
 }
+.${e.dotGroup} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-1, 4px);
+}
 .${e.dot} {
-  width: 12px;
-  height: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--ds-size-6, 24px);
+  height: var(--ds-size-6, 24px);
+  border: 0;
   border-radius: 999px;
-  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #d6d6d6);
-  background-color: rgba(255, 255, 255, 0.6);
+  background: transparent;
   padding: 0;
   margin: 0;
   cursor: pointer;
+}
+.${e.dot}::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #d6d6d6);
+  background-color: rgba(255, 255, 255, 0.6);
+  box-sizing: border-box;
   transition: all 0.2s ease;
 }
 .${e.playPause} {
@@ -315,7 +364,7 @@ function ie(e) {
   width: var(--ds-size-6, 24px);
   height: var(--ds-size-6, 24px);
   border-radius: 999px;
-  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #d6d6d6);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #d6d6d6);
   background-color: rgba(255, 255, 255, 0.85);
   /* Pinned to match the hardcoded pill — see styles.module.css. */
   color: #1e1e1e;
@@ -323,7 +372,7 @@ function ie(e) {
   margin: 0;
   cursor: pointer;
 }
-.${e.dotActive} {
+.${e.dotActive}::before {
   background-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
   border-color: var(--ds-color-primary-color-red-base-default, #D52B1E);
   transform: scale(1.1);
@@ -357,7 +406,7 @@ function ie(e) {
     bottom: var(--ds-size-2, 8px);
     gap: var(--ds-size-1, 4px);
   }
-  .${e.dot} {
+  .${e.dot}::before {
     width: 10px;
     height: 10px;
   }
@@ -376,5 +425,5 @@ function ie(e) {
 `;
 }
 export {
-  ae as Carousel
+  ge as Carousel
 };

package/dist/components/Carousel/styles.module.css.js

@@ -1,38 +1,42 @@
 "use client";
-const t = "_carouselContainer_1xdt6_1", o = "_viewport_1xdt6_14", s = "_slides_1xdt6_20", _ = "_slide_1xdt6_20", d = "_slideInner_1xdt6_40", e = "_loaderOverlay_1xdt6_48", n = "_image_1xdt6_58", l = "_loaded_1xdt6_69", a = "_loading_1xdt6_73", r = "_empty_1xdt6_81", c = "_controls_1xdt6_87", i = "_arrows_1xdt6_97", x = "_dots_1xdt6_107", p = "_playPause_1xdt6_122", y = "_dot_1xdt6_107", v = "_dotActive_1xdt6_158", u = {
-  carouselContainer: t,
-  viewport: o,
+const o = "_carouselContainer_1qjfm_5", _ = "_viewport_1qjfm_18", s = "_slides_1qjfm_24", t = "_slide_1qjfm_24", e = "_slideInner_1qjfm_44", n = "_loaderOverlay_1qjfm_52", l = "_image_1qjfm_62", d = "_loaded_1qjfm_73", r = "_loading_1qjfm_77", a = "_empty_1qjfm_85", c = "_srOnly_1qjfm_95", i = "_controls_1qjfm_107", m = "_arrows_1qjfm_117", f = "_dots_1qjfm_127", j = "_playPause_1qjfm_142", q = "_dotGroup_1qjfm_169", p = "_dot_1qjfm_127", y = "_dotActive_1qjfm_200", u = {
+  carouselContainer: o,
+  viewport: _,
   slides: s,
-  slide: _,
-  slideInner: d,
-  loaderOverlay: e,
-  image: n,
-  loaded: l,
-  loading: a,
-  empty: r,
-  controls: c,
-  arrows: i,
-  dots: x,
-  playPause: p,
-  dot: y,
-  dotActive: v
+  slide: t,
+  slideInner: e,
+  loaderOverlay: n,
+  image: l,
+  loaded: d,
+  loading: r,
+  empty: a,
+  srOnly: c,
+  controls: i,
+  arrows: m,
+  dots: f,
+  playPause: j,
+  dotGroup: q,
+  dot: p,
+  dotActive: y
 };
 export {
-  i as arrows,
-  t as carouselContainer,
-  c as controls,
+  m as arrows,
+  o as carouselContainer,
+  i as controls,
   u as default,
-  y as dot,
-  v as dotActive,
-  x as dots,
-  r as empty,
-  n as image,
-  l as loaded,
-  e as loaderOverlay,
-  a as loading,
-  p as playPause,
-  _ as slide,
-  d as slideInner,
+  p as dot,
+  y as dotActive,
+  q as dotGroup,
+  f as dots,
+  a as empty,
+  l as image,
+  d as loaded,
+  n as loaderOverlay,
+  r as loading,
+  j as playPause,
+  t as slide,
+  e as slideInner,
   s as slides,
-  o as viewport
+  c as srOnly,
+  _ as viewport
 };