@navikt/ds-css 7.36.0 → 7.37.0

package/dist/component/dialog.css

@@ -0,0 +1,227 @@
+.navds-dialog__popup {
+  --__ac-dialog-transform: ;
+  --__ac-dialog-p-b: var(--a-spacing-4);
+  --__ac-dialog-p-i: var(--a-spacing-5);
+
+  position: fixed;
+  background-color: var(--a-surface-default);
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition-property: transform, opacity, translate;
+  border-radius: var(--a-border-radius-large);
+  color: var(--a-text-default);
+  box-shadow: var(--a-shadow-xlarge);
+  display: flex;
+  flex-direction: column;
+  outline: 1px solid var(--a-border-subtle);
+  z-index: 2000;
+  overflow: hidden;
+}
+
+.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup {
+    outline: none;
+  }
+
+:is(.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup):focus {
+      outline: none;
+    }
+
+.navds-dialog__popup[data-size="small"] {
+    --__ac-dialog-p-b: var(--a-spacing-3);
+    --__ac-dialog-p-i: var(--a-spacing-4);
+  }
+
+.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style] {
+    /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
+    opacity: 0.001;
+    transform: var(--__ac-dialog-transform);
+  }
+
+.navds-dialog__popup[data-exiting-style] {
+    transition-duration: 100ms;
+  }
+
+.navds-dialog__popup[data-exiting-style]::after {
+      transition-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
+    }
+
+.navds-dialog__popup[data-nested-dialog-open="true"] {
+    box-shadow: none;
+  }
+
+.navds-dialog__popup[data-nested-dialog-open="true"]::after {
+      opacity: 0.9;
+    }
+
+.navds-dialog__popup::after {
+    transition: opacity 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    content: "";
+    inset: 0;
+    position: absolute;
+    border-radius: inherit;
+    background-color: var(--a-surface-backdrop);
+    opacity: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+.navds-dialog__popup[data-position="center"] {
+    --__ac-dialog-center-margin: 3rem;
+    --__ac-dialog-transform: scale(0.98);
+
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    top: 0;
+    max-width: calc(100dvw - 3rem);
+    max-height: calc(90dvh - var(--__ac-dialog-center-margin));
+    margin-block: max(var(--__ac-dialog-center-margin), 10dvh) auto;
+  }
+
+.navds-dialog__popup[data-position="center"][data-nested="true"][data-entering-style] {
+        opacity: 1;
+        transform: scale(1);
+        transition-duration: 0ms;
+      }
+
+.navds-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
+        opacity: 1;
+        transform: scale(1);
+        transition-duration: 0ms;
+      }
+
+.navds-dialog__popup[data-position="center"][data-nested-dialog-open="true"] {
+      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
+    }
+
+@media (max-width: 479px) or (max-height: 479px) {
+
+.navds-dialog__popup[data-position="center"] {
+      --__ac-dialog-transform: translateY(35%);
+
+      max-height: calc(100dvh - max(16px, 10dvh));
+      max-width: 95dvw;
+      margin-inline: auto;
+      height: auto;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      top: auto;
+      margin-block: 0;
+  }
+    }
+
+.navds-dialog__popup[data-position="right"],.navds-dialog__popup[data-position="left"] {
+    max-width: calc(100vw - max(16px, 10vw));
+    top: 0;
+    bottom: 0;
+  }
+
+[data-nested-dialog-open="true"]:is(.navds-dialog__popup[data-position="right"],.navds-dialog__popup[data-position="left"])::after {
+        opacity: 1;
+        transition-duration: 100ms;
+      }
+
+.navds-dialog__popup[data-position="right"] {
+    --__ac-dialog-transform: translateX(35%);
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    right: 0;
+  }
+
+.navds-dialog__popup[data-position="left"] {
+    --__ac-dialog-transform: translateX(-35%);
+
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    left: 0;
+  }
+
+.navds-dialog__popup[data-position="bottom"] {
+    --__ac-dialog-transform: translateY(35%);
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: calc(100dvh - max(16px, 10dvh));
+    max-width: 95dvw;
+    margin-inline: auto;
+    height: auto;
+  }
+
+.navds-dialog__popup[data-position="bottom"][data-nested-dialog-open="true"] {
+      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
+    }
+
+.navds-dialog__popup[data-position="fullscreen"] {
+    --__ac-dialog-transform: scale(0.98);
+
+    border-radius: 0;
+    inset: 0;
+    max-height: 100dvh;
+    max-width: 100dvw;
+    width: 100%;
+    height: 100%;
+  }
+
+.navds-dialog__backdrop {
+  position: fixed;
+  min-height: 100dvh;
+  inset: 0;
+  background-color: var(--a-surface-backdrop);
+  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 1000;
+
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+}
+
+@supports (-webkit-touch-callout: none) {
+
+.navds-dialog__backdrop {
+    position: absolute;
+}
+  }
+
+.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style] {
+    opacity: 0.001;
+  }
+
+.navds-dialog__header {
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}
+
+.navds-dialog__title {
+  margin-block-end: var(--a-spacing-1);
+}
+
+.navds-dialog__close-button {
+  align-self: start;
+  float: right;
+}
+
+.navds-dialog__body {
+  overflow: auto;
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}
+
+.navds-dialog__header ~ .navds-dialog__body {
+    padding-block-start: 0;
+  }
+
+.navds-dialog__footer {
+  justify-content: flex-start;
+  display: flex;
+  flex-flow: wrap;
+  gap: var(--a-spacing-2);
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}

package/dist/component/dialog.min.css

@@ -0,0 +1 @@
+.navds-dialog__popup{--__ac-dialog-transform: ;--__ac-dialog-p-b:var(--a-spacing-4);--__ac-dialog-p-i:var(--a-spacing-5);background-color:var(--a-surface-default);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;outline:1px solid var(--a-border-subtle);overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.light:not(:has(.dark)) .navds-dialog__backdrop~.navds-dialog__popup{outline:none}:is(.light:not(:has(.dark)) .navds-dialog__backdrop~.navds-dialog__popup):focus{outline:none}.navds-dialog__popup[data-size=small]{--__ac-dialog-p-b:var(--a-spacing-3);--__ac-dialog-p-i:var(--a-spacing-4)}.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__ac-dialog-transform)}.navds-dialog__popup[data-exiting-style]{transition-duration:.1s}.navds-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.navds-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.navds-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.navds-dialog__popup:after{background-color:var(--a-surface-backdrop);border-radius:inherit;content:"";inset:0;opacity:0;pointer-events:none;position:absolute;transition:opacity 0s cubic-bezier(.25,.46,.45,.94);z-index:1}.navds-dialog__popup[data-position=center]{--__ac-dialog-center-margin:3rem;--__ac-dialog-transform:scale(0.98);left:0;margin-block:max(var(--__ac-dialog-center-margin),10dvh) auto;margin-inline:auto;max-height:calc(90dvh - var(--__ac-dialog-center-margin));max-width:calc(100dvw - 3rem);right:0;top:0}.navds-dialog__popup[data-position=center][data-nested=true][data-entering-style],.navds-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transform:scale(1);transition-duration:0s}.navds-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}@media (max-width:479px) or (max-height:479px){.navds-dialog__popup[data-position=center]{--__ac-dialog-transform:translateY(35%);border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-block:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0;top:auto}}.navds-dialog__popup[data-position=left],.navds-dialog__popup[data-position=right]{bottom:0;max-width:calc(100vw - max(16px, 10vw));top:0}[data-nested-dialog-open=true]:is(.navds-dialog__popup[data-position=right],.navds-dialog__popup[data-position=left]):after{opacity:1;transition-duration:.1s}.navds-dialog__popup[data-position=right]{--__ac-dialog-transform:translateX(35%);border-bottom-right-radius:0;border-top-right-radius:0;right:0}.navds-dialog__popup[data-position=left]{--__ac-dialog-transform:translateX(-35%);border-bottom-left-radius:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;height:auto;left:0;margin-inline:auto;max-height:calc(100dvh - max(16px, 10dvh));max-width:95dvw;right:0}.navds-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem*var(--__axc-nested-level)*-1)) scale(calc(1 - var(--__axc-nested-level)*.02))}.navds-dialog__popup[data-position=fullscreen]{--__ac-dialog-transform:scale(0.98);border-radius:0;height:100%;inset:0;max-height:100dvh;max-width:100dvw;width:100%}.navds-dialog__backdrop{background-color:var(--a-surface-backdrop);inset:0;min-height:100dvh;position:fixed;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);z-index:1000}@supports (-webkit-touch-callout:none){.navds-dialog__backdrop{position:absolute}}.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style]{opacity:.001}.navds-dialog__header{padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__title{-webkit-margin-after:var(--a-spacing-1);margin-block-end:var(--a-spacing-1)}.navds-dialog__close-button{align-self:start;float:right}.navds-dialog__body{overflow:auto;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-start;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}

package/dist/components.css

@@ -1980,6 +1980,234 @@
   }
 }
 
+.navds-dialog__popup {
+  --__ac-dialog-transform: ;
+  --__ac-dialog-p-b: var(--a-spacing-4);
+  --__ac-dialog-p-i: var(--a-spacing-5);
+
+  position: fixed;
+  background-color: var(--a-surface-default);
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition-property: transform, opacity, translate;
+  border-radius: var(--a-border-radius-large);
+  color: var(--a-text-default);
+  box-shadow: var(--a-shadow-xlarge);
+  display: flex;
+  flex-direction: column;
+  outline: 1px solid var(--a-border-subtle);
+  z-index: 2000;
+  overflow: hidden;
+}
+
+.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup {
+    outline: none;
+  }
+
+:is(.light:not(:has(.dark)) .navds-dialog__backdrop ~ .navds-dialog__popup):focus {
+      outline: none;
+    }
+
+.navds-dialog__popup[data-size="small"] {
+    --__ac-dialog-p-b: var(--a-spacing-3);
+    --__ac-dialog-p-i: var(--a-spacing-4);
+  }
+
+.navds-dialog__popup[data-entering-style],.navds-dialog__popup[data-exiting-style] {
+    /* Webkit a11y delays detecting visible elements when opacity starts at 0 */
+    opacity: 0.001;
+    transform: var(--__ac-dialog-transform);
+  }
+
+.navds-dialog__popup[data-exiting-style] {
+    transition-duration: 100ms;
+  }
+
+.navds-dialog__popup[data-exiting-style]::after {
+      transition-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
+    }
+
+.navds-dialog__popup[data-nested-dialog-open="true"] {
+    box-shadow: none;
+  }
+
+.navds-dialog__popup[data-nested-dialog-open="true"]::after {
+      opacity: 0.9;
+    }
+
+.navds-dialog__popup::after {
+    transition: opacity 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    content: "";
+    inset: 0;
+    position: absolute;
+    border-radius: inherit;
+    background-color: var(--a-surface-backdrop);
+    opacity: 0;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+.navds-dialog__popup[data-position="center"] {
+    --__ac-dialog-center-margin: 3rem;
+    --__ac-dialog-transform: scale(0.98);
+
+    left: 0;
+    right: 0;
+    margin-inline: auto;
+    top: 0;
+    max-width: calc(100dvw - 3rem);
+    max-height: calc(90dvh - var(--__ac-dialog-center-margin));
+    margin-block: max(var(--__ac-dialog-center-margin), 10dvh) auto;
+  }
+
+.navds-dialog__popup[data-position="center"][data-nested="true"][data-entering-style] {
+        opacity: 1;
+        transform: scale(1);
+        transition-duration: 0ms;
+      }
+
+.navds-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
+        opacity: 1;
+        transform: scale(1);
+        transition-duration: 0ms;
+      }
+
+.navds-dialog__popup[data-position="center"][data-nested-dialog-open="true"] {
+      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
+    }
+
+@media (max-width: 479px) or (max-height: 479px) {
+
+.navds-dialog__popup[data-position="center"] {
+      --__ac-dialog-transform: translateY(35%);
+
+      max-height: calc(100dvh - max(16px, 10dvh));
+      max-width: 95dvw;
+      margin-inline: auto;
+      height: auto;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+      top: auto;
+      margin-block: 0;
+  }
+    }
+
+.navds-dialog__popup[data-position="right"],.navds-dialog__popup[data-position="left"] {
+    max-width: calc(100vw - max(16px, 10vw));
+    top: 0;
+    bottom: 0;
+  }
+
+[data-nested-dialog-open="true"]:is(.navds-dialog__popup[data-position="right"],.navds-dialog__popup[data-position="left"])::after {
+        opacity: 1;
+        transition-duration: 100ms;
+      }
+
+.navds-dialog__popup[data-position="right"] {
+    --__ac-dialog-transform: translateX(35%);
+
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    right: 0;
+  }
+
+.navds-dialog__popup[data-position="left"] {
+    --__ac-dialog-transform: translateX(-35%);
+
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    left: 0;
+  }
+
+.navds-dialog__popup[data-position="bottom"] {
+    --__ac-dialog-transform: translateY(35%);
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    max-height: calc(100dvh - max(16px, 10dvh));
+    max-width: 95dvw;
+    margin-inline: auto;
+    height: auto;
+  }
+
+.navds-dialog__popup[data-position="bottom"][data-nested-dialog-open="true"] {
+      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+      transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - 0.02 * var(--__axc-nested-level)));
+    }
+
+.navds-dialog__popup[data-position="fullscreen"] {
+    --__ac-dialog-transform: scale(0.98);
+
+    border-radius: 0;
+    inset: 0;
+    max-height: 100dvh;
+    max-width: 100dvw;
+    width: 100%;
+    height: 100%;
+  }
+
+.navds-dialog__backdrop {
+  position: fixed;
+  min-height: 100dvh;
+  inset: 0;
+  background-color: var(--a-surface-backdrop);
+  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  z-index: 1000;
+
+  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
+}
+
+@supports (-webkit-touch-callout: none) {
+
+.navds-dialog__backdrop {
+    position: absolute;
+}
+  }
+
+.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style] {
+    opacity: 0.001;
+  }
+
+.navds-dialog__header {
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}
+
+.navds-dialog__title {
+  margin-block-end: var(--a-spacing-1);
+}
+
+.navds-dialog__close-button {
+  align-self: start;
+  float: right;
+}
+
+.navds-dialog__body {
+  overflow: auto;
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}
+
+.navds-dialog__header ~ .navds-dialog__body {
+    padding-block-start: 0;
+  }
+
+.navds-dialog__footer {
+  justify-content: flex-start;
+  display: flex;
+  flex-flow: wrap;
+  gap: var(--a-spacing-2);
+  padding-block: var(--__ac-dialog-p-b);
+  padding-inline: var(--__ac-dialog-p-i);
+}
+
 .navds-dropdown__menu {
   overflow: hidden;
   padding: var(--a-spacing-2) 0;