@navikt/ds-css 4.1.7 → 4.3.0

package/dist/component/popover.css

@@ -5,6 +5,7 @@
   border: 1px solid;
   border-color: var(--ac-popover-border, var(--a-border-default));
   border-radius: var(--a-border-radius-medium);
+  max-width: calc(100vw - var(--a-spacing-6));
 }
 
 .navds-popover__content {

package/dist/component/popover.min.css

@@ -1 +1 @@
-.navds-popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-medium);z-index:var(--a-z-index-popover)}.navds-popover__content{padding:var(--a-spacing-4)}.navds-popover--hidden{display:none}.navds-popover:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-popover:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-popover__arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-popover[data-placement^=top]>.navds-popover__arrow{border-left-color:transparent;border-top-color:transparent}.navds-popover[data-placement^=bottom]>.navds-popover__arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-popover[data-placement^=left]>.navds-popover__arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-popover[data-placement^=right]>.navds-popover__arrow{border-right-color:transparent;border-top-color:transparent}
+.navds-popover{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));border-radius:var(--a-border-radius-medium);box-shadow:var(--a-shadow-medium);max-width:calc(100vw - var(--a-spacing-6));z-index:var(--a-z-index-popover)}.navds-popover__content{padding:var(--a-spacing-4)}.navds-popover--hidden{display:none}.navds-popover:focus-visible{box-shadow:var(--a-shadow-focus);outline:none}@supports not selector(:focus-visible){.navds-popover:focus{box-shadow:var(--a-shadow-focus);outline:none}}.navds-popover__arrow{background-color:var(--ac-popover-bg,var(--a-surface-default));border:1px solid;border-color:var(--ac-popover-border,var(--a-border-default));height:1rem;position:absolute;-webkit-transform:rotate(45deg);transform:rotate(45deg);width:1rem;z-index:-1}.navds-popover[data-placement^=top]>.navds-popover__arrow{border-left-color:transparent;border-top-color:transparent}.navds-popover[data-placement^=bottom]>.navds-popover__arrow{border-bottom-color:transparent;border-right-color:transparent}.navds-popover[data-placement^=left]>.navds-popover__arrow{border-bottom-color:transparent;border-left-color:transparent}.navds-popover[data-placement^=right]>.navds-popover__arrow{border-right-color:transparent;border-top-color:transparent}

package/dist/components.css

@@ -955,13 +955,11 @@
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--a-spacing-4);
-  padding-right: var(--a-spacing-16);
+  gap: var(--a-spacing-3);
+  max-width: 40.75rem;
 }
 .navds-chat--right {
   flex-direction: row-reverse;
-  padding-right: 0;
-  padding-left: var(--a-spacing-16);
 }
 .navds-chat__bubble-wrapper {
   list-style: none;
@@ -976,15 +974,19 @@
 }
 .navds-chat__avatar {
   align-items: center;
-  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
-  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  box-shadow: var(--a-shadow-xsmall);
+  background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
+  border: 1px solid var(--ac-chat-border-color, var(--a-border-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: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+  font-size: 1.06rem;
+  letter-spacing: 0.024rem;
 }
 .navds-chat__avatar svg {
   align-self: center;
@@ -992,11 +994,11 @@
   width: 100%;
 }
 .navds-chat__bubble {
-  padding: 1rem;
-  box-shadow: var(--a-shadow-small);
+  padding: var(--a-spacing-4);
+  box-shadow: var(--a-shadow-xsmall);
   width: fit-content;
-  max-width: 37.5rem;
-  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
+  border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
   border-radius: var(--a-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
@@ -1007,11 +1009,24 @@
   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__bubble,
+.navds-chat--info .navds-chat__avatar {
+  background-color: var(--a-surface-info-subtle);
+}
+.navds-chat--neutral .navds-chat__bubble,
+.navds-chat--neutral .navds-chat__avatar {
+  background-color: var(--a-surface-default);
+}
 .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;
 }
 .navds-chat--right .navds-chat__top-text {
   align-self: flex-end;
@@ -1028,9 +1043,6 @@
 .navds-chat--right .navds-chat__top-text--left {
   align-self: flex-start;
 }
-.navds-chat__name {
-  font-weight: var(--a-font-weight-bold);
-}
 .navds-chips {
   display: flex;
   gap: var(--a-spacing-2);
@@ -1433,7 +1445,7 @@
 .navds-expansioncard__title--large {
   margin-top: var(--a-spacing-1);
 }
-.navds-expansioncard--small :where(.navds-expansioncard__title--small) {
+.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
   margin-top: var(--a-spacing-05);
 }
 .navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
@@ -1465,7 +1477,7 @@
 .navds-expansioncard__header-chevron {
   transition: transform 150ms ease-in-out;
 }
-.navds-expansioncard--open :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
   transform: translateY(0) rotate(180deg);
 }
 .navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
@@ -1481,7 +1493,10 @@
     box-shadow: var(--a-shadow-focus);
   }
 }
-.navds-expansioncard--open :where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron) {
+.navds-expansioncard--open
+  > :where(.navds-expansioncard__header)
+  > :where(.navds-expansioncard__header-button):hover
+  :where(.navds-expansioncard__header-chevron) {
   transform: translateY(-1px) rotate(180deg);
 }
 .navds-expansioncard__header-button::after {
@@ -2477,7 +2492,7 @@
 }
 .navds-help-text__popover.navds-popover {
   background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
-  max-width: min(65ch, 90vw);
+  max-width: min(65ch, calc(100vw - 1.5rem));
 
   --ac-popover-border: var(--a-border-info);
 }
@@ -2833,6 +2848,7 @@ button.navds-internalheader__title:active,
   border: 1px solid;
   border-color: var(--ac-popover-border, var(--a-border-default));
   border-radius: var(--a-border-radius-medium);
+  max-width: calc(100vw - var(--a-spacing-6));
 }
 .navds-popover__content {
   padding: var(--a-spacing-4);