@navikt/ds-css 4.0.0 → 4.1.0

package/dist/component/skeleton.css

@@ -0,0 +1,55 @@
+.navds-skeleton {
+  display: block;
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+}
+
+.navds-skeleton--has-children {
+  color: transparent;
+}
+
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}

package/dist/component/skeleton.min.css

@@ -0,0 +1 @@
+.navds-skeleton{-webkit-animation:akselSkeletonAnimation .8s linear infinite alternate;animation:akselSkeletonAnimation .8s linear infinite alternate;background-color:var(--ac-skeleton-bg,var(--a-surface-neutral-moderate));display:block;height:1.3em}.navds-skeleton--has-children{color:transparent}.navds-skeleton--has-children>*{visibility:hidden}.navds-skeleton--has-children.navds-skeleton--no-height{height:auto}.navds-skeleton--has-children.navds-skeleton--no-width{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-skeleton--text{border-radius:var(--a-border-radius-medium);height:auto;-webkit-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:0 55%;transform-origin:0 55%}.navds-skeleton--text:empty:before{content:"\00a0"}.navds-skeleton--circle{border-radius:var(--a-border-radius-full)}.navds-skeleton--rectangle{border-radius:0}.navds-skeleton--rounded{border-radius:var(--a-border-radius-xlarge)}@-webkit-keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}@keyframes akselSkeletonAnimation{0%{opacity:1}to{opacity:.4}}

package/dist/components.css

@@ -480,9 +480,12 @@
  * Content *
  *************************/
 .navds-accordion__content {
-  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5);
   animation: fadeAccordionContent 250ms ease;
 }
+.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
+  padding: 0 var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
+}
 .navds-accordion__content--closed {
   display: none;
 }
@@ -580,6 +583,8 @@
   --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);
+  --ac-form-description: var(--a-text-on-inverted);
+  --ac-form-description: var(--a-text-on-inverted);
   --ac-textfield-text: var(--a-text-on-inverted);
   --ac-textfield-bg: var(--a-surface-inverted);
   --ac-textfield-border: var(--a-border-on-inverted);
@@ -1046,7 +1051,7 @@
   cursor: pointer;
   align-items: center;
   justify-content: center;
-  gap: var(--a-spacing-05);
+  gap: var(--a-spacing-1);
   margin: 0;
   padding: 0 var(--a-spacing-3);
   text-decoration: none;
@@ -1058,13 +1063,13 @@
   padding: 0 var(--a-spacing-2);
 }
 .navds-chips__toggle {
-  box-shadow: inset 0 0 0 1px var(--ac-chip-toggle-border, var(--a-border-default));
-  background-color: var(--ac-chip-toggle-bg, var(--a-surface-neutral-subtle));
+  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-strong));
-  background-color: var(--ac-chip-toggle-hover-bg, var(--a-surface-neutral-subtle-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;
@@ -1074,6 +1079,24 @@
 .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));
 }
@@ -1112,17 +1135,6 @@
   place-items: center;
   border-radius: var(--a-border-radius-full);
 }
-.navds-chips__toggle-icon {
-  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: 1.25rem;
-  height: 1.25rem;
-}
 .navds-chips--small .navds-chips__removable-icon {
   width: 1.25rem;
   height: 1.25rem;
@@ -1163,9 +1175,6 @@
 .navds-chips--small .navds-chips--icon-right {
   padding-right: var(--a-spacing-05);
 }
-.navds-chips--small .navds-chips--icon-left {
-  padding-left: 0.375rem;
-}
 [data-theme="dark"] .navds-copybutton,
 [data-theme="dark"].navds-copybutton {
   --a-text-action: var(--a-blue-300);
@@ -1599,6 +1608,9 @@
 .navds-fieldset > :not(:first-child):not(:empty) {
   margin-top: var(--a-spacing-2);
 }
+.navds-fieldset__description {
+  color: var(--ac-form-description, var(--a-text-subtle));
+}
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
   margin-top: 0.125rem;
 }
@@ -1620,6 +1632,7 @@
 }
 .navds-form-field__description {
   margin-top: -6px;
+  color: var(--ac-form-description, var(--a-text-subtle));
 }
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
@@ -3828,6 +3841,51 @@ button.navds-internalheader__title:active,
 .navds-read-more--open > .navds-read-more__button:hover > .navds-read-more__expand-icon {
   transform: translateY(-1px) rotate(-180deg);
 }
+.navds-skeleton {
+  display: block;
+  background-color: var(--ac-skeleton-bg, var(--a-surface-neutral-moderate));
+  height: 1.3em;
+  animation: akselSkeletonAnimation 0.8s linear infinite alternate;
+}
+.navds-skeleton--has-children {
+  color: transparent;
+}
+.navds-skeleton--has-children > * {
+  visibility: hidden;
+}
+.navds-skeleton--has-children.navds-skeleton--no-height {
+  height: auto;
+}
+.navds-skeleton--has-children.navds-skeleton--no-width {
+  width: fit-content;
+}
+.navds-skeleton--text {
+  height: auto;
+  transform-origin: 0 55%;
+  transform: scale(1, 0.6);
+  border-radius: var(--a-border-radius-medium);
+}
+.navds-skeleton--text:empty::before {
+  content: "\00a0";
+}
+.navds-skeleton--circle {
+  border-radius: var(--a-border-radius-full);
+}
+.navds-skeleton--rectangle {
+  border-radius: 0;
+}
+.navds-skeleton--rounded {
+  border-radius: var(--a-border-radius-xlarge);
+}
+@keyframes akselSkeletonAnimation {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.4;
+  }
+}
 .navds-stepper {
   --navds-stepper-circle-size: 1.75rem;
   --navds-stepper-border-width: 2px;