Fix alert layout alignment and bump devalue for a security fix (#3140)

.changeset/alert-layout-alignment.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"@tabler/docs": patch
+---
+
+Fixed `.alert` layout so headings, descriptions, lists and buttons align and stack correctly.

core/scss/ui/_alerts.scss

@@ -20,15 +20,16 @@
   // scss-docs-end alert-css-vars
 
   position: relative;
-  display: flex;
-  flex-direction: row;
-  gap: var(--alert-gap);
   padding: var(--alert-padding-y) var(--alert-padding-x);
   margin-bottom: var(--alert-margin-bottom);
   color: var(--alert-color);
   background-color: color-mix(in oklab, var(--alert-bg), var(--bg-surface));
   border: var(--border-width) var(--border-style) var(--alert-border-color);
   @include border-radius(var(--alert-border-radius));
+
+  &:has(> .alert-icon) {
+    padding-inline-start: calc(var(--alert-padding-x) + var(--alert-icon-size) + var(--alert-gap));
+  }
 }
 
 .alert-heading {
@@ -44,9 +45,23 @@
 .alert-icon {
   width: var(--alert-icon-size) !important;
   height: var(--alert-icon-size) !important;
+  margin-inline-end: var(--alert-gap);
   color: var(--alert-color);
 }
 
+.alert > .alert-icon {
+  position: absolute;
+  inset-inline-start: var(--alert-padding-x);
+  top: var(--alert-padding-y);
+  margin-inline-end: 0;
+}
+
+.alert-action,
+.alert-link {
+  margin-inline-start: 0.25rem;
+  white-space: nowrap;
+}
+
 .alert-action {
   color: var(--alert-color);
   text-decoration: underline;
@@ -60,6 +75,11 @@
   margin: 0;
 }
 
+.alert > .alert-heading + div:has(+ .alert-action),
+.alert > .alert-heading + div:has(+ .alert-link) {
+  display: inline;
+}
+
 .alert-link {
   font-weight: $alert-link-font-weight;
   color: var(--alert-link-color);

docs/content/ui/components/alert.mdx

@@ -199,7 +199,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
 
 <Example>
 <div class="alert alert-success alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
+  <h3 class="alert-heading">Some Title</h3>
   <p class="text-secondary">Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
   <div class="btn-list">
     <a href="#" class="btn btn-success">Okay</a>
@@ -208,7 +208,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-info alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
+  <h3 class="alert-heading">Some Title</h3>
   <p class="text-secondary">Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
   <div class="btn-list">
     <a href="#" class="btn btn-info">Okay</a>
@@ -217,7 +217,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-warning alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
+  <h3 class="alert-heading">Some Title</h3>
   <p class="text-secondary">Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
   <div class="btn-list">
     <a href="#" class="btn btn-warning">Okay</a>
@@ -226,7 +226,7 @@ Buttons don't inherit the alert's color, so you should set the proper class if y
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-danger alert-dismissible" role="alert">
-  <h3 class="mb-1">Some Title</h3>
+  <h3 class="alert-heading">Some Title</h3>
   <p class="text-secondary">Lorem ipsum Minim ad pariatur eiusmod ea ut nulla aliqua est quis id dolore minim voluptate.</p>
   <div class="btn-list">
     <a href="#" class="btn btn-danger">Okay</a>
@@ -248,21 +248,17 @@ You can also use other elements, like icons and dismissible buttons, with this t
 
 <Example>
 <div class="alert alert-important alert-success alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <Icon name="check" class="alert-icon" />
-    </div>
-    <div>Wow! Everything worked!</div>
+  <div class="alert-icon">
+    <Icon name="check" class="alert-icon" />
   </div>
+  <div>Wow! Everything worked!</div>
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
-  <div class="d-flex">
-    <div>
-      <Icon name="alert-circle" class="alert-icon" />
-    </div>
-    <div>Your account has been deleted and can't be restored.</div>
+  <div class="alert-icon">
+    <Icon name="alert-circle" class="alert-icon" />
   </div>
+  <div>Your account has been deleted and can't be restored.</div>
   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close"></button>
 </div>
 </Example>

pnpm-lock.yaml

@@ -2434,8 +2434,8 @@ packages:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  devalue@5.8.1:
-    resolution: {integrity: sha512-4CXDYRBGqN+57wVJkuXBYmpAVUSg3L6JAQa/DFqm238G73E1wuyc/JhGQJzN7vUf/CMphYau2zXbfWzDR5aTEw==}
+  devalue@5.9.4:
+    resolution: {integrity: sha512-sPAT4pztbu6586/hrhOnMKS17IJrvg12mXiSPSS3W5qDeN2RGgvZ0diZCm31dBbnevfVmujNO3IM2wrS4Y2Rhg==}
 
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
@@ -6572,7 +6572,7 @@ snapshots:
       clsx: 2.1.1
       common-ancestor-path: 2.0.0
       cookie: 2.0.1
-      devalue: 5.8.1
+      devalue: 5.9.4
       diff: 9.0.0
       dset: 3.1.4
       es-module-lexer: 2.3.0
@@ -6972,7 +6972,7 @@ snapshots:
 
   detect-libc@2.1.2: {}
 
-  devalue@5.8.1: {}
+  devalue@5.9.4: {}
 
   devlop@1.1.0:
     dependencies: