@dbcdk/react-components 0.0.64 → 0.0.66

package/dist/components/forms/input/Input.module.css

@@ -163,9 +163,9 @@
 
 .standalone {
   background-color: var(--color-bg-surface);
-  border-color: var(--color-border-default);
+  border-color: var(--color-border-subtle);
   border-radius: var(--border-radius-rounded);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
+  box-shadow: var(--shadow-xs), var(--shadow-sm);
 }
 
 .standalone .input {
@@ -401,14 +401,15 @@
 .withButton:has(.standalone) .trailingButton {
   border-top-right-radius: var(--border-radius-rounded);
   border-bottom-right-radius: var(--border-radius-rounded);
-  border-left-color: var(--color-border-default);
+  border-left-color: var(--color-border-subtle);
+  border-color: var(--color-border-subtle);
   background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
+  box-shadow: var(--shadow-xs), var(--shadow-sm);
 }
 
 .withButton:has(.standalone) .trailingButton:hover {
   border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-sm), var(--shadow-md);
+  box-shadow: var(--shadow-sm), var(--shadow-sm);
 }
 
 /* Date/time picker indicator (WebKit) */

package/dist/components/overlay/fade-overlay/FadeOverlay.d.ts

@@ -0,0 +1,13 @@
+import type { HTMLAttributes, ReactElement } from 'react';
+export interface FadeOverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which edge should have the solid background color.
+     * Defaults to bottom, which fits preview/paywall-style fades.
+     */
+    edge?: 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * How far the fade reaches into the container.
+     */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function FadeOverlay({ edge, size, className, 'aria-hidden': ariaHidden, ...rest }: FadeOverlayProps): ReactElement;

package/dist/components/overlay/fade-overlay/FadeOverlay.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './FadeOverlay.module.css';
+function cx(...parts) {
+    return parts.filter(Boolean).join(' ');
+}
+export function FadeOverlay({ edge = 'bottom', size = 'md', className, 'aria-hidden': ariaHidden = true, ...rest }) {
+    return (_jsx("div", { "aria-hidden": ariaHidden, className: cx(styles.overlay, styles[edge], styles[size], className), ...rest }));
+}

package/dist/components/overlay/fade-overlay/FadeOverlay.module.css

@@ -0,0 +1,54 @@
+.overlay {
+  --fade-overlay-color: var(--color-bg-surface);
+  --fade-overlay-size: 65%;
+
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+.bottom {
+  background: linear-gradient(
+    to top,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.top {
+  background: linear-gradient(
+    to bottom,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.left {
+  background: linear-gradient(
+    to right,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.right {
+  background: linear-gradient(
+    to left,
+    var(--fade-overlay-color) 0%,
+    transparent var(--fade-overlay-size)
+  );
+}
+
+.sm {
+  --fade-overlay-size: 40%;
+}
+
+.md {
+  --fade-overlay-size: 65%;
+}
+
+.lg {
+  --fade-overlay-size: 85%;
+}

package/dist/components/page-layout/components/layout-footer/LayoutFooter.module.css

@@ -1,6 +1,7 @@
 .footer {
   inline-size: 100%;
   background: var(--color-bg-surface-subtle);
+  line-height: var(--line-height-normal);
 }
 
 .inner {
@@ -37,7 +38,7 @@
   font-style: normal;
   margin: 0;
   color: var(--color-fg-subtle);
-  line-height: var(--line-height-tight);
+  line-height: var(--line-height-normal);
   display: flex;
   flex-direction: column;
   gap: 1px;
@@ -52,6 +53,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 0;
+  line-height: var(--line-height-normal);
 }
 
 .linkGroup {

package/dist/components/search-box/SearchBox.d.ts

@@ -3,6 +3,7 @@ import { InputVariant } from '../../components/forms/input/Input';
 import { Size } from '../../types/sizes.types';
 type SearchBoxProps<T extends Record<string, unknown>> = {
     inputWidth?: string | number;
+    maxWidth?: string | number;
     inputSize?: Exclude<Size, 'xl'>;
     variant?: InputVariant;
     result?: T[];

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

@@ -7,7 +7,7 @@ import { Menu } from '../../components/menu/Menu';
 import { Popover } from '../../components/popover/Popover';
 import { SkeletonLoaderItem } from '../../components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
 import styles from './SearchBox.module.css';
-export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
+export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, maxWidth, inputSize, variant, result, debounce = true, debounceMs = 800, onSearch, onSelect, displayPopover, resultKeys, resultTemplate, initialTemplate, popoverMinWidth = '500px', noResultText = 'Ingen resultater', loading, enableHotkey = true, onButtonClick, buttonLabel, buttonIcon, fullWidth = false, value, onChange, ...rest }, ref) {
     const isControlled = value !== undefined;
     // What the user sees immediately in the textbox
     const [draft, setDraft] = useState(() => (isControlled ? String(value !== null && value !== void 0 ? value : '') : ''));
@@ -156,5 +156,8 @@ export const SearchBox = forwardRef(function SearchBoxInner({ inputWidth, inputS
         buttonIcon,
         fullWidth,
     ]);
-    return _jsx("div", { style: fullWidth ? { width: '100%' } : undefined, children: inputField });
+    return (_jsx("div", { style: {
+            ...(fullWidth ? { width: '100%' } : undefined),
+            ...(maxWidth !== undefined ? { maxWidth } : undefined),
+        }, children: inputField }));
 });

package/dist/index.d.ts

@@ -54,6 +54,7 @@ export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
 export * from './components/overlay/side-panel/SidePanel';
 export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';

package/dist/index.js

@@ -54,6 +54,7 @@ export * from './components/filtering/chip-multi-toggle/ChipMultiToggle';
 export * from './components/forms/checkbox-group/CheckboxGroup';
 export * from './components/overlay/side-panel/SidePanel';
 export * from './components/overlay/side-panel/useSidePanel';
+export * from './components/overlay/fade-overlay/FadeOverlay';
 export * from './components/forms/input-container/InputContainer';
 export * from './components/hyperlink/Hyperlink';
 export * from './components/overlay/tooltip/Tooltip';

package/dist/styles/themes/dbc/dark.css

@@ -181,11 +181,11 @@ html[data-theme='dark'] {
   --opac-bg-dark-invert: rgba(0, 0, 0, 0.15);
 
   /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.32);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24);
+  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.32);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.48);
 
   /* Data viz */
   --viz-cat-1: #2563eb;

package/dist/styles/themes/dbc/light.css

@@ -180,11 +180,11 @@ html[data-theme='light'] {
   --opac-bg-dark-invert: rgba(255, 255, 255, 0.1);
 
   /* Shadows */
-  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
-  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.12);
 
   /* Data viz */
   --viz-cat-1: #2563eb;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",