@dialpad/dialtone 9.99.0-beta.1 → 9.99.0

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

@@ -811,48 +811,71 @@ template {
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
 }
-.d-item-layout > .d-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);
 }
-.d-item-layout > .d-item-layout__content > .d-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);
 }
-.d-item-layout > .d-item-layout__content > .d-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);
 }
-.d-item-layout > .d-item-layout__content > .d-item-layout__bottom {
+.d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
   margin-top: var(--dt-space-200);
 }
-.d-item-layout > .d-item-layout__right,
-.d-item-layout > .d-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;
 }
-.d-item-layout > .d-item-layout__right {
+.d-item-layout > .d-item-layout--right {
   flex-shrink: 0;
   padding-left: var(--dt-space-400);
 }
-.d-item-layout > .d-item-layout__left {
+.d-item-layout > .d-item-layout--left {
   justify-content: flex-end;
   padding-right: var(--dt-space-400);
 }
-.d-item-layout > .d-item-layout__selected {
+.d-item-layout > .d-item-layout--selected {
   display: flex;
   align-items: center;
 }
 .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);
 }
-.d-item-layout--custom > .d-item-layout__content {
+.d-item-layout--custom > .d-item-layout--left {
+  grid-area: left;
+}
+.d-item-layout--custom > .d-item-layout--right {
+  grid-area: right;
+}
+.d-item-layout--custom > .d-item-layout--content {
   display: grid;
-  grid-auto-rows: auto;
+  grid-area: content;
+  grid-template-areas: 'title' 'subtitle' 'bottom';
+  grid-template-rows: repeat(auto-fit, minmax(0, auto));
+}
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--title {
+  grid-area: title;
+}
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--subtitle {
+  grid-area: subtitle;
+}
+.d-item-layout--custom > .d-item-layout--content > .d-item-layout--bottom {
+  grid-area: bottom;
+}
+.d-item-layout--custom > .d-item-layout--selected {
+  grid-area: selected;
 }
 .d-avatar {
   --avatar-color-background: var(--dt-avatar-color-background-000);
@@ -3011,6 +3034,9 @@ legend .d-label--md {
 .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);
 }
@@ -3023,29 +3049,6 @@ legend .d-label--md {
   outline: none;
   box-shadow: var(--dt-shadow-focus);
 }
-.d-list-item__wrapper {
-  gap: var(--dt-space-400);
-  padding: var(--dt-space-300) var(--dt-space-400);
-  line-height: var(--dt-font-line-height-300);
-}
-.d-list-item__left,
-.d-list-item__right,
-.d-list-item__selected {
-  display: grid;
-  place-content: center;
-}
-.d-list-item__title {
-  display: grid;
-  align-content: center;
-}
-.d-list-item__subtitle {
-  margin-top: var(--dt-space-200-negative);
-  color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-}
-.d-list-item__bottom {
-  margin-top: var(--dt-space-200);
-}
 .d-modal {
   --modal-backdrop-color-background: var(--dt-color-surface-backdrop);
   --modal-dialog-padding: var(--dt-space-600);
@@ -8363,53 +8366,46 @@ ul {
   position: relative;
   display: block;
 }
-.d-recipe-combobox-multi-select__list .d-list-item__title {
-  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
-}
 .d-recipe-combobox-multi-select__list--loading {
   padding-top: var(--dt-space-500);
   padding-bottom: var(--dt-space-500);
   text-align: center;
 }
-.d-recipe-combobox-with-popover__list .d-list-item__title {
-  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
-}
 .d-recipe-contact-info {
   --contact-info-avatar-border-color: var(--dt-color-surface-primary);
-  padding: var(--dt-space-300) var(--dt-space-400);
-  -webkit-column-gap: var(--dt-space-400);
-     -moz-column-gap: var(--dt-space-400);
-          column-gap: var(--dt-space-400);
-}
-.d-recipe-contact-info__left {
-  position: relative;
   display: flex;
+}
+.d-recipe-contact-info .d-item-layout {
+  flex: 1 1 0;
+}
+.d-recipe-contact-info .d-item-layout--content {
+  /*
+    DP-74536: Add `min-width` to make the width of "contact info" adjustable.
+    */
+  min-width: var(--dt-space-825);
+}
+.d-recipe-contact-info .d-item-layout--left {
   align-items: center;
   justify-content: flex-start;
+  /*
+    DP-74536: To make 'Avatar' in fixed position when resizing the window.
+    */
   min-width: var(--dt-space-650);
-  height: var(--dt-size-100-percent);
+}
+.d-recipe-contact-info .d-item-layout--right {
+  align-items: center;
+  /*
+    DP-74536: Remove `min-width` which cause extra unused empty space on the right of "contact info".
+    */
+  min-width: 0;
+}
+.d-recipe-contact-info__left {
+  position: relative;
   background-color: transparent;
   background-image: none;
   border-width: 0;
   cursor: pointer;
 }
-.d-recipe-contact-info__content {
-  align-content: center;
-  line-height: var(--dt-font-line-height-300);
-}
-.d-recipe-contact-info__subtitle {
-  margin-top: var(--dt-space-200-negative);
-  color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-}
-.d-recipe-contact-info__bottom {
-  margin-top: var(--dt-space-200);
-}
-.d-recipe-contact-info__right {
-  display: grid;
-  align-content: center;
-  min-width: 0;
-}
 .d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;
@@ -8555,13 +8551,13 @@ ul {
   gap: var(--dt-space-300);
   width: var(--dt-size-100-percent);
   padding: var(--dt-space-400);
-  line-height: var(--dt-font-line-height-300);
+}
+.d-recipe-feed-item-pill__layout > .d-item-layout--left {
+  justify-content: center;
+  padding-right: var(--dt-space-0);
 }
 .d-recipe-feed-item-pill__icon {
-  display: grid;
-  place-content: center;
-  min-width: var(--dt-size-600);
-  height: var(--dt-size-100-percent);
+  display: flex;
 }
 .d-recipe-feed-item-pill__icon svg {
   -webkit-animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -8572,25 +8568,8 @@ ul {
   justify-content: center;
 }
 .d-recipe-feed-item-pill__title {
-  display: grid;
-  align-content: center;
-  height: var(--dt-size-100-percent);
   font-weight: var(--dt-font-weight-bold);
 }
-.d-recipe-feed-item-pill__subtitle {
-  margin-top: var(--dt-space-200-negative);
-  color: var(--dt-color-foreground-tertiary);
-  font-size: var(--dt-font-size-100);
-}
-.d-recipe-feed-item-pill__bottom {
-  margin-top: var(--dt-space-200);
-}
-.d-recipe-feed-item-pill__right {
-  display: grid;
-  place-content: center;
-  min-width: var(--dt-size-600);
-  height: var(--dt-size-100-percent);
-}
 .d-recipe-feed-item-pill__border {
   overflow: hidden;
   background-clip: content-box, border-box;
@@ -8636,16 +8615,26 @@ ul {
 .d-recipe-feed-item-row:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.d-recipe-feed-item-row .d-list-item__left {
+.d-recipe-feed-item-row > .d-item-layout {
+  min-height: initial;
+  padding: 0;
+  font: var(--dt-typography-body-md-compact);
+}
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--left {
   display: block;
-  align-content: flex-start;
-  min-width: var(--dt-size-600);
+  align-self: flex-start;
+  min-width: calc(var(--dt-space-600) + var(--dt-space-300));
+  padding-right: var(--dt-space-300);
+  padding-left: var(--dt-space-0);
   text-align: end;
 }
-.d-recipe-feed-item-row .d-list-item__wrapper {
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
+  min-width: initial;
   padding: 0;
 }
-.d-recipe-feed-item-row .d-list-item__bottom {
+.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
+  display: flex;
+  flex-direction: column;
   margin-top: 0;
 }
 .d-recipe-feed-item-row__state--searched {
@@ -8664,6 +8653,9 @@ ul {
   padding-top: var(--dt-space-300);
   padding-bottom: var(--dt-space-300);
 }
+.d-recipe-feed-item-row__content {
+  padding-left: var(--dt-space-300);
+}
 .d-recipe-feed-item-row__attachment {
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-300);
@@ -8702,6 +8694,7 @@ ul {
   flex-wrap: wrap;
   padding-top: var(--dt-space-200);
   padding-bottom: var(--dt-space-200);
+  padding-left: var(--dt-space-300);
 }
 .d-recipe-feed-item-row__threading {
   padding-top: var(--dt-space-200);