@foxy.io/elements 1.18.0-beta.13 → 1.18.0-beta.15

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,11 +565,6 @@ 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;
@@ -613,14 +616,14 @@ 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);
 }
@@ -681,6 +684,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;
 }
@@ -773,10 +780,6 @@ input::-webkit-date-and-time-value{
   display: table-cell;
 }
 
-:host([md]) .md-block {
-  display: block;
-}
-
 :host([md]) .md-flex {
   display: flex;
 }
@@ -1142,10 +1145,6 @@ input::-webkit-date-and-time-value{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-:host([md]) .md-grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 :host([md]) .md-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -1302,6 +1301,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;
 }
@@ -1393,10 +1398,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;
 }
@@ -1469,6 +1490,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));
 }
@@ -1568,12 +1595,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));
   }
@@ -1935,6 +1970,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%));
@@ -2030,11 +2071,6 @@ 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);
@@ -2137,6 +2173,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;
 }
@@ -2263,6 +2303,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+.max-w-modal-wide{
+  max-width:50rem;
+}
+
 .w-narrow-modal{
   width:18rem;
 }
@@ -2279,6 +2323,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+:host([sm]) .sm-max-w-modal-wide{
+  max-width:50rem;
+}
+
 :host([sm]) .sm-w-narrow-modal{
   width:18rem;
 }
@@ -2732,10 +2780,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;
 }
@@ -2835,11 +2891,6 @@ 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;
@@ -2891,14 +2942,14 @@ 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);
 }
@@ -2959,6 +3010,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;
 }
@@ -3051,10 +3106,6 @@ input::-webkit-date-and-time-value{
   display: table-cell;
 }
 
-:host([md]) .md-block {
-  display: block;
-}
-
 :host([md]) .md-flex {
   display: flex;
 }
@@ -3420,10 +3471,6 @@ input::-webkit-date-and-time-value{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-:host([md]) .md-grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 :host([md]) .md-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -3580,6 +3627,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;
 }
@@ -3671,10 +3724,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;
 }
@@ -3747,6 +3816,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));
 }
@@ -3846,12 +3921,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));
   }
@@ -4213,6 +4296,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%));
@@ -4308,11 +4397,6 @@ 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);
@@ -4415,6 +4499,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;
 }
@@ -4541,6 +4629,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+.max-w-modal-wide{
+  max-width:50rem;
+}
+
 .w-narrow-modal{
   width:18rem;
 }
@@ -4557,6 +4649,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+:host([sm]) .sm-max-w-modal-wide{
+  max-width:50rem;
+}
+
 :host([sm]) .sm-w-narrow-modal{
   width:18rem;
 }
@@ -5006,10 +5102,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;
 }
@@ -5109,11 +5213,6 @@ 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;
@@ -5165,14 +5264,14 @@ 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);
 }
@@ -5233,6 +5332,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;
 }
@@ -5325,10 +5428,6 @@ input::-webkit-date-and-time-value{
   display: table-cell;
 }
 
-:host([md]) .md-block {
-  display: block;
-}
-
 :host([md]) .md-flex {
   display: flex;
 }
@@ -5694,10 +5793,6 @@ input::-webkit-date-and-time-value{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-:host([md]) .md-grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 :host([md]) .md-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -5854,6 +5949,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;
 }
@@ -5945,10 +6046,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;
 }
@@ -6021,6 +6138,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));
 }
@@ -6120,12 +6243,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));
   }
@@ -6487,6 +6618,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%));
@@ -6582,11 +6719,6 @@ 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);
@@ -6689,6 +6821,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;
 }
@@ -6815,6 +6951,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+.max-w-modal-wide{
+  max-width:50rem;
+}
+
 .w-narrow-modal{
   width:18rem;
 }
@@ -6831,6 +6971,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+:host([sm]) .sm-max-w-modal-wide{
+  max-width:50rem;
+}
+
 :host([sm]) .sm-w-narrow-modal{
   width:18rem;
 }
@@ -7280,10 +7424,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;
 }
@@ -7383,11 +7535,6 @@ 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;
@@ -7439,14 +7586,14 @@ 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);
 }
@@ -7507,6 +7654,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;
 }
@@ -7599,10 +7750,6 @@ input::-webkit-date-and-time-value{
   display: table-cell;
 }
 
-:host([md]) .md-block {
-  display: block;
-}
-
 :host([md]) .md-flex {
   display: flex;
 }
@@ -7968,10 +8115,6 @@ input::-webkit-date-and-time-value{
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-:host([md]) .md-grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 :host([md]) .md-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -8128,6 +8271,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;
 }
@@ -8219,10 +8368,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;
 }
@@ -8295,6 +8460,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));
 }
@@ -8394,12 +8565,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));
   }
@@ -8761,6 +8940,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%));
@@ -8856,11 +9041,6 @@ 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);
@@ -8963,6 +9143,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;
 }
@@ -9089,6 +9273,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+.max-w-modal-wide{
+  max-width:50rem;
+}
+
 .w-narrow-modal{
   width:18rem;
 }
@@ -9105,6 +9293,10 @@ input::-webkit-date-and-time-value{
   max-width:28rem;
 }
 
+:host([sm]) .sm-max-w-modal-wide{
+  max-width:50rem;
+}
+
 :host([sm]) .sm-w-narrow-modal{
   width:18rem;
 }