@dialpad/dialtone-css 8.46.0 → 8.46.2

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

@@ -1,9 +1,10 @@
+/* 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,
@@ -55,10 +56,10 @@ hr {
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 pre {
-  font-family: monospace, monospace;
-  /* 1 */
   font-size: 1em;
   /* 2 */
+  font-family: monospace;
+  /* 1 */
 }
 /* Text-level semantics
    ========================================================================== */
@@ -80,13 +81,13 @@ u {
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
-  border-bottom: none;
-  /* 1 */
   text-decoration: underline;
   /* 2 */
   -webkit-text-decoration: underline dotted;
           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);
 }
@@ -108,10 +109,10 @@ strong {
 code,
 kbd,
 samp {
-  font-family: monospace, monospace;
-  /* 1 */
   font-size: 1em;
   /* 2 */
+  font-family: monospace;
+  /* 1 */
 }
 /**
  * Add the correct font size in all browsers.
@@ -791,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));
@@ -799,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);
@@ -952,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);
@@ -970,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;
@@ -995,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);
@@ -1996,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);
@@ -2008,9 +2071,9 @@ template {
 .d-datepicker {
   --datepicker-width: calc(var(--dt-size-300) * 75);
   --datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200));
+  box-sizing: border-box;
   width: var(--datepicker-width);
   padding: var(--dt-space-500);
-  box-sizing: border-box;
 }
 .d-datepicker__hd {
   padding: 0 var(--dt-space-300);
@@ -2022,9 +2085,9 @@ template {
   text-align: center;
 }
 .d-datepicker__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;
 }
 .d-datepicker__nav-btn {
@@ -2063,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;
@@ -2890,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);
@@ -3667,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);
@@ -3901,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);
@@ -3912,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);
   }
@@ -3927,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);
   }
@@ -3941,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);
   }
@@ -4188,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);
@@ -4755,6 +5002,9 @@ legend .d-label--md {
 .d-emoji-picker__search-label {
   padding-top: var(--dt-space-500);
 }
+.d-emoji-picker__search-x-button {
+  margin-right: var(--dt-space-300-negative);
+}
 .d-emoji-picker__tab {
   display: flex;
   flex-wrap: wrap;
@@ -5327,6 +5577,7 @@ legend .d-label--md {
             transform: rotate(360deg);
   }
 }
+/* stylelint-disable-next-line keyframes-name-pattern */
 @-webkit-keyframes d-loading-bars__short {
   0% {
     min-height: var(--dt-size-300);
@@ -5429,6 +5680,7 @@ legend .d-label--md {
     opacity: 0;
   }
 }
+/* stylelint-disable-next-line keyframes-name-pattern */
 @-webkit-keyframes d-loading-bars__tall {
   0% {
     min-height: var(--dt-size-300);
@@ -5600,10 +5852,7 @@ legend .d-label--md {
   opacity: unset !important;
 }
 .d-t {
-  transition-delay: 0s;
-  transition-timing-function: var(--ttf-in-out);
-  transition-duration: var(--td50);
-  transition-property: all;
+  transition: all var(--td50) var(--ttf-in-out) 0s;
 }
 .d-td0 {
   transition-duration: var(--td0) !important;
@@ -6488,16 +6737,16 @@ legend .d-label--md {
   cursor: none !important;
 }
 .d-ol-focusring {
-  box-shadow: var(--dt-shadow-focus) !important;
   outline: none !important;
+  box-shadow: var(--dt-shadow-focus) !important;
 }
 .d-ol-focusring-inset {
-  box-shadow: var(--dt-shadow-focus-inset) !important;
   outline: none !important;
+  box-shadow: var(--dt-shadow-focus-inset) !important;
 }
 .d-ol-none {
-  box-shadow: none !important;
   outline: none !important;
+  box-shadow: none !important;
 }
 .d-pe-auto {
   pointer-events: auto !important;
@@ -6706,10 +6955,10 @@ legend .d-label--md {
 }
 .d-vi-visible-sr {
   position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
+  width: var(--dt-size-100);
+  height: var(--dt-size-100);
+  margin: var(--dt-space-100-negative);
+  padding: var(--dt-space-0);
   overflow: hidden;
   word-wrap: normal;
   border: none;
@@ -7468,9 +7717,6 @@ ul {
 .d-headline54 {
   font: var(--dt-typography-headline-xxl);
 }
-.d-fs-unset {
-  font-size: unset !important;
-}
 .d-fs-normal {
   font-style: normal !important;
 }