website_next: part 9

website_next/legend/index.js

@@ -34,6 +34,7 @@ export function createLegendItem(args) {
  * @param {Object} [args]
  * @param {boolean} [args.fill]
  * @param {boolean} [args.scroll]
+ * @param {boolean} [args.tight]
  */
 export function createLegendList(args = {}) {
   const list = document.createElement("menu");
@@ -41,6 +42,7 @@ export function createLegendList(args = {}) {
   list.dataset.legendList = "";
   if (args.fill) list.dataset.legendFill = "";
   if (args.scroll) list.dataset.legendScroll = "";
+  if (args.tight) list.dataset.legendTight = "";
 
   return list;
 }

website_next/legend/style.css

@@ -9,6 +9,10 @@
     overflow-x: auto;
   }
 
+  &[data-legend-tight] {
+    padding-block: 0 0.25rem;
+  }
+
   &[data-legend-fill] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(8.5ch, 1fr));
@@ -30,6 +34,7 @@
       overflow-wrap: anywhere;
     }
   }
+
 }
 
 [data-legend-item] {
@@ -86,6 +91,7 @@
     display: block;
     color: var(--color);
     text-align: left;
+    white-space: nowrap;
 
     &::before {
       content: "";