@dialpad/dialtone-css 8.64.1 → 8.65.0-next.1

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

@@ -66,7 +66,7 @@
   --tooltip-border-radius: var(--dt-size-radius-300); // 4
 
   z-index: var(--zi-tooltip);
-  max-width: var(--dt-size-875);
+  max-inline-size: var(--dt-size-875);
   padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
   color: var(--tooltip-color-text);
   font-weight: var(--tooltip-font-weight);
@@ -147,13 +147,13 @@
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--top-right {
-top: calc(100% + var(--dt-space-450)); // 100% + 12
+inset-block-start: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateY(var(--dt-space-500)); // 16
 
 &::after {
-  top: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-top-width: 0;
-  border-bottom-color: var(--tooltip-color-background);
+  inset-block-start: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-block-start-width: 0;
+  border-block-end-color: var(--tooltip-color-background);
 }
 }
 
@@ -165,13 +165,13 @@ transform: translateY(var(--dt-space-500)); // 16
 .d-tooltip__arrow--bottom-left,
 .d-tooltip__arrow--bottom-center,
 .d-tooltip__arrow--bottom-right {
-bottom: calc(100% + var(--dt-space-450)); // 100% + 12
+inset-block-end: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateY(var(--dt-space-500-negative)); // -16
 
 &::after {
-  bottom: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-top-color: var(--tooltip-color-background);
-  border-bottom-width: 0;
+  inset-block-end: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-block-start-color: var(--tooltip-color-background);
+  border-block-end-width: 0;
 }
 }
 
@@ -181,10 +181,10 @@ transform: translateY(var(--dt-space-500-negative)); // -16
 .d-tooltip__arrow-tippy--top-start,
 .d-tooltip__arrow--top-left,
 .d-tooltip__arrow--bottom-left {
-left: var(--dt-space-200-negative); // -2
+inset-inline-start: var(--dt-space-200-negative); // -2
 
 &::after {
-  left: var(--dt-space-500); // 16
+  inset-inline-start: var(--dt-space-500); // 16
 }
 }
 
@@ -195,8 +195,8 @@ left: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow--top-center,
 .d-tooltip__arrow--bottom-center {
 &::after {
-  left: 50%;
-  margin-left: var(--dt-space-350-negative); // -6
+  inset-inline-start: 50%;
+  margin-inline-start: var(--dt-space-350-negative); // -6
 }
 }
 
@@ -206,10 +206,10 @@ left: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow-tippy--top-end,
 .d-tooltip__arrow--top-right,
 .d-tooltip__arrow--bottom-right {
-right: var(--dt-space-200-negative); // -2
+inset-inline-end: var(--dt-space-200-negative); // -2
 
 &::after {
-  right: var(--dt-space-500); // 16
+  inset-inline-end: var(--dt-space-500); // 16
 }
 }
 
@@ -221,13 +221,13 @@ right: var(--dt-space-200-negative); // -2
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--right-bottom {
-right: calc(100% + var(--dt-space-450)); // 100% + 12
+inset-inline-end: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateX(var(--dt-space-500-negative)); // -16
 
 &::after {
-  right: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-right-width: 0;
-  border-left-color: var(--tooltip-color-background);
+  inset-inline-end: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-inline-end-width: 0;
+  border-inline-start-color: var(--tooltip-color-background);
 }
 }
 
@@ -239,13 +239,13 @@ transform: translateX(var(--dt-space-500-negative)); // -16
 .d-tooltip__arrow--left-top,
 .d-tooltip__arrow--left-center,
 .d-tooltip__arrow--left-bottom {
-left: calc(100% + var(--dt-space-450)); // 100% + 12
+inset-inline-start: calc(100% + var(--dt-space-450)); // 100% + 12
 transform: translateX(var(--dt-space-500)); // 16
 
 &::after {
-  left: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
-  border-right-color: var(--tooltip-color-background);
-  border-left-width: 0;
+  inset-inline-start: calc(var(--dt-space-350-negative) - var(--dt-space-50-negative)); // -5.5
+  border-inline-end-color: var(--tooltip-color-background);
+  border-inline-start-width: 0;
 }
 }
 
@@ -255,10 +255,10 @@ transform: translateX(var(--dt-space-500)); // 16
 .d-tooltip__arrow-tippy--left-start,
 .d-tooltip__arrow--right-top,
 .d-tooltip__arrow--left-top {
-top: var(--dt-space-100-negative); // -1
+inset-block-start: var(--dt-space-100-negative); // -1
 
 &::after {
-  top: var(--dt-space-400); // 8
+  inset-block-start: var(--dt-space-400); // 8
 }
 }
 
@@ -269,8 +269,8 @@ top: var(--dt-space-100-negative); // -1
 .d-tooltip__arrow--right-center,
 .d-tooltip__arrow--left-center {
 &::after {
-  top: 50%;
-  margin-top: var(--dt-space-350-negative); // -6
+  inset-block-start: 50%;
+  margin-block-start: var(--dt-space-350-negative); // -6
 }
 }
 
@@ -280,9 +280,9 @@ top: var(--dt-space-100-negative); // -1
 .d-tooltip__arrow-tippy--left-end,
 .d-tooltip__arrow--right-bottom,
 .d-tooltip__arrow--left-bottom {
-bottom: var(--dt-space-100-negative); // -1
+inset-block-end: var(--dt-space-100-negative); // -1
 
 &::after {
-  bottom: var(--dt-space-400); // 8
+  inset-block-end: var(--dt-space-400); // 8
 }
 }

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

@@ -43,7 +43,8 @@ main {
  */
 
 h1 {
-  margin: 0.67em 0;
+  margin-block: 0.67em;
+  margin-inline: 0;
   font-size: 2em;
 }
 
@@ -97,7 +98,7 @@ u {
 abbr[title] {
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
-  border-bottom: none; /* 1 */
+  border-block-end: none; /* 1 */
   text-underline-offset: calc(var(--dt-size-border-300) - var(--dt-size-border-100));
   text-decoration-thickness: var(--dt-size-border-100);
 }
@@ -150,11 +151,11 @@ sup {
 }
 
 sub {
-  bottom: -0.25em;
+  inset-block-end: -0.25em;
 }
 
 sup {
-  top: -0.5em;
+  inset-block-start: -0.5em;
 }
 
 ol, ul, li {
@@ -251,7 +252,8 @@ button:-moz-focusring,
  */
 
 fieldset {
-  padding: 0.35em 0.75em 0.625em;
+  padding-block: 0.35em 0.625em;
+  padding-inline: 0.75em;
 }
 
 /**

package/lib/build/less/recipes/attachment_carousel.less

@@ -1,14 +1,14 @@
 .d-recipe-attachment-carousel {
   position: relative;
-  width: var(--dt-space-1000);
-  max-height: 100px; /* stylelint-disable-line meowtec/no-px */
+  inline-size: var(--dt-space-1000);
+  max-block-size: 100px; /* stylelint-disable-line meowtec/no-px */
 }
 
 .d-recipe-attachment-carousel__media-list {
   display: flex;
   flex-direction: row;
-  padding-left: 0;
-  overflow-x: scroll;
+  padding-inline-start: 0;
+  overflow-inline: scroll;
 }
 
 .d-recipe-attachment-carousel__media-list::-webkit-scrollbar {
@@ -17,7 +17,7 @@
 
 .d-recipe-attachment-carousel__arrow {
   position: absolute;
-  top: var(--dt-space-30-percent);
+  inset-block-start: var(--dt-space-30-percent);
   background-color: var(--dt-color-neutral-white);
   border: var(--dt-space-100) solid;
   border-color: var(--bc-default);
@@ -30,11 +30,11 @@
 }
 
 .d-recipe-attachment-carousel__arrow--left {
-  left: var(--dt-space-300);
+  inset-inline-start: var(--dt-space-300);
 }
 
 .d-recipe-attachment-carousel__arrow--right {
-  right: var(--dt-space-300);
+  inset-inline-end: var(--dt-space-300);
 }
 
 .d-recipe-attachment-carousel__image {
@@ -43,8 +43,8 @@
 
 .d-recipe-attachment-carousel__image-close-button {
   position: absolute;
-  top: inherit;
-  right: inherit;
+  inset-block-start: inherit;
+  inset-inline-end: inherit;
   color: var(--dt-color-neutral-white);
   background-color: var(--dt-color-black-400);
   border: var(--dt-space-100) solid;
@@ -58,8 +58,8 @@
 }
 
 .d-recipe-attachment-carousel__image-viewer {
-  width: var(--dt-size-700);
-  height: var(--dt-size-700);
+  inline-size: var(--dt-size-700);
+  block-size: var(--dt-size-700);
   object-fit: cover;
   border: var(--dt-space-100) solid;
   border-color: var(--dt-color-border-subtle);
@@ -69,14 +69,14 @@
 
 .d-recipe-attachment-carousel__image-top-right {
   position: absolute;
-  top: var(--dt-size-100);
-  right: var(--dt-size-100);
+  inset-block-start: var(--dt-size-100);
+  inset-inline-end: var(--dt-size-100);
 }
 
 .d-recipe-attachment-carousel__image-progress-bar {
   position: absolute;
-  top: inherit;
-  right: inherit;
+  inset-block-start: inherit;
+  inset-inline-end: inherit;
   display: flex;
   background-color: var(--dt-color-neutral-white);
   border: var(--dt-space-100) solid;
@@ -87,8 +87,8 @@
 }
 
 .d-recipe-attachment-carousel__progress-bar {
-  width: var(--dt-size-550);
-  height: var(--dt-size-550);
+  inline-size: var(--dt-size-550);
+  block-size: var(--dt-size-550);
 }
 
 .d-recipe-attachment-carousel__progress-bar-circle {

package/lib/build/less/recipes/callbar_button.less

@@ -11,8 +11,7 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-recipe-callbar-button {
-  padding-right: var(--dt-space-0);
-  padding-left: var(--dt-space-0);
+  padding-inline: var(--dt-space-0);
   color: var(--dt-color-foreground-primary);
 
   &:not(.d-recipe-callbar-button--circle) {

package/lib/build/less/recipes/callbar_button_with_dropdown.less

@@ -1,8 +1,8 @@
 .dt-recipe--callbar-button-with-dropdown--arrow {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
-  margin-top: var(--dt-space-450);
-  margin-left: calc(var(--dt-space-300-negative) * 5);
+  inline-size: var(--dt-size-500);
+  block-size: var(--dt-size-500);
+  margin-block-start: var(--dt-space-450);
+  margin-inline-start: calc(var(--dt-space-300-negative) * 5);
   padding: var(--dt-space-400);
   border-radius: var(--dt-size-300);
 
@@ -11,7 +11,7 @@
   }
 
   &--large {
-    margin-left: var(--dt-space-550-negative);
+    margin-inline-start: var(--dt-space-550-negative);
   }
 
   &__icon {
@@ -38,12 +38,12 @@
 .dt-recipe--callbar-button-with-dropdown--button .tab-group {
   display: flex;
   flex-direction: column;
-  height: 100%;
+  block-size: 100%;
 }
 
 .dt-recipe--callbar-button-with-dropdown--button .tab-content {
   flex: 1 1 100%;
-  overflow-y: auto;
+  overflow-block: auto;
 }
 
 .dt-recipe--callbar-button-with-dropdown {

package/lib/build/less/recipes/callbar_button_with_popover.less

@@ -4,10 +4,10 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow {
-  width: var(--dt-size-500);
-  height: var(--dt-size-500);
-  margin-top: var(--dt-space-450);
-  margin-left: calc(var(--dt-space-300-negative) * 5);
+  inline-size: var(--dt-size-500);
+  block-size: var(--dt-size-500);
+  margin-block-start: var(--dt-space-450);
+  margin-inline-start: calc(var(--dt-space-300-negative) * 5);
   padding: var(--dt-space-400);
   border-radius: var(--dt-size-300);
 
@@ -17,7 +17,7 @@
 }
 
 .d-recipe-callbar-button-with-popover__arrow--large {
-  margin-left: var(--dt-space-550-negative);
+  margin-inline-start: var(--dt-space-550-negative);
 }
 
 .d-recipe-callbar-button-with-popover__arrow-icon {
@@ -37,8 +37,7 @@
   .d-popover__header__content {
     display: flex;
     align-items: center;
-    padding-right: var(--dt-space-450);
-    padding-left: var(--dt-space-450);
+    padding-inline: var(--dt-space-450) var(--dt-space-450);
     font-weight: normal;
   }
 }
@@ -52,11 +51,11 @@
   &.tab-group {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    block-size: 100%;
   }
 
   &.tab-content {
     flex: 1 1 100%;
-    overflow-y: auto;
+    overflow-block: auto;
   }
 }

package/lib/build/less/recipes/callbox.less

@@ -50,7 +50,7 @@
 }
 
 .d-recipe-callbox__main-content-bottom {
-  border-top: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
+  border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
 }
 
 .d-recipe-callbox__content {
@@ -58,23 +58,24 @@
   flex: 1 0 auto;
   flex-direction: column;
   gap: var(--dt-space-300);
-  min-width: 0;
+  min-inline-size: 0;
   padding-inline-start: var(--dt-space-200);
 }
 
 .d-recipe-callbox__content-title {
-  width: 0;
-  min-width: 100%;
   padding: 0;
   overflow: clip;
   color: var(--dt-shell-color-foreground-strong);
   font: var(--dt-typography-headline-md);
+  font-weight: var(--dt-font-weight-bold);
   line-height: var(--dt-font-line-height-100);
   white-space: nowrap;
-  text-align: left;
+  text-align: start;
   text-overflow: ellipsis;
   background-color: var(--dt-color-surface-primary);
   border: none;
+  inline-size: 0;
+  min-inline-size: 100%;
 }
 
 .d-recipe-callbox__content-badge {
@@ -82,8 +83,8 @@
 }
 
 .d-recipe-callbox__content-subtitle {
-  width: 0;
-  min-width: 100%;
+  inline-size: 0;
+  min-inline-size: 100%;
   padding: 0;
   overflow: hidden;
   color: var(--dt-shell-color-foreground-tertiary);

package/lib/build/less/recipes/combobox_multi_select.less

@@ -1,30 +1,28 @@
 .d-recipe-combobox-multi-select__chip {
   z-index: var(--zi-base1);
-  max-width: var(--dt-size-100-percent);
-  margin-top: var(--dt-space-300);
-  margin-right: var(--dt-space-200);
-  margin-left: var(--dt-space-200);
+  max-inline-size: var(--dt-size-100-percent);
+  margin-block-start: var(--dt-space-300);
+  margin-inline: var(--dt-space-200);
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper {
   position: absolute;
-  max-width: calc(var(--dt-size-100-percent) - var(--dt-space-400));
-  max-height: initial;
-  margin-right: var(--dt-space-200);
-  margin-left: var(--dt-space-200);
-  padding-left: var(--dt-space-100);
-  overflow-y: visible;
+  max-inline-size: calc(var(--dt-size-100-percent) - var(--dt-space-400));
+  max-block-size: initial;
+  margin-inline: var(--dt-space-200);
+  padding-inline-start: var(--dt-space-100);
+  overflow-block: visible;
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper-md--collapsed {
-  max-height: 2.8rem;
-  overflow-y: hidden;
+  max-block-size: 2.8rem;
+  overflow-block: hidden;
 }
 
 .d-recipe-combobox-multi-select__chip-wrapper-sm--collapsed,
 .d-recipe-combobox-multi-select__chip-wrapper-xs--collapsed {
-  max-height: 2.5rem;
-  overflow-y: hidden;
+  max-block-size: 2.5rem;
+  overflow-block: hidden;
 }
 
 .d-recipe-combobox-multi-select__chip--truncate {
@@ -46,12 +44,11 @@
 }
 
 .d-recipe-combobox-multi-select__list .d-list-item__content {
-  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-block-size: 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);
+  padding-block: var(--dt-space-500);
   text-align: center;
 }

package/lib/build/less/recipes/combobox_with_popover.less

@@ -1,3 +1,3 @@
 .d-recipe-combobox-with-popover__list .d-list-item__content {
-  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
 }

package/lib/build/less/recipes/contact_info.less

@@ -10,8 +10,8 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-width: var(--dt-space-650);
-  height: var(--dt-size-100-percent);
+  min-inline-size: var(--dt-space-650);
+  block-size: var(--dt-size-100-percent);
   background-color: transparent;
   background-image: none;
   border-width: 0;
@@ -24,25 +24,25 @@
 }
 
 .d-recipe-contact-info__subtitle {
-  margin-top: var(--dt-space-200-negative);
+  margin-block-start: 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);
+  margin-block-start: var(--dt-space-200);
 }
 
 .d-recipe-contact-info__right {
   display: grid;
   align-content: center;
-  min-width: 0;
+  min-inline-size: 0;
 }
 
 .d-recipe-contact-info__avatars {
   display: flex;
   flex-direction: row;
-  margin-right: var(--dt-space-300-negative);
+  margin-inline-end: var(--dt-space-300-negative);
 
   .d-avatar {
     box-sizing: unset;
@@ -50,7 +50,7 @@
     border-radius: var(--dt-size-radius-pill);
 
     &.d-recipe-contact-info__avatar-stacked {
-      margin-left: var(--dt-space-550-negative);
+      margin-inline-start: var(--dt-space-550-negative);
     }
 
     &.d-recipe-contact-info__avatar-halo {

package/lib/build/less/recipes/editor.less

@@ -9,16 +9,15 @@
 }
 
 .d-recipe-editor__button-group-divider {
-  width: var(--dt-size-100);
-  height: calc(var(--dt-size-550) + var(--dt-size-300));
-  margin-left: var(--dt-space-400);
+  inline-size: var(--dt-size-100);
+  block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  margin-inline-start: var(--dt-space-400);
   background: var(--dt-color-border-subtle);
 }
 
 .d-recipe-editor-link__input-wrapper {
-  margin-top: var(--dt-space-350);
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  margin-block-start: var(--dt-space-350);
+  padding-block: var(--dt-space-200) var(--dt-space-200);
   background-color: var(--dt-color-surface-secondary);
   border: var(--dt-size-border-100) solid var(--dt-color-border-default);
   outline: none;
@@ -30,8 +29,7 @@
 }
 
 .d-recipe-editor__popover-footer {
-  padding-right: var(--dt-space-450);
-  padding-left: var(--dt-space-550);
+  padding-inline: var(--dt-space-550) var(--dt-space-450);
 }
 
 .d-recipe-editor__content {
@@ -41,9 +39,8 @@
 }
 
 .d-recipe-editor__content-input {
-  margin-top: var(--dt-space-350);
-  margin-bottom: var(--dt-space-350);
-  margin-left: var(--dt-space-500);
+  margin-block: var(--dt-space-350) var(--dt-space-350);
+  margin-inline-start: var(--dt-space-500);
 }
 
 .d-recipe-editor__link {

package/lib/build/less/recipes/emoji_row.less

@@ -39,7 +39,7 @@
   --emoji-item-color-foreground: var(--dt-action-color-foreground-muted-default);
   --emoji-item-color-background: var(--dt-action-color-background-muted-hover);
 
-  height: var(--dt-size-550);
+  block-size: var(--dt-size-550);
   padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--emoji-item-color-foreground);
   background-color: var(--emoji-item-color-background);

package/lib/build/less/recipes/feed_item_pill.less

@@ -8,8 +8,8 @@
 }
 
 .d-recipe-feed-item-pill__button {
-  width: var(--dt-size-100-percent);
-  text-align: left;
+  inline-size: var(--dt-size-100-percent);
+  text-align: start;
   background-color: var(--dt-color-surface-moderate);
   border-width: 0;
   border-radius: var(--dt-size-radius-600);
@@ -23,7 +23,7 @@
 
 .d-recipe-feed-item-pill__layout {
   gap: var(--dt-space-300);
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   padding: var(--dt-space-400);
   line-height: var(--dt-font-line-height-300)
 }
@@ -31,8 +31,8 @@
 .d-recipe-feed-item-pill__icon {
   display: grid;
   place-content: center;
-  min-width: var(--dt-size-600);
-  height: var(--dt-size-100-percent);
+  min-inline-size: var(--dt-size-600);
+  block-size: var(--dt-size-100-percent);
 
   & svg {
     animation: d-recipe-feed-item-pill-fade 0.15s ease-in;
@@ -47,25 +47,25 @@
 .d-recipe-feed-item-pill__title {
   display: grid;
   align-content: center;
-  height: var(--dt-size-100-percent);
+  block-size: 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);
+  margin-block-start: 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);
+  margin-block-start: 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);
+  min-inline-size: var(--dt-size-600);
+  block-size: var(--dt-size-100-percent);
 }
 
 // Gradient radius solution taken from https://stackoverflow.com/a/53037637