@digdir/designsystemet-react 0.57.0 → 0.59.0

package/dist/cjs/react-css-modules.css

@@ -1,377 +1,3 @@
-@layer fds.utilities {
-  /**
- * Visually hide an element, but leave it available for screen readers
- */
-  .fds-utility-visuallyHidden-1ed11112 {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-  }
-
-  /**
- * Apply a focus outline on an element when it is focused with keyboard
- */
-  .fds-utility-focusable-1ed11112:focus-visible {
-    --fds-focus-border-width: 3px;
-
-    outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);
-    outline-offset: var(--fds-focus-border-width);
-    box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
-  }
-}
-
-@layer fds.button {
-  .fds-button-button-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-    --fc-button-color: var(--fds-semantic-text-action-first-on_action);
-
-    display: flex;
-    align-items: center;
-    border: var(--fds-border_width-default) solid transparent;
-    color: var(--fc-button-color);
-    fill: var(--fc-button-color);
-    min-width: 2.5em;
-    padding: var(--fc-button-padding);
-    box-sizing: border-box;
-    cursor: pointer;
-    font-family: inherit;
-    justify-content: center;
-    text-align: center;
-    text-decoration: none;
-    position: relative;
-    border-radius: var(--fds-border_radius-interactive);
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-button-8fa00f0f svg {
-    overflow: visible;
-  }
-
-  .fds-button-small-8fa00f0f::before {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto;
-    min-height: auto;
-    content: '';
-  }
-
-  .fds-button-small-8fa00f0f::after {
-    position: absolute;
-    top: -5px;
-    left: 0;
-    width: 100%;
-    height: 44px;
-    content: '';
-  }
-
-  .fds-button-button-8fa00f0f:disabled,
-  .fds-button-button-8fa00f0f[aria-disabled='true'] {
-    cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
-  }
-
-  .fds-button-small-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-3);
-
-    gap: var(--fds-sizing-1);
-    font: var(--fds-typography-paragraph-short-small);
-    font-family: inherit;
-    min-height: var(--fds-sizing-10);
-  }
-
-  .fds-button-medium-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-4);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-medium);
-    font-family: inherit;
-    min-height: var(--fds-sizing-12);
-  }
-
-  .fds-button-large-8fa00f0f {
-    --fc-button-padding: 0 var(--fds-spacing-5);
-
-    gap: var(--fds-sizing-2);
-    font: var(--fds-typography-paragraph-short-large);
-    font-family: inherit;
-    min-height: var(--fds-sizing-14);
-  }
-
-  .fds-button-fullWidth-8fa00f0f {
-    width: 100%;
-  }
-
-  .fds-button-secondary-8fa00f0f,
-  .fds-button-tertiary-8fa00f0f {
-    background-color: transparent;
-  }
-
-  .fds-button-onlyIcon-8fa00f0f {
-    --fc-button-padding: 0;
-  }
-
-  /* Only use hover for non-touch devices to prevent sticky-hovering */
-  @media (hover: hover) and (pointer: fine) {
-    .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-first-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-action-second-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-success-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-danger-hover);
-    }
-
-    .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-      background-color: var(--fds-semantic-surface-on_inverted-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      border-color: var(--fds-semantic-border-action-first-hover);
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      border-color: var(--fds-semantic-border-action-second-hover);
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      border-color: var(--fds-semantic-border-success-hover);
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      border-color: var(--fds-semantic-border-danger-hover);
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-
-    .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-first-hover);
-
-      background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-action-second-hover);
-
-      background-color: var(--fds-semantic-surface-action-second-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-success-hover);
-
-      background-color: var(--fds-semantic-surface-success-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-danger-hover);
-
-      background-color: var(--fds-semantic-surface-danger-no_fill-hover);
-    }
-
-    .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):hover {
-      --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-      background-color: var(--fds-semantic-surface-on_inverted-no_fill-hover);
-    }
-  }
-
-  /* Primary button colors */
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-first-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-action-second-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-success-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    background-color: var(--fds-semantic-surface-danger-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-default);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-first-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-action-second-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-success-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    background-color: var(--fds-semantic-surface-danger-active);
-  }
-
-  .fds-button-primary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-default);
-
-    background-color: var(--fds-semantic-surface-on_inverted-active);
-  }
-
-  /* Secondary button colors */
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-
-    border-color: var(--fds-semantic-border-action-first-default);
-    background-color: var(--fds-semantic-surface-action-first-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-
-    border-color: var(--fds-semantic-border-action-second-default);
-    background-color: var(--fds-semantic-surface-action-second-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-
-    border-color: var(--fds-semantic-border-success-default);
-    background-color: var(--fds-semantic-surface-success-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-
-    border-color: var(--fds-semantic-border-danger-default);
-    background-color: var(--fds-semantic-surface-danger-no_fill);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    border: 1px solid var(--fds-semantic-border-on_inverted-default);
-    background-color: transparent;
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    border-color: var(--fds-semantic-border-action-first-active);
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    border-color: var(--fds-semantic-border-action-second-active);
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    border-color: var(--fds-semantic-border-success-active);
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    border-color: var(--fds-semantic-border-danger-active);
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-
-  .fds-button-secondary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-
-  /* Tertiary button colors */
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-first-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-action-second-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-success-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-danger-default);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f) {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: transparent;
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-first-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-first-active);
-
-    background-color: var(--fds-semantic-surface-action-first-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-second-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-action-second-active);
-
-    background-color: var(--fds-semantic-surface-action-second-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-success-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-success-active);
-
-    background-color: var(--fds-semantic-surface-success-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-danger-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-danger-active);
-
-    background-color: var(--fds-semantic-surface-danger-no_fill-active);
-  }
-
-  .fds-button-tertiary-8fa00f0f:where(.fds-button-inverted-8fa00f0f):not([aria-disabled='true'], :disabled):active {
-    --fc-button-color: var(--fds-semantic-text-neutral-on_inverted);
-
-    background-color: var(--fds-semantic-surface-on_inverted-no_fill-active);
-  }
-}
-
 @layer fds.paragraph {
   .fds-paragraph-paragraph-b69df5f3 {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
@@ -524,26 +150,6 @@
   }
 }
 
-@layer fds.ingress {
-  .fds-ingress-ingress-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    margin: 0;
-    color: var(--fds-semantic-text-neutral-default);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-spacing-9b33da65 {
-    margin-bottom: var(--fdsc-bottom-spacing);
-  }
-
-  .fds-ingress-ingress-9b33da65.fds-ingress-medium-9b33da65 {
-    --fdsc-bottom-spacing: var(--fds-spacing-5);
-
-    font: var(--fds-typography-ingress-medium);
-    font-family: inherit;
-  }
-}
-
 @layer fds.label {
   .fds-label-label-e0249167 {
     --fdsc-bottom-spacing: var(--fds-spacing-1);
@@ -1018,7 +624,7 @@
   .fds-accordion-first-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-second-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d,
   .fds-accordion-third-a8137c3d .fds-accordion-item-a8137c3d:not(:first-child) .fds-accordion-accordionButton-a8137c3d {
-    border-top: 1px solid var(--fds-semantic-border-on_inverted-default);
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -1460,27 +1066,6 @@
   }
 }
 
-@layer fds.skiplink {
-  .fds-skiplink-skiplink-d4abeaef:focus {
-    display: block;
-    outline: 0;
-    position: static;
-    width: auto;
-    height: auto;
-    margin: inherit;
-    overflow: visible;
-    clip: auto;
-    clip-path: none;
-    white-space: inherit;
-    text-decoration: underline;
-    text-decoration-thickness: 3px;
-    text-underline-offset: 0.3em;
-    padding: var(--fds-spacing-3) var(--fds-spacing-4) var(--fds-spacing-3) var(--fds-spacing-6);
-    color: var(--fds-semantic-text-neutral-default);
-    background: var(--fds-semantic-border-focus-outline);
-  }
-}
-
 @layer fds.tooltip {
   .fds-tooltip-wrapper-a3778147 {
     background: var(--fds-semantic-surface-neutral-inverted);
@@ -2083,7 +1668,7 @@
     }
 
     .fds-switch-input-9a6b03bc:not(:disabled, [readonly]):checked:hover + .fds-switch-label-9a6b03bc .fds-switch-track-9a6b03bc > .fds-switch-thumb-9a6b03bc {
-      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height)) * 0.8));
+      transform: translateX(calc((var(--fds-switch-width) - var(--fds-switch-height))));
       background-image: url("data:image/svg+xml,%3Csvg viewBox='-3 -3 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1339 2.86612C10.622 3.35427 10.622 4.14573 10.1339 4.63388L5.88388 8.88388C5.39573 9.37204 4.60427 9.37204 4.11612 8.88388L1.86612 6.63388C1.37796 6.14573 1.37796 5.35427 1.86612 4.86612C2.35427 4.37796 3.14573 4.37796 3.63388 4.86612L5 6.23223L8.36612 2.86612C8.85427 2.37796 9.64573 2.37796 10.1339 2.86612Z' fill='%230c6536' /%3E%3C/svg%3E");
     }
 

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

@@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { forwardRef, useContext } from 'react';
 import classes from '../Accordion.module.css.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { AccordionItemContext } from '../AccordionItem/AccordionItem.js';
 import { Heading } from '../../Typography/Heading/Heading.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
@@ -19,7 +18,7 @@ const AccordionHeader = forwardRef(({ level = 1, children, className, onHeaderCl
         context.toggleOpen();
         onHeaderClick && onHeaderClick(e);
     };
-    return (jsx(Heading, { ref: ref, size: 'xsmall', level: level, className: clsx(classes.header, className), ...rest, children: jsxs("button", { type: 'button', className: clsx(classes.accordionButton, utilityClasses.focusable), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: classes.expandIcon, fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'small', children: jsx("span", { children: children }) })] }) }));
+    return (jsx(Heading, { ref: ref, size: 'xsmall', level: level, className: clsx(classes.header, className), ...rest, children: jsxs("button", { type: 'button', className: clsx(classes.accordionButton, `fds-focus`), onClick: handleClick, "aria-expanded": context.open, "aria-controls": context.contentId, children: [jsx(ChevronDownIcon, { "aria-hidden": true, className: classes.expandIcon, fontSize: '1.5rem' }), jsx(Paragraph, { asChild: true, size: 'small', children: jsx("span", { children: children }) })] }) }));
 });
 AccordionHeader.displayName = 'AccordionHeader';
 

package/dist/esm/components/Alert/Alert.js

@@ -17,9 +17,9 @@ const icons = {
         title: 'Feil',
     },
 };
-const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, children, className, ...rest }, ref) => {
+const Alert = forwardRef(({ severity = 'info', elevated, iconTitle, size, children, className, ...rest }, ref) => {
     const { Icon, title } = icons[severity];
-    return (jsx("div", { ref: ref, className: clsx('fds-alert', `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsx(Paragraph, { asChild: true, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
+    return (jsx("div", { ref: ref, className: clsx('fds-alert', `fds-alert--${size}`, `fds-alert--${severity}`, elevated && `fds-alert--elevated`, className), ...rest, children: jsxs(Fragment, { children: [jsx(Icon, { title: iconTitle || title, className: 'fds-alert__icon' }), jsx(Paragraph, { asChild: true, size: size, className: 'fds-alert__content', children: jsx("span", { children: children }) })] }) }));
 });
 Alert.displayName = 'Alert';
 

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

@@ -3,15 +3,13 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
-import classes from './Button.module.css.js';
 
 /**
  * Button used for interaction
  */
 const Button = forwardRef(({ children, color = 'first', variant = 'primary', size = 'medium', fullWidth = false, icon = false, type = 'button', className, as = 'button', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, type: type, className: clsx(classes.button, utilityClasses.focusable, classes[size], classes[variant], classes[color], { [classes.fullWidth]: fullWidth }, { [classes.onlyIcon]: icon }, className), ...rest, children: children }));
+    return (jsx(Component, { ref: ref, type: type, className: clsx('fds-btn', `fds-focus`, `fds-btn--${size}`, `fds-btn--${variant}`, `fds-btn--${color}`, { 'fds-btn--full-width': fullWidth }, { 'fds-btn--icon-only': icon }, className), ...rest, children: children }));
 });
 Button.displayName = 'Button';
 

package/dist/esm/components/Card/Card.js

@@ -3,12 +3,11 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../node_modules/@radix-ui/react-slot/dist/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './Card.module.css.js';
 
 const Card = forwardRef(({ color = 'neutral', as = 'div', isLink = false, asChild = false, className, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && utilityClasses.focusable, className), ...rest }));
+    return (jsx(Component, { ref: ref, className: clsx(classes.card, classes[color], isLink && classes.linkCard, isLink && `fds-focus`, className), ...rest }));
 });
 Card.displayName = 'Card';
 

package/dist/esm/components/Chip/Removable/Removable.js

@@ -5,12 +5,11 @@ import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import classes from '../Chip.module.css.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const RemovableChip = forwardRef(({ children, size = 'medium', className, ...rest }, ref) => {
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
+    return (jsx("button", { type: 'button', ref: ref, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], classes.removable, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [jsx("span", { children: children }), jsx("span", { className: classes.xMark, "aria-hidden": true, children: jsx(XMarkIcon, { className: classes.icon }) })] }) }) }));
 });
 RemovableChip.displayName = 'ChipRemovable';
 

package/dist/esm/components/Chip/Toggle/Toggle.js

@@ -4,14 +4,13 @@ import { forwardRef, useContext } from 'react';
 import { CheckmarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { ChipGroupContext } from '../Group/Group.js';
-import utilityClasses from '../../../utilities/utility.module.css.js';
 import classes from '../Chip.module.css.js';
 import { Paragraph } from '../../Typography/Paragraph/Paragraph.js';
 
 const ToggleChip = forwardRef(({ children, size = 'medium', selected = false, checkmark = true, className, ...rest }, ref) => {
     const shouldDisplayCheckmark = checkmark && selected;
     const group = useContext(ChipGroupContext);
-    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, utilityClasses.focusable, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
+    return (jsx("button", { ref: ref, type: 'button', "aria-pressed": selected, className: clsx(classes.chipButton, `fds-focus`, classes[group?.size || size], { [classes.spacing]: shouldDisplayCheckmark }, className), ...rest, children: jsx(Paragraph, { asChild: true, size: group?.size || size, short: true, children: jsxs("span", { className: classes.label, children: [shouldDisplayCheckmark && (jsx(CheckmarkIcon, { className: classes.checkmarkIcon, "aria-hidden": true })), jsx("span", { children: children })] }) }) }));
 });
 ToggleChip.displayName = 'ChipToggle';
 

package/dist/esm/components/HelpText/HelpText.js

@@ -3,13 +3,12 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { Popover } from '../Popover/index.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './HelpText.module.css.js';
 import { HelpTextIcon } from './HelpTextIcon.js';
 
 const HelpText = ({ title, placement = 'right', size = 'medium', portal, className, children, ...rest }) => {
     const [open, setOpen] = useState(false);
-    return (jsx(Fragment, { children: jsxs(Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsx(Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxs("button", { className: clsx(classes.helpTextButton, utilityClasses.focusable, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(classes.helpTextIcon, classes.helpTextIconFilled, classes[size], className), openState: open }), jsx(HelpTextIcon, { className: clsx(classes.helpTextIcon, classes[size], className), openState: open }), jsx("span", { className: utilityClasses.visuallyHidden, children: title })] }) }), jsx(Popover.Content, { className: classes.helpTextContent, children: children })] }) }));
+    return (jsx(Fragment, { children: jsxs(Popover, { variant: 'info', placement: placement, size: size, portal: portal, open: open, onClose: () => setOpen(false), children: [jsx(Popover.Trigger, { asChild: true, variant: 'tertiary', children: jsxs("button", { className: clsx(classes.helpTextButton, `fds-focus`, className), "aria-expanded": open, onClick: () => setOpen(!open), ...rest, children: [jsx(HelpTextIcon, { filled: true, className: clsx(classes.helpTextIcon, classes.helpTextIconFilled, classes[size], className), openState: open }), jsx(HelpTextIcon, { className: clsx(classes.helpTextIcon, classes[size], className), openState: open }), jsx("span", { className: `fds-sr-only`, children: title })] }) }), jsx(Popover.Content, { className: classes.helpTextContent, children: children })] }) }));
 };
 HelpText.displayName = 'HelpText';
 

package/dist/esm/components/SkipLink/SkipLink.js

@@ -1,11 +1,9 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
-import classes from './SkipLink.module.css.js';
 
 const SkipLink = ({ href, children, className, ...rest }) => {
-    return (jsx("a", { href: href, className: clsx(utilityClasses.visuallyHidden, classes.skiplink, className), ...rest, children: children }));
+    return (jsx("a", { href: href, className: clsx(`fds-sr-only`, 'fds-skiplink', className), ...rest, children: children }));
 };
 SkipLink.displayName = 'SkipLink';
 

package/dist/esm/components/Table/TableHeaderCell.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { ChevronUpIcon, ChevronDownIcon, ChevronUpDownIcon } from '@navikt/aksel-icons';
 import * as React from 'react';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import classes from './Table.module.css.js';
 
 const SORT_ICON = {
@@ -12,7 +11,7 @@ const SORT_ICON = {
 };
 const TableHeaderCell = React.forwardRef(({ sortable = false, sort, onSortClick, className, children, ...rest }, ref) => {
     const sortIcon = sort === 'ascending' || sort === 'descending' ? (SORT_ICON[sort]) : (jsx(ChevronUpDownIcon, {}));
-    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: utilityClasses.focusable, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
+    return (jsxs("th", { className: clsx(sortable && classes.sortable, sort && classes.sorted, classes.headerCell, className), "aria-sort": sort, ref: ref, ...rest, children: [sortable && (jsxs("button", { className: `fds-focus`, onClick: onSortClick, children: [children, sortIcon] })), !sortable && children] }));
 });
 TableHeaderCell.displayName = 'TableHeaderCell';
 

package/dist/esm/components/Typography/Ingress/Ingress.js

@@ -3,13 +3,12 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { clsx } from '../../../node_modules/clsx/dist/clsx.js';
 import { Slot as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from '../../../node_modules/@radix-ui/react-slot/dist/index.js';
-import classes from './Ingress.module.css.js';
 
 /** Use `Ingress` to display text as ingress. */
 const Ingress = forwardRef(({ className, size = 'medium', spacing, as = 'p', asChild, ...rest }, ref) => {
     const Component = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : as;
-    return (jsx(Component, { ref: ref, className: clsx(classes.ingress, classes[size], {
-            [classes.spacing]: !!spacing,
+    return (jsx(Component, { ref: ref, className: clsx(`fds-ingress`, `fds-ingress--${size}`, {
+            'fds-ingress--spacing': !!spacing,
         }, className), ...rest }));
 });
 Ingress.displayName = 'Ingress';

package/dist/esm/components/form/CharacterCounter.js

@@ -1,6 +1,5 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import utilityClasses from '../../utilities/utility.module.css.js';
 import { ErrorMessage } from '../Typography/ErrorMessage/ErrorMessage.js';
 
 const defaultLabel = (count) => count > -1 ? `${count} tegn igjen` : `${Math.abs(count)} tegn for mye`;
@@ -9,7 +8,7 @@ const CharacterCounter = ({ label = defaultLabel, srLabel: propsSrLabel, maxCoun
     const currentCount = maxCount - value.length;
     const hasExceededLimit = value.length > maxCount;
     const srLabel = propsSrLabel ? propsSrLabel : defaultSrLabel(maxCount);
-    return (jsxs(Fragment, { children: [jsx("span", { className: utilityClasses.visuallyHidden, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
+    return (jsxs(Fragment, { children: [jsx("span", { className: `fds-sr-only`, id: id, children: srLabel }), jsx(ErrorMessage, { asChild: true, size: size, error: hasExceededLimit, children: jsx("span", { "aria-live": hasExceededLimit ? 'polite' : 'off', children: label(currentCount) }) })] }));
 };
 CharacterCounter.displayName = 'CharacterCounter';
 

package/dist/esm/components/form/Combobox/internal/ComboboxClearButton.js

@@ -5,7 +5,6 @@ import { XMarkIcon } from '@navikt/aksel-icons';
 import { clsx } from '../../../../node_modules/clsx/dist/clsx.js';
 import { ComboboxContext } from '../Combobox.js';
 import classes from '../Combobox.module.css.js';
-import utilityClasses from '../../../../utilities/utility.module.css.js';
 
 const ComboboxClearButton = () => {
     const context = useContext(ComboboxContext);
@@ -13,7 +12,7 @@ const ComboboxClearButton = () => {
         throw new Error('ComboboxContext is missing');
     }
     const { size, readOnly, disabled, clearButtonLabel, inputRef, setSelectedOptions, setInputValue, } = context;
-    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], utilityClasses.focusable), onClick: () => {
+    return (jsx("button", { disabled: disabled, className: clsx(classes.clearButton, classes[size], `fds-focus`), onClick: () => {
             if (readOnly)
                 return;
             if (disabled)