@navikt/ds-css 2.9.7 → 3.0.0

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Thu, 04 May 2023 12:15:11 GMT
+ * Generated on Tue, 09 May 2023 11:07:48 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -1115,64 +1115,150 @@ body,
 .navds-accordion__item:focus-within {
   position: relative;
 }
+/*************************
+ * Header *
+ *************************/
 .navds-accordion__header {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+  --__ac-accordion-header-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+
   width: 100%;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: flex-start;
   gap: var(--a-spacing-2);
-  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
+  padding: var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--ac-accordion-header-border, var(--a-border-divider));
+  position: relative;
+  box-shadow: var(--__ac-accordion-header-shadow);
+  z-index: 1;
 }
-.navds-accordion__header:focus {
+.navds-accordion__header:hover {
+  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
+  text-decoration: underline;
+  color: var(--ac-accordion-header-text-hover, inherit);
+}
+.navds-accordion--small .navds-accordion__header {
+  padding: var(--a-spacing-2) var(--a-spacing-3);
+}
+.navds-accordion--medium .navds-accordion__header {
+  padding: var(--a-spacing-3);
+}
+.navds-accordion--large .navds-accordion__header {
+  padding: var(--a-spacing-4) var(--a-spacing-3);
+}
+.navds-accordion__item:last-child > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow), inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
+  box-shadow: inset 2px 0 0 0 var(--a-transparent), inset -2px 0 0 0 var(--a-transparent), inset 0 2px 0 0 var(--a-transparent),
+    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
+}
+.navds-accordion__item--open > :where(.navds-accordion__header) {
+  box-shadow: var(--__ac-accordion-header-shadow);
+}
+.navds-accordion__header:focus-visible {
   outline: none;
   box-shadow: var(--a-shadow-focus);
+  border-radius: var(--a-border-radius-large);
 }
-.navds-accordion__header:hover {
-  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
-  border-color: var(--ac-accordion-header-border-hover, var(--a-border-default));
-  background: var(--ac-accordion-header-bg-hover, var(--a-surface-transparent));
+@supports not selector(:focus-visible) {
+  .navds-accordion__header:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+    border-radius: var(--a-border-radius-large);
+  }
 }
 .navds-accordion__header-content {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--ac-accordion-header-bg-open, var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle)));
-  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
-}
-.navds-accordion__item--open > :where(.navds-accordion__header:hover) {
-  background-color: var(--ac-accordion-header-bg-open-hover, var(--a-surface-action-subtle));
-}
-.navds-accordion__content {
-  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
-  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-divider));
+/*************************
+ * Icon *
+ *************************/
+.navds-accordion__icon-wrapper {
+  display: grid;
+  place-content: center;
+  border-radius: var(--a-border-radius-medium);
+  height: var(--a-spacing-6);
+  width: var(--a-spacing-6);
+  align-self: center;
 }
-.navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--ac-accordion-content-border-open, var(--a-border-default));
+.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
+  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
 }
-.navds-accordion__expand-icon {
+.navds-accordion__header-chevron {
+  border-radius: var(--a-border-radius-medium);
   font-size: 1.5rem;
   height: 1.75rem;
   flex-shrink: 0;
+  transition: transform 150ms ease-in-out;
+  align-self: center;
 }
-.navds-accordion__item--open > .navds-accordion__header > .navds-accordion__expand-icon {
-  transform: rotateZ(180deg);
+:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
+  transform: translateY(1px);
 }
-.navds-accordion__expand-icon--filled {
-  display: none;
+.navds-accordion__item--open
+  > :where(.navds-accordion__header)
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(0) rotate(-180deg);
 }
-.navds-accordion__header:hover > .navds-accordion__expand-icon.navds-accordion__expand-icon--filled {
-  display: inherit;
+.navds-accordion__item--open
+  > :where(.navds-accordion__header):hover
+  > :where(.navds-accordion__icon-wrapper)
+  > :where(.navds-accordion__header-chevron) {
+  transform: translateY(-1px) rotate(-180deg);
+}
+/*************************
+ * Variant/Default *
+ *************************/
+.navds-accordion__item--open {
+  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
+}
+/*************************
+ * Variant/Neutral *
+ *************************/
+.navds-accordion__item--open.navds-accordion__item--neutral {
+  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
+}
+/*************************
+ * Content *
+ *************************/
+.navds-accordion__content {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  animation: fadeAccordionContent 250ms ease;
 }
-.navds-accordion__header:hover > .navds-accordion__expand-icon {
+.navds-accordion__content--closed {
   display: none;
 }
+.navds-accordion__item--no-animation :where(.navds-accordion__content) {
+  animation: none;
+}
+@keyframes fadeAccordionContent {
+  0% {
+    opacity: 0.25;
+    transform: translateY(-8px);
+  }
+
+  40% {
+    opacity: 0.7;
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 .navds-alert {
   border-radius: var(--a-border-radius-medium);
   border: 1px solid;
@@ -1198,7 +1284,6 @@ body,
   background: radial-gradient(circle, var(--a-surface-default) 50%, 0, transparent);
 }
 .navds-alert--small > .navds-alert__icon {
-  font-size: 1.25rem;
   height: var(--a-font-line-height-large);
 }
 .navds-alert--error {
@@ -1251,9 +1336,10 @@ body,
   gap: var(--a-spacing-2);
 }
 .navds-button--small {
-  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-1) var(--a-spacing-3);
 
   padding: var(--ac-button-padding-small, var(--__ac-button-padding));
+  min-height: 2rem;
 }
 .navds-button--xsmall {
   --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
@@ -1267,12 +1353,12 @@ body,
   padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
 }
 .navds-button--small.navds-button--icon-only {
-  --__ac-button-padding: 0.375rem;
+  --__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-1);
+  --__ac-button-padding: var(--a-spacing-05);
 
   padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
@@ -1297,13 +1383,11 @@ body,
 }
 .navds-button--small .navds-button__icon {
   --ac-button-icon-margin: -2px;
-
-  font-size: 1.25rem;
 }
 .navds-button--xsmall .navds-button__icon {
   --ac-button-icon-margin: -2px;
 
-  font-size: 1rem;
+  font-size: 1.25rem;
 }
 /*************************
  * .navds-button--primary *
@@ -1654,6 +1738,9 @@ body,
 .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));
 }
+.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));
@@ -1666,27 +1753,28 @@ body,
 .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);
 }
 .navds-chips__toggle-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
   display: grid;
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
 .navds-chips--small .navds-chips__toggle-icon {
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 .navds-chips--small .navds-chips__removable-icon {
   width: 1.25rem;
   height: 1.25rem;
 }
 .navds-chips--small .navds-chips__removable-icon > svg {
-  width: 0.75rem;
+  width: 1rem;
 }
 .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);
@@ -1705,7 +1793,7 @@ body,
   padding-left: 0.375rem;
 }
 .navds-chips--icon-right {
-  padding-right: var(--a-spacing-1);
+  padding-right: 0.375rem;
 }
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
@@ -1858,12 +1946,12 @@ body,
 .navds-expansioncard__content-inner {
   animation: fadeExpansionCard 250ms ease;
 }
-.navds-expansioncard--no-fade :where(.navds-expansioncard__content-inner) {
+.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
   animation: none;
 }
 @keyframes fadeExpansionCard {
   0% {
-    opacity: 0;
+    opacity: 0.25;
     transform: translateY(-8px);
   }
 
@@ -2223,8 +2311,8 @@ body,
 }
 .navds-select__chevron {
   position: absolute;
-  font-size: 1rem;
-  right: 0.5rem;
+  font-size: 1.5rem;
+  right: var(--a-spacing-2);
   pointer-events: none;
   align-self: center;
 }
@@ -2232,6 +2320,9 @@ body,
   min-height: 32px;
   padding: 0 2rem 0 0.25rem;
 }
+.navds-form-field--small .navds-select__chevron {
+  right: 0.375rem;
+}
 /**
   Error handling
 */
@@ -2321,7 +2412,7 @@ body,
   position: absolute;
   top: var(--a-spacing-3);
   left: 0;
-  border-radius: var(--a-border-radius-medium);
+  border-radius: var(--a-border-radius-full);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .navds-switch--small > .navds-switch__track {
@@ -2354,7 +2445,7 @@ body,
 .navds-switch__thumb {
   background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
   color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
-  border-radius: var(--a-border-radius-small);
+  border-radius: var(--a-border-radius-full);
   width: 20px;
   height: 20px;
   position: absolute;
@@ -2584,7 +2675,7 @@ body,
   cursor: pointer;
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: 1.25rem;
   padding: 0;
 }
 .navds-form-field--small .navds-search__button-clear {
@@ -3103,7 +3194,8 @@ body,
   gap: var(--a-spacing-2);
 }
 .navds-date__caption-button,
-.navds-date__caption-button:disabled {
+.navds-date__caption-button:disabled,
+.navds-date__caption-button:disabled:hover {
   color: var(--ac-date-caption-text, var(--a-text-default));
 }
 .navds-date__field-input {
@@ -3446,28 +3538,31 @@ body,
 .navds-read-more__content {
   margin-top: var(--a-spacing-1);
   border-left: 2px solid var(--ac-read-more-line, var(--a-border-divider));
+  margin-left: 13px;
+  padding-left: 13px;
+}
+.navds-read-more--small .navds-read-more__content {
   margin-left: 11px;
   padding-left: 11px;
 }
+.navds-read-more__content--closed {
+  display: none;
+}
 .navds-read-more__expand-icon {
-  font-size: 1.25rem;
-  height: 1.5rem;
+  font-size: 1.5rem;
   flex-shrink: 0;
 }
 .navds-read-more--small .navds-read-more__expand-icon {
-  height: 1.25rem;
+  font-size: 1.25rem;
+}
+.navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(1px);
 }
 .navds-read-more--open > .navds-read-more__button > .navds-read-more__expand-icon {
   transform: rotate(-180deg);
 }
-.navds-read-more__expand-icon--filled {
-  display: none;
-}
-.navds-read-more__button:hover > .navds-read-more__expand-icon.navds-read-more__expand-icon--filled {
-  display: inherit;
-}
-.navds-read-more__button:hover > .navds-read-more__expand-icon {
-  display: none;
+.navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
+  transform: translateY(-1px) rotate(-180deg);
 }
 .navds-stepper {
   --navds-stepper-circle-size: 1.75rem;
@@ -3560,6 +3655,8 @@ button.navds-stepper__step {
   border: none;
   background: none;
   font-size: 28px;
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
 }
 .navds-stepper__content {
   min-width: fit-content;
@@ -3632,6 +3729,10 @@ button.navds-stepper__step {
 :where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle {
   background-color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
 }
+:where(.navds-stepper__step:not(.navds-stepper__step--active):hover) .navds-stepper__circle--success {
+  color: var(--ac-stepper-hover-bg, var(--a-surface-action-subtle-hover));
+  background-color: var(--ac-stepper-text, var(--a-surface-action));
+}
 /* Non-interactive */
 :where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__content {
   color: var(--ac-stepper-non-interactive-active, var(--a-text-default));
@@ -3654,9 +3755,25 @@ button.navds-stepper__step {
   background-color: inherit;
   color: var(--ac-stepper-active-completed, var(--a-text-action-selected));
 }
+:where(.navds-stepper__step--completed.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-action);
+  background-color: var(--ac-stepper-active-completed, var(--a-surface-action-selected));
+}
+:where(.navds-stepper__step--non-interactive, .navds-stepper__step--non-interactive:hover) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-completed-bg, var(--a-surface-neutral));
+}
+:where(.navds-stepper__step--non-interactive.navds-stepper__step--active) .navds-stepper__circle--success {
+  color: var(--a-text-on-inverted);
+  background-color: var(--ac-stepper-non-interactive-active-completed, var(--a-surface-inverted));
+}
 :where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive) .navds-stepper__circle {
   color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-default));
 }
+:where(.navds-stepper__step--completed.navds-stepper__step--active.navds-stepper__step--non-interactive)
+  .navds-stepper__circle--success {
+  color: var(--ac-stepper-non-interactive-active-completed, var(--a-text-on-inverted));
+}
 .navds-table {
   width: 100%;
   border-collapse: collapse;
@@ -3812,16 +3929,15 @@ button.navds-stepper__step {
 .navds-table--small .navds-table__expandable-icon {
   font-size: 1.25rem;
 }
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon,
-.navds-table__expandable-icon--filled {
-  display: none;
-}
-.navds-table__toggle-expand-button:hover .navds-table__expandable-icon--filled {
-  display: block;
+.navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(1px);
 }
 .navds-table__toggle-expand-cell--open .navds-table__expandable-icon {
   transform: rotate(180deg);
 }
+.navds-table__toggle-expand-cell--open .navds-table__toggle-expand-button:hover .navds-table__expandable-icon {
+  transform: translateY(-1px) rotate(180deg);
+}
 .navds-table__expanded-row-cell {
   padding: 0;
 }
@@ -3881,7 +3997,7 @@ button.navds-stepper__step {
   align-items: center;
   background: none;
   border: none;
-  color: var(--ac-tabs-text, var(--a-text-subtle));
+  color: var(--ac-tabs-text, var(--a-text-default));
   cursor: pointer;
 }
 .navds-tabs__tab:hover {