@kompasid/lit-web-components 0.5.0 → 0.5.1

package/src/components/kompasid-freewall-head/KompasFreewallHead.ts

@@ -61,11 +61,15 @@ export class KompasFreewallHead extends LitElement {
 
   render() {
     return html`
-      <div class="flex flex-col px-4 md:px-0 space-y-4">
+      <div class="flex flex-col px-4 md:px-0 space-y-4 pt-4 pb-5 md:py-2">
         <div class="flex justify-between items-center h-full space-x-3">
-          <div class="hidden md:block"></div>
+          <div
+            class="hidden ${this.expand ? 'md:block' : 'lg:block'} w-9 h-9"
+          ></div>
           <div class="flex items-center md:justify-start space-x-3">
-            <p class="w-[280px] md:w-full">${this.headCopy}</p>
+            <p class="max-w-[280px] md:max-w-full text-grey-600">
+              ${this.headCopy}
+            </p>
             ${!this.expand
               ? html`<button
                   @click=${this.onSubscriptionClick}
@@ -79,6 +83,7 @@ export class KompasFreewallHead extends LitElement {
           <div>
             <button
               @click=${this.toggleExpand}
+              aria-label="Toggle Expand"
               class="h-9 w-9 flex items-center justify-center text-blue-500 rounded bg-blue-200"
             >
               <div class="${!this.expand && 'rotate-180'}">

package/tailwind/tailwind.css

@@ -656,6 +656,10 @@ video {
   margin-bottom: 0.5rem;
 }
 
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
 .ml-0 {
   margin-left: 0px;
 }
@@ -760,18 +764,6 @@ video {
   height: 2.25rem;
 }
 
-.h-\[159px\] {
-  height: 159px;
-}
-
-.h-\[223px\] {
-  height: 223px;
-}
-
-.h-\[277px\] {
-  height: 277px;
-}
-
 .h-auto {
   height: auto;
 }
@@ -832,10 +824,6 @@ video {
   width: 138px;
 }
 
-.w-\[250px\] {
-  width: 250px;
-}
-
 .w-\[296px\] {
   width: 296px;
 }
@@ -852,14 +840,14 @@ video {
   width: 100%;
 }
 
-.w-\[280px\] {
-  width: 280px;
-}
-
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-\[280px\] {
+  max-width: 280px;
+}
+
 .max-w-screen-md {
   max-width: 768px;
 }
@@ -1069,9 +1057,9 @@ video {
   border-color: rgb(147 200 253 / var(--tw-border-opacity));
 }
 
-.border-blue-600 {
+.border-brand-1 {
   --tw-border-opacity: 1;
-  border-color: rgb(3 86 168 / var(--tw-border-opacity));
+  border-color: rgb(0 85 154 / var(--tw-border-opacity));
 }
 
 .border-dark-6 {
@@ -1300,6 +1288,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1340,10 +1332,18 @@ video {
   padding-top: 2.5rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .pt-6 {
   padding-top: 1.5rem;
 }
 
+.pt-\[5px\] {
+  padding-top: 5px;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1519,11 +1519,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-green-100 {
-  --tw-text-opacity: 1;
-  color: rgb(238 252 210 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1555,6 +1550,10 @@ video {
     margin-bottom: 0px;
   }
 
+  .md\:mb-5 {
+    margin-bottom: 1.25rem;
+  }
+
   .md\:ml-1 {
     margin-left: 0.25rem;
   }
@@ -1591,12 +1590,8 @@ video {
     height: 3rem;
   }
 
-  .md\:h-\[210px\] {
-    height: 210px;
-  }
-
-  .md\:h-\[240px\] {
-    height: 240px;
+  .md\:min-h-\[244px\] {
+    min-height: 244px;
   }
 
   .md\:w-3\/5 {
@@ -1635,6 +1630,10 @@ video {
     width: 100%;
   }
 
+  .md\:max-w-full {
+    max-width: 100%;
+  }
+
   .md\:max-w-sm {
     max-width: 24rem;
   }
@@ -1690,16 +1689,16 @@ video {
     padding-right: 0px;
   }
 
-  .md\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:px-20 {
     padding-left: 5rem;
     padding-right: 5rem;
   }
 
+  .md\:px-4 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
   .md\:px-5 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;
@@ -1710,6 +1709,11 @@ video {
     padding-right: 1.5rem;
   }
 
+  .md\:py-2 {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+
   .md\:py-6 {
     padding-top: 1.5rem;
     padding-bottom: 1.5rem;
@@ -1719,6 +1723,10 @@ video {
     padding-bottom: 1rem;
   }
 
+  .md\:pb-7 {
+    padding-bottom: 1.75rem;
+  }
+
   .md\:pt-3 {
     padding-top: 0.75rem;
   }
@@ -1794,10 +1802,6 @@ video {
     margin-top: 0.5rem;
   }
 
-  .lg\:mt-3 {
-    margin-top: 0.75rem;
-  }
-
   .lg\:block {
     display: block;
   }
@@ -1810,6 +1814,10 @@ video {
     display: none;
   }
 
+  .lg\:min-h-\[220px\] {
+    min-height: 220px;
+  }
+
   .lg\:w-\[410px\] {
     width: 410px;
   }

package/tailwind/tailwind.ts

@@ -666,6 +666,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     margin-bottom: 0.5rem;
   }
 
+  .mb-4 {
+    margin-bottom: 1rem;
+  }
+
   .ml-0 {
     margin-left: 0px;
   }
@@ -770,18 +774,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     height: 2.25rem;
   }
 
-  .h-\\[159px\\] {
-    height: 159px;
-  }
-
-  .h-\\[223px\\] {
-    height: 223px;
-  }
-
-  .h-\\[277px\\] {
-    height: 277px;
-  }
-
   .h-auto {
     height: auto;
   }
@@ -842,10 +834,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 138px;
   }
 
-  .w-\\[250px\\] {
-    width: 250px;
-  }
-
   .w-\\[296px\\] {
     width: 296px;
   }
@@ -862,14 +850,14 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     width: 100%;
   }
 
-  .w-\\[280px\\] {
-    width: 280px;
-  }
-
   .max-w-7xl {
     max-width: 80rem;
   }
 
+  .max-w-\\[280px\\] {
+    max-width: 280px;
+  }
+
   .max-w-screen-md {
     max-width: 768px;
   }
@@ -1083,9 +1071,9 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     border-color: rgb(147 200 253 / var(--tw-border-opacity));
   }
 
-  .border-blue-600 {
+  .border-brand-1 {
     --tw-border-opacity: 1;
-    border-color: rgb(3 86 168 / var(--tw-border-opacity));
+    border-color: rgb(0 85 154 / var(--tw-border-opacity));
   }
 
   .border-dark-6 {
@@ -1314,6 +1302,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-bottom: 1rem;
   }
 
+  .pb-5 {
+    padding-bottom: 1.25rem;
+  }
+
   .pb-6 {
     padding-bottom: 1.5rem;
   }
@@ -1354,10 +1346,18 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     padding-top: 2.5rem;
   }
 
+  .pt-4 {
+    padding-top: 1rem;
+  }
+
   .pt-6 {
     padding-top: 1.5rem;
   }
 
+  .pt-\\[5px\\] {
+    padding-top: 5px;
+  }
+
   .text-left {
     text-align: left;
   }
@@ -1533,11 +1533,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
-  .text-green-100 {
-    --tw-text-opacity: 1;
-    color: rgb(238 252 210 / var(--tw-text-opacity));
-  }
-
   .underline {
     text-decoration-line: underline;
   }
@@ -1570,6 +1565,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-bottom: 0px;
     }
 
+    .md\\:mb-5 {
+      margin-bottom: 1.25rem;
+    }
+
     .md\\:ml-1 {
       margin-left: 0.25rem;
     }
@@ -1606,12 +1605,8 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       height: 3rem;
     }
 
-    .md\\:h-\\[210px\\] {
-      height: 210px;
-    }
-
-    .md\\:h-\\[240px\\] {
-      height: 240px;
+    .md\\:min-h-\\[244px\\] {
+      min-height: 244px;
     }
 
     .md\\:w-3\\/5 {
@@ -1650,6 +1645,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       width: 100%;
     }
 
+    .md\\:max-w-full {
+      max-width: 100%;
+    }
+
     .md\\:max-w-sm {
       max-width: 24rem;
     }
@@ -1705,16 +1704,16 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 0px;
     }
 
-    .md\\:px-12 {
-      padding-left: 3rem;
-      padding-right: 3rem;
-    }
-
     .md\\:px-20 {
       padding-left: 5rem;
       padding-right: 5rem;
     }
 
+    .md\\:px-4 {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
     .md\\:px-5 {
       padding-left: 1.25rem;
       padding-right: 1.25rem;
@@ -1725,6 +1724,11 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-right: 1.5rem;
     }
 
+    .md\\:py-2 {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
     .md\\:py-6 {
       padding-top: 1.5rem;
       padding-bottom: 1.5rem;
@@ -1734,6 +1738,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       padding-bottom: 1rem;
     }
 
+    .md\\:pb-7 {
+      padding-bottom: 1.75rem;
+    }
+
     .md\\:pt-3 {
       padding-top: 0.75rem;
     }
@@ -1809,10 +1817,6 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       margin-top: 0.5rem;
     }
 
-    .lg\\:mt-3 {
-      margin-top: 0.75rem;
-    }
-
     .lg\\:block {
       display: block;
     }
@@ -1825,6 +1829,10 @@ Constrain images and videos to the parent width and preserve their intrinsic asp
       display: none;
     }
 
+    .lg\\:min-h-\\[220px\\] {
+      min-height: 220px;
+    }
+
     .lg\\:w-\\[410px\\] {
       width: 410px;
     }