@brumaombra/ui-vintage 0.9.6 → 0.9.8

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`.
 
 ---
 
@@ -927,7 +964,7 @@ import { RadioGroup, RadioGroupItem, RadioGroupCard } from '@brumaombra/ui-vinta
 
 ### `@brumaombra/ui-vintage/select`
 
-Styled Reka select. `SelectValueContent` and `SelectItemContent` render an icon, label, and description.
+Styled Reka select. `SelectValueContent` and `SelectItemContent` render an icon, label, and description; the default slot of `SelectItemContent` replaces the icon with any leading visual, such as a `LanguageFlag`.
 
 ```ts
 import { Select, SelectContent, SelectGroup, SelectItem, SelectItemContent, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectValueContent } from '@brumaombra/ui-vintage/select';
@@ -982,6 +1019,8 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectItemContent, Sele
 | `textClass` | `HTMLAttributes['class']` |  |
 | `descriptionClass` | `HTMLAttributes['class']` |  |
 
+- **Slots:** `default`.
+
 #### `SelectItemText`
 
 - **Also accepts** all props of Reka `SelectItemTextProps`.
@@ -1268,6 +1307,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 +1318,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,9 +1372,10 @@ 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` |
+| `interactive` | `boolean` | `false` |
 | `class` | `HTMLAttributes['class']` |  |
 
 ---
@@ -1343,7 +1385,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 +1403,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 +1440,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 +1527,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 +1636,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 +1739,10 @@ import { Skeleton } from '@brumaombra/ui-vintage/skeleton';
 
 #### `Skeleton`
 
-- **Props:** `class`.
+| Prop | Type | Default |
+| --- | --- | --- |
+| `circle` | `boolean` | `false` |
+| `class` | `HTMLAttributes['class']` |  |
 
 ---
 
@@ -1768,7 +1826,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 +2315,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 +2359,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 +2508,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 +2547,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 +2581,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 +2598,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 +3505,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 +3571,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 +3656,12 @@ import type { BlogPostData, BlogCategoryData, BlogTagData } from '@brumaombra/ui
 
 - **Slots:** `action`.
 
+#### `BlogSummary`
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `summary` *(required)* | `string` |  |
+
 #### `BlogTagsSection`
 
 | Prop | Type | Default |
@@ -3686,6 +3802,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.6",
+	"version": "0.9.8",
 	"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

@@ -91,13 +91,6 @@ const props = defineProps<{
 	line-height: 1.85;
 }
 
-/* Lede: the opening paragraph reads a little larger */
-.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-	font-size: 17px;
-	line-height: 1.8;
-	color: var(--muted-foreground);
-}
-
 .blog-content :deep(:is(p, blockquote, li):not(.not-prose):not(.not-prose *) strong) {
 	font-weight: 700;
 	color: var(--foreground);
@@ -153,7 +146,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 +162,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 +179,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);
 }
 
@@ -215,10 +208,6 @@ const props = defineProps<{
 		line-height: 1.8;
 	}
 
-	.blog-content :deep(p:not(.not-prose):not(.not-prose *):first-of-type) {
-		font-size: 15px;
-	}
-
 	.blog-content :deep(h2:not(.not-prose):not(.not-prose *)) {
 		margin-top: 2.25rem;
 		margin-bottom: 1rem;

package/src/components/blog/BlogFAQSection.vue

@@ -20,7 +20,7 @@ const hasValidFAQs = computed(() => props.faqs && props.faqs.length > 0);
 </script>
 
 <template>
-	<div v-if="hasValidFAQs" class="mt-12 lg:mt-16">
+	<div v-if="hasValidFAQs" class="mt-10 lg:mt-12">
 		<!-- Title and description -->
 		<BlogSectionTitle :title="t('uiVintage.blog.faq.title')" :description="t('uiVintage.blog.faq.description')" />
 

package/src/components/blog/BlogIndexPage.vue

@@ -75,7 +75,7 @@ const headerStats = computed(() => [
 </script>
 
 <template>
-	<div class="space-y-14 md:space-y-18">
+	<div class="space-y-12 md:space-y-14">
 		<!-- Header section -->
 		<BlogHeaderSection :announcement="headerAnnouncement"
 			:title="props.title"

package/src/components/blog/BlogInfoSection.vue

@@ -34,12 +34,12 @@ const showModifiedDate = computed(() => Boolean(props.dateModified) && formatted
 
 <template>
 	<!-- Author and date information -->
-	<Card data-aos="blur-up" class="gap-0! overflow-hidden p-0!">
+	<Card data-aos="blur-up" padding="none">
 		<!-- Author -->
-		<div :class="['flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
-			<!-- Author image -->
+		<div :class="['group/author flex gap-3 px-5 py-4', props.authorBio ? 'items-start' : 'items-center']">
+			<!-- Author image (grows softly while the author row is hovered) -->
 			<NuxtLinkLocale :to="props.authorUrl" target="_blank" rel="noopener noreferrer" class="shrink-0 rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
-				<NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover" />
+				<NuxtImg :src="props.authorImageUrl" :alt="props.author" height="44" width="44" format="avif" quality="40" :sizes="{ 480: '44px', 1280: '44px' }" loading="lazy" decoding="async" class="size-11 rounded border border-border object-cover transition-[scale] duration-500 ease-spring group-hover/author:scale-110" />
 			</NuxtLinkLocale>
 
 			<!-- Author name and bio -->

package/src/components/blog/BlogPostHeader.vue

@@ -67,7 +67,7 @@ const hasCategory = computed(() => Boolean(props.categoryText && props.categoryS
 // Whether the details row has any column to show
 const hasDetails = computed(() => Boolean(props.author || formattedDate.value || resolvedReadingMinutes.value || hasCategory.value));
 
-const badgeLinkClasses = 'rounded outline-none transition-opacity duration-150 hover:opacity-80 focus-visible:ring-[3px] focus-visible:ring-ring/45';
+const badgeLinkClasses = 'rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45';
 
 // Shared classes for the details cells (exposed to the meta slot)
 const detailCellClasses = 'min-w-0 border-t border-l border-border py-4 pl-4 pr-4';
@@ -153,7 +153,7 @@ const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-
 					<dt :class="detailLabelClasses">{{ t('uiVintage.blog.category') }}</dt>
 					<dd class="mt-1.5">
 						<NuxtLinkLocale :to="categoryPath" :class="['inline-flex', badgeLinkClasses]">
-							<Badge color="yellow" :text="props.categoryText" pulse />
+							<Badge color="yellow" :text="props.categoryText" pulse interactive />
 						</NuxtLinkLocale>
 					</dd>
 				</div>
@@ -166,15 +166,14 @@ const detailLabelClasses = 'text-[11px] font-semibold tracking-wider text-muted-
 		<!-- Tags -->
 		<div v-if="props.tags.length > 0" :class="['mt-4 flex flex-wrap items-center gap-2', enter('animate-uv-fade-up [animation-delay:600ms]')]">
 			<NuxtLinkLocale v-for="tag in props.tags" :key="tag.slug" :to="tagPath(tag.slug)" :class="badgeLinkClasses">
-				<Badge :text="`#${tag.name}`" />
+				<Badge :text="`#${tag.name}`" interactive />
 			</NuxtLinkLocale>
 		</div>
 
 		<!-- Featured image (replaceable through the media slot) -->
 		<slot name="media">
-			<div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-xl', enter('animate-uv-fade-up [animation-delay:650ms]')]">
+			<div v-if="props.image" :class="['relative mt-8 aspect-video w-full overflow-hidden rounded border border-border shadow-elevated-lg', enter('animate-uv-fade-up [animation-delay:650ms]')]">
 				<NuxtImg :src="props.image" :alt="props.title" format="avif" quality="50" :sizes="{ 480: '480px', 1536: '896px' }" loading="eager" fetchpriority="high" preload :class="['size-full object-cover', enter('animate-uv-ken-burns')]" />
-				<div aria-hidden="true" class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/20 to-transparent" />
 			</div>
 		</slot>
 	</header>

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" />
 
@@ -84,7 +88,7 @@ const postTags = computed(() => ((props.post.tags as string[] | undefined) || []
 		</article>
 
 		<!-- Related posts -->
-		<section v-if="props.relatedPosts.length" class="mt-16 md:mt-24">
+		<section v-if="props.relatedPosts.length" class="mt-12 md:mt-16">
 			<BlogSectionTitle :title="t('uiVintage.blog.readAlso')" />
 			<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
 				<NuxtLinkLocale v-for="(relatedPost, index) in props.relatedPosts" :key="relatedPost.path" :to="relatedPost.path" data-aos="blur-up" :data-aos-delay="(index % 2) * 90" class="block h-full rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/45">
@@ -98,7 +102,7 @@ const postTags = computed(() => ((props.post.tags as string[] | undefined) || []
 		</section>
 
 		<!-- Related categories -->
-		<section v-if="props.relatedCategories.length" class="mt-16 md:mt-24">
+		<section v-if="props.relatedCategories.length" class="mt-12 md:mt-16">
 			<BlogSectionTitle :title="t('uiVintage.blog.exploreCategories')">
 				<template #action>
 					<BlogViewAllLink to="/blog/categories" :label="t('uiVintage.blog.exploreAllCategories')" />

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>