@navikt/ds-css 5.2.1 → 5.3.1

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Mon, 28 Aug 2023 07:28:42 GMT
+ * Generated on Sun, 03 Sep 2023 10:42:10 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -877,6 +877,14 @@ body,
 .navds-body-long.navds-typo--spacing {
   margin-bottom: var(--a-spacing-7);
 }
+.navds-body-long--large {
+  font-size: var(--a-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--a-font-line-height-xlarge);
+}
+.navds-body-long--large.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-10);
+}
 .navds-body-long--small {
   font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
@@ -895,6 +903,14 @@ body,
 .navds-body-short.navds-typo--spacing {
   margin-bottom: var(--a-spacing-3);
 }
+.navds-body-short--large {
+  font-size: var(--a-font-size-xlarge);
+  letter-spacing: -0.0013em;
+  line-height: var(--a-font-line-height-large);
+}
+.navds-body-short--large.navds-typo--spacing {
+  margin-bottom: var(--a-spacing-4);
+}
 .navds-body-short--small {
   font-size: var(--a-font-size-medium);
   letter-spacing: 0.002em;
@@ -948,6 +964,42 @@ body,
 .navds-error-message {
   color: var(--ac-typo-error-text, var(--a-text-danger));
 }
+.navds-typo--truncate {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.navds-typo--semibold {
+  font-weight: var(--a-font-weight-bold);
+}
+.navds-typo--align-start {
+  text-align: start;
+}
+.navds-typo--align-center {
+  text-align: center;
+}
+.navds-typo--align-end {
+  text-align: end;
+}
+.navds-typo--visually-hidden {
+  border: 0 !important;
+  clip: rect(0, 0, 0, 0) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  top: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+.navds-typo--color-subtle {
+  color: var(--a-text-subtle);
+}
+[data-theme="dark"].navds-typo--color-subtle,
+[data-theme="dark"] .navds-typo--color-subtle {
+  --a-text-subtle: var(--a-gray-300);
+}
 /**************************
  * .navds-grid *
  **************************/
@@ -1147,6 +1199,9 @@ body,
     grid-column: span 12;
   }
 }
+.navds-accordion {
+  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
+}
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -1154,7 +1209,6 @@ body,
  * 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);
 
@@ -2315,67 +2369,90 @@ body,
     transform: translateY(0);
   }
 }
-/**
- * GuidePanel component
- */
 .navds-guide-panel {
+  --__ac-guide-panel-guide-size: 4rem;
+
   position: relative;
-  padding-left: var(--a-spacing-10);
+  padding-top: calc(var(--__ac-guide-panel-guide-size) / 2);
+}
+.navds-guide {
+  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-alt-3-subtle));
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-full);
+  overflow: hidden;
+  position: absolute;
+  width: var(--__ac-guide-panel-guide-size);
+  height: var(--__ac-guide-panel-guide-size);
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.navds-guide svg,
+.navds-guide img {
+  height: 100%;
+  width: 100%;
 }
 .navds-guide-panel__content {
   background-color: var(--ac-guide-panel-bg, var(--a-surface-default));
-  border-radius: var(--a-border-radius-medium);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-  min-height: 7.25rem;
-  padding: var(--a-spacing-6);
-  padding-left: var(--a-spacing-14);
-}
-.navds-guide-panel--poster {
-  padding-left: 0;
+  border: 2px solid var(--ac-guide-panel-border, var(--a-border-alt-3));
+  border-radius: var(--a-border-radius-large);
+  padding: var(--a-spacing-4);
   padding-top: var(--a-spacing-12);
 }
-.navds-guide-panel--poster .navds-guide-panel__content {
-  padding: var(--a-spacing-8);
-  padding-top: var(--a-spacing-16);
-}
-.navds-guide-panel .navds-guide {
-  position: absolute;
-  top: var(--a-spacing-4);
-  transform: translateX(-50%);
-  border: 2px solid var(--ac-guide-panel-border, var(--a-border-action));
-}
-.navds-guide-panel--poster .navds-guide {
-  left: 50%;
-  top: 0;
+@media (min-width: 480px) {
+  .navds-guide-panel {
+    --__ac-guide-panel-guide-size: 6.25rem;
+  }
+
+  .navds-guide-panel__content {
+    padding: var(--a-spacing-8);
+    padding-top: 4.25rem;
+  }
 }
-/**
- * Guide component
- */
-.navds-guide {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--a-border-radius-full);
+/* not-poster */
+.navds-guide-panel--not-poster {
+  padding-top: 0;
+  padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
 }
-/* Guide illustration frame */
-.navds-guide__illustration {
-  background: var(--ac-guide-panel-illustration-bg, var(--a-surface-action-subtle));
-  border-radius: var(--a-border-radius-full);
-  overflow: hidden;
+.navds-guide-panel--not-poster .navds-guide {
+  left: 0;
+  top: var(--a-spacing-5);
+  transform: none;
 }
-.navds-guide__illustration svg,
-.navds-guide__illustration img {
-  height: 100%;
-  width: 100%;
+.navds-guide-panel--not-poster .navds-guide-panel__content {
+  padding: var(--a-spacing-4);
+  padding-left: var(--a-spacing-10);
+  min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
 }
-/* Illustration sizes */
-.navds-guide__illustration--small {
-  height: 5rem;
-  width: 5rem;
+@media (min-width: 480px) {
+  .navds-guide-panel--not-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+  }
+
+  .navds-guide-panel--not-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+  }
 }
-.navds-guide__illustration--medium {
-  height: 6rem;
-  width: 6rem;
+/* responsive-poster (on desktop) */
+@media (min-width: 480px) {
+  .navds-guide-panel--responsive-poster {
+    --__ac-guide-panel-guide-size: 5rem;
+
+    padding-top: 0;
+    padding-left: calc(var(--__ac-guide-panel-guide-size) / 2);
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide {
+    left: 0;
+    top: var(--a-spacing-5);
+    transform: none;
+  }
+
+  .navds-guide-panel--responsive-poster .navds-guide-panel__content {
+    padding: var(--a-spacing-6);
+    padding-left: var(--a-spacing-14);
+    min-height: calc(var(--__ac-guide-panel-guide-size) + var(--a-spacing-5) + var(--a-spacing-5));
+  }
 }
 /*
   Order matters; rearrange with care