{% lucide "settings" %}
Settings
⌘S
@@ -66,14 +80,152 @@ toc:
+
+
+
+
+
+
+{% set code_script %}
+{% endset %}
+{{ code_block(code_script | prettyHtml, "html") }}
+
+
+
+
+
+
+ You can use the command menu standalone:
+
+
{{ code_block(code_standalone | prettyHtml, "html") }}
+
+ Wrap the command menu in a <dialog class="command-dialog"> to display in a dialog:
+
+
+{% set code_dialog %}
+
+{% endset %}
+
+{{ code_block(code_dialog | prettyHtml, "html") }}
+
+
+
+
+
+ <dialog class="command-dialog"> Optional- For dialog variant, wraps a
<div class="command"> to display as a modal. Uses native <dialog> behavior and requires aria-label or aria-labelledby for accessibility.
+
+ <div class="command">- Wraps around the entire command component. Can be used standalone or inside a dialog.
+
+ <header>- Contains the search input to filter command options.
+
+ <input type="text">- The search input. Should have:
+
+ role="combobox": indicates the input controls a menu with filteringaria-expanded="true": the menu is always expandedaria-controls="{ MENU_ID }": points to the menu's id
+
+
+
+ <div role="menu">- The menu containing the command items. Should have
id="{ MENU_ID }" refered to by the input's aria-controls attribute.
+
+ <div role="menuitem">- Command item that triggers an action when clicked. In a command-dialog, clicking a menuitem automatically closes the dialog unless the
data-keep-command-open attribute is present. Optional attributes:
+
+ data-label: custom label for filtering (if different from text content)data-keywords: additional keywords for enhanced filteringaria-disabled="true": marks item as disabled (excluded from keyboard navigation and filtering)
+
+ <hr role="separator"> Optional- Separator between groups/items. Hidden when filtering is active.
+ <div role="group"> Optional- Group of items, can have
aria-labelledby attribute to link to a heading.
+ <span role="heading">- Group heading, must have an
id attribute if you use the aria-labelledby attribute on the group.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ basecoat:initialized- Once the component is fully initialized, it dispatches a custom (non-bubbling)
basecoat:initialized event on itself.
+
+
+
+
+
+
+
You can use the command() or command_dialog() Nunjucks or Jinja macros for this component.
+
+
+
+
+{% set raw_code %}{% raw %}{% call command() %}
+
+
+ Calendar
+
+
+
+ Settings
+
+{% endcall %}{% endraw %}{% endset %}
+{{ code_block(raw_code, "jinja") }}
+
- Press ⌘J
+ You can use some simple JavaScript to open the command menu with a keyboard shortcut (in this case ⌘J).
{% set code_dialog %}
@@ -83,7 +235,7 @@ toc:
onclick="document.getElementById('demo-command-dialog').showModal()"
>
Open command menu
-
⌘ J
+
⌘J
{% call command_dialog(id="demo-command-dialog") %}
@@ -103,19 +255,7 @@ toc:
}
}
});
-
- const cmdDialog = document.getElementById('demo-command-dialog');
- cmdDialog?.addEventListener('command:select', (e) => {
- console.log('Selected command:', e.detail.value);
- cmdDialog.close();
- });
{% endset %}
-{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
-
-
- To show the command menu in a dialog, use the command_dialog macro.
-
-
-{{ code_block(code_dialog | prettyHtml, "html") }}
+{{ code_preview("command-dialog", code_dialog | prettyHtml) }}
\ No newline at end of file
diff --git a/docs/src/components/dialog.njk b/docs/src/components/dialog.njk
index a734cec..dafa34c 100644
--- a/docs/src/components/dialog.njk
+++ b/docs/src/components/dialog.njk
@@ -69,8 +69,8 @@ toc:
onclick: closes the dialog when the backdrop is clicked.
- <article>- Wraps the content of the dialog. It includes an
onclick attribute to prevent from closing the dialog if we have an onclick event on <dialog>.
+ <div>- Wraps the content of the dialog.
<header>- Contains the header for the dialog:
diff --git a/docs/src/components/empty.njk b/docs/src/components/empty.njk
new file mode 100644
index 0000000..0da962b
--- /dev/null
+++ b/docs/src/components/empty.njk
@@ -0,0 +1,209 @@
+---
+layout: layouts/page.njk
+title: Empty
+description: Display empty states with icons, titles, descriptions, and actions.
+toc:
+ - label: Usage
+ id: usage
+ children:
+ - label: HTML structure
+ id: html-structure
+ - label: Examples
+ id: examples
+ children:
+ - label: Outline
+ id: example-outline
+ - label: Avatar
+ id: example-avatar
+ - label: Avatar Group
+ id: example-avatar-group
+ - label: Input Group
+ id: example-input-group
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+
+ {% lucide "circle-alert" %}
+
There is no dedicated Empty component in Basecoat.
+
+
+{% set code_default %}
+
+
+
+ {% lucide "folder-code" %}
+
+ No Projects Yet
+
+ You haven't created any projects yet. Get started by creating your first project.
+
+
+
+
+
+
+
+
+
+ Learn More
+ {% lucide "arrow-up-right" %}
+
+
The example simply uses Tailwind utility classes to create an empty state layout.
+
+
+{{ code_block(code_default) }}
+
+
+
+
+
+ <div>- Main container with centered layout utilities:
+
+ flex flex-col items-center justify-center: centers contentgap-6: spacing between sectionsp-6 md:p-12: responsive paddingtext-center text-balance: centered text with better wrapping
+
+ <header>- Header section containing the icon/avatar, title, and description:
+
+ max-w-sm: constrains width for readabilitygap-2 or gap-3: spacing between elements
+
+ <div> Optional- Media container for icon or avatar:
+
+ - For icons:
bg-muted text-foreground size-10 rounded-lg
+ - For avatars:
size-12 rounded-full grayscale
+ - For avatar groups:
flex -space-x-2 with ring utilities
+
+
+ <h3>- Title with
text-lg font-medium tracking-tight
+ <p>- Description with
text-muted-foreground text-sm/relaxed
+
+
+ <section> Optional- Content area for actions (buttons, inputs, etc.):
+
+ max-w-sm or max-w-md: constrains widthflex flex-col items-center gap-3: vertical layout with spacing
+
+ <a> or other elements Optional- Additional links or actions outside the main content section
+
+
+
+
+
+
+
+
+
+{% set code_outline %}
+
+
+
+ {% lucide "cloud" %}
+
+ Cloud Storage Empty
+
+ Upload files to your cloud storage to access them anywhere.
+
+
+
+
+
+
+
+
User Offline
+
+ This user is currently offline. You can leave a message to notify them or try again later.
+
+
+
+
+
+
+ No Team Members
+
+ Invite your team to collaborate on this project.
+
+
+
+
+
+
+
+ 404 - Not Found
+
+ The page you're looking for doesn't exist. Try searching for what you need below.
+
+
+
+
Field provides semantic HTML patterns for accessible forms:
+
+ <fieldset> and <legend> for grouping related fieldsrole="group" with .field class for individual fields.description class for helper text.error class with role="alert" for error messagesaria-describedby to associate descriptions and errors with inputs
+
+
+{{ code_block(code) }}
+
+
+
+
+
+{% set code_input %}
+
+
+
+
+
Choose a unique username for your account
+
+
+
+
+
+
Must be at least 8 characters
+
Password is too short
+
+
+
+
+
Brief description for your profile (max 200 characters)
+
+
+
+
Choose your country of residence
+
Group related fields with <fieldset class="fieldset"> and <legend>.
+
+
+{% set code_fieldset %}
+
+{% endset %}
+
+{{ code_preview("field-fieldset", code_fieldset) }}
+
+
+
+{% set code_checkbox %}
+
+{% endset %}
+
+{{ code_preview("field-checkbox", code_checkbox) }}
+
+
+
+{% set code_radio %}
+
+{% endset %}
+
+{{ code_preview("field-radio", code_radio) }}
+
+
+
+
+ Use horizontal layout for switches by wrapping in a flex container.
+
+
+{% set code_switch %}
+
+{% endset %}
+
+{{ code_preview("field-switch", code_switch) }}
+
+
+
+
+
+ - Always use
<label> elements with for attribute matching input id
+ - Associate helper text and errors using
aria-describedby on the input
+ - Use
aria-invalid="true" on inputs with errors
+ - Use
role="alert" on error messages for screen reader announcements
+ - Group related fields with
<fieldset> and <legend>
+ - Use
role="group" for individual field wrappers
+
+
+
+
+
diff --git a/docs/src/components/input-group.njk b/docs/src/components/input-group.njk
new file mode 100644
index 0000000..c5a89da
--- /dev/null
+++ b/docs/src/components/input-group.njk
@@ -0,0 +1,247 @@
+---
+layout: layouts/page.njk
+title: Input Group
+description: Display additional information or actions alongside inputs using simple HTML patterns.
+toc:
+ - label: Usage
+ id: usage
+ - label: Examples
+ id: examples
+ children:
+ - label: Icon Prefix
+ id: example-icon-prefix
+ - label: Icon Suffix
+ id: example-icon-suffix
+ - label: Text Prefix/Suffix
+ id: example-text
+ - label: Button Suffix
+ id: example-button
+ - label: Multiple Elements
+ id: example-multiple
+ - label: Textarea
+ id: example-textarea
+---
+
+{% from "macros/code_preview.njk" import code_preview %}
+{% from "macros/code_block.njk" import code_block %}
+
+{% set code_default %}
+
+
+
+ {% lucide "search" %}
+
+
Input groups are achieved through composition using relative positioning and Tailwind utilities. No special component needed - just wrap your input with a positioned container and add your icons, text, or buttons.
+ Key patterns:
+
+ - Use
relative wrapper around input
+ - Position content with
absolute + top-1/2 -translate-y-1/2
+ - Add padding to input (
pl-* or pr-*) to make room for content
+ - Use
pointer-events-none for decorative icons
+
+
+
+{{ code_block(code_default) }}
+
+
+
+
+
+
+ Add an icon at the start of the input field.
+
+
+{% set code_icon_prefix %}
+
+
+
+
+ {% lucide "search" %}
+
+
+
+
+
+
+ {% lucide "mail" %}
+
+
+
Add an icon at the end of the input field.
+
+
+{% set code_icon_suffix %}
+
+
+
+
+ {% lucide "check" %}
+
+
+
+
+
+
+ {% lucide "credit-card" %}
+ {% lucide "info" %}
+
+
+
Display text before or after the input value.
+
+
+{% set code_text %}
+
+{% endset %}
+
+{{ code_preview("input-group-text", code_text) }}
+
+
+
+
+ Add interactive buttons inside the input.
+
+
+{% set code_button %}
+
+{% endset %}
+
+{{ code_preview("input-group-button", code_button) }}
+
+
+
+
+ Combine multiple icons, text, and buttons.
+
+
+{% set code_multiple %}
+
+
+
+
+ {% lucide "search" %}
+
+
+ ⌘K
+
+
+
+
+
+
+ https://
+
+
+
+
Add buttons to textareas for actions like submit.
+
+
+{% set code_textarea %}
+
+
+
+
+
+
+
+
+
+ 120 characters left
+
+
+
+
+ - Use
pointer-events-none for decorative icons that shouldn't be interactive
+ - Ensure buttons have proper
aria-label or visible text
+ - Maintain sufficient padding so text doesn't overlap with icons/buttons
+ - Use semantic button types (
type="button" vs type="submit")
+
+
+
diff --git a/docs/src/components/item.njk b/docs/src/components/item.njk
new file mode 100644
index 0000000..54afdda
--- /dev/null
+++ b/docs/src/components/item.njk
@@ -0,0 +1,311 @@
+---
+layout: layouts/page.njk
+title: Item
+description: A versatile component that you can use to display any content.
+toc:
+ - label: Examples
+ id: examples
+ children:
+ - label: Variants
+ id: example-variants
+ - label: Size
+ id: example-size
+ - label: Icon
+ id: example-icon
+ - label: Avatar
+ id: example-avatar
+ - label: Image
+ id: example-image
+ - label: Group
+ id: example-group
+ - label: Header
+ id: example-header
+ - label: Link
+ id: example-link
+---
+
+{% from "macros/code_block.njk" import code_block %}
+{% from "macros/code_preview.njk" import code_preview %}
+
+
+ {% lucide "circle-alert" %}
+
There is no dedicated Item component in Basecoat.
+
+
+{% set code_basic %}
+
+{% endset %}
+
+{{ code_preview("item-basic", code_basic | prettyHtml, class="w-full max-w-md") }}
+
+
+
+
+
+{% set code_variants %}
+
+
+
+
Default Variant
+
Standard styling with subtle background and borders.
+
+
+
+
+
Outline Variant
+
Outlined style with clear borders and transparent background.
+
+
+
+
+
Muted Variant
+
Subdued appearance with muted colors for secondary content.
+
+
Use different padding and gap sizes for compact or spacious layouts.
+
+
+{{ code_preview("item-size", code_basic) }}
+
+
+
+{% set code_icon %}
+
+
+ {% lucide "shield-alert" %}
+
+
+
Security Alert
+
New login detected from unknown device.
+
+
+ 
+
+
hunvreus
+
Last seen 5 months ago
+
+
+
+
+
+
No Team Members
+
Invite your team to collaborate on this project.
+
+
+
+
+
+
hunvreus
+
hunvreus@gmail.com
+
+
+
+
+
+
+
+
shadcn
+
shadcn@vercel.com
+
+
+
+
+
+ 
+
+
adamwathan
+
adam.wathan@gmail.com
+
+
+
+ 
+
+
v0-1.5-sm
+
Everyday tasks and UI generation.
+
+
+
+ 
+
+
v0-1.5-lg
+
Advanced thinking or reasoning.
+
+
+
+ 
+
+
v0-2.0-mini
+
Open Source model for everyone.
+
+
Items can be rendered as links by using an <a> element. Hover and focus states are applied automatically.
+
+
+{% set code_link %}
+
+{% endset %}
+
+{{ code_preview("item-link", code_link, class="w-full max-w-md") }}
\ No newline at end of file
diff --git a/docs/src/components/kbd.njk b/docs/src/components/kbd.njk
index e545a65..5abbb02 100644
--- a/docs/src/components/kbd.njk
+++ b/docs/src/components/kbd.njk
@@ -37,7 +37,15 @@ toc:
-{{ code_block(code_html | prettyHtml, "html") }}
+
+ Simply use the <kbd> element:
+
+
+{% set code_simple %}
+⌘K
+{% endset %}
+
+{{ code_block(code_simple | prettyHtml, "html") }}
diff --git a/package-lock.json b/package-lock.json
index 525ffcb..df412f2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "basecoat",
- "version": "0.2.0-beta.1",
+ "version": "0.3.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "basecoat",
- "version": "0.2.0-beta.1",
+ "version": "0.3.2",
"license": "MIT",
"workspaces": [
"packages/*"
@@ -4337,7 +4337,7 @@
},
"packages/cli": {
"name": "basecoat-cli",
- "version": "0.2.0-beta.1",
+ "version": "0.3.2",
"license": "MIT",
"dependencies": {
"commander": "^13.1.0",
@@ -4350,7 +4350,7 @@
},
"packages/css": {
"name": "basecoat-css",
- "version": "0.2.0-beta.1",
+ "version": "0.3.2",
"license": "MIT"
}
}
diff --git a/package.json b/package.json
index 3fd1c46..afc3f99 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,7 @@
"css",
"html",
"jinja",
- "nunjucks",
- "alpinejs"
+ "nunjucks"
],
"license": "MIT",
"repository": {
diff --git a/packages/cli/package.json b/packages/cli/package.json
index af8a3dd..4b59715 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -30,8 +30,7 @@
"css",
"html",
"jinja",
- "nunjucks",
- "alpinejs"
+ "nunjucks"
],
"repository": {
"type": "git",
diff --git a/src/css/basecoat.css b/src/css/basecoat.css
index a83b4f4..5d15493 100644
--- a/src/css/basecoat.css
+++ b/src/css/basecoat.css
@@ -146,10 +146,6 @@
border-radius: var(--scrollbar-radius);
}
}
- /* Alpine.js */
- [x-cloak] {
- display: none !important;
- }
}
/* Alert */
@@ -385,11 +381,9 @@
/* Button Group */
.button-group {
- @apply inline-flex isolate;
+ @apply inline-flex w-fit items-stretch isolate;
- > *:hover,
> *:focus-visible,
- > :is(.dropdown-menu, .popover) > button:hover,
> :is(.dropdown-menu, .popover) > button:focus-visible {
@apply relative z-10;
}
@@ -401,7 +395,7 @@
&:not([data-orientation='vertical']) {
> *:not(:first-child),
> :is(.dropdown-menu, .popover):not(:first-child) > button {
- @apply -ml-px rounded-l-none;
+ @apply rounded-l-none border-l-0;
}
> *:not(:last-child),
> :is(.dropdown-menu, .popover):not(:last-child) > button {
@@ -416,7 +410,7 @@
}
> *:not(:first-child) {
- @apply -mt-px ml-0 rounded-t-none;
+ @apply rounded-t-none border-t-0;
}
> *:not(:last-child) {
@apply rounded-b-none;
@@ -451,7 +445,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;
@@ -494,7 +488,7 @@
&::backdrop {
@apply opacity-100;
}
- > article {
+ > * {
@apply scale-100;
}
@@ -504,7 +498,7 @@
&::backdrop {
@apply opacity-0;
}
- > article {
+ > * {
@apply scale-95;
}
}
@@ -512,7 +506,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 overflow-hidden rounded-lg border shadow-lg sm:max-w-lg max-h-[min(640px,calc(100%_-_2rem))];
@apply transition-all scale-95;
@@ -530,10 +524,10 @@
> header input {
@apply h-12;
}
- [role='listbox'] {
+ [role='menu'] {
@apply px-2;
- [role='option'] {
+ [role='menuitem'] {
@apply py-3 px-2 [&_svg]:size-5;
}
[role='heading'] {
@@ -554,11 +548,11 @@
@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='listbox'] {
+ [role='menu'] {
@apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
- [role='option'] {
- @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;
+ [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;
@@ -567,7 +561,7 @@
[role='heading'] {
@apply text-muted-foreground flex px-2 py-1.5 text-xs font-medium;
}
- [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+ [role='group']:not(:has([role='menuitem']:not([aria-hidden='true']))) {
@apply hidden;
}
[role='separator'] {
@@ -583,7 +577,7 @@
@apply content-['No_results_found'];
}
}
- &:not([data-command-initialized]) [role='option'] {
+ &:not([data-command-initialized]) [role='menuitem'] {
@apply hover:bg-accent hover:text-accent-foreground;
}
&:has(> header input:not(:placeholder-shown)) [role='separator'] {
@@ -603,7 +597,7 @@
&::backdrop {
@apply opacity-100;
}
- > article {
+ > * {
@apply scale-100;
}
@@ -613,7 +607,7 @@
&::backdrop {
@apply opacity-0;
}
- > article {
+ > * {
@apply scale-95;
}
}
@@ -621,7 +615,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;
@@ -692,21 +686,46 @@
}
}
+/* Field */
+@layer components {
+ .fieldset {
+ @apply flex flex-col gap-6;
+
+ > legend {
+ @apply text-base font-medium mb-3;
+ }
+
+ > .description {
+ @apply text-sm text-muted-foreground;
+ }
+ }
+ .field {
+ @apply flex flex-col w-full gap-3 data-[invalid=true]:text-destructive [&>*]:w-full [&>.sr-only]:w-auto;
+
+ .description {
+ @apply text-sm text-muted-foreground;
+ }
+ .error {
+ @apply text-sm text-destructive font-medium;
+ }
+ }
+}
+
/* 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'],
@@ -735,7 +754,7 @@
/* 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;
@@ -820,7 +839,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;
@@ -832,7 +851,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%;
@@ -881,7 +900,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];
@@ -1068,7 +1087,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;
@@ -1130,7 +1149,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;
}
@@ -1196,8 +1215,6 @@
/* Tooltip */
@layer components {
-
-
[data-tooltip] {
@apply relative;
diff --git a/src/jinja/command.html.jinja b/src/jinja/command.html.jinja
index 63e63e7..b05feca 100644
--- a/src/jinja/command.html.jinja
+++ b/src/jinja/command.html.jinja
@@ -7,7 +7,7 @@
@param empty_text {string} [optional] [default="No results found."] - Text displayed when no results match the search.
@param main_attrs {object} [optional] - Additional HTML attributes for the main container div.
@param input_attrs {object} [optional] - Additional HTML attributes for the search input.
- @param listbox_attrs {object} [optional] - Additional HTML attributes for the listbox div.
+ @param menu_attrs {object} [optional] - Additional HTML attributes for the menu div.
#}
{% macro command(
id=None,
@@ -16,7 +16,7 @@
empty_text="No results found.",
main_attrs={},
input_attrs={},
- listbox_attrs={}
+ menu_attrs={}
) %}
{% set id = id or ("command-" ~ range(100000, 999999) | random | string) %}