From c69e98cd7fb19d3a80ddfc198dd98a5895b25535 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Thu, 21 Mar 2024 13:55:22 -0400
Subject: [PATCH] remove slot detection from alert

---
 docs/src/content/docs/components/alert.md |  9 +++++++++
 src/components/alert/alert.component.ts   |  3 ---
 src/components/alert/alert.styles.ts      | 10 ++++++----
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/docs/src/content/docs/components/alert.md b/docs/src/content/docs/components/alert.md
index 41cb4acb0..70b0aeb70 100644
--- a/docs/src/content/docs/components/alert.md
+++ b/docs/src/content/docs/components/alert.md
@@ -9,6 +9,15 @@ layout: ../../../layouts/ComponentLayout.astro
   <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
   This is a standard alert. You can customize its content and even the icon.
 </wa-alert>
+
+<wa-alert open>
+  <wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
+  <div style="border: solid 2px tomato; height: 2rem;"></div>
+</wa-alert>
+
+<wa-alert open>
+  <div style="border: solid 2px tomato; height: 2rem;"></div>
+</wa-alert>
 ```
 
 ```jsx:react
diff --git a/src/components/alert/alert.component.ts b/src/components/alert/alert.component.ts
index db20707d5..09422826b 100644
--- a/src/components/alert/alert.component.ts
+++ b/src/components/alert/alert.component.ts
@@ -1,7 +1,6 @@
 import { animateTo, stopAnimations } from '../../internal/animate.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';
-import { HasSlotController } from '../../internal/slot.js';
 import { html } from 'lit';
 import { LocalizeController } from '../../utilities/localize.js';
 import { property, query } from 'lit/decorators.js';
@@ -55,7 +54,6 @@ export default class WaAlert extends WebAwesomeElement {
   static dependencies = { 'wa-icon-button': WaIconButton };
 
   private autoHideTimeout: number;
-  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');
   private readonly localize = new LocalizeController(this);
 
   @query('[part~="base"]') base: HTMLElement;
@@ -198,7 +196,6 @@ export default class WaAlert extends WebAwesomeElement {
           alert: true,
           'alert--open': this.open,
           'alert--closable': this.closable,
-          'alert--has-icon': this.hasSlotController.test('icon'),
           'alert--brand': this.variant === 'brand',
           'alert--success': this.variant === 'success',
           'alert--neutral': this.variant === 'neutral',
diff --git a/src/components/alert/alert.styles.ts b/src/components/alert/alert.styles.ts
index f986be9fb..5972c5fff 100644
--- a/src/components/alert/alert.styles.ts
+++ b/src/components/alert/alert.styles.ts
@@ -56,10 +56,10 @@ export default css`
     border-width: var(--border-width);
     color: var(--content-color);
     font: inherit;
+    padding: var(--padding);
     margin: inherit;
   }
 
-  .alert:not(.alert--has-icon) .alert__icon,
   .alert:not(.alert--closable) .alert__close-button {
     display: none;
   }
@@ -70,13 +70,15 @@ export default css`
     align-items: center;
     color: var(--icon-color);
     font-size: var(--icon-size);
-    padding-inline-start: var(--padding);
+  }
+
+  .alert__icon ::slotted(*) {
+    margin-inline-end: var(--padding) !important;
   }
 
   .alert__message {
     flex: 1 1 auto;
     display: block;
-    padding: var(--padding);
     overflow: hidden;
   }
 
@@ -86,7 +88,7 @@ export default css`
     align-items: center;
     color: currentColor;
     font-size: var(--wa-font-size-m);
-    padding-inline-end: var(--padding);
+    padding-inline-start: var(--padding);
   }
 
   .alert__close-button:hover::part(base) {