updated templater library; added accordion component

styles/index.css

@@ -9,6 +9,7 @@
       "Courier New", monospace;
     --color-black: #000;
     --color-white: #fff;
+    --spacing: 0.25rem;
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --text-lg: 1.125rem;
@@ -187,6 +188,44 @@
   .static {
     position: static;
   }
+  .sticky {
+    position: sticky;
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-1 {
+    bottom: calc(var(--spacing) * 1);
+  }
+  .bottom-\[-1px\] {
+    bottom: -1px;
+  }
+  .grid-table-6 {
+    &:is(table) {
+      display: grid;
+      grid-template-columns: repeat(6, auto);
+      & > :is(thead, tbody, tfoot) {
+        grid-column-start: 1;
+        grid-column-end: -1;
+        display: grid;
+        grid-template-columns: subgrid;
+        & > tr {
+          grid-column-start: 1;
+          grid-column-end: -1;
+          display: grid;
+          grid-template-columns: subgrid;
+          & > th, & > td {
+            grid-column: span 1;
+            align-content: center;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
   .col-2 {
     grid-column: 2;
   }
@@ -238,9 +277,6 @@
   .my-\[0\.5em\] {
     margin-block: 0.5em;
   }
-  .my-\[1em\] {
-    margin-block: 1em;
-  }
   .my-\[1rem\] {
     margin-block: 1rem;
   }
@@ -298,6 +334,15 @@
   .h-fit {
     height: fit-content;
   }
+  .max-h-\[10em\] {
+    max-height: 10em;
+  }
+  .max-h-\[50em\] {
+    max-height: 50em;
+  }
+  .max-h-\[50vh\] {
+    max-height: 50vh;
+  }
   .max-h-\[80vh\] {
     max-height: 80vh;
   }
@@ -471,14 +516,17 @@
   .p-\[1em\] {
     padding: 1em;
   }
+  .px-\[1em\] {
+    padding-inline: 1em;
+  }
   .px-\[2em\] {
     padding-inline: 2em;
   }
   .py-\[0\.5em\] {
     padding-block: 0.5em;
   }
-  .py-\[2em\] {
-    padding-block: 2em;
+  .py-\[1em\] {
+    padding-block: 1em;
   }
   .pt-\[1em\] {
     padding-top: 1em;
@@ -533,6 +581,16 @@
   .underline {
     text-decoration-line: underline;
   }
+  .opacity-\[0\.8\] {
+    opacity: 0.8;
+  }
+  .outline-1 {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .outline-\(--table-tfoot\) {
+    outline-color: var(--table-tfoot);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -546,8 +604,12 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .group-open\:mb-\[1em\] {
-    &:is(:where(.group):is([open], :popover-open, :open) *) {
+  .outline-solid {
+    --tw-outline-style: solid;
+    outline-style: solid;
+  }
+  .not-open\:mb-\[1em\] {
+    &:not(*:is([open], :popover-open, :open)) {
       margin-bottom: 1em;
     }
   }
@@ -577,6 +639,11 @@
       display: flex;
     }
   }
+  .details-content\:max-w-full {
+    &::details-content {
+      max-width: 100%;
+    }
+  }
   .details-content\:transform-\[translate\(0px\,-2em\)\] {
     &::details-content {
       transform: translate(0px,-2em);
@@ -597,6 +664,16 @@
       border-color: transparent;
     }
   }
+  .details-content\:p-\[1em\] {
+    &::details-content {
+      padding: 1em;
+    }
+  }
+  .details-content\:px-\[1em\] {
+    &::details-content {
+      padding-inline: 1em;
+    }
+  }
   .details-content\:opacity-\[0\] {
     &::details-content {
       opacity: 0;
@@ -614,6 +691,18 @@
       transition-duration: var(--tw-duration, var(--default-transition-duration));
     }
   }
+  .after\:absolute {
+    &::after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+  }
+  .after\:right-\[0\.5em\] {
+    &::after {
+      content: var(--tw-content);
+      right: 0.5em;
+    }
+  }
   .after\:float-right {
     &::after {
       content: var(--tw-content);
@@ -654,11 +743,24 @@
       }
     }
   }
+  .group-open\/sync-group\:after\:content-\[\'-\'\] {
+    &:is(:where(.group\/sync-group):is([open], :popover-open, :open) *) {
+      &::after {
+        --tw-content: '-';
+        content: var(--tw-content);
+      }
+    }
+  }
   .open\:grid {
     &:is([open], :popover-open, :open) {
       display: grid;
     }
   }
+  .open\:bg-card {
+    &:is([open], :popover-open, :open) {
+      background-color: var(--card);
+    }
+  }
   .open\:details-content\:transform-\[translate\(0px\,0px\)\] {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -719,6 +821,13 @@
       }
     }
   }
+  .open\:details-content\:p-\[1em\] {
+    &:is([open], :popover-open, :open) {
+      &::details-content {
+        padding: 1em;
+      }
+    }
+  }
   .open\:details-content\:opacity-\[1\] {
     &:is([open], :popover-open, :open) {
       &::details-content {
@@ -1097,6 +1206,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1204,6 +1318,7 @@
     *, ::before, ::after, ::backdrop {
       --tw-border-style: solid;
       --tw-font-weight: initial;
+      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

styles/source.css

@@ -15,3 +15,5 @@
 @import "./svg.css";
 @import "./accessibility.css";
 @import "./components.css";
+@source inline("group-open/sync-group:after:content-['-']");
+@source inline("not-open:mb-[1em]");

styles/tables.css

@@ -0,0 +1,26 @@
+@utility grid-table-* {
+	&:is(table) {
+		display: grid;
+		grid-template-columns: repeat(--value(integer), auto);
+
+		& > :is(thead, tbody, tfoot) {
+			grid-column-start: 1;
+			grid-column-end: -1;
+			display: grid;
+			grid-template-columns: subgrid;
+
+			& > tr {
+				grid-column-start: 1;
+				grid-column-end: -1;
+				display: grid;
+				grid-template-columns: subgrid;
+
+				& > th, & > td {
+					grid-column: span 1;
+					align-content: center;
+					text-align: center;
+				}
+			}
+		}
+	}
+}