@dbcdk/react-components 0.0.119 → 0.0.121

package/dist/components/button/Button.module.css

@@ -153,13 +153,13 @@
 }
 
 .default {
-  background-color: var(--color-bg-toolbar);
+  background-color: var(--opac-bg-default);
   color: var(--color-fg-default);
   border-color: transparent;
 }
 
 .default:hover {
-  background-color: var(--color-bg-toolbar-hover);
+  background-color: var(--opac-bg-dark);
   border-color: transparent;
 }
 

package/dist/components/card/Card.cjs

@@ -5,7 +5,7 @@ var styles = require('./Card.module.css');
 var CardMeta = require('./components/CardMeta');
 var Headline = require('../headline/Headline');
 var Hyperlink = require('../hyperlink/Hyperlink');
-var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+var SkeletonLoader = require('../skeleton-loader/SkeletonLoader');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -52,7 +52,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -76,7 +76,7 @@ function CardImpl({
           Headline.Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -89,10 +89,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.loadingRow, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoader.SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.js

@@ -3,7 +3,7 @@ import styles from './Card.module.css';
 import { CardMetaRow, CardMeta } from './components/CardMeta';
 import { Headline } from '../headline/Headline';
 import { Hyperlink } from '../hyperlink/Hyperlink';
-import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+import { SkeletonLoader } from '../skeleton-loader/SkeletonLoader';
 
 function getInnerPlacementClass(imgPlacement, s) {
   switch (imgPlacement) {
@@ -46,7 +46,7 @@ function CardImpl({
   children,
   link,
   width,
-  headlineSize = 4,
+  headlineSize = 3,
   truncateTitle = false
 }) {
   var _a;
@@ -70,7 +70,7 @@ function CardImpl({
           Headline,
           {
             severity,
-            marker: headerMarker,
+            marker: Boolean(severity) && headerMarker,
             icon: headerIcon,
             addition: headerAddition,
             subheader,
@@ -83,10 +83,7 @@ function CardImpl({
         ) : null,
         headerMeta ? /* @__PURE__ */ jsx("div", { className: styles.headerMeta, children: headerMeta }) : null
       ] }) : null,
-      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingList, "aria-busy": "true", "aria-live": "polite", children: Array.from({ length: 4 }, (_, index) => /* @__PURE__ */ jsxs("div", { className: styles.loadingRow, children: [
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, {}),
-        /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" })
-      ] }, index)) }) : null,
+      loading ? /* @__PURE__ */ jsx("div", { className: styles.loadingBody, "aria-busy": "true", "aria-live": "polite", children: /* @__PURE__ */ jsx(SkeletonLoader, { type: "squares", rows: 1, columns: 1 }) }) : null,
       showSection ? /* @__PURE__ */ jsxs("div", { className: styles.section, children: [
         showSectionDivider ? /* @__PURE__ */ jsx("div", { className: styles.sectionDivider }) : null,
         sectionTitle ? /* @__PURE__ */ jsx("div", { className: styles.sectionTitle, children: sectionTitle }) : null

package/dist/components/card/Card.module.css

@@ -159,16 +159,11 @@
 }
 
 /* Loading */
-.loadingList {
+.loadingBody {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.loadingRow {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 180px;
 }
 
 /* Responsive */

package/dist/components/lightbox/Lightbox.cjs

@@ -5,8 +5,10 @@ var jsxRuntime = require('react/jsx-runtime');
 var lucideReact = require('lucide-react');
 var react = require('react');
 var client = require('../../client');
+var Popover = require('../../components/popover/Popover');
 var styles = require('./Lightbox.module.css');
 var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -30,7 +32,8 @@ function Lightbox({
   showDownload = true,
   getDownloadFilename,
   buttonAddition,
-  trigger
+  trigger,
+  getContextMenuItems
 }) {
   var _a;
   const dialogRef = react.useRef(null);
@@ -119,28 +122,38 @@ function Lightbox({
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     trigger ? trigger(openAt) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnails, children: items.map((item, i) => {
       var _a2;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          className: styles__default.default.thumbnailBtn,
-          onClick: () => openAt(i),
-          "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMeta, children: /* @__PURE__ */ jsxRuntime.jsx(
-              client.MetaBar,
-              {
-                items: [
-                  { label: "H\xF8jde", value: item.height != null ? `${item.height}px` : "-" },
-                  { label: "Bredde", value: item.width != null ? `${item.width}px` : "-" }
-                ]
-              }
-            ) })
-          ]
-        },
-        i
-      );
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailCard, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMedia, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: styles__default.default.thumbnailBtn,
+            onClick: () => openAt(i),
+            "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.thumbnailFooter, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.thumbnailMeta, children: /* @__PURE__ */ jsxRuntime.jsx(
+            client.MetaBar,
+            {
+              items: [
+                { value: item.height != null ? `H:${item.height}px` : "-" },
+                { value: item.width != null ? `B:${item.width}px` : "-" }
+              ]
+            }
+          ) }),
+          getContextMenuItems ? /* @__PURE__ */ jsxRuntime.jsx(
+            ThumbnailContextMenu,
+            {
+              item,
+              index: i,
+              open: () => openAt(i),
+              getItems: getContextMenuItems
+            }
+          ) : null
+        ] })
+      ] }, i);
     }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "dialog",
@@ -215,5 +228,63 @@ function Lightbox({
     )
   ] });
 }
+function ThumbnailContextMenu({
+  item,
+  index,
+  open,
+  getItems
+}) {
+  const menuItems = getItems({ item, index, open });
+  if (!menuItems.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Button.Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "inline",
+            className: styles__default.default.thumbnailMenuTrigger,
+            "aria-label": `Flere handlinger for ${(_a = item.title) != null ? _a : `billede ${index + 1}`}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen ? true : false,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { size: 16 }),
+            onClick: (e) => {
+              e.stopPropagation();
+              toggle(e);
+            }
+          }
+        );
+      },
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        Menu.Menu.Item,
+        {
+          active: menuItem.active,
+          selected: menuItem.selected,
+          disabled: menuItem.disabled,
+          variant: menuItem.variant,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                menuItem.onClick();
+                close();
+              },
+              children: menuItem.label
+            }
+          )
+        },
+        menuItemIndex
+      )) })
+    }
+  );
+}
 
 exports.Lightbox = Lightbox;

package/dist/components/lightbox/Lightbox.d.ts

@@ -8,6 +8,14 @@ export type LightboxItem = {
     width?: number;
     height?: number;
 };
+export type LightboxContextMenuItem = {
+    label: ReactNode;
+    onClick: () => void;
+    active?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+};
 export interface LightboxProps {
     items: LightboxItem[];
     title?: string;
@@ -17,5 +25,10 @@ export interface LightboxProps {
     getDownloadFilename?: (item: LightboxItem, index: number) => string;
     buttonAddition?: ReactNode;
     trigger?: (open: (index?: number) => void) => ReactNode;
+    getContextMenuItems?: (args: {
+        item: LightboxItem;
+        index: number;
+        open: () => void;
+    }) => LightboxContextMenuItem[];
 }
-export declare function Lightbox({ items, title, initialIndex, thumbnailHeight, showDownload, getDownloadFilename, buttonAddition, trigger, }: LightboxProps): ReactElement | null;
+export declare function Lightbox({ items, title, initialIndex, thumbnailHeight, showDownload, getDownloadFilename, buttonAddition, trigger, getContextMenuItems, }: LightboxProps): ReactElement | null;

package/dist/components/lightbox/Lightbox.js

@@ -1,10 +1,12 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Download, X, ChevronLeft, ChevronRight } from 'lucide-react';
+import { Download, X, ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
 import { useRef, useState, useEffect, useCallback } from 'react';
 import { MetaBar } from '../../client';
+import { Popover } from '../../components/popover/Popover';
 import styles from './Lightbox.module.css';
 import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
 
 function extFromMime(mime) {
   var _a;
@@ -24,7 +26,8 @@ function Lightbox({
   showDownload = true,
   getDownloadFilename,
   buttonAddition,
-  trigger
+  trigger,
+  getContextMenuItems
 }) {
   var _a;
   const dialogRef = useRef(null);
@@ -113,28 +116,38 @@ function Lightbox({
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     trigger ? trigger(openAt) : /* @__PURE__ */ jsx("div", { className: styles.thumbnails, children: items.map((item, i) => {
       var _a2;
-      return /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          className: styles.thumbnailBtn,
-          onClick: () => openAt(i),
-          "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: styles.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail }),
-            /* @__PURE__ */ jsx("div", { className: styles.thumbnailMeta, children: /* @__PURE__ */ jsx(
-              MetaBar,
-              {
-                items: [
-                  { label: "H\xF8jde", value: item.height != null ? `${item.height}px` : "-" },
-                  { label: "Bredde", value: item.width != null ? `${item.width}px` : "-" }
-                ]
-              }
-            ) })
-          ]
-        },
-        i
-      );
+      return /* @__PURE__ */ jsxs("div", { className: styles.thumbnailCard, children: [
+        /* @__PURE__ */ jsx("div", { className: styles.thumbnailMedia, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: styles.thumbnailBtn,
+            onClick: () => openAt(i),
+            "aria-label": (_a2 = item.title) != null ? _a2 : `Billede ${i + 1}`,
+            children: /* @__PURE__ */ jsx("div", { className: styles.thumbnailImg, style: { height: thumbnailHeight }, children: item.thumbnail })
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: styles.thumbnailFooter, children: [
+          /* @__PURE__ */ jsx("div", { className: styles.thumbnailMeta, children: /* @__PURE__ */ jsx(
+            MetaBar,
+            {
+              items: [
+                { value: item.height != null ? `H:${item.height}px` : "-" },
+                { value: item.width != null ? `B:${item.width}px` : "-" }
+              ]
+            }
+          ) }),
+          getContextMenuItems ? /* @__PURE__ */ jsx(
+            ThumbnailContextMenu,
+            {
+              item,
+              index: i,
+              open: () => openAt(i),
+              getItems: getContextMenuItems
+            }
+          ) : null
+        ] })
+      ] }, i);
     }) }),
     /* @__PURE__ */ jsx(
       "dialog",
@@ -209,5 +222,63 @@ function Lightbox({
     )
   ] });
 }
+function ThumbnailContextMenu({
+  item,
+  index,
+  open,
+  getItems
+}) {
+  const menuItems = getItems({ item, index, open });
+  if (!menuItems.length) return null;
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      matchTriggerWidth: false,
+      minWidth: "180px",
+      trigger: (toggle, _icon, isOpen) => {
+        var _a;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "inline",
+            className: styles.thumbnailMenuTrigger,
+            "aria-label": `Flere handlinger for ${(_a = item.title) != null ? _a : `billede ${index + 1}`}`,
+            "aria-haspopup": "menu",
+            "aria-expanded": isOpen ? true : false,
+            icon: /* @__PURE__ */ jsx(MoreHorizontal, { size: 16 }),
+            onClick: (e) => {
+              e.stopPropagation();
+              toggle(e);
+            }
+          }
+        );
+      },
+      children: (close) => /* @__PURE__ */ jsx(Menu, { children: menuItems.map((menuItem, menuItemIndex) => /* @__PURE__ */ jsx(
+        Menu.Item,
+        {
+          active: menuItem.active,
+          selected: menuItem.selected,
+          disabled: menuItem.disabled,
+          variant: menuItem.variant,
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                menuItem.onClick();
+                close();
+              },
+              children: menuItem.label
+            }
+          )
+        },
+        menuItemIndex
+      )) })
+    }
+  );
+}
 
 export { Lightbox };

package/dist/components/lightbox/Lightbox.module.css

@@ -5,16 +5,32 @@
   gap: var(--spacing-md);
 }
 
+.thumbnailCard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.thumbnailMedia {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
 .thumbnailBtn {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
+  display: block;
   flex: none;
   text-align: left;
+  position: relative;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .thumbnailImg {
@@ -25,6 +41,8 @@
   transition:
     transform var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard);
+  min-width: 0;
+  max-width: 100%;
 }
 
 .thumbnailBtn:hover .thumbnailImg {
@@ -34,12 +52,47 @@
 .thumbnailImg > img {
   height: 100%;
   width: auto;
+  max-width: 100%;
   display: block;
 }
 
 .thumbnailMeta {
+  flex: 1 1 auto;
   display: flex;
   gap: var(--spacing-2xs);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.thumbnailMeta > div {
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.thumbnailMeta > div > span,
+.thumbnailMeta > div > span > span {
+  min-width: 0;
+}
+
+.thumbnailMeta > div > span:not([aria-hidden='true']) {
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.thumbnailFooter {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  min-width: 0;
+  max-width: 100%;
+}
+
+.thumbnailMenuTrigger {
+  flex: 0 0 auto;
+  min-width: 0;
 }
 
 .dialog {

package/dist/components/search-box/SearchBox.cjs

@@ -49,6 +49,7 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
   const listboxId = react.useId();
   const popoverRef = react.useRef(null);
   const internalInputRef = react.useRef(null);
+  const onSearchRef = react.useRef(onSearch);
   react.useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -62,18 +63,22 @@ const SearchBox = react.forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   react.useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  react.useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   react.useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

package/dist/components/search-box/SearchBox.js

@@ -43,6 +43,7 @@ const SearchBox = forwardRef(function SearchBoxInner({
   const listboxId = useId();
   const popoverRef = useRef(null);
   const internalInputRef = useRef(null);
+  const onSearchRef = useRef(onSearch);
   useEffect(() => {
     if (typeof ref === "function") {
       ref(internalInputRef.current);
@@ -56,18 +57,22 @@ const SearchBox = forwardRef(function SearchBoxInner({
     if (next !== draft) setDraft(next);
   }, [value]);
   useEffect(() => {
-    if (!onSearch) return;
+    onSearchRef.current = onSearch;
+  }, [onSearch]);
+  useEffect(() => {
+    if (!onSearchRef.current) return;
     if (!debounce) {
       setSearchQuery(draft);
-      onSearch(draft);
+      onSearchRef.current(draft);
       return;
     }
     const handler = setTimeout(() => {
+      var _a2;
       setSearchQuery(draft);
-      onSearch(draft);
+      (_a2 = onSearchRef.current) == null ? void 0 : _a2.call(onSearchRef, draft);
     }, debounceMs);
     return () => clearTimeout(handler);
-  }, [draft, onSearch, debounce, debounceMs]);
+  }, [draft, debounce, debounceMs]);
   useEffect(() => {
     function handleKeyDown(event) {
       var _a2;

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -11,7 +11,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -5,7 +5,7 @@ function SkeletonLoaderItem({
   height = 14,
   width = "100%",
   radius = 6,
-  speedSec = 3,
+  speedSec = 4,
   ariaLabel = "Loading",
   variant = "default"
 }) {

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -2,8 +2,9 @@
   --h: var(--skeleton-height, 14px);
   --r: var(--border-radius-md, 6px);
   --speed: var(--skeleton-speed, 1.2s);
-  --skeleton-base: var(--opac-bg-dark);
-  --skeleton-sheen: var(--opac-bg-default);
+  --skeleton-base: var(--opac-bg-default);
+  --skeleton-sheen: var(--opac-bg-light);
+  --skeleton-sheen-soft: color-mix(in srgb, var(--skeleton-sheen) 60%, var(--skeleton-base));
   position: relative;
   display: block;
   inline-size: var(--width, 100%);
@@ -14,17 +15,20 @@
   border-radius: var(--r);
   background: linear-gradient(
     90deg,
-    var(--skeleton-sheen) 0%,
-    var(--skeleton-base) 45%,
-    var(--skeleton-sheen) 60%,
+    var(--skeleton-base) 0%,
+    var(--skeleton-base) 34%,
+    var(--skeleton-sheen-soft) 45%,
+    var(--skeleton-sheen) 50%,
+    var(--skeleton-sheen-soft) 55%,
+    var(--skeleton-base) 66%,
     var(--skeleton-base) 100%
   );
-  background-size: 200% 100%;
+  background-size: 240% 100%;
   animation: shimmer var(--speed) linear infinite;
 }
 
 .invert {
-  --skeleton-base: var(--opac-bg-dark-invert);
+  --skeleton-base: var(--opac-bg-default-invert);
   --skeleton-sheen: var(--opac-bg-light-invert);
 }