hipowered.dev/basecoat
1
0
Fork 0
mirror of https://github.com/hunvreus/basecoat.git synced 2026-11-13 05:38:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prepare 1.0.0-beta.5

Browse Source
This commit is contained in:
Ronan Berder
2026-06-22 18:19:38 +08:00
parent 9806d6af63
commit cb72d80558
76 changed files with 3361 additions and 1424 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/css/base/base.css
+1 -1
View File
@@ -50,7 +50,7 @@
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.269 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
src/css/basecoat-components.css
+2
View File
@@ -1,7 +1,9 @@
/* Components */
@import "./components/accordion.css";
@import "./components/alert.css";
@import "./components/avatar.css";
@import "./components/badge.css";
@import "./components/breadcrumb.css";
@import "./components/button.css";
@import "./components/button-group.css";
@import "./components/card.css";
src/css/components/accordion.css
+27
View File
@@ -0,0 +1,27 @@
/* Accordion */
@layer components {
.accordion {
@apply flex w-full flex-col;
}
.accordion > details > summary {
@apply relative flex w-full flex-1 cursor-pointer list-none items-start justify-between border border-transparent transition-all outline-none;
}
.accordion > details > summary > svg:last-child {
@apply pointer-events-none shrink-0 transition-transform;
}
.accordion > details[open] > summary > svg:last-child {
@apply rotate-180;
}
.accordion > details[aria-disabled='true'] > summary,
.accordion > details > summary[aria-disabled='true'] {
@apply pointer-events-none opacity-50;
}
.accordion > details > :not(summary) {
@apply overflow-hidden;
}
}
src/css/components/alert.css
+12
View File
@@ -15,9 +15,21 @@
.alert > section {
@apply grid justify-items-start gap-1;
:where(p, ul, ol) {
@apply m-0;
}
:where(p, ul, ol):not(:last-child) {
@apply mb-4;
}
ul {
@apply list-inside list-disc;
}
ol {
@apply list-inside list-decimal;
}
}
.alert > footer {
src/css/components/avatar.css
+6 -6
View File
@@ -8,27 +8,27 @@
@apply absolute inset-0 aspect-square size-full rounded-[inherit] object-cover;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply flex size-full items-center justify-center rounded-[inherit] text-sm;
}
.avatar[data-size='sm'] > span:not([data-badge]) {
.avatar[data-size='sm'] > span:not(.avatar-badge) {
@apply text-xs;
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none;
}
.avatar[data-size='sm'] > [data-badge] {
.avatar[data-size='sm'] > .avatar-badge {
@apply size-2 [&>svg]:hidden;
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply size-2.5 [&>svg]:size-2;
}
.avatar[data-size='lg'] > [data-badge] {
.avatar[data-size='lg'] > .avatar-badge {
@apply size-3 [&>svg]:size-2;
}
src/css/components/breadcrumb.css
+30
View File
@@ -0,0 +1,30 @@
/* Breadcrumb */
@layer components {
.breadcrumb > ol {
@apply m-0 flex list-none flex-wrap items-center p-0 break-words;
}
.breadcrumb li {
@apply inline-flex items-center;
}
.breadcrumb a {
@apply rounded-sm outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50;
}
.breadcrumb [aria-current='page'] {
@apply cursor-default;
}
.breadcrumb li[aria-hidden='true'] {
@apply select-none;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply flex items-center justify-center;
}
.breadcrumb [data-rtl-flip] {
@apply rtl:rotate-180;
}
}
src/css/components/card.css
+4
View File
@@ -15,6 +15,10 @@
@apply col-start-2 row-span-2 row-start-1 self-start justify-self-end;
}
> header > menu.card-action {
@apply m-0 list-none p-0;
}
> footer {
@apply flex items-center;
}
src/css/components/combobox.css
+23 -2
View File
@@ -8,18 +8,39 @@
@apply w-full min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
.combobox .input-group input[role='combobox'],
.combobox [data-popover] input[role='combobox'] {
@apply min-w-0 outline-hidden placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50;
}
.combobox > svg,
.combobox-trigger-icon {
@apply pointer-events-none absolute shrink-0;
}
.combobox:has(> .combobox-chips) > .combobox-trigger-icon {
@apply hidden;
}
.combobox [data-clear] {
@apply inline-flex size-6 shrink-0 cursor-default appearance-none items-center justify-center border-0 bg-transparent p-0 text-current disabled:pointer-events-none disabled:opacity-50;
}
.combobox [data-clear][hidden] {
@apply hidden;
}
.combobox .input-group:has([data-clear]:not([hidden])) button[aria-haspopup='listbox'] {
@apply hidden;
}
.combobox [data-popover] {
@apply isolate overflow-hidden;
min-width: max(100%, 9rem);
}
.combobox [role='listbox'] {
@apply outline-hidden overflow-y-auto;
@apply outline-hidden overflow-x-hidden overflow-y-auto;
}
.combobox [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
@@ -73,6 +94,6 @@
}
.combobox-chip-remove {
@apply inline-flex items-center justify-center;
@apply inline-flex shrink-0 items-center justify-center;
}
}
src/css/components/command.css
+19 -12
View File
@@ -12,7 +12,7 @@
@apply opacity-100;
}
> * {
> .command {
@apply scale-100;
}
@@ -23,7 +23,7 @@
@apply opacity-0;
}
> * {
> .command {
@apply scale-95;
}
}
@@ -33,19 +33,19 @@
@apply opacity-0 transition-all transition-discrete;
}
> * {
@apply fixed top-1/3 left-1/2 z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 translate-y-0 scale-95 flex-col overflow-hidden transition-all sm:max-w-lg;
> .command {
@apply fixed top-1/3 left-1/2 z-50 flex max-h-[min(640px,calc(100%_-_2rem))] w-full max-w-[calc(100%_-_2rem)] -translate-x-1/2 translate-y-0 scale-95 flex-col overflow-hidden transition-all sm:max-w-sm;
}
> * > :is(button, form[method='dialog']) {
> .command > :is(button, form[method='dialog']) {
@apply absolute;
}
> * > :is(button, form[method='dialog'] > button) {
> .command > :is(button, form[method='dialog'] > button) {
@apply inline-flex items-center justify-center opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
> .command > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
@apply size-4;
}
}
@@ -68,14 +68,20 @@
.command [role='menu'] {
@apply overflow-x-hidden overflow-y-auto outline-hidden;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
.command [role='menuitem'] {
@apply aria-hidden:hidden relative flex w-full cursor-default items-center truncate outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
@apply aria-hidden:hidden relative flex w-full cursor-default items-center outline-hidden select-none disabled:pointer-events-none disabled:opacity-50 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground;
.command [role='menuitem'].active,
.command [role='menuitem'][data-selected='true'] {
@apply bg-muted text-foreground;
}
.command [role='group'] {
@@ -103,7 +109,8 @@
}
.command [role='menuitem'][data-checked='true'] [data-indicator],
.command [role='menuitem'][aria-selected='true'] [data-indicator] {
.command [role='menuitem'][aria-selected='true'] [data-indicator],
.command [role='menuitem'][data-selected='true'] [data-indicator] {
@apply opacity-100;
}
@@ -124,7 +131,7 @@
}
.command:not([data-command-initialized]) [role='menuitem']:not([aria-disabled='true']):not(:disabled):hover {
@apply bg-accent text-accent-foreground;
@apply bg-muted text-foreground;
}
.command:has(> header input:not(:placeholder-shown)) [role='separator'] {
src/css/components/dialog.css
+30 -1
View File
@@ -1,6 +1,7 @@
/* Dialog */
@layer components {
.dialog {
.dialog,
.alert-dialog {
@apply bg-transparent p-0 text-inherit opacity-0 transition-all transition-discrete backdrop:opacity-0 backdrop:transition-all backdrop:transition-discrete;
max-width: none;
max-height: none;
@@ -24,7 +25,9 @@
> * {
@apply fixed top-1/2 left-1/2 z-50 flex max-h-[calc(100%_-_2rem)] w-full -translate-x-1/2 -translate-y-1/2 scale-95 flex-col transition-all outline-hidden;
}
}
.dialog {
> * > header {
@apply flex flex-col;
}
@@ -49,4 +52,30 @@
@apply size-4;
}
}
.alert-dialog {
> * > header {
@apply grid grid-rows-[auto_1fr] place-items-center text-center sm:place-items-start sm:text-start;
}
> * > header:has(> figure) {
@apply grid-rows-[auto_auto_1fr] sm:grid-rows-[auto_1fr];
}
> * > header > figure {
@apply m-0 shrink-0 sm:row-span-2 [&_svg]:pointer-events-none [&_svg]:shrink-0;
}
> * > header > figure:has(img) {
@apply overflow-hidden [&_img]:size-full [&_img]:object-cover;
}
> * > header:has(> figure) > :is(h2, p) {
@apply sm:col-start-2;
}
> * > footer {
@apply flex flex-col-reverse sm:flex-row sm:justify-end;
}
}
}
src/css/components/dropdown-menu.css
+1 -1
View File
@@ -33,7 +33,7 @@
}
.dropdown-menu :is(kbd:last-child, .kbd:last-child):not([data-shortcut]) {
@apply ms-8;
@apply ps-8;
}
.dropdown-menu [data-indicator] {
src/css/landing.css
-44
View File
@@ -1,44 +0,0 @@
@layer theme, base, components, utilities;
@import "tailwindcss" source("../pages");
.theme-neutral {
--chart-1: oklch(0.87 0 0);
--chart-2: oklch(0.556 0 0);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
}
:root {
--landing-demo-surface-radius: 0.375rem;
--chart-bar-radius: 6px;
}
[data-style-variant="nova"] {
--landing-demo-surface-radius: 0.5rem;
}
[data-style-variant="maia"],
[data-style-variant="luma"],
[data-style-variant="rhea"] {
--landing-demo-surface-radius: 1rem;
}
[data-style-variant="lyra"],
[data-style-variant="sera"] {
--landing-demo-surface-radius: 0;
--chart-bar-radius: 0;
}
.landing-demo-surface {
border-radius: var(--landing-demo-surface-radius);
}
.theme-neutral .card > footer,
.theme-neutral hr {
border-color: var(--border);
}
.landing-demo-chart-bar {
border-start-start-radius: var(--chart-bar-radius);
border-start-end-radius: var(--chart-bar-radius);
}
src/css/styles/luma.css
+98 -16
View File
@@ -1,5 +1,26 @@
/* Button */
/* Accordion */
@layer components {
.accordion {
@apply overflow-hidden rounded-2xl border;
}
.accordion > details {
@apply open:bg-muted/50 not-last:border-b;
}
.accordion > details > summary {
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply px-4 pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -255,7 +276,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -263,7 +284,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -309,17 +330,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-4xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.command-dialog > * {
@apply rounded-4xl p-0;
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-4xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-4xl! shadow-xl ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-9 gap-2 rounded-3xl bg-input/50 px-3;
@apply m-1 mb-0 h-9 gap-0 rounded-3xl bg-input/50 px-3;
}
.command > header svg {
@@ -327,7 +373,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -355,7 +401,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -378,11 +424,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 gap-0 rounded-3xl p-0 shadow-lg ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto p-1.5;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -399,7 +449,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -421,6 +471,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1.5 mb-0 h-8 w-auto border-input/30 bg-input/50 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-3xl border px-3 py-2 text-sm transition-[color,box-shadow,background-color] focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
@@ -473,10 +531,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/30 backdrop-blur-sm duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-4xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
}
@@ -493,6 +556,15 @@
@apply gap-1.5;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -502,11 +574,21 @@
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-3xl p-1.5 shadow-lg ring-1 duration-100;
@@ -553,11 +635,11 @@
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/lyra.css
+87 -13
View File
@@ -1,5 +1,22 @@
/* Button */
/* Accordion */
@layer components {
.accordion > details {
@apply not-last:border-b;
}
.accordion > details > summary {
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-none py-2.5 text-left text-xs font-medium hover:underline focus-visible:ring-1;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply pt-0 pb-2.5 text-xs;
}
/* Button */
.btn {
@apply rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[1px] aria-invalid:border-destructive aria-invalid:ring-[1px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +264,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +272,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +318,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-xs;
}
.breadcrumb li {
@apply gap-1;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-none;
}
.command-dialog > * {
@apply rounded-none p-0;
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none ring-1 duration-100;
}
.command > header {
@apply h-8 gap-2 border-b bg-input/30 px-2;
@apply h-8 gap-0 border-b bg-input/30 px-2;
}
.command > header svg {
@@ -319,7 +361,7 @@
}
.command > header input {
@apply h-full text-xs placeholder:text-muted-foreground;
@apply ps-1.5 text-xs placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -347,7 +389,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -361,7 +403,7 @@
/* Combobox */
.combobox > input[role='combobox'] {
@apply border-input dark:bg-input/30 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:aria-invalid:border-destructive/50 h-8 rounded-none border bg-transparent py-2 ps-2.5 pe-8 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1;
@apply border-input dark:bg-input/30 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-none border bg-transparent py-2 ps-2.5 pe-8 text-xs transition-colors focus-visible:ring-1 aria-invalid:ring-1;
}
.combobox > svg,
@@ -370,7 +412,7 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-none shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-none p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@@ -391,7 +433,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='separator'] {
@@ -409,6 +451,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-none data-[size=sm]:rounded-none border bg-transparent py-2 ps-2.5 pe-2 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4;
@@ -461,10 +511,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/10 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-none p-4 ring-1 duration-100 sm:max-w-sm;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
}
@@ -477,6 +532,15 @@
@apply gap-1 text-start;
}
.alert-dialog > * > header {
@apply gap-x-4 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none [&>svg:not([class*='size-'])]:size-6;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -486,11 +550,21 @@
@apply text-sm font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-sm font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-xs/relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-0 shadow-md ring-1 duration-100;
@@ -537,11 +611,11 @@
@apply bg-border -mx-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/maia.css
+98 -16
View File
@@ -1,5 +1,26 @@
/* Button */
/* Accordion */
@layer components {
.accordion {
@apply overflow-hidden rounded-2xl border;
}
.accordion > details {
@apply open:bg-muted/50 not-last:border-b;
}
.accordion > details > summary {
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply px-4 pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +268,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +276,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +322,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-4xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.command-dialog > * {
@apply rounded-4xl p-0;
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-4xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/5 rounded-4xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-9 gap-2 rounded-3xl bg-input/30 px-3;
@apply m-1 mb-0 h-9 gap-0 rounded-3xl bg-input/30 px-3;
}
.command > header svg {
@@ -319,7 +365,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -347,7 +393,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -370,11 +416,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 max-h-72 rounded-2xl p-1 shadow-2xl ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/5 max-h-72 gap-0 rounded-2xl p-0 shadow-2xl ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -391,7 +441,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -413,6 +463,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-9 w-auto border-none bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
@@ -465,10 +523,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/80 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-xs gap-6 rounded-4xl p-6 ring-1 duration-100 sm:max-w-md;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 max-w-[calc(100%-2rem)] gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
}
@@ -481,6 +544,15 @@
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -490,11 +562,21 @@
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100;
@@ -541,11 +623,11 @@
@apply bg-border/50 -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/mira.css
+98 -16
View File
@@ -1,5 +1,26 @@
/* Button */
/* Accordion */
@layer components {
.accordion {
@apply overflow-hidden rounded-md border;
}
.accordion > details {
@apply open:bg-muted/50 not-last:border-b;
}
.accordion > details > summary {
@apply gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply px-2 pt-0 pb-4 text-xs/relaxed;
}
/* Button */
.btn {
@apply rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +268,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +276,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +322,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-xs/relaxed;
}
.command-dialog > * {
@apply rounded-xl p-0;
.breadcrumb li {
@apply gap-1;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-4 [&>svg]:size-3.5;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-8 gap-2 rounded-lg bg-input/20 px-2 dark:bg-input/30;
@apply m-1 mb-0 h-8 gap-0 rounded-lg bg-input/20 px-2 dark:bg-input/30;
}
.command > header svg {
@@ -319,7 +365,7 @@
}
.command > header input {
@apply h-full text-xs/relaxed placeholder:text-muted-foreground;
@apply ps-1.5 text-xs/relaxed placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -347,7 +393,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -370,11 +416,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 dark:bg-popover max-h-72 rounded-lg p-1 shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 dark:bg-popover max-h-72 gap-0 rounded-lg p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -391,7 +441,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -413,6 +463,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-7 w-auto border-none bg-input/20 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-3.5;
@@ -469,10 +527,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/80 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-3 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 sm:max-w-sm;
}
@@ -485,6 +548,15 @@
@apply gap-1;
}
.alert-dialog > * > header {
@apply gap-x-4 gap-y-1;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-4;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -494,11 +566,21 @@
@apply text-sm font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-sm font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-xs/relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
@@ -545,11 +627,11 @@
@apply bg-border/50 -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-[0.625rem] tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/nova.css
+96 -18
View File
@@ -1,5 +1,22 @@
/* Button */
/* Accordion */
@layer components {
.accordion > details {
@apply not-last:border-b;
}
.accordion > details > summary {
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply pt-0 pb-2.5 text-sm;
}
/* Button */
.btn {
@apply rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +264,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +272,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +318,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm;
}
.command-dialog > * {
@apply rounded-xl p-0;
.breadcrumb li {
@apply gap-1;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-8 gap-2 rounded-lg border border-input/30 bg-input/30 px-2;
@apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
}
.command > header svg {
@@ -319,7 +361,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -343,11 +385,11 @@
}
.command [role='menuitem'] {
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-lg;
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -361,7 +403,7 @@
/* Combobox */
.combobox > input[role='combobox'] {
@apply border-input dark:bg-input/30 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:aria-invalid:border-destructive/50 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
@apply border-input dark:bg-input/30 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:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors focus-visible:ring-3 aria-invalid:ring-3;
}
.combobox > svg,
@@ -370,11 +412,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-lg p-1 shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-lg p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -391,7 +437,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -413,6 +459,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] border bg-transparent py-2 ps-2.5 pe-2 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
@@ -465,10 +519,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/10 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-4 rounded-xl p-4 ring-1 duration-100 sm:max-w-sm;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm;
}
@@ -481,6 +540,15 @@
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-4 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-6;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply bg-muted/50 -mx-4 -mb-4 gap-2 rounded-b-xl border-t p-4;
}
@@ -490,11 +558,21 @@
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-base font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100;
@@ -541,11 +619,11 @@
@apply bg-border -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/rhea.css
+102 -20
View File
@@ -1,5 +1,26 @@
/* Button */
/* Accordion */
@layer components {
.accordion {
@apply overflow-hidden rounded-2xl border;
}
.accordion > details {
@apply open:bg-muted/50 not-last:border-b;
}
.accordion > details > summary {
@apply gap-6 p-4 text-left text-sm font-medium hover:underline;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply px-4 pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-2xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -255,7 +276,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -263,7 +284,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -309,17 +330,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-3xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.command-dialog > * {
@apply rounded-3xl p-0;
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-3xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 rounded-3xl! shadow-xl ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-8 gap-2 rounded-2xl bg-input/50 px-2;
@apply m-1 mb-0 h-8 gap-0 rounded-2xl bg-input/50 px-2;
}
.command > header svg {
@@ -327,7 +373,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -355,7 +401,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -378,11 +424,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 rounded-2xl p-1 shadow-lg ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-h-72 gap-0 rounded-2xl p-0 shadow-lg ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -399,7 +449,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -421,6 +471,14 @@
.combobox-chip-remove {
@apply -ms-0.5 size-4.5 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/50 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply bg-input/50 border-transparent focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 data-[size=sm]:h-7 gap-1.5 rounded-2xl border px-3 py-2 text-sm transition-[color,box-shadow] duration-200 focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
@@ -473,12 +531,17 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/30 backdrop-blur-sm duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-xs gap-6 rounded-3xl p-6 shadow-xl ring-1 duration-100 sm:max-w-md;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-[min(var(--radius-4xl),24px)] p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-3xl p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md;
}
.dialog > * > :is(button, form[method='dialog']) {
@@ -493,6 +556,15 @@
@apply gap-1.5;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -502,11 +574,21 @@
@apply text-base leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/5 dark:ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-lg ring-1 duration-100;
@@ -553,11 +635,11 @@
@apply bg-border/50 -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
@@ -582,7 +664,7 @@
/* Card */
.card {
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-[min(var(--radius-4xl),24px)] text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-[min(var(--radius-4xl),24px)] [&>img:last-child]:rounded-b-[min(var(--radius-4xl),24px)];
@apply bg-card text-card-foreground ring-foreground/5 dark:ring-foreground/10 overflow-hidden rounded-3xl text-sm shadow-sm ring-1 has-[>img:first-child]:pt-0 [&>img:first-child]:rounded-t-3xl [&>img:last-child]:rounded-b-3xl;
}
.card {
@@ -594,7 +676,7 @@
}
.card > header {
@apply gap-1.5 rounded-t-[min(var(--radius-4xl),24px)] px-5 [.border-b]:pb-5;
@apply gap-1.5 rounded-t-3xl px-5 [.border-b]:pb-5;
}
.card[data-size='sm'] > header {
@@ -618,7 +700,7 @@
}
.card > footer {
@apply rounded-b-[min(var(--radius-4xl),24px)] px-5 [.border-t]:pt-5;
@apply rounded-b-3xl px-5 [.border-t]:pt-5;
}
.card[data-size='sm'] > footer {
src/css/styles/sera.css
+91 -13
View File
@@ -1,5 +1,22 @@
/* Button */
/* Accordion */
@layer components {
.accordion > details {
@apply not-last:border-b;
}
.accordion > details > summary {
@apply focus-visible:ring-ring/30 focus-visible:border-ring rounded-none gap-6 py-4 text-left text-sm font-semibold hover:underline focus-visible:ring-2;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-3.5;
}
.accordion > details > :not(summary) {
@apply pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-none border border-transparent bg-clip-padding text-xs font-semibold uppercase tracking-widest focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-[2px] aria-invalid:border-destructive aria-invalid:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-3.5;
}
@@ -263,7 +280,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -271,7 +288,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -317,17 +334,42 @@
@apply text-foreground underline-offset-4 hover:underline;
}
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-none;
}
.command-dialog > * {
@apply rounded-none p-0;
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow-md ring-1 duration-100;
}
.command > header {
@apply m-1 gap-2 border-b border-b-input bg-transparent px-3;
@apply m-1 gap-0 border-b border-b-input bg-transparent px-3;
}
.command > header svg {
@@ -335,7 +377,7 @@
}
.command > header input {
@apply h-9 px-2 text-sm placeholder:text-muted-foreground;
@apply h-9 ps-1.5 pe-2 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -363,7 +405,7 @@
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -386,11 +428,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-none p-1.5 shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-none p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1.5 overflow-y-auto p-1.5;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -407,7 +453,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -429,6 +475,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1.5 mb-0 h-8 w-auto border-transparent border-b-input bg-transparent px-2.5 shadow-none focus-within:border-transparent focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-transparent border-b-input bg-transparent focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 h-10 data-[size=sm]:h-9 gap-1.5 rounded-none border px-0 py-2 text-sm transition-[color,border-color] [&_svg:not([class*='size-'])]:size-3.5;
@@ -481,10 +535,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/20 backdrop-blur-sm duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-none p-6 shadow-md ring-1 duration-100 sm:max-w-md;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-none p-6 text-sm shadow-md ring-1 duration-100 sm:max-w-md;
}
@@ -501,6 +560,15 @@
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-none [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -510,11 +578,21 @@
@apply text-lg leading-none font-semibold tracking-wider uppercase;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-semibold tracking-wider uppercase;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground mt-0.5 text-sm leading-relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 min-w-48 gap-0 overflow-x-hidden overflow-y-auto rounded-none p-1.5 shadow-md ring-1 duration-100;
@@ -561,11 +639,11 @@
@apply bg-border/50 -mx-1.5 my-1.5 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/css/styles/vega.css
+95 -17
View File
@@ -1,5 +1,22 @@
/* Button */
/* Accordion */
@layer components {
.accordion > details {
@apply not-last:border-b;
}
.accordion > details > summary {
@apply focus-visible:ring-ring/50 focus-visible:border-ring rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3;
}
.accordion > details > summary > svg:last-child {
@apply text-muted-foreground ms-auto size-4;
}
.accordion > details > :not(summary) {
@apply pt-0 pb-4 text-sm;
}
/* Button */
.btn {
@apply rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-4;
}
@@ -247,7 +264,7 @@
@apply size-10;
}
.avatar > span:not([data-badge]) {
.avatar > span:not(.avatar-badge) {
@apply bg-muted text-muted-foreground rounded-[inherit];
}
@@ -255,7 +272,7 @@
@apply rounded-[inherit];
}
.avatar > [data-badge] {
.avatar > .avatar-badge {
@apply bg-primary text-primary-foreground ring-background;
}
@@ -301,17 +318,42 @@
@apply text-primary underline-offset-4 hover:underline;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl p-1;
/* Breadcrumb */
.breadcrumb > ol {
@apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
}
.command-dialog > * {
@apply rounded-xl p-0;
.breadcrumb li {
@apply gap-1.5;
}
.breadcrumb a {
@apply transition-colors hover:text-foreground;
}
.breadcrumb [aria-current='page'] {
@apply font-normal text-foreground;
}
.breadcrumb li[aria-hidden='true'] > svg {
@apply size-3.5;
}
.breadcrumb li > span[aria-hidden='true'] {
@apply size-5 [&>svg]:size-4;
}
/* Command */
.command {
@apply bg-popover text-popover-foreground rounded-xl! p-1;
}
.command-dialog > .command {
@apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl! ring-1 duration-100;
}
.command > header {
@apply m-1 mb-0 h-8 gap-2 rounded-lg border border-input/30 bg-input/30 px-2;
@apply m-1 mb-0 h-8 gap-0 rounded-lg border border-input/30 bg-input/30 px-2;
}
.command > header svg {
@@ -319,7 +361,7 @@
}
.command > header input {
@apply h-full text-sm placeholder:text-muted-foreground;
@apply ps-1.5 text-sm placeholder:text-muted-foreground;
}
.command [role='menu'] {
@@ -343,11 +385,11 @@
}
.command [role='menuitem'] {
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
@apply gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 in-[.command-dialog]:rounded-lg;
}
.command [role='menuitem'].active {
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
@apply bg-muted text-foreground [&_svg]:text-foreground;
}
.command [data-shortcut] {
@@ -370,11 +412,15 @@
}
.combobox [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 rounded-md p-1 shadow-md ring-1 duration-100;
@apply bg-popover text-popover-foreground ring-foreground/10 max-h-72 gap-0 rounded-md p-0 shadow-md ring-1 duration-100;
}
.combobox [role='listbox'] {
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto;
@apply max-h-[min(18rem,var(--available-height,18rem))] scroll-py-1 overflow-y-auto p-1;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true']))) {
@apply p-0;
}
.combobox [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
@@ -391,7 +437,7 @@
.combobox [role='option'].active,
.combobox [role='option']:focus-visible {
@apply bg-muted text-foreground [&_svg]:text-foreground;
@apply bg-accent text-accent-foreground [&_svg]:text-accent-foreground;
}
.combobox [role='group'] {
@@ -413,6 +459,14 @@
.combobox-chip-remove {
@apply -ms-1 opacity-50 hover:opacity-100 [&_svg]:size-3.5;
}
.combobox [data-popover] > .input-group {
@apply m-1 mb-0 h-8 w-auto border-input/30 bg-input/30 shadow-none focus-within:border-inherit focus-within:ring-0;
}
.combobox [data-popover] > input[role='combobox'] {
@apply mb-1 w-full;
}
/* Select */
*:not(select).select > button {
@apply border-input dark:bg-input/30 dark:hover:bg-input/50 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:aria-invalid:border-destructive/50 h-9 data-[size=sm]:h-8 gap-1.5 rounded-md border bg-transparent py-2 ps-2.5 pe-2 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
@@ -465,10 +519,15 @@
/* Dialog */
.dialog::backdrop,
.alert-dialog::backdrop,
.command-dialog::backdrop {
@apply bg-black/10 backdrop-blur-xs duration-100;
}
.alert-dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-xs gap-6 rounded-xl p-6 ring-1 duration-100 sm:max-w-lg;
}
.dialog > * {
@apply bg-popover text-popover-foreground ring-foreground/10 max-w-[calc(100%-2rem)] gap-6 rounded-xl p-6 text-sm ring-1 duration-100 sm:max-w-md;
}
@@ -481,6 +540,15 @@
@apply gap-2;
}
.alert-dialog > * > header {
@apply gap-x-6 gap-y-1.5;
}
.alert-dialog > * > header > figure {
@apply bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md [&>svg:not([class*='size-'])]:size-8;
}
.alert-dialog > * > footer,
.dialog > * > footer {
@apply gap-2;
}
@@ -490,11 +558,21 @@
@apply leading-none font-medium;
}
.alert-dialog > * > header > h2,
.alert-dialog > * > [data-title] {
@apply text-lg font-medium;
}
.dialog > * > header > p,
.dialog > * > [data-description] {
@apply text-muted-foreground text-sm leading-normal [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
.alert-dialog > * > header > p,
.alert-dialog > * > [data-description] {
@apply text-muted-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a:hover]:text-foreground;
}
/* Dropdown Menu */
.dropdown-menu > [data-popover] {
@apply bg-popover text-popover-foreground ring-foreground/10 gap-0 overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100;
@@ -541,11 +619,11 @@
@apply bg-border -mx-1 my-1 h-px;
}
.dropdown-menu :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-muted-foreground font-sans text-xs tracking-widest;
}
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child) {
.dropdown-menu :is([role='menuitem'], [role='menuitemcheckbox'], [role='menuitemradio']):is(:focus-visible, .active) :is([data-shortcut], kbd:last-child, .kbd:last-child) {
@apply text-accent-foreground;
}
src/jinja/combobox.html.jinja
+26 -1
View File
@@ -8,6 +8,7 @@
multiple=false,
placeholder=None,
close_on_select=false,
clear=false,
auto_highlight=false,
format="value",
main_attrs={},
@@ -51,7 +52,23 @@
{% endfor %}
>
{% if multiple %}
<div class="combobox-chips {{ input_attrs.class }}">
<input
type="text"
role="combobox"
class="{{ input_attrs.class }}"
placeholder="{{ placeholder or '' }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% elif clear %}
<div class="input-group {{ input_attrs.class }}">
<input
type="text"
role="combobox"
@@ -66,6 +83,14 @@
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<span role="group" data-align="inline-end">
<button type="button" data-clear aria-label="Clear selection">
<svg class="size-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="Open suggestions" aria-haspopup="listbox" aria-expanded="false" aria-controls="{{ id }}-listbox">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
</span>
</div>
{% else %}
<input
src/jinja/command.html.jinja
+2 -2
View File
@@ -50,7 +50,7 @@
id="{{ id }}-menu"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar-sm {{ menu_attrs.class }}"
class="{{ menu_attrs.class }}"
{% for key, value in menu_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
@@ -121,7 +121,7 @@
id="{{ id }}-menu"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar-sm {{ menu_attrs.class }}"
class="{{ menu_attrs.class }}"
{% for key, value in menu_attrs.items() %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
src/js/accordion.js
+68
View File
@@ -0,0 +1,68 @@
(() => {
const states = new WeakMap();
const isDisabled = (details) => {
const summary = details.querySelector(':scope > summary');
return details.getAttribute('aria-disabled') === 'true'
|| details.dataset.disabled === 'true'
|| summary?.getAttribute('aria-disabled') === 'true';
};
const isMultiple = (root) => root.hasAttribute('data-multiple');
const closeSiblings = (root, activeDetails) => {
if (isMultiple(root) || !activeDetails.open) return;
root.querySelectorAll(':scope > details[open]').forEach((details) => {
if (details !== activeDetails) details.open = false;
});
};
const initAccordion = (root) => {
if (root.dataset.accordionInitialized) return;
const handleClick = (event) => {
const summary = event.target.closest('summary');
const details = summary?.closest('details');
if (!details || details.parentElement !== root || !isDisabled(details)) return;
event.preventDefault();
};
const handleKeydown = (event) => {
if (event.key !== 'Enter' && event.key !== ' ') return;
const summary = event.target.closest('summary');
const details = summary?.closest('details');
if (!details || details.parentElement !== root || !isDisabled(details)) return;
event.preventDefault();
};
const handleToggle = (event) => {
const details = event.target;
if (details.parentElement !== root) return;
if (isDisabled(details)) {
details.open = false;
return;
}
closeSiblings(root, details);
};
root.addEventListener('click', handleClick);
root.addEventListener('keydown', handleKeydown);
root.addEventListener('toggle', handleToggle, true);
root.querySelectorAll(':scope > details[open]').forEach((details) => closeSiblings(root, details));
states.set(root, { handleClick, handleToggle });
root._destroy = () => {
root.removeEventListener('click', handleClick);
root.removeEventListener('keydown', handleKeydown);
root.removeEventListener('toggle', handleToggle, true);
states.delete(root);
};
root.dataset.accordionInitialized = 'true';
root.dispatchEvent(new CustomEvent('basecoat:initialized'));
};
if (window.basecoat) {
window.basecoat.register('accordion', '.accordion:not([data-accordion-initialized])', initAccordion);
}
})();
src/js/combobox.js
+115 -26
View File
@@ -2,12 +2,29 @@
const states = new WeakMap();
const getElements = (root) => {
const input = root.querySelector(':scope > input[role="combobox"], :scope > .combobox-chips input[role="combobox"]');
const chips = root.querySelector(':scope > .combobox-chips');
const popover = root.querySelector(':scope > [data-popover]');
const input = root.querySelector(':scope > input[role="combobox"], :scope > .input-group input[role="combobox"], :scope > .combobox-chips input[role="combobox"]')
|| popover?.querySelector('input[role="combobox"]');
const chips = root.querySelector(':scope > .combobox-chips');
const popupTrigger = root.querySelector(':scope > button[aria-haspopup="listbox"]');
const trigger = popupTrigger || root.querySelector(':scope > .input-group button[aria-haspopup="listbox"]');
const clearButton = root.querySelector('[data-clear]');
const valueTarget = popupTrigger?.querySelector('[data-value]') || (popupTrigger?.matches('[data-value]') ? popupTrigger : null);
const listbox = popover ? popover.querySelector('[role="listbox"]') : null;
const hiddenInput = root.querySelector(':scope > input[type="hidden"]');
return { input, chips, popover, listbox, hiddenInput };
return { input, chips, trigger, clearButton, valueTarget, popover, listbox, hiddenInput };
};
const ensureMultipleInputSurface = (root, elements) => {
if (elements.listbox?.getAttribute('aria-multiselectable') !== 'true' || elements.chips || !elements.input) return elements;
if (elements.input.parentElement !== root) return elements;
const chips = document.createElement('div');
chips.className = 'combobox-chips';
root.insertBefore(chips, elements.input);
chips.appendChild(elements.input);
return getElements(root);
};
const getValue = option => option.dataset.value ?? option.textContent.trim();
@@ -111,7 +128,7 @@
state.popover.dataset.empty = String(state.visibleOptions.length === 0);
};
const filterOptions = (state, { preserveActive = false } = {}) => {
const filterOptions = (state, { preserveActive = false, search: forcedSearch } = {}) => {
const previousActive = state.activeIndex > -1 ? state.options[state.activeIndex] : null;
state.visibleOptions = [];
@@ -127,7 +144,7 @@
return;
}
const search = state.input.value.trim().toLowerCase();
const search = (forcedSearch ?? state.input.value).trim().toLowerCase();
state.allOptions.forEach(option => {
if (option.hasAttribute('data-force')) {
@@ -161,20 +178,42 @@
const chip = document.createElement('span');
chip.className = 'combobox-chip';
chip.dataset.value = entry.value;
chip.textContent = entry.label;
const label = document.createElement('span');
label.textContent = entry.label;
const remove = document.createElement('button');
remove.type = 'button';
remove.className = 'combobox-chip-remove';
remove.className = 'combobox-chip-remove btn';
remove.dataset.variant = 'ghost';
remove.dataset.size = 'icon-xs';
remove.setAttribute('aria-label', `Remove ${entry.label}`);
remove.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>';
remove.addEventListener('click', () => root.deselect(entry.value));
remove.addEventListener('click', (event) => {
event.stopPropagation();
root.deselect(entry.value);
state.input.focus();
});
chip.appendChild(label);
chip.appendChild(remove);
state.chips.insertBefore(chip, state.input);
});
};
const syncTriggerValue = (state) => {
if (!state.valueTarget) return;
const selected = getSelection(state);
state.valueTarget.textContent = state.isMultiple
? selected.map(entry => entry.label).join(', ')
: (selected[0]?.label || state.valueTarget.dataset.placeholder || '');
};
const syncClearButton = (state) => {
if (!state.clearButton) return;
state.clearButton.hidden = getSelection(state).length === 0 && state.input.value === '';
};
const syncSelectedOptions = (state) => {
state.options.forEach(option => {
if (state.selected.has(getValue(option))) {
@@ -195,7 +234,7 @@
state.input.value = '';
} else if (normalized[0]) {
state.selected.set(normalized[0].value, normalized[0]);
state.input.value = normalized[0].label;
state.input.value = state.valueTarget ? '' : normalized[0].label;
} else {
state.input.value = '';
}
@@ -206,6 +245,8 @@
renderChips(root);
filterOptions(state, { preserveActive: true });
}
syncTriggerValue(state);
syncClearButton(state);
if (triggerEvent) {
root.dispatchEvent(new CustomEvent('change', {
@@ -219,15 +260,35 @@
if (state.popover.getAttribute('aria-hidden') === 'true') return;
state.popover.setAttribute('aria-hidden', 'true');
state.input.setAttribute('aria-expanded', 'false');
state.trigger?.setAttribute('aria-expanded', 'false');
setActiveOption(state, -1);
if (focusInput) state.input.focus();
if (focusInput) {
state.skipOpenOnFocus = true;
state.input.focus();
requestAnimationFrame(() => { state.skipOpenOnFocus = false; });
}
};
const openPopover = (state) => {
const { root } = state;
if (state.popover.getAttribute('aria-hidden') === 'false') return;
document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
root.refresh();
const selected = getSelection(state)[0];
if (state.valueTarget) state.input.value = '';
const search = !state.isMultiple && selected && state.input.value === selected.label ? '' : undefined;
filterOptions(state, { search });
state.popover.setAttribute('aria-hidden', 'false');
state.input.setAttribute('aria-expanded', 'true');
state.trigger?.setAttribute('aria-expanded', 'true');
if (state.trigger) state.input.focus();
};
const refreshCombobox = (root) => {
const state = states.get(root);
if (!state) return;
const elements = getElements(root);
let elements = getElements(root);
if (!elements.input || !elements.popover || !elements.listbox || !elements.hiddenInput) {
const missing = [];
if (!elements.input) missing.push('input');
@@ -238,6 +299,7 @@
return;
}
elements = ensureMultipleInputSurface(root, elements);
const previousValue = elements.hiddenInput.value;
const previousInputValue = elements.input.value;
Object.assign(state, elements, getOptions(elements.listbox));
@@ -264,6 +326,8 @@
filterOptions(state, { preserveActive: true });
}
}
syncTriggerValue(state);
syncClearButton(state);
};
const resolveEntry = (state, value) => {
@@ -290,7 +354,8 @@
if (state.closeOnSelect) root.close(true);
} else {
setSelected(root, entry);
root.close(true);
root.close(state.trigger ? false : true);
state.trigger?.focus();
}
};
@@ -302,6 +367,15 @@
setSelected(root, getSelection(state).filter(item => item.value !== normalized));
};
const clearValue = (root) => {
const state = states.get(root);
setSelected(root, [], true);
state.input.value = '';
filterOptions(state);
syncClearButton(state);
if (state.popover.getAttribute('aria-hidden') === 'false') state.input.focus();
};
const handleKeydown = (event, root) => {
const state = states.get(root);
if (!['ArrowDown', 'ArrowUp', 'Enter', 'Home', 'End', 'Escape', 'Backspace'].includes(event.key)) return;
@@ -322,7 +396,7 @@
if (!isOpen && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
event.preventDefault();
root.open();
openPopover(state);
}
if (state.popover.getAttribute('aria-hidden') === 'true') return;
@@ -355,7 +429,7 @@
const initCombobox = (root) => {
if (root.dataset.comboboxInitialized) return;
const state = { root, activeIndex: -1, allOptions: [], options: [], visibleOptions: [], selected: new Map(), format: 'value', manualFilter: false };
const state = { root, activeIndex: -1, allOptions: [], options: [], visibleOptions: [], selected: new Map(), format: 'value', manualFilter: false, skipOpenOnFocus: false };
states.set(root, state);
root.refresh = () => refreshCombobox(root);
@@ -366,14 +440,6 @@
return;
}
root.open = () => {
if (state.popover.getAttribute('aria-hidden') === 'false') return;
document.dispatchEvent(new CustomEvent('basecoat:popover', { detail: { source: root } }));
root.refresh();
filterOptions(state);
state.popover.setAttribute('aria-hidden', 'false');
state.input.setAttribute('aria-expanded', 'true');
};
root.close = (focusInput = false) => closePopover(state, focusInput);
root.select = (value) => selectValue(root, value);
@@ -394,17 +460,34 @@
root.selectNone = () => setSelected(root, []);
}
const handleInputFocus = root.open;
const handleInputClick = root.open;
const handleInputFocus = () => {
if (state.skipOpenOnFocus) return;
openPopover(state);
};
const handleInputClick = () => openPopover(state);
const handleInput = () => {
root.open();
openPopover(state);
filterOptions(state);
if (!state.isMultiple) {
state.hiddenInput.value = '';
state.selected.clear();
syncSelectedOptions(state);
syncTriggerValue(state);
syncClearButton(state);
}
};
const handleTriggerClick = () => {
if (state.popover.getAttribute('aria-hidden') === 'false') {
root.close(false);
} else {
openPopover(state);
}
};
const handleClearClick = (event) => {
event.preventDefault();
event.stopPropagation();
clearValue(root);
};
const handleInputKeydown = (event) => handleKeydown(event, root);
const handleListboxMousemove = (event) => {
const option = event.target.closest('[role="option"]');
@@ -427,6 +510,8 @@
state.input.addEventListener('click', handleInputClick);
state.input.addEventListener('input', handleInput);
state.input.addEventListener('keydown', handleInputKeydown);
state.trigger?.addEventListener('click', handleTriggerClick);
state.clearButton?.addEventListener('click', handleClearClick);
state.listbox.addEventListener('mousemove', handleListboxMousemove);
state.listbox.addEventListener('click', handleListboxClick);
document.addEventListener('click', handleDocumentClick);
@@ -437,6 +522,8 @@
state.input.removeEventListener('click', handleInputClick);
state.input.removeEventListener('input', handleInput);
state.input.removeEventListener('keydown', handleInputKeydown);
state.trigger?.removeEventListener('click', handleTriggerClick);
state.clearButton?.removeEventListener('click', handleClearClick);
state.listbox.removeEventListener('mousemove', handleListboxMousemove);
state.listbox.removeEventListener('click', handleListboxClick);
document.removeEventListener('click', handleDocumentClick);
@@ -444,11 +531,11 @@
state.chips?.querySelectorAll('.combobox-chip').forEach(chip => chip.remove());
states.delete(root);
delete root.refresh;
delete root.open;
delete root.close;
delete root.select;
delete root.selectByValue;
delete root.setValue;
delete root.clear;
delete root.deselect;
delete root.toggle;
delete root.selectAll;
@@ -457,6 +544,8 @@
state.popover.setAttribute('aria-hidden', 'true');
state.input.setAttribute('aria-expanded', 'false');
state.trigger?.setAttribute('aria-expanded', 'false');
root.clear = () => clearValue(root);
Object.defineProperty(root, 'value', {
configurable: true,
src/js/command.js
+3 -1
View File
@@ -2,7 +2,9 @@
const states = new WeakMap();
const isDisabled = (item) =>
item.hasAttribute('disabled') || item.getAttribute('aria-disabled') === 'true';
item.hasAttribute('disabled') ||
item.getAttribute('aria-disabled') === 'true' ||
item.getAttribute('data-disabled') === 'true';
const getElements = (container) => ({
input: container.querySelector('header input'),
src/js/dropdown-menu.js
+12 -1
View File
@@ -146,7 +146,18 @@
const handleMenuMouseleave = () => setActiveItem(state, -1);
const handleMenuClick = (event) => {
const menuItem = event.target.closest('[role^="menuitem"]');
if (menuItem && !isDisabled(menuItem)) root.close();
if (!menuItem || isDisabled(menuItem)) return;
if (menuItem.getAttribute('role') === 'menuitemcheckbox') {
menuItem.setAttribute('aria-checked', menuItem.getAttribute('aria-checked') !== 'true');
} else if (menuItem.getAttribute('role') === 'menuitemradio') {
const group = menuItem.closest('[role="group"], [role="menu"]');
group?.querySelectorAll('[role="menuitemradio"]').forEach((item) => {
if (!isDisabled(item)) item.setAttribute('aria-checked', item === menuItem ? 'true' : 'false');
});
}
root.close();
};
const handleDocumentClick = (event) => {
src/nunjucks/combobox.njk
+27 -1
View File
@@ -7,6 +7,7 @@
@param multiple {boolean} [optional] [default=false] - Enables multiple selection mode with chips.
@param placeholder {string} [optional] - Placeholder text for the visible input.
@param close_on_select {boolean} [optional] [default=false] - Closes the popover when selecting an option in multiple mode.
@param clear {boolean} [optional] [default=false] - Shows a clear button in single-select mode.
@param auto_highlight {boolean} [optional] [default=false] - Highlights the first matching option while filtering.
@param format {string} [optional] [default="value"] - Hidden input serialization format: "value" or "object".
@param main_attrs {object} [optional] - Additional HTML attributes for the root div.
@@ -22,6 +23,7 @@
multiple=false,
placeholder=None,
close_on_select=false,
clear=false,
auto_highlight=false,
format="value",
main_attrs={},
@@ -65,7 +67,23 @@
{% endfor %}
>
{% if multiple %}
<div class="combobox-chips {{ input_attrs.class }}">
<input
type="text"
role="combobox"
class="{{ input_attrs.class }}"
placeholder="{{ placeholder or '' }}"
autocomplete="off"
autocorrect="off"
spellcheck="false"
aria-autocomplete="list"
aria-expanded="false"
aria-controls="{{ id }}-listbox"
{% for key, value in input_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
{% elif clear %}
<div class="input-group {{ input_attrs.class }}">
<input
type="text"
role="combobox"
@@ -80,6 +98,14 @@
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
>
<span role="group" data-align="inline-end">
<button type="button" data-clear aria-label="Clear selection">
<svg class="size-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
</button>
<button type="button" class="btn" data-variant="ghost" data-size="icon-xs" aria-label="Open suggestions" aria-haspopup="listbox" aria-expanded="false" aria-controls="{{ id }}-listbox">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
</span>
</div>
{% else %}
<input
src/nunjucks/command.njk
+2 -2
View File
@@ -50,7 +50,7 @@
id="{{ id }}-menu"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar-sm {{ menu_attrs.class }}"
class="{{ menu_attrs.class }}"
{% for key, value in menu_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
@@ -121,7 +121,7 @@
id="{{ id }}-menu"
aria-orientation="vertical"
data-empty="{{ empty_text }}"
class="scrollbar-sm {{ menu_attrs.class }}"
class="{{ menu_attrs.class }}"
{% for key, value in menu_attrs %}
{% if key != 'class' %}{{ key }}="{{ value }}"{% endif %}
{% endfor %}
src/pages/index.astro
+50 -48
View File
@@ -1,8 +1,7 @@
---
import "../css/landing.css";
import basecoatJsUrl from "basecoat-css/basecoat.min?url";
import dropdownMenuJsUrl from "basecoat-css/dropdown-menu.min?url";
import { CommandDialog } from "reallysimpledocs/components";
import basecoatJsUrl from "basecoat-css/all.min?url";
import StyleHead from "../../docs/src/site/StyleHead.astro";
import vegaUrl from "../../docs/src/assets/styles/style-vega.css?url";
import novaUrl from "../../docs/src/assets/styles/style-nova.css?url";
import maiaUrl from "../../docs/src/assets/styles/style-maia.css?url";
@@ -180,36 +179,7 @@ const sidebarSections = [
});
})();
</script>
<style id="docs-style-gate" is:inline>
html[data-style-pending] body {
visibility: hidden;
}
</style>
<script is:inline define:vars={{ styleUrls }}>
(() => {
const styleGateId = "docs-style-gate";
const styleLinkId = "docs-style-variant";
const getStoredStyle = () => {
try {
return localStorage.getItem("styleVariant") || "vega";
} catch (_) {
return "vega";
}
};
const getStyleHref = (style) => {
const href = styleUrls[style];
return href?.startsWith("/docs/src/assets/styles/") ? `${href}?direct` : href;
};
const nextStyle = Object.prototype.hasOwnProperty.call(styleUrls, getStoredStyle()) ? getStoredStyle() : "vega";
const href = getStyleHref(nextStyle);
document.documentElement.dataset.styleVariant = nextStyle;
if (!href) return;
document.documentElement.setAttribute("data-style-pending", "");
document.write(
`<link id="${styleLinkId}" rel="stylesheet" href="${href}" onload="document.documentElement.removeAttribute('data-style-pending');document.getElementById('${styleGateId}')?.remove()" onerror="document.documentElement.removeAttribute('data-style-pending');document.getElementById('${styleGateId}')?.remove()">`,
);
})();
</script>
<StyleHead />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title} | Basecoat</title>
@@ -224,9 +194,9 @@ const sidebarSections = [
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={socialImage.src} />
<script src={basecoatJsUrl} defer></script>
<script src={dropdownMenuJsUrl} defer></script>
</head>
<body class="min-h-dvh overflow-x-clip bg-background text-foreground antialiased">
<CommandDialog />
<header class="bg-background sticky inset-x-0 top-0 isolate z-30 flex shrink-0 items-center gap-2">
<div class="flex h-14 w-full items-center justify-between gap-2 px-4">
<div class="flex min-w-0 items-center gap-1">
@@ -242,6 +212,18 @@ const sidebarSections = [
</div>
<div class="ml-auto flex min-w-0 flex-1 items-center justify-end gap-2">
<div
class="input-group h-8 w-full min-w-0 max-w-72 cursor-text sm:ml-auto"
role="button"
tabindex="0"
aria-label="Search docs"
onclick="window.rsdOpenCommandSearch?.()"
onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); window.rsdOpenCommandSearch?.(); }"
>
<input type="text" placeholder="Search..." readonly tabindex="-1" aria-hidden="true" />
<span data-align="start" aria-hidden="true"><Fragment set:html={Search} /></span>
<span data-align="end" aria-hidden="true"><kbd class="kbd">⌘K</kbd></span>
</div>
<select id="style-variant-select" class="select hidden h-8 w-28 shrink-0 text-sm leading-none sm:block" aria-label="Style pack">
<option value="vega">Vega</option>
<option value="nova">Nova</option>
@@ -290,7 +272,7 @@ const sidebarSections = [
<section class="flex-1 p-0">
<div class="w-full overflow-hidden">
<div class="theme-neutral relative flex h-[980px] max-h-[calc(100svh-14rem)] min-h-[680px] w-full max-w-none flex-col gap-(--gap) overflow-hidden bg-muted p-12 pb-0! [--gap:--spacing(8)] min-[1900px]:h-[1120px] min-[1900px]:p-12 min-[1900px]:[--gap:--spacing(10)]! lg:p-6 lg:[--gap:--spacing(6)] dark:bg-background">
<div class="relative flex h-[980px] max-h-[calc(100svh-14rem)] min-h-[680px] w-full max-w-none flex-col gap-(--gap) overflow-hidden bg-muted p-12 pb-0! [--gap:--spacing(8)] min-[1900px]:h-[1120px] min-[1900px]:p-12 min-[1900px]:[--gap:--spacing(10)]! lg:p-6 lg:[--gap:--spacing(6)] dark:bg-background" style="--chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2);">
<div class="relative z-10 mx-auto grid w-full grid-cols-1 gap-(--gap) [&_.card]:w-full md:max-w-3xl md:grid-cols-2 lg:max-w-none lg:grid-cols-3 xl:max-w-[1600px] min-[1400px]:grid-cols-4! 2xl:max-w-[1900px] min-[1900px]:grid-cols-5!">
<div class="flex min-w-0 flex-col gap-(--gap)">
<article class="card relative">
@@ -392,7 +374,7 @@ const sidebarSections = [
["Retirement", "$420,000", "65% achieved", "$273,000", "65%"],
["Real Estate", "$85,000", "32% achieved", "$27,200", "32%"],
].map(([label, amount, progress, value, width]) => (
<div class="landing-demo-surface bg-muted/50 p-4">
<div class="rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none bg-muted/50 p-4">
<p class="text-xs font-medium tracking-wider text-muted-foreground uppercase">{label}</p>
<p class="mt-3 text-3xl font-semibold tabular-nums">{amount}</p>
<div class="progress mt-3" role="progressbar" aria-label={`${label} savings progress`} aria-valuenow={parseInt(width, 10)} aria-valuemin="0" aria-valuemax="100"><span style={`width:${width}`}></span></div>
@@ -418,7 +400,7 @@ const sidebarSections = [
["May", 100],
].map(([month, height]) => (
<div class="flex h-full flex-1 flex-col justify-end gap-2">
<div class="landing-demo-chart-bar min-h-2 bg-chart-2" style={`height:${height}%`}></div>
<div class="rounded-t-md [html[data-style-variant=lyra]_&]:rounded-t-none [html[data-style-variant=sera]_&]:rounded-t-none min-h-2 bg-chart-2" style={`height:${height}%`}></div>
<span class="text-center text-xs text-muted-foreground">{month}</span>
</div>
))}
@@ -426,8 +408,8 @@ const sidebarSections = [
</section>
<section>
<div class="grid w-full grid-cols-1 gap-3 xl:grid-cols-2">
<div class="landing-demo-surface bg-muted/50 p-4"><p class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Upcoming</p><p class="text-base font-semibold">May 2024</p><p class="text-sm text-muted-foreground">Scheduled</p></div>
<div class="landing-demo-surface hidden bg-muted/50 p-4 xl:block"><p class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Savings Plan</p><p class="text-base font-semibold">Accelerated</p><p class="text-sm text-muted-foreground">Recurring</p></div>
<div class="rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none bg-muted/50 p-4"><p class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Upcoming</p><p class="text-base font-semibold">May 2024</p><p class="text-sm text-muted-foreground">Scheduled</p></div>
<div class="rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none hidden bg-muted/50 p-4 xl:block"><p class="text-xs font-medium tracking-wider text-muted-foreground uppercase">Savings Plan</p><p class="text-base font-semibold">Accelerated</p><p class="text-sm text-muted-foreground">Recurring</p></div>
</div>
</section>
<footer><button class="btn w-full" type="button">View Full Report</button></footer>
@@ -440,7 +422,7 @@ const sidebarSections = [
<span class="badge" data-variant="outline"><span class="size-2 rounded-full bg-yellow-500"></span> Pending Setup</span>
</header>
<section class="flex flex-1 flex-col justify-end">
<article class="item landing-demo-surface" data-variant="muted">
<article class="item rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none" data-variant="muted">
<section class="gap-3">
<div class="flex justify-between"><span class="text-muted-foreground">Net Royalties</span><span class="font-medium tabular-nums">$1,248.75</span></div>
<div class="mt-3 flex justify-between"><span class="text-muted-foreground">Processing Fee</span><span class="font-medium tabular-nums">-$37.46</span></div>
@@ -460,9 +442,9 @@ const sidebarSections = [
<section>
<div class="grid gap-2">
{holdings.map(([name, shares, _amount, data]) => (
<div class="landing-demo-surface flex items-center gap-3 bg-muted/50 p-3">
<div class="rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none flex items-center gap-3 bg-muted/50 p-3">
<div class="mr-auto"><p class="text-sm font-medium">{name}</p><p class="text-sm text-muted-foreground">{shares}</p></div>
<div class="hidden h-8 w-24 items-end gap-1 md:flex">{data.map((height) => <span class="landing-demo-chart-bar min-h-1 flex-1 bg-chart-2" style={`height:${height}%`}></span>)}</div>
<div class="hidden h-8 w-24 items-end gap-1 md:flex">{data.map((height) => <span class="rounded-t-md [html[data-style-variant=lyra]_&]:rounded-t-none [html[data-style-variant=sera]_&]:rounded-t-none min-h-1 flex-1 bg-chart-2" style={`height:${height}%`}></span>)}</div>
</div>
))}
</div>
@@ -499,14 +481,14 @@ const sidebarSections = [
<div class="field"><label for="email-address">Email Address</label><input id="email-address" class="input" type="email" placeholder="artist@studio.inc" /></div>
<div class="field"><div class="flex items-center justify-between"><label for="current-password">Current Password</label><a href="#" class="text-xs font-medium tracking-wider text-muted-foreground uppercase hover:text-foreground">Forgot?</a></div><input id="current-password" class="input" type="password" placeholder="••••••••••••••••••••••••" /></div>
</section>
<footer class="flex-col gap-4"><button class="btn w-full" type="button"><Fragment set:html={Lock} /> Update Security</button><a href="#" class="item landing-demo-surface" data-variant="muted"><figure class="text-destructive"><Fragment set:html={Info} /></figure><section><h3>Danger Zone</h3><p class="line-clamp-1">Archive account and remove catalog</p></section><aside class="text-muted-foreground [&_svg]:size-4"><Fragment set:html={ChevronRight} /></aside></a></footer>
<footer class="flex-col gap-4"><button class="btn w-full" type="button"><Fragment set:html={Lock} /> Update Security</button><a href="#" class="item rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none" data-variant="muted"><figure class="text-destructive"><Fragment set:html={Info} /></figure><section><h3>Danger Zone</h3><p class="line-clamp-1">Archive account and remove catalog</p></section><aside class="text-muted-foreground [&_svg]:size-4"><Fragment set:html={ChevronRight} /></aside></a></footer>
</article>
</div>
<div class="hidden min-w-0 flex-col gap-(--gap) md:flex">
<article class="card relative">
<section class="flex justify-center pt-6">
<div class="landing-demo-surface border border-border bg-white p-4">
<div class="rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none border border-border bg-white p-4">
<svg viewBox="0 0 21 21" class="size-40 text-black" role="img" aria-label="Connect device QR code" shape-rendering="crispEdges">
<rect width="21" height="21" fill="white" />
{qrRows.map((row, y) => [...row].map((cell, x) => cell === "1" && <rect x={x} y={y} width="1" height="1" />))}
@@ -522,7 +504,7 @@ const sidebarSections = [
<div class="field w-full"><label for="transfer-amount">Amount to Transfer</label><div class="input-group w-full"><span data-align="start">$</span><input id="transfer-amount" class="w-full" value="1,200.00" /></div></div>
<div class="field w-full"><label for="from-account">From Account</label><select id="from-account" class="select w-full"><option>Main Checking (··8402) — $12,450.00</option></select></div>
<div class="field w-full"><label for="to-account">To Account</label><select id="to-account" class="select w-full"><option>High Yield Savings (··1192) — $42,100.00</option></select></div>
<article class="item landing-demo-surface" data-variant="muted">
<article class="item rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none" data-variant="muted">
<section class="gap-3">
<div class="flex justify-between"><span class="text-muted-foreground">Estimated arrival</span><span class="font-medium">Today, Apr 14</span></div><hr class="my-3 border-border" />
<div class="flex justify-between"><span class="text-muted-foreground">Transaction fee</span><span class="font-medium tabular-nums">$0.00</span></div><hr class="my-3 border-border" />
@@ -573,7 +555,7 @@ const sidebarSections = [
["Scheduled transfers", "Set up a transfer to send at a later date."],
["Recurring card payments", "Manage your repeated card transactions."],
].map(([name, desc], index) => (
<a href="#" class="item landing-demo-surface" data-variant="muted">
<a href="#" class="item rounded-md [html[data-style-variant=nova]_&]:rounded-lg [html[data-style-variant=maia]_&]:rounded-2xl [html[data-style-variant=luma]_&]:rounded-2xl [html[data-style-variant=rhea]_&]:rounded-2xl [html[data-style-variant=lyra]_&]:rounded-none [html[data-style-variant=sera]_&]:rounded-none" data-variant="muted">
<figure><Fragment set:html={index === 0 ? Settings : index === 1 ? Calendar : Refresh} /></figure>
<section><h3>{name}</h3><p>{desc}</p></section>
<aside class="text-muted-foreground [&_svg]:size-4"><Fragment set:html={ChevronRight} /></aside>
@@ -630,7 +612,7 @@ const sidebarSections = [
<section class="flex flex-col gap-4">
<div class="flex h-[140px] w-full items-end gap-2" role="img" aria-label="Power usage by hour">
{[32, 74, 82, 63, 89, 76, 100, 84].map((height, index) => (
<div class="flex h-full flex-1 flex-col justify-end gap-1.5"><div class="landing-demo-chart-bar min-h-2 bg-chart-2" style={`height:${height}%`}></div><span class="text-center text-xs text-muted-foreground">{["6a", "8a", "10a", "12p", "2p", "4p", "6p", "8p"][index]}</span></div>
<div class="flex h-full flex-1 flex-col justify-end gap-1.5"><div class="rounded-t-md [html[data-style-variant=lyra]_&]:rounded-t-none [html[data-style-variant=sera]_&]:rounded-t-none min-h-2 bg-chart-2" style={`height:${height}%`}></div><span class="text-center text-xs text-muted-foreground">{["6a", "8a", "10a", "12p", "2p", "4p", "6p", "8p"][index]}</span></div>
))}
</div>
<hr class="border-border" />
@@ -649,6 +631,26 @@ const sidebarSections = [
</section>
</main>
<footer class="px-6 py-8 text-center text-sm text-muted-foreground">
Built by
<a
href="https://x.com/hunvreus"
target="_blank"
rel="noopener"
class="underline underline-offset-2 decoration-muted-foreground/50 transition-all hover:decoration-foreground/50"
>
Ronan Berder</a
>.
<a
href="https://github.com/sponsors/hunvreus"
target="_blank"
rel="noopener"
class="underline underline-offset-2 decoration-muted-foreground/50 transition-all hover:decoration-foreground/50"
>
Sponsor me</a
>.
</footer>
<script is:inline define:vars={{ styleUrls }}>
(() => {
const styleSelect = document.getElementById("style-variant-select");