basecoat-css 0.3.2 → 0.3.4

package/dist/basecoat.css

@@ -146,10 +146,6 @@
       border-radius: var(--scrollbar-radius);
     }
   }
-  /* Alpine.js */
-  [x-cloak] {
-    display: none !important;
-  }
 }
 
 /* Alert */
@@ -158,7 +154,8 @@
   .alert-destructive {
     @apply relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current;
     
-    h2 {
+    h2,
+    h3 {
       @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
     }
     section {
@@ -181,6 +178,30 @@
   }
 }
 
+/* Badge */
+@layer components {
+  .badge,
+  .badge-primary,
+  .badge-secondary,
+  .badge-destructive,
+  .badge-outline {
+    @apply inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
+  }
+  .badge,
+  .badge-primary {
+    @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;
+  }
+  .badge-secondary {
+    @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;
+  }
+  .badge-destructive {
+    @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+  }
+  .badge-outline {
+    @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;
+  }
+}
+
 /* Button */
 @layer components {
   .btn,
@@ -359,27 +380,44 @@
   }
 }
 
-/* Badge */
-@layer components {
-  .badge,
-  .badge-primary,
-  .badge-secondary,
-  .badge-destructive,
-  .badge-outline {
-    @apply inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden;
-  }
-  .badge,
-  .badge-primary {
-    @apply border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90;
-  }
-  .badge-secondary {
-    @apply border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90;
+/* Button Group */
+.button-group {
+  @apply inline-flex w-fit items-stretch isolate;
+  
+  > *:focus-visible,
+  > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+    @apply relative z-10;
   }
-  .badge-destructive {
-    @apply border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60;
+
+  > hr[role='separator'] {
+    @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
   }
-  .badge-outline {
-    @apply text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground;
+
+  &:not([data-orientation='vertical']) {
+    > *:not(:first-child),
+    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+      @apply rounded-l-none border-l-0;
+    }
+    > *:not(:last-child),
+    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+      @apply rounded-r-none;
+    }
+  }  
+  &[data-orientation='vertical'] {
+    @apply flex-col;
+
+    > hr[role='separator'] {
+      @apply w-auto h-px;
+    }
+    
+    > *:not(:first-child),
+    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+      @apply rounded-t-none border-t-0;
+    }
+    > *:not(:last-child),
+    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+      @apply rounded-b-none;
+    }
   }
 }
 
@@ -410,7 +448,7 @@
 
 /* Checkbox */
 @layer components {
-  .form input[type='checkbox']:not([role='switch']),
+  :is(.form, .field) input[type='checkbox']:not([role='switch']),
   .input[type='checkbox']:not([role='switch']) {
     @apply appearance-none border-input dark:bg-input/30 checked:bg-primary dark:checked:bg-primary checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
     
@@ -442,6 +480,115 @@
   }
 }
 
+/* Command */
+@layer components {
+  .command-dialog {
+    @apply inset-y-0 opacity-0 transition-all transition-discrete;
+
+    &:is([open],:popover-open) {
+      @apply opacity-100;
+
+      &::backdrop {
+        @apply opacity-100;
+      }
+      > * {
+        @apply scale-100;
+      }
+
+      @starting-style {
+        @apply opacity-0;
+
+        &::backdrop {
+          @apply opacity-0;
+        }
+        > * {
+          @apply scale-95;
+        }
+      }
+    }
+    &::backdrop {
+      @apply bg-black/50 opacity-0 transition-all transition-discrete;
+    }
+    > * {
+      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
+      @apply transition-all scale-95;
+
+      > button,
+      > form[method='dialog'] {
+        @apply absolute top-4 right-4;
+      }
+      > button,
+      > form[method='dialog'] > button {
+        @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+      }
+    }
+
+    .command {
+      > header input {
+        @apply h-12;
+      }
+      [role='menu'] {
+        @apply px-2;
+
+        [role='menuitem'] {
+          @apply py-3 px-2 [&_svg]:size-5;
+        }
+        [role='heading'] {
+          @apply px-2 py-1.5 font-medium text-muted-foreground;
+        }
+      }
+    }
+  }
+
+  .command {
+    > header {
+      @apply flex items-center border-b px-3 gap-2;
+
+      svg {
+        @apply size-4 shrink-0 opacity-50;
+      }
+      input {
+        @apply placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50;
+      }
+    }
+    [role='menu'] {
+      @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
+
+      [role='menuitem'] {
+        @apply aria-hidden:hidden relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+
+        &.active {
+          @apply bg-accent text-accent-foreground;
+        }
+      }
+      [role='heading'] {
+        @apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
+      }
+      [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
+        @apply hidden;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
+      &:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply flex items-center justify-center py-6 px-3 text-sm truncate -m-1;
+      }
+      &[data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-[attr(data-empty)];
+      }
+      &:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-['No_results_found'];
+      }
+    }
+    &:not([data-command-initialized]) [role='menuitem'] {
+      @apply hover:bg-accent hover:text-accent-foreground;
+    }
+    &:has(> header input:not(:placeholder-shown)) [role='separator'] {
+      @apply hidden;
+    }
+  }
+}
+
 /* Dialog */
 @layer components {
   .dialog {
@@ -453,7 +600,7 @@
       &::backdrop {
         @apply opacity-100;
       }
-      > article {
+      > * {
         @apply scale-100;
       }
 
@@ -463,7 +610,7 @@
         &::backdrop {
           @apply opacity-0;
         }
-        > article {
+        > * {
           @apply scale-95;
         }
       }
@@ -471,7 +618,7 @@
     &::backdrop {
       @apply bg-black/50 opacity-0 transition-all transition-discrete;
     }
-    > article {
+    > * {
       @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%_-_2rem)];
       @apply transition-all scale-95;
 
@@ -542,21 +689,65 @@
   }
 }
 
+/* Field */
+@layer components {
+  .fieldset {
+    @apply flex flex-col gap-6;
+
+    > legend {
+      @apply text-base font-medium mb-3;
+    }
+  }
+  .field {
+    @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
+
+    h2,
+    h3 {
+      @apply flex w-fit items-center gap-2 text-sm leading-snug font-medium;
+    }
+    [role="alert"] {
+      @apply text-sm text-destructive font-normal;
+      
+      ul {
+        @apply ml-4 flex list-disc flex-col gap-1;
+      }
+    }
+    section {
+      @apply flex flex-1 flex-col gap-1.5 leading-snug;
+    }
+
+    &[data-orientation='horizontal'] {
+      @apply flex-row items-center [&>label]:flex-auto has-[>section]:items-start has-[>section]:[&>[type=checkbox],[type=radio]]:mt-px [&_p]:text-balance;
+    }
+  }
+  .fieldset legend + p,
+  .field > p,
+  .field section > p {
+    @apply text-muted-foreground text-sm leading-normal font-normal [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4;
+  }
+  .fieldset legend + p {
+    @apply -mt-1.5;
+  }
+  .field > p {
+    @apply last:mt-0 nth-last-2:-mt-1;
+  }
+}
+
 /* Input */
 @layer components {
-  .form input[type='text'],
-  .form input[type='email'],
-  .form input[type='password'],
-  .form input[type='number'],
-  .form input[type='file'],
-  .form input[type='tel'],
-  .form input[type='url'],
-  .form input[type='search'],
-  .form input[type='date'],
-  .form input[type='datetime-local'],
-  .form input[type='month'],
-  .form input[type='week'],
-  .form input[type='time'],
+  :is(.form, .field) input[type='text'],
+  :is(.form, .field) input[type='email'],
+  :is(.form, .field) input[type='password'],
+  :is(.form, .field) input[type='number'],
+  :is(.form, .field) input[type='file'],
+  :is(.form, .field) input[type='tel'],
+  :is(.form, .field) input[type='url'],
+  :is(.form, .field) input[type='search'],
+  :is(.form, .field) input[type='date'],
+  :is(.form, .field) input[type='datetime-local'],
+  :is(.form, .field) input[type='month'],
+  :is(.form, .field) input[type='week'],
+  :is(.form, .field) input[type='time'],
   .input[type='text'],
   .input[type='email'],
   .input[type='password'],
@@ -576,9 +767,16 @@
   }
 }
 
+/* Kbd */
+@layer components {
+  .kbd {
+    @apply bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3;
+  }
+}
+
 /* Label */
 @layer components {
-  .form label,
+  :is(.form, .field) label,
   .label {
     @apply flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:pointer-events-none peer-disabled:opacity-50;
 
@@ -663,7 +861,7 @@
 
 /* Radio */
 @layer components {
-  .form input[type='radio'],
+  :is(.form, .field) input[type='radio'],
   .input[type='radio'] {
     @apply appearance-none border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 relative;
 
@@ -675,7 +873,7 @@
 
 /* Range */
 @layer components {
-  .form input[type='range'],
+  :is(.form, .field) input[type='range'],
   .input[type='range'] {
     @apply appearance-none flex items-center p-0 outline-none;
     --slider-value: 20%;
@@ -724,7 +922,7 @@
 
 /* Select */
 @layer components {
-  .form select,
+  :is(.form, .field) select,
   select.select {
     @apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
@@ -780,6 +978,9 @@
         @apply content-['No_results_found'];
       }
     }
+    [data-popover]:has(> header input:not(:placeholder-shown)) [role='separator'] {
+      @apply hidden;
+    }
     &:not([data-select-initialized]) [data-popover] [role='option'] {
       @apply hover:bg-accent hover:text-accent-foreground;
     }
@@ -908,7 +1109,7 @@
 
 /* Switch */
 @layer components {
-  .form input[type='checkbox'][role='switch'],
+  :is(.form, .field) input[type='checkbox'][role='switch'],
   .input[type='checkbox'][role='switch'] {
     @apply appearance-none focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50;
     @apply bg-input dark:bg-input/80 checked:bg-primary dark:checked:bg-primary;
@@ -970,7 +1171,7 @@
 
 /* Textarea */
 @layer components {
-  .form textarea,
+  :is(.form, .field) textarea,
   .textarea {
     @apply border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm;
   }

package/dist/js/all.js

@@ -97,6 +97,155 @@
     startObserver();
   });
 })(); 
+(() => {
+  const initCommand = (container) => {
+    const input = container.querySelector('header input');
+    const menu = container.querySelector('[role="menu"]');
+
+    if (!input || !menu) {
+      const missing = [];
+      if (!input) missing.push('input');
+      if (!menu) missing.push('menu');
+      console.error(`Command component initialization failed. Missing element(s): ${missing.join(', ')}`, container);
+      return;
+    }
+
+    const allMenuItems = Array.from(menu.querySelectorAll('[role="menuitem"]'));
+    const menuItems = allMenuItems.filter(item => 
+      !item.hasAttribute('disabled') && 
+      item.getAttribute('aria-disabled') !== 'true'
+    );
+    let visibleMenuItems = [...menuItems];
+    let activeIndex = -1;
+
+    const setActiveItem = (index) => {
+      if (activeIndex > -1 && menuItems[activeIndex]) {
+        menuItems[activeIndex].classList.remove('active');
+      }
+
+      activeIndex = index;
+
+      if (activeIndex > -1) {
+        const activeItem = menuItems[activeIndex];
+        activeItem.classList.add('active');
+        if (activeItem.id) {
+          input.setAttribute('aria-activedescendant', activeItem.id);
+        } else {
+          input.removeAttribute('aria-activedescendant');
+        }
+      } else {
+        input.removeAttribute('aria-activedescendant');
+      }
+    };
+
+    const filterMenuItems = () => {
+      const searchTerm = input.value.trim().toLowerCase();
+
+      setActiveItem(-1);
+
+      visibleMenuItems = [];
+      allMenuItems.forEach(item => {
+        const itemText = (item.dataset.label || item.textContent).trim().toLowerCase();
+        const keywords = (item.dataset.keywords || '').toLowerCase();
+        const matches = itemText.includes(searchTerm) || keywords.includes(searchTerm);
+        item.setAttribute('aria-hidden', String(!matches));
+        if (matches && menuItems.includes(item)) {
+          visibleMenuItems.push(item);
+        }
+      });
+
+      if (visibleMenuItems.length > 0) {
+        setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+        visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+      }
+    };
+
+    input.addEventListener('input', filterMenuItems);
+
+    const handleKeyNavigation = (event) => {
+      if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End'].includes(event.key)) {
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        if (activeIndex > -1) {
+          menuItems[activeIndex]?.click();
+        }
+        return;
+      }
+
+      if (visibleMenuItems.length === 0) return;
+
+      event.preventDefault();
+
+      const currentVisibleIndex = activeIndex > -1 ? visibleMenuItems.indexOf(menuItems[activeIndex]) : -1;
+      let nextVisibleIndex = currentVisibleIndex;
+
+      switch (event.key) {
+        case 'ArrowDown':
+          if (currentVisibleIndex < visibleMenuItems.length - 1) {
+            nextVisibleIndex = currentVisibleIndex + 1;
+          }
+          break;
+        case 'ArrowUp':
+          if (currentVisibleIndex > 0) {
+            nextVisibleIndex = currentVisibleIndex - 1;
+          } else if (currentVisibleIndex === -1) {
+            nextVisibleIndex = 0;
+          }
+          break;
+        case 'Home':
+          nextVisibleIndex = 0;
+          break;
+        case 'End':
+          nextVisibleIndex = visibleMenuItems.length - 1;
+          break;
+      }
+
+      if (nextVisibleIndex !== currentVisibleIndex) {
+        const newActiveItem = visibleMenuItems[nextVisibleIndex];
+        setActiveItem(menuItems.indexOf(newActiveItem));
+        newActiveItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+      }
+    };
+
+    menu.addEventListener('mousemove', (event) => {
+      const menuItem = event.target.closest('[role="menuitem"]');
+      if (menuItem && visibleMenuItems.includes(menuItem)) {
+        const index = menuItems.indexOf(menuItem);
+        if (index !== activeIndex) {
+          setActiveItem(index);
+        }
+      }
+    });
+
+    menu.addEventListener('click', (event) => {
+      const clickedItem = event.target.closest('[role="menuitem"]');
+      if (clickedItem && visibleMenuItems.includes(clickedItem)) {
+        const dialog = container.closest('dialog.command-dialog');
+        if (dialog && !clickedItem.hasAttribute('data-keep-command-open')) {
+          dialog.close();
+        }
+      }
+    });
+
+    input.addEventListener('keydown', handleKeyNavigation);
+
+    if (visibleMenuItems.length > 0) {
+      setActiveItem(menuItems.indexOf(visibleMenuItems[0]));
+      visibleMenuItems[0].scrollIntoView({ block: 'nearest' });
+    }
+
+    container.dataset.commandInitialized = true;
+    container.dispatchEvent(new CustomEvent('basecoat:initialized'));
+  };
+
+  if (window.basecoat) {
+    window.basecoat.register('command', '.command:not([data-command-initialized])', initCommand);
+  }
+})();
+
 (() => {
   const initDropdownMenu = (dropdownMenuComponent) => {
     const trigger = dropdownMenuComponent.querySelector(':scope > button');
@@ -360,7 +509,8 @@
       return;
     }
     
-    const options = Array.from(listbox.querySelectorAll('[role="option"]'));
+    const allOptions = Array.from(listbox.querySelectorAll('[role="option"]'));
+    const options = allOptions.filter(opt => opt.getAttribute('aria-disabled') !== 'true');
     let visibleOptions = [...options];
     let activeIndex = -1;
 
@@ -413,7 +563,7 @@
         const resetFilter = () => {
           filter.value = '';
           visibleOptions = [...options];
-          options.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
+          allOptions.forEach(opt => opt.setAttribute('aria-hidden', 'false'));
         };
         
         if (hasTransition()) {
@@ -454,11 +604,11 @@
         setActiveOption(-1);
 
         visibleOptions = [];
-        options.forEach(option => {
+        allOptions.forEach(option => {
           const optionText = (option.dataset.label || option.textContent).trim().toLowerCase();
           const matches = optionText.includes(searchTerm);
           option.setAttribute('aria-hidden', String(!matches));
-          if (matches) {
+          if (matches && options.includes(option)) {
             visibleOptions.push(option);
           }
         });