@dialpad/dialtone 9.84.2 → 9.86.0

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

@@ -792,7 +792,7 @@ template {
     --stack-gap: var(--dt-space-600);
   }
 }
-.dt-item-layout {
+.d-item-layout {
   display: flex;
   align-items: stretch;
   min-height: calc(var(--dt-size-550) + var(--dt-size-300));
@@ -800,77 +800,77 @@ template {
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 }
-.dt-item-layout > .dt-item-layout--content {
+.d-item-layout > .d-item-layout--content {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
   justify-content: center;
   min-width: var(--dt-size-0);
 }
-.dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle {
+.d-item-layout > .d-item-layout--content > .d-item-layout--subtitle {
   color: var(--dt-color-foreground-tertiary);
   font-size: var(--dt-font-size-100);
 }
-.dt-item-layout > .dt-item-layout--content > .dt-item-layout--subtitle--with-title {
+.d-item-layout > .d-item-layout--content > .d-item-layout--subtitle--with-title {
   margin-top: var(--dt-space-200-negative);
 }
-.dt-item-layout > .dt-item-layout--content > .dt-item-layout--bottom {
+.d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
   margin-top: var(--dt-space-200);
 }
-.dt-item-layout > .dt-item-layout--right,
-.dt-item-layout > .dt-item-layout--left {
+.d-item-layout > .d-item-layout--right,
+.d-item-layout > .d-item-layout--left {
   display: flex;
   align-items: center;
   min-width: var(--dt-size-600);
   min-height: inherit;
 }
-.dt-item-layout > .dt-item-layout--right {
-  padding-left: var(--dt-space-400);
+.d-item-layout > .d-item-layout--right {
   flex-shrink: 0;
+  padding-left: var(--dt-space-400);
 }
-.dt-item-layout > .dt-item-layout--left {
+.d-item-layout > .d-item-layout--left {
   justify-content: flex-end;
   padding-right: var(--dt-space-400);
 }
-.dt-item-layout > .dt-item-layout--selected {
+.d-item-layout > .d-item-layout--selected {
   display: flex;
   align-items: center;
 }
-.dt-item-layout--custom {
+.d-item-layout--custom {
   display: grid;
   grid-template-areas: 'left content right selected';
   grid-template-columns: minmax(0, -webkit-max-content) 1fr minmax(0, -webkit-max-content) minmax(0, -webkit-max-content);
   grid-template-columns: minmax(0, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
 }
-.dt-item-layout--custom > .dt-item-layout--left {
+.d-item-layout--custom > .d-item-layout--left {
   grid-area: left;
 }
-.dt-item-layout--custom > .dt-item-layout--right {
+.d-item-layout--custom > .d-item-layout--right {
   grid-area: right;
 }
-.dt-item-layout--custom > .dt-item-layout--content {
+.d-item-layout--custom > .d-item-layout--content {
   display: grid;
   grid-area: content;
   grid-template-areas: 'title' 'subtitle' 'bottom';
   grid-template-rows: repeat(auto-fit, minmax(0, auto));
 }
-.dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--title {
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--title {
   grid-area: title;
 }
-.dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--subtitle {
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--subtitle {
   grid-area: subtitle;
 }
-.dt-item-layout--custom > .dt-item-layout--content > .dt-item-layout--bottom {
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--bottom {
   grid-area: bottom;
 }
-.dt-item-layout--custom > .dt-item-layout--selected {
+.d-item-layout--custom > .d-item-layout--selected {
   grid-area: selected;
 }
 .d-avatar {
   --avatar-color-background: var(--dt-avatar-color-background-000);
   --avatar-color-text: var(--dt-avatar-color-foreground);
   --avatar-size-shape: var(--dt-size-600);
-  --avatar-size-image: 100%;
+  --avatar-size-image: var(--dt-size-100-percent);
   --avatar-size-text: var(--dt-font-size-200);
   --avatar-presence-position-right: var(--dt-space-200-negative);
   --avatar-presence-position-bottom: var(--dt-space-200-negative);
@@ -953,6 +953,10 @@ template {
      object-fit: cover;
   border-radius: var(--dt-size-radius-pill);
 }
+.d-avatar--image-loaded {
+  background-color: transparent;
+  background-image: unset;
+}
 .d-avatar__initials {
   position: absolute;
   z-index: var(--zi-base);
@@ -971,12 +975,14 @@ template {
   position: absolute;
   right: var(--avatar-presence-position-right);
   bottom: var(--avatar-presence-position-bottom);
+  z-index: var(--zi-base);
   display: flex;
 }
 .d-avatar__count {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  right: var(--dt-space-0);
+  bottom: var(--dt-space-0);
+  z-index: var(--zi-base);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -996,6 +1002,49 @@ template {
 .dt-leftbar-row__primary:hover .d-avatar__count {
   --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
 }
+.d-avatar--clickable {
+  --avatar-color-border: transparent;
+  padding: 0;
+  background-color: transparent;
+  border: var(--dt-size-border-100) solid var(--avatar-color-border);
+  border-radius: var(--dt-size-radius-circle);
+  cursor: pointer;
+}
+.d-avatar--clickable:focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
+}
+.d-avatar--clickable:hover {
+  --avatar-color-border: var(--dt-color-border-default);
+}
+.d-avatar--clickable:active {
+  --avatar-color-border: var(--dt-color-border-moderate);
+  -webkit-transform: scale(0.98);
+          transform: scale(0.98);
+}
+.d-avatar__overlay {
+  position: absolute;
+  z-index: var(--zi-base);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dt-size-100-percent);
+  height: var(--dt-size-100-percent);
+  background-color: var(--dt-color-surface-contrast-opaque);
+  border-radius: var(--dt-size-radius-circle);
+  opacity: var(--dt-opacity-900);
+}
+.d-avatar__overlay-icon {
+  width: var(--dt-size-100-percent);
+  color: var(--dt-color-foreground-primary-inverted);
+}
+.d-avatar__overlay-text {
+  width: var(--dt-size-100-percent);
+  color: var(--dt-color-foreground-primary-inverted);
+  font-weight: var(--dt-font-weight-bold);
+  font-size: var(--dt-font-size-200);
+  text-align: center;
+}
 .d-avatar--xs {
   --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-200));
   --avatar-presence-position-right: var(--dt-space-300-negative);
@@ -1997,9 +2046,22 @@ template {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+.d-collapsible__enter-active,
+.d-collapsible__leave-active {
+  overflow: hidden;
+  transition: height var(--td300) var(--ttf-out-quint);
+}
 .d-combobox__empty-list {
   padding: var(--dt-space-0);
 }
+.d-combobox__empty-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--dt-space-300) var(--dt-space-450);
+  font-size: var(--dt-font-size-200);
+  line-height: var(--lh4);
+}
 .d-combobox__loading-list {
   max-height: var(--dt-size-925);
   margin-top: var(--dt-space-400);
@@ -2064,6 +2126,60 @@ template {
   color: var(--dt-color-foreground-muted);
   background-color: var(--dt-color-neutral-transparent);
 }
+.d-context-menu-list {
+  width: var(--dt-size-850);
+}
+.d-dropdown-list {
+  position: relative;
+  margin: var(--dt-space-300);
+  padding-right: var(--dt-space-0);
+  padding-left: var(--dt-space-0);
+}
+.d-dropdown-list > .d-list-item {
+  margin-top: var(--dt-space-200);
+}
+.d-description-list {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--description-list-gap);
+  align-items: flex-start;
+  font-size: var(--dt-font-size-100);
+  line-height: var(--dt-font-line-height-300);
+  --description-list-gap: var(--dt-space-400);
+}
+.d-description-list--gap-0 {
+  --description-list-gap: var(--dt-space-0);
+}
+.d-description-list--gap-100 {
+  --description-list-gap: var(--dt-space-100);
+}
+.d-description-list--gap-200 {
+  --description-list-gap: var(--dt-space-200);
+}
+.d-description-list--gap-300 {
+  --description-list-gap: var(--dt-space-300);
+}
+.d-description-list--gap-400 {
+  --description-list-gap: var(--dt-space-400);
+}
+.d-description-list--gap-500 {
+  --description-list-gap: var(--dt-space-500);
+}
+.d-description-list--gap-600 {
+  --description-list-gap: var(--dt-space-600);
+}
+.d-description-list--column {
+  flex-direction: column;
+}
+.d-description-list__term {
+  flex: 0 1 40%;
+  color: var(--dt-color-foreground-tertiary);
+}
+.d-description-list__description {
+  flex: 1 1 50%;
+  margin-left: 0;
+  color: var(--dt-color-foreground-primary);
+}
 .d-empty-state {
   display: flex;
   flex-direction: column;
@@ -2891,6 +3007,37 @@ legend .d-label--md {
   padding-right: var(--dt-space-0);
   padding-left: var(--dt-space-0);
 }
+.d-list-item {
+  list-style: none;
+  background-color: var(--dt-action-color-background-muted-default);
+}
+.d-list-item:not(.d-list-item--static) {
+  border-radius: var(--dt-size-radius-300);
+  cursor: pointer;
+}
+.d-list-item--focusable:focus,
+.d-list-item--focusable:focus-within,
+.d-list-item--highlighted {
+  background-color: var(--dt-action-color-background-muted-hover);
+}
+.d-list-item--highlighted:active {
+  background-color: var(--dt-action-color-background-muted-active);
+}
+.d-list-item--selected-icon {
+  margin-left: var(--dt-space-400);
+}
+.d-list-item[role="menuitem"] {
+  border-radius: var(--dt-size-300);
+}
+.d-list-item-separator {
+  margin: var(--dt-space-300) var(--dt-space-300-negative);
+  list-style: none;
+  border-top: var(--dt-size-100) solid var(--dt-color-border-default);
+}
+.d-list-item :focus-visible {
+  outline: none;
+  box-shadow: var(--dt-shadow-focus);
+}
 .d-modal {
   --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
   --modal-dialog-padding: var(--dt-space-600);
@@ -3668,6 +3815,91 @@ legend .d-label--md {
     --check-radio-color-background: var(--check-radio-color-background-disabled);
   }
 }
+.d-rich-text-editor__code-block {
+  padding: var(--dt-space-400);
+  background: var(--dt-color-surface-secondary);
+}
+.d-rich-text-editor > .ProseMirror {
+  box-shadow: none;
+}
+.d-rich-text-editor > .ProseMirror p.is-editor-empty:first-child::before {
+  float: left;
+  height: 0;
+  color: var(--dt-color-foreground-placeholder);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+.d-rich-text-editor > .ProseMirror ul,
+.d-rich-text-editor > .ProseMirror ol {
+  padding-left: var(--dt-space-525);
+}
+.d-rich-text-editor > .ProseMirror ul > li {
+  list-style-type: disc;
+}
+.d-rich-text-editor > .ProseMirror ol > li {
+  list-style-type: decimal;
+}
+.d-rich-text-editor > .ProseMirror blockquote {
+  margin-left: 0;
+  padding-left: var(--dt-space-400);
+  border-left: var(--dt-size-border-300) solid var(--dt-color-foreground-muted-inverted);
+}
+.d-suggestion-list__container {
+  max-height: var(--dt-size-875);
+}
+.d-suggestion-list {
+  position: relative;
+  min-width: var(--dt-size-925);
+  max-width: var(--dt-size-975);
+  padding: var(--dt-size-300);
+}
+.d-suggestion-list__item {
+  border: var(--dt-size-100) solid transparent;
+}
+.d-mention-suggestion__name {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.vue-recycle-scroller {
+  position: relative;
+}
+.vue-recycle-scroller.direction-vertical:not(.page-mode) {
+  overflow-y: auto;
+}
+.vue-recycle-scroller.direction-horizontal:not(.page-mode) {
+  overflow-x: auto;
+}
+.vue-recycle-scroller.direction-horizontal {
+  display: flex;
+}
+.vue-recycle-scroller__slot {
+  flex: auto 0 0;
+}
+.vue-recycle-scroller__item-wrapper {
+  position: relative;
+  flex: 1;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.vue-recycle-scroller.ready .vue-recycle-scroller__item-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  will-change: transform;
+}
+.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper {
+  width: 100%;
+}
+.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper {
+  height: 100%;
+}
+.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view {
+  width: 100%;
+}
+.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view {
+  height: 100%;
+}
 .d-select {
   --select-color-border: var(--dt-inputs-color-border-default);
   --select-notch-position-right: var(--dt-space-400);
@@ -3902,9 +4134,9 @@ legend .d-label--md {
 .d-select--disabled::after {
   opacity: 0.33;
 }
-.skeleton-placeholder {
-  --placeholder-from-color: hsla(var(--dt-color-black-900-hsl) / 0.2);
-  --placeholder-to-color: hsla(var(--dt-color-black-900-hsl) / 0.1);
+.d-skeleton-placeholder {
+  --placeholder-from-color: var(--dt-color-surface-bold-opaque);
+  --placeholder-to-color: var(--dt-color-surface-moderate-opaque);
   display: flex;
   width: 100%;
   background: var(--placeholder-from-color);
@@ -3913,14 +4145,14 @@ legend .d-label--md {
   fill: var(--placeholder-from-color);
   stroke: none;
 }
-.skeleton-placeholder--animate {
-  -webkit-animation-name: skeleton-placeholder-throb;
-          animation-name: skeleton-placeholder-throb;
+.d-skeleton-placeholder--animate {
+  -webkit-animation-name: d-skeleton-placeholder-throb;
+          animation-name: d-skeleton-placeholder-throb;
   -webkit-animation-iteration-count: infinite;
           animation-iteration-count: infinite;
 }
-@-webkit-keyframes skeleton-placeholder-throb {
-  20% {
+@-webkit-keyframes d-skeleton-placeholder-throb {
+  10% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }
@@ -3928,13 +4160,13 @@ legend .d-label--md {
     background: var(--placeholder-to-color);
     fill: var(--placeholder-to-color);
   }
-  80% {
+  90% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }
 }
-@keyframes skeleton-placeholder-throb {
-  20% {
+@keyframes d-skeleton-placeholder-throb {
+  10% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }
@@ -3942,7 +4174,7 @@ legend .d-label--md {
     background: var(--placeholder-to-color);
     fill: var(--placeholder-to-color);
   }
-  80% {
+  90% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }
@@ -4189,12 +4421,26 @@ legend .d-label--md {
 .d-tablist--inverted .d-tab--selected::after {
   --tab-color-background: currentColor;
 }
+.tippy-box[data-placement^=top]>.tippy-svg-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-svg-arrow:after,.tippy-box[data-placement^=top]>.tippy-svg-arrow>svg{top:16px;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-svg-arrow>svg{bottom:16px}.tippy-box[data-placement^=left]>.tippy-svg-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-svg-arrow:after,.tippy-box[data-placement^=left]>.tippy-svg-arrow>svg{-webkit-transform:rotate(90deg);transform:rotate(90deg);top:calc(50% - 3px);left:11px}.tippy-box[data-placement^=right]>.tippy-svg-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-svg-arrow:after,.tippy-box[data-placement^=right]>.tippy-svg-arrow>svg{-webkit-transform:rotate(-90deg);transform:rotate(-90deg);top:calc(50% - 3px);right:11px}.tippy-svg-arrow{width:16px;height:16px;fill:#333;text-align:initial}.tippy-svg-arrow,.tippy-svg-arrow>svg{position:absolute}
 .d-tooltip-container {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
+.tippy-box[data-reference-hidden] {
+  visibility: hidden;
+  pointer-events: none;
+}
+.tippy-box > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast);
+}
+.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-moderate);
+}
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}
 .d-tooltip {
   --tooltip-color-background: var(--dt-color-surface-contrast);
   --tooltip-color-text: var(--dt-color-foreground-primary-inverted);