@dbcdk/react-components 0.0.209 → 0.0.211

package/dist/components/sidebar/components/sidebar-items/SidebarItems.cjs

@@ -26,27 +26,17 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsxRuntime.jsx(
         ExpandableSidebarItem.ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
         },
         key
       );
@@ -61,7 +51,9 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        external: item.external
       },
       key
     );

package/dist/components/sidebar/components/sidebar-items/SidebarItems.js

@@ -20,27 +20,17 @@ function SidebarItems({ activeLink }) {
       ] }, key);
     }
     if (item.type === "expandable") {
-      const {
-        component: Component2,
-        label: label2,
-        icon: icon2,
-        badge: badge2,
-        children,
-        href: href2,
-        iconWidth: iconWidth2,
-        truncateLabel: truncateLabel2
-      } = item;
       return /* @__PURE__ */ jsx(
         ExpandableSidebarItem,
         {
-          items: children,
-          label: label2,
-          icon: icon2,
-          badge: badge2,
-          href: href2,
-          iconWidth: iconWidth2,
-          truncateLabel: truncateLabel2,
-          component: Component2
+          label: item.label,
+          icon: item.icon,
+          badge: item.badge,
+          href: item.href,
+          iconWidth: item.iconWidth,
+          truncateLabel: item.truncateLabel,
+          enabled: item.enabled,
+          children: item.children.map((child, idx) => renderItem(child, `${key}-c${idx}`))
         },
         key
       );
@@ -55,7 +45,9 @@ function SidebarItems({ activeLink }) {
         badge,
         href,
         iconWidth,
-        truncateLabel
+        truncateLabel,
+        enabled: item.enabled,
+        external: item.external
       },
       key
     );

package/dist/components/sidebar/components/sidebar-items/SidebarItems.module.css

@@ -1,7 +1,6 @@
 .group {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xxs);
   margin-top: var(--spacing-xs);
 }
 

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -17,10 +17,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -66,6 +66,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -73,8 +74,10 @@ function SidebarProvider({
   const [activeQuery, setActiveQuery] = react.useState(initialQuery != null ? initialQuery : "");
   const [wrapItemText, setWrapItemText] = react.useState(false);
   const [areItemsCollapsed, setItemsCollapsed] = react.useState(initialCollapsed);
-  const [activeHref, setActiveHref] = react.useState("");
-  const [expandedItems, setExpandedItems] = react.useState(/* @__PURE__ */ new Set());
+  const [activeHref, setActiveHref] = react.useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = react.useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = react.useRef(items);
   react.useEffect(() => {
     itemsRef.current = items;
@@ -121,8 +124,7 @@ function SidebarProvider({
   );
   react.useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

package/dist/components/sidebar/providers/SidebarProvider.d.ts

@@ -24,11 +24,12 @@ export type SidebarContextValue = {
 type SidebarProviderProps = {
     children: React.ReactNode;
     items: NavBarItem[];
+    initialActiveLink?: string;
     initialQuery?: string | null;
     initialCollapsed?: boolean;
     initialCollapseChildren?: boolean;
     initialSidebarCollapsed?: boolean;
 };
-export declare function SidebarProvider({ children, items, initialQuery, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
+export declare function SidebarProvider({ children, items, initialQuery, initialActiveLink, initialCollapsed, initialSidebarCollapsed, }: SidebarProviderProps): JSX.Element;
 export declare function useSidebar(): SidebarContextValue;
 export {};

package/dist/components/sidebar/providers/SidebarProvider.js

@@ -15,10 +15,10 @@ const findExpandableParentChain = (targetHref, items) => {
   const dfs = (nodes, parentExpandables) => {
     for (const node of nodes) {
       const nodeHref = hasHref(node) ? normalizeHref(node.href) : null;
-      const isExpandableParent = hasChildren(node) && hasHref(node);
+      const isExpandableParent = node.type === "expandable";
       const nextParents = isExpandableParent && nodeHref ? [...parentExpandables, nodeHref] : parentExpandables;
-      if (nodeHref === target) {
-        return isExpandableParent ? nextParents : parentExpandables;
+      if (node.type !== "expandable" && nodeHref === target) {
+        return parentExpandables;
       }
       if (hasChildren(node)) {
         const found = dfs(node.children, nextParents);
@@ -64,6 +64,7 @@ function SidebarProvider({
   children,
   items,
   initialQuery,
+  initialActiveLink = "",
   initialCollapsed = false,
   initialSidebarCollapsed
 }) {
@@ -71,8 +72,10 @@ function SidebarProvider({
   const [activeQuery, setActiveQuery] = useState(initialQuery != null ? initialQuery : "");
   const [wrapItemText, setWrapItemText] = useState(false);
   const [areItemsCollapsed, setItemsCollapsed] = useState(initialCollapsed);
-  const [activeHref, setActiveHref] = useState("");
-  const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
+  const [activeHref, setActiveHref] = useState(initialActiveLink);
+  const [expandedItems, setExpandedItems] = useState(
+    () => new Set(findExpandableParentChain(initialActiveLink, items))
+  );
   const itemsRef = useRef(items);
   useEffect(() => {
     itemsRef.current = items;
@@ -119,8 +122,7 @@ function SidebarProvider({
   );
   useEffect(() => {
     if (!activeHref) return;
-    const currentItems = itemsRef.current;
-    const parents = findExpandableParentChain(activeHref, currentItems);
+    const parents = findExpandableParentChain(activeHref, itemsRef.current);
     if (parents.length === 0) return;
     setExpandedItems((prev) => {
       let changed = false;

package/dist/components/tabs/Tabs.cjs

@@ -49,6 +49,8 @@ function Tabs({
   subheader,
   variant,
   panelStyle = false,
+  flushContent = false,
+  stackTabListAdditionOnMobile = false,
   tabs,
   value,
   defaultValue,
@@ -148,79 +150,91 @@ function Tabs({
         children: /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tabs} ${styles__default.default[variant]} ${panelStyle ? styles__default.default.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabStrip, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: [
+          styles__default.default.tabs,
+          styles__default.default[variant],
+          panelStyle && styles__default.default.panelStyle,
+          flushContent && styles__default.default.flushContent,
+          stackTabListAdditionOnMobile && styles__default.default.stackTabListAdditionOnMobile
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabList, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.tabStrip, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
+                  role: "tablist",
+                  "aria-label": header != null ? header : "Tabs",
+                  children: visibleTabs.map((tab, index) => {
+                    const selected = index === activeIndex;
+                    const tabDomId = `${uid}-tab-${String(tab.id)}`;
+                    const panelDomId = `${uid}-panel-${String(tab.id)}`;
+                    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          id: tabDomId,
+                          type: "button",
+                          className: styles__default.default.tabButton,
+                          role: "tab",
+                          "aria-selected": selected,
+                          "aria-controls": panelDomId,
+                          tabIndex: selected ? 0 : -1,
+                          disabled: tab.disabled,
+                          onClick: () => setValue(tab.id),
+                          onKeyDown: (e) => onKeyDownTab(e, index),
+                          children: [
+                            tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
+                            tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                          ]
+                        }
+                      ),
+                      tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: styles__default.default.removeTabButton,
+                          "aria-label": `Fjern fane ${tab.header}`,
+                          disabled: tab.disabled,
+                          onClick: () => onRemoveTab(tab.id, tab, index),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
+                        }
+                      ) : null
+                    ] }, tab.id);
+                  })
+                }
+              ),
+              onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles__default.default.addTabButton,
+                  onClick: onAddTab,
+                  "aria-label": "Tilf\xF8j fane",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
+                }
+              ) : null
+            ] }),
+            tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: onAddTab ? styles__default.default.tabButtons : `${styles__default.default.tabButtons} ${styles__default.default.tabButtonsEnd}`,
-              role: "tablist",
-              "aria-label": header != null ? header : "Tabs",
-              children: visibleTabs.map((tab, index) => {
-                const selected = index === activeIndex;
-                const tabDomId = `${uid}-tab-${String(tab.id)}`;
-                const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.tab} ${selected ? styles__default.default.active : ""}`, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    "button",
-                    {
-                      id: tabDomId,
-                      type: "button",
-                      className: styles__default.default.tabButton,
-                      role: "tab",
-                      "aria-selected": selected,
-                      "aria-controls": panelDomId,
-                      tabIndex: selected ? 0 : -1,
-                      disabled: tab.disabled,
-                      onClick: () => setValue(tab.id),
-                      onKeyDown: (e) => onKeyDownTab(e, index),
-                      children: [
-                        tab.headerIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: tab.headerIcon }) : null,
-                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.label, children: tab.header }),
-                        tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.badge, children: /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                      ]
-                    }
-                  ),
-                  tab.removable && onRemoveTab ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles__default.default.removeTabButton,
-                      "aria-label": `Fjern fane ${tab.header}`,
-                      disabled: tab.disabled,
-                      onClick: () => onRemoveTab(tab.id, tab, index),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }, tab.id);
-              })
+              id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+              role: "tabpanel",
+              "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+              className: styles__default.default.tabContent,
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
             }
-          ),
-          onAddTab ? /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              className: styles__default.default.addTabButton,
-              onClick: onAddTab,
-              "aria-label": "Tilf\xF8j fane",
-              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        tabListAddition ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.tabListAddition, children: tabListAddition }) : null
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
-          role: "tabpanel",
-          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
-          className: styles__default.default.tabContent,
-          children: loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingContent, children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
-        }
-      )
-    ] })
+          )
+        ]
+      }
+    )
   ] });
 }
 Tabs.Item = TabsItem;

package/dist/components/tabs/Tabs.d.ts

@@ -16,6 +16,10 @@ export interface TabsProps {
     subheader?: ReactNode;
     variant: TabsVariant;
     panelStyle?: boolean;
+    /** Removes the built-in gap between the tab list and its content panel. */
+    flushContent?: boolean;
+    /** Moves tab-list additions below the tab buttons on narrow screens. */
+    stackTabListAdditionOnMobile?: boolean;
     /** Data-driven API */
     tabs?: TabItem[];
     /** Controlled */
@@ -53,7 +57,7 @@ type SlotName = 'Item';
 type TabsItemComponent = ((props: TabsItemProps) => JSX.Element) & {
     __TABS_SLOT__?: SlotName;
 };
-export declare function Tabs({ header, subheader, variant, panelStyle, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, tabListAddition, loading, children, }: TabsProps): JSX.Element;
+export declare function Tabs({ header, subheader, variant, panelStyle, flushContent, stackTabListAdditionOnMobile, tabs, value, defaultValue, storageKey, onValueChange, onRemoveTab, onAddTab, addition, tabListAddition, loading, children, }: TabsProps): JSX.Element;
 export declare namespace Tabs {
     var Item: TabsItemComponent;
 }

package/dist/components/tabs/Tabs.js

@@ -43,6 +43,8 @@ function Tabs({
   subheader,
   variant,
   panelStyle = false,
+  flushContent = false,
+  stackTabListAdditionOnMobile = false,
   tabs,
   value,
   defaultValue,
@@ -142,79 +144,91 @@ function Tabs({
         children: /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 2, subheader, addition, children: header })
       }
     ) : null,
-    /* @__PURE__ */ jsxs("div", { className: `${styles.tabs} ${styles[variant]} ${panelStyle ? styles.panelStyle : ""}`, children: [
-      /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
-        /* @__PURE__ */ jsxs("div", { className: styles.tabStrip, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: [
+          styles.tabs,
+          styles[variant],
+          panelStyle && styles.panelStyle,
+          flushContent && styles.flushContent,
+          stackTabListAdditionOnMobile && styles.stackTabListAdditionOnMobile
+        ].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.tabList, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.tabStrip, children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
+                  role: "tablist",
+                  "aria-label": header != null ? header : "Tabs",
+                  children: visibleTabs.map((tab, index) => {
+                    const selected = index === activeIndex;
+                    const tabDomId = `${uid}-tab-${String(tab.id)}`;
+                    const panelDomId = `${uid}-panel-${String(tab.id)}`;
+                    return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
+                      /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          id: tabDomId,
+                          type: "button",
+                          className: styles.tabButton,
+                          role: "tab",
+                          "aria-selected": selected,
+                          "aria-controls": panelDomId,
+                          tabIndex: selected ? 0 : -1,
+                          disabled: tab.disabled,
+                          onClick: () => setValue(tab.id),
+                          onKeyDown: (e) => onKeyDownTab(e, index),
+                          children: [
+                            tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
+                            /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
+                            tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
+                          ]
+                        }
+                      ),
+                      tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: styles.removeTabButton,
+                          "aria-label": `Fjern fane ${tab.header}`,
+                          disabled: tab.disabled,
+                          onClick: () => onRemoveTab(tab.id, tab, index),
+                          children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                        }
+                      ) : null
+                    ] }, tab.id);
+                  })
+                }
+              ),
+              onAddTab ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: styles.addTabButton,
+                  onClick: onAddTab,
+                  "aria-label": "Tilf\xF8j fane",
+                  children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
+                }
+              ) : null
+            ] }),
+            tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
+          ] }),
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: onAddTab ? styles.tabButtons : `${styles.tabButtons} ${styles.tabButtonsEnd}`,
-              role: "tablist",
-              "aria-label": header != null ? header : "Tabs",
-              children: visibleTabs.map((tab, index) => {
-                const selected = index === activeIndex;
-                const tabDomId = `${uid}-tab-${String(tab.id)}`;
-                const panelDomId = `${uid}-panel-${String(tab.id)}`;
-                return /* @__PURE__ */ jsxs("div", { className: `${styles.tab} ${selected ? styles.active : ""}`, children: [
-                  /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      id: tabDomId,
-                      type: "button",
-                      className: styles.tabButton,
-                      role: "tab",
-                      "aria-selected": selected,
-                      "aria-controls": panelDomId,
-                      tabIndex: selected ? 0 : -1,
-                      disabled: tab.disabled,
-                      onClick: () => setValue(tab.id),
-                      onKeyDown: (e) => onKeyDownTab(e, index),
-                      children: [
-                        tab.headerIcon ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: tab.headerIcon }) : null,
-                        /* @__PURE__ */ jsx("span", { className: styles.label, children: tab.header }),
-                        tab.badge ? /* @__PURE__ */ jsx("span", { className: styles.badge, children: /* @__PURE__ */ jsx(Chip, { size: "sm", children: tab.badge.toLocaleString("da-DK") }) }) : null
-                      ]
-                    }
-                  ),
-                  tab.removable && onRemoveTab ? /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: styles.removeTabButton,
-                      "aria-label": `Fjern fane ${tab.header}`,
-                      disabled: tab.disabled,
-                      onClick: () => onRemoveTab(tab.id, tab, index),
-                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
-                    }
-                  ) : null
-                ] }, tab.id);
-              })
+              id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
+              role: "tabpanel",
+              "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
+              className: styles.tabContent,
+              children: loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
             }
-          ),
-          onAddTab ? /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: styles.addTabButton,
-              onClick: onAddTab,
-              "aria-label": "Tilf\xF8j fane",
-              children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" })
-            }
-          ) : null
-        ] }),
-        tabListAddition ? /* @__PURE__ */ jsx("div", { className: styles.tabListAddition, children: tabListAddition }) : null
-      ] }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: activeTab ? `${uid}-panel-${String(activeTab.id)}` : void 0,
-          role: "tabpanel",
-          "aria-labelledby": activeTab ? `${uid}-tab-${String(activeTab.id)}` : void 0,
-          className: styles.tabContent,
-          children: loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingContent, children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : activeTab == null ? void 0 : activeTab.content
-        }
-      )
-    ] })
+          )
+        ]
+      }
+    )
   ] });
 }
 Tabs.Item = TabsItem;

package/dist/components/tabs/Tabs.module.css

@@ -337,6 +337,26 @@
   gap: var(--spacing-md);
 }
 
+.flushContent.tabs {
+  gap: 0;
+}
+
+.flushContent > .tabList {
+  grid-template-rows: auto 0;
+}
+
+.flushContent > .tabList > .tabStrip {
+  grid-row: 1;
+  align-self: stretch;
+}
+
+.flushContent.filled > .tabContent {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0;
+}
+
 .headerContainerOutlined {
   padding-block-end: var(--spacing-xs);
 }
@@ -413,4 +433,23 @@
   .panelStyle > .tabList {
     border: 0;
   }
+
+  .stackTabListAdditionOnMobile > .tabList {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto auto;
+  }
+
+  .stackTabListAdditionOnMobile > .tabList > .tabStrip {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .stackTabListAdditionOnMobile > .tabList > .tabListAddition {
+    grid-column: 1;
+    grid-row: 2;
+    justify-content: flex-start;
+    margin-inline-start: 0;
+    padding-block: var(--spacing-xs);
+    padding-inline: 0;
+  }
 }