rk-designsystem 1.3.0 → 1.3.2

package/README.md

@@ -66,8 +66,8 @@ The design system includes the following components:
 npm install rk-designsystem
 ```
 
-> Since v2 the library declares `@digdir/designsystemet-react` and
-> `@digdir/designsystemet-css` as peer dependencies (`^1.13.2`) and requires
+> 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
 > setups install them alongside the package.
 
@@ -221,13 +221,20 @@ The guide remains the main human-readable reference. The manifest is additive an
 
 This guide provides a set of standards and best practices for creating new components. Following these guidelines ensures that our component library remains consistent, accessible, and easy to maintain.
 
-## Migrating to v2
+## Migration notes (1.3.0 / 1.4.0)
 
-v2 collects the breaking changes below. (Note: 1.2.5 already contained the
+The library is pre-production, so breaking changes ship as minor versions
+until it has real production consumers. The breaking changes below landed in
+1.3.0 unless marked otherwise. (Note: 1.2.5 already contained the
 Button prop removals, mislabeled as a patch — 1.2.5 is deprecated.)
 
-- **Peer dependencies:** `@digdir/designsystemet-react` and
-  `@digdir/designsystemet-css` (`^1.13.2`) are peers; React `>=18.3.1 || ^19`.
+- **Peer dependencies (1.4.0):** `@digdir/designsystemet-react` and
+  `@digdir/designsystemet-css` (`~1.13.2`) are peers; React `>=18.3.1 || ^19`.
+- **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
+  underlying Digdir library's own CJS entry is broken as well. Use `import`
+  (every bundler and modern Node setup).
 - **`import 'rk-designsystem/styles'` now delivers everything:** Digdir base,
   the Røde Kors theme, the component CSS and Source Sans 3.
 - **Button:** `shape`/`pill` and `soft` props are removed — styling comes
@@ -353,7 +360,7 @@ Your Storybook file is the official documentation. It must be clear and comprehe
 
 ## Using NAV/Aksel Icons
 
-This library is designed to work seamlessly with the official icon set from NAV/Aksel. Since v2, `@navikt/aksel-icons` ships as a regular dependency of `rk-designsystem` — no separate install needed. To use the icons directly in your own code:
+This library is designed to work seamlessly with the official icon set from NAV/Aksel. Since 1.4.0, `@navikt/aksel-icons` ships as a regular dependency of `rk-designsystem` — no separate install needed. To use the icons directly in your own code:
 
 ### Install (only for direct use in your app)
 

package/dist/assets/images/ChevronLeftIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+const i = ({ title: e, ...l }) => /* @__PURE__ */ n(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    "aria-hidden": e ? void 0 : !0,
+    focusable: "false",
+    ...l,
+    children: [
+      e && /* @__PURE__ */ o("title", { children: e }),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M16.952 6.96459C16.6103 6.62289 16.0563 6.62289 15.7146 6.96459L9.2979 13.3813C8.95621 13.723 8.95621 14.277 9.2979 14.6187L15.7146 21.0354C16.0563 21.3771 16.6103 21.3771 16.952 21.0354C17.2937 20.6937 17.2937 20.1396 16.952 19.7979L11.1541 14L16.952 8.20203C17.2937 7.86032 17.2937 7.3063 16.952 6.96459Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+i.displayName = "ChevronLeftIcon";
+export {
+  i as ChevronLeftIcon
+};

package/dist/assets/images/ChevronRightIcon.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+const n = ({ title: e, ...i }) => /* @__PURE__ */ l(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    "aria-hidden": e ? void 0 : !0,
+    focusable: "false",
+    ...i,
+    children: [
+      e && /* @__PURE__ */ o("title", { children: e }),
+      /* @__PURE__ */ o(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.048 6.96459C11.3897 6.62289 11.9437 6.62289 12.2854 6.96459L18.7021 13.3813C19.0438 13.723 19.0438 14.277 18.7021 14.6187L12.2854 21.0354C11.9437 21.3771 11.3897 21.3771 11.048 21.0354C10.7063 20.6937 10.7063 20.1396 11.048 19.7979L16.8459 14L11.048 8.20203C10.7063 7.86032 10.7063 7.3063 11.048 6.96459Z",
+          fill: "currentColor"
+        }
+      )
+    ]
+  }
+);
+n.displayName = "ChevronRightIcon";
+export {
+  n as ChevronRightIcon
+};

package/dist/components/Alert/index.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Alert as d } from "@digdir/designsystemet-react";
+import { Heading as n } from "../Heading/index.js";
+const c = m((s, i) => {
+  const { title: e, titleLevel: r, children: l, ...a } = s;
+  return /* @__PURE__ */ o(d, { ref: i, ...a, children: [
+    e && (r ? /* @__PURE__ */ t(n, { level: r, "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: e }) : /* @__PURE__ */ t("p", { className: "ds-heading", "data-size": "2xs", style: { marginBottom: "var(--ds-size-1)" }, children: e })),
+    l
+  ] });
+});
+c.displayName = "Alert";
+export {
+  c as Alert
+};

package/dist/components/Avatar/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as o } from "react";
+import { Avatar as m } from "@digdir/designsystemet-react";
+const e = o((r, a) => /* @__PURE__ */ t(m, { ref: a, ...r }));
+e.displayName = "Avatar";
+export {
+  e as Avatar
+};

package/dist/components/Badge/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { BadgePosition as r, Badge as t } from "@digdir/designsystemet-react";
+const s = i((o, e) => /* @__PURE__ */ a(t, { ref: e, ...o }));
+s.displayName = "Badge";
+const n = r;
+export {
+  s as Badge,
+  n as BadgePosition
+};

package/dist/components/Breadcrumbs/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { Breadcrumbs as r, BreadcrumbsItem as s, BreadcrumbsLink as e, BreadcrumbsList as c } from "@digdir/designsystemet-react";
+const a = r, t = c, u = s, b = e;
+export {
+  a as Breadcrumbs,
+  u as BreadcrumbsItem,
+  b as BreadcrumbsLink,
+  t as BreadcrumbsList
+};

package/dist/components/Button/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { Button as u } from "@digdir/designsystemet-react";
+import { forwardRef as m } from "react";
+const e = m(function({ variant: t, ...o }, r) {
+  return /* @__PURE__ */ n(u, { ref: r, variant: t, ...o });
+});
+e.displayName = "Button";
+export {
+  e as Button
+};

package/dist/components/Card/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { Card as a, CardBlock as r } from "@digdir/designsystemet-react";
+const d = a, C = r;
+d.displayName = "Card";
+export {
+  d as Card,
+  C as CardBlock
+};

package/dist/components/Carousel/index.js

@@ -0,0 +1,379 @@
+"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 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 B } from "../Button/index.js";
+import { Spinner as re } from "../SpinnerLoader/index.js";
+import { useLanguageOptional as oe } from "../../context/LanguageContext.js";
+const ae = ({
+  images: e,
+  autoPlay: l = !1,
+  autoDelay: b = 5,
+  showArrows: v = !0,
+  showDots: x = !0,
+  variant: P,
+  slidesPerView: $ = 1,
+  slideSpacing: y = 16,
+  cornerRadius: g = 0,
+  "data-color": A,
+  "data-size": F
+}) => {
+  const { t: s } = oe();
+  p(() => {
+    const r = "rk-carousel-inline-styles";
+    if (typeof document > "u" || document.getElementById(r)) return;
+    const o = ie(a), i = document.createElement("style");
+    i.id = r, i.textContent = o, document.head.prepend(i);
+  }, []);
+  const R = {
+    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(`
+`);
+  p(() => {
+    I(
+      (e ?? []).map((r, o) => {
+        const i = k.current[o];
+        return !!(i && i.complete && i.naturalWidth > 0);
+      })
+    );
+  }, [D]);
+  const N = h((r) => {
+    I((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(() => {
+    if (t)
+      return t.on("select", c), t.on("reInit", c), w(t.scrollSnapList()), () => {
+        t.off("select", c), t.off("reInit", c);
+      };
+  }, [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;
+    const r = window.setInterval(() => {
+      t.canScrollNext() && t.scrollNext();
+    }, C);
+    return () => {
+      window.clearInterval(r);
+    };
+  }, [j, C, t, e]);
+  const E = Math.max(1, $), G = `${100 / E}%`, m = y / 2;
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: a.carouselContainer,
+      "data-color": A,
+      "data-size": F,
+      "data-variant": P,
+      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);
+                      }
+                    }
+                  )
+                ] })
+              },
+              `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(
+              B,
+              {
+                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(
+              B,
+              {
+                variant: "primary",
+                icon: !0,
+                "aria-label": s("carousel.nextImage"),
+                onClick: U,
+                disabled: !e || e.length <= 1,
+                children: /* @__PURE__ */ n(V, { "aria-hidden": !0 })
+              }
+            )
+          ] }),
+          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(
+                "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}`
+              );
+            })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+ae.displayName = "Carousel";
+function ie(e) {
+  return `
+.${e.carouselContainer} {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  background-color: var(--ds-color-background-default, #fff);
+  color: var(--ds-color-text-default, #2b2b2b);
+  border-radius: var(--ds-border-radius-md, 4px);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.${e.viewport} {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.${e.slides} {
+  display: flex;
+  height: 100%;
+  user-select: none;
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.${e.slide} {
+  position: relative;
+  min-width: 0;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+.${e.slideInner} {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: var(--ds-color-neutral-surface-tinted, #f5f5f5);
+  overflow: hidden;
+}
+.${e.loaderOverlay} {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.05);
+  z-index: 2;
+}
+.${e.image} {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  z-index: 1;
+}
+.${e.image}.${e.loaded} {
+  opacity: 1;
+}
+.${e.loading} {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-2, 8px);
+  color: var(--ds-color-text-subtle, #5d5d5d);
+  font-size: var(--ds-font-size-2, 14px);
+}
+.${e.empty} {
+  color: var(--ds-color-text-subtle, #5d5d5d);
+  font-size: var(--ds-font-size-2, 14px);
+  text-align: center;
+}
+.${e.controls} {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 10;
+}
+.${e.arrows} {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 var(--ds-size-4, 16px);
+  box-sizing: border-box;
+  pointer-events: auto;
+}
+.${e.dots} {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: var(--ds-size-3, 12px);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-size-2, 8px);
+  pointer-events: auto;
+  background-color: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(4px);
+  padding: var(--ds-size-1, 4px) var(--ds-size-2, 8px);
+  border-radius: 999px;
+}
+.${e.dot} {
+  width: 12px;
+  height: 12px;
+  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);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.${e.playPause} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  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);
+  background-color: rgba(255, 255, 255, 0.85);
+  color: var(--ds-color-neutral-text-default, #2b2b2b);
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+.${e.dotActive} {
+  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);
+}
+@media (max-width: 640px) {
+  .${e.carouselContainer} {
+    height: auto;
+    min-height: 150px;
+    aspect-ratio: 16 / 9;
+  }
+  .${e.viewport} {
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+  .${e.slides} {
+    height: auto;
+    min-height: 150px;
+  }
+  .${e.slide} {
+    height: auto;
+    min-height: 150px;
+  }
+  .${e.slideInner} {
+    aspect-ratio: 16 / 9;
+    height: auto;
+  }
+  .${e.arrows} {
+    padding: 0 var(--ds-size-2, 8px);
+  }
+  .${e.dots} {
+    bottom: var(--ds-size-2, 8px);
+    gap: var(--ds-size-1, 4px);
+  }
+  .${e.dot} {
+    width: 10px;
+    height: 10px;
+  }
+}
+@media (max-width: 400px) {
+  .${e.carouselContainer} {
+    min-height: 120px;
+  }
+  .${e.arrows} {
+    padding: 0 var(--ds-size-1, 4px);
+  }
+  .${e.arrows} button {
+    transform: scale(0.85);
+  }
+}
+`;
+}
+export {
+  ae as Carousel
+};

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

@@ -0,0 +1,38 @@
+"use client";
+const o = "_carouselContainer_oit30_1", t = "_viewport_oit30_14", s = "_slides_oit30_20", _ = "_slide_oit30_20", e = "_slideInner_oit30_40", i = "_loaderOverlay_oit30_48", n = "_image_oit30_58", l = "_loaded_oit30_69", a = "_loading_oit30_73", d = "_empty_oit30_81", r = "_controls_oit30_87", c = "_arrows_oit30_97", p = "_dots_oit30_107", y = "_playPause_oit30_122", v = "_dot_oit30_107", u = "_dotActive_oit30_153", g = {
+  carouselContainer: o,
+  viewport: t,
+  slides: s,
+  slide: _,
+  slideInner: e,
+  loaderOverlay: i,
+  image: n,
+  loaded: l,
+  loading: a,
+  empty: d,
+  controls: r,
+  arrows: c,
+  dots: p,
+  playPause: y,
+  dot: v,
+  dotActive: u
+};
+export {
+  c as arrows,
+  o as carouselContainer,
+  r as controls,
+  g as default,
+  v as dot,
+  u as dotActive,
+  p as dots,
+  d as empty,
+  n as image,
+  l as loaded,
+  i as loaderOverlay,
+  a as loading,
+  y as playPause,
+  _ as slide,
+  e as slideInner,
+  s as slides,
+  t as viewport
+};

package/dist/components/Checkbox/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { Checkbox as e, useCheckboxGroup as o, Fieldset as s } from "@digdir/designsystemet-react";
+const c = e, t = s, x = o;
+c.displayName = "Checkbox";
+t.displayName = "Fieldset";
+export {
+  c as Checkbox,
+  t as Fieldset,
+  x as useCheckboxGroup
+};

package/dist/components/Chip/index.js

@@ -0,0 +1,6 @@
+"use client";
+import { Chip as i } from "@digdir/designsystemet-react";
+const o = i;
+export {
+  o as Chip
+};