@navikt/ds-css 7.15.0 → 7.16.0

package/darkside/form/switch.darkside.css

@@ -1,15 +1,15 @@
-.navds-switch {
+.aksel-switch {
   position: relative;
   min-height: 3rem;
   width: fit-content;
 }
 
-.navds-switch--small {
+.aksel-switch--small {
   min-height: 2rem;
 }
 
 /* ------------------------------ Switch Input ------------------------------ */
-.navds-switch__input {
+.aksel-switch__input {
   cursor: pointer;
   position: absolute;
   z-index: 1;
@@ -18,19 +18,19 @@
   opacity: 0;
   top: 0;
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     height: 2rem;
     top: 0;
   }
 }
 
 /* -------------------------- Switch content/label -------------------------- */
-.navds-switch__label-wrapper {
+.aksel-switch__label-wrapper {
   cursor: pointer;
   color: var(--ax-text-neutral);
 }
 
-.navds-switch__content {
+.aksel-switch__content {
   --__axc-switch-block-padding: 0.75rem;
 
   position: relative;
@@ -39,19 +39,19 @@
   gap: var(--ax-space-2);
   padding: var(--__axc-switch-block-padding) 0 var(--__axc-switch-block-padding) 3.25rem;
 
-  .navds-switch--right & {
+  .aksel-switch--right & {
     padding: var(--__axc-switch-block-padding) 3.25rem var(--__axc-switch-block-padding) 0;
   }
 
-  .navds-switch--small & {
+  .aksel-switch--small & {
     --__axc-switch-block-padding: 0.375rem;
   }
 
-  &.navds-switch--with-description {
+  &.aksel-switch--with-description {
     padding-bottom: 0;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &::after {
     content: "";
     position: absolute;
     left: 0;
@@ -63,22 +63,22 @@
     pointer-events: none;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > &.navds-switch--with-description::after {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > &.aksel-switch--with-description::after {
     height: calc(100% - var(--__axc-switch-block-padding) * 1);
   }
 }
 
-.navds-switch__input:hover ~ .navds-switch__label-wrapper,
-.navds-switch__label-wrapper:hover {
+.aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+.aksel-switch__label-wrapper:hover {
   color: var(--ax-text-accent-subtle);
 }
 
-.navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled:hover ~ .aksel-switch__label-wrapper {
   color: inherit;
 }
 
 /* ------------------------------ Switch Track ------------------------------ */
-.navds-switch__track {
+.aksel-switch__track {
   width: 2.75rem;
   height: 1.5rem;
   background-color: var(--ax-bg-input);
@@ -91,38 +91,38 @@
   transition-duration: 100ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
-  .navds-switch--small > & {
+  .aksel-switch--small > & {
     top: var(--ax-space-4);
   }
 
-  .navds-switch__input:checked ~ & {
+  .aksel-switch__input:checked ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch__input:hover:checked ~ & {
+  .aksel-switch__input:hover:checked ~ & {
     background-color: var(--ax-bg-accent-strong-hover);
     border-color: var(--ax-bg-accent-strong-hover);
   }
 
-  .navds-switch__input:disabled ~ & {
+  .aksel-switch__input:disabled ~ & {
     background-color: var(--ax-bg-input);
     border-color: var(--ax-border-neutral);
   }
 
-  .navds-switch__input:checked:disabled ~ & {
+  .aksel-switch__input:checked:disabled ~ & {
     background-color: var(--ax-bg-accent-strong-pressed);
     border-color: var(--ax-bg-accent-strong-pressed);
   }
 
-  .navds-switch--standalone > .navds-switch__input:focus ~ & {
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ & {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
   }
 }
 
 /* ------------------------------ Switch Thumb ------------------------------ */
-.navds-switch__thumb {
+.aksel-switch__thumb {
   background-color: var(--ax-bg-neutral-strong);
   border-radius: var(--ax-border-radius-full);
   width: 1.125rem;
@@ -136,7 +136,7 @@
   left: 0.0625rem;
   top: 0.0625rem;
 
-  .navds-switch__input:checked ~ .navds-switch__track > & {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & {
     background-color: var(--ax-bg-raised);
     transform: translateX(1.25rem);
     color: var(--ax-text-accent-subtle);
@@ -146,91 +146,91 @@
     top: 0;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > & > .navds-switch__checkmark {
+  .aksel-switch__input:checked ~ .aksel-switch__track > & > .aksel-switch__checkmark {
     visibility: visible;
     opacity: 1;
   }
 }
 
-.navds-switch__checkmark {
+.aksel-switch__checkmark {
   visibility: hidden;
   opacity: 0;
   transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (hover: hover) and (pointer: fine) {
-  .navds-switch__input:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(0.0625rem);
   }
 
-  .navds-switch__input:checked:hover:not(:disabled) ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked:hover:not(:disabled) ~ .aksel-switch__track > .aksel-switch__thumb {
     transform: translateX(1.19rem);
   }
 }
 
-.navds-switch--right {
+.aksel-switch--right {
   width: auto;
 
-  & .navds-switch__input,
-  & .navds-switch__track {
+  & .aksel-switch__input,
+  & .aksel-switch__track {
     right: 0;
     left: auto;
   }
 }
 
 /* -------------------------- Switch Disabled-state ------------------------- */
-.navds-switch__input:disabled {
+.aksel-switch__input:disabled {
   appearance: none;
 }
 
-.navds-switch--disabled:not(.navds-switch--loading) {
+.aksel-switch--disabled:not(.aksel-switch--loading) {
   opacity: var(--ax-opacity-disabled);
 }
 
-.navds-switch__input:disabled,
-.navds-switch__input:disabled ~ .navds-switch__label-wrapper {
+.aksel-switch__input:disabled,
+.aksel-switch__input:disabled ~ .aksel-switch__label-wrapper {
   cursor: not-allowed;
 }
 
 /* -------------------------- Switch Readonly state ------------------------- */
-.navds-switch--readonly {
-  & > .navds-switch__track,
-  & > .navds-switch__input:hover ~ .navds-switch__track,
-  & > .navds-switch__input:checked ~ .navds-switch__track,
-  & > .navds-switch__input:checked:hover ~ .navds-switch__track {
+.aksel-switch--readonly {
+  & > .aksel-switch__track,
+  & > .aksel-switch__input:hover ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked ~ .aksel-switch__track,
+  & > .aksel-switch__input:checked:hover ~ .aksel-switch__track {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
   }
 
-  & > .navds-switch__label-wrapper,
-  & > .navds-switch__input {
+  & > .aksel-switch__label-wrapper,
+  & > .aksel-switch__input {
     cursor: default;
   }
 
-  & > .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  & .navds-switch__label-wrapper:hover {
+  & > .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  & .aksel-switch__label-wrapper:hover {
     color: var(--ax-text-neutral);
   }
 
-  & .navds-switch__label {
+  & .aksel-switch__label {
     display: inline-flex;
   }
 
-  & .navds-switch__thumb {
+  & .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
   }
 
-  & > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  & > .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     background-color: var(--ax-bg-neutral-strong);
     color: var(--ax-text-neutral-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    & > .navds-switch__input:hover ~ .navds-switch__track > .navds-switch__thumb {
+    & > .aksel-switch__input:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(0);
     }
 
-    & > .navds-switch__input:checked:hover ~ .navds-switch__track > .navds-switch__thumb {
+    & > .aksel-switch__input:checked:hover ~ .aksel-switch__track > .aksel-switch__thumb {
       transform: translateX(1.25rem);
     }
   }
@@ -238,40 +238,40 @@
 
 /* ------------------------ Switch Forced colors mode ----------------------- */
 @media (forced-colors: active) {
-  .navds-switch__input:hover ~ .navds-switch__label-wrapper,
-  .navds-switch__label-wrapper:hover {
+  .aksel-switch__input:hover ~ .aksel-switch__label-wrapper,
+  .aksel-switch__label-wrapper:hover {
     color: highlight;
   }
 
-  .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__thumb {
+  .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__thumb {
     background-color: fieldtext !important;
   }
 
-  .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb,
-  .navds-switch--readonly .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
+  .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb,
+  .aksel-switch--readonly .aksel-switch__input:checked ~ .aksel-switch__track > .aksel-switch__thumb {
     color: field;
   }
 
-  .navds-switch__input:focus ~ .navds-switch__label-wrapper > .navds-switch__content::after,
-  .navds-switch--standalone > .navds-switch__input:focus ~ .navds-switch__track {
+  .aksel-switch__input:focus ~ .aksel-switch__label-wrapper > .aksel-switch__content::after,
+  .aksel-switch--standalone > .aksel-switch__input:focus ~ .aksel-switch__track {
     outline: 3px solid highlight;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) {
+  .aksel-switch--disabled:not(.aksel-switch--loading) {
     opacity: 1;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__thumb {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__thumb {
     background-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__track {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__track {
     border-color: graytext !important;
   }
 
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper,
-  .navds-switch--disabled:not(.navds-switch--loading) .navds-switch__label-wrapper:hover {
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper,
+  .aksel-switch--disabled:not(.aksel-switch--loading) .aksel-switch__label-wrapper:hover {
     color: graytext !important;
   }
 }

package/darkside/form/text-field.darkside.css

@@ -1,4 +1,4 @@
-.navds-text-field__input {
+.aksel-text-field__input {
   appearance: none;
   padding: var(--ax-space-8);
   background: var(--ax-bg-input);
@@ -33,17 +33,17 @@
   }
 }
 
-.navds-form-field--small .navds-text-field__input {
+.aksel-form-field--small .aksel-text-field__input {
   padding: 0 var(--ax-space-8);
   min-height: 2rem;
 }
 
-.navds-text-field--error .navds-text-field__input:not(:disabled) {
+.aksel-text-field--error .aksel-text-field__input:not(:disabled) {
   border-color: var(--ax-border-danger-strong);
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
 }
 
-.navds-text-field--readonly .navds-text-field__input {
+.aksel-text-field--readonly .aksel-text-field__input {
   background-color: var(--ax-bg-neutral-moderate);
   border-color: var(--ax-border-neutral-subtleA);
   cursor: default;
@@ -52,7 +52,7 @@
 /**
   * Removes default search icon
   */
-.navds-text-field__input[type="search"] {
+.aksel-text-field__input[type="search"] {
   &::-webkit-search-decoration,
   &::-webkit-search-cancel-button,
   &::-webkit-search-results-button,
@@ -62,7 +62,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-text-field__input {
+  .aksel-text-field__input {
     background-color: field;
     color: fieldtext;
   }

package/darkside/form/textarea.darkside.css

@@ -1,4 +1,4 @@
-.navds-textarea__input {
+.aksel-textarea__input {
   /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
   height: var(--__axc-textarea-height);
   appearance: none;
@@ -31,51 +31,51 @@
     cursor: not-allowed;
   }
 
-  .navds-form-field--small & {
+  .aksel-form-field--small & {
     padding: var(--ax-space-6);
   }
 
-  .navds-textarea--readonly & {
+  .aksel-textarea--readonly & {
     background-color: var(--ax-bg-neutral-moderate);
     border-color: var(--ax-border-neutral-subtleA);
     cursor: default;
   }
 }
 
-.navds-textarea__counter {
+.aksel-textarea__counter {
   margin-top: -0.25rem;
   color: var(--ax-text-neutral-subtle);
 }
 
-.navds-textarea__counter--error {
+.aksel-textarea__counter--error {
   color: var(--ax-text-danger-subtle);
 }
 
-.navds-textarea__sr-counter {
+.aksel-textarea__sr-counter {
   display: none;
 }
 
-.navds-textarea__input:focus ~ .navds-textarea__sr-counter {
+.aksel-textarea__input:focus ~ .aksel-textarea__sr-counter {
   display: initial;
 }
 
-.navds-textarea--resize-both .navds-textarea__input {
+.aksel-textarea--resize-both .aksel-textarea__input {
   resize: both;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-horizontal .navds-textarea__input {
+.aksel-textarea--resize-horizontal .aksel-textarea__input {
   resize: horizontal;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--resize-vertical .navds-textarea__input {
+.aksel-textarea--resize-vertical .aksel-textarea__input {
   resize: vertical;
   border-end-end-radius: 0;
 }
 
-.navds-textarea--autoscrollbar,
-.navds-textarea--autoscrollbar .navds-textarea__wrapper {
+.aksel-textarea--autoscrollbar,
+.aksel-textarea--autoscrollbar .aksel-textarea__wrapper {
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -85,17 +85,17 @@
   margin: -3px;
 }
 
-.navds-textarea--autoscrollbar .navds-textarea__input {
+.aksel-textarea--autoscrollbar .aksel-textarea__input {
   scrollbar-gutter: stable; /* Needed to prevent scrollbar from appearing too early */
 }
 
-.navds-textarea--error .navds-textarea__input:not(:disabled) {
+.aksel-textarea--error .aksel-textarea__input:not(:disabled) {
   box-shadow: 0 0 0 1px var(--ax-border-danger-strong);
   border-color: var(--ax-border-danger-strong);
 }
 
 @media (forced-colors: active) {
-  .navds-textarea__input {
+  .aksel-textarea__input {
     background-color: field;
     color: fieldtext;
   }

package/darkside/guide-panel.darkside.css

@@ -1,4 +1,4 @@
-.navds-guide-panel {
+.aksel-guide-panel {
   --__axc-guide-panel-guide-size: 5rem;
 
   position: relative;
@@ -32,7 +32,7 @@
   }
 }
 
-.navds-guide {
+.aksel-guide {
   box-sizing: border-box;
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-full);
@@ -42,42 +42,42 @@
   flex-shrink: 0;
 }
 
-.navds-guide svg,
-.navds-guide img {
+.aksel-guide svg,
+.aksel-guide img {
   height: 100%;
   width: 100%;
 }
 
-.navds-guide-panel__content {
+.aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
   border: 2px solid var(--ax-border-info);
   border-radius: var(--ax-border-radius-xlarge);
   position: relative;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
     margin-top: var(--ax-space-20);
   }
 
-  .navds-guide-panel[data-poster="false"] > & {
+  .aksel-guide-panel[data-poster="false"] > & {
     margin-left: var(--ax-space-20);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] > & {
+    .aksel-guide-panel[data-responsive="true"] > & {
       margin-top: 0;
       margin-left: var(--ax-space-20);
     }
   }
 }
 
-.navds-guide-panel__content-inner {
+.aksel-guide-panel__content-inner {
   padding: var(--ax-space-12) var(--ax-space-16);
   border-radius: var(--ax-border-radius-xlarge);
   background-color: var(--ax-bg-raised);
   position: relative;
   height: 100%;
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     min-height: var(--__axc-guide-panel-guide-size);
   }
 
@@ -86,30 +86,30 @@
       padding: var(--ax-space-16) var(--ax-space-20);
     }
 
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       min-height: var(--__axc-guide-panel-guide-size);
     }
   }
 }
 
-.navds-guide-panel__tail {
+.aksel-guide-panel__tail {
   position: absolute;
   z-index: 0;
 
-  .navds-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
+  .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) & {
     left: 50%;
     top: calc(var(--ax-space-16) * -1 - 2px);
     transform: translateX(-48%);
   }
 
-  .navds-guide-panel[data-poster="false"] & {
+  .aksel-guide-panel[data-poster="false"] & {
     top: calc(var(--__axc-guide-panel-guide-size) / 2);
     left: calc(var(--ax-space-20) * -1 - 2px);
     transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);
   }
 
   @media (min-width: 480px) {
-    .navds-guide-panel[data-responsive="true"] & {
+    .aksel-guide-panel[data-responsive="true"] & {
       top: calc(var(--__axc-guide-panel-guide-size) / 2);
       left: calc(var(--ax-space-20) * -1 - 2px);
       transform: translateY(-48%) rotateZ(-90deg) scaleX(-1);

package/darkside/help-text.darkside.css

@@ -1,4 +1,4 @@
-.navds-help-text__button {
+.aksel-help-text__button {
   margin: 0;
   border: 0;
   cursor: pointer;
@@ -12,44 +12,44 @@
   padding: calc(var(--ax-space-4) / 2);
 }
 
-.navds-help-text__icon {
+.aksel-help-text__icon {
   border-radius: var(--ax-border-radius-full);
 }
 
-.navds-help-text__popover.navds-popover {
+.aksel-help-text__popover.aksel-popover {
   background-color: var(--ax-bg-info-moderate);
   max-width: min(65ch, calc(100vw - var(--ax-space-24)));
   border-radius: var(--ax-border-radius-large);
   border: 1px solid var(--ax-border-info);
 }
 
-.navds-help-text__icon--filled {
+.aksel-help-text__icon--filled {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
   display: none;
 }
 
-.navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+.aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
   display: inherit;
   color: var(--ax-bg-info-strong-hover);
 }
 
-.navds-help-text__button[aria-expanded="true"] > .navds-help-text__icon--filled {
+.aksel-help-text__button[aria-expanded="true"] > .aksel-help-text__icon--filled {
   color: var(--ax-bg-info-strong-pressed);
 }
 
 @media (forced-colors: active) {
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon {
     display: inherit;
   }
 
-  .navds-help-text__button:hover > .navds-help-text__icon {
+  .aksel-help-text__button:hover > .aksel-help-text__icon {
     color: highlight;
   }
 
-  .navds-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .navds-help-text__icon--filled {
+  .aksel-help-text__button:where(:hover, :focus-visible, [aria-expanded="true"]) > .aksel-help-text__icon--filled {
     display: none;
   }
 }

package/darkside/internalheader.darkside.css

@@ -1,4 +1,4 @@
-.navds-internalheader {
+.aksel-internalheader {
   display: flex;
   align-self: stretch;
   background: var(--ax-bg-raised);
@@ -7,14 +7,14 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader {
+  .aksel-internalheader {
     background-color: ButtonFace;
     border: solid 1px ButtonText;
     color: ButtonText;
   }
 }
 
-.navds-internalheader__title {
+.aksel-internalheader__title {
   border: none;
   overflow: visible;
   background: transparent;
@@ -44,14 +44,14 @@
   }
 }
 
-.navds-internalheader__user {
+.aksel-internalheader__user {
   padding: 0 var(--ax-space-20);
   border-left: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   align-items: center;
 }
 
-.navds-internalheader__button {
+.aksel-internalheader__button {
   border: none;
   margin: 0;
   padding: 0 var(--ax-space-12);
@@ -74,7 +74,7 @@
 }
 
 @media (forced-colors: active) {
-  .navds-internalheader__button:hover {
+  .aksel-internalheader__button:hover {
     background-color: highlighttext;
     border-color: highlight;
     color: highlight;
@@ -83,8 +83,8 @@
   }
 }
 
-.navds-internalheader__title,
-.navds-internalheader__button {
+.aksel-internalheader__title,
+.aksel-internalheader__button {
   &:focus-visible {
     outline: 3px solid var(--ax-border-focus);
     outline-offset: -4px;
@@ -95,7 +95,7 @@
   }
 }
 
-.navds-internalheader__user-button {
+.aksel-internalheader__user-button {
   padding-left: var(--ax-space-20);
   gap: var(--ax-space-16);
 }