From 0766cfe49f7f9093ca8998267d4d5dcad05b981c Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 2 Apr 2026 13:04:46 +0200
Subject: [PATCH] Add comprehensive CSS documentation to all Terra UI
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add "Selectores CSS" section documenting all data-* attributes
- Remove -root suffix from data attributes (data-component-root → data-component)
- Update attrs.ts to generate cleaner attribute names
- Update contracts.ts with new naming convention
- Update README.md documentation

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/routes/test/accordion/+page.svelte        |  2 +-
 src/uix/terra/README.md                       |  4 +-
 src/uix/terra/accordion/accordion.svelte.ts   |  4 +-
 .../components/accordion-content.svelte       | 34 +++++++
 .../components/accordion-header.svelte        | 30 +++++++
 .../components/accordion-item.svelte          | 31 +++++++
 .../components/accordion-trigger.svelte       | 33 +++++++
 .../accordion/components/accordion.svelte     | 38 ++++++++
 .../components/alert-dialog-action.svelte     | 24 +++++
 .../components/alert-dialog-cancel.svelte     | 25 ++++++
 .../components/alert-dialog-content.svelte    | 30 +++++++
 .../components/alert-dialog.svelte            | 36 ++++++++
 .../components/aspect-ratio.svelte            | 33 +++++++
 .../avatar/components/avatar-fallback.svelte  | 36 ++++++++
 .../avatar/components/avatar-image.svelte     | 33 +++++++
 src/uix/terra/avatar/components/avatar.svelte | 32 +++++++
 src/uix/terra/button/components/button.svelte | 41 ++++++++-
 .../calendar/components/calendar-cell.svelte  | 45 ++++++++++
 .../calendar/components/calendar-day.svelte   | 44 ++++++++-
 .../components/calendar-grid-body.svelte      | 34 +++++++
 .../components/calendar-grid-head.svelte      | 33 ++++++-
 .../components/calendar-grid-row.svelte       | 30 ++++++-
 .../calendar/components/calendar-grid.svelte  | 37 +++++++-
 .../components/calendar-head-cell.svelte      | 30 ++++++-
 .../components/calendar-header.svelte         | 32 ++++++-
 .../components/calendar-heading.svelte        | 33 ++++++-
 .../components/calendar-month-select.svelte   | 32 ++++++-
 .../components/calendar-next-button.svelte    | 31 ++++++-
 .../components/calendar-prev-button.svelte    | 31 ++++++-
 .../components/calendar-year-select.svelte    | 32 ++++++-
 .../terra/calendar/components/calendar.svelte | 73 +++++++++++++++
 .../components/checkbox-group-label.svelte    | 22 +++++
 .../checkbox/components/checkbox-group.svelte | 29 ++++++
 .../terra/checkbox/components/checkbox.svelte | 45 ++++++++++
 .../components/collapsible-content.svelte     | 34 +++++++
 .../components/collapsible-trigger.svelte     | 31 +++++++
 .../collapsible/components/collapsible.svelte | 31 +++++++
 .../color-picker-alpha-slider.svelte          | 27 ++++++
 .../components/color-picker-area-thumb.svelte | 29 ++++++
 .../components/color-picker-area.svelte       | 34 +++++++
 .../components/color-picker-content.svelte    | 29 ++++++
 .../components/color-picker-eyedropper.svelte | 28 ++++++
 .../components/color-picker-hue-slider.svelte | 26 ++++++
 .../components/color-picker-input.svelte      | 30 +++++++
 .../components/color-picker-root.svelte       | 37 ++++++++
 .../components/color-picker-swatch.svelte     | 29 ++++++
 .../components/color-picker-swatches.svelte   | 27 ++++++
 .../components/color-picker-trigger.svelte    | 31 +++++++
 .../combobox/components/combobox-input.svelte | 32 +++++++
 .../components/combobox-trigger.svelte        | 28 ++++++
 .../terra/combobox/components/combobox.svelte | 46 ++++++++++
 .../command/components/_command-label.svelte  | 39 +++++---
 .../command/components/command-empty.svelte   | 30 +++++++
 .../components/command-group-heading.svelte   | 25 ++++++
 .../components/command-group-items.svelte     | 52 ++++++++---
 .../command/components/command-group.svelte   | 32 +++++++
 .../command/components/command-input.svelte   | 36 ++++++++
 .../command/components/command-item.svelte    | 43 +++++++++
 .../components/command-link-item.svelte       | 36 ++++++++
 .../command/components/command-list.svelte    | 32 +++++++
 .../command/components/command-loading.svelte | 28 ++++++
 .../components/command-separator.svelte       | 27 ++++++
 .../components/command-viewport.svelte        | 27 ++++++
 .../terra/command/components/command.svelte   | 52 +++++++++++
 .../config/components/terra-config.svelte     | 12 +++
 .../components/context-menu-content.svelte    | 47 +++++++++-
 .../components/context-menu-trigger.svelte    | 31 +++++++
 .../components/context-menu.svelte            | 36 ++++++++
 .../components/date-field-hidden-input.svelte | 13 +++
 .../components/date-field-input.svelte        | 11 +++
 .../components/date-field-label.svelte        | 18 ++++
 .../components/date-field-segment.svelte      | 12 +++
 .../date-field/components/date-field.svelte   | 16 ++++
 .../components/date-picker-calendar.svelte    | 20 +++++
 .../components/date-picker-trigger.svelte     | 22 ++++-
 .../date-picker/components/date-picker.svelte | 16 +++-
 .../components/date-range-field-input.svelte  | 17 ++++
 .../components/date-range-field-label.svelte  | 18 ++++
 .../components/date-range-field.svelte        | 14 +++
 .../date-range-picker-calendar.svelte         | 20 +++++
 .../date-range-picker-trigger.svelte          | 20 +++++
 .../components/date-range-picker.svelte       | 14 +++
 .../dialog/components/dialog-close.svelte     | 30 +++++++
 .../dialog/components/dialog-content.svelte   | 41 +++++++++
 .../components/dialog-description.svelte      | 27 ++++++
 .../dialog/components/dialog-overlay.svelte   | 26 ++++++
 .../dialog/components/dialog-title.svelte     | 29 ++++++
 .../dialog/components/dialog-trigger.svelte   | 27 ++++++
 src/uix/terra/dialog/components/dialog.svelte | 26 ++++++
 src/uix/terra/dialog/dialog.svelte.ts         | 18 ++--
 .../drawer/components/drawer-close.svelte     | 10 +++
 .../drawer/components/drawer-content.svelte   | 41 +++++++++
 .../components/drawer-description.svelte      | 10 +++
 .../drawer/components/drawer-overlay.svelte   | 12 +++
 .../drawer/components/drawer-title.svelte     | 10 +++
 .../drawer/components/drawer-trigger.svelte   | 10 +++
 src/uix/terra/drawer/components/drawer.svelte | 37 ++++++++
 .../components/dropdown-menu-content.svelte   | 50 ++++++++++-
 .../components/dropdown-menu.svelte           | 39 ++++++++
 .../editable/components/editable-area.svelte  | 24 +++++
 .../components/editable-cancel-trigger.svelte | 25 ++++++
 .../components/editable-edit-trigger.svelte   | 25 ++++++
 .../editable/components/editable-input.svelte | 22 +++++
 .../components/editable-preview.svelte        | 29 ++++++
 .../editable/components/editable-root.svelte  | 19 ++++
 .../components/editable-submit-trigger.svelte | 20 +++++
 .../field/components/Field.Control.svelte     | 30 +++++++
 .../terra/field/components/Field.Error.svelte | 29 ++++++
 .../field/components/Field.HelperText.svelte  | 27 ++++++
 .../terra/field/components/Field.Input.svelte | 34 +++++++
 .../terra/field/components/Field.Label.svelte | 28 ++++++
 .../field/components/Field.Prefix.svelte      | 10 +++
 .../terra/field/components/Field.Root.svelte  | 41 +++++++++
 .../field/components/Field.Suffix.svelte      | 10 +++
 .../components/file-upload-dropzone.svelte    | 25 ++++++
 .../components/file-upload-file-list.svelte   | 46 ++++++++--
 .../components/file-upload-item-name.svelte   | 25 ++++++
 .../file-upload-item-progress.svelte          | 48 +++++++---
 .../components/file-upload-item-remove.svelte | 44 +++++++--
 .../components/file-upload-item-size.svelte   | 17 ++++
 .../components/file-upload-item.svelte        | 60 ++++++++++---
 .../components/file-upload-root.svelte        | 89 +++++++++++++------
 .../terra/form/components/Form.Control.svelte | 34 +++++++
 .../form/components/Form.Description.svelte   | 10 +++
 .../terra/form/components/Form.Error.svelte   | 24 +++++
 .../terra/form/components/Form.Field.svelte   | 44 +++++++++
 .../terra/form/components/Form.Label.svelte   | 27 ++++++
 .../terra/form/components/Form.Root.svelte    | 41 +++++++++
 .../terra/form/components/Form.Submit.svelte  | 37 ++++++++
 src/uix/terra/label/components/label.svelte   | 26 ++++++
 .../floating/use-floating-layer.svelte.ts     | 10 +--
 .../link-preview-content-static.svelte        | 23 +++++
 .../components/link-preview-content.svelte    | 30 +++++++
 .../components/link-preview-trigger.svelte    | 25 ++++++
 .../components/link-preview.svelte            | 31 +++++++
 .../terra/menu/components/menu-arrow.svelte   | 12 +++
 .../components/menu-checkbox-group.svelte     | 10 +++
 .../menu/components/menu-checkbox-item.svelte | 12 +++
 .../terra/menu/components/menu-content.svelte | 39 +++++++-
 .../menu/components/menu-group-heading.svelte | 10 +++
 .../terra/menu/components/menu-group.svelte   | 10 +++
 .../terra/menu/components/menu-item.svelte    | 33 +++++++
 .../menu/components/menu-radio-group.svelte   |  6 ++
 .../menu/components/menu-radio-item.svelte    |  8 ++
 .../menu/components/menu-separator.svelte     | 12 +++
 .../menu/components/menu-sub-content.svelte   | 10 ++-
 .../menu/components/menu-sub-trigger.svelte   |  6 ++
 src/uix/terra/menu/components/menu-sub.svelte |  6 ++
 .../terra/menu/components/menu-trigger.svelte |  6 ++
 src/uix/terra/menu/components/menu.svelte     | 50 +++++++++++
 src/uix/terra/menu/menu.svelte.ts             | 36 ++++----
 .../menubar/components/menubar-content.svelte |  6 ++
 .../menubar/components/menubar-menu.svelte    | 33 +++++++
 .../menubar/components/menubar-trigger.svelte | 11 +++
 .../terra/menubar/components/menubar.svelte   |  6 ++
 src/uix/terra/meter/components/meter.svelte   | 28 ++++++
 .../components/number-field-decrement.svelte  | 10 +++
 .../components/number-field-increment.svelte  | 10 +++
 .../components/number-field-input.svelte      | 10 +++
 .../components/number-field-label.svelte      | 10 +++
 .../components/number-field-root.svelte       | 12 +++
 .../components/pagination-next-button.svelte  | 11 +++
 .../components/pagination-page.svelte         | 12 +++
 .../components/pagination-prev-button.svelte  | 11 +++
 .../pagination/components/pagination.svelte   | 44 +++++++++
 .../components/pin-input-cell.svelte          | 24 +++++
 .../pin-input/components/pin-input.svelte     | 34 +++++++
 .../popover/components/popover-arrow.svelte   |  6 ++
 .../popover/components/popover-close.svelte   |  6 ++
 .../popover/components/popover-content.svelte | 52 +++++++++++
 .../popover/components/popover-overlay.svelte |  8 ++
 .../popover/components/popover-trigger.svelte | 32 +++++++
 .../terra/popover/components/popover.svelte   | 34 +++++++
 .../terra/progress/components/progress.svelte | 39 ++++++++
 .../components/radio-group-item.svelte        | 38 ++++++++
 .../radio-group/components/radio-group.svelte | 46 ++++++++++
 .../components/range-calendar-cell.svelte     | 23 +++++
 .../components/range-calendar-day.svelte      | 24 +++++
 .../components/range-calendar.svelte          | 19 ++++
 .../range-calendar/range-calendar.svelte.ts   |  8 +-
 .../components/rating-group-item.svelte       | 17 ++++
 .../components/rating-group.svelte            | 43 +++++++++
 .../components/presence-layer.svelte          | 10 +++
 .../components/scroll-area-corner-impl.svelte | 10 +++
 .../components/scroll-area-corner.svelte      | 10 +++
 .../scroll-area-scrollbar-auto.svelte         | 12 +++
 .../scroll-area-scrollbar-hover.svelte        | 10 +++
 .../scroll-area-scrollbar-scroll.svelte       | 10 +++
 .../scroll-area-scrollbar-shared.svelte       | 10 +++
 .../scroll-area-scrollbar-visible.svelte      | 10 +++
 .../components/scroll-area-scrollbar-x.svelte | 11 +++
 .../components/scroll-area-scrollbar-y.svelte | 11 +++
 .../components/scroll-area-scrollbar.svelte   | 12 +++
 .../components/scroll-area-thumb-impl.svelte  | 12 +++
 .../components/scroll-area-thumb.svelte       | 10 +++
 .../components/scroll-area-viewport.svelte    | 10 +++
 .../scroll-area/components/scroll-area.svelte | 32 +++++++
 .../components/select-content-static.svelte   | 10 +++
 .../select/components/select-content.svelte   | 38 ++++++++
 .../components/select-group-heading.svelte    | 10 +++
 .../select/components/select-group.svelte     | 10 +++
 .../components/select-hidden-input.svelte     | 10 +++
 .../select/components/select-item.svelte      | 31 +++++++
 .../select-scroll-down-button.svelte          | 10 +++
 .../components/select-scroll-up-button.svelte | 10 +++
 .../select/components/select-trigger.svelte   | 33 +++++++
 .../select/components/select-viewport.svelte  | 10 +++
 src/uix/terra/select/components/select.svelte | 53 +++++++++++
 .../separator/components/separator.svelte     | 32 +++++++
 .../slider/components/slider-range.svelte     | 22 +++++
 .../components/slider-thumb-label.svelte      | 10 +++
 .../slider/components/slider-thumb.svelte     | 33 +++++++
 .../components/slider-tick-label.svelte       | 10 +++
 .../slider/components/slider-tick.svelte      | 11 +++
 src/uix/terra/slider/components/slider.svelte | 55 ++++++++++++
 src/uix/terra/spinner/components/bars.svelte  | 17 ++++
 .../terra/spinner/components/circular.svelte  | 13 +++
 src/uix/terra/spinner/components/dots.svelte  | 17 ++++
 src/uix/terra/spinner/components/pulse.svelte | 17 ++++
 .../terra/spinner/components/spinner.svelte   | 29 ++++++
 .../splitter/components/splitter-panel.svelte | 12 +++
 .../components/splitter-resize-trigger.svelte | 13 +++
 .../splitter/components/splitter-root.svelte  | 33 +++++++
 .../stepper/components/stepper-content.svelte | 10 +++
 .../components/stepper-description.svelte     | 10 +++
 .../components/stepper-indicator.svelte       | 10 +++
 .../stepper/components/stepper-item.svelte    | 13 +++
 .../stepper/components/stepper-list.svelte    | 10 +++
 .../components/stepper-next-trigger.svelte    | 10 +++
 .../components/stepper-prev-trigger.svelte    | 10 +++
 .../stepper/components/stepper-root.svelte    | 33 +++++++
 .../components/stepper-separator.svelte       | 10 +++
 .../stepper/components/stepper-title.svelte   | 10 +++
 .../stepper/components/stepper-trigger.svelte | 10 +++
 .../switch/components/switch-thumb.svelte     | 30 +++++++
 src/uix/terra/switch/components/switch.svelte | 40 +++++++++
 .../terra/tabs/components/tabs-content.svelte | 31 +++++++
 .../terra/tabs/components/tabs-list.svelte    | 29 ++++++
 .../terra/tabs/components/tabs-trigger.svelte | 37 ++++++++
 src/uix/terra/tabs/components/tabs.svelte     | 38 ++++++++
 .../components/tags-input-clear.svelte        | 10 +++
 .../components/tags-input-input.svelte        | 10 +++
 .../components/tags-input-root.svelte         | 48 ++++++++++
 .../components/tags-input-tag-remove.svelte   | 10 +++
 .../components/tags-input-tag-text.svelte     | 10 +++
 .../components/tags-input-tag.svelte          | 35 ++++++++
 .../components/time-field-hidden-input.svelte | 11 +++
 .../components/time-field-input.svelte        | 12 +++
 .../components/time-field-label.svelte        | 10 +++
 .../components/time-field-segment.svelte      | 14 +++
 .../time-field/components/time-field.svelte   | 16 ++++
 .../components/time-range-field-input.svelte  | 12 +++
 .../components/time-range-field-label.svelte  | 12 +++
 .../components/time-range-field.svelte        | 14 +++
 .../terra/toast/components/toast-close.svelte | 10 +++
 .../toast/components/toast-description.svelte | 10 +++
 .../terra/toast/components/toast-root.svelte  | 47 ++++++++++
 .../terra/toast/components/toast-title.svelte | 10 +++
 .../toast/components/toast-toaster.svelte     | 23 +++++
 .../components/toggle-group-item.svelte       | 29 ++++++
 .../components/toggle-group.svelte            | 44 +++++++++
 src/uix/terra/toggle/components/toggle.svelte | 38 ++++++++
 .../toolbar/components/toolbar-button.svelte  | 11 +++
 .../components/toolbar-group-item.svelte      | 15 ++++
 .../toolbar/components/toolbar-group.svelte   | 13 +++
 .../toolbar/components/toolbar-link.svelte    | 10 +++
 .../terra/toolbar/components/toolbar.svelte   | 29 ++++++
 .../tooltip/components/tooltip-content.svelte | 45 ++++++++++
 .../components/tooltip-provider.svelte        | 10 +++
 .../tooltip/components/tooltip-trigger.svelte | 34 ++++++-
 .../terra/tooltip/components/tooltip.svelte   | 47 ++++++++++
 src/uix/terra/utils/attrs.ts                  |  4 +
 .../test/execute-callbacks.test.ts            | 45 ----------
 src/uix/terra/utils/contracts.ts              | 48 +++++-----
 .../components/virtual-list-item.svelte       | 11 +++
 .../components/virtual-list.svelte            | 14 +++
 276 files changed, 6510 insertions(+), 220 deletions(-)
 delete mode 100644 src/uix/terra/utils/collections/test/execute-callbacks.test.ts

diff --git a/src/routes/test/accordion/+page.svelte b/src/routes/test/accordion/+page.svelte
index b869e9714..e761289aa 100644
--- a/src/routes/test/accordion/+page.svelte
+++ b/src/routes/test/accordion/+page.svelte
@@ -70,7 +70,7 @@
 					</Accordion.Header>
 					<Accordion.Content class="acc-content">
 						El content expone <code>data-state="open|closed"</code> y
-						<code>--bits-accordion-content-height</code> para animar
+						<code>--terra-accordion-content-height</code> para animar
 						con CSS sin JavaScript adicional.
 					</Accordion.Content>
 				</Accordion.Item>
diff --git a/src/uix/terra/README.md b/src/uix/terra/README.md
index c25c42997..fc9ec1da7 100644
--- a/src/uix/terra/README.md
+++ b/src/uix/terra/README.md
@@ -527,7 +527,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
         version: 1,
         parts: {
             root: [
-                { attr: 'data-switch-root', description: 'Siempre presente en el root' },
+                { attr: 'data-switch', description: 'Siempre presente en el root' },
                 { attr: 'data-state', values: ['checked', 'unchecked'], description: 'Estado' },
                 { attr: 'data-disabled', description: 'Presente cuando disabled=true' },
             ],
@@ -549,7 +549,7 @@ import { assertDataContract } from '$terra/utils/contracts';
 
 readonly props = $derived.by(() => {
     const props = {
-        "data-switch-root": "",
+        "data-switch": "",
         "data-state": getDataChecked(this.opts.checked.current),
         // ...
     } as const;
diff --git a/src/uix/terra/accordion/accordion.svelte.ts b/src/uix/terra/accordion/accordion.svelte.ts
index c2de7b7a8..25ee8be24 100644
--- a/src/uix/terra/accordion/accordion.svelte.ts
+++ b/src/uix/terra/accordion/accordion.svelte.ts
@@ -375,8 +375,8 @@ export class AccordionContentState {
 				"data-orientation": this.item.root.opts.orientation.current,
 				[accordionAttrs.content]: "",
 				style: {
-					"--bits-accordion-content-height": `${this.dimensions.height}px`,
-					"--bits-accordion-content-width": `${this.dimensions.width}px`,
+					"--terra-accordion-content-height": `${this.dimensions.height}px`,
+					"--terra-accordion-content-width": `${this.dimensions.width}px`,
 				},
 				hidden:
 					this.opts.hiddenUntilFound.current && !this.item.isActive
diff --git a/src/uix/terra/accordion/components/accordion-content.svelte b/src/uix/terra/accordion/components/accordion-content.svelte
index 096700eb7..437506f0a 100644
--- a/src/uix/terra/accordion/components/accordion-content.svelte
+++ b/src/uix/terra/accordion/components/accordion-content.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Accordion Content
+	 *
+	 * Contenido expansible de un item del acordeón.
+	 * Solo se muestra cuando el item padre está abierto.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AccordionContent>
+	 *   <p>Este contenido solo se muestra cuando el item está abierto.</p>
+	 * </AccordionContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Monta el contenido siempre (útil para transiciones)
+	 * - `hiddenUntilFound`: boolean - Permite búsqueda del navegador
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura del contenido
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-accordion-content]         → Contenido del acordeón
+	 * [data-state="open"]              → Contenido visible
+	 * [data-state="closed"]            → Contenido oculto
+	 * [data-disabled]                  → Hereda disabled del item
+	 * [data-orientation="vertical"]    → Hereda orientación del root
+	 * [data-orientation="horizontal"]  → Hereda orientación del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos ARIA apropiados.
+	 */
 	import {
 		mergeProps,
 		readableActive,
diff --git a/src/uix/terra/accordion/components/accordion-header.svelte b/src/uix/terra/accordion/components/accordion-header.svelte
index 2d18d88ed..68385ed46 100644
--- a/src/uix/terra/accordion/components/accordion-header.svelte
+++ b/src/uix/terra/accordion/components/accordion-header.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Accordion Header
+	 *
+	 * Contenedor del encabezado de un item del acordeón.
+	 * Debe contener un AccordionTrigger.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AccordionHeader level={3}>
+	 *   <AccordionTrigger>Título del item</AccordionTrigger>
+	 * </AccordionHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `level`: 1 | 2 | 3 | 4 | 5 | 6 - Nivel de encabezado (h1-h6)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-accordion-header]          → Header del item
+	 * [data-heading-level]             → Nivel del heading (1-6)
+	 * [data-state="open"]              → Hereda estado del item
+	 * [data-state="closed"]            → Hereda estado del item
+	 * [data-orientation="vertical"]    → Hereda orientación del root
+	 * [data-orientation="horizontal"]  → Hereda orientación del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con el role de heading apropiado.
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/accordion/components/accordion-item.svelte b/src/uix/terra/accordion/components/accordion-item.svelte
index 1feeeaac4..2ea51b4b5 100644
--- a/src/uix/terra/accordion/components/accordion-item.svelte
+++ b/src/uix/terra/accordion/components/accordion-item.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Accordion Item
+	 *
+	 * Componente que representa un item individual del acordeón.
+	 * Debe contener un AccordionHeader y un AccordionContent.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AccordionItem value="item-1">
+	 *   <AccordionHeader>
+	 *     <AccordionTrigger>Título</AccordionTrigger>
+	 *   </AccordionHeader>
+	 *   <AccordionContent>Contenido</AccordionContent>
+	 * </AccordionItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Identificador único del item (se genera uno por defecto)
+	 * - `disabled`: boolean - Deshabilita este item específico
+	 * - `id`: string - ID del elemento (se genera uno por defecto)
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-accordion-item]            → Contenedor del item
+	 * [data-state="open"]              → Item abierto
+	 * [data-state="closed"]            → Item cerrado
+	 * [data-disabled]                  → Presente cuando el item está disabled
+	 * [data-orientation="vertical"]    → Hereda orientación del root
+	 * [data-orientation="horizontal"]  → Hereda orientación del root
+	 * ```
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/accordion/components/accordion-trigger.svelte b/src/uix/terra/accordion/components/accordion-trigger.svelte
index 043ebe0d2..e2e7da339 100644
--- a/src/uix/terra/accordion/components/accordion-trigger.svelte
+++ b/src/uix/terra/accordion/components/accordion-trigger.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Accordion Trigger
+	 *
+	 * Botón que alterna el estado de apertura/cierre del item del acordeón.
+	 * Debe estar dentro de un AccordionHeader.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AccordionHeader>
+	 *   <AccordionTrigger>
+	 *     Click para expandir {#if open()} ▲ {:else} ▼ {/if}
+	 *   </AccordionTrigger>
+	 * </AccordionHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `id`: string - ID del elemento
+	 * - `tabindex`: number - Índice de tabulación
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-accordion-trigger]         → Botón trigger
+	 * [data-state="open"]              → Item abierto
+	 * [data-state="closed"]            → Item cerrado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-orientation="vertical"]    → Hereda orientación del root
+	 * [data-orientation="horizontal"]  → Hereda orientación del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` con atributos ARIA apropiados.
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/accordion/components/accordion.svelte b/src/uix/terra/accordion/components/accordion.svelte
index 9337268e2..868d47d6e 100644
--- a/src/uix/terra/accordion/components/accordion.svelte
+++ b/src/uix/terra/accordion/components/accordion.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # Accordion Root
+	 *
+	 * Componente raíz del acordeón que gestiona el estado de apertura/cierre de los items.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Accordion type="single" bind:value={openItem}>
+	 *   <AccordionItem value="item1">
+	 *     <AccordionHeader>
+	 *       <AccordionTrigger>Item 1</AccordionTrigger>
+	 *     </AccordionHeader>
+	 *     <AccordionContent>Contenido 1</AccordionContent>
+	 *   </AccordionItem>
+	 * </Accordion>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple"
+	 * - `value`: string | string[] - (bindable)
+	 * - `onValueChange`: (value) => void
+	 * - `disabled`: boolean
+	 * - `loop`: boolean
+	 * - `orientation`: "vertical" | "horizontal"
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-accordion]                 → Root
+	 * [data-accordion-item]            → Item
+	 * [data-accordion-trigger]         → Trigger
+	 * [data-accordion-content]         → Content
+	 * [data-accordion-header]          → Header
+	 * [data-state="open"]              → Item abierto
+	 * [data-state="closed"]            → Item cerrado
+	 * [data-disabled]                  → Deshabilitado
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 */
 	import { watch } from "runed";
 	import {
 		type State,
diff --git a/src/uix/terra/alert-dialog/components/alert-dialog-action.svelte b/src/uix/terra/alert-dialog/components/alert-dialog-action.svelte
index 813ea480a..89dc7df92 100644
--- a/src/uix/terra/alert-dialog/components/alert-dialog-action.svelte
+++ b/src/uix/terra/alert-dialog/components/alert-dialog-action.svelte
@@ -1,4 +1,28 @@
 <script lang="ts">
+	/**
+	 * # Alert Dialog Action
+	 *
+	 * Botón de acción principal del diálogo de alerta (ej. "Confirmar", "Eliminar").
+	 * Al hacer clic, cierra el diálogo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AlertDialogAction onclick={() => confirmAction()}>
+	 *   Confirmar
+	 * </AlertDialogAction>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-alert-dialog-action]       → Botón de acción principal
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import { DialogActionState } from '../../dialog/dialog.svelte';
 	import type { AlertDialogActionProps } from '../types';
diff --git a/src/uix/terra/alert-dialog/components/alert-dialog-cancel.svelte b/src/uix/terra/alert-dialog/components/alert-dialog-cancel.svelte
index 102d83e10..8ec5bdbd8 100644
--- a/src/uix/terra/alert-dialog/components/alert-dialog-cancel.svelte
+++ b/src/uix/terra/alert-dialog/components/alert-dialog-cancel.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # Alert Dialog Cancel
+	 *
+	 * Botón de cancelación del diálogo de alerta (ej. "Cancelar", "Cerrar").
+	 * Al hacer clic, cierra el diálogo sin realizar la acción.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AlertDialogCancel>
+	 *   Cancelar
+	 * </AlertDialogCancel>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el botón
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-alert-dialog-cancel]       → Botón de cancelar
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import { AlertDialogCance$state } from '../../dialog/dialog.svelte';
 	import type { AlertDialogCancelProps } from '../types';
diff --git a/src/uix/terra/alert-dialog/components/alert-dialog-content.svelte b/src/uix/terra/alert-dialog/components/alert-dialog-content.svelte
index 36e5b97d2..383b822ea 100644
--- a/src/uix/terra/alert-dialog/components/alert-dialog-content.svelte
+++ b/src/uix/terra/alert-dialog/components/alert-dialog-content.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Alert Dialog Content
+	 *
+	 * Contenedor principal del contenido del diálogo de alerta.
+	 * Incluye el overlay y maneja el trapping de foco.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AlertDialogContent>
+	 *   <p>Contenido de la alerta</p>
+	 * </AlertDialogContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Fuerza el montaje del componente
+	 * - `onOpenAutoFocus`: Callback cuando el diálogo gana foco al abrirse
+	 * - `onCloseAutoFocus`: Callback cuando el diálogo pierde foco al cerrarse
+	 * - `onEscapeKeydown`: Callback cuando se presiona Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura del diálogo
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-alert-dialog-content]      → Contenedor del diálogo
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * ```
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, afterSleep, createId } from '$terra/utils';
 	import { DialogContentState } from '../../dialog/dialog.svelte';
diff --git a/src/uix/terra/alert-dialog/components/alert-dialog.svelte b/src/uix/terra/alert-dialog/components/alert-dialog.svelte
index 0dd8474c2..e69e5471f 100644
--- a/src/uix/terra/alert-dialog/components/alert-dialog.svelte
+++ b/src/uix/terra/alert-dialog/components/alert-dialog.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Alert Dialog Root
+	 *
+	 * Componente raíz para un diálogo de alerta modal que requiere atención del usuario.
+	 * A diferencia de un diálogo normal, el usuario debe interactuar con él antes de continuar.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AlertDialog bind:open={isOpen}>
+	 *   <AlertDialogTrigger>Abrir alerta</AlertDialogTrigger>
+	 *   <AlertDialogContent>
+	 *     <AlertDialogTitle>¿Estás seguro?</AlertDialogTitle>
+	 *     <AlertDialogDescription>
+	 *       Esta acción no se puede deshacer.
+	 *     </AlertDialogDescription>
+	 *     <AlertDialogCancel>Cancelar</AlertDialogCancel>
+	 *     <AlertDialogAction>Confirmar</AlertDialogAction>
+	 *   </AlertDialogContent>
+	 * </AlertDialog>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado de apertura del diálogo (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado de apertura
+	 * - `onOpenChangeComplete`: Callback cuando la animación de apertura/cierre termina
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-alert-dialog-content]      → Contenedor del diálogo
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-alert-dialog-trigger]      → Trigger que abre el diálogo
+	 * [data-alert-dialog-cancel]       → Botón de cancelar
+	 * [data-alert-dialog-action]       → Botón de acción principal
+	 * ```
+	 */
 	import { readableActive, writableActive } from '$terra/utils';
 	import { DialogRootState } from '../../dialog/dialog.svelte';
 	import type { AlertDialogRootProps } from '../types';
diff --git a/src/uix/terra/aspect-ratio/components/aspect-ratio.svelte b/src/uix/terra/aspect-ratio/components/aspect-ratio.svelte
index 39e1b7a99..bc676a0d7 100644
--- a/src/uix/terra/aspect-ratio/components/aspect-ratio.svelte
+++ b/src/uix/terra/aspect-ratio/components/aspect-ratio.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Aspect Ratio
+	 *
+	 * Componente que mantiene una relación de aspecto proporcional para su contenido.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <AspectRatio ratio={16 / 9}>
+	 *   <img src="video-thumbnail.jpg" alt="Video" />
+	 * </AspectRatio>
+	 *
+	 * <!-- Cuadrado -->
+	 * <AspectRatio ratio={1}>
+	 *   <img src="avatar.jpg" alt="Avatar" />
+	 * </AspectRatio>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `ratio`: number - Relación de aspecto (ancho/alto). Ejemplos comunes:
+	 *   - 1 = Cuadrado (1:1)
+	 *   - 16/9 = Video widescreen
+	 *   - 4/3 = Video estándar
+	 *   - 21/9 = Ultrawide
+	 *
+	 * ## Estilos
+	 * Usa padding-bottom para mantener la proporción. El contenido se posiciona
+	 * de forma absoluta sobre el contenedor.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-aspect-ratio]              → Contenedor con relación de aspecto
+	 * ```
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/avatar/components/avatar-fallback.svelte b/src/uix/terra/avatar/components/avatar-fallback.svelte
index a10798410..ee21679c0 100644
--- a/src/uix/terra/avatar/components/avatar-fallback.svelte
+++ b/src/uix/terra/avatar/components/avatar-fallback.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Avatar Fallback
+	 *
+	 * Contenido alternativo que se muestra cuando la imagen no ha cargado
+	 * o ha fallado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Avatar>
+	 *   <AvatarImage src="/avatar.jpg" alt="Usuario" />
+	 *   <AvatarFallback>
+	 *     <UserIcon />
+	 *   </AvatarFallback>
+	 * </Avatar>
+	 *
+	 * <!-- Con iniciales -->
+	 * <Avatar>
+	 *   <AvatarImage src="/avatar.jpg" alt="Usuario" />
+	 *   <AvatarFallback>JD</AvatarFallback>
+	 * </Avatar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-avatar-fallback]           → Fallback cuando no hay imagen
+	 * [data-status="loading"]          → Hereda estado de carga
+	 * [data-status="loaded"]           → Hereda estado de carga
+	 * [data-status="error"]            → Hereda estado de carga
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/avatar/components/avatar-image.svelte b/src/uix/terra/avatar/components/avatar-image.svelte
index 2056b9402..2aa5ccbe5 100644
--- a/src/uix/terra/avatar/components/avatar-image.svelte
+++ b/src/uix/terra/avatar/components/avatar-image.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Avatar Image
+	 *
+	 * Imagen del avatar. Se muestra cuando la carga es exitosa.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Avatar>
+	 *   <AvatarImage src="/avatar.jpg" alt="Usuario" />
+	 *   <AvatarFallback>US</AvatarFallback>
+	 * </Avatar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `src`: string - URL de la imagen
+	 * - `alt`: string - Texto alternativo de la imagen
+	 * - `crossorigin`: string - Configuración CORS para la imagen
+	 * - `referrerpolicy`: string - Política de referer
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Si la imagen carga correctamente, se muestra y oculta el fallback
+	 * - Si la imagen falla al cargar, se muestra el fallback
+	 * - `delayMs` del AvatarRoot controla el tiempo de espera antes de mostrar
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-avatar-image]              → Elemento de imagen
+	 * [data-status="loading"]          → Estado de carga
+	 * [data-status="loaded"]           → Imagen cargada
+	 * [data-status="error"]            → Error al cargar
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from "$terra/utils";
 	import type { AvatarImageProps } from "../types";
 	import { AvatarImageState } from "../avatar.svelte";
diff --git a/src/uix/terra/avatar/components/avatar.svelte b/src/uix/terra/avatar/components/avatar.svelte
index 5acd7581c..e182c131d 100644
--- a/src/uix/terra/avatar/components/avatar.svelte
+++ b/src/uix/terra/avatar/components/avatar.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Avatar Root
+	 *
+	 * Componente raíz del avatar que muestra una imagen de usuario con un fallback.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Avatar>
+	 *   <AvatarImage src="/avatar.jpg" alt="Usuario" />
+	 *   <AvatarFallback>US</AvatarFallback>
+	 * </Avatar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `delayMs`: number - Tiempo de espera en ms antes de mostrar la imagen
+	 *   evita parpadeo si la imagen carga muy rápido (default: 0)
+	 * - `loadingStatus`: "loading" | "loaded" | "error" - Estado de carga (bindable)
+	 * - `onLoadingStatusChange`: Callback cuando cambia el estado de carga
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Contrato
+	 * - Debe contener `AvatarImage` y opcionalmente `AvatarFallback`
+	 * - El fallback se muestra cuando la imagen está cargando o ha fallado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-avatar]                    → Contenedor del avatar
+	 * [data-status="loading"]          → Imagen cargando
+	 * [data-status="loaded"]           → Imagen cargada
+	 * [data-status="error"]            → Error al cargar
+	 * ```
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/button/components/button.svelte b/src/uix/terra/button/components/button.svelte
index 498dd0b49..94e36d4ef 100644
--- a/src/uix/terra/button/components/button.svelte
+++ b/src/uix/terra/button/components/button.svelte
@@ -1,4 +1,43 @@
 <script lang="ts">
+	/**
+	 * # Button
+	 *
+	 * Componente de botón polivalente que puede renderizar como `<button>` o `<a>`.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Botón normal -->
+	 * <Button onclick={() => console.log('click')}>
+	 *   Click me
+	 * </Button>
+	 *
+	 * <!-- Como enlace -->
+	 * <Button href="/page">
+	 *   Navigate
+	 * </Button>
+	 *
+	 * <!-- Deshabilitado -->
+	 * <Button disabled>
+	 *   Disabled
+	 * </Button>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `href`: string - Si se proporciona, renderiza como `<a>`
+	 * - `type`: "button" | "submit" | "reset" - Tipo del botón
+	 * - `disabled`: boolean - Deshabilita el botón
+	 * - `ref`: HTMLElement | null - Referencia al elemento DOM
+	 * - Todas las props de HTMLButtonAttributes o HTMLAnchorAttributes
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-button]                   → Elemento raíz del botón
+	 * ```
+	 *
+	 * ## Estilos
+	 * - Usa el atributo `data-button` para estilos
+	 * - Cuando es link con disabled, usa `aria-disabled` y `tabindex="-1"`
+	 */
 	import type { ButtonRootProps } from "../types.ts";
 
 	let {
@@ -13,7 +52,7 @@
 
 <svelte:element
 	this={href ? "a" : "button"}
-	data-button-root
+	data-button
 	type={href ? undefined : type}
 	href={href && !disabled ? href : undefined}
 	disabled={href ? undefined : disabled}
diff --git a/src/uix/terra/calendar/components/calendar-cell.svelte b/src/uix/terra/calendar/components/calendar-cell.svelte
index e7390b05d..69f3eda26 100644
--- a/src/uix/terra/calendar/components/calendar-cell.svelte
+++ b/src/uix/terra/calendar/components/calendar-cell.svelte
@@ -1,4 +1,49 @@
 <script lang="ts">
+	/**
+	 * # Calendar Cell
+	 *
+	 * Celda individual de la grilla del calendario que contiene un CalendarDay.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * {#each days as date (date.toString())}
+	 *   <CalendarCell {date} month={placeholder}>
+	 *     <CalendarDay />
+	 *   </CalendarCell>
+	 * {/each}
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `date`: DateValue - Fecha de la celda
+	 * - `month`: DateValue - Mes de referencia para calcular offset
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `date`: DateValue - Objeto de fecha
+	 * - `isSelected`: boolean - Si la celda está seleccionada
+	 * - `isDisabled`: boolean - Si la celda está deshabilitada
+	 * - `isUnavailable`: boolean - Si la celda no está disponible
+	 * - `isToday`: boolean - Si la celda es hoy
+	 * - `outsideMonth`: boolean - Si la fecha está fuera del mes visible
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-cell]             → Celda individual del calendario
+	 * [data-disabled]                  → Presente cuando la celda está deshabilitada
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-unavailable]               → Presente cuando la fecha no está disponible
+	 * [data-today]                     → Presente si es la fecha de hoy
+	 * [data-outside-month]             → Presente si es de otro mes
+	 * [data-outside-visible-months]    → Presente si está fuera del rango visible
+	 * [data-focused]                   → Presente si tiene foco
+	 * [data-selected]                  → Presente si está seleccionada
+	 * [data-value]                     → Valor de la fecha (ISO string)
+	 * [data-type="day"]                → Celda que representa un día
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<td>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import { CalendarCellState } from "../calendar.svelte";
 	import type { CalendarCellProps } from "../types";
diff --git a/src/uix/terra/calendar/components/calendar-day.svelte b/src/uix/terra/calendar/components/calendar-day.svelte
index 8d90e237a..07c8b0316 100644
--- a/src/uix/terra/calendar/components/calendar-day.svelte
+++ b/src/uix/terra/calendar/components/calendar-day.svelte
@@ -1,4 +1,47 @@
 <script lang="ts">
+	/**
+	 * # Calendar Day
+	 *
+	 * Representa un día individual en el calendario. Muestra el número del día
+	 * y maneja la selección.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarCell date={date} month={month}>
+	 *   <CalendarDay>
+	 *     {#snippet children(props)}
+	 *       <span class:selected={props.isSelected}>
+	 *         {props.date.day}
+	 *       </span>
+	 *     {/snippet}
+	 *   </CalendarDay>
+	 * </CalendarCell>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `date`: DateValue - Objeto de fecha completo
+	 * - `isSelected`: boolean - Si el día está seleccionado
+	 * - `isDisabled`: boolean - Si el día está deshabilitado
+	 * - `isUnavailable`: boolean - Si el día no está disponible
+	 * - `isToday`: boolean - Si el día es hoy
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-day]              → Contenedor del día
+	 * [data-disabled]                  → Presente cuando el día está deshabilitado
+	 * [data-unavailable]               → Presente cuando el día no está disponible
+	 * [data-today]                     → Presente si es la fecha de hoy
+	 * [data-outside-month]             → Presente si es de otro mes
+	 * [data-outside-visible-months]    → Presente si está fuera del rango visible
+	 * [data-focused]                   → Presente si tiene foco
+	 * [data-selected]                  → Presente si está seleccionado
+	 * [data-value]                     → Valor de la fecha (ISO string)
+	 * [data-type="day"]                → Tipo de celda (día)
+	 * ```
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -38,4 +81,3 @@
 	</div>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-grid-body.svelte b/src/uix/terra/calendar/components/calendar-grid-body.svelte
index 208c3c2c3..e6e28108b 100644
--- a/src/uix/terra/calendar/components/calendar-grid-body.svelte
+++ b/src/uix/terra/calendar/components/calendar-grid-body.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Calendar Grid Body
+	 *
+	 * Cuerpo de la grilla del calendario que contiene las filas de días.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarGrid>
+	 *   <CalendarGridHead>...</CalendarGridHead>
+	 *   <CalendarGridBody>
+	 *     {#each weeks as week (week.id)}
+	 *       <CalendarGridRow>
+	 *         {#each week.days as date (date.id)}
+	 *           <CalendarCell {date} month={placeholder}>
+	 *             <CalendarDay />
+	 *           </CalendarCell>
+	 *         {/each}
+	 *       </CalendarGridRow>
+	 *     {/each}
+	 *   </CalendarGridBody>
+	 * </CalendarGrid>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-grid-body]       → Elemento tbody del cuerpo de la grilla
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<tbody>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { CalendarGridBodyState } from "../calendar.svelte";
 	import type { CalendarGridBodyProps } from "../types";
diff --git a/src/uix/terra/calendar/components/calendar-grid-head.svelte b/src/uix/terra/calendar/components/calendar-grid-head.svelte
index 87d569147..15e4b3a08 100644
--- a/src/uix/terra/calendar/components/calendar-grid-head.svelte
+++ b/src/uix/terra/calendar/components/calendar-grid-head.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Calendar Grid Head
+	 *
+	 * Encabezado de la grilla del calendario que contiene los nombres de los días.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarGrid>
+	 *   <CalendarGridHead>
+	 *     <CalendarGridRow>
+	 *       {#each weekdays as day}
+	 *         <CalendarHeadCell>{day}</CalendarHeadCell>
+	 *       {/each}
+	 *     </CalendarGridRow>
+	 *   </CalendarGridHead>
+	 *   <CalendarGridBody>...</CalendarGridBody>
+	 * </CalendarGrid>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-grid-head]       → Encabezado de la grilla (thead)
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * [data-readonly]                 → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<thead>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -33,4 +65,3 @@
 	</thead>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-grid-row.svelte b/src/uix/terra/calendar/components/calendar-grid-row.svelte
index 252ba0dda..ee050ab13 100644
--- a/src/uix/terra/calendar/components/calendar-grid-row.svelte
+++ b/src/uix/terra/calendar/components/calendar-grid-row.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Calendar Grid Row
+	 *
+	 * Fila de la grilla del calendario que contiene las celdas de días.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarGridBody>
+	 *   <CalendarGridRow>
+	 *     <CalendarCell date={d1} month={month}><CalendarDay /></CalendarCell>
+	 *     <CalendarCell date={d2} month={month}><CalendarDay /></CalendarCell>
+	 *     <!-- ... -->
+	 *   </CalendarGridRow>
+	 * </CalendarGridBody>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-grid-row]       → Fila de la grilla (tr)
+	 * [data-disabled]                → Presente cuando disabled=true
+	 * [data-readonly]                → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<tr>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -33,4 +62,3 @@
 	</tr>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-grid.svelte b/src/uix/terra/calendar/components/calendar-grid.svelte
index e6d29c0fa..e0aec3282 100644
--- a/src/uix/terra/calendar/components/calendar-grid.svelte
+++ b/src/uix/terra/calendar/components/calendar-grid.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Calendar Grid
+	 *
+	 * Contenedor principal de la grilla del calendario. Renderiza una tabla
+	 * con la estructura de días y semanas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Calendar>
+	 *   <CalendarHeader>...</CalendarHeader>
+	 *   <CalendarGrid>
+	 *     <CalendarGridHead>
+	 *       <CalendarGridRow>
+	 *         <CalendarHeadCell />
+	 *       </CalendarGridRow>
+	 *     </CalendarGridHead>
+	 *     <CalendarGridBody>
+	 *       <!-- Días -->
+	 *     </CalendarGridBody>
+	 *   </CalendarGrid>
+	 * </Calendar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-grid]            → Contenedor de la grilla (table)
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<table>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from '$terra/utils';
 	import { CalendarGridState } from "../calendar.svelte";
 	import type { CalendarGridProps } from "../types";
@@ -28,4 +64,3 @@
 	</table>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-head-cell.svelte b/src/uix/terra/calendar/components/calendar-head-cell.svelte
index dc0067a58..f5a574b0d 100644
--- a/src/uix/terra/calendar/components/calendar-head-cell.svelte
+++ b/src/uix/terra/calendar/components/calendar-head-cell.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Calendar Head Cell
+	 *
+	 * Celda del encabezado que muestra el nombre de un día de la semana.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarGridHead>
+	 *   <CalendarGridRow>
+	 *     <CalendarHeadCell>Dom</CalendarHeadCell>
+	 *     <CalendarHeadCell>Lun</CalendarHeadCell>
+	 *     <!-- ... -->
+	 *   </CalendarGridRow>
+	 * </CalendarGridHead>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-head-cell]       → Celda del encabezado (th)
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * [data-readonly]                 → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<th>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -32,4 +61,3 @@
 		{@render children?.()}
 	</th>
 {/if}
-
diff --git a/src/uix/terra/calendar/components/calendar-header.svelte b/src/uix/terra/calendar/components/calendar-header.svelte
index 67d1877b0..f112bb324 100644
--- a/src/uix/terra/calendar/components/calendar-header.svelte
+++ b/src/uix/terra/calendar/components/calendar-header.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Calendar Header
+	 *
+	 * Contenedor del encabezado del calendario. Contiene los controles de navegación
+	 * y el título del mes/año.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Calendar>
+	 *   <CalendarHeader>
+	 *     <CalendarPrevButton />
+	 *     <CalendarHeading />
+	 *     <CalendarNextButton />
+	 *   </CalendarHeader>
+	 *   <!-- ... -->
+	 * </Calendar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-header]           → Contenedor del header
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<header>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -33,4 +64,3 @@
 	</header>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-heading.svelte b/src/uix/terra/calendar/components/calendar-heading.svelte
index ee29eca1a..93c4b484f 100644
--- a/src/uix/terra/calendar/components/calendar-heading.svelte
+++ b/src/uix/terra/calendar/components/calendar-heading.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Calendar Heading
+	 *
+	 * Muestra el mes y año actual del calendario. Se actualiza automáticamente
+	 * al navegar entre meses.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarHeader>
+	 *   <CalendarPrevButton />
+	 *   <CalendarHeading />
+	 *   <CalendarNextButton />
+	 * </CalendarHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `headingValue`: string - Texto formateado del mes/año
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-heading]          → Contenedor del título
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Comportamiento
+	 * Si no se proporcionan children, renderiza el texto automáticamente.
+	 * El formato se controla con `monthFormat` y `yearFormat` del Calendar.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -38,4 +70,3 @@
 	</div>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-month-select.svelte b/src/uix/terra/calendar/components/calendar-month-select.svelte
index 54825e746..b86178be8 100644
--- a/src/uix/terra/calendar/components/calendar-month-select.svelte
+++ b/src/uix/terra/calendar/components/calendar-month-select.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Calendar Month Select
+	 *
+	 * Selector desplegable para elegir el mes del calendario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarHeader>
+	 *   <CalendarMonthSelect />
+	 *   <CalendarYearSelect />
+	 * </CalendarHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `months`: number[] - Array de números de mes a mostrar (1-12)
+	 * - `monthFormat`: "long" | "numeric" | "2-digit" - Formato del nombre
+	 * - `disabled`: boolean - Deshabilita el selector
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `monthItems`: Array<{value: string, label: string}> - Meses formateados
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-month-select]    → Selector de mes (select)
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<select>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from '$terra/utils';
 	import { CalendarMonthSelectState } from "../calendar.svelte";
 	import type { CalendarMonthSelectProps } from "../types";
@@ -42,4 +73,3 @@
 	</select>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-next-button.svelte b/src/uix/terra/calendar/components/calendar-next-button.svelte
index f06afb0ee..f2a254db9 100644
--- a/src/uix/terra/calendar/components/calendar-next-button.svelte
+++ b/src/uix/terra/calendar/components/calendar-next-button.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Calendar Next Button
+	 *
+	 * Botón para navegar al mes siguiente en el calendario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarHeader>
+	 *   <CalendarPrevButton>
+	 *     ←
+	 *   </CalendarPrevButton>
+	 *   <CalendarHeading />
+	 *   <CalendarNextButton>
+	 *     →
+	 *   </CalendarNextButton>
+	 * </CalendarHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-next-button]    → Botón siguiente (button)
+	 * [data-disabled]                → Presente cuando el botón está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from '$terra/utils';
 	import { CalendarNextButtonState } from "../calendar.svelte";
 	import type { CalendarNextButtonProps } from "../types";
@@ -28,4 +58,3 @@
 	</button>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-prev-button.svelte b/src/uix/terra/calendar/components/calendar-prev-button.svelte
index 218e2dd6f..07e76c041 100644
--- a/src/uix/terra/calendar/components/calendar-prev-button.svelte
+++ b/src/uix/terra/calendar/components/calendar-prev-button.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Calendar Previous Button
+	 *
+	 * Botón para navegar al mes anterior en el calendario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarHeader>
+	 *   <CalendarPrevButton>
+	 *     ←
+	 *   </CalendarPrevButton>
+	 *   <CalendarHeading />
+	 *   <CalendarNextButton>
+	 *     →
+	 *   </CalendarNextButton>
+	 * </CalendarHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-prev-button]    → Botón anterior (button)
+	 * [data-disabled]                → Presente cuando el botón está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -33,4 +63,3 @@
 	</button>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar-year-select.svelte b/src/uix/terra/calendar/components/calendar-year-select.svelte
index 70b66be28..1899db3a9 100644
--- a/src/uix/terra/calendar/components/calendar-year-select.svelte
+++ b/src/uix/terra/calendar/components/calendar-year-select.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Calendar Year Select
+	 *
+	 * Selector desplegable para elegir el año del calendario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CalendarHeader>
+	 *   <CalendarMonthSelect />
+	 *   <CalendarYearSelect />
+	 * </CalendarHeader>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `years`: number[] - Array de años a mostrar (default: rango calculado)
+	 * - `yearFormat`: "numeric" | "2-digit" - Formato del año
+	 * - `disabled`: boolean - Deshabilita el selector
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `yearItems`: Array<{value: string, label: string}> - Años formateados
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-year-select]     → Selector de año (select)
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<select>`.
+	 */
 	import {
 		readableActive,
 		writableActive,
@@ -45,4 +76,3 @@
 	</select>
 {/if}
 
-
diff --git a/src/uix/terra/calendar/components/calendar.svelte b/src/uix/terra/calendar/components/calendar.svelte
index 3b8dcc41a..4e04d4540 100644
--- a/src/uix/terra/calendar/components/calendar.svelte
+++ b/src/uix/terra/calendar/components/calendar.svelte
@@ -1,4 +1,77 @@
 <script lang="ts">
+	/**
+	 * # Calendar Root
+	 *
+	 * Componente de calendario para seleccionar fechas. Soporta selección simple,
+	 * múltiple y rangos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Calendar
+	 *   type="single"
+	 *   bind:value={selectedDate}
+	 *   bind:placeholder={currentMonth}
+	 * />
+	 *
+	 * <!-- Rango de fechas -->
+	 * <Calendar
+	 *   type="range"
+	 *   bind:value={dateRange}
+	 *   numberOfMonths={2}
+	 * />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple" | "range" - Tipo de selección
+	 * - `value`: DateValue | DateValue[] - Fecha(s) seleccionada(s) (bindable)
+	 * - `placeholder`: DateValue - Mes/año visible (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `onPlaceholderChange`: Callback cuando cambia el mes visible
+	 * - `weekdayFormat`: "narrow" | "short" | "long" - Formato de días de semana
+	 * - `weekStartsOn`: number - Día de inicio de semana (0-6)
+	 * - `pagedNavigation`: boolean - Navegación por meses en lugar de días
+	 * - `isDateDisabled`: (date) => boolean - Función para deshabilitar fechas
+	 * - `isDateUnavailable`: (date) => boolean - Función para marcar fechas no disponibles
+	 * - `fixedWeeks`: boolean - Muestra siempre 6 semanas
+	 * - `numberOfMonths`: number - Cantidad de meses a mostrar
+	 * - `locale`: string - Configuración regional
+	 * - `calendarLabel`: string - Etiqueta accesible del calendario
+	 * - `disabled`: boolean - Deshabilita el calendario
+	 * - `readonly`: boolean - Solo lectura
+	 * - `minValue`: DateValue - Fecha mínima seleccionable
+	 * - `maxValue`: DateValue - Fecha máxima seleccionable
+	 * - `preventDeselect`: boolean - Evita deseleccionar la fecha actual
+	 * - `disableDaysOutsideMonth`: boolean - Deshabilita días fuera del mes actual
+	 * - `initialFocus`: boolean - Enfoca el calendario al montar
+	 * - `maxDays`: number - Máximo de días para rangos
+	 * - `monthFormat`: "long" | "numeric" | "2-digit" - Formato del mes
+	 * - `yearFormat`: "numeric" | "2-digit" - Formato del año
+	 *
+	 * ## Snippet Props
+	 * - `months`: DateValue[] - Array de meses visibles
+	 * - `weekdays`: string[] - Nombres de días de la semana
+	 * - `weekStartsOn`: number - Día de inicio de semana
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar]                  → Contenedor del calendario
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-calendar-cell]             → Celda individual del calendario
+	 * [data-disabled]                  → Presente cuando la celda está deshabilitada
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-unavailable]               → Presente cuando la fecha no está disponible
+	 * [data-today]                     → Presente si es la fecha de hoy
+	 * [data-outside-month]             → Presente si es de otro mes
+	 * [data-outside-visible-months]    → Presente si está fuera del rango visible
+	 * [data-focused]                   → Presente si tiene foco
+	 * [data-selected]                  → Presente si está seleccionada
+	 * [data-value]                     → Valor de la fecha (ISO string)
+	 * [data-type="day"]                → Celda que representa un día
+	 * [data-calendar-header]           → Header con navegación
+	 * [data-calendar-heading]          → Título con mes/año
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { DateValue } from "$terra/adapters/dates";
diff --git a/src/uix/terra/checkbox/components/checkbox-group-label.svelte b/src/uix/terra/checkbox/components/checkbox-group-label.svelte
index 82c4863fb..2285ceff6 100644
--- a/src/uix/terra/checkbox/components/checkbox-group-label.svelte
+++ b/src/uix/terra/checkbox/components/checkbox-group-label.svelte
@@ -1,4 +1,26 @@
 <script lang="ts">
+	/**
+	 * # Checkbox Group Label
+	 *
+	 * Etiqueta para un grupo de checkboxes.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CheckboxGroup bind:value={values}>
+	 *   <CheckboxGroupLabel>Selecciona frutas</CheckboxGroupLabel>
+	 *   <Checkbox value="apple">Manzana</Checkbox>
+	 * </CheckboxGroup>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-checkbox-group-label]       → Etiqueta del grupo
+	 * [data-disabled]                  → Hereda disabled del grupo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { CheckboxGroupLabelProps } from "../types";
 	import { CheckboxGroupLabelState } from "../checkbox.svelte";
diff --git a/src/uix/terra/checkbox/components/checkbox-group.svelte b/src/uix/terra/checkbox/components/checkbox-group.svelte
index b1ffcaa6f..1ecaf7889 100644
--- a/src/uix/terra/checkbox/components/checkbox-group.svelte
+++ b/src/uix/terra/checkbox/components/checkbox-group.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Checkbox Group
+	 *
+	 * Grupo de checkboxes que comparten estado y validación.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CheckboxGroup bind:value={selectedValues} name="fruits">
+	 *   <CheckboxItem value="apple">Manzana</CheckboxItem>
+	 *   <CheckboxItem value="banana">Banana</CheckboxItem>
+	 *   <CheckboxItem value="orange">Naranja</CheckboxItem>
+	 * </CheckboxGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: unknown[] - Valores seleccionados (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `name`: string - Nombre del grupo para formularios
+	 * - `disabled`: boolean - Deshabilita todo el grupo
+	 * - `required`: boolean - Requiere al menos una selección
+	 * - `readonly`: boolean - Solo lectura
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-checkbox-group]            → Contenedor del grupo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { noop } from "$lib/util/funcs";
 	import {
 		readableActive,
diff --git a/src/uix/terra/checkbox/components/checkbox.svelte b/src/uix/terra/checkbox/components/checkbox.svelte
index 91bdc114f..a94d2e73c 100644
--- a/src/uix/terra/checkbox/components/checkbox.svelte
+++ b/src/uix/terra/checkbox/components/checkbox.svelte
@@ -1,4 +1,49 @@
 <script lang="ts">
+	/**
+	 * # Checkbox Root
+	 *
+	 * Casilla de verificación que puede estar checked, unchecked o indeterminate.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Checkbox
+	 *   bind:checked={agreed}
+	 *   bind:indeterminate={isPartial}
+	 *   disabled={false}
+	 * >
+	 *   Acepto los términos
+	 * </Checkbox>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `checked`: boolean - Estado de selección (bindable)
+	 * - `indeterminate`: boolean - Estado indeterminado (bindable)
+	 * - `onCheckedChange`: Callback cuando cambia checked
+	 * - `onIndeterminateChange`: Callback cuando cambia indeterminate
+	 * - `disabled`: boolean - Deshabilita el checkbox
+	 * - `required`: boolean - Requerido para formularios
+	 * - `readonly`: boolean - Solo lectura
+	 * - `name`: string - Nombre para formularios
+	 * - `value`: string - Valor para formularios
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `checked`: boolean - Estado actual
+	 * - `indeterminate`: boolean - Estado indeterminado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-checkbox]                  → Root (botón principal)
+	 * [data-state="checked"]            → Checkbox marcado
+	 * [data-state="unchecked"]          → Checkbox desmarcado
+	 * [data-state="indeterminate"]      → Checkbox indeterminado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button role="checkbox">`.
+	 */
 	import { noop } from "$lib/util/funcs";
 	import {
 		readableActive,
diff --git a/src/uix/terra/collapsible/components/collapsible-content.svelte b/src/uix/terra/collapsible/components/collapsible-content.svelte
index 91e3662d8..b32584e4c 100644
--- a/src/uix/terra/collapsible/components/collapsible-content.svelte
+++ b/src/uix/terra/collapsible/components/collapsible-content.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Collapsible Content
+	 *
+	 * Contenido que se muestra/oculta según el estado del Collapsible.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Collapsible bind:open={isOpen}>
+	 *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+	 *   <CollapsibleContent>
+	 *     <p>Este contenido se expande/colapsa</p>
+	 *   </CollapsibleContent>
+	 * </Collapsible>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Monta siempre el contenido (útil para transiciones)
+	 * - `hiddenUntilFound`: boolean - Permite búsqueda del navegador
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura del contenido
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-collapsible-content]        → Contenido colapsable
+	 * [data-state="open"]               → Estado abierto
+	 * [data-state="closed"]             → Estado cerrado
+	 * [data-disabled]                  → Hereda disabled del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos ARIA apropiados.
+	 */
 	import {
 		mergeProps,
 		readableActive,
diff --git a/src/uix/terra/collapsible/components/collapsible-trigger.svelte b/src/uix/terra/collapsible/components/collapsible-trigger.svelte
index 0dbf79768..f60a02a2e 100644
--- a/src/uix/terra/collapsible/components/collapsible-trigger.svelte
+++ b/src/uix/terra/collapsible/components/collapsible-trigger.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Collapsible Trigger
+	 *
+	 * Botón que alterna el estado de apertura del Collapsible.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Collapsible bind:open={isOpen}>
+	 *   <CollapsibleTrigger>
+	 *     {#if isOpen} ▲ {:else} ▼ {/if}
+	 *     Toggle
+	 *   </CollapsibleTrigger>
+	 *   <CollapsibleContent>...</CollapsibleContent>
+	 * </Collapsible>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-collapsible-trigger]        → Botón trigger
+	 * [data-state="open"]               → Estado abierto del collapsible
+	 * [data-state="closed"]             → Estado cerrado del collapsible
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` con atributos ARIA apropiados.
+	 */
 	import {
 		readableActive,
 		writableActive,
diff --git a/src/uix/terra/collapsible/components/collapsible.svelte b/src/uix/terra/collapsible/components/collapsible.svelte
index c9743a238..1bb4d72d5 100644
--- a/src/uix/terra/collapsible/components/collapsible.svelte
+++ b/src/uix/terra/collapsible/components/collapsible.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Collapsible Root
+	 *
+	 * Componente colapsable que puede mostrar/ocultar contenido.
+	 * Más simple que Accordion, ideal para toggle único.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Collapsible bind:open={isOpen}>
+	 *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+	 *   <CollapsibleContent>
+	 *     <p>Contenido que se muestra/oculta</p>
+	 *   </CollapsibleContent>
+	 * </Collapsible>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado de apertura (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `disabled`: boolean - Deshabilita el colapsable
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-collapsible]                → Contenedor root
+	 * [data-state="open"]               → Estado abierto
+	 * [data-state="closed"]             → Estado cerrado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { noop } from "$lib/util/funcs";
 	import {
 		readableActive,
diff --git a/src/uix/terra/color-picker/components/color-picker-alpha-slider.svelte b/src/uix/terra/color-picker/components/color-picker-alpha-slider.svelte
index 79d6fc17c..c1bcec831 100644
--- a/src/uix/terra/color-picker/components/color-picker-alpha-slider.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-alpha-slider.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Alpha Slider
+	 *
+	 * Slider horizontal para seleccionar la transparencia (alpha) del color (0 a 1).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerAlphaSlider />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Comportamiento
+	 * - Soporta interacción con mouse y touch
+	 * - Navegable con teclado (flechas izquierda/derecha)
+	 * - Muestra un patrón de cuadros para indicar transparencia
+	 * - El fondo usa `--cp-alpha-bg` para mostrar el color con alpha
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-color-picker-alpha-slider]   → Slider de transparencia (alpha) del color
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="slider".
+	 */
 	import { ColorPickerAlphaSliderState } from "../color-picker.svelte";
 	import type { ColorPickerAlphaSliderProps } from "../types";
 
diff --git a/src/uix/terra/color-picker/components/color-picker-area-thumb.svelte b/src/uix/terra/color-picker/components/color-picker-area-thumb.svelte
index d7147fc0c..5339d91cc 100644
--- a/src/uix/terra/color-picker/components/color-picker-area-thumb.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-area-thumb.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Area Thumb
+	 *
+	 * Indicador visual de la posición actual en el área de color.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerArea>
+	 *   <ColorPickerAreaThumb />
+	 * </ColorPickerArea>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Comportamiento
+	 * - Posicionado con `left` y `top` según la saturación y brillo
+	 * - Soporta navegación con flechas del teclado
+	 * - Usa Shift+flechas para movimientos de 10 unidades
+	 * - Color disponible como `--cp-thumb-color`
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-color-picker-area-thumb]     → Indicador visual de posición en el área de color
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="slider".
+	 */
 	import { ColorPickerAreaState, ColorPickerRootState } from "../color-picker.svelte";
 	import type { ColorPickerAreaThumbProps } from "../types";
 
diff --git a/src/uix/terra/color-picker/components/color-picker-area.svelte b/src/uix/terra/color-picker/components/color-picker-area.svelte
index f985d482d..63c13ac88 100644
--- a/src/uix/terra/color-picker/components/color-picker-area.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-area.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Area
+	 *
+	 * Área de selección de saturación y brillo del color.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerArea>
+	 *   <ColorPickerAreaThumb />
+	 * </ColorPickerArea>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * No aplica selectores de datos específicos.
+	 * Use el elemento con role="presentation" para aplicar estilos.
+	 * ```
+	 *
+	 * ## CSS Variables
+	 * ```
+	 * --cp-area-bg                   → Color de fondo (HSL del tono actual)
+	 * ```
+	 *
+	 * ## Comportamiento
+	 * - Soporta interacción con mouse y touch
+	 * - Mantiene el color de fondo con `--cp-area-bg`
+	 * - Actualiza saturación y brillo del color seleccionado
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="presentation".
+	 */
 	import { ColorPickerAreaState } from "../color-picker.svelte";
 	import type { ColorPickerAreaProps } from "../types";
 
diff --git a/src/uix/terra/color-picker/components/color-picker-content.svelte b/src/uix/terra/color-picker/components/color-picker-content.svelte
index 8f719e2d1..9071b6cb9 100644
--- a/src/uix/terra/color-picker/components/color-picker-content.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-content.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Content
+	 *
+	 * Contenedor del panel del selector de color.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerContent>
+	 *   <ColorPickerArea>
+	 *     <ColorPickerAreaThumb />
+	 *   </ColorPickerArea>
+	 *   <ColorPickerHueSlider />
+	 *   <ColorPickerAlphaSlider />
+	 *   <ColorPickerInput />
+	 * </ColorPickerContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * No aplica selectores de datos específicos.
+	 * Use el elemento contenedor con role="dialog" para aplicar estilos.
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="dialog".
+	 */
 	import type { ColorPickerContentProps } from "../types";
 
 	let {
diff --git a/src/uix/terra/color-picker/components/color-picker-eyedropper.svelte b/src/uix/terra/color-picker/components/color-picker-eyedropper.svelte
index 731de1936..fcc6c59c6 100644
--- a/src/uix/terra/color-picker/components/color-picker-eyedropper.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-eyedropper.svelte
@@ -1,4 +1,32 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Eye Dropper
+	 *
+	 * Botón para abrir la herramienta de selección de color del navegador.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerEyeDropper>
+	 *   <EyeDropperIcon />
+	 * </ColorPickerEyeDropper>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 * - `children`: Snippet - Contenido del botón
+	 *
+	 * ## Comportamiento
+	 * - Solo se renderiza si el navegador soporta la API EyeDropper
+	 * - Al hacer clic, abre el selector de color del sistema
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-color-picker-eyedropper]     → Botón para abrir la herramienta de selección de color
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` si es soportado.
+	 */
 	import { ColorPickerEyeDropperState } from "../color-picker.svelte";
 	import type { ColorPickerEyeDropperProps } from "../types";
 
diff --git a/src/uix/terra/color-picker/components/color-picker-hue-slider.svelte b/src/uix/terra/color-picker/components/color-picker-hue-slider.svelte
index 0fc582c1c..1cb422636 100644
--- a/src/uix/terra/color-picker/components/color-picker-hue-slider.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-hue-slider.svelte
@@ -1,4 +1,30 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Hue Slider
+	 *
+	 * Slider horizontal para seleccionar el matiz (hue) del color (0° a 360°).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerHueSlider />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Comportamiento
+	 * - Soporta interacción con mouse y touch
+	 * - Navegable con teclado (flechas izquierda/derecha)
+	 * - El thumb se posiciona según el valor actual de hue
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-color-picker-hue-slider]     → Slider de matiz (hue) del color
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="slider".
+	 */
 	import { ColorPickerHueSliderState } from "../color-picker.svelte";
 	import type { ColorPickerHueSliderProps } from "../types";
 
diff --git a/src/uix/terra/color-picker/components/color-picker-input.svelte b/src/uix/terra/color-picker/components/color-picker-input.svelte
index 9a57442f6..9e754cd7b 100644
--- a/src/uix/terra/color-picker/components/color-picker-input.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-input.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Input
+	 *
+	 * Campo de texto para ingresar/editar el valor del color.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerInput format="hex" />
+	 * <ColorPickerInput format="rgb" />
+	 * <ColorPickerInput format="hsl" />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `format`: "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" - Formato del color
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * No aplica selectores de datos específicos.
+	 * Use el elemento input[type="text"] para aplicar estilos.
+	 * ```
+	 *
+	 * ## Comportamiento
+	 * - Actualiza el color al escribir y presionar Enter o perder foco
+	 * - Muestra el color actual en el formato especificado
+	 * - Valida el formato antes de aplicar cambios
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<input type="text">`.
+	 */
 	import { readableActive } from '$terra/utils';
 	import { ColorPickerInputState } from "../color-picker.svelte";
 	import type { ColorPickerInputProps } from "../types";
diff --git a/src/uix/terra/color-picker/components/color-picker-root.svelte b/src/uix/terra/color-picker/components/color-picker-root.svelte
index 423894802..95e42e125 100644
--- a/src/uix/terra/color-picker/components/color-picker-root.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-root.svelte
@@ -1,4 +1,41 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Root
+	 *
+	 * Componente raíz del selector de color que gestiona el estado del color seleccionado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPicker
+	 *   bind:value={selectedColor}
+	 *   format="hex"
+	 * >
+	 *   <ColorPickerTrigger>
+	 *     <div class="color-preview" />
+	 *   </ColorPickerTrigger>
+	 *   <ColorPickerContent>
+	 *     <ColorPickerArea>
+	 *       <ColorPickerAreaThumb />
+	 *     </ColorPickerArea>
+	 *     <ColorPickerHueSlider />
+	 *     <ColorPickerAlphaSlider />
+	 *   </ColorPickerContent>
+	 * </ColorPicker>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: ColorValue - Color seleccionado
+	 * - `defaultValue`: ColorValue - Color inicial
+	 * - `onValueChange`: Callback cuando cambia el color
+	 * - `disabled`: boolean - Deshabilita el selector
+	 * - `format`: "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" - Formato del color
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * No aplica selectores de datos específicos.
+	 * Use el elemento contenedor para aplicar estilos.
+	 * ```
+	 */
 	import { readableActive } from '$terra/utils';
 	import { ColorPickerRootState } from "../color-picker.svelte";
 	import type { ColorPickerRootProps } from "../types";
diff --git a/src/uix/terra/color-picker/components/color-picker-swatch.svelte b/src/uix/terra/color-picker/components/color-picker-swatch.svelte
index e85759f61..d4b25f80b 100644
--- a/src/uix/terra/color-picker/components/color-picker-swatch.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-swatch.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Swatch
+	 *
+	 * Muestra un color predefinido como opción seleccionable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerSwatch
+	 *   color="#ff0000"
+	 *   selected={selectedColor === '#ff0000'}
+	 *   onselect={() => selectColor('#ff0000')}
+	 * />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `color`: string - Color en formato hex
+	 * - `selected`: boolean - Si está seleccionado
+	 * - `onselect`: Callback al seleccionar
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-color-picker-swatch]         → Muestra un color predefinido como opción seleccionable
+	 * [data-selected]                    → Estado cuando está seleccionado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` con role="radio".
+	 * El color está disponible como `--cp-swatch-color`.
+	 */
 	import type { ColorPickerSwatchProps } from "../types";
 
 	let {
diff --git a/src/uix/terra/color-picker/components/color-picker-swatches.svelte b/src/uix/terra/color-picker/components/color-picker-swatches.svelte
index 2cba7fb7f..acc77f632 100644
--- a/src/uix/terra/color-picker/components/color-picker-swatches.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-swatches.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Swatches
+	 *
+	 * Contenedor de muestras de colores predefinidos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPickerSwatches
+	 *   colors={['#ff0000', '#00ff00', '#0000ff']}
+	 *   onSelect={(color) => setColor(color)}
+	 * />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `colors`: string[] - Array de colores en formato hex
+	 * - `onSelect`: (color: string) => void - Callback al seleccionar
+	 * - `class`: string - Clases CSS adicionales
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * No aplica selectores de datos específicos.
+	 * Use el elemento con role="group" para aplicar estilos.
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="group".
+	 */
 	import { readableActive } from '$terra/utils';
 	import { ColorPickerSwatchesState } from "../color-picker.svelte";
 	import type { ColorPickerSwatchesProps } from "../types";
diff --git a/src/uix/terra/color-picker/components/color-picker-trigger.svelte b/src/uix/terra/color-picker/components/color-picker-trigger.svelte
index 6e542855d..9612057c4 100644
--- a/src/uix/terra/color-picker/components/color-picker-trigger.svelte
+++ b/src/uix/terra/color-picker/components/color-picker-trigger.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Color Picker Trigger
+	 *
+	 * Botón que abre/cierra el panel del selector de color.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ColorPicker bind:value={color}>
+	 *   <ColorPickerTrigger showColor={true}>
+	 *     <div class="preview" />
+	 *   </ColorPickerTrigger>
+	 *   <ColorPickerContent>...</ColorPickerContent>
+	 * </ColorPicker>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `showColor`: boolean - Muestra el color como CSS variable `--cp-trigger-color`
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## CSS Variables
+	 * ```
+	 * --cp-trigger-color              → Color actual en formato HEX
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`. Usa `data-disabled` cuando está deshabilitado.
+	 */
 	import { ColorPickerRootState } from "../color-picker.svelte";
 	import type { ColorPickerTriggerProps } from "../types";
 
diff --git a/src/uix/terra/combobox/components/combobox-input.svelte b/src/uix/terra/combobox/components/combobox-input.svelte
index 962551596..2260bdb7f 100644
--- a/src/uix/terra/combobox/components/combobox-input.svelte
+++ b/src/uix/terra/combobox/components/combobox-input.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Combobox Input
+	 *
+	 * Campo de texto para buscar y filtrar las opciones del combobox.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Combobox bind:inputValue={search}>
+	 *   <ComboboxInput
+	 *     placeholder="Buscar..."
+	 *     defaultValue=""
+	 *   />
+	 *   <ComboboxContent>...</ComboboxContent>
+	 * </Combobox>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `defaultValue`: string - Valor inicial del input
+	 * - `clearOnDeselect`: boolean - Limpia el input al deseleccionar
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-combobox-input]               → Input de texto del combobox
+	 * [data-state="open"]                 → Estado del combobox abierto
+	 * [data-state="closed"]               → Estado del combobox cerrado
+	 * [data-disabled]                     → Input deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<input>` sincronizado con el `inputValue` del Combobox.
+	 */
 	import {
 		mergeProps,
 		readableActive,
diff --git a/src/uix/terra/combobox/components/combobox-trigger.svelte b/src/uix/terra/combobox/components/combobox-trigger.svelte
index 97813b574..6851439d2 100644
--- a/src/uix/terra/combobox/components/combobox-trigger.svelte
+++ b/src/uix/terra/combobox/components/combobox-trigger.svelte
@@ -1,4 +1,32 @@
 <script lang="ts">
+	/**
+	 * # Combobox Trigger
+	 *
+	 * Botón que abre/cierra el menú desplegable del combobox.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Combobox>
+	 *   <ComboboxInput />
+	 *   <ComboboxTrigger>
+	 *     <ChevronIcon />
+	 *   </ComboboxTrigger>
+	 *   <ComboboxContent>...</ComboboxContent>
+	 * </Combobox>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: string - Tipo de botón (default: "button")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-combobox-trigger]         → Botón que abre/cierra el menú
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import {
 		mergeProps,
 		readableActive,
diff --git a/src/uix/terra/combobox/components/combobox.svelte b/src/uix/terra/combobox/components/combobox.svelte
index 76fe007de..cccb36b44 100644
--- a/src/uix/terra/combobox/components/combobox.svelte
+++ b/src/uix/terra/combobox/components/combobox.svelte
@@ -1,4 +1,50 @@
 <script lang="ts">
+	/**
+	 * # Combobox Root
+	 *
+	 * Combina un input de texto con un menú desplegable para selección con búsqueda.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Combobox
+	 *   type="single"
+	 *   bind:value={selectedValue}
+	 *   bind:inputValue={searchText}
+	 *   bind:open={isOpen}
+	 *   items={options}
+	 * >
+	 *   <ComboboxInput placeholder="Buscar..." />
+	 *   <ComboboxTrigger>▼</ComboboxTrigger>
+	 *   <ComboboxContent>
+	 *     <!-- items del menú -->
+	 *   </ComboboxContent>
+	 * </Combobox>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple" - Tipo de selección
+	 * - `value`: string | string[] - Valor(es) seleccionado(s) (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `inputValue`: string - Texto del input (bindable)
+	 * - `open`: boolean - Estado del menú (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado del menú
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `name`: string - Nombre para formularios
+	 * - `disabled`: boolean - Deshabilita el combobox
+	 * - `required`: boolean - Requiere selección
+	 * - `loop`: boolean - Navegación cíclica
+	 * - `scrollAlignment`: "nearest" | "center" - Alineación del scroll
+	 * - `items`: unknown[] - Items disponibles para filtrar
+	 * - `allowDeselect`: boolean - Permite deseleccionar
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-combobox-input]               → Input de texto del combobox
+	 * [data-state="open"]                 → Estado del combobox abierto
+	 * [data-state="closed"]               → Estado del combobox cerrado
+	 * [data-disabled]                     → Combobox deshabilitado
+	 * ```
+	 */
 	import FloatingLayer from '../../layers/floating/components/floating-layer.svelte';
 	import { readableActive, writableActive, type State } from "$terra/utils";
 	import { SelectRootState } from '../../select/select.svelte';
diff --git a/src/uix/terra/command/components/_command-label.svelte b/src/uix/terra/command/components/_command-label.svelte
index cbccf3e3e..037167c44 100644
--- a/src/uix/terra/command/components/_command-label.svelte
+++ b/src/uix/terra/command/components/_command-label.svelte
@@ -1,23 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Command Label
+	 *
+	 * Etiqueta accesible para el paleta de comandos.
+	 * Usado internamente por el componente Command.
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-label]               → Etiqueta accesible para el paleta de comandos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<label>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import { CommandLabe$state } from "../command.svelte";
 		import type { TerraPrimitiveLabelAttributes } from "../../utils/attributes";
 	import type { WithChildren } from "../../utils/types";
 
 	let {
-		id = useId(),
-		ref = $bindable(null),
-		children,
-		...restProps
-	}: WithChildren<TerraPrimitiveLabelAttributes & { ref?: HTMLLabelElement | null }> = $props();
+	id = useId(),
+	ref = $bindable(null),
+	children,
+	...restProps
+}: WithChildren<TerraPrimitiveLabelAttributes & { ref?: HTMLLabelElement | null }> = $props();
 
 	const labe$state = CommandLabe$state.create({
-		id: readableActive(() => id),
-		ref: writableActive(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
+	id: readableActive(() => id),
+	ref: writableActive(
+		() => ref,
+		(v) => (ref = v)
+	),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, labe$state.props));
 </script>
diff --git a/src/uix/terra/command/components/command-empty.svelte b/src/uix/terra/command/components/command-empty.svelte
index 3d5518c9e..388719521 100644
--- a/src/uix/terra/command/components/command-empty.svelte
+++ b/src/uix/terra/command/components/command-empty.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Command Empty
+	 *
+	 * Se muestra cuando no hay resultados de búsqueda.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandList>
+	 *   <CommandEmpty>
+	 *     No se encontraron resultados para "{search}"
+	 *   </CommandEmpty>
+	 *   <CommandGroup>...</CommandGroup>
+	 * </CommandList>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Solo se muestra cuando la búsqueda no coincide con ningún item
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-empty]               → Mensaje sin resultados
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandEmptyProps } from "../types";
 	import { CommandEmptyState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-group-heading.svelte b/src/uix/terra/command/components/command-group-heading.svelte
index b358c9e03..7c1eb5a3d 100644
--- a/src/uix/terra/command/components/command-group-heading.svelte
+++ b/src/uix/terra/command/components/command-group-heading.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # Command Group Heading
+	 *
+	 * Encabezado opcional para un grupo de comandos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandGroup>
+	 *   <CommandGroupHeading>Archivos</CommandGroupHeading>
+	 *   <CommandItem value="new-file">Nuevo archivo</CommandItem>
+	 *   <CommandItem value="open">Abrir archivo</CommandItem>
+	 * </CommandGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-group-heading]       → Encabezado de un grupo de comandos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { CommandGroupHeadingState } from "../command.svelte";
 	import type { CommandGroupHeadingProps } from "../types";
diff --git a/src/uix/terra/command/components/command-group-items.svelte b/src/uix/terra/command/components/command-group-items.svelte
index fd0c9a0ab..367230a8f 100644
--- a/src/uix/terra/command/components/command-group-items.svelte
+++ b/src/uix/terra/command/components/command-group-items.svelte
@@ -1,24 +1,50 @@
 <script lang="ts">
+/**
+ * # Command Group Items
+ *
+ * Contenedor para los items de un grupo de comandos.
+ *
+ * ## Uso
+ * ```svelte
+ * <CommandGroup>
+ *   <CommandGroupItems>
+ *     <CommandItem value="new-file">Nuevo</CommandItem>
+ *     <CommandItem value="open">Abrir</CommandItem>
+ *   </CommandGroupItems>
+ * </CommandGroup>
+ * ```
+ *
+ * ## Propiedades
+ * - `id`: string - ID del elemento
+ *
+ * ## Selectores CSS
+ * ```
+ * [data-command-group-items]        → Contenedor de items de un grupo de comandos
+ * ```
+ *
+ * ## Estilos
+ * Renderiza un elemento `<div>`.
+ */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { CommandGroupItemsProps } from "../types";
 	import { CommandGroupItemsState } from "../command.svelte";
-	 import { useId } from '$terra/utils';
+		 import { useId } from '$terra/utils';
 
 	let {
-		id = useId(),
-		ref = $bindable(null),
-		children,
-		child,
-		...restProps
-	}: CommandGroupItemsProps = $props();
+	id = useId(),
+	ref = $bindable(null),
+	children,
+	child,
+	...restProps
+}: CommandGroupItemsProps = $props();
 
 	const groupItemsState = CommandGroupItemsState.create({
-		id: readableActive(() => id),
-		ref: writableActive(
-			() => ref,
-			(v) => (ref = v)
-		),
-	});
+	id: readableActive(() => id),
+	ref: writableActive(
+		() => ref,
+		(v) => (ref = v)
+	),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, groupItemsState.props));
 </script>
diff --git a/src/uix/terra/command/components/command-group.svelte b/src/uix/terra/command/components/command-group.svelte
index 955954b09..afe53c8f4 100644
--- a/src/uix/terra/command/components/command-group.svelte
+++ b/src/uix/terra/command/components/command-group.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Command Group
+	 *
+	 * Agrupa items relacionados con un encabezado opcional.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandGroup value="files">
+	 *   <CommandGroupHeading>Archivos</CommandGroupHeading>
+	 *   <CommandItem value="new-file">Nuevo</CommandItem>
+	 *   <CommandItem value="open">Abrir</CommandItem>
+	 * </CommandGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Identificador del grupo
+	 * - `forceMount`: boolean - Muestra siempre (ignora filtro)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Se oculta si todos sus items están filtrados
+	 * - Con `forceMount`, se muestra aunque esté vacío
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-group]               → Contenedor de grupo de comandos relacionados
+	 * [data-hidden]                      → Estado cuando está oculto por filtro
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="group".
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { CommandGroupProps } from "../types";
 	import { CommandGroupContainerState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-input.svelte b/src/uix/terra/command/components/command-input.svelte
index eebff2cd8..19ccc917a 100644
--- a/src/uix/terra/command/components/command-input.svelte
+++ b/src/uix/terra/command/components/command-input.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Command Input
+	 *
+	 * Campo de búsqueda para filtrar los comandos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Command bind:value={search}>
+	 *   <CommandInput
+	 *     placeholder="Escribe un comando..."
+	 *     autofocus={true}
+	 *   />
+	 *   <CommandList>...</CommandList>
+	 * </Command>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor del input (bindable)
+	 * - `autofocus`: boolean - Enfoca el input al montar
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Atajos de teclado
+	 * - Ctrl+J/K: Navegar hacia abajo/arriba (vim bindings)
+	 * - Ctrl+N/P: Navegar hacia abajo/arriba (vim bindings)
+	 * - Flechas: Navegar items
+	 * - Enter: Seleccionar item actual
+	 * - Escape: Limpiar búsqueda
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-input]               → Input de búsqueda del comando
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<input type="text">`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandInputProps } from "../types";
 	import { CommandInputState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-item.svelte b/src/uix/terra/command/components/command-item.svelte
index e4fb6c622..faffe2eb5 100644
--- a/src/uix/terra/command/components/command-item.svelte
+++ b/src/uix/terra/command/components/command-item.svelte
@@ -1,4 +1,47 @@
 <script lang="ts">
+	/**
+	 * # Command Item
+	 *
+	 * Item individual de la lista de comandos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandItem
+	 *   value="new-file"
+	 *   keywords={["create", "add", "file"]}
+	 *   onSelect={() => createNewFile()}
+	 * >
+	 *   <FileIcon />
+	 *   <span>Nuevo archivo</span>
+	 *   <kbd>⌘N</kbd>
+	 * </CommandItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor del item para filtrado
+	 * - `keywords`: string[] - Palabras clave adicionales para búsqueda
+	 * - `onSelect`: () => void - Callback al seleccionar
+	 * - `disabled`: boolean - Deshabilita el item
+	 * - `forceMount`: boolean - Muestra siempre (ignora filtro)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Se filtra según `value` y `keywords`
+	 * - Selecciona con Enter o Click
+	 * - Usa `{#key}` para re-renderizar al cambiar la búsqueda
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-item]                → Item individual del menú
+	 * [data-value]                       → Valor del item para filtrado
+	 * [data-disabled]                    → Item deshabilitado
+	 * [data-selected]                    → Item seleccionado
+	 * [data-group]                       → Grupo al que pertenece el item
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos de selección.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandItemProps } from "../types";
 	import { CommandItemState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-link-item.svelte b/src/uix/terra/command/components/command-link-item.svelte
index e27de8934..6b9c1b0c3 100644
--- a/src/uix/terra/command/components/command-link-item.svelte
+++ b/src/uix/terra/command/components/command-link-item.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Command Link Item
+	 *
+	 * Item de comando que renderiza como enlace (<a>) en lugar de div.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandLinkItem
+	 *   value="docs"
+	 *   href="/docs"
+	 *   keywords={["documentation", "help"]}
+	 * >
+	 *   <BookIcon />
+	 *   <span>Documentación</span>
+	 * </CommandLinkItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor para filtrado
+	 * - `keywords`: string[] - Palabras clave adicionales
+	 * - `onSelect`: () => void - Callback al seleccionar
+	 * - `disabled`: boolean - Deshabilita el item
+	 * - `forceMount`: boolean - Muestra siempre (ignora filtro)
+	 * - `href`: string - URL del enlace
+	 * - Todas las props de HTMLAnchorAttributes
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-link-item]           → Item de comando que renderiza como enlace
+	 * [data-selected]                    → Estado cuando está seleccionado
+	 * [data-disabled]                    → Estado cuando está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<a>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandLinkItemProps } from "../types";
 	import { CommandItemState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-list.svelte b/src/uix/terra/command/components/command-list.svelte
index c32801431..e41631321 100644
--- a/src/uix/terra/command/components/command-list.svelte
+++ b/src/uix/terra/command/components/command-list.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Command List
+	 *
+	 * Contenedor de la lista de comandos filtrados.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Command>
+	 *   <CommandInput />
+	 *   <CommandList aria-label="Opciones disponibles">
+	 *     <CommandEmpty>No hay resultados</CommandEmpty>
+	 *     <CommandGroup>...</CommandGroup>
+	 *   </CommandList>
+	 * </Command>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `aria-label`: string - Etiqueta accesible (default: "Suggestions...")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Se re-renderiza cuando la búsqueda cambia
+	 * - Usa `{#key}` para limpiar el DOM al buscar
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-list]                → Lista de items del comando
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandListProps } from "../types";
 	import { CommandListState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-loading.svelte b/src/uix/terra/command/components/command-loading.svelte
index 05ac76cda..bf3681c4d 100644
--- a/src/uix/terra/command/components/command-loading.svelte
+++ b/src/uix/terra/command/components/command-loading.svelte
@@ -1,4 +1,32 @@
 <script lang="ts">
+	/**
+	 * # Command Loading
+	 *
+	 * Indicador de carga para resultados asíncronos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandList>
+	 *   <CommandLoading progress={loadingProgress}>
+	 *     <Spinner />
+	 *     Cargando resultados...
+	 *   </CommandLoading>
+	 *   <CommandEmpty>No hay resultados</CommandEmpty>
+	 * </CommandList>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `progress`: number - Progreso de carga (0-1)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-loading]             → Indicador de carga para resultados asíncronos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { CommandLoadingProps } from "../types";
 	import { CommandLoadingState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-separator.svelte b/src/uix/terra/command/components/command-separator.svelte
index 8e1ae2151..417bf1fe6 100644
--- a/src/uix/terra/command/components/command-separator.svelte
+++ b/src/uix/terra/command/components/command-separator.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Command Separator
+	 *
+	 * Separador visual entre grupos de comandos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandGroup>...</CommandGroup>
+	 * <CommandSeparator />
+	 * <CommandGroup>...</CommandGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Solo se muestra cuando hay búsqueda activa
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-separator]           → Separador visual entre grupos de comandos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="separator".
+	 */
 	import { readableActive, writableActive, mergeProps, useId} from "$terra/utils";
 	import type { CommandSeparatorProps } from "../types";
 	import { CommandSeparatorState } from "../command.svelte";
diff --git a/src/uix/terra/command/components/command-viewport.svelte b/src/uix/terra/command/components/command-viewport.svelte
index 4d3fd6aca..5400a0b70 100644
--- a/src/uix/terra/command/components/command-viewport.svelte
+++ b/src/uix/terra/command/components/command-viewport.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Command Viewport
+	 *
+	 * Viewport para virtualización de lista larga de comandos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <CommandList>
+	 *   <CommandViewport>
+	 *     {#each items as item}
+	 *       <CommandItem value={item.id}>{item.label}</CommandItem>
+	 *     {/each}
+	 *   </CommandViewport>
+	 * </CommandList>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command-viewport]            → Viewport de virtualización de comandos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import { CommandViewportState } from "../command.svelte";
 	import type { CommandViewportProps } from "../types";
diff --git a/src/uix/terra/command/components/command.svelte b/src/uix/terra/command/components/command.svelte
index b2c891ed1..8ca3f300c 100644
--- a/src/uix/terra/command/components/command.svelte
+++ b/src/uix/terra/command/components/command.svelte
@@ -1,4 +1,56 @@
 <script lang="ts">
+	/**
+	 * # Command Root
+	 *
+	 * Componente de paleta de comandos typeahead similar a Cmd+K de VS Code.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Command bind:value={search}>
+	 *   <CommandInput placeholder="Buscar..." />
+	 *   <CommandList>
+	 *     <CommandEmpty>No se encontraron resultados</CommandEmpty>
+	 *     <CommandGroup heading="Archivos">
+	 *       <CommandItem value="new-file">Nuevo archivo</CommandItem>
+	 *       <CommandItem value="open">Abrir</CommandItem>
+	 *     </CommandGroup>
+	 *   </CommandList>
+	 * </Command>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Texto de búsqueda (bindable)
+	 * - `onValueChange`: Callback cuando cambia la búsqueda
+	 * - `onStateChange`: Callback cuando cambia el estado interno
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `shouldFilter`: boolean - Si debe filtrar automáticamente
+	 * - `filter`: (value: string, search: string) => number - Función de puntuación
+	 * - `label`: string - Etiqueta accesible
+	 * - `vimBindings`: boolean - Habilita atajos de vim (Ctrl+J/K/N/P)
+	 * - `disablePointerSelection`: boolean - Deshabilita selección por mouse
+	 * - `disableInitialScroll`: boolean - Deshabilita scroll inicial al seleccionado
+	 * - `columns`: number - Número de columnas para grid
+	 *
+	 * ## APIs Imperativas
+	 * - `updateSelectedToIndex(index)` - Selecciona item por índice
+	 * - `updateSelectedByGroup(group)` - Selecciona primer item de grupo
+	 * - `updateSelectedByItem(item)` - Selecciona item específico
+	 * - `getValidItems()` - Obtiene items filtrados
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-command]                     → Contenedor raíz del comando
+	 * [data-command-input]               → Input de búsqueda
+	 * [data-command-list]                → Lista de items
+	 * [data-command-item]                → Item individual del menú
+	 * [data-value]                       → Valor del item para filtrado
+	 * [data-disabled]                    → Item deshabilitado
+	 * [data-selected]                    → Item seleccionado
+	 * [data-group]                       → Grupo al que pertenece el item
+	 * [data-command-separator]           → Separador visual
+	 * [data-command-empty]               → Mensaje sin resultados
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import { CommandRootState } from "../command.svelte";
 	import type { CommandRootProps } from "../types";
diff --git a/src/uix/terra/config/components/terra-config.svelte b/src/uix/terra/config/components/terra-config.svelte
index 36f7c972c..08c0970b9 100644
--- a/src/uix/terra/config/components/terra-config.svelte
+++ b/src/uix/terra/config/components/terra-config.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # TerraConfig
+	 *
+	 * Componente proveedor de configuración global para componentes Terra.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * Este componente no renderiza elementos HTML ni agrega atributos data.
+	 * Es un componente proveedor de contexto que solo pasa configuración
+	 * a sus componentes descendientes.
+	 * ```
+	 */
 	import type { TerraConfigProps } from '../types.ts';
 	import { useTerraConfig } from '../terra-config.ts';
 	import { readableActive } from '$terra/utils';
diff --git a/src/uix/terra/context-menu/components/context-menu-content.svelte b/src/uix/terra/context-menu/components/context-menu-content.svelte
index 5d2f25511..c9ccf5c2a 100644
--- a/src/uix/terra/context-menu/components/context-menu-content.svelte
+++ b/src/uix/terra/context-menu/components/context-menu-content.svelte
@@ -1,4 +1,49 @@
 <script lang="ts">
+	/**
+	 * # Context Menu Content
+	 *
+	 * Contenedor del menú contextual con items.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ContextMenuContent
+	 *   side="right"
+	 *   align="start"
+	 *   sideOffset={4}
+	 * >
+	 *   <ContextMenuItem value="copy">Copiar</ContextMenuItem>
+	 *   <ContextMenuSeparator />
+	 *   <ContextMenuItem value="paste">Pegar</ContextMenuItem>
+	 * </ContextMenuContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición del menú
+	 * - `align`: "start" | "center" | "end" - Alineación del menú
+	 * - `sideOffset`: number - Distancia desde el trigger
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `avoidCollisions`: boolean - Evita colisiones con bordes
+	 * - `collisionPadding`: number - Padding para detección de colisiones
+	 * - `arrowPadding`: number - Padding para la flecha
+	 * - `sticky`: "partial" | "always" - Comportamiento sticky
+	 * - `hideWhenDetached`: boolean - Oculta si está detached
+	 * - `strategy`: "absolute" | "fixed" - Estrategia de posicionamiento
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onCloseAutoFocus`: Callback al cerrar y reenfocar
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-context-menu-content]       → Contenedor del menú contextual
+	 * [data-state="open"]               → Estado del menú abierto
+	 * [data-state="closed"]             → Estado del menú cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` anidado dentro de otro para posicionamiento.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { ContextMenuContentProps } from '../types';
 	import { CONTEXT_MENU_TRIGGER_ATTR, MenuContentState } from '../../menu/menu.svelte';
@@ -47,7 +92,7 @@
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		if (e.target && e.target instanceof Element) {
-			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr('sub-content')}]`;
+			const subContentSelector = `[${contentState.parentMenu.root.getTerraAttr('sub-content')}]`;
 			if (e.target.closest(subContentSelector)) return;
 		}
 		contentState.parentMenu.onClose();
diff --git a/src/uix/terra/context-menu/components/context-menu-trigger.svelte b/src/uix/terra/context-menu/components/context-menu-trigger.svelte
index 733d53e8a..80c822314 100644
--- a/src/uix/terra/context-menu/components/context-menu-trigger.svelte
+++ b/src/uix/terra/context-menu/components/context-menu-trigger.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Context Menu Trigger
+	 *
+	 * Área que al hacer clic derecho abre el menú contextual.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ContextMenu>
+	 *   <ContextMenuTrigger disabled={false}>
+	 *     <div>Clic derecho aquí</div>
+	 *   </ContextMenuTrigger>
+	 *   <ContextMenuContent>...</ContextMenuContent>
+	 * </ContextMenu>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Abre el menú con clic derecho
+	 * - Posiciona el menú en la posición del cursor
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-context-menu-trigger]       → Área que abre el menú al clic derecho
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` con `pointerEvents: auto`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { ContextMenuTriggerProps } from '../types';
 	import { ContextMenuTriggerState } from '../../menu/menu.svelte';
diff --git a/src/uix/terra/context-menu/components/context-menu.svelte b/src/uix/terra/context-menu/components/context-menu.svelte
index cf86eaeeb..9579546af 100644
--- a/src/uix/terra/context-menu/components/context-menu.svelte
+++ b/src/uix/terra/context-menu/components/context-menu.svelte
@@ -1,4 +1,40 @@
 <script lang="ts">
+	/**
+	 * # Context Menu Root
+	 *
+	 * Menú contextual que se abre al hacer clic derecho sobre un elemento.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ContextMenu bind:open={isOpen}>
+	 *   <ContextMenuTrigger>
+	 *     <div>Clic derecho para abrir</div>
+	 *   </ContextMenuTrigger>
+	 *   <ContextMenuContent>
+	 *     <ContextMenuItem>Copiar</ContextMenuItem>
+	 *     <ContextMenuItem>Cortar</ContextMenuItem>
+	 *     <ContextMenuItem>Pegar</ContextMenuItem>
+	 *   </ContextMenuContent>
+	 * </ContextMenu>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado del menú (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `dir`: "ltr" | "rtl" - Dirección del texto
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-context-menu-content]       → Contenedor del menú contextual
+	 * [data-state="open"]               → Estado del menú abierto
+	 * [data-state="closed"]             → Estado del menú cerrado
+	 * [data-context-menu-item]          → Item individual del menú
+	 * [data-highlighted]                → Item resaltado (hover/foco)
+	 * [data-disabled]                   → Item deshabilitado
+	 * [data-context-menu-separator]     → Separador visual entre items
+	 * ```
+	 */
 	import { readableActive, writableActive }  from '$terra/utils';
 	import type { ContextMenuRootProps } from '../types';
 	import FloatingLayer from '../../layers/floating/components/floating-layer.svelte';
diff --git a/src/uix/terra/date-field/components/date-field-hidden-input.svelte b/src/uix/terra/date-field/components/date-field-hidden-input.svelte
index cd0fb9732..04c52b2ab 100644
--- a/src/uix/terra/date-field/components/date-field-hidden-input.svelte
+++ b/src/uix/terra/date-field/components/date-field-hidden-input.svelte
@@ -1,4 +1,17 @@
 <script lang="ts">
+	/**
+	 * # Date Field Hidden Input
+	 *
+	 * Input oculto para el campo de fecha.
+	 *
+	 * ## Uso
+	 * Se utiliza internamente por DateField.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-field-hidden-input] → Input oculto para formularios
+	 * ```
+	 */
 	import { DateFieldHiddenInputState } from "../date-field.svelte.js";
 	import HiddenInput from "../../layers/hidden-input.svelte";
 
diff --git a/src/uix/terra/date-field/components/date-field-input.svelte b/src/uix/terra/date-field/components/date-field-input.svelte
index f5d8bdc56..22dc125c5 100644
--- a/src/uix/terra/date-field/components/date-field-input.svelte
+++ b/src/uix/terra/date-field/components/date-field-input.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # DateField Input
+	 *
+	 * Contenedor de entrada para los segmentos del campo de fecha.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-field-input]          → Contenedor de entrada
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { DateFieldInputState } from "../date-field.svelte.js";
 	import type { DateFieldInputProps } from "../types.js";
diff --git a/src/uix/terra/date-field/components/date-field-label.svelte b/src/uix/terra/date-field/components/date-field-label.svelte
index 3f6b3937f..a51686c6a 100644
--- a/src/uix/terra/date-field/components/date-field-label.svelte
+++ b/src/uix/terra/date-field/components/date-field-label.svelte
@@ -1,4 +1,22 @@
 <script lang="ts">
+	/**
+	 * # Date Field Label
+	 *
+	 * Etiqueta para el campo de fecha.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DateField>
+	 *   <DateFieldLabel>Fecha de nacimiento</DateFieldLabel>
+	 *   <DateFieldInput />
+	 * </DateField>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-field-label]        → Etiqueta del campo de fecha
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { DateFieldLabelState } from "../date-field.svelte.js";
 	import type { DateFieldLabelProps } from "../types.js";
diff --git a/src/uix/terra/date-field/components/date-field-segment.svelte b/src/uix/terra/date-field/components/date-field-segment.svelte
index dee6d12db..695d50761 100644
--- a/src/uix/terra/date-field/components/date-field-segment.svelte
+++ b/src/uix/terra/date-field/components/date-field-segment.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # DateField Segment
+	 *
+	 * Segmento individual del campo de fecha (día, mes, año, hora, minuto, segundo).
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-field-segment]        → Segmento individual
+	 * [data-readonly]                  → Presente cuando el segmento es readonly
+	 * [data-invalid]                  → Presente cuando el segmento es inválido
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { DateFieldSegmentState } from "../date-field.svelte.js";
 	import type { DateFieldSegmentProps } from "../types.js";
diff --git a/src/uix/terra/date-field/components/date-field.svelte b/src/uix/terra/date-field/components/date-field.svelte
index e176f50dc..099192c70 100644
--- a/src/uix/terra/date-field/components/date-field.svelte
+++ b/src/uix/terra/date-field/components/date-field.svelte
@@ -1,4 +1,20 @@
 <script lang="ts">
+	/**
+	 * # DateField Root
+	 *
+	 * Componente de campo de fecha con segmentos editables.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-field]                → Contenedor raíz
+	 * [data-date-field-input]          → Entrada del campo
+	 * [data-date-field-label]          → Etiqueta del campo
+	 * [data-date-field-segment]        → Segmento individual (día, mes, año, etc.)
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-invalid]                  → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive } from '$terra/utils';
 	import { DateFieldRootState } from "../date-field.svelte.js";
diff --git a/src/uix/terra/date-picker/components/date-picker-calendar.svelte b/src/uix/terra/date-picker/components/date-picker-calendar.svelte
index 5fc951414..534616c5e 100644
--- a/src/uix/terra/date-picker/components/date-picker-calendar.svelte
+++ b/src/uix/terra/date-picker/components/date-picker-calendar.svelte
@@ -1,4 +1,24 @@
 <script lang="ts">
+	/**
+	 * # Date Picker Calendar
+	 *
+	 * Componente de calendario utilizado dentro del DatePicker.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DatePicker>
+	 *   <DatePickerTrigger />
+	 *   <DatePickerContent>
+	 *     <DatePickerCalendar />
+	 *   </DatePickerContent>
+	 * </DatePicker>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-picker-calendar]    → Contenedor del calendario del date picker
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId }  from '$terra/utils';
 	import type { DatePickerCalendarProps } from '../types.ts';
 	import { DatePickerRootState } from '../date-picker.svelte.ts';
diff --git a/src/uix/terra/date-picker/components/date-picker-trigger.svelte b/src/uix/terra/date-picker/components/date-picker-trigger.svelte
index 9a22fe1b8..af3921b75 100644
--- a/src/uix/terra/date-picker/components/date-picker-trigger.svelte
+++ b/src/uix/terra/date-picker/components/date-picker-trigger.svelte
@@ -1,4 +1,24 @@
 <script lang="ts">
+	/**
+	 * # Date Picker Trigger
+	 *
+	 * Botón que abre el calendario del DatePicker.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DatePicker>
+	 *   <DatePickerTrigger />
+	 *   <DatePickerContent>
+	 *     <DatePickerCalendar />
+	 *   </DatePickerContent>
+	 * </DatePicker>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-picker-trigger]     → Botón que abre el calendario
+	 * ```
+	 */
 	import { mergeProps } from '$terra/utils';
 	import type { DatePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
@@ -12,7 +32,7 @@
 	function onKeydown(e: KeyboardEvent) {
 		if (isSegmentNavigationKey(e.key)) {
 			const currNode = e.currentTarget as HTMLElement;
-			const datePickerRootNode = currNode.closest('[data-date-picker-root]') as HTMLElement;
+			const datePickerRootNode = currNode.closest('[data-date-picker]') as HTMLElement;
 			if (!datePickerRootNode) return;
 			handleSegmentNavigation(e, datePickerRootNode);
 		}
diff --git a/src/uix/terra/date-picker/components/date-picker.svelte b/src/uix/terra/date-picker/components/date-picker.svelte
index a89901298..e468c416c 100644
--- a/src/uix/terra/date-picker/components/date-picker.svelte
+++ b/src/uix/terra/date-picker/components/date-picker.svelte
@@ -1,4 +1,18 @@
 <script lang="ts">
+	/**
+	 * # DatePicker Root
+	 *
+	 * Selector de fecha con campo de entrada y calendario emergente.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-picker]               → Contenedor raíz
+	 * [data-date-picker-trigger]       → Trigger que abre el calendario
+	 * [data-state="open"]              → Estado del popover abierto
+	 * [data-state="closed"]            → Estado del popover cerrado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { watch } from 'runed';
 	import type { DateValue } from '$terra/adapters/dates';
 	import { readableActive, writableActive, mergeProps, useId }  from '$terra/utils';
@@ -154,7 +168,7 @@
 	const mergedProps = $derived(
 		mergeProps(restProps, {
 			id,
-			'data-date-picker-root': '',
+			'data-date-picker': '',
 		})
 	);
 </script>
diff --git a/src/uix/terra/date-range-field/components/date-range-field-input.svelte b/src/uix/terra/date-range-field/components/date-range-field-input.svelte
index c7902751f..227fb7302 100644
--- a/src/uix/terra/date-range-field/components/date-range-field-input.svelte
+++ b/src/uix/terra/date-range-field/components/date-range-field-input.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # Date Range Field Input
+	 *
+	 * Input para seleccionar un rango de fechas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DateRangeField>
+	 *   <DateRangeFieldInput />
+	 * </DateRangeField>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-field-input]  → Contenedor del input de rango de fechas
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from "$terra/utils";
 	import type { DateRangeFieldInputProps } from "../types.ts";
 	import { DateRangeFieldInputState } from "../date-range-field.svelte.ts";
diff --git a/src/uix/terra/date-range-field/components/date-range-field-label.svelte b/src/uix/terra/date-range-field/components/date-range-field-label.svelte
index bbbfa0811..01a176fa6 100644
--- a/src/uix/terra/date-range-field/components/date-range-field-label.svelte
+++ b/src/uix/terra/date-range-field/components/date-range-field-label.svelte
@@ -1,4 +1,22 @@
 <script lang="ts">
+	/**
+	 * # Date Range Field Label
+	 *
+	 * Etiqueta para el campo de rango de fechas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DateRangeField>
+	 *   <DateRangeFieldLabel>Selecciona un rango</DateRangeFieldLabel>
+	 *   <DateRangeFieldInput />
+	 * </DateRangeField>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-field-label] → Etiqueta del campo de rango de fechas
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from "$terra/utils";
 	import { DateRangeFieldLabelState } from "../date-range-field.svelte.ts";
 	import type { DateRangeFieldLabelProps } from "../types.ts";
diff --git a/src/uix/terra/date-range-field/components/date-range-field.svelte b/src/uix/terra/date-range-field/components/date-range-field.svelte
index 83e24dc29..ec2922ef3 100644
--- a/src/uix/terra/date-range-field/components/date-range-field.svelte
+++ b/src/uix/terra/date-range-field/components/date-range-field.svelte
@@ -1,4 +1,18 @@
 <script lang="ts">
+	/**
+	 * # DateRangeField Root
+	 *
+	 * Componente de campo de rango de fechas con segmentos editables.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-field]          → Contenedor raíz
+	 * [data-date-range-field-label]    → Etiqueta del campo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-invalid]                  → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { DateValue } from "$terra/adapters/dates";
diff --git a/src/uix/terra/date-range-picker/components/date-range-picker-calendar.svelte b/src/uix/terra/date-range-picker/components/date-range-picker-calendar.svelte
index dd38f59e8..47a39f755 100644
--- a/src/uix/terra/date-range-picker/components/date-range-picker-calendar.svelte
+++ b/src/uix/terra/date-range-picker/components/date-range-picker-calendar.svelte
@@ -1,4 +1,24 @@
 <script lang="ts">
+	/**
+	 * # Date Range Picker Calendar
+	 *
+	 * Componente de calendario utilizado dentro del DateRangePicker.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DateRangePicker>
+	 *   <DateRangePickerTrigger />
+	 *   <DateRangePickerContent>
+	 *     <DateRangePickerCalendar />
+	 *   </DateRangePickerContent>
+	 * </DateRangePicker>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-picker-calendar] → Contenedor del calendario del date range picker
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from "$terra/utils";
 	import type { DateRangePickerCalendarProps } from "../types.ts";
 	import { DateRangePickerRootState } from "../date-range-picker.svelte.ts";
diff --git a/src/uix/terra/date-range-picker/components/date-range-picker-trigger.svelte b/src/uix/terra/date-range-picker/components/date-range-picker-trigger.svelte
index 3b2e54552..bd4f3a6c6 100644
--- a/src/uix/terra/date-range-picker/components/date-range-picker-trigger.svelte
+++ b/src/uix/terra/date-range-picker/components/date-range-picker-trigger.svelte
@@ -1,4 +1,24 @@
 <script lang="ts">
+	/**
+	 * # Date Range Picker Trigger
+	 *
+	 * Botón que abre el calendario del DateRangePicker.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DateRangePicker>
+	 *   <DateRangePickerTrigger />
+	 *   <DateRangePickerContent>
+	 *     <DateRangePickerCalendar />
+	 *   </DateRangePickerContent>
+	 * </DateRangePicker>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-picker-trigger] → Botón que abre el calendario de rango
+	 * ```
+	 */
 	import { mergeProps } from '$terra/utils';
 	import type { DateRangePickerTriggerProps } from "../types.js";
 	import PopoverTrigger from "../../popover/components/popover-trigger.svelte";
diff --git a/src/uix/terra/date-range-picker/components/date-range-picker.svelte b/src/uix/terra/date-range-picker/components/date-range-picker.svelte
index 44d2b45dc..a84e61e35 100644
--- a/src/uix/terra/date-range-picker/components/date-range-picker.svelte
+++ b/src/uix/terra/date-range-picker/components/date-range-picker.svelte
@@ -1,4 +1,18 @@
 <script lang="ts">
+	/**
+	 * # DateRangePicker Root
+	 *
+	 * Selector de rango de fechas con campo de entrada y calendario emergente.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-date-range-picker]         → Contenedor raíz
+	 * [data-date-range-picker-trigger] → Trigger que abre el calendario
+	 * [data-state="open"]              → Estado del popover abierto
+	 * [data-state="closed"]            → Estado del popover cerrado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { watch } from "runed";
 	import type { DateValue } from "$terra/adapters/dates";
 	import {
diff --git a/src/uix/terra/dialog/components/dialog-close.svelte b/src/uix/terra/dialog/components/dialog-close.svelte
index 01e70107f..cd2d2c2bc 100644
--- a/src/uix/terra/dialog/components/dialog-close.svelte
+++ b/src/uix/terra/dialog/components/dialog-close.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Dialog Close
+	 *
+	 * Botón que cierra el diálogo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DialogContent>
+	 *   <DialogTitle>Diálogo</DialogTitle>
+	 *   <p>Contenido...</p>
+	 *   <DialogClose>Cerrar</DialogClose>
+	 *   <!-- También puede ser un icono -->
+	 *   <DialogClose>
+	 *     <CloseIcon />
+	 *   </DialogClose>
+	 * </DialogContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el botón
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-close]        → Botón de cerrar
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import { DialogCloseState } from '../dialog.svelte';
 	import type { DialogCloseProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog-content.svelte b/src/uix/terra/dialog/components/dialog-content.svelte
index 904e90712..b496d0cd2 100644
--- a/src/uix/terra/dialog/components/dialog-content.svelte
+++ b/src/uix/terra/dialog/components/dialog-content.svelte
@@ -1,4 +1,45 @@
 <script lang="ts">
+	/**
+	 * # Dialog Content
+	 *
+	 * Contenedor principal del contenido del diálogo modal.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DialogContent>
+	 *   <DialogTitle>Título</DialogTitle>
+	 *   <DialogDescription>Descripción</DialogDescription>
+	 *   <p>Contenido...</p>
+	 * </DialogContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `forceMount`: boolean - Fuerza el montaje del componente
+	 * - `onOpenAutoFocus`: Callback cuando el diálogo gana foco
+	 * - `onCloseAutoFocus`: Callback cuando el diálogo pierde foco
+	 * - `onEscapeKeydown`: Callback cuando se presiona Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura del diálogo
+	 *
+	 * ## Comportamiento
+	 * - Maneja el trapping de foco dentro del diálogo
+	 * - Cierra con Escape
+	 * - Enfoca automáticamente al abrir
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-content]      → Contenedor del diálogo
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-nested]                    → Presente cuando el diálogo está anidado
+	 * [data-nested-open]               → Presente cuando hay diálogos anidados abiertos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="dialog".
+	 */
 	import { readableActive, writableActive, mergeProps, afterSleep }  from '$terra/utils';
 	import { DialogContentState } from '../dialog.svelte';
 	import type { DialogContentProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog-description.svelte b/src/uix/terra/dialog/components/dialog-description.svelte
index 01393ee79..377255b93 100644
--- a/src/uix/terra/dialog/components/dialog-description.svelte
+++ b/src/uix/terra/dialog/components/dialog-description.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Dialog Description
+	 *
+	 * Descripción opcional del diálogo que provee contexto adicional.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DialogContent>
+	 *   <DialogTitle>Confirmar acción</DialogTitle>
+	 *   <DialogDescription>
+	 *     Esta acción no se puede deshacer. ¿Estás seguro?
+	 *   </DialogDescription>
+	 *   <!-- acciones -->
+	 * </DialogContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-description]  → Descripción del diálogo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` asociado al diálogo.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import { DialogDescriptionState } from '../dialog.svelte';
 	import type { DialogDescriptionProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog-overlay.svelte b/src/uix/terra/dialog/components/dialog-overlay.svelte
index e074b9006..c64a6fbb5 100644
--- a/src/uix/terra/dialog/components/dialog-overlay.svelte
+++ b/src/uix/terra/dialog/components/dialog-overlay.svelte
@@ -1,4 +1,30 @@
 <script lang="ts">
+	/**
+	 * # Dialog Overlay
+	 *
+	 * Fondo oscuro semi-transparente detrás del diálogo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Dialog bind:open={isOpen}>
+	 *   <DialogTrigger>Abrir</DialogTrigger>
+	 *   <DialogOverlay />
+	 *   <DialogContent>...</DialogContent>
+	 * </Dialog>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-overlay]     → Fondo del diálogo
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-nested]                    → Presente cuando el diálogo está anidado
+	 * [data-nested-open]               → Presente cuando hay diálogos anidados abiertos
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con position fixed.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import { DialogOverlayState } from '../dialog.svelte';
 	import type { DialogOverlayProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog-title.svelte b/src/uix/terra/dialog/components/dialog-title.svelte
index 605da104f..3efcf48a0 100644
--- a/src/uix/terra/dialog/components/dialog-title.svelte
+++ b/src/uix/terra/dialog/components/dialog-title.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Dialog Title
+	 *
+	 * Título accesible del diálogo. Requerido para accesibilidad.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DialogContent>
+	 *   <DialogTitle level={2}>
+	 *     Título del diálogo
+	 *   </DialogTitle>
+	 *   <DialogDescription>
+	 *     Descripción opcional
+	 *   </DialogDescription>
+	 * </DialogContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `level`: 1 | 2 | 3 | 4 | 5 | 6 - Nivel de encabezado (default: 2)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-title]        → Título del diálogo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="heading".
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import { DialogTitleState } from '../dialog.svelte';
 	import type { DialogTitleProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog-trigger.svelte b/src/uix/terra/dialog/components/dialog-trigger.svelte
index 359ec88d5..756411fcb 100644
--- a/src/uix/terra/dialog/components/dialog-trigger.svelte
+++ b/src/uix/terra/dialog/components/dialog-trigger.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Dialog Trigger
+	 *
+	 * Botón que abre el diálogo al hacer clic.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Dialog>
+	 *   <DialogTrigger>
+	 *     <button>Abrir</button>
+	 *   </DialogTrigger>
+	 *   <DialogContent>...</DialogContent>
+	 * </Dialog>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-terra-dialog-trigger]      → Botón que abre el diálogo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import { DialogTriggerState } from '../dialog.svelte';
 	import type { DialogTriggerProps } from '../types';
diff --git a/src/uix/terra/dialog/components/dialog.svelte b/src/uix/terra/dialog/components/dialog.svelte
index 15b6e7729..d22aa4bf5 100644
--- a/src/uix/terra/dialog/components/dialog.svelte
+++ b/src/uix/terra/dialog/components/dialog.svelte
@@ -1,4 +1,30 @@
 <script lang="ts">
+	/**
+	 * # Dialog Root
+	 *
+	 * Componente raíz de un diálogo modal que requiere interacción del usuario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Dialog bind:open={isOpen}>
+	 *   <DialogTrigger>Abrir diálogo</DialogTrigger>
+	 *   <DialogContent>
+	 *     <DialogTitle>Título</DialogTitle>
+	 *     <DialogDescription>Descripción</DialogDescription>
+	 *     <p>Contenido del diálogo</p>
+	 *     <DialogClose>Cerrar</DialogClose>
+	 *   </DialogContent>
+	 * </Dialog>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado de apertura del diálogo (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 *
+	 * ## Selectores CSS
+	 * El dialog usa atributos `data-terra-dialog-*` para sus partes.
+	 */
 	import { readableActive, writableActive }  from '$terra/utils';
 	import { DialogRootState } from '../dialog.svelte';
 	import type { DialogRootProps } from '../types';
diff --git a/src/uix/terra/dialog/dialog.svelte.ts b/src/uix/terra/dialog/dialog.svelte.ts
index 1fa295f86..2a46b2ee4 100644
--- a/src/uix/terra/dialog/dialog.svelte.ts
+++ b/src/uix/terra/dialog/dialog.svelte.ts
@@ -110,7 +110,7 @@ export class DialogRootState {
 		this.opts.open.current = false;
 	};
 
-	getBitsAttr: typeof dialogAttrs.getAttr = (part) => {
+	getTerraAttr: typeof dialogAttrs.getAttr = (part) => {
 		return dialogAttrs.getAttr(part, this.opts.variant.current);
 	};
 
@@ -171,7 +171,7 @@ export class DialogTriggerState {
 				"aria-haspopup": "dialog",
 				"aria-expanded": boolToStr(this.root.opts.open.current),
 				"aria-controls": this.root.contentId,
-				[this.root.getBitsAttr("trigger")]: "",
+				[this.root.getTerraAttr("trigger")]: "",
 				onkeydown: this.onkeydown,
 				onclick: this.onclick,
 				disabled: boolToTrueOrUndef(this.opts.disabled.current),
@@ -218,7 +218,7 @@ export class DialogCloseState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr(this.opts.variant.current)]: "",
+				[this.root.getTerraAttr(this.opts.variant.current)]: "",
 				onclick: this.onclick,
 				onkeydown: this.onkeydown,
 				disabled: boolToTrueOrUndef(this.opts.disabled.current),
@@ -250,7 +250,7 @@ export class DialogActionState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("action")]: "",
+				[this.root.getTerraAttr("action")]: "",
 				...this.root.sharedProps,
 				...this.attachment,
 			}) as const
@@ -286,7 +286,7 @@ export class DialogTitleState {
 				id: this.opts.id.current,
 				role: "heading",
 				"aria-level": this.opts.level.current,
-				[this.root.getBitsAttr("title")]: "",
+				[this.root.getTerraAttr("title")]: "",
 				...this.root.sharedProps,
 				...this.attachment,
 			}) as const
@@ -320,7 +320,7 @@ export class DialogDescriptionState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("description")]: "",
+				[this.root.getTerraAttr("description")]: "",
 				...this.root.sharedProps,
 				...this.attachment,
 			}) as const
@@ -357,7 +357,7 @@ export class DialogContentState {
 				"aria-modal": "true",
 				"aria-describedby": this.root.descriptionId,
 				"aria-labelledby": this.root.titleId,
-				[this.root.getBitsAttr("content")]: "",
+				[this.root.getTerraAttr("content")]: "",
 				style: {
 					pointerEvents: "auto",
 					outline: this.root.opts.variant.current === "alert-dialog" ? "none" : undefined,
@@ -401,7 +401,7 @@ export class DialogOverlayState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("overlay")]: "",
+				[this.root.getTerraAttr("overlay")]: "",
 				style: {
 					pointerEvents: "auto",
 					"--terra-dialog-depth": this.root.depth,
@@ -456,7 +456,7 @@ export class AlertDialogCance$state {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("cancel")]: "",
+				[this.root.getTerraAttr("cancel")]: "",
 				onclick: this.onclick,
 				onkeydown: this.onkeydown,
 				tabindex: 0,
diff --git a/src/uix/terra/drawer/components/drawer-close.svelte b/src/uix/terra/drawer/components/drawer-close.svelte
index ef031478b..ec19a0725 100644
--- a/src/uix/terra/drawer/components/drawer-close.svelte
+++ b/src/uix/terra/drawer/components/drawer-close.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Drawer Close
+	 *
+	 * Botón que cierra el drawer.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-close]           → Elemento close del drawer
+	 * ```
+	 */
 	import { Dialog } from '../../dialog';
 	import type { DrawerCloseProps } from '../types';
 
diff --git a/src/uix/terra/drawer/components/drawer-content.svelte b/src/uix/terra/drawer/components/drawer-content.svelte
index 9c5690da6..5ba10411d 100644
--- a/src/uix/terra/drawer/components/drawer-content.svelte
+++ b/src/uix/terra/drawer/components/drawer-content.svelte
@@ -1,4 +1,45 @@
 <script lang="ts">
+	/**
+	 * # Drawer Content
+	 *
+	 * Contenedor del contenido del panel lateral deslizante.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DrawerContent side="right">
+	 *   <DrawerClose>
+	 *     <CloseIcon />
+	 *   </DrawerClose>
+	 *   <p>Contenido del drawer</p>
+	 * </DrawerContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Lado desde donde se abre
+	 * - `forceMount`: boolean - Fuerza el montaje del componente
+	 * - `onOpenAutoFocus`: Callback cuando el drawer gana foco
+	 * - `onCloseAutoFocus`: Callback cuando el drawer pierde foco
+	 * - `onEscapeKeydown`: Callback cuando se presiona Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura
+	 * - `side`: string - Lado de apertura
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-content]            → Contenedor del drawer
+	 * [data-side="top"]                → Drawer desde arriba
+	 * [data-side="right"]              → Drawer desde la derecha
+	 * [data-side="bottom"]             → Drawer desde abajo
+	 * [data-side="left"]               → Drawer desde la izquierda
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con `data-side` y `data-drawer-content`.
+	 */
 	import { readableActive, writableActive, mergeProps, afterSleep }  from '$terra/utils';
 	import { DialogContentState } from '../../dialog/dialog.svelte';
 	import type { DrawerContentProps } from '../types';
diff --git a/src/uix/terra/drawer/components/drawer-description.svelte b/src/uix/terra/drawer/components/drawer-description.svelte
index 0272bf091..1107cecfb 100644
--- a/src/uix/terra/drawer/components/drawer-description.svelte
+++ b/src/uix/terra/drawer/components/drawer-description.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Drawer Description
+	 *
+	 * Descripción opcional del drawer.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-description]     → Elemento descripción del drawer
+	 * ```
+	 */
 	import { Dialog } from '../../dialog';
 	import type { DrawerDescriptionProps } from '../types';
 
diff --git a/src/uix/terra/drawer/components/drawer-overlay.svelte b/src/uix/terra/drawer/components/drawer-overlay.svelte
index 59197c31c..8bb57b5df 100644
--- a/src/uix/terra/drawer/components/drawer-overlay.svelte
+++ b/src/uix/terra/drawer/components/drawer-overlay.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Drawer Overlay
+	 *
+	 * Fondo oscuro semitransparente que aparece detrás del drawer.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-overlay]         → Elemento overlay del drawer
+	 * [data-state="open"]           → Estado abierto
+	 * [data-state="closed"]         → Estado cerrado
+	 * ```
+	 */
 	import { mergeProps }  from '$terra/utils';
 	import { Dialog } from '../../dialog';
 	import type { DrawerOverlayProps } from '../types';
diff --git a/src/uix/terra/drawer/components/drawer-title.svelte b/src/uix/terra/drawer/components/drawer-title.svelte
index 4f606d058..7b1eea1a0 100644
--- a/src/uix/terra/drawer/components/drawer-title.svelte
+++ b/src/uix/terra/drawer/components/drawer-title.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Drawer Title
+	 *
+	 * Título del drawer.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-title]           → Elemento título del drawer
+	 * ```
+	 */
 	import { Dialog } from '../../dialog';
 	import type { DrawerTitleProps } from '../types';
 
diff --git a/src/uix/terra/drawer/components/drawer-trigger.svelte b/src/uix/terra/drawer/components/drawer-trigger.svelte
index eeb992133..961b9fe24 100644
--- a/src/uix/terra/drawer/components/drawer-trigger.svelte
+++ b/src/uix/terra/drawer/components/drawer-trigger.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Drawer Trigger
+	 *
+	 * Botón que abre el drawer.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-trigger]         → Elemento trigger del drawer
+	 * ```
+	 */
 	import { Dialog } from '../../dialog';
 	import type { DrawerTriggerProps } from '../types';
 
diff --git a/src/uix/terra/drawer/components/drawer.svelte b/src/uix/terra/drawer/components/drawer.svelte
index 32398e97a..81d0a6ac8 100644
--- a/src/uix/terra/drawer/components/drawer.svelte
+++ b/src/uix/terra/drawer/components/drawer.svelte
@@ -1,4 +1,41 @@
 <script lang="ts">
+	/**
+	 * # Drawer Root
+	 *
+	 * Panel lateral deslizante (drawer) que se abre desde un borde de la pantalla.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Drawer bind:open={isOpen}>
+	 *   <DrawerTrigger>Abrir drawer</DrawerTrigger>
+	 *   <DrawerContent side="right">
+	 *     <DrawerClose>Cerrar</DrawerClose>
+	 *     <p>Contenido del drawer</p>
+	 *   </DrawerContent>
+	 * </Drawer>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado de apertura del drawer (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-drawer-content]            → Contenedor del drawer
+	 * [data-side="top"]                → Drawer desde arriba
+	 * [data-side="right"]              → Drawer desde la derecha
+	 * [data-side="bottom"]             → Drawer desde abajo
+	 * [data-side="left"]               → Drawer desde la izquierda
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-drawer-trigger]           → Botón que abre el drawer
+	 * [data-drawer-overlay]           → Fondo del drawer
+	 * [data-drawer-title]             → Título del drawer
+	 * [data-drawer-description]       → Descripción del drawer
+	 * [data-drawer-close]             → Botón de cerrar
+	 * ```
+	 */
 	import { readableActive, writableActive }  from '$terra/utils';
 	import { DialogRootState } from '../../dialog/dialog.svelte';
 	import type { DrawerRootProps } from '../types';
diff --git a/src/uix/terra/dropdown-menu/components/dropdown-menu-content.svelte b/src/uix/terra/dropdown-menu/components/dropdown-menu-content.svelte
index 0d4cd726d..b06196781 100644
--- a/src/uix/terra/dropdown-menu/components/dropdown-menu-content.svelte
+++ b/src/uix/terra/dropdown-menu/components/dropdown-menu-content.svelte
@@ -1,4 +1,52 @@
 <script lang="ts">
+	/**
+	 * # Dropdown Menu Content
+	 *
+	 * Contenedor del menú desplegable con items.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DropdownMenuContent
+	 *   side="bottom"
+	 *   align="start"
+	 *   sideOffset={8}
+	 * >
+	 *   <DropdownMenuItem value="edit">Editar</DropdownMenuItem>
+	 *   <DropdownMenuSeparator />
+	 *   <DropdownMenuItem value="delete">Eliminar</DropdownMenuItem>
+	 * </DropdownMenuContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición del menú
+	 * - `align`: "start" | "center" | "end" - Alineación del menú
+	 * - `sideOffset`: number - Distancia desde el trigger
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `avoidCollisions`: boolean - Evita colisiones con bordes
+	 * - `collisionPadding`: number - Padding para colisiones
+	 * - `arrowPadding`: number - Padding para la flecha
+	 * - `sticky`: "partial" | "always" - Comportamiento sticky
+	 * - `hideWhenDetached`: boolean - Oculta si está detached
+	 * - `strategy`: "absolute" | "fixed" - Estrategia de posicionamiento
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onCloseAutoFocus`: Callback al cerrar y reenfocar
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-dropdown-menu-content]       → Contenedor del menú desplegable
+	 * [data-state="open"]                → Estado del menú abierto
+	 * [data-state="closed"]              → Estado del menú cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` anidado para posicionamiento.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { DropdownMenuContentProps } from '../types';
 	import { MenuContentState } from '../../menu/menu.svelte';
@@ -54,7 +102,7 @@
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		if (e.target && e.target instanceof Element) {
-			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr('sub-content')}]`;
+			const subContentSelector = `[${contentState.parentMenu.root.getTerraAttr('sub-content')}]`;
 			if (e.target.closest(subContentSelector)) return;
 		}
 		contentState.parentMenu.onClose();
diff --git a/src/uix/terra/dropdown-menu/components/dropdown-menu.svelte b/src/uix/terra/dropdown-menu/components/dropdown-menu.svelte
index 5f6a727b2..dfc42a110 100644
--- a/src/uix/terra/dropdown-menu/components/dropdown-menu.svelte
+++ b/src/uix/terra/dropdown-menu/components/dropdown-menu.svelte
@@ -1,4 +1,43 @@
 <script lang="ts">
+	/**
+	 * # Dropdown Menu Root
+	 *
+	 * Menú desplegable que se muestra al hacer clic en un trigger.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <DropdownMenu bind:open={isOpen}>
+	 *   <DropdownMenuTrigger>
+	 *     <button>Menu</button>
+	 *   </DropdownMenuTrigger>
+	 *   <DropdownMenuContent>
+	 *     <DropdownMenuItem value="edit">Editar</DropdownMenuItem>
+	 *     <DropdownMenuItem value="delete">Eliminar</DropdownMenuItem>
+	 *   </DropdownMenuContent>
+	 * </DropdownMenu>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado del menú (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `dir`: "ltr" | "rtl" - Dirección del texto
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-dropdown-menu]               → Contexto raíz del menú
+	 * [data-dropdown-menu-trigger]       → Trigger que abre el menú
+	 * [data-dropdown-menu-content]       → Contenedor del menú
+	 * [data-state="open"]                → Estado del menú abierto
+	 * [data-state="closed"]              → Estado del menú cerrado
+	 * [data-dropdown-menu-item]          → Item individual del menú
+	 * [data-highlighted]                 → Item resaltado (hover/foco)
+	 * [data-disabled]                    → Item deshabilitado
+	 * [data-orientation]                 → Orientación del item
+	 * [data-dropdown-menu-checkbox-item] → Item de tipo checkbox
+	 * [data-dropdown-menu-radio-item]    → Item de tipo radio
+	 * [data-dropdown-menu-separator]     → Separador visual
+	 * ```
+	 */
 	import MenuRoot from "../../menu/components/menu.svelte";
 	import type { MenuRootProps } from "../../menu/types";
 
diff --git a/src/uix/terra/editable/components/editable-area.svelte b/src/uix/terra/editable/components/editable-area.svelte
index 531e32a1f..8ed40b367 100644
--- a/src/uix/terra/editable/components/editable-area.svelte
+++ b/src/uix/terra/editable/components/editable-area.svelte
@@ -1,4 +1,28 @@
 <script lang="ts">
+	/**
+	 * # Editable Area
+	 *
+	 * Contenedor del área editable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable.Area>
+	 *   <Editable.Preview />
+	 *   <Editable.Input />
+	 * </Editable.Area>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-area]            → Área contenedora
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableAreaProps } from '../types';
 	import { EditableAreaState } from '../editable.svelte';
diff --git a/src/uix/terra/editable/components/editable-cancel-trigger.svelte b/src/uix/terra/editable/components/editable-cancel-trigger.svelte
index 992d5be94..8029515b5 100644
--- a/src/uix/terra/editable/components/editable-cancel-trigger.svelte
+++ b/src/uix/terra/editable/components/editable-cancel-trigger.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # Editable Cancel Trigger
+	 *
+	 * Botón para cancelar la edición y revertir cambios.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable.CancelTrigger>
+	 *   Cancelar
+	 * </Editable.CancelTrigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-cancel-trigger]   → Botón de cancelar
+	 * [data-editing]                   → Presente cuando está en modo edición
+	 * [data-disabled]                  → Presente cuando está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableCancelTriggerProps } from '../types';
 	import { EditableCancelTriggerState } from '../editable.svelte';
diff --git a/src/uix/terra/editable/components/editable-edit-trigger.svelte b/src/uix/terra/editable/components/editable-edit-trigger.svelte
index 70b8d3461..60e10e11e 100644
--- a/src/uix/terra/editable/components/editable-edit-trigger.svelte
+++ b/src/uix/terra/editable/components/editable-edit-trigger.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # Editable Edit Trigger
+	 *
+	 * Botón para iniciar el modo edición.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable.EditTrigger>
+	 *   Editar
+	 * </Editable.EditTrigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-edit-trigger]     → Botón de edición
+	 * [data-editing]                   → Presente cuando está en modo edición
+	 * [data-disabled]                  → Presente cuando está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableEditTriggerProps } from '../types';
 	import { EditableEditTriggerState } from '../editable.svelte';
diff --git a/src/uix/terra/editable/components/editable-input.svelte b/src/uix/terra/editable/components/editable-input.svelte
index 55934f5da..4b342bf9e 100644
--- a/src/uix/terra/editable/components/editable-input.svelte
+++ b/src/uix/terra/editable/components/editable-input.svelte
@@ -1,4 +1,26 @@
 <script lang="ts">
+	/**
+	 * # Editable Input
+	 *
+	 * Input para editar el valor. Solo visible durante la edición.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable.Input />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-input]            → Elemento input
+	 * [data-editing]                   → Presente cuando está en modo edición
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<input>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableInputProps } from '../types';
 	import { EditableInputState } from '../editable.svelte';
diff --git a/src/uix/terra/editable/components/editable-preview.svelte b/src/uix/terra/editable/components/editable-preview.svelte
index 91caa408e..53e2084fa 100644
--- a/src/uix/terra/editable/components/editable-preview.svelte
+++ b/src/uix/terra/editable/components/editable-preview.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Editable Preview
+	 *
+	 * Vista previa del valor editable. Se muestra cuando no se está editando.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable.Preview>
+	 *   {#snippet children()}
+	 *     Valor personalizado
+	 *   {/snippet}
+	 * </Editable.Preview>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-preview]         → Elemento preview
+	 * [data-editing]                  → Presente cuando está en modo edición
+	 * [data-empty]                    → Presente cuando el valor está vacío
+	 * [data-disabled]                 → Presente cuando disabled
+	 * [data-readonly]                 → Presente cuando readonly
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditablePreviewProps } from '../types';
 	import { EditablePreviewState } from '../editable.svelte';
diff --git a/src/uix/terra/editable/components/editable-root.svelte b/src/uix/terra/editable/components/editable-root.svelte
index 83a3f83d4..1a891cf03 100644
--- a/src/uix/terra/editable/components/editable-root.svelte
+++ b/src/uix/terra/editable/components/editable-root.svelte
@@ -1,4 +1,23 @@
 <script lang="ts">
+	/**
+	 * # Editable Root
+	 *
+	 * Componente raíz para contenido editable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable bind:value={name} placeholder="Enter your name">
+	 *   <EditablePreview />
+	 *   <EditableInput />
+	 * </Editable>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable]                 → Elemento raíz del componente editable
+	 * [data-state="editing"]          → Estado cuando está en modo edición
+	 * ```
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableRootProps } from '../types';
diff --git a/src/uix/terra/editable/components/editable-submit-trigger.svelte b/src/uix/terra/editable/components/editable-submit-trigger.svelte
index 4a6b4bcb5..708a6ee6f 100644
--- a/src/uix/terra/editable/components/editable-submit-trigger.svelte
+++ b/src/uix/terra/editable/components/editable-submit-trigger.svelte
@@ -1,4 +1,24 @@
 <script lang="ts">
+	/**
+	 * # Editable Submit Trigger
+	 *
+	 * Botón para enviar/guardar los cambios en un componente Editable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Editable bind:value={text}>
+	 *   <EditableInput />
+	 *   <EditableSubmitTrigger>
+	 *     <CheckIcon />
+	 *   </EditableSubmitTrigger>
+	 * </Editable>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-editable-submit-trigger]  → Botón para confirmar cambios
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { EditableSubmitTriggerProps } from '../types';
 	import { EditableSubmitTriggerState } from '../editable.svelte';
diff --git a/src/uix/terra/field/components/Field.Control.svelte b/src/uix/terra/field/components/Field.Control.svelte
index e7ea6b10e..ef0002931 100644
--- a/src/uix/terra/field/components/Field.Control.svelte
+++ b/src/uix/terra/field/components/Field.Control.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Field Control
+	 *
+	 * Contenedor para elementos de control personalizados (selects, checkboxes, etc.).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field.Control>
+	 *   <Select bind:value={country}>
+	 *     <SelectTrigger>
+	 *       <SelectValue />
+	 *     </SelectTrigger>
+	 *     <SelectContent>
+	 *       <SelectItem value="ar">Argentina</SelectItem>
+	 *     </SelectContent>
+	 *   </Select>
+	 * </Field.Control>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-control]            → Contenedor para controles personalizados
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con `data-field-control`.
+	 */
 	import { createId, mergeProps, readableActive, writableActive }  from '$terra/utils';
 	import type { FieldControlProps } from '../types';
 	import { FieldControlState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Error.svelte b/src/uix/terra/field/components/Field.Error.svelte
index 89f488629..6e7c55083 100644
--- a/src/uix/terra/field/components/Field.Error.svelte
+++ b/src/uix/terra/field/components/Field.Error.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Field Error
+	 *
+	 * Mensaje de error que solo se muestra cuando el campo está en estado de error.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field state={emailError ? 'error' : 'idle'}>
+	 *   <Field.Label>Email</Field.Label>
+	 *   <Field.Input bind:value={email} />
+	 *   <Field.Error>{emailError}</Field.Error>
+	 * </Field>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Solo se muestra cuando `state="error"`
+	 * - Renderiza un elemento vacío (ghost) cuando no hay error
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-error]                → Mensaje de error
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<p>` con `data-field-error`.
+	 */
 	import { createId, mergeProps, readableActive, writableActive }  from '$terra/utils';
 	import type { FieldErrorProps } from '../types';
 	import { FieldErrorState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.HelperText.svelte b/src/uix/terra/field/components/Field.HelperText.svelte
index ff8a437a4..4519d019f 100644
--- a/src/uix/terra/field/components/Field.HelperText.svelte
+++ b/src/uix/terra/field/components/Field.HelperText.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Field Helper Text
+	 *
+	 * Texto de ayuda opcional para dar contexto adicional sobre el campo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field.Root>
+	 *   <Field.Label>Contraseña</Field.Label>
+	 *   <Field.Input type="password" />
+	 *   <Field.HelperText>
+	 *     Mínimo 8 caracteres, incluir mayúsculas y números
+	 *   </Field.HelperText>
+	 * </Field.Root>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-helper-text]         → Texto de ayuda
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<p>` con `data-field-helper-text`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { FieldHelperTextProps } from '../types';
 	import { FieldHelperTextState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Input.svelte b/src/uix/terra/field/components/Field.Input.svelte
index fe56ded1c..6c4b15f83 100644
--- a/src/uix/terra/field/components/Field.Input.svelte
+++ b/src/uix/terra/field/components/Field.Input.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Field Input
+	 *
+	 * Input de texto con integración automática al estado del Field.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field.Input
+	 *   id="email"
+	 *   type="email"
+	 *   bind:value={email}
+	 *   placeholder="ejemplo@correo.com"
+	 * />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: string - Tipo del input (default: "text")
+	 * - `value`: string - Valor del input (bindable)
+	 * - `onValueChange`: Callback cuando cambia el valor
+	 * - `id`: string - ID del elemento
+	 * - Todas las props de HTMLInputAttributes
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-input]               → Input del campo
+	 * [data-state="valid"]             → Estado válido
+	 * [data-state="invalid"]           → Estado inválido
+	 * [data-disabled]                  → Presente cuando disabled
+	 * [data-readonly]                  → Presente cuando readonly
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<input>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { FieldInputProps } from '../types';
 	import { FieldInputState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Label.svelte b/src/uix/terra/field/components/Field.Label.svelte
index b305bc8bf..570e19624 100644
--- a/src/uix/terra/field/components/Field.Label.svelte
+++ b/src/uix/terra/field/components/Field.Label.svelte
@@ -1,4 +1,32 @@
 <script lang="ts">
+	/**
+	 * # Field Label
+	 *
+	 * Etiqueta para un campo de formulario. Se asocia automáticamente al input.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field.Label for="email">
+	 *   Email
+	 * </Field.Label>
+	 * <Field.Input id="email" />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Muestra un asterisco (*) cuando el campo es required
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-label]                → Etiqueta del campo
+	 * [data-field-required-indicator]   → Indicador de required (*)
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<label>` con `data-field-required-indicator`.
+	 */
 	import { createId, mergeProps, readableActive, writableActive }  from '$terra/utils';
 	import type { FieldLabelProps } from '../types';
 	import { FieldLabelState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Prefix.svelte b/src/uix/terra/field/components/Field.Prefix.svelte
index b5d67deca..690680634 100644
--- a/src/uix/terra/field/components/Field.Prefix.svelte
+++ b/src/uix/terra/field/components/Field.Prefix.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Field Prefix
+	 *
+	 * Prefijo visual del campo (icono, texto, etc.).
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-prefix]          → Prefijo del campo
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { FieldPrefixProps } from '../types';
 	import { FieldPrefixState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Root.svelte b/src/uix/terra/field/components/Field.Root.svelte
index 405f5c7c1..3d7ab6bf0 100644
--- a/src/uix/terra/field/components/Field.Root.svelte
+++ b/src/uix/terra/field/components/Field.Root.svelte
@@ -1,4 +1,45 @@
 <script lang="ts">
+	/**
+	 * # Field Root
+	 *
+	 * Componente raíz que provee estado y contexto para los subcomponentes de campo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Field.Root state="error" disabled={false}>
+	 *   <Field.Label for="email">Email</Field.Label>
+	 *   <Field.Input id="email" type="email" bind:value={email} />
+	 *   <Field.Error>Email inválido</Field.Error>
+	 *   <Field.HelperText>Tu correo electrónico</Field.HelperText>
+	 * </Field.Root>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `state`: "idle" | "error" | "success" - Estado de validación
+	 * - `disabled`: boolean - Deshabilita el campo
+	 * - `readonly`: boolean - Solo lectura
+	 * - `required`: boolean - Campo requerido
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `state`: string - Estado actual del campo
+	 * - `isError`: boolean - Si hay error
+	 * - `isRequired`: boolean - Si es requerido
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field]                   → Elemento raíz del campo
+	 * [data-state="idle"]            → Estado inactivo
+	 * [data-state="error"]           → Estado con error
+	 * [data-state="success"]         → Estado exitoso
+	 * [data-disabled]                → Campo deshabilitado
+	 * [data-readonly]                → Campo solo lectura
+	 * [data-required]                → Campo requerido
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos de estado.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { FieldRootProps } from '../types';
 	import { FieldRootState } from '../field-state.svelte';
diff --git a/src/uix/terra/field/components/Field.Suffix.svelte b/src/uix/terra/field/components/Field.Suffix.svelte
index c8cbbeb71..d45c18cb8 100644
--- a/src/uix/terra/field/components/Field.Suffix.svelte
+++ b/src/uix/terra/field/components/Field.Suffix.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Field Suffix
+	 *
+	 * Sufijo visual del campo (icono, texto, etc.).
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-field-suffix]          → Sufijo del campo
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { FieldSuffixProps } from '../types';
 	import { FieldSuffixState } from '../field-state.svelte';
diff --git a/src/uix/terra/file-upload/components/file-upload-dropzone.svelte b/src/uix/terra/file-upload/components/file-upload-dropzone.svelte
index 09e9510d8..d4ff86e62 100644
--- a/src/uix/terra/file-upload/components/file-upload-dropzone.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-dropzone.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # File Upload Dropzone
+	 *
+	 * Zona de arrastrar y soltar archivos para subir.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUpload.Dropzone>
+	 *   Arrastra archivos aquí o haz clic para seleccionar
+	 * </FileUpload.Dropzone>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-dropzone]      → Zona de drop
+	 * [data-dragging]                  → Presente durante drag over
+	 * [data-disabled]                  → Presente cuando disabled
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con un input oculto.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadDropzoneProps } from '../types';
 	import { FileUploadDropzoneState } from '../file-upload.svelte';
diff --git a/src/uix/terra/file-upload/components/file-upload-file-list.svelte b/src/uix/terra/file-upload/components/file-upload-file-list.svelte
index 3d955ea64..d862125b6 100644
--- a/src/uix/terra/file-upload/components/file-upload-file-list.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-file-list.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # File Upload File List
+	 *
+	 * Lista que muestra los archivos cargados.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadRoot>
+	 *   <FileUploadFileList let:files>
+	 *     {#each files as file}
+	 *       <FileUploadItem {file} />
+	 *     {/each}
+	 *   </FileUploadFileList>
+	 * </FileUploadRoot>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-file-list]      → Lista de archivos cargados
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadFileListProps } from '../types';
 	import { FileUploadFileListState } from '../file-upload.svelte';
@@ -6,17 +33,17 @@
 	const uid = $props.id();
 
 	let {
-		ref = $bindable(null),
-		id  = createId(uid),
-		children,
-		child,
-		...restProps
-	}: FileUploadFileListProps = $props();
+	ref = $bindable(null),
+	id  = createId(uid),
+	children,
+	child,
+	...restProps
+}: FileUploadFileListProps = $props();
 
 	const listState = FileUploadFileListState.create({
-		id:  readableActive(() => id),
-		ref: writableActive(() => ref, (v) => (ref = v)),
-	});
+	id:  readableActive(() => id),
+	ref: writableActive(() => ref, (v) => (ref = v)),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, listState.props));
 </script>
@@ -28,3 +55,4 @@
 		{@render children?.()}
 	</div>
 {/if}
+
diff --git a/src/uix/terra/file-upload/components/file-upload-item-name.svelte b/src/uix/terra/file-upload/components/file-upload-item-name.svelte
index 603b62597..1f071d473 100644
--- a/src/uix/terra/file-upload/components/file-upload-item-name.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-item-name.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # File Upload Item Name
+	 *
+	 * Muestra el nombre de un archivo subido.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUpload.Item>
+	 *   <FileUpload.ItemName />
+	 *   <FileUpload.ItemSize />
+	 *   <FileUpload.ItemRemove />
+	 * </FileUpload.Item>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-item-name]     → Nombre del archivo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadItemNameProps } from '../types';
 	import { FileUploadItemNameState } from '../file-upload.svelte';
diff --git a/src/uix/terra/file-upload/components/file-upload-item-progress.svelte b/src/uix/terra/file-upload/components/file-upload-item-progress.svelte
index 1d5945e6d..4e2d8020e 100644
--- a/src/uix/terra/file-upload/components/file-upload-item-progress.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-item-progress.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # File Upload Item Progress
+	 *
+	 * Barra de progreso para mostrar el estado de carga de un archivo.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadItem {file}>
+	 *   <FileUploadItemProgress value={uploadProgress} />
+	 * </FileUploadItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: number - Valor de progreso (0-100)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-item-progress]  → Barra de progreso para mostrar el estado de carga
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 * El procentaje está disponible como `--progress`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadItemProgressProps } from '../types';
 	import { FileUploadItemProgressState } from '../file-upload.svelte';
@@ -6,19 +31,19 @@
 	const uid = $props.id();
 
 	let {
-		ref   = $bindable(null),
-		id    = createId(uid),
-		value = 0,
-		children,
-		child,
-		...restProps
-	}: FileUploadItemProgressProps = $props();
+	ref   = $bindable(null),
+	id    = createId(uid),
+	value = 0,
+	children,
+	child,
+	...restProps
+}: FileUploadItemProgressProps = $props();
 
 	const progressState = FileUploadItemProgressState.create({
-		id:    readableActive(() => id),
-		ref:   writableActive(() => ref, (v) => (ref = v)),
-		value: readableActive(() => value),
-	});
+	id:    readableActive(() => id),
+	ref:   writableActive(() => ref, (v) => (ref = v)),
+	value: readableActive(() => value),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, progressState.props));
 	const percent     = $derived(progressState.percent);
@@ -31,3 +56,4 @@
 		{@render children?.()}
 	</div>
 {/if}
+
diff --git a/src/uix/terra/file-upload/components/file-upload-item-remove.svelte b/src/uix/terra/file-upload/components/file-upload-item-remove.svelte
index 1119ed6fa..780c02459 100644
--- a/src/uix/terra/file-upload/components/file-upload-item-remove.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-item-remove.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # File Upload Item Remove
+	 *
+	 * Botón para eliminar un archivo de la lista.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadItem {file}>
+	 *   <FileUploadItemRemove>
+	 *     <TrashIcon />
+	 *   </FileUploadItemRemove>
+	 * </FileUploadItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-item-remove]    → Botón para eliminar un archivo de la lista
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadItemRemoveProps } from '../types';
 	import { FileUploadItemRemoveState } from '../file-upload.svelte';
@@ -6,17 +31,17 @@
 	const uid = $props.id();
 
 	let {
-		ref = $bindable(null),
-		id  = createId(uid),
-		children,
-		child,
-		...restProps
-	}: FileUploadItemRemoveProps = $props();
+	ref = $bindable(null),
+	id  = createId(uid),
+	children,
+	child,
+	...restProps
+}: FileUploadItemRemoveProps = $props();
 
 	const removeState = FileUploadItemRemoveState.create({
-		id:  readableActive(() => id),
-		ref: writableActive(() => ref, (v) => (ref = v)),
-	});
+	id:  readableActive(() => id),
+	ref: writableActive(() => ref, (v) => (ref = v)),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, removeState.props));
 </script>
@@ -28,3 +53,4 @@
 		{@render children?.()}
 	</button>
 {/if}
+
diff --git a/src/uix/terra/file-upload/components/file-upload-item-size.svelte b/src/uix/terra/file-upload/components/file-upload-item-size.svelte
index 36a17963f..2acb64433 100644
--- a/src/uix/terra/file-upload/components/file-upload-item-size.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-item-size.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # File Upload Item Size
+	 *
+	 * Muestra el tamaño de un archivo subido.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadItem>
+	 *   <FileUploadItemSize />
+	 * </FileUploadItem>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-item-size]   → Elemento que muestra el tamaño del archivo
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadItemSizeProps } from '../types';
 	import { FileUploadItemSizeState, formatBytes } from '../file-upload.svelte';
diff --git a/src/uix/terra/file-upload/components/file-upload-item.svelte b/src/uix/terra/file-upload/components/file-upload-item.svelte
index 1b6e40482..b4ce6c71d 100644
--- a/src/uix/terra/file-upload/components/file-upload-item.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-item.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # File Upload Item
+	 *
+	 * Item individual que representa un archivo cargado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadRoot>
+	 *   <FileUploadFileList let:files>
+	 *     {#each files as file, index}
+	 *       <FileUploadItem {file} {index}>
+	 *         <FileUploadItemPreview />
+	 *         <FileUploadItemName />
+	 *         <FileUploadItemRemove />
+	 *       </FileUploadItem>
+	 *     {/each}
+	 *   </FileUploadFileList>
+	 * </FileUploadRoot>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `file`: File - Archivo a mostrar
+	 * - `index`: number - Índice del archivo en la lista
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload-item]            → Item individual que representa un archivo cargado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadItemProps } from '../types';
 	import { FileUploadItemState } from '../file-upload.svelte';
@@ -6,21 +39,21 @@
 	const uid = $props.id();
 
 	let {
-		ref = $bindable(null),
-		id  = createId(uid),
-		file,
-		index,
-		children,
-		child,
-		...restProps
-	}: FileUploadItemProps = $props();
+	ref = $bindable(null),
+	id  = createId(uid),
+	file,
+	index,
+	children,
+	child,
+	...restProps
+}: FileUploadItemProps = $props();
 
 	const itemState = FileUploadItemState.create({
-		id:    readableActive(() => id),
-		ref:   writableActive(() => ref, (v) => (ref = v)),
-		file:  readableActive(() => file),
-		index: readableActive(() => index),
-	});
+	id:    readableActive(() => id),
+	ref:   writableActive(() => ref, (v) => (ref = v)),
+	file:  readableActive(() => file),
+	index: readableActive(() => index),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, itemState.props));
 </script>
@@ -32,3 +65,4 @@
 		{@render children?.()}
 	</div>
 {/if}
+
diff --git a/src/uix/terra/file-upload/components/file-upload-root.svelte b/src/uix/terra/file-upload/components/file-upload-root.svelte
index e3ddb303e..0d8f88438 100644
--- a/src/uix/terra/file-upload/components/file-upload-root.svelte
+++ b/src/uix/terra/file-upload/components/file-upload-root.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # File Upload Root
+	 *
+	 * Componente raíz para la funcionalidad de carga de archivos.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <FileUploadRoot
+	 *   bind:files={uploadedFiles}
+	 *   accept="image/*"
+	 *   multiple
+	 *   onFilesChange={(files) => console.log(files)}
+	 * >
+	 *   <FileUploadTrigger>Seleccionar archivos</FileUploadTrigger>
+	 *   <FileUploadFileList />
+	 * </FileUploadRoot>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `files`: File[] - Lista de archivos cargados
+	 * - `onFilesChange`: (files: File[]) => void - Callback cuando cambia la lista
+	 * - `accept`: string - Tipos de archivos aceptados (ej: "image/*,.pdf")
+	 * - `maxSize`: number - Tamaño máximo en bytes
+	 * - `maxFiles`: number - Número máximo de archivos
+	 * - `multiple`: boolean - Permite selección múltiple
+	 * - `disabled`: boolean - Deshabilita el componente
+	 * - `onReject`: (rejections: FileRejection[]) => void - Callback para archivos rechazados
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-file-upload]                 → Contenedor raíz de carga de archivos
+	 * [data-disabled]                    → Estado cuando está deshabilitado
+	 * [data-dragging]                    → Estado durante arrastrar y soltar
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { FileUploadRootProps } from '../types';
@@ -7,34 +45,34 @@
 	const uid = $props.id();
 
 	let {
-		ref           = $bindable(null),
-		id            = createId(uid),
-		files         = $bindable<File[]>([]),
-		onFilesChange = noop,
-		accept        = '',
-		maxSize       = undefined,
-		maxFiles      = undefined,
-		multiple      = true,
-		disabled      = false,
-		onReject      = undefined,
-		children,
-		child,
-		...restProps
-	}: FileUploadRootProps = $props();
+	ref           = $bindable(null),
+	id            = createId(uid),
+	files         = $bindable<File[]>([]),
+	onFilesChange = noop,
+	accept        = '',
+	maxSize       = undefined,
+	maxFiles      = undefined,
+	multiple      = true,
+	disabled      = false,
+	onReject      = undefined,
+	children,
+	child,
+	...restProps
+}: FileUploadRootProps = $props();
 
 	// svelte-ignore state_referenced_locally
 	const rootState = FileUploadRootState.create({
-		id:            readableActive(() => id),
-		ref:           writableActive(() => ref, (v) => (ref = v)),
-		files:         writableActive(() => files, (v) => (files = v)),
-		onFilesChange: readableActive(() => onFilesChange),
-		accept:        readableActive(() => accept),
-		maxSize:       readableActive(() => maxSize),
-		maxFiles:      readableActive(() => maxFiles),
-		multiple:      readableActive(() => multiple),
-		disabled:      readableActive(() => disabled),
-		onReject:      readableActive(() => onReject),
-	});
+	id:            readableActive(() => id),
+	ref:           writableActive(() => ref, (v) => (ref = v)),
+	files:         writableActive(() => files, (v) => (files = v)),
+	onFilesChange: readableActive(() => onFilesChange),
+	accept:        readableActive(() => accept),
+	maxSize:       readableActive(() => maxSize),
+	maxFiles:      readableActive(() => maxFiles),
+	multiple:      readableActive(() => multiple),
+	disabled:      readableActive(() => disabled),
+	onReject:      readableActive(() => onReject),
+});
 
 	const mergedProps = $derived(mergeProps(restProps, rootState.props));
 </script>
@@ -46,3 +84,4 @@
 		{@render children?.()}
 	</div>
 {/if}
+
diff --git a/src/uix/terra/form/components/Form.Control.svelte b/src/uix/terra/form/components/Form.Control.svelte
index d440b081a..774f12d68 100644
--- a/src/uix/terra/form/components/Form.Control.svelte
+++ b/src/uix/terra/form/components/Form.Control.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Form Control
+	 *
+	 * Contenedor para elementos de control con props automáticas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form.Control>
+	 *   {#snippet children(props)}
+	 *     <input
+	 *       id={props.controlProps.id}
+	 *       name={props.controlProps.name}
+	 *       aria-invalid={props.controlProps['aria-invalid']}
+	 *       aria-describedby={props.controlProps['aria-describedby']}
+	 *     />
+	 *   {/snippet}
+	 * </Form.Control>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `controlProps`: Props automáticas para el control (id, name, aria-*)
+	 * - `wrapperProps`: Props para el contenedor
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-control]                → Contenedor del control
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormControlProps } from '../types';
 	import { FormControlState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Description.svelte b/src/uix/terra/form/components/Form.Description.svelte
index 8c92a8472..1b094a940 100644
--- a/src/uix/terra/form/components/Form.Description.svelte
+++ b/src/uix/terra/form/components/Form.Description.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Form Description
+	 *
+	 * Descripción del campo del formulario.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-description]       → Descripción del campo del formulario
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormDescriptionProps } from '../types';
 	import { FormDescriptionState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Error.svelte b/src/uix/terra/form/components/Form.Error.svelte
index 7fea8520d..0ec1aa13c 100644
--- a/src/uix/terra/form/components/Form.Error.svelte
+++ b/src/uix/terra/form/components/Form.Error.svelte
@@ -1,4 +1,28 @@
 <script lang="ts">
+	/**
+	 * # Form Error
+	 *
+	 * Mensaje de error para un campo de formulario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form.Error>Email inválido</Form.Error>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Se asocia automáticamente al campo padre
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-error]                 → Mensaje de error
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<p>` con role="alert".
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormErrorProps } from '../types';
 	import { FormErrorState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Field.svelte b/src/uix/terra/form/components/Form.Field.svelte
index 728b393d5..d1c2a47e1 100644
--- a/src/uix/terra/form/components/Form.Field.svelte
+++ b/src/uix/terra/form/components/Form.Field.svelte
@@ -1,4 +1,48 @@
 <script lang="ts">
+	/**
+	 * # Form Field
+	 *
+	 * Campo de formulario con estado de validación y metadata.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form.Field name="email" invalid={hasError} required>
+	 *   <Form.Label>Email</Form.Label>
+	 *   <Form.Control>
+	 *     <input type="email" bind:value={email} />
+	 *   </Form.Control>
+	 *   <Form.Error>Email inválido</Form.Error>
+	 *   <Form.Description>Tu correo electrónico</Form.Description>
+	 * </Form.Field>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `name`: string - Nombre del campo
+	 * - `invalid`: boolean - Si el campo tiene error
+	 * - `disabled`: boolean - Deshabilita el campo
+	 * - `readonly`: boolean - Solo lectura
+	 * - `required`: boolean - Campo requerido
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `name`: string - Nombre del campo
+	 * - `isInvalid`: boolean - Si el campo es inválido
+	 * - `isDisabled`: boolean - Si el campo está deshabilitado
+	 * - `isReadonly`: boolean - Si el campo es solo lectura
+	 * - `isRequired`: boolean - Si el campo es requerido
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-field]             → Campo del formulario
+	 * [data-invalid]                → Campo inválido
+	 * [data-disabled]               → Campo deshabilitado
+	 * [data-readonly]               → Campo solo lectura
+	 * [data-required]               → Campo requerido
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos de estado.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormFieldProps } from '../types';
 	import { FormFieldState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Label.svelte b/src/uix/terra/form/components/Form.Label.svelte
index efc837eba..061b088e6 100644
--- a/src/uix/terra/form/components/Form.Label.svelte
+++ b/src/uix/terra/form/components/Form.Label.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+	/**
+	 * # Form Label
+	 *
+	 * Etiqueta para un campo de formulario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form.Label>Email</Form.Label>
+	 * <Form.Control>
+	 *   <input type="email" />
+	 * </Form.Control>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Muestra asterisco (*) cuando el campo es required
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-label]                 → Etiqueta del formulario
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<label>`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormLabelProps } from '../types';
 	import { FormLabelState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Root.svelte b/src/uix/terra/form/components/Form.Root.svelte
index 3cd7e1ed5..8f59d2bed 100644
--- a/src/uix/terra/form/components/Form.Root.svelte
+++ b/src/uix/terra/form/components/Form.Root.svelte
@@ -1,4 +1,45 @@
 <script lang="ts">
+	/**
+	 * # Form Root
+	 *
+	 * Componente raíz de formulario que provee estado y contexto.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form disabled={false} pending={isSubmitting}>
+	 *   <Form.Field name="email" required>
+	 *     <Form.Label>Email</Form.Label>
+	 *     <Form.Control>
+	 *       <input type="email" bind:value={email} />
+	 *     </Form.Control>
+	 *     <Form.Error>El email es inválido</Form.Error>
+	 *   </Form.Field>
+	 *   <Form.Submit>Enviar</Form.Submit>
+	 * </Form>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita todo el formulario
+	 * - `readonly`: boolean - Solo lectura
+	 * - `pending`: boolean - Estado de carga (enviando)
+	 * - `id`: string - ID del formulario
+	 *
+	 * ## Snippet Props
+	 * - `isDisabled`: boolean - Si el formulario está deshabilitado
+	 * - `isReadonly`: boolean - Si el formulario es solo lectura
+	 * - `isPending`: boolean - Si el formulario está enviando
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form]                   → Elemento raíz del formulario
+	 * [data-disabled]               → Formulario deshabilitado
+	 * [data-readonly]               → Formulario solo lectura
+	 * [data-pending]                → Formulario enviando
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<form>` con atributos de estado.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormRootProps } from '../types';
 	import { FormRootState } from '../form.svelte';
diff --git a/src/uix/terra/form/components/Form.Submit.svelte b/src/uix/terra/form/components/Form.Submit.svelte
index 857eec988..9786d7c84 100644
--- a/src/uix/terra/form/components/Form.Submit.svelte
+++ b/src/uix/terra/form/components/Form.Submit.svelte
@@ -1,4 +1,41 @@
 <script lang="ts">
+	/**
+	 * # Form Submit
+	 *
+	 * Botón de envío de formulario con estado automático.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Form.Submit>
+	 *   {#snippet children(props)}
+	 *     {#if props.isPending}
+	 *       Enviando...
+	 *     {:else}
+	 *       Enviar
+	 *     {/if}
+	 *   {/snippet}
+	 * </Form.Submit>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Se deshabilita automáticamente cuando el formulario está disabled o pending
+	 *
+	 * ## Snippet Props
+	 * - `isDisabled`: boolean - Si el botón está deshabilitado
+	 * - `isPending`: boolean - Si el formulario está enviando
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-form-submit]            → Botón de envío del formulario
+	 * [data-disabled]               → Botón deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button type="submit">`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { FormSubmitProps } from '../types';
 	import { FormSubmitState } from '../form.svelte';
diff --git a/src/uix/terra/label/components/label.svelte b/src/uix/terra/label/components/label.svelte
index 14247cf6c..e1a7dc92c 100644
--- a/src/uix/terra/label/components/label.svelte
+++ b/src/uix/terra/label/components/label.svelte
@@ -1,4 +1,30 @@
 <script lang="ts">
+	/**
+	 * # Label Root
+	 *
+	 * Etiqueta accesible que puede asociarse a un elemento del formulario.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Label for="email">Email</Label>
+	 * <input id="email" type="email" />
+	 *
+	 * <!-- Con bind -->
+	 * <Label bind:this={labelEl}>Nombre</Label>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `for`: string - ID del elemento asociado
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-label]                     → Etiqueta
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<label>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { LabelRootProps } from "../types";
 	import { LabelRootState } from "../label.svelte";
diff --git a/src/uix/terra/layers/floating/use-floating-layer.svelte.ts b/src/uix/terra/layers/floating/use-floating-layer.svelte.ts
index 9e0a5f727..baf1818a3 100644
--- a/src/uix/terra/layers/floating/use-floating-layer.svelte.ts
+++ b/src/uix/terra/layers/floating/use-floating-layer.svelte.ts
@@ -208,11 +208,11 @@ export class FloatingContentState {
 						: "translate(0, -200%)",
 					minWidth: "max-content",
 					zIndex: this.contentZIndex,
-					"--bits-floating-transform-origin": `${this.floating.middlewareData.current.transformOrigin?.x} ${this.floating.middlewareData.current.transformOrigin?.y}`,
-					"--bits-floating-available-width": `${this.availableWidth}px`,
-					"--bits-floating-available-height": `${this.availableHeight}px`,
-					"--bits-floating-anchor-width": `${this.anchorWidth}px`,
-					"--bits-floating-anchor-height": `${this.anchorHeight}px`,
+					"--terra-floating-transform-origin": `${this.floating.middlewareData.current.transformOrigin?.x} ${this.floating.middlewareData.current.transformOrigin?.y}`,
+					"--terra-floating-available-width": `${this.availableWidth}px`,
+					"--terra-floating-available-height": `${this.availableHeight}px`,
+					"--terra-floating-anchor-width": `${this.anchorWidth}px`,
+					"--terra-floating-anchor-height": `${this.anchorHeight}px`,
 					// hide the content if using the hide middleware and should be hidden
 					...(this.floating.middlewareData.current.hide?.referenceHidden && {
 						visibility: "hidden",
diff --git a/src/uix/terra/link-preview/components/link-preview-content-static.svelte b/src/uix/terra/link-preview/components/link-preview-content-static.svelte
index 4bea7ee7e..7026804fc 100644
--- a/src/uix/terra/link-preview/components/link-preview-content-static.svelte
+++ b/src/uix/terra/link-preview/components/link-preview-content-static.svelte
@@ -1,4 +1,27 @@
 <script lang="ts">
+	/**
+	 * # Link Preview Content Static
+	 *
+	 * Contenido estático para la previsualización de enlaces.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <LinkPreview>
+	 *   <LinkPreviewTrigger>
+	 *     <a href="https://example.com">Hover me</a>
+	 *   </LinkPreviewTrigger>
+	 *   <LinkPreviewContentStatic>
+	 *     Preview content
+	 *   </LinkPreviewContentStatic>
+	 * </LinkPreview>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-link-preview-content-static] → Contenedor estático del contenido de la previsualización
+	 * [data-state="open"]            → Estado cuando la previsualización está abierta
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { LinkPreviewContentStaticProps } from '../types';
 	import { LinkPreviewContentState } from '../link-preview.svelte';
diff --git a/src/uix/terra/link-preview/components/link-preview-content.svelte b/src/uix/terra/link-preview/components/link-preview-content.svelte
index a665f86c9..bbb7d6330 100644
--- a/src/uix/terra/link-preview/components/link-preview-content.svelte
+++ b/src/uix/terra/link-preview/components/link-preview-content.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Link Preview Content
+	 *
+	 * Contenido de la previsualización del enlace.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <LinkPreview.Content side="top">
+	 *   <h1>Título del artículo</h1>
+	 *   <p>Descripción...</p>
+	 * </LinkPreview.Content>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición
+	 * - `align`: "start" | "center" | "end" - Alineación
+	 * - `sideOffset`: number - Distancia desde el elemento
+	 * - `forceMount`: boolean - Forzar renderizado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-link-preview-content]       → Contenido de la preview
+	 * [data-state="open"]               → Estado abierto
+	 * [data-state="closed"]             → Estado cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` posicionado.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { Direction }  from '$terra/utils';
 	import type { LinkPreviewContentProps } from '../types';
diff --git a/src/uix/terra/link-preview/components/link-preview-trigger.svelte b/src/uix/terra/link-preview/components/link-preview-trigger.svelte
index f80b08f5b..6b6d5957b 100644
--- a/src/uix/terra/link-preview/components/link-preview-trigger.svelte
+++ b/src/uix/terra/link-preview/components/link-preview-trigger.svelte
@@ -1,4 +1,29 @@
 <script lang="ts">
+	/**
+	 * # Link Preview Trigger
+	 *
+	 * Elemento que activa la previsualización al hover.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <LinkPreview.Trigger href="/article">
+	 *   Leer artículo
+	 * </LinkPreview.Trigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-link-preview-trigger]       → Trigger de la preview
+	 * [data-state="open"]               → Estado abierto
+	 * [data-state="closed"]             → Estado cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<a>`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { LinkPreviewTriggerProps } from '../types';
 	import { LinkPreviewTriggerState } from '../link-preview.svelte';
diff --git a/src/uix/terra/link-preview/components/link-preview.svelte b/src/uix/terra/link-preview/components/link-preview.svelte
index 16980d0d6..8360c58b9 100644
--- a/src/uix/terra/link-preview/components/link-preview.svelte
+++ b/src/uix/terra/link-preview/components/link-preview.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Link Preview
+	 *
+	 * Contenedor raíz para la previsualización de enlaces.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <LinkPreview>
+	 *   <LinkPreview.Trigger href="/article">
+	 *     Leer artículo
+	 *   </LinkPreview.Trigger>
+	 *   <LinkPreview.Content>
+	 *     <h1>Título del artículo</h1>
+	 *     <p>Descripción...</p>
+	 *   </LinkPreview.Content>
+	 * </LinkPreview>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado abierto (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `openDelay`: number - Retraso para abrir (default: 700)
+	 * - `closeDelay`: number - Retraso para cerrar (default: 300)
+	 * - `disabled`: boolean - Deshabilita la previsualización
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * ```
+	 */
 	import { readableActive, writableActive }  from '$terra/utils';
 	import type { LinkPreviewRootProps } from '../types';
 	import { LinkPreviewRootState } from '../link-preview.svelte';
diff --git a/src/uix/terra/menu/components/menu-arrow.svelte b/src/uix/terra/menu/components/menu-arrow.svelte
index 4a2e273c2..f8c727ba1 100644
--- a/src/uix/terra/menu/components/menu-arrow.svelte
+++ b/src/uix/terra/menu/components/menu-arrow.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Menu Arrow
+	 *
+	 * Flecha visual que apunta hacia el elemento trigger.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-arrow]             → Flecha del menú
+	 * [data-dropdown-menu-arrow]    → Flecha específica para dropdown menu
+	 * [data-context-menu-arrow]     → Flecha específica para context menu
+	 * ```
+	 */
 	import { mergeProps } from "$terra/utils";
 	import type { MenuArrowProps } from "../types";
 	import { MenuArrowState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-checkbox-group.svelte b/src/uix/terra/menu/components/menu-checkbox-group.svelte
index 61394c742..67ba41076 100644
--- a/src/uix/terra/menu/components/menu-checkbox-group.svelte
+++ b/src/uix/terra/menu/components/menu-checkbox-group.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Menu Checkbox Group
+	 *
+	 * Grupo de items de checkbox en un menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-checkbox-group]    → Grupo de checkboxes del menú
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuCheckboxGroupProps } from "../types";
 	import { MenuCheckboxGroupState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-checkbox-item.svelte b/src/uix/terra/menu/components/menu-checkbox-item.svelte
index 0e0e17f90..91b2bc24e 100644
--- a/src/uix/terra/menu/components/menu-checkbox-item.svelte
+++ b/src/uix/terra/menu/components/menu-checkbox-item.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Menu Checkbox Item
+	 *
+	 * Item de checkbox dentro de un menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-checkbox-item]     → Item de checkbox del menú
+	 * [data-state="checked"]         → Estado marcado
+	 * [data-state="unchecked"]       → Estado desmarcado
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuCheckboxItemProps } from "../types";
 	import { MenuCheckboxGroupState, MenuCheckboxItemState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-content.svelte b/src/uix/terra/menu/components/menu-content.svelte
index dd503a6b1..6d996acb8 100644
--- a/src/uix/terra/menu/components/menu-content.svelte
+++ b/src/uix/terra/menu/components/menu-content.svelte
@@ -1,4 +1,41 @@
 <script lang="ts">
+	/**
+	 * # Menu Content
+	 *
+	 * Contenedor del contenido del menú desplegable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <MenuContent side="bottom" align="start" sideOffset={4}>
+	 *   <MenuItem>Opción 1</MenuItem>
+	 *   <MenuSeparator />
+	 *   <MenuItem>Opción 2</MenuItem>
+	 * </MenuContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición
+	 * - `align`: "start" | "center" | "end" - Alineación
+	 * - `sideOffset`: number - Distancia desde el trigger
+	 * - `loop`: boolean - Navegación cíclica
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `preventScroll`: boolean - Previene scroll del body
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-dropdown-menu-content]     → Dropdown menu
+	 * [data-context-menu-content]      → Context menu
+	 * [data-menu-content]              → Menubar menu
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` posicionado con Popper.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuContentProps } from '../types';
 	import { MenuContentState } from '../menu.svelte';
@@ -55,7 +92,7 @@
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		if (e.target && e.target instanceof Element) {
-			const subContentSelector = `[${contentState.parentMenu.root.getBitsAttr('sub-content')}]`;
+			const subContentSelector = `[${contentState.parentMenu.root.getTerraAttr('sub-content')}]`;
 			if (e.target.closest(subContentSelector)) return;
 		}
 		contentState.parentMenu.onClose();
diff --git a/src/uix/terra/menu/components/menu-group-heading.svelte b/src/uix/terra/menu/components/menu-group-heading.svelte
index f2011aa26..d499f210a 100644
--- a/src/uix/terra/menu/components/menu-group-heading.svelte
+++ b/src/uix/terra/menu/components/menu-group-heading.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Menu Group Heading
+	 *
+	 * Encabezado para un grupo de items en un menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-group-heading]     → Encabezado del grupo del menú
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuGroupHeadingProps } from "../types";
 	import { MenuGroupHeadingState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-group.svelte b/src/uix/terra/menu/components/menu-group.svelte
index 99bee15d0..9a632dffe 100644
--- a/src/uix/terra/menu/components/menu-group.svelte
+++ b/src/uix/terra/menu/components/menu-group.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Menu Group
+	 *
+	 * Grupo de items relacionados en un menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-group]             → Grupo de items del menú
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuGroupProps } from "../types";
 	import { MenuGroupState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-item.svelte b/src/uix/terra/menu/components/menu-item.svelte
index b7cc43278..157d07e97 100644
--- a/src/uix/terra/menu/components/menu-item.svelte
+++ b/src/uix/terra/menu/components/menu-item.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Menu Item
+	 *
+	 * Opción seleccionable dentro de un menú.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <MenuItem onSelect={() => console.log('seleccionado')} closeOnSelect={true}>
+	 *   Opción 1
+	 * </MenuItem>
+	 *
+	 * <MenuItem disabled>Opción deshabilitada</MenuItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el item
+	 * - `onSelect`: Callback al seleccionar el item
+	 * - `closeOnSelect`: boolean - Cierra el menú al seleccionar
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-dropdown-menu-item]        → Item de dropdown
+	 * [data-context-menu-item]         → Item de contexto
+	 * [data-menu-item]                 → Item genérico
+	 * [data-highlighted]               → Item highlighteado
+	 * [data-disabled]                  → Item deshabilitado
+	 * [data-orientation="horizontal"]  → Orientación del item
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="menuitem">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuItemProps } from "../types";
 	import { MenuItemState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-radio-group.svelte b/src/uix/terra/menu/components/menu-radio-group.svelte
index 8c21543ef..659079050 100644
--- a/src/uix/terra/menu/components/menu-radio-group.svelte
+++ b/src/uix/terra/menu/components/menu-radio-group.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-radio-group]        → Grupo de items de radio del menú
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuRadioGroupProps } from "../types";
diff --git a/src/uix/terra/menu/components/menu-radio-item.svelte b/src/uix/terra/menu/components/menu-radio-item.svelte
index d366a63b9..d30815609 100644
--- a/src/uix/terra/menu/components/menu-radio-item.svelte
+++ b/src/uix/terra/menu/components/menu-radio-item.svelte
@@ -1,3 +1,11 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-radio-item]         → Item de radio del menú
+ * [data-state="checked"]         → Estado cuando el item está seleccionado
+ * [data-state="unchecked"]       → Estado cuando el item no está seleccionado
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuRadioItemProps } from "../types";
diff --git a/src/uix/terra/menu/components/menu-separator.svelte b/src/uix/terra/menu/components/menu-separator.svelte
index 69d2e0c82..ec0884a49 100644
--- a/src/uix/terra/menu/components/menu-separator.svelte
+++ b/src/uix/terra/menu/components/menu-separator.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Menu Separator
+	 *
+	 * Separador visual entre secciones de un menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menu-separator]         → Separador del menú
+	 * [data-dropdown-menu-separator]→ Separador específico para dropdown menu
+	 * [data-context-menu-separator] → Separador específico para context menu
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuSeparatorProps } from "../types";
 	import { MenuSeparatorState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/components/menu-sub-content.svelte b/src/uix/terra/menu/components/menu-sub-content.svelte
index e25cec34f..1a1b47242 100644
--- a/src/uix/terra/menu/components/menu-sub-content.svelte
+++ b/src/uix/terra/menu/components/menu-sub-content.svelte
@@ -1,3 +1,11 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-sub-content]        → Contenido del submenú
+ * [data-state="open"]            → Estado del submenú cuando está abierto
+ * [data-state="closed"]          → Estado del submenú cuando está cerrado
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuSubContentProps } from '../types';
@@ -61,7 +69,7 @@
 		}
 	}
 
-	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr('sub-content'));
+	const dataAttr = $derived(subContentState.parentMenu.root.getTerraAttr('sub-content'));
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, { onkeydown, [dataAttr]: '' })
 	);
diff --git a/src/uix/terra/menu/components/menu-sub-trigger.svelte b/src/uix/terra/menu/components/menu-sub-trigger.svelte
index bfc6d8a00..d3d8794c2 100644
--- a/src/uix/terra/menu/components/menu-sub-trigger.svelte
+++ b/src/uix/terra/menu/components/menu-sub-trigger.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-sub-trigger]        → Elemento trigger del submenú
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuSubTriggerProps } from "../types";
diff --git a/src/uix/terra/menu/components/menu-sub.svelte b/src/uix/terra/menu/components/menu-sub.svelte
index cccb78986..5d6801884 100644
--- a/src/uix/terra/menu/components/menu-sub.svelte
+++ b/src/uix/terra/menu/components/menu-sub.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-sub]                → Contenedor del submenú
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive } from "$terra/utils";
 	import type { MenuSubProps } from "../types";
diff --git a/src/uix/terra/menu/components/menu-trigger.svelte b/src/uix/terra/menu/components/menu-trigger.svelte
index 567678ee6..4cdd22eb0 100644
--- a/src/uix/terra/menu/components/menu-trigger.svelte
+++ b/src/uix/terra/menu/components/menu-trigger.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-trigger]            → Elemento trigger del menu
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenuTriggerProps } from "../types";
diff --git a/src/uix/terra/menu/components/menu.svelte b/src/uix/terra/menu/components/menu.svelte
index 8a816a1af..cf1578b50 100644
--- a/src/uix/terra/menu/components/menu.svelte
+++ b/src/uix/terra/menu/components/menu.svelte
@@ -1,4 +1,54 @@
 <script lang="ts">
+	/**
+	 * # Menu Root
+	 *
+	 * Componente raíz para menús desplegables.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Menu bind:open={isOpen}>
+	 *   <MenuTrigger>
+	 *     <button>Abrir menú</button>
+	 *   </MenuTrigger>
+	 *   <MenuContent>
+	 *     <MenuItem onSelect={() => console.log('acción 1')}>Opción 1</MenuItem>
+	 *     <MenuItem onSelect={() => console.log('acción 2')}>Opción 2</MenuItem>
+	 *   </MenuContent>
+	 * </Menu>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado del menú (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `dir`: "ltr" | "rtl" - Dirección del texto
+	 *
+	 * ## Selectores CSS (Dropdown Menu)
+	 * ```
+	 * [data-dropdown-menu-content]     → Contenedor del menú
+	 * [data-state="open"]              → Menú abierto
+	 * [data-state="closed"]            → Menú cerrado
+	 * [data-dropdown-menu-item]        → Item del menú
+	 * [data-highlighted]               → Item highlighteado
+	 * [data-disabled]                  → Item deshabilitado
+	 * [data-orientation="horizontal"]  → Item con orientación
+	 * [data-dropdown-menu-separator]   → Separador visual
+	 * ```
+	 *
+	 * ## Selectores CSS (Context Menu)
+	 * ```
+	 * [data-context-menu-content]      → Contenedor del menú contextual
+	 * [data-context-menu-item]         → Item del menú contextual
+	 * [data-context-menu-separator]    → Separador visual
+	 * ```
+	 *
+	 * ## Selectores CSS (Menubar)
+	 * ```
+	 * [data-menubar]                   → Barra de menú
+	 * [data-menubar-trigger]           → Trigger de menú
+	 * [data-menu-content]              → Contenido del menú
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import type { MenuRootProps } from "../types";
 	import { MenuMenuState, MenuRootState } from "../menu.svelte";
diff --git a/src/uix/terra/menu/menu.svelte.ts b/src/uix/terra/menu/menu.svelte.ts
index ed531529a..2c72b56cf 100644
--- a/src/uix/terra/menu/menu.svelte.ts
+++ b/src/uix/terra/menu/menu.svelte.ts
@@ -110,7 +110,7 @@ export class MenuRootState {
 		this.opts = opts;
 	}
 
-	getBitsAttr(part: Parameters<typeof menuAttrs.getAttr>[0]): string {
+	getTerraAttr(part: Parameters<typeof menuAttrs.getAttr>[0]): string {
 		return menuAttrs.getAttr(part, this.opts.variant.current);
 	}
 }
@@ -223,7 +223,7 @@ export class MenuContentState {
 				this.parentMenu.opts.open.current &&
 				Boolean(
 					this.parentMenu.triggerNode?.hasAttribute(
-						this.parentMenu.root.getBitsAttr("sub-trigger")
+						this.parentMenu.root.getTerraAttr("sub-trigger")
 					)
 				),
 			onPointerExit: () => {
@@ -241,7 +241,7 @@ export class MenuContentState {
 
 		this.rovingFocusGroup = new RovingFocusGroup({
 			rootNode: readableActive(() => this.parentMenu.contentNode),
-			candidateAttr: this.parentMenu.root.getBitsAttr("item"),
+			candidateAttr: this.parentMenu.root.getTerraAttr("item"),
 			loop: this.opts.loop,
 			orientation: readableActive(() => "vertical"),
 		});
@@ -272,7 +272,7 @@ export class MenuContentState {
 		if (!node) return [];
 		return Array.from(
 			node.querySelectorAll<HTMLElement>(
-				`[${this.parentMenu.root.getBitsAttr("item")}]:not([data-disabled])`
+				`[${this.parentMenu.root.getTerraAttr("item")}]:not([data-disabled])`
 			)
 		);
 	}
@@ -326,7 +326,7 @@ export class MenuContentState {
 		if (!isHTMLElement(target) || !isHTMLElement(currentTarget)) return;
 
 		const isKeydownInside =
-			target.closest(`[${this.parentMenu.root.getBitsAttr("content")}]`)?.id ===
+			target.closest(`[${this.parentMenu.root.getTerraAttr("content")}]`)?.id ===
 			this.parentMenu.contentId.current;
 
 		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
@@ -374,7 +374,7 @@ export class MenuContentState {
 	}
 
 	onItemLeave(e: TerraPointerEvent) {
-		if (e.currentTarget.hasAttribute(this.parentMenu.root.getBitsAttr("sub-trigger"))) return;
+		if (e.currentTarget.hasAttribute(this.parentMenu.root.getTerraAttr("sub-trigger"))) return;
 		if (this.isPointerMovingToSubmenu() || this.parentMenu.root.isUsingKeyboard.current)
 			return;
 		const contentNode = this.parentMenu.contentNode;
@@ -411,7 +411,7 @@ export class MenuContentState {
 				id: this.opts.id.current,
 				role: "menu",
 				"aria-orientation": "vertical" as const,
-				[this.parentMenu.root.getBitsAttr("content")]: "",
+				[this.parentMenu.root.getTerraAttr("content")]: "",
 				"data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
 				onkeydown: this.onkeydown,
 				onblur: this.onblur,
@@ -493,7 +493,7 @@ class MenuItemSharedState {
 				"aria-disabled": boolToStr(this.opts.disabled.current),
 				"data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
 				"data-highlighted": boolToEmptyStrOrUndef(this.isFocused),
-				[this.content.parentMenu.root.getBitsAttr("item")]: "",
+				[this.content.parentMenu.root.getTerraAttr("item")]: "",
 				onpointermove: this.onpointermove,
 				onpointerleave: this.onpointerleave,
 				onfocus: this.onfocus,
@@ -681,7 +681,7 @@ export class MenuSubTriggerState {
 				"aria-controls": this.submenu.opts.open.current
 					? this.submenu.contentId.current
 					: undefined,
-				[this.submenu.root.getBitsAttr("sub-trigger")]: "",
+				[this.submenu.root.getTerraAttr("sub-trigger")]: "",
 				onclick: this.onclick,
 				onpointermove: this.onpointermove,
 				onpointerleave: this.onpointerleave,
@@ -773,7 +773,7 @@ export class MenuCheckboxItemState {
 					this.opts.indeterminate.current
 				),
 				"data-state": getCheckedState(this.opts.checked.current),
-				[this.item.root.getBitsAttr("checkbox-item")]: "",
+				[this.item.root.getTerraAttr("checkbox-item")]: "",
 			}) as const
 	);
 }
@@ -804,7 +804,7 @@ export class MenuGroupState {
 				id: this.opts.id.current,
 				role: "group",
 				"aria-labelledby": this.groupHeadingId,
-				[this.root.getBitsAttr("group")]: "",
+				[this.root.getTerraAttr("group")]: "",
 				...this.attachment,
 			}) as const
 	);
@@ -841,7 +841,7 @@ export class MenuGroupHeadingState {
 			({
 				id: this.opts.id.current,
 				role: "group",
-				[this.group.root.getBitsAttr("group-heading")]: "",
+				[this.group.root.getTerraAttr("group-heading")]: "",
 				...this.attachment,
 			}) as const
 	);
@@ -871,7 +871,7 @@ export class MenuSeparatorState {
 			({
 				id: this.opts.id.current,
 				role: "separator",
-				[this.root.getBitsAttr("separator")]: "",
+				[this.root.getTerraAttr("separator")]: "",
 				...this.attachment,
 			}) as const
 	);
@@ -893,7 +893,7 @@ export class MenuArrowState {
 	readonly props = $derived.by(
 		() =>
 			({
-				[this.root.getBitsAttr("arrow")]: "",
+				[this.root.getTerraAttr("arrow")]: "",
 			}) as const
 	);
 }
@@ -936,7 +936,7 @@ export class MenuRadioGroupState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("radio-group")]: "",
+				[this.root.getTerraAttr("radio-group")]: "",
 				role: "group",
 				"aria-labelledby": this.groupHeadingId,
 				...this.attachment,
@@ -983,7 +983,7 @@ export class MenuRadioItemState {
 	readonly props = $derived.by(
 		() =>
 			({
-				[this.group.root.getBitsAttr("radio-item")]: "",
+				[this.group.root.getTerraAttr("radio-item")]: "",
 				...this.item.props,
 				role: "menuitemradio",
 				"aria-checked": getAriaChecked(this.isChecked, false),
@@ -1068,7 +1068,7 @@ export class DropdownMenuTriggerState {
 				"aria-controls": this.ariaControls,
 				"data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
 				"data-state": getDataOpenClosed(this.parentMenu.opts.open.current),
-				[this.parentMenu.root.getBitsAttr("trigger")]: "",
+				[this.parentMenu.root.getTerraAttr("trigger")]: "",
 				onclick: this.onclick,
 				onpointerdown: this.onpointerdown,
 				onpointerup: this.onpointerup,
@@ -1244,7 +1244,7 @@ export class MenuCheckboxGroupState {
 		() =>
 			({
 				id: this.opts.id.current,
-				[this.root.getBitsAttr("checkbox-group")]: "",
+				[this.root.getTerraAttr("checkbox-group")]: "",
 				role: "group",
 				"aria-labelledby": this.groupHeadingId,
 				...this.attachment,
diff --git a/src/uix/terra/menubar/components/menubar-content.svelte b/src/uix/terra/menubar/components/menubar-content.svelte
index a72de4def..0f1f7bcd7 100644
--- a/src/uix/terra/menubar/components/menubar-content.svelte
+++ b/src/uix/terra/menubar/components/menubar-content.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menu-content]            → Contenido del menú en la barra
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MenubarContentProps } from '../types';
diff --git a/src/uix/terra/menubar/components/menubar-menu.svelte b/src/uix/terra/menubar/components/menubar-menu.svelte
index 7f85b9dda..d270cae93 100644
--- a/src/uix/terra/menubar/components/menubar-menu.svelte
+++ b/src/uix/terra/menubar/components/menubar-menu.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Menubar Menu
+	 *
+	 * Menú individual dentro de una barra de menús.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Menubar>
+	 *   <MenubarMenu value="file">
+	 *     <MenubarTrigger>Archivo</MenubarTrigger>
+	 *     <MenubarContent>
+	 *       <MenuItem onselect={() => console.log('nuevo')}>Nuevo</MenuItem>
+	 *     </MenubarContent>
+	 *   </MenubarMenu>
+	 * </Menubar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Identificador único del menú
+	 * - `onOpenChange`: Callback cuando se abre/cierra
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-menubar]                   → Barra de menú
+	 * [data-menubar-trigger]           → Trigger de menú
+	 * [data-state="open"]              → Menú abierto
+	 * [data-state="closed"]            → Menú cerrado
+	 * [data-highlighted]               → Trigger con hover o foco
+	 * [data-disabled]                  → Trigger deshabilitado
+	 * [data-menu-value]                → Valor del menú
+	 * [data-menu-content]              → Contenido del menú
+	 * ```
+	 */
 	import { readableActive, useId } from "$terra/utils";
 	import type { MenubarMenuProps } from "../types";
 	import { MenubarMenuState } from "../menubar.svelte";
diff --git a/src/uix/terra/menubar/components/menubar-trigger.svelte b/src/uix/terra/menubar/components/menubar-trigger.svelte
index 4d9850bd9..3c62b8668 100644
--- a/src/uix/terra/menubar/components/menubar-trigger.svelte
+++ b/src/uix/terra/menubar/components/menubar-trigger.svelte
@@ -1,3 +1,14 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menubar-trigger]         → Elemento trigger del menú en la barra
+ * [data-state="open"]            → Estado cuando el menú está abierto
+ * [data-state="closed"]          → Estado cuando el menú está cerrado
+ * [data-highlighted]             → Estado cuando el item está resaltado
+ * [data-disabled]                → Estado cuando el trigger está deshabilitado
+ * [data-menu-value]              → Valor del menú asociado
+ * ```
+ -->
 <script lang="ts">
 	import { attachRef, readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { MenubarTriggerProps } from "../types";
diff --git a/src/uix/terra/menubar/components/menubar.svelte b/src/uix/terra/menubar/components/menubar.svelte
index 13d34dd85..a26919bc4 100644
--- a/src/uix/terra/menubar/components/menubar.svelte
+++ b/src/uix/terra/menubar/components/menubar.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-menubar]                 → Contenedor raíz de la barra de menú
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps, useId } from "$terra/utils";
 	import type { MenubarRootProps } from "../types";
diff --git a/src/uix/terra/meter/components/meter.svelte b/src/uix/terra/meter/components/meter.svelte
index 4adaafe46..80b687d62 100644
--- a/src/uix/terra/meter/components/meter.svelte
+++ b/src/uix/terra/meter/components/meter.svelte
@@ -1,4 +1,32 @@
 <script lang="ts">
+	/**
+	 * # Meter Root
+	 *
+	 * Medidor gráfico dentro de un rango (gauge).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Meter value={75} min={0} max={100} />
+	 *
+	 * <Meter value={0.7} min={0} max={1}>
+	 *   <div class="gauge">70%</div>
+	 * </Meter>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: number - Valor actual del medidor
+	 * - `max`: number - Valor máximo (default: 100)
+	 * - `min`: number - Valor mínimo (default: 0)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-meter]                    → Contenedor del medidor
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="meter">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { MeterRootProps } from "../types";
 	import { MeterRootState } from "../meter.svelte";
diff --git a/src/uix/terra/number-field/components/number-field-decrement.svelte b/src/uix/terra/number-field/components/number-field-decrement.svelte
index 4f277f2da..b952890d2 100644
--- a/src/uix/terra/number-field/components/number-field-decrement.svelte
+++ b/src/uix/terra/number-field/components/number-field-decrement.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Number Field Decrement
+	 *
+	 * Botón para decrementar el valor numérico.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-number-field-decrement]    → Botón de decremento
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { NumberFieldDecrementProps } from '../types';
 	import { NumberFieldDecrementState } from '../number-field.svelte';
diff --git a/src/uix/terra/number-field/components/number-field-increment.svelte b/src/uix/terra/number-field/components/number-field-increment.svelte
index 3560ac7c9..3b58cf977 100644
--- a/src/uix/terra/number-field/components/number-field-increment.svelte
+++ b/src/uix/terra/number-field/components/number-field-increment.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Number Field Increment
+	 *
+	 * Botón para incrementar el valor numérico.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-number-field-increment]    → Botón de incremento
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { NumberFieldIncrementProps } from '../types';
 	import { NumberFieldIncrementState } from '../number-field.svelte';
diff --git a/src/uix/terra/number-field/components/number-field-input.svelte b/src/uix/terra/number-field/components/number-field-input.svelte
index c3fe44d83..d246e2268 100644
--- a/src/uix/terra/number-field/components/number-field-input.svelte
+++ b/src/uix/terra/number-field/components/number-field-input.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Number Field Input
+	 *
+	 * Campo de entrada para valores numéricos.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-number-field-input]        → Input del campo numérico
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { NumberFieldInputProps } from '../types';
 	import { NumberFieldInputState, NumberFieldRootState } from '../number-field.svelte';
diff --git a/src/uix/terra/number-field/components/number-field-label.svelte b/src/uix/terra/number-field/components/number-field-label.svelte
index 9332592ce..90911202c 100644
--- a/src/uix/terra/number-field/components/number-field-label.svelte
+++ b/src/uix/terra/number-field/components/number-field-label.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Number Field Label
+	 *
+	 * Etiqueta para el campo numérico.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-number-field-label]        → Etiqueta del campo numérico
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { NumberFieldLabelProps } from '../types';
 	import { NumberFieldLabelState } from '../number-field.svelte';
diff --git a/src/uix/terra/number-field/components/number-field-root.svelte b/src/uix/terra/number-field/components/number-field-root.svelte
index 3fd8ffdfe..55f2d4d74 100644
--- a/src/uix/terra/number-field/components/number-field-root.svelte
+++ b/src/uix/terra/number-field/components/number-field-root.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Number Field Root
+	 *
+	 * Componente raíz del campo numérico.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-number-field]              → Contenedor del campo numérico
+	 * [data-disabled]                  → Estado deshabilitado
+	 * [data-readonly]                  → Estado de solo lectura
+	 * ```
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive } from '$terra/utils';
 	import type { NumberFieldRootProps } from '../types';
diff --git a/src/uix/terra/pagination/components/pagination-next-button.svelte b/src/uix/terra/pagination/components/pagination-next-button.svelte
index 00d35db35..082f2d187 100644
--- a/src/uix/terra/pagination/components/pagination-next-button.svelte
+++ b/src/uix/terra/pagination/components/pagination-next-button.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # Pagination Next Button
+	 *
+	 * Botón de navegación para ir a la página siguiente.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pagination-item]           → Elemento de paginación
+	 * [data-type="next"]               → Tipo: botón siguiente
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PaginationNextButtonProps } from "../types";
 	import { PaginationNextButtonState } from "../pagination.svelte";
diff --git a/src/uix/terra/pagination/components/pagination-page.svelte b/src/uix/terra/pagination/components/pagination-page.svelte
index 03c6c44b9..f872fa380 100644
--- a/src/uix/terra/pagination/components/pagination-page.svelte
+++ b/src/uix/terra/pagination/components/pagination-page.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Pagination Page
+	 *
+	 * Botón de página individual en la paginación.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pagination-item]           → Elemento de paginación
+	 * [data-type="page"]               → Tipo: botón de página
+	 * [data-selected]                  → Página actualmente seleccionada
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PaginationPageProps } from "../types";
 	import { PaginationPageState } from "../pagination.svelte";
diff --git a/src/uix/terra/pagination/components/pagination-prev-button.svelte b/src/uix/terra/pagination/components/pagination-prev-button.svelte
index 2337607b5..c00a1cec7 100644
--- a/src/uix/terra/pagination/components/pagination-prev-button.svelte
+++ b/src/uix/terra/pagination/components/pagination-prev-button.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # Pagination Prev Button
+	 *
+	 * Botón de navegación para ir a la página anterior.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pagination-item]           → Elemento de paginación
+	 * [data-type="prev"]               → Tipo: botón anterior
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PaginationPrevButtonProps } from "../types";
 	import { PaginationPrevButtonState } from "../pagination.svelte";
diff --git a/src/uix/terra/pagination/components/pagination.svelte b/src/uix/terra/pagination/components/pagination.svelte
index da9d925dd..dfd2bde43 100644
--- a/src/uix/terra/pagination/components/pagination.svelte
+++ b/src/uix/terra/pagination/components/pagination.svelte
@@ -1,4 +1,48 @@
 <script lang="ts">
+	/**
+	 * # Pagination Root
+	 *
+	 * Componente de paginación para navegar entre páginas de contenido.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Pagination count={100} perPage={10} bind:page={currentPage}>
+	 *   <PaginationPrevButton>Anterior</PaginationPrevButton>
+	 *   <PaginationPage let:value>{value}</PaginationPage>
+	 *   <PaginationNextButton>Siguiente</PaginationNextButton>
+	 * </Pagination>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `count`: number - Total de items
+	 * - `perPage`: number - Items por página
+	 * - `page`: number - Página actual (bindable)
+	 * - `onPageChange`: Callback cuando cambia la página
+	 * - `siblingCount`: number - Cantidad de páginas a mostrar alrededor de la actual
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `loop`: boolean - Navegación cíclica
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `pages`: Page[] - Array de páginas disponibles
+	 * - `totalPages`: number - Total de páginas
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pagination]                → Contenedor de paginación
+	 * [data-pagination-item]           → Item de paginación
+	 * [data-type="page"]               → Página numerada
+	 * [data-type="prev"]               → Botón anterior
+	 * [data-type="next"]               → Botón siguiente
+	 * [data-type="first"]              → Primera página
+	 * [data-type="last"]               → Última página
+	 * [data-disabled]                  → Item deshabilitado
+	 * [data-selected]                  → Página actual
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="navigation">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PaginationRootProps } from "../types";
 	import { PaginationRootState } from "../pagination.svelte";
diff --git a/src/uix/terra/pin-input/components/pin-input-cell.svelte b/src/uix/terra/pin-input/components/pin-input-cell.svelte
index b709e45ac..45ba0ebbe 100644
--- a/src/uix/terra/pin-input/components/pin-input-cell.svelte
+++ b/src/uix/terra/pin-input/components/pin-input-cell.svelte
@@ -1,4 +1,28 @@
 <script lang="ts">
+	/**
+	 * # Pin Input Cell
+	 *
+	 * Celda individual del PIN.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <PinInput.Cell {cell} />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `cell`: PinInputCell - Datos de la celda
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pin-input-cell]             → Celda del PIN
+	 * [data-active]                     → Presente en la celda activa
+	 * [data-inactive]                   → Presente en celdas inactivas
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PinInputCellProps } from "../types";
 	import { PinInputCel$state } from "../pin-input.svelte";
diff --git a/src/uix/terra/pin-input/components/pin-input.svelte b/src/uix/terra/pin-input/components/pin-input.svelte
index 16d9e2ed4..543847e7e 100644
--- a/src/uix/terra/pin-input/components/pin-input.svelte
+++ b/src/uix/terra/pin-input/components/pin-input.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Pin Input
+	 *
+	 * Entrada de código PIN con celdas individuales.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <PinInput bind:value={pin} maxlength={6}>
+	 *   {#snippet children(props)}
+	 *     {#each props.cells as cell}
+	 *       <PinInput.Cell {cell} />
+	 *     {/each}
+	 *   {/snippet}
+	 * </PinInput>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor del PIN (bindable)
+	 * - `maxlength`: number - Cantidad de dígitos (default: 6)
+	 * - `type`: "numeric" | "text" | "tel" - Tipo de input
+	 * - `pattern`: string | RegExp - Patrón de validación
+	 * - `disabled`: boolean - Deshabilitar entrada
+	 * - `onComplete`: Callback cuando se completa
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-pin-input]                  → Contenedor raíz
+	 * [data-pin-input-input]            → Input oculto
+	 * [data-disabled]                   → Presente cuando disabled
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con un input oculto.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PinInputRootProps } from "../types";
 	import { PinInputRootState } from "../pin-input.svelte";
diff --git a/src/uix/terra/popover/components/popover-arrow.svelte b/src/uix/terra/popover/components/popover-arrow.svelte
index e0a919c51..5494fb2e5 100644
--- a/src/uix/terra/popover/components/popover-arrow.svelte
+++ b/src/uix/terra/popover/components/popover-arrow.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-popover-arrow]           → Flecha del popover
+ * ```
+ -->
 <script lang="ts">
 	import type { PopoverArrowProps } from "../types.js";
 	import Arrow from "../../layers/arrow/arrow.svelte";
diff --git a/src/uix/terra/popover/components/popover-close.svelte b/src/uix/terra/popover/components/popover-close.svelte
index cc7566cba..20fd0efba 100644
--- a/src/uix/terra/popover/components/popover-close.svelte
+++ b/src/uix/terra/popover/components/popover-close.svelte
@@ -1,3 +1,9 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-popover-close]           → Botón de cierre del popover
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PopoverCloseProps } from "../types";
diff --git a/src/uix/terra/popover/components/popover-content.svelte b/src/uix/terra/popover/components/popover-content.svelte
index 7e89686d2..59d599c09 100644
--- a/src/uix/terra/popover/components/popover-content.svelte
+++ b/src/uix/terra/popover/components/popover-content.svelte
@@ -1,4 +1,56 @@
 <script lang="ts">
+	/**
+	 * # Popover Content
+	 *
+	 * Contenedor del contenido del popover.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <PopoverContent
+	 *   side="bottom"
+	 *   align="center"
+	 *   sideOffset={8}
+	 * >
+	 *   <div>
+	 *     <h3>Información</h3>
+	 *     <p>Descripción detallada</p>
+	 *   </div>
+	 * </PopoverContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición
+	 * - `align`: "start" | "center" | "end" - Alineación
+	 * - `sideOffset`: number - Distancia desde el trigger
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `trapFocus`: boolean - Atrapa el foco dentro del popover
+	 * - `preventScroll`: boolean - Previene scroll del body
+	 * - `avoidCollisions`: boolean - Evita colisiones
+	 * - `collisionPadding`: number - Padding para colisiones
+	 * - `arrowPadding`: number - Padding para la flecha
+	 * - `sticky`: "partial" | "always" - Comportamiento sticky
+	 * - `hideWhenDetached`: boolean - Oculta si está detached
+	 * - `strategy`: "absolute" | "fixed" - Estrategia de posicionamiento
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onOpenAutoFocus`: Callback al abrir y enfocar
+	 * - `onCloseAutoFocus`: Callback al cerrar y reenfocar
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `customAnchor`: HTMLElement - Elemento de anclaje personalizado
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-popover-content]           → Contenedor del popover
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` anidado para posicionamiento.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PopoverContentProps } from '../types';
 	import { PopoverContentState } from '../popover.svelte';
diff --git a/src/uix/terra/popover/components/popover-overlay.svelte b/src/uix/terra/popover/components/popover-overlay.svelte
index 956eb1d06..179fc43f6 100644
--- a/src/uix/terra/popover/components/popover-overlay.svelte
+++ b/src/uix/terra/popover/components/popover-overlay.svelte
@@ -1,3 +1,11 @@
+<!--
+ * ## Selectores CSS
+ * ```
+ * [data-popover-overlay]         → Overlay de fondo del popover
+ * [data-state="open"]            → Estado cuando el popover está abierto
+ * [data-state="closed"]          → Estado cuando el popover está cerrado
+ * ```
+ -->
 <script lang="ts">
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PopoverOverlayProps } from "../types";
diff --git a/src/uix/terra/popover/components/popover-trigger.svelte b/src/uix/terra/popover/components/popover-trigger.svelte
index d9954268a..d74e916af 100644
--- a/src/uix/terra/popover/components/popover-trigger.svelte
+++ b/src/uix/terra/popover/components/popover-trigger.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Popover Trigger
+	 *
+	 * Elemento que al hacer clic (o hover) abre el popover.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <PopoverTrigger
+	 *   openOnHover={true}
+	 *   openDelay={500}
+	 *   closeDelay={200}
+	 * >
+	 *   <button>Hover para mostrar</button>
+	 * </PopoverTrigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `openOnHover`: boolean - Abre al hacer hover en lugar de click
+	 * - `openDelay`: number - Delay antes de abrir (ms)
+	 * - `closeDelay`: number - Delay antes de cerrar (ms)
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `type`: string - Tipo del botón (default: "button")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-popover-trigger]          → Trigger que abre el popover
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` por defecto.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { PopoverTriggerProps } from "../types";
 	import { PopoverTriggerState } from "../popover.svelte";
diff --git a/src/uix/terra/popover/components/popover.svelte b/src/uix/terra/popover/components/popover.svelte
index 0892e7bad..af272b6d1 100644
--- a/src/uix/terra/popover/components/popover.svelte
+++ b/src/uix/terra/popover/components/popover.svelte
@@ -1,4 +1,38 @@
 <script lang="ts">
+	/**
+	 * # Popover Root
+	 *
+	 * Componente raíz de un popover (similar a un tooltip pero con contenido rico).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Popover bind:open={isOpen}>
+	 *   <PopoverTrigger>
+	 *     <button>Mostrar popover</button>
+	 *   </PopoverTrigger>
+	 *   <PopoverContent>
+	 *     <h3>Título</h3>
+	 *     <p>Contenido del popover</p>
+	 *     <PopoverClose>Cerrar</PopoverClose>
+	 *   </PopoverContent>
+	 * </Popover>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado del popover (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-popover-content]           → Contenedor del popover
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-popover-trigger]          → Trigger que abre el popover
+	 * [data-popover-arrow]            → Flecha indicadora (opcional)
+	 * [data-popover-overlay]          → Overlay de fondo
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import type { PopoverRootProps } from "../types";
 	import { PopoverRootState } from "../popover.svelte";
diff --git a/src/uix/terra/progress/components/progress.svelte b/src/uix/terra/progress/components/progress.svelte
index d5b335123..f5a1e9019 100644
--- a/src/uix/terra/progress/components/progress.svelte
+++ b/src/uix/terra/progress/components/progress.svelte
@@ -1,4 +1,43 @@
 <script lang="ts">
+	/**
+	 * # Progress Root
+	 *
+	 * Barra de progreso lineal o circular.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Indeterminado -->
+	 * <Progress value={null} />
+	 *
+	 * <!-- Determinado -->
+	 * <Progress value={75} max={100} />
+	 *
+	 * <!-- Con rango personalizado -->
+	 * <Progress value={50} min={0} max={200} />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: number | null - Valor del progreso (null = indeterminado)
+	 * - `max`: number - Valor máximo (default: 100)
+	 * - `min`: number - Valor mínimo (default: 0)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - `value=null` muestra animación de carga indeterminada
+	 * - El progreso se calcula como: (value - min) / (max - min) * 100%
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-progress]                  → Contenedor de la barra de progreso
+	 * [data-progress-track]           → Track/fondo de la barra
+	 * [data-progress-fill]            → Porción completada
+	 * [data-state="indeterminate"]    → Estado indeterminado (cargando)
+	 * [data-state="complete"]         → Estado completo (100%)
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="progressbar">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { ProgressRootProps } from "../types";
 	import { ProgressRootState } from "../progress.svelte";
diff --git a/src/uix/terra/radio-group/components/radio-group-item.svelte b/src/uix/terra/radio-group/components/radio-group-item.svelte
index bde2a0754..a1541dc4c 100644
--- a/src/uix/terra/radio-group/components/radio-group-item.svelte
+++ b/src/uix/terra/radio-group/components/radio-group-item.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # Radio Group Item
+	 *
+	 * Opción individual de un radio group.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <RadioGroupItem value="option1" disabled={false}>
+	 *   <RadioGroupIndicator>
+	 *     <div class="dot" />
+	 *   </RadioGroupIndicator>
+	 *   Opción 1
+	 * </RadioGroupItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor de la opción
+	 * - `disabled`: boolean - Deshabilita esta opción
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `checked`: boolean - Si está seleccionado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-radio-group-item]           → Botón de opción
+	 * [data-state="checked"]            → Opción seleccionada
+	 * [data-state="unchecked"]          → Opción no seleccionada
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando el grupo es readonly
+	 * [data-value]                     → Valor de la opción
+	 * [data-orientation="horizontal"]  → Hereda orientación del root
+	 * [data-orientation="vertical"]    → Hereda orientación del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button role="radio">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RadioGroupItemProps } from "../types";
 	import { RadioGroupItemState } from "../radio-group.svelte";
diff --git a/src/uix/terra/radio-group/components/radio-group.svelte b/src/uix/terra/radio-group/components/radio-group.svelte
index 23affd781..53b8726c2 100644
--- a/src/uix/terra/radio-group/components/radio-group.svelte
+++ b/src/uix/terra/radio-group/components/radio-group.svelte
@@ -1,4 +1,50 @@
 <script lang="ts">
+	/**
+	 * # Radio Group Root
+	 *
+	 * Grupo de opciones donde solo se puede seleccionar una.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <RadioGroup bind:value={selectedOption}>
+	 *   <RadioGroupItem value="option1">
+	 *     <RadioGroupIndicator />
+	 *     Opción 1
+	 *   </RadioGroupItem>
+	 *   <RadioGroupItem value="option2">
+	 *     <RadioGroupIndicator />
+	 *     Opción 2
+	 *   </RadioGroupItem>
+	 *   <RadioGroupItem value="option3">
+	 *     <RadioGroupIndicator />
+	 *     Opción 3
+	 *   </RadioGroupItem>
+	 * </RadioGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor seleccionado (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `disabled`: boolean - Deshabilita todo el grupo
+	 * - `required`: boolean - Requiere selección
+	 * - `readonly`: boolean - Solo lectura
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `name`: string - Nombre para formularios
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-radio-group]                → Contenedor del grupo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="radiogroup">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RadioGroupRootProps } from "../types";
 	import { RadioGroupRootState, RadioGroupInputState } from "../radio-group.svelte";
diff --git a/src/uix/terra/range-calendar/components/range-calendar-cell.svelte b/src/uix/terra/range-calendar/components/range-calendar-cell.svelte
index e53f4220b..4aab517be 100644
--- a/src/uix/terra/range-calendar/components/range-calendar-cell.svelte
+++ b/src/uix/terra/range-calendar/components/range-calendar-cell.svelte
@@ -1,4 +1,27 @@
 <script lang="ts">
+	/**
+	 * # RangeCalendarCell
+	 *
+	 * Componente de celda individual para el calendario de rango.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-cell]             → Celda individual del calendario
+	 * [data-selected]                  → Fecha seleccionada
+	 * [data-selection-start]           → Inicio del rango seleccionado
+	 * [data-selection-end]             → Fin del rango seleccionado
+	 * [data-range-start]               → Inicio del rango
+	 * [data-range-end]                 → Fin del rango
+	 * [data-range-middle]              → Punto medio del rango
+	 * [data-highlighted]               → Fecha resaltada (hover)
+	 * [data-disabled]                  → Celda deshabilitada
+	 * [data-unavailable]               → Fecha no disponible
+	 * [data-today]                     → Fecha de hoy
+	 * [data-outside-month]             → Fecha fuera del mes actual
+	 * [data-focused]                   → Celda enfocada
+	 * [data-outside-visible-months]    → Fuera de los meses visibles
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RangeCalendarCellProps } from "../types.js";
 	import { RangeCalendarCellState } from "../range-calendar.svelte.ts";
diff --git a/src/uix/terra/range-calendar/components/range-calendar-day.svelte b/src/uix/terra/range-calendar/components/range-calendar-day.svelte
index 582fa99e6..80668708e 100644
--- a/src/uix/terra/range-calendar/components/range-calendar-day.svelte
+++ b/src/uix/terra/range-calendar/components/range-calendar-day.svelte
@@ -1,4 +1,28 @@
 <script lang="ts">
+	/**
+	 * # RangeCalendarDay
+	 *
+	 * Componente que representa un día dentro de una celda del calendario de rango.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-calendar-day]              → Elemento que representa un día
+	 * [data-bits-day]                  → Día del calendario (bits)
+	 * [data-selected]                  → Día seleccionado
+	 * [data-selection-start]           → Inicio del rango seleccionado
+	 * [data-selection-end]             → Fin del rango seleccionado
+	 * [data-range-start]               → Inicio del rango
+	 * [data-range-end]                 → Fin del rango
+	 * [data-range-middle]              → Punto medio del rango
+	 * [data-highlighted]               → Día resaltado (hover)
+	 * [data-disabled]                  → Día deshabilitado
+	 * [data-unavailable]               → Día no disponible
+	 * [data-today]                     → Día de hoy
+	 * [data-outside-month]             → Día fuera del mes actual
+	 * [data-focused]                   → Día enfocado
+	 * [data-outside-visible-months]    → Fuera de los meses visibles
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RangeCalendarDayProps } from "../types.js";
 	import { RangeCalendarDayState } from "../range-calendar.svelte.ts";
diff --git a/src/uix/terra/range-calendar/components/range-calendar.svelte b/src/uix/terra/range-calendar/components/range-calendar.svelte
index f845a8a62..03536cbab 100644
--- a/src/uix/terra/range-calendar/components/range-calendar.svelte
+++ b/src/uix/terra/range-calendar/components/range-calendar.svelte
@@ -1,4 +1,23 @@
 <script lang="ts">
+	/**
+	 * # RangeCalendar Root
+	 *
+	 * Calendario para seleccionar un rango de fechas.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-range-calendar]            → Contenedor raíz
+	 * [data-calendar]                  → Contenedor del calendario (heredado)
+	 * [data-calendar-day]              → Celda que representa un día
+	 * [data-calendar-cell]             → Celda individual del calendario
+	 * [data-calendar-header]           → Header con navegación
+	 * [data-calendar-heading]          → Título con mes/año
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-selected-start]            → Día de inicio seleccionado
+	 * [data-selected-end]              → Día de fin seleccionado
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { type DateValue } from "$terra/adapters/dates";
diff --git a/src/uix/terra/range-calendar/range-calendar.svelte.ts b/src/uix/terra/range-calendar/range-calendar.svelte.ts
index 50b6dc67a..bacfd8eb3 100644
--- a/src/uix/terra/range-calendar/range-calendar.svelte.ts
+++ b/src/uix/terra/range-calendar/range-calendar.svelte.ts
@@ -663,7 +663,7 @@ export class RangeCalendarRootState {
 		this.opts.placeholder.current = this.opts.placeholder.current.set({ month });
 	};
 
-	getBitsAttr: (typeof calendarAttrs)["getAttr"] = (part) => {
+	getTerraAttr: (typeof calendarAttrs)["getAttr"] = (part) => {
 		return calendarAttrs.getAttr(part, "range-calendar");
 	};
 
@@ -683,7 +683,7 @@ export class RangeCalendarRootState {
 					disabled: this.opts.disabled.current,
 					readonly: this.opts.readonly.current,
 				}),
-				[this.getBitsAttr("root")]: "",
+				[this.getTerraAttr("root")]: "",
 				//
 				onkeydown: this.onkeydown,
 				...this.attachment,
@@ -831,7 +831,7 @@ export class RangeCalendarCellState {
 				"aria-selected": boolToStr(this.isSelectedDate),
 				"aria-disabled": boolToStr(this.ariaDisabled),
 				...this.sharedDataAttrs,
-				[this.root.getBitsAttr("cell")]: "",
+				[this.root.getTerraAttr("cell")]: "",
 				...this.attachment,
 			}) as const
 	);
@@ -894,7 +894,7 @@ export class RangeCalendarDayState {
 				"aria-disabled": boolToStr(this.cell.ariaDisabled),
 				...this.cell.sharedDataAttrs,
 				tabindex: this.tabindex,
-				[this.cell.root.getBitsAttr("day")]: "",
+				[this.cell.root.getTerraAttr("day")]: "",
 				// Shared logic for range calendar and calendar
 				"data-bits-day": "",
 				//
diff --git a/src/uix/terra/rating-group/components/rating-group-item.svelte b/src/uix/terra/rating-group/components/rating-group-item.svelte
index 27c9d631e..04f7eda66 100644
--- a/src/uix/terra/rating-group/components/rating-group-item.svelte
+++ b/src/uix/terra/rating-group/components/rating-group-item.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # Rating Group Item
+	 *
+	 * Individual rating item (star/emoji) component within a rating group.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-rating-item]               → Elemento raíz del item de rating
+	 * [data-state="checked"]           → Item marcado/seleccionado
+	 * [data-state="unchecked"]         → Item no marcado
+	 * [data-state="half"]              → Item con media calificación
+	 * [data-value]                     → Valor numérico del item
+	 * [data-orientation]               → Hereda orientación del grupo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RatingGroupItemProps } from "../types";
 	import { RatingGroupItemState } from "../rating-group.svelte";
diff --git a/src/uix/terra/rating-group/components/rating-group.svelte b/src/uix/terra/rating-group/components/rating-group.svelte
index b3f2e5c8d..80504e45f 100644
--- a/src/uix/terra/rating-group/components/rating-group.svelte
+++ b/src/uix/terra/rating-group/components/rating-group.svelte
@@ -1,4 +1,47 @@
 <script lang="ts">
+	/**
+	 * # Rating Group Root
+	 *
+	 * Componente de calificación con estrellas o íconos seleccionables.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <RatingGroup bind:value={rating} max={5} allowHalf={true}>
+	 *   <RatingGroupItem let={hovered} value={1}>
+	 *     <StarIcon filled={hovered || rating >= 1} />
+	 *   </RatingGroupItem>
+	 *   <!-- más items... -->
+	 * </RatingGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: number - Valor de calificación actual (bindable)
+	 * - `onValueChange`: Callback cuando cambia la calificación
+	 * - `max`: number - Valor máximo de calificación
+	 * - `min`: number - Valor mínimo de calificación
+	 * - `disabled`: boolean - Deshabilita el rating
+	 * - `readonly`: boolean - Solo lectura
+	 * - `required`: boolean - Requerido para formularios
+	 * - `allowHalf`: boolean - Permite medias estrellas
+	 * - `hoverPreview`: boolean - Muestra preview al hacer hover
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `name`: string - Nombre para formularios
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-rating-group]              → Contenedor del rating
+	 * [data-rating-item]               → Item individual de rating
+	 * [data-state="checked"]           → Item marcado
+	 * [data-state="unchecked"]         → Item no marcado
+	 * [data-state="half"]              → Item con media calificación
+	 * [data-disabled]                  → Hereda disabled del root
+	 * [data-readonly]                  → Hereda readonly del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="radiogroup">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { RatingGroupRootProps } from "../types";
 	import { RatingGroupRootState, RatingGroupInputState } from "../rating-group.svelte";
diff --git a/src/uix/terra/scroll-area/components/presence-layer.svelte b/src/uix/terra/scroll-area/components/presence-layer.svelte
index 1ba9483fa..70e5c02c0 100644
--- a/src/uix/terra/scroll-area/components/presence-layer.svelte
+++ b/src/uix/terra/scroll-area/components/presence-layer.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # PresenceLayer (Internal)
+	 *
+	 * Componente interno que maneja la presencia animada de elementos.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-presence]     → Capa de presencia para animaciones
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import { PresenceManager } from "../../layers/presence/presence-manager.svelte";
 	import type { State } from "$terra/utils";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-corner-impl.svelte b/src/uix/terra/scroll-area/components/scroll-area-corner-impl.svelte
index 5d54bb245..23b35eab4 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-corner-impl.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-corner-impl.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaCorner (Internal Implementation)
+	 *
+	 * Componente interno de la esquina donde se intersectan los scrollbars horizontal y vertical.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-corner]      → Esquina de intersección de scrollbars
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { ScrollAreaCornerProps } from "../types";
 	import { ScrollAreaCornerImp$state } from "../scroll-area.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-corner.svelte b/src/uix/terra/scroll-area/components/scroll-area-corner.svelte
index f4297d3e6..1114274a0 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-corner.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-corner.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Scroll Area Corner
+	 *
+	 * Esquina donde se encuentran las barras de scroll horizontal y vertical.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-corner]      → Esquina de intersección de scrollbars
+	 * ```
+	 */
 	import type { ScrollAreaCornerProps } from "../types";
 	import { ScrollAreaRootState } from "../scroll-area.svelte";
 	import ScrollAreaCornerImpl from "./scroll-area-corner-impl.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-auto.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-auto.svelte
index 3a820a6a7..e950bacdb 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-auto.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-auto.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarAuto (Internal)
+	 *
+	 * Componente interno de scrollbar que se muestra automáticamente cuando es necesario.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * [data-state="visible"]          → Estado visible (hover + auto)
+	 * [data-state="hidden"]           → Estado oculto
+	 * ```
+	 */
 	import { mergeProps } from "$terra/utils";
 	import { ScrollAreaScrollbarAutoState } from "../scroll-area.svelte";
 	import type { _ScrollbarStubProps } from "../types";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-hover.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-hover.svelte
index 5961bba0b..688a405c1 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-hover.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-hover.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarHover (Internal)
+	 *
+	 * Componente interno de scrollbar que se muestra al hacer hover.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * ```
+	 */
 	import { mergeProps } from "$terra/utils";
 	import {
 		ScrollAreaScrollbarAutoState,
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-scroll.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-scroll.svelte
index 9e5d1c06e..cf5cc6bbc 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-scroll.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-scroll.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarScroll (Internal)
+	 *
+	 * Componente interno de scrollbar que se muestra al hacer scroll.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * ```
+	 */
 	import { mergeProps } from "$terra/utils";
 	import { ScrollAreaScrollbarScrol$state } from "../scroll-area.svelte";
 	import type { _ScrollbarStubProps } from "../types";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-shared.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-shared.svelte
index 6a0e66f1b..4013bf348 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-shared.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-shared.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarShared (Internal)
+	 *
+	 * Componente interno compartido que implementa la funcionalidad base del scrollbar.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * ```
+	 */
 	import { mergeProps } from "$terra/utils";
 	import { ScrollAreaScrollbarSharedState } from "../scroll-area.svelte";
 	import type { _ScrollbarStubProps } from "../types";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-visible.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-visible.svelte
index c0bb8c338..b29177dc5 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-visible.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-visible.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarVisible (Internal)
+	 *
+	 * Componente interno que renderiza el scrollbar con la orientación correcta.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * ```
+	 */
 	import { ScrollAreaScrollbarVisibleState } from "../scroll-area.svelte";
 	import type { _ScrollbarStubProps } from "../types";
 	import ScrollAreaScrollbarX from "./scroll-area-scrollbar-x.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-x.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-x.svelte
index 51abbb3b5..1be82874f 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-x.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-x.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarX (Internal)
+	 *
+	 * Componente interno de scrollbar horizontal.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]        → Barra de scroll
+	 * [data-orientation="horizontal"]     → Orientación horizontal
+	 * ```
+	 */
 	import { IsMounted } from "runed";
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { ScrollAreaScrollbarXState } from "../scroll-area.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-y.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-y.svelte
index 0eafe3507..cb9e64e2b 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar-y.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar-y.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaScrollbarY (Internal)
+	 *
+	 * Componente interno de scrollbar vertical.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]        → Barra de scroll
+	 * [data-orientation="vertical"]       → Orientación vertical
+	 * ```
+	 */
 	import { IsMounted } from "runed";
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { ScrollAreaScrollbarYState } from "../scroll-area.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-scrollbar.svelte b/src/uix/terra/scroll-area/components/scroll-area-scrollbar.svelte
index 4ba792801..389ba862e 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-scrollbar.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-scrollbar.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Scroll Area Scrollbar
+	 *
+	 * Barra de scroll personalizable.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-scrollbar]    → Barra de scroll
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import type { ScrollAreaScrollbarProps } from "../types";
 	import { ScrollAreaScrollbarState } from "../scroll-area.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-thumb-impl.svelte b/src/uix/terra/scroll-area/components/scroll-area-thumb-impl.svelte
index be81d998d..43d3d9e15 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-thumb-impl.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-thumb-impl.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # ScrollAreaThumb (Internal Implementation)
+	 *
+	 * Componente interno del control deslizante (thumb) del scrollbar.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-thumb]        → Control deslizante del scrollbar
+	 * [data-state="visible"]           → Estado visible
+	 * [data-state="hidden"]            → Estado oculto
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { IsMounted } from "runed";
 	import type { ScrollAreaThumbProps } from "../types";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-thumb.svelte b/src/uix/terra/scroll-area/components/scroll-area-thumb.svelte
index 9505a5f1d..63c02b791 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-thumb.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-thumb.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Scroll Area Thumb
+	 *
+	 * Control deslizante de la barra de scroll.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-thumb]        → Control deslizante del scrollbar
+	 * ```
+	 */
 	import type { ScrollAreaThumbProps } from "../types";
 	import { ScrollAreaScrollbarVisibleState } from "../scroll-area.svelte";
 	import ScrollAreaThumbImpl from "./scroll-area-thumb-impl.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area-viewport.svelte b/src/uix/terra/scroll-area/components/scroll-area-viewport.svelte
index 8a86300f8..c8ba2376c 100644
--- a/src/uix/terra/scroll-area/components/scroll-area-viewport.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area-viewport.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Scroll Area Viewport
+	 *
+	 * Área visible con scroll del contenido.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area-viewport]     → Área visible con scroll
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { ScrollAreaViewportProps } from "../types";
 	import { ScrollAreaViewportState } from "../scroll-area.svelte";
diff --git a/src/uix/terra/scroll-area/components/scroll-area.svelte b/src/uix/terra/scroll-area/components/scroll-area.svelte
index 73e296bc6..85193075b 100644
--- a/src/uix/terra/scroll-area/components/scroll-area.svelte
+++ b/src/uix/terra/scroll-area/components/scroll-area.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Scroll Area Root
+	 *
+	 * Área con scroll personalizado y scrollbar opcional.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ScrollArea type="hover" style="height: 300px">
+	 *   <div>Contenido largo...</div>
+	 * </ScrollArea>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "hover" | "always" | "scroll" | "auto" - Cuándo mostrar scrollbar
+	 * - `dir`: "ltr" | "rtl" - Dirección del scroll
+	 * - `scrollHideDelay`: number - Delay para ocultar scrollbar (ms)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-scroll-area]              → Contenedor del área
+	 * [data-scroll-area-viewport]     → Área con scroll
+	 * [data-scroll-area-scrollbar]     → Scrollbar personalizada
+	 * [data-orientation="horizontal"]  → Scrollbar horizontal
+	 * [data-orientation="vertical"]    → Scrollbar vertical
+	 * [data-scroll-area-thumb]        → Thumb de la scrollbar
+	 * [data-scroll-area-corner]       → Esquina entre scrollbars
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con scroll personalizado.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { ScrollAreaRootProps } from "../types";
 	import { ScrollAreaRootState } from "../scroll-area.svelte";
diff --git a/src/uix/terra/select/components/select-content-static.svelte b/src/uix/terra/select/components/select-content-static.svelte
index fb156810e..f034f8b74 100644
--- a/src/uix/terra/select/components/select-content-static.svelte
+++ b/src/uix/terra/select/components/select-content-static.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Content Static
+	 *
+	 * Contenedor estático del menú desplegable (sin Popper/posicionamiento flotante).
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-content]           → Contenedor del menú desplegable estático
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectContentStaticProps } from "../types.js";
 	import { SelectContentState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select-content.svelte b/src/uix/terra/select/components/select-content.svelte
index 909bdd64f..757689857 100644
--- a/src/uix/terra/select/components/select-content.svelte
+++ b/src/uix/terra/select/components/select-content.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # Select Content
+	 *
+	 * Contenedor del menú desplegable con las opciones.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <SelectContent side="bottom" sideOffset={8}>
+	 *   <SelectViewport>
+	 *     <SelectItem value="option1">Opción 1</SelectItem>
+	 *     <SelectItem value="option2">Opción 2</SelectItem>
+	 *     <SelectItem value="option3">Opción 3</SelectItem>
+	 *   </SelectViewport>
+	 *   <SelectScrollDownButton />
+	 * </SelectContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posición
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `preventScroll`: boolean - Previene scroll del body
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-content]           → Contenedor del menú desplegable
+	 * [data-state="open"]             → Estado cuando el menú está abierto
+	 * [data-state="closed"]           → Estado cuando el menú está cerrado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` anidado para posicionamiento.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectContentProps } from "../types.js";
 	import { SelectContentState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select-group-heading.svelte b/src/uix/terra/select/components/select-group-heading.svelte
index 17d642d8d..c0fc1f605 100644
--- a/src/uix/terra/select/components/select-group-heading.svelte
+++ b/src/uix/terra/select/components/select-group-heading.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Group Heading
+	 *
+	 * Etiqueta/encabezado para un grupo de opciones.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-group-heading]    → Encabezado del grupo de opciones
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectGroupHeadingProps } from "../types.js";
 	import { SelectGroupHeadingState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select-group.svelte b/src/uix/terra/select/components/select-group.svelte
index 6372f0537..f5a8604d8 100644
--- a/src/uix/terra/select/components/select-group.svelte
+++ b/src/uix/terra/select/components/select-group.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Group
+	 *
+	 * Agrupa opciones relacionadas dentro del menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-group]            → Contenedor del grupo de opciones
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { SelectGroupState } from "../select.svelte.js";
 	import type { SelectGroupProps } from "../types.js";
diff --git a/src/uix/terra/select/components/select-hidden-input.svelte b/src/uix/terra/select/components/select-hidden-input.svelte
index 00b972697..f536ebb9a 100644
--- a/src/uix/terra/select/components/select-hidden-input.svelte
+++ b/src/uix/terra/select/components/select-hidden-input.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Hidden Input
+	 *
+	 * Input oculto para formularios (almacena el valor seleccionado).
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-hidden-input]     → Input oculto del select
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import { SelectHiddenInputState } from "../select.svelte.js";
 	import type { HTMLInputAttributes } from "svelte/elements";
diff --git a/src/uix/terra/select/components/select-item.svelte b/src/uix/terra/select/components/select-item.svelte
index 0b1c18938..0f1e0eb35 100644
--- a/src/uix/terra/select/components/select-item.svelte
+++ b/src/uix/terra/select/components/select-item.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Select Item
+	 *
+	 * Opción individual del menú desplegable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <SelectItem value="option1" disabled={false}>
+	 *   Opción 1
+	 * </SelectItem>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor de la opción
+	 * - `label`: string - Etiqueta de la opción (default: value)
+	 * - `disabled`: boolean - Deshabilita esta opción
+	 * - `onHighlight`: Callback al highlightear
+	 * - `onUnhighlight`: Callback al quitar highlight
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-item]              → Item del menú
+	 * [data-highlighted]              → Presente cuando está highlighteado
+	 * [data-selected]                 → Presente cuando está seleccionado
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { SelectItemState } from "../select.svelte.js";
 	import type { SelectItemProps } from "../types.js";
diff --git a/src/uix/terra/select/components/select-scroll-down-button.svelte b/src/uix/terra/select/components/select-scroll-down-button.svelte
index aee839375..40638660c 100644
--- a/src/uix/terra/select/components/select-scroll-down-button.svelte
+++ b/src/uix/terra/select/components/select-scroll-down-button.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Scroll Down Button
+	 *
+	 * Botón para hacer scroll hacia abajo en el menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-scroll-down-button] → Botón de scroll hacia abajo
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectScrollDownButtonProps } from "../types.js";
 	import { SelectScrollDownButtonState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select-scroll-up-button.svelte b/src/uix/terra/select/components/select-scroll-up-button.svelte
index 73e739a5c..729144c4b 100644
--- a/src/uix/terra/select/components/select-scroll-up-button.svelte
+++ b/src/uix/terra/select/components/select-scroll-up-button.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Scroll Up Button
+	 *
+	 * Botón para hacer scroll hacia arriba en el menú.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-scroll-up-button]   → Botón de scroll hacia arriba
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectScrollUpButtonProps } from "../types.js";
 	import { SelectScrollUpButtonState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select-trigger.svelte b/src/uix/terra/select/components/select-trigger.svelte
index 7d37f44dd..bf49f0702 100644
--- a/src/uix/terra/select/components/select-trigger.svelte
+++ b/src/uix/terra/select/components/select-trigger.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Select Trigger
+	 *
+	 * Botón que abre/cierra el menú desplegable.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <SelectTrigger>
+	 *   <SelectValue placeholder="Selecciona opción">
+	 *     {#snippet children(props)}
+	 *       {props.selectedValue || 'Sin selección'}
+	 *     {/snippet}
+	 *   </SelectValue>
+	 *   <ChevronIcon />
+	 * </SelectTrigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: string - Tipo del botón (default: "button")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-trigger]           → Botón que abre el menú
+	 * [data-state="open"]             → Menú abierto
+	 * [data-state="closed"]           → Menú cerrado
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * [data-placeholder]             → Presente cuando no hay valor seleccionado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import { SelectTriggerState } from "../select.svelte.js";
 	import type { SelectTriggerProps } from "../types.js";
diff --git a/src/uix/terra/select/components/select-viewport.svelte b/src/uix/terra/select/components/select-viewport.svelte
index ebdec71be..da6b5991b 100644
--- a/src/uix/terra/select/components/select-viewport.svelte
+++ b/src/uix/terra/select/components/select-viewport.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Select Viewport
+	 *
+	 * Área visible con scroll del menú desplegable.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-viewport]          → Área visible con scroll del menú
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { SelectViewportProps } from "../types.js";
 	import { SelectViewportState } from "../select.svelte.js";
diff --git a/src/uix/terra/select/components/select.svelte b/src/uix/terra/select/components/select.svelte
index 8e5b80c16..9ebb03e0c 100644
--- a/src/uix/terra/select/components/select.svelte
+++ b/src/uix/terra/select/components/select.svelte
@@ -1,4 +1,57 @@
 <script lang="ts">
+	/**
+	 * # Select Root
+	 *
+	 * Componente de selección desplegable (dropdown).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Select
+	 *   type="single"
+	 *   bind:value={selectedValue}
+	 *   bind:open={isOpen}
+	 * >
+	 *   <SelectTrigger>
+	 *     <SelectValue placeholder="Selecciona..." />
+	 *   </SelectTrigger>
+	 *   <SelectContent>
+	 *     <SelectItem value="option1">Opción 1</SelectItem>
+	 *     <SelectItem value="option2">Opción 2</SelectItem>
+	 *   </SelectContent>
+	 * </Select>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple" - Tipo de selección
+	 * - `value`: string | string[] - Valor(es) seleccionado(s) (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `open`: boolean - Estado del menú (bindable)
+	 * - `onOpenChange`: Callback cuando cambia el estado del menú
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `name`: string - Nombre para formularios
+	 * - `disabled`: boolean - Deshabilita el select
+	 * - `required`: boolean - Requiere selección
+	 * - `loop`: boolean - Navegación cíclica
+	 * - `scrollAlignment`: "nearest" | "center" - Alineación del scroll
+	 * - `items`: unknown[] - Items disponibles
+	 * - `allowDeselect`: boolean - Permite deseleccionar
+	 * - `autocomplete`: boolean - Activa autocomplete para formularios
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-select-trigger]           → Botón que abre el menú
+	 * [data-state="open"]             → Menú abierto
+	 * [data-state="closed"]           → Menú cerrado
+	 * [data-disabled]                 → Presente cuando disabled=true
+	 * [data-placeholder]             → Presente cuando no hay valor
+	 * [data-select-content]           → Contenedor del menú desplegable
+	 * [data-select-item]              → Item del menú
+	 * [data-highlighted]              → Item highlighteado
+	 * [data-selected]                 → Item seleccionado
+	 * [data-disabled]                 → Item deshabilitado
+	 * [data-select-viewport]          → Área visible del content
+	 * ```
+	 */
 	import FloatingLayer from "../../layers/floating/components/floating-layer.svelte";
 	import { type State, readableActive, writableActive } from "$terra/utils";
 	import { SelectRootState } from "../select.svelte.js";
diff --git a/src/uix/terra/separator/components/separator.svelte b/src/uix/terra/separator/components/separator.svelte
index f3a6406d7..d33f5554a 100644
--- a/src/uix/terra/separator/components/separator.svelte
+++ b/src/uix/terra/separator/components/separator.svelte
@@ -1,4 +1,36 @@
 <script lang="ts">
+	/**
+	 * # Separator Root
+	 *
+	 * Línea divisoria visual entre secciones de contenido.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Horizontal -->
+	 * <Separator />
+	 *
+	 * <!-- Vertical -->
+	 * <Separator orientation="vertical" />
+	 *
+	 * <!-- Semántico -->
+	 * <Separator decorative={false} />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `orientation`: "horizontal" | "vertical" - Orientación de la línea
+	 * - `decorative`: boolean - Si es solo decorativo (no anunciado por screen readers)
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-separator]                 → Separador visual
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="separator">`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from "$terra/utils";
 	import type { SeparatorRootProps } from "../types";
 	import { SeparatorRootState } from "../separator.svelte";
diff --git a/src/uix/terra/slider/components/slider-range.svelte b/src/uix/terra/slider/components/slider-range.svelte
index 4f067ec4e..e3d758801 100644
--- a/src/uix/terra/slider/components/slider-range.svelte
+++ b/src/uix/terra/slider/components/slider-range.svelte
@@ -1,4 +1,26 @@
 <script lang="ts">
+	/**
+	 * # Slider Range
+	 *
+	 * Porción del track que representa el valor activo del slider.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Slider bind:value={[10, 90]}>
+	 *   <SliderRange />
+	 *   <SliderThumb index={0} />
+	 *   <SliderThumb index={1} />
+	 * </Slider>
+	 * ```
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider-range]              → Porción del track con valor activo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>` que se superpone al track.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderRangeProps } from "../types";
 	import { SliderRangeState } from "../slider.svelte";
diff --git a/src/uix/terra/slider/components/slider-thumb-label.svelte b/src/uix/terra/slider/components/slider-thumb-label.svelte
index 2c60cc2e2..7f5486cac 100644
--- a/src/uix/terra/slider/components/slider-thumb-label.svelte
+++ b/src/uix/terra/slider/components/slider-thumb-label.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Slider Thumb Label
+	 *
+	 * Etiqueta que muestra el valor actual del thumb del slider.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider-thumb-label] → Elemento contenedor de la etiqueta del thumb
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderThumbLabelProps } from "../types";
 	import { SliderThumbLabe$state } from "../slider.svelte";
diff --git a/src/uix/terra/slider/components/slider-thumb.svelte b/src/uix/terra/slider/components/slider-thumb.svelte
index d149dbc87..a9dc48c1d 100644
--- a/src/uix/terra/slider/components/slider-thumb.svelte
+++ b/src/uix/terra/slider/components/slider-thumb.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Slider Thumb
+	 *
+	 * Control deslizante (thumb) del slider.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Slider bind:value={values}>
+	 *   <SliderThumb index={0}>
+	 *     {#snippet children(props)}
+	 *       <div class="thumb {props.active ? 'active' : ''}" />
+	 *     {/snippet}
+	 *   </SliderThumb>
+	 * </Slider>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `index`: number - Índice del thumb (para sliders múltiples)
+	 * - `disabled`: boolean - Deshabilita este thumb
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `active`: boolean - Si el thumb está siendo arrastrado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider-thumb]               → Elemento thumb deslizable
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span role="slider">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderThumbProps } from "../types";
 	import { SliderThumbState } from "../slider.svelte";
diff --git a/src/uix/terra/slider/components/slider-tick-label.svelte b/src/uix/terra/slider/components/slider-tick-label.svelte
index 1987efbcb..1de50d918 100644
--- a/src/uix/terra/slider/components/slider-tick-label.svelte
+++ b/src/uix/terra/slider/components/slider-tick-label.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Slider Tick Label
+	 *
+	 * Etiqueta de una marca en la escala del slider.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider-tick-label] → Elemento contenedor de la etiqueta de la marca
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderTickLabelProps } from "../types";
 	import { SliderTickLabe$state } from "../slider.svelte";
diff --git a/src/uix/terra/slider/components/slider-tick.svelte b/src/uix/terra/slider/components/slider-tick.svelte
index 056129f13..a6f9d071c 100644
--- a/src/uix/terra/slider/components/slider-tick.svelte
+++ b/src/uix/terra/slider/components/slider-tick.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # Slider Tick
+	 *
+	 * Marca de posicion en la escala del slider.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider-tick]     → Elemento contenedor de la marca
+	 * [data-selected]        → Estado cuando la marca esta seleccionada/activa
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderTickProps } from "../types";
 	import { SliderTickState } from "../slider.svelte";
diff --git a/src/uix/terra/slider/components/slider.svelte b/src/uix/terra/slider/components/slider.svelte
index 9949c5596..34c4a5c38 100644
--- a/src/uix/terra/slider/components/slider.svelte
+++ b/src/uix/terra/slider/components/slider.svelte
@@ -1,4 +1,59 @@
 <script lang="ts">
+	/**
+	 * # Slider Root
+	 *
+	 * Control deslizante para seleccionar un valor numérico o un rango.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Slider simple -->
+	 * <Slider
+	 *   type="single"
+	 *   bind:value={volume}
+	 *   min={0}
+	 *   max={100}
+	 *   step={1}
+	 * />
+	 *
+	 * <!-- Slider de rango -->
+	 * <Slider
+	 *   type="multiple"
+	 *   bind:value={priceRange}
+	 *   min={0}
+	 *   max={1000}
+	 *   step={10}
+	 * >
+	 *   <SliderThumb index={0} />
+	 *   <SliderThumb index={1} />
+	 * </Slider>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple" - Tipo de slider
+	 * - `value`: number | number[] - Valor(es) seleccionado(s) (bindable)
+	 * - `onValueChange`: Callback durante el arrastre
+	 * - `onValueCommit`: Callback al soltar el thumb
+	 * - `min`: number - Valor mínimo (default: 0)
+	 * - `max`: number - Valor máximo (default: 100)
+	 * - `step`: number - Incremento mínimo (default: 1)
+	 * - `dir`: "ltr" | "rtl" - Dirección
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `disabled`: boolean - Deshabilita el slider
+	 * - `autoSort`: boolean - Ordena thums automáticamente
+	 * - `thumbPositioning`: "contain" | "within" - Posicionamiento de thumbs
+	 * - `trackPadding`: number - Padding del track
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-slider]                    → Contenedor del slider
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span role="slider">` o `<div role="group">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SliderRootProps } from "../types";
 	import { SliderRootState } from "../slider.svelte";
diff --git a/src/uix/terra/spinner/components/bars.svelte b/src/uix/terra/spinner/components/bars.svelte
index d85c56030..6e12e8464 100644
--- a/src/uix/terra/spinner/components/bars.svelte
+++ b/src/uix/terra/spinner/components/bars.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # Bars Spinner
+	 *
+	 * Variant of spinner with animated scaling bars.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-spinner-bars]              → Elemento raíz del spinner de barras
+	 * [data-size="sm"]                 → Tamaño pequeño
+	 * [data-size="md"]                 → Tamaño mediano
+	 * [data-size="lg"]                 → Tamaño grande
+	 * [data-size="xl"]                 → Tamaño extra grande
+	 * [data-speed="slow"]              → Velocidad lenta
+	 * [data-speed="normal"]            → Velocidad normal
+	 * [data-speed="fast"]              → Velocidad rápida
+	 * ```
+	 */
 	import { mergeProps }  from '$terra/utils';
 	import { resolveSpinnerSizeToken, resolveSpinnerSpeedToken, useSpinnerRootState } from '../spinner.svelte';
 	import type { SpinnerBarsProps } from '../types';
diff --git a/src/uix/terra/spinner/components/circular.svelte b/src/uix/terra/spinner/components/circular.svelte
index 342c0c86f..61e4b5a81 100644
--- a/src/uix/terra/spinner/components/circular.svelte
+++ b/src/uix/terra/spinner/components/circular.svelte
@@ -1,4 +1,17 @@
 <script lang="ts">
+	/**
+	 * # Circular Spinner
+	 *
+	 * Variant of spinner with a rotating circular arc animation.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-spinner-circular]          → Elemento raíz del spinner circular
+	 * [data-speed="slow"]              → Velocidad lenta
+	 * [data-speed="normal"]            → Velocidad normal
+	 * [data-speed="fast"]              → Velocidad rápida
+	 * ```
+	 */
 	import { mergeProps }  from '$terra/utils';
 	import { resolveSpinnerSizePx, resolveSpinnerSpeedToken, useSpinnerRootState } from '../spinner.svelte';
 	import type { SpinnerCircularProps } from '../types';
diff --git a/src/uix/terra/spinner/components/dots.svelte b/src/uix/terra/spinner/components/dots.svelte
index be4fbdcb1..48d7f5721 100644
--- a/src/uix/terra/spinner/components/dots.svelte
+++ b/src/uix/terra/spinner/components/dots.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # Dots Spinner
+	 *
+	 * Variant of spinner with bouncing dots animation.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-spinner-dots]              → Elemento raíz del spinner de puntos
+	 * [data-size="sm"]                 → Tamaño pequeño
+	 * [data-size="md"]                 → Tamaño mediano
+	 * [data-size="lg"]                 → Tamaño grande
+	 * [data-size="xl"]                 → Tamaño extra grande
+	 * [data-speed="slow"]              → Velocidad lenta
+	 * [data-speed="normal"]            → Velocidad normal
+	 * [data-speed="fast"]              → Velocidad rápida
+	 * ```
+	 */
 	import { mergeProps }  from '$terra/utils';
 	import { resolveSpinnerSizeToken, resolveSpinnerSpeedToken, useSpinnerRootState } from '../spinner.svelte';
 	import type { SpinnerDotsProps } from '../types';
diff --git a/src/uix/terra/spinner/components/pulse.svelte b/src/uix/terra/spinner/components/pulse.svelte
index 74e941770..8d40ab182 100644
--- a/src/uix/terra/spinner/components/pulse.svelte
+++ b/src/uix/terra/spinner/components/pulse.svelte
@@ -1,4 +1,21 @@
 <script lang="ts">
+	/**
+	 * # Pulse Spinner
+	 *
+	 * Variant of spinner with pulsing rings animation.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-spinner-pulse]             → Elemento raíz del spinner de pulso
+	 * [data-size="sm"]                 → Tamaño pequeño
+	 * [data-size="md"]                 → Tamaño mediano
+	 * [data-size="lg"]                 → Tamaño grande
+	 * [data-size="xl"]                 → Tamaño extra grande
+	 * [data-speed="slow"]              → Velocidad lenta
+	 * [data-speed="normal"]            → Velocidad normal
+	 * [data-speed="fast"]              → Velocidad rápida
+	 * ```
+	 */
 	import { mergeProps }  from '$terra/utils';
 	import { resolveSpinnerSizeToken, resolveSpinnerSpeedToken, useSpinnerRootState } from '../spinner.svelte';
 	import type { SpinnerPulseProps } from '../types';
diff --git a/src/uix/terra/spinner/components/spinner.svelte b/src/uix/terra/spinner/components/spinner.svelte
index 6b87f99b2..01a77808b 100644
--- a/src/uix/terra/spinner/components/spinner.svelte
+++ b/src/uix/terra/spinner/components/spinner.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Spinner Root
+	 *
+	 * Indicador de carga animado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Spinner variant="circular" size="md" />
+	 *
+	 * <Spinner variant="dots" />
+	 *
+	 * <Spinner variant="pulse" />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `variant`: "circular" | "dots" | "bars" | "pulse" - Tipo de animación
+	 * - `size`: "xs" | "sm" | "md" | "lg" | "xl" - Tamaño
+	 * - `speed`: "slow" | "normal" | "fast" - Velocidad de animación
+	 * - `label`: string - Texto descriptivo para accesibilidad
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-spinner]                  → Contenedor del spinner
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span role="status">`.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { SpinnerRootProps } from '../types';
 	import { SpinnerRootState } from '../spinner.svelte';
diff --git a/src/uix/terra/splitter/components/splitter-panel.svelte b/src/uix/terra/splitter/components/splitter-panel.svelte
index d6f7a1948..44fdec628 100644
--- a/src/uix/terra/splitter/components/splitter-panel.svelte
+++ b/src/uix/terra/splitter/components/splitter-panel.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Splitter Panel
+	 *
+	 * Resizable panel component within a splitter.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-splitter-panel]            → Elemento raíz del panel
+	 * [data-panel-id]                  → Identificador del panel
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { SplitterPanelProps } from '../types';
 	import { SplitterPanelState } from '../splitter.svelte';
diff --git a/src/uix/terra/splitter/components/splitter-resize-trigger.svelte b/src/uix/terra/splitter/components/splitter-resize-trigger.svelte
index afb5421b4..9ca40938d 100644
--- a/src/uix/terra/splitter/components/splitter-resize-trigger.svelte
+++ b/src/uix/terra/splitter/components/splitter-resize-trigger.svelte
@@ -1,4 +1,17 @@
 <script lang="ts">
+	/**
+	 * # Splitter Resize Trigger
+	 *
+	 * Resizable trigger/handle component between splitter panels.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-splitter-resize-trigger]   → Elemento raíz del trigger de redimensionado
+	 * [data-dragging]                  → Presente durante el arrastre
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-orientation]               → "horizontal" | "vertical"
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { SplitterResizeTriggerProps } from '../types';
 	import { SplitterResizeTriggerState } from '../splitter.svelte';
diff --git a/src/uix/terra/splitter/components/splitter-root.svelte b/src/uix/terra/splitter/components/splitter-root.svelte
index f16588c06..db80a2640 100644
--- a/src/uix/terra/splitter/components/splitter-root.svelte
+++ b/src/uix/terra/splitter/components/splitter-root.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Splitter Root
+	 *
+	 * Contenedor raíz para paneles redimensionables.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Splitter orientation="horizontal">
+	 *   <Splitter.Panel panelId="left" defaultSize={50}>
+	 *     Panel izquierdo
+	 *   </Splitter.Panel>
+	 *   <Splitter.ResizeTrigger panelA="left" panelB="right" />
+	 *   <Splitter.Panel panelId="right" defaultSize={50}>
+	 *     Panel derecho
+	 *   </Splitter.Panel>
+	 * </Splitter>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `disabled`: boolean - Deshabilitar redimensionado
+	 * - `keyboardStep`: number - Paso de teclado (default: 1)
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-splitter]                   → Contenedor raíz
+	 * [data-orientation]                → "horizontal" | "vertical"
+	 * [data-disabled]                   → Presente cuando disabled
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { SplitterRootProps } from '../types';
diff --git a/src/uix/terra/stepper/components/stepper-content.svelte b/src/uix/terra/stepper/components/stepper-content.svelte
index 38a5dda59..6bcdd5187 100644
--- a/src/uix/terra/stepper/components/stepper-content.svelte
+++ b/src/uix/terra/stepper/components/stepper-content.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Content
+	 *
+	 * Contenido asociado a un paso del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-content] → Elemento contenedor del contenido del paso
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperContentProps } from '../types';
 	import { StepperContentState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-description.svelte b/src/uix/terra/stepper/components/stepper-description.svelte
index a6185b64e..496199587 100644
--- a/src/uix/terra/stepper/components/stepper-description.svelte
+++ b/src/uix/terra/stepper/components/stepper-description.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Description
+	 *
+	 * Descripción de un paso del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-description] → Elemento contenedor de la descripción del paso
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperDescriptionProps } from '../types';
 	import { StepperDescriptionState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-indicator.svelte b/src/uix/terra/stepper/components/stepper-indicator.svelte
index 796e0fab5..5d2236c62 100644
--- a/src/uix/terra/stepper/components/stepper-indicator.svelte
+++ b/src/uix/terra/stepper/components/stepper-indicator.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Indicator
+	 *
+	 * Indicador visual del número de paso en el stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-indicator] → Elemento contenedor del indicador del paso
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperIndicatorProps } from '../types';
 	import { StepperIndicatorState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-item.svelte b/src/uix/terra/stepper/components/stepper-item.svelte
index 274b4a9a2..ccbfa4190 100644
--- a/src/uix/terra/stepper/components/stepper-item.svelte
+++ b/src/uix/terra/stepper/components/stepper-item.svelte
@@ -1,4 +1,17 @@
 <script lang="ts">
+	/**
+	 * # Stepper Item
+	 *
+	 * Item individual del stepper que representa un paso.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-item]        → Elemento contenedor del item
+	 * [data-state="current"]     → Estado cuando el paso es el actual
+	 * [data-state="complete"]    → Estado cuando el paso está completado
+	 * [data-state="incomplete"]  → Estado cuando el paso está pendiente
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperItemProps } from '../types';
 	import { StepperItemState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-list.svelte b/src/uix/terra/stepper/components/stepper-list.svelte
index 04cbabc73..075031d11 100644
--- a/src/uix/terra/stepper/components/stepper-list.svelte
+++ b/src/uix/terra/stepper/components/stepper-list.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper List
+	 *
+	 * Contenedor de los items del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-list] → Elemento contenedor de la lista de pasos
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperListProps } from '../types';
 	import { StepperListState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-next-trigger.svelte b/src/uix/terra/stepper/components/stepper-next-trigger.svelte
index 1a856acb3..2957d1a87 100644
--- a/src/uix/terra/stepper/components/stepper-next-trigger.svelte
+++ b/src/uix/terra/stepper/components/stepper-next-trigger.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Next Trigger
+	 *
+	 * Botón para navegar al siguiente paso del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-next-trigger] → Elemento botón de navegación siguiente
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperNextTriggerProps } from '../types';
 	import { StepperNextTriggerState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-prev-trigger.svelte b/src/uix/terra/stepper/components/stepper-prev-trigger.svelte
index 62344c0a5..8fe4f0fb2 100644
--- a/src/uix/terra/stepper/components/stepper-prev-trigger.svelte
+++ b/src/uix/terra/stepper/components/stepper-prev-trigger.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Prev Trigger
+	 *
+	 * Botón para navegar al paso anterior del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-prev-trigger] → Elemento botón de navegación anterior
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperPrevTriggerProps } from '../types';
 	import { StepperPrevTriggerState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-root.svelte b/src/uix/terra/stepper/components/stepper-root.svelte
index 47e0bd922..f4318fd97 100644
--- a/src/uix/terra/stepper/components/stepper-root.svelte
+++ b/src/uix/terra/stepper/components/stepper-root.svelte
@@ -1,4 +1,37 @@
 <script lang="ts">
+	/**
+	 * # Stepper Root
+	 *
+	 * Contenedor raíz para un componente stepper paso a paso.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Stepper bind:step={currentStep}>
+	 *   <Stepper.List>
+	 *     <Stepper.Item index={0}>
+	 *       <Stepper.Trigger>Paso 1</Stepper.Trigger>
+	 *       <Stepper.Content>Contenido 1</Stepper.Content>
+	 *     </Stepper.Item>
+	 *   </Stepper.List>
+	 * </Stepper>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `step`: number - Paso actual (bindable)
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `linear`: boolean - Si debe seguir orden lineal
+	 * - `disabled`: boolean - Deshabilitar navegación
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper]                    → Contenedor raíz
+	 * [data-orientation]                → "horizontal" | "vertical"
+	 * [data-disabled]                   → Presente cuando disabled
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>`.
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperRootProps } from '../types';
diff --git a/src/uix/terra/stepper/components/stepper-separator.svelte b/src/uix/terra/stepper/components/stepper-separator.svelte
index deb93b771..dc3a569e4 100644
--- a/src/uix/terra/stepper/components/stepper-separator.svelte
+++ b/src/uix/terra/stepper/components/stepper-separator.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Separator
+	 *
+	 * Separador visual entre los items del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-separator] → Elemento separador entre pasos
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperSeparatorProps } from '../types';
 	import { StepperSeparatorState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-title.svelte b/src/uix/terra/stepper/components/stepper-title.svelte
index 649e32a27..70706f585 100644
--- a/src/uix/terra/stepper/components/stepper-title.svelte
+++ b/src/uix/terra/stepper/components/stepper-title.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Title
+	 *
+	 * Título de un paso del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-title] → Elemento contenedor del título del paso
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperTitleProps } from '../types';
 	import { StepperTitleState } from '../stepper.svelte';
diff --git a/src/uix/terra/stepper/components/stepper-trigger.svelte b/src/uix/terra/stepper/components/stepper-trigger.svelte
index 368bf0dfa..c3d4eebb3 100644
--- a/src/uix/terra/stepper/components/stepper-trigger.svelte
+++ b/src/uix/terra/stepper/components/stepper-trigger.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Stepper Trigger
+	 *
+	 * Botón que permite navegar a un paso específico del stepper.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-stepper-trigger] → Elemento botón de navegación del paso
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { StepperTriggerProps } from '../types';
 	import { StepperTriggerState } from '../stepper.svelte';
diff --git a/src/uix/terra/switch/components/switch-thumb.svelte b/src/uix/terra/switch/components/switch-thumb.svelte
index 1f4b143ff..3ae5e2345 100644
--- a/src/uix/terra/switch/components/switch-thumb.svelte
+++ b/src/uix/terra/switch/components/switch-thumb.svelte
@@ -1,4 +1,34 @@
 <script lang="ts">
+	/**
+	 * # Switch Thumb
+	 *
+	 * Indicador visual deslizante del switch.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Switch bind:checked={enabled}>
+	 *   <SwitchThumb />
+	 * </Switch>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `checked`: boolean - Estado del switch
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-switch-thumb]              → Elemento thumb (deslizable)
+	 * [data-state="checked"]            → Hereda estado del root
+	 * [data-state="unchecked"]          → Hereda estado del root
+	 * [data-disabled]                  → Hereda disabled del root
+	 * [data-required]                  → Hereda required del root
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<span>`. Se mueve según el estado checked.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SwitchThumbProps } from "../types";
 	import { SwitchThumbState } from "../switch.svelte";
diff --git a/src/uix/terra/switch/components/switch.svelte b/src/uix/terra/switch/components/switch.svelte
index 33aadf1c2..ba9d104b4 100644
--- a/src/uix/terra/switch/components/switch.svelte
+++ b/src/uix/terra/switch/components/switch.svelte
@@ -1,4 +1,44 @@
 <script lang="ts">
+	/**
+	 * # Switch Root
+	 *
+	 * Interruptor de toggle binario (on/off).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Switch
+	 *   bind:checked={isEnabled}
+	 *   disabled={false}
+	 *   name="notifications"
+	 * >
+	 *   <SwitchThumb />
+	 * </Switch>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `checked`: boolean - Estado del switch (bindable)
+	 * - `onCheckedChange`: Callback cuando cambia el estado
+	 * - `disabled`: boolean - Deshabilita el switch
+	 * - `required`: boolean - Requerido para formularios
+	 * - `name`: string - Nombre para formularios
+	 * - `value`: string - Valor para formularios (default: "on")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `checked`: boolean - Estado actual
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-switch]                    → Root (botón principal)
+	 * [data-state="checked"]            → Switch activado
+	 * [data-state="unchecked"]          → Switch desactivado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-required]                  → Presente cuando required=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button role="switch">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { SwitchRootProps } from "../types";
 	import { SwitchRootState, SwitchInputState } from "../switch.svelte";
diff --git a/src/uix/terra/tabs/components/tabs-content.svelte b/src/uix/terra/tabs/components/tabs-content.svelte
index c41fa5286..497428948 100644
--- a/src/uix/terra/tabs/components/tabs-content.svelte
+++ b/src/uix/terra/tabs/components/tabs-content.svelte
@@ -1,4 +1,35 @@
 <script lang="ts">
+	/**
+	 * # Tabs Content
+	 *
+	 * Contenido de una pestaña específica. Solo se muestra cuando está activa.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <TabsContent value="home">
+	 *   <h1>Bienvenido</h1>
+	 *   <p>Contenido de inicio</p>
+	 * </TabsContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor que debe coincidir con el del TabTrigger
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Comportamiento
+	 * - Solo se muestra cuando `value` coincide con el `value` del Tabs Root
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tabs-content]              → Contenedor de contenido
+	 * [data-value]                     → Valor identificador del content
+	 * [data-state="active"]            → Contenido activo
+	 * [data-state="inactive"]          → Contenido inactivo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="tabpanel">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { TabsContentProps } from "../types";
 	import { TabsContentState } from "../tabs.svelte";
diff --git a/src/uix/terra/tabs/components/tabs-list.svelte b/src/uix/terra/tabs/components/tabs-list.svelte
index 261b72463..861ec2709 100644
--- a/src/uix/terra/tabs/components/tabs-list.svelte
+++ b/src/uix/terra/tabs/components/tabs-list.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Tabs List
+	 *
+	 * Contenedor de los triggers de las pestañas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Tabs>
+	 *   <TabsList>
+	 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+	 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+	 *   </TabsList>
+	 *   <TabsContent value="tab1">...</TabsContent>
+	 *   <TabsContent value="tab2">...</TabsContent>
+	 * </Tabs>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tabs-list]                 → Contenedor de tabs
+	 * [data-orientation]                → "horizontal" | "vertical"
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="tablist".
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { TabsListProps } from "../types";
 	import { TabsListState } from "../tabs.svelte";
diff --git a/src/uix/terra/tabs/components/tabs-trigger.svelte b/src/uix/terra/tabs/components/tabs-trigger.svelte
index c6c9cb89f..a23861812 100644
--- a/src/uix/terra/tabs/components/tabs-trigger.svelte
+++ b/src/uix/terra/tabs/components/tabs-trigger.svelte
@@ -1,4 +1,41 @@
 <script lang="ts">
+	/**
+	 * # Tabs Trigger
+	 *
+	 * Botón que activa una pestaña específica.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <TabsList>
+	 *   <TabsTrigger value="home">
+	 *     <HomeIcon />
+	 *     Inicio
+	 *   </TabsTrigger>
+	 *   <TabsTrigger value="profile">
+	 *     <UserIcon />
+	 *     Perfil
+	 *   </TabsTrigger>
+	 * </TabsList>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor identificador de la pestaña
+	 * - `disabled`: boolean - Deshabilita esta pestaña
+	 * - `type`: string - Tipo del botón (default: "button")
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tabs-trigger]              → Botón de tab
+	 * [data-state="active"]            → Tab activa
+	 * [data-state="inactive"]          → Tab inactiva
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-value]                     → Valor identificador de la tab
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button role="tab">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { TabsTriggerProps } from "../types";
 	import { TabsTriggerState } from "../tabs.svelte";
diff --git a/src/uix/terra/tabs/components/tabs.svelte b/src/uix/terra/tabs/components/tabs.svelte
index 599641787..5fb48b8b2 100644
--- a/src/uix/terra/tabs/components/tabs.svelte
+++ b/src/uix/terra/tabs/components/tabs.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # Tabs Root
+	 *
+	 * Componente raíz de pestañas con navegación por teclado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Tabs bind:value={activeTab}>
+	 *   <TabsList>
+	 *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+	 *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+	 *     <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+	 *   </TabsList>
+	 *   <TabsContent value="tab1">Contenido 1</TabsContent>
+	 *   <TabsContent value="tab2">Contenido 2</TabsContent>
+	 *   <TabsContent value="tab3">Contenido 3</TabsContent>
+	 * </Tabs>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Pestaña activa (bindable)
+	 * - `onValueChange`: Callback cuando cambia la pestaña
+	 * - `orientation`: "horizontal" | "vertical" - Orientación de las tabs
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `activationMode`: "automatic" | "manual" - Cómo se activan las tabs
+	 * - `disabled`: boolean - Deshabilita todas las tabs
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tabs]                      → Contenedor root
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con role="tablist".
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { TabsRootProps } from "../types";
 	import { TabsRootState } from "../tabs.svelte";
diff --git a/src/uix/terra/tags-input/components/tags-input-clear.svelte b/src/uix/terra/tags-input/components/tags-input-clear.svelte
index c482ac2d1..5ddebbf13 100644
--- a/src/uix/terra/tags-input/components/tags-input-clear.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-clear.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Clear
+	 *
+	 * Boton para limpiar todos los tags.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input-clear] → Elemento boton para limpiar todos los tags
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputClearProps } from '../types';
 	import { TagsInputClearState } from '../tags-input.svelte';
diff --git a/src/uix/terra/tags-input/components/tags-input-input.svelte b/src/uix/terra/tags-input/components/tags-input-input.svelte
index 9d55559a4..dcefea887 100644
--- a/src/uix/terra/tags-input/components/tags-input-input.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-input.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Input
+	 *
+	 * Campo de entrada para agregar nuevos tags.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input-input] → Elemento input para agregar tags
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputInputProps } from '../types';
 	import { TagsInputInputState } from '../tags-input.svelte';
diff --git a/src/uix/terra/tags-input/components/tags-input-root.svelte b/src/uix/terra/tags-input/components/tags-input-root.svelte
index 117392188..c41bcd1be 100644
--- a/src/uix/terra/tags-input/components/tags-input-root.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-root.svelte
@@ -1,4 +1,52 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Root
+	 *
+	 * Campo de entrada para agregar tags/etiquetas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <TagsInput
+	 *   bind:value={tags}
+	 *   bind:inputValue={input}
+	 *   delimiter={[',', 'Enter']}
+	 *   max={10}
+	 *   allowDuplicates={false}
+	 * >
+	 *   {#each tags as tag, index}
+	 *     <TagsInputTag {tag} {index}>
+	 *       <TagsInputTagText>{tag}</TagsInputTagText>
+	 *       <TagsInputTagRemove>×</TagsInputTagRemove>
+	 *     </TagsInputTag>
+	 *   {/each}
+	 *   <TagsInputInput placeholder="Agregar tag..." />
+	 *   <TagsInputClear>Limpiar</TagsInputClear>
+	 * </TagsInput>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string[] - Tags actuales (bindable)
+	 * - `onValueChange`: Callback cuando cambian los tags
+	 * - `inputValue`: string - Valor del input (bindable)
+	 * - `onInputValueChange`: Callback cuando cambia el input
+	 * - `delimiter`: string[] | string - Delimitadores para agregar tags (default: [','])
+	 * - `max`: number - Máximo de tags
+	 * - `allowDuplicates`: boolean - Permite tags duplicados
+	 * - `disabled`: boolean - Deshabilita el campo
+	 * - `readonly`: boolean - Solo lectura
+	 * - `invalid`: boolean - Estado de error
+	 * - `name`: string - Nombre para formularios
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input] → Elemento contenedor del componente
+	 * [data-disabled]   → Estado cuando el campo está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con inputs ocultos para formularios.
+	 */
 	import { noop } from '$lib/util/funcs';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputRootProps } from '../types';
diff --git a/src/uix/terra/tags-input/components/tags-input-tag-remove.svelte b/src/uix/terra/tags-input/components/tags-input-tag-remove.svelte
index 805272d62..1f1db59f3 100644
--- a/src/uix/terra/tags-input/components/tags-input-tag-remove.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-tag-remove.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Tag Remove
+	 *
+	 * Boton para eliminar un tag individual.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input-tag-remove] → Elemento boton para eliminar el tag
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputTagRemoveProps } from '../types';
 	import { TagsInputTagRemoveState } from '../tags-input.svelte';
diff --git a/src/uix/terra/tags-input/components/tags-input-tag-text.svelte b/src/uix/terra/tags-input/components/tags-input-tag-text.svelte
index b6e484908..6db38ca44 100644
--- a/src/uix/terra/tags-input/components/tags-input-tag-text.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-tag-text.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Tag Text
+	 *
+	 * Texto de un tag individual.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input-tag-text] → Elemento contenedor del texto del tag
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputTagTextProps } from '../types';
 	import { TagsInputTagTextState, TagsInputTagState } from '../tags-input.svelte';
diff --git a/src/uix/terra/tags-input/components/tags-input-tag.svelte b/src/uix/terra/tags-input/components/tags-input-tag.svelte
index 9e05dcb35..30df61766 100644
--- a/src/uix/terra/tags-input/components/tags-input-tag.svelte
+++ b/src/uix/terra/tags-input/components/tags-input-tag.svelte
@@ -1,4 +1,39 @@
 <script lang="ts">
+	/**
+	 * # Tags Input Tag
+	 *
+	 * Tag individual dentro del TagsInput.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * {#each tags as tag, index}
+	 *   <TagsInputTag {tag} {index}>
+	 *     <TagsInputTagText>{tag}</TagsInputTagText>
+	 *     <TagsInputTagRemove>
+	 *       <CloseIcon />
+	 *     </TagsInputTagRemove>
+	 *   </TagsInputTag>
+	 * {/each}
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor del tag
+	 * - `index`: number - Índice del tag
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `disabled`: boolean - Si el tag está deshabilitado
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tags-input-tag]  → Elemento contenedor del tag
+	 * [data-readonly]        → Estado cuando el tag es de solo lectura
+	 * [data-disabled]        → Estado cuando el tag está deshabilitado
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con `data-tag`.
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { TagsInputTagProps } from '../types';
 	import { TagsInputTagState } from '../tags-input.svelte';
diff --git a/src/uix/terra/time-field/components/time-field-hidden-input.svelte b/src/uix/terra/time-field/components/time-field-hidden-input.svelte
index 1f988cb65..6128fd283 100644
--- a/src/uix/terra/time-field/components/time-field-hidden-input.svelte
+++ b/src/uix/terra/time-field/components/time-field-hidden-input.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # Time Field Hidden Input
+	 *
+	 * Hidden input component for form submission of time field value.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-field-hidden-input]   → Elemento input oculto
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * ```
+	 */
 	import HiddenInput from "../../layers/hidden-input.svelte";
 	import { TimeFieldHiddenInputState } from "../time-field.svelte.js";
 
diff --git a/src/uix/terra/time-field/components/time-field-input.svelte b/src/uix/terra/time-field/components/time-field-input.svelte
index 7ffd0b162..60ae0982c 100644
--- a/src/uix/terra/time-field/components/time-field-input.svelte
+++ b/src/uix/terra/time-field/components/time-field-input.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Time Field Input
+	 *
+	 * Input component for time field with editable segments.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-field-input]          → Elemento raíz del input de campo de hora
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-invalid]                   → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { createId } from "../../utils/create-id.ts";
 	import { TimeFieldInputState } from "../time-field.svelte.js";
diff --git a/src/uix/terra/time-field/components/time-field-label.svelte b/src/uix/terra/time-field/components/time-field-label.svelte
index 4adc314de..11b9e9404 100644
--- a/src/uix/terra/time-field/components/time-field-label.svelte
+++ b/src/uix/terra/time-field/components/time-field-label.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Time Field Label
+	 *
+	 * Label component for time field.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-field-label]          → Elemento raíz de la etiqueta
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { createId } from "../../utils/create-id.ts";
 	import { TimeFieldLabelState } from "../time-field.svelte.js";
diff --git a/src/uix/terra/time-field/components/time-field-segment.svelte b/src/uix/terra/time-field/components/time-field-segment.svelte
index 9ddc11895..f06b33fdd 100644
--- a/src/uix/terra/time-field/components/time-field-segment.svelte
+++ b/src/uix/terra/time-field/components/time-field-segment.svelte
@@ -1,4 +1,18 @@
 <script lang="ts">
+	/**
+	 * # Time Field Segment
+	 *
+	 * Individual segment component (hour, minute, second) within time field.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-field-segment]        → Elemento raíz del segmento
+	 * [data-segment]                   → Tipo de segmento (hour, minute, second, etc.)
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-invalid]                   → Presente cuando el segmento es inválido
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import { createId } from "../../utils/create-id.js";
 	import { TimeFieldSegmentState } from "../time-field.svelte.js";
diff --git a/src/uix/terra/time-field/components/time-field.svelte b/src/uix/terra/time-field/components/time-field.svelte
index 39de73b1b..e4579dd57 100644
--- a/src/uix/terra/time-field/components/time-field.svelte
+++ b/src/uix/terra/time-field/components/time-field.svelte
@@ -1,4 +1,20 @@
 <script lang="ts">
+	/**
+	 * # TimeField Root
+	 *
+	 * Componente de campo de hora con segmentos editables.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-field]                → Contenedor raíz
+	 * [data-time-field-input]          → Entrada del campo
+	 * [data-time-field-label]          → Etiqueta del campo
+	 * [data-time-field-segment]        → Segmento individual (hora, minuto, segundo)
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-invalid]                  → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive } from '$terra/utils';
 	const noop = () => {};
diff --git a/src/uix/terra/time-range-field/components/time-range-field-input.svelte b/src/uix/terra/time-range-field/components/time-range-field-input.svelte
index b0d57c778..cd9066d5a 100644
--- a/src/uix/terra/time-range-field/components/time-range-field-input.svelte
+++ b/src/uix/terra/time-range-field/components/time-range-field-input.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Time Range Field Input
+	 *
+	 * Input component for time range field with editable segments.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-range-field-input]    → Elemento raíz del input de campo de rango de hora
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-invalid]                   → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { readableActive, writableActive, createId, mergeProps } from "$terra/utils";
 	import HiddenInput from "../../layers/hidden-input.svelte";
 	import { TimeRangeFieldInputState, getTimeRangeFieldHiddenInputProps } from "../time-range-field.svelte.ts";
diff --git a/src/uix/terra/time-range-field/components/time-range-field-label.svelte b/src/uix/terra/time-range-field/components/time-range-field-label.svelte
index f8775fdf4..39c9229e2 100644
--- a/src/uix/terra/time-range-field/components/time-range-field-label.svelte
+++ b/src/uix/terra/time-range-field/components/time-range-field-label.svelte
@@ -1,4 +1,16 @@
 <script lang="ts">
+	/**
+	 * # Time Range Field Label
+	 *
+	 * Label component for time range field.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-range-field-label]    → Elemento raíz de la etiqueta
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-invalid]                   → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { readableActive, writableActive, createId, mergeProps } from '$terra/utils';
 	import { TimeRangeFieldLabelState } from "../time-range-field.svelte.ts";
 	import type { TimeRangeFieldLabelProps } from "../types.js";
diff --git a/src/uix/terra/time-range-field/components/time-range-field.svelte b/src/uix/terra/time-range-field/components/time-range-field.svelte
index 70633a976..aaeb90437 100644
--- a/src/uix/terra/time-range-field/components/time-range-field.svelte
+++ b/src/uix/terra/time-range-field/components/time-range-field.svelte
@@ -1,4 +1,18 @@
 <script lang="ts">
+	/**
+	 * # TimeRangeField Root
+	 *
+	 * Componente de campo de rango de horas con segmentos editables.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-time-range-field]          → Contenedor raíz
+	 * [data-time-range-field-label]    → Etiqueta del campo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-readonly]                  → Presente cuando readonly=true
+	 * [data-invalid]                  → Presente cuando el campo es inválido
+	 * ```
+	 */
 	import { watch } from "runed";
 	import { readableActive, writableActive, createId, mergeProps } from "$terra/utils";
 	const noop = () => {};
diff --git a/src/uix/terra/toast/components/toast-close.svelte b/src/uix/terra/toast/components/toast-close.svelte
index 38e609050..1ce637353 100644
--- a/src/uix/terra/toast/components/toast-close.svelte
+++ b/src/uix/terra/toast/components/toast-close.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Toast Close
+	 *
+	 * Botón para cerrar manualmente la notificación.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toast-close]             → Botón de cerrar toast
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { ToastCloseProps } from '../types';
 	import { ToastCloseState } from '../toast.svelte';
diff --git a/src/uix/terra/toast/components/toast-description.svelte b/src/uix/terra/toast/components/toast-description.svelte
index 62d20ede6..1d19d31df 100644
--- a/src/uix/terra/toast/components/toast-description.svelte
+++ b/src/uix/terra/toast/components/toast-description.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Toast Description
+	 *
+	 * Descripción/mensaje de la notificación.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toast-description]       → Descripción del toast
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { ToastDescriptionProps } from '../types';
 	import { ToastDescriptionState } from '../toast.svelte';
diff --git a/src/uix/terra/toast/components/toast-root.svelte b/src/uix/terra/toast/components/toast-root.svelte
index 58afc5bed..6fcf03368 100644
--- a/src/uix/terra/toast/components/toast-root.svelte
+++ b/src/uix/terra/toast/components/toast-root.svelte
@@ -1,4 +1,51 @@
 <script lang="ts">
+	/**
+	 * # Toast Root
+	 *
+	 * Componente raíz de un toast individual (notificación).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ToastRoot
+	 *   type="success"
+	 *   duration={5000}
+	 *   onDismiss={() => console.log('dismissed')}
+	 * >
+	 *   <ToastTitle>¡Éxito!</ToastTitle>
+	 *   <ToastDescription>
+	 *     La operación se completó correctamente
+	 *   </ToastDescription>
+	 *   <ToastClose />
+	 * </ToastRoot>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "default" | "success" | "error" | "warning" | "info" - Tipo del toast
+	 * - `duration`: number - Duración antes de autocerrar (ms, 0 = infinito)
+	 * - `onDismiss`: Callback al descartar manualmente
+	 * - `onAutoClose`: Callback al autocerrar
+	 * - `id`: string - ID del toast
+	 *
+	 * ## Comportamiento
+	 * - Se autocierra después de `duration` ms
+	 * - Se puede cerrar manualmente con ToastClose
+	 * - Se elimina del store después de la animación de cierre
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toast]                    → Contenedor raíz del toast
+	 * [data-state="open"]             → Estado cuando el toast está abierto
+	 * [data-state="closed"]           → Estado cuando el toast está cerrado
+	 * [data-type="default"]           → Tipo por defecto
+	 * [data-type="success"]           → Tipo de éxito
+	 * [data-type="error"]             → Tipo de error
+	 * [data-type="warning"]           → Tipo de advertencia
+	 * [data-type="info"]              → Tipo informativo
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div>` con atributos de tipo y estado.
+	 */
 	import { onMount } from 'svelte';
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { ToastRootProps } from '../types';
diff --git a/src/uix/terra/toast/components/toast-title.svelte b/src/uix/terra/toast/components/toast-title.svelte
index 79862bf59..b5e95f9f3 100644
--- a/src/uix/terra/toast/components/toast-title.svelte
+++ b/src/uix/terra/toast/components/toast-title.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Toast Title
+	 *
+	 * Título/encabezado de la notificación.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toast-title]             → Título del toast
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps, createId } from '$terra/utils';
 	import type { ToastTitleProps } from '../types';
 	import { ToastTitleState } from '../toast.svelte';
diff --git a/src/uix/terra/toast/components/toast-toaster.svelte b/src/uix/terra/toast/components/toast-toaster.svelte
index 62b06ea58..856f3473a 100644
--- a/src/uix/terra/toast/components/toast-toaster.svelte
+++ b/src/uix/terra/toast/components/toast-toaster.svelte
@@ -1,4 +1,27 @@
 <script lang="ts">
+	/**
+	 * # Toast Toaster
+	 *
+	 * Contenedor que renderiza todos los toasts/notificaciones activas.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ToastToaster position="bottom-right" gap={8} />
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `position`: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"
+	 * - `gap`: number - Espacio entre toasts (px)
+	 * - `style`: string | CSSProperties - Estilos adicionales
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="region">` dentro de un Portal.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toast-toaster]           → Contenedor de todos los toasts
+	 * ```
+	 */
 	import { styleToString } from '$terra/utils';
 	import Portal from '$terra/layers/portal/portal.svelte';
 	import { toastStore, toastAttrs } from '../toast.svelte';
diff --git a/src/uix/terra/toggle-group/components/toggle-group-item.svelte b/src/uix/terra/toggle-group/components/toggle-group-item.svelte
index 043377d20..c940b637e 100644
--- a/src/uix/terra/toggle-group/components/toggle-group-item.svelte
+++ b/src/uix/terra/toggle-group/components/toggle-group-item.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Toggle Group Item
+	 *
+	 * Elemento individual de un toggle group.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <ToggleGroup type="single" bind:value={selected}>
+	 *   <ToggleGroupItem value="option1">Opción 1</ToggleGroupItem>
+	 *   <ToggleGroupItem value="option2" disabled>Opción 2</ToggleGroupItem>
+	 * </ToggleGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `value`: string - Valor identificador del item
+	 * - `disabled`: boolean - Deshabilita este item
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toggle-item]                → Botón del item
+	 * [data-state="on"]                 → Item activado
+	 * [data-state="off"]                → Item desactivado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToggleGroupItemProps } from "../types";
 	import { ToggleGroupItemState } from "../toggle-group.svelte";
diff --git a/src/uix/terra/toggle-group/components/toggle-group.svelte b/src/uix/terra/toggle-group/components/toggle-group.svelte
index 4108e8bad..980570b28 100644
--- a/src/uix/terra/toggle-group/components/toggle-group.svelte
+++ b/src/uix/terra/toggle-group/components/toggle-group.svelte
@@ -1,4 +1,48 @@
 <script lang="ts">
+	/**
+	 * # Toggle Group Root
+	 *
+	 * Grupo de toggles que pueden funcionar como single-select o multi-select.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Single select -->
+	 * <ToggleGroup type="single" bind:value={alignment}>
+	 *   <ToggleGroupItem value="left">←</ToggleGroupItem>
+	 *   <ToggleGroupItem value="center">↔</ToggleGroupItem>
+	 *   <ToggleGroupItem value="right">→</ToggleGroupItem>
+	 * </ToggleGroup>
+	 *
+	 * <!-- Multiple select -->
+	 * <ToggleGroup type="multiple" bind:value={formats}>
+	 *   <ToggleGroupItem value="bold">B</ToggleGroupItem>
+	 *   <ToggleGroupItem value="italic">I</ToggleGroupItem>
+	 * </ToggleGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `type`: "single" | "multiple" - Tipo de selección
+	 * - `value`: string | string[] - Valor/es seleccionado/s (bindable)
+	 * - `onValueChange`: Callback cuando cambia la selección
+	 * - `orientation`: "horizontal" | "vertical" - Orientación
+	 * - `loop`: boolean - Navegación cíclica
+	 * - `disabled`: boolean - Deshabilita todo el grupo
+	 * - `rovingFocus`: boolean - Focus navegable
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toggle-group]              → Contenedor del grupo
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * [data-type="single"]             → Selección única
+	 * [data-type="multiple"]           → Selección múltiple
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="group">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToggleGroupRootProps } from "../types";
 	import { ToggleGroupRootState } from "../toggle-group.svelte";
diff --git a/src/uix/terra/toggle/components/toggle.svelte b/src/uix/terra/toggle/components/toggle.svelte
index 688a61c81..5089d2e54 100644
--- a/src/uix/terra/toggle/components/toggle.svelte
+++ b/src/uix/terra/toggle/components/toggle.svelte
@@ -1,4 +1,42 @@
 <script lang="ts">
+	/**
+	 * # Toggle Root
+	 *
+	 * Botón que puede estar presionado o no (similar a un switch sin estado binario).
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <!-- Toggle simple -->
+	 * <Toggle bind:pressed={isBold}>
+	 *   <BoldIcon />
+	 *   Negrita
+	 * </Toggle>
+	 *
+	 * <!-- Toggle group -->
+	 * <ToggleGroup type="single" bind:value={alignment}>
+	 *   <Toggle value="left">Izquierda</Toggle>
+	 *   <Toggle value="center">Centro</Toggle>
+	 *   <Toggle value="right">Derecha</Toggle>
+	 * </ToggleGroup>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `pressed`: boolean - Estado presionado (bindable)
+	 * - `onPressedChange`: Callback cuando cambia el estado
+	 * - `disabled`: boolean - Deshabilita el toggle
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toggle]                    → Botón toggle
+	 * [data-state="on"]                → Toggle presionado
+	 * [data-state="off"]               → Toggle no presionado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button type="button" role="toggle">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToggleRootProps } from "../types";
 	import { ToggleRootState } from "../toggle.svelte";
diff --git a/src/uix/terra/toolbar/components/toolbar-button.svelte b/src/uix/terra/toolbar/components/toolbar-button.svelte
index 31342f6d2..1da77e62b 100644
--- a/src/uix/terra/toolbar/components/toolbar-button.svelte
+++ b/src/uix/terra/toolbar/components/toolbar-button.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # Toolbar Button
+	 *
+	 * Button component for use within toolbar.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toolbar-button]            → Elemento raíz del botón de toolbar
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToolbarButtonProps } from "../types";
 	import { ToolbarButtonState } from "../toolbar.svelte";
diff --git a/src/uix/terra/toolbar/components/toolbar-group-item.svelte b/src/uix/terra/toolbar/components/toolbar-group-item.svelte
index 2687a7784..87de62c84 100644
--- a/src/uix/terra/toolbar/components/toolbar-group-item.svelte
+++ b/src/uix/terra/toolbar/components/toolbar-group-item.svelte
@@ -1,4 +1,19 @@
 <script lang="ts">
+	/**
+	 * # Toolbar Group Item
+	 *
+	 * Individual item component within a toolbar group.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toolbar-group-item]        → Elemento raíz del item de grupo
+	 * [data-state="on"]                → Estado activado/seleccionado
+	 * [data-state="off"]               → Estado desactivado/no seleccionado
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * [data-orientation]               → Hereda orientación del grupo
+	 * [data-value]                     → Valor del item
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToolbarGroupItemProps } from "../types";
 	import { ToolbarGroupItemState } from "../toolbar.svelte";
diff --git a/src/uix/terra/toolbar/components/toolbar-group.svelte b/src/uix/terra/toolbar/components/toolbar-group.svelte
index cb4598991..a4ddce3b8 100644
--- a/src/uix/terra/toolbar/components/toolbar-group.svelte
+++ b/src/uix/terra/toolbar/components/toolbar-group.svelte
@@ -1,4 +1,17 @@
 <script lang="ts">
+	/**
+	 * # Toolbar Group
+	 *
+	 * Group component for organizing toolbar items with single or multiple selection.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toolbar-group]             → Elemento raíz del grupo de toolbar
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * [data-disabled]                  → Presente cuando disabled=true
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToolbarGroupProps } from "../types";
 	import { ToolbarGroupState } from "../toolbar.svelte";
diff --git a/src/uix/terra/toolbar/components/toolbar-link.svelte b/src/uix/terra/toolbar/components/toolbar-link.svelte
index 7404ecbcc..f52c73a16 100644
--- a/src/uix/terra/toolbar/components/toolbar-link.svelte
+++ b/src/uix/terra/toolbar/components/toolbar-link.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Toolbar Link
+	 *
+	 * Link component for use within toolbar.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toolbar-link]              → Elemento raíz del enlace de toolbar
+	 * ```
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToolbarLinkProps } from "../types";
 	import { ToolbarLinkState } from "../toolbar.svelte";
diff --git a/src/uix/terra/toolbar/components/toolbar.svelte b/src/uix/terra/toolbar/components/toolbar.svelte
index 68dd0c225..c99c520e2 100644
--- a/src/uix/terra/toolbar/components/toolbar.svelte
+++ b/src/uix/terra/toolbar/components/toolbar.svelte
@@ -1,4 +1,33 @@
 <script lang="ts">
+	/**
+	 * # Toolbar Root
+	 *
+	 * Barra de herramientas que contiene elementos de acción con navegación por teclado.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Toolbar orientation="horizontal">
+	 *   <ToolbarButton>Acción 1</ToolbarButton>
+	 *   <ToolbarSeparator />
+	 *   <ToolbarButton>Acción 2</ToolbarButton>
+	 * </Toolbar>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `orientation`: "horizontal" | "vertical" - Orientación de la barra
+	 * - `loop`: boolean - Navegación cíclica con flechas
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-toolbar]                  → Contenedor de la barra
+	 * [data-orientation="horizontal"]  → Orientación horizontal
+	 * [data-orientation="vertical"]    → Orientación vertical
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<div role="toolbar">`.
+	 */
 	import { readableActive, writableActive, mergeProps } from '$terra/utils';
 	import type { ToolbarRootProps } from "../types";
 	import { ToolbarRootState } from "../toolbar.svelte";
diff --git a/src/uix/terra/tooltip/components/tooltip-content.svelte b/src/uix/terra/tooltip/components/tooltip-content.svelte
index 699f4ac55..fbcdfc281 100644
--- a/src/uix/terra/tooltip/components/tooltip-content.svelte
+++ b/src/uix/terra/tooltip/components/tooltip-content.svelte
@@ -1,4 +1,49 @@
 <script lang="ts">
+	/**
+	 * # Tooltip Content
+	 *
+	 * Contenido del tooltip que se muestra al hacer hover.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <TooltipContent
+	 *   side="top"
+	 *   align="center"
+	 *   sideOffset={8}
+	 * >
+	 *   Informaciïn contextual del elemento
+	 * </TooltipContent>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `side`: "top" | "right" | "bottom" | "left" - Posiciïn
+	 * - `align`: "start" | "center" | "end" - Alineaciïn
+	 * - `sideOffset`: number - Distancia desde el trigger
+	 * - `avoidCollisions`: boolean - Evita colisiones
+	 * - `collisionPadding`: number - Padding para colisiones
+	 * - `arrowPadding`: number - Padding para la flecha
+	 * - `sticky`: "partial" | "always" - Comportamiento sticky
+	 * - `hideWhenDetached`: boolean - Oculta si estï detached
+	 * - `strategy`: "absolute" | "fixed" - Estrategia de posicionamiento
+	 * - `customAnchor`: HTMLElement - Elemento de anclaje personalizado
+	 * - `forceMount`: boolean - Muestra siempre
+	 * - `dir`: "ltr" | "rtl" - Direcciïn del texto
+	 * - `onInteractOutside`: Callback al interactuar fuera
+	 * - `onEscapeKeydown`: Callback al presionar Escape
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Snippet Props
+	 * - `open`: boolean - Estado de apertura
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tooltip-content]          → Contenedor del tooltip
+	 * [data-state="open"]             → Estado: tooltip abierto
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un `<div>` anidado para posicionamiento.
+	 */
 	import { readableActive, writableActive, mergeProps }  from '$terra/utils';
 	import type { Direction }  from '$terra/utils';
 	import type { TooltipContentProps } from '../types';
diff --git a/src/uix/terra/tooltip/components/tooltip-provider.svelte b/src/uix/terra/tooltip/components/tooltip-provider.svelte
index ce88c79d3..0557e50dd 100644
--- a/src/uix/terra/tooltip/components/tooltip-provider.svelte
+++ b/src/uix/terra/tooltip/components/tooltip-provider.svelte
@@ -1,4 +1,14 @@
 <script lang="ts">
+	/**
+	 * # Tooltip Provider
+	 *
+	 * Proveedor de contexto para los tooltips.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * (No aplica - proveedor sin renderizado visual)
+	 * ```
+	 */
 	import { readableActive } from "$terra/utils";
 	import type { TooltipProviderProps } from "../types";
 	import { TooltipProviderState } from "../tooltip.svelte";
diff --git a/src/uix/terra/tooltip/components/tooltip-trigger.svelte b/src/uix/terra/tooltip/components/tooltip-trigger.svelte
index ad795143a..5f61d1c7c 100644
--- a/src/uix/terra/tooltip/components/tooltip-trigger.svelte
+++ b/src/uix/terra/tooltip/components/tooltip-trigger.svelte
@@ -1,8 +1,41 @@
 <script lang="ts" module>
+	/**
+	 * # Tooltip Trigger (module)
+	 *
+	 * Tipos genéricos para el payload del trigger.
+	 */
 	type T = unknown;
 </script>
 
 <script lang="ts" generics="T = never">
+	/**
+	 * # Tooltip Trigger
+	 *
+	 * Elemento que al hacer hover muestra el tooltip.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <TooltipTrigger payload={{ data: 'info' }}>
+	 *   <button>Hover me</button>
+	 * </TooltipTrigger>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `disabled`: boolean - Deshabilita el trigger
+	 * - `payload`: T - Datos pasados al tooltip content
+	 * - `tether`: boolean - Mantener pegado al tooltip
+	 * - `type`: string - Tipo del botón (default: "button")
+	 * - `tabindex`: number - Índice de tabulación
+	 * - `id`: string - ID del elemento
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tooltip-trigger]          → Elemento que activa el tooltip
+	 * ```
+	 *
+	 * ## Estilos
+	 * Renderiza un elemento `<button>` por defecto.
+	 */
 	import { readableActive, writableActive, mergeProps } from "$terra/utils";
 	import type { TooltipTriggerProps } from "../types";
 	import { TooltipTriggerState } from "../tooltip.svelte";
@@ -45,4 +78,3 @@
 		{@render children?.()}
 	</button>
 {/if}
-
diff --git a/src/uix/terra/tooltip/components/tooltip.svelte b/src/uix/terra/tooltip/components/tooltip.svelte
index c7967a8ca..a11f757fe 100644
--- a/src/uix/terra/tooltip/components/tooltip.svelte
+++ b/src/uix/terra/tooltip/components/tooltip.svelte
@@ -1,8 +1,55 @@
 <script lang="ts" module>
+	/**
+	 * # Tooltip Root (module)
+	 *
+	 * Tipos genéricos para el payload del tooltip.
+	 */
 	type T = unknown;
 </script>
 
 <script lang="ts" generics="T = never">
+	/**
+	 * # Tooltip Root
+	 *
+	 * Componente raíz de tooltip que muestra información contextual al hacer hover.
+	 *
+	 * ## Uso
+	 * ```svelte
+	 * <Tooltip
+	 *   bind:open={isOpen}
+	 *   delayDuration={300}
+	 *   disableCloseOnTriggerClick={true}
+	 * >
+	 *   <TooltipTrigger>
+	 *     <button>Hover para ver tooltip</button>
+	 *   </TooltipTrigger>
+	 *   <TooltipContent>
+	 *     Información contextual útil
+	 *   </TooltipContent>
+	 * </Tooltip>
+	 * ```
+	 *
+	 * ## Propiedades
+	 * - `open`: boolean - Estado del tooltip (bindable)
+	 * - `triggerId`: string | null - ID del trigger activo
+	 * - `onOpenChange`: Callback cuando cambia el estado
+	 * - `onOpenChangeComplete`: Callback cuando la animación termina
+	 * - `disabled`: boolean - Deshabilita el tooltip
+	 * - `delayDuration`: number - Delay antes de mostrar (ms)
+	 * - `disableCloseOnTriggerClick`: boolean - No cierra al hacer click
+	 * - `disableHoverableContent`: boolean - Deshabilita hover en contenido
+	 * - `ignoreNonKeyboardFocus`: boolean - Solo muestra con foco de teclado
+	 * - `tether`: boolean - Mantiene el tooltip pegado al trigger
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-tooltip-content]           → Contenedor del tooltip
+	 * [data-state="open"]              → Estado abierto
+	 * [data-state="closed"]            → Estado cerrado
+	 * [data-tooltip-trigger]          → Trigger que abre el tooltip
+	 * [data-tooltip-arrow]            → Flecha indicadora (opcional)
+	 * ```
+	 */
 	import { readableActive, writableActive } from "$terra/utils";
 	import type { TooltipRootProps } from "../types";
 	import { TooltipRootState } from "../tooltip.svelte";
diff --git a/src/uix/terra/utils/attrs.ts b/src/uix/terra/utils/attrs.ts
index 336510855..3852f113c 100644
--- a/src/uix/terra/utils/attrs.ts
+++ b/src/uix/terra/utils/attrs.ts
@@ -47,11 +47,13 @@ export type CreateTerraAttrsReturn<T extends readonly string[]> = {
 
 export class TerraAttrs<T extends readonly string[]> {
 	readonly variant: string | null;
+	readonly componentName: string;
 	readonly prefix: string;
 	attrs: Record<T[number], string>;
 
 	constructor(config: TerraAttrsConfig<T>) {
 		this.variant = config.getVariant ? config.getVariant() : null;
+		this.componentName = config.component;
 		this.prefix = this.variant ? `data-${this.variant}-` : `data-${config.component}-`;
 
 		this.getAttr = this.getAttr.bind(this);
@@ -64,6 +66,8 @@ export class TerraAttrs<T extends readonly string[]> {
 
 	getAttr(part: T[number], variantOverride?: string): string {
 		if (variantOverride) return `data-${variantOverride}-${part}`;
+		// Para "root", no agregar el sufijo -root (solo data-component)
+		if (part === 'root') return `data-${this.variant || this.componentName}`;
 		return `${this.prefix}${part}`;
 	}
 
diff --git a/src/uix/terra/utils/collections/test/execute-callbacks.test.ts b/src/uix/terra/utils/collections/test/execute-callbacks.test.ts
deleted file mode 100644
index 746fda75a..000000000
--- a/src/uix/terra/utils/collections/test/execute-callbacks.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import { executeCallbacks } from "../execute-callbacks.ts";
-
-describe("executeCallbacks", () => {
-	it("should execute all callback functions with the same arguments", () => {
-		const mockCallback1 = vi.fn();
-		const mockCallback2 = vi.fn();
-		const mockCallback3 = vi.fn();
-
-		const executeCombinedCallbacks = executeCallbacks(mockCallback1, mockCallback2, mockCallback3);
-
-		executeCombinedCallbacks(1, 2, 3);
-
-		expect(mockCallback1).toHaveBeenCalledWith(1, 2, 3);
-		expect(mockCallback2).toHaveBeenCalledWith(1, 2, 3);
-		expect(mockCallback3).toHaveBeenCalledWith(1, 2, 3);
-	});
-
-	it("should handle callback functions with different argument types", () => {
-		const mockCallback1 = vi.fn();
-		const mockCallback2 = vi.fn();
-		const mockCallback3 = vi.fn();
-
-		executeCallbacks(mockCallback1(42), mockCallback2("hello"), mockCallback3(true));
-
-		expect(mockCallback1).toHaveBeenCalledWith(42);
-		expect(mockCallback2).toHaveBeenCalledWith("hello");
-		expect(mockCallback3).toHaveBeenCalledWith(true);
-	});
-
-	it("should handle an empty array of callbacks", () => {
-		const executeCombinedCallbacks = executeCallbacks();
-		expect(() => executeCombinedCallbacks(1, 2, 3)).not.toThrow();
-	});
-
-	it("should handle non-function values in the callbacks array", () => {
-		const mockCallback = vi.fn();
-
-		const executeCombinedCallbacks = executeCallbacks(mockCallback, undefined, null);
-
-		executeCombinedCallbacks(1, 2, 3);
-
-		expect(mockCallback).toHaveBeenCalledWith(1, 2, 3);
-	});
-});
diff --git a/src/uix/terra/utils/contracts.ts b/src/uix/terra/utils/contracts.ts
index 9408175ae..19d8941a4 100644
--- a/src/uix/terra/utils/contracts.ts
+++ b/src/uix/terra/utils/contracts.ts
@@ -81,7 +81,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-switch-root', description: 'Siempre presente en el root del Switch', since: '1.0.0' },
+				{ attr: 'data-switch', description: 'Siempre presente en el root del Switch', since: '1.0.0' },
 				{ attr: 'data-state', values: STATE_CHECKED, description: 'Estado del switch: checked o unchecked', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-required', description: 'Presente cuando required=true', since: '1.0.0' },
@@ -100,7 +100,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-checkbox-root', description: 'Siempre presente en el root del Checkbox', since: '1.0.0' },
+				{ attr: 'data-checkbox', description: 'Siempre presente en el root del Checkbox', since: '1.0.0' },
 				{
 					attr: 'data-state',
 					values: ['checked', 'unchecked', 'indeterminate'] as const,
@@ -129,7 +129,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-radio-group-root', description: 'Siempre presente en el root del RadioGroup', since: '1.0.0' },
+				{ attr: 'data-radio-group', description: 'Siempre presente en el root del RadioGroup', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-readonly', description: 'Presente cuando readonly=true', since: '1.0.0' },
 				{ attr: 'data-orientation', values: ORIENTATION, description: 'Orientación del grupo', since: '1.0.0' },
@@ -150,7 +150,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-toggle-root', description: 'Siempre presente en el root del Toggle', since: '1.0.0' },
+				{ attr: 'data-toggle', description: 'Siempre presente en el root del Toggle', since: '1.0.0' },
 				{ attr: 'data-state', values: STATE_ON_OFF, description: 'Estado: on u off (pressed)', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 			],
@@ -162,7 +162,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-toggle-group-root', description: 'Siempre presente en el root del ToggleGroup', since: '1.0.0' },
+				{ attr: 'data-toggle-group', description: 'Siempre presente en el root del ToggleGroup', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-orientation', values: ORIENTATION, description: 'Orientación del grupo', since: '1.0.0' },
 				{
@@ -185,7 +185,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-slider-root', description: 'Siempre presente en el root del Slider', since: '1.0.0' },
+				{ attr: 'data-slider', description: 'Siempre presente en el root del Slider', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-orientation', values: ORIENTATION, description: 'Orientación del slider', since: '1.0.0' },
 			],
@@ -211,7 +211,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-accordion-root', description: 'Siempre presente en el root del Accordion', since: '1.0.0' },
+				{ attr: 'data-accordion', description: 'Siempre presente en el root del Accordion', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true (global)', since: '1.0.0' },
 				{ attr: 'data-orientation', values: ORIENTATION, description: 'Orientación de navegación', since: '1.0.0' },
 			],
@@ -247,7 +247,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-collapsible-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-collapsible', description: 'Siempre presente en el root', since: '1.0.0' },
 				{ attr: 'data-state', values: STATE_OPEN_CLOSED, description: 'Estado: open o closed', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 			],
@@ -413,7 +413,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-dropdown-menu-root', description: 'Contexto raíz (no genera elemento)', since: '1.0.0' },
+				{ attr: 'data-dropdown-menu', description: 'Contexto raíz (no genera elemento)', since: '1.0.0' },
 			],
 			trigger: [
 				{ attr: 'data-dropdown-menu-trigger', description: 'Siempre presente en el trigger', since: '1.0.0' },
@@ -466,7 +466,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-menubar-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-menubar', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			trigger: [
 				{ attr: 'data-menubar-trigger', description: 'Siempre presente en el trigger de cada menú', since: '1.0.0' },
@@ -490,7 +490,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-field-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-field', description: 'Siempre presente en el root', since: '1.0.0' },
 				{
 					attr: 'data-state',
 					values: ['valid', 'invalid'] as const,
@@ -551,7 +551,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-command-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-command', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			input: [
 				{ attr: 'data-command-input', description: 'Siempre presente en el input de búsqueda', since: '1.0.0' },
@@ -580,7 +580,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-tabs-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-tabs', description: 'Siempre presente en el root', since: '1.0.0' },
 				{ attr: 'data-orientation', values: ORIENTATION, description: 'Orientación de las tabs', since: '1.0.0' },
 			],
 			trigger: [
@@ -606,7 +606,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-calendar-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-calendar', description: 'Siempre presente en el root', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-readonly', description: 'Presente cuando readonly=true', since: '1.0.0' },
 			],
@@ -647,7 +647,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-date-picker-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-date-picker', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			trigger: [
 				{ attr: 'data-date-picker-trigger', description: 'Trigger que abre el calendar', since: '1.0.0' },
@@ -664,7 +664,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-progress-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-progress', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			track: [
 				{ attr: 'data-progress-track', description: 'Track de fondo', since: '1.0.0' },
@@ -681,7 +681,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-meter-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-meter', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 		},
 	},
@@ -691,7 +691,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-spinner-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-spinner', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 		},
 	},
@@ -705,7 +705,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-avatar-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-avatar', description: 'Siempre presente en el root', since: '1.0.0' },
 				{
 					attr: 'data-status',
 					values: ['loading', 'loaded', 'error'] as const,
@@ -755,7 +755,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-scroll-area-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-scroll-area', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			viewport: [
 				{ attr: 'data-scroll-area-viewport', description: 'Área con scroll', since: '1.0.0' },
@@ -783,7 +783,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-pagination-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-pagination', description: 'Siempre presente en el root', since: '1.0.0' },
 			],
 			item: [
 				{ attr: 'data-pagination-item', description: 'Cada item de paginación', since: '1.0.0' },
@@ -804,7 +804,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-rating-group-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-rating-group', description: 'Siempre presente en el root', since: '1.0.0' },
 				{ attr: 'data-disabled', description: 'Presente cuando disabled=true', since: '1.0.0' },
 				{ attr: 'data-readonly', description: 'Presente cuando readonly=true', since: '1.0.0' },
 			],
@@ -827,7 +827,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
 		version: 1,
 		parts: {
 			root: [
-				{ attr: 'data-toast-root', description: 'Siempre presente en el root', since: '1.0.0' },
+				{ attr: 'data-toast', description: 'Siempre presente en el root', since: '1.0.0' },
 				{
 					attr: 'data-state',
 					values: ['open', 'closed'] as const,
@@ -863,7 +863,7 @@ export const CONTRACTS: Record<string, ComponentContract> = {
  * ```ts
  * readonly props = $derived.by(() => {
  *     const props = {
- *         "data-switch-root": "",
+ *         "data-switch": "",
  *         "data-state": getDataChecked(this.opts.checked.current),
  *         // ...
  *     };
diff --git a/src/uix/terra/virtual-list/components/virtual-list-item.svelte b/src/uix/terra/virtual-list/components/virtual-list-item.svelte
index d4c0e1dde..046b67bc4 100644
--- a/src/uix/terra/virtual-list/components/virtual-list-item.svelte
+++ b/src/uix/terra/virtual-list/components/virtual-list-item.svelte
@@ -1,4 +1,15 @@
 <script lang="ts">
+	/**
+	 * # VirtualListItem
+	 *
+	 * Componente de item individual dentro de una lista virtual.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-virtual-list-item]         → Item de la lista virtual
+	 * [data-index]                     → Índice del item
+	 * ```
+	 */
 	import { mergeProps, readableActive, writableActive } from "$terra/utils";
 	import { createId } from '$terra/utils';
 	import { VirtualListItemState } from '../virtual-list.svelte';
diff --git a/src/uix/terra/virtual-list/components/virtual-list.svelte b/src/uix/terra/virtual-list/components/virtual-list.svelte
index 9629c2c62..c02ebacd8 100644
--- a/src/uix/terra/virtual-list/components/virtual-list.svelte
+++ b/src/uix/terra/virtual-list/components/virtual-list.svelte
@@ -1,4 +1,18 @@
 <script lang="ts" generics="T">
+	/**
+	 * # VirtualList
+	 *
+	 * Componente de lista virtual para renderizar eficientemente grandes colecciones de elementos.
+	 *
+	 * ## Selectores CSS
+	 * ```
+	 * [data-virtual-list]             → Contenedor raíz de la lista virtual
+	 * [data-virtual-list-spacer]      → Espaciador que define el tamaño total
+	 * [data-direction="vertical"]     → Orientación vertical
+	 * [data-direction="horizontal"]   → Orientación horizontal
+	 * [data-use-window]               → Usa window para scroll
+	 * ```
+	 */
 	import { mergeProps, readableActive, writableActive } from "$terra/utils";
 	import { createId } from '$terra/utils';
 	import { VirtualListRootState } from '../virtual-list.svelte';