@navikt/ds-css 7.40.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 8.0.0
+
+### Major Changes
+
+- New design with theming support - See https://aksel.nav.no/grunnleggende/endringslogg/versjon-8 for more info ([#4283](https://github.com/navikt/aksel/pull/4283))
+
 ## 7.40.0
 
 ## 7.39.1

package/config/{bundle.darkside.ts → bundle.ts}

@@ -12,14 +12,23 @@ import {
 } from "../config/_mappings";
 import packageJSON from "../package.json";
 
-bundleDarkside();
+bundle();
 
-async function bundleDarkside() {
-  const buildDir = path.join(__dirname, "..", "dist/darkside");
-  const darksideDir = path.join(__dirname, "..", "darkside");
+async function bundle() {
+  const srcDir = path.join(__dirname, "..", "src");
+  const distDir = path.join(__dirname, "..", "dist");
+
+  const indexFileContent = fs.readFileSync(`${srcDir}/index.css`, "utf8");
+  const layerDefinition = indexFileContent
+    .split("\n")
+    .find((line) => line.startsWith("@layer"));
+
+  if (!layerDefinition) {
+    throw new Error("No layer definition found in index.css. Stopped bundling");
+  }
 
   /* Make sure every dir is created to make node happy */
-  [buildDir, `${buildDir}/global`, `${buildDir}/component`].forEach((dir) => {
+  [distDir, `${distDir}/global`, `${distDir}/component`].forEach((dir) => {
     if (!fs.existsSync(dir)) {
       fs.mkdirSync(dir, { recursive: true });
     }
@@ -32,7 +41,7 @@ async function bundleDarkside() {
    */
   async function bundleCSS(rootParser?: (rootFile: string) => string) {
     const { code } = await bundleAsync({
-      filename: `${darksideDir}/index.css`,
+      filename: `${srcDir}/index.css`,
       minify: false,
       include:
         Features.Nesting | Features.MediaRangeSyntax | Features.HexAlphaColors,
@@ -46,7 +55,7 @@ async function bundleDarkside() {
       resolver: {
         read(filePath) {
           const file = fs.readFileSync(filePath, "utf8");
-          if (filePath === `${darksideDir}/index.css` && rootParser) {
+          if (filePath === `${srcDir}/index.css` && rootParser) {
             return rootParser(file);
           }
 
@@ -76,7 +85,7 @@ async function bundleDarkside() {
    * @param filePath: Path to the file in the build directory
    */
   function writeFile({ file, filePath }: { file: string; filePath: string }) {
-    const buildPath = `${buildDir}/${filePath}`;
+    const buildPath = `${distDir}/${filePath}`;
     fs.writeFileSync(buildPath, file);
 
     /**
@@ -117,23 +126,12 @@ async function bundleDarkside() {
       .filter((line) => {
         /* We assume that all components is added under the layer components or layout */
         return (
-          line.endsWith("layer(aksel.components);") ||
-          line.endsWith("layer(aksel.layout);")
+          line.includes("layer(aksel.components") ||
+          line.includes("layer(aksel.layout")
         );
       })
       .join("\n");
 
-    /* If one imports this file standalone, we would like to make sure the layering order is included.  */
-    const layerDefinition = rootString
-      .split("\n")
-      .find((line) => line.startsWith("@layer"));
-
-    if (!layerDefinition) {
-      throw new Error(
-        "No layer definition found in index.css. Stopped bundling",
-      );
-    }
-
     parsed = layerDefinition + "\n" + parsed;
 
     return parsed;
@@ -149,13 +147,12 @@ async function bundleDarkside() {
   /* ------------------------------ /global build ----------------------------- */
   for (const style of StyleMappings.baseline) {
     function parser(input: string) {
-      return input
+      const parsed = input
         .split("\n")
         .filter((line) => line.startsWith("@import"))
-        .filter((line) =>
-          line.replace(".darkside.css", ".css").includes(style.main),
-        )
+        .filter((line) => line.includes(style.main))
         .join("\n");
+      return layerDefinition + "\n" + parsed;
     }
 
     await bundleCSS(parser).then((file) => {
@@ -168,11 +165,12 @@ async function bundleDarkside() {
 
   /* ------------------------------ form build ----------------------------- */
   function rootFormParser(input: string) {
-    return input
+    const parsed = input
       .split("\n")
       .filter((line) => line.startsWith("@import"))
       .filter((line) => line.includes("form/index.css"))
       .join("\n");
+    return layerDefinition + "\n" + parsed;
   }
 
   await bundleCSS(rootFormParser).then((file) => {
@@ -184,11 +182,12 @@ async function bundleDarkside() {
 
   /* ------------------------------ Primitives build ----------------------------- */
   function rootPrimitivesParser(input: string) {
-    return input
+    const parsed = input
       .split("\n")
       .filter((line) => line.startsWith("@import"))
       .filter((line) => line.includes("primitives/index.css"))
       .join("\n");
+    return layerDefinition + "\n" + parsed;
   }
 
   await bundleCSS(rootPrimitivesParser).then((file) => {
@@ -201,7 +200,7 @@ async function bundleDarkside() {
   /* ---------------------------- /component build ---------------------------- */
 
   function componentFiles(): string[] {
-    const indexFile = fs.readFileSync(`${darksideDir}/index.css`, "utf8");
+    const indexFile = indexFileContent;
 
     /* Since forms and primitives is under the same layers, but diffferent files we filter them out to avoid duplicates */
     const formLine = rootFormParser(indexFile);
@@ -212,15 +211,16 @@ async function bundleDarkside() {
       .filter((line) => line.startsWith("@import"))
       .filter((line) => !formLine.includes(line))
       .filter((line) => !primitivesLine.includes(line))
-      .filter((line) => line.endsWith("layer(aksel.components);"));
+      .filter((line) => line.includes("layer(aksel.components"));
   }
 
   for (const componentLine of componentFiles()) {
     function parser(input: string) {
-      return input
+      const parsed = input
         .split("\n")
         .filter((line) => line === componentLine)
         .join("\n");
+      return layerDefinition + "\n" + parsed;
     }
 
     await bundleCSS(parser).then((file) => {
@@ -230,8 +230,7 @@ async function bundleDarkside() {
         /* Replaces every " with nothing */
         .replace(/"/gm, "")
         /* Removes start of import-string */
-        .replace("./", "")
-        .replace(".darkside.css", ".css");
+        .replace("./", "");
 
       if (!componentName) {
         throw new Error(
@@ -257,15 +256,22 @@ async function bundleDarkside() {
 
   const version = packageJSON.version;
 
-  const files = fastglob.sync("**/*.css", {
-    cwd: buildDir,
+  /**
+   * We only publish
+   * - index.css
+   * - index.min.css
+   *
+   * to CDNs with versioning
+   */
+  const files = fastglob.sync("**/index*.css", {
+    cwd: distDir,
     ignore: ["**/version/**"],
   });
 
   for (const file of files) {
-    const css = fs.readFileSync(`${buildDir}/${file}`, "utf-8");
+    const css = fs.readFileSync(`${distDir}/${file}`, "utf-8");
 
-    const filename = `${buildDir}/version/${version}/${file}`;
+    const filename = `${distDir}/version/${version}/${file}`;
     fs.mkdirSync(path.dirname(filename), { recursive: true });
 
     fs.writeFileSync(filename, css);

package/dist/component/accordion.css

@@ -1,202 +1,168 @@
-.navds-accordion {
-  --__ac-accordion-header-shadow-color: var(--ac-accordion-header-border, var(--a-border-divider));
-}
-
-/*************************
- * Header *
- *************************/
-
-.navds-accordion__header {
-  --__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);
-
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: var(--a-spacing-2);
-  padding: var(--a-spacing-3);
-  margin: 0;
-  text-align: left;
-  background: var(--ac-accordion-header-bg, var(--a-surface-transparent));
-  cursor: pointer;
-  border: none;
-  position: relative;
-  box-shadow: var(--__ac-accordion-header-shadow);
-  z-index: 1;
-}
-
-.navds-accordion__header:hover {
-  background-color: var(--ac-accordion-header-bg-hover, var(--a-surface-hover));
-  text-decoration: underline;
-  color: var(--ac-accordion-header-text-hover, inherit);
-}
-
-.navds-accordion--small .navds-accordion__header {
-  padding: var(--a-spacing-2) var(--a-spacing-3);
-}
-
-.navds-accordion--medium .navds-accordion__header {
-  padding: var(--a-spacing-3);
-}
-
-.navds-accordion--large .navds-accordion__header {
-  padding: var(--a-spacing-4) var(--a-spacing-3);
-}
-
-.navds-accordion__item:last-child > :where(.navds-accordion__header) {
-  box-shadow:
-    var(--__ac-accordion-header-shadow),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
-
-.navds-accordion__item:last-child:where(.navds-accordion__item--open) {
-  box-shadow:
-    inset 2px 0 0 0 var(--a-transparent),
-    inset -2px 0 0 0 var(--a-transparent),
-    inset 0 2px 0 0 var(--a-transparent),
-    inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color);
-}
+@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-accordion__header {
+    justify-content: flex-start;
+    align-items: flex-start;
+    gap: var(--ax-space-12);
+    width: 100%;
+    padding: var(--ax-space-12);
+    text-align: left;
+    cursor: pointer;
+    border-radius: var(--ax-radius-8);
+    color: var(--ax-text-subtle);
+    background: none;
+    border: none;
+    display: flex;
+    position: relative;
+  }
 
-.navds-accordion__item--open > :where(.navds-accordion__header) {
-  box-shadow: var(--__ac-accordion-header-shadow);
-}
+  .aksel-accordion__header > * {
+    font-weight: var(--ax-font-weight-regular);
+  }
 
-.navds-accordion__header:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 3px;
-  box-shadow: var(--a-shadow-focus);
-  border-radius: var(--a-border-radius-large);
-}
+  @media (forced-colors: active) {
+    .aksel-accordion__header {
+      color: canvastext;
+      background-color: canvas;
+      border: 1px solid buttonborder;
+    }
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-accordion__header:focus {
-    outline: none;
-    box-shadow: var(--a-shadow-focus);
-    border-radius: var(--a-border-radius-large);
+  .aksel-accordion__header:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
   }
-}
 
-.navds-accordion__header-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+  .aksel-accordion__header:hover:before, .aksel-accordion__header:hover:after {
+    display: none;
+  }
 
-/*************************
- * Icon *
- *************************/
-
-.navds-accordion__icon-wrapper {
-  display: grid;
-  place-content: center;
-  border-radius: var(--a-border-radius-medium);
-  height: var(--a-spacing-6);
-  width: var(--a-spacing-6);
-  align-self: center;
-}
+  .aksel-accordion__header:hover > .aksel-accordion__icon-wrapper {
+    background-color: var(--ax-bg-strong-hover);
+    color: var(--ax-text-contrast);
+  }
 
-.navds-accordion__header:hover > .navds-accordion__icon-wrapper {
-  background-color: var(--ac-accordion-header-icon-bg-hover, var(--a-surface-neutral-subtle-hover));
-}
+  @media (forced-colors: active) {
+    .aksel-accordion__header:hover {
+      color: highlight;
+      background-color: canvas;
+      border: 1px solid highlight;
+    }
+  }
 
-.navds-accordion__header-chevron {
-  border-radius: var(--a-border-radius-medium);
-  font-size: 1.5rem;
-  height: 1.75rem;
-  flex-shrink: 0;
-  transition: transform 150ms ease-in-out;
-  align-self: center;
-}
+  .aksel-accordion__header:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+    outline-offset: 3px;
+    z-index: 1;
+  }
 
-:where(.navds-accordion__header):hover > :where(.navds-accordion__icon-wrapper) > :where(.navds-accordion__header-chevron) {
-  transform: translateY(1px);
-}
+  .aksel-accordion__header:focus-visible:before, .aksel-accordion__header:focus-visible:after {
+    display: none;
+  }
 
-.navds-accordion__item--open
-  > :where(.navds-accordion__header)
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(0) rotate(-180deg);
-}
+  .aksel-accordion--small .aksel-accordion__header {
+    padding-block: var(--ax-space-8);
+  }
 
-.navds-accordion__item--open
-  > :where(.navds-accordion__header):hover
-  > :where(.navds-accordion__icon-wrapper)
-  > :where(.navds-accordion__header-chevron) {
-  transform: translateY(-1px) rotate(-180deg);
-}
+  .aksel-accordion__header:before, .aksel-accordion__header:after {
+    content: "";
+    background-color: var(--ax-border-neutral-subtleA);
+    width: 100%;
+    height: 1px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
 
-/*************************
- * Variant/Default *
- *************************/
+  .aksel-accordion__header:after {
+    top: initial;
+    bottom: 0;
+  }
 
-.navds-accordion__item--open {
-  background-color: var(--ac-accordion-item-bg-open, var(--a-transparent));
-}
+  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header:after, .aksel-accordion__item:not(:last-child) > .aksel-accordion__header:after {
+    display: none;
+  }
 
-/*************************
- * Variant/Neutral *
- *************************/
+  .aksel-accordion__item[data-expanded="false"]:has(.aksel-accordion__header:where(:hover, :focus-visible)) + .aksel-accordion__item > .aksel-accordion__header:before {
+    display: none;
+  }
 
-.navds-accordion__item--open.navds-accordion__item--neutral {
-  background-color: var(--ac-accordion-neutral-item-bg-open, var(--a-surface-neutral-subtle));
-}
+  .aksel-accordion__icon-wrapper {
+    border-radius: var(--ax-radius-8);
+    background-color: var(--ax-bg-moderateA);
+    width: 22px;
+    height: 22px;
+    color: var(--ax-text-subtle);
+    align-self: center;
+  }
 
-/*************************
- * Content *
- *************************/
+  .aksel-accordion__header-chevron {
+    height: inherit;
+    width: inherit;
+    flex-shrink: 0;
+    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
+  }
 
-.navds-accordion__content {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5);
-  animation: fadeAccordionContent 250ms ease;
-}
+  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__header .aksel-accordion__header-chevron {
+    transform: rotateX(-180deg);
+  }
 
-.navds-accordion--indent > :where(.navds-accordion__item) > :where(.navds-accordion__content) {
-  padding: var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11);
-}
+  .aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
+    padding-block: var(--ax-space-8);
+    padding-inline: calc(var(--ax-space-20)  + 2px) var(--ax-space-20);
+  }
 
-.navds-accordion__content--closed {
-  display: none;
-}
+  @media (forced-colors: active) {
+    .aksel-accordion--indent > .aksel-accordion__item .aksel-accordion__content-inner {
+      border-left: 1px solid canvastext;
+    }
+  }
 
-.navds-accordion__item--no-animation :where(.navds-accordion__content) {
-  animation: none;
-}
+  .aksel-accordion--indent > .aksel-accordion__item > .aksel-accordion__content {
+    box-shadow: -2px 0 0 0 var(--ax-border-neutral-subtleA);
+  }
 
-@keyframes fadeAccordionContent {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
+  .aksel-accordion__item > .aksel-accordion__content {
+    visibility: hidden;
+    margin-inline: var(--ax-space-24) var(--ax-space-12);
+    opacity: 0;
+    border-color: rgba(0, 0, 0, 0);
+    grid-template-rows: 0fr;
+    margin-block: 0;
+    transition-property: visibility, opacity, grid-template-rows, margin, min-height;
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+    overflow: hidden;
   }
 
-  40% {
-    opacity: 0.7;
+  .aksel-accordion__item > .aksel-accordion__content .aksel-accordion__content-inner {
+    min-height: 0;
+    padding-block: 0;
   }
 
-  100% {
+  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__content {
+    visibility: visible;
+    margin-block: var(--ax-space-8);
+    border-color: var(--ax-border-neutral-subtleA);
     opacity: 1;
-    transform: translateY(0);
+    grid-template-rows: 1fr;
+    margin-block-end: var(--ax-space-24);
   }
-}
 
-@media (forced-colors: active) {
-  .navds-accordion__header {
-    border: 1px solid buttonborder;
-    background-color: canvas;
-    color: canvastext;
+  .aksel-accordion__item[data-expanded="true"] > .aksel-accordion__content .aksel-accordion__content-inner {
+    min-height: fit-content;
   }
 
-  .navds-accordion__header:hover {
-    background-color: canvas;
-    border: 1px solid highlight;
-    color: highlight;
+  .aksel-accordion__item[data-expanded="true"]:last-child {
+    border-bottom: 1px solid var(--ax-border-neutral-subtleA);
+  }
+
+  .aksel-accordion__item--no-animation > .aksel-accordion__content {
+    transition: none;
   }
 }
+
+@layer aksel.layout;

package/dist/component/accordion.min.css

@@ -1 +1 @@
-.navds-accordion{--__ac-accordion-header-shadow-color:var(--ac-accordion-header-border,var(--a-border-divider))}.navds-accordion__header{--__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);align-items:flex-start;background:var(--ac-accordion-header-bg,var(--a-surface-transparent));border:none;box-shadow:var(--__ac-accordion-header-shadow);cursor:pointer;display:flex;gap:var(--a-spacing-2);justify-content:flex-start;margin:0;padding:var(--a-spacing-3);position:relative;text-align:left;width:100%;z-index:1}.navds-accordion__header:hover{background-color:var(--ac-accordion-header-bg-hover,var(--a-surface-hover));color:var(--ac-accordion-header-text-hover,inherit);text-decoration:underline}.navds-accordion--small .navds-accordion__header{padding:var(--a-spacing-2) var(--a-spacing-3)}.navds-accordion--medium .navds-accordion__header{padding:var(--a-spacing-3)}.navds-accordion--large .navds-accordion__header{padding:var(--a-spacing-4) var(--a-spacing-3)}.navds-accordion__item:last-child>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open) :where(.navds-accordion__header){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item:last-child:where(.navds-accordion__item--open){box-shadow:inset 2px 0 0 0 var(--a-transparent),inset -2px 0 0 0 var(--a-transparent),inset 0 2px 0 0 var(--a-transparent),inset 0 -2px 0 0 var(--__ac-accordion-header-shadow-color)}.navds-accordion__item--open>:where(.navds-accordion__header){box-shadow:var(--__ac-accordion-header-shadow)}.navds-accordion__header:focus-visible{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:2px solid #0000;outline-offset:3px}@supports not selector(:focus-visible){.navds-accordion__header:focus{border-radius:var(--a-border-radius-large);box-shadow:var(--a-shadow-focus);outline:none}}.navds-accordion__header-content{overflow:hidden;text-overflow:ellipsis}.navds-accordion__icon-wrapper{align-self:center;border-radius:var(--a-border-radius-medium);display:grid;height:var(--a-spacing-6);place-content:center;width:var(--a-spacing-6)}.navds-accordion__header:hover>.navds-accordion__icon-wrapper{background-color:var(--ac-accordion-header-icon-bg-hover,var(--a-surface-neutral-subtle-hover))}.navds-accordion__header-chevron{align-self:center;border-radius:var(--a-border-radius-medium);flex-shrink:0;font-size:1.5rem;height:1.75rem;transition:transform .15s ease-in-out}:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){transform:translateY(1px)}.navds-accordion__item--open>:where(.navds-accordion__header)>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){transform:translateY(0) rotate(-180deg)}.navds-accordion__item--open>:where(.navds-accordion__header):hover>:where(.navds-accordion__icon-wrapper)>:where(.navds-accordion__header-chevron){transform:translateY(-1px) rotate(-180deg)}.navds-accordion__item--open{background-color:var(--ac-accordion-item-bg-open,var(--a-transparent))}.navds-accordion__item--open.navds-accordion__item--neutral{background-color:var(--ac-accordion-neutral-item-bg-open,var(--a-surface-neutral-subtle))}.navds-accordion__content{animation:fadeAccordionContent .25s ease;padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5)}.navds-accordion--indent>:where(.navds-accordion__item)>:where(.navds-accordion__content){padding:var(--a-spacing-1) var(--a-spacing-3) var(--a-spacing-5) var(--a-spacing-11)}.navds-accordion__content--closed{display:none}.navds-accordion__item--no-animation :where(.navds-accordion__content){animation:none}@keyframes fadeAccordionContent{0%{opacity:.25;transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;transform:translateY(0)}}@media (forced-colors:active){.navds-accordion__header{background-color:canvas;border:1px solid buttonborder;color:initial}.navds-accordion__header:hover{background-color:canvas;border:1px solid highlight;color:highlight}}
+@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-accordion__header{justify-content:flex-start;align-items:flex-start;gap:var(--ax-space-12);width:100%;padding:var(--ax-space-12);text-align:left;cursor:pointer;border-radius:var(--ax-radius-8);color:var(--ax-text-subtle);background:none;border:none;display:flex;position:relative}.aksel-accordion__header>*{font-weight:var(--ax-font-weight-regular)}@media(forced-colors:active){.aksel-accordion__header{color:canvastext;background-color:canvas;border:1px solid buttonborder}}.aksel-accordion__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-accordion__header:hover:before,.aksel-accordion__header:hover:after{display:none}.aksel-accordion__header:hover>.aksel-accordion__icon-wrapper{background-color:var(--ax-bg-strong-hover);color:var(--ax-text-contrast)}@media(forced-colors:active){.aksel-accordion__header:hover{color:highlight;background-color:canvas;border:1px solid highlight}}.aksel-accordion__header:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-accordion__header:focus-visible:before,.aksel-accordion__header:focus-visible:after{display:none}.aksel-accordion--small .aksel-accordion__header{padding-block:var(--ax-space-8)}.aksel-accordion__header:before,.aksel-accordion__header:after{content:"";background-color:var(--ax-border-neutral-subtleA);width:100%;height:1px;display:block;position:absolute;top:0;left:0;right:0}.aksel-accordion__header:after{top:initial;bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header:after,.aksel-accordion__item:not(:last-child)>.aksel-accordion__header:after{display:none}.aksel-accordion__item[data-expanded=false]:has(.aksel-accordion__header:where(:hover,:focus-visible))+.aksel-accordion__item>.aksel-accordion__header:before{display:none}.aksel-accordion__icon-wrapper{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-moderateA);width:22px;height:22px;color:var(--ax-text-subtle);align-self:center}.aksel-accordion__header-chevron{height:inherit;width:inherit;flex-shrink:0;transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header .aksel-accordion__header-chevron{transform:rotateX(-180deg)}.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{padding-block:var(--ax-space-8);padding-inline:calc(var(--ax-space-20) + 2px) var(--ax-space-20)}@media(forced-colors:active){.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{border-left:1px solid canvastext}}.aksel-accordion--indent>.aksel-accordion__item>.aksel-accordion__content{box-shadow:-2px 0 0 0 var(--ax-border-neutral-subtleA)}.aksel-accordion__item>.aksel-accordion__content{visibility:hidden;margin-inline:var(--ax-space-24) var(--ax-space-12);opacity:0;border-color:#0000;grid-template-rows:0fr;margin-block:0;transition-property:visibility,opacity,grid-template-rows,margin,min-height;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-accordion__item>.aksel-accordion__content .aksel-accordion__content-inner{min-height:0;padding-block:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content{visibility:visible;margin-block:var(--ax-space-8);border-color:var(--ax-border-neutral-subtleA);opacity:1;grid-template-rows:1fr;margin-block-end:var(--ax-space-24)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content .aksel-accordion__content-inner{min-height:fit-content}.aksel-accordion__item[data-expanded=true]:last-child{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-accordion__item--no-animation>.aksel-accordion__content{transition:none}}@layer aksel.layout;