@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/button.min.css

@@ -1,3 +1 @@
-[data-theme=dark]{--__ac-button-primary-text:var(--a-gray-900);--__ac-button-primary-bg:var(--a-blue-200);--__ac-button-primary-focus-border:var(--a-gray-900);--__ac-button-primary-hover-bg:var(--a-blue-300);--__ac-button-primary-active-bg:var(--a-blue-400);--__ac-button-secondary-text:var(--a-white);--__ac-button-secondary-hover-text:var(--a-white);--__ac-button-secondary-active-text:var(--a-white);--__ac-button-secondary-active-focus-border:var(--a-gray-900);--__ac-button-secondary-bg:var(--a-gray-900);--__ac-button-secondary-border:var(--a-blue-200);--__ac-button-secondary-hover-bg:var(--a-gray-800);--__ac-button-secondary-focus-border:var(--a-blue-200);--__ac-button-secondary-active-bg:var(--a-gray-700)}[data-theme=light]{--__ac-button-primary-text:initial;--__ac-button-primary-bg:initial;--__ac-button-primary-focus-border:initial;--__ac-button-primary-hover-bg:initial;--__ac-button-primary-active-bg:initial;--__ac-button-secondary-text:initial;--__ac-button-secondary-hover-text:initial;--__ac-button-secondary-active-text:initial;--__ac-button-secondary-active-focus-border:initial;--__ac-button-secondary-bg:initial;--__ac-button-secondary-border:initial;--__ac-button-secondary-hover-bg:initial;--__ac-button-secondary-focus-border:initial;--__ac-button-secondary-active-bg:initial}.navds-button{--__ac-button-padding:var(--a-spacing-3) var(--a-spacing-5);align-items:center;background:none;border:none;border-radius:var(--ac-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:inline-flex;gap:var(--a-spacing-2);justify-content:center;margin:0;padding:var(--ac-button-padding,var(--__ac-button-padding));text-decoration:none}.navds-button--small{--__ac-button-padding:var(--a-spacing-1) var(--a-spacing-3);min-height:2rem;min-width:2rem;padding:var(--ac-button-padding-small,var(--__ac-button-padding))}.navds-button--xsmall{--__ac-button-padding:var(--a-spacing-05) var(--a-spacing-2);gap:var(--a-spacing-1);padding:var(--ac-button-padding-xsmall,var(--__ac-button-padding))}.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-3);padding:var(--ac-button-padding-icon-only,var(--__ac-button-padding))}.navds-button--small.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-1);padding:var(--ac-button-padding-icon-only-small,var(--__ac-button-padding))}.navds-button--xsmall.navds-button--icon-only{--__ac-button-padding:var(--a-spacing-05);padding:var(--ac-button-padding-icon-only-xsmall,var(--__ac-button-padding))}.navds-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:2px solid #0000;outline-offset:2px}@supports not selector(:focus-visible){.navds-button:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-button__icon{--ac-button-icon-margin:-4px;display:flex;font-size:1.5rem}.navds-button__icon:first-child{margin-left:var(--ac-button-icon-margin)}.navds-button__icon:last-child{margin-right:var(--ac-button-icon-margin)}.navds-button--icon-only .navds-button__icon{margin:0}:where(.navds-button--xsmall,.navds-button--small) .navds-button__icon{--ac-button-icon-margin:-2px;font-size:1.25rem}.navds-button--primary{background-color:var(--ac-button-primary-bg,var(--__ac-button-primary-bg,var(--a-surface-action)));color:var(--ac-button-primary-text,var(--__ac-button-primary-text,var(--a-text-on-action)))}@media (forced-colors:active){.navds-button.navds-button--primary{background-color:highlight;color:highlighttext}.navds-button.navds-button--primary span{forced-color-adjust:none}}.navds-button--primary:hover{background-color:var(--ac-button-primary-hover-bg,var(--__ac-button-primary-hover-bg,var(--a-surface-action-hover)))}.navds-button--primary:active{background-color:var(--ac-button-primary-active-bg,var(--__ac-button-primary-active-bg,var(--a-surface-action-active)))}.navds-button--primary:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus);outline:2px solid #0000;outline-offset:2px}@media (forced-colors:active){.navds-button--primary:focus-visible{box-shadow:none}}@supports not selector(:focus-visible){.navds-button--primary:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-focus-border,var(--__ac-button-primary-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--primary:active:where(:disabled,.navds-button--disabled),.navds-button--primary:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-bg,var(--a-surface-action))}.navds-button--primary-neutral{background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral));color:var(--ac-button-primary-neutral-text,var(--a-text-on-neutral))}.navds-button--primary-neutral:hover{background-color:var(--ac-button-primary-neutral-hover-bg,var(--a-surface-neutral-hover))}.navds-button--primary-neutral:active{background-color:var(--ac-button-primary-neutral-active-bg,var(--a-surface-neutral-active))}.navds-button--primary-neutral:focus-visible{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--primary-neutral:focus{box-shadow:inset 0 0 0 1px var(--ac-button-primary-neutral-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--primary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--primary-neutral:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-primary-neutral-bg,var(--a-surface-neutral))}.navds-button--secondary{background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary:hover{background-color:var(
-    --ac-button-secondary-hover-bg,var(--__ac-button-secondary-hover-bg,var(--a-surface-action-subtle-hover))
-  );box-shadow:inset 0 0 0 2px var(--ac-button-secondary-hover-border,var(--a-border-action-hover));color:var(--ac-button-secondary-hover-text,var(--__ac-button-secondary-hover-text,var(--a-text-action-on-action-subtle)))}.navds-button--secondary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-focus-border,var(--__ac-button-secondary-focus-border,var(--a-border-action))),var(--a-shadow-focus)}}.navds-button--secondary:active{background-color:var(--ac-button-secondary-active-bg,var(--__ac-button-secondary-active-bg,var(--a-surface-action-active)));box-shadow:none;color:var(--ac-button-secondary-active-text,var(--__ac-button-secondary-active-text,var(--a-text-on-action)))}.navds-button--secondary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-active-focus-border,var(--__ac-button-secondary-active-focus-border,var(--a-surface-default))),var(--a-shadow-focus)}}.navds-button--secondary:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-bg,var(--__ac-button-secondary-bg,var(--a-surface-transparent)));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-border,var(--__ac-button-secondary-border,var(--a-border-action)));color:var(--ac-button-secondary-text,var(--__ac-button-secondary-text,var(--a-text-action)))}.navds-button--secondary-neutral{background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--secondary-neutral:hover{background-color:var(--ac-button-secondary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover))}.navds-button--secondary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus);color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}}.navds-button--secondary-neutral:active{background-color:var(--ac-button-secondary-neutral-active-bg,var(--a-surface-neutral-active));box-shadow:none;color:var(--ac-button-secondary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--secondary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--secondary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--ac-button-secondary-neutral-active-focus-border,var(--a-surface-default)),var(--a-shadow-focus)}}.navds-button--secondary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--secondary-neutral:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-secondary-neutral-bg,var(--a-surface-transparent));box-shadow:inset 0 0 0 2px var(--ac-button-secondary-neutral-border,var(--a-border-strong));color:var(--ac-button-secondary-neutral-text,var(--a-text-default))}.navds-button--tertiary{background-color:var(--ac-button-tertiary-bg,var(--a-surface-transparent));color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary:hover{background-color:var(--ac-button-tertiary-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-button-tertiary-hover-text,var(--a-text-action-on-action-subtle))}.navds-button--tertiary:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-focus-border,var(--a-border-action)),var(--a-shadow-focus)}}.navds-button--tertiary:active{background-color:var(--ac-button-tertiary-active-bg,var(--a-surface-action-active));color:var(--ac-button-tertiary-active-text,var(--a-text-on-action))}.navds-button--tertiary:active:hover{background-color:var(--ac-button-tertiary-active-hover-bg,var(--a-surface-action-active))}.navds-button--tertiary:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-text,var(--a-text-action))}.navds-button--tertiary-neutral{color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--tertiary-neutral:hover{background-color:var(--ac-button-tertiary-neutral-hover-bg,var(--a-surface-neutral-subtle-hover));color:var(--ac-button-tertiary-neutral-hover-text,var(--a-text-default))}.navds-button--tertiary-neutral:focus-visible{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus{box-shadow:inset 0 0 0 2px var(--ac-button-tertiary-neutral-focus-border,var(--a-border-strong)),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active{background-color:var(--ac-button-tertiary-neutral-active-bg,var(--a-surface-neutral-active));color:var(--ac-button-tertiary-neutral-active-text,var(--a-text-on-neutral))}.navds-button--tertiary-neutral:active:hover{background-color:var(--ac-button-tertiary-neutral-active-hover-bg,var(--a-surface-neutral-active))}.navds-button--tertiary-neutral:focus-visible:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--tertiary-neutral:focus:active{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--tertiary-neutral:active:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:active:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:hover:where(:disabled,.navds-button--disabled),.navds-button--tertiary-neutral:where(:disabled,.navds-button--disabled){background:none;box-shadow:none;color:var(--ac-button-tertiary-neutral-text,var(--a-text-default))}.navds-button--danger{background-color:var(--ac-button-danger-bg,var(--a-surface-danger));color:var(--ac-button-danger-text,var(--a-text-on-danger))}.navds-button--danger:hover{background-color:var(--ac-button-danger-hover-bg,var(--a-surface-danger-hover))}.navds-button--danger:active{background-color:var(--ac-button-danger-active-bg,var(--a-surface-danger-active))}.navds-button--danger:focus-visible{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}@supports not selector(:focus-visible){.navds-button--danger:focus{box-shadow:inset 0 0 0 1px var(--a-surface-default),var(--a-shadow-focus)}}.navds-button--danger:active:where(:disabled,.navds-button--disabled),.navds-button--danger:hover:where(:disabled,.navds-button--disabled){background-color:var(--ac-button-danger-bg,var(--a-surface-danger))}.navds-button:where(:disabled,.navds-button--disabled){cursor:not-allowed}.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){opacity:.3}.navds-button>.navds-loader{position:absolute}.navds-button .navds-loader .navds-loader__foreground{stroke:var(--ac-button-loader-stroke,currentColor)}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:var(--ac-button-primary-loader-stroke-bg,#ffffff4d)}.navds-button--loading>:not(.navds-loader){visibility:hidden}@media (forced-colors:active){.navds-button:not(.navds-button--loading):where(:disabled,.navds-button--disabled){color:GrayText;opacity:1}.navds-button{background-color:ButtonFace;border:1px solid #0000;color:ButtonText}.navds-button:hover{background-color:highlighttext;border-color:highlight;box-shadow:none;color:highlight}.navds-button:hover span{forced-color-adjust:none}.navds-button .navds-loader .navds-loader__foreground{stroke:canvas}.navds-button--danger .navds-loader .navds-loader__background,.navds-button--primary .navds-loader .navds-loader__background{stroke:canvastext}}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader;@layer aksel.components.core.button{.aksel-button{--__axc-button-icon-size: 1.5rem;--__axc-button-icon-margin: -4px;--__axc-button-border-color: transparent;--__axc-button-border-width: 2px;padding:var(--ax-space-12) var(--ax-space-20);border-radius:var(--ax-radius-8);cursor:pointer;justify-content:center;align-items:center;gap:var(--ax-space-8);box-shadow:inset 0 0 0 var(--__axc-button-border-width) var(--__axc-button-border-color);background:none;border:none;text-decoration:none;display:inline-flex}.aksel-button:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}.aksel-button[data-variant=primary]{background-color:var(--ax-bg-strong);color:var(--ax-text-contrast)}.aksel-button[data-variant=primary]:hover{background-color:var(--ax-bg-strong-hover)}.aksel-button[data-variant=primary]:active{background-color:var(--ax-bg-strong-pressed)}.aksel-button[data-variant=primary]:is(:disabled,.aksel-button--disabled){background-color:var(--ax-bg-strong)}.aksel-button[data-variant=secondary]{--__axc-button-border-color: var(--ax-border-default);color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=secondary][data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=secondary]:hover{--__axc-button-border-color: var(--ax-border-strong);background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=secondary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=secondary]:is(:disabled,.aksel-button--disabled)[data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=tertiary]{color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=tertiary][data-color=neutral]{color:var(--ax-text-default)}.aksel-button[data-variant=tertiary]:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-button[data-variant=tertiary]:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-button[data-variant=tertiary][data-pressed=true]{background-color:var(--ax-bg-strong-pressed);color:var(--ax-text-contrast)}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled){color:var(--ax-text-subtle);background-color:#0000}.aksel-button[data-variant=tertiary]:is(:disabled,.aksel-button--disabled)[data-color=neutral]{color:var(--ax-text-default)}.aksel-button--small,.aksel-button--xsmall{--__axc-button-icon-margin: -2px}.aksel-button--small{padding:var(--ax-space-4) var(--ax-space-12);gap:var(--ax-space-6);min-width:2rem;min-height:2rem}.aksel-button--xsmall{padding:var(--ax-space-2) var(--ax-space-8);gap:var(--ax-space-4);--__axc-button-icon-size: 1.25rem}@supports not selector(:focus-visible){.aksel-button:focus{outline:3px solid var(--ax-border-focus)}}.aksel-button__icon{font-size:var(--__axc-button-icon-size);display:flex}.aksel-button__icon:first-child{margin-left:var(--__axc-button-icon-margin)}.aksel-button__icon:last-child{margin-right:var(--__axc-button-icon-margin)}.aksel-button--icon-only .aksel-button__icon{margin:0}.aksel-button--icon-only{padding:var(--ax-space-12)}.aksel-button--icon-only.aksel-button--small{padding:var(--ax-space-4)}.aksel-button--icon-only.aksel-button--xsmall{padding:var(--ax-space-2)}.aksel-button:where(:disabled,.aksel-button--disabled){cursor:not-allowed}.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:var(--ax-opacity-disabled)}.aksel-button>.aksel-loader{position:absolute}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:currentColor}.aksel-button[data-variant=primary] .aksel-loader .aksel-loader__background{stroke:#ffffff4d}.aksel-button--loading>:not(.aksel-loader){visibility:hidden}@media(forced-colors:active){.aksel-button:not(.aksel-button--loading):where(:disabled,.aksel-button--disabled){opacity:1;color:graytext}.aksel-button{color:buttontext;background-color:buttonface;border:1px solid rgba(0,0,0,0)}.aksel-button[data-variant=primary]:not(:disabled){color:highlighttext;background-color:highlight}.aksel-button[data-variant=primary]:not(:disabled) span{forced-color-adjust:none}.aksel-button[data-variant=primary]:not(:disabled):where(a){color:highlighttext;background-color:linktext}.aksel-button[data-variant=primary]:not(:disabled):where(a) span{forced-color-adjust:none}.aksel-button[data-variant=primary]:not(:disabled):hover{color:highlight;background-color:highlighttext;border-color:highlight}.aksel-button:hover:not(:disabled),.aksel-button[data-variant=primary]:where(a):hover:not(:disabled){color:highlight;box-shadow:none;background-color:highlighttext;border-color:highlight}.aksel-button:not(:disabled):hover span{forced-color-adjust:none}.aksel-button .aksel-loader .aksel-loader__foreground{stroke:canvas}.aksel-button[data-variant=primary] .aksel-loader .aksel-loader__background{stroke:canvastext}}}@layer aksel.components.form,aksel.components.modules,aksel.layout;

package/dist/component/chat.css

@@ -1,117 +1,107 @@
-.navds-chat {
-  display: flex;
-  align-items: flex-end;
-  gap: var(--a-spacing-3);
-  max-width: 40.75rem;
-}
-
-.navds-chat--right {
-  flex-direction: row-reverse;
-}
-
-.navds-chat__bubble-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-3);
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
+
+@layer aksel.components.modules {
+  .aksel-chat {
+    align-items: flex-end;
+    gap: var(--ax-space-12);
+    max-width: 40.75rem;
+    display: flex;
+  }
 
-.navds-chat--right .navds-chat__bubble-wrapper {
-  align-items: flex-end;
-}
+  .aksel-chat .aksel-chat__bubble, .aksel-chat .aksel-chat__avatar {
+    background-color: var(--ax-bg-moderateA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
 
-.navds-chat__avatar {
-  align-items: center;
-  box-shadow: var(--a-shadow-xsmall);
-  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-full);
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
-  display: flex;
-  flex-shrink: 0;
-  justify-content: center;
-  overflow: hidden;
-  height: 2.5rem;
-  width: 2.5rem;
-  line-height: 2.5rem; /* Makes text properly vertically centered in Chrome */
-  font-size: 1.06rem;
-  letter-spacing: 0.024rem;
-}
+  .aksel-chat[data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-softA);
+    border: 1px solid var(--ax-border-subtleA);
+  }
 
-.navds-chat__avatar svg {
-  align-self: center;
-  width: 100%;
-  max-width: 1.5rem;
-  max-height: 1.5rem;
-}
+  .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__bubble, .aksel-chat[data-color="neutral"][data-variant="subtle"] .aksel-chat__avatar {
+    background-color: var(--ax-bg-raised);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+  }
 
-.navds-chat__bubble {
-  padding: var(--a-spacing-4);
-  box-shadow: var(--a-shadow-xsmall);
-  width: fit-content;
-  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-left-radius: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--a-spacing-2);
-}
+  .aksel-chat--right {
+    flex-direction: row-reverse;
+  }
 
-.navds-chat--right .navds-chat__bubble {
-  border-radius: var(--a-border-radius-xlarge);
-  border-bottom-right-radius: 2px;
-}
+  .aksel-chat--right .aksel-chat__bubble-wrapper {
+    align-items: flex-end;
+  }
 
-.navds-chat--small .navds-chat__bubble {
-  padding: var(--a-spacing-3);
-}
+  .aksel-chat--right .aksel-chat__bubble {
+    border-radius: var(--ax-radius-12);
+    border-bottom-right-radius: var(--ax-radius-2);
+  }
 
-.navds-chat--info .navds-chat__bubble,
-.navds-chat--info .navds-chat__avatar {
-  background-color: var(--a-surface-info-subtle);
-}
+  .aksel-chat__avatar {
+    border-radius: var(--ax-radius-full);
+    color: var(--ax-text-neutral);
+    letter-spacing: .024rem;
+    flex-shrink: 0;
+    justify-content: center;
+    align-items: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.06rem;
+    line-height: 2.5rem;
+    display: flex;
+    overflow: hidden;
+  }
 
-.navds-chat--subtle .navds-chat__bubble,
-.navds-chat--subtle .navds-chat__avatar {
-  background-color: var(--a-surface-default);
-}
+  .aksel-chat__avatar svg {
+    align-self: center;
+    width: 100%;
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+  }
 
-.navds-chat__top-text {
-  color: var(--ac-chat-top-text, var(--a-text-default));
-  display: flex;
-  gap: var(--a-spacing-2);
-  align-items: baseline;
-  font-weight: normal;
-  margin: 0;
-}
+  .aksel-chat__bubble-wrapper {
+    gap: var(--ax-space-12);
+    flex-direction: column;
+    display: flex;
+  }
 
-.navds-chat--right .navds-chat__top-text {
-  align-self: flex-end;
-}
+  .aksel-chat__bubble {
+    padding: var(--ax-space-16) var(--ax-space-20);
+    gap: var(--ax-space-8);
+    border-radius: var(--ax-radius-12);
+    border-bottom-left-radius: var(--ax-radius-2);
+    flex-direction: column;
+    width: fit-content;
+    display: flex;
+  }
 
-.navds-chat--top-text-left .navds-chat__top-text {
-  align-self: flex-start;
-}
+  .aksel-chat--small .aksel-chat__bubble {
+    padding: var(--ax-space-12) var(--ax-space-16);
+  }
 
-.navds-chat--top-text-right .navds-chat__top-text {
-  align-self: flex-end;
-}
+  .aksel-chat__top-text {
+    color: var(--ax-text-neutral);
+    gap: var(--ax-space-8);
+    align-items: baseline;
+    margin: 0;
+    font-weight: normal;
+    display: flex;
+  }
 
-.navds-chat--left .navds-chat__top-text--right {
-  align-self: flex-end;
-}
+  .aksel-chat--right .aksel-chat__top-text {
+    align-self: flex-end;
+  }
 
-.navds-chat--right .navds-chat__top-text--left {
-  align-self: flex-start;
-}
+  .aksel-chat--top-text-left .aksel-chat__top-text {
+    align-self: flex-start;
+  }
 
-@media (forced-colors: active) {
-  .navds-chat__bubble,
-  .navds-chat__avatar {
-    border: 1px solid canvastext;
-    background-color: canvas;
-    color: canvastext;
+  .aksel-chat--top-text-right .aksel-chat__top-text, .aksel-chat--left .aksel-chat__top-text--right {
+    align-self: flex-end;
   }
 
-  .navds-chat__avatar svg {
-    forced-color-adjust: none;
+  .aksel-chat--right .aksel-chat__top-text--left {
+    align-self: flex-start;
   }
 }
+
+@layer aksel.layout;

package/dist/component/chat.min.css

@@ -1 +1 @@
-.navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3)}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;line-height:2.5rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;max-height:1.5rem;max-width:1.5rem;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--subtle .navds-chat__avatar,.navds-chat--subtle .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}@media (forced-colors:active){.navds-chat__avatar,.navds-chat__bubble{background-color:canvas;border:1px solid canvastext;color:initial}.navds-chat__avatar svg{forced-color-adjust:none}}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-chat{align-items:flex-end;gap:var(--ax-space-12);max-width:40.75rem;display:flex}.aksel-chat .aksel-chat__bubble,.aksel-chat .aksel-chat__avatar{background-color:var(--ax-bg-moderateA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-subtleA)}.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__bubble,.aksel-chat[data-color=neutral][data-variant=subtle] .aksel-chat__avatar{background-color:var(--ax-bg-raised);border:1px solid var(--ax-border-neutral-subtleA)}.aksel-chat--right{flex-direction:row-reverse}.aksel-chat--right .aksel-chat__bubble-wrapper{align-items:flex-end}.aksel-chat--right .aksel-chat__bubble{border-radius:var(--ax-radius-12);border-bottom-right-radius:var(--ax-radius-2)}.aksel-chat__avatar{border-radius:var(--ax-radius-full);color:var(--ax-text-neutral);letter-spacing:.024rem;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.06rem;line-height:2.5rem;display:flex;overflow:hidden}.aksel-chat__avatar svg{align-self:center;width:100%;max-width:1.5rem;max-height:1.5rem}.aksel-chat__bubble-wrapper{gap:var(--ax-space-12);flex-direction:column;display:flex}.aksel-chat__bubble{padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-8);border-radius:var(--ax-radius-12);border-bottom-left-radius:var(--ax-radius-2);flex-direction:column;width:fit-content;display:flex}.aksel-chat--small .aksel-chat__bubble{padding:var(--ax-space-12) var(--ax-space-16)}.aksel-chat__top-text{color:var(--ax-text-neutral);gap:var(--ax-space-8);align-items:baseline;margin:0;font-weight:400;display:flex}.aksel-chat--right .aksel-chat__top-text{align-self:flex-end}.aksel-chat--top-text-left .aksel-chat__top-text{align-self:flex-start}.aksel-chat--top-text-right .aksel-chat__top-text,.aksel-chat--left .aksel-chat__top-text--right{align-self:flex-end}.aksel-chat--right .aksel-chat__top-text--left{align-self:flex-start}}@layer aksel.layout;

package/dist/component/chips.css

@@ -1,235 +1,150 @@
-.navds-chips {
-  display: flex;
-  gap: var(--a-spacing-2);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  flex-wrap: wrap;
-}
-
-.navds-chips :where(li) {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: block;
-}
-
-.navds-chips__chip {
-  all: unset;
-  display: flex;
-  cursor: pointer;
-  align-items: center;
-  justify-content: center;
-  gap: var(--a-spacing-05);
-  margin: 0;
-  padding: 0 var(--a-spacing-3);
-  text-decoration: none;
-  border-radius: var(--a-border-radius-full);
-  min-height: 2rem;
-}
-
-.navds-chips--small .navds-chips__chip {
-  min-height: 1.5rem;
-  padding: 0 var(--a-spacing-2);
-}
-
-.navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-action-subtle));
-  color: var(--ac-chip-toggle-text, var(--a-text-default));
-}
-
-.navds-chips__toggle:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-action-subtle-hover));
-}
-
-.navds-chips__toggle[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-pressed-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-toggle-pressed-text, var(--a-text-on-action));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-pressed-hover-bg, var(--a-surface-action-selected-hover));
-}
-
-/* Toggle variant neutral */
-
-.navds-chips__toggle--neutral {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-border, var(--a-border-subtle));
-  background-color: var(--ac-chip-toggle-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-toggle-neutral-text, var(--a-text-default));
-}
-
-.navds-chips__toggle--neutral:hover {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-neutral-hover-border, var(--a-border-subtle-hover));
-  background-color: var(--ac-chip-toggle-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"] {
-  box-shadow: none;
-  background-color: var(--ac-chip-toggle-neutral-pressed-bg, var(--a-surface-neutral-selected));
-  color: var(--ac-chip-toggle-neutral-pressed-text, var(--a-text-on-neutral));
-}
-
-.navds-chips__toggle--neutral[aria-pressed="true"]:hover {
-  background-color: var(--ac-chip-toggle-neutral-pressed-hover-bg, var(--a-surface-neutral-selected));
-}
-
-.navds-chips__toggle:focus-visible {
-  box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-.navds-chips__toggle[aria-pressed="true"]:focus-visible,
-.navds-chips__toggle:active:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
-}
-
-@supports not selector(:focus-visible) {
-  .navds-chips__toggle:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography;
+
+@layer aksel.components.core {
+  .aksel-chips {
+    gap: var(--ax-space-8);
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
   }
 
-  .navds-chips__toggle[aria-pressed="true"]:focus,
-  .navds-chips__toggle:active:focus {
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--ac-chip-toggle-focus, var(--a-border-focus));
+  .aksel-chips li {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: block;
   }
-}
-
-.navds-chips--medium .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1-alt);
-}
 
-.navds-chips--small .navds-chips__toggle--with-checkmark {
-  padding-left: var(--a-spacing-1);
-}
-
-.navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
-}
-
-.navds-chips__removable {
-  gap: 0;
-}
-
-.navds-chips__removable--action {
-  background-color: var(--ac-chip-removable-action-bg, var(--a-surface-action-selected));
-  color: var(--ac-chip-removable-action-text, var(--a-text-on-action));
-}
-
-.navds-chips__removable--neutral {
-  background-color: var(--ac-chip-removable-neutral-bg, var(--a-surface-neutral-subtle));
-  color: var(--ac-chip-removable-neutral-text, var(--a-text-default));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-border, var(--a-border-default));
-}
-
-.navds-chips__removable-icon {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 1.25rem;
-  display: grid;
-  place-items: center;
-  border-radius: var(--a-border-radius-full);
-}
+  .aksel-chips__chip {
+    all: unset;
+    cursor: pointer;
+    justify-content: center;
+    align-items: center;
+    gap: var(--ax-space-2);
+    padding: 0 var(--ax-space-12);
+    border-radius: var(--ax-radius-full);
+    min-height: 2rem;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+  }
 
-.navds-chips--small .navds-chips__removable-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
+  .aksel-chips__chip:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+  }
 
-.navds-chips--small .navds-chips__removable-icon > svg {
-  width: 1rem;
-}
+  .aksel-chips--readonly .aksel-chips__chip {
+    background-color: var(--ax-bg-neutral-moderateA);
+  }
 
-.navds-chips__removable--action:focus-visible {
-  box-shadow:
-    inset 0 0 0 1px var(--a-surface-default),
-    0 0 0 2px var(--a-border-focus);
-}
+  .aksel-chips--small .aksel-chips__chip {
+    min-height: 1.5rem;
+    padding: 0 var(--ax-space-8);
+  }
 
-.navds-chips__removable--neutral:focus-visible {
-  box-shadow: 0 0 0 2px var(--a-border-focus);
-}
+  .aksel-chips--small .aksel-chips__toggle-icon {
+    width: 1rem;
+    height: 1rem;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-chips__removable--action:focus {
-    outline: none;
-    box-shadow:
-      inset 0 0 0 1px var(--a-surface-default),
-      0 0 0 2px var(--a-border-focus);
+  .aksel-chips--small .aksel-chips__toggle--with-checkmark {
+    padding-left: var(--ax-space-4);
   }
 
-  .navds-chips__removable--neutral:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--a-border-focus);
+  .aksel-chips--small .aksel-chips__removable-icon {
+    width: 1.25rem;
+    height: 1.25rem;
   }
-}
 
-.navds-chips__removable--action:hover {
-  background-color: var(--ac-chip-removable-action-hover-bg, var(--a-surface-action-selected-hover));
-}
+  .aksel-chips--small .aksel-chips__removable-icon > svg {
+    width: 1rem;
+  }
 
-.navds-chips__removable--neutral:hover {
-  background-color: var(--ac-chip-removable-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
-  box-shadow: inset 0 0 0 1px var(--ac-chip-removable-neutral-hover-border, var(--a-border-strong));
-}
+  .aksel-chips--small .aksel-chips--icon-right {
+    padding-right: var(--ax-space-2);
+  }
 
-.navds-chips--icon-left {
-  padding-left: var(--a-spacing-1-alt);
-}
+  .aksel-chips__toggle {
+    box-shadow: inset 0 0 0 1px var(--ax-border-subtleA);
+    background-color: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
+    transition: box-shadow .2s cubic-bezier(.15, 1, .3, 1);
+  }
 
-.navds-chips--icon-right {
-  padding-right: var(--a-spacing-1-alt);
-}
+  .aksel-chips__toggle:hover {
+    background-color: var(--ax-bg-moderate-hover);
+    box-shadow: inset 0 0 0 1px var(--ax-border-default);
+  }
 
-.navds-chips--small .navds-chips--icon-right {
-  padding-right: var(--a-spacing-05);
-}
+  .aksel-chips__toggle[data-pressed="true"] {
+    box-shadow: none;
+    background-color: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+  }
 
-@media (forced-colors: active) {
-  .navds-chips__chip {
-    border: 1px solid transparent;
+  .aksel-chips__toggle[data-pressed="true"]:hover {
+    background-color: var(--ax-bg-strong-hover);
   }
 
-  .navds-chips__chip:hover {
-    background-color: highlighttext;
-    color: highlight;
+  .aksel-chips--medium .aksel-chips__toggle--with-checkmark {
+    padding-left: var(--ax-space-6);
   }
 
-  .navds-chips__chip:focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+  .aksel-chips__removable {
+    background: var(--ax-bg-strong-pressed);
+    color: var(--ax-text-contrast);
+    gap: 0;
   }
 
-  .navds-chips__chip:where([aria-pressed="true"], :active, :hover) > span {
-    forced-color-adjust: none;
+  .aksel-chips__removable:hover {
+    background: var(--ax-bg-strong-hover);
   }
 
-  .navds-chips__toggle:active {
-    background-color: highlight;
-    color: highlighttext;
+  .aksel-chips__removable-icon {
+    border-radius: var(--ax-radius-full);
+    place-items: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1.25rem;
+    display: grid;
   }
 
-  .navds-chips__toggle[aria-pressed="true"] {
-    background-color: selecteditem;
-    color: selecteditemtext;
-    border: 1px solid selecteditem;
+  .aksel-chips--icon-left {
+    padding-left: var(--ax-space-6);
   }
 
-  .navds-chips__toggle[aria-pressed="true"]:hover {
-    background-color: selecteditemtext;
-    color: selecteditem;
+  .aksel-chips--icon-right {
+    padding-right: var(--ax-space-6);
   }
 
-  .navds-chips__toggle[aria-pressed="true"]:active {
-    background-color: highlight;
-    color: highlighttext;
+  @media (forced-colors: active) {
+    .aksel-chips__chip {
+      border: 1px solid rgba(0, 0, 0, 0);
+    }
+
+    .aksel-chips__chip:hover {
+      color: highlight;
+      background-color: highlighttext;
+    }
+
+    .aksel-chips__chip:where([data-pressed="true"], :active, :hover) > span {
+      forced-color-adjust: none;
+    }
+
+    .aksel-chips__toggle[data-pressed="true"] {
+      color: selecteditemtext;
+      background-color: selecteditem;
+      border: 1px solid selecteditem;
+    }
+
+    .aksel-chips__toggle[data-pressed="true"]:hover {
+      color: selecteditem;
+      background-color: selecteditemtext;
+    }
   }
 }
+
+@layer aksel.components.core.loader, aksel.components.core.button, aksel.components.form, aksel.components.modules, aksel.layout;