# Data Attributes Contracts — LEGACY (Terra/Air, retired) > ⚠️ **DEPRECATED — do not trust this document as current.** It was > auto-generated from `src/uix/terra/utils/contracts.ts` for the now-removed > `terra` / `air` layers. The canonical, machine-readable `data-*` contract for > every component now lives in its **morfo** > (`src/uix/morfo/components/{kebab}.ts`) and is enforced by > `npm run morfo:check`. This file is kept only as a historical snapshot and is > slated to move under `docs/process/`. Do not edit it; do not cite it as the > source of truth. --- ## Índice - [Switch](#switch) - [Checkbox](#checkbox) - [RadioGroup](#radio-group) - [Toggle](#toggle) - [ToggleGroup](#toggle-group) - [Slider](#slider) - [Accordion](#accordion) - [Collapsible](#collapsible) - [Dialog](#dialog) - [AlertDialog](#alert-dialog) - [Drawer](#drawer) - [Popover](#popover) - [Form](#form) - [Tooltip](#tooltip) - [DropdownMenu](#dropdown-menu) - [ContextMenu](#context-menu) - [Menubar](#menubar) - [Field](#field) - [NumberField](#number-field) - [TagsInput](#tags-input) - [VirtualList](#virtual-list) - [Select](#select) - [Combobox](#combobox) - [Stepper](#stepper) - [Editable](#editable) - [Command](#command) - [Tabs](#tabs) - [Calendar](#calendar) - [DatePicker](#date-picker) - [DateField](#date-field) - [TimeField](#time-field) - [DateRangeField](#date-range-field) - [TimeRangeField](#time-range-field) - [PinInput](#pin-input) - [LinkPreview](#link-preview) - [Progress](#progress) - [Meter](#meter) - [Spinner](#spinner) - [Avatar](#avatar) - [Label](#label) - [Separator](#separator) - [AspectRatio](#aspect-ratio) - [Toolbar](#toolbar) - [Splitter](#splitter) - [ScrollArea](#scroll-area) - [Pagination](#pagination) - [RatingGroup](#rating-group) - [ColorPicker](#color-picker) - [Toast](#toast) - [FileUpload](#file-upload) --- ## Switch **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------------------------ | -------------------------------------- | | `data-switch` | (flag) | Siempre presente en el root del Switch | | `data-state` | `checked` \| `unchecked` | Estado del switch: checked o unchecked | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-required` | (flag) | Presente cuando required=true | ### Thumb | Attr | Valores | Descripción | | ------------------- | ------------------------ | ------------------------------------- | | `data-switch-thumb` | (flag) | Siempre presente en el elemento thumb | | `data-state` | `checked` \| `unchecked` | Hereda estado del root | | `data-disabled` | (flag) | Hereda disabled del root | | `data-required` | (flag) | Hereda required del root | --- ## Checkbox **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------------------------------------------- | ------------------------------------------ | | `data-checkbox` | (flag) | Siempre presente en el root del Checkbox | | `data-state` | `checked` \| `unchecked` \| `indeterminate` | Estado: checked, unchecked o indeterminate | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | ### Group | Attr | Valores | Descripción | | --------------------- | ------- | -------------------------------------------- | | `data-checkbox-group` | (flag) | Siempre presente en el grupo de checkboxes | | `data-disabled` | (flag) | Presente cuando el grupo tiene disabled=true | ### Group-label | Attr | Valores | Descripción | | --------------------------- | ------- | -------------------------------------- | | `data-checkbox-group-label` | (flag) | Siempre presente en la label del grupo | | `data-disabled` | (flag) | Hereda disabled del grupo | ### Input | Attr | Valores | Descripción | | --------------------- | ------- | ----------------------------------- | | `data-checkbox-input` | (flag) | Siempre presente en el input hidden | --- ## RadioGroup **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ------------------------------------------ | | `data-radio-group` | (flag) | Siempre presente en el root del RadioGroup | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-orientation` | `horizontal` \| `vertical` | Orientación del grupo | ### Item | Attr | Valores | Descripción | | ----------------------- | -------------------------- | --------------------------------------------- | | `data-radio-group-item` | (flag) | Siempre presente en cada item | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-disabled` | (flag) | Presente cuando el item o grupo está disabled | | `data-readonly` | (flag) | Presente cuando el grupo está readonly | | `data-value` | (flag) | Valor del item | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | --- ## Toggle **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------------- | -------------------------------------- | | `data-toggle` | (flag) | Siempre presente en el root del Toggle | | `data-state` | `on` \| `off` | Estado: on u off (pressed) | | `data-disabled` | (flag) | Presente cuando disabled=true | --- ## ToggleGroup **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------- | -------------------------- | ------------------------------------------- | | `data-toggle-group` | (flag) | Siempre presente en el root del ToggleGroup | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-orientation` | `horizontal` \| `vertical` | Orientación del grupo | | `data-type` | `single` \| `multiple` | Tipo de selección: single o multiple | ### Item | Attr | Valores | Descripción | | ------------------------ | -------------------------- | --------------------------------------------- | | `data-toggle-group-item` | (flag) | Siempre presente en cada item | | `data-state` | `on` \| `off` | Estado: on u off | | `data-disabled` | (flag) | Presente cuando el item o grupo está disabled | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | --- ## Slider **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | -------------------------------------- | | `data-slider` | (flag) | Siempre presente en el root del Slider | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-orientation` | `horizontal` \| `vertical` | Orientación del slider | ### Thumb | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-slider-thumb` | (flag) | Siempre presente en el thumb | | `data-disabled` | (flag) | Hereda disabled del root | ### Track | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-slider-track` | (flag) | Siempre presente en el track | ### Range | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------------- | | `data-slider-range` | (flag) | Porción del track con valor activo | --- ## Accordion **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ----------------------------------------- | | `data-accordion` | (flag) | Siempre presente en el root del Accordion | | `data-disabled` | (flag) | Presente cuando disabled=true (global) | | `data-orientation` | `horizontal` \| `vertical` | Orientación de navegación | ### Item | Attr | Valores | Descripción | | --------------------- | -------------------------- | ------------------------------------- | | `data-accordion-item` | (flag) | Siempre presente en cada item | | `data-disabled` | (flag) | Presente cuando el item está disabled | | `data-state` | `open` \| `closed` | Estado del item: open o closed | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### List | Attr | Valores | Descripción | | ------------------ | -------------------------- | ------------------------------------- | | `data-tabs-list` | (flag) | Siempre presente en la lista de tabs | | `data-disabled` | (flag) | Presente cuando el root está disabled | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### Trigger | Attr | Valores | Descripción | | ------------------------ | -------------------------- | ------------------------------ | | `data-accordion-trigger` | (flag) | Siempre presente en el trigger | | `data-disabled` | (flag) | Presente cuando disabled | | `data-state` | `open` \| `closed` | Estado del item asociado | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación | ### Content | Attr | Valores | Descripción | | ------------------------ | -------------------------- | ------------------------------ | | `data-accordion-content` | (flag) | Siempre presente en el content | | `data-disabled` | (flag) | Hereda disabled del item | | `data-state` | `open` \| `closed` | Estado del item asociado | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación | ### Header | Attr | Valores | Descripción | | ----------------------- | -------------------------- | ----------------------------- | | `data-accordion-header` | (flag) | Siempre presente en el header | | `data-heading-level` | (flag) | Nivel del heading (1-6) | | `data-state` | `open` \| `closed` | Estado del item asociado | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación | --- ## Collapsible **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | ------------------ | ----------------------------- | | `data-collapsible` | (flag) | Siempre presente en el root | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Trigger | Attr | Valores | Descripción | | -------------------------- | ------------------ | ------------------------------ | | `data-collapsible-trigger` | (flag) | Siempre presente en el trigger | | `data-state` | `open` \| `closed` | Estado del collapsible | | `data-disabled` | (flag) | Presente cuando disabled | ### Content | Attr | Valores | Descripción | | -------------------------- | ------------------ | ------------------------------ | | `data-collapsible-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado del collapsible | | `data-disabled` | (flag) | Hereda disabled del root | --- ## Dialog **Versión del contrato:** 1 ### Content | Attr | Valores | Descripción | | --------------------- | ------------------ | ----------------------------------------------------- | | `data-dialog-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-nested` | (flag) | Presente cuando el dialog está anidado dentro de otro | | `data-nested-open` | (flag) | Presente cuando hay dialogs anidados abiertos | ### Trigger | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------ | | `data-dialog-trigger` | (flag) | Siempre presente en el trigger | ### Overlay | Attr | Valores | Descripción | | --------------------- | ------------------ | --------------------------------------------- | | `data-dialog-overlay` | (flag) | Siempre presente en el overlay | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-nested` | (flag) | Presente cuando el dialog está anidado | | `data-nested-open` | (flag) | Presente cuando hay dialogs anidados abiertos | ### Title | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-dialog-title` | (flag) | Siempre presente en el title | ### Description | Attr | Valores | Descripción | | ------------------------- | ------- | ---------------------------------- | | `data-dialog-description` | (flag) | Siempre presente en la description | ### Close | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------------- | | `data-dialog-close` | (flag) | Siempre presente en el botón close | ### Cancel | Attr | Valores | Descripción | | -------------------- | ------- | ------------------------------- | | `data-dialog-cancel` | (flag) | Botón de cancelar (AlertDialog) | ### Action | Attr | Valores | Descripción | | -------------------- | ------- | --------------------------------------- | | `data-dialog-action` | (flag) | Botón de acción principal (AlertDialog) | --- ## AlertDialog **Versión del contrato:** 1 ### Content | Attr | Valores | Descripción | | --------------------- | ------------------ | ------------------------------ | | `data-dialog-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Trigger | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------ | | `data-dialog-trigger` | (flag) | Siempre presente en el trigger | ### Overlay | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------ | | `data-dialog-overlay` | (flag) | Siempre presente en el overlay | ### Title | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-dialog-title` | (flag) | Siempre presente en el title | ### Description | Attr | Valores | Descripción | | ------------------------- | ------- | ---------------------------------- | | `data-dialog-description` | (flag) | Siempre presente en la description | ### Cancel | Attr | Valores | Descripción | | -------------------- | ------- | ----------------- | | `data-dialog-cancel` | (flag) | Botón de cancelar | ### Action | Attr | Valores | Descripción | | -------------------- | ------- | ------------------------- | | `data-dialog-action` | (flag) | Botón de acción principal | --- ## Drawer **Versión del contrato:** 1 ### Content | Attr | Valores | Descripción | | --------------------- | -------------------------------------- | ---------------------------------- | | `data-drawer-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-side` | `top` \| `right` \| `bottom` \| `left` | Lado desde donde se abre el drawer | ### Trigger | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------ | | `data-drawer-trigger` | (flag) | Siempre presente en el trigger | ### Overlay | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------ | | `data-drawer-overlay` | (flag) | Siempre presente en el overlay | ### Title | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-drawer-title` | (flag) | Siempre presente en el title | ### Description | Attr | Valores | Descripción | | ------------------------- | ------- | ---------------------------------- | | `data-drawer-description` | (flag) | Siempre presente en la description | ### Close | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------------- | | `data-drawer-close` | (flag) | Siempre presente en el botón close | --- ## Popover **Versión del contrato:** 1 ### Content | Attr | Valores | Descripción | | ---------------------- | ------------------ | ------------------------------ | | `data-popover-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Trigger | Attr | Valores | Descripción | | ---------------------- | ------------------ | ------------------------------ | | `data-popover-trigger` | (flag) | Siempre presente en el trigger | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Close | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------- | | `data-popover-close` | (flag) | Botón para cerrar el popover | ### Overlay | Attr | Valores | Descripción | | ---------------------- | ------------------ | ---------------------------- | | `data-popover-overlay` | (flag) | Overlay opcional del popover | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Arrow | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------- | | `data-popover-arrow` | (flag) | Flecha indicadora (opcional) | --- ## Form **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------- | ----------------------------- | | `data-form` | (flag) | Siempre presente en el root | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-pending` | (flag) | Presente cuando pending=true | ### Field | Attr | Valores | Descripción | | ----------------- | ------- | -------------------------------------- | | `data-form-field` | (flag) | Contenedor de un campo | | `data-invalid` | (flag) | Presente cuando invalid=true | | `data-disabled` | (flag) | Presente cuando el campo está disabled | | `data-readonly` | (flag) | Presente cuando el campo está readonly | | `data-required` | (flag) | Presente cuando required=true | | `data-pending` | (flag) | Presente cuando el campo está pending | ### Label | Attr | Valores | Descripción | | ----------------- | ------- | ------------------------- | | `data-form-label` | (flag) | Label del campo | | `data-invalid` | (flag) | Hereda invalid del campo | | `data-disabled` | (flag) | Hereda disabled del campo | | `data-required` | (flag) | Hereda required del campo | ### Description | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------ | | `data-form-description` | (flag) | Descripción auxiliar del campo | | `data-disabled` | (flag) | Hereda disabled del campo | ### Error | Attr | Valores | Descripción | | ----------------- | ------- | -------------------------- | | `data-form-error` | (flag) | Mensaje de error del campo | | `data-invalid` | (flag) | Hereda invalid del campo | ### Control | Attr | Valores | Descripción | | ------------------- | ------- | ---------------------------- | | `data-form-control` | (flag) | Wrapper del control asociado | | `data-invalid` | (flag) | Hereda invalid del campo | | `data-disabled` | (flag) | Hereda disabled del campo | ### Submit | Attr | Valores | Descripción | | ------------------ | ------- | ----------------------------------------- | | `data-form-submit` | (flag) | Botón submit del formulario | | `data-disabled` | (flag) | Presente cuando submit no está disponible | | `data-pending` | (flag) | Presente cuando el form está pending | --- ## Tooltip **Versión del contrato:** 1 ### Content | Attr | Valores | Descripción | | ---------------------- | ------------------ | ------------------------------ | | `data-tooltip-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Trigger | Attr | Valores | Descripción | | ---------------------- | ------- | ------------------------------ | | `data-tooltip-trigger` | (flag) | Siempre presente en el trigger | ### Arrow | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------- | | `data-tooltip-arrow` | (flag) | Flecha indicadora (opcional) | --- ## DropdownMenu **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------------- | | `data-dropdown-menu` | (flag) | Contexto raíz (no genera elemento) | ### Trigger | Attr | Valores | Descripción | | ---------------------------- | ------------------ | ------------------------------ | | `data-dropdown-menu-trigger` | (flag) | Siempre presente en el trigger | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Content | Attr | Valores | Descripción | | ---------------------------- | ------------------ | ------------------------------ | | `data-dropdown-menu-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Sub-content | Attr | Valores | Descripción | | -------------------------------- | ------------------ | ------------------------------------------ | | `data-dropdown-menu-content` | (flag) | Base compartida del content del submenú | | `data-dropdown-menu-sub-content` | (flag) | Siempre presente en el content del submenú | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Item | Attr | Valores | Descripción | | ------------------------- | ------- | ------------------------------------------ | | `data-dropdown-menu-item` | (flag) | Siempre presente en cada item | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Sub-trigger | Attr | Valores | Descripción | | -------------------------------- | ------------------ | ---------------------------------------------- | | `data-dropdown-menu-item` | (flag) | Base compartida del item disparador de submenú | | `data-dropdown-menu-sub-trigger` | (flag) | Siempre presente en el trigger del submenú | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-state` | `open` \| `closed` | Estado del submenú: open o closed | ### Group | Attr | Valores | Descripción | | -------------------------- | ------- | ----------------------- | | `data-dropdown-menu-group` | (flag) | Grupo de items del menú | ### Group-heading | Attr | Valores | Descripción | | ---------------------------------- | ------- | -------------------------- | | `data-dropdown-menu-group-heading` | (flag) | Título o heading del grupo | ### Checkbox-group | Attr | Valores | Descripción | | ----------------------------------- | ------- | ----------------------- | | `data-dropdown-menu-checkbox-group` | (flag) | Grupo de items checkbox | ### Checkbox-item | Attr | Valores | Descripción | | ---------------------------------- | ------------------------ | ------------------------------------------ | | `data-dropdown-menu-item` | (flag) | Base compartida del item checkbox | | `data-dropdown-menu-checkbox-item` | (flag) | Item de tipo checkbox | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Radio-group | Attr | Valores | Descripción | | -------------------------------- | ------- | -------------------- | | `data-dropdown-menu-radio-group` | (flag) | Grupo de items radio | ### Radio-item | Attr | Valores | Descripción | | ------------------------------- | ------------------------ | ------------------------------------------ | | `data-dropdown-menu-item` | (flag) | Base compartida del item radio | | `data-dropdown-menu-radio-item` | (flag) | Item de tipo radio | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Separator | Attr | Valores | Descripción | | ------------------------------ | ------- | ---------------- | | `data-dropdown-menu-separator` | (flag) | Separador visual | ### Arrow | Attr | Valores | Descripción | | -------------------------- | ------- | -------------------------- | | `data-dropdown-menu-arrow` | (flag) | Flecha indicadora del menú | --- ## ContextMenu **Versión del contrato:** 1 ### Trigger | Attr | Valores | Descripción | | --------------------------- | ------------------ | -------------------------------- | | `data-context-menu-trigger` | (flag) | Área trigger del menú contextual | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Content | Attr | Valores | Descripción | | --------------------------- | ------------------ | ------------------------------ | | `data-context-menu-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Sub-content | Attr | Valores | Descripción | | ------------------------------- | ------------------ | ------------------------------------------ | | `data-context-menu-content` | (flag) | Base compartida del content del submenú | | `data-context-menu-sub-content` | (flag) | Siempre presente en el content del submenú | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Item | Attr | Valores | Descripción | | ------------------------ | ------- | ------------------------------------------ | | `data-context-menu-item` | (flag) | Siempre presente en cada item | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Sub-trigger | Attr | Valores | Descripción | | ------------------------------- | ------------------ | ---------------------------------------------- | | `data-context-menu-item` | (flag) | Base compartida del item disparador de submenú | | `data-context-menu-sub-trigger` | (flag) | Siempre presente en el trigger del submenú | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-state` | `open` \| `closed` | Estado del submenú: open o closed | ### Group | Attr | Valores | Descripción | | ------------------------- | ------- | ----------------------- | | `data-context-menu-group` | (flag) | Grupo de items del menú | ### Group-heading | Attr | Valores | Descripción | | --------------------------------- | ------- | -------------------------- | | `data-context-menu-group-heading` | (flag) | Título o heading del grupo | ### Checkbox-group | Attr | Valores | Descripción | | ---------------------------------- | ------- | ----------------------- | | `data-context-menu-checkbox-group` | (flag) | Grupo de items checkbox | ### Checkbox-item | Attr | Valores | Descripción | | --------------------------------- | ------------------------ | ------------------------------------------ | | `data-context-menu-item` | (flag) | Base compartida del item checkbox | | `data-context-menu-checkbox-item` | (flag) | Item de tipo checkbox | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Radio-group | Attr | Valores | Descripción | | ------------------------------- | ------- | -------------------- | | `data-context-menu-radio-group` | (flag) | Grupo de items radio | ### Radio-item | Attr | Valores | Descripción | | ------------------------------ | ------------------------ | ------------------------------------------ | | `data-context-menu-item` | (flag) | Base compartida del item radio | | `data-context-menu-radio-item` | (flag) | Item de tipo radio | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Separator | Attr | Valores | Descripción | | ----------------------------- | ------- | ---------------- | | `data-context-menu-separator` | (flag) | Separador visual | ### Arrow | Attr | Valores | Descripción | | ------------------------- | ------- | -------------------------- | | `data-context-menu-arrow` | (flag) | Flecha indicadora del menú | --- ## Menubar **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | -------------- | ------- | --------------------------- | | `data-menubar` | (flag) | Siempre presente en el root | ### Trigger | Attr | Valores | Descripción | | ---------------------- | ------------------ | ------------------------------------------- | | `data-menubar-trigger` | (flag) | Siempre presente en el trigger de cada menú | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-highlighted` | (flag) | Presente cuando tiene foco o hover | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-menu-value` | (flag) | Valor del menú (value prop) | ### Content | Attr | Valores | Descripción | | ---------------------- | ------------------ | ------------------------------ | | `data-menubar-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Sub-content | Attr | Valores | Descripción | | -------------------------- | ------------------ | ------------------------------------------ | | `data-menubar-content` | (flag) | Base compartida del content del submenú | | `data-menubar-sub-content` | (flag) | Siempre presente en el content del submenú | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Item | Attr | Valores | Descripción | | ------------------- | ------- | ------------------------------------------ | | `data-menubar-item` | (flag) | Siempre presente en cada item del menú | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Sub-trigger | Attr | Valores | Descripción | | -------------------------- | ------------------ | ---------------------------------------------- | | `data-menubar-item` | (flag) | Base compartida del item disparador de submenú | | `data-menubar-sub-trigger` | (flag) | Siempre presente en el trigger del submenú | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-state` | `open` \| `closed` | Estado del submenú: open o closed | ### Group | Attr | Valores | Descripción | | -------------------- | ------- | ----------------------- | | `data-menubar-group` | (flag) | Grupo de items del menú | ### Group-heading | Attr | Valores | Descripción | | ---------------------------- | ------- | -------------------------- | | `data-menubar-group-heading` | (flag) | Título o heading del grupo | ### Checkbox-group | Attr | Valores | Descripción | | ----------------------------- | ------- | ----------------------- | | `data-menubar-checkbox-group` | (flag) | Grupo de items checkbox | ### Checkbox-item | Attr | Valores | Descripción | | ---------------------------- | ------------------------ | ------------------------------------------ | | `data-menubar-item` | (flag) | Base compartida del item checkbox | | `data-menubar-checkbox-item` | (flag) | Item de tipo checkbox | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Radio-group | Attr | Valores | Descripción | | -------------------------- | ------- | -------------------- | | `data-menubar-radio-group` | (flag) | Grupo de items radio | ### Radio-item | Attr | Valores | Descripción | | ------------------------- | ------------------------ | ------------------------------------------ | | `data-menubar-item` | (flag) | Base compartida del item radio | | `data-menubar-radio-item` | (flag) | Item de tipo radio | | `data-state` | `checked` \| `unchecked` | Estado: checked o unchecked | | `data-highlighted` | (flag) | Presente cuando el item está highlighteado | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Separator | Attr | Valores | Descripción | | ------------------------ | ------- | ---------------- | | `data-menubar-separator` | (flag) | Separador visual | ### Arrow | Attr | Valores | Descripción | | -------------------- | ------- | -------------------------- | | `data-menubar-arrow` | (flag) | Flecha indicadora del menú | --- ## Field **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ---------------------------------------------------------- | ----------------------------- | | `data-field` | (flag) | Siempre presente en el root | | `data-state` | `idle` \| `error` \| `disabled` \| `readonly` \| `loading` | Estado del campo | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-required` | (flag) | Presente cuando required=true | ### Label | Attr | Valores | Descripción | | ------------------ | ------- | -------------------------------------- | | `data-field-label` | (flag) | Label asociada al campo | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-error` | (flag) | Presente cuando el campo está en error | | `data-required` | (flag) | Presente cuando required=true | ### Control | Attr | Valores | Descripción | | -------------------- | ---------------------------------------------------------- | -------------------------------- | | `data-field-control` | (flag) | Contenedor del control principal | | `data-state` | `idle` \| `error` \| `disabled` \| `readonly` \| `loading` | Estado del campo | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Input | Attr | Valores | Descripción | | ------------------ | ---------------------------------------------------------- | ------------------------- | | `data-field-input` | (flag) | Input principal del campo | | `data-state` | `idle` \| `error` \| `disabled` \| `readonly` \| `loading` | Estado del campo | ### Helper-text | Attr | Valores | Descripción | | ------------------------ | ------- | ----------------------------- | | `data-field-helper-text` | (flag) | Texto de ayuda del campo | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Error | Attr | Valores | Descripción | | ------------------ | ------- | -------------------------------------- | | `data-field-error` | (flag) | Mensaje de error del campo | | `data-error` | (flag) | Presente cuando el campo está en error | ### Prefix | Attr | Valores | Descripción | | ------------------- | ------- | -------------------------------------- | | `data-field-prefix` | (flag) | Contenido decorativo anterior al input | ### Suffix | Attr | Valores | Descripción | | ------------------- | ------- | --------------------------------------- | | `data-field-suffix` | (flag) | Contenido decorativo posterior al input | --- ## NumberField **Versión del contrato:** 1 ### Label | Attr | Valores | Descripción | | ------------------------- | ------- | ----------------------------- | | `data-number-field-label` | (flag) | Label del campo numérico | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-invalid` | (flag) | Presente cuando invalid=true | ### Input | Attr | Valores | Descripción | | ------------------------- | ------- | -------------------------------- | | `data-number-field-input` | (flag) | Input principal del number field | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-invalid` | (flag) | Presente cuando invalid=true | ### Increment | Attr | Valores | Descripción | | ----------------------------- | ------- | ------------------------------------------- | | `data-number-field-increment` | (flag) | Botón para incrementar el valor | | `data-disabled` | (flag) | Presente cuando el botón no puede activarse | ### Decrement | Attr | Valores | Descripción | | ----------------------------- | ------- | ------------------------------------------- | | `data-number-field-decrement` | (flag) | Botón para decrementar el valor | | `data-disabled` | (flag) | Presente cuando el botón no puede activarse | --- ## TagsInput **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ----------------- | ------- | ----------------------------- | | `data-tags-input` | (flag) | Siempre presente en el root | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-invalid` | (flag) | Presente cuando invalid=true | ### Input | Attr | Valores | Descripción | | ----------------------- | ------- | ----------------------------- | | `data-tags-input-input` | (flag) | Input para añadir tags | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-invalid` | (flag) | Presente cuando invalid=true | ### Tag | Attr | Valores | Descripción | | --------------------- | ------- | ----------------------------- | | `data-tags-input-tag` | (flag) | Tag individual | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-tag-value` | (flag) | Valor textual de la tag | ### Tag-text | Attr | Valores | Descripción | | -------------------------- | ------- | ----------------------- | | `data-tags-input-tag-text` | (flag) | Texto visible de la tag | ### Tag-remove | Attr | Valores | Descripción | | ---------------------------- | ------- | ------------------------------------------- | | `data-tags-input-tag-remove` | (flag) | Botón para eliminar una tag | | `data-disabled` | (flag) | Presente cuando el botón no puede activarse | ### Clear | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------------- | | `data-tags-input-clear` | (flag) | Botón para limpiar todas las tags | | `data-disabled` | (flag) | Presente cuando el botón no puede activarse | --- ## VirtualList **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------- | -------------------------- | ---------------------------------------------------- | | `data-virtual-list` | (flag) | Siempre presente en el root | | `data-direction` | `vertical` \| `horizontal` | Dirección de la lista virtual | | `data-use-window` | (flag) | Presente cuando usa window como contenedor de scroll | ### Spacer | Attr | Valores | Descripción | | -------------------------- | ------- | ------------------------------------------- | | `data-virtual-list-spacer` | (flag) | Espaciador con el tamaño total virtualizado | ### Item | Attr | Valores | Descripción | | ------------------------ | ------- | --------------------------------------- | | `data-virtual-list-item` | (flag) | Item visible dentro de la lista virtual | | `data-index` | (flag) | Índice real del item en la colección | --- ## Select **Versión del contrato:** 1 ### Trigger | Attr | Valores | Descripción | | --------------------- | ------------------ | ----------------------------------------- | | `data-select-trigger` | (flag) | Siempre presente en el trigger | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-placeholder` | (flag) | Presente cuando no hay valor seleccionado | ### Content | Attr | Valores | Descripción | | --------------------- | ------------------ | ------------------------------ | | `data-select-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Item | Attr | Valores | Descripción | | ------------------ | ------- | --------------------------------- | | `data-select-item` | (flag) | Siempre presente en cada item | | `data-highlighted` | (flag) | Presente cuando highlighteado | | `data-selected` | (flag) | Presente cuando está seleccionado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-value` | (flag) | Valor lógico del item | | `data-label` | (flag) | Etiqueta asociada al item | ### Group | Attr | Valores | Descripción | | ------------------- | ------- | ------------------------------- | | `data-select-group` | (flag) | Contenedor de grupo de opciones | ### Group-label | Attr | Valores | Descripción | | ------------------------- | ------- | -------------------------- | | `data-select-group-label` | (flag) | Etiqueta visible del grupo | ### Viewport | Attr | Valores | Descripción | | ---------------------- | ------- | ------------------------ | | `data-select-viewport` | (flag) | Área visible del content | ### Scroll-down-button | Attr | Valores | Descripción | | -------------------------------- | ------- | -------------------------------------------- | | `data-select-scroll-down-button` | (flag) | Botón para desplazar el viewport hacia abajo | ### Scroll-up-button | Attr | Valores | Descripción | | ------------------------------ | ------- | --------------------------------------------- | | `data-select-scroll-up-button` | (flag) | Botón para desplazar el viewport hacia arriba | --- ## Combobox **Versión del contrato:** 1 ### Trigger | Attr | Valores | Descripción | | ----------------------- | ------------------ | ---------------------------------------------------- | | `data-combobox-trigger` | (flag) | Siempre presente en el trigger auxiliar del combobox | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Input | Attr | Valores | Descripción | | --------------------- | ------------------ | ----------------------------- | | `data-combobox-input` | (flag) | Siempre presente en el input | | `data-state` | `open` \| `closed` | Estado: open o closed | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Content | Attr | Valores | Descripción | | ----------------------- | ------------------ | ------------------------------ | | `data-combobox-content` | (flag) | Siempre presente en el content | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Item | Attr | Valores | Descripción | | -------------------- | ------- | --------------------------------- | | `data-combobox-item` | (flag) | Siempre presente en cada item | | `data-highlighted` | (flag) | Presente cuando highlighteado | | `data-selected` | (flag) | Presente cuando está seleccionado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-value` | (flag) | Valor lógico del item | | `data-label` | (flag) | Etiqueta asociada al item | ### Group | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------- | | `data-combobox-group` | (flag) | Contenedor de grupo de opciones | ### Group-label | Attr | Valores | Descripción | | --------------------------- | ------- | -------------------------- | | `data-combobox-group-label` | (flag) | Etiqueta visible del grupo | ### Viewport | Attr | Valores | Descripción | | ------------------------ | ------- | ------------------------ | | `data-combobox-viewport` | (flag) | Área visible del content | ### Scroll-down-button | Attr | Valores | Descripción | | ---------------------------------- | ------- | -------------------------------------------- | | `data-combobox-scroll-down-button` | (flag) | Botón para desplazar el viewport hacia abajo | ### Scroll-up-button | Attr | Valores | Descripción | | -------------------------------- | ------- | --------------------------------------------- | | `data-combobox-scroll-up-button` | (flag) | Botón para desplazar el viewport hacia arriba | --- ## Stepper **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ----------------------------- | | `data-stepper` | (flag) | Siempre presente en el root | | `data-orientation` | `horizontal` \| `vertical` | Orientación del stepper | | `data-disabled` | (flag) | Presente cuando disabled=true | ### List | Attr | Valores | Descripción | | ------------------- | -------------------------- | ------------------------------------- | | `data-stepper-list` | (flag) | Lista de pasos | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | | `data-disabled` | (flag) | Presente cuando el root está disabled | ### Item | Attr | Valores | Descripción | | ------------------- | --------------------------------------- | --------------------------- | | `data-stepper-item` | (flag) | Paso individual | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | | `data-index` | (flag) | Índice 0-based del paso | | `data-first` | (flag) | Presente en el primer paso | | `data-last` | (flag) | Presente en el último paso | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### Trigger | Attr | Valores | Descripción | | ---------------------- | --------------------------------------- | ---------------------------------------- | | `data-stepper-trigger` | (flag) | Trigger de navegación del paso | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | | `data-disabled` | (flag) | Presente cuando el trigger está disabled | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### Indicator | Attr | Valores | Descripción | | ------------------------ | --------------------------------------- | ------------------------- | | `data-stepper-indicator` | (flag) | Indicador visual del paso | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | ### Title | Attr | Valores | Descripción | | -------------------- | --------------------------------------- | --------------- | | `data-stepper-title` | (flag) | Título del paso | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | ### Description | Attr | Valores | Descripción | | -------------------------- | --------------------------------------- | -------------------- | | `data-stepper-description` | (flag) | Descripción del paso | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | ### Separator | Attr | Valores | Descripción | | ------------------------ | --------------------------------------- | --------------------------- | | `data-stepper-separator` | (flag) | Separador entre pasos | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso asociado | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### Content | Attr | Valores | Descripción | | ---------------------- | --------------------------------------- | ------------------ | | `data-stepper-content` | (flag) | Contenido del paso | | `data-state` | `active` \| `completed` \| `incomplete` | Estado del paso | ### Next-trigger | Attr | Valores | Descripción | | --------------------------- | ------- | ------------------------------------ | | `data-stepper-next-trigger` | (flag) | Botón para avanzar al siguiente paso | | `data-disabled` | (flag) | Presente cuando no puede avanzar | ### Prev-trigger | Attr | Valores | Descripción | | --------------------------- | ------- | -------------------------------------- | | `data-stepper-prev-trigger` | (flag) | Botón para retroceder al paso anterior | | `data-disabled` | (flag) | Presente cuando no puede retroceder | --- ## Editable **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------- | ------------------------------------------------ | | `data-editable` | (flag) | Siempre presente en el root | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | ### Area | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------- | | `data-editable-area` | (flag) | Contenedor del área editable | ### Preview | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------------------ | | `data-editable-preview` | (flag) | Vista previa del valor cuando no se edita | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | | `data-empty` | (flag) | Presente cuando el valor está vacío | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | ### Input | Attr | Valores | Descripción | | --------------------- | ------- | ------------------------------------------------ | | `data-editable-input` | (flag) | Input usado durante la edición | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | ### Edit-trigger | Attr | Valores | Descripción | | ---------------------------- | ------- | ------------------------------------------------ | | `data-editable-edit-trigger` | (flag) | Trigger para entrar en modo edición | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | | `data-disabled` | (flag) | Presente cuando no puede activarse | ### Submit-trigger | Attr | Valores | Descripción | | ------------------------------ | ------- | ------------------------------------------------ | | `data-editable-submit-trigger` | (flag) | Trigger para confirmar la edición | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | | `data-disabled` | (flag) | Presente cuando no puede activarse | ### Cancel-trigger | Attr | Valores | Descripción | | ------------------------------ | ------- | ------------------------------------------------ | | `data-editable-cancel-trigger` | (flag) | Trigger para cancelar la edición | | `data-editing` | (flag) | Presente cuando el editable está en modo edición | | `data-disabled` | (flag) | Presente cuando no puede activarse | --- ## Command **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | -------------- | ------- | --------------------------- | | `data-command` | (flag) | Siempre presente en el root | ### List | Attr | Valores | Descripción | | ------------------- | ------- | -------------- | | `data-command-list` | (flag) | Lista de items | ### Input | Attr | Valores | Descripción | | -------------------- | ------- | ---------------------------------------- | | `data-command-input` | (flag) | Siempre presente en el input de búsqueda | ### Separator | Attr | Valores | Descripción | | ------------------------ | ------- | ---------------- | | `data-command-separator` | (flag) | Separador visual | ### Loading | Attr | Valores | Descripción | | ---------------------- | ------- | ------------------ | | `data-command-loading` | (flag) | Indicador de carga | ### Empty | Attr | Valores | Descripción | | -------------------- | ------- | -------------------------------- | | `data-command-empty` | (flag) | Mensaje cuando no hay resultados | ### Group | Attr | Valores | Descripción | | -------------------- | ------- | --------------------------------- | | `data-command-group` | (flag) | Contenedor de grupo de resultados | | `data-value` | (flag) | Valor lógico del grupo | ### Group-items | Attr | Valores | Descripción | | -------------------------- | ------- | ----------------------------- | | `data-command-group-items` | (flag) | Contenedor de items del grupo | ### Group-heading | Attr | Valores | Descripción | | ---------------------------- | ------- | ----------------- | | `data-command-group-heading` | (flag) | Heading del grupo | ### Item | Attr | Valores | Descripción | | ------------------- | ------- | --------------------------------- | | `data-command-item` | (flag) | Siempre presente en cada item | | `data-value` | (flag) | Valor del item para filtrado | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-selected` | (flag) | Presente cuando está seleccionado | | `data-group` | (flag) | Valor del grupo al que pertenece | ### Viewport | Attr | Valores | Descripción | | ----------------------- | ------- | ---------------------------- | | `data-command-viewport` | (flag) | Viewport medible de la lista | ### Input-label | Attr | Valores | Descripción | | -------------------------- | ------- | ---------------------- | | `data-command-input-label` | (flag) | Label oculta del input | --- ## Tabs **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | --------------------------- | | `data-tabs` | (flag) | Siempre presente en el root | | `data-orientation` | `horizontal` \| `vertical` | Orientación de las tabs | ### Trigger | Attr | Valores | Descripción | | ------------------- | -------------------------- | -------------------------------- | | `data-tabs-trigger` | (flag) | Siempre presente en cada trigger | | `data-state` | `active` \| `inactive` | Estado: active o inactive | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-value` | (flag) | Valor identificador de la tab | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | ### Content | Attr | Valores | Descripción | | ------------------- | -------------------------- | -------------------------------- | | `data-tabs-content` | (flag) | Siempre presente en cada content | | `data-value` | (flag) | Valor identificador del content | | `data-state` | `active` \| `inactive` | Estado: active o inactive | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | --- ## Calendar **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ------- | ----------------------------- | | `data-calendar` | (flag) | Siempre presente en el root | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | ### Cell | Attr | Valores | Descripción | | ----------------------------- | ------------------------------------ | ------------------------------------------- | | `data-calendar-cell` | (flag) | Celda individual del calendario | | `data-disabled` | (flag) | Presente cuando la celda está deshabilitada | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-unavailable` | (flag) | Presente cuando la fecha no está disponible | | `data-today` | (flag) | Presente si es la fecha de hoy | | `data-outside-month` | (flag) | Presente si es de otro mes | | `data-outside-visible-months` | (flag) | Presente si está fuera del rango visible | | `data-focused` | (flag) | Presente si tiene foco | | `data-selected` | (flag) | Presente si está seleccionada | | `data-value` | (flag) | Valor de la fecha (ISO string) | | `data-type` | `day` \| `week` \| `month` \| `year` | Tipo de fecha | ### Day | Attr | Valores | Descripción | | ------------------- | ------- | --------------------------- | | `data-calendar-day` | (flag) | Celda que representa un día | ### Header | Attr | Valores | Descripción | | ---------------------- | ------- | ------------------------ | | `data-calendar-header` | (flag) | Header con navegación | | `data-disabled` | (flag) | Hereda disabled del root | | `data-readonly` | (flag) | Hereda readonly del root | ### Heading | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------ | | `data-calendar-heading` | (flag) | Título con mes/año | --- ## DatePicker **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | ------- | --------------------------- | | `data-date-picker` | (flag) | Siempre presente en el root | ### Trigger | Attr | Valores | Descripción | | -------------------------- | ------- | ---------------------------- | | `data-date-picker-trigger` | (flag) | Trigger que abre el calendar | --- ## DateField **Versión del contrato:** 1 ### Input | Attr | Valores | Descripción | | ----------------------- | ------- | ----------------------------------------------- | | `data-date-field-input` | (flag) | Contenedor interactivo principal del date field | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Label | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------ | | `data-date-field-label` | (flag) | Label asociada al date field | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Segment | Attr | Valores | Descripción | | ------------------------- | ------- | ------------------------------------------ | | `data-date-field-segment` | (flag) | Segmento editable o literal del date field | | `data-segment` | (flag) | Tipo lógico de segmento | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando el segmento no es editable | --- ## TimeField **Versión del contrato:** 1 ### Input | Attr | Valores | Descripción | | ----------------------- | ------- | ----------------------------------------------- | | `data-time-field-input` | (flag) | Contenedor interactivo principal del time field | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Label | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------ | | `data-time-field-label` | (flag) | Label asociada al time field | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Segment | Attr | Valores | Descripción | | ------------------------- | ------- | ------------------------------------------ | | `data-time-field-segment` | (flag) | Segmento editable o literal del time field | | `data-segment` | (flag) | Tipo lógico de segmento | | `data-invalid` | (flag) | Presente cuando el valor es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando el segmento no es editable | --- ## DateRangeField **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------ | | `data-date-range-field` | (flag) | Siempre presente en el root | | `data-invalid` | (flag) | Presente cuando el rango es inválido | ### Label | Attr | Valores | Descripción | | ----------------------------- | ------- | ------------------------------------ | | `data-date-range-field-label` | (flag) | Label asociada al date range field | | `data-invalid` | (flag) | Presente cuando el rango es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | --- ## TimeRangeField **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ----------------------- | ------- | ------------------------------------ | | `data-time-range-field` | (flag) | Siempre presente en el root | | `data-invalid` | (flag) | Presente cuando el rango es inválido | ### Label | Attr | Valores | Descripción | | ----------------------------- | ------- | ------------------------------------ | | `data-time-range-field-label` | (flag) | Label asociada al rango horario | | `data-invalid` | (flag) | Presente cuando el rango es inválido | | `data-disabled` | (flag) | Presente cuando disabled=true | --- ## PinInput **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ---------------- | ------- | --------------------------- | | `data-pin-input` | (flag) | Siempre presente en el root | ### Cell | Attr | Valores | Descripción | | --------------------- | ------- | -------------------------------------- | | `data-pin-input-cell` | (flag) | Celda visual individual del pin input | | `data-active` | (flag) | Presente cuando la celda está activa | | `data-inactive` | (flag) | Presente cuando la celda está inactiva | --- ## LinkPreview **Versión del contrato:** 1 ### Trigger | Attr | Valores | Descripción | | --------------------------- | ------------------ | -------------------------------- | | `data-link-preview-trigger` | (flag) | Trigger que abre el link preview | | `data-state` | `open` \| `closed` | Estado: open o closed | ### Content | Attr | Valores | Descripción | | --------------------------- | ------------------ | ----------------------------------- | | `data-link-preview-content` | (flag) | Contenido flotante del link preview | | `data-state` | `open` \| `closed` | Estado: open o closed | --- ## Progress **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | --------------- | ---------------------------------------- | --------------------------- | | `data-progress` | (flag) | Siempre presente en el root | | `data-value` | (flag) | Valor actual cuando existe | | `data-max` | (flag) | Valor maximo | | `data-min` | (flag) | Valor minimo | | `data-state` | `indeterminate` \| `loading` \| `loaded` | Estado del progress | ### Track | Attr | Valores | Descripción | | --------------------- | ------- | -------------- | | `data-progress-track` | (flag) | Track de fondo | ### Fill | Attr | Valores | Descripción | | -------------------- | ----------------------------- | ------------------ | | `data-progress-fill` | (flag) | Porción completada | | `data-state` | `indeterminate` \| `complete` | Estado especial | --- ## Meter **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------ | ------- | --------------------------- | | `data-meter` | (flag) | Siempre presente en el root | | `data-value` | (flag) | Valor actual | | `data-max` | (flag) | Valor maximo | | `data-min` | (flag) | Valor minimo | --- ## Spinner **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | -------------- | ------- | --------------------------- | | `data-spinner` | (flag) | Siempre presente en el root | | `data-variant` | (flag) | Variante visual del spinner | | `data-size` | (flag) | Tamano del spinner | | `data-speed` | (flag) | Velocidad del spinner | --- ## Avatar **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------- | -------------------------------- | ---------------------------- | | `data-avatar` | (flag) | Siempre presente en el root | | `data-status` | `loading` \| `loaded` \| `error` | Estado de carga de la imagen | ### Image | Attr | Valores | Descripción | | ------------------- | -------------------------------- | ------------------ | | `data-avatar-image` | (flag) | Elemento de imagen | | `data-status` | `loading` \| `loaded` \| `error` | Estado de carga | ### Fallback | Attr | Valores | Descripción | | ---------------------- | -------------------------------- | ----------------------------- | | `data-avatar-fallback` | (flag) | Fallback cuando no hay imagen | | `data-status` | `loading` \| `loaded` \| `error` | Estado heredado | --- ## Label **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------ | ------- | --------------------------- | | `data-label` | (flag) | Siempre presente en el root | --- ## Separator **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ------------------------- | | `data-separator` | (flag) | Siempre presente | | `data-orientation` | `horizontal` \| `vertical` | Orientación del separador | --- ## AspectRatio **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------- | ------- | --------------------------- | | `data-aspect-ratio` | (flag) | Siempre presente en el root | --- ## Toolbar **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | --------------------------- | | `data-toolbar` | (flag) | Siempre presente en el root | | `data-orientation` | `horizontal` \| `vertical` | Orientación del toolbar | ### Group | Attr | Valores | Descripción | | -------------------- | -------------------------- | -------------------------------------- | | `data-toolbar-group` | (flag) | Grupo de controles relacionados | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | | `data-disabled` | (flag) | Presente cuando el grupo está disabled | ### Group-item | Attr | Valores | Descripción | | ------------------------- | -------------------------- | --------------------------------------------- | | `data-toolbar-item` | (flag) | Ítem navegable del toolbar | | `data-toolbar-group-item` | (flag) | Ítem toggle dentro de un grupo | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | | `data-disabled` | (flag) | Presente cuando el item o grupo está disabled | | `data-state` | `on` \| `off` | Estado pressed del item | | `data-value` | (flag) | Valor del item dentro del grupo | ### Button | Attr | Valores | Descripción | | --------------------- | -------------------------- | -------------------------------------- | | `data-toolbar-item` | (flag) | Ítem navegable del toolbar | | `data-toolbar-button` | (flag) | Botón estándar dentro del toolbar | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | | `data-disabled` | (flag) | Presente cuando el botón está disabled | ### Link | Attr | Valores | Descripción | | ------------------- | -------------------------- | --------------------------- | | `data-toolbar-item` | (flag) | Ítem navegable del toolbar | | `data-toolbar-link` | (flag) | Enlace dentro del toolbar | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | --- ## Splitter **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ----------------------------- | | `data-splitter` | (flag) | Siempre presente en el root | | `data-orientation` | `horizontal` \| `vertical` | Orientación del splitter | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Panel | Attr | Valores | Descripción | | --------------------- | ------- | ----------------------------------------- | | `data-splitter-panel` | (flag) | Panel redimensionable | | `data-panel-id` | (flag) | Identificador lógico del panel | | `data-disabled` | (flag) | Presente cuando el splitter está disabled | ### Resize-trigger | Attr | Valores | Descripción | | ------------------------------ | -------------------------- | ----------------------------------------------- | | `data-splitter-resize-trigger` | (flag) | Handle para redimensionar entre paneles | | `data-orientation` | `horizontal` \| `vertical` | Orientación del handle | | `data-disabled` | (flag) | Presente cuando el handle está disabled | | `data-dragging` | (flag) | Presente mientras el usuario arrastra el handle | --- ## ScrollArea **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | ------- | --------------------------- | | `data-scroll-area` | (flag) | Siempre presente en el root | ### Viewport | Attr | Valores | Descripción | | --------------------------- | ------- | --------------- | | `data-scroll-area-viewport` | (flag) | Área con scroll | ### Content | Attr | Valores | Descripción | | -------------------------- | ------- | -------------------------------------------- | | `data-scroll-area-content` | (flag) | Contenedor interno del contenido desplazable | ### Scrollbar | Attr | Valores | Descripción | | ---------------------------- | -------------------------- | --------------------------- | | `data-scroll-area-scrollbar` | (flag) | Scrollbar personalizada | | `data-orientation` | `horizontal` \| `vertical` | Orientación de la scrollbar | | `data-state` | `visible` \| `hidden` | Visibilidad de la scrollbar | ### Thumb | Attr | Valores | Descripción | | ------------------------ | --------------------- | --------------------- | | `data-scroll-area-thumb` | (flag) | Thumb de la scrollbar | | `data-state` | `visible` \| `hidden` | Visibilidad del thumb | ### Corner | Attr | Valores | Descripción | | ------------------------- | ------- | ------------------------ | | `data-scroll-area-corner` | (flag) | Esquina entre scrollbars | --- ## Pagination **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | -------------------------- | ---------------------------- | | `data-pagination` | (flag) | Siempre presente en el root | | `data-orientation` | `horizontal` \| `vertical` | Orientación de la paginación | ### Page | Attr | Valores | Descripción | | ---------------------- | ------- | ------------------------------------------- | | `data-pagination-page` | (flag) | Botón de página individual | | `data-selected` | (flag) | Presente cuando la página está seleccionada | | `data-page` | (flag) | Número de página asociado | ### Prev-button | Attr | Valores | Descripción | | ----------------------------- | ------- | -------------------------------------------- | | `data-pagination-prev-button` | (flag) | Botón para ir a la página anterior | | `data-disabled` | (flag) | Presente cuando no puede navegar hacia atrás | ### Next-button | Attr | Valores | Descripción | | ----------------------------- | ------- | ---------------------------------------------- | | `data-pagination-next-button` | (flag) | Botón para ir a la página siguiente | | `data-disabled` | (flag) | Presente cuando no puede navegar hacia delante | --- ## RatingGroup **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------- | -------------------------- | ----------------------------- | | `data-rating-group` | (flag) | Siempre presente en el root | | `data-disabled` | (flag) | Presente cuando disabled=true | | `data-readonly` | (flag) | Presente cuando readonly=true | | `data-orientation` | `horizontal` \| `vertical` | Orientación del rating | ### Item | Attr | Valores | Descripción | | ------------------------ | ----------------------------------- | -------------------------------- | | `data-rating-group-item` | (flag) | Cada item de rating | | `data-state` | `active` \| `partial` \| `inactive` | Estado del item | | `data-disabled` | (flag) | Hereda disabled del root | | `data-readonly` | (flag) | Hereda readonly del root | | `data-orientation` | `horizontal` \| `vertical` | Hereda orientación del root | | `data-value` | (flag) | Índice visual del item (1-based) | --- ## ColorPicker **Versión del contrato:** 1 ### Trigger | Attr | Valores | Descripción | | --------------------------- | ------- | -------------------------------------- | | `data-color-picker-trigger` | (flag) | Boton disparador del selector de color | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Content | Attr | Valores | Descripción | | --------------------------- | ------- | ------------------------------------- | | `data-color-picker-content` | (flag) | Panel principal del selector de color | ### Area | Attr | Valores | Descripción | | ------------------------ | ------- | --------------------------- | | `data-color-picker-area` | (flag) | Area de saturacion y brillo | ### Area-thumb | Attr | Valores | Descripción | | ------------------------------ | ------- | --------------------------------- | | `data-color-picker-area-thumb` | (flag) | Thumb de posicion dentro del area | ### Hue-slider | Attr | Valores | Descripción | | ------------------------------ | ------- | ----------------------- | | `data-color-picker-hue-slider` | (flag) | Slider de hue del color | ### Alpha-slider | Attr | Valores | Descripción | | -------------------------------- | ------- | ------------------------- | | `data-color-picker-alpha-slider` | (flag) | Slider de alpha del color | ### Input | Attr | Valores | Descripción | | ------------------------- | ------- | -------------------------- | | `data-color-picker-input` | (flag) | Input de edicion del color | ### Swatches | Attr | Valores | Descripción | | ---------------------------- | ------- | ----------------------------------- | | `data-color-picker-swatches` | (flag) | Contenedor de muestras predefinidas | ### Swatch | Attr | Valores | Descripción | | -------------------------- | ------- | -------------------------------------------- | | `data-color-picker-swatch` | (flag) | Muestra individual seleccionable | | `data-selected` | (flag) | Presente cuando la muestra esta seleccionada | ### Eyedropper | Attr | Valores | Descripción | | ------------------------------ | ------- | ------------------------------------------ | | `data-color-picker-eyedropper` | (flag) | Boton para abrir el eyedropper del sistema | --- ## Toast **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------ | -------------------------------------------------------- | --------------------------- | | `data-toast` | (flag) | Siempre presente en el root | | `data-state` | `open` \| `closed` | Estado del toast | | `data-type` | `default` \| `success` \| `error` \| `warning` \| `info` | Tipo de toast | --- ## FileUpload **Versión del contrato:** 1 ### Root | Attr | Valores | Descripción | | ------------------ | ------- | ----------------------------- | | `data-file-upload` | (flag) | Siempre presente en el root | | `data-disabled` | (flag) | Presente cuando disabled=true | ### Dropzone | Attr | Valores | Descripción | | --------------------------- | ------- | ---------------------------- | | `data-file-upload-dropzone` | (flag) | Zona de drag & drop | | `data-disabled` | (flag) | Hereda disabled del root | | `data-dragging` | (flag) | Presente durante drag activo | ### File-list | Attr | Valores | Descripción | | ---------------------------- | ------- | ----------------- | | `data-file-upload-file-list` | (flag) | Lista de archivos | ### Item | Attr | Valores | Descripción | | ----------------------- | ------- | --------------------------- | | `data-file-upload-item` | (flag) | Item de archivo | | `data-file-name` | (flag) | Nombre del archivo asociado | ### Item-name | Attr | Valores | Descripción | | ---------------------------- | ------- | -------------------------- | | `data-file-upload-item-name` | (flag) | Nombre visible del archivo | ### Item-size | Attr | Valores | Descripción | | ---------------------------- | ------- | ----------------------------- | | `data-file-upload-item-size` | (flag) | Tamano formateado del archivo | ### Item-remove | Attr | Valores | Descripción | | ------------------------------ | ------- | ---------------------------- | | `data-file-upload-item-remove` | (flag) | Accion para eliminar archivo | ### Item-progress | Attr | Valores | Descripción | | -------------------------------- | ------- | --------------------------- | | `data-file-upload-item-progress` | (flag) | Indicador/barra de progreso | ---