@foxy.io/elements 1.18.0-beta.12 → 1.18.0-beta.14

package/dist/mixins/themeable.js

@@ -454,10 +454,18 @@ input::-webkit-date-and-time-value{
   left: var(--lumo-space-m, 1rem);
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.focus-within-z-10:focus-within {
+  z-index: 10;
+}
+
 .order-1 {
   order: 1;
 }
@@ -557,6 +565,11 @@ input::-webkit-date-and-time-value{
   margin-right: calc(var(--lumo-space-m, 1rem) * -1);
 }
 
+.-mx-l {
+  margin-left: calc(var(--lumo-space-l, 1.5rem) * -1);
+  margin-right: calc(var(--lumo-space-l, 1.5rem) * -1);
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -608,10 +621,18 @@ input::-webkit-date-and-time-value{
   margin-top: var(--lumo-space-m, 1rem);
 }
 
+.mt-l {
+  margin-top: var(--lumo-space-l, 1.5rem);
+}
+
 .mt-xl {
   margin-top: var(--lumo-space-xl, 2.5rem);
 }
 
+.-mt-xs {
+  margin-top: calc(var(--lumo-space-xs, 0.25rem) * -1);
+}
+
 .-mt-m {
   margin-top: calc(var(--lumo-space-m, 1rem) * -1);
 }
@@ -672,6 +693,10 @@ input::-webkit-date-and-time-value{
   margin-bottom: calc(var(--lumo-space-s, 0.5rem) * -1);
 }
 
+.-mb-m {
+  margin-bottom: calc(var(--lumo-space-m, 1rem) * -1);
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -1293,6 +1318,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-divide-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -1384,10 +1415,26 @@ input::-webkit-date-and-time-value{
   border-top-left-radius: var(--lumo-border-radius-l, 0.75em);
 }
 
+.rounded-tl {
+  border-top-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .rounded-tr-s {
   border-top-right-radius: var(--lumo-border-radius-s, 0.25em);
 }
 
+.rounded-tr {
+  border-top-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-br {
+  border-bottom-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-bl {
+  border-bottom-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .border {
   border-width: 1px;
 }
@@ -1460,6 +1507,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-border-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .focus-within-border-primary-50:focus-within {
   border-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
@@ -1559,12 +1612,20 @@ input::-webkit-date-and-time-value{
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
 
+  .group:hover .group-hover-bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+
   .group:hover .group-hover-bg-contrast-30 {
     background-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
   }
 }
 
 @media (hover: hover) {
+  .hover-bg-transparent:hover {
+    background-color: transparent;
+  }
+
   .hover-bg-contrast-5:hover {
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
@@ -1926,6 +1987,12 @@ input::-webkit-date-and-time-value{
   color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-text-body {
+    color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
+  }
+}
+
 @media (hover: hover) {
   .hover-text-primary:hover {
     color: var(--lumo-primary-text-color, hsl(214, 90%, 52%));
@@ -2021,6 +2088,11 @@ input::-webkit-date-and-time-value{
   --tw-shadow: 0 0 #0000;
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xs {
   --tw-shadow: var(--lumo-box-shadow-xs, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4));
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -2123,6 +2195,10 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
+.focus-ring-primary:focus {
+  --tw-ring-color: var(--lumo-primary-color, hsl(214, 90%, 52%));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -2718,10 +2794,18 @@ input::-webkit-date-and-time-value{
   left: var(--lumo-space-m, 1rem);
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.focus-within-z-10:focus-within {
+  z-index: 10;
+}
+
 .order-1 {
   order: 1;
 }
@@ -2821,6 +2905,11 @@ input::-webkit-date-and-time-value{
   margin-right: calc(var(--lumo-space-m, 1rem) * -1);
 }
 
+.-mx-l {
+  margin-left: calc(var(--lumo-space-l, 1.5rem) * -1);
+  margin-right: calc(var(--lumo-space-l, 1.5rem) * -1);
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -2872,10 +2961,18 @@ input::-webkit-date-and-time-value{
   margin-top: var(--lumo-space-m, 1rem);
 }
 
+.mt-l {
+  margin-top: var(--lumo-space-l, 1.5rem);
+}
+
 .mt-xl {
   margin-top: var(--lumo-space-xl, 2.5rem);
 }
 
+.-mt-xs {
+  margin-top: calc(var(--lumo-space-xs, 0.25rem) * -1);
+}
+
 .-mt-m {
   margin-top: calc(var(--lumo-space-m, 1rem) * -1);
 }
@@ -2936,6 +3033,10 @@ input::-webkit-date-and-time-value{
   margin-bottom: calc(var(--lumo-space-s, 0.5rem) * -1);
 }
 
+.-mb-m {
+  margin-bottom: calc(var(--lumo-space-m, 1rem) * -1);
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -3557,6 +3658,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-divide-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -3648,10 +3755,26 @@ input::-webkit-date-and-time-value{
   border-top-left-radius: var(--lumo-border-radius-l, 0.75em);
 }
 
+.rounded-tl {
+  border-top-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .rounded-tr-s {
   border-top-right-radius: var(--lumo-border-radius-s, 0.25em);
 }
 
+.rounded-tr {
+  border-top-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-br {
+  border-bottom-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-bl {
+  border-bottom-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .border {
   border-width: 1px;
 }
@@ -3724,6 +3847,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-border-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .focus-within-border-primary-50:focus-within {
   border-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
@@ -3823,12 +3952,20 @@ input::-webkit-date-and-time-value{
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
 
+  .group:hover .group-hover-bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+
   .group:hover .group-hover-bg-contrast-30 {
     background-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
   }
 }
 
 @media (hover: hover) {
+  .hover-bg-transparent:hover {
+    background-color: transparent;
+  }
+
   .hover-bg-contrast-5:hover {
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
@@ -4190,6 +4327,12 @@ input::-webkit-date-and-time-value{
   color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-text-body {
+    color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
+  }
+}
+
 @media (hover: hover) {
   .hover-text-primary:hover {
     color: var(--lumo-primary-text-color, hsl(214, 90%, 52%));
@@ -4285,6 +4428,11 @@ input::-webkit-date-and-time-value{
   --tw-shadow: 0 0 #0000;
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xs {
   --tw-shadow: var(--lumo-box-shadow-xs, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4));
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -4387,6 +4535,10 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
+.focus-ring-primary:focus {
+  --tw-ring-color: var(--lumo-primary-color, hsl(214, 90%, 52%));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -4978,10 +5130,18 @@ input::-webkit-date-and-time-value{
   left: var(--lumo-space-m, 1rem);
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.focus-within-z-10:focus-within {
+  z-index: 10;
+}
+
 .order-1 {
   order: 1;
 }
@@ -5081,6 +5241,11 @@ input::-webkit-date-and-time-value{
   margin-right: calc(var(--lumo-space-m, 1rem) * -1);
 }
 
+.-mx-l {
+  margin-left: calc(var(--lumo-space-l, 1.5rem) * -1);
+  margin-right: calc(var(--lumo-space-l, 1.5rem) * -1);
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -5132,10 +5297,18 @@ input::-webkit-date-and-time-value{
   margin-top: var(--lumo-space-m, 1rem);
 }
 
+.mt-l {
+  margin-top: var(--lumo-space-l, 1.5rem);
+}
+
 .mt-xl {
   margin-top: var(--lumo-space-xl, 2.5rem);
 }
 
+.-mt-xs {
+  margin-top: calc(var(--lumo-space-xs, 0.25rem) * -1);
+}
+
 .-mt-m {
   margin-top: calc(var(--lumo-space-m, 1rem) * -1);
 }
@@ -5196,6 +5369,10 @@ input::-webkit-date-and-time-value{
   margin-bottom: calc(var(--lumo-space-s, 0.5rem) * -1);
 }
 
+.-mb-m {
+  margin-bottom: calc(var(--lumo-space-m, 1rem) * -1);
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -5817,6 +5994,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-divide-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -5908,10 +6091,26 @@ input::-webkit-date-and-time-value{
   border-top-left-radius: var(--lumo-border-radius-l, 0.75em);
 }
 
+.rounded-tl {
+  border-top-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .rounded-tr-s {
   border-top-right-radius: var(--lumo-border-radius-s, 0.25em);
 }
 
+.rounded-tr {
+  border-top-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-br {
+  border-bottom-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-bl {
+  border-bottom-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .border {
   border-width: 1px;
 }
@@ -5984,6 +6183,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-border-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .focus-within-border-primary-50:focus-within {
   border-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
@@ -6083,12 +6288,20 @@ input::-webkit-date-and-time-value{
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
 
+  .group:hover .group-hover-bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+
   .group:hover .group-hover-bg-contrast-30 {
     background-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
   }
 }
 
 @media (hover: hover) {
+  .hover-bg-transparent:hover {
+    background-color: transparent;
+  }
+
   .hover-bg-contrast-5:hover {
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
@@ -6450,6 +6663,12 @@ input::-webkit-date-and-time-value{
   color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-text-body {
+    color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
+  }
+}
+
 @media (hover: hover) {
   .hover-text-primary:hover {
     color: var(--lumo-primary-text-color, hsl(214, 90%, 52%));
@@ -6545,6 +6764,11 @@ input::-webkit-date-and-time-value{
   --tw-shadow: 0 0 #0000;
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xs {
   --tw-shadow: var(--lumo-box-shadow-xs, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4));
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -6647,6 +6871,10 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
+.focus-ring-primary:focus {
+  --tw-ring-color: var(--lumo-primary-color, hsl(214, 90%, 52%));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
@@ -7238,10 +7466,18 @@ input::-webkit-date-and-time-value{
   left: var(--lumo-space-m, 1rem);
 }
 
+.z-0 {
+  z-index: 0;
+}
+
 .z-50 {
   z-index: 50;
 }
 
+.focus-within-z-10:focus-within {
+  z-index: 10;
+}
+
 .order-1 {
   order: 1;
 }
@@ -7341,6 +7577,11 @@ input::-webkit-date-and-time-value{
   margin-right: calc(var(--lumo-space-m, 1rem) * -1);
 }
 
+.-mx-l {
+  margin-left: calc(var(--lumo-space-l, 1.5rem) * -1);
+  margin-right: calc(var(--lumo-space-l, 1.5rem) * -1);
+}
+
 .my-auto {
   margin-top: auto;
   margin-bottom: auto;
@@ -7392,10 +7633,18 @@ input::-webkit-date-and-time-value{
   margin-top: var(--lumo-space-m, 1rem);
 }
 
+.mt-l {
+  margin-top: var(--lumo-space-l, 1.5rem);
+}
+
 .mt-xl {
   margin-top: var(--lumo-space-xl, 2.5rem);
 }
 
+.-mt-xs {
+  margin-top: calc(var(--lumo-space-xs, 0.25rem) * -1);
+}
+
 .-mt-m {
   margin-top: calc(var(--lumo-space-m, 1rem) * -1);
 }
@@ -7456,6 +7705,10 @@ input::-webkit-date-and-time-value{
   margin-bottom: calc(var(--lumo-space-s, 0.5rem) * -1);
 }
 
+.-mb-m {
+  margin-bottom: calc(var(--lumo-space-m, 1rem) * -1);
+}
+
 .ml-auto {
   margin-left: auto;
 }
@@ -8077,6 +8330,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-divide-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .self-start {
   align-self: flex-start;
 }
@@ -8168,10 +8427,26 @@ input::-webkit-date-and-time-value{
   border-top-left-radius: var(--lumo-border-radius-l, 0.75em);
 }
 
+.rounded-tl {
+  border-top-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .rounded-tr-s {
   border-top-right-radius: var(--lumo-border-radius-s, 0.25em);
 }
 
+.rounded-tr {
+  border-top-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-br {
+  border-bottom-right-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
+.rounded-bl {
+  border-bottom-left-radius: var(--lumo-border-radius-m, 0.5em);
+}
+
 .border {
   border-width: 1px;
 }
@@ -8244,6 +8519,12 @@ input::-webkit-date-and-time-value{
   border-color: var(--lumo-contrast-10pct, hsla(214, 57%, 24%, 0.1));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-border-contrast-20 {
+    border-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+}
+
 .focus-within-border-primary-50:focus-within {
   border-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
@@ -8343,12 +8624,20 @@ input::-webkit-date-and-time-value{
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
 
+  .group:hover .group-hover-bg-contrast-20 {
+    background-color: var(--lumo-contrast-20pct, hsla(214, 53%, 23%, 0.16));
+  }
+
   .group:hover .group-hover-bg-contrast-30 {
     background-color: var(--lumo-contrast-30pct, hsla(214, 50%, 22%, 0.26));
   }
 }
 
 @media (hover: hover) {
+  .hover-bg-transparent:hover {
+    background-color: transparent;
+  }
+
   .hover-bg-contrast-5:hover {
     background-color: var(--lumo-contrast-5pct, hsla(214, 61%, 25%, 0.05));
   }
@@ -8710,6 +8999,12 @@ input::-webkit-date-and-time-value{
   color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
 }
 
+@media (hover: hover) {
+  .group:hover .group-hover-text-body {
+    color: var(--lumo-body-text-color, hsla(214, 40%, 16%, 0.94));
+  }
+}
+
 @media (hover: hover) {
   .hover-text-primary:hover {
     color: var(--lumo-primary-text-color, hsl(214, 90%, 52%));
@@ -8805,6 +9100,11 @@ input::-webkit-date-and-time-value{
   --tw-shadow: 0 0 #0000;
 }
 
+.shadow-none {
+  --tw-shadow: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xs {
   --tw-shadow: var(--lumo-box-shadow-xs, 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4));
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
@@ -8907,6 +9207,10 @@ input::-webkit-date-and-time-value{
   --tw-ring-color: var(--lumo-primary-color-50pct, hsla(214, 90%, 52%, 0.5));
 }
 
+.focus-ring-primary:focus {
+  --tw-ring-color: var(--lumo-primary-color, hsl(214, 90%, 52%));
+}
+
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }