@dialpad/dialtone 9.61.0 → 9.64.0

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

@@ -585,6 +585,9 @@ template {
   display: flex;
   color: var(--avatar-color-text);
 }
+.d-avatar--color-000 {
+  --avatar-color-background: var(--dt-avatar-color-background-000);
+}
 .d-avatar--color-100 {
   --avatar-color-background: var(--dt-avatar-color-background-100);
 }
@@ -741,10 +744,11 @@ template {
   --badge-line-height: calc(var(--dt-size-500) + var(--dt-size-200));
   --badge-font-size: var(--dt-font-size-100);
   --badge-font-weight: var(--dt-font-weight-semi-bold);
-  --badge-gap: var(--dt-space-300);
+  --badge-gap: var(--dt-space-200);
   --badge-letter-spacing: var(--dt-size-50);
   --badge-padding-y: var(--dt-space-100);
-  --badge-padding-x: var(--dt-space-350);
+  --badge-padding-x: var(--dt-space-300);
+  --badge-label-padding-x: var(--dt-space-200);
   --badge-text-case: none;
   --badge-decorative-color: var(--dt-color-black-900);
   display: inline-flex;
@@ -752,7 +756,7 @@ template {
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  min-width: var(--dt-size-550);
+  min-inline-size: var(--dt-size-550);
   padding: var(--badge-padding-y) var(--badge-padding-x);
   color: var(--badge-color-text);
   font-weight: var(--badge-font-weight);
@@ -769,6 +773,8 @@ template {
   --badge-padding-x: calc(var(--dt-space-400) - var(--dt-space-100));
   --badge-padding-y: var(--dt-space-300);
   --badge-line-height: var(--dt-size-500);
+  --badge-label-padding-x: var(--dt-space-0);
+  --badge-gap: var(--dt-space-300);
 }
 .d-badge--info {
   --badge-color-background: var(--dt-badge-color-background-info);
@@ -871,15 +877,26 @@ template {
   height: var(--dt-size-400);
   background-color: var(--badge-decorative-color);
   border-radius: var(--dt-size-200);
+  -webkit-margin-start: var(--dt-space-200);
+          margin-inline-start: var(--dt-space-200);
 }
 .d-badge__label {
   display: flex;
   align-items: center;
+  padding-inline: var(--badge-label-padding-x);
 }
 .d-badge__icon-left,
 .d-badge__icon-right {
   display: flex;
 }
+.d-badge__icon-left {
+  -webkit-padding-start: var(--dt-space-100);
+          padding-inline-start: var(--dt-space-100);
+}
+.d-badge__icon-right {
+  -webkit-padding-end: var(--dt-space-100);
+          padding-inline-end: var(--dt-space-100);
+}
 .d-breadcrumbs {
   --breadcrumbs-font-size: var(--dt-font-size-200);
   --breadcrumbs-line-height: var(--dt-font-line-height-300);
@@ -942,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));
@@ -1021,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 {
@@ -1042,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 {
@@ -1255,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;
@@ -1309,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;
 }
@@ -1417,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));
@@ -2433,10 +2517,23 @@ legend .d-label {
   border: var(--dt-size-100) solid;
   border-color: var(--dt-color-border-default);
   border-radius: var(--dt-size-radius-300);
+  /* Hiding class, making content visible only to screen readers but not visually */
+  /* "sr" meaning "screen-reader" */
+  /* https://css-tricks.com/inclusively-hidden/ */
 }
 .d-keyboard-shortcut--inverted {
   border-color: var(--dt-color-border-moderate-inverted);
 }
+.d-keyboard-shortcut--sr-only:not(:focus, :active) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+          clip-path: inset(50%);
+}
 .d-keyboard-shortcut__icon,
 .d-keyboard-shortcut__item {
   margin-right: var(--dt-space-200);
@@ -21232,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%;