@altinn/altinn-components 0.50.5 → 0.50.7

package/dist/assets/SearchbarBase.css

@@ -1 +1 @@
-._searchbar_1sz2n_1{position:relative}._searchbar_1sz2n_1[data-autocomplete=true][aria-expanded=true] input{border-bottom-left-radius:0;border-bottom-right-radius:0}._searchbar_1sz2n_1 nav{display:none}._searchbarExpanded_1sz2n_14 nav{position:absolute;display:block;border-top-left-radius:0;border-top-right-radius:0;margin-top:-2px}._searchbarLocal_1sz2n_22{width:100%;padding:var(--dsc-spacing-4) 0;margin-bottom:16px}._searchbarLocal_1sz2n_22._searchbarExpanded_1sz2n_14{z-index:100}@media (min-width: 1024px){._searchbarLocal_1sz2n_22{max-width:320px;margin-right:auto;z-index:100}._searchbarLocal_1sz2n_22._searchbarExpanded_1sz2n_14{max-width:640px}}
+._searchbar_1lexx_1{position:relative}._searchbar_1lexx_1[data-autocomplete=true][aria-expanded=true] input{border-bottom-left-radius:0;border-bottom-right-radius:0}._searchbar_1lexx_1 nav{display:none}._searchbarExpanded_1lexx_14 nav{position:absolute;display:block;border-top-left-radius:0;border-top-right-radius:0;margin-top:-2px}._searchbarLocal_1lexx_22{width:100%;padding:var(--dsc-spacing-4) 0;margin-bottom:16px}._searchbarLocal_1lexx_22._searchbarExpanded_1lexx_14{z-index:100}@media (min-width: 1024px){._searchbarLocal_1lexx_22{max-width:360px;margin-right:auto;z-index:100}._searchbarLocal_1lexx_22._searchbarExpanded_1lexx_14{max-width:640px}}

package/dist/components/List/ListItem.js

@@ -1,79 +1,81 @@
-import { jsxs as k, jsx as q } from "react/jsx-runtime";
-import { c as A } from "../../index-L8X2o7IH.js";
-import { ListItemBase as C } from "./ListItemBase.js";
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { c as k } from "../../index-L8X2o7IH.js";
+import { useId as q } from "react";
+import { ListItemBase as A } from "./ListItemBase.js";
 import { ListItemHeader as D } from "./ListItemHeader.js";
 import '../../assets/ListItem.css';const E = "_item_1nwey_3", F = {
   item: E
-}, O = ({
-  className: c,
-  color: m,
-  variant: n = "default",
-  shadow: f = "xs",
-  border: p = "none",
-  loading: e,
-  disabled: o,
+}, P = ({
+  className: f,
+  color: o,
+  variant: l = "default",
+  shadow: p = "xs",
+  border: I = "none",
+  loading: m,
+  disabled: r,
   collapsible: a,
   expanded: t,
-  size: r,
-  icon: l,
+  size: i,
+  icon: u,
   label: s,
-  title: u,
-  description: L,
-  badge: x,
-  linkIcon: y = !1,
-  select: I,
-  selected: _,
-  controls: h,
-  children: j,
-  interactive: i,
+  title: L,
+  description: h,
+  badge: y,
+  linkIcon: _ = !1,
+  select: d,
+  selected: j,
+  controls: x,
+  children: v,
+  interactive: e,
   id: w,
   containerAs: B,
-  ...H
+  ...C
 }) => {
-  const N = typeof s == "function" ? s() : s;
-  return /* @__PURE__ */ k(
-    C,
+  const H = typeof s == "function" ? s() : s, c = q();
+  return /* @__PURE__ */ N(
+    A,
     {
-      className: A(F.item, c),
-      size: r,
-      color: m,
-      variant: n,
-      shadow: f,
-      border: p,
-      disabled: o,
-      selected: _,
+      className: k(F.item, f),
+      size: i,
+      color: o,
+      variant: l,
+      shadow: p,
+      border: I,
+      disabled: r,
+      selected: j,
       expanded: t,
-      loading: e,
-      interactive: i,
+      loading: m,
+      interactive: e,
       id: w,
       as: B,
       children: [
-        /* @__PURE__ */ q(
+        /* @__PURE__ */ n(
           D,
           {
-            color: m,
-            loading: e,
-            linkIcon: y,
-            disabled: o,
+            color: o,
+            loading: m,
+            linkIcon: _,
+            disabled: r,
             collapsible: a,
             expanded: t,
-            select: I,
-            title: u,
-            size: r,
-            description: L,
-            icon: l,
-            badge: x,
-            controls: h,
-            interactive: i,
-            ...H,
-            children: N
+            select: d,
+            title: L,
+            size: i,
+            description: h,
+            icon: u,
+            badge: y,
+            controls: x,
+            interactive: e,
+            ariaControlsId: t ? c : void 0,
+            ...C,
+            children: H
           }
         ),
-        t ? j : null
+        t ? /* @__PURE__ */ n("div", { id: c, children: v }) : null
       ]
     }
   );
 };
 export {
-  O as ListItem
+  P as ListItem
 };

package/dist/components/List/ListItemHeader.js

@@ -1,102 +1,106 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as E } from "../../index-L8X2o7IH.js";
-import { useId as w, isValidElement as z } from "react";
-import { Icon as A } from "../Icon/Icon.js";
-import { Badge as D } from "../Badge/Badge.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { c as w } from "../../index-L8X2o7IH.js";
+import { useId as z, isValidElement as A } from "react";
+import { Icon as D } from "../Icon/Icon.js";
+import { Badge as H } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as H } from "./ListItemLink.js";
-import { ListItemLabel as R } from "./ListItemLabel.js";
-import { ListItemIcon as U } from "./ListItemIcon.js";
-import { ListItemControls as V } from "./ListItemControls.js";
-import { ListItemSelect as q } from "./ListItemSelect.js";
+import { ListItemLink as R } from "./ListItemLink.js";
+import { ListItemLabel as U } from "./ListItemLabel.js";
+import { ListItemIcon as V } from "./ListItemIcon.js";
+import { ListItemControls as q } from "./ListItemControls.js";
+import { ListItemSelect as G } from "./ListItemSelect.js";
 import "../Snackbar/useSnackbar.js";
-import { S as G, a as J } from "../../ChevronUp-_BBfEirx.js";
-import { S as K } from "../../ChevronRight-ANFWmIs1.js";
-import '../../assets/ListItemHeader.css';const M = "_header_29hv7_1", O = "_label_29hv7_27", P = "_link_29hv7_43", Q = "_badge_29hv7_47", T = "_linkIcon_29hv7_51", W = "_linkFocus_29hv7_61", X = "_controls_29hv7_69", o = {
-  header: M,
-  label: O,
-  link: P,
-  badge: Q,
-  linkIcon: T,
-  linkFocus: W,
-  controls: X
-}, ho = ({
-  as: _,
-  highlightWords: v,
+import { S as J, a as K } from "../../ChevronUp-_BBfEirx.js";
+import { S as M } from "../../ChevronRight-ANFWmIs1.js";
+import '../../assets/ListItemHeader.css';const O = "_header_29hv7_1", P = "_label_29hv7_27", Q = "_link_29hv7_43", T = "_badge_29hv7_47", W = "_linkIcon_29hv7_51", X = "_linkFocus_29hv7_61", Y = "_controls_29hv7_69", o = {
+  header: O,
+  label: P,
+  link: Q,
+  badge: T,
+  linkIcon: W,
+  linkFocus: X,
+  controls: Y
+}, _o = ({
+  as: f,
+  highlightWords: I,
   interactive: a = !0,
-  color: f,
+  color: k,
   loading: s,
   disabled: r,
-  collapsible: I,
-  linkIcon: k,
-  expanded: u,
-  select: l,
+  collapsible: c,
+  linkIcon: u,
+  expanded: l,
+  select: m,
   href: L,
-  onClick: b,
-  onKeyPress: N,
+  onClick: N,
+  onKeyPress: b,
   tabIndex: S,
-  size: c,
+  size: h,
   title: n,
   description: C,
-  icon: x,
-  active: m,
-  badge: t,
-  controls: d,
-  className: y,
-  children: F,
-  ariaLabel: h
+  icon: y,
+  active: d,
+  badge: e,
+  controls: _,
+  className: F,
+  children: j,
+  ariaLabel: p,
+  ariaControlsId: x
 }) => {
-  const p = I ? u ? G : J : k ? K : void 0, j = () => t && !s && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(D, { ...t, className: o.badge }) : z(t) ? t : null, g = h !== void 0 ? h : typeof n == "string" ? n : void 0, B = w();
+  const v = c ? l ? J : K : u ? M : void 0, g = () => e && !s && typeof e == "object" && "label" in e ? /* @__PURE__ */ t(H, { ...e, className: o.badge }) : A(e) ? e : null, B = p !== void 0 ? p : typeof n == "string" ? n : void 0, E = z();
   return /* @__PURE__ */ i(
     "div",
     {
-      className: E(o.header, y),
-      "data-color": f,
+      className: w(o.header, F),
+      "data-color": k,
       "data-interactive": a,
-      "data-size": c,
-      "data-has-active-child": m,
+      "data-size": h,
+      "data-has-active-child": d,
       "aria-disabled": r,
       children: [
         /* @__PURE__ */ i(
-          H,
+          R,
           {
-            as: _,
+            as: f,
             href: L,
-            onClick: b,
-            onKeyPress: N,
+            onClick: N,
+            onKeyPress: b,
             tabIndex: S,
             loading: s,
             disabled: r || s,
-            active: m,
-            ariaLabel: g,
+            active: d,
+            ariaLabel: B,
             className: o.link,
+            expanded: l,
+            ariaControlsId: x,
+            collapsible: c,
             children: [
-              a && /* @__PURE__ */ e("div", { className: o.linkFocus, "aria-hidden": "true" }),
-              l && /* @__PURE__ */ e(q, { ...l, className: o.select }),
-              /* @__PURE__ */ e(U, { loading: s, icon: x }),
-              /* @__PURE__ */ e(
-                R,
+              a && /* @__PURE__ */ t("div", { className: o.linkFocus, "aria-hidden": "true" }),
+              m && /* @__PURE__ */ t(G, { ...m, className: o.select }),
+              /* @__PURE__ */ t(V, { loading: s, icon: y }),
+              /* @__PURE__ */ t(
+                U,
                 {
-                  size: c,
+                  size: h,
                   loading: s,
-                  highlightWords: v,
+                  highlightWords: I,
                   title: n,
                   description: C,
-                  id: B,
+                  id: E,
                   className: o.label,
-                  children: F
+                  children: j
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ i(V, { className: o.controls, children: [
-          d && !s && /* @__PURE__ */ e("span", { className: o.customControls, children: d }),
-          j(),
-          p && !r && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
-            A,
+        /* @__PURE__ */ i(q, { className: o.controls, children: [
+          _ && !s && /* @__PURE__ */ t("span", { className: o.customControls, children: _ }),
+          g(),
+          v && !r && /* @__PURE__ */ t("span", { className: o.linkIcon, children: /* @__PURE__ */ t(
+            D,
             {
-              svgElement: p,
+              svgElement: v,
               style: {
                 fontSize: "1.5rem"
               }
@@ -108,5 +112,5 @@ import '../../assets/ListItemHeader.css';const M = "_header_29hv7_1", O = "_labe
   );
 };
 export {
-  ho as ListItemHeader
+  _o as ListItemHeader
 };

package/dist/components/List/ListItemLink.js

@@ -1,8 +1,8 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as v } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemLink.css';const f = "_link_c8adz_1", l = {
-  link: f
-}, I = ({
+import { jsx as v } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const I = "_link_c8adz_1", l = {
+  link: I
+}, z = ({
   as: u,
   loading: a,
   disabled: e,
@@ -10,35 +10,40 @@ import '../../assets/ListItemLink.css';const f = "_link_c8adz_1", l = {
   href: s,
   onClick: t,
   onKeyPress: i,
-  className: m,
-  active: o,
+  className: d,
+  active: _,
   ariaLabel: n,
   children: c,
-  tabIndex: _ = 0
+  tabIndex: b = 0,
+  expanded: m,
+  collapsible: f,
+  ariaControlsId: k
 }) => {
   const r = u || "div";
   if (r === "div")
-    return /* @__PURE__ */ p("div", { className: v(l.link, m), children: c });
-  const b = !a && s || r !== "a" && n;
-  return /* @__PURE__ */ p(
+    return /* @__PURE__ */ v("div", { className: p(l.link, d), children: c });
+  const A = !a && s || r !== "a" && n;
+  return /* @__PURE__ */ v(
     r,
     {
-      className: v(l.link, m),
+      className: p(l.link, d),
       href: s,
-      onKeyPress: (d) => {
-        d.key === "Enter" && (t == null || t()), i == null || i(d);
+      onKeyPress: (o) => {
+        o.key === "Enter" && (t == null || t()), i == null || i(o);
       },
       onClick: t,
       "data-interactive": "true",
       "aria-disabled": a || e,
       "aria-selected": x,
-      ...b && { "aria-label": n },
-      "data-active": o,
-      tabIndex: a || e ? -1 : _,
+      "aria-expanded": f ? m : void 0,
+      "aria-controls": m ? k : void 0,
+      ...A && { "aria-label": n },
+      "data-active": _,
+      tabIndex: a || e ? -1 : b,
       children: c
     }
   );
 };
 export {
-  I as ListItemLink
+  z as ListItemLink
 };

package/dist/components/Searchbar/SearchbarBase.js

@@ -1,13 +1,13 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 import { c as b } from "../../index-L8X2o7IH.js";
-import '../../assets/SearchbarBase.css';const l = "_searchbar_1sz2n_1", d = "_searchbarExpanded_1sz2n_14", _ = "_searchbarLocal_1sz2n_22", a = {
-  searchbar: l,
-  searchbarExpanded: d,
-  searchbarLocal: _
+import '../../assets/SearchbarBase.css';const x = "_searchbar_1lexx_1", n = "_searchbarExpanded_1lexx_14", d = "_searchbarLocal_1lexx_22", a = {
+  searchbar: x,
+  searchbarExpanded: n,
+  searchbarLocal: d
 }, m = ({
   className: r,
-  children: s,
-  expanded: e = !1,
+  children: e,
+  expanded: s = !1,
   onBlurCapture: c,
   autocomplete: o = !1,
   useGlobalHeader: t = !1
@@ -15,10 +15,10 @@ import '../../assets/SearchbarBase.css';const l = "_searchbar_1sz2n_1", d = "_se
   const h = b(
     a.searchbar,
     r,
-    e && a.searchbarExpanded,
+    s && a.searchbarExpanded,
     t && a.searchbarLocal
   );
-  return /* @__PURE__ */ n("div", { className: h, "data-autocomplete": o, onBlurCapture: c, children: s });
+  return /* @__PURE__ */ l("div", { className: h, "data-autocomplete": o, onBlurCapture: c, children: e });
 };
 export {
   m as SearchbarBase

package/dist/types/lib/components/Account/AccountListItem.stories.d.ts

@@ -59,6 +59,7 @@ declare const meta: {
         href?: string | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
+        ariaControlsId?: string | undefined;
         favourite?: boolean | undefined;
         favouriteLabel?: string | undefined;
         onToggleFavourite?: ((id: string) => void) | undefined;

package/dist/types/lib/components/List/ListItemHeader.d.ts

@@ -40,4 +40,4 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Used as decerning text for the ListItem without title, defaults to title */
     ariaLabel?: string;
 }
-export declare const ListItemHeader: ({ as, highlightWords, interactive, color, loading, disabled, collapsible, linkIcon, expanded, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, active, badge, controls, className, children, ariaLabel, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemHeader: ({ as, highlightWords, interactive, color, loading, disabled, collapsible, linkIcon, expanded, select, href, onClick, onKeyPress, tabIndex, size, title, description, icon, active, badge, controls, className, children, ariaLabel, ariaControlsId, }: ListItemHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemLink.d.ts

@@ -12,5 +12,8 @@ export interface ListItemLinkProps {
     className?: string;
     active?: boolean;
     children?: React.ReactNode;
+    expanded?: boolean;
+    collapsible?: boolean;
+    ariaControlsId?: string;
 }
-export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, children, tabIndex, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, children, tabIndex, expanded, collapsible, ariaControlsId, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItem.stories.d.ts

@@ -50,6 +50,7 @@ declare const meta: {
         href?: string | undefined;
         onClick?: (() => void) | undefined;
         onKeyPress?: React.KeyboardEventHandler | undefined;
+        ariaControlsId?: string | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];
 };
 export default meta;

package/dist/types/lib/components/Transmission/Transmission.stories.d.ts

@@ -49,6 +49,7 @@ declare const meta: {
         containerAs?: React.ElementType | undefined;
         shadow?: import('..').Shadow | undefined;
         collapsible?: boolean | undefined;
+        ariaControlsId?: string | undefined;
     };
 };
 export default meta;

package/package.json

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