@dialpad/dialtone-css 8.62.0 → 8.63.0-next.1

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,23 @@
   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-color-foreground-primary);
   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 +82,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-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

@@ -9,7 +9,7 @@
 }
 
 .d-recipe-emoji-row__tooltip-content {
-   max-width: var(--dt-size-975);
+   max-inline-size: var(--dt-size-975);
 }
 
 .d-recipe-emoji-row__reaction {
@@ -17,7 +17,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);
@@ -73,5 +73,5 @@
 
 .d-recipe-emoji-row__emoji {
   display: inline-flex;
-  margin-right: var(--dt-space-300);
+  margin-inline-end: var(--dt-space-300);
 }

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

package/lib/build/less/recipes/feed_item_row.less

@@ -1,7 +1,7 @@
 .d-recipe-feed-item-row {
   position: relative;
   box-sizing: border-box;
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-500);
 
   &:focus-visible {
@@ -11,18 +11,18 @@
   .d-list-item__left {
     display: block;
     align-content: flex-start;
-    min-width: var(--dt-size-600);
+    min-inline-size: var(--dt-size-600);
     text-align: end;
   }
 
   .d-list-item__wrapper {
-    min-height: auto;
+    min-block-size: auto;
     padding: 0;
     font: var(--dt-typography-body-md-compact);
   }
 
   .d-list-item__bottom {
-    margin-top: 0;
+    margin-block-start: 0;
   }
 }
 
@@ -43,13 +43,11 @@
 }
 
 .d-recipe-feed-item-row__avatar-container {
-  padding-top: var(--dt-space-300);
-  padding-bottom: var(--dt-space-300);
+  padding-block: var(--dt-space-300) var(--dt-space-300);
 }
 
 .d-recipe-feed-item-row__attachment {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-300);
+  padding-block: var(--dt-space-200) var(--dt-space-300);
 }
 
 .d-recipe-feed-item-row__image {
@@ -64,7 +62,7 @@
 
 .d-recipe-feed-item-row__video {
   display: block;
-  height: 25.0rem;
+  block-size: 25.0rem;
 }
 
 .d-recipe-feed-item-row__header {
@@ -89,13 +87,11 @@
 .d-recipe-feed-item-row__reactions {
   display: flex;
   flex-wrap: wrap;
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  padding-block: var(--dt-space-200) var(--dt-space-200);
 }
 
 .d-recipe-feed-item-row__threading {
-  padding-top: var(--dt-space-200);
-  padding-bottom: var(--dt-space-200);
+  padding-block: var(--dt-space-200) var(--dt-space-200);
 }
 
 .d-recipe-feed-item-row__left-time {
@@ -108,6 +104,6 @@
 
 .d-recipe-feed-item-row__menu {
   position: absolute;
-  top: var(--dt-space-550-negative);
-  right: var(--dt-space-450);
+  inset-block-start: var(--dt-space-550-negative);
+  inset-inline-end: var(--dt-space-450);
 }

package/lib/build/less/recipes/grouped_chip.less

@@ -14,15 +14,15 @@
 }
 
 .d-recipe-grouped-chip__content-left {
-  max-width: var(--dt-size-730);
+  max-inline-size: var(--dt-size-730);
   background-color: var(--dt-color-surface-moderate-opaque);
-  border-top-left-radius: var(--dt-size-radius-pill);
-  border-bottom-left-radius: var(--dt-size-radius-pill);
+  border-start-start-radius: var(--dt-size-radius-pill);
+  border-end-start-radius: var(--dt-size-radius-pill);
 }
 
 .d-recipe-grouped-chip__content-right {
-  max-width: var(--dt-size-730);
+  max-inline-size: var(--dt-size-730);
   background-color: var(--dt-color-purple-200);
-  border-top-right-radius: var(--dt-size-radius-pill);
-  border-bottom-right-radius: var(--dt-size-radius-pill);
+  border-start-end-radius: var(--dt-size-radius-pill);
+  border-end-end-radius: var(--dt-size-radius-pill);
 }