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

package/lib/build/less/components/radio-checkbox.less

@@ -36,8 +36,8 @@
     //  [1] Check to see if we can use custom styles, if so reset the defaults
     //  ------------------------------------------------------------------------
     @supports ((-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none)) {
-        width: var(--dt-size-500); // 16
-        height: var(--dt-size-500); // 16
+        inline-size: var(--dt-size-500); // 16
+        block-size: var(--dt-size-500); // 16
 
         //  [2]  Now re-style the checkboxes and radios
         //  --------------------------------------------------------------------
@@ -113,7 +113,7 @@
         align-items: baseline;
         justify-content: space-between;
         box-sizing: border-box;
-        margin-bottom: var(--dt-space-300);
+        margin-block-end: var(--dt-space-300);
         color: var(--dt-color-foreground-secondary);
         font-weight: var(--dt-font-weight-semi-bold);
         font-size: var(--dt-font-size-200);
@@ -133,7 +133,7 @@
 .d-radio__input {
     display: flex;
     align-self: flex-start;
-    padding-top: var(--dt-space-300);
+    padding-block-start: var(--dt-space-300);
 }
 
 
@@ -160,8 +160,8 @@
 
 .d-checkbox__messages,
 .d-radio__messages {
-    margin-top: var(--dt-space-200-negative);
-    margin-left: var(--dt-space-550);
+    margin-block-start: var(--dt-space-200-negative);
+    margin-inline-start: var(--dt-space-550);
 }
 
 .d-checkbox__description {

package/lib/build/less/components/rich-text-editor.less

@@ -18,15 +18,15 @@
     box-shadow: none;
 
     p.is-editor-empty:first-child::before {
-      float: left;
-      height: 0;
+      float: inline-start;
+      block-size: 0;
       color: var(--dt-color-foreground-placeholder);
       content: attr(data-placeholder);
       pointer-events: none;
     }
 
     ul, ol {
-      padding-left: var(--dt-space-525);
+      padding-inline-start: var(--dt-space-525);
     }
 
     ul > li {
@@ -38,9 +38,9 @@
     }
 
     blockquote {
-      margin-left: 0;
-      padding-left: var(--dt-space-400);
-      border-left: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
+      margin-inline-start: 0;
+      padding-inline-start: var(--dt-space-400);
+      border-inline-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
     }
   }
 }
@@ -50,13 +50,13 @@
 }
 
 .d-suggestion-list__container {
-  max-height: var(--dt-size-875);
+  max-block-size: var(--dt-size-875);
 }
 
 .d-suggestion-list {
   position: relative;
-  min-width: var(--dt-size-925);
-  max-width: var(--dt-size-975);
+  min-inline-size: var(--dt-size-925);
+  max-inline-size: var(--dt-size-975);
   padding: var(--dt-size-300);
 }
 
@@ -71,23 +71,24 @@
 }
 
 .d-mention-suggestion__container {
-  width: 100%;
+  inline-size: 100%;
 }
+
 .d-mention-suggestion__details-container {
-  width: 90%;
+  inline-size: 90%;
 }
 
 .d-mention-suggestion__presence {
-  min-width: fit-content;
-  margin-left: var(--dt-space-200);
+  min-inline-size: fit-content;
+  margin-inline-start: var(--dt-space-200);
 }
 
 .d-mention-suggestion__status {
   overflow: hidden;
+  color: var(--dt-color-foreground-tertiary);
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--dt-color-foreground-tertiary);
-  margin-left: var(--dt-space-100);
+  margin-inline-start: var(--dt-space-100);
 }
 
 .d-mention-suggestion__divider {

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

@@ -22,10 +22,10 @@
     'footer';
   grid-template-rows: min-content auto 1fr min-content;
   grid-template-columns: 1fr;
-  min-height: 100vh;
+  min-block-size: 100vh;
 
   &--fixed {
-    height: auto;
+    block-size: auto;
   }
 
   &__header {
@@ -33,14 +33,14 @@
 
     &--sticky {
       position: sticky;
-      top: 0;
+      inset-block-start: 0;
       z-index: var(--zi-navigation);
     }
   }
 
   &__sidebar {
     grid-area: sidebar;
-    height: 100%;
+    block-size: 100%;
     overflow: hidden auto;
     box-shadow: none;
 
@@ -51,7 +51,7 @@
 
   &__content {
     grid-area: body;
-    overflow-y: auto;
+    overflow-block: auto;
     box-shadow: none;
 
     &:focus-visible {
@@ -81,7 +81,7 @@
   }
 
   &.d-root-layout--fixed{
-    height: 100vh;
+    block-size: 100vh;
   }
 }
 
@@ -103,7 +103,7 @@
     }
 
     &.d-root-layout--fixed {
-      height: 100vh;
+      block-size: 100vh;
     }
   }
 }
@@ -126,7 +126,7 @@
     }
 
     &.d-root-layout--fixed {
-      height: 100vh;
+      block-size: 100vh;
     }
   }
 }
@@ -149,7 +149,7 @@
     }
 
     &.d-root-layout--fixed {
-      height: 100vh;
+      block-size: 100vh;
     }
   }
 }

package/lib/build/less/components/scrollbar.less

@@ -9,11 +9,11 @@
 
   .os-scrollbar {
     &.os-scrollbar-horizontal .os-scrollbar-handle:hover {
-      height: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+      block-size: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
     }
 
     &.os-scrollbar-vertical .os-scrollbar-handle:hover {
-      width: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
+      inline-size: calc(var(--os-handle-perpendicular-size) + var(--dt-size-200));
     }
 
     .os-scrollbar-handle {

package/lib/build/less/components/scroller.less

@@ -3,11 +3,11 @@
 }
 
 .vue-recycle-scroller.direction-vertical:not(.page-mode){
-  overflow-y:auto
+  overflow-block:auto
 }
 
 .vue-recycle-scroller.direction-horizontal:not(.page-mode){
-  overflow-x:auto
+  overflow-inline:auto
 }
 
 .vue-recycle-scroller.direction-horizontal{
@@ -27,23 +27,23 @@
 
 .vue-recycle-scroller.ready .vue-recycle-scroller__item-view{
   position:absolute;
-  top:0;
-  left:0;
+  inset-block-start:0;
+  inset-inline-start:0;
   will-change:transform
 }
 
 .vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{
-  width:100%
+  inline-size:100%
 }
 
 .vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{
-  height:100%
+  block-size:100%
 }
 
 .vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{
-  width:100%
+  inline-size:100%
 }
 
 .vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{
-  height:100%
+  block-size:100%
 }

package/lib/build/less/components/selects.less

@@ -23,17 +23,17 @@
   --select-notch-position-right: var(--dt-space-400);
 
   position: relative;
-  width: stretch;
+  inline-size: stretch;
 
   //  --  Arrows
   &::after {
     --select-arrow-size: calc(var(--dt-size-300) * 3.5);
 
     position: absolute;
-    top: 50%;
-    right: var(--select-notch-position-right);
-    width: var(--select-arrow-size);
-    height: var(--select-arrow-size);
+    inset-block-start: 50%;
+    inset-inline-end: var(--select-notch-position-right);
+    inline-size: var(--select-arrow-size);
+    block-size: var(--select-arrow-size);
     background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M6.55798 1.89155C6.80205 1.64748 7.19778 1.64748 7.44186 1.89155L10.3585 4.80822C10.6026 5.0523 10.6026 5.44803 10.3585 5.6921C10.1144 5.93618 9.71872 5.93618 9.47464 5.6921L6.99992 3.21738L4.52519 5.6921C4.28112 5.93618 3.88539 5.93618 3.64131 5.6921C3.39723 5.44803 3.39723 5.0523 3.64131 4.80822L6.55798 1.89155ZM3.64131 8.30822C3.88539 8.06414 4.28112 8.06414 4.52519 8.30822L6.99992 10.7829L9.47464 8.30822C9.71872 8.06414 10.1144 8.06414 10.3585 8.30822C10.6026 8.5523 10.6026 8.94803 10.3585 9.1921L7.44186 12.1088C7.19778 12.3528 6.80205 12.3528 6.55798 12.1088L3.64131 9.1921C3.39723 8.94803 3.39723 8.5523 3.64131 8.30822Z' fill='gray'/> </svg>");
     background-repeat: no-repeat;
     background-size: 100%;
@@ -64,7 +64,7 @@
   }
 
   // Adjust space on right beneath arrows
-  padding-right: var(--select-notch-padding-right);
+  padding-inline-end: var(--select-notch-padding-right);
 
   &[disabled],
   &[read-only] {

package/lib/build/less/components/skeleton.less

@@ -26,7 +26,7 @@
   --placeholder-to-color: var(--dt-color-surface-moderate-opaque);
 
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   background: var(--placeholder-from-color);
   animation-duration: 1000ms;
   fill: var(--placeholder-from-color);
@@ -67,13 +67,13 @@
   }
 
   &__shape {
-    margin-right: var(--dt-space-400);
+    margin-inline-end: var(--dt-space-400);
   }
 
   &__paragraph-container {
     display: flex;
     flex-direction: column;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
@@ -81,13 +81,13 @@
 //  @   SKELETON PARAGRAPH
 //  ----------------------------------------------------------------------------
 .d-skeleton-paragraph {
-  width: 100%;
+  inline-size: 100%;
 
   .d-skeleton-text {
-    margin-bottom: var(--dt-space-450);
+    margin-block-end: var(--dt-space-450);
 
     &:last-child {
-      margin-bottom: var(--dt-space-0);
+      margin-block-end: var(--dt-space-0);
     }
   }
 }
@@ -96,7 +96,7 @@
 //  @   SKELETON TEXT
 //  ----------------------------------------------------------------------------
 .d-skeleton-text {
-  height: var(--dt-size-400);
+  block-size: var(--dt-size-400);
   border-radius: var(--dt-size-radius-200);
 }
 

package/lib/build/less/components/table.less

@@ -24,8 +24,8 @@
 
     display: table;
     box-sizing: border-box;
-    width: 100%;
-    max-width: 100%;
+    inline-size: 100%;
+    max-inline-size: 100%;
     margin: 0;
     font-size: var(--table-font-size);
     line-height: var(--table-line-height);
@@ -34,7 +34,7 @@
 
     // Caption styles
     .d-table__caption {
-      margin-bottom: var(--dt-space-400); // 8
+      margin-block-end: var(--dt-space-400); // 8
       color: var(--table-th-color-text);
       font-weight: var(--dt-font-weight-bold);
       font-size: var(--table-font-size);
@@ -43,7 +43,7 @@
 
     // Table Head Styles
     thead {
-        border-bottom: var(--dt-size-200) solid var(--table-color-border);
+        border-block-end: var(--dt-size-200) solid var(--table-color-border);
 
         // Column Header Styles
         th {
@@ -68,8 +68,8 @@
     th,
     td {
         padding: var(--dt-space-500); // 16
-        text-align: left;
-        border-bottom: var(--dt-size-100) solid var(--table-color-border);
+        text-align: start;
+        border-block-end: var(--dt-size-100) solid var(--table-color-border);
     }
 
     // Nested Table Body, First Row Styles, used internally on the Dialtone site
@@ -77,7 +77,7 @@
         // Header & Cell Styles
         td,
         th {
-            border-top: var(--dt-size-200) solid var(--table-color-border);
+            border-block-start: var(--dt-size-200) solid var(--table-color-border);
         }
     }
 
@@ -86,7 +86,7 @@
         // Header & Cell Styles
         td,
         th {
-            border-bottom-width: 0;
+            border-block-end-width: 0;
         }
     }
 }

package/lib/build/less/components/toast.less

@@ -11,8 +11,8 @@
 //  ----------------------------------------------------------------------------
 .d-toast-wrapper {
   position: absolute;
-  top: var(--dt-space-600); // 32
-  left: 50%;
+  inset-block-start: var(--dt-space-600); // 32
+  inset-inline-start: 50%;
   z-index: var(--zi-notification);
   display: flex;
   flex-direction: column;
@@ -31,7 +31,7 @@
 
     z-index: var(--zi-notification);
     display: block;
-    max-width: var(--dt-size-975);
+    max-inline-size: var(--dt-size-975);
     word-break: normal;
     box-shadow: var(--toast-box-shadow);
     pointer-events: all;
@@ -63,7 +63,7 @@
 
 
     .d-notice__actions button:first-child {
-        margin-left: var(--dt-space-600); // 32
+        margin-inline-start: var(--dt-space-600); // 32
     }
 }
 
@@ -107,7 +107,7 @@
 .d-toast--viewing {
   --toast-border-radius: var(--dt-size-radius-200);
 
-  border-top: var(--dt-size-300) solid var(--dt-color-magenta-300);
+  border-block-start: var(--dt-size-300) solid var(--dt-color-magenta-300);
 
   .d-notice__icon {
     color: var(--dt-color-magenta-300);
@@ -146,7 +146,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  width: var(--dt-size-925);
+  inline-size: var(--dt-size-925);
   padding: var(--dt-space-350) var(--dt-space-350) var(--dt-space-450) var(--dt-space-450);
   color: var(--toast-alternate-color-text);
   font-size: var(--toast-alternate-font-size);
@@ -177,7 +177,7 @@
   .d-toast-layout-alternate__icon {
     display: flex;
     flex: 0 auto;
-    margin-right: var(--dt-space-300);
+    margin-inline-end: var(--dt-space-300);
     color: var(--toast-alternate-color-icon);
   }
 
@@ -199,7 +199,7 @@
   display: flex;
   flex: 1 auto;
   flex-direction: column;
-  margin-right: var(--dt-space-500);
+  margin-inline-end: var(--dt-space-500);
   color: var(--dt-color-foreground-primary);
   font-weight: var(--dt-font-weight-normal);
   font-size: var(--dt-font-size-200);
@@ -208,11 +208,11 @@
 .d-toast-alternate__dialog {
   position: relative;
   align-items: center;
-  width: var(--dt-size-100-percent);
+  inline-size: var(--dt-size-100-percent);
 
 
   .d-notice__actions button:first-child {
-    margin-left: var(--dt-space-600); // 32
+    margin-inline-start: var(--dt-space-600); // 32
   }
 }
 

package/lib/build/less/components/toggle.less

@@ -34,9 +34,9 @@
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  width: var(--toggle-size-width);
-  min-width: var(--toggle-size-width);
-  height: var(--toggle-size-height);
+  inline-size: var(--toggle-size-width);
+  min-inline-size: var(--toggle-size-width);
+  block-size: var(--toggle-size-height);
   padding: 0;
   line-height: var(--lh4);
   vertical-align: middle;
@@ -50,14 +50,14 @@
 
   &__inner {
     position: absolute;
-    top: calc(var(--dt-space-300) - var(--dt-space-100)); // 3
-    left: var(--dt-space-550); // 24
-    width: var(--toggle-size-icon);
-    height: var(--toggle-size-icon);
+    inset-block-start: calc(var(--dt-space-300) - var(--dt-space-100)); // 3
+    inset-inline-start: var(--dt-space-550); // 24
+    inline-size: var(--toggle-size-icon);
+    block-size: var(--toggle-size-icon);
 
     .d-toggle--small & {
-      top: var(--dt-space-100); // 1
-      left: calc(var(--dt-space-500) + var(--dt-space-100)); // 17
+      inset-block-start: var(--dt-space-100); // 1
+      inset-inline-start: calc(var(--dt-space-500) + var(--dt-space-100)); // 17
     }
 
     .d-toggle--indeterminate & {
@@ -75,14 +75,14 @@
 
   &::after {
     position: absolute;
-    top: var(--dt-space-100); // 1
-    left: var(--dt-space-100); // 1
-    width: calc(var(--toggle-size-icon) + var(--dt-size-300));
-    height: calc(var(--toggle-size-icon) + var(--dt-size-300));
+    inset-block-start: var(--dt-space-100); // 1
+    inset-inline-start: var(--dt-space-100); // 1
+    inline-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
+    block-size: calc(var(--toggle-size-icon) + var(--dt-size-300));
     background-color: var(--dt-color-surface-primary);
     border-radius: var(--dt-size-radius-circle);
     cursor: pointer;
-    transition: left var(--toggle-transition-speed) var(--toggle-transition-timing-function);
+    transition: inset-inline-start var(--toggle-transition-speed) var(--toggle-transition-timing-function);
     content: ' ';
   }
 
@@ -101,8 +101,8 @@
   }
 
   &--small::after {
-    width: var(--toggle-size-icon);
-    height: var(--toggle-size-icon);
+    inline-size: var(--toggle-size-icon);
+    block-size: var(--toggle-size-icon);
   }
 
   //  $$  CHECKED TOGGLE
@@ -111,7 +111,7 @@
     --toggle-color-background: var(--dt-checkbox-color-background-checked);
 
     .d-toggle__inner {
-      left: var(--dt-space-350); // 6
+      inset-inline-start: var(--dt-space-350); // 6
       background-image: url("data:image/svg+xml,<svg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'> <path fill-rule='evenodd' clip-rule='evenodd' d='M12.1083 3.05806C12.3524 3.30214 12.3524 3.69786 12.1083 3.94194L5.69162 10.3586C5.44754 10.6027 5.05181 10.6027 4.80773 10.3586L1.89107 7.44194C1.64699 7.19786 1.64699 6.80214 1.89107 6.55806C2.13514 6.31398 2.53087 6.31398 2.77495 6.55806L5.24967 9.03278L11.2244 3.05806C11.4685 2.81398 11.8642 2.81398 12.1083 3.05806Z' fill='white'/> </svg>");
 
       [data-dt-theme="dark"] & {
@@ -120,16 +120,15 @@
     }
 
     &.d-toggle--small .d-toggle__inner {
-      left: calc(var(--dt-space-100) + var(--dt-space-200)); // 3
+      inset-inline-start: calc(var(--dt-space-100) + var(--dt-space-200)); // 3
     }
 
     &::after {
-      left: calc(var(--dt-space-550) + var(--dt-space-100)); // 25
+      inset-inline-start: calc(var(--dt-space-550) + var(--dt-space-100)); // 25
     }
 
     &.d-toggle--small::after {
-      right: var(--dt-space-100); // 1
-      left: calc(calc(var(--dt-space-300) * 5) - var(--dt-space-100)); // 19
+      inset-inline: calc(calc(var(--dt-space-300) * 5) - var(--dt-space-100)) var(--dt-space-100); // 1 // 19
     }
   }
 
@@ -141,7 +140,7 @@
     }
 
     &::after {
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translate(-50%, 0);
     }
   }