npm - @gov-design-system-ce/components - Versions diffs - 4.0.8-rc10 → 4.0.8-rc11 - Mend

@gov-design-system-ce/components 4.0.8-rc10 → 4.0.8-rc11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1568) hide show

package/dist/collection/components/gov-button/button/gov-button.css CHANGED Viewed

@@ -315,11 +315,11 @@
   color: var(--gov-button-primary-solid-inverse-disabled-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
-  [type=solid][variant=primary][hoverable].gov-button .element:hover {
+  [type=solid][variant=primary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-primary-solid-hover-bg, var(--gov-color-primary-700));
     color: var(--gov-button-primary-solid-hover-color, var(--gov-color-neutral-white));
   }
-  [type=solid][variant=primary][hoverable].gov-button .element:hover:active {
+  [type=solid][variant=primary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-primary-solid-active-bg, var(--gov-color-primary-800));
   }
 }
@@ -355,11 +355,11 @@
   border-color: var(--gov-button-primary-outlined-inverse-disabled-border-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
-  [type=outlined][variant=primary][hoverable].gov-button .element:hover {
+  [type=outlined][variant=primary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-primary-outlined-hover-bg, var(--gov-color-primary-100));
     color: var(--gov-button-primary-outlined-hover-color, var(--gov-color-primary));
   }
-  [type=outlined][variant=primary][hoverable].gov-button .element:hover:active {
+  [type=outlined][variant=primary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-primary-outlined-active-bg, var(--gov-color-primary-300));
   }
 }
@@ -387,11 +387,11 @@
   color: var(--gov-button-primary-base-inverse-disabled-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
-  [type=base][variant=primary][hoverable].gov-button .element:hover {
+  [type=base][variant=primary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-primary-base-hover-bg, var(--gov-color-primary-100));
     color: var(--gov-button-primary-base-hover-color, var(--gov-color-primary));
   }
-  [type=base][variant=primary][hoverable].gov-button .element:hover:active {
+  [type=base][variant=primary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-primary-base-active-bg, var(--gov-color-primary-300));
   }
 }
@@ -420,11 +420,11 @@
   color: var(--gov-button-primary-link-inverse-disabled-color, var(--gov-color-primary-400));
 }
 @media not all and (pointer: coarse) {
-  [type=link][variant=primary][hoverable].gov-button .element:hover {
+  [type=link][variant=primary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-primary-link-hover-bg, transparent);
     color: var(--gov-button-primary-link-hover-color, var(--gov-color-primary));
   }
-  [type=link][variant=primary][hoverable].gov-button .element:hover:active {
+  [type=link][variant=primary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-primary-link-active-bg, transparent);
     color: var(--gov-button-primary-link-active-color, var(--gov-color-primary-700));
   }
@@ -459,11 +459,11 @@
   color: var(--gov-button-secondary-solid-inverse-disabled-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
-  [type=solid][variant=secondary][hoverable].gov-button .element:hover {
+  [type=solid][variant=secondary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-secondary-solid-hover-bg, var(--gov-color-secondary-900));
     color: var(--gov-button-secondary-solid-hover-color, var(--gov-color-neutral-white));
   }
-  [type=solid][variant=secondary][hoverable].gov-button .element:hover:active {
+  [type=solid][variant=secondary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-secondary-solid-active-bg, var(--gov-color-secondary));
   }
 }
@@ -500,11 +500,11 @@
   border-color: var(--gov-button-secondary-outlined-inverse-disabled-border-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
-  [type=outlined][variant=secondary][hoverable].gov-button .element:hover {
+  [type=outlined][variant=secondary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-secondary-outlined-hover-bg, var(--gov-color-secondary-300));
     color: var(--gov-button-secondary-outlined-hover-color, var(--gov-color-secondary));
   }
-  [type=outlined][variant=secondary][hoverable].gov-button .element:hover:active {
+  [type=outlined][variant=secondary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-secondary-outlined-active-bg, var(--gov-color-secondary-400));
   }
 }
@@ -533,11 +533,11 @@
   color: var(--gov-button-secondary-base-inverse-disabled-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
-  [type=base][variant=secondary][hoverable].gov-button .element:hover {
+  [type=base][variant=secondary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-secondary-base-hover-bg, var(--gov-color-secondary-300));
     color: var(--gov-button-secondary-base-hover-color, var(--gov-color-secondary));
   }
-  [type=base][variant=secondary][hoverable].gov-button .element:hover:active {
+  [type=base][variant=secondary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-secondary-base-active-bg, var(--gov-color-secondary-400));
   }
 }
@@ -566,11 +566,11 @@
   color: var(--gov-button-secondary-link-inverse-disabled-color, var(--gov-color-secondary-600));
 }
 @media not all and (pointer: coarse) {
-  [type=link][variant=secondary][hoverable].gov-button .element:hover {
+  [type=link][variant=secondary][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-secondary-link-hover-bg, transparent);
     color: var(--gov-button-secondary-link-hover-color, var(--gov-color-secondary));
   }
-  [type=link][variant=secondary][hoverable].gov-button .element:hover:active {
+  [type=link][variant=secondary][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-secondary-link-active-bg, transparent);
     color: var(--gov-button-primary-link-active-color, var(--gov-color-secondary));
   }
@@ -605,11 +605,11 @@
   color: var(--gov-button-error-solid-inverse-disabled-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
-  [type=solid][variant=error][hoverable].gov-button .element:hover {
+  [type=solid][variant=error][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-error-solid-hover-bg, var(--gov-color-error-500));
     color: var(--gov-button-error-solid-hover-color, var(--gov-color-neutral-white));
   }
-  [type=solid][variant=error][hoverable].gov-button .element:hover:active {
+  [type=solid][variant=error][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-error-solid-active-bg, var(--gov-color-error-600));
   }
 }
@@ -645,11 +645,11 @@
   border-color: var(--gov-button-error-outlined-inverse-disabled-border-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
-  [type=outlined][variant=error][hoverable].gov-button .element:hover {
+  [type=outlined][variant=error][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-error-outlined-hover-bg, var(--gov-color-error-100));
     color: var(--gov-button-error-outlined-hover-color, var(--gov-color-error));
   }
-  [type=outlined][variant=error][hoverable].gov-button .element:hover:active {
+  [type=outlined][variant=error][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-error-outlined-active-bg, var(--gov-color-error-200));
   }
 }
@@ -677,11 +677,11 @@
   color: var(--gov-button-error-base-inverse-disabled-color, var(--gov-color-error-400));
 }
 @media not all and (pointer: coarse) {
-  [type=base][variant=error][hoverable].gov-button .element:hover {
+  [type=base][variant=error][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-error-base-hover-bg, var(--gov-color-error-100));
     color: var(--gov-button-error-base-hover-color, var(--gov-color-error));
   }
-  [type=base][variant=error][hoverable].gov-button .element:hover:active {
+  [type=base][variant=error][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-error-base-active-bg, var(--gov-color-error-200));
   }
 }
@@ -710,11 +710,11 @@
   color: var(--gov-button-error-link-inverse-disabled-color, var(--gov-color-error-200));
 }
 @media not all and (pointer: coarse) {
-  [type=link][variant=error][hoverable].gov-button .element:hover {
+  [type=link][variant=error][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-error-link-hover-bg, transparent);
     color: var(--gov-button-error-link-hover-color, var(--gov-color-error));
   }
-  [type=link][variant=error][hoverable].gov-button .element:hover:active {
+  [type=link][variant=error][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-error-link-active-bg, transparent);
     color: var(--gov-button-primary-link-active-color, var(--gov-color-error-500));
   }
@@ -749,11 +749,11 @@
   color: var(--gov-button-success-solid-inverse-disabled-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
-  [type=solid][variant=success][hoverable].gov-button .element:hover {
+  [type=solid][variant=success][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-success-solid-hover-bg, var(--gov-color-success-600));
     color: var(--gov-button-success-solid-hover-color, var(--gov-color-neutral-white));
   }
-  [type=solid][variant=success][hoverable].gov-button .element:hover:active {
+  [type=solid][variant=success][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-success-solid-active-bg, var(--gov-color-success-700));
   }
 }
@@ -789,11 +789,11 @@
   border-color: var(--gov-button-success-outlined-inverse-disabled-border-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
-  [type=outlined][variant=success][hoverable].gov-button .element:hover {
+  [type=outlined][variant=success][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-success-outlined-hover-bg, var(--gov-color-success-100));
     color: var(--gov-button-success-outlined-hover-color, var(--gov-color-success-500));
   }
-  [type=outlined][variant=success][hoverable].gov-button .element:hover:active {
+  [type=outlined][variant=success][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-success-outlined-active-bg, var(--gov-color-success-200));
   }
 }
@@ -821,11 +821,11 @@
   color: var(--gov-button-success-base-inverse-disabled-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
-  [type=base][variant=success][hoverable].gov-button .element:hover {
+  [type=base][variant=success][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-success-base-hover-bg, var(--gov-color-success-100));
     color: var(--gov-button-success-base-hover-color, var(--gov-color-success-500));
   }
-  [type=base][variant=success][hoverable].gov-button .element:hover:active {
+  [type=base][variant=success][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-success-base-active-bg, var(--gov-color-success-200));
   }
 }
@@ -854,11 +854,11 @@
   color: var(--gov-button-success-link-inverse-disabled-color, var(--gov-color-success-400));
 }
 @media not all and (pointer: coarse) {
-  [type=link][variant=success][hoverable].gov-button .element:hover {
+  [type=link][variant=success][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-success-link-hover-bg, transparent);
     color: var(--gov-button-success-link-hover-color, var(--gov-color-success-500));
   }
-  [type=link][variant=success][hoverable].gov-button .element:hover:active {
+  [type=link][variant=success][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-success-link-active-bg, transparent);
     color: var(--gov-button-primary-link-active-color, var(--gov-color-success-600));
   }
@@ -893,11 +893,11 @@
   color: var(--gov-button-warning-solid-inverse-disabled-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
-  [type=solid][variant=warning][hoverable].gov-button .element:hover {
+  [type=solid][variant=warning][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-warning-solid-hover-bg, var(--gov-color-warning-600));
     color: var(--gov-button-warning-solid-hover-color, var(--gov-color-neutral-white));
   }
-  [type=solid][variant=warning][hoverable].gov-button .element:hover:active {
+  [type=solid][variant=warning][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-warning-solid-active-bg, var(--gov-color-warning-700));
   }
 }
@@ -933,11 +933,11 @@
   border-color: var(--gov-button-warning-outlined-inverse-disabled-border-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
-  [type=outlined][variant=warning][hoverable].gov-button .element:hover {
+  [type=outlined][variant=warning][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-warning-outlined-hover-bg, var(--gov-color-warning-200));
     color: var(--gov-button-warning-outlined-hover-color, var(--gov-color-warning-500));
   }
-  [type=outlined][variant=warning][hoverable].gov-button .element:hover:active {
+  [type=outlined][variant=warning][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-warning-outlined-active-bg, var(--gov-color-warning-300));
   }
 }
@@ -965,11 +965,11 @@
   color: var(--gov-button-warning-base-inverse-disabled-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
-  [type=base][variant=warning][hoverable].gov-button .element:hover {
+  [type=base][variant=warning][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-warning-base-hover-bg, var(--gov-color-warning-200));
     color: var(--gov-button-warning-base-hover-color, var(--gov-color-warning-500));
   }
-  [type=base][variant=warning][hoverable].gov-button .element:hover:active {
+  [type=base][variant=warning][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-warning-base-active-bg, var(--gov-color-warning-300));
   }
 }
@@ -998,11 +998,11 @@
   color: var(--gov-button-warning-link-inverse-disabled-color, var(--gov-color-warning-400));
 }
 @media not all and (pointer: coarse) {
-  [type=link][variant=warning][hoverable].gov-button .element:hover {
+  [type=link][variant=warning][hoverable].gov-button > .element:hover {
     background-color: var(--gov-button-warning-link-hover-bg, transparent);
     color: var(--gov-button-warning-link-hover-color, var(--gov-color-warning-500));
   }
-  [type=link][variant=warning][hoverable].gov-button .element:hover:active {
+  [type=link][variant=warning][hoverable].gov-button > .element:hover:active {
     background-color: var(--gov-button-warning-link-active-bg, transparent);
     color: var(--gov-button-primary-link-active-color, var(--gov-color-warning-600));
   }
@@ -1116,31 +1116,31 @@
 .gov-button[loading=true] .element .gov-icon, .gov-button[loading="1"] .element .gov-icon {
   margin: 0;
 }
-.gov-button[loading="0"][size=xs] .element, .gov-button[loading=false][size=xs] .element, .gov-button[loading=""][size=xs] .element {
+.gov-button[loading="0"][size=xs] .element:not(:has(> .gov-icon)), .gov-button[loading=false][size=xs] .element:not(:has(> .gov-icon)), .gov-button[loading=""][size=xs] .element:not(:has(> .gov-icon)) {
   padding: var(--gov-button-xs-padding-y, 0.125rem) calc((var(--gov-button-xs-padding-x, 0.625rem) * 3 + var(--gov-button-xs-icon-size, 1rem)) / 2);
 }
 .gov-button[size=xs] .element {
   font-weight: var(--gov-button-xs-font-weight, 700);
 }
-.gov-button[loading="0"][size=s] .element, .gov-button[loading=false][size=s] .element, .gov-button[loading=""][size=s] .element {
+.gov-button[loading="0"][size=s] .element:not(:has(> .gov-icon)), .gov-button[loading=false][size=s] .element:not(:has(> .gov-icon)), .gov-button[loading=""][size=s] .element:not(:has(> .gov-icon)) {
   padding: var(--gov-button-s-padding-y, 0.25rem) calc((var(--gov-button-s-padding-x, 0.75rem) * 3 + var(--gov-button-s-icon-size, 1rem)) / 2);
 }
 .gov-button[size=s] .element {
   font-weight: var(--gov-button-s-font-weight, 700);
 }
-.gov-button[loading="0"][size=m] .element, .gov-button[loading=false][size=m] .element, .gov-button[loading=""][size=m] .element {
+.gov-button[loading="0"][size=m] .element:not(:has(> .gov-icon)), .gov-button[loading=false][size=m] .element:not(:has(> .gov-icon)), .gov-button[loading=""][size=m] .element:not(:has(> .gov-icon)) {
   padding: var(--gov-button-m-padding-y, 0.375rem) calc((var(--gov-button-m-padding-x, 0.75rem) * 3 + var(--gov-button-m-icon-size, 1.25rem)) / 2);
 }
 .gov-button[size=m] .element {
   font-weight: var(--gov-button-m-font-weight, 700);
 }
-.gov-button[loading="0"][size=l] .element, .gov-button[loading=false][size=l] .element, .gov-button[loading=""][size=l] .element {
+.gov-button[loading="0"][size=l] .element:not(:has(> .gov-icon)), .gov-button[loading=false][size=l] .element:not(:has(> .gov-icon)), .gov-button[loading=""][size=l] .element:not(:has(> .gov-icon)) {
   padding: var(--gov-button-l-padding-y, 0.5rem) calc((var(--gov-button-l-padding-x, 1rem) * 3 + var(--gov-button-l-icon-size, 1.5rem)) / 2);
 }
 .gov-button[size=l] .element {
   font-weight: var(--gov-button-l-font-weight, 700);
 }
-.gov-button[loading="0"][size=xl] .element, .gov-button[loading=false][size=xl] .element, .gov-button[loading=""][size=xl] .element {
+.gov-button[loading="0"][size=xl] .element:not(:has(> .gov-icon)), .gov-button[loading=false][size=xl] .element:not(:has(> .gov-icon)), .gov-button[loading=""][size=xl] .element:not(:has(> .gov-icon)) {
   padding: var(--gov-button-xl-padding-y, 0.75rem) calc((var(--gov-button-xl-padding-x, 1.25rem) * 3 + var(--gov-button-xl-icon-size, 1.75rem)) / 2);
 }
 .gov-button[size=xl] .element {