@urbicon-ui/design-content 6.1.8

package/content/blocks/components/sparkline/llm.txt

@@ -0,0 +1,33 @@
+
+---
+
+## Sparkline
+Tiny inline trend line — no axes, no labels — sized to flow in
+table cells, cards, or running text. Zero-dependency SVG, optional area fill
+and end-point dot. Aria-hidden by default with an optional `ariaLabel`.
+
+**Import:** `import { Sparkline } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Sparkline data={[3, 5, 4, 8, 6, 9]} area />
+```
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| data | `number[]` | yes |  | Sequence of values plotted left → right. |
+| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| area | `boolean` | no | false | Fill the area under the line. |
+| ariaLabel | `string` | no |  | Accessible label; when omitted the sparkline is aria-hidden. |
+| class | `string` | no |  | Extra classes merged onto the wrapper. |
+| color | `string` | no | var(--color-chart-1) | Color property for the Sparkline component |
+| height | `number` | no | 24 | Height property for the Sparkline component |
+| showEndPoint | `boolean` | no | false | Mark the last point with a dot. |
+| slotClasses | `SparklineSlotClasses` | no |  | Per-slot class overrides. |
+| strokeWidth | `number` | no | 1.5 | StrokeWidth property for the Sparkline component |
+| unstyled | `boolean` | no |  | Remove all default classes. |
+| width | `number` | no | 96 | Width property for the Sparkline component |
+
+Inherited from:
+- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)

package/content/blocks/components/theme-switcher/llm.txt

@@ -0,0 +1,40 @@
+
+---
+
+## ThemeSwitcher
+Cycles between light, dark, and system color schemes.
+Applies light/dark classes on the html element and persists to localStorage.
+
+**Import:** `import { ThemeSwitcher } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<ThemeSwitcher />
+```
+
+```svelte
+<ThemeSwitcher size="lg" variant="outlined" strategy="toggle" />
+```
+
+### Variants
+- variant: filled, ghost, outlined (default: ghost)
+- size: lg, md, sm (default: md)
+- disabled: true (default: false)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| class | `string` | no |  | Additional CSS classes. |
+| disabled | `boolean` | no |  | Disable the switcher. |
+| onThemeChange | `(theme: Theme) => void` | no |  | Called after the theme changes. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ ThemeSwitcher: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| size | `ThemeSwitcherVariants['size']` | no | 'md' | Size variant that controls dimensions and spacing of the ThemeSwitcher |
+| slotClasses | `Partial<Record<'button' | 'icon', string>>` | no |  | Per-slot class overrides. |
+| storageKey | `string | false` | no | 'urbicon-theme' | `localStorage` key for persistence. Set to `false` to disable. |
+| strategy | `'cycle' | 'toggle'` | no | 'cycle' | Interaction mode. - `'cycle'` — single button cycling light → dark → system (default) - `'toggle'` — single button toggling light ↔ dark (no system option) |
+| theme | `Theme` | no | 'system' | Current theme. Supports `bind:theme`. |
+| unstyled | `boolean` | no | false | Strip all default styles. |
+| variant | `ThemeSwitcherVariants['variant']` | no | 'ghost' | Visual style of the button. |
+
+### Slots (slotClasses keys)
+`button`, `icon`

package/content/blocks/primitives/accordion/llm.txt

@@ -0,0 +1,57 @@
+
+---
+
+## Accordion
+Collapsible content sections with expand/collapse animation.
+Supports single or multiple open items, keyboard navigation, and ARIA accordion pattern.
+
+**Import:** `import { Accordion } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Accordion>
+  <AccordionItem value="faq-1" title="What is Urbicon UI?">
+    A Svelte 5 component library with built-in i18n and design tokens.
+  </AccordionItem>
+  <AccordionItem value="faq-2" title="How does dark mode work?">
+    Semantic tokens automatically handle light/dark via prefers-color-scheme.
+  </AccordionItem>
+</Accordion>
+```
+
+```svelte
+<Accordion type="multiple" variant="separated" bind:value={openItems}>
+  <AccordionItem value="section-1" title="Section 1">Content</AccordionItem>
+  <AccordionItem value="section-2" title="Section 2">Content</AccordionItem>
+</Accordion>
+```
+
+### Variants
+- variant: default, ghost, separated (default: default)
+- size: lg, md, sm (default: md)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| children | `Snippet` | yes |  | Content to render inside the Accordion component |
+| ...AccordionVariants | `VariantProps` | no |  | Styling variants from AccordionVariants |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| class | `string` | no |  | Additional CSS classes to apply to the Accordion component |
+| collapsible | `boolean` | no | true | Whether items can be fully collapsed |
+| defaultValue | `string | string[]` | no |  | Default open item(s) |
+| disabled | `boolean` | no | false | Whether the Accordion is disabled and non-interactive |
+| onValueChange | `(value: string | string[]) => void` | no |  | Callback when open items change |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Accordion: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size variant that controls dimensions and spacing of the Accordion |
+| slotClasses | `Partial<Record<'base' | 'item' | 'trigger' | 'chevron' | 'content' | 'contentInner', string>>` | no |  | Per-slot class overrides |
+| type | `'single' | 'multiple'` | no | 'single' | Allow single or multiple items open at once |
+| unstyled | `boolean` | no |  | Remove default styles |
+| value | `string | string[]` | no |  | Controlled open item(s) – string for single, string[] for multiple |
+| variant | `'default' | 'separated' | 'ghost'` | no | 'default' | Visual style variant for the Accordion component |
+
+Inherited from:
+- AccordionVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `item`, `trigger`, `chevron`, `content`, `contentInner`

package/content/blocks/primitives/alert/llm.txt

@@ -0,0 +1,54 @@
+
+---
+
+## Alert
+Persistent inline notification for communicating status, warnings, errors,
+or informational messages. Supports icons, titles, descriptions, actions, and dismissal.
+
+**Import:** `import { Alert } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Alert intent="success" title="Saved successfully">
+  Your changes have been saved.
+</Alert>
+```
+
+```svelte
+<Alert intent="danger" variant="inline" dismissible onDismiss={() => (visible = false)}>
+  {#snippet icon()}<AlertCircle size={20} />{/snippet}
+  Something went wrong. Please try again.
+  {#snippet actions()}<Button size="sm" variant="ghost">Retry</Button>{/snippet}
+</Alert>
+```
+
+### Variants
+- intent: danger, info, neutral, primary, success, warning (default: primary)
+- variant: filled, inline, soft (default: soft)
+- size: lg, md, sm (default: md)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...AlertVariants | `VariantProps` | no |  | Styling variants from AlertVariants |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'title' | 'children') |
+| actions | `Snippet` | no |  | Action buttons snippet |
+| children | `Snippet` | no |  | Description content (children slot) |
+| class | `string` | no |  | Additional CSS classes to apply to the Alert component |
+| dismissible | `boolean` | no | false | Show dismiss/close button |
+| icon | `Snippet` | no |  | Custom icon snippet (replaces default intent icon) |
+| intent | `'primary' | 'info' | 'success' | 'warning' | 'danger' | 'neutral'` | no | 'primary' | Semantic color intent |
+| onDismiss | `() => void` | no |  | Callback when dismissed |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Alert: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size variant that controls dimensions and spacing of the Alert |
+| slotClasses | `Partial<Record<'base' | 'icon' | 'content' | 'title' | 'description' | 'actions' | 'dismissButton', string>>` | no |  | Per-slot class overrides |
+| title | `string` | no |  | Alert title (bold header text) |
+| unstyled | `boolean` | no |  | Remove default styles |
+| variant | `'soft' | 'inline' | 'filled'` | no | 'soft' | Visual style variant for the Alert component |
+
+Inherited from:
+- AlertVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `icon`, `content`, `title`, `description`, `actions`, `dismissButton`

package/content/blocks/primitives/avatar/llm.txt

@@ -0,0 +1,61 @@
+
+---
+
+## Avatar
+User profile image component with fallback initials, multiple sizes, and interactive states.
+
+**Import:** `import { Avatar } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Avatar src="/user-photo.jpg" name="John Doe" size="lg" />
+```
+
+```svelte
+<Avatar name="Jane Smith" randomColor clickable onclick={() => showProfile()} />
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
+- variant: circle, rounded, square (default: circle)
+- size: 2xl, lg, md, sm, xl, xs (default: md)
+- interactive: true (default: false)
+- ring: true (default: false)
+- ringIntent: danger, neutral, primary, secondary, success, warning (default: primary)
+- status: away, busy, offline, online
+- statusPosition: bottom-left, bottom-right, top-left, top-right (default: bottom-right)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...AvatarVariants | `VariantProps` | no |  | Styling variants from AvatarVariants |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| alt | `string` | no |  | Alt text for the image. Defaults to `name`. |
+| children | `Snippet` | no |  | Custom fallback content rendered instead of auto-generated initials. Useful for overflow counters, icons, or fully custom avatars with `unstyled`. |
+| class | `string` | no |  | Extra classes merged onto the root element. |
+| clickable | `boolean` | no |  | Mark the avatar as clickable (adds hover/focus styles and keyboard support). Alias for the `interactive` variant. |
+| mint | `MintProp` | no |  | Micro-interaction preset. Only applies when the avatar is interactive. |
+| name | `string` | no |  | Full user name — used for initials generation, `randomColor` hashing, and `aria-label`. |
+| onclick | `(event: MouseEvent) => void` | no |  | Click handler. Automatically enables interactive styles. |
+| onHover | `(hovered: boolean) => void` | no |  | Called when the hover state changes. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Avatar: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| randomColor | `boolean` | no |  | Derive a deterministic background color from `name`. The same name always produces the same color, making it easy to visually distinguish users without images. Overrides `intent`. |
+| ringColor | `string` | no |  | Custom ring color (CSS value). Overrides `ringIntent` when set. |
+| slotClasses | `Partial<Record<'base' | 'image' | 'fallback' | 'status', string>>` | no |  | Per-slot class overrides merged with tv styles. |
+| src | `string` | no |  | Image URL. Falls back to initials or `children` when empty or on load error. |
+| unstyled | `boolean` | no |  | Remove all default tv classes. |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Avatar. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
+| variant | `'circle' | 'rounded' | 'square'` | no | circle | Controls the visual style and presentation of the Avatar. Determines the component's visual treatment. Available options: circle, rounded, square. |
+| size | `'2xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Avatar. Affects the component's physical footprint. Available options: 2xl, lg, md, and 3 more. |
+| interactive | `'true'` | no | false | Controls the interactive behavior and appearance of the Avatar component. Available options: true. |
+| ring | `'true'` | no | false | Controls the ring behavior and appearance of the Avatar component. Available options: true. |
+| ringIntent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the ringIntent behavior and appearance of the Avatar component. Available options: danger, neutral, primary, and 3 more. |
+| status | `'away' | 'busy' | 'offline' | 'online'` | no |  | Controls the status behavior and appearance of the Avatar component. Available options: away, busy, offline, online. |
+| statusPosition | `'bottom-left' | 'bottom-right' | 'top-left' | 'top-right'` | no | bottom-right | Controls the statusPosition behavior and appearance of the Avatar component. Available options: bottom-left, bottom-right, top-left, top-right. |
+
+Inherited from:
+- AvatarVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `image`, `fallback`, `status`

package/content/blocks/primitives/badge/llm.txt

@@ -0,0 +1,60 @@
+
+---
+
+## Badge
+Compact label for status, categories, counters, and notifications.
+
+**Import:** `import { Badge } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Badge variant="filled" intent="primary">New Feature</Badge>
+```
+
+```svelte
+<div class="relative">
+  <Button>Notifications</Button>
+  <Badge intent="danger" counter placement="top-end" border>5</Badge>
+</div>
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: primary)
+- variant: dot, filled, outlined, soft (default: filled)
+- size: lg, md, sm, xs (default: md)
+- border: true (default: false)
+- counter: true (default: false)
+- disabled: true (default: false)
+- interactive: true (default: false)
+- placement: bottom, bottom-end, bottom-start, left, right, top, top-end, top-start
+- pulse: true (default: false)
+- removable: true (default: false)
+- tier: commit, modify (default: commit)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| border | `boolean` | no |  | Add a ring outline in the page background color — useful to visually separate overlapping or positioned badges from their parent. |
+| children | `Snippet` | no |  | Badge content (text, icons, numbers). |
+| class | `string` | no |  | Extra classes merged onto the root element. |
+| counter | `boolean` | no |  | Display as a compact pill for numeric counts. Tightens padding and uses tabular-nums so digits align. |
+| disabled | `boolean` | no |  | Visually disable the badge (reduced opacity, no pointer events). |
+| interactive | `boolean` | no |  | Enable hover/focus styles and keyboard activation. Automatically enabled when `onclick` is provided. |
+| mint | `MintProp` | no |  | Micro-interaction preset. Only applies when the badge is interactive. |
+| onclick | `(event: MouseEvent) => void` | no |  | Click handler. Automatically enables interactive styles. |
+| onHover | `(hovered: boolean) => void` | no |  | Called when the hover state changes. |
+| onRemove | `() => void` | no |  | Fired when the remove button is clicked (only when `removable` is true). |
+| placement | `BadgePlacement` | no |  | Anchor the badge absolutely within a `position: relative` parent. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Badge: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| pulse | `boolean` | no |  | Add a pulsing animation to draw attention (e.g. for live indicators). |
+| removable | `boolean` | no |  | Show a remove (×) button. |
+| role | `'status' | 'alert' | 'badge'` | no |  | ARIA role. Defaults to `"status"`. Use `"alert"` for time-sensitive notifications. |
+| slotClasses | `Partial<Record<'base' | 'content' | 'removeButton' | 'removeIcon', string>>` | no |  | Per-slot class overrides merged with tv styles. |
+| unstyled | `boolean` | no |  | Remove all default tv classes. |
+| variant | `'dot' | 'filled' | 'outlined' | 'soft'` | no | 'filled' | Visual variant. `dot` renders a pure indicator (content hidden); the label variants accept the full surface. |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Badge. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
+| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Badge. Affects the component's physical footprint. Available options: lg, md, sm, xs. |
+| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the Badge component. Available options: commit, modify. |
+
+### Slots (slotClasses keys)
+`base`, `content`, `removeButton`, `removeIcon`

package/content/blocks/primitives/breadcrumb/llm.txt

@@ -0,0 +1,47 @@
+
+---
+
+## Breadcrumb
+Navigation aid showing the current page's location in a hierarchy.
+Renders an accessible nav with structured items and customizable separators.
+
+**Import:** `import { Breadcrumb } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Breadcrumb items={[
+  { label: 'Home', href: '/' },
+  { label: 'Products', href: '/products' },
+  { label: 'Widget' }
+]} />
+```
+
+```svelte
+<Breadcrumb items={breadcrumbs} size="sm">
+  {#snippet separator()}<ChevronRight size={14} />{/snippet}
+</Breadcrumb>
+```
+
+### Variants
+- size: lg, md, sm (default: md)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| items | `BreadcrumbItem[]` | yes |  | Ordered breadcrumb items (last item is current page) |
+| ...BreadcrumbVariants | `VariantProps` | no |  | Styling variants from BreadcrumbVariants |
+| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| aria-label | `string` | no | 'Breadcrumb' | Accessible label for the nav element |
+| class | `string` | no |  | Additional CSS classes to apply to the Breadcrumb component |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Breadcrumb: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| separator | `Snippet` | no |  | Custom separator snippet (default: "/") |
+| size | `'sm' | 'md' | 'lg'` | no | 'md' | Size variant that controls dimensions and spacing of the Breadcrumb |
+| slotClasses | `Partial<Record<'nav' | 'list' | 'item' | 'link' | 'currentPage' | 'separator', string>>` | no |  | Per-slot class overrides |
+| unstyled | `boolean` | no |  | Remove default styles |
+
+Inherited from:
+- BreadcrumbVariants (external)
+- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`nav`, `list`, `item`, `link`, `currentPage`, `separator`

package/content/blocks/primitives/button/llm.txt

@@ -0,0 +1,80 @@
+
+---
+
+## Button
+Versatile button component with multiple variants, sizes, intents, and micro-interaction patterns.
+Built with Svelte 5 and optimized for performance and accessibility.
+
+**Import:** `import { Button } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Button variant="filled" intent="primary" size="md">
+  Click me
+</Button>
+```
+
+```svelte
+<Button variant="outlined" intent="danger" mint={['shake', 'ripple']}>
+  Delete Item
+</Button>
+```
+
+```svelte
+<!-- Register once at app root: -->
+<BlocksProvider
+presets={{
+Button: {
+overlay: {
+slotClasses: {
+ base: 'bg-black/20 hover:bg-black/30 active:bg-black/40 text-white border-transparent'
+}
+}
+}
+}}
+>
+<Button preset="overlay">Reinholen</Button>
+</BlocksProvider>
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: neutral)
+- variant: filled, ghost, outlined, text (default: filled)
+- size: 2xs, lg, md, sm, xl, xs (default: md)
+- active: false, true (default: false)
+- buttonGroupConnected: true
+- loading: false, true (default: false)
+- loadingPlacement: end, overlay, start (default: start)
+- pressed: true (default: false)
+- tier: commit, modify (default: commit)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...ButtonVariants | `VariantProps` | no |  | Styling variants from ButtonVariants |
+| ...HTMLButtonAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| active | `boolean` | no | false | Whether the button is visually active/selected (e.g. in a ButtonGroup with selection). Unlike `pressed` (momentary feedback), `active` represents a persistent selected state. |
+| children | `Snippet` | no |  | The content of the button |
+| class | `string` | no |  | Custom CSS class name |
+| disabled | `boolean` | no | false | Whether the button is disabled |
+| loading | `boolean` | no | false | Whether the button is in a loading state |
+| loadingPlacement | `'overlay' | 'start' | 'end'` | no | 'overlay' | Where the loading indicator should appear when loading is true - 'overlay': spinner overlays content and hides it (default) - 'start': spinner appears before the content - 'end': spinner appears after the content |
+| mint | `MintProp` | no | 'scale' | Micro-interaction patterns Can be a string, array of strings, or array of config objects |
+| onclick | `(event: MouseEvent) => void` | no |  | Onclick property for the Button component |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Button: {...} }}>`. Prefer this over `class="bg-…!"` overrides when the requested look is outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| pressed | `boolean` | no | false | Whether the button is pressed (for toggle buttons) |
+| slotClasses | `Partial<Record<'base' | 'content' | 'spinner', string>>` | no |  | Per-slot class overrides merged with tv styles: base | content | spinner |
+| unstyled | `boolean` | no |  | Remove default tailwind-variants classes. Only user classes apply. |
+| value | `string` | no |  | The value associated with the button (useful in ButtonGroups) |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | neutral | Controls the color theme and semantic meaning of the Button. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
+| variant | `'filled' | 'ghost' | 'outlined' | 'text'` | no | filled | Controls the visual style and presentation of the Button. Determines the component's visual treatment. Available options: filled, ghost, outlined, text. |
+| size | `'2xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Button. Affects the component's physical footprint. Available options: 2xs, lg, md, and 3 more. |
+| buttonGroupConnected | `'true'` | no |  | Controls the buttonGroupConnected behavior and appearance of the Button component. Available options: true. |
+| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the Button component. Available options: commit, modify. |
+
+Inherited from:
+- ButtonVariants (external)
+- Omit<HTMLButtonAttributes, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `content`, `spinner`

package/content/blocks/primitives/button-group/llm.txt

@@ -0,0 +1,65 @@
+
+---
+
+## ButtonGroup
+Groups related buttons with shared styling, layout, and optional selection behaviour.
+Supports single-select (radio), multi-select (checkbox), or no selection.
+
+**Import:** `import { ButtonGroup } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<ButtonGroup selection="single" bind:value={selectedView}>
+  <Button value="list">List</Button>
+  <Button value="grid">Grid</Button>
+</ButtonGroup>
+```
+
+```svelte
+<ButtonGroup
+  selection="multiple"
+  bind:value={selectedFormats}
+  connected
+  size="sm"
+  variant="outlined"
+>
+  <Button value="bold">B</Button>
+  <Button value="italic">I</Button>
+  <Button value="underline">U</Button>
+</ButtonGroup>
+```
+
+### Variants
+- connected: false, true (default: true)
+- disabled: true (default: false)
+- orientation: horizontal, vertical (default: horizontal)
+- tier: commit, modify (default: commit)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| ariaLabel | `string` | no |  | Accessible label for the group (prefer this over `aria-label` for correct HTML attribute). |
+| ariaLabelledBy | `string` | no |  | ID of the element that labels the group. |
+| children | `Snippet` | no |  | Button children to group. |
+| class | `string` | no |  | Extra classes merged onto the root element. |
+| connected | `boolean` | no |  | Visually connect buttons (overlapping borders, shared rounding). When `false`, buttons are spaced with a small gap. |
+| disabled | `boolean` | no |  | Disable the entire group and all child Buttons. |
+| intent | `ComponentIntent` | no |  | Semantic colour propagated to child Buttons. |
+| mint | `MintProp` | no |  | Micro-interaction preset propagated to child Buttons. |
+| onSelectionChange | `(value: ButtonGroupValue, selectedValues: string[]) => void` | no |  | Fired when selection changes. Receives the new value and an array of all selected values. |
+| orientation | `ButtonGroupOrientation` | no |  | Orientation property for the ButtonGroup component |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ ButtonGroup: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| selection | `ButtonGroupSelection` | no |  | Selection mode. `"single"` = radio-group, `"multiple"` = checkbox-group, `"none"` = no selection. |
+| size | `ComponentSize` | no |  | Size propagated to child Buttons (unless a Button sets its own). |
+| slotClasses | `Partial<Record<'base', string>>` | no |  | Per-slot class overrides. |
+| tier | `InteractiveTier` | no |  | Semantic radius tier propagated to child Buttons. `commit` (default) → pill caps for the group; `modify` → soft caps. Inherits from a wrapping Toolbar via TierContext when not set explicitly. |
+| unstyled | `boolean` | no |  | Remove all default tv classes. |
+| value | `ButtonGroupValue` | no |  | Current selection value. Bind with `bind:value` for two-way sync. String for single, string[] for multiple. |
+| variant | `ButtonVariants['variant']` | no |  | Visual weight propagated to child Buttons. |
+
+Inherited from:
+- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`

package/content/blocks/primitives/card/llm.txt

@@ -0,0 +1,68 @@
+
+---
+
+## Card
+Flexible container for grouping related content with optional header, footer,
+and interactive states. Renders as div, button, or anchor depending on the provided props.
+
+**Import:** `import { Card } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Card padding="lg">
+  {#snippet header()}
+    <h3>Title</h3>
+  {/snippet}
+  <p>Body content</p>
+</Card>
+```
+
+```svelte
+<Card variant="elevated" dividers onclick={() => navigate('/detail')}>
+  {#snippet header()}
+    <div class="flex items-center gap-3">
+      <Avatar name="Jane Doe" size="sm" />
+      <span class="font-medium">Jane Doe</span>
+    </div>
+  {/snippet}
+  <p>Interactive card that navigates on click.</p>
+  {#snippet footer()}
+    <span class="text-text-tertiary text-sm">2 min ago</span>
+  {/snippet}
+</Card>
+```
+
+### Variants
+- variant: elevated, floating, outlined, quiet (default: quiet)
+- disabled: true (default: false)
+- dividers: true (default: false)
+- padding: lg, md, none, sm, xl (default: md)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...CardVariants | `VariantProps` | no |  | Styling variants from CardVariants |
+| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| children | `Snippet` | no |  | Content to render inside the Card component |
+| class | `string` | no |  | Extra classes merged onto the root element. |
+| clickable | `boolean` | no |  | Force `<button>` rendering and interactive hover styles without providing an `onclick` handler — useful when delegating clicks through a wrapper component or library. `onclick` and `href` already enable interactive styles automatically; reach for `clickable` only when neither is appropriate.  Don't combine with an outer `<a href>` or inner interactive content — `<a><Card clickable>…</Card></a>` produces nested interactive elements (invalid HTML, a11y violation). Prefer `<Card href={…}>` so the card itself becomes the anchor. |
+| footer | `Snippet` | no |  | Content rendered below the body. With `dividers`, a hairline separates body from footer. |
+| header | `Snippet` | no |  | Content rendered above the body. With `dividers`, a hairline separates header from body. |
+| href | `string` | no |  | URL target. When provided, the card renders as `<a>`. |
+| mint | `MintProp` | no |  | Micro-interaction preset. Only takes effect on interactive cards. |
+| onclick | `(event: MouseEvent) => void` | no |  | Click handler. When provided, the card renders as `<button>` and gains interactive styles. |
+| onHover | `(hovered: boolean) => void` | no |  | Called when hover state changes. Receives `true` on mouse-enter, `false` on mouse-leave. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Card: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| slotClasses | `Partial<Record<'base' | 'header' | 'content' | 'footer', string>>` | no |  | Per-slot class overrides. |
+| unstyled | `boolean` | no |  | Remove all default tv classes. |
+| variant | `'elevated' | 'floating' | 'outlined' | 'quiet'` | no | quiet | Controls the visual style and presentation of the Card. Determines the component's visual treatment. Available options: elevated, floating, outlined, quiet. |
+| disabled | `'true'` | no | false | Controls the disabled behavior and appearance of the Card component. Available options: true. |
+| dividers | `'true'` | no | false | Controls the dividers behavior and appearance of the Card component. Available options: true. |
+| padding | `'lg' | 'md' | 'none' | 'sm' | 'xl'` | no | md | Controls the padding behavior and appearance of the Card component. Available options: lg, md, none, and 2 more. |
+
+Inherited from:
+- Omit<CardVariants, 'elementType' | 'interactive'> (omit-pattern)
+- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `header`, `content`, `footer`

package/content/blocks/primitives/checkbox/llm.txt

@@ -0,0 +1,61 @@
+
+---
+
+## Checkbox
+Accessible checkbox with indeterminate support, semantic intents, and form integration.
+Uses a hidden native input for correct form behavior and ARIA semantics.
+
+**Import:** `import { Checkbox } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Checkbox label="Accept terms" bind:checked />
+```
+
+```svelte
+<Checkbox
+  label="Select all"
+  indeterminate
+  onCheckedChange={(val) => console.log(val)}
+/>
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: primary)
+- variant: filled, ghost, outlined (default: outlined)
+- size: lg, md, sm, xs (default: md)
+- disabled: true (default: false)
+- tier: commit, modify (default: modify)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...CheckboxVariants | `VariantProps` | no |  | Styling variants from CheckboxVariants |
+| ...HTMLInputAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'type' | 'size' | 'checked' | 'class' | 'children') |
+| checked | `boolean` | no |  | Current checked state. Supports two-way binding via `bind:checked`. |
+| class | `string` | no |  | Extra classes merged onto the wrapper element. |
+| disabled | `boolean` | no |  | Prevent interaction and dim the control. |
+| error | `string` | no |  | Error message that replaces `helper`, styles the message red, and sets `aria-invalid` on the input. |
+| helper | `string` | no |  | Hint text shown below the control. Hidden when `error` is set. |
+| id | `string` | no |  | Explicit `id` to link `<label>` and `<input>`. Auto-generated if omitted. |
+| indeterminate | `boolean` | no |  | Visual-only third state showing a dash icon. Resets to unchecked on next user toggle. Does not affect the submitted form value. Supports `bind:indeterminate`. |
+| label | `string` | no |  | Text label displayed to the right of the checkbox box. |
+| mint | `MintProp` | no |  | Micro-interaction preset applied to the control area on hover/click. |
+| name | `string` | no |  | The `name` attribute of the underlying `<input>`. Used for form submission. |
+| onCheckedChange | `(checked: boolean) => void` | no |  | Fired after the checked state changes. Receives the new `checked` value. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Checkbox: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent and make the custom look reusable across the project. |
+| required | `boolean` | no |  | Mark the native input as required for form validation. |
+| slotClasses | `Partial<Record<'wrapper' | 'control' | 'box' | 'icon' | 'label' | 'message', string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) the default styles. |
+| tier | `InteractiveTier` | no |  | Semantic radius tier. Default `modify` — checkbox is an input-tap surface. Inherited from TierContext when omitted; falls back to `modify` outside of any tier-aware container. |
+| unstyled | `boolean` | no |  | Strip all default tailwind-variants classes. Use with `slotClasses` for a fully custom look. The box exposes `data-state` for conditional styling. |
+| value | `string` | no |  | The value submitted when checked. Defaults to `'on'`. |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Checkbox. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
+| variant | `'filled' | 'ghost' | 'outlined'` | no | outlined | Controls the visual style and presentation of the Checkbox. Determines the component's visual treatment. Available options: filled, ghost, outlined. |
+| size | `'lg' | 'md' | 'sm' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the Checkbox. Affects the component's physical footprint. Available options: lg, md, sm, xs. |
+
+Inherited from:
+- Omit<CheckboxVariants, 'error' | 'checked' | 'indeterminate'> (omit-pattern)
+- Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`wrapper`, `control`, `box`, `icon`, `label`, `message`