add PR to changelog

cspell.json

@@ -151,7 +151,6 @@
     "ParamagicDev",
     "peta",
     "petabit",
-    "pointercancel",
     "Preact",
     "preconnect",
     "prerendered",
@@ -205,8 +204,6 @@
     "thead",
     "Themer",
     "tinycolor",
-    "touchcancel",
-    "touchend",
     "transitionend",
     "treeitem",
     "treeshaking",

packages/webawesome/docs/_includes/sidebar.njk

@@ -196,8 +196,6 @@
   </h2>
   <ul>
     <li><a href="/docs/utilities/align-items/">Align Items</a></li>
-    <!-- Pending 3.2.0 release -->
-    <!-- <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

@@ -13,11 +13,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 
 ## Next
 
-- Added `pointercancel` and `touchcancel` event handling to draggable elements to prevent drags from getting stuck
-- Added `justify-content` CSS utilities [pr:1930]
-- Added missing `.wa-gap-4xl` utility class [pr:1931]
 - Fixed a bug in `<wa-combobox>` that prevented the listbox from opening when options were preselected [issue:1883]
-- Fixed a bug in draggable elements that caused a TypeError on `touchend` events when `event.touches` was empty
+- 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 align items within flex and grid containers on the cross axis.
+description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
 layout: docs
 tags: layoutUtilities
 ---
@@ -10,7 +10,6 @@ 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 {
@@ -21,16 +20,16 @@ tags: layoutUtilities
   }
 </style>
 
-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).
+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.
 
-| 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>  |
+| 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>  |
 
-## What's the Cross Axis?
+## What's a Cross Axis?
 
-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.
+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.

packages/webawesome/docs/docs/utilities/gap.md

@@ -30,5 +30,4 @@ Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of t
 | `wa-gap-xl`  | `--wa-space-xl`  | <div class="wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div>  |
 | `wa-gap-2xl` | `--wa-space-2xl` | <div class="wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
 | `wa-gap-3xl` | `--wa-space-3xl` | <div class="wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
-<!-- Pending 3.2.0 release -->
-<!-- | `wa-gap-4xl` | `--wa-space-4xl` | <div class="wa-cluster wa-gap-4xl"><div class="preview-block"></div><div class="preview-block"></div></div> | -->
+| `wa-gap-4xl` | `--wa-space-4xl` | <div class="wa-cluster wa-gap-4xl"><div class="preview-block"></div><div class="preview-block"></div></div> |

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

@@ -1,39 +0,0 @@
----
-title: Justify Content
-description: Justify content utilities determine how space is distributed between items in flex and grid containers.
-layout: docs
-tags: layoutUtilities
-unpublished: true
-unlisted: true
----
-
-<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/internal/drag.ts

@@ -99,24 +99,20 @@ export class DraggableElement {
 
     document.addEventListener('pointerup', this.handleDragStop);
     document.addEventListener('pointermove', this.handleDragMove);
-    document.addEventListener('pointercancel', this.handleDragStop);
     document.addEventListener('touchend', this.handleDragStop);
     document.addEventListener('touchmove', this.handleDragMove);
-    document.addEventListener('touchcancel', this.handleDragStop);
     this.options.start(clientX, clientY);
   };
 
   private handleDragStop = (event: PointerEvent | TouchEvent) => {
-    const clientX = 'changedTouches' in event ? event.changedTouches[0].clientX : (event as PointerEvent).clientX;
-    const clientY = 'changedTouches' in event ? event.changedTouches[0].clientY : (event as PointerEvent).clientY;
+    const clientX = 'touches' in event ? event.touches[0].clientX : (event as PointerEvent).clientX;
+    const clientY = 'touches' in event ? event.touches[0].clientY : (event as PointerEvent).clientY;
 
     this.isDragging = false;
     document.removeEventListener('pointerup', this.handleDragStop);
     document.removeEventListener('pointermove', this.handleDragMove);
-    document.removeEventListener('pointercancel', this.handleDragStop);
     document.removeEventListener('touchend', this.handleDragStop);
     document.removeEventListener('touchmove', this.handleDragMove);
-    document.removeEventListener('touchcancel', this.handleDragStop);
     this.options.stop(clientX, clientY);
   };
 
@@ -145,10 +141,8 @@ export class DraggableElement {
   public stop() {
     document.removeEventListener('pointerup', this.handleDragStop);
     document.removeEventListener('pointermove', this.handleDragMove);
-    document.removeEventListener('pointercancel', this.handleDragStop);
     document.removeEventListener('touchend', this.handleDragStop);
     document.removeEventListener('touchmove', this.handleDragMove);
-    document.removeEventListener('touchcancel', this.handleDragStop);
     this.element.removeEventListener('pointerdown', this.handleDragStart);
     if (supportsTouch) {
       this.element.removeEventListener('touchstart', this.handleDragStart);

packages/webawesome/src/styles/utilities.css

@@ -5,7 +5,6 @@
 @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

@@ -1,20 +0,0 @@
-@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,6 +75,7 @@
   [class*='wa-frame'] {
     display: flex;
     aspect-ratio: 1 / 1;
+    justify-content: center;
     overflow: hidden;
   }
 
@@ -97,7 +98,6 @@
 
   :where([class*='wa-frame']) {
     align-items: center;
-    justify-content: center;
   }
   /* #endregion */
 
@@ -118,6 +118,7 @@
   [class*='wa-split'] {
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
   }
 
   [class*='wa-split'],
@@ -140,7 +141,6 @@
 
   :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 */
 }