@splendidlabz/styles 4.0.0-alpha.2 → 4.0.0-beta.4

package/src/layouts/position/edge.css

@@ -3,16 +3,11 @@
   --ty: 0%;
 }
 
+/* prettier-ignore */
 @utility edge-scaffold {
-  transform: translateX(var(--tx, 0%)) translateY(var(--ty, 0%));
-
-  :where(.stack) > & {
-    box-sizing: content-box;
-  }
-
-  :where(.relative > &) {
-    position: absolute;
-  }
+  transform: translateX(var(--_tx, 0%)) translateY(var(--_ty, 0%));
+  :where(.stack) > & { box-sizing: content-box; }
+  :where(.relative > &) { position: absolute; }
 }
 
 /*********************
@@ -58,6 +53,14 @@
   place-self: center start;
 }
 
+@utility stack-edge-lefttop {
+  place-self: start start;
+}
+
+@utility stack-edge-leftbottom {
+  place-self: end start;
+}
+
 @utility stack-edge-leftfull {
   place-self: stretch start;
 }
@@ -67,6 +70,14 @@
   place-self: center end;
 }
 
+@utility stack-edge-righttop {
+  place-self: start end;
+}
+
+@utility stack-edge-rightbottom {
+  place-self: end end;
+}
+
 @utility stack-edge-rightfull {
   place-self: stretch end;
 }
@@ -78,6 +89,9 @@
 /* Top */
 @utility relative-edge-top {
   inset-block-start: 0;
+  inset-inline: 0;
+  width: fit-content;
+  margin-inline: auto;
 }
 
 @utility relative-edge-topleft {
@@ -98,6 +112,9 @@
 /* Bottom */
 @utility relative-edge-bottom {
   inset-block-end: 0;
+  inset-inline: 0;
+  width: fit-content;
+  margin-inline: auto;
 }
 
 @utility relative-edge-bottomfull {
@@ -117,6 +134,19 @@
 
 /* Left */
 @utility relative-edge-left {
+  inset-block: 0;
+  inset-inline-start: 0;
+  height: fit-content;
+  margin-block: auto;
+}
+
+@utility relative-edge-lefttop {
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+@utility relative-edge-leftbottom {
+  inset-block-end: 0;
   inset-inline-start: 0;
 }
 
@@ -127,6 +157,19 @@
 
 /* Right */
 @utility relative-edge-right {
+  inset-block: 0;
+  inset-inline-end: 0;
+  height: fit-content;
+  margin-block: auto;
+}
+
+@utility relative-edge-righttop {
+  inset-block-start: 0;
+  inset-inline-end: 0;
+}
+
+@utility relative-edge-rightbottom {
+  inset-block-end: 0;
   inset-inline-end: 0;
 }
 
@@ -143,90 +186,179 @@
  *********************/
 @utility edge-adjust-top {
   --ty: -50%;
+  --_ty: var(--ty);
 }
 
 @utility edge-adjust-topleft-start {
   @apply edge-adjust-top;
   --tx: -100%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-topleft {
   @apply edge-adjust-top;
   --tx: -50%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-topleft-end {
   @apply edge-adjust-top;
   --tx: 0%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-topright-start {
   @apply edge-adjust-top;
   --tx: 0%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 @utility edge-adjust-topright {
   @apply edge-adjust-top;
-  --tx: 50%;
+  --tx: -50%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 @utility edge-adjust-topright-end {
   @apply edge-adjust-top;
-  --tx: 100%;
+  --tx: -100%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 /* Bottom *
  *********************/
 @utility edge-adjust-bottom {
-  --ty: 50%;
+  --ty: -50%;
+  --_ty: calc(var(--ty) * -1);
 }
 
 @utility edge-adjust-bottomleft-start {
   @apply edge-adjust-bottom;
   --tx: -100%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-bottomleft {
   @apply edge-adjust-bottom;
   --tx: -50%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-bottomleft-end {
   @apply edge-adjust-bottom;
-  --tx: 0%;
+  --tx: -0%;
+  --_tx: var(--tx);
 }
 
 @utility edge-adjust-bottomright-start {
   @apply edge-adjust-bottom;
-  --tx: 0%;
+  --tx: -0%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 @utility edge-adjust-bottomright {
   @apply edge-adjust-bottom;
-  --tx: 50%;
+  --tx: -50%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 @utility edge-adjust-bottomright-end {
   @apply edge-adjust-bottom;
-  --tx: 100%;
+  --tx: -100%;
+  --_tx: calc(var(--tx) * -1);
 }
 
 /* Left *
  *********************/
 @utility edge-adjust-left {
   --tx: -50%;
+  --_tx: var(--tx);
+}
+
+@utility edge-adjust-lefttop-start {
+  @apply edge-adjust-left;
+  --ty: -100%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-lefttop {
+  @apply edge-adjust-left;
+  --ty: -50%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-lefttop-end {
+  @apply edge-adjust-left;
+  --ty: -0%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-leftbottom-start {
+  @apply edge-adjust-left;
+  --ty: -0%;
+  --_ty: calc(var(--ty) * -1);
+}
+
+@utility edge-adjust-leftbottom {
+  @apply edge-adjust-left;
+  --ty: -50%;
+  --_ty: calc(var(--ty) * -1);
+}
+
+@utility edge-adjust-leftbottom-end {
+  @apply edge-adjust-left;
+  --ty: -100%;
+  --_ty: calc(var(--ty) * -1);
 }
 
 /* Right *
  *********************/
 @utility edge-adjust-right {
-  --tx: 50%;
+  --tx: -50%;
+  --_tx: calc(var(--tx) * -1);
+}
+
+@utility edge-adjust-righttop-start {
+  @apply edge-adjust-right;
+  --ty: -100%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-righttop {
+  @apply edge-adjust-right;
+  --ty: -50%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-righttop-end {
+  @apply edge-adjust-right;
+  --ty: -0%;
+  --_ty: var(--ty);
+}
+
+@utility edge-adjust-rightbottom-start {
+  @apply edge-adjust-right;
+  --ty: -0%;
+  --_ty: calc(var(--ty) * -1);
+}
+
+@utility edge-adjust-rightbottom {
+  @apply edge-adjust-right;
+  --ty: -50%;
+  --_ty: calc(var(--ty) * -1);
+}
+
+@utility edge-adjust-rightbottom-end {
+  @apply edge-adjust-right;
+  --ty: -100%;
+  --_ty: calc(var(--ty) * -1);
 }
 
 /*********************
  * Edge utilities *
  *********************/
 @utility edge-top {
+  @apply nudge-top;
   @apply edge-scaffold;
   @apply edge-adjust-top;
 
@@ -240,6 +372,7 @@
 }
 
 @utility edge-topleft {
+  @apply nudge-topleft;
   @apply edge-scaffold;
   @apply edge-adjust-topleft;
 
@@ -253,6 +386,7 @@
 }
 
 @utility edge-topright {
+  @apply nudge-topright;
   @apply edge-scaffold;
   @apply edge-adjust-topright;
 
@@ -266,20 +400,22 @@
 }
 
 @utility edge-topfull {
+  @apply nudge-topfull;
   @apply edge-scaffold;
   @apply edge-adjust-top;
 
   :where(.stack) > & {
-    @apply stack-edge-top;
+    @apply stack-edge-topfull;
   }
 
   :where(.relative) > & {
-    @apply relative-edge-top;
+    @apply relative-edge-topfull;
   }
 }
 
 /* Bottom */
 @utility edge-bottom {
+  @apply nudge-bottom;
   @apply edge-scaffold;
   @apply edge-adjust-bottom;
 
@@ -293,6 +429,7 @@
 }
 
 @utility edge-bottomleft {
+  @apply nudge-bottom;
   @apply edge-scaffold;
   @apply edge-adjust-bottomleft;
 
@@ -306,6 +443,7 @@
 }
 
 @utility edge-bottomright {
+  @apply nudge-bottomright;
   @apply edge-scaffold;
   @apply edge-adjust-bottomright;
 
@@ -319,20 +457,22 @@
 }
 
 @utility edge-bottomfull {
+  @apply nudge-bottomfull;
   @apply edge-scaffold;
   @apply edge-adjust-bottom;
 
   :where(.stack) > & {
-    @apply stack-edge-bottom;
+    @apply stack-edge-bottomfull;
   }
 
   :where(.relative) > & {
-    @apply relative-edge-bottom;
+    @apply relative-edge-bottomfull;
   }
 }
 
 /* Left */
 @utility edge-left {
+  @apply nudge-left;
   @apply edge-scaffold;
   @apply edge-adjust-left;
 
@@ -345,21 +485,51 @@
   }
 }
 
+@utility edge-lefttop {
+  @apply nudge-topleft;
+  @apply edge-scaffold;
+  @apply edge-adjust-lefttop;
+
+  :where(.stack) > & {
+    @apply stack-edge-lefttop;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-lefttop;
+  }
+}
+
+@utility edge-leftbottom {
+  @apply nudge-bottomleft;
+  @apply edge-scaffold;
+  @apply edge-adjust-leftbottom;
+
+  :where(.stack) > & {
+    @apply stack-edge-leftbottom;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-leftbottom;
+  }
+}
+
 @utility edge-leftfull {
+  @apply nudge-leftfull;
   @apply edge-scaffold;
   @apply edge-adjust-left;
 
   :where(.stack) > & {
-    @apply stack-edge-left;
+    @apply stack-edge-leftfull;
   }
 
   :where(.relative) > & {
-    @apply relative-edge-left;
+    @apply relative-edge-leftfull;
   }
 }
 
 /* Right */
 @utility edge-right {
+  @apply nudge-right;
   @apply edge-scaffold;
   @apply edge-adjust-right;
 
@@ -372,16 +542,45 @@
   }
 }
 
+@utility edge-righttop {
+  @apply nudge-topright;
+  @apply edge-scaffold;
+  @apply edge-adjust-righttop;
+
+  :where(.stack) > & {
+    @apply stack-edge-righttop;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-righttop;
+  }
+}
+
+@utility edge-rightbottom {
+  @apply nudge-bottomright;
+  @apply edge-scaffold;
+  @apply edge-adjust-rightbottom;
+
+  :where(.stack) > & {
+    @apply stack-edge-rightbottom;
+  }
+
+  :where(.relative) > & {
+    @apply relative-edge-rightbottom;
+  }
+}
+
 @utility edge-rightfull {
+  @apply nudge-rightfull;
   @apply edge-scaffold;
   @apply edge-adjust-right;
 
   :where(.stack) > & {
-    @apply stack-edge-right;
+    @apply stack-edge-rightfull;
   }
 
   :where(.relative) > & {
-    @apply relative-edge-right;
+    @apply relative-edge-rightfull;
   }
 }
 
@@ -427,3 +626,43 @@
   @apply edge-bottomright;
   @apply edge-adjust-bottomright-end;
 }
+
+@utility edge-lefttop-start {
+  @apply edge-lefttop;
+  @apply edge-adjust-lefttop-start;
+}
+
+@utility edge-lefttop-end {
+  @apply edge-lefttop;
+  @apply edge-adjust-lefttop-end;
+}
+
+@utility edge-leftbottom-start {
+  @apply edge-leftbottom;
+  @apply edge-adjust-leftbottom-start;
+}
+
+@utility edge-leftbottom-end {
+  @apply edge-leftbottom;
+  @apply edge-adjust-leftbottom-end;
+}
+
+@utility edge-righttop-start {
+  @apply edge-righttop;
+  @apply edge-adjust-righttop-start;
+}
+
+@utility edge-righttop-end {
+  @apply edge-righttop;
+  @apply edge-adjust-righttop-end;
+}
+
+@utility edge-rightbottom-start {
+  @apply edge-rightbottom;
+  @apply edge-adjust-rightbottom-start;
+}
+
+@utility edge-rightbottom-end {
+  @apply edge-rightbottom;
+  @apply edge-adjust-rightbottom-end;
+}

package/src/layouts/position/fixed.css

@@ -6,33 +6,41 @@
   *********************/
 @utility fixed-top {
   & {
+    @apply nudge-top;
     position: fixed;
-    top: 0;
-    bottom: auto;
+    inset-block-start: 0;
     inset-inline: 0;
+    width: fit-content;
+    margin-inline: auto;
   }
 }
 
 @utility fixed-topleft {
   & {
-    @apply fixed-top;
-    right: auto;
+    @apply nudge-topleft;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
   }
 }
 
 @utility fixed-topright {
   & {
-    @apply fixed-top;
-    left: auto;
+    @apply nudge-topright;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-end: 0;
   }
 }
 
 @utility fixed-topfull {
   & {
-    @apply fixed-top;
+    @apply nudge-topfull;
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline: 0;
     width: 100%;
-    max-width: none;
-    margin-inline: 0;
+    max-width: 100%;
   }
 }
 
@@ -40,33 +48,41 @@
  *********************/
 @utility fixed-bottom {
   & {
+    @apply nudge-bottom;
     position: fixed;
-    top: auto;
-    bottom: 0;
+    inset-block-end: 0;
     inset-inline: 0;
+    width: fit-content;
+    margin-inline: auto;
   }
 }
 
 @utility fixed-bottomleft {
   & {
-    @apply fixed-bottom;
-    right: auto;
+    @apply nudge-bottomleft;
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline-start: 0;
   }
 }
 
 @utility fixed-bottomright {
   & {
-    @apply fixed-bottom;
-    left: auto;
+    @apply nudge-bottomright;
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline-end: 0;
   }
 }
 
 @utility fixed-bottomfull {
   & {
-    @apply fixed-bottom;
+    @apply nudge-bottomfull;
+    position: fixed;
+    inset-block-end: 0;
+    inset-inline: 0;
     width: 100%;
-    max-width: none;
-    margin-inline: 0;
+    max-width: 100%;
   }
 }
 
@@ -74,19 +90,23 @@
 *********************/
 @utility fixed-left {
   & {
+    @apply nudge-left;
     position: fixed;
     inset-block: 0;
-    left: 0;
-    right: auto;
+    inset-inline-start: 0;
+    height: fit-content;
+    margin-block: auto;
   }
 }
 
 @utility fixed-leftfull {
   & {
-    @apply fixed-left;
-    height: auto;
-    max-height: none;
-    margin-block: 0;
+    @apply nudge-leftfull;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-start: 0;
+    height: 100%;
+    max-height: 100%;
   }
 }
 
@@ -94,19 +114,23 @@
 *********************/
 @utility fixed-right {
   & {
+    @apply nudge-right;
     position: fixed;
     inset-block: 0;
-    left: auto;
-    right: 0;
+    inset-inline-end: 0;
+    height: fit-content;
+    margin-block: auto;
   }
 }
 
 @utility fixed-rightfull {
   & {
-    @apply fixed-right;
-    height: auto;
-    max-height: none;
-    margin-block: 0;
+    @apply nudge-rightfull;
+    position: fixed;
+    inset-block: 0;
+    inset-inline-end: 0;
+    height: 100%;
+    max-height: 100%;
   }
 }
 
@@ -115,6 +139,7 @@
 @utility fixed-center {
   & {
     position: fixed;
+    inset: 0;
     width: fit-content;
     height: fit-content;
     margin: auto;
@@ -125,9 +150,11 @@
 *********************/
 @utility fixed-overlay {
   & {
+    @apply nudge-overlay;
     position: fixed;
     inset-block: var(--nudge-y, var(--nudge, 0));
     inset-inline: var(--nudge-x, var(--nudge, 0));
     display: grid;
+    place-items: center;
   }
 }