@dialpad/dialtone 9.63.0 → 9.64.0

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

@@ -959,12 +959,7 @@ template {
   --button-border-width: var(--dt-size-100);
   --button-font-size: var(--dt-font-size-200);
   --button-font-weight: var(--dt-font-weight-medium);
-  --button-line-height-xs: var(--dt-font-line-height-200);
-  --button-line-height-sm: var(--dt-font-line-height-200);
-  --button-line-height-md: var(--dt-font-line-height-200);
-  --button-line-height-lg: var(--dt-font-line-height-200);
-  --button-line-height-xl: var(--dt-font-line-height-200);
-  --button-line-height: var(--button-line-height-md);
+  --button-line-height: var(--dt-font-line-height-200);
   --button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width));
   --button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width));
   --button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width));
@@ -1038,20 +1033,17 @@ template {
   --button-padding-y: var(--button-padding-y-xs);
   --button-padding-x: var(--button-padding-x-xs);
   --button-font-size: var(--dt-font-size-100);
-  --button-line-height: var(--button-line-height-xs);
   --button-border-radius: var(--dt-size-300);
 }
 .d-btn--sm {
   --button-padding-y: var(--button-padding-y-sm);
   --button-padding-x: var(--button-padding-x-sm);
   --button-font-size: var(--dt-font-size-100);
-  --button-line-height: var(--button-line-height-sm);
 }
 .d-btn--lg {
   --button-padding-y: var(--button-padding-y-lg);
   --button-padding-x: var(--button-padding-x-lg);
   --button-font-size: var(--dt-font-size-300);
-  --button-line-height: var(--button-line-height-lg);
   --button-border-radius: var(--dt-size-450);
 }
 .d-btn--xl {
@@ -1059,7 +1051,6 @@ template {
   --button-padding-x: var(--button-padding-x-xl);
   --button-font-size: var(--dt-font-size-400);
   --button-font-weight: var(--dt-font-weight-normal);
-  --button-line-height: var(--button-line-height-xl);
   --button-border-radius: var(--dt-size-500);
 }
 .d-btn__label {
@@ -1272,7 +1263,7 @@ template {
   border-radius: var(--dt-size-radius-circle);
   -webkit-animation: d-loading-circle 900ms infinite linear;
           animation: d-loading-circle 900ms infinite linear;
-  content: '';
+  content: "";
 }
 .d-btn--disabled {
   --button-color-text: var(--dt-action-color-foreground-disabled-default) !important;
@@ -1326,6 +1317,87 @@ template {
   --brand-color-s: 100%;
   --brand-color-l: 26%;
 }
+.d-split-btn {
+  display: inline-flex;
+  gap: var(--dt-space-0);
+  align-items: stretch;
+  justify-content: center;
+}
+.d-split-btn .d-popover,
+.d-split-btn .d-popover div,
+.d-popover .d-split-btn__omega {
+  height: 100%;
+}
+.d-split-btn__alpha,
+.d-split-btn__omega {
+  position: relative;
+}
+.d-split-btn__alpha:focus-visible,
+.d-split-btn__omega:focus-visible {
+  z-index: var(--zi-active);
+}
+.d-split-btn__alpha {
+  flex-grow: 1;
+}
+.d-split-btn__omega::before {
+  position: absolute;
+  top: var(--button-border-radius);
+  bottom: var(--button-border-radius);
+  left: var(--dt-size-100-negative);
+  width: var(--dt-size-100);
+  background-color: var(--button-color-text);
+  opacity: var(--dt-opacity-600);
+  content: "";
+}
+.d-split-btn:has(:focus-visible, :hover, .d-btn--active) .d-split-btn__omega::before {
+  opacity: 0;
+}
+.d-split-btn:has(:disabled) .d-split-btn__omega::before,
+.d-split-btn:has(.d-btn--outlined:focus-visible, .d-btn--outlined:hover, .d-btn--outlined.d-btn--active) .d-split-btn__omega::before,
+.d-split-btn:has(.d-btn--primary:focus-visible, .d-btn--primary:hover, .d-btn--primary.d-btn--active) .d-split-btn__omega::before {
+  opacity: var(--dt-opacity-600);
+}
+.d-split-btn__omega.d-btn:disabled::before,
+.d-split-btn__omega.d-btn--outlined::before,
+.d-split-btn__omega.d-btn--primary::before {
+  top: var(--dt-size-100-negative);
+  bottom: var(--dt-size-100-negative);
+}
+.d-split-btn__omega.d-btn--outlined::before {
+  top: var(--dt-size-50-negative);
+  bottom: var(--dt-size-50-negative);
+}
+.d-split-btn__alpha:disabled:not(.d-btn--outlined),
+.d-split-btn__alpha:disabled:not(.d-btn--primary),
+.d-split-btn__alpha.d-btn--primary,
+.d-split-btn__alpha.d-btn--outlined {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.d-split-btn__omega:disabled:not(.d-btn--outlined),
+.d-split-btn__omega:disabled:not(.d-btn--primary),
+.d-split-btn__omega.d-btn--primary,
+.d-split-btn__omega.d-btn--outlined {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.d-split-btn__omega--xs.d-btn--icon-only {
+  --button-padding-x: var(--dt-space-300);
+}
+.d-split-btn__omega--sm.d-btn--icon-only {
+  --button-padding-x: var(--dt-space-300);
+}
+.d-split-btn__omega--md.d-btn--icon-only {
+  --button-padding-x: var(--dt-space-350);
+}
+.d-split-btn__omega--lg.d-btn--icon-only {
+  --button-padding-x: var(--dt-space-400);
+}
+.d-split-btn__omega--xl.d-btn--icon-only {
+  --button-padding-x: var(--dt-space-450);
+}
 .d-btn-group {
   display: flex;
 }
@@ -1434,12 +1506,7 @@ template {
   --button-border-width: var(--dt-size-100);
   --button-font-size: var(--dt-font-size-200);
   --button-font-weight: var(--dt-font-weight-medium);
-  --button-line-height-xs: var(--dt-font-line-height-200);
-  --button-line-height-sm: var(--dt-font-line-height-200);
-  --button-line-height-md: var(--dt-font-line-height-200);
-  --button-line-height-lg: var(--dt-font-line-height-200);
-  --button-line-height-xl: var(--dt-font-line-height-200);
-  --button-line-height: var(--button-line-height-md);
+  --button-line-height: var(--dt-font-line-height-200);
   --button-padding-y-xs: calc(calc(var(--dt-space-400) - var(--dt-space-100)) - var(--button-border-width));
   --button-padding-x-xs: calc(var(--dt-space-400) - var(--button-border-width));
   --button-padding-y-sm: calc(var(--dt-space-400) - var(--button-border-width));
@@ -21262,12 +21329,24 @@ body {
   --dt-theme-mention-color-foreground-hsl: var(--dt-theme-mention-color-foreground-h) var(--dt-theme-mention-color-foreground-s) var(--dt-theme-mention-color-foreground-l);
   --dt-theme-mention-color-foreground-hsla: hsla(var(--dt-theme-mention-color-foreground-h) var(--dt-theme-mention-color-foreground-s) var(--dt-theme-mention-color-foreground-l) / var(--alpha, 100%));
   --dt-theme-mention-color-foreground: #ffffff;
+  --dt-theme-mention-color-foreground-strong-h: 0;
+  --dt-theme-mention-color-foreground-strong-s: 0%;
+  --dt-theme-mention-color-foreground-strong-l: 100%;
+  --dt-theme-mention-color-foreground-strong-hsl: var(--dt-theme-mention-color-foreground-strong-h) var(--dt-theme-mention-color-foreground-strong-s) var(--dt-theme-mention-color-foreground-strong-l);
+  --dt-theme-mention-color-foreground-strong-hsla: hsla(var(--dt-theme-mention-color-foreground-strong-h) var(--dt-theme-mention-color-foreground-strong-s) var(--dt-theme-mention-color-foreground-strong-l) / var(--alpha, 100%));
+  --dt-theme-mention-color-foreground-strong: #ffffff;
   --dt-theme-mention-color-background-h: 254.5664739884393;
   --dt-theme-mention-color-background-s: 100%;
   --dt-theme-mention-color-background-l: 66.07843137254902%;
   --dt-theme-mention-color-background-hsl: var(--dt-theme-mention-color-background-h) var(--dt-theme-mention-color-background-s) var(--dt-theme-mention-color-background-l);
   --dt-theme-mention-color-background-hsla: hsla(var(--dt-theme-mention-color-background-h) var(--dt-theme-mention-color-background-s) var(--dt-theme-mention-color-background-l) / var(--alpha, 100%));
   --dt-theme-mention-color-background: #7C52FF;
+  --dt-theme-mention-color-background-strong-h: 254.49999999999997;
+  --dt-theme-mention-color-background-strong-s: 67.41573033707866%;
+  --dt-theme-mention-color-background-strong-l: 34.90196078431373%;
+  --dt-theme-mention-color-background-strong-hsl: var(--dt-theme-mention-color-background-strong-h) var(--dt-theme-mention-color-background-strong-s) var(--dt-theme-mention-color-background-strong-l);
+  --dt-theme-mention-color-background-strong-hsla: hsla(var(--dt-theme-mention-color-background-strong-h) var(--dt-theme-mention-color-background-strong-s) var(--dt-theme-mention-color-background-strong-l) / var(--alpha, 100%));
+  --dt-theme-mention-color-background-strong: #3A1D95;
   --dt-avatar-color-foreground-h: 0;
   --dt-avatar-color-foreground-s: 0%;
   --dt-avatar-color-foreground-l: 0%;