@dialpad/dialtone-css 8.46.0 → 8.46.3

package/lib/build/less/components/avatar.less

@@ -22,7 +22,7 @@
   --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);
@@ -75,6 +75,11 @@
     border-radius: var(--dt-size-radius-pill);
   }
 
+  &--image-loaded {
+    background-color: transparent;
+    background-image: unset;
+  }
+
   &__initials {
     position: absolute;
     z-index: var(--zi-base);
@@ -93,13 +98,15 @@
     position: absolute;
     right: var(--avatar-presence-position-right);
     bottom: var(--avatar-presence-position-bottom);
+    z-index: var(--zi-base);
     display: flex;
   }
 
   &__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;
@@ -115,12 +122,63 @@
     border-radius: var(--dt-size-radius-pill);
     box-shadow: 0 0 0 var(--dt-size-200) var(--avatar-count-color-shadow);
 
-    .dt-leftbar-row--selected &,
-    .dt-leftbar-row__primary:hover & {
+    .dt-recipe-leftbar-row--selected &,
+    .dt-recipe-leftbar-row__primary:hover & {
       --avatar-count-color-shadow: var(--dt-theme-sidebar-row-color-background-hover);
     }
   }
 
+  &--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;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: var(--dt-shadow-focus);
+    }
+
+    &:hover {
+      --avatar-color-border: var(--dt-color-border-default);
+    }
+
+    &:active {
+      --avatar-color-border: var(--dt-color-border-moderate);
+
+      transform: scale(0.98);
+    }
+  }
+
+  &__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);
+
+    &-icon {
+      width: var(--dt-size-100-percent);
+      color: var(--dt-color-foreground-primary-inverted);
+    }
+
+    &-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;
+    }
+  }
+
   //  --  SIZES
   //  ------------------------------------------------------------------------
 

package/lib/build/less/components/collapsible.less

@@ -31,3 +31,9 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.d-collapsible__enter-active,
+.d-collapsible__leave-active {
+  overflow: hidden;
+  transition: height var(--td300) var(--ttf-out-quint);
+}

package/lib/build/less/components/combobox.less

@@ -15,6 +15,15 @@
 //  ----------------------------------------------------------------------------
 .d-combobox__empty-list {
   padding: var(--dt-space-0);
+
+  &-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);
+  }
 }
 
 //  ============================================================================

package/lib/build/less/components/datepicker.less

@@ -14,16 +14,14 @@
   --datepicker-width: calc(var(--dt-size-300) * 75); // A bit of a magic number as default fixed size, may use CSS utilities to override
   --datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200)); // Emulates SM button since Vue component in lieu of Vue component using DT button
 
+  box-sizing: border-box;
   width: var(--datepicker-width);
   padding: var(--dt-space-500);
-  box-sizing: border-box;
 
   &__hd {
     padding: 0 var(--dt-space-300);
   }
 
-  &__bd {
-  }
 
   &__month-year {
     justify-content: space-between;
@@ -33,15 +31,12 @@
   }
 
   &__month-year-title {
-    line-height: var(--dt-font-line-height-300);
-    font-size: var(--dt-font-size-100);
     font-weight: var(--dt-font-weight-normal);
+    font-size: var(--dt-font-size-100);
+    line-height: var(--dt-font-line-height-300);
     text-transform: uppercase;
   }
 
-  &__nav {
-  }
-
   &__nav-btn {
     width: var(--datepicker-button-size);
     height: var(--datepicker-button-size);

package/lib/build/less/components/description-list.less

@@ -0,0 +1,30 @@
+.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);
+  each(range(0, 600, 100), {
+    &--gap-@{value} {
+     --description-list-gap: ~"var(--dt-space-@{value})";
+    }
+  });
+
+  &--column {
+    flex-direction: column;
+  }
+
+  &__term {
+    flex: 0 1 40%;
+    color: var(--dt-color-foreground-tertiary);
+  }
+
+  &__description {
+    flex: 1 1 50%;
+    margin-left: 0;
+    color: var(--dt-color-foreground-primary);
+  }
+}

package/lib/build/less/components/dropdown.less

@@ -0,0 +1,14 @@
+.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-list-item {
+    margin-top: var(--dt-space-200);
+  }
+}

package/lib/build/less/components/emoji-picker.less

@@ -163,6 +163,10 @@
     padding-top: var(--dt-space-500);
   }
 
+  &__search-x-button {
+    margin-right: var(--dt-space-300-negative);
+  }
+
   &__tab {
     display: flex;
     flex-wrap: wrap;

package/lib/build/less/components/empty-state.less

@@ -36,10 +36,6 @@
     padding: var(--dt-space-500) 0;
   }
 
-  &__content--md {}
-
-  &__content--lg {}
-
   &__header-text {
      text-wrap: balance;
   }

package/lib/build/less/components/item-layout.less

@@ -12,7 +12,7 @@
 //  ============================================================================
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
-.dt-item-layout {
+.d-item-layout {
   display: flex;
   align-items: stretch;
   min-height: calc(var(--dt-size-550) + var(--dt-size-300));
@@ -20,65 +20,65 @@
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 
-  > .dt-item-layout--content {
+  > .d-item-layout--content {
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
     min-width: var(--dt-size-0);
 
-    > .dt-item-layout--subtitle {
+    > .d-item-layout--subtitle {
       color: var(--dt-color-foreground-tertiary);
       font-size: var(--dt-font-size-100);
     }
 
-    > .dt-item-layout--subtitle--with-title {
+    > .d-item-layout--subtitle--with-title {
       margin-top: var(--dt-space-200-negative);
     }
 
-    > .dt-item-layout--bottom {
+    > .d-item-layout--bottom {
       margin-top: var(--dt-space-200);
     }
   }
 
-  > .dt-item-layout--right,
-  > .dt-item-layout--left {
+  > .d-item-layout--right,
+  > .d-item-layout--left {
     display: flex;
     align-items: center;
     min-width: var(--dt-size-600);
     min-height: inherit;
   }
 
-  > .dt-item-layout--right {
-    padding-left: var(--dt-space-400);
+  > .d-item-layout--right {
     flex-shrink: 0;
+    padding-left: var(--dt-space-400);
   }
 
-  > .dt-item-layout--left {
+  > .d-item-layout--left {
     justify-content: flex-end;
     padding-right: var(--dt-space-400);
   }
 
-  > .dt-item-layout--selected {
+  > .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, max-content) 1fr minmax(0, max-content) minmax(0, max-content);
 
-  > .dt-item-layout--left {
+  > .d-item-layout--left {
     grid-area: left;
   }
 
-  > .dt-item-layout--right {
+  > .d-item-layout--right {
     grid-area: right;
   }
 
-  > .dt-item-layout--content {
+  > .d-item-layout--content {
     display: grid;
     grid-area: content;
     grid-template-areas:
@@ -87,24 +87,24 @@
       'bottom';
     grid-template-rows: repeat(auto-fit, minmax(0, auto));
 
-    > .dt-item-layout--title {
+    > .d-item-layout--title {
       grid-area: title;
     }
 
-    > .dt-item-layout--subtitle {
+    > .d-item-layout--subtitle {
       grid-area: subtitle;
     }
 
-    > .dt-item-layout--subtitle--with-title {
+    > .d-item-layout--subtitle--with-title {
       //
     }
 
-    > .dt-item-layout--bottom {
+    > .d-item-layout--bottom {
       grid-area: bottom;
     }
   }
 
-  > .dt-item-layout--selected {
+  > .d-item-layout--selected {
     grid-area: selected;
   }
 }

package/lib/build/less/components/list-item.less

@@ -0,0 +1,38 @@
+.d-list-item {
+  list-style: none;
+  background-color: var(--dt-action-color-background-muted-default);
+
+  &:not(.d-list-item--static) {
+    border-radius: var(--dt-size-radius-300);
+    cursor: pointer;
+  }
+
+  &--focusable:focus,
+  &--focusable:focus-within,
+  &--highlighted {
+    background-color: var(--dt-action-color-background-muted-hover);
+  }
+
+  &--highlighted:active {
+    background-color: var(--dt-action-color-background-muted-active);
+  }
+
+  &--selected-icon {
+    margin-left: var(--dt-space-400);
+  }
+
+  &[role="menuitem"] {
+    border-radius: var(--dt-size-300);
+  }
+
+  &-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);
+  }
+
+  :focus-visible {
+    outline: none;
+    box-shadow: var(--dt-shadow-focus);
+  }
+}

package/lib/build/less/components/presence.less

@@ -23,11 +23,11 @@
   border-width: var(--presence-border-size);
   border-radius: var(--dt-size-radius-circle);
 
-  .dt-leftbar-row--selected & {
+  .dt-recipe-leftbar-row--selected & {
     --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
   }
 
-  .dt-leftbar-row__primary:hover & {
+  .dt-recipe-leftbar-row__primary:hover & {
     --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
   }
 

package/lib/build/less/components/rich-text-editor.less

@@ -0,0 +1,57 @@
+.d-rich-text-editor {
+  &__code-block {
+    padding: var(--dt-space-400);
+    background: var(--dt-color-surface-secondary);
+  }
+
+  > .ProseMirror {
+    box-shadow: none;
+
+    p.is-editor-empty:first-child::before {
+      float: left;
+      height: 0;
+      color: var(--dt-color-foreground-placeholder);
+      content: attr(data-placeholder);
+      pointer-events: none;
+    }
+
+    ul, ol {
+      padding-left: var(--dt-space-525);
+    }
+
+    ul > li {
+      list-style-type: disc;
+    }
+
+    ol > li {
+      list-style-type: decimal;
+    }
+
+    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;
+}

package/lib/build/less/components/scroller.less

@@ -0,0 +1,49 @@
+.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%
+}

package/lib/build/less/components/skeleton.less

@@ -17,9 +17,13 @@
 //  ============================================================================
 //  @   SKELETON CONTAINER
 //  ----------------------------------------------------------------------------
-.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);
+
+// The --placeholder-from-color and --placeholder-to-color
+// custom properties can be set on the parent class of the
+// placeholder to control the animation colors.
+.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%;
@@ -29,14 +33,14 @@
   stroke: none;
 
   &--animate {
-    animation-name: skeleton-placeholder-throb;
+    animation-name: d-skeleton-placeholder-throb;
     animation-iteration-count: infinite;
   }
 }
 
 // the animation is used by the skeleton component
-@keyframes skeleton-placeholder-throb {
-  20% {
+@keyframes d-skeleton-placeholder-throb {
+  10% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }
@@ -46,7 +50,7 @@
     fill: var(--placeholder-to-color);
   }
 
-  80% {
+  90% {
     background: var(--placeholder-from-color);
     fill: var(--placeholder-from-color);
   }

package/lib/build/less/components/tooltip.less

@@ -27,6 +27,9 @@
 //  ============================================================================
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
+
+@import (inline) 'tippy.js/dist/svg-arrow.css';
+
 .d-tooltip-container {
   position: relative;
   display: inline-flex;
@@ -34,6 +37,23 @@
   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 {
   //  --  COMPONENT CSS VARS
   //  -----------------------

package/lib/build/less/dialtone-reset.less

@@ -1,11 +1,13 @@
+/* stylelint-disable meowtec/no-px */
+
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
 /* Document
    ========================================================================== */
 
 * {
-  padding: 0;
   margin: 0;
+  padding: 0;
 
   &,
   &::before,
@@ -63,10 +65,9 @@ hr {
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
-// stylelint-disable
 pre {
-  font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
+  font-family: monospace; /* 1 */
 }
 
 /* Text-level semantics
@@ -94,9 +95,9 @@ u {
  */
 
 abbr[title] {
-  border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
+  border-bottom: none; /* 1 */
   text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
   text-decoration-thickness: var(--dt-size-border-100);
 }
@@ -123,10 +124,10 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
+  font-family: monospace; /* 1 */
 }
-//stylelint-enable
+
 /**
  * Add the correct font size in all browsers.
  */

package/lib/build/less/dialtone.less

@@ -25,6 +25,8 @@
 @import 'components/collapsible';
 @import 'components/combobox';
 @import 'components/datepicker';
+@import 'components/dropdown';
+@import 'components/description-list';
 @import 'components/empty-state';
 @import 'components/forms';
 @import 'components/image-viewer';
@@ -33,6 +35,7 @@
 @import 'components/link';
 @import 'components/list-group'; // Dialtone 5 shim
 @import 'components/list-item-group';
+@import 'components/list-item';
 @import 'components/modal';
 @import 'components/notice';
 @import 'components/toast';
@@ -40,6 +43,8 @@
 @import 'components/pagination';
 @import 'components/popover';
 @import 'components/radio-checkbox';
+@import 'components/rich-text-editor';
+@import 'components/scroller';
 @import 'components/selects';
 @import 'components/skeleton';
 @import 'components/table';
@@ -67,6 +72,26 @@
 @import 'utilities/spacing';
 @import 'utilities/typography';
 
+//  --  RECIPES
+@import 'recipes/attachment_carousel';
+@import 'recipes/callbar_button';
+@import 'recipes/callbar_button_with_popover';
+@import 'recipes/callbox';
+@import 'recipes/combobox_multi_select';
+@import 'recipes/contact_info';
+@import 'recipes/editor';
+@import 'recipes/emoji_row';
+@import 'recipes/feed_item_pill';
+@import 'recipes/feed_item_row';
+@import 'recipes/grouped_chip';
+@import 'recipes/ivr_node';
+@import 'recipes/leftbar_row';
+@import 'recipes/message_input';
+@import 'recipes/settings_menu_button';
+@import 'recipes/time_pill';
+@import 'recipes/top_banner_info';
+@import 'recipes/unread_pill';
+
 //  --  THEMES & GLOBAL SETTINGS
 @import 'dialtone-globals';
 @import 'themes/default';