@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/dialog.css

@@ -1,261 +1,236 @@
-.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;
-  border: 1px solid var(--a-border-subtle);
-  z-index: 2000;
-  overflow: hidden;
-}
-
-.navds-dialog__popup:focus {
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
+
+@layer aksel.components.modules {
+  .aksel-dialog__popup {
+    --__axc-dialog-transform: ;
+    --__axc-dialog-p-b: var(--ax-space-16);
+    --__axc-dialog-p-i: var(--ax-space-20);
+    background-color: var(--ax-bg-raised);
+    border-radius: var(--ax-radius-12);
+    color: var(--ax-text-neutral);
+    box-shadow: var(--ax-shadow-dialog);
+    border: 1px solid var(--ax-border-neutral-subtleA);
+    z-index: 2000;
+    flex-direction: column;
+    transition: transform .2s cubic-bezier(.25, .46, .45, .94), opacity .2s cubic-bezier(.25, .46, .45, .94), translate .2s cubic-bezier(.25, .46, .45, .94);
+    display: flex;
+    position: fixed;
+    overflow: hidden;
+  }
+
+  .aksel-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);
+  .aksel-dialog__popup[data-size="small"] {
+    --__axc-dialog-p-b: var(--ax-space-12);
+    --__axc-dialog-p-i: var(--ax-space-16);
   }
 
-/* Needed to accommodate 400% zoom */
-
-@media (max-height: 400px) {
-
-.navds-dialog__popup {
-    overflow: auto;
-}
+  @media (max-height: 400px) {
+    .aksel-dialog__popup {
+      overflow: auto;
+    }
   }
 
-.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);
+  .aksel-dialog__popup[data-entering-style], .aksel-dialog__popup[data-exiting-style] {
+    opacity: .001;
+    transform: var(--__axc-dialog-transform);
   }
 
-.navds-dialog__popup[data-exiting-style] {
-    transition-duration: 100ms;
+  .aksel-dialog__popup[data-exiting-style] {
+    transition-duration: .1s;
   }
 
-.navds-dialog__popup[data-exiting-style]::after {
-      transition-timing-function: cubic-bezier(0.55, 0.09, 0.68, 0.53);
-    }
+  .aksel-dialog__popup[data-exiting-style]:after {
+    transition-timing-function: cubic-bezier(.55, .09, .68, .53);
+  }
 
-.navds-dialog__popup[data-nested-dialog-open="true"] {
+  .aksel-dialog__popup[data-nested-dialog-open="true"] {
     box-shadow: none;
   }
 
-.navds-dialog__popup[data-nested-dialog-open="true"]::after {
-      opacity: 0.9;
-    }
+  .aksel-dialog__popup[data-nested-dialog-open="true"]:after {
+    opacity: .9;
+  }
 
-.navds-dialog__popup::after {
-    transition: opacity 0ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  .aksel-dialog__popup:after {
     content: "";
-    inset: 0;
-    position: absolute;
     border-radius: inherit;
-    background-color: var(--a-surface-backdrop);
+    background-color: var(--ax-bg-overlay);
     opacity: 0;
     z-index: 1;
     pointer-events: none;
+    transition: opacity cubic-bezier(.25, .46, .45, .94);
+    position: absolute;
+    inset: 0;
   }
 
-.navds-dialog__popup[data-position="center"] {
-    --__ac-dialog-center-margin: 3rem;
-    --__ac-dialog-transform: scale(0.98);
-
-    left: 0;
-    right: 0;
+  .aksel-dialog__popup[data-position="center"] {
+    --__axc-dialog-center-margin: 3rem;
+    --__axc-dialog-transform: scale(.98);
+    max-width: calc(100dvw - 3rem);
+    max-height: calc(90dvh - var(--__axc-dialog-center-margin));
     margin-inline: auto;
+    margin-block: max(var(--__axc-dialog-center-margin), 10dvh) 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;
+    left: 0;
+    right: 0;
   }
 
-.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) {
+  .aksel-dialog__popup[data-position="center"][data-nested="true"][data-entering-style], .aksel-dialog__popup[data-position="center"][data-nested="true"][data-exiting-style] {
+    opacity: 1;
+    transition-duration: 0s;
+    transform: scale(1);
+  }
 
-.navds-dialog__popup[data-position="center"] {
-      --__ac-dialog-transform: translateY(35%);
+  .aksel-dialog__popup[data-position="center"][data-nested-dialog-open="true"] {
+    transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
+  }
 
-      max-height: calc(100dvh - max(16px, 10dvh));
+  @media (max-width: 768px) or (max-height: 479px) {
+    .aksel-dialog__popup[data-position="center"] {
+      --__axc-dialog-transform: translateY(35%);
+      border-bottom: 0;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
       max-width: 95dvw;
-      margin-inline: auto;
       height: auto;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      border-bottom: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-      top: auto;
+      max-height: calc(100dvh - max(16px, 10dvh));
       margin-block: 0;
-  }
+      margin-inline: auto;
+      inset: auto 0 0;
     }
+  }
 
-.navds-dialog__popup[data-position="right"],.navds-dialog__popup[data-position="left"] {
+  .aksel-dialog__popup[data-position="right"], .aksel-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%);
+  :is(.aksel-dialog__popup[data-position="right"], .aksel-dialog__popup[data-position="left"])[data-nested-dialog-open="true"]:after {
+    opacity: 1;
+    transition-duration: .1s;
+  }
 
+  .aksel-dialog__popup[data-position="right"] {
+    --__axc-dialog-transform: translateX(35%);
+    border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    border-right: 0;
     right: 0;
   }
 
-.navds-dialog__popup[data-position="left"] {
-    --__ac-dialog-transform: translateX(-35%);
-
+  .aksel-dialog__popup[data-position="left"] {
+    --__axc-dialog-transform: translateX(-35%);
+    border-left: 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    border-left: 0;
     left: 0;
   }
 
-.navds-dialog__popup[data-position="bottom"] {
-    --__ac-dialog-transform: translateY(35%);
-
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  .aksel-dialog__popup[data-position="bottom"] {
+    --__axc-dialog-transform: translateY(35%);
     border-bottom: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    max-height: calc(100dvh - max(16px, 10dvh));
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
     max-width: 95dvw;
-    margin-inline: auto;
     height: auto;
+    max-height: calc(100dvh - max(16px, 10dvh));
+    margin-inline: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 
-.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);
+  .aksel-dialog__popup[data-position="bottom"][data-nested-dialog-open="true"] {
+    transform: translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)));
+  }
 
-    border-radius: 0;
+  .aksel-dialog__popup[data-position="fullscreen"] {
+    --__axc-dialog-transform: scale(.98);
     border: 0;
-    inset: 0;
-    max-height: 100dvh;
-    max-width: 100dvw;
+    border-radius: 0;
     width: 100%;
+    max-width: 100dvw;
     height: 100%;
+    max-height: 100dvh;
+    inset: 0;
   }
 
-.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: 2000;
-
-  /* iOS 26+: Ensure the backdrop covers the entire visible viewport. */
-}
-
-@supports (-webkit-touch-callout: none) {
+  .aksel-dialog__backdrop {
+    background-color: var(--ax-bg-overlay);
+    z-index: 2000;
+    min-height: 100dvh;
+    transition: opacity .2s cubic-bezier(.25, .46, .45, .94);
+    position: fixed;
+    inset: 0;
+  }
 
-.navds-dialog__backdrop {
-    position: absolute;
-}
+  @supports (-webkit-touch-callout: none) {
+    .aksel-dialog__backdrop {
+      position: absolute;
+    }
   }
 
-.navds-dialog__backdrop[data-entering-style],.navds-dialog__backdrop[data-exiting-style] {
-    opacity: 0.001;
+  .aksel-dialog__backdrop[data-entering-style], .aksel-dialog__backdrop[data-exiting-style] {
+    opacity: .001;
   }
 
-.navds-dialog__header {
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-}
+  .aksel-dialog__header {
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+  }
 
-.navds-dialog__title {
-  margin-block-end: var(--a-spacing-1);
-}
+  .aksel-dialog__title {
+    margin-block-end: var(--ax-space-4);
+  }
 
-.navds-dialog__close-button {
-  align-self: start;
-  float: right;
-}
+  .aksel-dialog__close-button {
+    float: right;
+    align-self: start;
+  }
 
-.navds-dialog__body {
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
-  overflow: auto;
-  overscroll-behavior: contain;
-  position: relative; /* Needed to make sr-only elements position correctly - see Storybook */
-
-  background:
-    linear-gradient(var(--a-surface-default) 30%, transparent) top,
-    linear-gradient(transparent, var(--a-surface-default) 60%) bottom,
-    radial-gradient(farthest-side at 50% 0, rgba(0 0 0 / 0.3), transparent) top,
-    radial-gradient(farthest-side at 50% 100%, rgba(0 0 0 / 0.3), transparent) bottom;
-  background-size:
-    100% 40px,
-    100% 50px,
-    100% 16px,
-    100% 16px;
-  background-attachment: local, local, scroll, scroll;
-  background-repeat: no-repeat;
-
-  /* Needed to accommodate 400% zoom */
-}
+  .aksel-dialog__body {
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+    overscroll-behavior: contain;
+    position: relative;
+    overflow: auto;
+  }
 
-.navds-dialog__header ~ .navds-dialog__body {
+  .aksel-dialog__header ~ .aksel-dialog__body {
     padding-block-start: 0;
   }
 
-@media (max-height: 400px) {
+  .aksel-dialog__body {
+    background: linear-gradient(var(--ax-bg-raised) 30%, transparent) top, linear-gradient(transparent, var(--ax-bg-raised) 60%) bottom, radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent) top, radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent) bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 50px, 100% 16px, 100% 16px;
+    background-attachment: local, local, scroll, scroll;
+  }
 
-.navds-dialog__body {
-    overflow: unset;
-}
+  @media (max-height: 400px) {
+    .aksel-dialog__body {
+      overflow: unset;
+    }
+  }
+
+  .aksel-dialog__footer {
+    justify-content: flex-end;
+    gap: var(--ax-space-8);
+    padding-block: var(--__axc-dialog-p-b);
+    padding-inline: var(--__axc-dialog-p-i);
+    flex-flow: wrap;
+    display: flex;
   }
 
-.navds-dialog__footer {
-  justify-content: flex-end;
-  display: flex;
-  flex-flow: wrap;
-  gap: var(--a-spacing-2);
-  padding-block: var(--__ac-dialog-p-b);
-  padding-inline: var(--__ac-dialog-p-i);
+  @media (forced-colors: active) {
+    .aksel-dialog__popup {
+      outline: 2px solid var(--ax-border-neutral-strong) !important;
+    }
+  }
 }
+
+@layer aksel.layout;

package/dist/component/dialog.min.css

@@ -1 +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:1px solid var(--a-border-subtle);border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-xlarge);color:var(--a-text-default);display:flex;flex-direction:column;overflow:hidden;position:fixed;transition:.2s cubic-bezier(.25,.46,.45,.94);transition-property:transform,opacity,translate;z-index:2000}.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)}@media (max-height:400px){.navds-dialog__popup{overflow:auto}}.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:0;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-right: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-left:0;border-top-left-radius:0;left:0}.navds-dialog__popup[data-position=bottom]{--__ac-dialog-transform:translateY(35%);border-bottom:0;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:0;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:2000}@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{background:linear-gradient(var(--a-surface-default) 30%,#0000) top,linear-gradient(#0000,var(--a-surface-default) 60%) bottom,radial-gradient(farthest-side at 50% 0,#0000004d,#0000) top,radial-gradient(farthest-side at 50% 100%,#0000004d,#0000) bottom;background-attachment:local,local,scroll,scroll;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;overflow:auto;overscroll-behavior:contain;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i);position:relative}.navds-dialog__header~.navds-dialog__body{-webkit-padding-before:0;padding-block-start:0}@media (max-height:400px){.navds-dialog__body{overflow:unset}}.navds-dialog__footer{display:flex;flex-flow:wrap;gap:var(--a-spacing-2);justify-content:flex-end;padding-block:var(--__ac-dialog-p-b);padding-inline:var(--__ac-dialog-p-i)}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-dialog__popup{--__axc-dialog-transform: ;--__axc-dialog-p-b: var(--ax-space-16);--__axc-dialog-p-i: var(--ax-space-20);background-color:var(--ax-bg-raised);border-radius:var(--ax-radius-12);color:var(--ax-text-neutral);box-shadow:var(--ax-shadow-dialog);border:1px solid var(--ax-border-neutral-subtleA);z-index:2000;flex-direction:column;transition:transform .2s cubic-bezier(.25,.46,.45,.94),opacity .2s cubic-bezier(.25,.46,.45,.94),translate .2s cubic-bezier(.25,.46,.45,.94);display:flex;position:fixed;overflow:hidden}.aksel-dialog__popup:focus{outline:none}.aksel-dialog__popup[data-size=small]{--__axc-dialog-p-b: var(--ax-space-12);--__axc-dialog-p-i: var(--ax-space-16)}@media(max-height:400px){.aksel-dialog__popup{overflow:auto}}.aksel-dialog__popup[data-entering-style],.aksel-dialog__popup[data-exiting-style]{opacity:.001;transform:var(--__axc-dialog-transform)}.aksel-dialog__popup[data-exiting-style]{transition-duration:.1s}.aksel-dialog__popup[data-exiting-style]:after{transition-timing-function:cubic-bezier(.55,.09,.68,.53)}.aksel-dialog__popup[data-nested-dialog-open=true]{box-shadow:none}.aksel-dialog__popup[data-nested-dialog-open=true]:after{opacity:.9}.aksel-dialog__popup:after{content:"";border-radius:inherit;background-color:var(--ax-bg-overlay);opacity:0;z-index:1;pointer-events:none;transition:opacity cubic-bezier(.25,.46,.45,.94);position:absolute;inset:0}.aksel-dialog__popup[data-position=center]{--__axc-dialog-center-margin: 3rem;--__axc-dialog-transform: scale(.98);max-width:calc(100dvw - 3rem);max-height:calc(90dvh - var(--__axc-dialog-center-margin));margin-inline:auto;margin-block:max(var(--__axc-dialog-center-margin),10dvh) auto;top:0;left:0;right:0}.aksel-dialog__popup[data-position=center][data-nested=true][data-entering-style],.aksel-dialog__popup[data-position=center][data-nested=true][data-exiting-style]{opacity:1;transition-duration:0s;transform:scale(1)}.aksel-dialog__popup[data-position=center][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}@media(max-width:768px)or (max-height:479px){.aksel-dialog__popup[data-position=center]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-block:0;margin-inline:auto;inset:auto 0 0}}.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left]{max-width:calc(100vw - max(16px,10vw));top:0;bottom:0}:is(.aksel-dialog__popup[data-position=right],.aksel-dialog__popup[data-position=left])[data-nested-dialog-open=true]:after{opacity:1;transition-duration:.1s}.aksel-dialog__popup[data-position=right]{--__axc-dialog-transform: translateX(35%);border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;right:0}.aksel-dialog__popup[data-position=left]{--__axc-dialog-transform: translateX(-35%);border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;left:0}.aksel-dialog__popup[data-position=bottom]{--__axc-dialog-transform: translateY(35%);border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0;max-width:95dvw;height:auto;max-height:calc(100dvh - max(16px,10dvh));margin-inline:auto;bottom:0;left:0;right:0}.aksel-dialog__popup[data-position=bottom][data-nested-dialog-open=true]{transform:translateY(calc(1rem * var(--__axc-nested-level) * -1)) scale(calc(1 - .02 * var(--__axc-nested-level)))}.aksel-dialog__popup[data-position=fullscreen]{--__axc-dialog-transform: scale(.98);border:0;border-radius:0;width:100%;max-width:100dvw;height:100%;max-height:100dvh;inset:0}.aksel-dialog__backdrop{background-color:var(--ax-bg-overlay);z-index:2000;min-height:100dvh;transition:opacity .2s cubic-bezier(.25,.46,.45,.94);position:fixed;inset:0}@supports (-webkit-touch-callout: none){.aksel-dialog__backdrop{position:absolute}}.aksel-dialog__backdrop[data-entering-style],.aksel-dialog__backdrop[data-exiting-style]{opacity:.001}.aksel-dialog__header{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i)}.aksel-dialog__title{margin-block-end:var(--ax-space-4)}.aksel-dialog__close-button{float:right;align-self:start}.aksel-dialog__body{padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);overscroll-behavior:contain;position:relative;overflow:auto}.aksel-dialog__header~.aksel-dialog__body{padding-block-start:0}.aksel-dialog__body{background:linear-gradient(var(--ax-bg-raised) 30%,transparent) top,linear-gradient(transparent,var(--ax-bg-raised) 60%) bottom,radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.3),transparent) top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.3),transparent) bottom;background-repeat:no-repeat;background-size:100% 40px,100% 50px,100% 16px,100% 16px;background-attachment:local,local,scroll,scroll}@media(max-height:400px){.aksel-dialog__body{overflow:unset}}.aksel-dialog__footer{justify-content:flex-end;gap:var(--ax-space-8);padding-block:var(--__axc-dialog-p-b);padding-inline:var(--__axc-dialog-p-i);flex-flow:wrap;display:flex}@media(forced-colors:active){.aksel-dialog__popup{outline:2px solid var(--ax-border-neutral-strong)!important}}}@layer aksel.layout;

package/dist/component/dropdown.css

@@ -1,91 +1,86 @@
-.navds-dropdown__menu {
-  overflow: hidden;
-  padding: var(--a-spacing-2) 0;
-  color: var(--ac-dropdown-text, var(--a-text-default));
-  width: 27ch;
-  max-height: 616px;
-  overflow-y: auto;
-}
-
-.navds-dropdown__divider {
-  margin: var(--a-spacing-3) 0;
-  border: none;
-  border-bottom: 1px solid var(--a-border-divider);
-}
+@layer aksel.reset, aksel.theming, aksel.baseline, aksel.print, aksel.typography, aksel.components.core, aksel.components.core.loader, aksel.components.core.button, aksel.components.form;
 
-.navds-dropdown__menu > :not(.navds-dropdown__divider, .navds-dropdown__list) {
-  margin: 0 var(--a-spacing-4) var(--a-spacing-3);
-}
+@layer aksel.components.modules {
+  .aksel-dropdown__menu {
+    padding: var(--ax-space-8);
+    color: var(--ax-text-neutral);
+    width: 27ch;
+    max-height: 616px;
+    overflow: hidden auto;
+  }
 
-.navds-dropdown__list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
+  .aksel-dropdown__divider {
+    margin: var(--ax-space-12) 0;
+    border: none;
+    border-bottom: 1px solid var(--ax-border-neutral-subtle);
+  }
 
-.navds-dropdown__list-item {
-  margin: 0;
-}
+  .aksel-dropdown__menu > :not(.aksel-dropdown__divider, .aksel-dropdown__list) {
+    margin: 0 var(--ax-space-16) var(--ax-space-12);
+  }
 
-.navds-dropdown__list-heading {
-  margin: var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3);
-}
+  .aksel-dropdown__list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
 
-.navds-dropdown__item {
-  border: none;
-  margin: 0;
-  overflow: visible;
-  background: transparent;
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
-  font: inherit;
-  text-decoration: none;
-  text-align: left;
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-1) var(--a-spacing-4);
-}
+  .aksel-dropdown__list-item {
+    margin: 0;
+  }
 
-.navds-dropdown__item:hover {
-  background-color: var(--ac-dropdown-item-hover-bg, var(--a-surface-action-subtle-hover));
-  color: var(--ac-dropdown-item-hover-text, var(--a-text-action-hover));
-}
+  .aksel-dropdown__list-heading {
+    margin-block: var(--ax-space-4) var(--ax-space-12);
+    margin-inline: var(--ax-space-4);
+  }
 
-.navds-dropdown__item:active {
-  background-color: var(--ac-dropdown-item-active-bg, var(--a-surface-action-active));
-  color: var(--ac-dropdown-item-active-text, var(--a-text-on-action));
-}
+  .aksel-dropdown__item {
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    align-items: center;
+    gap: var(--ax-space-8);
+    width: 100%;
+    padding: var(--ax-space-4);
+    border-radius: var(--ax-radius-4);
+    color: var(--ax-text-neutral);
+    background: none;
+    border: none;
+    margin: 0;
+    text-decoration: none;
+    display: flex;
+    overflow: visible;
+  }
 
-.navds-dropdown__item:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
-  box-shadow: inset 0 0 0 2px var(--a-border-focus);
-}
+  .aksel-dropdown__item:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-dropdown__item:focus {
-    outline: 2px solid transparent;
-    outline-offset: -2px;
-    box-shadow: inset 0 0 0 2px var(--a-border-focus);
+  .aksel-dropdown__item:active {
+    background-color: var(--ax-bg-moderate-pressedA);
   }
-}
 
-.navds-dropdown__item:disabled {
-  color: var(--ac-dropdown-item-text, var(--a-text-action));
-  opacity: 0.3;
-  background: transparent;
-  cursor: not-allowed;
-}
+  .aksel-dropdown__item:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: -3px;
+  }
 
-@media (forced-colors: active) {
-  .navds-dropdown__item:hover {
-    color: highlight;
+  .aksel-dropdown__item:disabled {
+    opacity: var(--ax-opacity-disabled);
+    cursor: not-allowed;
+    background: none;
   }
 
-  .navds-dropdown__item:disabled {
-    opacity: 1;
-    color: graytext;
+  @media (forced-colors: active) {
+    .aksel-dropdown__item:hover {
+      color: highlight;
+    }
+
+    .aksel-dropdown__item:disabled {
+      opacity: 1;
+      color: graytext;
+    }
   }
 }
+
+@layer aksel.layout;

package/dist/component/dropdown.min.css

@@ -1 +1 @@
-.navds-dropdown__menu{color:var(--ac-dropdown-text,var(--a-text-default));max-height:616px;overflow:hidden;overflow-y:auto;padding:var(--a-spacing-2) 0;width:27ch}.navds-dropdown__divider{border:none;border-bottom:1px solid var(--a-border-divider);margin:var(--a-spacing-3) 0}.navds-dropdown__menu>:not(.navds-dropdown__divider,.navds-dropdown__list){margin:0 var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__list{list-style:none;margin:0;padding:0}.navds-dropdown__list-item{margin:0}.navds-dropdown__list-heading{margin:var(--a-spacing-1) var(--a-spacing-4) var(--a-spacing-3)}.navds-dropdown__item{align-items:center;background:#0000;border:none;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:pointer;display:flex;font:inherit;gap:var(--a-spacing-2);margin:0;overflow:visible;padding:var(--a-spacing-1) var(--a-spacing-4);text-align:left;text-decoration:none;width:100%}.navds-dropdown__item:hover{background-color:var(--ac-dropdown-item-hover-bg,var(--a-surface-action-subtle-hover));color:var(--ac-dropdown-item-hover-text,var(--a-text-action-hover))}.navds-dropdown__item:active{background-color:var(--ac-dropdown-item-active-bg,var(--a-surface-action-active));color:var(--ac-dropdown-item-active-text,var(--a-text-on-action))}.navds-dropdown__item:focus-visible{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000;outline-offset:-2px}@supports not selector(:focus-visible){.navds-dropdown__item:focus{box-shadow:inset 0 0 0 2px var(--a-border-focus);outline:2px solid #0000;outline-offset:-2px}}.navds-dropdown__item:disabled{background:#0000;color:var(--ac-dropdown-item-text,var(--a-text-action));cursor:not-allowed;opacity:.3}@media (forced-colors:active){.navds-dropdown__item:hover{color:highlight}.navds-dropdown__item:disabled{color:graytext;opacity:1}}
+@layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-dropdown__menu{padding:var(--ax-space-8);color:var(--ax-text-neutral);width:27ch;max-height:616px;overflow:hidden auto}.aksel-dropdown__divider{margin:var(--ax-space-12) 0;border:none;border-bottom:1px solid var(--ax-border-neutral-subtle)}.aksel-dropdown__menu>:not(.aksel-dropdown__divider,.aksel-dropdown__list){margin:0 var(--ax-space-16) var(--ax-space-12)}.aksel-dropdown__list{margin:0;padding:0;list-style:none}.aksel-dropdown__list-item{margin:0}.aksel-dropdown__list-heading{margin-block:var(--ax-space-4) var(--ax-space-12);margin-inline:var(--ax-space-4)}.aksel-dropdown__item{font:inherit;text-align:left;cursor:pointer;align-items:center;gap:var(--ax-space-8);width:100%;padding:var(--ax-space-4);border-radius:var(--ax-radius-4);color:var(--ax-text-neutral);background:none;border:none;margin:0;text-decoration:none;display:flex;overflow:visible}.aksel-dropdown__item:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-dropdown__item:active{background-color:var(--ax-bg-moderate-pressedA)}.aksel-dropdown__item:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:-3px}.aksel-dropdown__item:disabled{opacity:var(--ax-opacity-disabled);cursor:not-allowed;background:none}@media(forced-colors:active){.aksel-dropdown__item:hover{color:highlight}.aksel-dropdown__item:disabled{opacity:1;color:graytext}}}@layer aksel.layout;