@stackoverflow/stacks 3.0.0-beta.22 → 3.0.0-beta.24

package/lib/atomic/backgrounds.less

@@ -0,0 +1,67 @@
+// BACKGROUND POSITION
+.bg-bottom { background-position: bottom !important; }
+.bg-center { background-position: center !important; }
+.bg-left { background-position: left !important; }
+.bg-left-bottom { background-position: left bottom !important; }
+.bg-left-top { background-position: left top !important; }
+.bg-right { background-position: right !important; }
+.bg-right-bottom { background-position: right bottom !important; }
+.bg-right-top { background-position: right top !important; }
+.bg-top { background-position: top !important; }
+
+// BACKGROUND REPEAT
+.bg-repeat { background-repeat: repeat !important; }
+.bg-no-repeat { background-repeat: no-repeat !important; }
+.bg-repeat-x { background-repeat: repeat-x !important; }
+.bg-repeat-y { background-repeat: repeat-y !important; }
+
+// BACKGROUND SIZE
+.bg-auto { background-size: auto !important; }
+.bg-cover { background-size: cover !important; }
+.bg-contain { background-size: contain !important; }
+
+// BACKGROUND ATTACHMENT
+.bg-fixed { background-attachment: fixed !important; }
+.bg-local { background-attachment: local !important; }
+.bg-scroll { background-attachment: scroll !important; }
+
+// BACKGROUND IMAGE
+.bg-image-none { background-image: none !important; }
+
+// BACKGROUND LOADING
+.bg-loading {
+    animation: loadingBgAnimation 1.5s ease-out infinite;
+    animation-delay: 1ms;
+}
+
+@keyframes loadingBgAnimation {
+    0% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+    50% {
+        background-color: var(--black-100);
+        opacity: 0.7;
+    }
+    100% {
+        background-color: var(--black-150);
+        opacity: 1;
+    }
+}
+
+// BACKGROUND CONFETTI
+.bg-confetti-animated {
+    background-repeat: repeat-x;
+    background-position: top -10px center;
+    background-image: url("data:image/svg+xml;,%3Csvg width='600' height='90' viewBox='0 0 600 90' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='42' y='-10' width='6' height='10'/%3E%3Crect x='84' y='-10' width='6' height='10'/%3E%3Crect x='126' y='-13' width='5' height='13'/%3E%3Crect x='168' y='-13' width='5' height='13'/%3E%3Crect x='210' y='-10' width='6' height='10'/%3E%3Crect x='252' y='-13' width='5' height='13'/%3E%3Crect x='294' y='-10' width='6' height='10'/%3E%3Crect x='336' y='-13' width='5' height='13'/%3E%3Crect x='378' y='-13' width='5' height='13'/%3E%3Crect x='420' y='-10' width='6' height='10'/%3E%3Crect x='462' y='-10' width='6' height='10'/%3E%3Crect x='504' y='-13' width='5' height='13'/%3E%3Crect x='546' y='-10' width='6' height='10'/%3E%3Cstyle type='text/css'%3E rect %7B opacity: 0; %7D rect:nth-child(1) %7B transform-origin: 45px 5px; transform: rotate(-145deg); animation: blast 700ms infinite ease-out; animation-delay: 88ms; animation-duration: 631ms; %7D rect:nth-child(2) %7B transform-origin: 87px 5px; transform: rotate(164deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 442ms; %7D rect:nth-child(3) %7B transform-origin: 128px 6px; transform: rotate(4deg); animation: blast 700ms infinite ease-out; animation-delay: 92ms; animation-duration: 662ms; %7D rect:nth-child(4) %7B transform-origin: 170px 6px; transform: rotate(-175deg); animation: blast 700ms infinite ease-out; animation-delay: 17ms; animation-duration: 593ms; %7D rect:nth-child(5) %7B transform-origin: 213px 5px; transform: rotate(-97deg); animation: blast 700ms infinite ease-out; animation-delay: 122ms; animation-duration: 476ms; %7D rect:nth-child(6) %7B transform-origin: 255px 6px; transform: rotate(57deg); animation: blast 700ms infinite ease-out; animation-delay: 271ms; animation-duration: 381ms; %7D rect:nth-child(7) %7B transform-origin: 297px 5px; transform: rotate(-46deg); animation: blast 700ms infinite ease-out; animation-delay: 131ms; animation-duration: 619ms; %7D rect:nth-child(8) %7B transform-origin: 338px 6px; transform: rotate(-65deg); animation: blast 700ms infinite ease-out; animation-delay: 85ms; animation-duration: 668ms; %7D rect:nth-child(9) %7B transform-origin: 380px 6px; transform: rotate(13deg); animation: blast 700ms infinite ease-out; animation-delay: 128ms; animation-duration: 377ms; %7D rect:nth-child(10) %7B transform-origin: 423px 5px; transform: rotate(176deg); animation: blast 700ms infinite ease-out; animation-delay: 311ms; animation-duration: 508ms; %7D rect:nth-child(11) %7B transform-origin: 465px 5px; transform: rotate(108deg); animation: blast 700ms infinite ease-out; animation-delay: 108ms; animation-duration: 595ms; %7D rect:nth-child(12) %7B transform-origin: 506px 6px; transform: rotate(62deg); animation: blast 700ms infinite ease-out; animation-delay: 105ms; animation-duration: 375ms; %7D rect:nth-child(13) %7B transform-origin: 549px 5px; transform: rotate(16deg); animation: blast 700ms infinite ease-out; animation-delay: 149ms; animation-duration: 491ms; %7D rect:nth-child(odd) %7B fill: %2365BB5C; %7D rect:nth-child(even) %7B z-index: 1; fill: %2333AAFF; %7D rect:nth-child(4n) %7B animation-duration: 1400ms; fill: %23F23B14; %7D rect:nth-child(3n) %7B animation-duration: 1750ms; animation-delay: 700ms; %7D rect:nth-child(4n-7) %7B fill: %232A2F6A; %7D rect:nth-child(6n) %7B fill: %23FBBA23; %7D @keyframes blast %7B from %7B opacity: 0; %7D 20%25 %7B opacity: 1; %7D to %7B transform: translateY(90px); %7D %7D %3C/style%3E%3C/svg%3E%0A");
+
+    @media (prefers-reduced-motion) {
+        background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
+    }
+}
+
+.bg-confetti-static {
+    background-repeat: repeat-x;
+    background-position: top -10px center;
+    background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
+}

package/lib/atomic/border-radius.less

@@ -0,0 +1,38 @@
+@import (reference) "../base/internal.less";
+
+#stacks-internals #responsify('.bar0', { border-radius: 0 !important; });
+.bar-md { border-radius: var(--br-md) !important; }
+.bar-circle { border-radius: var(--br-circle) !important; }
+.bar-pill { border-radius: var(--br-pill) !important; }
+
+// Top Left
+.btlr0 { border-top-left-radius: 0 !important; }
+.btlr-md { border-top-left-radius: var(--br-md) !important; }
+
+// Top Right
+.btrr0 { border-top-right-radius: 0 !important; }
+.btrr-md { border-top-right-radius: var(--br-md) !important; }
+
+// Bottom Left
+.bblr0 { border-bottom-left-radius: 0 !important; }
+.bblr-md { border-bottom-left-radius: var(--br-md) !important; }
+
+// Bottom Right
+.bbrr0 { border-bottom-right-radius: 0 !important; }
+.bbrr-md { border-bottom-right-radius: var(--br-md) !important; }
+
+// Top left and right
+.btr0 { .btlr0; .btrr0; }
+.btr-md { .btlr-md; .btrr-md; }
+
+// Top and bottom right
+.brr0 { .btrr0; .bbrr0; }
+.brr-md { .btrr-md; .bbrr-md; }
+
+// Bottom left and right
+.bbr0 { .bblr0; .bbrr0; }
+.bbr-md { .bblr-md; .bbrr-md; }
+
+// Top and bottom left
+.blr0 { .btlr0; .bblr0; }
+.blr-md { .btlr-md; .bblr-md; }

package/lib/atomic/borders.less

@@ -0,0 +1,73 @@
+@import (reference) "../base/internal.less";
+
+// BORDER
+#stacks-internals #responsify('.ba', { .bas-solid; .baw1; });
+#stacks-internals #responsify('.bt', { .bts-solid; .btw1; });
+#stacks-internals #responsify('.br', { .brs-solid; .brw1; });
+#stacks-internals #responsify('.bb', { .bbs-solid; .bbw1; });
+#stacks-internals #responsify('.bl', { .bls-solid; .blw1; });
+.bx { .bls-solid; .brs-solid; .bxw1; }
+.by { .bts-solid; .bbs-solid; .byw1; }
+
+// BORDER WIDTH
+#stacks-internals #responsify('.baw0', { border-width: 0 !important; });
+.baw1 { border-width: var(--su1) !important; }
+.baw2 { border-width: var(--su2) !important; }
+.baw3 { border-width: var(--su4) !important; }
+
+// Top border width
+#stacks-internals #responsify('.btw0', { border-top-width: 0 !important; });
+.btw1 { border-top-width: var(--su1) !important; }
+.btw2 { border-top-width: var(--su2) !important; }
+.btw3 { border-top-width: var(--su4) !important; }
+
+// Right border width
+#stacks-internals #responsify('.brw0', { border-right-width: 0 !important; });
+.brw1 { border-right-width: var(--su1) !important; }
+.brw2 { border-right-width: var(--su2) !important; }
+.brw3 { border-right-width: var(--su4) !important; }
+
+// Bottom border width
+#stacks-internals #responsify('.bbw0', { border-bottom-width: 0 !important; });
+.bbw1 { border-bottom-width: var(--su1) !important; }
+.bbw2 { border-bottom-width: var(--su2) !important; }
+.bbw3 { border-bottom-width: var(--su4) !important; }
+
+// Left border width
+#stacks-internals #responsify('.blw0', { border-left-width: 0 !important; });
+.blw0 { border-left-width: 0 !important; }
+.blw1 { border-left-width: var(--su1) !important; }
+.blw2 { border-left-width: var(--su2) !important; }
+.blw3 { border-left-width: var(--su4) !important; }
+
+// Top and bottom border width
+.byw0 { .btw0; .bbw0; }
+.byw1 { .btw1; .bbw1; }
+.byw2 { .btw2; .bbw2; }
+.byw3 { .btw3; .bbw3; }
+
+// Left and right border width
+.bxw0 { .brw0; .blw0; }
+.bxw1 { .brw1; .blw1; }
+.bxw2 { .brw2; .blw2; }
+.bxw3 { .brw3; .blw3; }
+
+// BORDER STYLE
+.bas-solid { border-style: solid !important; }
+.bas-dashed { border-style: dashed !important; }
+
+// Top border style
+.bts-solid { border-top-style: solid !important; }
+.bts-dashed { border-top-style: dashed !important; }
+
+// Right border style
+.brs-solid { border-right-style: solid !important; }
+.brs-dashed { border-right-style: dashed !important; }
+
+// Bottom border style
+.bbs-solid { border-bottom-style: solid !important; }
+.bbs-dashed { border-bottom-style: dashed !important; }
+
+// Left border style
+.bls-solid { border-left-style: solid !important; }
+.bls-dashed { border-left-style: dashed !important; }

package/lib/atomic/box-shadow.less

@@ -0,0 +1,29 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/color-mixins.less";
+@import (reference) "../exports/constants-helpers.less";
+// @import (reference) "../exports/mixins.less";
+
+#stacks-internals #responsify('.bs-none', {
+    box-shadow: none !important;
+});
+
+.bs-sm,
+.h\:bs-sm:hover {
+    box-shadow: var(--bs-sm) !important;
+}
+
+.bs-md,
+.h\:bs-md:hover { box-shadow: var(--bs-md) !important; }
+
+.bs-lg,
+.h\:bs-lg:hover { box-shadow: var(--bs-lg) !important; }
+
+.bs-xl,
+.h\:bs-xl:hover { box-shadow: var(--bs-xl) !important; }
+
+.bs-ring,
+.h\:bs-ring:hover,
+.f\:bs-ring:focus,
+.f\:bs-ring:focus-within { 
+    box-shadow: 0 0 0 var(--su4) var(--focus-ring);
+}

package/lib/atomic/box-sizing.less

@@ -0,0 +1,3 @@
+.box-content { box-sizing: content-box !important; }
+.box-border { box-sizing: border-box !important; }
+.box-unset { box-sizing: unset !important; }

package/lib/atomic/current-color.less

@@ -0,0 +1,2 @@
+.fill-current { fill: currentColor !important; }
+.stroke-current { stroke: currentColor !important; }

package/lib/atomic/cursors.less

@@ -0,0 +1,8 @@
+.c-auto { cursor: auto !important; }
+.c-default { cursor: default !important; }
+.c-pointer { cursor: pointer !important; }
+.c-text { cursor: text !important; }
+.c-wait { cursor: wait !important; }
+.c-move { cursor: move !important; }
+.c-not-allowed { cursor: not-allowed !important; }
+.c-help { cursor: help !important; }

package/lib/atomic/display.less

@@ -0,0 +1,15 @@
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../base/configuration-static.less";
+@import (reference) "../base/internal.less";
+
+#stacks-internals #responsify('.d-block', { display: block !important; });
+#stacks-internals #responsify('.d-flex', { display: flex !important; });
+#stacks-internals #responsify('.d-inline-flex', { display: inline-flex !important; });
+#stacks-internals #responsify('.d-grid', { display: grid !important; });
+#stacks-internals #responsify('.d-inline-grid', { display: inline-grid !important; });
+#stacks-internals #responsify('.d-inline', { display: inline !important; });
+#stacks-internals #responsify('.d-inline-block', { display: inline-block !important; });
+.d-table { display: table !important; }
+.d-table-cell { display: table-cell !important; }
+#stacks-internals #responsify('.d-none', { display: none !important; });
+.d-unset { display: unset !important; }

package/lib/atomic/floats.less

@@ -0,0 +1,20 @@
+// FLOAT
+.float-left { float: left !important; }
+.float-right { float: right !important; }
+.float-none { float: none !important; }
+
+// CLEARFIX
+.clearfix {
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+.clear-left { clear: left !important; }
+.clear-right { clear: right !important; }
+.clear-both { clear: both !important; }
+.clear-none { clear: none !important; }

package/lib/atomic/gap.less

@@ -1,3 +1,5 @@
+@import (reference) "../base/internal.less";
+
 #stacks-internals #responsify('.g0', { --_gap-y: 0; --_gap-x: 0; });
 #stacks-internals #responsify('.g1', { --_gap-y: var(--su1); --_gap-x: var(--su1); });
 #stacks-internals #responsify('.g2', { --_gap-y: var(--su2); --_gap-x: var(--su2); });

package/lib/atomic/grid.less

@@ -1,3 +1,5 @@
+@import (reference) "../base/internal.less";
+
 //  ============================================================================
 //  $   GRID FLOW
 //  ----------------------------------------------------------------------------

package/lib/atomic/interactivity.less

@@ -0,0 +1,45 @@
+@import (reference) "../exports/mixins.less";
+
+// FOCUS
+.focus,
+.f\:focus:focus,
+.f\:focus:focus-within {
+    .focus-styles();
+}
+
+.focus-inset,
+.f\:focus-inset:focus,
+.f\:focus-inset:focus-within {
+    .focus-styles(true);
+}
+
+.focus-bordered,
+.f\:focus-bordered:focus,
+.f\:focus-bordered:focus-within {
+    .focus-styles(false, true);
+}
+
+.focus-inset-bordered,
+.f\:focus-inset-bordered:focus,
+.f\:focus-inset-bordered:focus-within {
+    .focus-styles(true, true);
+}
+
+// POINTER EVENTS
+.pe-auto { pointer-events: auto !important; }
+.pe-none { pointer-events: none !important; }
+
+// USER SELECT
+.us-auto {
+    -webkit-user-select: auto !important;
+    -moz-user-select: auto !important;
+    -ms-user-select: auto !important;
+    user-select: auto !important;
+}
+
+.us-none {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}

package/lib/atomic/lists.less

@@ -0,0 +1,29 @@
+ul,
+ol {
+    padding: 0;
+    margin-left: 2.8em;
+
+    ul,
+    ol {
+        margin-bottom: 0;
+    }
+}
+
+ul { list-style-type: disc; }
+ol { list-style-type: decimal; }
+
+.list-reset {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+// List Style Types
+.list-ls-none { list-style: none !important; }
+.list-ls-disc { list-style-type: disc !important; }
+.list-ls-decimal { list-style-type: decimal !important; }
+.list-ls-unset { list-style-type: unset !important; }
+
+// List Position
+.list-inside { list-style-position: inside !important; }
+.list-outside { list-style-position: outside !important; }

package/lib/atomic/{spacing.less → margin.less}

@@ -5,7 +5,6 @@
 @px-values-negative: 1 2 4 6 8 12 16 24 32 48 64 96 128;
 @percent-values: 50 100;
 
-// MARGIN
 .m-auto { margin: auto !important; }
 .generate-sizing('.m', margin, @px-values, 'px', true);
 .generate-sizing('.mn', margin, @px-values-negative, 'px', true, true);
@@ -47,12 +46,3 @@
 .generate-sizing('.mxn'; margin-left, margin-right; @px-values-negative; 'px'; true; true);
 .generate-sizing('.my'; margin-top, margin-bottom; @px-values; 'px'; true);
 .generate-sizing('.myn'; margin-top, margin-bottom; @px-values-negative; 'px'; true; true);
-
-// PADDING
-.generate-sizing('.p', padding, @px-values, 'px', true);
-.generate-sizing('.pt', padding-top, @px-values, 'px', true);
-.generate-sizing('.pr', padding-right, @px-values, 'px', true);
-.generate-sizing('.pb', padding-bottom, @px-values, 'px', true);
-.generate-sizing('.pl', padding-left, @px-values, 'px', true);
-.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true);
-.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true);

package/lib/atomic/object-fit.less

@@ -0,0 +1,9 @@
+// OBJECT FIT
+.of-contain { object-fit: contain !important; }
+.of-cover { object-fit: cover !important; }
+.of-fill { object-fit: fill !important; }
+.of-none { object-fit: none !important; }
+.of-scale-down { object-fit: scale-down !important; }
+
+// OBJECT POSITION
+.op-center { object-position: center !important; }

package/lib/atomic/opacity.less

@@ -0,0 +1,54 @@
+.o0,
+.h\:o0:hover {
+    opacity: 0 !important;
+}
+
+.o5,
+.h\:o5:hover {
+    opacity: 0.05 !important;
+}
+
+.o10 {
+    opacity: 0.1 !important;
+}
+
+.o20 {
+    opacity: 0.2 !important;
+}
+
+.o30 {
+    opacity: 0.3 !important;
+}
+
+.o40 {
+    opacity: 0.4 !important;
+}
+
+.o50,
+.h\:o50:hover {
+    opacity: 0.5 !important;
+}
+
+.o60 {
+    opacity: 0.6 !important;
+}
+
+.o70 {
+    opacity: 0.7 !important;
+}
+
+.o80,
+.h\:o80:hover {
+    opacity: 0.8 !important;
+}
+
+.o90 {
+    opacity: 0.9 !important;
+}
+
+.o100,
+.h\:o100:hover,
+.f\:o100:focus,
+.f\:o100:focus-within {
+    opacity: 1 !important;
+}

package/lib/atomic/outline.less

@@ -0,0 +1,11 @@
+@import (reference) "../exports/mixins.less";
+
+.outline-none { outline: 0 !important; }
+.outline-ring { .focus-styles(false, true); } 
+
+.f\:outline-ring {
+    &:focus,
+    &:focus-within {
+        .outline-ring;
+    }
+}

package/lib/atomic/overflow.less

@@ -0,0 +1,17 @@
+@import (reference) "../exports/constants-helpers.less";
+
+// OVERFLOW
+.overflow-auto { overflow: auto !important; @scrollbar-styles(); }
+.overflow-hidden { overflow: hidden !important; @scrollbar-styles(); }
+.overflow-scroll { overflow: scroll !important; @scrollbar-styles(); }
+.overflow-visible { overflow: visible !important; }
+
+// OVERFLOW X
+.overflow-x-auto { overflow-x: auto !important; @scrollbar-styles(); }
+.overflow-x-hidden { overflow-x: hidden !important; @scrollbar-styles(); }
+.overflow-x-scroll { overflow-x: scroll !important; @scrollbar-styles(); }
+
+// OVERFLOW Y
+.overflow-y-auto { overflow-y: auto !important; @scrollbar-styles(); }
+.overflow-y-hidden { overflow-y: hidden !important; @scrollbar-styles(); }
+.overflow-y-scroll { overflow-y: scroll !important; @scrollbar-styles(); }

package/lib/atomic/padding.less

@@ -0,0 +1,12 @@
+@import (reference) "../base/internal.less";
+@import (reference) "../exports/mixins.less";
+
+@px-values: 0 1 2 4 6 8 12 16 24 32 48 64 96 128;
+
+.generate-sizing('.p', padding, @px-values, 'px', true);
+.generate-sizing('.pt', padding-top, @px-values, 'px', true);
+.generate-sizing('.pr', padding-right, @px-values, 'px', true);
+.generate-sizing('.pb', padding-bottom, @px-values, 'px', true);
+.generate-sizing('.pl', padding-left, @px-values, 'px', true);
+.generate-sizing('.px'; padding-left, padding-right; @px-values; 'px'; true);
+.generate-sizing('.py'; padding-top, padding-bottom; @px-values; 'px'; true);

package/lib/atomic/positioning.less

@@ -6,6 +6,13 @@
 @percent-values: 50 100;
 
 // POSITIONING
+#stacks-internals #responsify('.ps-absolute', { position: absolute !important; });
+#stacks-internals #responsify('.ps-fixed', { position: fixed !important; });
+#stacks-internals #responsify('.ps-relative', { position: relative !important; });
+#stacks-internals #responsify('.ps-static', { position: static !important; });
+#stacks-internals #responsify('.ps-sticky', { position: sticky !important; });
+.ps-unset { position: unset !important; }
+
 // Inset
 .generate-sizing('.i', inset, @px-values, 'px');
 

package/lib/atomic/sizing.less

@@ -3,8 +3,9 @@
 // SIZING UNITS CSS CUSTOM PROPERTIES
 body {
     --su0: 0;
-    --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su-static1` (1px).
+    --su1: clamp(1px, 0.063rem, 0.063rem); // This ensures `--su1` never drops below 1px by setting the clamp MIN value to `--su1` (1px).
     --su2: 0.125rem;
+    --su3: 0.1875rem;
     --su4: 0.25rem;
     --su6: 0.375rem;
     --su8: 0.5rem;
@@ -35,6 +36,7 @@ body {
     // This is a common subset sizing units for negative values
     --sun1: calc(var(--su1) * -1);
     --sun2: calc(var(--su2) * -1);
+    --sun3: calc(var(--su3) * -1);
     --sun4: calc(var(--su4) * -1);
     --sun6: calc(var(--su6) * -1);
     --sun8: calc(var(--su8) * -1);
@@ -46,31 +48,4 @@ body {
     --sun64: calc(var(--su64) * -1);
     --sun96: calc(var(--su96) * -1);
     --sun128: calc(var(--su128) * -1);
-
-    // Static (aka px) sizing units
-    --su-static0: 0px;
-    --su-static1: 1px;
-    --su-static2: 2px;
-    --su-static4: 4px;
-    --su-static6: 6px;
-    --su-static8: 8px;
-    --su-static12: 12px;
-    --su-static16: 16px;
-    --su-static24: 24px;
-    --su-static32: 32px;
-    --su-static48: 48px;
-    --su-static64: 64px;
-    --su-static96: 96px;
-    --su-static128: 128px;
-    --su-static256: 256px;
-    --su-static344: 344px;
-    --su-static448: 448px;
-    --su-static512: 512px;
-    --su-static640: 640px;
-    --su-static768: 768px;
-    --su-static848: 848px;
-    --su-static960: 960px;
-    --su-static1024: 1024px;
-    --su-static1120: 1120px;
-    --su-static1280: 1280px;
 }

package/lib/atomic/transitions.less

@@ -0,0 +1,20 @@
+.t {
+    transition-duration: var(--transition-time);
+    transition-property: all;
+    transition-timing-function: var(--te-ease-in);
+    transition-delay: 0s;
+}
+
+// -- Durations
+.t-slow { transition-duration: 0.25s !important; }
+.t-fast { transition-duration: 0.05s !important; }
+
+// -- Properties
+.t-unset { transition-property: none !important; }
+.t-bg { transition-property: background-color !important; }
+.t-opacity { transition-property: opacity !important; }
+.t-shadow { transition-property: box-shadow !important; }
+
+// -- Delays
+.t-delay { transition-delay: 0.25s !important; }
+.t-delay-unset { transition-delay: 0s !important; }

package/lib/atomic/truncation.less

@@ -0,0 +1,58 @@
+@import (reference) "../exports/constants-helpers.less";
+@import (reference) "../base/configuration-static.less";
+@import (reference) "../base/internal.less";
+
+.truncation(@count) {
+    // Despite these all being webkit-specific properties, this works across
+    // Safari, Chrome, Edge, and Firefox.
+    display: -webkit-box;
+    -webkit-line-clamp: @count;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+.truncate {
+    overflow: hidden;
+    max-width: 100%;
+    text-overflow: ellipsis !important;
+    white-space: nowrap;
+}
+
+.v-truncate1 {
+    .truncation(1);
+}
+
+.v-truncate2 {
+    .truncation(2);
+}
+
+.v-truncate3 {
+    .truncation(3);
+}
+
+.v-truncate4 {
+    .truncation(4);
+}
+
+.v-truncate5 {
+    .truncation(5);
+}
+
+.v-truncate-fade {
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 9em), transparent);
+    max-height: calc(var(--lh-md) * 12em);
+
+    &.v-truncate-fade__sm {
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 3em), transparent);
+        max-height: calc(var(--lh-md) * 6em);
+    }
+
+    &.v-truncate-fade__lg {
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        mask-image: linear-gradient(180deg, #000 calc(var(--lh-md) * 21em), transparent);
+        max-height: calc(var(--lh-md) * 24em);
+    }
+}