@dialpad/dialtone 9.98.0 → 9.99.0-beta.1

package/dist/css/dialtone.css

@@ -811,71 +811,48 @@ 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--left {
-  grid-area: left;
-}
-.d-item-layout--custom > .d-item-layout--right {
-  grid-area: right;
-}
-.d-item-layout--custom > .d-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));
-}
-.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;
+  grid-auto-rows: auto;
 }
 .d-avatar {
   --avatar-color-background: var(--dt-avatar-color-background-000);
@@ -3034,9 +3011,6 @@ 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);
 }
@@ -3049,6 +3023,29 @@ 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);
@@ -8366,46 +8363,53 @@ 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);
-  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);
+  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 .d-item-layout--left {
+.d-recipe-contact-info__left {
+  position: relative;
+  display: flex;
   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);
-}
-.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;
+  height: var(--dt-size-100-percent);
   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;
@@ -8551,13 +8555,13 @@ ul {
   gap: var(--dt-space-300);
   width: var(--dt-size-100-percent);
   padding: var(--dt-space-400);
-}
-.d-recipe-feed-item-pill__layout > .d-item-layout--left {
-  justify-content: center;
-  padding-right: var(--dt-space-0);
+  line-height: var(--dt-font-line-height-300);
 }
 .d-recipe-feed-item-pill__icon {
-  display: flex;
+  display: grid;
+  place-content: center;
+  min-width: var(--dt-size-600);
+  height: var(--dt-size-100-percent);
 }
 .d-recipe-feed-item-pill__icon svg {
   -webkit-animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -8568,8 +8572,25 @@ 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;
@@ -8615,26 +8636,16 @@ ul {
 .d-recipe-feed-item-row:focus-visible {
   box-shadow: var(--dt-shadow-focus-inset);
 }
-.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 {
+.d-recipe-feed-item-row .d-list-item__left {
   display: block;
-  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);
+  align-content: flex-start;
+  min-width: var(--dt-size-600);
   text-align: end;
 }
-.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--right {
-  min-width: initial;
+.d-recipe-feed-item-row .d-list-item__wrapper {
   padding: 0;
 }
-.d-recipe-feed-item-row > .d-item-layout > .d-item-layout--content > .d-item-layout--bottom {
-  display: flex;
-  flex-direction: column;
+.d-recipe-feed-item-row .d-list-item__bottom {
   margin-top: 0;
 }
 .d-recipe-feed-item-row__state--searched {
@@ -8653,9 +8664,6 @@ 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);
@@ -8694,7 +8702,6 @@ 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);