Update dependency stylelint-config-cloudfour to v12

.changeset/brave-corners-float.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Use logical CSS for corner radii and floats: `border-start-start-radius` and friends instead of `border-top-left-radius` in the Alert, Calendar Date and Input Group patterns, and `float`/`clear` `inline-start`/`inline-end` instead of `left`/`right` in Hype Group and the WordPress image and Jetpack contact form styles. Remove the physical `float` fallbacks from the float utilities.

.stylelintrc.js

@@ -1,26 +1,6 @@
 module.exports = {
   extends: ['stylelint-config-cloudfour'],
   rules: {
-    // Disable stylelint-scss rules that conflict with Prettier.
-    //
-    // stylelint 15 deprecated its own stylistic rules and 16 removed them, which is
-    // why `stylelint-config-prettier` is gone -- it has nothing left to turn off and
-    // is unusable past stylelint 14. That retirement did not extend to stylelint-scss,
-    // which still ships and enables every one of these, so they still have to be
-    // disabled by hand.
-    'scss/at-else-closing-brace-newline-after': null,
-    'scss/at-else-closing-brace-space-after': null,
-    'scss/at-else-empty-line-before': null,
-    'scss/at-else-if-parentheses-space-before': null,
-    'scss/at-function-parentheses-space-before': null,
-    'scss/at-if-closing-brace-newline-after': null,
-    'scss/at-if-closing-brace-space-after': null,
-    'scss/at-mixin-parentheses-space-before': null,
-    'scss/dollar-variable-colon-space-after': null,
-    'scss/dollar-variable-colon-space-before': null,
-    'scss/operator-no-newline-after': null,
-    'scss/operator-no-newline-before': null,
-    'scss/operator-no-unspaced': null,
     /**
      * 1. separating grid-template-rows and grid-template-columns
      *    improves readability
@@ -51,21 +31,5 @@ module.exports = {
       true,
       { ignoreMediaFeatureNames: ['breakpoint'] },
     ],
-    // Prefer flow-relative (logical) properties, units, and keywords.
-    'property-layout-mappings': [
-      'flow-relative',
-      {
-        // Until Safari 15 adoption is higher
-        ignoreProperties: [/^border-.+-radius$/v],
-      },
-    ],
-    'unit-layout-mappings': 'flow-relative',
-    'value-keyword-layout-mappings': [
-      'flow-relative',
-      {
-        // Until Safari 15 adoption is higher
-        ignoreProperties: ['clear', 'float'],
-      },
-    ],
   },
 };

package.json

@@ -130,7 +130,7 @@
     "storybook": "10.6.1",
     "style-dictionary": "5.6.1",
     "stylelint": "17.16.0",
-    "stylelint-config-cloudfour": "11.0.0",
+    "stylelint-config-cloudfour": "12.0.0",
     "stylelint-scss": "7.3.0",
     "svgo": "4.1.0",
     "terser": "5.51.2",

src/components/alert/alert.scss

@@ -96,8 +96,8 @@
   --icon-size: #{size.$icon-medium};
   align-items: center;
   background-color: var(--theme-color-background-icon);
-  border-bottom-left-radius: size.$border-radius-medium;
-  border-top-left-radius: size.$border-radius-medium;
+  border-end-start-radius: size.$border-radius-medium;
+  border-start-start-radius: size.$border-radius-medium;
   color: var(--theme-color-icon);
   display: flex;
   grid-area: icon;

src/components/calendar-date/calendar-date.scss

@@ -44,8 +44,8 @@ $radius: size.$border-radius-medium;
   block-size: ms.step(3);
   border: $edge-size solid color.$base-gray-darker; /* 1 */
   border-block-end-width: 0;
-  border-top-left-radius: $radius;
-  border-top-right-radius: $radius;
+  border-start-end-radius: $radius;
+  border-start-start-radius: $radius;
   color: color.$text-light-emphasis;
   display: flex;
   flex: none;
@@ -91,8 +91,8 @@ $radius: size.$border-radius-medium;
   background-color: color.$text-light-emphasis;
   border: $edge-size solid var(--theme-color-border-calendar-date);
   border-block-start-width: 0;
-  border-bottom-left-radius: $radius;
-  border-bottom-right-radius: $radius;
+  border-end-end-radius: $radius;
+  border-end-start-radius: $radius;
   color: color.$text-dark;
   display: flex;
   flex: 1;

src/design/demo/favicon-tabs.scss

@@ -18,8 +18,8 @@
   li {
     align-items: center;
     block-size: 36px;
-    border-top-left-radius: size.$border-radius-medium;
-    border-top-right-radius: size.$border-radius-medium;
+    border-start-end-radius: size.$border-radius-medium;
+    border-start-start-radius: size.$border-radius-medium;
     display: flex;
     flex: 1;
     max-inline-size: 220px;

src/mixins/_toggle-input.scss

@@ -165,14 +165,11 @@
     @include base-hover;
   }
 
-  /// 1. Our linter is getting confused by the Sass expression and trying to
-  ///    split this into multiple lines.
   &::after {
     @include base-inner-pseudo-default;
     background-color: currentColor;
     border-radius: inherit;
-    // stylelint-disable-next-line liberty/use-logical-spec
-    inset: size.$edge-control * 2; // 1
+    inset: size.$edge-control * 2;
   }
 
   &:checked {

src/objects/hype-group/hype-group.scss

@@ -116,7 +116,7 @@ $breakpoint-wide: breakpoint.$m + 5em;
 
   @media (width < $breakpoint-wide) {
     aspect-ratio: 2/3; // 1
-    float: right;
+    float: inline-end;
     inline-size: calc(50% - #{size.$spacing-gap-inline-small}); // 2
     margin: size.$spacing-gap-inline-small;
     margin-inline-end: 0;

src/objects/input-group/input-group.scss

@@ -12,13 +12,13 @@
   }
 
   > :not(:first-child) {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
   }
 
   > :not(:last-child) {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
   }
 
   > * + * {

src/utilities/float/float.mdx

@@ -10,7 +10,7 @@ Utilities for controlling the float of an element. Useful for responsively arran
 
 ## Flow-Relative Properties
 
-These utilities use flow-relative values instead of specific directions [in supported browsers](https://caniuse.com/mdn-css_properties_float_flow_relative_values) to simplify potential localization projects.
+These utilities use [flow-relative values](https://caniuse.com/mdn-css_properties_float_flow_relative_values) instead of specific directions to simplify potential localization projects.
 
 The following table maps the traditional directional property for `direction: ltr` and `writing-mode: horizontal-tb` to its equivalent flow-relative property:
 

src/utilities/float/float.scss

@@ -4,12 +4,10 @@
 // breakpoint suffixes.
 @mixin _float-utilities($suffix: '') {
   .u-float-inline-start#{$suffix} {
-    float: left;
     float: inline-start;
   }
 
   .u-float-inline-end#{$suffix} {
-    float: right;
     float: inline-end;
   }
 

src/vendor/wordpress/styles/_core-blocks.scss

@@ -477,14 +477,14 @@ figure.wp-block-image {
 
   &.alignleft {
     @media (width >= breakpoint.$m) {
-      float: left;
+      float: inline-start;
       margin-inline-end: size.$rhythm-generous;
     }
   }
 
   &.alignright {
     @media (width >= breakpoint.$m) {
-      float: right;
+      float: inline-end;
       margin-inline-start: size.$rhythm-generous;
     }
   }

src/vendor/wordpress/styles/_jetpack-blocks.scss

@@ -154,7 +154,7 @@
   /// too much to enforce consistent columns.
   .field-name,
   .field-value {
-    float: left;
+    float: inline-start;
   }
 
   /// 1. Break onto a new line with each field name.
@@ -163,7 +163,7 @@
   ///    affordances to make the values distinct.
   /// 3. Add a bit of space between names and values.
   .field-name {
-    clear: left; // 1
+    clear: inline-start; // 1
     font-weight: font-weight.$medium; // 2
     margin-inline-end: 1ch; // 3
 
@@ -180,7 +180,7 @@
 
     /// Empty field values need to clear floats to maintain margin.
     &:empty {
-      clear: left;
+      clear: inline-start;
       float: none;
 
       /// If the browser supports `:has()`, we can hide the field value entirely