@brumaombra/ui-vintage 0.9.5 → 0.9.7

package/AGENTS.md

@@ -28,7 +28,9 @@ Only build something new when no entry point fits, and compose it from library p
 - Import from explicit subpaths: `import { Button } from '@brumaombra/ui-vintage/button'`. Never import from `@brumaombra/ui-vintage/src/...`.
 - Style with the semantic tokens (`bg-background`, `bg-card`, `bg-surface`, `bg-accent`, `bg-primary`, `text-foreground`, `text-muted-foreground`, `border-border`, `border-border-strong`, ...). They adapt to dark mode, so don't write `dark:` color variants or hard-coded colors for surfaces and text.
 - Customize components through their props and the `class` prop (merged with tailwind-merge) rather than wrapping them in extra styled elements.
-- Keep corners at `rounded` (the library's square look) and use `shadow-elevated-sm|md|lg|xl` for elevation, without glows or gradients.
+- Keep corners at `rounded` (the library's square look) and use `shadow-elevated-sm|md|lg|xl` for elevation, without glows or gradients. Every radius step resolves to the shared `--uv-radius` token, so change the token instead of passing other radii.
+- Never restyle a library component from an app with `class` (padding, gaps, colors, borders, radius, shadows, typography, `!` modifiers, `[data-slot]` selectors): use its props and variants, and add a prop or variant to the library when one is missing. Layout classes (margins, width, flex/grid placement, visibility, entrance animations) are fine.
+- `SectionTitle` (and `BlogSectionTitle`) owns the space under it (`mb-6 md:mb-8`): don't add margins, padding or `space-y` to the content that follows it.
 - For motion, reuse the library utilities (`ease-spring`, `ease-out-expo`, `animate-uv-fade-up`, `animate-uv-pop`, `uv-floating-motion`). In custom transitions, name `scale`, `rotate`, and `translate` explicitly; Tailwind v4 doesn't animate them through `transform`.
 - Icons are Hugeicons definitions: import each one from its own module (`import Rocket01Icon from '@hugeicons/core-free-icons/Rocket01Icon'`, never the `@hugeicons/core-free-icons` barrel, which makes the build parse the whole icon set) and pass them to `:icon` props, or render them with `HugeiconsIcon` from `@hugeicons/vue`. Both packages are peer dependencies, so the app must list them in its own `package.json`.
 - Form controls use `v-model`. Mark invalid fields with `aria-invalid` and show messages with `FieldError`.

package/COMPONENTS.md

@@ -15,13 +15,13 @@ This file lists every public entry point of the package with its components, pro
 
 ## Contents
 
-- **Actions:** [button](#brumaombraui-vintagebutton), [dropdown-menu](#brumaombraui-vintagedropdown-menu), [kbd](#brumaombraui-vintagekbd), [load-more-button](#brumaombraui-vintageload-more-button), [text-link](#brumaombraui-vintagetext-link), [toggle-group](#brumaombraui-vintagetoggle-group)
+- **Actions:** [action-bar](#brumaombraui-vintageaction-bar), [button](#brumaombraui-vintagebutton), [dropdown-menu](#brumaombraui-vintagedropdown-menu), [kbd](#brumaombraui-vintagekbd), [load-more-button](#brumaombraui-vintageload-more-button), [text-link](#brumaombraui-vintagetext-link), [toggle-group](#brumaombraui-vintagetoggle-group)
 - **Forms:** [calendar](#brumaombraui-vintagecalendar), [checkbox](#brumaombraui-vintagecheckbox), [combobox](#brumaombraui-vintagecombobox), [date-picker](#brumaombraui-vintagedate-picker), [date-time-picker](#brumaombraui-vintagedate-time-picker), [field](#brumaombraui-vintagefield), [file-dropzone](#brumaombraui-vintagefile-dropzone), [input](#brumaombraui-vintageinput), [label](#brumaombraui-vintagelabel), [native-select](#brumaombraui-vintagenative-select), [number-field](#brumaombraui-vintagenumber-field), [pin-input](#brumaombraui-vintagepin-input), [radio-group](#brumaombraui-vintageradio-group), [select](#brumaombraui-vintageselect), [slider](#brumaombraui-vintageslider), [slider-form-component](#brumaombraui-vintageslider-form-component), [switch](#brumaombraui-vintageswitch), [switch-form-component](#brumaombraui-vintageswitch-form-component), [tags-input](#brumaombraui-vintagetags-input), [textarea](#brumaombraui-vintagetextarea), [time-picker](#brumaombraui-vintagetime-picker)
 - **Data display:** [animated-number](#brumaombraui-vintageanimated-number), [avatar](#brumaombraui-vintageavatar), [badge](#brumaombraui-vintagebadge), [card](#brumaombraui-vintagecard), [card-grid](#brumaombraui-vintagecard-grid), [chip](#brumaombraui-vintagechip), [data-list](#brumaombraui-vintagedata-list), [data-table](#brumaombraui-vintagedata-table), [info-card](#brumaombraui-vintageinfo-card), [progress](#brumaombraui-vintageprogress), [progress-component](#brumaombraui-vintageprogress-component), [scroll-area](#brumaombraui-vintagescroll-area), [separator](#brumaombraui-vintageseparator), [single-value-card](#brumaombraui-vintagesingle-value-card), [skeleton](#brumaombraui-vintageskeleton), [stat-strip](#brumaombraui-vintagestat-strip), [table](#brumaombraui-vintagetable)
 - **Navigation:** [accordion](#brumaombraui-vintageaccordion), [breadcrumb](#brumaombraui-vintagebreadcrumb), [collapsible](#brumaombraui-vintagecollapsible), [pagination](#brumaombraui-vintagepagination), [sidebar](#brumaombraui-vintagesidebar), [stepper](#brumaombraui-vintagestepper), [tabs](#brumaombraui-vintagetabs)
 - **Overlays:** [alert-dialog](#brumaombraui-vintagealert-dialog), [command](#brumaombraui-vintagecommand), [dialog](#brumaombraui-vintagedialog), [hover-card](#brumaombraui-vintagehover-card), [popover](#brumaombraui-vintagepopover), [sheet](#brumaombraui-vintagesheet), [tooltip](#brumaombraui-vintagetooltip)
 - **Feedback:** [alert](#brumaombraui-vintagealert), [busy](#brumaombraui-vintagebusy), [busy-indicator](#brumaombraui-vintagebusy-indicator), [confirm-dialog](#brumaombraui-vintageconfirm-dialog), [cookie-consent](#brumaombraui-vintagecookie-consent), [empty-state-card](#brumaombraui-vintageempty-state-card), [loading-state-card](#brumaombraui-vintageloading-state-card), [message-dialog](#brumaombraui-vintagemessage-dialog), [message-toast](#brumaombraui-vintagemessage-toast), [spinner](#brumaombraui-vintagespinner)
-- **Layouts and app shell:** [background-grid](#brumaombraui-vintagebackground-grid), [dashboard-shell](#brumaombraui-vintagedashboard-shell), [error-page](#brumaombraui-vintageerror-page), [landing](#brumaombraui-vintagelanding), [landing-content](#brumaombraui-vintagelanding-content), [landing-footer](#brumaombraui-vintagelanding-footer), [landing-navbar](#brumaombraui-vintagelanding-navbar), [landing-shell](#brumaombraui-vintagelanding-shell), [language-flag](#brumaombraui-vintagelanguage-flag), [language-selector](#brumaombraui-vintagelanguage-selector), [page-header](#brumaombraui-vintagepage-header), [theme-selector](#brumaombraui-vintagetheme-selector)
+- **Layouts and app shell:** [background-grid](#brumaombraui-vintagebackground-grid), [dashboard-shell](#brumaombraui-vintagedashboard-shell), [error-page](#brumaombraui-vintageerror-page), [landing](#brumaombraui-vintagelanding), [landing-content](#brumaombraui-vintagelanding-content), [landing-footer](#brumaombraui-vintagelanding-footer), [landing-navbar](#brumaombraui-vintagelanding-navbar), [landing-shell](#brumaombraui-vintagelanding-shell), [language-flag](#brumaombraui-vintagelanguage-flag), [language-selector](#brumaombraui-vintagelanguage-selector), [page-header](#brumaombraui-vintagepage-header), [section-title](#brumaombraui-vintagesection-title), [theme-selector](#brumaombraui-vintagetheme-selector)
 - **Content and blog:** [blog](#brumaombraui-vintageblog), [content](#brumaombraui-vintagecontent)
 - **Utilities and types:** [common-types](#brumaombraui-vintagecommon-types), [utils](#brumaombraui-vintageutils)
 
@@ -29,9 +29,37 @@ This file lists every public entry point of the package with its components, pro
 
 Buttons, segmented controls, menus, and keyboard hints.
 
+### `@brumaombra/ui-vintage/action-bar`
+
+Row of action buttons that turns into a full-width bar of equal tiles (icon above the label) on mobile, like an app toolbar.
+
+```ts
+import { ActionBar } from '@brumaombra/ui-vintage/action-bar';
+```
+
+```vue
+<ActionBar>
+    <Button variant="secondary">
+        <HugeiconsIcon :icon="Edit01Icon" />
+        Edit
+    </Button>
+    <Button variant="secondary">
+        <HugeiconsIcon :icon="Share08Icon" />
+        Share
+    </Button>
+</ActionBar>
+```
+
+#### `ActionBar`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
+---
+
 ### `@brumaombra/ui-vintage/button`
 
-Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Give it a `to` to make it a navigation button (a localized link, external URLs work too).
+Button with primary, secondary, ghost, link, and tone variants. Spring press feedback and a `loading` state that keeps the width stable. Give it a `to` to make it a navigation button (a localized link, external URLs work too), and a `count` to show a notification badge on its corner.
 
 ```ts
 import { Button, buttonVariants } from '@brumaombra/ui-vintage/button';
@@ -47,6 +75,10 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
 <Button to="/pricing" variant="secondary">
     Pricing
 </Button>
+
+<Button variant="secondary" size="icon" :count="unread" aria-label="Notifications">
+    <HugeiconsIcon :icon="Notification01Icon" />
+</Button>
 ```
 
 #### `Button`
@@ -58,6 +90,8 @@ import type { ButtonVariants } from '@brumaombra/ui-vintage/button';
 | `loading` | `boolean` | `false` |
 | `disabled` | `boolean` | `false` |
 | `to` | `string` |  |
+| `count` | `number \| null` | `null` |
+| `countMax` | `number` | `99` |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `PrimitiveProps`.
@@ -219,6 +253,7 @@ import { Kbd, KbdGroup } from '@brumaombra/ui-vintage/kbd';
 | --- | --- | --- |
 | `class` | `HTMLAttributes['class']` |  |
 | `pressed` | `boolean` |  |
+| `size` | `'default' \| 'lg'` | `'default'` |
 
 - **Slots:** `default`.
 
@@ -330,7 +365,7 @@ type ToggleVariants = { variant?: 'default' | 'outline' | null | undefined; size
 type ToggleGroupSize = 'default' | 'sm' | 'lg'
 const toggleVariants: (props?: ToggleVariants & ClassProp) => string
 const toggleGroupItemVariants: (props?: { size?: ToggleGroupSize | null } & ClassProp) => string
-const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean> }>
+const toggleGroupContextKey: InjectionKey<{ size: Ref<ToggleGroupSize>; indicator: Ref<boolean>; highlight: Ref<boolean> }>
 ```
 
 ## Forms
@@ -766,9 +801,11 @@ import { Input } from '@brumaombra/ui-vintage/input';
 | --- | --- | --- |
 | `defaultValue` | `string \| number` |  |
 | `modelValue` | `string \| number` |  |
+| `size` | `'default' \| 'sm'` |  |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Emits:** `update:modelValue` (payload: string \| number).
+- **Slots:** `prefix`, `suffix`.
 
 ---
 
@@ -1268,6 +1305,7 @@ import type { AvatarSize, AvatarShape, AvatarStatus } from '@brumaombra/ui-vinta
 | `size` | `AvatarSize` | `'md'` |
 | `shape` | `AvatarShape` | `'circle'` |
 | `status` | `AvatarStatus` |  |
+| `ring` | `boolean` | `false` |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `AvatarRootProps`.
@@ -1278,6 +1316,7 @@ import type { AvatarSize, AvatarShape, AvatarStatus } from '@brumaombra/ui-vinta
 | Prop | Type | Default |
 | --- | --- | --- |
 | `name` | `string` |  |
+| `color` | `'neutral' \| 'auto' \| 'primary'` | `'neutral'` |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `AvatarFallbackProps`.
@@ -1331,7 +1370,7 @@ import { Badge } from '@brumaombra/ui-vintage/badge';
 | --- | --- | --- |
 | `text` *(required)* | `string` |  |
 | `icon` | `HugeiconsIconDefinition \| null` | `null` |
-| `color` | `ToneColor` | `'gray'` |
+| `color` | `ToneColor \| 'primary'` | `'gray'` |
 | `dot` | `boolean` | `false` |
 | `pulse` | `boolean` | `false` |
 | `class` | `HTMLAttributes['class']` |  |
@@ -1343,7 +1382,7 @@ import { Badge } from '@brumaombra/ui-vintage/badge';
 Surface container with header, title, description, content, footer, and action slots. `interactive` adds a gentle hover lift with a stronger shadow; `color` switches to a tone surface.
 
 ```ts
-import { Card, CardAction, CardContent, CardText, CardDescription, CardFooter, CardHeader, CardTitle } from '@brumaombra/ui-vintage/card';
+import { Card, CardAction, CardContent, CardText, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle } from '@brumaombra/ui-vintage/card';
 ```
 
 ```vue
@@ -1361,6 +1400,8 @@ import { Card, CardAction, CardContent, CardText, CardDescription, CardFooter, C
 | Prop | Type | Default |
 | --- | --- | --- |
 | `color` | `CardColor` |  |
+| `padding` | `CardPadding` | `'default'` |
+| `elevation` | `CardElevation` |  |
 | `interactive` | `boolean` | `false` |
 | `class` | `HTMLAttributes['class']` |  |
 
@@ -1396,12 +1437,18 @@ import { Card, CardAction, CardContent, CardText, CardDescription, CardFooter, C
 - **Props:** `class`.
 - **Slots:** `default`.
 
+#### `CardMedia`
+
+- **Props:** `class`.
+- **Slots:** `default`.
+
 #### `CardTitle`
 
 | Prop | Type | Default |
 | --- | --- | --- |
 | `class` | `HTMLAttributes['class']` |  |
 | `level` | `HeadingLevel` | `3` |
+| `icon` | `HugeiconsIconDefinition \| null` | `null` |
 
 - **Slots:** `default`.
 
@@ -1477,7 +1524,11 @@ import { DataList, DataListItem, DataListLabel, DataListText, DataListValue } fr
 
 #### `DataListText`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `wrap` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
 - **Slots:** `default`.
 
 #### `DataListValue`
@@ -1582,6 +1633,7 @@ import { Progress } from '@brumaombra/ui-vintage/progress';
 | Prop | Type | Default |
 | --- | --- | --- |
 | `indeterminate` | `boolean` | `false` |
+| `color` | `ProgressColor` | `'primary'` |
 | `class` | `HTMLAttributes['class']` |  |
 
 - **Also accepts** all props of Reka `ProgressRootProps`.
@@ -1684,7 +1736,10 @@ import { Skeleton } from '@brumaombra/ui-vintage/skeleton';
 
 #### `Skeleton`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `circle` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
 
 ---
 
@@ -1768,7 +1823,12 @@ import { Table, TableBody, TableCaption, TableCell, TableEmpty, TableFooter, Tab
 
 #### `TableRow`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `static` | `boolean` | `false` |
+| `interactive` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
+
 - **Slots:** `default`.
 
 ## Navigation
@@ -2252,7 +2312,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@brumaombra/ui-vintage
 
 #### `TabsContent`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `variant` | `'plain' \| 'boxed'` | `'plain'` |
+| `class` | `HTMLAttributes['class']` |  |
+
 - **Also accepts** all props of Reka `TabsContentProps`.
 - **Slots:** `default`.
 
@@ -2292,7 +2356,11 @@ import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
 
 #### `AlertDialogAction`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `variant` | `ButtonVariants['variant']` |  |
+| `class` | `HTMLAttributes['class']` |  |
+
 - **Also accepts** all props of Reka `AlertDialogActionProps`.
 - **Slots:** `default`.
 
@@ -2437,7 +2505,8 @@ value [useCommandGroup, provideCommandGroupContext]
 Modal dialog. `DialogContent` accepts `show-close-button`; use `DialogScrollContent` for long content.
 
 ```ts
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogScrollContent, DialogTitle, DialogTrigger } from '@brumaombra/ui-vintage/dialog';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogScrollContent, DialogTitle, DialogTrigger, dialogSizeClasses } from '@brumaombra/ui-vintage/dialog';
+import type { DialogSize } from '@brumaombra/ui-vintage/dialog';
 ```
 
 ```vue
@@ -2475,6 +2544,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 | --- | --- | --- |
 | `class` | `HTMLAttributes['class']` |  |
 | `showCloseButton` | `boolean` | `false` |
+| `size` | `DialogSize` | `'sm'` |
 
 - **Also accepts** all props of Reka `DialogContentProps`.
 - **Emits:** all events of Reka `DialogContentEmits`.
@@ -2508,6 +2578,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 | --- | --- | --- |
 | `class` | `HTMLAttributes['class']` |  |
 | `showCloseButton` | `boolean` | `false` |
+| `size` | `DialogSize` | `'sm'` |
 
 - **Also accepts** all props of Reka `DialogContentProps`.
 - **Emits:** all events of Reka `DialogContentEmits`.
@@ -2524,6 +2595,13 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 - **Also accepts** all props of Reka `DialogTriggerProps`.
 - **Slots:** `default`.
 
+#### Functions, constants, and types
+
+```ts
+type DialogSize = 'sm' | 'md' | 'lg' | 'xl'
+const dialogSizeClasses: Record<DialogSize, string>
+```
+
 ---
 
 ### `@brumaombra/ui-vintage/hover-card`
@@ -3424,6 +3502,35 @@ import { PageHeader } from '@brumaombra/ui-vintage/page-header';
 
 ---
 
+### `@brumaombra/ui-vintage/section-title`
+
+Section heading over a rule that starts with a primary segment, with an optional icon tile, description, and trailing action (the blog sections use it too).
+
+```ts
+import { SectionTitle } from '@brumaombra/ui-vintage/section-title';
+```
+
+```vue
+<SectionTitle title="Market FAQ" :icon="HelpCircleIcon" description="Everything about how this market works">
+    <template #action>
+        <Button variant="ghost" size="sm">View all</Button>
+    </template>
+</SectionTitle>
+```
+
+#### `SectionTitle`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `title` *(required)* | `string` |  |
+| `description` | `string` | `''` |
+| `icon` | `HugeiconsIconDefinition \| null` | `null` |
+| `headingLevel` | `HeadingLevel` | `2` |
+
+- **Slots:** `action`.
+
+---
+
 ### `@brumaombra/ui-vintage/theme-selector`
 
 Light, dark, and auto theme menu with a circular reveal (View Transitions API). `applyThemeWithTransition` switches themes from your own controls.
@@ -3461,10 +3568,10 @@ Components for Nuxt Content pages and a complete blog.
 
 ### `@brumaombra/ui-vintage/blog`
 
-Complete blog pages and their building blocks. The page components (`BlogIndexPage`, `BlogPostPage`, `BlogCategoriesPage`, `BlogTagsPage`, `BlogPostsPage` for the posts of a category or a tag) render the whole design: the app keeps one thin file per route that queries Nuxt Content, sets the SEO and passes the data and its own copy (titles and descriptions), with the helpers (`slugify`, `normalizeContentPath`, `buildCategoriesFromPosts`, `buildTagsFromPosts`, `sortByStableSeed`) shaping the data. The post page renders the app's `ProseHr` content component as divider and has an `after-article` slot for a call to action. The building blocks: an animated hero header, a post header (breadcrumbs, category and tags, title, author line, and featured image), a full-bleed featured carousel, post and category cards, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer. Scroll entrances use AOS: install `aos` in the app and initialize it (the components carry `data-aos="blur-up"`, and the library stylesheet defines that animation). Without AOS the content simply renders without entrances.
+Complete blog pages and their building blocks. The page components (`BlogIndexPage`, `BlogPostPage`, `BlogCategoriesPage`, `BlogTagsPage`, `BlogPostsPage` for the posts of a category or a tag) render the whole design: the app keeps one thin file per route that queries Nuxt Content, sets the SEO and passes the data and its own copy (titles and descriptions), with the helpers (`slugify`, `normalizeContentPath`, `buildCategoriesFromPosts`, `buildTagsFromPosts`, `sortByStableSeed`) shaping the data. The post page renders the app's `ProseHr` content component as divider and has an `after-article` slot for a call to action. The building blocks: an animated hero header, a post header (breadcrumbs, category and tags, title, author line, and featured image), an "In short" box with the `summary` field of the frontmatter (the post page shows it before the table of contents when the post has one), a full-bleed featured carousel, post and category cards, tags, table of contents, reading progress, FAQ, share sidebar, and the content renderer. Scroll entrances use AOS: install `aos` in the app and initialize it (the components carry `data-aos="blur-up"`, and the library stylesheet defines that animation). Without AOS the content simply renders without entrances.
 
 ```ts
-import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogPostHeader, BlogHeaderSection, BlogSectionTitle, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents, BlogIndexPage, BlogPostPage, BlogCategoriesPage, BlogTagsPage, BlogPostsPage, BlogViewAllLink, slugify, normalizeContentPath, buildCategoriesFromPosts, buildTagsFromPosts, sortByStableSeed } from '@brumaombra/ui-vintage/blog';
+import { AllPostsSection, BlogContentRenderer, BlogFAQSection, BlogInfoSection, BlogPostHeader, BlogHeaderSection, BlogSectionTitle, BlogSummary, BlogTagsSection, CategoriesList, CategoriesSection, CategoryCard, HeaderCarousel, PostCard, PostsList, SocialShareSidebar, TableOfContents, BlogIndexPage, BlogPostPage, BlogCategoriesPage, BlogTagsPage, BlogPostsPage, BlogViewAllLink, slugify, normalizeContentPath, buildCategoriesFromPosts, buildTagsFromPosts, sortByStableSeed } from '@brumaombra/ui-vintage/blog';
 import type { BlogPostData, BlogCategoryData, BlogTagData } from '@brumaombra/ui-vintage/blog';
 ```
 
@@ -3546,6 +3653,12 @@ import type { BlogPostData, BlogCategoryData, BlogTagData } from '@brumaombra/ui
 
 - **Slots:** `action`.
 
+#### `BlogSummary`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `summary` *(required)* | `string` |  |
+
 #### `BlogTagsSection`
 
 | Prop | Type | Default |
@@ -3686,6 +3799,7 @@ interface BlogPostData {
     path?: string;
     title?: string;
     description?: string;
+    summary?: string;
     image?: string;
     categoryText?: string;
     categorySlug?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@brumaombra/ui-vintage",
-	"version": "0.9.5",
+	"version": "0.9.7",
 	"description": "Source-published Nuxt UI runtime with shared theme tokens and built-in Nuxt integrations.",
 	"private": false,
 	"author": "Mauro Brambilla",
@@ -40,6 +40,7 @@
 		"./package.json": "./package.json",
 		"./style.css": "./src/styles.css",
 		"./accordion": "./src/components/ui/accordion/index.ts",
+		"./action-bar": "./src/components/action-bar/index.ts",
 		"./alert": "./src/components/ui/alert/index.ts",
 		"./alert-dialog": "./src/components/ui/alert-dialog/index.ts",
 		"./animated-number": "./src/components/ui/animated-number/index.ts",
@@ -100,6 +101,7 @@
 		"./progress-component": "./src/components/progress-component/index.ts",
 		"./radio-group": "./src/components/ui/radio-group/index.ts",
 		"./scroll-area": "./src/components/ui/scroll-area/index.ts",
+		"./section-title": "./src/components/section-title/index.ts",
 		"./select": "./src/components/ui/select/index.ts",
 		"./separator": "./src/components/ui/separator/index.ts",
 		"./sheet": "./src/components/ui/sheet/index.ts",
@@ -173,4 +175,4 @@
 			"glob": "13.0.6"
 		}
 	}
-}
+}

package/src/components/action-bar/ActionBar.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../lib/utils';
+
+// Props (a row of buttons on desktop; on mobile a full-width bar of equal tiles with the icon above the label, like an app)
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="action-bar" :class="cn('action-bar grid w-full auto-cols-fr grid-flow-col gap-2 md:flex md:w-auto md:flex-wrap md:items-center md:gap-3', props.class)">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+/* Mobile tiles: icon above a short label, filling the bar */
+@media (width < 48rem) {
+	.action-bar > :slotted([data-slot="button"]) {
+		height: auto;
+		width: auto;
+		flex-direction: column;
+		gap: 0.375rem;
+		padding: 0.75rem 0.25rem;
+		font-size: 0.6875rem;
+		line-height: 1.2;
+		white-space: normal;
+		text-align: center;
+	}
+
+	/* Same icon size on every tile */
+	.action-bar > :slotted([data-slot="button"]) svg {
+		width: 1.125rem;
+		height: 1.125rem;
+	}
+}
+</style>

package/src/components/action-bar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ActionBar.vue';
+export { default as ActionBar } from './ActionBar.vue';

package/src/components/blog/BlogContentRenderer.vue

@@ -153,7 +153,7 @@ const props = defineProps<{
 	padding: 1rem 1.25rem 1rem 1.5rem;
 	border: 1px solid var(--border);
 	border-left: 3px solid var(--primary);
-	border-radius: var(--radius-sm);
+	border-radius: var(--uv-radius);
 	background-color: var(--surface);
 	font-size: 15px;
 	font-style: italic;
@@ -169,7 +169,7 @@ const props = defineProps<{
 	color: var(--foreground);
 	background-color: var(--surface);
 	border: 1px solid var(--border);
-	border-radius: 0.25rem;
+	border-radius: var(--uv-radius);
 	display: inline-block;
 	font-size: 0.75rem;
 	font-weight: 600;
@@ -186,7 +186,7 @@ const props = defineProps<{
 /* Images */
 .blog-content :deep(img:not(.not-prose):not(.not-prose *)) {
 	border: 1px solid var(--border);
-	border-radius: var(--radius-sm);
+	border-radius: var(--uv-radius);
 	box-shadow: var(--uv-shadow-sm);
 }
 

package/src/components/blog/BlogPostPage.vue

@@ -8,6 +8,7 @@ import BlogFAQSection from './BlogFAQSection.vue';
 import BlogInfoSection from './BlogInfoSection.vue';
 import BlogPostHeader from './BlogPostHeader.vue';
 import BlogSectionTitle from './BlogSectionTitle.vue';
+import BlogSummary from './BlogSummary.vue';
 import BlogViewAllLink from './BlogViewAllLink.vue';
 import CategoryCard from './CategoryCard.vue';
 import PostCard from './PostCard.vue';
@@ -54,6 +55,9 @@ const postTags = computed(() => ((props.post.tags as string[] | undefined) || []
 				:tags="postTags"
 				:body="props.post.body" />
 
+			<!-- Short answer of the post (the summary field of the frontmatter) -->
+			<BlogSummary v-if="props.post.summary" :summary="props.post.summary" />
+
 			<!-- Table of contents -->
 			<TableOfContents :content="props.post" />
 

package/src/components/blog/BlogSectionTitle.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-// Props
+import { SectionTitle } from '../section-title';
+
+// Props (the blog sections use the shared section title, revealed on scroll)
 const props = withDefaults(defineProps<{
 	title: string;
 	description?: string;
@@ -9,25 +11,9 @@ const props = withDefaults(defineProps<{
 </script>
 
 <template>
-	<div data-aos="blur-up" class="relative mb-6 flex flex-col gap-3 border-b border-border pb-4 sm:flex-row sm:items-end sm:justify-between md:mb-8">
-		<!-- Primary segment at the start of the rule -->
-		<span aria-hidden="true" class="absolute -bottom-px left-0 h-0.5 w-12 bg-primary" />
-
-		<div class="min-w-0">
-			<!-- Title -->
-			<h2 class="text-xl font-semibold tracking-tight text-foreground md:text-2xl">
-				{{ props.title }}
-			</h2>
-
-			<!-- Description -->
-			<p v-if="props.description" class="mt-1 max-w-2xl text-xs leading-6 text-muted-foreground md:text-sm">
-				{{ props.description }}
-			</p>
-		</div>
-
-		<!-- Optional trailing action (for example a "View all" link) -->
-		<div v-if="$slots.action" class="shrink-0">
+	<SectionTitle data-aos="blur-up" :title="props.title" :description="props.description">
+		<template v-if="$slots.action" #action>
 			<slot name="action" />
-		</div>
-	</div>
+		</template>
+	</SectionTitle>
 </template>

package/src/components/blog/BlogSummary.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import Idea01Icon from '@hugeicons/core-free-icons/Idea01Icon';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card } from '../ui/card';
+
+// Props (the short answer of the post, from the summary field of its frontmatter)
+const props = defineProps<{
+	summary: string;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+	<Card data-slot="blog-summary" role="region" padding="none" class="mb-6" :aria-label="t('uiVintage.blog.inShort')">
+		<!-- Header (same layout as the table of contents accordion) -->
+		<div class="flex items-center gap-3 px-5 py-3.5">
+			<!-- Icon tile -->
+			<span class="flex size-7 shrink-0 items-center justify-center rounded border border-primary/30 text-primary">
+				<HugeiconsIcon :icon="Idea01Icon" class="size-3.5" />
+			</span>
+
+			<!-- Label -->
+			<p class="text-sm font-semibold text-foreground">{{ t('uiVintage.blog.inShort') }}</p>
+		</div>
+
+		<!-- Summary -->
+		<p class="border-t border-border px-5 py-4 text-sm leading-7 text-foreground md:text-base">{{ props.summary }}</p>
+	</Card>
+</template>

package/src/components/blog/blogPageUtils.ts

@@ -3,6 +3,7 @@ export interface BlogPostData {
 	path?: string;
 	title?: string;
 	description?: string;
+	summary?: string;
 	image?: string;
 	categoryText?: string;
 	categorySlug?: string;

package/src/components/blog/index.ts

@@ -5,6 +5,7 @@ export { default as BlogInfoSection } from './BlogInfoSection.vue';
 export { default as BlogPostHeader } from './BlogPostHeader.vue';
 export { default as BlogHeaderSection } from './BlogHeaderSection.vue';
 export { default as BlogSectionTitle } from './BlogSectionTitle.vue';
+export { default as BlogSummary } from './BlogSummary.vue';
 export { default as BlogTagsSection } from './BlogTagsSection.vue';
 export { default as CategoriesList } from './CategoriesList.vue';
 export { default as CategoriesSection } from './CategoriesSection.vue';

package/src/components/chip/Chip.vue

@@ -37,7 +37,7 @@ const handleRemove = () => {
 		<span class="leading-none">{{ props.text }}</span>
 
 		<!-- Remove button -->
-		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded-sm opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
+		<button type="button" :aria-label="resolvedRemoveLabel" class="group/remove inline-flex size-4 cursor-pointer items-center justify-center rounded opacity-70 [transition:opacity_150ms,background-color_150ms,scale_300ms_var(--ease-spring)] hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 active:scale-75 dark:hover:bg-white/10" @click="handleRemove">
 			<HugeiconsIcon :icon="Cancel01Icon" class="size-3 transition-transform duration-300 ease-spring group-hover/remove:rotate-90" />
 		</button>
 	</div>

package/src/components/dashboard-shell/DashboardShell.vue

@@ -75,7 +75,7 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 		<!-- Sidebar -->
 		<Sidebar :collapsible="props.collapsible" :compact="props.compact">
 			<!-- Sidebar header -->
-			<SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
+			<SidebarHeader v-if="props.appName || lightLogo || $slots['sidebar-header']" class="h-16 justify-center shadow-[inset_0_-1px_0_var(--sidebar-border)]">
 				<slot name="sidebar-header">
 					<SidebarMenu>
 						<SidebarMenuItem>
@@ -113,8 +113,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 							<SidebarMenuItem v-for="item in section.items" :key="item.id">
 								<SidebarMenuButton as-child :is-active="item.active" :class="cn('group/nav relative h-auto min-h-11 overflow-hidden rounded px-3 py-2.5 text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-foreground sm:px-3.5', 'before:absolute before:inset-y-2 before:left-0 before:w-0.5 before:origin-center before:scale-y-0 before:bg-primary before:transition-transform before:duration-300 before:ease-spring data-[active=true]:before:scale-y-100', item.description ? 'items-start' : 'items-center')">
 									<NuxtLinkLocale v-bind="getSidebarItemLinkProps(item)" :aria-current="item.active ? 'page' : undefined">
-										<!-- Icon, centered on the capitals of the label (or of its first line, 1.25em tall): the line box alone centers it 0.08em too low, because of the space the font keeps for descenders (the size is important: the menu button shrinks its direct svg children to size-4) -->
-										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('size-5! shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-[calc((1.25em_-_20px)/2_-_0.08em)]' : 'self-center -translate-y-[0.08em]')" />
+										<!-- Icon, centered on the capitals of the label (or of its first line, 1.25em tall): the line box alone centers it 0.08em too low, because of the space the font keeps for descenders (the size is important: the menu button sizes its direct svg children itself, down to size-3.5 in compact mode) -->
+										<HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('size-4! shrink-0 opacity-90 transition-[opacity,color] duration-150 group-hover/nav:opacity-100 group-data-[active=true]/nav:text-primary', item.description ? 'mt-[calc((1.25em_-_16px)/2_-_0.08em)]' : 'self-center -translate-y-[0.08em]')" />
 
 										<!-- Label and optional description -->
 										<div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
@@ -149,8 +149,8 @@ const logoAlt = computed(() => props.appName ? t('uiVintage.common.logo', { name
 			<!-- Background -->
 			<BackgroundGrid v-if="props.showBackground" />
 
-			<!-- Topbar -->
-			<header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
+			<!-- Topbar (its bottom line is an inset shadow, so the whole 64px is free and the content centers on whole pixels) -->
+			<header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 shadow-[inset_0_-1px_0_var(--sidebar-border)] bg-sidebar/80 px-4 backdrop-blur-md backdrop-saturate-150', props.topbarClass)">
 				<!-- Sidebar trigger -->
 				<SidebarTrigger class="-ml-1" />
 

package/src/components/data-list/DataListText.vue

@@ -2,14 +2,17 @@
 import type { HTMLAttributes } from 'vue';
 import { cn } from '../../lib/utils';
 
-// Props
-const props = defineProps<{
+// Props (long text is clamped to 3 lines, wrap shows all of it, keeping its line breaks)
+const props = withDefaults(defineProps<{
+	wrap?: boolean;
 	class?: HTMLAttributes['class'];
-}>();
+}>(), {
+	wrap: false
+});
 </script>
 
 <template>
-	<div data-slot="data-list-text" :class="cn('line-clamp-3', props.class)">
+	<div data-slot="data-list-text" :class="cn(props.wrap ? 'whitespace-pre-wrap break-words' : 'line-clamp-3', props.class)">
 		<slot />
 	</div>
 </template>

package/src/components/language-flag/flags/ChineseFlag.vue

@@ -1,5 +1,5 @@
 <template>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
+	<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-[1.35rem] shrink-0 rounded-[2px]" viewBox="0 0 640 480" aria-hidden="true" focusable="false">
 		<path fill="#ee1c25" d="M0 0h640v480H0z" />
 		<path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(.55555 0 0 .55555 53.333 53.333)" />
 		<path fill="#ff0" d="M76.8 177.6 120 48l43.2 129.6H48z" transform="matrix(-.0955 -.15916 .15916 -.0955 240.3 48)" />