@danske/sapphire-css 31.1.1 → 31.2.1

package/components/accordion/accordion.module.css

@@ -69,7 +69,9 @@
 /* Hover header*/
 
 .sapphire-accordion__item:not(.is-disabled)
-  .sapphire-accordion__item-header:not(:active):not(.is-active):not(.js-hover):hover,
+  .sapphire-accordion__item-header:not(:active):not(.is-active):not(
+    .js-hover
+  ):hover,
 .sapphire-accordion__item:not(.is-disabled)
   .sapphire-accordion__item-header:not(:active):not(.is-active).is-hover {
   background-color: var(--sapphire-accordion-color-background-header-hover);
@@ -104,7 +106,10 @@
 }
 
 /* Remove closed item's border if header is focused */
-.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(.sapphire-accordion__item-header.is-focus, .sapphire-accordion__item-header:not(.js-focus):focus-visible) {
+.sapphire-accordion__item:not(.sapphire-accordion__item--open):has(
+    .sapphire-accordion__item-header.is-focus,
+    .sapphire-accordion__item-header:not(.js-focus):focus-visible
+  ) {
   border: none;
 }
 

package/components/button/button.module.css

@@ -56,6 +56,20 @@
   cursor: pointer;
 }
 
+.sapphire-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  /* In Safari buttons get a 2px border
+   * https://github.com/necolas/normalize.css/blob/master/normalize.css#L160-L169
+   */
+  margin: 0;
+  width: 100%;
+}
+
 a.sapphire-button {
   text-decoration: none;
 }
@@ -92,6 +106,16 @@ a.sapphire-button {
   margin-right: var(--sapphire-button-size-spacing-icon-gap);
 }
 
+/* Button loading */
+.sapphire-button__spinner {
+  position: absolute;
+  display: inherit;
+}
+
+.sapphire-button--loading .sapphire-button__content {
+  visibility: hidden;
+}
+
 /**
  * Skin rules
  */
@@ -102,8 +126,12 @@ a.sapphire-button {
   background-color: var(--sapphire-button-color-background-primary-default);
   color: var(--sapphire-button-color-content-primary-default);
 }
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(--sapphire-button-color-background-primary-hover);
 }
 .sapphire-button--primary-fill.is-focus,
@@ -112,7 +140,9 @@ a.sapphire-button {
 }
 .sapphire-button--primary-fill:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--primary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--primary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--primary-fill:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-primary-active);
 }
 
@@ -124,8 +154,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-secondary-default);
 }
 
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(--sapphire-button-color-background-secondary-hover);
   color: var(--sapphire-button-color-content-secondary-hover);
 }
@@ -137,7 +171,9 @@ a.sapphire-button {
 
 .sapphire-button--secondary-fill:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary-fill:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-secondary-active);
   color: var(--sapphire-button-color-content-secondary-active);
 }
@@ -149,23 +185,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-secondary-surface-secondary-hover
   );
 }
 
 .sapphire-button--secondary-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-secondary-surface-secondary-focus
   );
 }
 
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--secondary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-secondary-surface-secondary-active
   );
@@ -180,8 +228,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-secondary-default);
 }
 
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-secondary-ghost-hover
   );
@@ -197,7 +249,9 @@ a.sapphire-button {
 
 .sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary-ghost:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-secondary-ghost-active
   );
@@ -211,23 +265,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-secondary-ghost-surface-secondary-hover
   );
 }
 
 .sapphire-button--secondary-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-secondary-ghost-surface-secondary-focus
   );
 }
 
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--secondary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-secondary-ghost-surface-secondary-active
   );
@@ -241,14 +307,20 @@ a.sapphire-button {
   padding: 0;
 }
 
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   color: var(--sapphire-button-color-content-secondary-hover);
 }
 
 .sapphire-button--secondary-text:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--secondary-text:not(:disabled):not(.is-disabled):active,
-.sapphire-button--secondary-text:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--secondary-text:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   color: var(--sapphire-button-color-content-secondary-active);
 }
 
@@ -260,8 +332,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-tertiary-default);
 }
 
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(--sapphire-button-color-background-tertiary-hover);
   color: var(--sapphire-button-color-content-tertiary-hover);
 }
@@ -273,7 +349,9 @@ a.sapphire-button {
 
 .sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-fill:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary-fill:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-tertiary-active);
   color: var(--sapphire-button-color-content-tertiary-active);
 }
@@ -285,23 +363,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-tertiary-surface-secondary-hover
   );
 }
 
 .sapphire-button--tertiary-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-tertiary-surface-secondary-focus
   );
 }
 
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--tertiary-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-tertiary-surface-secondary-active
   );
@@ -316,8 +406,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-tertiary-default);
 }
 
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-tertiary-ghost-hover
   );
@@ -333,7 +427,9 @@ a.sapphire-button {
 
 .sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary-ghost:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-tertiary-ghost-active
   );
@@ -347,23 +443,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-tertiary-ghost-surface-secondary-hover
   );
 }
 
 .sapphire-button--tertiary-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-tertiary-ghost-surface-secondary-focus
   );
 }
 
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--tertiary-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-tertiary-ghost-surface-secondary-active
   );
@@ -377,14 +485,20 @@ a.sapphire-button {
   padding: 0;
 }
 
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   color: var(--sapphire-button-color-content-tertiary-hover);
 }
 
 .sapphire-button--tertiary-text:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):active,
-.sapphire-button--tertiary-text:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--tertiary-text:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   color: var(--sapphire-button-color-content-tertiary-active);
 }
 
@@ -396,8 +510,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-danger-default);
 }
 
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(--sapphire-button-color-background-danger-hover);
   color: var(--sapphire-button-color-content-danger-hover);
 }
@@ -409,7 +527,9 @@ a.sapphire-button {
 
 .sapphire-button--danger-fill:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--danger-fill:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-fill:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--danger-fill:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-danger-active);
   color: var(--sapphire-button-color-content-danger-active);
 }
@@ -421,23 +541,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-danger-surface-secondary-hover
   );
 }
 
 .sapphire-button--danger-fill.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-danger-surface-secondary-focus
   );
 }
 
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--danger-fill.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-danger-surface-secondary-active
   );
@@ -452,8 +584,12 @@ a.sapphire-button {
   color: var(--sapphire-button-color-content-danger-default);
 }
 
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active):not(.js-hover):hover,
+.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):not(
+    :active
+  ):not(.is-active).is-hover {
   background-color: var(--sapphire-button-color-background-danger-ghost-hover);
   color: var(--sapphire-button-color-content-danger-hover);
 }
@@ -465,7 +601,9 @@ a.sapphire-button {
 
 .sapphire-button--danger-ghost:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-ghost:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--danger-ghost:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-danger-ghost-active);
   color: var(--sapphire-button-color-content-danger-active);
 }
@@ -477,23 +615,35 @@ a.sapphire-button {
   );
 }
 
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):not(:active):not(.is-active).is-hover {
   background-color: var(
     --sapphire-button-color-background-danger-ghost-surface-secondary-hover
   );
 }
 
 .sapphire-button--danger-ghost.sapphire-button--secondary-surface.is-focus,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(.js-focus):focus-visible {
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    .js-focus
+  ):focus-visible {
   background-color: var(
     --sapphire-button-color-background-danger-ghost-surface-secondary-focus
   );
 }
 
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled).is-active,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled).is-active,
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):active,
+.sapphire-button--danger-ghost.sapphire-button--secondary-surface:not(
+    :disabled
+  ):not(.is-disabled):focus-visible:active {
   background-color: var(
     --sapphire-button-color-background-danger-ghost-surface-secondary-active
   );
@@ -507,14 +657,20 @@ a.sapphire-button {
   padding: 0;
 }
 
-.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--danger-text:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   color: var(--sapphire-button-color-content-danger-hover);
 }
 
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--danger-text:not(:disabled):not(.is-disabled):active,
-.sapphire-button--danger-text:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--danger-text:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   color: var(--sapphire-button-color-content-danger-active);
 }
 
@@ -525,8 +681,12 @@ a.sapphire-button {
   background-color: var(--sapphire-button-color-background-selected-default);
   color: var(--sapphire-button-color-content-selected-default);
 }
-.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--selected:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(--sapphire-button-color-background-selected-hover);
 }
 .sapphire-button--selected.is-focus,
@@ -535,7 +695,9 @@ a.sapphire-button {
 }
 .sapphire-button--selected:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--selected:not(:disabled):not(.is-disabled):active,
-.sapphire-button--selected:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--selected:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-selected-active);
   color: var(--sapphire-button-color-content-selected-active);
 }
@@ -544,8 +706,12 @@ a.sapphire-button {
   background-color: var(--sapphire-button-color-background-unselected-default);
   color: var(--sapphire-button-color-content-unselected-default);
 }
-.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active):not(.js-hover):hover,
-.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(.is-active).is-hover {
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ):not(.js-hover):hover,
+.sapphire-button--unselected:not(:disabled):not(.is-disabled):not(:active):not(
+    .is-active
+  ).is-hover {
   background-color: var(--sapphire-button-color-background-unselected-hover);
 }
 .sapphire-button--unselected.is-focus,
@@ -554,7 +720,9 @@ a.sapphire-button {
 }
 .sapphire-button--unselected:not(:disabled):not(.is-disabled).is-active,
 .sapphire-button--unselected:not(:disabled):not(.is-disabled):active,
-.sapphire-button--unselected:not(:disabled):not(.is-disabled):focus-visible:active {
+.sapphire-button--unselected:not(:disabled):not(
+    .is-disabled
+  ):focus-visible:active {
   background-color: var(--sapphire-button-color-background-unselected-active);
   color: var(--sapphire-button-color-content-unselected-active);
 }

package/components/button/button.module.css.d.ts

@@ -1,11 +1,14 @@
 declare const styles: {
   readonly "sapphire-button": string;
+  readonly "sapphire-button__content": string;
   readonly "is-disabled": string;
   readonly "is-focus": string;
   readonly "js-focus": string;
   readonly "sapphire-button--with-left-icon": string;
   readonly "sapphire-button--with-right-icon": string;
   readonly "sapphire-button__icon": string;
+  readonly "sapphire-button__spinner": string;
+  readonly "sapphire-button--loading": string;
   readonly "sapphire-button--primary-fill": string;
   readonly "is-active": string;
   readonly "js-hover": string;

package/components/buttonGroup/buttonGroup.module.css

@@ -34,7 +34,9 @@ Added !important because of Angular implementation, and how the extra attribute
   flex-wrap: nowrap;
 }
 
-.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(> *:nth-child(3)) {
+.sapphire-button-group--stretch.sapphire-button-group--stretch-auto-vertical.sapphire-button-group:has(
+    > *:nth-child(3)
+  ) {
   flex-direction: column-reverse;
 }