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

package/lib/build/less/utilities/borders.less

@@ -22,11 +22,27 @@
 //  ============================================================================
 //  $$ DIRECTION
 //  ----------------------------------------------------------------------------
-.d-ba { border: var(--dt-size-100) solid !important; }
-.d-bt { border-top: var(--dt-size-100) solid !important; }
-.d-br { border-right: var(--dt-size-100) solid !important; }
-.d-bb { border-bottom: var(--dt-size-100) solid !important; }
-.d-bl { border-left: var(--dt-size-100) solid !important; }
+.d-ba {
+  border-color: var(--dt-color-border-default) !important;
+  border-style: solid !important;
+  border-width: var(--dt-size-border-100) !important;
+}
+
+.d-bt {
+  border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
+
+.d-br {
+  border-inline-end: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
+
+.d-bb {
+  border-block-end: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
+
+.d-bl {
+  border-inline-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
 
 .d-bx { .d-br(); .d-bl(); }
 
@@ -46,65 +62,65 @@
 //  $$ TOP
 //  ----------------------------------------------------------------------------
 .d-btr-circle {
-    border-top-left-radius: var(--dt-size-radius-circle) !important;
-    border-top-right-radius: var(--dt-size-radius-circle) !important;
+    border-start-start-radius: var(--dt-size-radius-circle) !important;
+    border-start-end-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-btr-pill {
-    border-top-left-radius: var(--dt-size-radius-pill) !important;
-    border-top-right-radius: var(--dt-size-radius-pill) !important;
+    border-start-start-radius: var(--dt-size-radius-pill) !important;
+    border-start-end-radius: var(--dt-size-radius-pill) !important;
 }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
 .d-brr-circle {
-    border-top-right-radius: var(--dt-size-radius-circle) !important;
-    border-bottom-right-radius: var(--dt-size-radius-circle) !important;
+    border-start-end-radius: var(--dt-size-radius-circle) !important;
+    border-end-end-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-brr-pill {
-    border-top-right-radius: var(--dt-size-radius-pill) !important;
-    border-bottom-right-radius: var(--dt-size-radius-pill) !important;
+    border-start-end-radius: var(--dt-size-radius-pill) !important;
+    border-end-end-radius: var(--dt-size-radius-pill) !important;
 }
 
 //  $$ BOTTOM
 //  ----------------------------------------------------------------------------
 .d-bbr-circle {
-    border-bottom-right-radius: var(--dt-size-radius-circle) !important;
-     border-bottom-left-radius: var(--dt-size-radius-circle) !important;
+    border-end-end-radius: var(--dt-size-radius-circle) !important;
+     border-end-start-radius: var(--dt-size-radius-circle) !important;
     }
 
 .d-bbr-pill {
-    border-bottom-right-radius: var(--dt-size-radius-pill) !important;
-    border-bottom-left-radius: var(--dt-size-radius-pill) !important;
+    border-end-end-radius: var(--dt-size-radius-pill) !important;
+    border-end-start-radius: var(--dt-size-radius-pill) !important;
  }
 
 //  $$ RIGHT
 //  ----------------------------------------------------------------------------
 .d-blr-circle {
-    border-top-left-radius: var(--dt-size-radius-circle) !important;
-    border-bottom-left-radius: var(--dt-size-radius-circle) !important;
+    border-start-start-radius: var(--dt-size-radius-circle) !important;
+    border-end-start-radius: var(--dt-size-radius-circle) !important;
 }
 
 .d-blr-pill {
-    border-top-left-radius: var(--dt-size-radius-pill) !important;
-    border-bottom-left-radius: var(--dt-size-radius-pill) !important;
+    border-start-start-radius: var(--dt-size-radius-pill) !important;
+    border-end-start-radius: var(--dt-size-radius-pill) !important;
 }
 
 
 //  $$ STYLE
 //  ----------------------------------------------------------------------------
 .d-bas-dashed { border-style: dashed !important; }
-.d-bts-dashed { border-top-style: dashed !important; }
-.d-brs-dashed { border-right-style: dashed !important; }
-.d-bbs-dashed { border-bottom-style: dashed !important; }
-.d-bls-dashed { border-left-style: dashed !important; }
+.d-bts-dashed { border-block-start-style: dashed !important; }
+.d-brs-dashed { border-inline-end-style: dashed !important; }
+.d-bbs-dashed { border-block-end-style: dashed !important; }
+.d-bls-dashed { border-inline-start-style: dashed !important; }
 
 .d-bas-dotted { border-style: dotted !important; }
-.d-bts-dotted { border-top-style: dotted !important; }
-.d-brs-dotted { border-right-style: dotted !important; }
-.d-bbs-dotted { border-bottom-style: dotted !important; }
-.d-bls-dotted { border-left-style: dotted !important; }
+.d-bts-dotted { border-block-start-style: dotted !important; }
+.d-brs-dotted { border-inline-end-style: dotted !important; }
+.d-bbs-dotted { border-block-end-style: dotted !important; }
+.d-bls-dotted { border-inline-start-style: dotted !important; }
 
 .d-bas-unset { border-style: unset !important; }
 
@@ -117,28 +133,28 @@
 .d-baw4 { border-width: var(--dt-size-border-300) !important; }
 
 //  --  Top Border width
-.d-btw0 { border-top-width: var(--dt-size-border-0) !important; }
-.d-btw1 { border-top-width: var(--dt-size-border-100) !important; }
-.d-btw2 { border-top-width: var(--dt-size-border-200) !important; }
-.d-btw4 { border-top-width: var(--dt-size-border-300) !important; }
+.d-btw0 { border-block-start-width: var(--dt-size-border-0) !important; }
+.d-btw1 { border-block-start-width: var(--dt-size-border-100) !important; }
+.d-btw2 { border-block-start-width: var(--dt-size-border-200) !important; }
+.d-btw4 { border-block-start-width: var(--dt-size-border-300) !important; }
 
 //  --  Right Border width
-.d-brw0 { border-right-width: var(--dt-size-border-0) !important; }
-.d-brw1 { border-right-width: var(--dt-size-border-100) !important; }
-.d-brw2 { border-right-width: var(--dt-size-border-200) !important; }
-.d-brw4 { border-right-width: var(--dt-size-border-300) !important; }
+.d-brw0 { border-inline-end-width: var(--dt-size-border-0) !important; }
+.d-brw1 { border-inline-end-width: var(--dt-size-border-100) !important; }
+.d-brw2 { border-inline-end-width: var(--dt-size-border-200) !important; }
+.d-brw4 { border-inline-end-width: var(--dt-size-border-300) !important; }
 
 //  --  Bottom Border width
-.d-bbw0 { border-bottom-width: var(--dt-size-border-0) !important; }
-.d-bbw1 { border-bottom-width: var(--dt-size-border-100) !important; }
-.d-bbw2 { border-bottom-width: var(--dt-size-border-200) !important; }
-.d-bbw4 { border-bottom-width: var(--dt-size-border-300) !important; }
+.d-bbw0 { border-block-end-width: var(--dt-size-border-0) !important; }
+.d-bbw1 { border-block-end-width: var(--dt-size-border-100) !important; }
+.d-bbw2 { border-block-end-width: var(--dt-size-border-200) !important; }
+.d-bbw4 { border-block-end-width: var(--dt-size-border-300) !important; }
 
 //  --  Left Border width
-.d-blw0 { border-left-width: var(--dt-size-border-0) !important; }
-.d-blw1 { border-left-width: var(--dt-size-border-100) !important; }
-.d-blw2 { border-left-width: var(--dt-size-border-200) !important; }
-.d-blw4 { border-left-width: var(--dt-size-border-300) !important; }
+.d-blw0 { border-inline-start-width: var(--dt-size-border-0) !important; }
+.d-blw1 { border-inline-start-width: var(--dt-size-border-100) !important; }
+.d-blw2 { border-inline-start-width: var(--dt-size-border-200) !important; }
+.d-blw4 { border-inline-start-width: var(--dt-size-border-300) !important; }
 
 //  --  X Border width
 .d-bxw0 { .d-brw0(); .d-blw0(); }
@@ -161,29 +177,29 @@
 .d-divide-y > * + * {
     --divide-y-reverse: 0;
 
-    border-top: calc(~'1px * (1 - var(--divide-y-reverse))') solid !important;
-    border-bottom: calc(~'1px * var(--divide-y-reverse)') solid !important;
+    border-block-start: calc(~'1px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
+    border-block-end: calc(~'1px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-y0 > * + * {
     --divide-y-reverse: 0;
 
-    border-top: calc(~'0 * (1 - var(--divide-y-reverse))') solid !important;
-    border-bottom: calc(~'0 * var(--divide-y-reverse)') solid !important;
+    border-block-start: calc(~'0 * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
+    border-block-end: calc(~'0 * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-y2 > * + * {
     --divide-y-reverse: 0;
 
-    border-top: calc(~'2px * (1 - var(--divide-y-reverse))') solid !important;
-    border-bottom: calc(~'2px * var(--divide-y-reverse)') solid !important;
+    border-block-start: calc(~'2px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
+    border-block-end: calc(~'2px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-y4 > * + * {
     --divide-y-reverse: 0;
 
-    border-top: calc(~'4px * (1 - var(--divide-y-reverse))') solid !important;
-    border-bottom: calc(~'4px * var(--divide-y-reverse)') solid !important;
+    border-block-start: calc(~'4px * (1 - var(--divide-y-reverse))') solid var(--dt-color-border-default) !important;
+    border-block-end: calc(~'4px * var(--divide-y-reverse)') solid var(--dt-color-border-default) !important;
 }
 .d-divide-y-reverse > * + * { --divide-y-reverse: 1; }
 
@@ -192,29 +208,29 @@
 .d-divide-x > * + * {
     --divide-x-reverse: 0;
 
-    border-right: calc(~'1px * var(--divide-x-reverse)') solid !important;
-    border-left: calc(~'1px * (1 - var(--divide-x-reverse))') solid !important;
+    border-inline-end: calc(~'1px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
+    border-inline-start: calc(~'1px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-x0 > * + * {
     --divide-x-reverse: 0;
 
-    border-right: calc(~'0 * var(--divide-x-reverse)') solid !important;
-    border-left: calc(~'0 * (1 - var(--divide-x-reverse))') solid !important;
+    border-inline-end: calc(~'0 * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
+    border-inline-start: calc(~'0 * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-x2 > * + * {
     --divide-x-reverse: 0;
 
-    border-right: calc(~'2px * var(--divide-x-reverse)') solid !important;
-    border-left: calc(~'2px * (1 - var(--divide-x-reverse))') solid !important;
+    border-inline-end: calc(~'2px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
+    border-inline-start: calc(~'2px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
 }
 
 .d-divide-x4 > * + * {
     --divide-x-reverse: 0;
 
-    border-right: calc(~'4px * var(--divide-x-reverse)') solid !important;
-    border-left: calc(~'4px * (1 - var(--divide-x-reverse))') solid !important;
+    border-inline-end: calc(~'4px * var(--divide-x-reverse)') solid var(--dt-color-border-default) !important;
+    border-inline-start: calc(~'4px * (1 - var(--divide-x-reverse))') solid var(--dt-color-border-default) !important;
 }
 .d-divide-x-reverse > * + * { --divide-x-reverse: 1; }
 
@@ -227,9 +243,11 @@
  * https://dev.to/afif/border-with-gradient-and-radius-387f
  */
 .d-bc-ai {
-  border-image: var(--dt-color-border-ai) 1 !important;
+  border-image-source: var(--dt-color-border-ai) !important;
+  border-image-slice: 1 !important;
 }
 
 .d-divide-ai > * + * {
-  border-image: var(--dt-color-border-ai) 1 !important;
+  border-image-source: var(--dt-color-border-ai) !important;
+  border-image-slice: 1 !important;
 }

package/lib/build/less/utilities/interactivity.less

@@ -75,6 +75,10 @@
 //      and if so, in which directions.
 //  ----------------------------------------------------------------------------
 .d-r-both { resize: both !important; }
-.d-r-horizontal { resize: horizontal !important; }
-.d-r-vertical { resize: vertical !important; }
+
+.d-r-inline,
+.d-r-horizontal { resize: inline !important; }
+
+.d-r-block,
+.d-r-vertical { resize: block !important; }
 .d-r-none { resize: none !important; }

package/lib/build/less/utilities/layout.less

@@ -27,39 +27,39 @@
 //  ============================================================================
 //  $$  TOP
 //  ----------------------------------------------------------------------------
-.d-t50p { top: 50% !important; }
-.d-t100p { top: 100% !important; }
-.d-t100p-calc { top: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-tn50p { top: -50% !important; }
-.d-tn100p { top: -100% !important; }
-.d-tn100p-calc { top: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-t50p { inset-block-start: 50% !important; }
+.d-t100p { inset-block-start: 100% !important; }
+.d-t100p-calc { inset-block-start: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-tn50p { inset-block-start: -50% !important; }
+.d-tn100p { inset-block-start: -100% !important; }
+.d-tn100p-calc { inset-block-start: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  RIGHT
 //  ----------------------------------------------------------------------------
-.d-r50p { right: 50% !important; }
-.d-r100p { right: 100% !important; }
-.d-r100p-calc { right: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-rn50p { right: -50% !important; }
-.d-rn100p { right: -100% !important; }
-.d-rn100p-calc { right: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-r50p { inset-inline-end: 50% !important; }
+.d-r100p { inset-inline-end: 100% !important; }
+.d-r100p-calc { inset-inline-end: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-rn50p { inset-inline-end: -50% !important; }
+.d-rn100p { inset-inline-end: -100% !important; }
+.d-rn100p-calc { inset-inline-end: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  BOTTOM
 //  ----------------------------------------------------------------------------
-.d-b50p { bottom: 50% !important; }
-.d-b100p { bottom: 100% !important; }
-.d-b100p-calc { bottom: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-bn50p { bottom: -50% !important; }
-.d-bn100p { bottom: -100% !important; }
-.d-bn100p-calc { bottom: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-b50p { inset-block-end: 50% !important; }
+.d-b100p { inset-block-end: 100% !important; }
+.d-b100p-calc { inset-block-end: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-bn50p { inset-block-end: -50% !important; }
+.d-bn100p { inset-block-end: -100% !important; }
+.d-bn100p-calc { inset-block-end: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 //  $$  LEFT
 //  ----------------------------------------------------------------------------
-.d-l50p { left: 50% !important; }
-.d-l100p { left: 100% !important; }
-.d-l100p-calc { left: calc(~'100% + var(--fixed-value, 8px)') !important; }
-.d-ln50p { left: -50% !important; }
-.d-ln100p { left: -100% !important; }
-.d-ln100p-calc { left: calc(~'-100% + var(--fixed-value, 8px)') !important; }
+.d-l50p { inset-inline-start: 50% !important; }
+.d-l100p { inset-inline-start: 100% !important; }
+.d-l100p-calc { inset-inline-start: calc(~'100% + var(--fixed-value, 8px)') !important; }
+.d-ln50p { inset-inline-start: -50% !important; }
+.d-ln100p { inset-inline-start: -100% !important; }
+.d-ln100p-calc { inset-inline-start: calc(~'-100% + var(--fixed-value, 8px)') !important; }
 
 
 //  ============================================================================
@@ -81,17 +81,17 @@
 //  $   OVERFLOW
 //  ============================================================================
 .d-of-auto { overflow: auto !important; }
-.d-of-x-auto { overflow-x: auto !important; }
-.d-of-y-auto { overflow-y: auto !important; }
+.d-of-x-auto { overflow-inline: auto !important; }
+.d-of-y-auto { overflow-block: auto !important; }
 .d-of-hidden { overflow: hidden !important; }
-.d-of-x-hidden { overflow-x: hidden !important; }
-.d-of-y-hidden { overflow-y: hidden !important; }
+.d-of-x-hidden { overflow-inline: hidden !important; }
+.d-of-y-hidden { overflow-block: hidden !important; }
 .d-of-scroll { overflow: scroll !important; }
-.d-of-x-scroll { overflow-x: scroll !important; }
-.d-of-y-scroll { overflow-y: scroll !important; }
+.d-of-x-scroll { overflow-inline: scroll !important; }
+.d-of-y-scroll { overflow-block: scroll !important; }
 .d-of-visible { overflow: visible !important; }
-.d-of-x-visible { overflow-x: visible !important; }
-.d-of-y-visible { overflow-y: visible !important; }
+.d-of-x-visible { overflow-inline: visible !important; }
+.d-of-y-visible { overflow-block: visible !important; }
 .d-of-unset { overflow: unset !important; }
 
 
@@ -115,8 +115,8 @@
 
 .d-vi-visible-sr {
   position: absolute;
-  width: var(--dt-size-100);
-  height: var(--dt-size-100);
+  inline-size: var(--dt-size-100);
+  block-size: var(--dt-size-100);
   margin: var(--dt-space-100-negative);
   padding: var(--dt-space-0);
   overflow: hidden;

package/lib/build/less/utilities/sizing.less

@@ -23,69 +23,69 @@
 //  ============================================================================
 //  $$  PERCENTAGES
 //  ----------------------------------------------------------------------------
-.d-h10p { height: 10% !important; }
-.d-h20p { height: 20% !important; }
-.d-h25p { height: 25% !important; }
-.d-h30p { height: 30% !important; }
-.d-h40p { height: 40% !important; }
-.d-h50p { height: 50% !important; }
-.d-h60p { height: 60% !important; }
-.d-h70p { height: 70% !important; }
-.d-h75p { height: 75% !important; }
-.d-h80p { height: 80% !important; }
-.d-h90p { height: 90% !important; }
-.d-h100p { height: 100% !important; }
+.d-h10p { block-size: 10% !important; }
+.d-h20p { block-size: 20% !important; }
+.d-h25p { block-size: 25% !important; }
+.d-h30p { block-size: 30% !important; }
+.d-h40p { block-size: 40% !important; }
+.d-h50p { block-size: 50% !important; }
+.d-h60p { block-size: 60% !important; }
+.d-h70p { block-size: 70% !important; }
+.d-h75p { block-size: 75% !important; }
+.d-h80p { block-size: 80% !important; }
+.d-h90p { block-size: 90% !important; }
+.d-h100p { block-size: 100% !important; }
 
 //  $$  MAX-HEIGHT
 //  ----------------------------------------------------------------------------
-.d-hmx10p { max-height: 10% !important; }
-.d-hmx20p { max-height: 20% !important; }
-.d-hmx25p { max-height: 25% !important; }
-.d-hmx30p { max-height: 30% !important; }
-.d-hmx40p { max-height: 40% !important; }
-.d-hmx50p { max-height: 50% !important; }
-.d-hmx60p { max-height: 60% !important; }
-.d-hmx70p { max-height: 70% !important; }
-.d-hmx75p { max-height: 75% !important; }
-.d-hmx80p { max-height: 80% !important; }
-.d-hmx90p { max-height: 90% !important; }
-.d-hmx100p { max-height: 100% !important; }
+.d-hmx10p { max-block-size: 10% !important; }
+.d-hmx20p { max-block-size: 20% !important; }
+.d-hmx25p { max-block-size: 25% !important; }
+.d-hmx30p { max-block-size: 30% !important; }
+.d-hmx40p { max-block-size: 40% !important; }
+.d-hmx50p { max-block-size: 50% !important; }
+.d-hmx60p { max-block-size: 60% !important; }
+.d-hmx70p { max-block-size: 70% !important; }
+.d-hmx75p { max-block-size: 75% !important; }
+.d-hmx80p { max-block-size: 80% !important; }
+.d-hmx90p { max-block-size: 90% !important; }
+.d-hmx100p { max-block-size: 100% !important; }
 
 //  $$  MIN-HEIGHT
 //  ----------------------------------------------------------------------------
-.d-hmn10p { min-height: 10% !important; }
-.d-hmn20p { min-height: 20% !important; }
-.d-hmn25p { min-height: 25% !important; }
-.d-hmn30p { min-height: 30% !important; }
-.d-hmn40p { min-height: 40% !important; }
-.d-hmn50p { min-height: 50% !important; }
-.d-hmn60p { min-height: 60% !important; }
-.d-hmn70p { min-height: 70% !important; }
-.d-hmn75p { min-height: 75% !important; }
-.d-hmn80p { min-height: 80% !important; }
-.d-hmn90p { min-height: 90% !important; }
-.d-hmn100p { min-height: 100% !important; }
+.d-hmn10p { min-block-size: 10% !important; }
+.d-hmn20p { min-block-size: 20% !important; }
+.d-hmn25p { min-block-size: 25% !important; }
+.d-hmn30p { min-block-size: 30% !important; }
+.d-hmn40p { min-block-size: 40% !important; }
+.d-hmn50p { min-block-size: 50% !important; }
+.d-hmn60p { min-block-size: 60% !important; }
+.d-hmn70p { min-block-size: 70% !important; }
+.d-hmn75p { min-block-size: 75% !important; }
+.d-hmn80p { min-block-size: 80% !important; }
+.d-hmn90p { min-block-size: 90% !important; }
+.d-hmn100p { min-block-size: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
-.d-h100vh { height: 100vh !important; }
-.d-h-auto { height: auto !important; }
-.d-h-unset { height: unset !important; }
-.d-h-fit-content { height: fit-content !important; }
-.d-h-max-content { height: max-content !important; }
-.d-h-min-content { height: min-content !important; }
+.d-h100vh { block-size: 100vh !important; }
+.d-h-auto { block-size: auto !important; }
+.d-h-unset { block-size: unset !important; }
+.d-h-fit-content { block-size: fit-content !important; }
+.d-h-max-content { block-size: max-content !important; }
+.d-h-min-content { block-size: min-content !important; }
 
-.d-hmn-auto { min-height: auto !important; }
-.d-hmn-unset { min-height: unset !important; }
-.d-hmn-fit-content { min-height: fit-content !important; }
-.d-hmn-max-content { min-height: max-content !important; }
-.d-hmn-min-content { min-height: min-content !important; }
+.d-hmn-auto { min-block-size: auto !important; }
+.d-hmn-unset { min-block-size: unset !important; }
+.d-hmn-fit-content { min-block-size: fit-content !important; }
+.d-hmn-max-content { min-block-size: max-content !important; }
+.d-hmn-min-content { min-block-size: min-content !important; }
 
-.d-hmx-auto { max-height: auto !important; }
-.d-hmx-unset { max-height: unset !important; }
-.d-hmx-fit-content { max-height: fit-content !important; }
-.d-hmx-max-content { max-height: max-content !important; }
-.d-hmx-min-content { max-height: min-content !important; }
+.d-hmx-auto { max-block-size: auto !important; }
+.d-hmx-unset { max-block-size: unset !important; }
+.d-hmx-fit-content { max-block-size: fit-content !important; }
+.d-hmx-max-content { max-block-size: max-content !important; }
+.d-hmx-min-content { max-block-size: min-content !important; }
 
 
 //  ============================================================================
@@ -93,78 +93,78 @@
 //  ============================================================================
 //  $$  FLUID
 //  ----------------------------------------------------------------------------
-.d-w10p { width: 10% !important; }
-.d-w20p { width: 20% !important; }
-.d-w25p { width: 25% !important; }
-.d-w30p { width: 30% !important; }
-.d-w40p { width: 40% !important; }
-.d-w50p { width: 50% !important; }
-.d-w60p { width: 60% !important; }
-.d-w70p { width: 70% !important; }
-.d-w75p { width: 75% !important; }
-.d-w80p { width: 80% !important; }
-.d-w90p { width: 90% !important; }
-.d-w100p { width: 100% !important; }
+.d-w10p { inline-size: 10% !important; }
+.d-w20p { inline-size: 20% !important; }
+.d-w25p { inline-size: 25% !important; }
+.d-w30p { inline-size: 30% !important; }
+.d-w40p { inline-size: 40% !important; }
+.d-w50p { inline-size: 50% !important; }
+.d-w60p { inline-size: 60% !important; }
+.d-w70p { inline-size: 70% !important; }
+.d-w75p { inline-size: 75% !important; }
+.d-w80p { inline-size: 80% !important; }
+.d-w90p { inline-size: 90% !important; }
+.d-w100p { inline-size: 100% !important; }
 
 //  $$  MAX-WIDTH
 //  ----------------------------------------------------------------------------
-.d-wmx10p { max-width: 10% !important; }
-.d-wmx20p { max-width: 20% !important; }
-.d-wmx25p { max-width: 25% !important; }
-.d-wmx30p { max-width: 30% !important; }
-.d-wmx40p { max-width: 40% !important; }
-.d-wmx50p { max-width: 50% !important; }
-.d-wmx60p { max-width: 60% !important; }
-.d-wmx70p { max-width: 70% !important; }
-.d-wmx75p { max-width: 75% !important; }
-.d-wmx80p { max-width: 80% !important; }
-.d-wmx90p { max-width: 90% !important; }
-.d-wmx100p { max-width: 100% !important; }
+.d-wmx10p { max-inline-size: 10% !important; }
+.d-wmx20p { max-inline-size: 20% !important; }
+.d-wmx25p { max-inline-size: 25% !important; }
+.d-wmx30p { max-inline-size: 30% !important; }
+.d-wmx40p { max-inline-size: 40% !important; }
+.d-wmx50p { max-inline-size: 50% !important; }
+.d-wmx60p { max-inline-size: 60% !important; }
+.d-wmx70p { max-inline-size: 70% !important; }
+.d-wmx75p { max-inline-size: 75% !important; }
+.d-wmx80p { max-inline-size: 80% !important; }
+.d-wmx90p { max-inline-size: 90% !important; }
+.d-wmx100p { max-inline-size: 100% !important; }
 
 //  $$  MIN-WIDTH
 //  ----------------------------------------------------------------------------
-.d-wmn10p { min-width: 10% !important; }
-.d-wmn20p { min-width: 20% !important; }
-.d-wmn25p { min-width: 25% !important; }
-.d-wmn30p { min-width: 30% !important; }
-.d-wmn40p { min-width: 40% !important; }
-.d-wmn50p { min-width: 50% !important; }
-.d-wmn60p { min-width: 60% !important; }
-.d-wmn70p { min-width: 70% !important; }
-.d-wmn75p { min-width: 75% !important; }
-.d-wmn80p { min-width: 80% !important; }
-.d-wmn90p { min-width: 90% !important; }
-.d-wmn100p { min-width: 100% !important; }
+.d-wmn10p { min-inline-size: 10% !important; }
+.d-wmn20p { min-inline-size: 20% !important; }
+.d-wmn25p { min-inline-size: 25% !important; }
+.d-wmn30p { min-inline-size: 30% !important; }
+.d-wmn40p { min-inline-size: 40% !important; }
+.d-wmn50p { min-inline-size: 50% !important; }
+.d-wmn60p { min-inline-size: 60% !important; }
+.d-wmn70p { min-inline-size: 70% !important; }
+.d-wmn75p { min-inline-size: 75% !important; }
+.d-wmn80p { min-inline-size: 80% !important; }
+.d-wmn90p { min-inline-size: 90% !important; }
+.d-wmn100p { min-inline-size: 100% !important; }
 
 //  $$  FIXED
 //  ----------------------------------------------------------------------------
-.d-w60ch { width: 60ch !important; }
-.d-w75ch { width: 75ch !important; }
-.d-w90ch { width: 90ch !important; }
+.d-w60ch { inline-size: 60ch !important; }
+.d-w75ch { inline-size: 75ch !important; }
+.d-w90ch { inline-size: 90ch !important; }
 
-.d-w100vw { width: 100vw !important; }
-.d-w-auto { width: auto !important; }
-.d-w-unset { width: unset !important; }
-.d-w-fit-content { width: fit-content !important; }
-.d-w-max-content { width: max-content !important; }
-.d-w-min-content { width: min-content !important; }
+.d-w100vw { inline-size: 100vw !important; }
+.d-w-auto { inline-size: auto !important; }
+.d-w-unset { inline-size: unset !important; }
+.d-w-fit-content { inline-size: fit-content !important; }
+.d-w-max-content { inline-size: max-content !important; }
+.d-w-min-content { inline-size: min-content !important; }
 
-.d-wmn60ch { min-width: 60ch !important; }
-.d-wmn75ch { min-width: 75ch !important; }
-.d-wmn90ch { min-width: 90ch !important; }
-.d-wmn-fit-content { min-width: fit-content !important; }
-.d-wmn-max-content { min-width: max-content !important; }
-.d-wmn-min-content { min-width: min-content !important; }
+.d-wmn60ch { min-inline-size: 60ch !important; }
+.d-wmn75ch { min-inline-size: 75ch !important; }
+.d-wmn90ch { min-inline-size: 90ch !important; }
+.d-wmn-fit-content { min-inline-size: fit-content !important; }
+.d-wmn-max-content { min-inline-size: max-content !important; }
+.d-wmn-min-content { min-inline-size: min-content !important; }
 
-.d-wmn-auto { min-width: auto !important; }
-.d-wmn-unset { min-width: unset !important; }
+.d-wmn-auto { min-inline-size: auto !important; }
+.d-wmn-unset { min-inline-size: unset !important; }
 
-.d-wmx60ch { max-width: 60ch !important; }
-.d-wmx75ch { max-width: 75ch !important; }
-.d-wmx90ch { max-width: 90ch !important; }
+.d-wmx60ch { max-inline-size: 60ch !important; }
+.d-wmx75ch { max-inline-size: 75ch !important; }
+.d-wmx90ch { max-inline-size: 90ch !important; }
 
-.d-wmx-auto { max-width: auto !important; }
-.d-wmx-unset { max-width: unset !important; }
-.d-wmx-fit-content { max-width: fit-content !important; }
-.d-wmx-max-content { max-width: max-content !important; }
-.d-wmx-min-content { max-width: min-content !important; }
+.d-wmx-auto { max-inline-size: auto !important; }
+.d-wmx-unset { max-inline-size: unset !important; }
+.d-wmx-fit-content { max-inline-size: fit-content !important; }
+.d-wmx-max-content { max-inline-size: max-content !important; }
+.d-wmx-min-content { max-inline-size: min-content !important; }