@altinn/altinn-components 0.10.3 → 0.11.0

package/dist/{lib → types/lib}/components/Bookmarks/BookmarksListItem.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react';
-import { BookmarksListItemProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ size, title, description, params, ...rest }: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ size, icon, expanded, loading, title, titleField, untitled, params, onToggle, saveButton, removeButton, ...rest }: import('./BookmarksListItem').BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -21,5 +20,5 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const CustomTitle: Story;
+export declare const Expanded: Story;
 export declare const LotsOfParams: Story;
-export declare const Sizes: (args: BookmarksListItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksSection.d.ts

@@ -0,0 +1,14 @@
+import { BookmarksListItemProps, ButtonProps, TextFieldProps } from '../';
+export interface BookmarksSectionProps {
+    title?: string;
+    description?: string;
+    items: BookmarksListItemProps[];
+    untitled?: string;
+    titleField?: TextFieldProps;
+    saveButton?: ButtonProps;
+    removeButton?: ButtonProps;
+    expandedId?: string;
+    onToggle?: (id: string) => void;
+    loading?: boolean;
+}
+export declare const BookmarksSection: ({ loading, title, description, items, untitled, titleField, saveButton, removeButton, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bookmarks/BookmarksSection.stories.d.ts

@@ -0,0 +1,52 @@
+import { StoryObj } from '@storybook/react';
+import { BookmarksSectionProps } from './BookmarksSection';
+declare const meta: {
+    title: string;
+    component: ({ loading, title, description, items, untitled, titleField, saveButton, removeButton, expandedId, onToggle, }: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {};
+    args: {
+        title: string;
+        untitled: string;
+        titleField: {
+            label: string;
+            placeholder: string;
+            helperText: string;
+        };
+        saveButton: {
+            label: string;
+        };
+        removeButton: {
+            label: string;
+        };
+        description: string;
+        items: ({
+            id: string;
+            title: string;
+            params: ({
+                type: "search";
+                label: string;
+            } | {
+                type: "filter";
+                label: string;
+            })[];
+        } | {
+            id: string;
+            params: ({
+                type: "search";
+                label: string;
+            } | {
+                type: "filter";
+                label: string;
+            })[];
+            title?: undefined;
+        })[];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ExpandedItem: Story;
+export declare const ControlledState: (args: BookmarksSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LoadingState: Story;
+export declare const EmptyState: Story;

package/dist/{lib → types/lib}/components/Bookmarks/index.d.ts

@@ -1,4 +1,3 @@
-export * from './BookmarksList';
 export * from './BookmarksListItem';
 export * from './QueryLabel';
 export * from './BookmarksSection';

package/dist/{lib → types/lib}/components/Button/Button.d.ts

@@ -4,5 +4,6 @@ export interface ButtonProps extends Partial<ButtonBaseProps> {
     icon?: IconName;
     reverse?: boolean;
     loading?: boolean;
+    label?: string;
 }
-export declare const Button: ({ variant, color, size, reverse, selected, icon, href, children, className, loading, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, color, size, reverse, selected, icon, href, label, children, className, loading, ...rest }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{lib → types/lib}/components/Button/Button.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ variant, color, size, reverse, selected, icon, href, children, className, loading, ...rest }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ variant, color, size, reverse, selected, icon, href, label, children, className, loading, ...rest }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/{lib → types/lib}/components/Button/IconButton.d.ts

@@ -9,5 +9,6 @@ export interface IconButtonProps {
     variant?: ButtonVariant;
     className?: string;
     onClick?: MouseEventHandler;
+    dataTestId?: string;
 }
-export declare const IconButton: ({ variant, color, size, icon, iconSize, className, onClick, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ variant, color, size, icon, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{lib → types/lib}/components/Button/IconButton.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { IconButtonProps } from './IconButton';
 declare const meta: {
     title: string;
-    component: ({ variant, color, size, icon, iconSize, className, onClick, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ variant, color, size, icon, iconSize, className, onClick, dataTestId, }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/{lib → types/lib}/components/Layout/LayoutBase.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-export type LayoutTheme = 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
+export type LayoutTheme = 'inherit' | 'global' | 'global-dark' | 'neutral' | 'company' | 'person';
 export interface LayoutBaseProps {
     theme?: LayoutTheme;
     currentId?: string;

package/dist/{lib → types/lib}/components/List/ListItemControls.d.ts

@@ -3,11 +3,12 @@ import { BadgeProps } from '../Badge';
 import { ContextMenuProps } from '../ContextMenu';
 import { IconName } from '../Icon';
 interface ListItemControlsProps {
+    className?: string;
     badge?: BadgeProps;
     linkText?: string;
     linkIcon?: IconName;
     menu?: ContextMenuProps;
     children?: ReactNode;
 }
-export declare const ListItemControls: ({ badge, linkText, linkIcon, menu, children }: ListItemControlsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemControls: ({ className, badge, linkText, linkIcon, menu, children }: ListItemControlsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/{lib → types/lib}/components/List/ListItemHeader.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 import { AvatarGroupProps, AvatarProps } from '../Avatar';
 import { BadgeProps } from '../Badge';
+import { ContextMenuProps } from '../ContextMenu';
 import { IconName } from '../Icon';
 import { ListItemSize } from './ListItemBase';
 import { ListItemLinkProps } from './ListItemLink';
-import { ListItemMenuProps } from './ListItemMenu';
 import { ListItemSelectProps } from './ListItemSelect';
 export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Header is loading */
@@ -36,7 +36,7 @@ export interface ListItemHeaderProps extends ListItemLinkProps {
     /** Optional badge */
     badge?: BadgeProps;
     /** Context menu */
-    menu?: ListItemMenuProps;
+    menu?: ContextMenuProps;
     /** Custom controls */
     controls?: ReactNode;
     /** Custom label */

package/dist/{lib → types/lib}/components/Menu/MenuItemBase.d.ts

@@ -2,7 +2,7 @@ import { ElementType, KeyboardEventHandler, ReactNode } from 'react';
 import { BadgeProps } from '../Badge';
 import { IconName } from '../Icon';
 export type MenuItemSize = 'xs' | 'sm' | 'md' | 'lg';
-export type MenuItemColor = 'neutral' | 'subtle' | 'strong' | 'company' | 'person';
+export type MenuItemColor = 'neutral' | 'subtle' | 'surface' | 'strong' | 'company' | 'person';
 export interface MenuItemBaseProps {
     as?: ElementType;
     size?: MenuItemSize;

package/dist/{lib → types/lib}/components/Page/Article.d.ts

@@ -3,4 +3,4 @@ import { SectionProps } from './Section';
 export interface ArticleProps extends SectionProps {
     children?: ReactNode;
 }
-export declare const Article: ({ theme, children, ...props }: ArticleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Article: ({ children, ...props }: ArticleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Breadcrumbs.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbsLinkProps } from '../';
+export interface BreadcrumbsProps {
+    items?: BreadcrumbsLinkProps[];
+}
+export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/BreadcrumbsLink.d.ts

@@ -0,0 +1,11 @@
+import { ElementType, ReactNode } from 'react';
+export interface BreadcrumbsLinkProps extends React.HTMLAttributes<HTMLButtonElement> {
+    as?: ElementType;
+    selected?: boolean;
+    disabled?: boolean;
+    href?: string;
+    label?: string;
+    className?: string;
+    children?: ReactNode;
+}
+export declare const BreadcrumbsLink: ({ as, className, disabled, selected, tabIndex, label, children, ...rest }: BreadcrumbsLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{lib/components/Page/PageBase.stories.d.ts → types/lib/components/Page/Examples.stories.d.ts}

@@ -6,6 +6,7 @@ declare const meta: {
     args: {};
 };
 export default meta;
+export declare const Frontpage: () => import("react/jsx-runtime").JSX.Element;
+export declare const ArticlePage: () => import("react/jsx-runtime").JSX.Element;
 export declare const DialogPage: () => import("react/jsx-runtime").JSX.Element;
 export declare const ProfilePage: () => import("react/jsx-runtime").JSX.Element;
-export declare const ArticlePage: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Flex.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+export type FlexElement = 'div' | 'section' | 'article' | 'header' | 'footer' | 'nav';
+export type FlexTheme = 'inherit' | 'neutral' | 'company' | 'person';
+export type FlexColor = 'transparent' | 'subtle' | 'surface' | 'accent';
+export type FlexDirection = 'col' | 'row';
+export type FlexAlign = 'initial' | 'start' | 'end' | 'center' | 'stretch';
+export type FlexJustify = 'initial' | 'start' | 'end' | 'center' | 'between';
+export type FlexSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FlexPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FlexMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type FlexShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface FlexProps {
+    as?: FlexElement;
+    theme?: FlexTheme;
+    color?: FlexColor;
+    direction?: FlexDirection;
+    reverse?: boolean;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    spacing?: FlexSpacing;
+    padding?: FlexPadding;
+    margin?: FlexMargin;
+    shadow?: FlexShadow;
+    inset?: boolean;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Flex: ({ as, theme, color, direction, reverse, align, justify, spacing, padding, margin, inset, className, style, children, ...rest }: FlexProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/Grid.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, ReactNode } from 'react';
+export type GridTheme = 'inherit' | 'neutral' | 'company' | 'person';
+export type GridColor = 'transparent' | 'subtle' | 'surface' | 'accent';
+export type GridElement = 'div' | 'section' | 'article' | 'header' | 'footer';
+export type GridCols = '1-2-3';
+export type GridSpacing = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type GridPadding = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type GridMargin = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface GridProps {
+    as?: GridElement;
+    theme?: GridTheme;
+    color?: GridColor;
+    cols?: GridCols;
+    reverse?: boolean;
+    spacing?: GridSpacing;
+    padding?: GridPadding;
+    margin?: GridMargin;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare const Grid: ({ as, theme, color, cols, reverse, spacing, padding, margin, className, style, children, }: GridProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Page/PageNav.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import { BackButtonProps, BreadcrumbsLinkProps, ContextMenuProps, FlexProps } from '../';
+export type PageNavPadding = 'none' | 'sm';
+export type PageNavMargin = 'none' | 'sm';
+export interface PageNavProps extends FlexProps {
+    padding?: PageNavPadding;
+    margin?: PageNavMargin;
+    backButton?: BackButtonProps;
+    breadcrumbs?: BreadcrumbsLinkProps[];
+    menu?: ContextMenuProps;
+    children?: ReactNode;
+}
+/**
+ * Page navigation bar with Back button and controls.
+ */
+export declare const PageNav: ({ padding, margin, breadcrumbs, backButton, menu, children, }: PageNavProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{lib → types/lib}/components/Page/PageNav.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ padding, backButton, menu, children, }: import('./PageNav').PageNavProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ padding, margin, breadcrumbs, backButton, menu, children, }: import('./PageNav').PageNavProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -14,3 +14,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const BackButton: Story;
 export declare const BackAndContextMenu: Story;
+export declare const Breadcrumbs: Story;

package/dist/types/lib/components/Page/Section.d.ts

@@ -0,0 +1,9 @@
+import { FlexProps } from '..';
+export type SectionBg = 'transparent' | 'subtle' | 'surface' | 'accent';
+export type SectionShadow = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface SectionProps extends FlexProps {
+    inset?: boolean;
+    bg?: SectionBg;
+    shadow?: SectionShadow;
+}
+export declare const Section: ({ as, className, bg, shadow, children, ...rest }: SectionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{lib → types/lib}/components/Page/index.d.ts

@@ -1,7 +1,9 @@
 export * from './PageBase';
 export * from './PageNav';
 export * from './PageHeader';
-export * from './SectionHeader';
-export * from './SectionFooter';
 export * from './Article';
 export * from './Section';
+export * from './Flex';
+export * from './Grid';
+export * from './Breadcrumbs';
+export * from './BreadcrumbsLink';

package/dist/{lib → types/lib}/components/Searchbar/Searchbar.stories.d.ts

@@ -16,4 +16,9 @@ type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const Query: Story;
 export declare const Expanded: Story;
-export declare const ControlledState: (args: SearchbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ControlledState: {
+    (args: SearchbarProps): import("react/jsx-runtime").JSX.Element;
+    play({ canvasElement }: {
+        canvasElement: HTMLElement;
+    }): Promise<void>;
+};

package/dist/types/lib/components/TextField/FieldBase.d.ts

@@ -0,0 +1,11 @@
+import { ElementType, ReactNode } from 'react';
+export type FieldSize = 'xs' | 'sm' | 'md' | 'lg' | 'custom';
+export interface FieldBaseProps {
+    as?: ElementType;
+    classname?: string;
+    size?: FieldSize;
+    label?: string;
+    helperText?: string;
+    children?: ReactNode;
+}
+export declare const FieldBase: ({ as, size, classname, label, helperText, children }: FieldBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/TextField/InputBase.d.ts

@@ -0,0 +1,14 @@
+import { ChangeEventHandler, FocusEventHandler, HTMLInputTypeAttribute } from 'react';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg' | 'custom';
+export interface InputBaseProps {
+    type?: HTMLInputTypeAttribute;
+    name?: string;
+    value?: string;
+    placeholder?: string;
+    onFocus?: FocusEventHandler;
+    onBlur?: FocusEventHandler;
+    onChange?: ChangeEventHandler;
+    className?: string;
+    size?: InputSize;
+}
+export declare const InputBase: ({ type, name, value, placeholder, onChange, onFocus, onBlur, size, className, ...rest }: InputBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,7 @@
+import { InputBaseProps, InputSize } from './';
+export interface TextFieldProps extends InputBaseProps {
+    size?: InputSize;
+    label?: string;
+    helperText?: string;
+}
+export declare const TextField: ({ size, label, helperText, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './FieldBase';
+export * from './InputBase';
+export * from './TextField';

package/dist/{lib → types/lib}/components/Typography/Heading.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg';
+export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type HeadingWeight = 'normal' | 'medium' | 'bold';
-export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type HeadingComponent = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span';
 export interface HeadingProps {
     as?: HeadingComponent;
     size?: HeadingSize;

package/dist/{lib → types/lib}/components/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import { ElementType, ReactNode } from 'react';
 export type TypographyTheme = 'inherit' | 'neutral' | 'company' | 'person' | 'article';
-export type TypographySize = 'xs' | 'sm' | 'md' | 'lg';
+export type TypographySize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface TypographyProps {
     as?: ElementType;
     size?: TypographySize;

package/dist/{lib → types/lib}/components/index.d.ts

@@ -29,3 +29,4 @@ export * from './Typography';
 export * from './ResourceList';
 export * from './AccessAreaList';
 export * from './AccessPackageList';
+export * from './TextField';

package/dist/{useAccountMenu-ImwZYwks.js → useAccountMenu-DgXhBMw4.js}

@@ -1,26 +1,19 @@
-import { g as d } from "./globalMenu-DY4uIQk2.js";
-import { jsxs as p, jsx as h } from "react/jsx-runtime";
-import { useState as c } from "react";
-const b = {
-  menu: d,
-  search: {
-    name: "global-search",
-    placeholder: "Søk i Altinn"
-  }
-}, f = ({
+import { jsxs as a, jsx as d } from "react/jsx-runtime";
+import { useState as u } from "react";
+const g = ({
   name: e = "inbox-search",
   placeholder: r = "Søk i innboks"
 }) => {
-  const [t, n] = c(""), a = (s) => {
+  const [t, n] = u(""), p = (s) => {
     n(s.target.value);
-  }, l = [
+  }, i = [
     {
       type: "scope",
       groupId: "1",
       id: "inbox",
       href: "#",
-      label: t ? () => /* @__PURE__ */ p("span", { children: [
-        /* @__PURE__ */ h("mark", { children: t }),
+      label: t ? () => /* @__PURE__ */ a("span", { children: [
+        /* @__PURE__ */ d("mark", { children: t }),
         " i innboksen"
       ] }) : "Alt i innboksen"
     },
@@ -29,8 +22,8 @@ const b = {
       groupId: "1",
       id: "global",
       href: "#",
-      label: t ? () => /* @__PURE__ */ p("span", { children: [
-        /* @__PURE__ */ h("mark", { children: t }),
+      label: t ? () => /* @__PURE__ */ a("span", { children: [
+        /* @__PURE__ */ d("mark", { children: t }),
         " i hele Altinn"
       ] }) : "Alt i hele Altinn"
     }
@@ -47,36 +40,35 @@ const b = {
       href: "http://www.altinn.no",
       title: "Skattemelding 2025"
     }
-  ].filter((s) => s.title.toLowerCase().includes((t ?? "").toLowerCase())) : [], i = {
+  ].filter((s) => s.title.toLowerCase().includes((t ?? "").toLowerCase())) : [], l = {
     groups: {
       2: {
         title: `${o.length} treff i innboksen`
       }
     },
-    items: [...l, ...o]
+    items: [...i, ...o]
   };
   return {
     name: e,
     placeholder: r,
     value: t,
-    onChange: a,
+    onChange: p,
     onClear: () => n(""),
-    autocomplete: i
+    autocomplete: l
   };
-}, k = ({ accounts: e, ...r }) => {
-  const [t, n] = c(e == null ? void 0 : e[0]);
+}, b = ({ accounts: e, ...r }) => {
+  const [t, n] = u(e == null ? void 0 : e[0]);
   return {
     ...r,
     accounts: e,
     currentAccount: t,
-    onSelectAccount: (l) => {
-      const o = e == null ? void 0 : e.find((i) => i.id === l);
+    onSelectAccount: (i) => {
+      const o = e == null ? void 0 : e.find((l) => l.id === i);
       n(o);
     }
   };
 };
 export {
-  k as a,
-  b as h,
-  f as u
+  b as a,
+  g as u
 };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.10.3",
+  "version": "0.11.0",
   "main": "dist/index.js",
-  "types": "dist/index.d.ts",
   "files": [
     "dist/",
     "!dist/stories/",
     "!dist/components/*/*.stories.js"
   ],
+  "types": "dist/types/lib/index.d.ts",
   "type": "module",
   "description": "Reusable react components",
   "sideEffects": [
@@ -37,14 +37,17 @@
     "@storybook/react": "^8.4.4",
     "@storybook/react-vite": "^8.4.4",
     "@storybook/test": "^8.4.4",
+    "@storybook/test-runner": "^0.21.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.7.1",
     "axe-core": "^4.10.2",
     "glob": "^11.0.0",
     "lint-staged": "^15.2.10",
+    "playwright": "^1.49.1",
     "rollup-preserve-directives": "^1.1.2",
     "storybook": "^8.4.4",
+    "storybook-addon-tag-badges": "^1.3.2",
     "storybook-addon-theme-provider": "^0.2.8",
     "typescript": "^5.6.3",
     "vite": "^5.4.9",
@@ -66,6 +69,8 @@
     "build": "tsc && vite build",
     "format": "lint-staged",
     "dev": "vite",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test-storybook": "test-storybook",
+    "install:browsers": "pnpm exec playwright install"
   }
 }