Fixing bigs in macros

docs/src/assets/styles.css

@@ -7,6 +7,7 @@
   :root, :host {
     --font-sans: 'Geist';
     --font-mono: 'Geist Mono';
+    --color-red-500: oklch(63.7% 0.237 25.331);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-900: oklch(41.4% 0.112 45.904);
@@ -21,6 +22,13 @@
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-blue-900: oklch(37.9% 0.146 265.522);
     --color-blue-950: oklch(28.2% 0.091 267.935);
+    --color-indigo-50: oklch(96.2% 0.018 272.314);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-indigo-600: oklch(51.1% 0.262 276.966);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-zinc-50: oklch(98.5% 0 0);
     --color-zinc-700: oklch(37% 0.013 285.805);
     --color-neutral-900: oklch(20.5% 0 0);
@@ -280,6 +288,9 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -295,6 +306,12 @@
   .right-3 {
     right: calc(var(--spacing) * 3);
   }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
   .left-2 {
     left: calc(var(--spacing) * 2);
   }
@@ -334,9 +351,21 @@
   .my-6 {
     margin-block: calc(var(--spacing) * 6);
   }
+  .my-auto {
+    margin-block: auto;
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
@@ -398,6 +427,10 @@
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
   }
+  .size-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+    height: calc(var(--spacing) * 2.5);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -406,6 +439,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-7 {
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -444,9 +481,18 @@
   .h-14 {
     height: calc(var(--spacing) * 14);
   }
+  .h-full {
+    height: 100%;
+  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-\[150px\] {
+    max-height: 150px;
+  }
+  .max-h-\[200px\] {
+    max-height: 200px;
+  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
@@ -480,6 +526,9 @@
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
+  .w-96 {
+    width: calc(var(--spacing) * 96);
+  }
   .w-\[100px\] {
     width: 100px;
   }
@@ -534,12 +583,19 @@
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-\[8rem\] {
+    min-width: 8rem;
+  }
   .flex-1 {
     flex: 1;
   }
   .shrink-0 {
     flex-shrink: 0;
   }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -548,6 +604,9 @@
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -572,6 +631,9 @@
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -626,6 +688,13 @@
   .gap-10 {
     gap: calc(var(--spacing) * 10);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -647,6 +716,9 @@
       margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-1\.5 {
+    column-gap: calc(var(--spacing) * 1.5);
+  }
   .gap-x-2 {
     column-gap: calc(var(--spacing) * 2);
   }
@@ -687,6 +759,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  .overflow-hidden {
+    overflow: hidden;
+  }
   .overflow-x-auto {
     overflow-x: auto;
   }
@@ -696,6 +771,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\[2px\] {
+    border-radius: 2px;
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -730,6 +808,12 @@
   .border-amber-50 {
     border-color: var(--color-amber-50);
   }
+  .border-border\/50 {
+    border-color: var(--color-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 50%, transparent);
+    }
+  }
   .border-muted {
     border-color: var(--color-muted);
   }
@@ -751,15 +835,27 @@
   .bg-foreground {
     background-color: var(--color-foreground);
   }
+  .bg-indigo-50 {
+    background-color: var(--color-indigo-50);
+  }
+  .bg-indigo-600 {
+    background-color: var(--color-indigo-600);
+  }
   .bg-muted {
     background-color: var(--color-muted);
   }
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
   .bg-sidebar-primary {
     background-color: var(--color-sidebar-primary);
   }
+  .bg-white {
+    background-color: var(--color-white);
+  }
   .object-cover {
     object-fit: cover;
   }
@@ -817,6 +913,9 @@
   .pt-2 {
     padding-top: calc(var(--spacing) * 2);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -923,6 +1022,12 @@
   .text-foreground {
     color: var(--color-foreground);
   }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-indigo-400 {
+    color: var(--color-indigo-400);
+  }
   .text-muted-foreground {
     color: var(--color-muted-foreground);
   }
@@ -932,6 +1037,9 @@
   .text-sidebar-primary-foreground {
     color: var(--color-sidebar-primary-foreground);
   }
+  .text-white {
+    color: var(--color-white);
+  }
   .text-zinc-50 {
     color: var(--color-zinc-50);
   }
@@ -948,16 +1056,33 @@
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-1 {
+    opacity: 1%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-60 {
     opacity: 60%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow-none {
     --tw-shadow: 0 0 #0000;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-xs {
     --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -987,10 +1112,28 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .\[transition-behavior\:allow-discrete\] {
+    transition-behavior: allow-discrete;
+  }
+  .transition-discrete {
+    transition-behavior: allow-discrete;
+  }
   .duration-200 {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-400 {
+    --tw-duration: 400ms;
+    transition-duration: 400ms;
+  }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -1092,6 +1235,13 @@
       }
     }
   }
+  .hover\:bg-indigo-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-indigo-500);
+      }
+    }
+  }
   .hover\:bg-muted {
     &:hover {
       @media (hover: hover) {
@@ -1182,6 +1332,28 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .focus-visible\:outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\:outline-indigo-600 {
+    &:focus-visible {
+      outline-color: var(--color-indigo-600);
+    }
+  }
   .focus-visible\:outline-none {
     &:focus-visible {
       --tw-outline-style: none;
@@ -1223,6 +1395,26 @@
       flex-direction: column;
     }
   }
+  .sm\:col-start-2 {
+    @media (width >= 40rem) {
+      grid-column-start: 2;
+    }
+  }
+  .sm\:mt-5 {
+    @media (width >= 40rem) {
+      margin-top: calc(var(--spacing) * 5);
+    }
+  }
+  .sm\:w-full {
+    @media (width >= 40rem) {
+      width: 100%;
+    }
+  }
+  .sm\:max-w-96 {
+    @media (width >= 40rem) {
+      max-width: calc(var(--spacing) * 96);
+    }
+  }
   .sm\:max-w-\[425px\] {
     @media (width >= 40rem) {
       max-width: 425px;
@@ -1233,6 +1425,11 @@
       gap: calc(var(--spacing) * 2.5);
     }
   }
+  .sm\:p-6 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 6);
+    }
+  }
   .sm\:text-3xl {
     @media (width >= 40rem) {
       font-size: var(--text-3xl);
@@ -1317,11 +1514,34 @@
       background-color: var(--color-amber-950);
     }
   }
+  .dark\:bg-gray-800 {
+    &:is(.dark *) {
+      background-color: var(--color-gray-800);
+    }
+  }
+  .dark\:bg-indigo-600\/10 {
+    &:is(.dark *) {
+      background-color: color-mix(in srgb, oklch(51.1% 0.262 276.966) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-indigo-600) 10%, transparent);
+      }
+    }
+  }
   .dark\:text-amber-100 {
     &:is(.dark *) {
       color: var(--color-amber-100);
     }
   }
+  .dark\:text-gray-200 {
+    &:is(.dark *) {
+      color: var(--color-gray-200);
+    }
+  }
+  .dark\:text-indigo-600 {
+    &:is(.dark *) {
+      color: var(--color-indigo-600);
+    }
+  }
   .dark\:checked\:border-blue-700 {
     &:is(.dark *) {
       &:checked {
@@ -1413,6 +1633,13 @@
       }
     }
   }
+  .starting\:open\:opacity-0 {
+    @starting-style {
+      &:is([open], :popover-open, :open) {
+        opacity: 0%;
+      }
+    }
+  }
   .\[\&_a\]\:inline-block {
     & a {
       display: inline-block;
@@ -1577,6 +1804,11 @@
       }
     }
   }
+  .\[\&\:is\(\[open\]\,\:popover-open\)\]\:opacity-100 {
+    &:is([open],:popover-open) {
+      opacity: 100%;
+    }
+  }
   .\[\&\>\[role\=img\]\]\:size-4 {
     &>[role=img] {
       width: calc(var(--spacing) * 4);
@@ -1616,6 +1848,13 @@
       flex-shrink: 0;
     }
   }
+  .\[\@starting-style\]\:\[\&\:is\(\[open\]\,\:popover-open\)\]\:opacity-0 {
+    @starting-style {
+      &:is([open],:popover-open) {
+        opacity: 0%;
+      }
+    }
+  }
 }
 :root {
   --radius: 0.625rem;
@@ -4619,6 +4858,26 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-space-y-reverse {
   syntax: "*";
   inherits: false;
@@ -4793,15 +5052,15 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
   inherits: false;
 }
-@property --tw-ease {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -4833,6 +5092,11 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
@@ -4873,8 +5137,8 @@
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
       --tw-duration: initial;
-      --tw-content: "";
       --tw-ease: initial;
+      --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;
       --tw-scale-z: 1;

docs/src/components/chart.njk

@@ -782,9 +782,9 @@ const doughnutData = {
     data: chartDataDoughnut.map(d => d.visitors),
     backgroundColor: chartDataDoughnut.map(d => d.fill),
     borderColor: themeColors.background, // Use background for border
-    borderWidth: 2, // Add border between segments
+    borderWidth: 0, // Add border between segments
     hoverBorderColor: themeColors.background,
-    hoverBorderWidth: 2
+    hoverBorderWidth: 0
   }]
 };
 
@@ -793,7 +793,7 @@ const doughnutConfig = {
   type: 'doughnut',
   data: doughnutData,
   options: {
-    cutout: '50%', // Adjust hole size
+    cutout: '70%', // Adjust hole size
     plugins: {
       legend: {
         display: false, // Hide default legend

src/jinja/dialog.html.jinja

@@ -75,7 +75,7 @@
           {% endfor %}
         >
           <h2 id="{{ id }}-title">{{ title | safe }}</h2>
-          <p>{{ description | safe }}</p>
+          {% if description %}<p>{{ description | safe }}</p>{% endif %}
         </header>
       {% endif %}
       {% if caller %}

src/jinja/dropdown-menu.html.jinja

@@ -21,7 +21,7 @@
   x-data="dropdownMenu"
   @click.away="open = false"
   {% if id %}id="{{ id }}"{% endif %}
-  {% for key, value in main_attrs %}
+  {% for key, value in main_attrs.items() %}
     {% if key != "class" %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
@@ -35,7 +35,7 @@
     id="{{ id }}-trigger"
     aria-controls="{{ id }}-menu"
     {% endif %}
-    {% for key, value in trigger_attrs %}
+    {% for key, value in trigger_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >
@@ -47,7 +47,7 @@
     aria-hidden="true"
     x-bind="$content"
     {% if id %}id="{{ id }}-menu"{% endif %}
-    {% for key, value in content_attrs %}
+    {% for key, value in content_attrs.items() %}
       {{ key }}="{{ value }}"
     {% endfor %}
   >

src/jinja/select.html.jinja

@@ -4,6 +4,7 @@
   @param id {string} [optional] - Unique identifier for the select component.
   @param selected {string} [optional] - The initially selected value.
   @param name {string} [optional] - The name attribute for the hidden input storing the selected value.
+  @param items {array} [optional] - An array of items (objects with type, label, value, attrs, and items) to render.
   @param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
   @param trigger_attrs {object} [optional] - Additional HTML attributes for the trigger button.
   @param content_attrs {object} [optional] - Additional HTML attributes for the popover content div.

src/jinja/toast.html.jinja

@@ -10,7 +10,7 @@
 {% macro toaster(
   id="toaster",
   toasts=[],
-  main_attrs=None,
+  main_attrs={},
   is_fragment=False
 ) %}
 <div
@@ -21,7 +21,7 @@
   {% endfor %}
   {% if is_fragment %}hx-swap-oob="beforeend"{% endif %}
 >
-{% for item in toasts.items() %}
+{% for item in toasts %}
   {{ toast(
     category=item.category,
     title=item.title,

src/js/select.js

@@ -2,9 +2,8 @@ window.basecoat = window.basecoat || {};
 window.basecoat.registerSelect = function(Alpine) {
   if (Alpine.components && Alpine.components.select) return;
   
-  Alpine.data('select', (name = null, initialValue = null) => ({
+  Alpine.data('select', (initialValue = null) => ({
     open: false,
-    name: null,
     options: [],
     disabledOptions: [],
     focusedIndex: null,
@@ -14,7 +13,6 @@ window.basecoat.registerSelect = function(Alpine) {
     
     init() {
       this.$nextTick(() => {
-        if (name) this.name = name;
         this.options = Array.from(this.$el.querySelectorAll('[role=option]:not([aria-disabled])'));
         this.disabledOptions = Array.from(this.$el.querySelectorAll('[role=option][aria-disabled=true]'));
         if (this.options.length === 0) return;
@@ -79,6 +77,14 @@ window.basecoat.registerSelect = function(Alpine) {
       this.selectOption(this.options[this.focusedIndex]);
       this.open = !this.open;
     },
+    selectValue(value, dispatch = true) {
+      if (this.options.length === 0 || value == null) return;
+      
+      const option = this.options.find(opt => opt.getAttribute('data-value') === String(value));
+      if (option) {
+        this.selectOption(option, dispatch);
+      }
+    },
     selectOption(option, dispatch = true) {
       if (this.options.length === 0 || !option || option.disabled || option.getAttribute('data-value') == null) {
         return;

src/nunjucks/dialog.njk

@@ -75,7 +75,7 @@
           {% endfor %}
         >
           <h2 id="{{ id }}-title">{{ title | safe }}</h2>
-          <p>{{ description | safe }}</p>
+          {% if description %}<p>{{ description | safe }}</p>{% endif %}
         </header>
       {% endif %}
       {% if caller %}