Minor fixes

dist/basecoat.css

@@ -8,7 +8,6 @@
     --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-500: oklch(76.9% 0.188 70.08);
     --color-amber-900: oklch(41.4% 0.112 45.904);
     --color-amber-950: oklch(27.9% 0.077 45.635);
     --color-green-50: oklch(98.2% 0.018 155.826);
@@ -16,14 +15,12 @@
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-900: oklch(39.3% 0.095 152.535);
     --color-green-950: oklch(26.6% 0.065 152.934);
-    --color-cyan-500: oklch(71.5% 0.143 215.221);
     --color-blue-50: oklch(97% 0.014 254.604);
     --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-blue-600: oklch(54.6% 0.245 262.881);
     --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-fuchsia-500: oklch(66.7% 0.295 322.15);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -383,9 +380,18 @@
   .h-svh {
     height: 100svh;
   }
+  .max-h-24 {
+    max-height: calc(var(--spacing) * 24);
+  }
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
+  .max-h-\[200px\] {
+    max-height: 200px;
+  }
   .max-h-\[612px\] {
     max-height: 612px;
   }
@@ -424,6 +430,9 @@
   .w-\[150px\] {
     width: 150px;
   }
+  .w-\[180px\] {
+    width: 180px;
+  }
   .w-\[var\(--sidebar-width\)\] {
     width: var(--sidebar-width);
   }
@@ -433,6 +442,9 @@
   .max-w-\[300px\] {
     max-width: 300px;
   }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
   .max-w-sm {
     max-width: var(--container-sm);
   }
@@ -604,18 +616,9 @@
   .bg-amber-50 {
     background-color: var(--color-amber-50);
   }
-  .bg-amber-500 {
-    background-color: var(--color-amber-500);
-  }
   .bg-background {
     background-color: var(--color-background);
   }
-  .bg-cyan-500 {
-    background-color: var(--color-cyan-500);
-  }
-  .bg-fuchsia-500 {
-    background-color: var(--color-fuchsia-500);
-  }
   .bg-muted {
     background-color: var(--color-muted);
   }
@@ -625,37 +628,6 @@
   .bg-sidebar-primary {
     background-color: var(--color-sidebar-primary);
   }
-  .bg-linear-to-bl {
-    --tw-gradient-position: to bottom left;
-    @supports (background-image: linear-gradient(in lab, red, red)) {
-      --tw-gradient-position: to bottom left in oklab;
-    }
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
-  .from-amber-500 {
-    --tw-gradient-from: var(--color-amber-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-cyan-500 {
-    --tw-gradient-from: var(--color-cyan-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .from-fuchsia-500 {
-    --tw-gradient-from: var(--color-fuchsia-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-amber-500 {
-    --tw-gradient-to: var(--color-amber-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-cyan-500 {
-    --tw-gradient-to: var(--color-cyan-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
-  .to-fuchsia-500 {
-    --tw-gradient-to: var(--color-fuchsia-500);
-    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
-  }
   .object-cover {
     object-fit: cover;
   }
@@ -2525,7 +2497,7 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        padding-block: calc(var(--spacing) * 6);
+        padding: calc(var(--spacing) * 6);
         font-size: var(--text-sm);
         line-height: var(--tw-leading, var(--text-sm--line-height));
       }
@@ -3461,48 +3433,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -3705,15 +3635,6 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;

dist/basecoat.tailwind.css

@@ -521,7 +521,7 @@
     @apply relative inline-flex;
 
     > [data-popover] {
-      @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md z-50 w-max visible opacity-100 scale-100 min-w-full w-max transition-all;
+      @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;
 
       &[aria-hidden='true'] {
         @apply invisible opacity-0 scale-95;
@@ -620,7 +620,7 @@
 
       /* Combobox */
       [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
-        @apply flex items-center justify-center py-6 text-sm truncate;
+        @apply flex items-center justify-center p-6 text-sm truncate;
       }
       [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
         @apply content-[attr(data-empty)];

docs/_includes/components/dialog.njk

@@ -65,7 +65,7 @@
       $content: {
         ':inert'() { return !this.open },
         '@click'(e) { e.target === this.$el && this.closeOnOverlayClick && this.hide() },
-        '@keydown.escape.window'() { this.open && this.hide() },
+        '@keydown.escape.prevent'() { this.open && this.hide() },
         'x-cloak': ''
       }
     }));
@@ -123,7 +123,7 @@
             {{ key }}="{{ value }}"
           {% endfor %}
         >
-          {{ caller() }}
+          {% if caller %}{{ caller() }}{% endif %}
         </section>
       {% endif %}
       {% if footer %}

docs/_includes/components/popover.njk

@@ -75,7 +75,7 @@
       
       $content: {
         '@click'(e) { this.handleNavItemClick(e) },
-        '@keydown.escape.window'() { this.handleEscape() },
+        '@keydown.escape.prevent'() { this.handleEscape() },
         '@keydown.down.prevent'() { this.nextNavItem() },
         '@keydown.up.prevent'() { this.prevNavItem() },
         '@keydown.home.prevent'() { this.focusNavItem(0) },
@@ -123,7 +123,7 @@
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {{ caller() }}
+    {% if caller %}{{ caller() }}{% endif %}
   </div>
 </div>
 {% endmacro %}

docs/_includes/components/select.njk

@@ -118,7 +118,7 @@
 
       $trigger: {
         '@click'() { this.open = !this.open; this.focusOnSelectedOption(); },
-        '@keydown.escape.window'() {
+        '@keydown.escape.prevent'() {
           this.open = false;
           this.$refs.trigger.focus();
         },
@@ -156,7 +156,7 @@
   x-data="select('{{ name }}', '{{ selected }}')"
   @click.away="open = false"
   {% if id %}id="{{ id }}"{% endif %}
-  {% for key, value in trigger_attrs %}
+  {% for key, value in main_attrs %}
     {% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
   {% endfor %}
 >
@@ -214,7 +214,7 @@
         {{ key }}="{{ value }}"
       {% endfor %}
     >
-      {{ caller() }}
+      {% if caller %}{{ caller() }}{% endif %}
     </div>
   </div>
   {% if name %}

docs/_includes/components/tabs.njk

@@ -29,7 +29,7 @@
       
       $menu: {
         '@click'(e) { this.handleMenuItemClick(e) },
-        '@keydown.escape.window'() { this.handleEscape() },
+        '@keydown.escape.prevent'() { this.handleEscape() },
         '@keydown.down.prevent'() { this.nextItem() },
         '@keydown.up.prevent'() { this.prevItem() },
         '@keydown.home.prevent'() { this.focusItem(0) },
@@ -113,7 +113,7 @@
       {{ key }}="{{ value }}"
     {% endfor %}
   >
-    {{ caller() }}
+    {% if caller %}{{ caller() }}{% endif %}
   </nav>
 </div>
 {% endmacro %}

docs/_includes/components/toast.njk

@@ -44,7 +44,7 @@
       $toast: {
         ['@mouseenter']() { this.$store.toaster.isPaused = true },
         ['@mouseleave']() { this.$store.toaster.isPaused = false },
-        ['@keydown.escape.window']() { this.close() },
+        ['@keydown.escape.prevent']() { this.close() },
       },
     }));
   });

docs/_includes/partials/checkbox.njk

@@ -3,7 +3,7 @@
     <h2 class="text-sm font-medium">Checkbox</h2>
   </header>
   <div class="p-4">
-    <div class="flex flex-col gap-6">
+    <div class="flex flex-col gap-6 max-w-lg">
       <label class="label gap-3">
         <input type="checkbox" class="input">
         Accept terms and conditions
@@ -22,8 +22,8 @@
       <label class="flex items-start gap-3 border p-3 hover:bg-accent/50 rounded-lg has-[input[type='checkbox']:checked]:border-blue-600 has-[input[type='checkbox']:checked]:bg-blue-50 dark:has-[input[type='checkbox']:checked]:border-blue-900 dark:has-[input[type='checkbox']:checked]:bg-blue-950">
         <input type="checkbox" class="input checked:bg-blue-600 checked:border-blue-600 dark:checked:bg-blue-700 dark:checked:border-blue-700 checked:after:bg-white" checked>
         <div class="grid gap-2">
-          <h2 class="text-sm leading-none font-medium">Accept terms and conditions</h2>
-          <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
+          <h2 class="text-sm leading-none font-medium">Enable notifications</h2>
+          <p class="text-muted-foreground text-sm">You can enable or disable notifications at any time.</p>
         </div>
       </label>
     </div>

docs/_includes/partials/select.njk

@@ -2,55 +2,69 @@
   <header class="border-b px-4 py-3">
     <h2 class="text-sm font-medium">Select</h2>
   </header>
-  <div class="p-4">
-    <div class="flex flex-wrap items-center gap-4">
-      <select class="select">
-        <optgroup label="Colors">
-          <option>Fuchsia</option>
-          <option selected>Cyan</option>
-          <option>Amber</option>
-        </optgroup>
-        <optgroup label="Gradients">
-          <option>Fuchsia to Cyan</option>
-          <option>Cyan to Amber</option>
-          <option>Amber to Fuchsia</option>
-        </optgroup>
-      </select>
+  <div class="p-4 gap">
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-wrap items-center gap-2 md:flex-row">
+        <select class="select w-[180px]">
+          <optgroup label="Fruits">
+            <option>Apple</option>
+            <option>Banana</option>
+            <option>Blueberry</option>
+          </optgroup>
+          <optgroup label="Grapes">
+            <option>Pineapple</option>
+          </optgroup>
+        </select>
+        <select class="select w-[180px]" disabled>
+          <option>Disabled</option>
+        </select>
+      </div>
 
-      {% call select(
-        selected="cyan"
-      ) %}
-      
-      <div role="group" aria-labelledby="fruit-options-label">
-        <span id="fruit-options-label" role="heading">Colors</span>
-        <div type="button" role="option" data-value="fuchsia">
-          <span class="rounded-full size-4 bg-fuchsia-500"></span>
-          Fuchsia
-        </div>
-        <div type="button" role="option" data-value="cyan">
-          <span class="rounded-full size-4 bg-cyan-500"></span>
-          Cyan
-        </div>
-        <div type="button" role="option" data-value="amber">
-          <span class="rounded-full size-4 bg-amber-500"></span>
-          Amber
+      <div class="flex flex-wrap items-center gap-4">
+        <div class="flex flex-wrap items-center gap-2 md:flex-row">
+          {% call select(trigger_attrs={"class": "w-[180px]"}) %}
+          <div role="group" aria-labelledby="fruit-options-label">
+            <span id="fruit-options-label" role="heading">Fruits</span>
+            <div role="option" data-value="apple">Apple</div>
+            <div role="option" data-value="banana">Banana</div>
+            <div role="option" data-value="blueberry">Blueberry</div>
+          </div>
+          <div role="group" aria-labelledby="vegetable-options-label">
+            <span id="vegetable-options-label" role="heading">Grapes</span>
+            <div role="option" data-value="pineapple">Pineapple</div>
+          </div>
+          {% endcall %}
+
+          {% call select(
+            trigger_attrs={"class": "w-[180px]"},
+            listbox_attrs={"class": "scrollbar overflow-y-auto max-h-64"}
+          ) %}
+          {% for i in range(0, 99) %}
+          <div role="option" data-value="item-{{ i }}">Item {{ i }}</div>
+          {% endfor %}
+          {% endcall %}
+
+          {% call select(trigger_attrs={"disabled": "disabled", "class": "w-[180px]"}) %}
+          <div role="option" data-value="disabled">Disabled</div>
+          {% endcall %}
+
+
+          {% call select(trigger_attrs={'class': 'w-[180px]'}) %}
+          <div type="button" role="option" data-value="bar">
+            {% lucide "chart-bar", {"class": "text-muted-foreground"} %}
+            Bar
+          </div>
+          <div type="button" role="option" data-value="line">
+            {% lucide "chart-line", {"class": "text-muted-foreground"} %}
+            Line
+          </div>
+          <div type="button" role="option" data-value="pie">
+            {% lucide "chart-pie", {"class": "text-muted-foreground"} %}
+            Pie
+          </div>
+          {% endcall %}
         </div>
       </div>
-      <div role="group" aria-labelledby="vegetable-options-label">
-        <span id="vegetable-options-label" role="heading">Gradients</span>
-        <div type="button" role="option" data-value="fuchsia-to-cyan">
-          <span class="rounded-full size-4 bg-linear-to-bl from-fuchsia-500 to-cyan-500"></span>
-          Amber to Cyan
-        </div>
-        <div type="button" role="option" data-value="cyan-to-amber">
-          <span class="rounded-full size-4 bg-linear-to-bl from-cyan-500 to-amber-500"></span>
-          Cyan to Amber
-        </div>
-        <div type="button" role="option" data-value="amber-to-fuchsia">
-          <span class="rounded-full size-4 bg-linear-to-bl from-amber-500 to-fuchsia-500"></span>
-          Amber to Fuchsia
-        </div>
-      </div>
-      {% endcall %}
+    </div>
   </div>
 </section>