@byline/ui 6.10.0 → 6.11.0

package/src/styles/base/opacity.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* ========================================

package/src/styles/base/shadows.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* ========================================

package/src/styles/base/size.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     --size-0: 0;

package/src/styles/base/spacing.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     --spacing-0: 0;

package/src/styles/base/transitions.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     --transition-fast: 175ms ease-in-out;

package/src/styles/base/typography.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* 12px */

package/src/styles/base/z-index.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-base {
   :root {
     /* ========================================

package/src/styles/components/components.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 /* @import "./scroll-to-top.css"; */
 @import "./hamburger.css";
 /* @import "./loaders.css"; */

package/src/styles/components/fade-in-lift.css

@@ -1,15 +1,31 @@
-.component--fade-in-lift {
-  opacity: 0;
-  visibility: hidden;
-  transform: matrix(1, 0, 0, 1, 0, 18);
-  transition:
-    opacity 0.5s ease-out,
-    transform 0.7s ease-out;
-  will-change: opacity, visibility;
-}
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
+@layer byline-components.primitives {
+  .component--fade-in-lift {
+    opacity: 0;
+    visibility: hidden;
+    transform: matrix(1, 0, 0, 1, 0, 18);
+    transition:
+      opacity 0.5s ease-out,
+      transform 0.7s ease-out;
+    will-change: opacity, visibility;
+  }
 
-.component--fade-in-lift.is-visible {
-  opacity: 1;
-  visibility: visible;
-  transform: matrix(1, 0, 0, 1, 0, 0);
+  .component--fade-in-lift.is-visible {
+    opacity: 1;
+    visibility: visible;
+    transform: matrix(1, 0, 0, 1, 0, 0);
+  }
 }

package/src/styles/components/hamburger.css

@@ -1,5 +1,3 @@
-/* No longer used in our actual hamburger React and Astro components
-but left here as a reference. */
 @layer base,
   byline-base,
   theme,
@@ -8,10 +6,16 @@ but left here as a reference. */
   byline-typography,
   components,
   byline-components,
-  utilities,
-  byline-utilities;
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
+/* No longer used in our actual hamburger React and Astro components
+but left here as a reference. */
 
-@layer byline-components {
+@layer byline-components.primitives {
   .component--hamburger {
     display: flex;
     position: relative;

package/src/styles/components/loaders.css

@@ -1,198 +1,212 @@
-/* No longer used in our actual loaders for React and Astro components
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
+@layer byline-components.primitives {
+  /* No longer used in our actual loaders for React and Astro components
 but left here as a reference. */
-.lds-ellipsis {
-  display: inline-block;
-  position: relative;
-}
-
-.lds-ellipsis div {
-  position: absolute;
-  top: 41.25%;
-  width: 16.25%;
-  height: 32.25%;
-  border-radius: 50%;
-  background: #fff;
-  animation-timing-function: cubic-bezier(0, 1, 1, 0);
-}
-
-.lds-ellipsis div:nth-child(1) {
-  left: 10%;
-  animation: lds-ellipsis1 0.6s infinite;
-}
-
-.lds-ellipsis div:nth-child(2) {
-  left: 10%;
-  animation: lds-ellipsis2 0.6s infinite;
-}
-
-.lds-ellipsis div:nth-child(3) {
-  left: 40%;
-  animation: lds-ellipsis2 0.6s infinite;
-}
+  .lds-ellipsis {
+    display: inline-block;
+    position: relative;
+  }
 
-.lds-ellipsis div:nth-child(4) {
-  left: 70%;
-  animation: lds-ellipsis3 0.6s infinite;
-}
+  .lds-ellipsis div {
+    position: absolute;
+    top: 41.25%;
+    width: 16.25%;
+    height: 32.25%;
+    border-radius: 50%;
+    background: #fff;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
 
-@keyframes lds-ellipsis1 {
-  0% {
-    transform: scale(0);
+  .lds-ellipsis div:nth-child(1) {
+    left: 10%;
+    animation: lds-ellipsis1 0.6s infinite;
   }
 
-  100% {
-    transform: scale(1);
+  .lds-ellipsis div:nth-child(2) {
+    left: 10%;
+    animation: lds-ellipsis2 0.6s infinite;
   }
-}
 
-@keyframes lds-ellipsis3 {
-  0% {
-    transform: scale(1);
+  .lds-ellipsis div:nth-child(3) {
+    left: 40%;
+    animation: lds-ellipsis2 0.6s infinite;
   }
 
-  100% {
-    transform: scale(0);
+  .lds-ellipsis div:nth-child(4) {
+    left: 70%;
+    animation: lds-ellipsis3 0.6s infinite;
   }
-}
 
-@keyframes lds-ellipsis2 {
-  0% {
-    transform: translate(0, 0);
+  @keyframes lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+
+    100% {
+      transform: scale(1);
+    }
   }
 
-  100% {
-    transform: translate(184.61%, 0);
+  @keyframes lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+
+    100% {
+      transform: scale(0);
+    }
   }
-}
 
-.lds-ring {
-  display: inline-block;
-  position: relative;
-}
+  @keyframes lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
 
-.lds-ring div {
-  box-sizing: border-box;
-  display: block;
-  position: absolute;
-  border: 8px solid #fff;
-  border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #fff transparent transparent transparent;
-}
+    100% {
+      transform: translate(184.61%, 0);
+    }
+  }
 
-.lds-ring div:nth-child(1) {
-  animation-delay: -0.45s;
-}
+  .lds-ring {
+    display: inline-block;
+    position: relative;
+  }
 
-.lds-ring div:nth-child(2) {
-  animation-delay: -0.3s;
-}
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    border: 8px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #fff transparent transparent transparent;
+  }
 
-.lds-ring div:nth-child(3) {
-  animation-delay: -0.15s;
-}
+  .lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
 
-@keyframes lds-ring {
-  0% {
-    transform: rotate(0deg);
+  .lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
   }
 
-  100% {
-    transform: rotate(360deg);
+  .lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
   }
-}
 
-.lds-spinner {
-  color: official;
-  display: inline-block;
-  position: relative;
-  width: 56px;
-  height: 56px;
-}
+  @keyframes lds-ring {
+    0% {
+      transform: rotate(0deg);
+    }
 
-.lds-spinner div {
-  transform-origin: 28px 32px;
-  animation: lds-spinner 1.2s linear infinite;
-}
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 
-.lds-spinner div .div-after {
-  content: " ";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 25px;
-  width: 5px;
-  height: 14px;
-  border-radius: 20%;
-  background: #fff;
-}
+  .lds-spinner {
+    color: official;
+    display: inline-block;
+    position: relative;
+    width: 56px;
+    height: 56px;
+  }
 
-.lds-spinner div:nth-child(1) {
-  transform: rotate(0deg);
-  animation-delay: -1.1s;
-}
+  .lds-spinner div {
+    transform-origin: 28px 32px;
+    animation: lds-spinner 1.2s linear infinite;
+  }
 
-.lds-spinner div:nth-child(2) {
-  transform: rotate(30deg);
-  animation-delay: -1s;
-}
+  .lds-spinner div .div-after {
+    content: " ";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 25px;
+    width: 5px;
+    height: 14px;
+    border-radius: 20%;
+    background: #fff;
+  }
 
-.lds-spinner div:nth-child(3) {
-  transform: rotate(60deg);
-  animation-delay: -0.9s;
-}
+  .lds-spinner div:nth-child(1) {
+    transform: rotate(0deg);
+    animation-delay: -1.1s;
+  }
 
-.lds-spinner div:nth-child(4) {
-  transform: rotate(90deg);
-  animation-delay: -0.8s;
-}
+  .lds-spinner div:nth-child(2) {
+    transform: rotate(30deg);
+    animation-delay: -1s;
+  }
 
-.lds-spinner div:nth-child(5) {
-  transform: rotate(120deg);
-  animation-delay: -0.7s;
-}
+  .lds-spinner div:nth-child(3) {
+    transform: rotate(60deg);
+    animation-delay: -0.9s;
+  }
 
-.lds-spinner div:nth-child(6) {
-  transform: rotate(150deg);
-  animation-delay: -0.6s;
-}
+  .lds-spinner div:nth-child(4) {
+    transform: rotate(90deg);
+    animation-delay: -0.8s;
+  }
 
-.lds-spinner div:nth-child(7) {
-  transform: rotate(180deg);
-  animation-delay: -0.5s;
-}
+  .lds-spinner div:nth-child(5) {
+    transform: rotate(120deg);
+    animation-delay: -0.7s;
+  }
 
-.lds-spinner div:nth-child(8) {
-  transform: rotate(210deg);
-  animation-delay: -0.4s;
-}
+  .lds-spinner div:nth-child(6) {
+    transform: rotate(150deg);
+    animation-delay: -0.6s;
+  }
 
-.lds-spinner div:nth-child(9) {
-  transform: rotate(240deg);
-  animation-delay: -0.3s;
-}
+  .lds-spinner div:nth-child(7) {
+    transform: rotate(180deg);
+    animation-delay: -0.5s;
+  }
 
-.lds-spinner div:nth-child(10) {
-  transform: rotate(270deg);
-  animation-delay: -0.2s;
-}
+  .lds-spinner div:nth-child(8) {
+    transform: rotate(210deg);
+    animation-delay: -0.4s;
+  }
 
-.lds-spinner div:nth-child(11) {
-  transform: rotate(300deg);
-  animation-delay: -0.1s;
-}
+  .lds-spinner div:nth-child(9) {
+    transform: rotate(240deg);
+    animation-delay: -0.3s;
+  }
 
-.lds-spinner div:nth-child(12) {
-  transform: rotate(330deg);
-  animation-delay: 0s;
-}
+  .lds-spinner div:nth-child(10) {
+    transform: rotate(270deg);
+    animation-delay: -0.2s;
+  }
 
-@keyframes lds-spinner {
-  0% {
-    opacity: 1;
+  .lds-spinner div:nth-child(11) {
+    transform: rotate(300deg);
+    animation-delay: -0.1s;
   }
 
-  100% {
-    opacity: 0;
+  .lds-spinner div:nth-child(12) {
+    transform: rotate(330deg);
+    animation-delay: 0s;
+  }
+
+  @keyframes lds-spinner {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0;
+    }
   }
 }

package/src/styles/functional/borders.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * BORDER FUNCTIONAL TOKENS
  *

package/src/styles/functional/colors.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * SEMANTIC / FUNCTIONAL TOKEN LAYER FOR COLORS
  *

package/src/styles/functional/functional.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @import "./colors.css";
 @import "./surfaces.css";
 @import "./typography.css";

package/src/styles/functional/grid-flex.css

@@ -1,3 +1,15 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+@layer byline-components.primitives, byline-components.cms;
 @layer byline-functional {
   :root {
     /* ========================================

package/src/styles/functional/shadcn-compat.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * SHADCN COMPATIBILITY ALIAS LAYER
  *

package/src/styles/functional/surfaces.css

@@ -1,3 +1,17 @@
+@layer base,
+  byline-base,
+  theme,
+  byline-theme,
+  byline-functional,
+  byline-typography,
+  components,
+  byline-components,
+  overrides,
+  byline-utilities,
+  utilities;
+
+@layer byline-components.primitives, byline-components.cms;
+
 /**
  * SURFACE FUNCTIONAL TOKENS
  *