Merge branch 'release/v6.4'

aptuitiv · Nov 5, 2024 · ef8dca1 · ef8dca1
2 parents 468df87 + 1701b7b
commit ef8dca1
Show file tree

Hide file tree

Showing 121 changed files with 530 additions and 109 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 6.4.0 (November 5, 2024)
+
+- Added `!important` to display styles. This was doen so that the display styles are always set and can’t be overwridden by more specific site styles.
+- Added support for CSS selectors with psuedo-classes.
+
 ## 6.3.0 (October 3, 2024)
 
 - Updated v6 conversion scripts.

diff --git a/dist/display/2xl/display.css b/dist/display/2xl/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-2xl) {
     .flex-2xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-2xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-2xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-2xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-2xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-2xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-2xl {

diff --git a/dist/display/2xs/display.css b/dist/display/2xs/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-2xs) {
     .flex-2xs {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-2xs {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-2xs {
-        display: block;
+        display: block !important;
     }
 
     .inline-2xs {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-2xs {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-2xs {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-2xs {

diff --git a/dist/display/3xl/display.css b/dist/display/3xl/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-3xl) {
     .flex-3xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-3xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-3xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-3xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-3xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-3xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-3xl {

diff --git a/dist/display/3xs/display.css b/dist/display/3xs/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-3xs) {
     .flex-3xs {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-3xs {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-3xs {
-        display: block;
+        display: block !important;
     }
 
     .inline-3xs {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-3xs {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-3xs {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-3xs {

diff --git a/dist/display/4xl/display.css b/dist/display/4xl/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-4xl) {
     .flex-4xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-4xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-4xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-4xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-4xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-4xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-4xl {

diff --git a/dist/display/5xl/display.css b/dist/display/5xl/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-5xl) {
     .flex-5xl {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-5xl {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-5xl {
-        display: block;
+        display: block !important;
     }
 
     .inline-5xl {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-5xl {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-5xl {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-5xl {

diff --git a/dist/display/display.css b/dist/display/display.css
@@ -1,29 +1,35 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 .flex {
-    display: flex;
+    display: flex !important;
 }
 
 .inline-flex {
-    display: inline-flex;
+    display: inline-flex !important;
 }
 
 .block {
-    display: block;
+    display: block !important;
 }
 
 .inline {
-    display: inline;
+    display: inline !important;
 }
 
 .inline-block {
-    display: inline-block;
+    display: inline-block !important;
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .visually-hidden {

diff --git a/dist/display/lg/display.css b/dist/display/lg/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-lg) {
     .flex-lg {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-lg {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-lg {
-        display: block;
+        display: block !important;
     }
 
     .inline-lg {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-lg {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-lg {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-lg {

diff --git a/dist/display/md/display.css b/dist/display/md/display.css
@@ -1,30 +1,36 @@
 /* =========================================================================== *\
     Display utilities
+
+    !important is used to ensure that the utility classes take precedence over
+    any other styles that might be applied to the elements. This is one of the
+    rare cases where we use !important. Use the media query
+    versions if you only need things to be displayed a certain way at a certain
+    breakpoints.
 \* =========================================================================== */
 
 @media (--m-md) {
     .flex-md {
-        display: flex;
+        display: flex !important;
     }
 
     .inline-flex-md {
-        display: inline-flex;
+        display: inline-flex !important;
     }
 
     .block-md {
-        display: block;
+        display: block !important;
     }
 
     .inline-md {
-        display: inline;
+        display: inline !important;
     }
 
     .inline-block-md {
-        display: inline-block;
+        display: inline-block !important;
     }
 
     .hidden-md {
-        display: none;
+        display: none !important;
     }
 
     .visually-hidden-md {