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

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

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

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

@@ -5,7 +5,7 @@
 
   .d-icon {
     position: absolute;
-    inset-block-start: 50%;
+    top: 50%;
     display: block;
     transform: translateY(-50%);
   }

package/lib/build/less/components/empty-state.less

@@ -15,7 +15,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  inline-size: 100%;
+  width: 100%;
   padding: var(--dt-space-600);
   text-align: center;
 
@@ -46,12 +46,12 @@
   }
 
   &--size-sm {
-    inline-size: var(--dt-size-50-percent);
+    width: var(--dt-size-50-percent);
     padding: var(--dt-space-500);
   }
 
   &--size-md {
-    inline-size: var(--dt-size-70-percent);
+    width: var(--dt-size-70-percent);
     padding: var(--dt-space-500);
   }
 }

package/lib/build/less/components/forms.less

@@ -19,7 +19,7 @@
 //  $  FIELDSETS
 //  ----------------------------------------------------------------------------
 fieldset {
-  min-inline-size: 0;
+  min-width: 0;
   margin: 0;
   padding: 0;
   border: none;
@@ -36,7 +36,7 @@ fieldset {
   align-items: baseline;
   justify-content: space-between;
   box-sizing: border-box;
-  margin-block-end: var(--dt-space-300);
+  margin-bottom: var(--dt-space-300);
   color: var(--dt-color-foreground-secondary);
   font: var(--dt-typography-label-md);
   word-break: break-word;
@@ -77,7 +77,8 @@ fieldset {
 }
 
 .d-label + .d-description {
-  margin-block: var(--dt-space-300-negative) var(--dt-space-300);
+  margin-top: var(--dt-space-300-negative);
+  margin-bottom: var(--dt-space-300);
 }
 
 //  $$  SIZES
@@ -99,7 +100,7 @@ fieldset {
   display: flex;
   gap: var(--dt-space-300);
   align-items: flex-start;
-  margin-block-start: var(--dt-space-400);
+  margin-top: var(--dt-space-400);
   color: var(--validation-color-text);
   font-weight: var(--dt-font-weight-medium);
   font-size: var(--dt-font-size-100);
@@ -109,9 +110,9 @@ fieldset {
   // Icon Slot
   &::before {
     display: block;
-    inline-size: var(--dt-size-500); // 16
-    min-inline-size: var(--dt-size-500); // 16
-    block-size: var(--dt-size-500); // 16
+    width: var(--dt-size-500); // 16
+    min-width: var(--dt-size-500); // 16
+    height: var(--dt-size-500); // 16
     background-color: var(--validation-color-text);
     content: '';
   }

package/lib/build/less/components/icon.less

@@ -24,8 +24,8 @@
   --icon-size: var(--icon-size-500);
 
   flex: none;
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
+  width: var(--icon-size);
+  height: var(--icon-size);
   fill: currentColor;
 
   &--size-800 {

package/lib/build/less/components/image-viewer.less

@@ -17,14 +17,14 @@
 }
 
 .d-image-viewer__full {
-  max-inline-size: 80%;
-  max-block-size: 80%;
+  max-width: 80%;
+  max-height: 80%;
   padding: var(--dt-space-0);
   border-radius: var(--dt-size-radius-0);
 
   &__image {
-    max-inline-size: 100%;
-    max-block-size: 100%;
+    max-width: 100%;
+    max-height: 100%;
   }
 }
 

package/lib/build/less/components/input.less

@@ -41,8 +41,8 @@
     display: inline-flex;
     flex: 1 0%;
     box-sizing: border-box;
-    inline-size: 100%;
-    min-inline-size: 0;
+    width: 100%;
+    min-width: 0;
     padding: var(--input-padding-y) var(--input-padding-x);
     color: var(--input-color-text);
     font: var(--input-typography);
@@ -154,7 +154,7 @@
 }
 
 .d-input__length-description {
-    margin-block-end: var(--dt-space-200);
+    margin-bottom: var(--dt-space-200);
 }
 
 .d-input--hidden {
@@ -165,11 +165,11 @@
 //  ----------------------------------------------------------------------------
 .d-input__wrapper {
     padding: 0;
-    overflow-block: auto;
+    overflow-y: auto;
 
     .d-textarea + .d-input-icon--right {
       position: absolute;
-      inset-inline-end: var(--dt-space-450);
+      right: var(--dt-space-450);
     }
 
     .d-input-icon--left:has(+ .d-textarea) {
@@ -178,35 +178,35 @@
 
     .d-input-icon:has(+ .d-textarea),
     .d-textarea+.d-input-icon {
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-space-200));
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-200));
     }
 
     .d-input-icon:has(+ .d-textarea--xs),
     .d-textarea--xs + .d-input-icon {
         #d-internal__input-and-select-xs();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-space-100));
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
     }
 
     .d-input-icon:has(+ .d-textarea--sm),
     .d-textarea--sm+.d-input-icon {
         #d-internal__input-and-select-sm();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-space-100));
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
     }
 
     .d-input-icon:has(+ .d-textarea--lg),
     .d-textarea--lg+.d-input-icon {
         #d-internal__input-and-select-lg();
 
-        padding-block-start: calc(var(--input-padding-y) + var(--dt-space-100));
+        padding-top: calc(var(--input-padding-y) + var(--dt-space-100));
     }
 
     .d-input-icon:has(+ .d-textarea--xl),
     .d-textarea--xl+.d-input-icon {
         #d-internal__input-and-select-xl();
 
-        padding-block-start: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
+        padding-top: calc(var(--input-padding-y) + (var(--dt-space-350) - var(--dt-space-100)));
     }
 
     .d-input,
@@ -246,9 +246,9 @@
 //  $  TEXTAREAS
 //  ----------------------------------------------------------------------------
 .d-textarea {
-    min-block-size: calc(var(--dt-size-300) * 20); // 80
+    min-height: calc(var(--dt-size-300) * 20); // 80
     vertical-align: top;
-    resize: block;
+    resize: vertical;
     scroll-padding-block: var(--input-padding-y);
 }
 
@@ -257,25 +257,25 @@
 .d-textarea--xs {
     #d-internal__input-and-select-xs();
 
-    min-block-size: calc(var(--dt-size-300) * 10); // 40
+    min-height: calc(var(--dt-size-300) * 10); // 40
 }
 
 .d-textarea--sm {
     #d-internal__input-and-select-sm();
 
-    min-block-size: var(--dt-size-650); // 48
+    min-height: var(--dt-size-650); // 48
 }
 
 .d-textarea--lg {
     #d-internal__input-and-select-lg();
 
-    min-block-size: calc(var(--dt-size-300) * 23); // 92
+    min-height: calc(var(--dt-size-300) * 23); // 92
 }
 
 .d-textarea--xl {
     #d-internal__input-and-select-xl();
 
-    min-block-size: calc(var(--dt-size-300) * 25); // 100
+    min-height: calc(var(--dt-size-300) * 25); // 100
 }
 
 //  $$  VALIDATION STATES
@@ -304,14 +304,14 @@
     }
 
     &--right:not(:empty) {
-        margin-inline-end: var(--dt-space-400);
+        margin-right: var(--dt-space-400);
 
         .d-btn {
-            margin-inline-end: var(--dt-space-350-negative);
+            margin-right: var(--dt-space-350-negative);
         }
     }
 
     &--left:not(:empty) {
-        margin-inline-start: var(--dt-space-400);
+        margin-left: var(--dt-space-400);
     }
 }

package/lib/build/less/components/item-layout.less

@@ -15,7 +15,7 @@
 .d-item-layout {
   display: flex;
   align-items: stretch;
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
   padding: var(--dt-space-300) var(--dt-space-400);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
@@ -25,7 +25,7 @@
     flex-direction: column;
     flex-grow: 1;
     justify-content: center;
-    min-inline-size: var(--dt-size-0);
+    min-width: var(--dt-size-0);
 
     > .d-item-layout__subtitle {
       color: var(--dt-color-foreground-tertiary);
@@ -33,11 +33,11 @@
     }
 
     > .d-item-layout__subtitle-with-title {
-      margin-block-start: var(--dt-space-200-negative);
+      margin-top: var(--dt-space-200-negative);
     }
 
     > .d-item-layout__bottom {
-      margin-block-start: var(--dt-space-200);
+      margin-top: var(--dt-space-200);
     }
   }
 
@@ -45,18 +45,18 @@
   > .d-item-layout__left {
     display: flex;
     align-items: center;
-    min-inline-size: var(--dt-size-600);
-    min-block-size: inherit;
+    min-width: var(--dt-size-600);
+    min-height: inherit;
   }
 
   > .d-item-layout__right {
     flex-shrink: 0;
-    padding-inline-start: var(--dt-space-400);
+    padding-left: var(--dt-space-400);
   }
 
   > .d-item-layout__left {
     justify-content: flex-end;
-    padding-inline-end: var(--dt-space-400);
+    padding-right: var(--dt-space-400);
   }
 
   > .d-item-layout__selected {

package/lib/build/less/components/keyboard-shortcut.less

@@ -15,7 +15,8 @@
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
-  padding-inline: var(--dt-space-300) var(--dt-space-300);
+  padding-right: var(--dt-space-300);
+  padding-left: var(--dt-space-300);
   font-size: var(--dt-font-size-100);
   font-family: var(--dt-font-family-body);
   border: var(--dt-size-100) solid;
@@ -33,8 +34,8 @@
   /* https://css-tricks.com/inclusively-hidden/ */
   &--sr-only:not(:focus, :active) {
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
+    width: 1px;
+    height: 1px;
     overflow: hidden;
     white-space: nowrap;
     clip: rect(0 0 0 0);
@@ -43,7 +44,7 @@
 
   &__icon,
   &__item {
-    margin-inline-end: var(--dt-space-200);
+    margin-right: var(--dt-space-200);
     color: var(--dt-color-foreground-tertiary);
 
     &--inverted {

package/lib/build/less/components/list-item-group.less

@@ -12,5 +12,6 @@
 //  ----------------------------------------------------------------------------
 .d-list-item-group {
   position: relative;
-  padding-inline: var(--dt-space-0) var(--dt-space-0);
+  padding-right: var(--dt-space-0);
+  padding-left: var(--dt-space-0);
 }

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

@@ -24,7 +24,7 @@
   &-separator {
     margin: var(--dt-space-300) var(--dt-space-300-negative);
     list-style: none;
-    border-block-start: var(--dt-size-100) solid var(--dt-color-border-default);
+    border-top: var(--dt-size-100) solid var(--dt-color-border-default);
   }
 
   :focus-visible {
@@ -35,7 +35,7 @@
 
 .d-list-item__wrapper {
   gap: var(--dt-space-400);
-  min-block-size: calc(var(--dt-size-550) + var(--dt-size-300));
+  min-height: calc(var(--dt-size-550) + var(--dt-size-300));
   padding: var(--dt-space-300) var(--dt-space-400);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-300);
@@ -53,15 +53,15 @@
 }
 
 .d-list-item__title {
-  min-inline-size: var(--dt-size-0);
+  min-width: var(--dt-size-0);
 }
 
 .d-list-item__subtitle {
-  margin-block-start: var(--dt-space-200-negative);
+  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-block-start: var(--dt-space-200);
+  margin-top: var(--dt-space-200);
 }

package/lib/build/less/components/modal.less

@@ -58,10 +58,10 @@
 
   &[aria-hidden='false'] {
     position: fixed;
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    inline-size: 100%;
-    min-block-size: 100%;
+    top: 0;
+    left: 0;
+    width: 100%;
+    min-height: 100%;
   }
 }
 
@@ -74,11 +74,11 @@
   flex-direction: column;
   gap: var(--dt-space-500); //
   box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: var(--dt-size-1020); // 628
-  max-block-size: 100%;
+  width: 100%;
+  max-width: var(--dt-size-1020); // 628
+  max-height: 100%;
   padding: var(--modal-dialog-padding); // 32
-  overflow-block: auto;
+  overflow-y: auto;
   color: var(--modal-dialog-color-text);
   font-size: var(--dt-font-size-200);
   line-height: var(--dt-font-line-height-400);
@@ -129,7 +129,7 @@
   --modal-header-padding: var(--dt-space-550); // 24
 
   margin: 0 !important;
-  padding-inline-end: var(--modal-header-padding);
+  padding-right: var(--modal-header-padding);
   color: var(--modal-header-color-text);
   font-weight: var(--dt-font-weight-medium);
   font-size: var(--dt-font-size-400);
@@ -139,7 +139,7 @@
 //  $$  CONTENT
 //  ----------------------------------------------------------------------------
 .d-modal__content {
-  max-inline-size: 75ch;
+  max-width: 75ch;
 }
 
 
@@ -148,8 +148,8 @@
 //  ----------------------------------------------------------------------------
 .d-modal__close {
   position: absolute;
-  inset-block-start: var(--dt-space-500); // 16
-  inset-inline-end: var(--dt-space-500); // 16
+  inset-block-start: var(--dt-space-400);
+  inset-inline-end: var(--dt-space-400);
   margin: 0 !important;
 }
 
@@ -164,8 +164,8 @@
 
   position: relative;
   box-sizing: border-box;
-  inline-size: 100%;
-  max-inline-size: var(--dt-size-1020); // 628
+  width: 100%;
+  max-width: var(--dt-size-1020); // 628
   padding: var(--modal-banner-padding-y) var(--modal-banner-padding-x); // 16 32
   color: var(--dt-color-foreground-primary);
   font-size: var(--dt-font-size-200);
@@ -173,7 +173,7 @@
   background-color: var(--modal-banner-color-background);
   background-clip: padding-box;
   border: var(--dt-size-100) solid var(--modal-dialog-color-border);
-  border-block-end-width: 0;
+  border-bottom-width: 0;
   border-radius: var(--dt-size-500) var(--dt-size-500) 0 0;
   box-shadow: var(--modal-dialog-shadow);
 
@@ -200,18 +200,19 @@
   &::before {
     // 🤦 don't ask. or do, i'm not even sorry.
     position: absolute;
-    inset-inline: 0 0;
-    inset-block-end: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
     z-index: var(--zi-modal-element);
-    block-size: var(--modal-banner-padding-y);
+    height: var(--modal-banner-padding-y);
     background-color: var(--modal-banner-color-background);
     content: '';
   }
 
   &:not(.d-d-none) + .d-modal__dialog {
-    border-block-start-width: 0;
-    border-start-start-radius: 0;
-    border-start-end-radius: 0;
+    border-top-width: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 }
 
@@ -231,8 +232,8 @@
   .d-modal__dialog {
     display: flex;
     flex-direction: column;
-    max-inline-size: unset;
-    block-size: 100%;
+    max-width: unset;
+    height: 100%;
     border-radius: 0;
     transform: unset !important;
   }
@@ -242,16 +243,17 @@
   }
 
   .d-modal__content {
-    padding-inline: var(--dt-space-600) 0; // 32
+    padding-right: 0;
+    padding-left: var(--dt-space-600); // 32
   }
 
   .d-modal__footer {
-    margin-block-start: auto !important;
+    margin-top: auto !important;
     padding: 0 var(--dt-space-550) var(--dt-space-600) var(--dt-space-600); // 0 24 32 32
   }
 
   .d-modal__banner {
-    max-inline-size: unset;
+    max-width: unset;
     padding: var(--dt-space-450) var(--dt-space-600); // 12 32
     border-radius: 0;
   }
@@ -265,7 +267,7 @@
   overflow: hidden;
 
   .d-modal__content {
-    overflow-block: auto;
+    overflow-y: auto;
   }
 }
 

package/lib/build/less/components/notice.less

@@ -30,8 +30,8 @@
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    inline-size: 100%;
-    max-inline-size: var(--dt-size-1020);
+    width: 100%;
+    max-width: var(--dt-size-1020);
     padding: var(--notice-padding);
     color: var(--notice-color-text);
     font-size: var(--notice-font-size);
@@ -50,7 +50,7 @@
     display: flex;
     flex: 1 auto;
     flex-direction: column;
-    margin-inline-end: var(--dt-space-500);
+    margin-right: var(--dt-space-500);
 }
 
 //  $$  ACTIONS
@@ -71,11 +71,11 @@
 .d-notice__icon {
     display: flex;
     flex: 0 auto;
-    margin-inline-end: var(--dt-space-450);
+    margin-right: var(--dt-space-450);
     color: var(--notice-color-icon);
 
     .d-banner & {
-        margin-inline-end: var(--dt-space-400);
+        margin-right: var(--dt-space-400);
     }
 }
 

package/lib/build/less/components/pagination.less

@@ -23,7 +23,8 @@
 //  $   PREV & NEXT BUTTONS
 //  ----------------------------------------------------------------------------
 .d-pagination__button {
-  padding-inline: var(--dt-space-400) var(--dt-space-400);
+  padding-right: var(--dt-space-400);
+  padding-left: var(--dt-space-400);
 
   &:disabled {
     color: var(--dt-color-foreground-secondary-inverted);
@@ -39,7 +40,7 @@
 }
 
 .d-pagination__separator-icon {
-  inline-size: var(--dt-size-550);
+  width: var(--dt-size-550);
   color: var(--dt-color-foreground-tertiary);
   text-align: center;
 }

package/lib/build/less/components/popover.less

@@ -72,20 +72,21 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    inline-size: 100%;
-    min-block-size: var(--dt-size-650);
-    padding-block: var(--dt-space-350) var(--dt-space-350);
+    width: 100%;
+    min-height: var(--dt-size-650);
+    padding-top: var(--dt-space-350);
+    padding-bottom: var(--dt-space-350);
     overflow: auto;
     font-weight: var(--dt-font-weight-semi-bold);
     font-size: var(--dt-font-size-200);
 
     &__content {
-      inline-size: 100%;
+      width: 100%;
       text-overflow: ellipsis;
     }
 
     &__close-button {
-      margin-inline-end: var(--dt-space-350);
+      margin-right: var(--dt-space-350);
       padding: var(--dt-space-350);
       border-color: transparent;
     }
@@ -93,12 +94,12 @@
 
   &__header {
     grid-row: 1;
-    border-block-end: var(--popover-border-width) solid var(--popover-color-border);
+    border-bottom: var(--popover-border-width) solid var(--popover-color-border);
   }
 
   &__footer {
     grid-row: 3;
-    border-block-start: var(--popover-border-width) solid var(--popover-color-border);
+    border-top: var(--popover-border-width) solid var(--popover-color-border);
   }
 }
 

package/lib/build/less/components/presence.less

@@ -7,12 +7,12 @@
 //  visit https://dialtone.dialpad.com/components/presence
 
 .d-presence {
-  --presence-color-border-base: var(--dt-theme-sidebar-color-background);
+  --presence-color-border-base: var(--dt-shell-color-surface-default);
   --presence-color-border-offline: var(--dt-color-border-bold);
-  --presence-color-background-active: var(--dt-theme-presence-color-background-available);
-  --presence-color-background-busy: var(--dt-theme-presence-color-background-busy-unavailable);
-  --presence-color-background-away: var(--dt-theme-presence-color-background-busy);
-  --presence-color-background-offline: var(--dt-theme-sidebar-color-background);
+  --presence-color-background-active: var(--dt-shell-presence-color-available);
+  --presence-color-background-busy: var(--dt-shell-presence-color-unavailable);
+  --presence-color-background-away: var(--dt-shell-presence-color-busy);
+  --presence-color-background-offline: var(--dt-shell-presence-color-offline);
   --presence-border-size: var(--dt-size-200);
   --presence-size: var(--dt-size-400);
 
@@ -24,17 +24,17 @@
   border-radius: var(--dt-size-radius-circle);
 
   .d-recipe-leftbar-row--selected & {
-    --presence-color-border-base: var(--dt-theme-sidebar-selected-row-color-background);
+    --presence-color-border-base: var(--dt-shell-color-surface-default);
   }
 
   .d-recipe-leftbar-row__primary:hover & {
-    --presence-color-border-base: var(--dt-theme-sidebar-row-color-background-hover);
+    --presence-color-border-base: var(--dt-shell-action-color-background-primary-hover);
   }
 
   &__inner {
     box-sizing: border-box;
-    inline-size: var(--presence-size);
-    block-size: var(--presence-size);
+    width: var(--presence-size);
+    height: var(--presence-size);
     border: none;
     border-radius: 50%;