@navikt/ds-css 3.1.2 → 3.2.0

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Wed, 10 May 2023 20:21:58 GMT
+ * Generated on Tue, 16 May 2023 11:17:28 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -1882,6 +1882,115 @@ body,
 .navds-chips--small .navds-chips--icon-left {
   padding-left: 0.375rem;
 }
+[data-theme="dark"] .navds-copybutton,
+[data-theme="dark"].navds-copybutton {
+  --a-text-action: var(--a-blue-300);
+  --a-surface-hover: rgb(214 231 255 /0.13);
+  --a-icon-success: rgb(51 170 95 /1);
+  --a-text-subtle: rgb(231 240 254 /0.69);
+  --a-text-default: rgb(251 252 254 /0.96);
+}
+.navds-copybutton {
+  --__ac-copybutton-padding: var(--a-spacing-3) var(--a-spacing-5);
+
+  cursor: pointer;
+  margin: 0;
+  text-decoration: none;
+  border: none;
+  background: none;
+  border-radius: var(--ac-copybutton-border-radius, var(--a-border-radius-medium));
+  padding: var(--__ac-copybutton-padding);
+  display: grid;
+  place-content: center;
+}
+.navds-copybutton--small {
+  --__ac-copybutton-padding: var(--a-spacing-1) var(--a-spacing-3);
+
+  min-height: 2rem;
+}
+.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-3);
+}
+.navds-copybutton--small.navds-copybutton--icon-only {
+  --__ac-copybutton-padding: var(--a-spacing-1);
+}
+.navds-copybutton__icon {
+  font-size: 1.5rem;
+  display: flex;
+  margin-left: -4px;
+}
+.navds-copybutton__icon:only-child {
+  margin: 0;
+}
+.navds-copybutton:focus-visible {
+  outline: none;
+  box-shadow: var(--a-shadow-focus);
+}
+@supports not selector(:focus-visible) {
+  .navds-copybutton:focus {
+    outline: none;
+    box-shadow: var(--a-shadow-focus);
+  }
+}
+/* Variant/action */
+.navds-copybutton--action {
+  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
+}
+.navds-copybutton--action:hover {
+  color: var(--ac-copybutton-action-hover-text, var(--a-text-action));
+  background-color: var(--ac-copybutton-action-hover-bg, var(--a-surface-hover));
+}
+.navds-copybutton--action:where(:disabled),
+.navds-copybutton--action:hover:where(:disabled) {
+  color: var(--ac-copybutton-action-text, var(--a-text-action));
+  background-color: var(--ac-copybutton-action-bg, var(--a-surface-transparent));
+  box-shadow: none;
+}
+.navds-copybutton--active.navds-copybutton--action {
+  color: var(--ac-copybutton-action-active-text, var(--a-icon-success));
+}
+/* Variant/neutral */
+.navds-copybutton--neutral {
+  color: var(--ac-copybutton-neutral-text, var(--a-text-subtle));
+  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
+}
+.navds-copybutton--neutral:hover {
+  color: var(--ac-copybutton-neutral-hover-text, var(--a-text-default));
+  background-color: var(--ac-copybutton-neutral-hover-bg, var(--a-surface-hover));
+}
+.navds-copybutton--neutral:where(:disabled, .navds-copybutton--disabled),
+.navds-copybutton--neutral:hover:where(:disabled, .navds-copybutton--disabled) {
+  color: var(--ac-copybutton-neutral-text, var(--a-text-default));
+  background-color: var(--ac-copybutton-neutral-bg, var(--a-surface-transparent));
+  box-shadow: none;
+}
+.navds-copybutton--active.navds-copybutton--neutral {
+  color: var(--ac-copybutton-neutral-active-text, var(--a-text-default));
+}
+.navds-copybutton__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--a-spacing-2);
+}
+.navds-copybutton--active > .navds-copybutton__content {
+  animation: var(--ac-copybutton-animation, akselCopyButtonAnimation 0.4s linear);
+}
+@keyframes akselCopyButtonAnimation {
+  0% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+/* Disabled */
+.navds-copybutton:where(:disabled) {
+  cursor: not-allowed;
+  opacity: 0.3;
+}
 .navds-expansioncard {
   --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
   --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
@@ -3673,7 +3782,7 @@ body,
   gap: var(--a-spacing-2);
 }
 .navds-toggle-group {
-  border-radius: 9px;
+  border-radius: var(--a-border-radius-medium);
   background-color: var(--ac-toggle-group-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
   padding: calc(var(--a-spacing-1) + 1px);
@@ -3682,6 +3791,9 @@ body,
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
 }
+.navds-toggle-group--small {
+  padding: calc(var(--a-spacing-05) + 1px);
+}
 .navds-toggle-group--neutral {
   background-color: var(--ac-toggle-group-neutral-bg, var(--a-surface-transparent));
   box-shadow: inset 0 0 0 1px var(--ac-toggle-group-neutral-border, var(--a-border-default));
@@ -3690,14 +3802,23 @@ body,
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--a-spacing-3);
-  min-height: 48px;
+  padding: var(--a-spacing-1) var(--a-spacing-3);
+  min-height: 38px;
   border: none;
   cursor: pointer;
   background-color: var(--ac-toggle-group-button-bg, var(--a-surface-transparent));
   color: var(--ac-toggle-group-button-text, var(--a-text-default));
-  border-radius: var(--a-border-radius-medium);
+  border-radius: 2px;
   min-width: fit-content;
+  font-weight: var(--a-font-weight-regular);
+}
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:first-of-type:focus-visible) {
+  border-start-start-radius: 1px;
+  border-end-start-radius: 1px;
+}
+.navds-toggle-group--medium > :where(.navds-toggle-group__button:last-of-type:focus-visible) {
+  border-start-end-radius: 1px;
+  border-end-end-radius: 1px;
 }
 .navds-toggle-group--neutral > .navds-toggle-group__button {
   background-color: var(--ac-toggle-group-button-neutral-bg, var(--a-surface-transparent));
@@ -3705,7 +3826,7 @@ body,
 }
 .navds-toggle-group__button:hover {
   background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
-  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-default));
 }
 .navds-toggle-group--neutral > .navds-toggle-group__button:hover {
   background-color: var(--ac-toggle-group-button-neutral-hover-bg, var(--a-surface-neutral-subtle-hover));
@@ -3743,6 +3864,7 @@ body,
   display: flex;
   align-items: center;
   gap: var(--a-spacing-2);
+  font-weight: inherit;
 }
 .navds-toggle-group__button-inner > * {
   flex-shrink: 0;
@@ -3751,15 +3873,16 @@ body,
 .navds-toggle-group__button[aria-checked="true"] {
   background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
   color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
+  font-weight: var(--a-font-weight-bold);
 }
 .navds-toggle-group--neutral > .navds-toggle-group__button[aria-pressed="true"],
 .navds-toggle-group--neutral > .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral));
+  background-color: var(--ac-toggle-group-neutral-selected-bg, var(--a-surface-neutral-selected));
   color: var(--ac-toggle-group-neutral-selected-text, var(--a-text-on-neutral));
 }
 .navds-toggle-group--small > .navds-toggle-group__button {
-  padding: 0.375rem;
-  min-height: 32px;
+  padding: var(--a-spacing-05) var(--a-spacing-3);
+  min-height: 26px;
   min-width: fit-content;
 }
 .navds-toggle-group__button > .navds-toggle-group__button-inner > svg {