@urbicon-ui/design-content 6.1.8

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

@@ -0,0 +1,72 @@
+
+---
+
+## Popover
+Floating panel anchored to a trigger element. Uses the native Popover API
+for top-layer rendering, light dismiss, and Escape handling. Floating UI provides
+precise positioning with automatic flip, shift, and optional width syncing.
+
+**Import:** `import { Popover } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Popover placement="bottom-start">
+  {#snippet trigger()}
+    <Button>Open</Button>
+  {/snippet}
+  {#snippet children()}
+    <div class="p-3">Popover content</div>
+  {/snippet}
+</Popover>
+```
+
+```svelte
+<Popover placement="top" arrow bind:open={showInfo}>
+  {#snippet trigger()}
+    <Button variant="ghost" size="sm">More info</Button>
+  {/snippet}
+  {#snippet children()}
+    <div class="max-w-xs p-4">
+      <h4 class="font-semibold">Details</h4>
+      <p class="text-text-secondary text-sm">Additional context shown in a floating panel.</p>
+    </div>
+  {/snippet}
+</Popover>
+```
+
+### Variants
+- size: lg, md, sm (default: md)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| children | `Snippet` | yes |  | Popover body rendered inside the floating panel. |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| ...PopoverVariants | `VariantProps` | no |  | Styling variants from PopoverVariants |
+| autoTrigger | `boolean` | no |  | When true (default), the trigger wrapper handles click and keyboard to toggle the popover. Set to `false` to manage `open` yourself. |
+| class | `string` | no |  | Extra classes merged onto the floating panel element. |
+| closeOnClickOutside | `boolean` | no |  | Whether the popover closes on outside click / pointer interaction. Default `true`. Set to `false` to pin the popover open until the consumer explicitly toggles `open`. |
+| closeOnEscape | `boolean` | no |  | Whether the popover closes on Escape key. Default `true`. Set to `false` for cases where Escape should be intercepted by an inner widget (e.g. an editable cell that wants to revert on Escape). |
+| offsetDistance | `number` | no |  | Gap in px between the trigger edge and the popover. |
+| onClickOutside | `() => void` | no |  | Fires after an outside click closes the popover. Use for analytics or to clear ephemeral state on dismiss. Does NOT control whether the popover closes — that is governed by `closeOnClickOutside`. |
+| onEscape | `() => void` | no |  | Fires after Escape closes the popover. Use for analytics or to clear ephemeral state on dismiss. Does NOT control whether the popover closes — that is governed by `closeOnEscape`. |
+| onOpenChange | `(open: boolean) => void` | no |  | Fires when the popover opens or closes from user interaction (click, escape, click-outside). Receives the new open state. |
+| open | `boolean` | no |  | Controlled open state. Supports `bind:open`. |
+| placement | `Placement` | no |  | Where the popover appears relative to the trigger. All Floating UI `Placement` values are supported. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Popover: {...} }}>`. 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. |
+| shiftPadding | `number` | no |  | Minimum px padding from viewport edges when the popover shifts to stay visible. |
+| slotClasses | `Partial<Record<'base', string>>` | no |  | Per-slot class overrides. Available slots: `base` (the floating panel). |
+| syncMinWidth | `boolean` | no |  | Match the popover's *minimum* width to the trigger width while still letting content grow the panel beyond it. Useful for menu-style overlays where items longer than the trigger should not get truncated. Ignored when `syncWidth` is true (hard width wins). |
+| syncWidth | `boolean` | no |  | Match the popover width to the trigger width. Useful for select/autocomplete patterns where the floating panel should align with the input. |
+| trigger | `Snippet` | no |  | Trigger element that anchors and toggles the popover. Receives click/keyboard handlers when `autoTrigger` is true. |
+| triggerElement | `HTMLElement` | no |  | External trigger element ref. Use instead of the `trigger` snippet when the trigger lives outside the Popover tree. Supports `bind:triggerElement`. |
+| unstyled | `boolean` | no |  | Strip all default tv() classes. Combine with `class` or `slotClasses` for full custom styling. |
+| usePortal | `boolean` | no | true | Render the floating panel into the browser's top layer via the native `popover` attribute, so it cannot be clipped by `overflow: auto` ancestors. Set to `false` when the popover is itself embedded inside another floating surface (Dialog, Drawer, another Popover) — nested top-layer rendering stacks unpredictably across browsers and stealing focus from the parent surface is usually unwanted. In-flow mode positions the panel absolutely relative to the trigger's offset parent. |
+| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Popover. Affects the component's physical footprint. Available options: lg, md, sm. |
+
+Inherited from:
+- PopoverVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`

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

@@ -0,0 +1,55 @@
+
+---
+
+## Progress
+Progress indicator for determinate and indeterminate loading states.
+Supports linear bar and circular ring variants with semantic intents and animation.
+
+**Import:** `import { Progress } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Progress value={65} label="Upload progress" showValue />
+```
+
+```svelte
+<Progress value={80} shape="circular" intent="success" showValue />
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: primary)
+- size: lg, md, sm, xs (default: md)
+- animated: true (default: false)
+- indeterminate: true (default: false)
+- striped: true (default: false)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
+| ...ProgressVariants | `VariantProps` | no |  | Styling variants from ProgressVariants |
+| animated | `boolean` | no | false | Animate the striped pattern. Requires `striped` to be true. |
+| circularSize | `number` | no | 80 | Diameter of the circular indicator in pixels. |
+| class | `string` | no |  | Extra classes merged onto the root wrapper element. |
+| formatValue | `(value: number, max: number) => string` | no | (v, max) => `${Math.round((v/max) * 100)}%` | Format function for the displayed value. |
+| label | `string` | no |  | Text label displayed above or inside the progress indicator. |
+| max | `number` | no | 100 | Maximum value for the progress range. |
+| min | `number` | no | 0 | Minimum value for the progress range. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Progress: {...} }}>`. 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. |
+| shape | `'linear' | 'circular'` | no | 'linear' | Shape of the progress indicator. |
+| showValue | `boolean` | no | false | Show the numeric value (percentage or absolute) next to the label. |
+| slotClasses | `Partial<Record<'wrapper' | 'header' | 'label' | 'valueText' | 'track' | 'fill' | 'circularWrapper' | 'circularTrack' | 'circularFill' | 'circularLabel', string>>` | no |  | Per-slot class overrides merged with tv() styles. |
+| striped | `boolean` | no | false | Display striped pattern on the fill. |
+| strokeWidth | `number` | no | 6 | Stroke width of the circular indicator in pixels. |
+| unstyled | `boolean` | no |  | Remove all default tv() classes. |
+| value | `number` | no |  | Current progress value (0–100). Omit for indeterminate mode. |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Progress. 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 Progress. Affects the component's physical footprint. Available options: lg, md, sm, xs. |
+| indeterminate | `'true'` | no | false | Controls the indeterminate behavior and appearance of the Progress component. Available options: true. |
+
+Inherited from:
+- ProgressVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`wrapper`, `header`, `label`, `valueText`, `track`, `fill`, `circularWrapper`, `circularTrack`, `circularFill`, `circularLabel`

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

@@ -0,0 +1,53 @@
+
+---
+
+## RadioGroup
+Accessible radio group for single-option selection with semantic intents and form integration.
+Uses native radio inputs for correct form behavior and ARIA semantics with keyboard navigation.
+
+**Import:** `import { RadioGroup } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<RadioGroup label="Plan" bind:value={plan}>
+  <RadioItem value="free" label="Free" />
+  <RadioItem value="pro" label="Pro" description="Best for teams" />
+</RadioGroup>
+```
+
+### Variants
+- disabled: true (default: false)
+- error: true (default: false)
+- orientation: horizontal, vertical (default: vertical)
+- required: true (default: false)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| children | `Snippet` | yes |  | RadioItem children to render inside the group. |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
+| class | `string` | no |  | Extra classes merged onto the root wrapper element. |
+| disabled | `boolean` | no |  | Disable all radio items in the group. |
+| error | `string` | no |  | Error message below the group. Replaces `helper` and sets `aria-invalid`. |
+| helper | `string` | no |  | Hint text below the group. Hidden when `error` is set. |
+| id | `string` | no |  | Explicit `id` for the group element. Auto-generated if omitted. |
+| intent | `RadioItemVariants['intent']` | no | 'primary' | Semantic color propagated to all child RadioItems. |
+| label | `string` | no |  | Group label displayed above the radio items. |
+| mint | `MintProp` | no | 'none' | Micro-interaction preset propagated to child RadioItems. |
+| name | `string` | no |  | Shared `name` attribute for all radio inputs. Auto-generated if omitted. |
+| onValueChange | `(value: string) => void` | no |  | Fired after the selected value changes. Receives the new value. |
+| orientation | `'horizontal' | 'vertical'` | no | 'vertical' | Stack direction for the radio items. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ RadioGroup: {...} }}>`. 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 group as required for form validation. Adds an asterisk to the label. |
+| size | `RadioItemVariants['size']` | no | 'md' | Visual size propagated to all child RadioItems. |
+| slotClasses | `Partial<Record<'root' | 'group' | 'label' | 'message', string>>` | no |  | Per-slot class overrides merged with tv() styles. |
+| tier | `InteractiveTier` | no | 'commit' | Semantic radius tier propagated to every RadioItem. Default `commit` — radio indicators read as identity circles. Set to `modify` (or inherit via TierContext from a wrapping `<Toolbar tier="modify">`) for inline-toolbar contexts where a circle feels oversized. |
+| unstyled | `boolean` | no |  | Remove all default tv() classes. Only user-provided classes apply. |
+| value | `string` | no |  | Currently selected value. Supports two-way binding via `bind:value`. |
+| variant | `RadioItemVariants['variant']` | no | 'outlined' | Visual weight propagated to all child RadioItems. |
+
+Inherited from:
+- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`root`, `group`, `label`, `message`

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

@@ -0,0 +1,51 @@
+
+---
+
+## SegmentGroup
+Inline segment control with animated sliding indicator for single-selection scenarios.
+Compact mode/view switcher with smooth animation.
+
+**Import:** `import { SegmentGroup } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<SegmentGroup bind:value={view}>
+  <SegmentItem value="list">List</SegmentItem>
+  <SegmentItem value="grid">Grid</SegmentItem>
+  <SegmentItem value="board">Board</SegmentItem>
+</SegmentGroup>
+```
+
+### Variants
+- size: lg, md, sm (default: md)
+- appearance: default, text (default: default)
+- disabled: true (default: false)
+- fullWidth: true (default: false)
+- tier: commit, modify (default: commit)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| ...SegmentGroupVariants | `VariantProps` | no |  | Styling variants from SegmentGroupVariants |
+| ariaLabel | `string` | no |  | Accessible label for the segment group. |
+| children | `Snippet` | no |  | Segment items to render. Must be SegmentItem components. |
+| class | `string` | no |  | Extra classes merged onto the root element. |
+| disabled | `boolean` | no | false | Prevent interaction and dim the control. |
+| mint | `MintProp` | no | 'none' | Micro-interaction effect applied to each segment item (per-item, not the container). Accepts a preset name, an array of names, or configured mint objects. |
+| onValueChange | `(value: string) => void` | no |  | Fires after the selected value changes. Receives the new value. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ SegmentGroup: {...} }}>`. 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' | 'indicator' | 'item', string>>` | no |  | Per-slot class overrides merged with tv() styles. |
+| unstyled | `boolean` | no |  | Remove all default tv() classes. |
+| value | `string` | no |  | Currently selected value. Supports `bind:value` for two-way binding. |
+| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the SegmentGroup. Affects the component's physical footprint. Available options: lg, md, sm. |
+| appearance | `'default' | 'text'` | no | default | Controls the appearance behavior and appearance of the SegmentGroup component. Available options: default, text. |
+| fullWidth | `'true'` | no | false | Controls the fullWidth behavior and appearance of the SegmentGroup component. Available options: true. |
+| tier | `'commit' | 'modify'` | no | commit | Controls the tier behavior and appearance of the SegmentGroup component. Available options: commit, modify. |
+
+Inherited from:
+- SegmentGroupVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`, `indicator`, `item`

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

@@ -0,0 +1,130 @@
+
+---
+
+## Select
+Discriminated union over `multiple`. Consumers pick a single shape at the
+call site and the value type narrows accordingly — `<Select multiple bind:value>`
+binds to `T[]`, `<Select bind:value>` binds to `T | null`. See
+`SelectSingleProps` / `SelectMultipleProps` for the per-mode details.
+
+**Import:** `import { Select } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Select
+  label="Country"
+  options={[
+    { label: 'Germany', value: 'de' },
+    { label: 'France', value: 'fr' },
+    { label: 'Spain', value: 'es' },
+  ]}
+  bind:value={country}
+  placeholder="Choose a country"
+/>
+```
+
+```svelte
+<Select
+  label="Tenant"
+  options={tenants.map((t) => ({ label: t.name, value: t.id }))}
+  bind:value={tenantId}
+/>
+```
+
+```svelte
+<Select
+  label="Tags"
+  options={tags}
+  multiple
+  selectionIndicator="checkbox"
+  bind:value={selectedTags}
+/>
+```
+
+```svelte
+<Select options={...} multiple bind:value bind:open>
+  {#snippet customTrigger(selected, isOpen, clear)}
+    <Button variant="ghost" size="sm">
+      <FilterIcon />
+      {#if selected.length > 0}
+        <Badge size="xs">{selected.length}</Badge>
+      {/if}
+    </Button>
+  {/snippet}
+</Select>
+```
+
+```svelte
+<Select
+  label="Role"
+  groups={[
+    { label: 'Engineering', options: [
+      { label: 'Frontend', value: 'fe' },
+      { label: 'Backend', value: 'be' }
+    ]},
+    { label: 'Design', options: [
+      { label: 'UX', value: 'ux' },
+      { label: 'Visual', value: 'vis' }
+    ]}
+  ]}
+  bind:value={role}
+  required
+  error={roleError}
+/>
+```
+
+### Variants
+- variant: filled, ghost, outlined, underline (default: outlined)
+- size: lg, md, sm (default: md)
+- disabled: true (default: false)
+- error: true (default: false)
+- messageType: error, helper (default: helper)
+- open: true (default: false)
+- required: true (default: false)
+- selected: true (default: false)
+- tier: commit, modify (default: modify)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| class | `string` | no |  | Extra classes merged onto the root wrapper element. |
+| clearable | `boolean` | no | false | Show a clear button when a value is selected. |
+| closeOnClickOutside | `boolean` | no |  | Whether the listbox closes on outside click. Default `true`. Set to `false` to pin the listbox open while the consumer manages dismissal explicitly. |
+| closeOnEscape | `boolean` | no |  | Whether the listbox closes on Escape key. Default `true`. Set to `false` for inline contexts where Escape should be intercepted by an outer widget (e.g. a row editor that wants to revert on Escape). |
+| closeOnSelect | `boolean` | no |  | Whether the listbox closes after a selection is made. Defaults to `true` in single-select and `false` in multi-select — the multi-select default lets users tick multiple options without re-opening, matching the established multi-select pattern. |
+| customItem | `Snippet<[SelectOption<T>, boolean, () => void]>` | no |  | Replace the default per-option rendering. Receives the option, its selection state, and a `toggle` callback (call to select/deselect). The outer `<div role="option">` container is still owned by Select for ARIA correctness — the snippet renders the option's visible contents.  Positional args: `(option, isSelected, toggle)`. |
+| customTrigger | `Snippet<[SelectOption<T>[], boolean, () => void]>` | no |  | Replace the entire trigger button (chevron, label, clear control) with a custom element. Receives the selected options, current open state, and a `clear` callback. Use this for icon-only triggers, badge-counter triggers, or any non-standard chrome — the Select still owns open/close + selection state via the returned callbacks.  Positional args: `(selected, open, clear)`. |
+| customTriggerContent | `Snippet<[SelectOption<T>[]]>` | no |  | Replace only the trigger's text/label area (chevron and clear button stay intact). Receives the selected options. Useful for showing icons next to the label, badges with counts, or formatted multi-select summaries while keeping the standard outlined-Select chrome.  Positional args: `(selected)`. |
+| disabled | `boolean` | no | false | Whether the Select is disabled and non-interactive |
+| error | `string` | no |  | Error message below the select. Overrides `helper` and forces danger styling. |
+| groups | `SelectGroup<T>[]` | no |  | Grouped options with section labels. Takes precedence over `options`. |
+| helper | `string` | no |  | Helper text below the select. Hidden when `error` is set. |
+| id | `string` | no |  | Explicit `id` for the component. Auto-generated if omitted. |
+| label | `string` | no |  | Label text displayed above the select, auto-linked via `id`. |
+| mint | `MintProp` | no | 'none' | Micro-interaction preset. |
+| multiPlaceholder | `string | ((selected: SelectOption<T>[]) => string)` | no |  | Placeholder shown when one or more values are picked. Pass a string for a static label ("3 selected") or a function that receives the currently selected options and returns a custom string. When unset, the trigger lists the selected labels comma-separated. |
+| multiple | `'false' | 'true'` | no |  | Single-select mode (the default). Omit or set to `false` explicitly. |
+| name | `string` | no |  | Shared `name` for a hidden input for native form submission. |
+| nullOption | `string | NullOptionConfig` | no |  | Render an explicit "no value" option as the first row of the listbox. Selecting it sets the bound value to `null`. When `value` is `null`, the trigger displays this label instead of the placeholder.  Pass a string to use it as the label, or a `NullOptionConfig` for more control. Ignored when `groups` is set — group structures own their option list. |
+| onClickOutside | `() => void` | no |  | Fires after an outside click closes the listbox. Use for analytics or side-effects on dismiss. Does NOT control whether the listbox closes — that is governed by `closeOnClickOutside`. |
+| onEscape | `() => void` | no |  | Fires after Escape closes the listbox. Use for analytics or to clear ephemeral state on dismiss. Does NOT control whether the listbox closes — that is governed by `closeOnEscape`. |
+| onValueChange | `(value: T | null) => void` | no |  | Fires after the selected value changes. Receives the new value or `null` on clear. |
+| open | `boolean` | no | false | Controls whether the listbox is open. Supports `bind:open` for parents that need to coordinate open/close (e.g. attaching a custom trigger button outside the Select wrapper). |
+| options | `SelectOption<T>[]` | no |  | Flat list of selectable options. |
+| placeholder | `string` | no | 'Select...' | Text shown when no value is selected. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Select: {...} }}>`. 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 | false | Adds a required asterisk to the label. |
+| selectionIndicator | `'checkmark' | 'none'` | no |  | Selection indicator rendered next to each option. - `'checkmark'` — trailing check icon (default) - `'none'` — no indicator (typical when using `customItem`) |
+| slotClasses | `Partial<Record<'wrapper' | 'base' | 'trigger' | 'triggerText' | 'placeholder' | 'chevron' | 'clear' | 'listbox' | 'option' | 'optionCheck' | 'optionCheckbox' | 'group' | 'groupLabel' | 'label' | 'message', string>>` | no |  | Per-slot class overrides merged with tv() styles. |
+| syncWidth | `boolean` | no | true | Whether the listbox matches the trigger's width. Set `false` for icon-only or compact triggers where the listbox should size to its content instead. |
+| unstyled | `boolean` | no |  | Remove all default tv() classes. |
+| usePortal | `boolean` | no | true | When true, the listbox is rendered into the browser top layer via the native `popover` API, so it cannot be clipped by `overflow: auto` ancestors. When false, the listbox stays in the regular DOM flow — useful inside other popovers/portals to avoid double-portaling. |
+| value | `T[]` | no | [] | Currently selected values. Supports `bind:value`. |
+| variant | `SelectVariants['variant']` | no | 'outlined' | Visual style. - `outlined` (default) — visible border, surface-base background - `filled` — surface-interactive fill, no border (compact toolbars) - `ghost` — transparent until hover/focus (dense menus, inline editors) - `underline` — bottom-line only, no border-box (editorial knob-strips,   docs playgrounds) |
+| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Select. Affects the component's physical footprint. Available options: lg, md, sm. |
+| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the Select component. Available options: error, helper. |
+| selected | `'true'` | no | false | Controls the selected behavior and appearance of the Select component. Available options: true. |
+| tier | `'commit' | 'modify'` | no | modify | Controls the tier behavior and appearance of the Select component. Available options: commit, modify. |
+
+### Slots (slotClasses keys)
+`wrapper`, `base`, `trigger`, `triggerText`, `placeholder`, `chevron`, `clear`, `listbox`, `option`, `optionCheck`, `optionCheckbox`, `group`, `groupLabel`, `label`, `message`

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

@@ -0,0 +1,45 @@
+
+---
+
+## Separator
+Visual divider for separating content sections. Supports horizontal and
+vertical orientations with proper ARIA semantics.
+
+**Import:** `import { Separator } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Separator />
+```
+
+```svelte
+<div class="flex items-center gap-4">
+  <span>Item A</span>
+  <Separator orientation="vertical" size="sm" />
+  <span>Item B</span>
+</div>
+```
+
+### Variants
+- size: lg, md, sm (default: md)
+- orientation: horizontal, vertical (default: horizontal)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
+| ...SeparatorVariants | `VariantProps` | no |  | Styling variants from SeparatorVariants |
+| class | `string` | no |  | Additional CSS class merged onto the root element. |
+| decorative | `boolean` | no |  | When true, the separator is purely visual (role="none"); when false, it uses role="separator" with aria-orientation. |
+| orientation | `'horizontal' | 'vertical'` | no |  | Horizontal renders a full-width line; vertical renders a full-height line (e.g. inside flex rows). |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Separator: {...} }}>`. 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 |  | Controls margin around the line — sm (0.5 rem), md (1 rem), lg (1.5 rem). |
+| slotClasses | `Partial<Record<'base', string>>` | no |  | Per-slot class overrides. |
+| unstyled | `boolean` | no |  | Strip all default styles; combine with slotClasses to rebuild from scratch. |
+
+Inherited from:
+- SeparatorVariants (external)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`base`

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

@@ -0,0 +1,79 @@
+
+---
+
+## Sidebar
+Sidebar primitive — fixed-position panel that is permanent on
+desktop (≥1024px) and slides in as a backdropped overlay on mobile. Use
+this directly for right-side detail panels or custom shells. For the
+standard "permanent left rail + mobile hamburger" application chrome,
+prefer the higher-level `<SidebarLayout>` component, which handles main
+content offset and the mobile header for you.
+
+The component exposes `--sidebar-width` and `--sidebar-effective-width`
+(0px when collapsed) as CSS variables on its `<aside>` element. CSS
+custom properties only inherit to descendants, so these variables are
+available **inside** the sidebar's subtree but not on its siblings — that
+is precisely why `<SidebarLayout>` exists for app-shell layouts.
+
+**Import:** `import { Sidebar } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<script>
+import { Sidebar, Button, CloseIcon, Badge } from '@urbicon-ui/blocks';
+let detailOpen = $state(false);
+</script>
+
+<Button onclick={() => (detailOpen = true)}>Show details</Button>
+
+<Sidebar bind:open={detailOpen} side="right" width="20rem">
+{#snippet header()}
+<div class="flex items-center justify-between py-3">
+<span class="font-semibold">Item details</span>
+<Button variant="ghost" size="xs" onclick={() => (detailOpen = false)}>
+<CloseIcon class="h-4 w-4" />
+</Button>
+</div>
+{/snippet}
+<div class="space-y-3 p-4">
+<dt class="text-text-tertiary text-xs">Status</dt>
+<dd><Badge intent="success" size="sm">Active</Badge></dd>
+</div>
+</Sidebar>
+```
+
+```svelte
+<Sidebar bind:open={sidebarOpen} mode="collapsible" width="16rem">
+{#snippet header()}<span class="font-semibold">App</span>{/snippet}
+<nav class="p-3"><!-- links --></nav>
+</Sidebar>
+```
+
+### Variants
+- mode: collapsible, responsive (default: responsive)
+- side: left, right (default: left)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children') |
+| children | `Snippet` | no |  | Main scrollable content of the sidebar. |
+| class | `string` | no |  | Additional CSS classes applied to the sidebar panel. |
+| closeOnBackdropClick | `boolean` | no | true | Close the mobile overlay when clicking the backdrop. |
+| closeOnEscape | `boolean` | no | true | Close the mobile overlay when pressing Escape. |
+| footer | `Snippet` | no |  | Content rendered in the sidebar footer (below the scrollable area). |
+| header | `Snippet` | no |  | Content rendered in the sidebar header (above the scrollable area). |
+| mode | `SidebarVariants['mode']` | no | 'responsive' | Controls sidebar behavior across viewports. - `responsive` (default): permanently visible on desktop (≥1024px), slide-in overlay on mobile. - `collapsible`: toggleable via `open` at all viewports — width animation on desktop, overlay on mobile. |
+| onOpenChange | `(open: boolean) => void` | no |  | Fires when the open state changes (mobile overlay dismissed, or collapsible toggled). |
+| open | `boolean` | no |  | Controls sidebar visibility. In `responsive` mode (default) this only affects the mobile overlay — on desktop the sidebar is always visible. In `collapsible` mode this controls visibility at all viewports. Supports bind:open. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Sidebar: {...} }}>`. 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. |
+| side | `SidebarVariants['side']` | no | 'left' | Which edge the sidebar attaches to. |
+| slotClasses | `Partial<Record<'backdrop' | 'panel' | 'header' | 'content' | 'footer', string>>` | no |  | Per-slot class overrides merged with variant styles. |
+| unstyled | `boolean` | no |  | Strip all default styles. Combine with slotClasses for custom appearance. |
+| width | `string` | no | '16rem' | CSS width of the sidebar panel. Also exposed as `--sidebar-width` (constant) and `--sidebar-effective-width` (0px when collapsed) CSS variables on the `<aside>`. These inherit only inside the sidebar's own subtree — for the main content offset use `<SidebarLayout>`. |
+
+Inherited from:
+- Omit<HTMLAttributes<HTMLElement>, 'children'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`backdrop`, `panel`, `header`, `content`, `footer`

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

@@ -0,0 +1,54 @@
+
+---
+
+## Skeleton
+Placeholder loading animation that mimics content layout.
+Use to reduce perceived loading time and prevent layout shift.
+
+**Import:** `import { Skeleton } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Skeleton variant="text" size="lg" />
+<Skeleton variant="circular" size="md" />
+<Skeleton variant="rectangular" width="100%" height="200px" />
+```
+
+```svelte
+<div class="flex items-center gap-3">
+  <Skeleton variant="circular" size="md" />
+  <div class="flex flex-col gap-2 flex-1">
+    <Skeleton variant="text" size="sm" />
+    <Skeleton variant="text" size="xs" class="w-2/3" />
+  </div>
+</div>
+```
+
+### Variants
+- variant: circular, rectangular, rounded, text (default: text)
+- size: lg, md, sm, xl, xs (default: md)
+- animation: none, pulse, wave (default: pulse)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...ElementAttributes | `HTMLAttributes` | no |  | All standard HTML element attributes |
+| ...SkeletonVariants | `VariantProps` | no |  | Styling variants from SkeletonVariants |
+| animation | `SkeletonVariants['animation']` | no |  | Animation style. `pulse` fades opacity, `wave` sweeps a shimmer gradient, `none` renders a static placeholder. All animations respect `prefers-reduced-motion`. |
+| class | `string` | no |  | Extra classes merged onto the root element (or wrapper when `count > 1`). |
+| count | `number` | no |  | Number of skeleton lines to render. Wraps items in a flex-column container when > 1. |
+| gap | `string` | no |  | Tailwind gap class between repeated lines (e.g. `"gap-2"`, `"gap-4"`). Only applies when `count > 1`. |
+| height | `string` | no |  | Custom height (CSS value, e.g. `"48px"`). Overrides the size preset height. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Skeleton: {...} }}>`. 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 | `SkeletonVariants['size']` | no |  | Physical dimensions following the Standard size scale (xs–xl). Dimensions vary per variant — text heights range from h-3 (xs) to h-6 (xl), circular from 24 px to 64 px. |
+| slotClasses | `Partial<Record<'base' | 'wrapper', string>>` | no |  | Per-slot class overrides merged with (or replacing, when `unstyled`) tv() output. |
+| unstyled | `boolean` | no |  | Strip all default tv() classes. Combine with `slotClasses` for full control. |
+| variant | `SkeletonVariants['variant']` | no |  | Shape preset. `text` is a slim bar, `circular` for avatars/icons, `rectangular` for images/cards, `rounded` like rectangular with softer corners. |
+| width | `string` | no |  | Custom width (CSS value, e.g. `"200px"` or `"100%"`). Overrides the size preset width. |
+
+Inherited from:
+- SkeletonVariants (external)
+- HTMLAttributes (html-attributes)
+
+### Slots (slotClasses keys)
+`base`, `wrapper`

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

@@ -0,0 +1,82 @@
+
+---
+
+## Slider
+Slider for selecting a numeric value or range within min/max bounds.
+Supports single and range modes, step snapping, tick marks, and labels.
+
+Optional `validRange` and `recommendedRange` paint the track as a three-zone
+gradient (red/yellow/green) and show a live status text that is also announced
+via an ARIA live region. Both props are optional and additive — a slider
+without `validRange`/`recommendedRange` behaves exactly as before.
+
+**Import:** `import { Slider } from '@urbicon-ui/blocks';`
+
+### Examples
+```svelte
+<Slider label="Volume" bind:value={volume} />
+```
+
+```svelte
+<Slider label="Price range" range bind:value={priceRange} min={0} max={500} step={10} showValue />
+```
+
+```svelte
+<Slider
+  label="Consumption share of heating costs"
+  bind:value={share}
+  min={0}
+  max={100}
+  step={5}
+  validRange={[50, 100]}
+  recommendedRange={[60, 80]}
+  formatValue={(v) => `${v} %`}
+/>
+```
+
+### Variants
+- intent: danger, neutral, primary, secondary, success, warning (default: primary)
+- size: lg, md, sm (default: md)
+- appearance: default, rail (default: default)
+- disabled: true (default: false)
+- messageType: error, helper (default: helper)
+
+### Api
+| Prop | Type | Required | Default | Description |
+| --- | --- | :---: | --- | --- |
+| ...HTMLAttributes<HTMLDivElement> | `HTMLAttributes` | no |  | HTML attributes (excluding: 'children' | 'class') |
+| ...SliderVariants | `VariantProps` | no |  | Styling variants from SliderVariants |
+| class | `string` | no |  | Extra classes merged onto the root wrapper. |
+| disabled | `boolean` | no | false | Whether the Slider is disabled and non-interactive |
+| error | `string` | no |  | Error message below the slider. Overrides `helper`. |
+| formatValue | `(value: number | [number, number]) => string` | no |  | Format function for the displayed value. |
+| helper | `string` | no |  | Helper text below the slider. Hidden when `error` is set. |
+| label | `string` | no |  | Text label displayed above the slider. |
+| marks | `SliderMark[]` | no |  | Tick marks along the track. |
+| max | `number` | no | 100 | Maximum allowed value. |
+| min | `number` | no | 0 | Minimum allowed value. |
+| mint | `MintProp` | no | 'none' | Micro-interaction preset. |
+| name | `string` | no |  | Shared `name` for hidden inputs for form submission. |
+| onValueChange | `(value: number | [number, number]) => void` | no |  | Fires after the value changes. Receives the new value. |
+| outOfValidRangeIntent | `'danger' | 'warning'` | no | 'danger' | Intent applied outside the `validRange`. `'warning'` for softer limits (recommendation, not a violation), `'danger'` for hard limits. |
+| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ Slider: {...} }}>`. 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. |
+| range | `boolean` | no | false | Enable range mode with two thumbs. |
+| rangeStatusText | `SliderRangeStatusText` | no |  | Custom status texts for the three zones. Defaults to the UIB i18n localization (`bt('slider.rangeStatus.*')`). |
+| recommendedRange | `[number, number]` | no |  | Recommended value range (UX recommendation, softer than `validRange`). Values inside appear green, values outside yellow (warning). Typically `recommendedRange ⊂ validRange`, but this is not enforced. |
+| showValue | `boolean` | no | false | Show the current value next to the label. |
+| slotClasses | `Partial<Record<'wrapper' | 'header' | 'label' | 'valueText' | 'base' | 'track' | 'range' | 'thumb' | 'mark' | 'boundaryTick' | 'rangeStatus' | 'rangeStatusIcon' | 'message', string>>` | no |  | Per-slot class overrides. |
+| step | `number` | no | 1 | Snap to increments of this value. |
+| unstyled | `boolean` | no |  | Remove all default tv() classes. |
+| validRange | `[number, number]` | no |  | Valid value range (e.g. a legal limit). Values outside it style track and thumb in the `outOfValidRangeIntent` color (default: `danger`). Status changes are announced via an ARIA live region. If the range lies outside `[min, max]`, a console warning is emitted — the visible `min`/`max` are NOT shifted automatically. |
+| value | `number | [number, number]` | no |  | Current value. Number for single, [min, max] tuple for range. Supports `bind:value`. |
+| intent | `'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning'` | no | primary | Controls the color theme and semantic meaning of the Slider. Affects the overall appearance and user perception. Available options: danger, neutral, primary, and 3 more. |
+| size | `'lg' | 'md' | 'sm'` | no | md | Controls the dimensions, padding, and text size of the Slider. Affects the component's physical footprint. Available options: lg, md, sm. |
+| appearance | `'default' | 'rail'` | no | default | Controls the appearance behavior and appearance of the Slider component. Available options: default, rail. |
+| messageType | `'error' | 'helper'` | no | helper | Controls the messageType behavior and appearance of the Slider component. Available options: error, helper. |
+
+Inherited from:
+- Omit<SliderVariants, 'error' | 'rangeStatus'> (omit-pattern)
+- Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> (omit-pattern)
+
+### Slots (slotClasses keys)
+`wrapper`, `header`, `label`, `valueText`, `base`, `track`, `range`, `thumb`, `mark`, `boundaryTick`, `rangeStatus`, `rangeStatusIcon`, `message`