Preparing 0.3.10-beta.1

ROADMAP.md

@@ -0,0 +1,20 @@
+## Now
+
+- [ ] Add Drawer component
+- [ ] Make utility components (e.g., Item) into proper components (i.e., .item)
+- [ ] Split CSS into components
+
+## Next
+
+- [ ] Make Command load dynamic items (e.g. search results from remote endpoint)
+- [ ] Make Combobox load dynamic items (e.g. search results from remote endpoint)
+- [ ] Add Toggle component
+- [ ] Add Carousel component
+- [ ] Add Sheet component
+- [ ] Add Separator component
+- [ ] Adding Menubar component
+
+## Later
+
+- [ ] Add Calendar component (https://flatpickr.js.org/)
+- [ ] Finish Chart component (https://www.chartjs.org/)

docs/css/custom.css

@@ -50,7 +50,7 @@
         @apply border-t pt-3 mt-3 first:mt-0;
       }
       dd {
-        @apply mt-2;
+        @apply mt-2 space-y-2;
       }
       dl {
         @apply mt-4 border-b-0 pb-0 pl-8 my-0;

docs/src/components/select.njk

@@ -309,6 +309,23 @@ toc:
 
 {{ code_preview("select-disabled", code | prettyHtml) }}
 
+<h3 id="example-invalid-state"><a href="#example-invalid-state">Invalid State</a></h3>
+
+{% set code %}
+{{ select(
+  trigger_attrs={"aria-invalid": "true"},
+  items=[
+    { value: "", label: "Select a role" },
+    { value: "admin", label: "Admin" },
+    { value: "editor", label: "Editor" },
+    { value: "viewer", label: "Viewer" },
+    { value: "guest", label: "Guest" }
+  ]
+) }}
+{% endset %}
+
+{{ code_preview("select-disabled", code | prettyHtml) }}
+
 <h3 id="example-with-icon"><a href="#example-with-icon">With icon</a></h3>
 
 {% set code %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat",
-  "version": "0.3.9",
+  "version": "0.3.10-beta.1",
   "description": "shadcn/ui for the rest of us",
   "author": "hunvreus",
   "type": "module",

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-cli",
-  "version": "0.3.9",
+  "version": "0.3.10-beta.1",
   "description": "Add Basecoat components to your project",
   "author": "hunvreus",
   "license": "MIT",

packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.9",
+  "version": "0.3.10-beta.1",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",

src/css/basecoat.css

@@ -941,6 +941,14 @@
   }
   *:not(select).select {
     @apply relative inline-flex;
+    
+    & > button {
+      @apply justify-between font-normal;
+
+      &[aria-invalid='true'] {
+        @apply ring-destructive/20 dark:ring-destructive/40 border-destructive;
+      }
+    }
 
     [data-popover] {
       @apply p-1;

src/jinja/select.html.jinja

@@ -76,7 +76,7 @@
 >
   <button
     type="button"
-    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    class="btn-outline {{ trigger_attrs.class }}"
     id="{{ id }}-trigger"
     aria-haspopup="listbox"
     aria-expanded="false"

src/nunjucks/select.njk

@@ -76,7 +76,7 @@
 >
   <button
     type="button"
-    class="btn-outline justify-between font-normal {{ trigger_attrs.class }}"
+    class="btn-outline {{ trigger_attrs.class }}"
     id="{{ id }}-trigger"
     aria-haspopup="listbox"
     aria-expanded="false"