@altinn/altinn-components 0.57.3 → 0.58.1

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

@@ -7,7 +7,10 @@ declare const meta: {
     args: {};
 };
 export default meta;
-export declare const Default: ({ defaultBulkIds, }: {
+export declare const Default: ({ defaultAccountId, defaultBulkIds, }: {
+    defaultAccountId?: string;
     defaultBulkIds?: string[];
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const BulkModeOn: () => import("react/jsx-runtime").JSX.Element;
+export declare const Company: () => import("react/jsx-runtime").JSX.Element;
+export declare const CompanyBulkMode: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bulk/BulkButton.d.ts

@@ -4,5 +4,6 @@ export interface BulkButtonProps {
     icon: SvgElement;
     label: string;
     onClick?: () => void;
+    loading?: boolean;
 }
-export declare const BulkButton: ({ icon, label, onClick }: BulkButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BulkButton: ({ icon, label, onClick, loading }: BulkButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/ContextMenu/ContextMenu.d.ts

@@ -1,9 +1,10 @@
 import { DropdownProps } from '../Dropdown';
-import { MenuProps } from '../Menu';
+import { MenuItemColor, MenuProps } from '../Menu';
 export interface ContextMenuProps extends MenuProps {
     id?: string;
     title?: string;
     placement?: DropdownProps['placement'];
     'aria-label'?: string;
+    color?: MenuItemColor;
 }
-export declare const ContextMenu: ({ groups, items, title, id, placement, "aria-label": ariaLabel, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ groups, items, title, color, id, placement, "aria-label": ariaLabel, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dialog/DialogContact.d.ts

@@ -1,7 +1,16 @@
 import { ReactNode } from 'react';
-import { ContactButtonsProps, ContactSectionProps } from '..';
-export interface DialogContactProps extends ContactButtonsProps {
+import { ButtonProps, LinkProps } from '..';
+export interface DialogContactButtonProps {
+    as?: ButtonProps['as'];
+    href?: ButtonProps['href'];
+    onClick?: ButtonProps['onClick'];
+    label: string;
+}
+export interface DialogContactProps {
+    id?: string;
     title?: string;
     children?: ReactNode;
+    buttons: DialogContactButtonProps[];
+    helpLink?: LinkProps;
 }
-export declare const DialogContact: ({ id, title, children, items }: ContactSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DialogContact: ({ id, title, children, buttons, helpLink, }: DialogContactProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/Dropdown.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
+import { Color } from '..';
 export type DropdownSize = 'auto' | 'sm' | 'md' | 'lg';
 export type DropdownPlacement = 'left' | 'right' | 'bottom' | 'top' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
 export type DropdownVariant = 'dropdown' | 'drawer' | 'drawer-dropdown' | 'header-dropdown' | 'header';
 export interface DropdownProps {
     id?: string;
+    color?: Color;
     className?: string;
     backdrop?: boolean;
     placement?: DropdownPlacement;
@@ -21,4 +23,4 @@ export interface DropdownProps {
     useFixedPosition?: boolean;
     expanded?: boolean;
 }
-export declare const Dropdown: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, color, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { DropdownProps } from './Dropdown';
 declare const meta: {
     title: string;
-    component: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, color, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -11,4 +11,3 @@ declare const meta: {
 export default meta;
 export declare const DropdownMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DrawerMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DrawerOrDropdownMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/index.d.ts

@@ -6,5 +6,4 @@ export * from './DrawerHeader';
 export * from './DrawerFooter';
 export * from './DrawerButton';
 export * from './DrawerBody';
-export * from './DrawerOrDropdown';
 export * from './FloatingDropdown';

package/dist/types/lib/components/Forms/SearchField.stories.d.ts

@@ -16,4 +16,5 @@ export declare const Default: Story;
 export declare const ClearButton: Story;
 export declare const DebouncedQuery: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Controlled: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Autocomplete: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/VirtualizedMenu.stories.d.ts

@@ -17,6 +17,27 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const NotVirtualized: () => import("react/jsx-runtime").JSX.Element;
-export declare const Virtualized: () => import("react/jsx-runtime").JSX.Element;
-export declare const ToolbarVirtualizedMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotVirtualized: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};
+export declare const Virtualized: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};
+export declare const ToolbarVirtualizedMenu: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};

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

@@ -19,4 +19,4 @@ export interface SettingsItemProps extends SettingsItemBaseProps {
     modalProps?: SettingsItemModalProps;
     children?: ReactNode;
 }
-export declare const SettingsItem: ({ loading, variant, id, name, checked, onChange, modalProps, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItem: ({ loading, variant, id, name, title, value, description, checked, onChange, modalProps, children, ...props }: SettingsItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsItemBase.d.ts

@@ -1,13 +1,19 @@
-import { ListItemBaseProps, ListItemHeaderProps, ListItemLabelProps } from '..';
-export interface SettingsItemBaseProps extends ListItemBaseProps, ListItemHeaderProps {
+import { ReactNode } from 'react';
+import { BadgeProps, HeadingProps, ItemBaseProps, ItemLinkProps, ItemMediaProps } from '..';
+export interface SettingsItemBaseProps extends ItemLinkProps {
     id?: string;
     groupId?: string;
-    collapsible?: boolean;
-    expanded?: boolean;
-    icon?: ListItemHeaderProps['icon'];
-    label?: ListItemHeaderProps['children'];
-    title?: ListItemLabelProps['title'];
-    value?: ListItemLabelProps['value'];
-    description?: ListItemLabelProps['description'];
+    hidden?: boolean;
+    ref?: ItemBaseProps['ref'];
+    color?: ItemBaseProps['color'];
+    icon?: ItemMediaProps['icon'];
+    label?: ReactNode;
+    titleProps?: HeadingProps;
+    descriptionProps?: HeadingProps;
+    highlightWords?: string[];
+    badge?: BadgeProps;
+    linkIcon?: boolean;
+    controls?: ReactNode;
+    children?: ReactNode;
 }
-export declare const SettingsItemBase: ({ ref, loading, color, size, expanded, icon, label, title, value, description, children, highlightWords, ...props }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItemBase: ({ as, ref, hidden, loading, color, expanded, icon, label, titleProps, descriptionProps, children, highlightWords, badge, linkIcon, controls, ...rest }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Typography/Link.d.ts

@@ -0,0 +1,11 @@
+import { LinkProps as DsLinkProps } from '@digdir/designsystemet-react';
+import * as React from 'react';
+export type LinkSize = 'xs' | DsLinkProps['data-size'];
+export type LinkProps = {
+    as?: React.ElementType;
+    size?: LinkSize;
+} & Omit<DsLinkProps, 'asChild' | 'data-size'>;
+export declare const Link: React.ForwardRefExoticComponent<{
+    as?: React.ElementType;
+    size?: LinkSize;
+} & Omit<DsLinkProps, "data-size" | "asChild"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/lib/components/Typography/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Typography';
 export * from './Heading';
+export * from './Link';

package/dist/types/lib/stories/Profile.stories.d.ts

@@ -11,6 +11,7 @@ export declare const DashboardPage: () => import("react/jsx-runtime").JSX.Elemen
 export declare const AccountsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const AccountsPageVirtualized: () => import("react/jsx-runtime").JSX.Element;
 export declare const AlertsPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const BookmarksPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const SettingsPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const ActivityLogPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const UsersPage: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/test-utils/screenshot-compare.d.ts

@@ -0,0 +1,49 @@
+export interface ComparisonResult {
+    match: boolean;
+    mismatchedPixels: number;
+    totalPixels: number;
+    percentage: number;
+    error?: string;
+    baselineCreated?: boolean;
+}
+/**
+ * Compare two PNG screenshots pixel-by-pixel.
+ * - If baseline doesn't exist: auto-creates it from actual (first run)
+ * - If baseline exists: compares pixel-by-pixel and generates diff image on mismatch
+ *
+ * @param actualPath - Screenshot captured during test run (.screenshots-temp/actual/)
+ * @param baselinePath - Reference screenshot (lib/components/.../\_\_screenshots\_\_/)
+ * @param diffPath - Where to save diff image on mismatch (.screenshots-temp/diff/)
+ * @param threshold - Pixel matching threshold (0-1), defaults to 0.1
+ * @returns Comparison result with match status and pixel difference details
+ */
+export declare function compareScreenshots(actualPath: string, baselinePath: string, diffPath: string, threshold?: number): Promise<ComparisonResult>;
+/**
+ * Clean up temporary screenshot directories created during testing.
+ */
+export declare function cleanupTemporaryFiles(): Promise<void>;
+interface ComparisonFailure {
+    testName: string;
+    actualPath: string;
+    baselinePath: string;
+    diffPath: string;
+    percentage: number;
+    mismatchedPixels: number;
+    totalPixels: number;
+    error?: string;
+}
+/**
+ * Compare all captured screenshots against baselines.
+ * - Baselines are stored in component-local \_\_screenshots\_\_ directories
+ * - If baseline doesn't exist, it's auto-created from the actual screenshot
+ * - Diff images are saved to .screenshots-temp/diff/ for failed comparisons
+ *
+ * @param filterPattern - Optional pattern to filter screenshots (e.g., "Button")
+ * @returns Summary of passed tests, failures, and newly created baselines
+ */
+export declare function compareAllScreenshots(filterPattern?: string): Promise<{
+    passed: number;
+    failed: ComparisonFailure[];
+    baselinesCreated: number;
+}>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.57.3",
+  "version": "0.58.1",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -38,7 +38,9 @@
     "@storybook/addon-vitest": "10.2.10",
     "@storybook/react-vite": "10.2.10",
     "@testing-library/react": "^16.3.0",
+    "@storycap-testrun/browser": "^2.0.0",
     "@types/node": "^25.0.7",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-react-swc": "^3.9.0",
@@ -49,18 +51,20 @@
     "axe-playwright": "^2.1.0",
     "glob": "^13.0.6",
     "lint-staged": "^15.5.2",
+    "pixelmatch": "^7.1.0",
     "playwright": "^1.57.0",
+    "pngjs": "^7.0.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "10.2.10",
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-theme-provider": "^0.2.10",
     "tsx": "^4.21.0",
     "typescript": "^5.8.3",
-    "vite": "7.3.1",
+    "vite": "7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^2.3.2",
-    "vitest": "4.0.16"
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
     "react": ">=18.3.1 || ^19.0.0",
@@ -87,6 +91,9 @@
     "ci:build-storybook": "storybook build --quiet",
     "test-storybook": "vitest --run --project=storybook",
     "test-storybook-watch": "vitest --project=storybook",
+    "test:screenshots": "rm -rf .screenshots-temp/actual && SCREENSHOT_MODE=test vitest --run --project=storybook && node --import tsx lib/test-utils/screenshot-compare.ts",
+    "test:screenshots:filter": "bash scripts/test-screenshots-filter.sh",
+    "test:screenshots:regenerate-all": "node --import tsx scripts/regenerate-screenshots.ts",
     "ci:test-storybook": "pnpm dlx concurrently -k -s first \"pnpm storybook\" \"pnpm dlx wait-on http://localhost:6006 && pnpm test-storybook\"",
     "install:browsers": "pnpm exec playwright install",
     "build-tokens": "node --import tsx scripts/build-tokens.ts && pnpm biome check ./lib/css/tokens/design-tokens-build/. --write"