@navikt/ds-css 7.33.5 → 7.34.0

package/dist/darkside/component/alert.css

@@ -72,4 +72,99 @@
   .aksel-alert--close-button.aksel-alert--small > .aksel-alert__wrapper, .aksel-alert--close-button.aksel-alert--small > .aksel-alert__icon {
     margin-block-start: var(--ax-space-4);
   }
+
+  .aksel-base-alert {
+    border-radius: var(--ax-radius-12);
+    --__axc-base-alert-pi: var(--ax-space-20);
+    --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
+    --__axc-base-alert-title-pb: var(--ax-space-2);
+    --__axc-base-alert-header-max-width: 37.5rem;
+    height: fit-content;
+    display: grid;
+    overflow: clip;
+  }
+
+  .aksel-base-alert[data-size="small"] {
+    --__axc-base-alert-pi: var(--ax-space-16);
+    --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
+    --__axc-base-alert-title-pb: var(--ax-space-4);
+  }
+
+  .aksel-base-alert[data-variant="moderate"] {
+    outline: 1px solid var(--ax-border-default);
+    outline-offset: -1px;
+  }
+
+  .aksel-base-alert[data-variant="strong"] {
+    outline: 4px solid var(--ax-border-default);
+    outline-offset: -4px;
+  }
+
+  .aksel-base-alert[data-variant="strong"][data-color="neutral"] {
+    outline-color: var(--ax-border-strong);
+  }
+
+  .aksel-base-alert[data-global="true"] {
+    border-radius: 0;
+  }
+
+  .aksel-base-alert__header {
+    align-items: flex-start;
+    gap: var(--ax-space-8);
+    padding: var(--ax-space-8) var(--__axc-base-alert-pi);
+    border-bottom: 1px solid;
+    display: flex;
+  }
+
+  .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+
+  .aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-subtleA);
+  }
+
+  .aksel-base-alert[data-variant="strong"] .aksel-base-alert__header {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
+    border-bottom: none;
+  }
+
+  .aksel-base-alert__header:only-child {
+    border-bottom: none;
+  }
+
+  .aksel-base-alert__icon {
+    margin-top: var(--ax-space-4);
+    font-size: 1.5rem;
+    display: grid;
+  }
+
+  .aksel-base-alert__title {
+    padding-block: var(--__axc-base-alert-title-pb);
+  }
+
+  .aksel-base-alert__content {
+    padding: var(--__axc-base-alert-content-p);
+    background-color: var(--ax-bg-default);
+  }
+
+  .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+
+  .aksel-base-alert__close-button {
+    z-index: 1;
+    margin-left: auto;
+  }
+
+  .aksel-base-alert__close-button:focus-visible {
+    outline-color: var(--ax-bg-default);
+  }
+
+  .aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button {
+    color: var(--ax-text-neutral-contrast);
+  }
 }

package/dist/darkside/component/alert.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}}
+@layer aksel.components{.aksel-alert{border-radius:var(--ax-radius-12);padding:var(--ax-space-16) var(--ax-space-20);gap:var(--ax-space-12);border:1px solid;border-color:var(--ax-border-default);background-color:var(--ax-bg-moderate);align-items:center;display:flex}.aksel-alert>.aksel-alert__icon{color:var(--ax-text-decoration)}@media(forced-colors:active){.aksel-alert{color:canvastext;background-color:canvas;border:1px solid canvastext}}.aksel-alert__wrapper--maxwidth{max-width:43.5rem}.aksel-alert__icon{height:var(--ax-font-line-height-xlarge);flex-shrink:0;align-self:flex-start;font-size:1.5rem}.aksel-alert--small{padding:var(--ax-space-12) var(--ax-space-16);gap:var(--ax-space-8)}.aksel-alert--small>.aksel-alert__icon{height:var(--ax-font-line-height-large);margin-block-start:0}.aksel-alert--full-width{border-radius:0}.aksel-alert--inline{background-color:#0000;border:none;padding:0}.aksel-alert__button-wrapper{flex-flow:row;flex:1;justify-content:flex-end;align-self:flex-start;display:flex}.aksel-alert--close-button>.aksel-alert__wrapper,.aksel-alert--close-button>.aksel-alert__icon{margin-block-start:var(--ax-space-2)}.aksel-alert--close-button.aksel-alert--small{align-items:flex-start}.aksel-alert--close-button.aksel-alert--small>.aksel-alert__wrapper,.aksel-alert--close-button.aksel-alert--small>.aksel-alert__icon{margin-block-start:var(--ax-space-4)}.aksel-base-alert{border-radius:var(--ax-radius-12);--__axc-base-alert-pi: var(--ax-space-20);--__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);--__axc-base-alert-title-pb: var(--ax-space-2);--__axc-base-alert-header-max-width: 37.5rem;height:fit-content;display:grid;overflow:clip}.aksel-base-alert[data-size=small]{--__axc-base-alert-pi: var(--ax-space-16);--__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);--__axc-base-alert-title-pb: var(--ax-space-4)}.aksel-base-alert[data-variant=moderate]{outline:1px solid var(--ax-border-default);outline-offset:-1px}.aksel-base-alert[data-variant=strong]{outline:4px solid var(--ax-border-default);outline-offset:-4px}.aksel-base-alert[data-variant=strong][data-color=neutral]{outline-color:var(--ax-border-strong)}.aksel-base-alert[data-global=true]{border-radius:0}.aksel-base-alert__header{align-items:flex-start;gap:var(--ax-space-8);padding:var(--ax-space-8) var(--__axc-base-alert-pi);border-bottom:1px solid;display:flex}.aksel-base-alert[data-global=true] .aksel-base-alert__header{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert[data-variant=moderate] .aksel-base-alert__header{background:var(--ax-bg-moderate);color:var(--ax-text-default);border-color:var(--ax-border-subtleA)}.aksel-base-alert[data-variant=strong] .aksel-base-alert__header{background:var(--ax-bg-strong);color:var(--ax-text-contrast);border-bottom:none}.aksel-base-alert__header:only-child{border-bottom:none}.aksel-base-alert__icon{margin-top:var(--ax-space-4);font-size:1.5rem;display:grid}.aksel-base-alert__title{padding-block:var(--__axc-base-alert-title-pb)}.aksel-base-alert__content{padding:var(--__axc-base-alert-content-p);background-color:var(--ax-bg-default)}.aksel-base-alert[data-global=true] .aksel-base-alert__content{padding-inline:max(var(--__axc-base-alert-pi),calc((100% - var(--__axc-base-alert-header-max-width)) / 2))}.aksel-base-alert__close-button{z-index:1;margin-left:auto}.aksel-base-alert__close-button:focus-visible{outline-color:var(--ax-bg-default)}.aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button{color:var(--ax-text-neutral-contrast)}}

package/dist/darkside/component/inlinemessage.css

@@ -0,0 +1,17 @@
+@layer aksel.components {
+  .aksel-inline-message {
+    gap: var(--ax-space-4);
+    color: var(--ax-text-default);
+    display: flex;
+  }
+
+  .aksel-inline-message__icon {
+    color: var(--ax-text-subtle);
+    flex: none;
+    font-size: 1.5rem;
+  }
+
+  .aksel-inline-message[data-size="small"] .aksel-inline-message__icon {
+    font-size: 1.25rem;
+  }
+}

package/dist/darkside/component/inlinemessage.min.css

@@ -0,0 +1 @@
+@layer aksel.components{.aksel-inline-message{gap:var(--ax-space-4);color:var(--ax-text-default);display:flex}.aksel-inline-message__icon{color:var(--ax-text-subtle);flex:none;font-size:1.5rem}.aksel-inline-message[data-size=small] .aksel-inline-message__icon{font-size:1.25rem}}

package/dist/darkside/component/stepper.css

@@ -28,7 +28,7 @@
     justify-self: center;
   }
 
-  .aksel-stepper__item--non-interactive .aksel-stepper__line {
+  .aksel-stepper__item[data-interactive="false"] .aksel-stepper__line {
     background-color: var(--ax-border-neutral-strong);
   }
 

package/dist/darkside/component/stepper.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-stepper{--__axc-stepper-circle-size: 2rem;--__axc-stepper-border-width: 2px;--__axc-stepper-line-length: 1rem;color:var(--ax-text-subtle);font-weight:var(--ax-font-weight-bold);margin:0;padding-left:0;line-height:1;list-style:none}.aksel-stepper__item{grid-template-rows:[line-1] auto [step-start] var(--__axc-stepper-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-stepper-circle-size) auto;justify-items:flex-start;gap:var(--ax-space-8);display:grid}.aksel-stepper__line{background-color:var(--ax-border-default);width:var(--__axc-stepper-border-width);height:100%;min-height:var(--__axc-stepper-line-length);grid-column:1;justify-self:center}.aksel-stepper__item--non-interactive .aksel-stepper__line{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__item:has(+.aksel-stepper__item>.aksel-stepper__step[data-interactive=false]) .aksel-stepper__line--2{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__line--1{grid-row:line-1;display:none}.aksel-stepper__line--2{grid-row:line-2}.aksel-stepper__item:last-of-type .aksel-stepper__line--2{display:none}.aksel-stepper__step{grid-area:2 / 1 / -1 / -1;grid-template-columns:[circle] var(--__axc-stepper-circle-size) [content] auto;gap:var(--ax-space-8);cursor:pointer;padding:var(--__axc-stepper-border-width);margin:calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1) var(--__axc-stepper-circle-size);justify-content:flex-start;width:100%;display:grid}.aksel-stepper__step:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;isolation:isolate}.aksel-stepper__item:last-child .aksel-stepper__step{margin-bottom:0}.aksel-stepper__step:is(button){appearance:none;font:inherit;color:inherit;text-align:inherit;background-color:#0000;border:none}.aksel-stepper__circle{width:var(--__axc-stepper-circle-size);height:var(--__axc-stepper-circle-size);border:var(--__axc-stepper-border-width) solid currentColor;border-radius:var(--ax-radius-full);grid-column:circle;place-content:center;place-items:center;line-height:1;display:inline-grid}.aksel-stepper__circle--success{font-size:calc(var(--__axc-stepper-circle-size) * .75);background:none}.aksel-stepper__step[data-interactive=true]{color:var(--ax-text-subtle);border-radius:var(--ax-radius-4);text-decoration:none}.aksel-stepper__step[data-interactive=true] .aksel-stepper__content{text-underline-offset:.1em;text-decoration:underline;text-decoration-thickness:.05em}:is(.aksel-stepper__step[data-interactive=true]:hover,.aksel-stepper__step[data-interactive=true]:active) .aksel-stepper__content{text-decoration-thickness:.111em}.aksel-stepper__step[data-interactive=true] .aksel-stepper__circle{color:var(--ax-text-subtle);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__content{text-decoration:none}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__circle{color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed);border-color:var(--ax-bg-strong-pressed)}.aksel-stepper__step[data-interactive=true][data-active=false]:hover .aksel-stepper__circle{background-color:var(--ax-bg-moderate-hoverA);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=false]{color:var(--ax-text-neutral-subtle);cursor:default}.aksel-stepper__step[data-interactive=false] .aksel-stepper__circle{border-color:var(--ax-border-neutral-strong)}.aksel-stepper__step[data-interactive=false][data-active=true] .aksel-stepper__circle{color:var(--ax-text-neutral-contrast);background-color:var(--ax-bg-neutral-strong-pressed);border-color:var(--ax-bg-neutral-strong-pressed)}.aksel-stepper__content{grid-column:content;min-width:fit-content;padding-top:.16rem;line-height:1.5}.aksel-stepper[data-orientation=horizontal]{text-align:center;align-items:flex-start;display:flex}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line{height:var(--__axc-stepper-border-width);grid-row:1;align-self:center;width:100%;min-height:auto;display:block}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--1{grid-column:line-1}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--2{grid-column:line-2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item{grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--__axc-stepper-circle-size) auto;flex:100%}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:first-of-type .aksel-stepper__line--1,.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:last-of-type .aksel-stepper__line--2{visibility:hidden}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__step{grid-area:1 / step / -1;grid-template-rows:[circle] var(--__axc-stepper-circle-size) [content] auto;grid-template-columns:[content-start] auto [circle] var(--__axc-stepper-circle-size) [content-end] auto;place-items:center;margin-bottom:0;display:grid}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__circle{grid-area:circle / 2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__content{grid-area:content / 1 / content / -1;max-width:24ch}@media(forced-colors:active){.aksel-stepper__circle.aksel-stepper__circle{outline-offset:2px;border:0;outline:2px solid buttontext}.aksel-stepper__line.aksel-stepper__line{background-color:buttontext}.aksel-stepper__step[data-active=true][data-interactive] .aksel-stepper__circle{forced-color-adjust:none;color:highlighttext;background-color:highlight}}}
+@layer aksel.components{.aksel-stepper{--__axc-stepper-circle-size: 2rem;--__axc-stepper-border-width: 2px;--__axc-stepper-line-length: 1rem;color:var(--ax-text-subtle);font-weight:var(--ax-font-weight-bold);margin:0;padding-left:0;line-height:1;list-style:none}.aksel-stepper__item{grid-template-rows:[line-1] auto [step-start] var(--__axc-stepper-circle-size) [line-2 step-end] auto;grid-template-columns:var(--__axc-stepper-circle-size) auto;justify-items:flex-start;gap:var(--ax-space-8);display:grid}.aksel-stepper__line{background-color:var(--ax-border-default);width:var(--__axc-stepper-border-width);height:100%;min-height:var(--__axc-stepper-line-length);grid-column:1;justify-self:center}.aksel-stepper__item[data-interactive=false] .aksel-stepper__line{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__item:has(+.aksel-stepper__item>.aksel-stepper__step[data-interactive=false]) .aksel-stepper__line--2{background-color:var(--ax-border-neutral-strong)}.aksel-stepper__line--1{grid-row:line-1;display:none}.aksel-stepper__line--2{grid-row:line-2}.aksel-stepper__item:last-of-type .aksel-stepper__line--2{display:none}.aksel-stepper__step{grid-area:2 / 1 / -1 / -1;grid-template-columns:[circle] var(--__axc-stepper-circle-size) [content] auto;gap:var(--ax-space-8);cursor:pointer;padding:var(--__axc-stepper-border-width);margin:calc(var(--__axc-stepper-border-width) * -1) calc(var(--__axc-stepper-border-width) * -1) var(--__axc-stepper-circle-size);justify-content:flex-start;width:100%;display:grid}.aksel-stepper__step:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;isolation:isolate}.aksel-stepper__item:last-child .aksel-stepper__step{margin-bottom:0}.aksel-stepper__step:is(button){appearance:none;font:inherit;color:inherit;text-align:inherit;background-color:#0000;border:none}.aksel-stepper__circle{width:var(--__axc-stepper-circle-size);height:var(--__axc-stepper-circle-size);border:var(--__axc-stepper-border-width) solid currentColor;border-radius:var(--ax-radius-full);grid-column:circle;place-content:center;place-items:center;line-height:1;display:inline-grid}.aksel-stepper__circle--success{font-size:calc(var(--__axc-stepper-circle-size) * .75);background:none}.aksel-stepper__step[data-interactive=true]{color:var(--ax-text-subtle);border-radius:var(--ax-radius-4);text-decoration:none}.aksel-stepper__step[data-interactive=true] .aksel-stepper__content{text-underline-offset:.1em;text-decoration:underline;text-decoration-thickness:.05em}:is(.aksel-stepper__step[data-interactive=true]:hover,.aksel-stepper__step[data-interactive=true]:active) .aksel-stepper__content{text-decoration-thickness:.111em}.aksel-stepper__step[data-interactive=true] .aksel-stepper__circle{color:var(--ax-text-subtle);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__content{text-decoration:none}.aksel-stepper__step[data-interactive=true][data-active=true] .aksel-stepper__circle{color:var(--ax-text-contrast);background-color:var(--ax-bg-strong-pressed);border-color:var(--ax-bg-strong-pressed)}.aksel-stepper__step[data-interactive=true][data-active=false]:hover .aksel-stepper__circle{background-color:var(--ax-bg-moderate-hoverA);border-color:var(--ax-border-strong)}.aksel-stepper__step[data-interactive=false]{color:var(--ax-text-neutral-subtle);cursor:default}.aksel-stepper__step[data-interactive=false] .aksel-stepper__circle{border-color:var(--ax-border-neutral-strong)}.aksel-stepper__step[data-interactive=false][data-active=true] .aksel-stepper__circle{color:var(--ax-text-neutral-contrast);background-color:var(--ax-bg-neutral-strong-pressed);border-color:var(--ax-bg-neutral-strong-pressed)}.aksel-stepper__content{grid-column:content;min-width:fit-content;padding-top:.16rem;line-height:1.5}.aksel-stepper[data-orientation=horizontal]{text-align:center;align-items:flex-start;display:flex}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line{height:var(--__axc-stepper-border-width);grid-row:1;align-self:center;width:100%;min-height:auto;display:block}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--1{grid-column:line-1}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__line--2{grid-column:line-2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item{grid-template-columns:[line-1-start] 1fr [step-start] auto [line-1-end] var(--__axc-stepper-circle-size) [line-2-start] auto [step-end] 1fr [line-2-end];grid-template-rows:var(--__axc-stepper-circle-size) auto;flex:100%}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:first-of-type .aksel-stepper__line--1,.aksel-stepper[data-orientation=horizontal] .aksel-stepper__item:last-of-type .aksel-stepper__line--2{visibility:hidden}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__step{grid-area:1 / step / -1;grid-template-rows:[circle] var(--__axc-stepper-circle-size) [content] auto;grid-template-columns:[content-start] auto [circle] var(--__axc-stepper-circle-size) [content-end] auto;place-items:center;margin-bottom:0;display:grid}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__circle{grid-area:circle / 2}.aksel-stepper[data-orientation=horizontal] .aksel-stepper__content{grid-area:content / 1 / content / -1;max-width:24ch}@media(forced-colors:active){.aksel-stepper__circle.aksel-stepper__circle{outline-offset:2px;border:0;outline:2px solid buttontext}.aksel-stepper__line.aksel-stepper__line{background-color:buttontext}.aksel-stepper__step[data-active=true][data-interactive] .aksel-stepper__circle{forced-color-adjust:none;color:highlighttext;background-color:highlight}}}

package/dist/darkside/component/tooltip.css

@@ -1,6 +1,6 @@
 @layer aksel.components {
   .aksel-tooltip {
-    z-index: 3000;
+    z-index: 2147483647;
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
     border-radius: var(--ax-radius-4);

package/dist/darkside/component/tooltip.min.css

@@ -1 +1 @@
-@layer aksel.components{.aksel-tooltip{z-index:3000;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.aksel-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media(forced-colors:active){.aksel-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media(forced-colors:active){.aksel-tooltip__key{outline:1px solid}}}
+@layer aksel.components{.aksel-tooltip{z-index:2147483647;background-color:var(--ax-bg-neutral-strong);color:var(--ax-text-neutral-contrast);border-radius:var(--ax-radius-4);padding:0 var(--ax-space-6);text-align:center;box-shadow:var(--ax-shadow-dialog);border:1px solid rgba(0,0,0,0);flex-direction:column;align-items:center;animation-duration:.15s;animation-timing-function:cubic-bezier(.16,1,.3,1);display:flex}.aksel-tooltip:focus{outline:0}.aksel-tooltip__arrow{z-index:-1;background-color:var(--ax-bg-neutral-strong);border-radius:1px;width:.5rem;height:.5rem;position:absolute;transform:rotate(45deg)}@media(forced-colors:active){.aksel-tooltip__arrow{display:none}}.aksel-tooltip:where([data-state=open]):where([data-side=bottom]){animation-name:aksel-tooltip-from-bottom,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=top]){animation-name:aksel-tooltip-from-top,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=left]){animation-name:aksel-tooltip-from-left,aksel-tooltip-fade-in}.aksel-tooltip:where([data-state=open]):where([data-side=right]){animation-name:aksel-tooltip-from-right,aksel-tooltip-fade-in}@keyframes aksel-tooltip-from-bottom{0%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-top{0%{transform:translateY(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-left{0%{transform:translate(4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-from-right{0%{transform:translate(-4px)}to{transform:translateY(0)}}@keyframes aksel-tooltip-fade-in{0%{opacity:.01}to{opacity:1}}.aksel-tooltip__keys{padding-bottom:var(--ax-space-4);gap:var(--ax-space-4);display:flex}.aksel-tooltip__key{font-family:var(--ax-font-family);color:var(--ax-text-neutral);padding:0 var(--ax-space-4);border-radius:var(--ax-radius-2);background:var(--ax-bg-neutral-moderate);justify-content:center;align-items:center;min-width:1.125rem;height:1.125rem;display:inline-flex}@media(forced-colors:active){.aksel-tooltip__key{outline:1px solid}}}

package/dist/darkside/components.css

@@ -2703,6 +2703,101 @@
     margin-block-start: var(--ax-space-4);
   }
 
+  .aksel-base-alert {
+    border-radius: var(--ax-radius-12);
+    --__axc-base-alert-pi: var(--ax-space-20);
+    --__axc-base-alert-content-p: var(--ax-space-12) var(--__axc-base-alert-pi) var(--ax-space-16) var(--__axc-base-alert-pi);
+    --__axc-base-alert-title-pb: var(--ax-space-2);
+    --__axc-base-alert-header-max-width: 37.5rem;
+    height: fit-content;
+    display: grid;
+    overflow: clip;
+  }
+
+  .aksel-base-alert[data-size="small"] {
+    --__axc-base-alert-pi: var(--ax-space-16);
+    --__axc-base-alert-content-p: var(--ax-space-8) var(--ax-space-16) var(--ax-space-12) var(--ax-space-16);
+    --__axc-base-alert-title-pb: var(--ax-space-4);
+  }
+
+  .aksel-base-alert[data-variant="moderate"] {
+    outline: 1px solid var(--ax-border-default);
+    outline-offset: -1px;
+  }
+
+  .aksel-base-alert[data-variant="strong"] {
+    outline: 4px solid var(--ax-border-default);
+    outline-offset: -4px;
+  }
+
+  .aksel-base-alert[data-variant="strong"][data-color="neutral"] {
+    outline-color: var(--ax-border-strong);
+  }
+
+  .aksel-base-alert[data-global="true"] {
+    border-radius: 0;
+  }
+
+  .aksel-base-alert__header {
+    align-items: flex-start;
+    gap: var(--ax-space-8);
+    padding: var(--ax-space-8) var(--__axc-base-alert-pi);
+    border-bottom: 1px solid;
+    display: flex;
+  }
+
+  .aksel-base-alert[data-global="true"] .aksel-base-alert__header {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+
+  .aksel-base-alert[data-variant="moderate"] .aksel-base-alert__header {
+    background: var(--ax-bg-moderate);
+    color: var(--ax-text-default);
+    border-color: var(--ax-border-subtleA);
+  }
+
+  .aksel-base-alert[data-variant="strong"] .aksel-base-alert__header {
+    background: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
+    border-bottom: none;
+  }
+
+  .aksel-base-alert__header:only-child {
+    border-bottom: none;
+  }
+
+  .aksel-base-alert__icon {
+    margin-top: var(--ax-space-4);
+    font-size: 1.5rem;
+    display: grid;
+  }
+
+  .aksel-base-alert__title {
+    padding-block: var(--__axc-base-alert-title-pb);
+  }
+
+  .aksel-base-alert__content {
+    padding: var(--__axc-base-alert-content-p);
+    background-color: var(--ax-bg-default);
+  }
+
+  .aksel-base-alert[data-global="true"] .aksel-base-alert__content {
+    padding-inline: max(var(--__axc-base-alert-pi), calc((100% - var(--__axc-base-alert-header-max-width)) / 2));
+  }
+
+  .aksel-base-alert__close-button {
+    z-index: 1;
+    margin-left: auto;
+  }
+
+  .aksel-base-alert__close-button:focus-visible {
+    outline-color: var(--ax-bg-default);
+  }
+
+  .aksel-base-alert__close-button.aksel-base-alert__close-button.aksel-base-alert__close-button {
+    color: var(--ax-text-neutral-contrast);
+  }
+
   .aksel-chat {
     align-items: flex-end;
     gap: var(--ax-space-12);
@@ -3687,6 +3782,22 @@
     }
   }
 
+  .aksel-inline-message {
+    gap: var(--ax-space-4);
+    color: var(--ax-text-default);
+    display: flex;
+  }
+
+  .aksel-inline-message__icon {
+    color: var(--ax-text-subtle);
+    flex: none;
+    font-size: 1.5rem;
+  }
+
+  .aksel-inline-message[data-size="small"] .aksel-inline-message__icon {
+    font-size: 1.25rem;
+  }
+
   .aksel-internalheader {
     background: var(--ax-bg-raised);
     border-bottom: 1px solid var(--ax-border-neutral-subtleA);
@@ -4751,7 +4862,7 @@
   }
 
   .aksel-tooltip {
-    z-index: 3000;
+    z-index: 2147483647;
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
     border-radius: var(--ax-radius-4);
@@ -5482,7 +5593,7 @@
     justify-self: center;
   }
 
-  .aksel-stepper__item--non-interactive .aksel-stepper__line {
+  .aksel-stepper__item[data-interactive="false"] .aksel-stepper__line {
     background-color: var(--ax-border-neutral-strong);
   }