@navikt/ds-css 7.33.5 → 7.34.0

package/dist/component/alert.min.css

@@ -1 +1 @@
-.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert--small.navds-alert--close-button{align-items:flex-start}.navds-alert__wrapper--maxwidth{max-width:43.5rem}.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--small{gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 47%,0,#0000);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;height:var(--a-font-line-height-large);margin-block-start:0}.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 30%,0,#0000);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:initial;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}@media (forced-colors:active){.navds-alert{background-color:canvas;border:1px solid canvastext;color:initial}}
+.navds-alert{align-items:center;border:1px solid;border-radius:var(--a-border-radius-medium);display:flex;gap:var(--a-spacing-3);padding:var(--a-spacing-4)}.navds-alert--small.navds-alert--close-button{align-items:flex-start}.navds-alert__wrapper--maxwidth{max-width:43.5rem}.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__wrapper{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--small{gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--a-spacing-4)}.navds-alert--full-width{border-radius:0}.navds-alert>.navds-alert__icon{align-self:flex-start;background:radial-gradient(circle,var(--a-surface-default) 47%,0,#0000);flex-shrink:0;font-size:1.5rem;height:var(--a-font-line-height-xlarge)}.navds-alert--small>.navds-alert__icon{-webkit-margin-before:0;height:var(--a-font-line-height-large);margin-block-start:0}.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-05);margin-block-start:var(--a-spacing-05)}.navds-alert--small.navds-alert--close-button>.navds-alert__icon{-webkit-margin-before:var(--a-spacing-1);margin-block-start:var(--a-spacing-1)}.navds-alert--error{background-color:var(--ac-alert-error-bg,var(--a-surface-danger-subtle));border-color:var(--ac-alert-error-border,var(--a-border-danger))}.navds-alert--error>.navds-alert__icon{color:var(--ac-alert-icon-error-color,var(--a-icon-danger))}.navds-alert--warning{background-color:var(--ac-alert-warning-bg,var(--a-surface-warning-subtle));border-color:var(--ac-alert-warning-border,var(--a-border-warning))}.navds-alert--warning>.navds-alert__icon{background:radial-gradient(circle at 50% 57%,var(--a-surface-default) 30%,0,#0000);color:var(--ac-alert-icon-warning-color,var(--a-icon-warning))}.navds-alert--info{background-color:var(--ac-alert-info-bg,var(--a-surface-info-subtle));border-color:var(--ac-alert-info-border,var(--a-border-info))}.navds-alert--info>.navds-alert__icon{color:var(--ac-alert-icon-info-color,var(--a-icon-info))}.navds-alert--success{background-color:var(--ac-alert-success-bg,var(--a-surface-success-subtle));border-color:var(--ac-alert-success-border,var(--a-border-success))}.navds-alert--success>.navds-alert__icon{color:var(--ac-alert-icon-success-color,var(--a-icon-success))}.navds-alert--inline{background-color:initial;border:none;padding:0}.navds-alert__button-wrapper{align-self:flex-start;display:flex;flex:1;flex-flow:row nowrap;justify-content:flex-end}@media (forced-colors:active){.navds-alert{background-color:canvas;border:1px solid canvastext;color:initial}}.navds-base-alert{border-radius:var(--a-border-radius-xlarge);display:grid;height:-webkit-fit-content;height:fit-content;overflow:clip;--__ac-base-alert-pi:var(--a-spacing-5);--__ac-base-alert-content-p:var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);--__ac-base-alert-title-pb:var(--a-spacing-05);--__ac-base-alert-header-max-width:37.5rem}.navds-base-alert[data-size=small]{--__ac-base-alert-pi:var(--a-spacing-4);--__ac-base-alert-content-p:var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);--__ac-base-alert-title-pb:var(--a-spacing-1)}.navds-base-alert[data-variant=moderate]{outline:1px solid;outline-offset:-1px}.navds-base-alert[data-variant=strong]{outline:4px solid;outline-offset:-4px}.navds-base-alert[data-global=true]{border-radius:0}.navds-base-alert[data-color=accent]{outline-color:var(--a-border-action)}.navds-base-alert[data-color=accent][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-action-subtle);border-color:var(--a-blue-200);color:var(--a-blue-800)}.navds-base-alert[data-color=neutral]{outline-color:var(--a-gray-700)}.navds-base-alert[data-color=neutral][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-neutral-subtle);border-color:var(--a-gray-200);color:var(--a-gray-800)}.navds-base-alert[data-color=neutral][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-neutral);color:var(--a-text-on-neutral)}.navds-base-alert[data-color=info]{outline-color:var(--a-border-info)}.navds-base-alert[data-color=info][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-info-subtle);border-color:var(--a-lightblue-200);color:var(--a-lightblue-900)}.navds-base-alert[data-color=success]{outline-color:var(--a-border-success)}.navds-base-alert[data-color=success][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-success-subtle);border-color:var(--a-green-200);color:var(--a-green-800)}.navds-base-alert[data-color=success][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-success);color:var(--a-text-on-success)}.navds-base-alert[data-color=warning]{outline-color:var(--a-surface-warning)}.navds-base-alert[data-color=warning][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=warning][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-warning);color:var(--a-text-on-warning)}.navds-base-alert[data-color=danger]{outline-color:var(--a-border-danger)}.navds-base-alert[data-color=danger][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-danger-subtle);border-color:var(--a-red-200);color:var(--a-red-800)}.navds-base-alert[data-color=danger][data-variant=strong] .navds-base-alert__header{background:var(--a-surface-danger);color:var(--a-text-on-danger)}.navds-base-alert[data-color=brand-magenta]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=brand-magenta][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert[data-color=brand-beige]{outline-color:var(--a-border-warning)}.navds-base-alert[data-color=brand-beige][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-warning-subtle);border-color:var(--a-orange-200);color:var(--a-orange-900)}.navds-base-alert[data-color=brand-blue]{outline-color:var(--a-border-alt-3)}.navds-base-alert[data-color=brand-blue][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-3-subtle);border-color:var(--a-deepblue-200);color:var(--a-deepblue-800)}.navds-base-alert[data-color=meta-lime]{outline-color:var(--a-border-alt-2)}.navds-base-alert[data-color=meta-lime][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-2-subtle);border-color:var(--a-limegreen-200);color:var(--a-limegreen-900)}.navds-base-alert[data-color=meta-purple]{outline-color:var(--a-border-alt-1)}.navds-base-alert[data-color=meta-purple][data-variant=moderate] .navds-base-alert__header{background:var(--a-surface-alt-1-subtle);border-color:var(--a-purple-200);color:var(--a-purple-800)}.navds-base-alert__header{align-items:flex-start;border-bottom:1px solid;display:flex;gap:var(--a-spacing-2);padding:var(--a-spacing-2) var(--__ac-base-alert-pi)}.navds-base-alert[data-global=true] .navds-base-alert__header{padding-inline:max(var(--__ac-base-alert-pi),calc((100% - var(--__ac-base-alert-header-max-width))/2))}.navds-base-alert[data-variant=strong] .navds-base-alert__header,.navds-base-alert__header:only-child{border-bottom:none}.navds-base-alert__icon{display:grid;font-size:1.5rem;margin-top:var(--a-spacing-1)}.navds-base-alert__title{padding-block:var(--__ac-base-alert-title-pb)}.navds-base-alert__content{background-color:var(--a-bg-default);padding:var(--__ac-base-alert-content-p)}.navds-base-alert[data-global=true] .navds-base-alert__content{padding-inline:max(var(--__ac-base-alert-pi),calc((100% - var(--__ac-base-alert-header-max-width))/2))}.navds-base-alert__close-button.navds-base-alert__close-button{margin-left:auto;z-index:1}.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible{box-shadow:0 0 0 3px #fff}.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-on-inverted)}.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button{color:var(--a-text-default)}:is(.navds-base-alert[data-color=warning] .navds-base-alert__close-button.navds-base-alert__close-button):active{color:var(--a-text-on-inverted)}

package/dist/component/inlinemessage.css

@@ -0,0 +1,45 @@
+.navds-inline-message {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-inline-message[data-color="info"] {
+  color: var(--a-lightblue-900);
+}
+
+.navds-inline-message[data-color="info"] .navds-inline-message__icon {
+    color: var(--a-icon-info);
+  }
+
+.navds-inline-message[data-color="success"] {
+  color: var(--a-green-900);
+}
+
+.navds-inline-message[data-color="success"] .navds-inline-message__icon {
+    color: var(--a-icon-success);
+  }
+
+.navds-inline-message[data-color="danger"] {
+  color: var(--a-red-900);
+}
+
+.navds-inline-message[data-color="danger"] .navds-inline-message__icon {
+    color: var(--a-icon-danger);
+  }
+
+.navds-inline-message[data-color="warning"] {
+  color: var(--a-orange-900);
+}
+
+.navds-inline-message[data-color="warning"] .navds-inline-message__icon {
+    color: var(--a-icon-warning);
+  }
+
+.navds-inline-message__icon {
+  font-size: 1.5rem;
+  flex: 0 0 auto;
+}
+
+.navds-inline-message[data-size="small"] .navds-inline-message__icon {
+    font-size: 1.25rem;
+  }

package/dist/component/inlinemessage.min.css

@@ -0,0 +1 @@
+.navds-inline-message{display:flex;gap:var(--a-spacing-1)}.navds-inline-message[data-color=info]{color:var(--a-lightblue-900)}.navds-inline-message[data-color=info] .navds-inline-message__icon{color:var(--a-icon-info)}.navds-inline-message[data-color=success]{color:var(--a-green-900)}.navds-inline-message[data-color=success] .navds-inline-message__icon{color:var(--a-icon-success)}.navds-inline-message[data-color=danger]{color:var(--a-red-900)}.navds-inline-message[data-color=danger] .navds-inline-message__icon{color:var(--a-icon-danger)}.navds-inline-message[data-color=warning]{color:var(--a-orange-900)}.navds-inline-message[data-color=warning] .navds-inline-message__icon{color:var(--a-icon-warning)}.navds-inline-message__icon{flex:0 0 auto;font-size:1.5rem}.navds-inline-message[data-size=small] .navds-inline-message__icon{font-size:1.25rem}

package/dist/components.css

@@ -670,6 +670,232 @@
   }
 }
 
+/* -------------------- InfoCard, LocalAlert, GlobalAlert ------------------- */
+
+.navds-base-alert {
+  display: grid;
+  border-radius: var(--a-border-radius-xlarge);
+  overflow: clip;
+  height: fit-content;
+
+  --__ac-base-alert-pi: var(--a-spacing-5);
+  --__ac-base-alert-content-p: var(--a-spacing-3) var(--__ac-base-alert-pi) var(--a-spacing-4) var(--__ac-base-alert-pi);
+  --__ac-base-alert-title-pb: var(--a-spacing-05);
+  --__ac-base-alert-header-max-width: 37.5rem;
+}
+
+.navds-base-alert[data-size="small"] {
+    --__ac-base-alert-pi: var(--a-spacing-4);
+    --__ac-base-alert-content-p: var(--a-spacing-2) var(--a-spacing-4) var(--a-spacing-3) var(--a-spacing-4);
+    --__ac-base-alert-title-pb: var(--a-spacing-1);
+  }
+
+.navds-base-alert[data-variant="moderate"] {
+    outline: 1px solid;
+    outline-offset: -1px;
+  }
+
+.navds-base-alert[data-variant="strong"] {
+    outline: 4px solid;
+    outline-offset: -4px;
+  }
+
+.navds-base-alert[data-global="true"] {
+    border-radius: 0;
+  }
+
+.navds-base-alert[data-color="accent"] {
+  outline-color: var(--a-border-action);
+}
+
+.navds-base-alert[data-color="accent"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-action-subtle);
+      color: var(--a-blue-800);
+      border-color: var(--a-blue-200);
+    }
+
+.navds-base-alert[data-color="neutral"] {
+  outline-color: var(--a-gray-700);
+}
+
+.navds-base-alert[data-color="neutral"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-neutral-subtle);
+      color: var(--a-gray-800);
+      border-color: var(--a-gray-200);
+    }
+
+.navds-base-alert[data-color="neutral"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-neutral);
+      color: var(--a-text-on-neutral);
+    }
+
+.navds-base-alert[data-color="info"] {
+  outline-color: var(--a-border-info);
+}
+
+.navds-base-alert[data-color="info"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-info-subtle);
+      color: var(--a-lightblue-900);
+      border-color: var(--a-lightblue-200);
+    }
+
+.navds-base-alert[data-color="success"] {
+  outline-color: var(--a-border-success);
+}
+
+.navds-base-alert[data-color="success"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-success-subtle);
+      color: var(--a-green-800);
+      border-color: var(--a-green-200);
+    }
+
+.navds-base-alert[data-color="success"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-success);
+      color: var(--a-text-on-success);
+    }
+
+.navds-base-alert[data-color="warning"] {
+  outline-color: var(--a-surface-warning);
+}
+
+.navds-base-alert[data-color="warning"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="warning"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-warning);
+      color: var(--a-text-on-warning);
+    }
+
+.navds-base-alert[data-color="danger"] {
+  outline-color: var(--a-border-danger);
+}
+
+.navds-base-alert[data-color="danger"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-danger-subtle);
+      color: var(--a-red-800);
+      border-color: var(--a-red-200);
+    }
+
+.navds-base-alert[data-color="danger"][data-variant="strong"] .navds-base-alert__header {
+      background: var(--a-surface-danger);
+      color: var(--a-text-on-danger);
+    }
+
+.navds-base-alert[data-color="brand-magenta"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="brand-magenta"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert[data-color="brand-beige"] {
+  outline-color: var(--a-border-warning);
+}
+
+.navds-base-alert[data-color="brand-beige"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-warning-subtle);
+      color: var(--a-orange-900);
+      border-color: var(--a-orange-200);
+    }
+
+.navds-base-alert[data-color="brand-blue"] {
+  outline-color: var(--a-border-alt-3);
+}
+
+.navds-base-alert[data-color="brand-blue"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-3-subtle);
+      color: var(--a-deepblue-800);
+      border-color: var(--a-deepblue-200);
+    }
+
+.navds-base-alert[data-color="meta-lime"] {
+  outline-color: var(--a-border-alt-2);
+}
+
+.navds-base-alert[data-color="meta-lime"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-2-subtle);
+      color: var(--a-limegreen-900);
+      border-color: var(--a-limegreen-200);
+    }
+
+.navds-base-alert[data-color="meta-purple"] {
+  outline-color: var(--a-border-alt-1);
+}
+
+.navds-base-alert[data-color="meta-purple"][data-variant="moderate"] .navds-base-alert__header {
+      background: var(--a-surface-alt-1-subtle);
+      color: var(--a-purple-800);
+      border-color: var(--a-purple-200);
+    }
+
+.navds-base-alert__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--a-spacing-2);
+  padding: var(--a-spacing-2) var(--__ac-base-alert-pi);
+  border-bottom: 1px solid;
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__header {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert[data-variant="strong"] .navds-base-alert__header {
+    border-bottom: none;
+  }
+
+.navds-base-alert__header:only-child {
+    border-bottom: none;
+  }
+
+.navds-base-alert__icon {
+  font-size: 1.5rem;
+  margin-top: var(--a-spacing-1);
+  display: grid;
+}
+
+.navds-base-alert__title {
+  padding-block: var(--__ac-base-alert-title-pb);
+}
+
+.navds-base-alert__content {
+  padding: var(--__ac-base-alert-content-p);
+  background-color: var(--a-bg-default);
+}
+
+.navds-base-alert[data-global="true"] .navds-base-alert__content {
+    padding-inline: max(var(--__ac-base-alert-pi), calc((100% - var(--__ac-base-alert-header-max-width)) / 2));
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button {
+  margin-left: auto;
+
+  /* Moved focus-outline over wrapper outline */
+  z-index: 1;
+}
+
+.navds-base-alert__close-button.navds-base-alert__close-button:focus-visible {
+    box-shadow: 0 0 0 3px white;
+  }
+
+.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button.navds-base-alert__close-button {
+    color: var(--a-text-on-inverted);
+  }
+
+.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button {
+  color: var(--a-text-default);
+}
+
+:is(.navds-base-alert[data-color="warning"] .navds-base-alert__close-button.navds-base-alert__close-button):active {
+    color: var(--a-text-on-inverted);
+  }
+
 .navds-button {
   --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
 
@@ -4744,6 +4970,52 @@ li.navds-file-item {
   }
 }
 
+.navds-inline-message {
+  display: flex;
+  gap: var(--a-spacing-1);
+}
+
+.navds-inline-message[data-color="info"] {
+  color: var(--a-lightblue-900);
+}
+
+.navds-inline-message[data-color="info"] .navds-inline-message__icon {
+    color: var(--a-icon-info);
+  }
+
+.navds-inline-message[data-color="success"] {
+  color: var(--a-green-900);
+}
+
+.navds-inline-message[data-color="success"] .navds-inline-message__icon {
+    color: var(--a-icon-success);
+  }
+
+.navds-inline-message[data-color="danger"] {
+  color: var(--a-red-900);
+}
+
+.navds-inline-message[data-color="danger"] .navds-inline-message__icon {
+    color: var(--a-icon-danger);
+  }
+
+.navds-inline-message[data-color="warning"] {
+  color: var(--a-orange-900);
+}
+
+.navds-inline-message[data-color="warning"] .navds-inline-message__icon {
+    color: var(--a-icon-warning);
+  }
+
+.navds-inline-message__icon {
+  font-size: 1.5rem;
+  flex: 0 0 auto;
+}
+
+.navds-inline-message[data-size="small"] .navds-inline-message__icon {
+    font-size: 1.25rem;
+  }
+
 .navds-internalheader {
   display: flex;
   align-self: stretch;