@digdir/designsystemet-react 1.0.0-next.15 → 1.0.0-next.16

package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/index.js

@@ -118,9 +118,11 @@ class Virtualizer {
     this.measurementsCache = [];
     this.itemSizeCache = /* @__PURE__ */ new Map();
     this.pendingMeasuredCacheIndexes = [];
+    this.scrollRect = null;
+    this.scrollOffset = null;
     this.scrollDirection = null;
     this.scrollAdjustments = 0;
-    this.measureElementCache = /* @__PURE__ */ new Map();
+    this.elementsCache = /* @__PURE__ */ new Map();
     this.observer = /* @__PURE__ */ (() => {
       let _ro = null;
       const get = () => {
@@ -154,8 +156,7 @@ class Virtualizer {
     this.range = null;
     this.setOptions = (opts2) => {
       Object.entries(opts2).forEach(([key, value]) => {
-        if (typeof value === "undefined")
-          delete opts2[key];
+        if (typeof value === "undefined") delete opts2[key];
       });
       this.options = {
         debug: false,
@@ -178,6 +179,7 @@ class Virtualizer {
         initialMeasurementsCache: [],
         lanes: 1,
         isScrollingResetDelay: 150,
+        enabled: true,
         ...opts2
       };
     };
@@ -196,26 +198,31 @@ class Virtualizer {
       this.unsubs.filter(Boolean).forEach((d) => d());
       this.unsubs = [];
       this.scrollElement = null;
+      this.targetWindow = null;
+      this.observer.disconnect();
+      this.elementsCache.clear();
     };
     this._didMount = () => {
-      this.measureElementCache.forEach(this.observer.observe);
       return () => {
-        this.observer.disconnect();
         this.cleanup();
       };
     };
     this._willUpdate = () => {
       var _a;
-      const scrollElement = this.options.getScrollElement();
+      const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
       if (this.scrollElement !== scrollElement) {
         this.cleanup();
+        if (!scrollElement) {
+          this.notify(false, false);
+          return;
+        }
         this.scrollElement = scrollElement;
         if (this.scrollElement && "ownerDocument" in this.scrollElement) {
           this.targetWindow = this.scrollElement.ownerDocument.defaultView;
         } else {
           this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
         }
-        this._scrollToOffset(this.scrollOffset, {
+        this._scrollToOffset(this.getScrollOffset(), {
           adjustments: void 0,
           behavior: void 0
         });
@@ -228,7 +235,7 @@ class Virtualizer {
         this.unsubs.push(
           this.options.observeElementOffset(this, (offset, isScrolling) => {
             this.scrollAdjustments = 0;
-            this.scrollDirection = isScrolling ? this.scrollOffset < offset ? "forward" : "backward" : null;
+            this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
             this.scrollOffset = offset;
             const prevIsScrolling = this.isScrolling;
             this.isScrolling = isScrolling;
@@ -238,28 +245,21 @@ class Virtualizer {
       }
     };
     this.getSize = () => {
+      if (!this.options.enabled) {
+        this.scrollRect = null;
+        return 0;
+      }
+      this.scrollRect = this.scrollRect ?? this.options.initialRect;
       return this.scrollRect[this.options.horizontal ? "width" : "height"];
     };
-    this.getMeasurementOptions = utils.memo(
-      () => [
-        this.options.count,
-        this.options.paddingStart,
-        this.options.scrollMargin,
-        this.options.getItemKey
-      ],
-      (count, paddingStart, scrollMargin, getItemKey) => {
-        this.pendingMeasuredCacheIndexes = [];
-        return {
-          count,
-          paddingStart,
-          scrollMargin,
-          getItemKey
-        };
-      },
-      {
-        key: false
+    this.getScrollOffset = () => {
+      if (!this.options.enabled) {
+        this.scrollOffset = null;
+        return 0;
       }
-    );
+      this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
+      return this.scrollOffset;
+    };
     this.getFurthestMeasurement = (measurements, index) => {
       const furthestMeasurementsFound = /* @__PURE__ */ new Map();
       const furthestMeasurements = /* @__PURE__ */ new Map();
@@ -287,13 +287,74 @@ class Virtualizer {
         return a.end - b.end;
       })[0] : void 0;
     };
+    this.getMeasurementOptions = utils.memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (count, paddingStart, scrollMargin, getItemKey, enabled) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey,
+          enabled
+        };
+      },
+      {
+        key: false
+      }
+    );
     this.getMeasurements = utils.memo(
       () => [this.getMeasurementOptions(), this.itemSizeCache],
-      ({ count, paddingStart, scrollMargin, getItemKey }, itemSizeCache) => {
+      ({ count, paddingStart, scrollMargin, getItemKey, enabled }, itemSizeCache) => {
+        var _a;
+        if (!enabled) {
+          this.measurementsCache = [];
+          this.itemSizeCache.clear();
+          return [];
+        }
+        if (this.measurementsCache.length === 0) {
+          this.measurementsCache = this.options.initialMeasurementsCache;
+          this.measurementsCache.forEach((item) => {
+            this.itemSizeCache.set(item.key, item.size);
+          });
+        }
         const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
         this.pendingMeasuredCacheIndexes = [];
         const measurements = this.measurementsCache.slice(0, min);
         for (let i = min; i < count; i++) {
+          let measureElement2 = (_a = this.measurementsCache[i]) == null ? void 0 : _a.measureElement;
+          if (!measureElement2) {
+            measureElement2 = (node) => {
+              const key2 = getItemKey(i);
+              const prevNode = this.elementsCache.get(key2);
+              if (!node) {
+                if (prevNode) {
+                  this.observer.unobserve(prevNode);
+                  this.elementsCache.delete(key2);
+                }
+                return;
+              }
+              if (prevNode !== node) {
+                if (prevNode) {
+                  this.observer.unobserve(prevNode);
+                }
+                this.observer.observe(node);
+                this.elementsCache.set(key2, node);
+              }
+              if (node.isConnected) {
+                this.resizeItem(
+                  i,
+                  this.options.measureElement(node, void 0, this)
+                );
+              }
+            };
+          }
           const key = getItemKey(i);
           const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
           const start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
@@ -307,7 +368,8 @@ class Virtualizer {
             size,
             end,
             key,
-            lane
+            lane,
+            measureElement: measureElement2
           };
         }
         this.measurementsCache = measurements;
@@ -319,7 +381,7 @@ class Virtualizer {
       }
     );
     this.calculateRange = utils.memo(
-      () => [this.getMeasurements(), this.getSize(), this.scrollOffset],
+      () => [this.getMeasurements(), this.getSize(), this.getScrollOffset()],
       (measurements, outerSize, scrollOffset) => {
         return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
           measurements,
@@ -364,36 +426,40 @@ class Virtualizer {
       return parseInt(indexStr, 10);
     };
     this._measureElement = (node, entry) => {
-      const item = this.measurementsCache[this.indexFromElement(node)];
+      const i = this.indexFromElement(node);
+      const item = this.getMeasurements()[i];
       if (!item || !node.isConnected) {
-        this.measureElementCache.forEach((cached, key) => {
+        this.elementsCache.forEach((cached, key) => {
           if (cached === node) {
             this.observer.unobserve(node);
-            this.measureElementCache.delete(key);
+            this.elementsCache.delete(key);
           }
         });
         return;
       }
-      const prevNode = this.measureElementCache.get(item.key);
+      const prevNode = this.elementsCache.get(item.key);
       if (prevNode !== node) {
         if (prevNode) {
           this.observer.unobserve(prevNode);
         }
         this.observer.observe(node);
-        this.measureElementCache.set(item.key, node);
+        this.elementsCache.set(item.key, node);
       }
-      const measuredItemSize = this.options.measureElement(node, entry, this);
-      this.resizeItem(item, measuredItemSize);
+      this.resizeItem(i, this.options.measureElement(node, entry, this));
     };
-    this.resizeItem = (item, size) => {
+    this.resizeItem = (index, size) => {
+      const item = this.getMeasurements()[index];
+      if (!item) {
+        return;
+      }
       const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
       const delta = size - itemSize;
       if (delta !== 0) {
-        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.scrollOffset + this.scrollAdjustments) {
+        if (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments) {
           if (process.env.NODE_ENV !== "production" && this.options.debug) {
             console.info("correction", delta);
           }
-          this._scrollToOffset(this.scrollOffset, {
+          this._scrollToOffset(this.getScrollOffset(), {
             adjustments: this.scrollAdjustments += delta,
             behavior: void 0
           });
@@ -427,6 +493,9 @@ class Virtualizer {
     );
     this.getVirtualItemForOffset = (offset) => {
       const measurements = this.getMeasurements();
+      if (measurements.length === 0) {
+        return void 0;
+      }
       return utils.notUndefined(
         measurements[findNearestBinarySearch(
           0,
@@ -438,10 +507,11 @@ class Virtualizer {
     };
     this.getOffsetForAlignment = (toOffset, align) => {
       const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
       if (align === "auto") {
-        if (toOffset <= this.scrollOffset) {
+        if (toOffset <= scrollOffset) {
           align = "start";
-        } else if (toOffset >= this.scrollOffset + size) {
+        } else if (toOffset >= scrollOffset + size) {
           align = "end";
         } else {
           align = "start";
@@ -456,25 +526,30 @@ class Virtualizer {
       }
       const scrollSizeProp = this.options.horizontal ? "scrollWidth" : "scrollHeight";
       const scrollSize = this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[scrollSizeProp] : this.scrollElement[scrollSizeProp] : 0;
-      const maxOffset = scrollSize - this.getSize();
+      const maxOffset = scrollSize - size;
       return Math.max(Math.min(maxOffset, toOffset), 0);
     };
     this.getOffsetForIndex = (index, align = "auto") => {
       index = Math.max(0, Math.min(index, this.options.count - 1));
-      const measurement = utils.notUndefined(this.getMeasurements()[index]);
+      const item = this.getMeasurements()[index];
+      if (!item) {
+        return void 0;
+      }
+      const size = this.getSize();
+      const scrollOffset = this.getScrollOffset();
       if (align === "auto") {
-        if (measurement.end >= this.scrollOffset + this.getSize() - this.options.scrollPaddingEnd) {
+        if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) {
           align = "end";
-        } else if (measurement.start <= this.scrollOffset + this.options.scrollPaddingStart) {
+        } else if (item.start <= scrollOffset + this.options.scrollPaddingStart) {
           align = "start";
         } else {
-          return [this.scrollOffset, align];
+          return [scrollOffset, align];
         }
       }
-      const toOffset = align === "end" ? measurement.end + this.options.scrollPaddingEnd : measurement.start - this.options.scrollPaddingStart;
+      const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
       return [this.getOffsetForAlignment(toOffset, align), align];
     };
-    this.isDynamicMode = () => this.measureElementCache.size > 0;
+    this.isDynamicMode = () => this.elementsCache.size > 0;
     this.cancelScrollToIndex = () => {
       if (this.scrollToIndexTimeoutId !== null && this.targetWindow) {
         this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId);
@@ -501,17 +576,21 @@ class Virtualizer {
           "The `smooth` scroll behavior is not fully supported with dynamic size."
         );
       }
-      const [toOffset, align] = this.getOffsetForIndex(index, initialAlign);
-      this._scrollToOffset(toOffset, { adjustments: void 0, behavior });
+      const offsetAndAlign = this.getOffsetForIndex(index, initialAlign);
+      if (!offsetAndAlign) return;
+      const [offset, align] = offsetAndAlign;
+      this._scrollToOffset(offset, { adjustments: void 0, behavior });
       if (behavior !== "smooth" && this.isDynamicMode() && this.targetWindow) {
         this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
           this.scrollToIndexTimeoutId = null;
-          const elementInDOM = this.measureElementCache.has(
+          const elementInDOM = this.elementsCache.has(
             this.options.getItemKey(index)
           );
           if (elementInDOM) {
-            const [toOffset2] = this.getOffsetForIndex(index, align);
-            if (!utils.approxEqual(toOffset2, this.scrollOffset)) {
+            const [latestOffset] = utils.notUndefined(
+              this.getOffsetForIndex(index, align)
+            );
+            if (!utils.approxEqual(latestOffset, this.getScrollOffset())) {
               this.scrollToIndex(index, { align, behavior });
             }
           } else {
@@ -527,7 +606,7 @@ class Virtualizer {
           "The `smooth` scroll behavior is not fully supported with dynamic size."
         );
       }
-      this._scrollToOffset(this.scrollOffset + delta, {
+      this._scrollToOffset(this.getScrollOffset() + delta, {
         adjustments: void 0,
         behavior
       });
@@ -557,13 +636,6 @@ class Virtualizer {
       (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, false);
     };
     this.setOptions(opts);
-    this.scrollRect = this.options.initialRect;
-    this.scrollOffset = typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset;
-    this.measurementsCache = this.options.initialMeasurementsCache;
-    this.measurementsCache.forEach((item) => {
-      this.itemSizeCache.set(item.key, item.size);
-    });
-    this.notify(false, false);
   }
 }
 const findNearestBinarySearch = (low, high, getCurrentValue, value) => {

package/dist/cjs/node_modules/@tanstack/virtual-core/dist/esm/utils.js

@@ -7,8 +7,7 @@ function memo(getDeps, fn, opts) {
   return () => {
     var _a, _b, _c, _d;
     let depTime;
-    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts)))
-      depTime = Date.now();
+    if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
     const newDeps = getDeps();
     const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
     if (!depsChanged) {
@@ -16,8 +15,7 @@ function memo(getDeps, fn, opts) {
     }
     deps = newDeps;
     let resultTime;
-    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts)))
-      resultTime = Date.now();
+    if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
     result = fn(...newDeps);
     if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
       const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
@@ -48,7 +46,7 @@ function memo(getDeps, fn, opts) {
 }
 function notUndefined(value, msg) {
   if (value === void 0) {
-    throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
+    throw new Error(`Unexpected undefined${""}`);
   } else {
     return value;
   }

package/dist/cjs/utilities/AnimateHeight/AnimateHeight.js

@@ -12,7 +12,10 @@ const transitionDurationInMilliseconds = 250;
  * AnimateHeight is a component that animates its height when the `open` prop changes.
  */
 const AnimateHeight = ({ children, className, open = false, style, ...rest }) => {
-    const [height, setHeight] = React.useState(0);
+    /* We don't know the initial height we want to start with.
+    It depends on if it should start open or not, therefore we set height to `undefined`,
+    so we don't get any layoutshift on first render */
+    const [height, setHeight] = React.useState(undefined);
     const prevOpen = usePrevious.usePrevious(open);
     const openOrClosed = open ? 'open' : 'closed';
     const [state, setState] = React.useState(openOrClosed);

package/dist/cjs/utilities/RovingFocus/RovingFocusItem.js

@@ -20,19 +20,47 @@ function getPrevFocusableValue(items, value) {
 const RovingFocusItem = React.forwardRef(({ value, asChild, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const focusValue = value ?? (typeof rest.children == 'string' ? rest.children : '');
-    const { getOrderedItems, getRovingProps } = useRovingFocus.useRovingFocus(focusValue);
+    const { getOrderedItems, getRovingProps, orientation } = useRovingFocus.useRovingFocus(focusValue);
     const rovingProps = getRovingProps({
         onKeyDown: (e) => {
             rest?.onKeyDown?.(e);
             const items = getOrderedItems();
             let nextItem;
-            if (e.key === 'ArrowRight') {
-                nextItem = getNextFocusableValue(items, focusValue);
+            switch (orientation) {
+                case 'horizontal':
+                    if (e.key === 'ArrowRight') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowLeft') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'vertical':
+                    if (e.key === 'ArrowDown') {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (e.key === 'ArrowUp') {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
+                    break;
+                case 'ambiguous':
+                    if (['ArrowRight', 'ArrowDown'].includes(e.key)) {
+                        nextItem = getNextFocusableValue(items, focusValue);
+                    }
+                    if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {
+                        nextItem = getPrevFocusableValue(items, focusValue);
+                    }
             }
-            if (e.key === 'ArrowLeft') {
-                nextItem = getPrevFocusableValue(items, focusValue);
+            if (e.key === 'Home') {
+                nextItem = items[0];
+            }
+            if (e.key === 'End') {
+                nextItem = items[items.length - 1];
+            }
+            if (nextItem) {
+                e.preventDefault();
+                nextItem.element.focus();
             }
-            nextItem?.element.focus();
         },
     });
     const mergedRefs = floatingUi_react.useMergeRefs([ref, rovingProps.ref]);

package/dist/cjs/utilities/RovingFocus/RovingFocusRoot.js

@@ -16,8 +16,9 @@ const RovingFocusContext = React.createContext({
         /* intentionally empty */
     },
     focusableValue: null,
+    orientation: 'horizontal',
 });
-const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, onBlur, onFocus, ...rest }, ref) => {
+const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, orientation = 'horizontal', onBlur, onFocus, ...rest }, ref) => {
     const Component = asChild ? index.Slot : 'div';
     const [focusableValue, setFocusableValue] = React.useState(null);
     const [isShiftTabbing, setIsShiftTabbing] = React.useState(false);
@@ -43,6 +44,7 @@ const RovingFocusRoot = React.forwardRef(({ activeValue, asChild, onBlur, onFocu
             onShiftTab: () => {
                 setIsShiftTabbing(true);
             },
+            orientation,
         }, children: jsxRuntime.jsx(Component, { ...rest, tabIndex: isShiftTabbing ? -1 : 0, onBlur: (e) => {
                 onBlur?.(e);
                 setIsShiftTabbing(false);

package/dist/cjs/utilities/RovingFocus/useRovingFocus.js

@@ -8,10 +8,11 @@ var RovingFocusRoot = require('./RovingFocusRoot.js');
 // Inspired by: https://github.com/radix-ui/primitives/tree/main/packages/react/roving-focus/src
 /** Handles props for `RovingFocus` in context with `RovingFocusRoot` */
 const useRovingFocus = (value) => {
-    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, } = React.useContext(RovingFocusRoot.RovingFocusContext);
+    const { elements, getOrderedItems, setFocusableValue, focusableValue, onShiftTab, orientation, } = React.useContext(RovingFocusRoot.RovingFocusContext);
     return {
         getOrderedItems,
         isFocusable: focusableValue === value,
+        orientation,
         getRovingProps: (props) => ({
             ...props,
             ref: (element) => {

package/dist/esm/components/Accordion/index.js

@@ -10,8 +10,8 @@ import { AccordionRoot } from './AccordionRoot.js';
  * <Accordion.Root>
  *  <Accordion.Item>
  *   <Accordion.Heading>Heading 1</Accordion.Heading>
- *  <Accordion.Content>Content 1</Accordion.Content>
- * </Accordion.Item>
+ *   <Accordion.Content>Content 1</Accordion.Content>
+ *  </Accordion.Item>
  * <Accordion.Item>
  */
 const Accordion = {};

package/dist/esm/components/Box/Box.js

@@ -1,11 +1,11 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 
 const Box = forwardRef(({ shadow, borderColor, borderRadius, background = 'default', children, asChild = false, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'div';
+    const Component = asChild ? Slot : 'div';
     return (jsx(Component, { ref: ref, className: clsx(shadow && `ds-box--${shadow}-shadow`, borderColor && `ds-box--${borderColor}-border-color`, borderRadius && `ds-box--${borderRadius}-border-radius`, `ds-box--${background}-background`, className), ...rest, children: children }));
 });
 Box.displayName = 'Box';

package/dist/esm/components/Breadcrumbs/BreadcrumbsItem.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
+
+const BreadcrumbsItem = forwardRef(({ className, ...rest }, ref) => (jsx("li", { ref: ref, className: clsx('ds-breadcrumbs__item', className), ...rest })));
+BreadcrumbsItem.displayName = 'BreadcrumbsItem';
+
+export { BreadcrumbsItem };

package/dist/esm/components/Breadcrumbs/BreadcrumbsLink.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
+import { Link } from '../Link/Link.js';
+
+const BreadcrumbsLink = forwardRef(({ className, ...rest }, ref) => (jsx(Link, { className: clsx(`ds-breadcrumbs__link`, className), ref: ref, ...rest })));
+BreadcrumbsLink.displayName = 'BreadcrumbsLink';
+
+export { BreadcrumbsLink };

package/dist/esm/components/Breadcrumbs/BreadcrumbsList.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMergeRefs } from '../../node_modules/@floating-ui/react/dist/floating-ui.react.js';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef, useRef, useEffect } from 'react';
+
+const BreadcrumbsList = forwardRef(({ className, ...rest }, ref) => {
+    const innerRef = useRef(null);
+    const mergedRefs = useMergeRefs([innerRef, ref]);
+    // Set aria-current on last link
+    useEffect(() => {
+        const links = innerRef.current?.querySelectorAll('a') || [];
+        const lastLink = links[links?.length - 1];
+        lastLink?.setAttribute('aria-current', 'page');
+        return () => lastLink?.removeAttribute('aria-current'); // Remove on re-render as React can re-use DOM elements
+    });
+    return (jsx("ol", { className: clsx('ds-breadcrumbs__list', className), ref: mergedRefs, ...rest }));
+});
+BreadcrumbsList.displayName = 'BreadcrumbsList';
+
+export { BreadcrumbsList };

package/dist/esm/components/Breadcrumbs/BreadcrumbsNav.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
+
+const BreadcrumbsNav = forwardRef(({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (jsx("nav", { "aria-label": ariaLabel, ref: ref, className: clsx('ds-breadcrumbs__nav', className), ...rest })));
+BreadcrumbsNav.displayName = 'BreadcrumbsNav';
+
+export { BreadcrumbsNav };

package/dist/esm/components/Breadcrumbs/BreadcrumbsRoot.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/lite.js';
+import { forwardRef } from 'react';
+
+const BreadcrumbsRoot = forwardRef(({ className, size = 'md', ...rest }, ref) => (jsx("div", { ref: ref, className: clsx('ds-breadcrumbs', `ds-breadcrumbs--${size}`, className), ...rest })));
+BreadcrumbsRoot.displayName = 'BreadcrumbsRoot';
+
+export { BreadcrumbsRoot };

package/dist/esm/components/Breadcrumbs/index.js

@@ -0,0 +1,36 @@
+'use client';
+import { BreadcrumbsItem } from './BreadcrumbsItem.js';
+import { BreadcrumbsLink } from './BreadcrumbsLink.js';
+import { BreadcrumbsList } from './BreadcrumbsList.js';
+import { BreadcrumbsNav } from './BreadcrumbsNav.js';
+import { BreadcrumbsRoot } from './BreadcrumbsRoot.js';
+
+/**
+ * Breadcrumbs are used to visualize the current page path.
+ * @example
+ * <Breadcrumbs.Root>
+ *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ *  <Breadcrumbs.Nav aria-label="You are here:">
+ *   <Breadcrumbs.List>
+ *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *   </Breadcrumbs.List>
+ *  </Breadcrumbs.Nav>
+ * <Breadcrumbs.Root>
+ */
+const Breadcrumbs = {
+    Root: BreadcrumbsRoot,
+    Nav: BreadcrumbsNav,
+    List: BreadcrumbsList,
+    Item: BreadcrumbsItem,
+    Link: BreadcrumbsLink,
+};
+Breadcrumbs.Root.displayName = 'Breadcrumbs.Root';
+Breadcrumbs.Nav.displayName = 'Breadcrumbs.Nav';
+Breadcrumbs.List.displayName = 'Breadcrumbs.List';
+Breadcrumbs.Item.displayName = 'Breadcrumbs.Item';
+Breadcrumbs.Link.displayName = 'Breadcrumbs.Link';
+
+export { Breadcrumbs, BreadcrumbsItem, BreadcrumbsLink, BreadcrumbsList, BreadcrumbsNav, BreadcrumbsRoot };

package/dist/esm/components/Button/Button.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
+import { Slot } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
 import { clsx } from '../../node_modules/clsx/dist/lite.js';
 import { forwardRef } from 'react';
 import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
@@ -11,7 +11,7 @@ import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
  * <Button>Click me</Button>
  */
 const Button = forwardRef(({ children, variant = 'primary', color = 'accent', fullWidth = false, icon = false, type = 'button', size = 'md', asChild, className, ...rest }, ref) => {
-    const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : 'button';
+    const Component = asChild ? Slot : 'button';
     return (jsx(Paragraph, { variant: 'short', size: size, asChild: true, children: jsx(Component, { ref: ref, type: type, className: clsx('ds-btn', `ds-focus`, `ds-btn--${size}`, `ds-btn--${variant}`, `ds-btn--${color}`, fullWidth && 'ds-btn--full-width', icon && 'ds-btn--icon-only', className), ...rest, children: children }) }));
 });
 Button.displayName = 'Button';