From a17eaa20d35b5da1bc9122e4efe36dc7980a2c5c Mon Sep 17 00:00:00 2001 From: Ronan Berder Date: Tue, 23 Jun 2026 18:14:19 +0800 Subject: [PATCH] Prepare 1.0.0-beta.6 --- AGENTS.md | 1 + CHANGELOG.md | 13 + docs/src/cli.mdx | 2 - docs/src/components/accordion.mdx | 125 ++++--- docs/src/components/alert-dialog.mdx | 37 +- docs/src/components/alert.mdx | 51 ++- docs/src/components/avatar.mdx | 47 ++- docs/src/components/badge.mdx | 36 +- docs/src/components/breadcrumb.mdx | 96 +++--- docs/src/components/button-group.mdx | 145 ++++---- docs/src/components/button.mdx | 102 +++--- docs/src/components/card.mdx | 35 +- docs/src/components/chart.mdx | 74 +++- docs/src/components/checkbox.mdx | 27 ++ docs/src/components/combobox.mdx | 58 +++- docs/src/components/command.mdx | 139 ++++---- docs/src/components/dialog.mdx | 47 ++- docs/src/components/dropdown-menu.mdx | 154 ++++----- docs/src/components/empty.mdx | 63 ++-- docs/src/components/field.mdx | 59 ++-- docs/src/components/input-group.mdx | 131 +++----- docs/src/components/input.mdx | 40 ++- docs/src/components/item.mdx | 199 +++++++---- docs/src/components/kbd.mdx | 94 ++++-- docs/src/components/label.mdx | 36 +- docs/src/components/native-select.mdx | 37 +- docs/src/components/pagination.mdx | 97 +++--- docs/src/components/popover.mdx | 62 +++- docs/src/components/progress.mdx | 57 +++- docs/src/components/radio-group.mdx | 251 +++++++++----- docs/src/components/scroll-area.mdx | 28 ++ docs/src/components/select.mdx | 447 +++++++++---------------- docs/src/components/sidebar.mdx | 129 +++---- docs/src/components/skeleton.mdx | 49 ++- docs/src/components/slider.mdx | 48 ++- docs/src/components/spinner.mdx | 77 +++-- docs/src/components/switch.mdx | 43 ++- docs/src/components/table.mdx | 97 +++++- docs/src/components/tabs.mdx | 158 ++++++--- docs/src/components/textarea.mdx | 27 ++ docs/src/components/theme-switcher.mdx | 61 +++- docs/src/components/toast.mdx | 53 ++- docs/src/components/tooltip.mdx | 35 +- docs/src/customization.mdx | 2 - docs/src/installation.mdx | 62 +++- docs/src/site/StyleHead.astro | 47 +++ docs/src/site/chart-examples.js | 21 +- package-lock.json | 10 +- package.json | 4 +- packages/cli/package.json | 2 +- packages/css/package.json | 2 +- src/css/components/popover.css | 28 +- src/css/styles/luma.css | 10 +- src/css/styles/lyra.css | 10 +- src/css/styles/maia.css | 10 +- src/css/styles/mira.css | 10 +- src/css/styles/nova.css | 10 +- src/css/styles/rhea.css | 10 +- src/css/styles/sera.css | 10 +- src/css/styles/vega.css | 10 +- src/jinja/select.html.jinja | 8 +- src/js/select.js | 59 +++- src/nunjucks/select.njk | 8 +- 63 files changed, 2398 insertions(+), 1502 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 9fde436..9eb0e67 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -80,6 +80,7 @@ - Keep `Usage` focused on the minimal working snippet and important Basecoat/upstream differences; put variants, states, RTL, and richer patterns under `Examples`. - Keep snippets minimal and aligned with current behavior. - In HTML snippets, keep text-only elements on one line, such as `

Text

`; use multiline formatting when the element contains child elements or when line length would hurt readability. +- In HTML examples, keep icons as single-line `...` elements, keep simple text-only or inline-formatting elements on one line, and avoid blank separator lines between adjacent markup parts. - Document intentional differences from upstream near the relevant example. ## Validation diff --git a/CHANGELOG.md b/CHANGELOG.md index 8b84d34..c8e40c9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,19 @@ ## Unreleased +## [1.0.0-beta.6] - 2026-06-23 + +### Changed + +- Updated docs dependency to the published `reallysimpledocs@1.0.0-beta.5` package. +- Refined component documentation examples across the docs site, including Select, Table, Tabs, Switch, and Theme Switcher. +- Clarified CDN and npm installation guidance for default and named style bundles. +- Updated Table examples to avoid inline overlay menus inside scrollable table containers and documented the overflow limitation. + +### Fixed + +- Fixed dark-mode unchecked Switch thumb colors across all style packs to match upstream shadcn/ui behavior. + ## [1.0.0-beta.5] - 2026-06-22 ### Added diff --git a/docs/src/cli.mdx b/docs/src/cli.mdx index d000944..03baefa 100644 --- a/docs/src/cli.mdx +++ b/docs/src/cli.mdx @@ -19,7 +19,6 @@ Nunjucks and Jinja macros are optional helpers for components with larger HTML s {`{% from "select.njk" import select %} - {{ select( name="fruit", items=[ @@ -29,7 +28,6 @@ Nunjucks and Jinja macros are optional helpers for components with larger HTML s ] ) }}`} {`{% from "select.html.jinja" import select %} - {{ select( name="fruit", items=[ diff --git a/docs/src/components/accordion.mdx b/docs/src/components/accordion.mdx index b35f40f..333a0d7 100644 --- a/docs/src/components/accordion.mdx +++ b/docs/src/components/accordion.mdx @@ -9,27 +9,21 @@ A vertically stacked set of interactive headings that each reveal a section of c What are your shipping options? -
- We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders. -
+
We offer standard (5-7 days), express (2-3 days), and overnight shipping. Free shipping on international orders.
What is your return policy? -
- You can return items within 30 days of delivery. Items must be unused and in their original packaging. -
+
You can return items within 30 days of delivery. Items must be unused and in their original packaging.
How can I contact customer support? -
- Email support@example.com or use live chat during business hours. -
+
Email support@example.com or use live chat during business hours.
@@ -37,13 +31,44 @@ A vertically stacked set of interactive headings that each reveal a section of c ## Usage - + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; +``` + +Or import only the base CSS, Accordion component CSS, and one style pack. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +@import "basecoat-css/components/accordion.css"; +@import "basecoat-css/styles/vega.css"; +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + +Copy or serve the full Basecoat JavaScript bundle. ```html - - + ``` +Or copy or serve the Basecoat runtime and Accordion script. + +```html + + +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + @@ -54,9 +79,7 @@ A vertically stacked set of interactive headings that each reveal a section of c Is it accessible? -
- Yes. It uses native disclosure semantics. -
+
Yes. It uses native disclosure semantics.
``` @@ -108,27 +131,21 @@ A basic accordion that shows one item at a time. The first item is open by defau How do I reset my password? -
- Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours. -
+
Click on 'Forgot Password' on the login page, enter your email address, and we'll send you a link to reset your password. The link will expire in 24 hours.
Can I change my subscription plan? -
- Yes. You can upgrade or downgrade your plan from the billing settings page. -
+
Yes. You can upgrade or downgrade your plan from the billing settings page.
What payment methods do you accept? -
- We accept all major credit cards, PayPal, and bank transfers for annual plans. -
+
We accept all major credit cards, PayPal, and bank transfers for annual plans.
@@ -144,27 +161,21 @@ Use `data-multiple` to allow multiple items to be open at the same time. Notification Settings -
- Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices. -
+
Manage how you receive notifications. You can enable email alerts for updates or push notifications for mobile devices.
Privacy & Security -
- Control account security, session history, and privacy preferences. -
+
Control account security, session history, and privacy preferences.
Billing & Subscription -
- Review invoices, change plans, and update payment methods. -
+
Review invoices, change plans, and update payment methods.
@@ -180,27 +191,21 @@ Use `aria-disabled="true"` on an item to disable it. Can I access my account history? -
- Yes. Your account history is available from the activity page. -
+
Yes. Your account history is available from the activity page.
Premium feature information -
- This item is disabled. -
+
This item is disabled.
How do I update my email address? -
- Go to account settings, update your email, then confirm the change from your inbox. -
+
Go to account settings, update your email, then confirm the change from your inbox.
@@ -216,27 +221,21 @@ Add horizontal padding to the rows when using a bordered root. How does billing work? -
- We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. -
+
We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members.
Is my data secure? -
- Data is encrypted in transit and at rest. -
+
Data is encrypted in transit and at rest.
What integrations do you support? -
- We support Slack, GitHub, Google Workspace, and webhooks. -
+
We support Slack, GitHub, Google Workspace, and webhooks.
@@ -258,27 +257,21 @@ Wrap the accordion in a card for grouped support or billing content. What subscription plans do you offer? -
- We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features. -
+
We offer three subscription tiers: Starter ($9/month), Professional ($29/month), and Enterprise ($99/month). Each plan includes increasing storage limits, API access, priority support, and team collaboration features.
How does billing work? -
- Billing is charged at the beginning of each cycle. -
+
Billing is charged at the beginning of each cycle.
How do I cancel my subscription? -
- Cancel from billing settings. Your plan remains active until the end of the current cycle. -
+
Cancel from billing settings. Your plan remains active until the end of the current cycle.
@@ -296,27 +289,21 @@ Accordion spacing uses logical properties. Set `dir="rtl"` on the accordion or a كيف يمكنني إعادة تعيين كلمة المرور؟ -
- انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة. -
+
انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.
هل يمكنني تغيير خطة الاشتراك الخاصة بي؟ -
- نعم، يمكنك تغيير الخطة من إعدادات الفوترة. -
+
نعم، يمكنك تغيير الخطة من إعدادات الفوترة.
ما هي طرق الدفع التي تقبلونها؟ -
- نقبل بطاقات الائتمان الرئيسية والتحويلات البنكية. -
+
نقبل بطاقات الائتمان الرئيسية والتحويلات البنكية.
diff --git a/docs/src/components/alert-dialog.mdx b/docs/src/components/alert-dialog.mdx index b743e0c..a6c9f3c 100644 --- a/docs/src/components/alert-dialog.mdx +++ b/docs/src/components/alert-dialog.mdx @@ -20,6 +20,32 @@ A modal dialog that interrupts the user with important content and expects a res ## Usage + + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; +``` + +Or import only the base CSS, Alert Dialog component CSS, and one style pack. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +@import "basecoat-css/components/dialog.css"; +@import "basecoat-css/styles/vega.css"; +``` + +Alert Dialog uses the Dialog component CSS. + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + Alert Dialog uses a native `` element. Omit the close button and backdrop-click handler when the user must choose an explicit action. ```html @@ -38,6 +64,9 @@ Alert Dialog uses a native `` element. Omit the clo ``` + + + ### HTML structure
@@ -102,9 +131,7 @@ Use a `
` in the header to add a media element such as an icon or image t
-
- -
+

Share this project?

Anyone with the link will be able to view and edit this project.

@@ -125,9 +152,7 @@ Use a destructive action button when the alert dialog confirms a destructive ope
-
- -
+

Delete this chat?

This action cannot be undone. This will permanently delete the chat and remove it from your history.

diff --git a/docs/src/components/alert.mdx b/docs/src/components/alert.mdx index cbd6171..10ea0fa 100644 --- a/docs/src/components/alert.mdx +++ b/docs/src/components/alert.mdx @@ -2,13 +2,11 @@
-
- +

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.
-
- +

New feature available

We've added dark mode support. You can enable it in your account settings.
@@ -17,11 +15,34 @@ ## Usage + + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; +``` + +Or import only the base CSS, Alert component CSS, and one style pack. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +@import "basecoat-css/components/alert.css"; +@import "basecoat-css/styles/vega.css"; +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + Use `alert` for default styling. Add `data-variant="destructive"` for error states. Add a direct child `
 @@ -37,6 +35,30 @@ This component ships a `dialog()` macro for Jinja and Nunjucks. + + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; +``` + +Or import only the base CSS, Dialog component CSS, and one style pack. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +@import "basecoat-css/components/dialog.css"; +@import "basecoat-css/styles/vega.css"; +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + Basecoat uses the native `` element and `showModal()`. This differs from shadcn/ui's portalled Base UI implementation, but preserves native modality, focus handling, and inert page content without component JavaScript. ```html @@ -63,13 +85,14 @@ Basecoat uses the native `` element and `showModal()`. This differs from - +
``` + + + ### HTML structure
@@ -167,9 +190,7 @@ Basecoat uses the native `` element and `showModal()`. This differs from
- + @@ -196,9 +217,7 @@ Basecoat uses the native `` element and `showModal()`. This differs from

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

- + @@ -232,9 +251,7 @@ Dialog positioning and close button placement use logical properties. Set `dir=" - + diff --git a/docs/src/components/dropdown-menu.mdx b/docs/src/components/dropdown-menu.mdx index c44a133..d460123 100644 --- a/docs/src/components/dropdown-menu.mdx +++ b/docs/src/components/dropdown-menu.mdx @@ -55,13 +55,47 @@ Basecoat dropdown menus are inline-positioned relative to the `.dropdown-menu` wrapper. This differs from shadcn/ui's portalled Base UI implementation, but keeps the markup dependency-free and matches Basecoat's current popover/select positioning model. - -```html - - + + +Import Tailwind and one full Basecoat style bundle. + +```css +@import "tailwindcss"; +@import "basecoat-css/vega.css"; ``` + +Or import only the base CSS, Dropdown Menu component CSS, and one style pack. + +```css +@import "tailwindcss"; +@import "basecoat-css/base.css"; +@import "basecoat-css/components/dropdown-menu.css"; +@import "basecoat-css/styles/vega.css"; +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + + + + +Copy or serve the full Basecoat JavaScript bundle. + +```html + +``` + +Or copy or serve the Basecoat runtime and Dropdown Menu script. + +```html + + +``` + +Using CDN or bundler imports? See the [Installation page](/installation). + + ```html
@@ -123,14 +154,12 @@ Basecoat popovers are inline-positioned relative to the `.popover` wrapper. This

Aligned to start.

-
-