@dialpad/dialtone-css 8.80.0-next.1 → 8.80.0-next.3

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

@@ -17,18 +17,39 @@
 //    - VERTICAL DIVIDERS
 //    - HORIZONTAL DIVIDERS
 //
+//  @@  @PROPERTY REGISTRATIONS
+//  ----------------------------------------------------------------------------
+//  Register opacity custom properties as non-inheriting so `--bco` / `--dco`
+//  set on an ancestor do not bleed into descendants using `.d-bc-*` / `.d-divide-*`.
+//  With universal syntax and no initial-value, `var(--bco, alpha)` still falls
+//  back to the source color's alpha channel when no opacity utility is applied.
+@property --bco { syntax: "*"; inherits: false; }
+
+@property --dco { syntax: "*"; inherits: false; }
+
 //  ============================================================================
 //  $  BORDERS
 //  ============================================================================
 //  $$ DIRECTION
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
+// Order within this section: all-sides shorthand -> H/V -> single-side -> resets.
+// Single-side classes must follow H/V so .d-bt wins when combined with .d-by, etc.
+// Reset classes (.d-ba-none / .d-ba-unset) stay last as intentional escape hatches.
 .d-ba {
   border-color: var(--dt-color-border-default) !important;
   border-style: solid !important;
   border-width: var(--dt-size-border-100) !important;
 }
 
+.d-bx {
+  border-inline: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
+
+.d-by {
+  border-block: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
+}
+
 .d-bt {
   border-block-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
 }
@@ -45,94 +66,29 @@
   border-inline-start: var(--dt-size-border-100) solid var(--dt-color-border-default) !important;
 }
 
-.d-bx { .d-br(); .d-bl(); }
-
-.d-by { .d-bt(); .d-bb(); }
 .d-ba-none { border: none !important; }
 .d-ba-unset { border: unset !important; }
 
-//  ============================================================================
-//  $  BORDER RADIUS
-//  ============================================================================
-//  $$ ALL
-//  ----------------------------------------------------------------------------
-.d-bar-circle { border-radius: var(--dt-size-radius-circle) !important; }
-.d-bar-pill { border-radius: var(--dt-size-radius-pill) !important; }
-.d-bar-unset { border-radius: unset !important; }
-
-//  $$ TOP
-//  ----------------------------------------------------------------------------
-.d-btr-circle {
-    border-start-start-radius: var(--dt-size-radius-circle) !important;
-    border-start-end-radius: var(--dt-size-radius-circle) !important;
-}
-
-.d-btr-pill {
-    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-start-end-radius: var(--dt-size-radius-circle) !important;
-    border-end-end-radius: var(--dt-size-radius-circle) !important;
-}
-
-.d-brr-pill {
-    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-end-end-radius: var(--dt-size-radius-circle) !important;
-     border-end-start-radius: var(--dt-size-radius-circle) !important;
-    }
-
-.d-bbr-pill {
-    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-start-start-radius: var(--dt-size-radius-circle) !important;
-    border-end-start-radius: var(--dt-size-radius-circle) !important;
-}
-
-.d-blr-pill {
-    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-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-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; }
-
-
-//  $$ WIDTH
+//  $  BORDER WIDTH
 //  ----------------------------------------------------------------------------
+//  Order: all-sides -> H/V -> single-side, so single-side classes win on cascade ties.
 .d-baw0 { border-width: var(--dt-size-border-0) !important; }
 .d-baw1 { border-width: var(--dt-size-border-100) !important; }
 .d-baw2 { border-width: var(--dt-size-border-200) !important; }
 .d-baw4 { border-width: var(--dt-size-border-300) !important; }
 
+//  --  X Border width
+.d-bxw0 { border-inline-width: var(--dt-size-border-0) !important; }
+.d-bxw1 { border-inline-width: var(--dt-size-border-100) !important; }
+.d-bxw2 { border-inline-width: var(--dt-size-border-200) !important; }
+.d-bxw4 { border-inline-width: var(--dt-size-border-300) !important; }
+
+//  --  Y Border width
+.d-byw0 { border-block-width: var(--dt-size-border-0) !important; }
+.d-byw1 { border-block-width: var(--dt-size-border-100) !important; }
+.d-byw2 { border-block-width: var(--dt-size-border-200) !important; }
+.d-byw4 { border-block-width: var(--dt-size-border-300) !important; }
+
 //  --  Top Border width
 .d-btw0 { border-block-start-width: var(--dt-size-border-0) !important; }
 .d-btw1 { border-block-start-width: var(--dt-size-border-100) !important; }
@@ -157,17 +113,28 @@
 .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(); }
-.d-bxw1 { .d-brw1(); .d-blw1(); }
-.d-bxw2 { .d-brw2(); .d-blw2(); }
-.d-bxw4 { .d-brw4(); .d-blw4(); }
 
-//  --  Y Border width
-.d-byw0 { .d-btw0(); .d-bbw0(); }
-.d-byw1 { .d-btw1(); .d-bbw1(); }
-.d-byw2 { .d-btw2(); .d-bbw2(); }
-.d-byw4 { .d-btw4(); .d-bbw4(); }
+//  ============================================================================
+//  $  BORDER RADIUS
+//  ============================================================================
+//  Radius utilities are emitted by borderUtilities() in postcss/dialtone-generators.cjs.
+
+
+//  $$ STYLE
+//  ----------------------------------------------------------------------------
+.d-bas-dashed { border-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-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; }
 
 
 //  ============================================================================

package/lib/build/less/utilities/colors.less

@@ -14,6 +14,14 @@
 // TODO: Remove `*-transparent` classes in favor of `*-neutral-transparent` classes.
 //  Both are existing and that's not ok, a migration will be needed on product.
 //
+//  @@  @PROPERTY REGISTRATIONS
+//  ----------------------------------------------------------------------------
+//  Register opacity custom properties as non-inheriting so `--fco` set on an
+//  ancestor does not bleed into descendants using `.d-fc-*`. With universal
+//  syntax and no initial-value, `var(--fco, alpha)` still falls back to the
+//  source color's alpha channel when no opacity utility is applied.
+@property --fco { syntax: "*"; inherits: false; }
+
 //  $$  TEXT COLORS
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {

package/lib/build/less/utilities/effects.less

@@ -190,6 +190,7 @@
 
 //  --  TRANSITION TIMING
 .d-ttf { transition-timing-function: var(--ttf-ease) !important; }
+.d-ttf-in { transition-timing-function: var(--ttf-in) !important; }
 .d-ttf-in-out { transition-timing-function: var(--ttf-in-out) !important; }
 .d-ttf-out { transition-timing-function: var(--ttf-out) !important; }
 .d-ttf-out-quint { transition-timing-function: var(--ttf-out-quint) !important; }

package/lib/build/less/utilities/flex.less

@@ -23,6 +23,71 @@
 //     has more than one line.
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
+//  $$  PLACE CONTENT
+//      Shorthand for align-content + justify-content. Must precede both
+//      `.d-ac-*` (below) and `.d-jc-*` (further down this file) so single-axis
+//      classes win.
+//  ----------------------------------------------------------------------------
+.d-plc-center { place-content: center !important; }
+.d-plc-center-end { place-content: center end !important; }
+.d-plc-center-start { place-content: center start !important; }
+.d-plc-center-stretch { place-content: center stretch !important; }
+.d-plc-center-space-around { place-content: center space-around !important; }
+.d-plc-center-space-evenly { place-content: center space-evenly !important; }
+.d-plc-center-space-between { place-content: center space-between !important; }
+
+.d-plc-end { place-content: end !important; }
+.d-plc-end-start { place-content: end start !important; }
+.d-plc-end-stretch { place-content: end stretch !important; }
+.d-plc-end-center { place-content: end center !important; }
+.d-plc-end-space-around { place-content: end space-around !important; }
+.d-plc-end-space-evenly { place-content: end space-evenly !important; }
+.d-plc-end-space-between { place-content: end space-between !important; }
+
+.d-plc-start { place-content: start !important; }
+.d-plc-start-end { place-content: start end !important; }
+.d-plc-start-center { place-content: start center !important; }
+.d-plc-start-stretch { place-content: start stretch !important; }
+.d-plc-start-space-around { place-content: start space-around !important; }
+.d-plc-start-space-evenly { place-content: start space-evenly !important; }
+.d-plc-start-space-between { place-content: start space-between !important; }
+
+.d-plc-stretch { place-content: stretch !important; }
+.d-plc-stretch-end { place-content: stretch end !important; }
+.d-plc-stretch-start { place-content: stretch start !important; }
+.d-plc-stretch-center { place-content: stretch center !important; }
+.d-plc-stretch-space-evenly { place-content: stretch space-evenly !important; }
+.d-plc-stretch-space-around { place-content: stretch space-around !important; }
+.d-plc-stretch-space-between { place-content: stretch space-between !important; }
+
+.d-plc-space-around { place-content: space-around !important; }
+.d-plc-space-around-end { place-content: space-around end !important; }
+.d-plc-space-around-start { place-content: space-around start !important; }
+.d-plc-space-around-center { place-content: space-around center !important; }
+.d-plc-space-around-space-evenly { place-content: space-around space-evenly !important; }
+.d-plc-space-around-space-between { place-content: space-around space-between !important; }
+
+.d-plc-space-evenly { place-content: space-evenly !important; }
+.d-plc-space-evenly-end { place-content: space-evenly end !important; }
+.d-plc-space-evenly-start { place-content: space-evenly start !important; }
+.d-plc-space-evenly-center { place-content: space-evenly center !important; }
+.d-plc-space-evenly-space-around { place-content: space-evenly space-around !important; }
+.d-plc-space-evenly-space-between { place-content: space-evenly space-between !important; }
+
+.d-plc-space-between { place-content: space-between !important; }
+.d-plc-space-between-end { place-content: space-between end !important; }
+.d-plc-space-between-start { place-content: space-between start !important; }
+.d-plc-space-between-center { place-content: space-between center !important; }
+.d-plc-space-between-space-around { place-content: space-between space-around !important; }
+.d-plc-space-between-space-evenly { place-content: space-between space-evenly !important; }
+
+.d-plc-normal { place-content: normal !important; }
+.d-plc-legacy { place-content: legacy !important; }
+.d-plc-auto { place-content: auto !important; }
+.d-plc-unset { place-content: unset !important; }
+
+//  $$  ALIGN CONTENT
+//  ----------------------------------------------------------------------------
 .d-ac-center { align-content: center !important; }
 .d-ac-flex-end, .d-ac-end { align-content: flex-end !important; }
 .d-ac-flex-start, .d-ac-start { align-content: flex-start !important; }
@@ -41,6 +106,37 @@
 //     the parent's cross axis. Think of it the cross-axis for
 //     justify-content.
 //  ----------------------------------------------------------------------------
+//  $$  PLACE ITEMS
+//      Shorthand for align-items + justify-items. Must precede `.d-ai-*` (below)
+//      and `.d-ji-*` (grid.less, imported after this file) so single-axis wins.
+//  ----------------------------------------------------------------------------
+.d-pli-center { place-items: center !important; }
+.d-pli-center-end { place-items: center end !important; }
+.d-pli-center-start { place-items: center start !important; }
+.d-pli-center-stretch { place-items: center stretch !important; }
+
+.d-pli-end { place-items: end !important; }
+.d-pli-end-start { place-items: end start !important; }
+.d-pli-end-stretch { place-items: end stretch !important; }
+.d-pli-end-center { place-items: end center !important; }
+
+.d-pli-start { place-items: start !important; }
+.d-pli-start-end { place-items: start end !important; }
+.d-pli-start-center { place-items: start center !important; }
+.d-pli-start-stretch { place-items: start stretch !important; }
+
+.d-pli-stretch { place-items: stretch !important; }
+.d-pli-stretch-end { place-items: stretch end !important; }
+.d-pli-stretch-start { place-items: stretch start !important; }
+.d-pli-stretch-center { place-items: stretch center !important; }
+
+.d-pli-normal { place-items: normal !important; }
+.d-pli-legacy { place-items: legacy !important; }
+.d-pli-auto { place-items: auto !important; }
+.d-pli-unset { place-items: unset !important; }
+
+//  $$  ALIGN ITEMS
+//  ----------------------------------------------------------------------------
 .d-ai-center { align-items: center !important; }
 .d-ai-flex-end, .d-ai-end { align-items: flex-end !important; }
 .d-ai-flex-start, .d-ai-start { align-items: flex-start !important; }
@@ -55,6 +151,37 @@
 //     Allows child containers to re-align themselves regardless
 //     of the parent's main axis direction.
 //  ----------------------------------------------------------------------------
+//  $$  PLACE SELF
+//      Shorthand for align-self + justify-self. Must precede `.d-as-*` (below)
+//      and `.d-js-*` (grid.less, imported after this file) so single-axis wins.
+//  ----------------------------------------------------------------------------
+.d-pls-center { place-self: center !important; }
+.d-pls-center-end { place-self: center end !important; }
+.d-pls-center-start { place-self: center start !important; }
+.d-pls-center-stretch { place-self: center stretch !important; }
+
+.d-pls-end { place-self: end !important; }
+.d-pls-end-start { place-self: end start !important; }
+.d-pls-end-stretch { place-self: end stretch !important; }
+.d-pls-end-center { place-self: end center !important; }
+
+.d-pls-start { place-self: start !important; }
+.d-pls-start-end { place-self: start end !important; }
+.d-pls-start-center { place-self: start center !important; }
+.d-pls-start-stretch { place-self: start stretch !important; }
+
+.d-pls-stretch { place-self: stretch !important; }
+.d-pls-stretch-end { place-self: stretch end !important; }
+.d-pls-stretch-start { place-self: stretch start !important; }
+.d-pls-stretch-center { place-self: stretch center !important; }
+
+.d-pls-normal { place-self: normal !important; }
+.d-pls-legacy { place-self: legacy !important; }
+.d-pls-auto { place-self: auto !important; }
+.d-pls-unset { place-self: unset !important; }
+
+//  $$  ALIGN SELF
+//  ----------------------------------------------------------------------------
 .d-as-center { align-self: center !important; }
 .d-as-flex-end, .d-as-end { align-self: flex-end !important; }
 .d-as-flex-start, .d-as-start { align-self: flex-start !important; }
@@ -89,6 +216,24 @@
 //  ============================================================================
 //  $  DIRECTION, WRAP, & FLOW
 //  ----------------------------------------------------------------------------
+//  $$  FLEX FLOW
+//      Shorthand for flex-direction + flex-wrap. Emitted before the single-
+//      property blocks so `.d-fd-*` / `.d-fw-*` win on cascade ties.
+//  ----------------------------------------------------------------------------
+.d-ff-row-wrap { flex-flow: row wrap !important; }
+.d-ff-row-wrap-reverse { flex-flow: row wrap-reverse !important; }
+.d-ff-row-nowrap { flex-flow: row nowrap !important; }
+.d-ff-row-reverse-wrap { flex-flow: row-reverse wrap !important; }
+.d-ff-row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
+.d-ff-row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
+.d-ff-column-wrap { flex-flow: column wrap !important; }
+.d-ff-column-wrap-reverse { flex-flow: column wrap-reverse !important; }
+.d-ff-column-nowrap { flex-flow: column nowrap !important; }
+.d-ff-column-reverse-wrap { flex-flow: column-reverse wrap !important; }
+.d-ff-column-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
+.d-ff-column-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
+.d-f-flow-unset { flex-flow: unset !important; }
+
 //  $$  FLEX DIRECTION
 //      This determines the content flow direction within the parent container.
 //      Default value is row.
@@ -108,24 +253,6 @@
 .d-fw-nowrap { flex-wrap: nowrap !important; }
 .d-fw-unset { flex-wrap: unset !important; }
 
-//  $$  FLEX FLOW
-//      This is another shorthand property for flex-direction and flex-wrap.
-//      Default value is 'row nowrap'.
-//  ----------------------------------------------------------------------------
-.d-ff-row-wrap { flex-flow: row wrap !important; }
-.d-ff-row-wrap-reverse { flex-flow: row wrap-reverse !important; }
-.d-ff-row-nowrap { flex-flow: row nowrap !important; }
-.d-ff-row-reverse-wrap { flex-flow: row-reverse wrap !important; }
-.d-ff-row-reverse-wrap-reverse { flex-flow: row-reverse wrap-reverse !important; }
-.d-ff-row-reverse-nowrap { flex-flow: row-reverse nowrap !important; }
-.d-ff-column-wrap { flex-flow: column wrap !important; }
-.d-ff-column-wrap-reverse { flex-flow: column wrap-reverse !important; }
-.d-ff-column-nowrap { flex-flow: column nowrap !important; }
-.d-ff-column-reverse-wrap { flex-flow: column-reverse wrap !important; }
-.d-ff-column-reverse-wrap-reverse { flex-flow: column-reverse wrap-reverse !important; }
-.d-ff-column-reverse-nowrap { flex-flow: column-reverse nowrap !important; }
-.d-f-flow-unset { flex-flow: unset !important; }
-
 
 //  ============================================================================
 //  $  FLEX, GROW, & SHRINK

package/lib/build/less/utilities/grid.less

@@ -7,31 +7,59 @@
 //  visit https://dialtone.dialpad.com/utilities/grid
 //
 //  TABLE OF CONTENTS
-//  • GRID VARIABLES
-//  • COLUMNS
+//  • GRID AREAS        (grid-area shorthand — precedes column/row shorthand)
+//  • COLUMNS           (grid-column shorthand, then grid-column-start / -end)
+//  • ROWS              (grid-row shorthand, then grid-row-start / -end)
 //  • GAP
 //  • JUSTIFY ITEMS
 //  • JUSTIFY SELF
 //  • LAYOUTS
-//      - AREAS
-//  • PLACE CONTENT
-//  • PLACE ITEMS
-//  • PLACE SELF
-//  • ROWS
+//
+//  Ordering rule: shorthand / multi-axis classes precede their single-axis
+//  counterparts so single-axis classes win on cascade ties. `place-items`,
+//  `place-content`, and `place-self` shorthands live in `flex.less` because
+//  their longhand partners (`align-*`) also live there.
 //
 //  ============================================================================
-//  $   COLUMNS
+//  $   GRID AREAS
+//  ============================================================================
+//  `grid-area` is shorthand for grid-row-start / grid-column-start /
+//  grid-row-end / grid-column-end. Placed first so .d-gc-*/.d-gr-* singles win.
 //  ----------------------------------------------------------------------------
 @layer dialtone.utilities {
+.d-ga-sidebar { grid-area: sidebar !important; }
+.d-ga-content { grid-area: content !important; }
+.d-ga-header { grid-area: header !important; }
+
+
+//  ============================================================================
+//  $   COLUMNS
+//  ----------------------------------------------------------------------------
+//  `.d-gc-*` (grid-column shorthand) first; `.d-gcs-*` / `.d-gce-*` after.
 .d-gc-full { grid-column: 1 ~' / ' -1 !important; }
+.d-gc-auto { grid-column: auto !important; }
+.d-gc-unset { grid-column: unset !important; }
 
 .d-gcs-auto { grid-column-start: auto !important; }
 .d-gce-auto { grid-column-end: auto !important; }
-.d-gc-auto { grid-column: auto !important; }
 
 .d-gcs-unset { grid-column-start: unset !important; }
 .d-gce-unset { grid-column-end: unset !important; }
-.d-gc-unset { grid-column: unset !important; }
+
+
+//  ============================================================================
+//  $   ROWS
+//  ----------------------------------------------------------------------------
+//  `.d-gr-*` (grid-row shorthand) first; `.d-grs-*` / `.d-gre-*` after.
+.d-gr-full { grid-row: 1 ~' / ' -1 !important; }
+.d-gr-auto { grid-row: auto !important; }
+.d-gr-unset { grid-row: unset !important; }
+
+.d-grs-auto { grid-row-start: auto !important; }
+.d-gre-auto { grid-row-end: auto !important; }
+
+.d-grs-unset { grid-row-start: unset !important; }
+.d-gre-unset { grid-row-end: unset !important; }
 
 
 //  ============================================================================
@@ -41,9 +69,10 @@
 //      each defined spacing unit.
 //      TODO: Deprecated classes, remove on our next migration. https://dialpad.atlassian.net/browse/DLT-1763
 //  ----------------------------------------------------------------------------
+//  `.d-gg-unset` (gap shorthand) first; `.d-gcg-unset` / `.d-grg-unset` after.
+.d-gg-unset { gap: unset !important; }
 .d-gcg-unset { column-gap: unset !important; }
 .d-grg-unset { row-gap: unset !important; }
-.d-gg-unset { gap: unset !important; }
 
 
 //  ============================================================================
@@ -103,145 +132,4 @@
                          'content';
     grid-template-rows: [header-start] var(--header-height) [header-end content-start] var(--content-height) [content-end];
 }
-
-//  $   GRID AREAS
-//  ----------------------------------------------------------------------------
-.d-ga-sidebar { grid-area: sidebar !important; }
-.d-ga-content { grid-area: content !important; }
-.d-ga-header { grid-area: header !important; }
-
-
-//  ============================================================================
-//  $   PLACE CONTENT
-//      Aligns grid items along the block and inline directions at once
-//  ----------------------------------------------------------------------------
-.d-plc-center { place-content: center !important; }
-.d-plc-center-end { place-content: center end !important; }
-.d-plc-center-start { place-content: center start !important; }
-.d-plc-center-stretch { place-content: center stretch !important; }
-.d-plc-center-space-around { place-content: center space-around !important; }
-.d-plc-center-space-evenly { place-content: center space-evenly !important; }
-.d-plc-center-space-between { place-content: center space-between !important; }
-
-.d-plc-end { place-content: end !important; }
-.d-plc-end-start { place-content: end start !important; }
-.d-plc-end-stretch { place-content: end stretch !important; }
-.d-plc-end-center { place-content: end center !important; }
-.d-plc-end-space-around { place-content: end space-around !important; }
-.d-plc-end-space-evenly { place-content: end space-evenly !important; }
-.d-plc-end-space-between { place-content: end space-between !important; }
-
-.d-plc-start { place-content: start !important; }
-.d-plc-start-end { place-content: start end !important; }
-.d-plc-start-center { place-content: start center !important; }
-.d-plc-start-stretch { place-content: start stretch !important; }
-.d-plc-start-space-around { place-content: start space-around !important; }
-.d-plc-start-space-evenly { place-content: start space-evenly !important; }
-.d-plc-start-space-between { place-content: start space-between !important; }
-
-.d-plc-stretch { place-content: stretch !important; }
-.d-plc-stretch-end { place-content: stretch end !important; }
-.d-plc-stretch-start { place-content: stretch start !important; }
-.d-plc-stretch-center { place-content: stretch center !important; }
-.d-plc-stretch-space-evenly { place-content: stretch space-evenly !important; }
-.d-plc-stretch-space-around { place-content: stretch space-around !important; }
-.d-plc-stretch-space-between { place-content: stretch space-between !important; }
-
-.d-plc-space-around { place-content: space-around !important; }
-.d-plc-space-around-end { place-content: space-around end !important; }
-.d-plc-space-around-start { place-content: space-around start !important; }
-.d-plc-space-around-center { place-content: space-around center !important; }
-.d-plc-space-around-space-evenly { place-content: space-around space-evenly !important; }
-.d-plc-space-around-space-between { place-content: space-around space-between !important; }
-
-.d-plc-space-evenly { place-content: space-evenly !important; }
-.d-plc-space-evenly-end { place-content: space-evenly end !important; }
-.d-plc-space-evenly-start { place-content: space-evenly start !important; }
-.d-plc-space-evenly-center { place-content: space-evenly center !important; }
-.d-plc-space-evenly-space-around { place-content: space-evenly space-around !important; }
-.d-plc-space-evenly-space-between { place-content: space-evenly space-between !important; }
-
-.d-plc-space-between { place-content: space-between !important; }
-.d-plc-space-between-end { place-content: space-between end !important; }
-.d-plc-space-between-start { place-content: space-between start !important; }
-.d-plc-space-between-center { place-content: space-between center !important; }
-.d-plc-space-between-space-around { place-content: space-between space-around !important; }
-.d-plc-space-between-space-evenly { place-content: space-between space-evenly !important; }
-
-.d-plc-normal { place-content: normal !important; }
-.d-plc-legacy { place-content: legacy !important; }
-.d-plc-auto { place-content: auto !important; }
-.d-plc-unset { place-content: unset !important; }
-
-
-//  ============================================================================
-//  $   PLACE ITEMS
-//  ----------------------------------------------------------------------------
-.d-pli-center { place-items: center !important; }
-.d-pli-center-end { place-items: center end !important; }
-.d-pli-center-start { place-items: center start !important; }
-.d-pli-center-stretch { place-items: center stretch !important; }
-
-.d-pli-end { place-items: end !important; }
-.d-pli-end-start { place-items: end start !important; }
-.d-pli-end-stretch { place-items: end stretch !important; }
-.d-pli-end-center { place-items: end center !important; }
-
-.d-pli-start { place-items: start !important; }
-.d-pli-start-end { place-items: start end !important; }
-.d-pli-start-center { place-items: start center !important; }
-.d-pli-start-stretch { place-items: start stretch !important; }
-
-.d-pli-stretch { place-items: stretch !important; }
-.d-pli-stretch-end { place-items: stretch end !important; }
-.d-pli-stretch-start { place-items: stretch start !important; }
-.d-pli-stretch-center { place-items: stretch center !important; }
-
-.d-pli-normal { place-items: normal !important; }
-.d-pli-legacy { place-items: legacy !important; }
-.d-pli-auto { place-items: auto !important; }
-.d-pli-unset { place-items: unset !important; }
-
-
-//  ============================================================================
-//  $   PLACE SELF
-//  ----------------------------------------------------------------------------
-.d-pls-center { place-self: center !important; }
-.d-pls-center-end { place-self: center end !important; }
-.d-pls-center-start { place-self: center start !important; }
-.d-pls-center-stretch { place-self: center stretch !important; }
-
-.d-pls-end { place-self: end !important; }
-.d-pls-end-start { place-self: end start !important; }
-.d-pls-end-stretch { place-self: end stretch !important; }
-.d-pls-end-center { place-self: end center !important; }
-
-.d-pls-start { place-self: start !important; }
-.d-pls-start-end { place-self: start end !important; }
-.d-pls-start-center { place-self: start center !important; }
-.d-pls-start-stretch { place-self: start stretch !important; }
-
-.d-pls-stretch { place-self: stretch !important; }
-.d-pls-stretch-end { place-self: stretch end !important; }
-.d-pls-stretch-start { place-self: stretch start !important; }
-.d-pls-stretch-center { place-self: stretch center !important; }
-
-.d-pls-normal { place-self: normal !important; }
-.d-pls-legacy { place-self: legacy !important; }
-.d-pls-auto { place-self: auto !important; }
-.d-pls-unset { place-self: unset !important; }
-
-
-//  ============================================================================
-//  $   ROWS
-//  ----------------------------------------------------------------------------
-.d-gr-full { grid-row: 1 ~' / ' -1 !important; }
-
-.d-grs-auto { grid-row-start: auto !important; }
-.d-gre-auto { grid-row-end: auto !important; }
-.d-gr-auto { grid-row: auto !important; }
-
-.d-grs-unset { grid-row-start: unset !important; }
-.d-gre-unset { grid-row-end: unset !important; }
-.d-gr-unset { grid-row: unset !important; }
 }