Merge branch 'next' into drag-fix

cspell.json

@@ -70,7 +70,6 @@
     "exportparts",
     "fetchpriority",
     "fieldsets",
-    "flexbox",
     "focusin",
     "focusout",
     "fontawesome",
@@ -241,6 +240,8 @@
     "src/translations/!(en).ts",
     "**/*.min.js"
   ],
-  "ignoreRegExpList": ["(^|[^a-z])sl[a-z]*(^|[^a-z])"],
+  "ignoreRegExpList": [
+    "(^|[^a-z])sl[a-z]*(^|[^a-z])"
+  ],
   "useGitignore": true
 }

packages/webawesome/docs/assets/styles/docs.css

@@ -10,13 +10,6 @@
 :root {
   --wa-brand-orange: #f36944;
   --wa-brand-grey: #30323b;
-
-  /* layout-based example style aspects */
-  --layout-example-border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
-  --layout-example-border-radius: var(--wa-border-radius-l);
-  --layout-example-padding: var(--wa-space-s);
-  --layout-example-element-background: var(--wa-color-indigo-60);
-  --layout-example-element-border-radius: var(--wa-border-radius-m);
 }
 
 .wa-dark .only-light,

packages/webawesome/docs/docs/components/divider.md

@@ -41,7 +41,7 @@ Use the `--spacing` custom property to change the amount of space between the di
 
 ### Orientation
 
-The default orientation for dividers is `horizontal`. Set `orientation` attribute to `vertical` to draw a vertical divider. The divider will span the full height of its [Flexbox](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) or [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid) container.
+The default orientation for dividers is `horizontal`. Set `orientation` attribute to `vertical` to draw a vertical divider. The divider will span the full height of its container.
 
 ```html {.example}
 <div style="display: flex; align-items: center;">
@@ -53,10 +53,6 @@ The default orientation for dividers is `horizontal`. Set `orientation` attribut
 </div>
 ```
 
-:::info
-If your container isn't Flexbox or CSS Grid, you may need to set an explicit height for the divider.
-:::
-
 ### Dropdown Dividers
 
 Use dividers in [dropdowns](/docs/components/dropdown) to visually group dropdown items.

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

@@ -13,18 +13,11 @@ 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]
-- Added `pointercancel` and `touchcancel` event handling to draggable elements to prevent drags from getting stuck
-- Added `wa-justify-content-*` utility classes [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 `<wa-popup>` and `<wa-dropdown-item>` that caused an error when removing a popup while it was opening [issue:1910]
-- Fixed a bug in `<wa-popup>` and `<wa-dropdown>` that caused errors when shadow DOM queries returned null [issue:1911]
 - 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
-- Fixed a bug in `<wa-tree-item>` that caused the cursor to show a pointer when no expand icon was present [pr:1936]
-- Modified `wa-align-items-*` utility classes to apply `display: flex` by default [pr:1943]
 
 ## 3.1.0
 

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

@@ -7,16 +7,15 @@ tags: layoutUtilities
 
 <style>
   .preview-wrapper {
-    border: var(--layout-example-border);
+    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(--layout-example-element-background);
+    background-color: var(--wa-color-neutral-fill-loud);
     border-radius: var(--wa-border-radius-s);
     min-block-size: 1em;
   }

packages/webawesome/docs/docs/utilities/cluster.md

@@ -7,21 +7,19 @@ tags: layoutUtilities
 
 <style>
   :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-cluster']:has(div:empty) {
-    border: var(--layout-example-border);
-    border-radius: var(--layout-example-border-radius);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-cluster'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }}
-
 ```html {.example}
 <div class="wa-cluster">
   <div></div>

packages/webawesome/docs/docs/utilities/flank.md

@@ -7,20 +7,20 @@ tags: layoutUtilities
 
 <style>
   :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-flank']:has(div:empty) {
-    border: var(--layout-example-border);
-    border-radius: var(--layout-example-border-radius);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-flank'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }} When space is limited, the items wrap.
+When space is limited, the items wrap.
 
 ```html {.example}
 <div class="wa-flank">

packages/webawesome/docs/docs/utilities/frame.md

@@ -7,20 +7,18 @@ tags: layoutUtilities
 
 <style>
   [class*='wa-frame']:has(div:empty) {
-    border: var(--layout-example-border);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-frame'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }}
-
 ```html {.example}
 <div class="wa-frame" style="max-inline-size: 20rem;">
   <div></div>

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

@@ -6,19 +6,11 @@ tags: layoutUtilities
 ---
 
 <style>
-  .preview-wrapper {
-    border: var(--layout-example-border);
-    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(--layout-example-element-background);
+    background-color: var(--wa-color-neutral-fill-loud);
     border-radius: var(--wa-border-radius-s);
-    min-block-size: 1em;
+    min-block-size: 1.5em;
   }
 </style>
 
@@ -28,15 +20,15 @@ Besides `wa-gap-0`, which sets `gap` to zero, each class corresponds to one of t
 
 | Class Name   | `gap` Value      | Preview                                                                                                     |
 | ------------ | ---------------- | ----------------------------------------------------------------------------------------------------------- |
-| `wa-gap-0`   | `0`              | <div class="preview-wrapper wa-cluster wa-gap-0"><div class="preview-block"></div><div class="preview-block"></div></div>   |
-| `wa-gap-3xs` | `--wa-space-3xs` | <div class="preview-wrapper wa-cluster wa-gap-3xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
-| `wa-gap-2xs` | `--wa-space-2xs` | <div class="preview-wrapper wa-cluster wa-gap-2xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
-| `wa-gap-xs`  | `--wa-space-xs`  | <div class="preview-wrapper wa-cluster wa-gap-xs"><div class="preview-block"></div><div class="preview-block"></div></div>  |
-| `wa-gap-s`   | `--wa-space-s`   | <div class="preview-wrapper wa-cluster wa-gap-s"><div class="preview-block"></div><div class="preview-block"></div></div>   |
-| `wa-gap-m`   | `--wa-space-m`   | <div class="preview-wrapper wa-cluster wa-gap-m"><div class="preview-block"></div><div class="preview-block"></div></div>   |
-| `wa-gap-l`   | `--wa-space-l`   | <div class="preview-wrapper wa-cluster wa-gap-l"><div class="preview-block"></div><div class="preview-block"></div></div>   |
-| `wa-gap-xl`  | `--wa-space-xl`  | <div class="preview-wrapper wa-cluster wa-gap-xl"><div class="preview-block"></div><div class="preview-block"></div></div>  |
-| `wa-gap-2xl` | `--wa-space-2xl` | <div class="preview-wrapper wa-cluster wa-gap-2xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
-| `wa-gap-3xl` | `--wa-space-3xl` | <div class="preview-wrapper wa-cluster wa-gap-3xl"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-0`   | `0`              | <div class="wa-cluster wa-gap-0"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-3xs` | `--wa-space-3xs` | <div class="wa-cluster wa-gap-3xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-2xs` | `--wa-space-2xs` | <div class="wa-cluster wa-gap-2xs"><div class="preview-block"></div><div class="preview-block"></div></div> |
+| `wa-gap-xs`  | `--wa-space-xs`  | <div class="wa-cluster wa-gap-xs"><div class="preview-block"></div><div class="preview-block"></div></div>  |
+| `wa-gap-s`   | `--wa-space-s`   | <div class="wa-cluster wa-gap-s"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-m`   | `--wa-space-m`   | <div class="wa-cluster wa-gap-m"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `wa-gap-l`   | `--wa-space-l`   | <div class="wa-cluster wa-gap-l"><div class="preview-block"></div><div class="preview-block"></div></div>   |
+| `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="preview-wrapper 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/grid.md

@@ -7,21 +7,19 @@ tags: layoutUtilities
 
 <style>
   :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-grid']:has(div:empty) {
-    border: var(--layout-example-border);
-    border-radius: var(--layout-example-border-radius);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-grid'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }}
-
 ```html {.example}
 <div class="wa-grid">
   <div></div>

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

@@ -9,16 +9,15 @@ unlisted: true
 
 <style>
   .preview-wrapper {
-    border: var(--layout-example-border);
+    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(--layout-example-element-background);
+    background-color: var(--wa-color-neutral-fill-loud);
     border-radius: var(--wa-border-radius-s);
     min-block-size: 1em;
   }

packages/webawesome/docs/docs/utilities/split.md

@@ -7,21 +7,19 @@ tags: layoutUtilities
 
 <style>
   :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-split']:has(div:empty) {
-    border: var(--layout-example-border);
-    border-radius: var(--layout-example-border-radius);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-split'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }}
-
 ```html {.example}
 <div class="wa-split">
   <div></div>

packages/webawesome/docs/docs/utilities/stack.md

@@ -7,21 +7,19 @@ tags: layoutUtilities
 
 <style>
   :is(.wa-flank, .wa-grid, .wa-stack) > [class*='wa-stack']:has(div:empty) {
-    border: var(--layout-example-border);
-    border-radius: var(--layout-example-border-radius);
-    padding: var(--layout-example-padding);
+    border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-s);
   }
 
   [class*='wa-stack'] div:empty {
-    background-color: var(--layout-example-element-background);
-    border-radius: var(--layout-example-element-border-radius);
+    background-color: var(--wa-color-indigo-60);
+    border-radius: var(--wa-border-radius-m);
     min-block-size: 4rem;
     min-inline-size: 4rem;
   }
 </style>
 
-{{ description }}
-
 ```html {.example}
 <div class="wa-stack">
   <div></div>

packages/webawesome/scripts/plop/plopfile.js

@@ -37,7 +37,7 @@ export default function (plop) {
       },
       {
         type: 'add',
-        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.styles.ts',
+        path: '../../src/components/{{ tagWithoutPrefix tag }}/{{ tagWithoutPrefix tag }}.css',
         templateFile: 'templates/component/styles.hbs',
       },
       {

packages/webawesome/scripts/plop/templates/component/component.hbs

@@ -2,7 +2,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
-import styles from './{{ tagWithoutPrefix tag }}.styles.js';
+import styles from './{{ tagWithoutPrefix tag }}.css';
 
 /**
  * @summary Short summary of the component's intended use.
@@ -21,7 +21,7 @@ import styles from './{{ tagWithoutPrefix tag }}.styles.js';
  */
  @customElement("{{ tag }}")
 export default class {{ properCase tag }} extends WebAwesomeElement {
-  static css = [styles];
+  static css = styles;
 
   /** An example attribute. */
   @property() attr = 'example';

packages/webawesome/scripts/plop/templates/component/styles.hbs

@@ -1,7 +1,3 @@
-import { css } from "lit";
-
-export default css`
-  :host {
-    display: block;
+:host {
+  display: block;
 }
-`

packages/webawesome/src/components/dropdown-item/dropdown-item.ts

@@ -155,21 +155,20 @@ export default class WaDropdownItem extends WebAwesomeElement {
 
   /** Opens the submenu. */
   async openSubmenu() {
-    const submenu = this.submenuElement;
-    if (!this.hasSubmenu || !submenu || !this.isConnected) return;
+    if (!this.hasSubmenu || !this.submenuElement) return;
 
     // Notify parent dropdown to handle positioning
     this.notifyParentOfOpening();
 
     // Use Popover API to show the submenu
-    submenu.showPopover?.();
-    submenu.hidden = false;
-    submenu.setAttribute('data-visible', '');
+    this.submenuElement.showPopover();
+    this.submenuElement.hidden = false;
+    this.submenuElement.setAttribute('data-visible', '');
     this.submenuOpen = true;
     this.setAttribute('aria-expanded', 'true');
 
     // Animate the submenu
-    await animateWithClass(submenu, 'show');
+    await animateWithClass(this.submenuElement, 'show');
 
     // Set focus to the first submenu item
     setTimeout(() => {
@@ -211,19 +210,16 @@ export default class WaDropdownItem extends WebAwesomeElement {
 
   /** Closes the submenu. */
   async closeSubmenu() {
-    const submenu = this.submenuElement;
-    if (!this.hasSubmenu || !submenu) return;
+    if (!this.hasSubmenu || !this.submenuElement) return;
 
     this.submenuOpen = false;
     this.setAttribute('aria-expanded', 'false');
 
-    if (!submenu.hidden) {
-      await animateWithClass(submenu, 'hide');
-      if (submenu?.isConnected) {
-        submenu.hidden = true;
-        submenu.removeAttribute('data-visible');
-        submenu.hidePopover?.();
-      }
+    if (!this.submenuElement.hidden) {
+      await animateWithClass(this.submenuElement, 'hide');
+      this.submenuElement.hidden = true;
+      this.submenuElement.removeAttribute('data-visible');
+      this.submenuElement.hidePopover();
     }
   }
 

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -138,9 +138,9 @@ export default class WaDropdown extends WebAwesomeElement {
 
   /** Gets all dropdown items slotted in the menu. */
   private getItems(includeDisabled = false): WaDropdownItem[] {
-    const items = (this.defaultSlot?.assignedElements({ flatten: true }) ?? []).filter(
-      el => el.localName === 'wa-dropdown-item',
-    ) as WaDropdownItem[];
+    const items = this.defaultSlot
+      .assignedElements({ flatten: true })
+      .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
 
     return includeDisabled ? items : items.filter(item => !item.disabled);
   }
@@ -165,9 +165,9 @@ export default class WaDropdown extends WebAwesomeElement {
 
   /** Syncs item sizes with the dropdown's size property. */
   private syncItemSizes() {
-    const items = (this.defaultSlot?.assignedElements({ flatten: true }) ?? []).filter(
-      el => el.localName === 'wa-dropdown-item',
-    ) as WaDropdownItem[];
+    const items = this.defaultSlot
+      .assignedElements({ flatten: true })
+      .filter(el => el.localName === 'wa-dropdown-item') as WaDropdownItem[];
     items.forEach(item => (item.size = this.size));
   }
 
@@ -230,7 +230,7 @@ export default class WaDropdown extends WebAwesomeElement {
   /** Shows the dropdown menu. This should only be called from within updated(). */
   private async showMenu() {
     const anchor = this.getTrigger();
-    if (!anchor || !this.popup || !this.menu) return;
+    if (!anchor) return;
 
     const showEvent = new WaShowEvent();
     this.dispatchEvent(showEvent);
@@ -270,8 +270,6 @@ export default class WaDropdown extends WebAwesomeElement {
 
   /** Hides the dropdown menu. This should only be called from within updated(). */
   private async hideMenu() {
-    if (!this.popup || !this.menu) return;
-
     const hideEvent = new WaHideEvent({ source: this });
     this.dispatchEvent(hideEvent);
     if (hideEvent.defaultPrevented) {
@@ -722,12 +720,12 @@ export default class WaDropdown extends WebAwesomeElement {
     nativeButton.setAttribute('aria-haspopup', 'menu');
     nativeButton.setAttribute('aria-expanded', this.open ? 'true' : 'false');
 
-    this.menu?.setAttribute('aria-expanded', 'false');
+    this.menu.setAttribute('aria-expanded', 'false');
   }
 
   render() {
     // On initial render, we want to use this.open, for everything else, we sync off of this.popup.active to get animations working.
-    let active = this.hasUpdated ? this.popup?.active : this.open;
+    let active = this.hasUpdated ? this.popup.active : this.open;
 
     return html`
       <wa-popup

packages/webawesome/src/components/popup/popup.ts

@@ -286,11 +286,11 @@ export default class WaPopup extends WebAwesomeElement {
 
   private start() {
     // We can't start the positioner without an anchor
-    if (!this.anchorEl || !this.active || !this.isConnected) {
+    if (!this.anchorEl || !this.active) {
       return;
     }
 
-    this.popup?.showPopover?.();
+    this.popup.showPopover?.();
 
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
@@ -299,7 +299,7 @@ export default class WaPopup extends WebAwesomeElement {
 
   private async stop(): Promise<void> {
     return new Promise(resolve => {
-      this.popup?.hidePopover?.();
+      this.popup.hidePopover?.();
 
       if (this.cleanup) {
         this.cleanup();
@@ -317,7 +317,7 @@ export default class WaPopup extends WebAwesomeElement {
   /** Forces the popup to recalculate and reposition itself. */
   reposition() {
     // Nothing to do if the popup is inactive or the anchor doesn't exist
-    if (!this.active || !this.anchorEl || !this.popup) {
+    if (!this.active || !this.anchorEl) {
       return;
     }
 
@@ -498,7 +498,7 @@ export default class WaPopup extends WebAwesomeElement {
   }
 
   private updateHoverBridge = () => {
-    if (this.hoverBridge && this.anchorEl && this.popup) {
+    if (this.hoverBridge && this.anchorEl) {
       const anchorRect = this.anchorEl.getBoundingClientRect();
       const popupRect = this.popup.getBoundingClientRect();
       const isVertical = this.placement.includes('top') || this.placement.includes('bottom');

packages/webawesome/src/components/tooltip/tooltip.ts

@@ -79,7 +79,7 @@ export default class WaTooltip extends WebAwesomeElement {
   /** The amount of time to wait before showing the tooltip when the user mouses in. */
   @property({ attribute: 'show-delay', type: Number }) showDelay = 150;
 
-  /** The amount of time to wait before hiding the tooltip when the user mouses out. */
+  /** The amount of time to wait before hiding the tooltip when the user mouses out.. */
   @property({ attribute: 'hide-delay', type: Number }) hideDelay = 0;
 
   /**

packages/webawesome/src/components/tree-item/tree-item.styles.ts

@@ -85,10 +85,6 @@ export default css`
     display: none;
   }
 
-  .tree-item:not(.tree-item-has-expand-button):not(.tree-item-loading) .expand-button {
-    cursor: default;
-  }
-
   .tree-item-loading .expand-icon-slot wa-icon {
     display: none;
   }

packages/webawesome/src/styles/utilities/align-items.css

@@ -1,15 +1,4 @@
 @layer wa-utilities {
-  /* Apply Flexbox with 0 specificity to ensure an align-items util produces a visible change */
-  :where(
-    .wa-align-items-start,
-    .wa-align-items-end,
-    .wa-align-items-center,
-    .wa-align-items-stretch,
-    .wa-align-items-baseline
-  ) {
-    display: flex;
-  }
-
   .wa-align-items-start {
     align-items: flex-start;
   }

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

@@ -1,16 +1,4 @@
 @layer wa-utilities {
-  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
-  :where(
-    .wa-justify-content-start,
-    .wa-justify-content-end,
-    .wa-justify-content-center,
-    .wa-justify-content-space-around,
-    .wa-justify-content-space-between,
-    .wa-justify-content-space-evenly
-  ) {
-    display: flex;
-  }
-
   .wa-justify-content-start {
     justify-content: flex-start;
   }