@altinn/altinn-components 0.35.8 → 0.36.0

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._field_5zm0g_1{position:relative}._icon_5zm0g_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_5zm0g_14{padding-left:2.25em;padding-right:2.25em}._input_5zm0g_14[type=search]::-webkit-search-decoration,._input_5zm0g_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_5zm0g_24{font-size:inherit;position:absolute;top:1px;right:1px;margin:.25em;border:0;border-radius:100%;width:2em;height:2em;display:flex;justify-content:center;align-items:center;background-color:var(--ds-color-background-tinted);color:var(--ds-color-base-default)}._clear_5zm0g_24:hover{background-color:var(--ds-color-surface-active);color:var(--ds-color-base-default);cursor:pointer}._clear_5zm0g_24 ._clearIcon_5zm0g_48{font-size:1.5em}
+._field_zk1f7_1{position:relative}._icon_zk1f7_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_zk1f7_14{padding-left:2.25em;padding-right:2.25em}._input_zk1f7_14[type=search]::-webkit-search-decoration,._input_zk1f7_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_zk1f7_24{font-size:inherit;position:absolute;top:0;right:0;margin:.375em;border:0;border-radius:100%;font-size:.75em;background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default)}._clear_zk1f7_24:focus-visible{outline-offset:0;outline-width:2px}

package/dist/assets/SearchbarField.css

@@ -1 +1 @@
-._field_73ung_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._field_73ung_1[data-expanded=true]{background-color:#fff}._icon_73ung_14{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_73ung_21{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_73ung_21[type=search]::-webkit-search-decoration,._input_73ung_21[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_73ung_21:focus,._input_73ung_21:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._dismiss_73ung_42{position:absolute;right:0;margin:.375rem}._clear_73ung_48{background-color:var(--ds-color-neutral-surface-active);border:var(--ds-color-neutral-surface-active);color:var(--ds-color-neutral-base-default);position:absolute;right:0;margin:1rem;border-radius:100%;width:1.5rem;height:1.5rem}
+._field_1f56c_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._icon_1f56c_10{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_1f56c_17{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_1f56c_17[type=search]::-webkit-search-decoration,._input_1f56c_17[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_1f56c_17[data-expanded=true],._input_1f56c_17:focus,._input_1f56c_17:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._clear_1f56c_39{background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default);border:0;position:absolute;right:0;margin:.75rem;border-radius:100%;width:1.5rem;height:1.5rem}._clear_1f56c_39:focus-visible{outline-offset:0;outline-width:2px}._dismiss_1f56c_56{position:absolute;right:0;margin:.5rem}._dismiss_1f56c_56:focus-visible{outline-offset:0;outline-width:2px}

package/dist/assets/TimelineBase.css

@@ -1 +1 @@
-._section_odoe0_1{width:100%;display:flex;column-gap:.5rem;min-height:1.5rem}._sidebar_odoe0_8{flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem;width:1.5rem}._sidebar_odoe0_8[data-level="2"]{width:1.5rem}@media (min-width: 1024px){._sidebar_odoe0_8{width:2.25rem}._sidebar_odoe0_8[data-level="2"]{width:1.5rem}}._content_odoe0_33{flex-grow:1;display:flex;flex-direction:column}._border_odoe0_39{border-left:.25rem solid;border-color:var(--ds-color-surface-tinted);flex-grow:1}._border_odoe0_39{border-color:var(--ds-color-surface-active);border-width:.125rem;flex-grow:1}._border_odoe0_39[data-variant=hidden]{display:none}._border_odoe0_39[data-variant=strong]{border-width:2px;border-style:solid}._border_odoe0_39[data-variant=solid]{border-width:1px;border-style:solid}._border_odoe0_39[data-variant=dashed]{border-width:1px;border-style:dashed}._border_odoe0_39[data-loading=true]{border-width:1px;border-style:dashed;border-color:var(--ds-color-border-subtle)}
+._section_1030v_1{width:100%;display:flex;column-gap:.5rem;min-height:1.5rem}._sidebar_1030v_8{flex-shrink:0;flex-grow:0;display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:.375rem;width:1.5rem}._sidebar_1030v_8[data-level="2"]{width:1.5rem}@media (min-width: 1024px){._sidebar_1030v_8{width:2.25rem}._sidebar_1030v_8[data-level="2"]{width:1.5rem}}._content_1030v_33{flex-grow:1;display:flex;flex-direction:column}._border_1030v_39{border-left:.25rem solid;border-color:var(--ds-color-surface-tinted);flex-grow:1}._border_1030v_39{border-color:var(--ds-color-surface-active);border-width:.125rem;flex-grow:1;transition:border-color .5s ease-out}._border_1030v_39[data-variant=hidden]{display:none}._border_1030v_39[data-variant=strong]{border-width:2px;border-style:solid}._border_1030v_39[data-variant=solid]{border-width:1px;border-style:solid}._border_1030v_39[data-variant=dashed]{border-width:1px;border-style:dashed}._border_1030v_39[data-loading=true]{border-width:1px;border-style:dashed;border-color:var(--ds-color-border-subtle)}

package/dist/components/Dialog/DialogBody.js

@@ -1,31 +1,32 @@
-import { jsxs as t, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { jsxs as t, jsx as r, Fragment as h } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { Timeline as h } from "../Timeline/Timeline.js";
-import { TimelineSection as n } from "../Timeline/TimelineSection.js";
-import { TimelineHeader as e } from "../Timeline/TimelineHeader.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { SeenByLog as T } from "./SeenByLog.js";
+import { Timeline as n } from "../Timeline/Timeline.js";
+import { TimelineSection as e } from "../Timeline/TimelineSection.js";
+import { TimelineHeader as f } from "../Timeline/TimelineHeader.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { SeenByLog as x } from "./SeenByLog.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-const D = ({
+const F = ({
   loading: o,
+  unread: l,
   sender: m,
   recipient: i,
-  recipientLabel: l = "to",
-  children: a,
+  recipientLabel: a = "to",
+  children: c,
   seenByLog: p
-}) => /* @__PURE__ */ t(h, { children: [
-  /* @__PURE__ */ t(e, { loading: o, icon: m, children: [
+}) => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ t(f, { loading: o, icon: m, children: [
     /* @__PURE__ */ r("strong", { children: m == null ? void 0 : m.name }),
-    l + " " + (i == null ? void 0 : i.name)
+    a + " " + (i == null ? void 0 : i.name)
   ] }),
-  /* @__PURE__ */ r(n, { loading: o, spacing: 4, color: o ? "neutral" : void 0, children: !o && /* @__PURE__ */ t(c, { children: [
-    /* @__PURE__ */ r(f, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: a }),
-    p && /* @__PURE__ */ r(T, { ...p, collapsible: !0 })
+  /* @__PURE__ */ r(e, { unread: l, loading: o, spacing: 4, color: o ? "neutral" : void 0, children: !o && /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ r(T, { maxWidth: "60ch", style: { marginTop: "0.5em" }, children: c }),
+    p && /* @__PURE__ */ r(x, { ...p, collapsible: !0 })
   ] }) })
 ] });
 export {
-  D as DialogBody
+  F as DialogBody
 };

package/dist/components/Dialog/DialogHistorySegment.js

@@ -1,17 +1,25 @@
-import { jsxs as n, jsx as g } from "react/jsx-runtime";
-import { createElement as l } from "react";
+import { jsxs as g, jsx as l } from "react/jsx-runtime";
+import { createElement as a } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { DialogHistoryItem as a } from "./DialogHistoryItem.js";
+import { DialogHistoryItem as c } from "./DialogHistoryItem.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { TimelineSegment as c } from "../Timeline/TimelineSegment.js";
-import { Typography as f } from "../Typography/Typography.js";
-const T = ({ id: p, items: r, datetime: t, byline: m, children: e, summary: o }) => /* @__PURE__ */ n(c, { datetime: t, byline: m, spacing: 2, id: p, children: [
-  o && /* @__PURE__ */ g(f, { children: o }),
+import { TimelineSegment as f } from "../Timeline/TimelineSegment.js";
+import { Typography as y } from "../Typography/Typography.js";
+const k = ({
+  id: p,
+  items: r,
+  datetime: t,
+  byline: m,
+  children: e,
+  summary: o,
+  unread: n
+}) => /* @__PURE__ */ g(f, { unread: n, datetime: t, byline: m, spacing: 2, id: p, children: [
+  o && /* @__PURE__ */ l(y, { children: o }),
   e,
-  r == null ? void 0 : r.map((i) => /* @__PURE__ */ l(a, { ...i, key: i.id }))
+  r == null ? void 0 : r.map((i) => /* @__PURE__ */ a(c, { ...i, key: i.id }))
 ] });
 export {
-  T as DialogHistorySegment
+  k as DialogHistorySegment
 };

package/dist/components/Forms/SearchField.js

@@ -1,34 +1,44 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { Icon as p } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
+import { IconButton as f } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Input as _ } from "./Input.js";
-import { FieldBase as f } from "./FieldBase.js";
-import { S as d } from "../../MagnifyingGlass-3Ln1MufI.js";
-import { S as g } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchField.css';const u = "_field_5zm0g_1", h = "_icon_5zm0g_5", I = "_input_5zm0g_14", z = "_clear_5zm0g_24", N = "_clearIcon_5zm0g_48", c = {
-  field: u,
+import { FieldBase as d } from "./FieldBase.js";
+import { S as u } from "../../MagnifyingGlass-3Ln1MufI.js";
+import { S as k } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/SearchField.css';const g = "_field_zk1f7_1", h = "_icon_zk1f7_5", z = "_input_zk1f7_14", S = "_clear_zk1f7_24", o = {
+  field: g,
   icon: h,
-  input: I,
-  clear: z,
-  clearIcon: N
-}, E = ({
-  className: t,
-  size: i,
-  color: n = "neutral",
-  label: a,
-  value: o,
-  onClear: e,
-  clearButtonAltText: s = "Clear search",
-  ...l
-}) => /* @__PURE__ */ r(f, { size: i, color: n, label: a, className: t, children: /* @__PURE__ */ m("div", { className: c.field, children: [
-  /* @__PURE__ */ r(_, { ...l, type: "search", value: o, className: c.input }),
-  /* @__PURE__ */ r(p, { svgElement: d, className: c.icon }),
-  e && !!o && /* @__PURE__ */ r("button", { type: "button", className: c.clear, onClick: e, "aria-label": s, children: /* @__PURE__ */ r(g, { className: c.clearIcon }) })
+  input: z,
+  clear: S
+}, G = ({
+  className: s,
+  size: c,
+  color: e = "neutral",
+  label: n,
+  value: t,
+  onClear: r,
+  clearButtonAltText: m = "Clear search",
+  ...a
+}) => /* @__PURE__ */ i(d, { size: c, color: e, label: n, className: s, children: /* @__PURE__ */ l("div", { className: o.field, children: [
+  /* @__PURE__ */ i(_, { ...a, type: "search", value: t, className: o.input }),
+  /* @__PURE__ */ i(p, { svgElement: u, className: o.icon }),
+  r && !!t && /* @__PURE__ */ i(
+    f,
+    {
+      icon: k,
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: r,
+      iconAltText: m
+    }
+  )
 ] }) });
 export {
-  E as SearchField
+  G as SearchField
 };

package/dist/components/Searchbar/Searchbar.js

@@ -1,36 +1,36 @@
-import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { jsxs as f, jsx as b } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { SearchbarBase as A } from "./SearchbarBase.js";
-import { SearchbarField as T } from "./SearchbarField.js";
+import { SearchbarBase as T } from "./SearchbarBase.js";
+import { SearchbarField as A } from "./SearchbarField.js";
 import "./AutocompleteBase.js";
-import { Autocomplete as n } from "./Autocomplete.js";
+import { Autocomplete as S } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const k = ({
-  className: l,
+const q = ({
+  className: g,
   autocomplete: e,
   expanded: a = !1,
-  onClose: t,
-  tabIndex: g,
-  ...h
+  onClose: r,
+  tabIndex: h,
+  ...n
 }) => /* @__PURE__ */ f(
-  A,
+  T,
   {
-    className: l,
+    className: g,
     expanded: a,
     autocomplete: !!e,
-    onBlurCapture: (r) => {
-      var c, s, u, m, d, b, o;
-      const i = (u = (s = (c = r.target) == null ? void 0 : c.attributes) == null ? void 0 : s.getNamedItem("data-testid")) == null ? void 0 : u.value;
-      (i === "search-button-clear" || i === "search-button-close" || i === "searchbar-input" && ((m = r.relatedTarget) == null ? void 0 : m.getAttribute("data-testid")) !== "searchbar-input" && ((d = r.relatedTarget) == null ? void 0 : d.getAttribute("data-testid")) !== "search-button-clear" && ((b = r.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-close" && ((o = r.relatedTarget) == null ? void 0 : o.getAttribute("data-testid")) !== "autocomplete-list") && (t == null || t());
+    onBlurCapture: (t) => {
+      var c, u, o, s, l, m, d, p;
+      const i = (o = (u = (c = t.target) == null ? void 0 : c.attributes) == null ? void 0 : u.getNamedItem("data-testid")) == null ? void 0 : o.value;
+      (s = t == null ? void 0 : t.relatedTarget) != null && s.closest('[data-autocomplete="true"]') || t.relatedTarget === null || (i === "search-button-clear" || i === "search-button-close" || i === "searchbar-input" && ((l = t.relatedTarget) == null ? void 0 : l.getAttribute("data-testid")) !== "searchbar-input" && ((m = t.relatedTarget) == null ? void 0 : m.getAttribute("data-testid")) !== "search-button-clear" && ((d = t.relatedTarget) == null ? void 0 : d.getAttribute("data-testid")) !== "search-button-close" && ((p = t.relatedTarget) == null ? void 0 : p.getAttribute("data-testid")) !== "autocomplete-list") && (r == null || r());
     },
     children: [
-      /* @__PURE__ */ p(T, { ...h, expanded: a, onClose: t, tabIndex: g }),
-      e && /* @__PURE__ */ p(n, { ...e, expanded: a, onSelect: t })
+      /* @__PURE__ */ b(A, { ...n, expanded: a, onClose: r, tabIndex: h }),
+      e && /* @__PURE__ */ b(S, { ...e, expanded: a, onSelect: r })
     ]
   }
 );
 export {
-  k as Searchbar
+  q as Searchbar
 };

package/dist/components/Searchbar/SearchbarField.js

@@ -9,42 +9,42 @@ import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as T } from "../../MagnifyingGlass-3Ln1MufI.js";
 import { S as m } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_73ung_14", K = "_input_73ung_21", M = "_dismiss_73ung_42", U = "_clear_73ung_48", s = {
+import '../../assets/SearchbarField.css';const j = "_field_1f56c_1", z = "_icon_1f56c_10", A = "_input_1f56c_17", K = "_clear_1f56c_39", M = "_dismiss_1f56c_56", s = {
   field: j,
-  icon: A,
-  input: K,
-  dismiss: M,
-  clear: U
+  icon: z,
+  input: A,
+  clear: K,
+  dismiss: M
 }, H = ({
   className: p,
   expanded: e,
-  name: u = "q",
-  value: c,
+  name: f = "q",
+  value: a,
   placeholder: d = "Search",
-  closeButtonAltText: f = "Close search",
+  closeButtonAltText: u = "Close search",
   clearButtonAltText: _ = "Clear search",
   onFocus: h,
-  onBlur: g,
-  onChange: x,
-  onClear: b,
-  onClose: y,
+  onBlur: x,
+  onChange: b,
+  onClear: y,
+  onClose: S,
   onEnter: i,
-  tabIndex: S
+  tabIndex: g
 }) => {
-  const a = N(null), k = (o) => {
+  const c = N(null), k = (o) => {
     var r, n;
-    o.key === "Escape" && ((r = a.current) == null || r.blur()), o.key === "Enter" && ((n = a.current) == null || n.blur(), i == null || i());
+    o.key === "Escape" && ((r = c.current) == null || r.blur()), o.key === "Enter" && ((n = c.current) == null || n.blur(), i == null || i());
   };
-  return /* @__PURE__ */ C("div", { className: I(s.field, p), "data-expanded": e, children: [
+  return /* @__PURE__ */ C("div", { className: I(s.field, p), children: [
     /* @__PURE__ */ t(
       "input",
       {
-        ref: a,
+        ref: c,
         onFocus: h,
-        onBlur: g,
-        name: u,
-        value: c,
-        onChange: x,
+        onBlur: x,
+        name: f,
+        value: a,
+        onChange: b,
         placeholder: d,
         className: s.input,
         onKeyUp: k,
@@ -52,19 +52,20 @@ import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        tabIndex: S ?? 0,
+        tabIndex: g ?? 0,
+        "data-expanded": e,
         "data-testid": "searchbar-input"
       }
     ),
     /* @__PURE__ */ t(v, { svgElement: T, className: s.icon }),
-    c && /* @__PURE__ */ t(
+    a && /* @__PURE__ */ t(
       l,
       {
         icon: m,
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: b,
+        onClick: y,
         dataTestId: "search-button-clear",
         iconAltText: _
       }
@@ -72,11 +73,12 @@ import '../../assets/SearchbarField.css';const j = "_field_73ung_1", A = "_icon_
       l,
       {
         icon: m,
+        size: "sm",
         variant: "text",
         className: s.dismiss,
-        onClick: y,
+        onClick: S,
         dataTestId: "search-button-close",
-        iconAltText: f
+        iconAltText: u
       }
     )
   ] });

package/dist/components/Timeline/TimelineBase.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
@@ -6,29 +6,29 @@ import { TimelineIcon as b } from "./TimelineIcon.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Flex as v } from "../Page/Flex.js";
-import '../../assets/TimelineBase.css';const x = "_section_odoe0_1", N = "_sidebar_odoe0_8", f = "_content_odoe0_33", h = "_border_odoe0_39", e = {
+import '../../assets/TimelineBase.css';const x = "_section_1030v_1", N = "_sidebar_1030v_8", f = "_content_1030v_33", h = "_border_1030v_39", e = {
   section: x,
   sidebar: N,
   content: f,
   border: h
 }, g = ({
   as: n = "section",
-  loading: t,
+  loading: o,
   border: a = "solid",
   level: c = 1,
   color: s,
   icon: r,
-  iconColor: d,
-  iconTheme: m,
+  iconColor: m,
+  iconTheme: d,
   children: l,
   id: _,
   ...p
 }) => /* @__PURE__ */ i(v, { as: n, className: e.section, color: s, ...p, id: _, children: [
   /* @__PURE__ */ i("aside", { className: e.sidebar, "data-level": c, children: [
-    r && /* @__PURE__ */ o(b, { loading: t, icon: r, theme: m, color: d, size: "sm" }),
-    /* @__PURE__ */ o("div", { className: e.border, "data-loading": t, "data-variant": a, "data-color": s })
+    r && /* @__PURE__ */ t(b, { loading: o, icon: r, theme: d, color: m, size: "sm" }),
+    /* @__PURE__ */ t("div", { className: e.border, "data-loading": o, "data-variant": a, "data-color": s })
   ] }),
-  /* @__PURE__ */ o("div", { className: e.content, children: l })
+  /* @__PURE__ */ t("div", { className: e.content, children: l })
 ] });
 export {
   g as TimelineBase

package/dist/components/Timeline/TimelineSection.js

@@ -1,29 +1,30 @@
-import { jsxs as y, jsx as m } from "react/jsx-runtime";
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { Byline as T } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
-import { TimelineBase as j } from "./TimelineBase.js";
-import { Typography as B } from "../Typography/Typography.js";
+import { TimelineBase as a } from "./TimelineBase.js";
+import { Typography as j } from "../Typography/Typography.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as S } from "../Page/Section.js";
-const A = ({
+import { Section as u } from "../Page/Section.js";
+const C = ({
   loading: o,
-  level: i,
-  margin: p,
-  spacing: e,
-  as: s = "li",
+  unread: i,
+  level: p,
+  margin: e,
+  spacing: s,
+  as: n = "li",
   border: f = "strong",
-  color: n,
-  typographyProps: c = {},
+  color: c,
+  typographyProps: l = {},
   datetime: x,
-  byline: t,
+  byline: m,
   children: r
-}) => /* @__PURE__ */ y(j, { loading: o, level: i, border: f, color: n, as: s, children: [
-  t && /* @__PURE__ */ m(T, { loading: o, datetime: x, children: t }),
-  /* @__PURE__ */ m(S, { margin: p, spacing: e, children: r && typeof r == "string" ? /* @__PURE__ */ m(B, { as: "p", loading: o, size: "md", ...c, children: r }) : r })
+}) => /* @__PURE__ */ y(a, { loading: o, level: p, border: f, color: i ? c : "neutral", as: n, children: [
+  m && /* @__PURE__ */ t(T, { loading: o, datetime: x, children: m }),
+  /* @__PURE__ */ t(u, { margin: e, spacing: s, children: r && typeof r == "string" ? /* @__PURE__ */ t(j, { as: "p", loading: o, size: "md", ...l, children: r }) : r })
 ] });
 export {
-  A as TimelineSection
+  C as TimelineSection
 };

package/dist/components/Timeline/TimelineSegment.js

@@ -1,29 +1,30 @@
-import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { jsx as i, jsxs as S } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { Byline as S } from "../Byline/Byline.js";
+import { Byline as a } from "../Byline/Byline.js";
 import "../RootProvider/RootProvider.js";
-import { TimelineBase as a } from "./TimelineBase.js";
+import { TimelineBase as h } from "./TimelineBase.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as h } from "../Page/Section.js";
-import { S as x } from "../../CircleFill-BkDF4Wm0.js";
-const q = ({
+import { Section as x } from "../Page/Section.js";
+import { S as d } from "../../CircleFill-BkDF4Wm0.js";
+const w = ({
   loading: r,
-  datetime: m,
+  unread: m,
+  datetime: t,
   byline: o,
-  icon: t = x,
-  color: e = "neutral",
-  spacing: p = 2,
-  margin: l = "bottom",
-  children: n,
+  icon: e = d,
+  color: p,
+  spacing: l = 2,
+  margin: n = "bottom",
+  children: c,
   id: s,
-  footer: d,
-  ...c
-}) => /* @__PURE__ */ i(a, { loading: r, color: e, icon: t, as: "li", ...c, id: s, children: /* @__PURE__ */ f(h, { margin: l, spacing: p, children: [
-  o && /* @__PURE__ */ i(S, { loading: r, datetime: m, children: o }),
-  n
+  footer: j,
+  ...f
+}) => /* @__PURE__ */ i(h, { loading: r, color: m ? p : "neutral", icon: e, as: "li", ...f, id: s, children: /* @__PURE__ */ S(x, { margin: n, spacing: l, children: [
+  o && /* @__PURE__ */ i(a, { loading: r, datetime: t, children: o }),
+  c
 ] }) });
 export {
-  q as TimelineSegment
+  w as TimelineSegment
 };

package/dist/types/lib/components/Dialog/DialogBody.d.ts

@@ -3,6 +3,8 @@ import { AvatarProps, SeenByLogProps } from '..';
 export interface DialogBodyProps {
     /** Loading */
     loading?: boolean;
+    /** Unread */
+    unread?: boolean;
     /** Sender */
     sender?: AvatarProps;
     /** Recipient  */
@@ -17,4 +19,4 @@ export interface DialogBodyProps {
     children?: ReactNode;
 }
 /** DialogBody represents the body, or main part of a dialog, including sender and recipient.  */
-export declare const DialogBody: ({ loading, sender, recipient, recipientLabel, children, seenByLog, }: DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogBody: ({ loading, unread, sender, recipient, recipientLabel, children, seenByLog, }: DialogBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogBody.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, sender, recipient, recipientLabel, children, seenByLog, }: import('./DialogBody').DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, unread, sender, recipient, recipientLabel, children, seenByLog, }: import('./DialogBody').DialogBodyProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     args: {
         sender: {

package/dist/types/lib/components/Dialog/DialogHistorySegment.d.ts

@@ -7,5 +7,6 @@ export interface DialogHistorySegmentProps {
     byline?: string;
     children?: ReactNode;
     summary?: ReactNode;
+    unread?: boolean;
 }
-export declare const DialogHistorySegment: ({ id, items, datetime, byline, children, summary }: DialogHistorySegmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogHistorySegment: ({ id, items, datetime, byline, children, summary, unread, }: DialogHistorySegmentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Timeline/TimelineSection.d.ts

@@ -2,6 +2,7 @@ import { ElementType, ReactNode } from 'react';
 import { SectionProps, TimelineBaseProps, TypographyProps } from '..';
 export interface TimelineSectionProps {
     loading?: boolean;
+    unread?: boolean;
     level?: TimelineBaseProps['level'];
     border?: TimelineBaseProps['border'];
     color?: TimelineBaseProps['color'];
@@ -13,4 +14,4 @@ export interface TimelineSectionProps {
     children?: ReactNode | string;
     as?: ElementType;
 }
-export declare const TimelineSection: ({ loading, level, margin, spacing, as, border, color, typographyProps, datetime, byline, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineSection: ({ loading, unread, level, margin, spacing, as, border, color, typographyProps, datetime, byline, children, }: TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Timeline/TimelineSection.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ loading, level, margin, spacing, as, border, color, typographyProps, datetime, byline, children, }: import('./TimelineSection').TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ loading, unread, level, margin, spacing, as, border, color, typographyProps, datetime, byline, children, }: import('./TimelineSection').TimelineSectionProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Timeline/TimelineSegment.d.ts

@@ -3,6 +3,7 @@ import { FlexMargin, FlexSpacing, TimelineBaseProps, TimelineBorder, TypographyP
 export interface TimelineSegmentProps extends TimelineBaseProps {
     id?: string;
     loading?: boolean;
+    unread?: boolean;
     icon?: TimelineBaseProps['icon'];
     datetime?: string;
     border?: TimelineBorder;
@@ -13,4 +14,4 @@ export interface TimelineSegmentProps extends TimelineBaseProps {
     margin?: FlexMargin;
     spacing?: FlexSpacing;
 }
-export declare const TimelineSegment: ({ loading, datetime, byline, icon, color, spacing, margin, children, id, footer, ...props }: TimelineSegmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TimelineSegment: ({ loading, unread, datetime, byline, icon, color, spacing, margin, children, id, footer, ...props }: TimelineSegmentProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.35.8",
+  "version": "0.36.0",
   "main": "dist/index.js",
   "files": [
     "dist/",