diff --git a/CHANGELOG.md b/CHANGELOG.md index 29d8844..8dda347 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,16 @@ ## Unreleased +## [1.0.2] - 2026-07-06 + +### Added + +- Added `data-size="sm"` support to Alert Dialog for the compact upstream size. + +### Changed + +- Removed global font smoothing from Basecoat's package CSS so `antialiased` remains an application-level choice. + ## [1.0.1] - 2026-06-28 ### Added diff --git a/package-lock.json b/package-lock.json index e54a743..f707b13 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "basecoat-css", - "version": "1.0.1", + "version": "1.0.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "basecoat-css", - "version": "1.0.1", + "version": "1.0.2", "license": "MIT", "devDependencies": { "@tailwindcss/cli": "^4.1.17", diff --git a/package.json b/package.json index 7f87647..f5fd70d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "basecoat-css", - "version": "1.0.1", + "version": "1.0.2", "description": "Tailwind CSS for Basecoat components", "author": { "name": "hunvreus", diff --git a/site/astro.config.mjs b/site/astro.config.mjs index f904257..42859c9 100644 --- a/site/astro.config.mjs +++ b/site/astro.config.mjs @@ -31,6 +31,7 @@ export default defineConfig({ style: 'vega', css: false, bodyAttrs: { + class: 'antialiased', 'hx-boost': 'true', 'hx-target': '#content', 'hx-select': '#content', diff --git a/site/src/docs/components/alert-dialog.mdx b/site/src/docs/components/alert-dialog.mdx index a6c9f3c..ffb3758 100644 --- a/site/src/docs/components/alert-dialog.mdx +++ b/site/src/docs/components/alert-dialog.mdx @@ -74,7 +74,7 @@ Alert Dialog uses a native `` element. Omit the clo Trigger button. Basecoat uses the native HTMLDialogElement.showModal() method. <dialog class="alert-dialog" id="{ DIALOG_ID }"> - Native modal dialog. Add aria-labelledby and aria-describedby when title and description are present. + Native modal dialog. Add aria-labelledby and aria-describedby when title and description are present. Use data-size="sm" for the compact upstream size. <div> @@ -164,6 +164,27 @@ Use a destructive action button when the alert dialog confirms a destructive ope +### Small + +Use `data-size="sm"` for a compact alert dialog. The small size keeps media, title, and description stacked and centers the action buttons in a two-column footer. + + +Invite Members + + + + + Invite team members? + Send an invitation link to your selected teammates. + + + + + + ### RTL Alert Dialog supports document direction. Set `dir="rtl"` on the dialog or a parent element. diff --git a/src/css/base/base.css b/src/css/base/base.css index 950f8a4..cbe838a 100644 --- a/src/css/base/base.css +++ b/src/css/base/base.css @@ -131,6 +131,6 @@ @apply scroll-smooth; } body { - @apply bg-background text-foreground overscroll-none antialiased; + @apply bg-background text-foreground overscroll-none; } } diff --git a/src/css/components/dialog.css b/src/css/components/dialog.css index f0f0261..2248b1e 100644 --- a/src/css/components/dialog.css +++ b/src/css/components/dialog.css @@ -77,5 +77,25 @@ > * > footer { @apply flex flex-col-reverse sm:flex-row sm:justify-end; } + + &:is([data-size='sm']) > * > header, + > [data-size='sm'] > header { + @apply sm:place-items-center sm:text-center; + } + + &:is([data-size='sm']) > * > header:has(> figure), + > [data-size='sm'] > header:has(> figure) { + @apply sm:grid-rows-[auto_auto_1fr]; + } + + &:is([data-size='sm']) > * > header:has(> figure) > :is(h2, p), + > [data-size='sm'] > header:has(> figure) > :is(h2, p) { + @apply sm:col-start-auto; + } + + &:is([data-size='sm']) > * > footer, + > [data-size='sm'] > footer { + @apply grid grid-cols-2 sm:grid sm:grid-cols-2; + } } } diff --git a/src/css/styles/luma.css b/src/css/styles/luma.css index bff50cc..cda62ea 100644 --- a/src/css/styles/luma.css +++ b/src/css/styles/luma.css @@ -540,6 +540,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; } diff --git a/src/css/styles/lyra.css b/src/css/styles/lyra.css index 4f398c5..87edda1 100644 --- a/src/css/styles/lyra.css +++ b/src/css/styles/lyra.css @@ -520,6 +520,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; } diff --git a/src/css/styles/maia.css b/src/css/styles/maia.css index bcce60b..7eaf8bb 100644 --- a/src/css/styles/maia.css +++ b/src/css/styles/maia.css @@ -532,6 +532,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; } diff --git a/src/css/styles/mira.css b/src/css/styles/mira.css index 57e2c94..c7fdee1 100644 --- a/src/css/styles/mira.css +++ b/src/css/styles/mira.css @@ -536,6 +536,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply max-w-64 sm:max-w-64; + } + .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; } diff --git a/src/css/styles/nova.css b/src/css/styles/nova.css index 8a3bbbb..112e4d1 100644 --- a/src/css/styles/nova.css +++ b/src/css/styles/nova.css @@ -528,6 +528,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; } diff --git a/src/css/styles/rhea.css b/src/css/styles/rhea.css index 1f3ba84..0be3217 100644 --- a/src/css/styles/rhea.css +++ b/src/css/styles/rhea.css @@ -540,6 +540,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .dialog > * { @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; } diff --git a/src/css/styles/sera.css b/src/css/styles/sera.css index 885b183..7f15af5 100644 --- a/src/css/styles/sera.css +++ b/src/css/styles/sera.css @@ -544,6 +544,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; } diff --git a/src/css/styles/vega.css b/src/css/styles/vega.css index 3efe8e0..4114253 100644 --- a/src/css/styles/vega.css +++ b/src/css/styles/vega.css @@ -528,6 +528,11 @@ @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; } + .alert-dialog:is([data-size='sm']) > *, + .alert-dialog > [data-size='sm'] { + @apply sm:max-w-xs; + } + .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; }
HTMLDialogElement.showModal()
<dialog class="alert-dialog" id="{ DIALOG_ID }">
aria-labelledby
aria-describedby
data-size="sm"
<div>
Send an invitation link to your selected teammates.