@dialpad/dialtone-css 8.74.0 → 8.75.0

package/lib/build/less/components/button.less

@@ -561,7 +561,38 @@
 //  $$  LOADING STATE
 //  ----------------------------------------------------------------------------
 .d-btn--loading {
-  .d-btn-loading();
+  //  Disable clicking while the loader is in place
+  pointer-events: none;
+
+  //  Hide anything that was there before
+  .d-btn__icon,
+  .d-btn__label {
+    opacity: 0;
+    transition: opacity 50ms var(--ttf-in-out);
+  }
+
+  //  Pseudo-element spinner (fallback for raw HTML consumers)
+  &::before {
+    position: absolute;
+    width: var(--dt-size-500);
+    height: var(--dt-size-500);
+    border: var(--dt-size-200) solid currentColor;
+    border-left-color: transparent !important;
+    border-radius: var(--dt-size-radius-circle);
+    animation: d-loading-circle 900ms infinite linear;
+    content: "";
+  }
+
+  // When a real DtLoader element is present, suppress the pseudo-element.
+  // Back-compat with old class name.
+  &:has(> .d-btn__loader)::before {
+    content: none;
+  }
+
+  //  Position the DtLoader element within the button
+  > :where(.d-btn__loader) {
+    position: absolute;
+  }
 }
 
 //  $$  DISABLED STATE
@@ -650,35 +681,6 @@
   --brand-color-l: 26%;
 }
 
-//  ============================================================================
-//  @   BUTTON LOADER
-//      Changes the button
-//  ----------------------------------------------------------------------------
-//  @@  BASE STYLE
-//  ----------------------------------------------------------------------------
-.d-btn-loading() {
-  //  Disable clicking while the loader is in place
-  pointer-events: none;
-
-  //  Hide anything that was there before
-  .d-btn__icon,
-  .d-btn__label {
-    opacity: 0;
-    transition: opacity 50ms var(--ttf-in-out);
-  }
-
-  //  Show the loading animation
-  &::before {
-    position: absolute;
-    width: var(--dt-size-500);
-    height: var(--dt-size-500);
-    border: var(--dt-size-200) solid currentColor;
-    border-left-color: transparent !important;
-    border-radius: var(--dt-size-radius-circle);
-    animation: d-loading-circle 900ms infinite linear;
-    content: "";
-  }
-}
 
 //  ============================================================================
 //  $   SPLIT BUTTON

package/lib/dist/dialtone-default-theme.css

@@ -2040,6 +2040,12 @@ template {
           animation: d-loading-circle 900ms infinite linear;
   content: "";
 }
+.d-btn--loading:has(> .d-btn__loader)::before {
+  content: none;
+}
+.d-btn--loading > :where(.d-btn__loader) {
+  position: absolute;
+}
 .d-btn--disabled {
   --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
   --button-color-background: var(--dt-action-color-background-disabled-default) !important;