Cleaning up Button Group

docs/src/components/alert-dialog.njk

@@ -43,7 +43,7 @@ toc:
   <p>The Alert Dialog component is identical to <a href="/components/dialog" class="font-medium underline underline-offset-4">Dialog</a> except for two small differences: we do not display a close button and we do not let the user close the dialog when clicking on the backdrop (no <code>onclick</code> attribute on the <code>&lt;dialog&gt;</code> or the <code>&lt;article&gt;</code> elements).</p>
 </section>
 
-{{ code_block(code_html | prettyHtml, class="") }}
+{{ code_block(code_html | prettyHtml) }}
 
 <section class="prose">
   <p>The component has the following HTML structure:</p>

docs/src/components/alert.njk

@@ -19,20 +19,48 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code %}<div class="alert">
-  {% lucide "circle-check" %}
-  <h2>Success! Your changes have been saved</h2>
-  <section>This is an alert with icon, title and description.</section>
-</div>{% endset %}
-{{ code_preview("alert", code) }}
+{% set code %}
+<div class="grid w-full max-w-xl items-start gap-4">
+  <div class="alert">
+    {% lucide "circle-check" %}
+    <h2>Success! Your changes have been saved</h2>
+    <section>This is an alert with icon, title and description.</section>
+  </div>
+  <div class="alert">
+    {% lucide "popcorn" %}
+    <h2>This Alert has a title and an icon. No description.</h2>
+    <section>This is an alert with icon, title and description.</section>
+  </div>
+  <div class="alert-destructive">
+    {% lucide "circle-check" %}
+    <h2>Unable to process your payment.</h2>
+    <section>
+      <p>Please verify your billing information and try again.</p>
+      <ul class="list-inside list-disc text-sm">
+        <li>Check your card details</li>
+        <li>Ensure sufficient funds</li>
+        <li>Verify billing address</li>
+      </ul>
+    </section>
+  </div>
+</div>
+{% endset %}
+{{ code_preview("alert", code | prettyHtml) }}
 
 <h2 id="usage">Usage</h2>
 
 <section class="prose">
-  <p>You can use one of the two classes: <code>alert</code> or <code>alert-dialog</code>.</p>
+  <p>Use the <code>alert</code> or <code>alert-destructive</code>.</p>
 </section>
 
-{{ code_block(code) }}
+{% set code_simple %}
+<div class="alert">
+  {% lucide "circle-check" %}
+  <h2>Success! Your changes have been saved</h2>
+  <section>This is an alert with icon, title and description.</section>
+</div>
+{% endset %}
+{{ code_block(code_simple | prettyHtml) }}
 
 <section class="prose">
   <p>The component has the following HTML structure:</p>

docs/src/components/avatar.njk

@@ -16,21 +16,23 @@ toc:
 </div>
 
 {% set code %}
-  <div class="flex flex-row flex-wrap items-center gap-12">
-    <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
-    <img class="size-8 shrink-0 object-cover rounded-lg" alt="@shadcn" src="https://github.com/shadcn.png">
-    <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
-      <img alt="@hunvreus" src="https://github.com/hunvreus.png">
-      <img alt="@shadcn" src="https://github.com/shadcn.png">
-      <img alt="@adamwathan" src="https://github.com/adamwathan.png">
-    </div>
+<div class="flex flex-row flex-wrap items-center gap-12">
+  <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">
+  <img class="size-8 shrink-0 object-cover rounded-lg" alt="@shadcn" src="https://github.com/shadcn.png">
+  <div class="flex -space-x-2 [&_img]:ring-background [&_img]:ring-2 [&_img]:grayscale [&_img]:size-8 [&_img]:shrink-0 [&_img]:object-cover [&_img]:rounded-full">
+    <img alt="@hunvreus" src="https://github.com/hunvreus.png">
+    <img alt="@shadcn" src="https://github.com/shadcn.png">
+    <img alt="@adamwathan" src="https://github.com/adamwathan.png">
   </div>
+</div>
 {% endset %}
-{{ code_preview("avatar", code, "max-w-md") }}
+{{ code_preview("avatar", code | prettyHtml, "w-full max-w-md") }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>
 
-<p class="prose">To make an avatar, simply apply Tailwind utility classes directly to an <code>&lt;img&gt;</code> element:</p>
+<section class="prose">
+  <p>Avatars are just <code>&lt;img&gt;</code> elements styled with Tailwind utility classes.</p>
+</section>
 
 {% set code_simple %}
   <img class="size-8 shrink-0 object-cover rounded-full" alt="@hunvreus" src="https://github.com/hunvreus.png">

docs/src/components/badge.njk

@@ -25,7 +25,25 @@ toc:
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
-{% set code %}<span class="badge">Badge</span>{% endset %}
+{% set code %}
+<div class="flex flex-col items-center gap-2">
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge">Badge</span>
+    <span class="badge-secondary">Secondary</span>
+    <span class="badge-destructive">Destructive</span>
+    <span class="badge-outline">Outline</span>
+  </div>
+  <div class="flex w-full flex-wrap gap-2">
+    <span class="badge-secondary bg-blue-500 text-white dark:bg-blue-600">
+      {% lucide "badge-check" %}
+      Verified
+    </span>
+    <span class="badge rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">8</span>
+    <span class="badge-destructive rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">99</span>
+    <span class="badge-outline rounded-full h-5 min-w-5 px-1 font-mono tabular-nums">20+</span>
+  </div>
+</div>
+{% endset %}
 {{ code_preview("badge", code) }}
 
 <h2 id="usage"><a href="#usage">Usage</a></h2>

docs/src/components/button-group.njk

@@ -14,28 +14,33 @@ toc:
         id: example-nested
       - label: Separator
         id: example-separator
+      - label: Input
+        id: example-input
       - label: Dropdown Menu
         id: example-dropdown-menu
+      - label: Select
+        id: example-select
       - label: Popover
         id: example-popover
 ---
 
 {% from "dropdown-menu.njk" import dropdown_menu %}
 {% from "popover.njk" import popover %}
+{% from "select.njk" import select %}
 {% from "macros/code_preview.njk" import code_preview %}
 {% from "macros/code_block.njk" import code_block %}
 
 {% set code_default %}
 <div class="flex w-fit items-stretch gap-2">
-  <button class="btn-icon-outline" aria-label="Go Back">{% lucide "arrow-left" %}</button>
+  <button type="button" class="btn-icon-outline" aria-label="Go Back">{% lucide "arrow-left" %}</button>
   
   <div role="group" class="button-group">
-    <button class="btn-outline">Archive</button>
-    <button class="btn-outline">Report</button>
+    <button type="button" class="btn-outline">Archive</button>
+    <button type="button" class="btn-outline">Report</button>
   </div>
 
   <div role="group" class="button-group">
-    <button class="btn-outline">Snooze</button>
+    <button type="button" class="btn-outline">Snooze</button>
     {% set trigger %}
       {% lucide "ellipsis" %}
     {% endset %}
@@ -82,8 +87,8 @@ toc:
 
 {% set code_simple %}  
 <div role="group" class="button-group">
-  <button class="btn-outline">Archive</button>
-  <button class="btn-outline">Report</button>
+  <button type="button" class="btn-outline">Archive</button>
+  <button type="button" class="btn-outline">Report</button>
 </div>
 {% endset %}
 {{ code_block(code_simple | prettyHtml, "html") }}
@@ -98,10 +103,10 @@ toc:
 
 {% set code_orientation %}
 <div role="group" class="button-group" data-orientation="vertical">
-  <button class="btn-icon-outline" aria-label="Zoom in">
+  <button type="button" class="btn-icon-outline" aria-label="Zoom in">
     {% lucide "plus" %}
   </button>
-  <button class="btn-icon-outline" aria-label="Zoom out">
+  <button type="button" class="btn-icon-outline" aria-label="Zoom out">
     {% lucide "minus" %}
   </button>
 </div>
@@ -114,22 +119,22 @@ toc:
 {% set code_size %}
 <div class="flex flex-col items-start gap-8">
   <div role="group" class="button-group">
-    <button class="btn-sm-outline">Small</button>
-    <button class="btn-sm-outline">Button</button>
-    <button class="btn-sm-outline">Group</button>
-    <button class="btn-sm-icon-outline">{% lucide "plus" %}</button>
+    <button type="button" class="btn-sm-outline">Small</button>
+    <button type="button" class="btn-sm-outline">Button</button>
+    <button type="button" class="btn-sm-outline">Group</button>
+    <button type="button" class="btn-sm-icon-outline">{% lucide "plus" %}</button>
   </div>
   <div role="group" class="button-group">
-    <button class="btn-outline">Default</button>
-    <button class="btn-outline">Button</button>
-    <button class="btn-outline">Group</button>
-    <button class="btn-icon-outline">{% lucide "plus" %}</button>
+    <button type="button" class="btn-outline">Default</button>
+    <button type="button" class="btn-outline">Button</button>
+    <button type="button" class="btn-outline">Group</button>
+    <button type="button" class="btn-icon-outline">{% lucide "plus" %}</button>
   </div>
   <div role="group" class="button-group">
-    <button class="btn-lg-outline">Small</button>
-    <button class="btn-lg-outline">Button</button>
-    <button class="btn-lg-outline">Group</button>
-    <button class="btn-lg-icon-outline">{% lucide "plus" %}</button>
+    <button type="button" class="btn-lg-outline">Small</button>
+    <button type="button" class="btn-lg-outline">Button</button>
+    <button type="button" class="btn-lg-outline">Group</button>
+    <button type="button" class="btn-lg-icon-outline">{% lucide "plus" %}</button>
   </div>
 </div>
 {% endset %}
@@ -141,17 +146,17 @@ toc:
 {% set code_nested %}
 <div role="group" aria-label="Pagination controls" class="flex w-fit items-stretch gap-2">
   <div role="group" class="button-group">
-    <button class="btn-sm-outline">1</button>
-    <button class="btn-sm-outline">2</button>
-    <button class="btn-sm-outline">3</button>
-    <button class="btn-sm-outline">4</button>
-    <button class="btn-sm-outline">5</button>
+    <button type="button" class="btn-sm-outline">1</button>
+    <button type="button" class="btn-sm-outline">2</button>
+    <button type="button" class="btn-sm-outline">3</button>
+    <button type="button" class="btn-sm-outline">4</button>
+    <button type="button" class="btn-sm-outline">5</button>
   </div>
   <div role="group" class="button-group">
-    <button class="btn-sm-icon-outline" aria-label="Previous page">
+    <button type="button" class="btn-sm-icon-outline" aria-label="Previous page">
       {% lucide "chevron-left" %}
     </button>
-    <button class="btn-sm-icon-outline" aria-label="Next page">
+    <button type="button" class="btn-sm-icon-outline" aria-label="Next page">
       {% lucide "chevron-right" %}
     </button>
   </div>
@@ -168,19 +173,32 @@ toc:
 
 {% set code_separator %}
 <div role="group" class="button-group">
-  <button class="btn-secondary">Copy</button>
+  <button type="button" class="btn-secondary">Copy</button>
   <hr role="separator">
-  <button class="btn-secondary">Paste</button>
+  <button type="button" class="btn-secondary">Paste</button>
 </div>
 {% endset %}
 
 {{ code_preview("button-group-separator", code_separator | prettyHtml) }}
 
+
+<h3 id="example-input"><a href="#example-input">Input</a></h3>
+
+{% set code_input %}
+<div class="button-group">
+  <input type="text" class="input" placeholder="Search...">
+  <button type="button" class="btn-icon-outline">{% lucide "search" %}</button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-input", code_input | prettyHtml) }}
+
+
 <h3 id="example-dropdown-menu"><a href="#example-dropdown-menu">Dropdown Menu</a></h3>
 
 {% set code_dropdown_menu %}
 <div role="group" class="button-group">
-  <button class="btn-outline">Follow</button>
+  <button type="button" class="btn-outline">Follow</button>
   {% set trigger %}
     {% lucide "chevron-down" %}
   {% endset %}
@@ -224,11 +242,30 @@ toc:
 
 {{ code_preview("button-group-dropdown-menu", code_dropdown_menu | prettyHtml) }}
 
+<h3 id="example-select"><a href="#example-select">Select</a></h3>
+
+{% set code_select %}
+<div class="flex w-fit items-stretch gap-2">
+  <div class="button-group">
+    {% call select(trigger_attrs={"class": "[&_[data-name]]:hidden"}) %}
+      <div role="option" data-value="$">$ <span class="text-muted-foreground" data-name>US Dollar</span></div>
+      <div role="option" data-value="€">€ <span class="text-muted-foreground" data-name>Euro</span></div>
+      <div role="option" data-value="£">£ <span class="text-muted-foreground" data-name>British Pound</span></div>
+    {% endcall %}
+    <input type="text" class="input" placeholder="10.00">
+  </div>
+
+  <button type="button" class="btn-icon-outline">{% lucide "arrow-right" %}</button>
+</div>
+{% endset %}
+
+{{ code_preview("button-group-select", code_select | prettyHtml) }}
+
 <h3 id="example-popover"><a href="#example-popover">Popover</a></h3>
 
 {% set code_popover %}
 <div role="group" class="button-group">
-  <button class="btn-outline">
+  <button type="button" class="btn-outline">
     {% lucide "bot" %}
     Copilot
   </button>

docs/src/components/input-group.njk

@@ -300,7 +300,7 @@ toc:
   <div class="relative">
     <input type="text" class="input pl-9 pr-26" placeholder="Refreshing data..." disabled>
     <div class="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground [&>svg]:size-4 opacity-50">
-      {% lucide "loader-circle", { "class": "animate-spin" } %}
+      {% lucide "loader", { "class": "animate-spin" } %}
     </div>
     <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 text-sm text-muted-foreground opacity-50">
       Please wait...
@@ -321,7 +321,7 @@ toc:
       {% lucide "ellipsis" %}
     {% endset %}
     {{ dropdown_menu(
-      main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2"},
+      main_attrs={"class": "absolute right-1.5 top-1/2 -translate-y-1/2 z-10"},
       trigger=trigger,
       trigger_attrs={"class": "btn-sm-icon-ghost text-muted-foreground hover:text-accent-foreground size-6"},
       popover_attrs={"data-align": "end", "class": "min-w-32"},
@@ -360,12 +360,12 @@ toc:
 
 {% set code_group %}
 <div class="flex w-fit items-stretch">
-  <label for="url" class="text-sm flex items-center bg-muted border border-r-0 px-4 rounded-l-md">https://</label>
+  <label for="url" class="text-sm flex items-center bg-muted border border-r-0 px-4 rounded-l-md shadow-xs">https://</label>
   <div class="relative">
     <input type="text" class="input pr-9 rounded-none">
     <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground [&>svg]:size-4">{% lucide "link-2" %}</div>
   </div>
-  <div class="text-sm flex items-center bg-muted border border-l-0 px-4 rounded-r-md">.com</div>
+  <div class="text-sm flex items-center bg-muted border border-l-0 px-4 rounded-r-md shadow-xs">.com</div>
 </div>
 {% endset %}
 

src/css/basecoat.css

@@ -384,7 +384,7 @@
   @apply inline-flex w-fit items-stretch isolate;
   
   > *:focus-visible,
-  > :is(.dropdown-menu, .popover) > button:focus-visible {
+  > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
     @apply relative z-10;
   }
 
@@ -394,11 +394,11 @@
 
   &:not([data-orientation='vertical']) {
     > *:not(:first-child),
-    > :is(.dropdown-menu, .popover):not(:first-child) > button {
+    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
       @apply rounded-l-none border-l-0;
     }
     > *:not(:last-child),
-    > :is(.dropdown-menu, .popover):not(:last-child) > button {
+    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
       @apply rounded-r-none;
     }
   }  
@@ -409,10 +409,12 @@
       @apply w-auto h-px;
     }
     
-    > *:not(:first-child) {
+    > *:not(:first-child),
+    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
       @apply rounded-t-none border-t-0;
     }
-    > *:not(:last-child) {
+    > *:not(:last-child),
+    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
       @apply rounded-b-none;
     }
   }