diff --git a/CHANGELOG.md b/CHANGELOG.md index d643de0..d577d02 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,8 +2,38 @@ ## Unreleased +### Breaking Changes + - Removed the `.form` convenience selector for Basecoat 1.0. Use explicit component classes (`label`, `input`, `textarea`, `select`) or compose fields with `.field` / `.fieldset`. -- To keep the previous wrapper behavior, define it in your own Tailwind CSS: +- Changed Combobox markup and behavior to an input-first structure. The visible input now filters options, the hidden input stores the submitted value, single select stores the selected value, and multiple select stores a JSON array. +- Changed Command markup to the migrated Basecoat structure: `.command-dialog` wraps `.command`, the search input lives in the command header, and items use role-based menu markup with `role="menuitem"`. +- Removed Combobox-specific search-header behavior from Select. Use the dedicated Combobox component for editable/filterable selection. +- Reworked style loading for style packs. Non-default styles are standalone bundles and should not be loaded on top of the default/Vega bundle. + +### Added + +- Added standalone style packs: Vega, Nova, Maia, Lyra, Mira, Luma, Sera, and Rhea. +- Added dedicated Empty component styles and docs. +- Added dedicated Item component styles and docs. +- Added dedicated Input Group component styles and docs. +- Added dedicated Spinner docs and examples using `animate-spin` and `size-4` patterns. +- Added style-specific package entrypoints such as `basecoat-css/nova` and styleless base entrypoints for custom themes. + +### Changed + +- Reworked component CSS so shared component files own structure and behavior hooks while style-pack files own visual treatment. +- Updated Button, Button Group, Input, Textarea, Select, Combobox, Command, Dialog, Dropdown Menu, Popover, Field, Tabs, Table, Card, Alert, Badge, Kbd, Label, Skeleton, Radio, Switch, Empty, Item, and Input Group toward current shadcn/ui styles. +- Split Native Select documentation from custom Select documentation. +- Updated docs to use Basecoat-specific HTML usage instead of React/shadcn composition APIs. +- Updated docs site styling, navigation, fonts, and style switcher for the 1.0 style system. + +### Removed + +- Removed the old Form component page. Form layout should now be composed with Field, Fieldset, Input, Textarea, Select, Native Select, Checkbox, Radio, and Switch. + +### Migration Notes + +To keep the previous `.form` wrapper behavior, define it in your own Tailwind CSS: ```css .form label { @apply label; } diff --git a/docs/css/custom.css b/docs/css/custom.css index 56e4db9..15c04ff 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -17,6 +17,52 @@ @apply visible opacity-100; } +.docs-search-trigger { + @apply hidden h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 text-muted-foreground outline-none transition-colors md:flex; + + svg { + @apply size-4 shrink-0; + } + .kbd { + @apply -me-1.5 ms-auto; + } +} + +:root:not([data-style-variant]), +:root[data-style-variant='nova'] { + .docs-search-trigger { + @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2.5 py-1 text-sm focus-visible:ring-3; + } +} + +:root[data-style-variant='vega'] .docs-search-trigger { + @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border bg-transparent px-2.5 py-1 text-sm shadow-xs focus-visible:ring-3; +} + +:root[data-style-variant='maia'] .docs-search-trigger { + @apply border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-4xl border px-3 py-1 text-sm focus-visible:ring-[3px]; +} + +:root[data-style-variant='lyra'] .docs-search-trigger { + @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-none border bg-transparent px-2.5 py-1 text-xs focus-visible:ring-1; +} + +:root[data-style-variant='mira'] .docs-search-trigger { + @apply border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 rounded-md border px-2 py-0.5 text-xs/relaxed focus-visible:ring-2; +} + +:root[data-style-variant='luma'] .docs-search-trigger { + @apply bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 rounded-3xl border border-transparent px-3 py-1 text-sm focus-visible:ring-3; +} + +:root[data-style-variant='sera'] .docs-search-trigger { + @apply focus-visible:border-b-ring rounded-none border border-transparent border-b-input bg-transparent px-0 py-1 text-sm transition-[color,border-color]; +} + +:root[data-style-variant='rhea'] .docs-search-trigger { + @apply bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 rounded-2xl border border-transparent px-2.5 py-1 text-sm duration-200 focus-visible:ring-3; +} + .content { pre { @apply grid max-h-[650px] overflow-y-auto rounded-lg bg-muted/40 text-sm; diff --git a/docs/src/_includes/partials/header.njk b/docs/src/_includes/partials/header.njk index 29bd8db..44fd2f7 100644 --- a/docs/src/_includes/partials/header.njk +++ b/docs/src/_includes/partials/header.njk @@ -33,12 +33,12 @@ - - - +
+
+
+ +

These cookies are essential in order to use the website and use its features.

+
+ +
+
+
+ +

These cookies allow the website to provide personalized functionality.

+
+ +
+
+
+ +

These cookies help to improve the performance of the website.

+
+ +