Merge branch 'next' into lm/justify-content-utilities

packages/webawesome/docs/_includes/sidebar.njk

@@ -196,6 +196,7 @@
   </h2>
   <ul>
     <li><a href="/docs/utilities/align-items/">Align Items</a></li>
+    <li><a href="/docs/utilities/justify-content/">Justify Content</a></li>
     <li><a href="/docs/utilities/gap/">Gap</a></li>
     <li><a href="/docs/utilities/cluster/">Cluster</a></li>
     <li><a href="/docs/utilities/flank/">Flank</a></li>

packages/webawesome/docs/docs/resources/changelog.md

@@ -14,6 +14,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 ## Next
 
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
+- Added `justify-content` CSS utilities [pr:1930]
 - Added missing `.wa-gap-4xl` utility class [pr:1931]
 
 ## 3.1.0

packages/webawesome/docs/docs/utilities/align-items.md

@@ -1,6 +1,6 @@
 ---
 title: Align Items
-description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
+description: Align items utilities align items within flex and grid containers on the cross axis.
 layout: docs
 tags: layoutUtilities
 ---
@@ -10,6 +10,7 @@ tags: layoutUtilities
     border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
     border-radius: var(--wa-border-radius-m);
     min-block-size: 3em;
+    min-inline-size: 5em;
     padding: var(--wa-space-2xs);
   }
   .preview-block {
@@ -20,16 +21,16 @@ tags: layoutUtilities
   }
 </style>
 
-Web Awesome includes classes to set the `align-items` property of flex and grid containers. They can be used alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to align children in container on the container's cross axis.
+Web Awesome includes classes to set the `align-items` property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to align items in a container on the container's [cross axis](#whats-the-cross-axis).
 
-| Class Name                | `align-items` Value | Preview                                                                                                                                  |
-| ------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `wa-align-items-baseline` | `baseline`          | <div class="wa-cluster wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
-| `wa-align-items-center`   | `center`            | <div class="wa-cluster wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>   |
-| `wa-align-items-end`      | `flex-end`          | <div class="wa-cluster wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>      |
-| `wa-align-items-start`    | `flex-start`        | <div class="wa-cluster wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>    |
-| `wa-align-items-stretch`  | `stretch`           | <div class="wa-cluster wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| Class Name                | `align-items` Value | Preview                                                                                                                                             |
+| ------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `wa-align-items-baseline` | `baseline`          | <div class="wa-cluster wa-gap-2xs wa-align-items-baseline preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-align-items-center`   | `center`            | <div class="wa-cluster wa-gap-2xs wa-align-items-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-align-items-end`      | `flex-end`          | <div class="wa-cluster wa-gap-2xs wa-align-items-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>      |
+| `wa-align-items-start`    | `flex-start`        | <div class="wa-cluster wa-gap-2xs wa-align-items-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>    |
+| `wa-align-items-stretch`  | `stretch`           | <div class="wa-cluster wa-gap-2xs wa-align-items-stretch preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
 
-## What's a Cross Axis?
+## What's the Cross Axis?
 
-The cross axis runs perpendicular to a flex container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.
+The cross axis runs perpendicular to a container's content direction. For containers where `flex-direction` is `row` and content flows in the inline direction, the cross axis runs in the block direction. For containers where `flex-direction` is `column` and content flows in the block direction, the cross axis runs in the inline direction.

packages/webawesome/docs/docs/utilities/justify-content.md

@@ -0,0 +1,37 @@
+---
+title: Justify Content
+description: Justify content utilities determine how space is distributed between items in flex and grid containers.
+layout: docs
+tags: layoutUtilities
+---
+
+<style>
+  .preview-wrapper {
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-m);
+    min-block-size: 3em;
+    min-inline-size: 5em;
+    padding: var(--wa-space-2xs);
+  }
+  .preview-block {
+    aspect-ratio: 1 / 1;
+    background-color: var(--wa-color-neutral-fill-loud);
+    border-radius: var(--wa-border-radius-s);
+    min-block-size: 1em;
+  }
+</style>
+
+Web Awesome includes classes to set the `justify-content` property of flex and grid containers. Use them alongside other Web Awesome layout utilities, like [cluster](/docs/utilities/cluster) and [stack](/docs/utilities/stack), to distribute space between items along the container's [main axis](#whats-the-main-axis).
+
+| Class Name                         | `justify-content` Value | Preview                                                                                                                                                      |
+| ---------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `wa-justify-content-start`         | `flex-start`            | <div class="wa-cluster wa-gap-2xs wa-justify-content-start preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>         |
+| `wa-justify-content-end`           | `flex-end`              | <div class="wa-cluster wa-gap-2xs wa-justify-content-end preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>           |
+| `wa-justify-content-center`        | `center`                | <div class="wa-cluster wa-gap-2xs wa-justify-content-center preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>        |
+| `wa-justify-content-space-around`  | `space-around`          | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-around preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `wa-justify-content-space-between` | `space-between`         | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-between preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-justify-content-space-evenly`  | `space-evenly`          | <div class="wa-cluster wa-gap-2xs wa-justify-content-space-evenly preview-wrapper"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+
+## What's the Main Axis?
+
+The main axis runs parallel to a container's content direction. For grid containers and flex containers where `flex-direction` is `row`, the main axis runs in the inline direction. For containers where `flex-direction` is `column`, the main axis runs in the block direction.

packages/webawesome/src/styles/utilities.css

@@ -5,6 +5,7 @@
 @import url('utilities/scroll-lock.css');
 @import url('utilities/placeholder.css');
 @import url('utilities/align-items.css');
+@import url('utilities/justify-content.css');
 @import url('utilities/border-radius.css');
 @import url('utilities/gap.css');
 @import url('utilities/text.css');

packages/webawesome/src/styles/utilities/justify-content.css

@@ -0,0 +1,20 @@
+@layer wa-utilities {
+  .wa-justify-content-start {
+    justify-content: flex-start;
+  }
+  .wa-justify-content-end {
+    justify-content: flex-end;
+  }
+  .wa-justify-content-center {
+    justify-content: center;
+  }
+  .wa-justify-content-space-around {
+    justify-content: space-around;
+  }
+  .wa-justify-content-space-between {
+    justify-content: space-between;
+  }
+  .wa-justify-content-space-evenly {
+    justify-content: space-evenly;
+  }
+}

packages/webawesome/src/styles/utilities/layout.css

@@ -27,11 +27,11 @@
   [class*='wa-cluster'] {
     display: flex;
     flex-wrap: wrap;
-    justify-content: flex-start;
   }
 
   :where([class*='wa-cluster']) {
     align-items: center;
+    justify-content: flex-start;
   }
   /* #endregion */
 
@@ -75,7 +75,6 @@
   [class*='wa-frame'] {
     display: flex;
     aspect-ratio: 1 / 1;
-    justify-content: center;
     overflow: hidden;
   }
 
@@ -98,6 +97,7 @@
 
   :where([class*='wa-frame']) {
     align-items: center;
+    justify-content: center;
   }
   /* #endregion */
 
@@ -118,7 +118,6 @@
   [class*='wa-split'] {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
   }
 
   [class*='wa-split'],
@@ -141,6 +140,7 @@
 
   :where([class*='wa-split']) {
     align-items: center;
+    justify-content: space-between;
   }
 
   /* #endregion */
@@ -149,11 +149,11 @@
   [class*='wa-stack'] {
     display: flex;
     flex-direction: column;
-    justify-content: flex-start;
   }
 
   :where([class*='wa-stack']) {
     align-items: stretch;
+    justify-content: flex-start;
   }
   /* #endregion */
 }