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

package/lib/build/less/components/avatar.less

@@ -61,16 +61,16 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--avatar-size-shape);
-    height: var(--avatar-size-shape);
+    inline-size: var(--avatar-size-shape);
+    block-size: var(--avatar-size-shape);
     overflow: hidden;
     background-color: var(--avatar-color-background);
     border-radius: var(--dt-size-radius-pill);
   }
 
   &__image {
-    width: var(--avatar-size-image);
-    height: var(--avatar-size-image);
+    inline-size: var(--avatar-size-image);
+    block-size: var(--avatar-size-image);
     object-fit: cover;
     border-radius: var(--dt-size-radius-pill);
   }
@@ -96,22 +96,22 @@
 
   &__presence {
     position: absolute;
-    right: var(--avatar-presence-position-right);
-    bottom: var(--avatar-presence-position-bottom);
+    inset-inline-end: var(--avatar-presence-position-right);
+    inset-block-end: var(--avatar-presence-position-bottom);
     z-index: var(--zi-base);
     display: flex;
   }
 
   &__count {
     position: absolute;
-    right: var(--dt-space-0);
-    bottom: var(--dt-space-0);
+    inset-inline-end: var(--dt-space-0);
+    inset-block-end: var(--dt-space-0);
     z-index: var(--zi-base);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     box-sizing: border-box;
-    min-width: calc(var(--dt-size-300) * 3.5);
+    min-inline-size: calc(var(--dt-size-300) * 3.5);
     padding: var(--dt-space-200) calc(var(--dt-space-200) + var(--dt-space-100));
     color: var(--dt-color-foreground-primary-inverted);
     font-weight: var(--dt-font-weight-bold);
@@ -159,19 +159,19 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: var(--dt-size-100-percent);
-    height: var(--dt-size-100-percent);
+    inline-size: var(--dt-size-100-percent);
+    block-size: 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);
 
     &-icon {
-      width: var(--dt-size-100-percent);
+      inline-size: var(--dt-size-100-percent);
       color: var(--dt-color-foreground-primary-inverted);
     }
 
     &-text {
-      width: var(--dt-size-100-percent);
+      inline-size: 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);
@@ -222,7 +222,7 @@
   &--group {
     --avatar-size-shape: calc(var(--dt-size-300) * 4.5);
 
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
+    inline-size: var(--dt-size-550);
+    block-size: var(--dt-size-550);
   }
 }

package/lib/build/less/components/badge.less

@@ -135,8 +135,8 @@
   //  --------------------------------------------------------------------------
   &__decorative {
     display: inline-flex;
-    width: var(--dt-size-400);
-    height: var(--dt-size-400);
+    inline-size: var(--dt-size-400);
+    block-size: var(--dt-size-400);
     background-color: var(--badge-decorative-color);
     border-radius: var(--dt-size-200);
     margin-inline-start: var(--dt-space-200);

package/lib/build/less/components/banner.less

@@ -19,15 +19,14 @@
     --banner-dialog-padding-x: var(--dt-space-500);
 
     position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-inline: 0;
     z-index: var(--zi-navigation-fixed);
-    max-width: 100%;
-    min-height: var(--dt-size-650); // 48
+    max-inline-size: 100%;
+    min-block-size: var(--dt-size-650); // 48
     padding: 0;
     line-height: var(--banner-line-height);
-    border-bottom: 1px solid var(--banner-color-border);
+    border-block-end: 1px solid var(--banner-color-border);
     border-radius: 0;
     box-shadow: none;
 
@@ -54,9 +53,9 @@
     position: relative;
     display: flex;
     align-items: center;
-    width: 100%;
-    max-width: 128rem;
-    min-height: 100%;
+    inline-size: 100%;
+    max-inline-size: 128rem;
+    min-block-size: 100%;
     margin: 0 auto;
     padding: var(--banner-dialog-padding-y) var(--banner-dialog-padding-x);
 

package/lib/build/less/components/breadcrumbs.less

@@ -46,18 +46,19 @@
     //  ----------------------------------------------------------------------------
     &__item {
         position: relative;
-        margin: 0 0 0 var(--dt-space-400);
+        margin-inline: var(--dt-space-400) 0;
+        margin-block: 0;
         padding: 0;
         list-style: none;
 
         //  Provide a forward slash with each element except when it's the last one.
         &:not(:last-of-type) {
-            margin-right: var(--dt-space-450);
+            margin-inline-end: var(--dt-space-450);
 
             &::before {
                 position: absolute;
-                right: var(--dt-space-450-negative);
-                margin-top: var(--dt-space-100-negative);
+                inset-inline-end: var(--dt-space-450-negative);
+                margin-block-start: var(--dt-space-100-negative);
                 color: var(--breadcrumbs-color-separator);
                 content: '/';
             }

package/lib/build/less/components/button.less

@@ -228,11 +228,11 @@
 }
 
 .d-btn__icon--left:not(:only-child) {
-  margin-left: var(--dt-space-200-negative);
+  margin-inline-start: var(--dt-space-200-negative);
 }
 
 .d-btn__icon--right:not(:only-child) {
-  margin-right: var(--dt-space-200-negative);
+  margin-inline-end: var(--dt-space-200-negative);
 }
 
 //  ============================================================================
@@ -618,10 +618,9 @@
   .d-btn__icon {
     align-items: center;
     justify-content: center;
-    width: 2em;
-    height: 2em;
-    margin-right: var(--dt-space-400);
-    margin-left: var(--dt-space-300-negative);
+    inline-size: 2em;
+    block-size: 2em;
+    margin-inline: var(--dt-space-300-negative) var(--dt-space-400);
     background-color: var(--dt-color-neutral-white);
     border-radius: var(--dt-size-radius-200);
   }
@@ -670,10 +669,10 @@
   //  Show the loading animation
   &::before {
     position: absolute;
-    width: var(--dt-size-500);
-    height: var(--dt-size-500);
+    inline-size: var(--dt-size-500);
+    block-size: var(--dt-size-500);
     border: var(--dt-size-200) solid currentColor;
-    border-left-color: transparent !important;
+    border-inline-start-color: transparent !important;
     border-radius: var(--dt-size-radius-circle);
     animation: d-loading-circle 900ms infinite linear;
     content: "";
@@ -693,7 +692,7 @@
   .d-popover,
   .d-popover div,
   .d-popover &__omega {
-    height: 100%;
+    block-size: 100%;
   }
 
   &__alpha,
@@ -713,10 +712,9 @@
     // vertical divider between the two buttons
     &::before {
       position: absolute;
-      top: var(--button-border-radius);
-      bottom: var(--button-border-radius);
-      left: var(--dt-size-100-negative);
-      width: var(--dt-size-100);
+      inset-block: var(--button-border-radius);
+      inset-inline-start: var(--dt-size-100-negative);
+      inline-size: var(--dt-size-100);
       background-color: var(
         --button-color-text
       ); // use text color for divider line
@@ -746,13 +744,11 @@
     &.d-btn:disabled::before,
     &.d-btn--outlined::before,
     &.d-btn--primary::before {
-      top: var(--dt-size-100-negative);
-      bottom: var(--dt-size-100-negative);
+      inset-block: var(--dt-size-100-negative);
     }
 
     &.d-btn--outlined::before {
-      top: var(--dt-size-50-negative);
-      bottom: var(--dt-size-50-negative);
+      inset-block: var(--dt-size-50-negative);
     }
   }
 
@@ -760,18 +756,18 @@
   &__alpha:disabled:not(.d-btn--primary),
   &__alpha.d-btn--primary,
   &__alpha.d-btn--outlined {
-    border-right: 0;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-inline-end: 0;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
   }
 
   &__omega:disabled:not(.d-btn--outlined),
   &__omega:disabled:not(.d-btn--primary),
   &__omega.d-btn--primary,
   &__omega.d-btn--outlined {
-    border-left: 0;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-inline-start: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
   }
 
   // adjust x-padding for icon-only button at each size

package/lib/build/less/components/card.less

@@ -44,7 +44,7 @@
 //  ----------------------------------------------------------------------------
 .d-card__content {
   padding: var(--dt-space-500);
-  overflow-y: auto;
+  overflow-block: auto;
 }
 
 //  $$  FOOTER

package/lib/build/less/components/chip.less

@@ -30,7 +30,7 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  max-width: var(--dt-size-100-percent);
+  max-inline-size: var(--dt-size-100-percent);
   padding: var(--dt-space-300) var(--dt-space-400);
   color: var(--chip-color-text);
   font-size: var(--dt-font-size-200);
@@ -47,8 +47,8 @@
   // not nested within the chip. Only apply if close button exists (more than one child).
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--dt-size-500) + var(--dt-size-200));
-    height: calc(var(--dt-size-500) + var(--dt-size-200));
+    inline-size: calc(var(--dt-size-500) + var(--dt-size-200));
+    block-size: calc(var(--dt-size-500) + var(--dt-size-200));
     content: '';
   }
 
@@ -88,14 +88,14 @@
   .d-btn--circle();
 
   position: absolute;
-  right: var(--dt-space-200);
+  inset-inline-end: var(--dt-space-200);
   padding: calc(var(--dt-space-200) + var(--dt-space-100));
   border-width: 0;
 
   &::before {
     position: absolute;
-    width: 2.6rem; // magic number
-    height: 2.8rem; // magic number
+    inline-size: 2.6rem; // magic number
+    block-size: 2.8rem; // magic number
     content: '';
   }
 
@@ -111,7 +111,7 @@
 }
 
 .d-chip__icon {
-  padding-right: var(--dt-space-350);
+  padding-inline-end: var(--dt-space-350);
   line-height: 1;
 }
 
@@ -138,16 +138,15 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: var(--dt-size-450);
-    height: var(--dt-size-450);
+    inline-size: var(--dt-size-450);
+    block-size: var(--dt-size-450);
     content: '';
   }
 
   .d-avatar {
     --avatar-size-shape: var(--dt-size-500);
 
-    margin-right: var(--dt-space-350);
-    margin-left: var(--dt-space-300-negative);
+    margin-inline: var(--dt-space-300-negative) var(--dt-space-350);
   }
 }
 
@@ -156,8 +155,8 @@
 
   // Clickable area for the close button.
   &::before {
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
+    inline-size: var(--dt-size-550);
+    block-size: var(--dt-size-550);
   }
 }
 
@@ -171,15 +170,15 @@
   // not nested within the chip.
   &:not(:only-child)::after {
     flex-shrink: 0;
-    width: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
-    height: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
+    inline-size: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
+    block-size: calc(var(--dt-size-500) - var(--dt-size-200)); // 14
     content: '';
   }
 
   .d-avatar {
     --avatar-size-shape: calc(var(--dt-size-500) + var(--dt-size-300)); // 20
 
-    margin-right: var(--dt-space-300);
+    margin-inline-end: var(--dt-space-300);
   }
 }
 
@@ -187,7 +186,7 @@
   padding: var(--dt-space-200);
 
   &::before {
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
+    inline-size: var(--dt-size-550);
+    block-size: var(--dt-size-550);
   }
 }

package/lib/build/less/components/collapsible.less

@@ -19,14 +19,14 @@
 
   flex: none;
   flex-shrink: 0;
-  width: var(--icon-size);
-  height: var(--icon-size);
-  margin-right: var(--dt-space-400);
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+  margin-inline-end: var(--dt-space-400);
   fill: currentColor;
 }
 
 .d-collapsible__anchor-text {
-  margin-right: auto;
+  margin-inline-end: auto;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -35,5 +35,5 @@
 .d-collapsible__enter-active,
 .d-collapsible__leave-active {
   overflow: hidden;
-  transition: height var(--td300) var(--ttf-out-quint);
+  transition: block-size var(--td300) var(--ttf-out-quint);
 }

package/lib/build/less/components/combobox.less

@@ -30,8 +30,8 @@
 //  $   LOADING LIST
 //  ----------------------------------------------------------------------------
 .d-combobox__loading-list {
-  max-height: var(--dt-size-925);
-  margin-top: var(--dt-space-400);
+  max-block-size: var(--dt-size-925);
+  margin-block-start: var(--dt-space-400);
   padding: var(--dt-space-0);
-  overflow-y: auto;
+  overflow-block: auto;
 }

package/lib/build/less/components/datepicker.less

@@ -15,7 +15,7 @@
   --datepicker-button-size: calc(var(--dt-size-600) - var(--dt-size-200)); // Emulates SM button since Vue component in lieu of Vue component using DT button
 
   box-sizing: border-box;
-  width: var(--datepicker-width);
+  inline-size: var(--datepicker-width);
   padding: var(--dt-space-500);
 
   &__hd {
@@ -25,7 +25,7 @@
 
   &__month-year {
     justify-content: space-between;
-    width: 100%;
+    inline-size: 100%;
     color: var(--dt-color-foreground-secondary);
     text-align: center;
   }
@@ -38,8 +38,8 @@
   }
 
   &__nav-btn {
-    width: var(--datepicker-button-size);
-    height: var(--datepicker-button-size);
+    inline-size: var(--datepicker-button-size);
+    block-size: var(--datepicker-button-size);
   }
 
   &__weekday {
@@ -50,24 +50,23 @@
   }
 
   &__calendar {
-    width: 100%;
+    inline-size: 100%;
     border-collapse: collapse;
   }
 
   &__cell {
     padding: 0;
-    padding-top: var(--dt-space-200);
+    padding-block-start: var(--dt-space-200);
     text-align: center;
 
     &--header {
-      padding-top: 0;
-      padding-bottom: var(--dt-space-400);
+      padding-block: 0 var(--dt-space-400);
     }
   }
 
   &__day {
-    width: var(--datepicker-button-size);
-    height: var(--datepicker-button-size);
+    inline-size: var(--datepicker-button-size);
+    block-size: var(--datepicker-button-size);
     font-variant-numeric: tabular-nums;
 
     &--selected {

package/lib/build/less/components/description-list.less

@@ -24,7 +24,7 @@
 
   &__description {
     flex: 1 1 50%;
-    margin-left: 0;
+    margin-inline-start: 0;
     color: var(--dt-color-foreground-primary);
   }
 }

package/lib/build/less/components/dropdown.less

@@ -1,14 +1,13 @@
 .d-context-menu-list {
-  width: var(--dt-size-850);
+  inline-size: 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);
+  padding-inline: var(--dt-space-0) var(--dt-space-0);
 
   >.d-list-item {
-    margin-top: var(--dt-space-200);
+    margin-block-start: var(--dt-space-200);
   }
 }

package/lib/build/less/components/emoji-picker.less

@@ -14,8 +14,8 @@
   flex-direction: column;
   // fixed width to achieve accessibility in keyboard (372px)
   // with this width we have 9 emoji per row
-  width: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
-  height: 100%;
+  inline-size: calc(var(--dt-size-925) + var(--dt-size-600) + var(--dt-size-400));
+  block-size: 100%;
   background-color: var(--dt-color-surface-primary);
   border-radius: var(--dt-size-radius-300);
 
@@ -25,10 +25,9 @@
 
     &::after {
       position: absolute;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      height: var(--dt-size-border-200);
+      inset-inline: 0 0;
+      inset-block-end: 0;
+      block-size: var(--dt-size-border-200);
       background-color: var(--dt-color-surface-moderate) !important;
       content: '';
     }
@@ -37,8 +36,8 @@
   &__alignment {
     // !important to default value to override popover dialog box-sizing: border-box style
     box-sizing: content-box !important;
-    width: auto;
-    max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+    inline-size: auto;
+    max-inline-size: calc(var(--dt-size-925) + var(--dt-size-400));
     margin: 0 var(--dt-space-500);
   }
 
@@ -47,10 +46,10 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
+    block-size: calc(var(--dt-size-650) + var(--dt-size-400) + var(--dt-size-200));
     padding: 0 var(--dt-space-500);
     background: var(--dt-color-surface-secondary);
-    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);
   }
 
   &__add-emoji {
@@ -74,7 +73,7 @@
 
         &.d-tab--selected {
           &::after {
-            height: var(--dt-size-border-200);
+            block-size: var(--dt-size-border-200);
           }
         }
     }
@@ -90,8 +89,8 @@
     border-radius: var(--dt-size-radius-pill);
 
     button {
-      width: var(--dt-size-600);
-      height: var(--dt-size-600);
+      inline-size: var(--dt-size-600);
+      block-size: var(--dt-size-600);
       margin: 0;
       padding: 0;
       background: none;
@@ -114,8 +113,8 @@
   &__skin-selected {
     button {
       display: inline-block;
-      width: var(--dt-size-625);
-      height: var(--dt-size-625);
+      inline-size: var(--dt-size-625);
+      block-size: var(--dt-size-625);
       margin: 0;
       padding: calc(var(--dt-space-350) + var(--dt-space-100));
       background: var(--dt-color-surface-moderate-opaque);
@@ -131,10 +130,10 @@
   }
 
   &__selector {
-    min-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+    min-block-size: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
 
     p {
-      padding-bottom: var(--dt-space-300);
+      padding-block-end: var(--dt-space-300);
       color: var(--dt-color-foreground-secondary);
       font: var(--dt-typography-headline-eyebrow);
       text-transform: var(--dt-typography-headline-eyebrow-text-case);
@@ -143,8 +142,8 @@
 
   &__category {
     position: sticky;
-    top: 0;
-    width: 100%;
+    inset-block-start: 0;
+    inline-size: 100%;
     margin: 0;
     padding: var(--dt-space-500) var(--dt-space-500) 0 var(--dt-space-500);
     background: var(--dt-color-surface-primary);
@@ -152,42 +151,42 @@
 
   &__list {
     position: relative;
-    height: 100%;
-    max-height: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
-    padding-bottom: calc(var(--dt-space-300) + var(--dt-space-100));
+    block-size: 100%;
+    max-block-size: calc(var(--dt-size-905) + var(--dt-size-600) + var(--dt-size-100));
+    padding-block-end: calc(var(--dt-space-300) + var(--dt-space-100));
     overflow: hidden auto;
 
     div:not(:first-child) {
       p {
-        margin-top: var(--dt-space-500);
+        margin-block-start: var(--dt-space-500);
       }
     }
   }
 
   &__search-label {
-    padding-top: var(--dt-space-500);
+    padding-block-start: var(--dt-space-500);
   }
 
   &__search-x-button {
-    margin-right: var(--dt-space-300-negative);
+    margin-inline-end: var(--dt-space-300-negative);
   }
 
   &__tab {
     display: flex;
     flex-wrap: wrap;
     gap: var(--dt-space-200);
-    width: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
-    max-width: calc(var(--dt-size-925) + var(--dt-size-400));
+    inline-size: calc(100% + calc(var(--dt-size-500) - var(--dt-size-100)));
+    max-inline-size: calc(var(--dt-size-925) + var(--dt-size-400));
     // We use this margin left to align the emoji list with the tabset label
-    margin-left: var(--dt-space-350-negative);
-    padding-top: var(--dt-space-300);
+    margin-inline-start: var(--dt-space-350-negative);
+    padding-block-start: var(--dt-space-300);
 
     button {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: calc(var(--dt-size-600) + var(--dt-size-300));
-      height: calc(var(--dt-size-600) + var(--dt-size-300));
+      inline-size: calc(var(--dt-size-600) + var(--dt-size-300));
+      block-size: calc(var(--dt-size-600) + var(--dt-size-300));
       margin: 0;
       padding: 0;
       background: none;
@@ -231,8 +230,8 @@
     display: flex;
     gap: var(--dt-space-400);
     align-items: center;
-    width: 100%;
-    max-width: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
+    inline-size: 100%;
+    max-inline-size: calc(var(--dt-size-905) + var(--dt-size-550) + var(--dt-size-200));
     color: var(--dt-color-foreground-tertiary);
     font: var(--dt-typography-body-md);
   }

package/lib/build/less/components/emoji-text-wrapper.less

@@ -1,7 +1,7 @@
 .d-emoji-text-wrapper {
   // Only inline emojis need this adjustments
   >.d-emoji {
-    height: 1em;
+    block-size: 1em;
 
     img.d-icon {
       inset-block-start: calc(50% - 1px);